971e4b859193c10a0a6b6c83e6102172294dc3ee
[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 .htmlview .annotation-inline-box > span[x-annotation-box] {
404     display: none;
405     position: absolute;
406     width: 300px;
407     font-size: 10pt;
408     line-height: 12pt;
409     font-weight: normal;
410     font-style: normal;
411     background: #fffe93;
412     border-color: black;
413     border-width: 1px;
414     border-style: solid;
415     border-radius: 10px;
416     -moz-border-radius: 10px;
417     -webkit-border-radius: 10px;
418     padding: 3px 5px;
419     text-decoration: none;
420     z-index: 600;
421 }
422
423 /*
424  * Przypisy na końcu utworu (aktualnie nieuzywane)
425  */
426 .htmlview .annotations-block {
427     counter-reset: secondary;
428 }
429
430 .htmlview .annotations-block .annotation-body {
431     position: relative;
432     padding-left: 2.5em;
433     padding-top: 0.2em;
434 }
435
436 .htmlview .annotations-block .annotation-backref {
437     position: absolute;
438     top: 0.4em;
439     left: -0.4em;
440     width: 2.5em;
441     text-align: right;
442 }
443
444 .htmlview .annotations-block .annotation-backref:before {
445     content: "[" counter(secondary) "]";
446     counter-increment: secondary;
447 }
448
449 /*
450  * EDITABLE ELEMENTS
451  */
452 .htmlview *[x-editable] {
453     position: relative;
454     padding: 2px;
455     margin-left: 0;
456     border: 1px solid #FFF;
457 }
458
459 /* focused editable element */
460 .htmlview *[x-editable]:hover {
461     z-index: 900;
462 }
463
464 .htmlview *[x-editable][x-open] {
465     visibility: hidden;
466 }
467
468 .edit-button, .delete-button, .accept-button {
469     position: absolute;
470     top: -21px;
471     left: -1px;
472     width: 72px;
473     height: 28px;
474     display: block;
475     /*    margin: 4px 0 2px 0;*/
476     padding: 5px 5px 2px 5px;
477     border: none;
478     background-color: #FAFAFA;
479     /*    z-index: 3000;*/
480     /*    color: #FFF;
481      z-index: 1500;
482      */
483     border: 1px solid #DDD;
484     border-bottom: none;
485 }
486
487 .delete-button {
488     left: 70px;
489 }
490
491 .edit-button:hover, .edit-button:active,
492 .delete-button:hover, .delete-button:active,
493 .accept-button:hover, .accept-button:active {
494     /*    color: #FFF;*/
495     background-color: #999;
496     color: #FFF;
497 }
498
499 /*
500  * VISIBILITY RULES
501  */
502 .default-menu {
503     visibility: inherit;
504     opacity: 0.2;
505 }
506
507 .default-menu:hover {
508     opacity: 1;
509     z-index: 5000;
510 }
511
512 .htmlview *[x-annotation-box] > .default-menu {
513     opacity: 1;
514 }
515
516 .htmlview *[x-editable][x-open] > .default-menu {
517     visibility: hidden;
518 }
519
520 .htmlview *[x-editable][x-open] *[x-annotation-box] > .default-menu {
521     visibility: hidden;
522 }
523
524 .htmlview *[x-editable] > .edit-menu {
525     visibility: hidden;
526 }
527
528 .htmlview *[x-editable] *[x-annotation-box] > .edit-menu {
529     visibility: hidden;
530 }
531
532 .htmlview *[x-editable][x-open] > .edit-menu {
533     visibility: visible;
534 }
535
536 .htmlview *[x-editable][x-open] *[x-annotation-box] > .edit-menu {
537     visibility: visible;
538 }
539
540 .html-editarea {
541     border: 0px;
542     background-color: gray;
543     padding: 1px;
544     z-index: 2000;
545     position: absolute;
546 }
547
548 .html-editarea textarea {
549     position: absolute;
550     top: 0;
551     margin: 0px;
552     padding: 0px;
553     width: 100%;
554     height: 100%;
555     z-index: 0;
556     font-size: 10pt;
557     /*    background-color: ivory;*/
558 }
559
560 .htmlview .out-of-flow-text {
561     display: block;
562     font-face: monospace;
563     border: 2px solid red !important;
564     white-space: pre-line;
565 }
566
567 .htmlview .out-of-flow-text::before {
568     content: "Tekst w tej ramce nie jest otagowany!";
569     background-color: #ff6c6c;
570     color: black;
571     font-size: 10pt;
572     line-height: 12pt;
573     border: 1px solid black;
574     -moz-border-radius: 10px;
575     -webkit-border-radius: 10px;
576     padding: 5px 1em;
577     margin: 0em;
578     margin-left: 1em;
579     text-align: justify;
580     display: inline;
581     float: right;
582     max-width: 25%;
583 }
584
585 .unknown-tag {
586     background-color: yellow;
587     margin: -0.25em;
588     padding: 0.25em;
589     border: 1px solid orange;
590 }
591
592 /* specialChars */
593 #specialCharsContainer {
594     text-align: center; 
595     width: 600px; 
596     padding:20px; 
597     background-color: gray; 
598     position: absolute; 
599     top: 20px; 
600     left: 20px; 
601     z-index:1000;
602 }
603 #specialCharsContainer a {
604     color: white;
605     font-weight: bold;
606
607 #tableSpecialChars td input {
608     background-color: transparent;
609     border:0;
610     color: white;
611