src/redakcja/static/css/html.scss

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