cbf18745f3cadc015964b4c6147d4f34a64bd494
[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: 55px;
10 }
11
12 .htmlview *[x-node='rdf:RDF'] {
13     display: none;
14 }
15
16 .htmlview * {
17     position: relative;
18 }
19
20 .htmlview div {
21     max-width: 36em;
22 }
23
24 .htmlview #toc {
25     display: none;
26 }
27
28 .htmlview a {
29     color: blue;
30     text-decoration: none;
31 }
32
33 .htmlview a:hover {
34     text-decoration: none;
35 }
36
37 .htmlview h1 {
38     font-size: 3em;
39     margin: 1.5em 0;
40     text-align: center;
41     line-height: 1.5em;
42     font-weight: bold;
43
44     text-transform: capitalize;
45 }
46
47 .htmlview h2 {
48     font-size: 2em;
49     margin: 1.5em 0 0;
50     font-weight: bold;
51     line-height: 1.5em;
52 }
53
54 .htmlview h3 {
55     font-size: 1.5em;
56     margin: 1.5em 0 0;
57     font-weight: normal;
58     line-height: 1.5em;
59 }
60
61 .htmlview h4 {
62     font-size: 1em;
63     margin: 1.5em 0 0;
64     line-height: 1.5em;
65 }
66
67 .htmlview p {
68     margin: 0;
69 }
70
71 .htmlview #footnotes div {
72     margin: 1.5em 0 0 0;
73 }
74
75 .htmlview #footnotes p {
76     margin-left: 2.5em;
77     font-size: 0.875em;
78 }
79
80 .htmlview blockquote {
81     font-size: 0.875em;
82 }
83
84 /* ============= */
85 /* = Numbering = */
86 /* ============= */
87 .htmlview .anchor {
88     position: relative;
89     margin: 0em;
90     left: -2.2em;
91     color: #777;
92     font-size: 12px;
93     width: 2em;
94     text-align: center;
95     padding: 0.25em 0.7em;
96     line-height: 1.5em;
97 }
98
99 .htmlview .anchor:hover, .htmlview .anchor:active {
100     color: #FFF;
101     background-color: #CCC;
102 }
103
104 /* =================== */
105 /* = Custom elements = */
106 /* =================== */
107 .htmlview .autor_utwor {
108     font-size: 0.5em;
109     display: block;
110     line-height: 1.5em;
111     margin-bottom: 0.25em;
112 }
113
114 .htmlview .dzielo_nadrzedne {
115     font-size: 1.5em;
116     display: block;
117     line-height: 1.5em;
118     margin-bottom: -0.25em;
119 }
120
121 .htmlview .podtytul {
122     font-size: 0.5em;
123     display: block;
124     line-height: 1.5em;
125     margin-top: -0.25em;
126 }
127
128 .htmlview .didaskalia {
129     font-style: italic;
130     margin: 0.5em 0 0 1.5em;
131 }
132
133 .htmlview .kwestia {
134     margin: 0.5em 0 0;
135 }
136
137 .htmlview .strofa {
138     margin: 1.5em 0 0 auto;    
139 }
140
141 .htmlview .kwestia .strofa {
142     margin: 0;
143 }
144
145 .htmlview .akap, .htmlview .akap_cd, .htmlview .akap_dialog {
146     text-align: justify;
147     margin: 1.5em 0 0;
148 }
149
150 .htmlview p.motto {
151     text-align: justify;
152     font-style: italic;
153     margin: 1.5em 0 0;
154 }
155
156 .htmlview p.motto_podpis {
157     font-size: 0.875em;
158     text-align: right;
159 }
160
161 .htmlview div.fragment {
162     border-bottom: 0.1em solid #999;
163     padding-bottom: 1.5em;
164 }
165
166 .htmlview div.nota p,
167 .htmlview div.dedykacja p {
168     text-align: right;
169     font-style: italic;
170 }
171
172 .htmlview br.sekcja_swiatlo {
173     height: 3em;
174     /* visibility: hidden; */
175 }
176
177 .htmlview hr.separator_linia {
178     margin: 1.5em 0;
179     border: none;
180     border-bottom: 0.1em solid #000;
181 }
182
183 .htmlview p.sekcja_asterysk {
184     padding: 0;
185     margin: 1.5em 0;
186     text-align: center;
187 }
188
189 .htmlview div.lista_osob ol {
190     list-style: none;
191     padding: 0 0 0 1.5em;
192 }
193
194 .htmlview p.miejsce_czas {
195     font-style: italic;
196 }
197
198 .htmlview .mat,
199 .htmlview .slowo_obce,
200 .htmlview .tytul_dziela,
201 .htmlview .didaskalia {
202     font-style: italic;
203 }
204
205 .htmlview .wyroznienie {
206     letter-spacing: 0.1em;
207 }
208
209 .htmlview .osoba {
210     font-style: normal;
211     font-variant: small-caps;
212 }
213
214 .htmlview .parse-warning {
215     display: block;
216     font-size: 10pt;
217     background: #C0C0C0;
218     margin: 1em;
219 }
220
221  .parse-warning .message {
222     color: purple;
223     font-weight: bold;
224 }
225
226
227 /* Motywy */
228 /* ======================== */
229 /* = Footnotes and themes = */
230 /* ======================== */
231
232 .htmlview .begin, .htmlview .end {
233     background: green;
234 }
235
236 .htmlview .motyw {
237     /* position: absolute; */
238     
239     float: right;
240     left: auto;
241     clear: right;
242     
243     width: 10em;
244     
245     font-weight: normal;
246     font-size: 10pt;
247     font-variant: normal;
248     text-decoration: none;
249
250
251     background-color: #fff;
252     
253 /*    border: 1px solid gray;
254
255     border-right: none;
256 */    
257     z-index: 1;
258     -moz-user-select: -moz-none;
259     -webkit-user-select: none;
260     user-select: none;
261     margin-right: -12em;
262     text-align: left;
263 }
264
265 .htmlview .motyw[x-editable] {
266     border-left: 4px solid #DDD;
267     padding: 0.2em 0.2em 0.2em 0.5em;
268     margin-top: 0.2em;
269
270 }
271
272 /* 
273  * Przypisy
274  */
275
276 /* Znaczniki w tekście */
277 .htmlview .annotation {    
278     vertical-align: super;
279     text-decoration: none;
280 /*    font-size: 10px;    */
281 }
282
283 .htmlview .annotation:before {
284     content: "[" counter(main) "]";
285     counter-increment: main;
286 }
287
288 .htmlview .annotation:hover {
289     background-color: #dfdfdf;
290 }
291
292 *.htmlview *.annotation-inline-box {
293     position: static;
294 }
295
296 /*
297  * Przypisy w tekście
298  */
299  .htmlview .annotation-inline-box > span[x-annotation-box]
300  {
301      display: none;
302      position: absolute;
303
304      max-width: 36em;
305      
306      font-size: 8pt;
307      line-height: 12pt;
308      font-weight: normal;
309      font-style: normal;
310
311      background: white;
312      border-color: gray;
313      border-width: 2px;
314      border-style: outset;
315      padding: 3px 5px;
316
317      text-decoration: none;
318      z-index: 1000;
319  }
320  
321
322 /*
323  * Przypisy na końcu utworu (aktualnie nieuzywane)
324  */
325 .htmlview .annotations-block {
326     counter-reset: secondary;
327 }
328
329 .htmlview .annotations-block .annotation-body {
330     position: relative;
331     padding-left: 2.5em;
332     padding-top: 0.2em;
333 }
334
335 .htmlview .annotations-block .annotation-backref {
336     position: absolute;
337     top: 0.4em;
338     left: -0.4em;
339     width: 2.5em;
340     text-align: right;
341
342 }
343
344 .htmlview .annotations-block .annotation-backref:before {
345     content: "[" counter(secondary) "]";
346     counter-increment: secondary;
347 }
348
349 /*
350  * EDITABLE ELEMENTS
351  */
352
353 .htmlview *[x-editable] {    
354     position: relative;
355     padding: 2px;
356     margin-left: 0;
357     border: 1px solid #FFF;
358 }
359
360 /* focused editable element */
361 .htmlview *[x-editable]:hover
362 {
363     z-index: 900;
364
365
366 .htmlview *[x-editable][x-open]
367 {
368     visibility: hidden;
369 }
370
371 .edit-button {
372     position: absolute;
373     top: -21px;
374     left: -1px;
375     width: 50px;
376     height: 21px;
377     
378     display: block;
379 /*    margin: 4px 0 2px 0;*/
380     padding: 5px 5px 2px 5px;
381     border: none;
382     background-color: #FAFAFA;
383     
384 /*    z-index: 3000;*/
385 /*    color: #FFF;
386     z-index: 1500;
387 */    border: 1px solid #DDD;
388     border-bottom: none;
389 }
390
391
392 .edit-button:hover, .edit-button:active {
393     color: #FFF;
394 }
395
396 /*
397  * VISIBILITY RULES
398  */
399 .default-menu {
400     visibility: inherit;
401     opacity: 0.2;
402 }
403
404 .default-menu:hover {
405     opacity: 1;
406     z-index: 5000;
407 }
408
409 .htmlview *[x-annotation-box] > .default-menu {
410     opacity: 1;
411 }
412
413 .htmlview *[x-editable][x-open] > .default-menu {
414     visibility: hidden;
415 }
416 .htmlview *[x-editable][x-open] *[x-annotation-box] > .default-menu {
417     visibility: hidden;
418 }
419
420 .htmlview *[x-editable] > .edit-menu {
421     visibility: hidden;
422 }
423 .htmlview *[x-editable] *[x-annotation-box] > .edit-menu {
424     visibility: hidden;
425 }
426
427 .htmlview *[x-editable][x-open] > .edit-menu {
428     visibility: visible;
429 }
430 .htmlview *[x-editable][x-open] *[x-annotation-box] > .edit-menu {
431     visibility: visible;
432 }
433
434 .html-editarea {
435     border: 0px;
436     background-color: gray;
437     padding: 1px;
438
439     z-index: 2000;
440 }
441
442 .html-editarea textarea
443 {
444     border: 2px solid black;
445     
446     margin: 0px;
447     padding: 0px;
448
449     width: 100%;
450     height: 100%;
451
452     z-index: 0;
453     font-size: 10pt;
454     background-color: ivory;
455 }
456
457 /*/
458 /*
459 /* Theme edit dialog
460 /*
461 /*/
462 /*#theme-edit-dialog {    
463     left: 5%;
464     right: 5%;
465     top: 5%;
466     bottom: 5%;
467     padding: 0em;
468 }
469
470 #theme-edit-dialog *.data-area {
471     position: absolute;
472
473     top: 0px;
474     left: 0px;
475     right: 0px;
476     bottom: 32px;
477
478     padding: 0px;
479     background-color: #fafafa;
480
481     overflow-y: scroll;
482 }
483
484 #theme-edit-dialog *.action-area {
485     position: absolute;
486     height: 30px;
487     line-height: 20px;
488
489     left: 5px;
490     right: 5px;
491     bottom: 0px;
492
493     padding: 0px;
494     margin: 0px;
495     
496     border-top: 1px solid black;
497     background-color: #fafafa;
498 }
499
500 #theme-edit-dialog *.action-area * {
501     vertical-align: baseline;
502 }
503
504 #theme-edit-dialog .theme-multi-list {
505     padding: 0.5em 1em;
506 }
507
508 #theme-edit-dialog .theme-multi-list .unknown-themes {
509     display: none;
510 }
511
512 #theme-edit-dialog .theme-multi-list .letter-heading {
513     font-size: 150%;
514     text-align: left;
515     border-bottom: 1px solid black;
516     padding-top: 1em;
517 }
518
519 #theme-edit-dialog .theme-mutli-list input:checked + label {
520     font-weight: bold;
521 }*/
522
523 .out-of-flow-text {
524     border: 1px solid #C8B849;
525     background-color: #D4CB9C;
526     white-space: pre;
527 }