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