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