Isbns, and minor fixes.
[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[x-a-wl-typ='1'] {
112     margin-left: 1em;
113 }
114
115 .htmlview .strofa .wers_wciety[x-a-wl-typ='2'], .htmlview .strofa .wers_cd {
116     margin-left: 2em;
117 }
118
119 .htmlview .strofa .wers_wciety[x-a-wl-typ='3'] {
120     margin-left: 3em;
121 }
122
123 .htmlview .strofa .wers_wciety[x-a-wl-typ='4'] {
124     margin-left: 4em;
125 }
126
127 .htmlview .strofa .wers_wciety[x-a-wl-typ='5'] {
128     margin-left: 5em;
129 }
130
131 .htmlview .strofa .wers_wciety[x-a-wl-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             background: #93ff93;
331         }
332     }
333     
334 }
335
336 /*
337  * EDITABLE ELEMENTS
338  */
339 .htmlview *[x-editable] {
340     position: relative;
341     padding: 2px;
342     margin-left: 0;
343     border: 1px solid transparent;
344 }
345
346 /* focused editable element */
347 .htmlview *[x-editable]:hover {
348     z-index: 900;
349 }
350
351 .htmlview *[x-editable][x-open] {
352     visibility: hidden;
353 }
354
355 .active-block-button, .delete-button, .accept-button, .tytul-button, .wyroznienie-button, .slowo-button, .znak-button {
356     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";
357     font-size: 16px;
358     line-height: 1.5;
359     position: absolute;
360     top: -28px;
361     left: -1px;
362     width: 72px;
363     height: 28px;
364     display: block;
365     /*    margin: 4px 0 2px 0;*/
366     padding: 5px 5px 2px 5px;
367     background-color: #FAFAFA;
368     /*    z-index: 3000;*/
369     /*    color: #FFF;
370      z-index: 1500;
371      */
372     border: 1px solid #DDD;
373     border-bottom: none;
374 }
375
376 .delete-button {
377     left: 70px;
378 }
379
380 .tytul-button {
381     left:150px;
382     width:100px;
383 }
384
385 .wyroznienie-button {
386     left:250px;
387     width:100px;
388 }
389 .slowo-button {
390     left:350px;
391     width:100px;
392 }
393 .znak-button {
394     left:450px;
395     width:100px;
396 }
397 .uwaga-button {
398     right: 0;
399     left: auto;
400 }
401
402 .active-block-button:hover, .active-block-button:active,
403 .delete-button:hover, .delete-button:active,
404 .accept-button:hover, .accept-button:active,
405 .tytul-button:hover, .tytul-button:active,
406 .wyroznienie-button:hover, .wyroznienie-button:active,
407 .slowo-button:hover, .slowo-button:active,
408 .znak-button:hover, .znak-button:active {
409     /*    color: #FFF;*/
410     background-color: #999;
411     color: #FFF;
412 }
413
414 /*
415  * VISIBILITY RULES
416  */
417 .default-menu {
418     visibility: inherit;
419     opacity: 0.2;
420 }
421
422 .default-menu:hover {
423     opacity: 1;
424     z-index: 5000;
425 }
426
427 .htmlview *[x-annotation-box] > .default-menu {
428     opacity: 1;
429 }
430
431 .htmlview *[x-editable][x-open] > .default-menu {
432     visibility: hidden;
433 }
434
435 .htmlview *[x-editable][x-open] *[x-annotation-box] > .default-menu {
436     visibility: hidden;
437 }
438
439 .htmlview *[x-editable] > .edit-menu {
440     visibility: hidden;
441 }
442
443 .htmlview *[x-editable] *[x-annotation-box] > .edit-menu {
444     visibility: hidden;
445 }
446
447 .htmlview *[x-editable][x-open] > .edit-menu {
448     visibility: visible;
449 }
450
451 .htmlview *[x-editable][x-open] *[x-annotation-box] > .edit-menu {
452     visibility: visible;
453 }
454
455 .html-editarea {
456     border: 0;
457     background-color: gray;
458     padding: 1px;
459     z-index: 2000;
460     position: absolute;
461     text-align: left;
462 }
463
464 .html-editarea textarea {
465     position: absolute;
466     top: 0;
467     margin: 0;
468     padding: 0;
469     width: 100%;
470     height: 100%;
471     z-index: 0;
472     font-size: 10pt;
473     font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
474     line-height: 1.25;
475     /*    background-color: ivory;*/
476 }
477
478 .htmlview .out-of-flow-text {
479     display: block;
480     font-family: monospace;
481     border: 2px solid red !important;
482     white-space: pre-line;
483 }
484
485 .htmlview .out-of-flow-text::before {
486     content: "Tekst w tej ramce nie jest otagowany!";
487     background-color: #ff6c6c;
488     color: black;
489     font-size: 10pt;
490     line-height: 12pt;
491     border: 1px solid black;
492     -moz-border-radius: 10px;
493     -webkit-border-radius: 10px;
494     padding: 5px 1em;
495     margin: 0 0 0 1em;
496     text-align: justify;
497     display: inline;
498     float: right;
499     max-width: 25%;
500 }
501
502 .unknown-tag {
503     background-color: yellow;
504     margin: -0.25em;
505     padding: 0.25em;
506     border: 1px solid orange;
507 }
508
509 .alien {
510     color: red;
511 }
512
513 /* specialChars */
514 #specialCharsContainer {
515     text-align: center; 
516     width: 640px; 
517     height: 400px;
518     padding:20px; 
519     background-color: gray; 
520     position: absolute; 
521     top: 20px; 
522     right: 20px; 
523     z-index:10000;
524     overflow:auto;
525 }
526 #specialCharsContainer a {
527     color: white;
528     font-weight: bold;
529
530
531 #tableSpecialChars td input {
532     background-color: transparent;
533     border:0;
534     color: white;
535
536
537 #tableSpecialChars td input.recentSymbol {
538     background-color: white;
539     border:0;
540     color: black;
541
542
543
544 #media-chooser {
545     img {
546         border: 3px solid transparent;
547         &.active {
548             border-color: green;
549         }
550     }
551 }