platforma/static/css/html.css

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