pretty tag fields in new resource form
[redakcja.git] / redakcja / 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'][x-ns = 'http://www.w3.org/1999/02/22-rdf-syntax-ns#'] {
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 .htmlview pre {
111         overflow-x: auto; /* Use horizontal scroller if needed; for Firefox 2, not needed in Firefox 3 */
112         white-space: pre-wrap; /* css-3 */
113         white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
114         white-space: -pre-wrap; /* Opera 4-6 */
115         white-space: -o-pre-wrap; /* Opera 7 */ /*
116         width: 99%; */
117         word-wrap: break-word; /* Internet Explorer 5.5+ */
118 }
119
120 /* ============= */
121 /* = Numbering = */
122 /* ============= */
123 .htmlview .anchor {
124     position: relative;
125     margin: 0em;
126     left: -2.2em;
127     color: #777;
128     font-size: 12px;
129     width: 2em;
130     text-align: center;
131     padding: 0.25em 0.7em;
132     line-height: 1.5em;
133 }
134
135 .htmlview .anchor:hover, .htmlview .anchor:active {
136     color: #FFF;
137     background-color: #CCC;
138 }
139
140 /* =================== */
141 /* = Custom elements = */
142 /* =================== */
143 .htmlview .autor_utwor {
144     font-size: 0.5em;
145     display: block;
146     line-height: 1.5em;
147     margin-bottom: 0.25em;
148 }
149
150 .htmlview .dzielo_nadrzedne {
151     /* */
152 }
153
154 .htmlview .podtytul {
155     /* */
156 }
157
158 .htmlview .didaskalia {
159     font-style: italic;
160     margin: 0.5em 0 0 1.5em;
161 }
162
163 .htmlview .kwestia {
164     margin: 0.5em 0 0;
165 }
166
167 .htmlview .strofa {
168     margin: 1.5em 0 0.5em auto;
169 }
170
171 /* wersy */
172 .htmlview *[x-verse]:after {
173     content: "\feff";
174 }
175
176 .htmlview .strofa .wers_wciety, .htmlview .strofa .wers_wciety[data-wlf-typ='1'] {
177     margin-left: 1em;
178 }
179
180 .htmlview .strofa .wers_wciety[data-wlf-typ='2'], .htmlview .strofa .wers_cd {
181     margin-left: 2em;
182 }
183
184 .htmlview .strofa .wers_wciety[data-wlf-typ='3'] {
185     margin-left: 3em;
186 }
187
188 .htmlview .strofa .wers_wciety[data-wlf-typ='4'] {
189     margin-left: 4em;
190 }
191
192 .htmlview .strofa .wers_wciety[data-wlf-typ='5'] {
193     margin-left: 5em;
194 }
195
196 .htmlview .strofa .wers_wciety[data-wlf-typ='6'] {
197     margin-left: 6em;
198 }
199
200 /* błędne wersy */
201 .htmlview *:not(.strofa) > *[x-verse]::after {
202     content: "Ten wers znajduje się poza strofą.";
203     display: inline;
204     background: red;
205     font-size: 8pt;
206     border: 1px solid black;
207     -moz-border-radius: 10px;
208     -webkit-border-radius: 10px;
209     padding: 1px 1em;
210     margin-left: 1em;
211     vertical-align: super;
212 }
213
214 .htmlview .kwestia .strofa {
215     margin: 0;
216 }
217
218 .htmlview .akap, .htmlview .akap_cd, .htmlview .akap_dialog {
219     text-align: justify;
220     margin: 1.5em 0 0;
221 }
222
223 .htmlview .motto_container {
224         display: inline-block;
225         margin: 1.5em 0 0;
226         clear: right;
227 }
228
229 .htmlview .motto {
230     text-align: justify;
231     font-style: italic;
232 }
233
234 .htmlview p.motto_podpis {
235         position: relative;
236         right: -3em;
237         text-align: right;
238 }
239
240 .htmlview div.fragment {
241     border-bottom: 0.1em solid #999;
242     padding-bottom: 1.5em;
243 }
244
245 .htmlview div.nota p, .htmlview div.dedykacja p {
246     text-align: right;
247     font-style: italic;
248 }
249
250 .htmlview .nota_red {
251     background-color: #eee;
252     border: 1px solid #888;
253     -moz-border-radius: 10px;
254     -webkit-border-radius: 10px;
255     display: block;
256     padding: 0 1em 1em 1em;
257 }
258
259 .htmlview hr.sekcja_swiatlo {
260     margin: 2em 0;
261     visibility: hidden;
262 }
263
264 .htmlview hr.separator_linia {
265     margin: 1.5em 0;
266     border: none;
267     border-bottom: 0.1em solid #000;
268 }
269
270 .htmlview p.sekcja_asterysk {
271     padding: 0;
272     margin: 1.5em 0;
273     text-align: center;
274 }
275
276 .htmlview p.sekcja_asterysk:after {
277     content: "*";
278 }
279
280 .htmlview div.lista_osob ol {
281     list-style: none;
282     padding: 0 0 0 1.5em;
283 }
284
285 .htmlview p.miejsce_czas {
286     font-style: italic;
287 }
288
289 .htmlview .mat, .htmlview .slowo_obce, .htmlview .tytul_dziela, .htmlview .didaskalia {
290     font-style: italic;
291 }
292
293 .htmlview .wyroznienie {
294     letter-spacing: 0.1em;
295 }
296
297 .htmlview .osoba {
298     font-style: normal;
299     font-variant: small-caps;
300 }
301
302 .htmlview .parse-warning {
303     display: block;
304     font-size: 10pt;
305     background: #C0C0C0;
306     margin: 1em;
307 }
308
309 .parse-warning .message {
310     color: purple;
311     font-weight: bold;
312 }
313
314 /* Uwaga/Extra */
315 .htmlview .uwaga {
316     background-color: #96e0e4;
317     border: 1px solid black;
318     -moz-border-radius: 10px;
319     -webkit-border-radius: 10px;
320     display: block;
321     font-size: 10pt;
322     line-height: 12pt;
323     padding: 2px 1em;
324     float: right;
325     max-width: 20%;
326     max-height: 24pt;
327     margin-left: 0.5em;
328     overflow: hidden;
329         z-index: 500;
330 }
331
332 div[x-node] > .uwaga {
333     float: none;
334     padding: 0.5em 1em;
335     margin: 1em;
336     max-width: 100%;
337     max-height: 100%;
338 }
339
340 .htmlview .uwaga:hover {
341     max-height: 100%;
342 }
343
344 .htmlview .annotation-inline-box .uwaga {
345     max-height: 100%;
346 }
347
348 /* Motywy */
349 /* ======================== */
350 /* = Footnotes and themes = */
351 /* ======================== */
352 .htmlview .begin, .htmlview .end {
353     background: green;
354 }
355
356 .htmlview .motyw {
357     /* position: absolute; */
358     float: right;
359     left: auto;
360     clear: right;
361     width: 10em;
362
363     font-style: normal;
364     font-weight: normal;
365     font-variant: normal;
366     letter-spacing: 0;
367     text-transform: none;
368     text-decoration: none;
369
370     font-size: 13px;
371     line-height: 18px;
372     background-color: #fff;
373     /*    border: 1px solid gray;
374
375      border-right: none;
376      */
377     z-index: 1;
378     -moz-user-select: -moz-none;
379     -webkit-user-select: none;
380     user-select: none;
381     margin-right: -12em;
382     text-align: left;
383     color: #999;
384 }
385
386 .htmlview .canon {
387     color: black;
388 }
389
390 .htmlview .noncanon {
391     color: #d00;
392 }
393
394 .htmlview .motyw[x-editable] {
395     border-left: 4px solid #DDD;
396     padding: 0.2em 0.2em 0.2em 0.5em;
397     margin-top: 0.2em;
398 }
399
400 /*
401  * Przypisy
402  */
403 /* Znaczniki w tekście */
404 .annotation {
405     font-style: normal;
406 }
407
408 .htmlview .annotation:before {
409     content: "[" counter(main) "]";
410     counter-increment: main;
411         vertical-align: super;
412     text-decoration: none;
413         font-size: 66%;
414 }
415
416 .htmlview .annotation:hover {
417     background-color: #ffcccc;
418 }
419 .htmlview .pe .annotation:hover {
420     background-color: #96e0e4;
421 }
422 *.htmlview *.annotation-inline-box {
423     position: static;
424 }
425
426 /*
427  * Przypisy w tekście
428  */
429  
430 .htmlview .annotation-inline-box:hover > span[x-annotation-box]{
431     display: block;
432 }
433
434 .htmlview .annotation-inline-box > span[x-annotation-box] {
435     display: none;
436     width: 300px;
437     font-size: 10pt;
438     line-height: 12pt;
439     font-weight: normal;
440     font-style: normal;
441     background: #fffe93;
442     border-color: black;
443     border-width: 1px;
444     border-style: solid;
445     border-radius: 10px;
446     -moz-border-radius: 10px;
447     -webkit-border-radius: 10px;
448     padding: 3px 5px;
449     text-decoration: none;
450     z-index: 600;
451 }
452
453 /*
454  * Przypisy na końcu utworu (aktualnie nieuzywane)
455  */
456 .htmlview .annotations-block {
457     counter-reset: secondary;
458 }
459
460 .htmlview .annotations-block .annotation-body {
461     position: relative;
462     padding-left: 2.5em;
463     padding-top: 0.2em;
464 }
465
466 .htmlview .annotations-block .annotation-backref {
467     position: absolute;
468     top: 0.4em;
469     left: -0.4em;
470     width: 2.5em;
471     text-align: right;
472 }
473
474 .htmlview .annotations-block .annotation-backref:before {
475     content: "[" counter(secondary) "]";
476     counter-increment: secondary;
477 }
478
479 /*
480  * EDITABLE ELEMENTS
481  */
482 .htmlview *[x-editable] {
483     position: relative;
484     padding: 2px;
485     margin-left: 0;
486     border: 1px solid transparent;
487 }
488
489 /* focused editable element */
490 .htmlview *[x-editable]:hover {
491     z-index: 900;
492 }
493
494 .htmlview *[x-editable][x-open] {
495     visibility: hidden;
496 }
497
498 .edit-button, .delete-button, .accept-button, .tytul-button, .wyroznienie-button, .slowo-button, .znak-button {
499     position: absolute;
500     top: -21px;
501     left: -1px;
502     width: 72px;
503     height: 28px;
504     display: block;
505     /*    margin: 4px 0 2px 0;*/
506     padding: 5px 5px 2px 5px;
507     border: none;
508     background-color: #FAFAFA;
509     /*    z-index: 3000;*/
510     /*    color: #FFF;
511      z-index: 1500;
512      */
513     border: 1px solid #DDD;
514     border-bottom: none;
515 }
516
517 .delete-button {
518     left: 70px;
519 }
520
521 .tytul-button {
522     left:150px;
523     width:100px;
524 }
525
526 .wyroznienie-button {
527     left:250px;
528     width:100px;
529 }
530 .slowo-button {
531     left:350px;
532     width:100px;
533 }
534 .znak-button {
535     left:450px;
536     width:100px;
537 }
538
539 .edit-button:hover, .edit-button:active,
540 .delete-button:hover, .delete-button:active,
541 .accept-button:hover, .accept-button:active,
542 .tytul-button:hover, .tytul-button:active,
543 .wyroznienie-button:hover, .wyroznienie-button:active,
544 .slowo-button:hover, .slowo-button:active,
545 .znak-button:hover, .znak-button:active {
546     /*    color: #FFF;*/
547     background-color: #999;
548     color: #FFF;
549 }
550
551 /*
552  * VISIBILITY RULES
553  */
554 .default-menu {
555     visibility: inherit;
556     opacity: 0.2;
557 }
558
559 .default-menu:hover {
560     opacity: 1;
561     z-index: 5000;
562 }
563
564 .htmlview *[x-annotation-box] > .default-menu {
565     opacity: 1;
566 }
567
568 .htmlview *[x-editable][x-open] > .default-menu {
569     visibility: hidden;
570 }
571
572 .htmlview *[x-editable][x-open] *[x-annotation-box] > .default-menu {
573     visibility: hidden;
574 }
575
576 .htmlview *[x-editable] > .edit-menu {
577     visibility: hidden;
578 }
579
580 .htmlview *[x-editable] *[x-annotation-box] > .edit-menu {
581     visibility: hidden;
582 }
583
584 .htmlview *[x-editable][x-open] > .edit-menu {
585     visibility: visible;
586 }
587
588 .htmlview *[x-editable][x-open] *[x-annotation-box] > .edit-menu {
589     visibility: visible;
590 }
591
592 .html-editarea {
593     border: 0px;
594     background-color: gray;
595     padding: 1px;
596     z-index: 2000;
597     position: absolute;
598 }
599
600 .html-editarea textarea {
601     position: absolute;
602     top: 0;
603     margin: 0px;
604     padding: 0px;
605     width: 100%;
606     height: 100%;
607     z-index: 0;
608     font-size: 10pt;
609     /*    background-color: ivory;*/
610 }
611
612 .htmlview .out-of-flow-text {
613     display: block;
614     font-face: monospace;
615     border: 2px solid red !important;
616     white-space: pre-line;
617 }
618
619 .htmlview .out-of-flow-text::before {
620     content: "Tekst w tej ramce nie jest otagowany!";
621     background-color: #ff6c6c;
622     color: black;
623     font-size: 10pt;
624     line-height: 12pt;
625     border: 1px solid black;
626     -moz-border-radius: 10px;
627     -webkit-border-radius: 10px;
628     padding: 5px 1em;
629     margin: 0em;
630     margin-left: 1em;
631     text-align: justify;
632     display: inline;
633     float: right;
634     max-width: 25%;
635 }
636
637 .unknown-tag {
638     background-color: yellow;
639     margin: -0.25em;
640     padding: 0.25em;
641     border: 1px solid orange;
642 }
643
644 .alien {
645     color: red;
646 }
647
648 /* specialChars */
649 #specialCharsContainer {
650     text-align: center; 
651     width: 600px; 
652     height: 400px;
653     padding:20px; 
654     background-color: gray; 
655     position: absolute; 
656     top: 20px; 
657     left: 20px; 
658     z-index:1000;
659     overflow:auto;
660 }
661 #specialCharsContainer a {
662     color: white;
663     font-weight: bold;
664
665
666 #tableSpecialChars td input {
667     background-color: transparent;
668     border:0;
669     color: white;
670
671
672 #tableSpecialChars td input.recentSymbol {
673     background-color: white;
674     border:0;
675     color: black;
676