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 .parse-warning {
 316     display: block;
 317     font-size: 10pt;
 318     background: #C0C0C0;
 319     margin: 1em;
 320 }
 321
 322 .parse-warning .message {
 323     color: purple;
 324     font-weight: bold;
 325 }
 326
 327 /* Uwaga/Extra */
 328 .htmlview .uwaga {
 329     background-color: #96e0e4;
 330     border: 1px solid black;
 331     -moz-border-radius: 10px;
 332     -webkit-border-radius: 10px;
 333     display: block;
 334     font-size: 10pt;
 335     line-height: 12pt;
 336     padding: 2px 1em;
 337     float: right;
 338     max-width: 20%;
 339     max-height: 24pt;
 340     margin-left: 0.5em;
 341     overflow: hidden;
 342         z-index: 500;
 343 }
 344
 345 div[x-node] > .uwaga {
 346     float: none;
 347     padding: 0.5em 1em;
 348     margin: 1em;
 349     max-width: 100%;
 350     max-height: 100%;
 351 }
 352
 353 .htmlview .uwaga:hover {
 354     max-height: 100%;
 355 }
 356
 357 .htmlview .annotation-inline-box .uwaga {
 358     max-height: 100%;
 359 }
 360
 361 /* Motywy */
 362 /* ======================== */
 363 /* = Footnotes and themes = */
 364 /* ======================== */
 365 .htmlview .begin, .htmlview .end {
 366     background: green;
 367 }
 368
 369 .htmlview .motyw {
 370     /* position: absolute; */
 371     float: right;
 372     left: auto;
 373     clear: right;
 374     width: 10em;
 375
 376     font-style: normal;
 377     font-weight: normal;
 378     font-variant: normal;
 379     letter-spacing: 0;
 380     text-transform: none;
 381     text-decoration: none;
 382
 383     font-size: 13px;
 384     line-height: 18px;
 385     background-color: #fff;
 386     /*    border: 1px solid gray;
 387
 388      border-right: none;
 389      */
 390     z-index: 1;
 391     -moz-user-select: -moz-none;
 392     -webkit-user-select: none;
 393     user-select: none;
 394     margin-right: -12em;
 395     text-align: left;
 396     color: #999;
 397 }
 398
 399 .htmlview .canon {
 400     color: black;
 401 }
 402
 403 .htmlview .noncanon {
 404     color: #d00;
 405 }
 406
 407 .htmlview .motyw[x-editable] {
 408     border-left: 4px solid #DDD;
 409     padding: 0.2em 0.2em 0.2em 0.5em;
 410     margin-top: 0.2em;
 411 }
 412
 413 /*
 414  * Przypisy
 415  */
 416 /* Znaczniki w tekście */
 417 .annotation {
 418     font-style: normal;
 419 }
 420
 421 .htmlview .annotation:before {
 422     content: "[" counter(main) "]";
 423     counter-increment: main;
 424         vertical-align: super;
 425     text-decoration: none;
 426         font-size: 66%;
 427 }
 428
 429 .htmlview .annotation:hover {
 430     background-color: #ffcccc;
 431 }
 432 .htmlview .pe .annotation:hover {
 433     background-color: #96e0e4;
 434 }
 435 *.htmlview *.annotation-inline-box {
 436     position: static;
 437 }
 438
 439 /*
 440  * Przypisy w tekście
 441  */
 442
 443 .htmlview .annotation-inline-box:hover > span[x-annotation-box]{
 444     display: block;
 445 }
 446
 447 .htmlview .annotation-inline-box > span[x-annotation-box] {
 448     display: none;
 449     width: 300px;
 450     font-size: 10pt;
 451     line-height: 12pt;
 452     font-weight: normal;
 453     font-style: normal;
 454     background: #fffe93;
 455     border: 1px solid black;
 456     border-radius: 10px;
 457     -moz-border-radius: 10px;
 458     -webkit-border-radius: 10px;
 459     padding: 3px 5px;
 460     text-decoration: none;
 461     z-index: 600;
 462 }
 463
 464 /*
 465  * Przypisy na końcu utworu (aktualnie nieuzywane)
 466  */
 467 .htmlview .annotations-block {
 468     counter-reset: secondary;
 469 }
 470
 471 .htmlview .annotations-block .annotation-body {
 472     position: relative;
 473     padding-left: 2.5em;
 474     padding-top: 0.2em;
 475 }
 476
 477 .htmlview .annotations-block .annotation-backref {
 478     position: absolute;
 479     top: 0.4em;
 480     left: -0.4em;
 481     width: 2.5em;
 482     text-align: right;
 483 }
 484
 485 .htmlview .annotations-block .annotation-backref:before {
 486     content: "[" counter(secondary) "]";
 487     counter-increment: secondary;
 488 }
 489
 490 /*
 491  * EDITABLE ELEMENTS
 492  */
 493 .htmlview *[x-editable] {
 494     position: relative;
 495     padding: 2px;
 496     margin-left: 0;
 497     border: 1px solid transparent;
 498 }
 499
 500 /* focused editable element */
 501 .htmlview *[x-editable]:hover {
 502     z-index: 900;
 503 }
 504
 505 .htmlview *[x-editable][x-open] {
 506     visibility: hidden;
 507 }
 508
 509 .edit-button, .delete-button, .accept-button, .tytul-button, .wyroznienie-button, .slowo-button, .znak-button {
 510     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";
 511     font-size: 16px;
 512     line-height: 1.5;
 513     position: absolute;
 514     top: -28px;
 515     left: -1px;
 516     width: 72px;
 517     height: 28px;
 518     display: block;
 519     /*    margin: 4px 0 2px 0;*/
 520     padding: 5px 5px 2px 5px;
 521     background-color: #FAFAFA;
 522     /*    z-index: 3000;*/
 523     /*    color: #FFF;
 524      z-index: 1500;
 525      */
 526     border: 1px solid #DDD;
 527     border-bottom: none;
 528 }
 529
 530 .delete-button {
 531     left: 70px;
 532 }
 533
 534 .tytul-button {
 535     left:150px;
 536     width:100px;
 537 }
 538
 539 .wyroznienie-button {
 540     left:250px;
 541     width:100px;
 542 }
 543 .slowo-button {
 544     left:350px;
 545     width:100px;
 546 }
 547 .znak-button {
 548     left:450px;
 549     width:100px;
 550 }
 551
 552 .edit-button:hover, .edit-button:active,
 553 .delete-button:hover, .delete-button:active,
 554 .accept-button:hover, .accept-button:active,
 555 .tytul-button:hover, .tytul-button:active,
 556 .wyroznienie-button:hover, .wyroznienie-button:active,
 557 .slowo-button:hover, .slowo-button:active,
 558 .znak-button:hover, .znak-button:active {
 559     /*    color: #FFF;*/
 560     background-color: #999;
 561     color: #FFF;
 562 }
 563
 564 /*
 565  * VISIBILITY RULES
 566  */
 567 .default-menu {
 568     visibility: inherit;
 569     opacity: 0.2;
 570 }
 571
 572 .default-menu:hover {
 573     opacity: 1;
 574     z-index: 5000;
 575 }
 576
 577 .htmlview *[x-annotation-box] > .default-menu {
 578     opacity: 1;
 579 }
 580
 581 .htmlview *[x-editable][x-open] > .default-menu {
 582     visibility: hidden;
 583 }
 584
 585 .htmlview *[x-editable][x-open] *[x-annotation-box] > .default-menu {
 586     visibility: hidden;
 587 }
 588
 589 .htmlview *[x-editable] > .edit-menu {
 590     visibility: hidden;
 591 }
 592
 593 .htmlview *[x-editable] *[x-annotation-box] > .edit-menu {
 594     visibility: hidden;
 595 }
 596
 597 .htmlview *[x-editable][x-open] > .edit-menu {
 598     visibility: visible;
 599 }
 600
 601 .htmlview *[x-editable][x-open] *[x-annotation-box] > .edit-menu {
 602     visibility: visible;
 603 }
 604
 605 .html-editarea {
 606     border: 0;
 607     background-color: gray;
 608     padding: 1px;
 609     z-index: 2000;
 610     position: absolute;
 611     text-align: left;
 612 }
 613
 614 .html-editarea textarea {
 615     position: absolute;
 616     top: 0;
 617     margin: 0;
 618     padding: 0;
 619     width: 100%;
 620     height: 100%;
 621     z-index: 0;
 622     font-size: 10pt;
 623     font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
 624     line-height: 1.25;
 625     /*    background-color: ivory;*/
 626 }
 627
 628 .htmlview .out-of-flow-text {
 629     display: block;
 630     font-family: monospace;
 631     border: 2px solid red !important;
 632     white-space: pre-line;
 633 }
 634
 635 .htmlview .out-of-flow-text::before {
 636     content: "Tekst w tej ramce nie jest otagowany!";
 637     background-color: #ff6c6c;
 638     color: black;
 639     font-size: 10pt;
 640     line-height: 12pt;
 641     border: 1px solid black;
 642     -moz-border-radius: 10px;
 643     -webkit-border-radius: 10px;
 644     padding: 5px 1em;
 645     margin: 0 0 0 1em;
 646     text-align: justify;
 647     display: inline;
 648     float: right;
 649     max-width: 25%;
 650 }
 651
 652 .unknown-tag {
 653     background-color: yellow;
 654     margin: -0.25em;
 655     padding: 0.25em;
 656     border: 1px solid orange;
 657 }
 658
 659 .alien {
 660     color: red;
 661 }
 662
 663 /* specialChars */
 664 #specialCharsContainer {
 665     text-align: center;
 666     width: 640px;
 667     height: 400px;
 668     padding:20px;
 669     background-color: gray;
 670     position: absolute;
 671     top: 20px;
 672     right: 20px;
 673     z-index:10000;
 674     overflow:auto;
 675 }
 676 #specialCharsContainer a {
 677     color: white;
 678     font-weight: bold;
 679 }
 680
 681 #tableSpecialChars td input {
 682     background-color: transparent;
 683     border:0;
 684     color: white;
 685 }
 686
 687 #tableSpecialChars td input.recentSymbol {
 688     background-color: white;
 689     border:0;
 690     color: black;
 691 }