0b9e94337e6e7be88b011193fa577cb8b2e7e6e6
[redakcja.git] / src / redakcja / static / css / html.scss
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 3em 3em 45px;
8     overflow-y: scroll;
9     overflow-x: auto;
10
11
12     #caret {
13         display: inline-block;
14         width: 2px;
15         height: 1em;
16         overflow: hidden;
17         margin-left:-1px;
18         margin-right: -1px;
19
20         textarea {
21             border: none;
22             background: #888;
23
24             &:focus {
25                 background: red;
26             }
27         }
28     }
29 }
30
31 .htmlview[data-tag-names-visible] {
32     padding-left: 90px;
33 }
34
35 .htmlview *[x-node = 'RDF'][x-ns = 'http://www.w3.org/1999/02/22-rdf-syntax-ns#'] {
36     display: none;
37 }
38
39 .htmlview * {
40     position: relative;
41 }
42
43 .htmlview div {
44     max-width: 36em;
45 }
46
47
48 // unused?
49 .htmlview #toc {
50     display: none;
51 }
52
53 // where is it used, if any?
54 .htmlview a {
55     color: blue;
56     text-decoration: none;
57 }
58
59 .htmlview a:hover {
60     text-decoration: none;
61 }
62
63 // unused?
64 .htmlview p {
65     margin: 0;
66 }
67
68 .htmlview pre {
69         overflow-x: auto; /* Use horizontal scroller if needed; for Firefox 2, not needed in Firefox 3 */
70         white-space: pre-wrap; /* css-3 */
71         white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
72         white-space: -pre-wrap; /* Opera 4-6 */
73         white-space: -o-pre-wrap; /* Opera 7 */ /*
74         width: 99%; */
75         word-wrap: break-word; /* Internet Explorer 5.5+ */
76 }
77
78 /* ============= */
79 /* = Numbering = */
80 /* ============= */
81 .htmlview .anchor {
82     position: relative;
83     margin: 0;
84     left: -2.2em;
85     color: #777;
86     font-size: 12px;
87     width: 2em;
88     text-align: center;
89     padding: 0.25em 0.7em;
90     line-height: 1.5em;
91 }
92
93 .htmlview .anchor:hover, .htmlview .anchor:active {
94     color: #FFF;
95     background-color: #CCC;
96 }
97
98 /* =================== */
99 /* = Custom elements = */
100 /* =================== */
101
102 .htmlview .strofa {
103     margin: 1.5em 0 0.5em auto;
104 }
105
106 /* wersy */
107 .htmlview *[x-verse]:after {
108     content: "\feff";
109 }
110
111 .htmlview .strofa .wers_wciety, .htmlview .strofa .wers_wciety[data-wlf-typ='1'] {
112     margin-left: 1em;
113 }
114
115 .htmlview .strofa .wers_wciety[data-wlf-typ='2'], .htmlview .strofa .wers_cd {
116     margin-left: 2em;
117 }
118
119 .htmlview .strofa .wers_wciety[data-wlf-typ='3'] {
120     margin-left: 3em;
121 }
122
123 .htmlview .strofa .wers_wciety[data-wlf-typ='4'] {
124     margin-left: 4em;
125 }
126
127 .htmlview .strofa .wers_wciety[data-wlf-typ='5'] {
128     margin-left: 5em;
129 }
130
131 .htmlview .strofa .wers_wciety[data-wlf-typ='6'] {
132     margin-left: 6em;
133 }
134
135 /* błędne wersy */
136 .htmlview *:not([x-node='strofa']) > *[x-verse]::after {
137     content: "Ten wers znajduje się poza strofą.";
138     display: inline;
139     background: red;
140     font-size: 8pt;
141     border: 1px solid black;
142     -moz-border-radius: 10px;
143     -webkit-border-radius: 10px;
144     padding: 1px 1em;
145     margin-left: 1em;
146     vertical-align: super;
147 }
148
149 .htmlview .kwestia .strofa {
150     margin: 0;
151 }
152
153
154 .htmlview div.ramka {
155     border: 1px darkgray solid;
156 }
157
158
159 .htmlview hr.sekcja_asterysk {
160     border: none;
161     padding: 0;
162     margin: 1.5em 0;
163     text-align: center;
164 }
165
166 .htmlview div.lista_osob ol {
167     list-style: none;
168     padding: 0 0 0 1.5em;
169 }
170
171 .htmlview .ilustr img {
172     max-width: 100%;
173 }
174
175 .htmlview .parse-warning {
176     display: block;
177     font-size: 10pt;
178     background: #C0C0C0;
179     margin: 1em;
180 }
181
182 .parse-warning .message {
183     color: purple;
184     font-weight: bold;
185 }
186
187 /* Uwaga/Extra */
188 .htmlview .uwaga {
189     background-color: #96e0e4;
190     border: 1px solid black;
191     -moz-border-radius: 10px;
192     -webkit-border-radius: 10px;
193     display: block;
194     font-size: 10pt;
195     line-height: 12pt;
196     padding: 2px 1em;
197     float: right;
198     max-width: 20%;
199     max-height: 24pt;
200     margin-left: 0.5em;
201     z-index: 500;
202 }
203
204 div[x-node] > .uwaga {
205     float: none;
206     padding: 0.5em 1em;
207     margin: 1em;
208     max-width: 100%;
209     max-height: 100%;
210     border: 1px solid black;
211 }
212
213 .htmlview .uwaga:hover {
214     max-height: 100%;
215 }
216
217 .htmlview .annotation-inline-box .uwaga {
218     max-height: 100%;
219 }
220
221 /* Motywy */
222 /* ======================== */
223 /* = Footnotes and themes = */
224 /* ======================== */
225 .htmlview .begin, .htmlview .end {
226     background: green;
227 }
228
229 .htmlview [x-node='motyw'] {
230     /* position: absolute; */
231     float: right;
232     left: auto;
233     clear: right;
234     width: 10em;
235
236     font-style: normal;
237     font-weight: normal;
238     font-variant: normal;
239     letter-spacing: 0;
240     text-transform: none;
241     text-decoration: none;
242
243     font-size: 13px;
244     line-height: 18px;
245     background-color: #fff;
246     /*    border: 1px solid gray;
247
248      border-right: none;
249      */
250     z-index: 1;
251     -moz-user-select: -moz-none;
252     -webkit-user-select: none;
253     user-select: none;
254     margin-right: -12em;
255     text-align: left;
256     color: #999;
257 }
258
259 .htmlview .canon {
260     color: black;
261 }
262
263 .htmlview .noncanon {
264     color: #d00;
265 }
266
267 .htmlview .motyw[x-editable] {
268     border-left: 4px solid #DDD;
269     padding: 0.2em 0.2em 0.2em 0.5em;
270     margin-top: 0.2em;
271 }
272
273 /*
274  * Przypisy
275  */
276 /* Znaczniki w tekście */
277 .annotation {
278     font-style: normal;
279 }
280
281 .htmlview .annotation:before {
282     content: "[" counter(main) "]";
283     counter-increment: main;
284         vertical-align: super;
285     text-decoration: none;
286         font-size: 66%;
287 }
288
289 .htmlview .annotation:hover {
290     background-color: #ffcccc;
291 }
292 .htmlview .pe .annotation:hover {
293     background-color: #96e0e4;
294 }
295 *.htmlview *.annotation-inline-box {
296     position: static;
297 }
298
299 /*
300  * Przypisy w tekście
301  */
302  
303 .htmlview .annotation-inline-box {
304     &:hover > span[x-annotation-box] {
305         display: block;
306     }
307
308     > span[x-annotation-box] {
309         display: none;
310         width: 300px;
311         font-size: 10pt;
312         line-height: 12pt;
313         font-weight: normal;
314         font-style: normal;
315         background: #fffe93;
316         border: 1px solid black;
317         border-radius: 10px;
318         -moz-border-radius: 10px;
319         -webkit-border-radius: 10px;
320         padding: 3px 5px;
321         text-decoration: none;
322         z-index: 600;
323
324         position: absolute;
325         left: 0;
326         top: 1em;
327
328         &.editing {
329             display: block;
330         }
331     }
332     
333 }
334
335 /*
336  * EDITABLE ELEMENTS
337  */
338 .htmlview *[x-editable] {
339     position: relative;
340     padding: 2px;
341     margin-left: 0;
342     border: 1px solid transparent;
343 }
344
345 /* focused editable element */
346 .htmlview *[x-editable]:hover {
347     z-index: 900;
348 }
349
350 .htmlview *[x-editable][x-open] {
351     visibility: hidden;
352 }
353
354 .edit-button, .delete-button, .accept-button, .tytul-button, .wyroznienie-button, .slowo-button, .znak-button {
355     font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
356     font-size: 16px;
357     line-height: 1.5;
358     position: absolute;
359     top: -28px;
360     left: -1px;
361     width: 72px;
362     height: 28px;
363     display: block;
364     /*    margin: 4px 0 2px 0;*/
365     padding: 5px 5px 2px 5px;
366     background-color: #FAFAFA;
367     /*    z-index: 3000;*/
368     /*    color: #FFF;
369      z-index: 1500;
370      */
371     border: 1px solid #DDD;
372     border-bottom: none;
373 }
374
375 .delete-button {
376     left: 70px;
377 }
378
379 .tytul-button {
380     left:150px;
381     width:100px;
382 }
383
384 .wyroznienie-button {
385     left:250px;
386     width:100px;
387 }
388 .slowo-button {
389     left:350px;
390     width:100px;
391 }
392 .znak-button {
393     left:450px;
394     width:100px;
395 }
396
397 .edit-button:hover, .edit-button:active,
398 .delete-button:hover, .delete-button:active,
399 .accept-button:hover, .accept-button:active,
400 .tytul-button:hover, .tytul-button:active,
401 .wyroznienie-button:hover, .wyroznienie-button:active,
402 .slowo-button:hover, .slowo-button:active,
403 .znak-button:hover, .znak-button:active {
404     /*    color: #FFF;*/
405     background-color: #999;
406     color: #FFF;
407 }
408
409 /*
410  * VISIBILITY RULES
411  */
412 .default-menu {
413     visibility: inherit;
414     opacity: 0.2;
415 }
416
417 .default-menu:hover {
418     opacity: 1;
419     z-index: 5000;
420 }
421
422 .htmlview *[x-annotation-box] > .default-menu {
423     opacity: 1;
424 }
425
426 .htmlview *[x-editable][x-open] > .default-menu {
427     visibility: hidden;
428 }
429
430 .htmlview *[x-editable][x-open] *[x-annotation-box] > .default-menu {
431     visibility: hidden;
432 }
433
434 .htmlview *[x-editable] > .edit-menu {
435     visibility: hidden;
436 }
437
438 .htmlview *[x-editable] *[x-annotation-box] > .edit-menu {
439     visibility: hidden;
440 }
441
442 .htmlview *[x-editable][x-open] > .edit-menu {
443     visibility: visible;
444 }
445
446 .htmlview *[x-editable][x-open] *[x-annotation-box] > .edit-menu {
447     visibility: visible;
448 }
449
450 .html-editarea {
451     border: 0;
452     background-color: gray;
453     padding: 1px;
454     z-index: 2000;
455     position: absolute;
456     text-align: left;
457 }
458
459 .html-editarea textarea {
460     position: absolute;
461     top: 0;
462     margin: 0;
463     padding: 0;
464     width: 100%;
465     height: 100%;
466     z-index: 0;
467     font-size: 10pt;
468     font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
469     line-height: 1.25;
470     /*    background-color: ivory;*/
471 }
472
473 .htmlview .out-of-flow-text {
474     display: block;
475     font-family: monospace;
476     border: 2px solid red !important;
477     white-space: pre-line;
478 }
479
480 .htmlview .out-of-flow-text::before {
481     content: "Tekst w tej ramce nie jest otagowany!";
482     background-color: #ff6c6c;
483     color: black;
484     font-size: 10pt;
485     line-height: 12pt;
486     border: 1px solid black;
487     -moz-border-radius: 10px;
488     -webkit-border-radius: 10px;
489     padding: 5px 1em;
490     margin: 0 0 0 1em;
491     text-align: justify;
492     display: inline;
493     float: right;
494     max-width: 25%;
495 }
496
497 .unknown-tag {
498     background-color: yellow;
499     margin: -0.25em;
500     padding: 0.25em;
501     border: 1px solid orange;
502 }
503
504 .alien {
505     color: red;
506 }
507
508 /* specialChars */
509 #specialCharsContainer {
510     text-align: center; 
511     width: 640px; 
512     height: 400px;
513     padding:20px; 
514     background-color: gray; 
515     position: absolute; 
516     top: 20px; 
517     right: 20px; 
518     z-index:10000;
519     overflow:auto;
520 }
521 #specialCharsContainer a {
522     color: white;
523     font-weight: bold;
524
525
526 #tableSpecialChars td input {
527     background-color: transparent;
528     border:0;
529     color: white;
530
531
532 #tableSpecialChars td input.recentSymbol {
533     background-color: white;
534     border:0;
535     color: black;
536