682e905e873388f3c4ed7499056db0b4c01ad1e0
[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     padding: 0.2em;
251
252     background-color: #efefef;
253     
254     border: 1px solid gray;
255     border-left: 2px dotted gray;
256     border-right: none;
257     
258     z-index: 1;
259     -moz-user-select: -moz-none;
260     -webkit-user-select: none;
261     user-select: none;
262 }
263
264 /* 
265  * Przypisy
266  */
267
268 /* Znaczniki w tekście */
269 .htmlview .annotation {    
270     vertical-align: super;
271     text-decoration: none;
272     font-size: 0.66em;    
273 }
274
275 .htmlview .annotation:before {
276     content: "[" counter(main) "]";
277     counter-increment: main;
278 }
279
280 .htmlview .annotation:hover {
281     background-color: #dfdfdf;
282 }
283
284 *.htmlview *.annotation-inline-box {
285     position: static;
286 }
287
288 /*
289  * Przypisy w tekście
290  */
291  .htmlview .annotation-inline-box > span[x-annotation-box]
292  {
293      display: none;
294      position: absolute;
295
296      max-width: 36em;
297      
298      font-size: 8pt;
299      line-height: 12pt;
300      font-weight: normal;
301      font-style: normal;
302
303      background: white;
304      border-color: gray;
305      border-width: 2px;
306      border-style: outset;
307      padding: 3px 5px;
308
309      text-decoration: none;
310      z-index: 1000;
311  }
312  
313
314 /*
315  * Przypisy na końcu utworu (aktualnie nieuzywane)
316  */
317 .htmlview .annotations-block {
318     counter-reset: secondary;
319 }
320
321 .htmlview .annotations-block .annotation-body {
322     position: relative;
323     padding-left: 2.5em;
324     padding-top: 0.2em;
325 }
326
327 .htmlview .annotations-block .annotation-backref {
328     position: absolute;
329     top: 0.4em;
330     left: -0.4em;
331     width: 2.5em;
332     text-align: right;
333
334 }
335
336 .htmlview .annotations-block .annotation-backref:before {
337     content: "[" counter(secondary) "]";
338     counter-increment: secondary;
339 }
340
341 /*
342  * EDITABLE ELEMENTS
343  */
344
345 .htmlview *[x-editable] {    
346     padding-left: 3px;
347 }
348
349 /* focused editable element */
350 .htmlview *[x-editable]:hover
351 {
352     z-index: 900;
353
354
355 .htmlview *[x-editable][x-open]
356 {
357     visibility: hidden;
358 }
359
360 .context-menu {
361     position: absolute;
362     top: 0px;
363     left: -50px;
364     width: 50px;
365     
366     text-align: center;
367     font-size: 11px;
368     line-height: 15px;
369     
370     font-weight: normal;
371     font-style: normal;
372
373     background-color: #dfdfdf;
374
375     margin: 0px;
376     padding: 0px;
377     visibility: inherit;
378     display: block;
379
380     border-top: 1px solid black;
381     border-left: 1px solid black;
382     border-bottom: 1px solid black;
383     
384     overflow: hidden;
385     
386     -moz-border-radius-topleft: 2px;
387     -moz-border-radius-bottomleft: 2px;
388
389     -webkit-border-top-left-radius: 2px;
390     -webkit-border-bottom-left-radius: 2px;
391
392     z-index: 3000;
393 }
394
395 .context-menu * {
396     margin: 0px;
397     display: block;
398
399     -moz-user-select: -moz-none;
400     -webkit-user-select: none;
401
402     padding: 2px;
403     cursor: pointer;
404     border-bottom: 1px solid black;
405
406 }
407
408 .context-menu *:last-child {
409     cursor: pointer;
410     border-bottom: none;
411 }
412
413 .context-menu *:hover {
414     background-color: orange;    
415 }
416
417 /*
418  * VISIBILITY RULES
419  */
420 .default-menu {
421     visibility: inherit;
422     opacity: 0.2;
423 }
424
425 .default-menu:hover {
426     opacity: 1;
427     z-index: 5000;
428 }
429
430 .htmlview *[x-annotation-box] > .default-menu {
431     opacity: 1;
432 }
433
434 .htmlview *[x-editable][x-open] > .default-menu {
435     visibility: hidden;
436 }
437 .htmlview *[x-editable][x-open] *[x-annotation-box] > .default-menu {
438     visibility: hidden;
439 }
440
441 .htmlview *[x-editable] > .edit-menu {
442     visibility: hidden;
443 }
444 .htmlview *[x-editable] *[x-annotation-box] > .edit-menu {
445     visibility: hidden;
446 }
447
448 .htmlview *[x-editable][x-open] > .edit-menu {
449     visibility: visible;
450 }
451 .htmlview *[x-editable][x-open] *[x-annotation-box] > .edit-menu {
452     visibility: visible;
453 }
454
455 .html-editarea {
456     border: 0px;
457     background-color: gray;
458     padding: 1px;
459
460     z-index: 2000;
461 }
462
463 .html-editarea textarea
464 {
465     border: 2px solid black;
466     
467     margin: 0px;
468     padding: 0px;
469
470     width: 100%;
471     height: 100%;
472
473     z-index: 0;
474     font-size: 10pt;
475     background-color: ivory;
476 }