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