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