Merge branch 'edumed' of https://github.com/fnp/redakcja into edumed
[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 aktywnosc;
4     font-size: 16px;
5     font-family: "Georgia", "Times New Roman", serif;
6     line-height: 1.5em;
7     padding: 3em;
8     padding-left: 45px;
9     overflow-y: scroll;
10     overflow-x: auto;
11 }
12
13 .htmlview[data-tag-names-visible] {
14     padding-left: 90px;
15 }
16
17 /*
18  .htmlview[data-tag-names-visible] *[x-editable]:not(*[x-common])::before {
19  display: block;
20  float: left;
21  clear: left;
22  content: attr(x-node);
23  font-weight: bold;
24  font-style: normal;
25  font-variant:normal;
26  font-size: 8px;
27  line-height: 8px;
28  margin-bottom: 4px;
29
30  padding: 3px 4px;
31  vertical-align: super;
32  background-color:#add8e6;
33  margin-left: -80px;
34  width: 70px;
35  text-align: center;
36
37  -webkit-border-radius: 4px;
38  }
39  */
40 .htmlview *[x-node = 'RDF'][x-ns = 'http://www.w3.org/1999/02/22-rdf-syntax-ns#'] {
41     display: none;
42 }
43
44 .htmlview * {
45     position: relative;
46 }
47
48 .htmlview div {
49     max-width: 36em;
50 }
51
52 .htmlview #toc {
53     display: none;
54 }
55
56 .htmlview a {
57     color: blue;
58     text-decoration: none;
59 }
60
61 .htmlview a:hover {
62     text-decoration: none;
63 }
64
65 .htmlview h1 {
66     font-size: 3em;
67     margin: 1.5em 0;
68     text-align: center;
69     line-height: 1.5em;
70     font-weight: bold;
71 }
72
73 .htmlview h2 {
74     font-size: 2em;
75     margin: 1.5em 0 0;
76     font-weight: bold;
77     line-height: 1.5em;
78 }
79
80 .htmlview h3 {
81     font-size: 1.5em;
82     margin: 1.5em 0 0;
83     font-weight: normal;
84     line-height: 1.5em;
85 }
86
87 .htmlview h4 {
88     font-size: 1em;
89     margin: 1.5em 0 0;
90     line-height: 1.5em;
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: 0em;
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 /* błędne wersy */
201 .htmlview *:
202 not(.strofa) > *[x-verse]::after {
203     content: "Ten wers znajduje się poza strofą.";
204     display: inline;
205     background: red;
206     font-size: 8pt;
207     border: 1px solid black;
208     -moz-border-radius: 10px;
209     -webkit-border-radius: 10px;
210     padding: 1px 1em;
211     margin-left: 1em;
212     vertical-align: super;
213 }
214
215 .htmlview .kwestia .strofa {
216     margin: 0;
217 }
218
219 .htmlview .akap, .htmlview .akap_cd, .htmlview .akap_dialog {
220     text-align: justify;
221     margin: 1.5em 0 0;
222 }
223
224 .htmlview .motto_container {
225         display: inline-block;
226         margin: 1.5em 0 0;
227         clear: right;
228 }
229
230 .htmlview .motto {
231     text-align: justify;
232     font-style: italic;
233 }
234
235 .htmlview p.motto_podpis {
236         position: relative;
237         right: -3em;
238         text-align: right;
239 }
240
241 .htmlview div.fragment {
242     border-bottom: 0.1em solid #999;
243     padding-bottom: 1.5em;
244 }
245
246 .htmlview div.nota p, .htmlview div.dedykacja p {
247     text-align: right;
248     font-style: italic;
249 }
250
251 .htmlview .nota_red {
252     background-color: #eee;
253     border: 1px solid #888;
254     -moz-border-radius: 10px;
255     -webkit-border-radius: 10px;
256     display: block;
257     padding: 0 1em 1em 1em;
258 }
259
260 .htmlview hr.sekcja_swiatlo {
261     margin: 2em 0;
262     visibility: hidden;
263 }
264
265 .htmlview hr.separator_linia {
266     margin: 1.5em 0;
267     border: none;
268     border-bottom: 0.1em solid #000;
269 }
270
271 .htmlview p.sekcja_asterysk {
272     padding: 0;
273     margin: 1.5em 0;
274     text-align: center;
275 }
276
277 .htmlview p.sekcja_asterysk:after {
278     content: "*";
279 }
280
281 .htmlview div.lista_osob ol {
282     list-style: none;
283     padding: 0 0 0 1.5em;
284 }
285
286 .htmlview p.miejsce_czas {
287     font-style: italic;
288 }
289
290 .htmlview .mat, .htmlview .slowo_obce, .htmlview .tytul_dziela, .htmlview .didaskalia {
291     font-style: italic;
292 }
293
294 .htmlview .wyroznienie {
295     letter-spacing: 0.1em;
296 }
297
298 .htmlview .osoba {
299     font-style: normal;
300     font-variant: small-caps;
301 }
302
303 .htmlview .parse-warning {
304     display: block;
305     font-size: 10pt;
306     background: #C0C0C0;
307     margin: 1em;
308 }
309
310 .parse-warning .message {
311     color: purple;
312     font-weight: bold;
313 }
314
315 /* Uwaga/Extra */
316 .htmlview .uwaga {
317     background-color: #96e0e4;
318     border: 1px solid black;
319     -moz-border-radius: 10px;
320     -webkit-border-radius: 10px;
321     display: block;
322     font-size: 10pt;
323     line-height: 12pt;
324     padding: 2px 1em;
325     float: right;
326     max-width: 20%;
327     max-height: 24pt;
328     margin-left: 0.5em;
329     overflow: hidden;
330         z-index: 500;
331 }
332
333 div[x-node] > .uwaga {
334     float: none;
335     padding: 0.5em 1em;
336     margin: 1em;
337     max-width: 100%;
338     max-height: 100%;
339 }
340
341 .htmlview .uwaga:hover {
342     max-height: 100%;
343 }
344
345 .htmlview .annotation-inline-box .uwaga {
346     max-height: 100%;
347 }
348
349 /* Motywy */
350 /* ======================== */
351 /* = Footnotes and themes = */
352 /* ======================== */
353 .htmlview .begin, .htmlview .end {
354     background: green;
355 }
356
357 .htmlview .motyw {
358     /* position: absolute; */
359     float: right;
360     left: auto;
361     clear: right;
362     width: 10em;
363
364     font-style: normal;
365     font-weight: normal;
366     font-variant: normal;
367     letter-spacing: 0;
368     text-transform: none;
369     text-decoration: none;
370
371     font-size: 13px;
372     line-height: 18px;
373     background-color: #fff;
374     /*    border: 1px solid gray;
375
376      border-right: none;
377      */
378     z-index: 1;
379     -moz-user-select: -moz-none;
380     -webkit-user-select: none;
381     user-select: none;
382     margin-right: -12em;
383     text-align: left;
384     color: #999;
385 }
386
387 .htmlview .canon {
388     color: black;
389 }
390
391 .htmlview .noncanon {
392     color: #d00;
393 }
394
395 .htmlview .motyw[x-editable] {
396     border-left: 4px solid #DDD;
397     padding: 0.2em 0.2em 0.2em 0.5em;
398     margin-top: 0.2em;
399 }
400
401 /*
402  * Przypisy
403  */
404 /* Znaczniki w tekście */
405 .annotation {
406     font-style: normal;
407 }
408
409 .htmlview .annotation:before {
410     content: "[" counter(main) "]";
411     counter-increment: main;
412         vertical-align: super;
413     text-decoration: none;
414         font-size: 66%;
415 }
416
417 .htmlview .annotation:hover {
418     background-color: #ffcccc;
419 }
420 .htmlview .pe .annotation:hover {
421     background-color: #96e0e4;*/
422 }
423 *.htmlview *.annotation-inline-box {
424     position: static;
425 }
426
427 /*
428  * Przypisy w tekście
429  */
430  
431 .htmlview .annotation-inline-box:hover > span[x-annotation-box]{
432     display: block;
433 }
434
435 .htmlview .annotation-inline-box > span[x-annotation-box] {
436     display: none;
437     width: 300px;
438     font-size: 10pt;
439     line-height: 12pt;
440     font-weight: normal;
441     font-style: normal;
442     background: #fffe93;
443     border-color: black;
444     border-width: 1px;
445     border-style: solid;
446     border-radius: 10px;
447     -moz-border-radius: 10px;
448     -webkit-border-radius: 10px;
449     padding: 3px 5px;
450     text-decoration: none;
451     z-index: 600;
452 }
453
454 /*
455  * Przypisy na końcu utworu (aktualnie nieuzywane)
456  */
457 .htmlview .annotations-block {
458     counter-reset: secondary;
459 }
460
461 .htmlview .annotations-block .annotation-body {
462     position: relative;
463     padding-left: 2.5em;
464     padding-top: 0.2em;
465 }
466
467 .htmlview .annotations-block .annotation-backref {
468     position: absolute;
469     top: 0.4em;
470     left: -0.4em;
471     width: 2.5em;
472     text-align: right;
473 }
474
475 .htmlview .annotations-block .annotation-backref:before {
476     content: "[" counter(secondary) "]";
477     counter-increment: secondary;
478 }
479
480 /*
481  * EDITABLE ELEMENTS
482  */
483 .htmlview *[x-editable] {
484     position: relative;
485     padding: 2px;
486     margin-left: 0;
487     border: 1px solid transparent;
488 }
489
490 /* focused editable element */
491 .htmlview *[x-editable]:hover {
492     z-index: 900;
493 }
494
495 .htmlview *[x-editable][x-open] {
496     visibility: hidden;
497 }
498
499 /*.edit-button, .delete-button, .accept-button, .tytul-button, .wyroznienie-button, .slowo-button, .znak-button, .luka-button */
500 .edit-button, .delete-button, .accept-button, .akap-edit-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 .luka-button {
542     left:550px;
543     width:100px;
544 }
545
546 .zastap-button {
547     top: -50px;
548     left:550px;
549     width:100px;
550 }
551
552
553 /*.edit-button:hover, .edit-button:active,
554 .delete-button:hover, .delete-button:active,
555 .accept-button:hover, .accept-button:active,
556 .tytul-button:hover, .tytul-button:active,
557 .wyroznienie-button:hover, .wyroznienie-button:active,
558 .slowo-button:hover, .slowo-button:active,
559 .znak-button:hover, .znak-button:active,
560 .luka-button:hover, .luka-button:active */
561
562 .edit-button:hover, .edit-button:active,
563 .delete-button:hover, .delete-button:active,
564 .accept-button:hover, .accept-button:active,
565 .akap-edit-button:hover, .akap-edit-button:active {
566     /*    color: #FFF;*/
567     background-color: #999;
568     color: #FFF;
569 }
570
571 /*
572  * VISIBILITY RULES
573  */
574 .default-menu {
575     visibility: inherit;
576     opacity: 0.2;
577 }
578
579 .default-menu:hover {
580     opacity: 1;
581     z-index: 5000;
582 }
583
584 .htmlview *[x-annotation-box] > .default-menu {
585     opacity: 1;
586 }
587
588 .htmlview *[x-editable][x-open] > .default-menu {
589     visibility: hidden;
590 }
591
592 .htmlview *[x-editable][x-open] *[x-annotation-box] > .default-menu {
593     visibility: hidden;
594 }
595
596 .htmlview *[x-editable] > .edit-menu {
597     visibility: hidden;
598 }
599
600 .htmlview *[x-editable] *[x-annotation-box] > .edit-menu {
601     visibility: hidden;
602 }
603
604 .htmlview *[x-editable][x-open] > .edit-menu {
605     visibility: visible;
606 }
607
608 .htmlview *[x-editable][x-open] *[x-annotation-box] > .edit-menu {
609     visibility: visible;
610 }
611
612 .html-editarea {
613     border: 0px;
614     background-color: gray;
615     padding: 1px;
616     z-index: 2000;
617     position: absolute;
618 }
619
620 .html-editarea textarea {
621 /*    position: absolute; -- might be unnecessary, and we need attributes to be pushed down*/
622     top: 0;
623     margin: 0px;
624     padding: 0px;
625     width: 100%;
626     min-width: 600px; /* for editing narrow elements */
627     height: 100%;
628     z-index: 0;
629     font-size: 10pt;
630     /*    background-color: ivory;*/
631 }
632
633 .html-editarea .html-editarea-attributes span {
634     border: 1px dotted black;
635     padding: 2px;
636     margin: 2px;
637 }
638
639 .html-editarea .html-editarea-attributes span label {
640     background-color: white;
641     padding: 5px;
642     min-width: 150px;
643     display: inline-block;
644     font-family: mono;
645 }
646
647 .htmlview .out-of-flow-text {
648     display: block;
649     font-face: monospace;
650     border: 2px solid red !important;
651     white-space: pre-line;
652 }
653
654 .htmlview .out-of-flow-text::before {
655     content: "Tekst w tej ramce nie jest otagowany!";
656     background-color: #ff6c6c;
657     color: black;
658     font-size: 10pt;
659     line-height: 12pt;
660     border: 1px solid black;
661     -moz-border-radius: 10px;
662     -webkit-border-radius: 10px;
663     padding: 5px 1em;
664     margin: 0em;
665     margin-left: 1em;
666     text-align: justify;
667     display: inline;
668     float: right;
669     max-width: 25%;
670 }
671
672 .unknown-tag {
673     background-color: yellow;
674     margin: -0.25em;
675     padding: 0.25em;
676     border: 1px solid orange;
677 }
678
679 .alien {
680     color: red;
681 }
682
683 /* specialChars */
684 #specialCharsContainer {
685     text-align: center; 
686     width: 600px; 
687     height: 400px;
688     padding:20px; 
689     background-color: gray; 
690     position: absolute; 
691     top: 20px; 
692     left: 20px; 
693     z-index:1000;
694     overflow:auto;
695 }
696 #specialCharsContainer a {
697     color: white;
698     font-weight: bold;
699
700
701 #tableSpecialChars td input {
702     background-color: transparent;
703     border:0;
704     color: white;
705
706
707 #tableSpecialChars td input.recentSymbol {
708     background-color: white;
709     border:0;
710     color: black;
711
712
713
714 .htmlview .lista[data-wlf-typ="alfa"] 
715 {
716     list-style-type: lower-alpha;
717 }
718
719 .htmlview .lista[data-wlf-typ="slowniczek"] 
720 {
721     list-style-type: none;
722 }
723
724 .htmlview span.punkt {
725     display: list-item;
726     list-style-position: inside;
727 }
728
729 .htmlview span.aktywnosc span.opis {
730     font-style: italic;
731 }
732 .htmlview span.aktywnosc span.opis p:before {
733     content: counter(aktywnosc) ". ";
734     counter-increment: aktywnosc;
735     font-weight: bold;
736 }
737
738 .htmlview span.aktywnosc span.wskazowki {
739     font-style: italic;
740     color: #202020;
741 }
742
743 .htmlview .pomoce, .htmlview .czas, .htmlview .forma {
744     display: block;
745 }
746 .htmlview .pomoce:before { content: "Pomoce: "; }
747 .htmlview .czas:before { content: "Czas: "; }
748 .htmlview .czas:after { content: " min"; }
749 .htmlview .forma:before { content: "Forma: "; }
750
751 .htmlview .aktywnosc {
752     display: block;
753 }
754
755 .htmlview .definiendum {
756     font-weight: bold;
757     display: block;
758 }
759
760 .htmlview .definiens {
761     padding-left: 50px;
762 }
763
764 .htmlview .link {
765     color: #990066;
766 }
767
768 .htmlview .tabela {
769     display: table;
770 }
771
772 .htmlview .wiersz {
773     display: table-row;
774 }
775
776 .htmlview .kol {
777     min-width: 200px;
778     display: table-cell;
779     padding: 5px;
780 }
781
782 .htmlview .kol span {
783     position: relative;
784 }
785
786 .htmlview img.obraz {
787     max-width: 640px;
788 }
789
790 .htmlview span.luka {
791     color: #808080;
792     display: inline-block;
793     padding: 0px 8px;
794     border-bottom: 1px solid grey;
795 }
796
797 .htmlview span.zastap {
798     color: darkred;
799 }
800
801 .htmlview span.zastap:after {
802     content: "→" attr(data-wlf-rozw);
803     color: darkgoldenrod;
804 }
805
806 .htmlview .punkt[data-wlf-nazwa]:before {
807     content: "[" attr(data-wlf-nazwa) "] ";
808     color: darkgoldenrod;
809 }
810
811 .htmlview .punkt[data-wlf-name]:before {
812     content: "!name![" attr(data-wlf-name) "] ";
813     color: red;
814 }
815
816
817 .htmlview .punkt[data-wlf-rozw]:before {
818     content: "[" attr(data-wlf-rozw) "] ";
819     color: darkblue;
820 }