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 }
  91
  92 .htmlview p {
  93     margin: 0;
  94 }
  95
  96 .htmlview #footnotes div {
  97     margin: 1.5em 0 0 0;
  98 }
  99
 100 .htmlview #footnotes p {
 101     margin-left: 2.5em;
 102     font-size: 0.875em;
 103 }
 104
 105 .htmlview blockquote {
 106     font-size: 0.875em;
 107 }
 108
 109 .htmlview pre {
 110         overflow-x: auto; /* Use horizontal scroller if needed; for Firefox 2, not needed in Firefox 3 */
 111         white-space: pre-wrap; /* css-3 */
 112         white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
 113         white-space: -pre-wrap; /* Opera 4-6 */
 114         white-space: -o-pre-wrap; /* Opera 7 */ /*
 115         width: 99%; */
 116         word-wrap: break-word; /* Internet Explorer 5.5+ */
 117 }
 118
 119 /* ============= */
 120 /* = Numbering = */
 121 /* ============= */
 122 .htmlview .anchor {
 123     position: relative;
 124     margin: 0;
 125     left: -2.2em;
 126     color: #777;
 127     font-size: 12px;
 128     width: 2em;
 129     text-align: center;
 130     padding: 0.25em 0.7em;
 131     line-height: 1.5em;
 132 }
 133
 134 .htmlview .anchor:hover, .htmlview .anchor:active {
 135     color: #FFF;
 136     background-color: #CCC;
 137 }
 138
 139 /* =================== */
 140 /* = Custom elements = */
 141 /* =================== */
 142 .htmlview .autor_utwor {
 143     font-size: 0.5em;
 144     display: block;
 145     line-height: 1.5em;
 146     margin-bottom: 0.25em;
 147 }
 148
 149 .htmlview .dzielo_nadrzedne {
 150     /* */
 151 }
 152
 153 .htmlview .podtytul {
 154     /* */
 155 }
 156
 157 .htmlview .didaskalia {
 158     font-style: italic;
 159     margin: 0.5em 0 0 1.5em;
 160 }
 161
 162 .htmlview .kwestia {
 163     margin: 0.5em 0 0;
 164 }
 165
 166 .htmlview .strofa {
 167     margin: 1.5em 0 0.5em auto;
 168 }
 169
 170 /* wersy */
 171 .htmlview *[x-verse]:after {
 172     content: "\feff";
 173 }
 174
 175 .htmlview .strofa .wers_wciety, .htmlview .strofa .wers_wciety[data-wlf-typ='1'] {
 176     margin-left: 1em;
 177 }
 178
 179 .htmlview .strofa .wers_wciety[data-wlf-typ='2'], .htmlview .strofa .wers_cd {
 180     margin-left: 2em;
 181 }
 182
 183 .htmlview .strofa .wers_wciety[data-wlf-typ='3'] {
 184     margin-left: 3em;
 185 }
 186
 187 .htmlview .strofa .wers_wciety[data-wlf-typ='4'] {
 188     margin-left: 4em;
 189 }
 190
 191 .htmlview .strofa .wers_wciety[data-wlf-typ='5'] {
 192     margin-left: 5em;
 193 }
 194
 195 .htmlview .strofa .wers_wciety[data-wlf-typ='6'] {
 196     margin-left: 6em;
 197 }
 198
 199 .htmlview .strofa .wers_do_prawej {
 200     text-align: right;
 201 }
 202
 203 /* błędne wersy */
 204 .htmlview *:not(.strofa) > *[x-verse]::after {
 205     content: "Ten wers znajduje się poza strofą.";
 206     display: inline;
 207     background: red;
 208     font-size: 8pt;
 209     border: 1px solid black;
 210     -moz-border-radius: 10px;
 211     -webkit-border-radius: 10px;
 212     padding: 1px 1em;
 213     margin-left: 1em;
 214     vertical-align: super;
 215 }
 216
 217 .htmlview .kwestia .strofa {
 218     margin: 0;
 219 }
 220
 221 .htmlview .akap, .htmlview .akap_cd, .htmlview .akap_dialog {
 222     text-align: justify;
 223     margin: 1.5em 0 0;
 224 }
 225
 226 .htmlview .motto_container {
 227         display: inline-block;
 228         margin: 1.5em 0 0;
 229         clear: right;
 230 }
 231
 232 .htmlview .motto {
 233     text-align: justify;
 234     font-style: italic;
 235 }
 236
 237 .htmlview p.motto_podpis {
 238         position: relative;
 239         right: -3em;
 240         text-align: right;
 241 }
 242
 243 .htmlview div.fragment {
 244     border-bottom: 0.1em solid #999;
 245     padding-bottom: 1.5em;
 246 }
 247
 248 .htmlview div.nota p, .htmlview div.dedykacja p {
 249     text-align: right;
 250     font-style: italic;
 251 }
 252
 253 .htmlview div.ramka {
 254     border: 1px darkgray solid;
 255 }
 256
 257 .htmlview .nota_red {
 258     background-color: #eee;
 259     border: 1px solid #888;
 260     -moz-border-radius: 10px;
 261     -webkit-border-radius: 10px;
 262     display: block;
 263     padding: 0 1em 1em 1em;
 264 }
 265
 266 .htmlview hr.sekcja_swiatlo {
 267     margin: 2em 0;
 268     visibility: hidden;
 269 }
 270
 271 .htmlview hr.separator_linia {
 272     margin: 1.5em 0;
 273     border: none;
 274     border-bottom: 0.1em solid #000;
 275 }
 276
 277 .htmlview p.sekcja_asterysk {
 278     padding: 0;
 279     margin: 1.5em 0;
 280     text-align: center;
 281 }
 282
 283 .htmlview p.sekcja_asterysk:after {
 284     content: "*";
 285 }
 286
 287 .htmlview div.lista_osob ol {
 288     list-style: none;
 289     padding: 0 0 0 1.5em;
 290 }
 291
 292 .htmlview p.miejsce_czas {
 293     font-style: italic;
 294 }
 295
 296 .htmlview .mat, .htmlview .slowo_obce, .htmlview .tytul_dziela, .htmlview .didaskalia {
 297     font-style: italic;
 298 }
 299
 300 .htmlview .wyroznienie {
 301     letter-spacing: 0.1em;
 302 }
 303
 304 .htmlview .osoba {
 305     font-style: normal;
 306     font-variant: small-caps;
 307 }
 308
 309 .htmlview em.wieksze_odstepy {
 310     font-style: normal;
 311     word-spacing: 1em;
 312 }
 313
 314 .htmlview .parse-warning {
 315     display: block;
 316     font-size: 10pt;
 317     background: #C0C0C0;
 318     margin: 1em;
 319 }
 320
 321 .parse-warning .message {
 322     color: purple;
 323     font-weight: bold;
 324 }
 325
 326 /* Uwaga/Extra */
 327 .htmlview .uwaga {
 328     background-color: #96e0e4;
 329     border: 1px solid black;
 330     -moz-border-radius: 10px;
 331     -webkit-border-radius: 10px;
 332     display: block;
 333     font-size: 10pt;
 334     line-height: 12pt;
 335     padding: 2px 1em;
 336     float: right;
 337     max-width: 20%;
 338     max-height: 24pt;
 339     margin-left: 0.5em;
 340     overflow: hidden;
 341         z-index: 500;
 342 }
 343
 344 div[x-node] > .uwaga {
 345     float: none;
 346     padding: 0.5em 1em;
 347     margin: 1em;
 348     max-width: 100%;
 349     max-height: 100%;
 350 }
 351
 352 .htmlview .uwaga:hover {
 353     max-height: 100%;
 354 }
 355
 356 .htmlview .annotation-inline-box .uwaga {
 357     max-height: 100%;
 358 }
 359
 360 /* Motywy */
 361 /* ======================== */
 362 /* = Footnotes and themes = */
 363 /* ======================== */
 364 .htmlview .begin, .htmlview .end {
 365     background: green;
 366 }
 367
 368 .htmlview .motyw {
 369     /* position: absolute; */
 370     float: right;
 371     left: auto;
 372     clear: right;
 373     width: 10em;
 374
 375     font-style: normal;
 376     font-weight: normal;
 377     font-variant: normal;
 378     letter-spacing: 0;
 379     text-transform: none;
 380     text-decoration: none;
 381
 382     font-size: 13px;
 383     line-height: 18px;
 384     background-color: #fff;
 385     /*    border: 1px solid gray;
 386
 387      border-right: none;
 388      */
 389     z-index: 1;
 390     -moz-user-select: -moz-none;
 391     -webkit-user-select: none;
 392     user-select: none;
 393     margin-right: -12em;
 394     text-align: left;
 395     color: #999;
 396 }
 397
 398 .htmlview .canon {
 399     color: black;
 400 }
 401
 402 .htmlview .noncanon {
 403     color: #d00;
 404 }
 405
 406 .htmlview .motyw[x-editable] {
 407     border-left: 4px solid #DDD;
 408     padding: 0.2em 0.2em 0.2em 0.5em;
 409     margin-top: 0.2em;
 410 }
 411
 412 /*
 413  * Przypisy
 414  */
 415 /* Znaczniki w tekście */
 416 .annotation {
 417     font-style: normal;
 418 }
 419
 420 .htmlview .annotation:before {
 421     content: "[" counter(main) "]";
 422     counter-increment: main;
 423         vertical-align: super;
 424     text-decoration: none;
 425         font-size: 66%;
 426 }
 427
 428 .htmlview .annotation:hover {
 429     background-color: #ffcccc;
 430 }
 431 .htmlview .pe .annotation:hover {
 432     background-color: #96e0e4;
 433 }
 434 *.htmlview *.annotation-inline-box {
 435     position: static;
 436 }
 437
 438 /*
 439  * Przypisy w tekście
 440  */
 441
 442 .htmlview .annotation-inline-box:hover > span[x-annotation-box]{
 443     display: block;
 444 }
 445
 446 .htmlview .annotation-inline-box > span[x-annotation-box] {
 447     display: none;
 448     width: 300px;
 449     font-size: 10pt;
 450     line-height: 12pt;
 451     font-weight: normal;
 452     font-style: normal;
 453     background: #fffe93;
 454     border: 1px solid black;
 455     border-radius: 10px;
 456     -moz-border-radius: 10px;
 457     -webkit-border-radius: 10px;
 458     padding: 3px 5px;
 459     text-decoration: none;
 460     z-index: 600;
 461 }
 462
 463 /*
 464  * Przypisy na końcu utworu (aktualnie nieuzywane)
 465  */
 466 .htmlview .annotations-block {
 467     counter-reset: secondary;
 468 }
 469
 470 .htmlview .annotations-block .annotation-body {
 471     position: relative;
 472     padding-left: 2.5em;
 473     padding-top: 0.2em;
 474 }
 475
 476 .htmlview .annotations-block .annotation-backref {
 477     position: absolute;
 478     top: 0.4em;
 479     left: -0.4em;
 480     width: 2.5em;
 481     text-align: right;
 482 }
 483
 484 .htmlview .annotations-block .annotation-backref:before {
 485     content: "[" counter(secondary) "]";
 486     counter-increment: secondary;
 487 }
 488
 489 /*
 490  * EDITABLE ELEMENTS
 491  */
 492 .htmlview *[x-editable] {
 493     position: relative;
 494     padding: 2px;
 495     margin-left: 0;
 496     border: 1px solid transparent;
 497 }
 498
 499 /* focused editable element */
 500 .htmlview *[x-editable]:hover {
 501     z-index: 900;
 502 }
 503
 504 .htmlview *[x-editable][x-open] {
 505     visibility: hidden;
 506 }
 507
 508 .edit-button, .delete-button, .accept-button, .tytul-button, .wyroznienie-button, .slowo-button, .znak-button {
 509     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";
 510     font-size: 16px;
 511     line-height: 1.5;
 512     position: absolute;
 513     top: -28px;
 514     left: -1px;
 515     width: 72px;
 516     height: 28px;
 517     display: block;
 518     /*    margin: 4px 0 2px 0;*/
 519     padding: 5px 5px 2px 5px;
 520     background-color: #FAFAFA;
 521     /*    z-index: 3000;*/
 522     /*    color: #FFF;
 523      z-index: 1500;
 524      */
 525     border: 1px solid #DDD;
 526     border-bottom: none;
 527 }
 528
 529 .delete-button {
 530     left: 70px;
 531 }
 532
 533 .tytul-button {
 534     left:150px;
 535     width:100px;
 536 }
 537
 538 .wyroznienie-button {
 539     left:250px;
 540     width:100px;
 541 }
 542 .slowo-button {
 543     left:350px;
 544     width:100px;
 545 }
 546 .znak-button {
 547     left:450px;
 548     width:100px;
 549 }
 550
 551 .edit-button:hover, .edit-button:active,
 552 .delete-button:hover, .delete-button:active,
 553 .accept-button:hover, .accept-button:active,
 554 .tytul-button:hover, .tytul-button:active,
 555 .wyroznienie-button:hover, .wyroznienie-button:active,
 556 .slowo-button:hover, .slowo-button:active,
 557 .znak-button:hover, .znak-button:active {
 558     /*    color: #FFF;*/
 559     background-color: #999;
 560     color: #FFF;
 561 }
 562
 563 /*
 564  * VISIBILITY RULES
 565  */
 566 .default-menu {
 567     visibility: inherit;
 568     opacity: 0.2;
 569 }
 570
 571 .default-menu:hover {
 572     opacity: 1;
 573     z-index: 5000;
 574 }
 575
 576 .htmlview *[x-annotation-box] > .default-menu {
 577     opacity: 1;
 578 }
 579
 580 .htmlview *[x-editable][x-open] > .default-menu {
 581     visibility: hidden;
 582 }
 583
 584 .htmlview *[x-editable][x-open] *[x-annotation-box] > .default-menu {
 585     visibility: hidden;
 586 }
 587
 588 .htmlview *[x-editable] > .edit-menu {
 589     visibility: hidden;
 590 }
 591
 592 .htmlview *[x-editable] *[x-annotation-box] > .edit-menu {
 593     visibility: hidden;
 594 }
 595
 596 .htmlview *[x-editable][x-open] > .edit-menu {
 597     visibility: visible;
 598 }
 599
 600 .htmlview *[x-editable][x-open] *[x-annotation-box] > .edit-menu {
 601     visibility: visible;
 602 }
 603
 604 .html-editarea {
 605     border: 0;
 606     background-color: gray;
 607     padding: 1px;
 608     z-index: 2000;
 609     position: absolute;
 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 }