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