3072d9b4b80a826c5584da375c81a6e45a0db392
[redakcja.git] / redakcja / static / css / html.css
1 /* Style widoku HTML. Nie należy tu ustawiać position ani marginesów */
2 .htmlview {
3     counter-reset: main;
4     font-size: 16px;
5     font-family: "Georgia", "Times New Roman", serif;
6     line-height: 1.5em;
7     padding: 3em;
8     padding-left: 45px;
9     overflow-y: scroll;
10     overflow-x: auto;
11 }
12
13 .htmlview[data-tag-names-visible] {
14     padding-left: 90px;
15 }
16
17 /*
18  .htmlview[data-tag-names-visible] *[x-editable]:not(*[x-common])::before {
19  display: block;
20  float: left;
21  clear: left;
22  content: attr(x-node);
23  font-weight: bold;
24  font-style: normal;
25  font-variant:normal;
26  font-size: 8px;
27  line-height: 8px;
28  margin-bottom: 4px;
29
30  padding: 3px 4px;
31  vertical-align: super;
32  background-color:#add8e6;
33  margin-left: -80px;
34  width: 70px;
35  text-align: center;
36
37  -webkit-border-radius: 4px;
38  }
39  */
40 .htmlview *[x-node = 'RDF'] {
41     display: none;
42 }
43
44 .htmlview * {
45     position: relative;
46 }
47
48 .htmlview div {
49     max-width: 36em;
50 }
51
52 .htmlview #toc {
53     display: none;
54 }
55
56 .htmlview a {
57     color: blue;
58     text-decoration: none;
59 }
60
61 .htmlview a:hover {
62     text-decoration: none;
63 }
64
65 .htmlview h1 {
66     font-size: 3em;
67     margin: 1.5em 0;
68     text-align: center;
69     line-height: 1.5em;
70     font-weight: bold;
71 }
72
73 .htmlview h2 {
74     font-size: 2em;
75     margin: 1.5em 0 0;
76     font-weight: bold;
77     line-height: 1.5em;
78 }
79
80 .htmlview h3 {
81     font-size: 1.5em;
82     margin: 1.5em 0 0;
83     font-weight: normal;
84     line-height: 1.5em;
85 }
86
87 .htmlview h4 {
88     font-size: 1em;
89     margin: 1.5em 0 0;
90     line-height: 1.5em;
91 }
92
93 .htmlview p {
94     margin: 0;
95 }
96
97 .htmlview #footnotes div {
98     margin: 1.5em 0 0 0;
99 }
100
101 .htmlview #footnotes p {
102     margin-left: 2.5em;
103     font-size: 0.875em;
104 }
105
106 .htmlview blockquote {
107     font-size: 0.875em;
108 }
109
110 /* ============= */
111 /* = Numbering = */
112 /* ============= */
113 .htmlview .anchor {
114     position: relative;
115     margin: 0em;
116     left: -2.2em;
117     color: #777;
118     font-size: 12px;
119     width: 2em;
120     text-align: center;
121     padding: 0.25em 0.7em;
122     line-height: 1.5em;
123 }
124
125 .htmlview .anchor:hover, .htmlview .anchor:active {
126     color: #FFF;
127     background-color: #CCC;
128 }
129
130 /* =================== */
131 /* = Custom elements = */
132 /* =================== */
133 .htmlview .autor_utwor {
134     font-size: 0.5em;
135     display: block;
136     line-height: 1.5em;
137     margin-bottom: 0.25em;
138 }
139
140 .htmlview .dzielo_nadrzedne {
141     /* */
142 }
143
144 .htmlview .podtytul {
145     /* */
146 }
147
148 .htmlview .didaskalia {
149     font-style: italic;
150     margin: 0.5em 0 0 1.5em;
151 }
152
153 .htmlview .kwestia {
154     margin: 0.5em 0 0;
155 }
156
157 .htmlview .strofa {
158     margin: 1.5em 0 0.5em auto;
159 }
160
161 /* wersy */
162 .htmlview .strofa .wers_wciety, .htmlview .strofa .wers_wciety[data-wlf-typ='1'] {
163     margin-left: 1em;
164 }
165
166 .htmlview .strofa .wers_wciety[data-wlf-typ='2'], .htmlview .strofa .wers_cd {
167     margin-left: 2em;
168 }
169
170 .htmlview .strofa .wers_wciety[data-wlf-typ='3'] {
171     margin-left: 3em;
172 }
173
174 .htmlview .strofa .wers_wciety[data-wlf-typ='4'] {
175     margin-left: 4em;
176 }
177
178 .htmlview .strofa .wers_wciety[data-wlf-typ='5'] {
179     margin-left: 5em;
180 }
181
182 .htmlview .strofa .wers_wciety[data-wlf-typ='6'] {
183     margin-left: 6em;
184 }
185
186 /* błędne wersy */
187 .htmlview *:
188 not(.strofa) > *[x-verse]::after {
189     content: "Ten wers znajduje się poza strofą.";
190     display: inline;
191     background: red;
192     font-size: 8pt;
193     border: 1px solid black;
194     -moz-border-radius: 10px;
195     -webkit-border-radius: 10px;
196     padding: 1px 1em;
197     margin-left: 1em;
198     vertical-align: super;
199 }
200
201 .htmlview .kwestia .strofa {
202     margin: 0;
203 }
204
205 .htmlview .akap, .htmlview .akap_cd, .htmlview .akap_dialog {
206     text-align: justify;
207     margin: 1.5em 0 0;
208 }
209
210 .htmlview .motto_container {
211         display: inline-block;
212         margin: 1.5em 0 0;
213         clear: right;
214 }
215
216 .htmlview .motto {
217     text-align: justify;
218     font-style: italic;
219 }
220
221 .htmlview p.motto_podpis {
222         position: relative;
223         right: -3em;
224         text-align: right;
225 }
226
227 .htmlview div.fragment {
228     border-bottom: 0.1em solid #999;
229     padding-bottom: 1.5em;
230 }
231
232 .htmlview div.nota p, .htmlview div.dedykacja p {
233     text-align: right;
234     font-style: italic;
235 }
236
237 .htmlview br.sekcja_swiatlo {
238     height: 3em;
239     /* visibility: hidden; */
240 }
241
242 .htmlview hr.separator_linia {
243     margin: 1.5em 0;
244     border: none;
245     border-bottom: 0.1em solid #000;
246 }
247
248 .htmlview p.sekcja_asterysk {
249     padding: 0;
250     margin: 1.5em 0;
251     text-align: center;
252 }
253
254 .htmlview div.lista_osob ol {
255     list-style: none;
256     padding: 0 0 0 1.5em;
257 }
258
259 .htmlview p.miejsce_czas {
260     font-style: italic;
261 }
262
263 .htmlview .mat, .htmlview .slowo_obce, .htmlview .tytul_dziela, .htmlview .didaskalia {
264     font-style: italic;
265 }
266
267 .htmlview .wyroznienie {
268     letter-spacing: 0.1em;
269 }
270
271 .htmlview .osoba {
272     font-style: normal;
273     font-variant: small-caps;
274 }
275
276 .htmlview .parse-warning {
277     display: block;
278     font-size: 10pt;
279     background: #C0C0C0;
280     margin: 1em;
281 }
282
283 .parse-warning .message {
284     color: purple;
285     font-weight: bold;
286 }
287
288 /* Uwaga/Extra */
289 .htmlview .uwaga {
290     background-color: #96e0e4;
291     border: 1px solid black;
292     -moz-border-radius: 10px;
293     -webkit-border-radius: 10px;
294     display: block;
295     font-size: 10pt;
296     line-height: 12pt;
297     padding: 2px 1em;
298     float: right;
299     max-width: 20%;
300     max-height: 24pt;
301     margin-left: 0.5em;
302     overflow: hidden;
303         z-index: 500;
304 }
305
306 div[x-node] > .uwaga {
307     float: none;
308     padding: 0.5em 1em;
309     margin: 1em;
310     max-width: 100%;
311     max-height: 100%;
312 }
313
314 .htmlview .uwaga:hover {
315     max-height: 100%;
316 }
317
318 .htmlview .annotation-inline-box .uwaga {
319     max-height: 100%;
320 }
321
322 /* Motywy */
323 /* ======================== */
324 /* = Footnotes and themes = */
325 /* ======================== */
326 .htmlview .begin, .htmlview .end {
327     background: green;
328 }
329
330 .htmlview .motyw {
331     /* position: absolute; */
332     float: right;
333     left: auto;
334     clear: right;
335     width: 10em;
336
337     font-style: normal;
338     font-weight: normal;
339     font-variant: normal;
340     letter-spacing: 0;
341     text-transform: none;
342     text-decoration: none;
343
344     font-size: 13px;
345     line-height: 18px;
346     background-color: #fff;
347     /*    border: 1px solid gray;
348
349      border-right: none;
350      */
351     z-index: 1;
352     -moz-user-select: -moz-none;
353     -webkit-user-select: none;
354     user-select: none;
355     margin-right: -12em;
356     text-align: left;
357 }
358
359 .htmlview .noncanon {
360     color: #d00;
361 }
362
363 .htmlview .motyw[x-editable] {
364     border-left: 4px solid #DDD;
365     padding: 0.2em 0.2em 0.2em 0.5em;
366     margin-top: 0.2em;
367 }
368
369 /*
370  * Przypisy
371  */
372 /* Znaczniki w tekście */
373 .annotation {
374     font-style: normal;
375 }
376
377 .htmlview .annotation:before {
378     content: "[" counter(main) "]";
379     counter-increment: main;
380         vertical-align: super;
381     text-decoration: none;
382         font-size: 66%;
383 }
384
385 .htmlview .annotation:hover {
386     background-color: #ffcccc;
387 }
388 .htmlview .pe .annotation:hover {
389     background-color: #96e0e4;*/
390 }
391 *.htmlview *.annotation-inline-box {
392     position: static;
393 }
394
395 /*
396  * Przypisy w tekście
397  */
398 .htmlview .annotation-inline-box > span[x-annotation-box] {
399     display: none;
400     position: absolute;
401     width: 300px;
402     font-size: 10pt;
403     line-height: 12pt;
404     font-weight: normal;
405     font-style: normal;
406     background: #fffe93;
407     border-color: black;
408     border-width: 1px;
409     border-style: solid;
410     border-radius: 10px;
411     -moz-border-radius: 10px;
412     -webkit-border-radius: 10px;
413     padding: 3px 5px;
414     text-decoration: none;
415     z-index: 600;
416 }
417
418 /*
419  * Przypisy na końcu utworu (aktualnie nieuzywane)
420  */
421 .htmlview .annotations-block {
422     counter-reset: secondary;
423 }
424
425 .htmlview .annotations-block .annotation-body {
426     position: relative;
427     padding-left: 2.5em;
428     padding-top: 0.2em;
429 }
430
431 .htmlview .annotations-block .annotation-backref {
432     position: absolute;
433     top: 0.4em;
434     left: -0.4em;
435     width: 2.5em;
436     text-align: right;
437 }
438
439 .htmlview .annotations-block .annotation-backref:before {
440     content: "[" counter(secondary) "]";
441     counter-increment: secondary;
442 }
443
444 /*
445  * EDITABLE ELEMENTS
446  */
447 .htmlview *[x-editable] {
448     position: relative;
449     padding: 2px;
450     margin-left: 0;
451     border: 1px solid #FFF;
452 }
453
454 /* focused editable element */
455 .htmlview *[x-editable]:hover {
456     z-index: 900;
457 }
458
459 .htmlview *[x-editable][x-open] {
460     visibility: hidden;
461 }
462
463 .edit-button, .delete-button, .accept-button {
464     position: absolute;
465     top: -21px;
466     left: -1px;
467     width: 72px;
468     height: 21px;
469     display: block;
470     /*    margin: 4px 0 2px 0;*/
471     padding: 5px 5px 2px 5px;
472     border: none;
473     background-color: #FAFAFA;
474     /*    z-index: 3000;*/
475     /*    color: #FFF;
476      z-index: 1500;
477      */
478     border: 1px solid #DDD;
479     border-bottom: none;
480 }
481
482 .delete-button {
483     left: 70px;
484 }
485
486 .edit-button:hover, .edit-button:active,
487 .delete-button:hover, .delete-button:active,
488 .accept-button:hover, .accept-button:active {
489     /*    color: #FFF;*/
490     background-color: #999;
491     color: #FFF;
492 }
493
494 /*
495  * VISIBILITY RULES
496  */
497 .default-menu {
498     visibility: inherit;
499     opacity: 0.2;
500 }
501
502 .default-menu:hover {
503     opacity: 1;
504     z-index: 5000;
505 }
506
507 .htmlview *[x-annotation-box] > .default-menu {
508     opacity: 1;
509 }
510
511 .htmlview *[x-editable][x-open] > .default-menu {
512     visibility: hidden;
513 }
514
515 .htmlview *[x-editable][x-open] *[x-annotation-box] > .default-menu {
516     visibility: hidden;
517 }
518
519 .htmlview *[x-editable] > .edit-menu {
520     visibility: hidden;
521 }
522
523 .htmlview *[x-editable] *[x-annotation-box] > .edit-menu {
524     visibility: hidden;
525 }
526
527 .htmlview *[x-editable][x-open] > .edit-menu {
528     visibility: visible;
529 }
530
531 .htmlview *[x-editable][x-open] *[x-annotation-box] > .edit-menu {
532     visibility: visible;
533 }
534
535 .html-editarea {
536     border: 0px;
537     background-color: gray;
538     padding: 1px;
539     z-index: 2000;
540     position: absolute;
541 }
542
543 .html-editarea textarea {
544     position: absolute;
545     top: 0;
546     margin: 0px;
547     padding: 0px;
548     width: 100%;
549     height: 100%;
550     z-index: 0;
551     font-size: 10pt;
552     /*    background-color: ivory;*/
553 }
554
555 .htmlview .out-of-flow-text {
556     display: block;
557     font-face: monospace;
558     border: 2px solid red !important;
559     white-space: pre-line;
560 }
561
562 .htmlview .out-of-flow-text::before {
563     content: "Tekst w tej ramce nie jest otagowany!";
564     background-color: #ff6c6c;
565     color: black;
566     font-size: 10pt;
567     line-height: 12pt;
568     border: 1px solid black;
569     -moz-border-radius: 10px;
570     -webkit-border-radius: 10px;
571     padding: 5px 1em;
572     margin: 0em;
573     margin-left: 1em;
574     text-align: justify;
575     display: inline;
576     float: right;
577     max-width: 25%;
578 }
579
580 .unknown-tag {
581     background-color: yellow;
582     margin: -0.25em;
583     padding: 0.25em;
584     border: 1px solid orange;
585 }