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