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