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