bd710a8cec360cd8dfaa036efa8df2c7eb513df4
[redakcja.git] / platforma / 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     font-weight: normal;
337     font-size: 13px;
338     line-height: 18px;
339     font-variant: normal;
340     text-decoration: none;
341     background-color: #fff;
342     /*    border: 1px solid gray;
343      
344      border-right: none;
345      */
346     z-index: 1;
347     -moz-user-select: -moz-none;
348     -webkit-user-select: none;
349     user-select: none;
350     margin-right: -12em;
351     text-align: left;
352 }
353
354 .htmlview .motyw[x-editable] {
355     border-left: 4px solid #DDD;
356     padding: 0.2em 0.2em 0.2em 0.5em;
357     margin-top: 0.2em;
358 }
359
360 /*
361  * Przypisy
362  */
363 /* Znaczniki w tekście */
364 .htmlview .annotation:before {
365     content: "[" counter(main) "]";
366     counter-increment: main;
367         vertical-align: super;
368     text-decoration: none;
369         font-size: 66%;
370 }
371
372 .htmlview .annotation:hover {
373     background-color: #96e0e4;
374 }
375 *.htmlview *.annotation-inline-box {
376     position: static;
377 }
378
379 /*
380  * Przypisy w tekście
381  */
382 .htmlview .annotation-inline-box > span[x-annotation-box] {
383     display: none;
384     position: absolute;
385     width: 300px;
386     font-size: 10pt;
387     line-height: 12pt;
388     font-weight: normal;
389     font-style: normal;
390     background: #fffe93;
391     border-color: black;
392     border-width: 1px;
393     border-style: solid;
394     border-radius: 10px;
395     -moz-border-radius: 10px;
396     -webkit-border-radius: 10px;
397     padding: 3px 5px;
398     text-decoration: none;
399     z-index: 600;
400 }
401
402 /*
403  * Przypisy na końcu utworu (aktualnie nieuzywane)
404  */
405 .htmlview .annotations-block {
406     counter-reset: secondary;
407 }
408
409 .htmlview .annotations-block .annotation-body {
410     position: relative;
411     padding-left: 2.5em;
412     padding-top: 0.2em;
413 }
414
415 .htmlview .annotations-block .annotation-backref {
416     position: absolute;
417     top: 0.4em;
418     left: -0.4em;
419     width: 2.5em;
420     text-align: right;
421 }
422
423 .htmlview .annotations-block .annotation-backref:before {
424     content: "[" counter(secondary) "]";
425     counter-increment: secondary;
426 }
427
428 /*
429  * EDITABLE ELEMENTS
430  */
431 .htmlview *[x-editable] {
432     position: relative;
433     padding: 2px;
434     margin-left: 0;
435     border: 1px solid #FFF;
436 }
437
438 /* focused editable element */
439 .htmlview *[x-editable]:hover {
440     z-index: 900;
441 }
442
443 .htmlview *[x-editable][x-open] {
444     visibility: hidden;
445 }
446
447 .edit-button, .delete-button, .accept-button {
448     position: absolute;
449     top: -21px;
450     left: -1px;
451     width: 72px;
452     height: 21px;
453     display: block;
454     /*    margin: 4px 0 2px 0;*/
455     padding: 5px 5px 2px 5px;
456     border: none;
457     background-color: #FAFAFA;
458     /*    z-index: 3000;*/
459     /*    color: #FFF;
460      z-index: 1500;
461      */
462     border: 1px solid #DDD;
463     border-bottom: none;
464 }
465
466 .delete-button {
467     left: 70px;
468 }
469
470 .edit-button:hover, .edit-button:active, 
471 .delete-button:hover, .delete-button:active, 
472 .accept-button:hover, .accept-button:active {
473     /*    color: #FFF;*/
474     background-color: #999;
475     color: #FFF;
476 }
477
478 /*
479  * VISIBILITY RULES
480  */
481 .default-menu {
482     visibility: inherit;
483     opacity: 0.2;
484 }
485
486 .default-menu:hover {
487     opacity: 1;
488     z-index: 5000;
489 }
490
491 .htmlview *[x-annotation-box] > .default-menu {
492     opacity: 1;
493 }
494
495 .htmlview *[x-editable][x-open] > .default-menu {
496     visibility: hidden;
497 }
498
499 .htmlview *[x-editable][x-open] *[x-annotation-box] > .default-menu {
500     visibility: hidden;
501 }
502
503 .htmlview *[x-editable] > .edit-menu {
504     visibility: hidden;
505 }
506
507 .htmlview *[x-editable] *[x-annotation-box] > .edit-menu {
508     visibility: hidden;
509 }
510
511 .htmlview *[x-editable][x-open] > .edit-menu {
512     visibility: visible;
513 }
514
515 .htmlview *[x-editable][x-open] *[x-annotation-box] > .edit-menu {
516     visibility: visible;
517 }
518
519 .html-editarea {
520     border: 0px;
521     background-color: gray;
522     padding: 1px;
523     z-index: 2000;
524     position: absolute;
525 }
526
527 .html-editarea textarea {
528     position: absolute;
529     top: 0;
530     margin: 0px;
531     padding: 0px;
532     width: 100%;
533     height: 100%;
534     z-index: 0;
535     font-size: 10pt;
536     /*    background-color: ivory;*/
537 }
538
539 .htmlview .out-of-flow-text {
540     display: block;
541     font-face: monospace;
542     border: 2px solid red !important;
543     white-space: pre-line;
544 }
545
546 .htmlview .out-of-flow-text::before {
547     content: "Tekst w tej ramce nie jest otagowany!";
548     background-color: #ff6c6c;
549     color: black;
550     font-size: 10pt;
551     line-height: 12pt;
552     border: 1px solid black;
553     -moz-border-radius: 10px;
554     -webkit-border-radius: 10px;
555     padding: 5px 1em;
556     margin: 0em;
557     margin-left: 1em;
558     text-align: justify;
559     display: inline;
560     float: right;
561     max-width: 25%;
562 }
563
564 .unknown-tag {
565     background-color: yellow;
566     margin: -0.25em;
567     padding: 0.25em;
568     border: 1px solid orange;
569 }