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