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