redakcja/static/css/html.css

   1 /* Style widoku HTML. Nie należy tu ustawiać position ani marginesów */
   2 .htmlview {
   3     counter-reset: main aktywnosc;
   4     font-size: 16px;
   5     font-family: "Georgia", "Times New Roman", serif;
   6     line-height: 1.5em;
   7     padding: 3em;
   8     padding-left: 45px;
   9     overflow-y: scroll;
  10     overflow-x: auto;
  11 }
  12
  13 .htmlview[data-tag-names-visible] {
  14     padding-left: 90px;
  15 }
  16
  17 /*
  18  .htmlview[data-tag-names-visible] *[x-editable]:not(*[x-common])::before {
  19  display: block;
  20  float: left;
  21  clear: left;
  22  content: attr(x-node);
  23  font-weight: bold;
  24  font-style: normal;
  25  font-variant:normal;
  26  font-size: 8px;
  27  line-height: 8px;
  28  margin-bottom: 4px;
  29
  30  padding: 3px 4px;
  31  vertical-align: super;
  32  background-color:#add8e6;
  33  margin-left: -80px;
  34  width: 70px;
  35  text-align: center;
  36
  37  -webkit-border-radius: 4px;
  38  }
  39  */
  40 .htmlview *[x-node = 'RDF'][x-ns = 'http://www.w3.org/1999/02/22-rdf-syntax-ns#'] {
  41     display: none;
  42 }
  43
  44 .htmlview * {
  45     position: relative;
  46 }
  47
  48 .htmlview div {
  49     max-width: 36em;
  50 }
  51
  52 .htmlview #toc {
  53     display: none;
  54 }
  55
  56 .htmlview a {
  57     color: blue;
  58     text-decoration: none;
  59 }
  60
  61 .htmlview a:hover {
  62     text-decoration: none;
  63 }
  64
  65 .htmlview h1 {
  66     font-size: 3em;
  67     margin: 1.5em 0;
  68     text-align: center;
  69     line-height: 1.5em;
  70     font-weight: bold;
  71 }
  72
  73 .htmlview h2 {
  74     font-size: 2em;
  75     margin: 1.5em 0 0;
  76     font-weight: bold;
  77     line-height: 1.5em;
  78 }
  79
  80 .htmlview h3 {
  81     font-size: 1.5em;
  82     margin: 1.5em 0 0;
  83     font-weight: normal;
  84     line-height: 1.5em;
  85 }
  86
  87 .htmlview h4 {
  88     font-size: 1em;
  89     margin: 1.5em 0 0;
  90     line-height: 1.5em;
  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: 0em;
 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 /* błędne wersy */
 201 .htmlview *:not(.strofa) > *[x-verse]::after {
 202     content: "Ten wers znajduje się poza strofą.";
 203     display: inline;
 204     background: red;
 205     font-size: 8pt;
 206     border: 1px solid black;
 207     -moz-border-radius: 10px;
 208     -webkit-border-radius: 10px;
 209     padding: 1px 1em;
 210     margin-left: 1em;
 211     vertical-align: super;
 212 }
 213
 214 .htmlview .kwestia .strofa {
 215     margin: 0;
 216 }
 217
 218 .htmlview .akap, .htmlview .akap_cd, .htmlview .akap_dialog {
 219     text-align: justify;
 220     margin: 1.5em 0 0;
 221 }
 222
 223 .htmlview .motto_container {
 224         display: inline-block;
 225         margin: 1.5em 0 0;
 226         clear: right;
 227 }
 228
 229 .htmlview .motto {
 230     text-align: justify;
 231     font-style: italic;
 232 }
 233
 234 .htmlview p.motto_podpis {
 235         position: relative;
 236         right: -3em;
 237         text-align: right;
 238 }
 239
 240 .htmlview div.fragment {
 241     border-bottom: 0.1em solid #999;
 242     padding-bottom: 1.5em;
 243 }
 244
 245 .htmlview div.nota p, .htmlview div.dedykacja p {
 246     text-align: right;
 247     font-style: italic;
 248 }
 249
 250 .htmlview div.ramka {
 251     border: 1px darkgray solid;
 252 }
 253
 254 .htmlview .nota_red {
 255     background-color: #eee;
 256     border: 1px solid #888;
 257     -moz-border-radius: 10px;
 258     -webkit-border-radius: 10px;
 259     display: block;
 260     padding: 0 1em 1em 1em;
 261 }
 262
 263 .htmlview hr.sekcja_swiatlo {
 264     margin: 2em 0;
 265     visibility: hidden;
 266 }
 267
 268 .htmlview hr.separator_linia {
 269     margin: 1.5em 0;
 270     border: none;
 271     border-bottom: 0.1em solid #000;
 272 }
 273
 274 .htmlview p.sekcja_asterysk {
 275     padding: 0;
 276     margin: 1.5em 0;
 277     text-align: center;
 278 }
 279
 280 .htmlview p.sekcja_asterysk:after {
 281     content: "*";
 282 }
 283
 284 .htmlview div.lista_osob ol {
 285     list-style: none;
 286     padding: 0 0 0 1.5em;
 287 }
 288
 289 .htmlview p.miejsce_czas {
 290     font-style: italic;
 291 }
 292
 293 .htmlview .mat, .htmlview .slowo_obce, .htmlview .tytul_dziela, .htmlview .didaskalia {
 294     font-style: italic;
 295 }
 296
 297 .htmlview .wyroznienie {
 298     letter-spacing: 0.1em;
 299 }
 300
 301 .htmlview .osoba {
 302     font-style: normal;
 303     font-variant: small-caps;
 304 }
 305
 306 .htmlview .parse-warning {
 307     display: block;
 308     font-size: 10pt;
 309     background: #C0C0C0;
 310     margin: 1em;
 311 }
 312
 313 .parse-warning .message {
 314     color: purple;
 315     font-weight: bold;
 316 }
 317
 318 /* Uwaga/Extra */
 319 .htmlview .uwaga {
 320     background-color: #96e0e4;
 321     border: 1px solid black;
 322     -moz-border-radius: 10px;
 323     -webkit-border-radius: 10px;
 324     display: block;
 325     font-size: 10pt;
 326     line-height: 12pt;
 327     padding: 2px 1em;
 328     float: right;
 329     max-width: 20%;
 330     max-height: 24pt;
 331     margin-left: 0.5em;
 332     overflow: hidden;
 333         z-index: 500;
 334 }
 335
 336 div[x-node] > .uwaga {
 337     float: none;
 338     padding: 0.5em 1em;
 339     margin: 1em;
 340     max-width: 100%;
 341     max-height: 100%;
 342 }
 343
 344 .htmlview .uwaga:hover {
 345     max-height: 100%;
 346 }
 347
 348 .htmlview .annotation-inline-box .uwaga {
 349     max-height: 100%;
 350 }
 351
 352 /* Motywy */
 353 /* ======================== */
 354 /* = Footnotes and themes = */
 355 /* ======================== */
 356 .htmlview .begin, .htmlview .end {
 357     background: green;
 358 }
 359
 360 .htmlview .motyw {
 361     /* position: absolute; */
 362     float: right;
 363     left: auto;
 364     clear: right;
 365     width: 10em;
 366
 367     font-style: normal;
 368     font-weight: normal;
 369     font-variant: normal;
 370     letter-spacing: 0;
 371     text-transform: none;
 372     text-decoration: none;
 373
 374     font-size: 13px;
 375     line-height: 18px;
 376     background-color: #fff;
 377     /*    border: 1px solid gray;
 378
 379      border-right: none;
 380      */
 381     z-index: 1;
 382     -moz-user-select: -moz-none;
 383     -webkit-user-select: none;
 384     user-select: none;
 385     margin-right: -12em;
 386     text-align: left;
 387     color: #999;
 388 }
 389
 390 .htmlview .canon {
 391     color: black;
 392 }
 393
 394 .htmlview .noncanon {
 395     color: #d00;
 396 }
 397
 398 .htmlview .motyw[x-editable] {
 399     border-left: 4px solid #DDD;
 400     padding: 0.2em 0.2em 0.2em 0.5em;
 401     margin-top: 0.2em;
 402 }
 403
 404 /*
 405  * Przypisy
 406  */
 407 /* Znaczniki w tekście */
 408 .annotation {
 409     font-style: normal;
 410 }
 411
 412 .htmlview .annotation:before {
 413     content: "[" counter(main) "]";
 414     counter-increment: main;
 415         vertical-align: super;
 416     text-decoration: none;
 417         font-size: 66%;
 418 }
 419
 420 .htmlview .annotation:hover {
 421     background-color: #ffcccc;
 422 }
 423 .htmlview .pe .annotation:hover {
 424     background-color: #96e0e4;
 425 }
 426 *.htmlview *.annotation-inline-box {
 427     position: static;
 428 }
 429
 430 /*
 431  * Przypisy w tekście
 432  */
 433
 434 .htmlview .annotation-inline-box:hover > span[x-annotation-box]{
 435     display: block;
 436 }
 437
 438 .htmlview .annotation-inline-box > span[x-annotation-box] {
 439     display: none;
 440     width: 300px;
 441     font-size: 10pt;
 442     line-height: 12pt;
 443     font-weight: normal;
 444     font-style: normal;
 445     background: #fffe93;
 446     border-color: black;
 447     border-width: 1px;
 448     border-style: solid;
 449     border-radius: 10px;
 450     -moz-border-radius: 10px;
 451     -webkit-border-radius: 10px;
 452     padding: 3px 5px;
 453     text-decoration: none;
 454     z-index: 600;
 455 }
 456
 457 /*
 458  * Przypisy na końcu utworu (aktualnie nieuzywane)
 459  */
 460 .htmlview .annotations-block {
 461     counter-reset: secondary;
 462 }
 463
 464 .htmlview .annotations-block .annotation-body {
 465     position: relative;
 466     padding-left: 2.5em;
 467     padding-top: 0.2em;
 468 }
 469
 470 .htmlview .annotations-block .annotation-backref {
 471     position: absolute;
 472     top: 0.4em;
 473     left: -0.4em;
 474     width: 2.5em;
 475     text-align: right;
 476 }
 477
 478 .htmlview .annotations-block .annotation-backref:before {
 479     content: "[" counter(secondary) "]";
 480     counter-increment: secondary;
 481 }
 482
 483 /*
 484  * EDITABLE ELEMENTS
 485  */
 486 .htmlview *[x-editable] {
 487     position: relative;
 488     padding: 2px;
 489     margin-left: 0;
 490     border: 1px solid transparent;
 491 }
 492
 493 /* focused editable element */
 494 .htmlview *[x-editable]:hover {
 495     z-index: 900;
 496 }
 497
 498 .htmlview *[x-editable][x-open] {
 499     visibility: hidden;
 500 }
 501
 502 .edit-button, .delete-button, .accept-button, .tytul-button, .wyroznienie-button, .slowo-button, .znak-button {
 503     position: absolute;
 504     top: -21px;
 505     left: -1px;
 506     width: 72px;
 507     height: 28px;
 508     display: block;
 509     /*    margin: 4px 0 2px 0;*/
 510     padding: 5px 5px 2px 5px;
 511     border: none;
 512     background-color: #FAFAFA;
 513     /*    z-index: 3000;*/
 514     /*    color: #FFF;
 515      z-index: 1500;
 516      */
 517     border: 1px solid #DDD;
 518     border-bottom: none;
 519 }
 520
 521 .delete-button {
 522     left: 70px;
 523 }
 524
 525 .tytul-button {
 526     left:150px;
 527     width:100px;
 528 }
 529
 530 .wyroznienie-button {
 531     left:250px;
 532     width:100px;
 533 }
 534 .slowo-button {
 535     left:350px;
 536     width:100px;
 537 }
 538 .znak-button {
 539     left:450px;
 540     width:100px;
 541 }
 542
 543 .edit-button:hover, .edit-button:active,
 544 .delete-button:hover, .delete-button:active,
 545 .accept-button:hover, .accept-button:active,
 546 .tytul-button:hover, .tytul-button:active,
 547 .wyroznienie-button:hover, .wyroznienie-button:active,
 548 .slowo-button:hover, .slowo-button:active,
 549 .znak-button:hover, .znak-button:active {
 550     /*    color: #FFF;*/
 551     background-color: #999;
 552     color: #FFF;
 553 }
 554
 555 /*
 556  * VISIBILITY RULES
 557  */
 558 .default-menu {
 559     visibility: inherit;
 560     opacity: 0.2;
 561 }
 562
 563 .default-menu:hover {
 564     opacity: 1;
 565     z-index: 5000;
 566 }
 567
 568 .htmlview *[x-annotation-box] > .default-menu {
 569     opacity: 1;
 570 }
 571
 572 .htmlview *[x-editable][x-open] > .default-menu {
 573     visibility: hidden;
 574 }
 575
 576 .htmlview *[x-editable][x-open] *[x-annotation-box] > .default-menu {
 577     visibility: hidden;
 578 }
 579
 580 .htmlview *[x-editable] > .edit-menu {
 581     visibility: hidden;
 582 }
 583
 584 .htmlview *[x-editable] *[x-annotation-box] > .edit-menu {
 585     visibility: hidden;
 586 }
 587
 588 .htmlview *[x-editable][x-open] > .edit-menu {
 589     visibility: visible;
 590 }
 591
 592 .htmlview *[x-editable][x-open] *[x-annotation-box] > .edit-menu {
 593     visibility: visible;
 594 }
 595
 596 .html-editarea {
 597     border: 0px;
 598     background-color: gray;
 599     padding: 1px;
 600     z-index: 2000;
 601     position: absolute;
 602 }
 603
 604 .html-editarea textarea {
 605     position: absolute;
 606     top: 0;
 607     margin: 0px;
 608     padding: 0px;
 609     width: 100%;
 610     min-width: 600px; /* for editing narrow elements */
 611     height: 100%;
 612     z-index: 0;
 613     font-size: 10pt;
 614     /*    background-color: ivory;*/
 615 }
 616
 617 .htmlview .out-of-flow-text {
 618     display: block;
 619     font-face: monospace;
 620     border: 2px solid red !important;
 621     white-space: pre-line;
 622 }
 623
 624 .htmlview .out-of-flow-text::before {
 625     content: "Tekst w tej ramce nie jest otagowany!";
 626     background-color: #ff6c6c;
 627     color: black;
 628     font-size: 10pt;
 629     line-height: 12pt;
 630     border: 1px solid black;
 631     -moz-border-radius: 10px;
 632     -webkit-border-radius: 10px;
 633     padding: 5px 1em;
 634     margin: 0em;
 635     margin-left: 1em;
 636     text-align: justify;
 637     display: inline;
 638     float: right;
 639     max-width: 25%;
 640 }
 641
 642 .unknown-tag {
 643     background-color: yellow;
 644     margin: -0.25em;
 645     padding: 0.25em;
 646     border: 1px solid orange;
 647 }
 648
 649 .alien {
 650     color: red;
 651 }
 652
 653 /* specialChars */
 654 #specialCharsContainer {
 655     text-align: center;
 656     width: 600px;
 657     height: 400px;
 658     padding:20px;
 659     background-color: gray;
 660     position: absolute;
 661     top: 20px;
 662     left: 20px;
 663     z-index:1000;
 664     overflow:auto;
 665 }
 666 #specialCharsContainer a {
 667     color: white;
 668     font-weight: bold;
 669 }
 670
 671 #tableSpecialChars td input {
 672     background-color: transparent;
 673     border:0;
 674     color: white;
 675 }
 676
 677 #tableSpecialChars td input.recentSymbol {
 678     background-color: white;
 679     border:0;
 680     color: black;
 681 }
 682
 683
 684 .htmlview .lista[data-wlf-typ="alfa"]
 685 {
 686     list-style-type: lower-alpha;
 687 }
 688
 689 .htmlview .lista[data-wlf-typ="slowniczek"]
 690 {
 691     list-style-type: none;
 692 }
 693
 694 .htmlview span.punkt {
 695     display: list-item;
 696     list-style-position: inside;
 697 }
 698
 699 .htmlview span.aktywnosc span.opis {
 700     font-style: italic;
 701 }
 702 .htmlview span.aktywnosc span.opis p:before {
 703     content: counter(aktywnosc) ". ";
 704     counter-increment: aktywnosc;
 705     font-weight: bold;
 706 }
 707
 708 .htmlview span.aktywnosc span.wskazowki {
 709     font-style: italic;
 710     color: #202020;
 711 }
 712
 713 .htmlview .pomoce, .htmlview .czas, .htmlview .forma {
 714     display: block;
 715 }
 716 .htmlview .pomoce:before { content: "Pomoce: "; }
 717 .htmlview .czas:before { content: "Czas: "; }
 718 .htmlview .czas:after { content: " min"; }
 719 .htmlview .forma:before { content: "Forma: "; }
 720
 721 .htmlview .aktywnosc {
 722     display: block;
 723 }
 724
 725 .htmlview .definiendum {
 726     font-weight: bold;
 727     display: block;
 728 }
 729
 730 .htmlview .definiens {
 731     padding-left: 50px;
 732 }
 733
 734 .htmlview .link {
 735     color: #990066;
 736 }
 737
 738 .htmlview .tabela {
 739     display: table;
 740 }
 741
 742 .htmlview .wiersz {
 743     display: table-row;
 744 }
 745
 746 .htmlview .kol {
 747     min-width: 200px;
 748     display: table-cell;
 749     padding: 5px;
 750 }
 751
 752 .htmlview .kol span {
 753     position: relative;
 754 }
 755
 756 .htmlview img.obraz {
 757     max-width: 640px;
 758 }
 759
 760 .htmlview span.luka {
 761     color: #808080;
 762     text-decoration: underline;
 763 }