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 .htmlview .reference-inline-box {
 305     &:hover {
 306         > span[x-annotation-box],
 307         > span[x-preview]
 308         {
 309             display: block;
 310         }
 311     }
 312
 313     > span[x-annotation-box],
 314     > span[x-preview]
 315     {
 316         display: none;
 317         width: 300px;
 318         font-size: 10pt;
 319         line-height: 12pt;
 320         font-weight: normal;
 321         font-style: normal;
 322         background: #fffe93;
 323         border: 1px solid black;
 324         border-radius: 10px;
 325         -moz-border-radius: 10px;
 326         -webkit-border-radius: 10px;
 327         padding: 3px 5px;
 328         text-decoration: none;
 329         z-index: 600;
 330
 331         position: absolute;
 332         left: 0;
 333         top: 1em;
 334
 335         &.editing {
 336             display: block;
 337             background: #93ff93;
 338         }
 339     }
 340
 341 }
 342
 343 /*
 344  * EDITABLE ELEMENTS
 345  */
 346 .htmlview *[x-editable] {
 347     position: relative;
 348     padding: 2px;
 349     margin-left: 0;
 350     border: 1px solid transparent;
 351 }
 352
 353 /* focused editable element */
 354 .htmlview *[x-editable]:hover {
 355     z-index: 900;
 356 }
 357
 358 .htmlview *[x-editable][x-open] {
 359     visibility: hidden;
 360 }
 361
 362 .html-editarea-toolbar {
 363     display: flex;
 364     justify-content: space-between;
 365     position: absolute;
 366     top: -28px;
 367     left: -1px;
 368     height: 28px;
 369     right: -1px;
 370
 371     .html-editarea-toolbar-left,
 372     .html-editarea-toolbar-right {
 373         display: flex;
 374     }
 375
 376     button {
 377         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";
 378         font-size: 16px;
 379         line-height: 1.5;
 380
 381         display: block;
 382         padding: 5px 5px 2px 5px;
 383         background-color: #FAFAFA;
 384         border: 1px solid #DDD;
 385         border-bottom: none;
 386         white-space: nowrap;
 387
 388         &:hover {
 389             background-color: #999;
 390             color: #FFF;
 391         }
 392     }
 393 }
 394
 395 /*
 396  * VISIBILITY RULES
 397  */
 398 .default-menu {
 399     visibility: inherit;
 400     opacity: 0.2;
 401 }
 402
 403 .default-menu:hover {
 404     opacity: 1;
 405     z-index: 5000;
 406 }
 407
 408 .htmlview *[x-annotation-box] > .default-menu {
 409     opacity: 1;
 410 }
 411
 412 .htmlview *[x-editable][x-open] > .default-menu {
 413     visibility: hidden;
 414 }
 415
 416 .htmlview *[x-editable][x-open] *[x-annotation-box] > .default-menu {
 417     visibility: hidden;
 418 }
 419
 420 .htmlview *[x-editable] > .edit-menu {
 421     visibility: hidden;
 422 }
 423
 424 .htmlview *[x-editable] *[x-annotation-box] > .edit-menu {
 425     visibility: hidden;
 426 }
 427
 428 .htmlview *[x-editable][x-open] > .edit-menu {
 429     visibility: visible;
 430 }
 431
 432 .htmlview *[x-editable][x-open] *[x-annotation-box] > .edit-menu {
 433     visibility: visible;
 434 }
 435
 436 .html-editarea {
 437     border: 0;
 438     background-color: gray;
 439     padding: 1px;
 440     z-index: 2000;
 441     position: absolute;
 442     text-align: left;
 443 }
 444
 445 .html-editarea textarea {
 446     position: absolute;
 447     top: 0;
 448     margin: 0;
 449     padding: 0;
 450     width: 100%;
 451     height: 100%;
 452     z-index: 0;
 453     font-size: 10pt;
 454     font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
 455     line-height: 1.25;
 456     /*    background-color: ivory;*/
 457 }
 458
 459 .htmlview .out-of-flow-text {
 460     display: block;
 461     font-family: monospace;
 462     border: 2px solid red !important;
 463     white-space: pre-line;
 464 }
 465
 466 .htmlview .out-of-flow-text::before {
 467     content: "Tekst w tej ramce nie jest otagowany!";
 468     background-color: #ff6c6c;
 469     color: black;
 470     font-size: 10pt;
 471     line-height: 12pt;
 472     border: 1px solid black;
 473     -moz-border-radius: 10px;
 474     -webkit-border-radius: 10px;
 475     padding: 5px 1em;
 476     margin: 0 0 0 1em;
 477     text-align: justify;
 478     display: inline;
 479     float: right;
 480     max-width: 25%;
 481 }
 482
 483 .unknown-tag {
 484     background-color: yellow;
 485     margin: -0.25em;
 486     padding: 0.25em;
 487     border: 1px solid orange;
 488 }
 489
 490 .alien {
 491     color: red;
 492 }
 493
 494 /* specialChars */
 495 #specialCharsContainer {
 496     text-align: center;
 497     width: 640px;
 498     height: 400px;
 499     padding:20px;
 500     background-color: gray;
 501     position: absolute;
 502     top: 20px;
 503     right: 20px;
 504     z-index:10000;
 505     overflow:auto;
 506 }
 507 #specialCharsContainer a {
 508     color: white;
 509     font-weight: bold;
 510 }
 511
 512 #tableSpecialChars td input {
 513     background-color: transparent;
 514     border:0;
 515     color: white;
 516 }
 517
 518 #tableSpecialChars td input.recentSymbol {
 519     background-color: white;
 520     border:0;
 521     color: black;
 522 }
 523
 524
 525 #media-chooser {
 526     img {
 527         border: 3px solid transparent;
 528         &.active {
 529             border-color: green;
 530         }
 531     }
 532 }
 533
 534
 535
 536 div[x-node="numeracja"] {
 537     background: lightblue;
 538     margin: 2em;
 539     padding: 2em;
 540     border-radius: 1em;
 541     &::before {
 542         content: "Reset numeracji";
 543     }
 544 }
 545
 546 *[x-number]::before {
 547     display: block;
 548     content: attr(x-number);
 549     position: absolute;
 550     text-align: right;
 551     width: 40px;
 552     left: -60px;
 553     font-size: .9em;
 554     opacity: .8;
 555
 556 }