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