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