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