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