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