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