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