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 .parse-warning {
 306     display: block;
 307     font-size: 10pt;
 308     background: #C0C0C0;
 309     margin: 1em;
 310 }
 311
 312 .parse-warning .message {
 313     color: purple;
 314     font-weight: bold;
 315 }
 316
 317 /* Uwaga/Extra */
 318 .htmlview .uwaga {
 319     background-color: #96e0e4;
 320     border: 1px solid black;
 321     -moz-border-radius: 10px;
 322     -webkit-border-radius: 10px;
 323     display: block;
 324     font-size: 10pt;
 325     line-height: 12pt;
 326     padding: 2px 1em;
 327     float: right;
 328     max-width: 20%;
 329     max-height: 24pt;
 330     margin-left: 0.5em;
 331     overflow: hidden;
 332         z-index: 500;
 333 }
 334
 335 div[x-node] > .uwaga {
 336     float: none;
 337     padding: 0.5em 1em;
 338     margin: 1em;
 339     max-width: 100%;
 340     max-height: 100%;
 341 }
 342
 343 .htmlview .uwaga:hover {
 344     max-height: 100%;
 345 }
 346
 347 .htmlview .annotation-inline-box .uwaga {
 348     max-height: 100%;
 349 }
 350
 351 /* Motywy */
 352 /* ======================== */
 353 /* = Footnotes and themes = */
 354 /* ======================== */
 355 .htmlview .begin, .htmlview .end {
 356     background: green;
 357 }
 358
 359 .htmlview .motyw {
 360     /* position: absolute; */
 361     float: right;
 362     left: auto;
 363     clear: right;
 364     width: 10em;
 365
 366     font-style: normal;
 367     font-weight: normal;
 368     font-variant: normal;
 369     letter-spacing: 0;
 370     text-transform: none;
 371     text-decoration: none;
 372
 373     font-size: 13px;
 374     line-height: 18px;
 375     background-color: #fff;
 376     /*    border: 1px solid gray;
 377
 378      border-right: none;
 379      */
 380     z-index: 1;
 381     -moz-user-select: -moz-none;
 382     -webkit-user-select: none;
 383     user-select: none;
 384     margin-right: -12em;
 385     text-align: left;
 386     color: #999;
 387 }
 388
 389 .htmlview .canon {
 390     color: black;
 391 }
 392
 393 .htmlview .noncanon {
 394     color: #d00;
 395 }
 396
 397 .htmlview .motyw[x-editable] {
 398     border-left: 4px solid #DDD;
 399     padding: 0.2em 0.2em 0.2em 0.5em;
 400     margin-top: 0.2em;
 401 }
 402
 403 /*
 404  * Przypisy
 405  */
 406 /* Znaczniki w tekście */
 407 .annotation {
 408     font-style: normal;
 409 }
 410
 411 .htmlview .annotation:before {
 412     content: "[" counter(main) "]";
 413     counter-increment: main;
 414         vertical-align: super;
 415     text-decoration: none;
 416         font-size: 66%;
 417 }
 418
 419 .htmlview .annotation:hover {
 420     background-color: #ffcccc;
 421 }
 422 .htmlview .pe .annotation:hover {
 423     background-color: #96e0e4;
 424 }
 425 *.htmlview *.annotation-inline-box {
 426     position: static;
 427 }
 428
 429 /*
 430  * Przypisy w tekście
 431  */
 432
 433 .htmlview .annotation-inline-box:hover > span[x-annotation-box]{
 434     display: block;
 435 }
 436
 437 .htmlview .annotation-inline-box > span[x-annotation-box] {
 438     display: none;
 439     width: 300px;
 440     font-size: 10pt;
 441     line-height: 12pt;
 442     font-weight: normal;
 443     font-style: normal;
 444     background: #fffe93;
 445     border: 1px solid black;
 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 {
 500     position: absolute;
 501     top: -21px;
 502     left: -1px;
 503     width: 72px;
 504     height: 28px;
 505     display: block;
 506     /*    margin: 4px 0 2px 0;*/
 507     padding: 5px 5px 2px 5px;
 508     background-color: #FAFAFA;
 509     /*    z-index: 3000;*/
 510     /*    color: #FFF;
 511      z-index: 1500;
 512      */
 513     border: 1px solid #DDD;
 514     border-bottom: none;
 515 }
 516
 517 .delete-button {
 518     left: 70px;
 519 }
 520
 521 .tytul-button {
 522     left:150px;
 523     width:100px;
 524 }
 525
 526 .wyroznienie-button {
 527     left:250px;
 528     width:100px;
 529 }
 530 .slowo-button {
 531     left:350px;
 532     width:100px;
 533 }
 534 .znak-button {
 535     left:450px;
 536     width:100px;
 537 }
 538
 539 .edit-button:hover, .edit-button:active,
 540 .delete-button:hover, .delete-button:active,
 541 .accept-button:hover, .accept-button:active,
 542 .tytul-button:hover, .tytul-button:active,
 543 .wyroznienie-button:hover, .wyroznienie-button:active,
 544 .slowo-button:hover, .slowo-button:active,
 545 .znak-button:hover, .znak-button:active {
 546     /*    color: #FFF;*/
 547     background-color: #999;
 548     color: #FFF;
 549 }
 550
 551 /*
 552  * VISIBILITY RULES
 553  */
 554 .default-menu {
 555     visibility: inherit;
 556     opacity: 0.2;
 557 }
 558
 559 .default-menu:hover {
 560     opacity: 1;
 561     z-index: 5000;
 562 }
 563
 564 .htmlview *[x-annotation-box] > .default-menu {
 565     opacity: 1;
 566 }
 567
 568 .htmlview *[x-editable][x-open] > .default-menu {
 569     visibility: hidden;
 570 }
 571
 572 .htmlview *[x-editable][x-open] *[x-annotation-box] > .default-menu {
 573     visibility: hidden;
 574 }
 575
 576 .htmlview *[x-editable] > .edit-menu {
 577     visibility: hidden;
 578 }
 579
 580 .htmlview *[x-editable] *[x-annotation-box] > .edit-menu {
 581     visibility: hidden;
 582 }
 583
 584 .htmlview *[x-editable][x-open] > .edit-menu {
 585     visibility: visible;
 586 }
 587
 588 .htmlview *[x-editable][x-open] *[x-annotation-box] > .edit-menu {
 589     visibility: visible;
 590 }
 591
 592 .html-editarea {
 593     border: 0;
 594     background-color: gray;
 595     padding: 1px;
 596     z-index: 2000;
 597     position: absolute;
 598 }
 599
 600 .html-editarea textarea {
 601     position: absolute;
 602     top: 0;
 603     margin: 0;
 604     padding: 0;
 605     width: 100%;
 606     height: 100%;
 607     z-index: 0;
 608     font-size: 10pt;
 609     /*    background-color: ivory;*/
 610 }
 611
 612 .htmlview .out-of-flow-text {
 613     display: block;
 614     font-family: monospace;
 615     border: 2px solid red !important;
 616     white-space: pre-line;
 617 }
 618
 619 .htmlview .out-of-flow-text::before {
 620     content: "Tekst w tej ramce nie jest otagowany!";
 621     background-color: #ff6c6c;
 622     color: black;
 623     font-size: 10pt;
 624     line-height: 12pt;
 625     border: 1px solid black;
 626     -moz-border-radius: 10px;
 627     -webkit-border-radius: 10px;
 628     padding: 5px 1em;
 629     margin: 0 0 0 1em;
 630     text-align: justify;
 631     display: inline;
 632     float: right;
 633     max-width: 25%;
 634 }
 635
 636 .unknown-tag {
 637     background-color: yellow;
 638     margin: -0.25em;
 639     padding: 0.25em;
 640     border: 1px solid orange;
 641 }
 642
 643 .alien {
 644     color: red;
 645 }
 646
 647 /* specialChars */
 648 #specialCharsContainer {
 649     text-align: center;
 650     width: 600px;
 651     height: 400px;
 652     padding:20px;
 653     background-color: gray;
 654     position: absolute;
 655     top: 20px;
 656     left: 20px;
 657     z-index:1000;
 658     overflow:auto;
 659 }
 660 #specialCharsContainer a {
 661     color: white;
 662     font-weight: bold;
 663 }
 664
 665 #tableSpecialChars td input {
 666     background-color: transparent;
 667     border:0;
 668     color: white;
 669 }
 670
 671 #tableSpecialChars td input.recentSymbol {
 672     background-color: white;
 673     border:0;
 674     color: black;
 675 }