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