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