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     &:hover > span[x-annotation-box] {
 305         display: block;
 306     }
 307
 308     > span[x-annotation-box] {
 309         display: none;
 310         width: 300px;
 311         font-size: 10pt;
 312         line-height: 12pt;
 313         font-weight: normal;
 314         font-style: normal;
 315         background: #fffe93;
 316         border: 1px solid black;
 317         border-radius: 10px;
 318         -moz-border-radius: 10px;
 319         -webkit-border-radius: 10px;
 320         padding: 3px 5px;
 321         text-decoration: none;
 322         z-index: 600;
 323
 324         position: absolute;
 325         left: 0;
 326         top: 1em;
 327
 328         &.editing {
 329             display: block;
 330         }
 331     }
 332
 333 }
 334
 335 /*
 336  * EDITABLE ELEMENTS
 337  */
 338 .htmlview *[x-editable] {
 339     position: relative;
 340     padding: 2px;
 341     margin-left: 0;
 342     border: 1px solid transparent;
 343 }
 344
 345 /* focused editable element */
 346 .htmlview *[x-editable]:hover {
 347     z-index: 900;
 348 }
 349
 350 .htmlview *[x-editable][x-open] {
 351     visibility: hidden;
 352 }
 353
 354 .active-block-button, .delete-button, .accept-button, .tytul-button, .wyroznienie-button, .slowo-button, .znak-button {
 355     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";
 356     font-size: 16px;
 357     line-height: 1.5;
 358     position: absolute;
 359     top: -28px;
 360     left: -1px;
 361     width: 72px;
 362     height: 28px;
 363     display: block;
 364     /*    margin: 4px 0 2px 0;*/
 365     padding: 5px 5px 2px 5px;
 366     background-color: #FAFAFA;
 367     /*    z-index: 3000;*/
 368     /*    color: #FFF;
 369      z-index: 1500;
 370      */
 371     border: 1px solid #DDD;
 372     border-bottom: none;
 373 }
 374
 375 .delete-button {
 376     left: 70px;
 377 }
 378
 379 .tytul-button {
 380     left:150px;
 381     width:100px;
 382 }
 383
 384 .wyroznienie-button {
 385     left:250px;
 386     width:100px;
 387 }
 388 .slowo-button {
 389     left:350px;
 390     width:100px;
 391 }
 392 .znak-button {
 393     left:450px;
 394     width:100px;
 395 }
 396 .uwaga-button {
 397     right: 0;
 398     left: auto;
 399 }
 400
 401 .active-block-button:hover, .active-block-button:active,
 402 .delete-button:hover, .delete-button:active,
 403 .accept-button:hover, .accept-button:active,
 404 .tytul-button:hover, .tytul-button:active,
 405 .wyroznienie-button:hover, .wyroznienie-button:active,
 406 .slowo-button:hover, .slowo-button:active,
 407 .znak-button:hover, .znak-button:active {
 408     /*    color: #FFF;*/
 409     background-color: #999;
 410     color: #FFF;
 411 }
 412
 413 /*
 414  * VISIBILITY RULES
 415  */
 416 .default-menu {
 417     visibility: inherit;
 418     opacity: 0.2;
 419 }
 420
 421 .default-menu:hover {
 422     opacity: 1;
 423     z-index: 5000;
 424 }
 425
 426 .htmlview *[x-annotation-box] > .default-menu {
 427     opacity: 1;
 428 }
 429
 430 .htmlview *[x-editable][x-open] > .default-menu {
 431     visibility: hidden;
 432 }
 433
 434 .htmlview *[x-editable][x-open] *[x-annotation-box] > .default-menu {
 435     visibility: hidden;
 436 }
 437
 438 .htmlview *[x-editable] > .edit-menu {
 439     visibility: hidden;
 440 }
 441
 442 .htmlview *[x-editable] *[x-annotation-box] > .edit-menu {
 443     visibility: hidden;
 444 }
 445
 446 .htmlview *[x-editable][x-open] > .edit-menu {
 447     visibility: visible;
 448 }
 449
 450 .htmlview *[x-editable][x-open] *[x-annotation-box] > .edit-menu {
 451     visibility: visible;
 452 }
 453
 454 .html-editarea {
 455     border: 0;
 456     background-color: gray;
 457     padding: 1px;
 458     z-index: 2000;
 459     position: absolute;
 460     text-align: left;
 461 }
 462
 463 .html-editarea textarea {
 464     position: absolute;
 465     top: 0;
 466     margin: 0;
 467     padding: 0;
 468     width: 100%;
 469     height: 100%;
 470     z-index: 0;
 471     font-size: 10pt;
 472     font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
 473     line-height: 1.25;
 474     /*    background-color: ivory;*/
 475 }
 476
 477 .htmlview .out-of-flow-text {
 478     display: block;
 479     font-family: monospace;
 480     border: 2px solid red !important;
 481     white-space: pre-line;
 482 }
 483
 484 .htmlview .out-of-flow-text::before {
 485     content: "Tekst w tej ramce nie jest otagowany!";
 486     background-color: #ff6c6c;
 487     color: black;
 488     font-size: 10pt;
 489     line-height: 12pt;
 490     border: 1px solid black;
 491     -moz-border-radius: 10px;
 492     -webkit-border-radius: 10px;
 493     padding: 5px 1em;
 494     margin: 0 0 0 1em;
 495     text-align: justify;
 496     display: inline;
 497     float: right;
 498     max-width: 25%;
 499 }
 500
 501 .unknown-tag {
 502     background-color: yellow;
 503     margin: -0.25em;
 504     padding: 0.25em;
 505     border: 1px solid orange;
 506 }
 507
 508 .alien {
 509     color: red;
 510 }
 511
 512 /* specialChars */
 513 #specialCharsContainer {
 514     text-align: center;
 515     width: 640px;
 516     height: 400px;
 517     padding:20px;
 518     background-color: gray;
 519     position: absolute;
 520     top: 20px;
 521     right: 20px;
 522     z-index:10000;
 523     overflow:auto;
 524 }
 525 #specialCharsContainer a {
 526     color: white;
 527     font-weight: bold;
 528 }
 529
 530 #tableSpecialChars td input {
 531     background-color: transparent;
 532     border:0;
 533     color: white;
 534 }
 535
 536 #tableSpecialChars td input.recentSymbol {
 537     background-color: white;
 538     border:0;
 539     color: black;
 540 }
 541
 542
 543 #media-chooser {
 544     img {
 545         border: 3px solid transparent;
 546         &.active {
 547             border-color: green;
 548         }
 549     }
 550 }