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