214e92a5d890f8b0edc4c457fdc042822f79bdf6
[redakcja.git] / src / 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 3em 3em 45px;
8     overflow-y: scroll;
9     overflow-x: auto;
10 }
11
12 .htmlview[data-tag-names-visible] {
13     padding-left: 90px;
14 }
15
16 .htmlview *[x-node = 'RDF'][x-ns = 'http://www.w3.org/1999/02/22-rdf-syntax-ns#'] {
17     display: none;
18 }
19
20 .htmlview * {
21     position: relative;
22 }
23
24 .htmlview div {
25     max-width: 36em;
26 }
27
28 .htmlview #toc {
29     display: none;
30 }
31
32 .htmlview a {
33     color: blue;
34     text-decoration: none;
35 }
36
37 .htmlview a:hover {
38     text-decoration: none;
39 }
40
41 .htmlview .nazwa_utworu {
42     font-size: 3em;
43     margin: 1.5em 0;
44     text-align: center;
45     line-height: 1.5em;
46     font-weight: bold;
47 }
48
49 .htmlview .autor_utworu,
50 .htmlview .dzielo_nadrzedne,
51 .htmlview .naglowek_czesc,
52 .htmlview .srodtytul,
53 .htmlview .naglowek_akt
54 {
55     font-size: 2em;
56     margin: 1.5em 0 0;
57     font-weight: bold;
58     line-height: 1.5em;
59 }
60
61 .htmlview .podtytul,
62 .htmlview .naglowek_scena,
63 .htmlview .naglowek_rozdzial
64     font-size: 1.5em;
65     margin: 1.5em 0 0;
66     font-weight: normal;
67     line-height: 1.5em;
68 }
69
70 .htmlview .naglowek_podrozdzial,
71 .htmlview .naglowek_osoba
72 {
73     font-size: 1em;
74     margin: 1.5em 0 0;
75     line-height: 1.5em;
76     font-weight: bold;
77 }
78
79 .htmlview p {
80     margin: 0;
81 }
82
83 .htmlview #footnotes div {
84     margin: 1.5em 0 0 0;
85 }
86
87 .htmlview #footnotes p {
88     margin-left: 2.5em;
89     font-size: 0.875em;
90 }
91
92 .htmlview blockquote {
93     font-size: 0.875em;
94 }
95
96 .htmlview pre {
97         overflow-x: auto; /* Use horizontal scroller if needed; for Firefox 2, not needed in Firefox 3 */
98         white-space: pre-wrap; /* css-3 */
99         white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
100         white-space: -pre-wrap; /* Opera 4-6 */
101         white-space: -o-pre-wrap; /* Opera 7 */ /*
102         width: 99%; */
103         word-wrap: break-word; /* Internet Explorer 5.5+ */
104 }
105
106 /* ============= */
107 /* = Numbering = */
108 /* ============= */
109 .htmlview .anchor {
110     position: relative;
111     margin: 0;
112     left: -2.2em;
113     color: #777;
114     font-size: 12px;
115     width: 2em;
116     text-align: center;
117     padding: 0.25em 0.7em;
118     line-height: 1.5em;
119 }
120
121 .htmlview .anchor:hover, .htmlview .anchor:active {
122     color: #FFF;
123     background-color: #CCC;
124 }
125
126 /* =================== */
127 /* = Custom elements = */
128 /* =================== */
129 .htmlview .autor_utwor {
130     font-size: 0.5em;
131     display: block;
132     line-height: 1.5em;
133     margin-bottom: 0.25em;
134 }
135
136 .htmlview .dzielo_nadrzedne {
137     /* */
138 }
139
140 .htmlview .podtytul {
141     /* */
142 }
143
144 .htmlview .didaskalia {
145     font-style: italic;
146     margin: 0.5em 0 0 1.5em;
147 }
148
149 .htmlview .kwestia {
150     margin: 0.5em 0 0;
151 }
152
153 .htmlview .strofa {
154     margin: 1.5em 0 0.5em auto;
155 }
156
157 /* wersy */
158 .htmlview *[x-verse]:after {
159     content: "\feff";
160 }
161
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 .htmlview .strofa .wers_do_prawej {
187     text-align: right;
188 }
189
190 /* błędne wersy */
191 .htmlview *:not(.strofa) > *[x-verse]::after {
192     content: "Ten wers znajduje się poza strofą.";
193     display: inline;
194     background: red;
195     font-size: 8pt;
196     border: 1px solid black;
197     -moz-border-radius: 10px;
198     -webkit-border-radius: 10px;
199     padding: 1px 1em;
200     margin-left: 1em;
201     vertical-align: super;
202 }
203
204 .htmlview .kwestia .strofa {
205     margin: 0;
206 }
207
208 .htmlview .akap, .htmlview .akap_cd, .htmlview .akap_dialog {
209     text-align: justify;
210     margin: 1.5em 0 0;
211 }
212
213 .htmlview .motto_container {
214         display: inline-block;
215         margin: 1.5em 0 0;
216         clear: right;
217 }
218
219 .htmlview .motto {
220     text-align: justify;
221     font-style: italic;
222 }
223
224 .htmlview p.motto_podpis {
225         position: relative;
226         right: -3em;
227         text-align: right;
228 }
229
230 .htmlview div.fragment {
231     border-bottom: 0.1em solid #999;
232     padding-bottom: 1.5em;
233 }
234
235 .htmlview div.nota p, .htmlview div.dedykacja p {
236     text-align: right;
237     font-style: italic;
238 }
239
240 .htmlview div.ramka {
241     border: 1px darkgray solid;
242 }
243
244 .htmlview .nota_red {
245     background-color: #eee;
246     border: 1px solid #888;
247     -moz-border-radius: 10px;
248     -webkit-border-radius: 10px;
249     display: block;
250     padding: 0 1em 1em 1em;
251 }
252
253 .htmlview hr.sekcja_swiatlo {
254     margin: 2em 0;
255     visibility: hidden;
256 }
257
258 .htmlview hr.separator_linia {
259     margin: 1.5em 0;
260     border: none;
261     border-bottom: 0.1em solid #000;
262 }
263
264 .htmlview hr.sekcja_asterysk {
265     border: none;
266     padding: 0;
267     margin: 1.5em 0;
268     text-align: center;
269 }
270
271 .htmlview hr.sekcja_asterysk:after {
272     content: "*";
273 }
274
275 .htmlview div.lista_osob ol {
276     list-style: none;
277     padding: 0 0 0 1.5em;
278 }
279
280 .htmlview p.miejsce_czas {
281     font-style: italic;
282 }
283
284 .htmlview .mat, .htmlview .slowo_obce, .htmlview .tytul_dziela, .htmlview .didaskalia {
285     font-style: italic;
286 }
287
288
289 .htmlview .indeks_dolny {
290     font-style: normal;
291     vertical-align: sub;
292     font-size: .9em;
293 }
294
295 .htmlview .wyroznienie {
296     letter-spacing: 0.1em;
297 }
298
299 .htmlview .osoba {
300     font-style: normal;
301     font-variant: small-caps;
302 }
303
304 .htmlview em.wieksze_odstepy {
305     font-style: normal;
306     word-spacing: 1em;
307 }
308
309 .htmlview .ilustr img {
310     max-width: 100%;
311 }
312
313 .htmlview .parse-warning {
314     display: block;
315     font-size: 10pt;
316     background: #C0C0C0;
317     margin: 1em;
318 }
319
320 .parse-warning .message {
321     color: purple;
322     font-weight: bold;
323 }
324
325 /* Uwaga/Extra */
326 .htmlview .uwaga {
327     background-color: #96e0e4;
328     border: 1px solid black;
329     -moz-border-radius: 10px;
330     -webkit-border-radius: 10px;
331     display: block;
332     font-size: 10pt;
333     line-height: 12pt;
334     padding: 2px 1em;
335     float: right;
336     max-width: 20%;
337     max-height: 24pt;
338     margin-left: 0.5em;
339     z-index: 500;
340 }
341
342 div[x-node] > .uwaga {
343     float: none;
344     padding: 0.5em 1em;
345     margin: 1em;
346     max-width: 100%;
347     max-height: 100%;
348     border: 1px solid black;
349 }
350
351 .htmlview .uwaga:hover {
352     max-height: 100%;
353 }
354
355 .htmlview .annotation-inline-box .uwaga {
356     max-height: 100%;
357 }
358
359 /* Motywy */
360 /* ======================== */
361 /* = Footnotes and themes = */
362 /* ======================== */
363 .htmlview .begin, .htmlview .end {
364     background: green;
365 }
366
367 .htmlview .motyw {
368     /* position: absolute; */
369     float: right;
370     left: auto;
371     clear: right;
372     width: 10em;
373
374     font-style: normal;
375     font-weight: normal;
376     font-variant: normal;
377     letter-spacing: 0;
378     text-transform: none;
379     text-decoration: none;
380
381     font-size: 13px;
382     line-height: 18px;
383     background-color: #fff;
384     /*    border: 1px solid gray;
385
386      border-right: none;
387      */
388     z-index: 1;
389     -moz-user-select: -moz-none;
390     -webkit-user-select: none;
391     user-select: none;
392     margin-right: -12em;
393     text-align: left;
394     color: #999;
395 }
396
397 .htmlview .canon {
398     color: black;
399 }
400
401 .htmlview .noncanon {
402     color: #d00;
403 }
404
405 .htmlview .motyw[x-editable] {
406     border-left: 4px solid #DDD;
407     padding: 0.2em 0.2em 0.2em 0.5em;
408     margin-top: 0.2em;
409 }
410
411 /*
412  * Przypisy
413  */
414 /* Znaczniki w tekście */
415 .annotation {
416     font-style: normal;
417 }
418
419 .htmlview .annotation:before {
420     content: "[" counter(main) "]";
421     counter-increment: main;
422         vertical-align: super;
423     text-decoration: none;
424         font-size: 66%;
425 }
426
427 .htmlview .annotation:hover {
428     background-color: #ffcccc;
429 }
430 .htmlview .pe .annotation:hover {
431     background-color: #96e0e4;
432 }
433 *.htmlview *.annotation-inline-box {
434     position: static;
435 }
436
437 /*
438  * Przypisy w tekście
439  */
440  
441 .htmlview .annotation-inline-box:hover > span[x-annotation-box]{
442     display: block;
443 }
444
445 .htmlview .annotation-inline-box > span[x-annotation-box] {
446     display: none;
447     width: 300px;
448     font-size: 10pt;
449     line-height: 12pt;
450     font-weight: normal;
451     font-style: normal;
452     background: #fffe93;
453     border: 1px solid black;
454     border-radius: 10px;
455     -moz-border-radius: 10px;
456     -webkit-border-radius: 10px;
457     padding: 3px 5px;
458     text-decoration: none;
459     z-index: 600;
460 }
461
462 /*
463  * Przypisy na końcu utworu (aktualnie nieuzywane)
464  */
465 .htmlview .annotations-block {
466     counter-reset: secondary;
467 }
468
469 .htmlview .annotations-block .annotation-body {
470     position: relative;
471     padding-left: 2.5em;
472     padding-top: 0.2em;
473 }
474
475 .htmlview .annotations-block .annotation-backref {
476     position: absolute;
477     top: 0.4em;
478     left: -0.4em;
479     width: 2.5em;
480     text-align: right;
481 }
482
483 .htmlview .annotations-block .annotation-backref:before {
484     content: "[" counter(secondary) "]";
485     counter-increment: secondary;
486 }
487
488 /*
489  * EDITABLE ELEMENTS
490  */
491 .htmlview *[x-editable] {
492     position: relative;
493     padding: 2px;
494     margin-left: 0;
495     border: 1px solid transparent;
496 }
497
498 /* focused editable element */
499 .htmlview *[x-editable]:hover {
500     z-index: 900;
501 }
502
503 .htmlview *[x-editable][x-open] {
504     visibility: hidden;
505 }
506
507 .edit-button, .delete-button, .accept-button, .tytul-button, .wyroznienie-button, .slowo-button, .znak-button {
508     font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
509     font-size: 16px;
510     line-height: 1.5;
511     position: absolute;
512     top: -28px;
513     left: -1px;
514     width: 72px;
515     height: 28px;
516     display: block;
517     /*    margin: 4px 0 2px 0;*/
518     padding: 5px 5px 2px 5px;
519     background-color: #FAFAFA;
520     /*    z-index: 3000;*/
521     /*    color: #FFF;
522      z-index: 1500;
523      */
524     border: 1px solid #DDD;
525     border-bottom: none;
526 }
527
528 .delete-button {
529     left: 70px;
530 }
531
532 .tytul-button {
533     left:150px;
534     width:100px;
535 }
536
537 .wyroznienie-button {
538     left:250px;
539     width:100px;
540 }
541 .slowo-button {
542     left:350px;
543     width:100px;
544 }
545 .znak-button {
546     left:450px;
547     width:100px;
548 }
549
550 .edit-button:hover, .edit-button:active,
551 .delete-button:hover, .delete-button:active,
552 .accept-button:hover, .accept-button:active,
553 .tytul-button:hover, .tytul-button:active,
554 .wyroznienie-button:hover, .wyroznienie-button:active,
555 .slowo-button:hover, .slowo-button:active,
556 .znak-button:hover, .znak-button:active {
557     /*    color: #FFF;*/
558     background-color: #999;
559     color: #FFF;
560 }
561
562 /*
563  * VISIBILITY RULES
564  */
565 .default-menu {
566     visibility: inherit;
567     opacity: 0.2;
568 }
569
570 .default-menu:hover {
571     opacity: 1;
572     z-index: 5000;
573 }
574
575 .htmlview *[x-annotation-box] > .default-menu {
576     opacity: 1;
577 }
578
579 .htmlview *[x-editable][x-open] > .default-menu {
580     visibility: hidden;
581 }
582
583 .htmlview *[x-editable][x-open] *[x-annotation-box] > .default-menu {
584     visibility: hidden;
585 }
586
587 .htmlview *[x-editable] > .edit-menu {
588     visibility: hidden;
589 }
590
591 .htmlview *[x-editable] *[x-annotation-box] > .edit-menu {
592     visibility: hidden;
593 }
594
595 .htmlview *[x-editable][x-open] > .edit-menu {
596     visibility: visible;
597 }
598
599 .htmlview *[x-editable][x-open] *[x-annotation-box] > .edit-menu {
600     visibility: visible;
601 }
602
603 .html-editarea {
604     border: 0;
605     background-color: gray;
606     padding: 1px;
607     z-index: 2000;
608     position: absolute;
609     text-align: left;
610 }
611
612 .html-editarea textarea {
613     position: absolute;
614     top: 0;
615     margin: 0;
616     padding: 0;
617     width: 100%;
618     height: 100%;
619     z-index: 0;
620     font-size: 10pt;
621     font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
622     line-height: 1.25;
623     /*    background-color: ivory;*/
624 }
625
626 .htmlview .out-of-flow-text {
627     display: block;
628     font-family: monospace;
629     border: 2px solid red !important;
630     white-space: pre-line;
631 }
632
633 .htmlview .out-of-flow-text::before {
634     content: "Tekst w tej ramce nie jest otagowany!";
635     background-color: #ff6c6c;
636     color: black;
637     font-size: 10pt;
638     line-height: 12pt;
639     border: 1px solid black;
640     -moz-border-radius: 10px;
641     -webkit-border-radius: 10px;
642     padding: 5px 1em;
643     margin: 0 0 0 1em;
644     text-align: justify;
645     display: inline;
646     float: right;
647     max-width: 25%;
648 }
649
650 .unknown-tag {
651     background-color: yellow;
652     margin: -0.25em;
653     padding: 0.25em;
654     border: 1px solid orange;
655 }
656
657 .alien {
658     color: red;
659 }
660
661 /* specialChars */
662 #specialCharsContainer {
663     text-align: center; 
664     width: 640px; 
665     height: 400px;
666     padding:20px; 
667     background-color: gray; 
668     position: absolute; 
669     top: 20px; 
670     right: 20px; 
671     z-index:10000;
672     overflow:auto;
673 }
674 #specialCharsContainer a {
675     color: white;
676     font-weight: bold;
677
678
679 #tableSpecialChars td input {
680     background-color: transparent;
681     border:0;
682     color: white;
683
684
685 #tableSpecialChars td input.recentSymbol {
686     background-color: white;
687     border:0;
688     color: black;
689