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 * {
  13     position: relative;
  14 }
  15
  16 .htmlview div {
  17     max-width: 36em;
  18 }
  19
  20 .htmlview #toc {
  21     display: none;
  22 }
  23
  24 .htmlview a {
  25     color: blue;
  26     text-decoration: none;
  27 }
  28
  29 .htmlview a:hover {
  30     text-decoration: none;
  31 }
  32
  33 .htmlview h1 {
  34     font-size: 3em;
  35     margin: 1.5em 0;
  36     text-align: center;
  37     line-height: 1.5em;
  38     font-weight: bold;
  39
  40     text-transform: capitalize;
  41 }
  42
  43 .htmlview h2 {
  44     font-size: 2em;
  45     margin: 1.5em 0 0;
  46     font-weight: bold;
  47     line-height: 1.5em;
  48 }
  49
  50 .htmlview h3 {
  51     font-size: 1.5em;
  52     margin: 1.5em 0 0;
  53     font-weight: normal;
  54     line-height: 1.5em;
  55 }
  56
  57 .htmlview h4 {
  58     font-size: 1em;
  59     margin: 1.5em 0 0;
  60     line-height: 1.5em;
  61 }
  62
  63 .htmlview p {
  64     margin: 0;
  65 }
  66
  67 .htmlview #footnotes div {
  68     margin: 1.5em 0 0 0;
  69 }
  70
  71 .htmlview #footnotes p {
  72     margin-left: 2.5em;
  73     font-size: 0.875em;
  74 }
  75
  76 .htmlview blockquote {
  77     font-size: 0.875em;
  78 }
  79
  80 /* ============= */
  81 /* = Numbering = */
  82 /* ============= */
  83 .htmlview .anchor {
  84     position: relative;
  85     margin: 0em;
  86     left: -2.2em;
  87     color: #777;
  88     font-size: 12px;
  89     width: 2em;
  90     text-align: center;
  91     padding: 0.25em 0.7em;
  92     line-height: 1.5em;
  93 }
  94
  95 .htmlview .anchor:hover, .htmlview .anchor:active {
  96     color: #FFF;
  97     background-color: #CCC;
  98 }
  99
 100 /* =================== */
 101 /* = Custom elements = */
 102 /* =================== */
 103 .htmlview .autor_utwor {
 104     font-size: 0.5em;
 105     display: block;
 106     line-height: 1.5em;
 107     margin-bottom: 0.25em;
 108 }
 109
 110 .htmlview .dzielo_nadrzedne {
 111     font-size: 1.5em;
 112     display: block;
 113     line-height: 1.5em;
 114     margin-bottom: -0.25em;
 115 }
 116
 117 .htmlview .podtytul {
 118     font-size: 0.5em;
 119     display: block;
 120     line-height: 1.5em;
 121     margin-top: -0.25em;
 122 }
 123
 124 .htmlview .didaskalia {
 125     font-style: italic;
 126     margin: 0.5em 0 0 1.5em;
 127 }
 128
 129 .htmlview .kwestia {
 130     margin: 0.5em 0 0;
 131 }
 132
 133 .htmlview .strofa {
 134     margin: 1.5em 0 0 auto;
 135 }
 136
 137 .htmlview .kwestia .strofa {
 138     margin: 0;
 139 }
 140
 141 .htmlview .akap, .htmlview .akap_cd, .htmlview .akap_dialog {
 142     text-align: justify;
 143     margin: 1.5em 0 0;
 144 }
 145
 146 .htmlview p.motto {
 147     text-align: justify;
 148     font-style: italic;
 149     margin: 1.5em 0 0;
 150 }
 151
 152 .htmlview p.motto_podpis {
 153     font-size: 0.875em;
 154     text-align: right;
 155 }
 156
 157 .htmlview div.fragment {
 158     border-bottom: 0.1em solid #999;
 159     padding-bottom: 1.5em;
 160 }
 161
 162 .htmlview div.nota p,
 163 .htmlview div.dedykacja p {
 164     text-align: right;
 165     font-style: italic;
 166 }
 167
 168 .htmlview br.sekcja_swiatlo {
 169     height: 3em;
 170     /* visibility: hidden; */
 171 }
 172
 173 .htmlview hr.separator_linia {
 174     margin: 1.5em 0;
 175     border: none;
 176     border-bottom: 0.1em solid #000;
 177 }
 178
 179 .htmlview p.sekcja_asterysk {
 180     padding: 0;
 181     margin: 1.5em 0;
 182     text-align: center;
 183 }
 184
 185 .htmlview div.lista_osob ol {
 186     list-style: none;
 187     padding: 0 0 0 1.5em;
 188 }
 189
 190 .htmlview p.miejsce_czas {
 191     font-style: italic;
 192 }
 193
 194 .htmlview .mat,
 195 .htmlview .slowo_obce,
 196 .htmlview .tytul_dziela,
 197 .htmlview .didaskalia {
 198     font-style: italic;
 199 }
 200
 201 .htmlview .wyroznienie {
 202     letter-spacing: 0.1em;
 203 }
 204
 205 .htmlview .osoba {
 206     font-style: normal;
 207     font-variant: small-caps;
 208 }
 209
 210 .htmlview .parse-warning {
 211     display: block;
 212     font-size: 10pt;
 213     background: #C0C0C0;
 214     margin: 1em;
 215 }
 216
 217  .parse-warning .message {
 218     color: purple;
 219     font-weight: bold;
 220 }
 221
 222
 223 /* Motywy */
 224 /* ======================== */
 225 /* = Footnotes and themes = */
 226 /* ======================== */
 227
 228 .htmlview .theme-begin, .htmlview .theme-end {
 229     background: green;
 230 }
 231
 232 .htmlview .theme-ref {
 233     position: absolute;
 234     right: -8em;
 235
 236     min-width: 5em;
 237     max-width: 8em;
 238
 239     font-weight: normal;
 240     font-size: 10pt;
 241     font-variant: normal;
 242     text-decoration: none;
 243
 244     padding: 0.2em 0.2em 0.2em 0.5em;
 245
 246     border: 1px solid gray;
 247     border-left: 2px dotted gray;
 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 }
 255
 256 /*
 257  * Przypisy
 258  */
 259
 260 /* Znaczniki w tekście */
 261 .htmlview .annotation {
 262     vertical-align: super;
 263     text-decoration: none;
 264     font-size: 0.66em;
 265 }
 266
 267 .htmlview .annotation:before {
 268     content: "[" counter(main) "]";
 269     counter-increment: main;
 270 }
 271
 272 .htmlview .annotation:hover {
 273     background-color: #dfdfdf;
 274 }
 275
 276 *.htmlview *.annotation-inline-box {
 277     position: static;
 278 }
 279
 280 /*
 281  * Przypisy w tekście
 282  */
 283  .htmlview .annotation-inline-box > span[x-annotation-box]
 284  {
 285      display: none;
 286      position: absolute;
 287
 288      max-width: 36em;
 289
 290      font-size: 8pt;
 291      line-height: 12pt;
 292      font-weight: normal;
 293      font-style: normal;
 294
 295      background: white;
 296      border-color: gray;
 297      border-width: 2px;
 298      border-style: outset;
 299      padding: 3px 5px;
 300
 301      text-decoration: none;
 302      z-index: 10;
 303  }
 304
 305
 306 /*
 307  * Przypisy na końcu utworu (aktualnie nieuzywane)
 308  */
 309 .htmlview .annotations-block {
 310     counter-reset: secondary;
 311 }
 312
 313 .htmlview .annotations-block .annotation-body {
 314     position: relative;
 315     padding-left: 2.5em;
 316     padding-top: 0.2em;
 317 }
 318
 319 .htmlview .annotations-block .annotation-backref {
 320     position: absolute;
 321     top: 0.4em;
 322     left: -0.4em;
 323     width: 2.5em;
 324     text-align: right;
 325
 326 }
 327
 328 .htmlview .annotations-block .annotation-backref:before {
 329     content: "[" counter(secondary) "]";
 330     counter-increment: secondary;
 331 }
 332
 333 /*
 334  * EDITABLE ELEMENTS
 335  */
 336
 337 .htmlview *[x-editable] {
 338     padding-left: 3px;
 339 }
 340
 341 /* focused editable element */
 342 /* .htmlview *[x-editable]:hover
 343 {
 344
 345 } */
 346
 347 .htmlview *[x-editable][x-open]
 348 {
 349     visibility: hidden;
 350 }
 351
 352 .htmlview *[x-editable] > .context-menu {
 353     position: absolute;
 354     top: 0px;
 355     left: -50px;
 356     width: 50px;
 357
 358     text-align: center;
 359     font-size: 11px;
 360     line-height: 15px;
 361
 362     font-weight: normal;
 363     font-style: normal;
 364
 365     background-color: #dfdfdf;
 366
 367     margin: 0px;
 368     padding: 0px;
 369     visibility: inherit;
 370     display: block;
 371
 372     border-top: 1px solid black;
 373     border-left: 1px solid black;
 374     border-bottom: 1px solid black;
 375
 376     overflow: hidden;
 377
 378     -moz-border-radius-topleft: 2px;
 379     -moz-border-radius-bottomleft: 2px;
 380
 381     -webkit-border-top-left-radius: 2px;
 382     -webkit-border-bottom-left-radius: 2px;
 383
 384     z-index: 3000;
 385 }
 386
 387 .htmlview *[x-editable] > .context-menu * {
 388     margin: 0px;
 389     display: block;
 390
 391     -moz-user-select: -moz-none;
 392     -webkit-user-select: none;
 393
 394     padding: 2px;
 395     cursor: pointer;
 396     border-bottom: 1px solid black;
 397 }
 398
 399 .htmlview *[x-editable] > .context-menu *:last-child {
 400     cursor: pointer;
 401     border-bottom: none;
 402 }
 403
 404 .htmlview *[x-editable] > .context-menu *:hover {
 405     background-color: orange;
 406 }
 407
 408 /*
 409  * VISIBILITY RULES
 410  */
 411 .htmlview *[x-editable] > .default-menu {
 412     visibility: inherit;
 413     opacity: 0.4;
 414 }
 415
 416 .htmlview *[x-editable] > .default-menu:hover {
 417     opacity: 1;
 418 }
 419
 420 .htmlview *[x-annotation-box][x-editable] > .default-menu {
 421     opacity: 1;
 422 }
 423
 424 .htmlview *[x-editable][x-open] > .default-menu {
 425     visibility: hidden;
 426 }
 427
 428 .htmlview *[x-editable] > .edit-menu {
 429     visibility: hidden;
 430 }
 431
 432 .htmlview *[x-editable][x-open] > .edit-menu {
 433     visibility: visible;
 434 }
 435
 436 .html-editarea {
 437     border: 2px solid black;
 438     background-color: gray;
 439     padding: 1px;
 440
 441     z-index: 2000;
 442 }
 443
 444 .html-editarea textarea
 445 {
 446     border: 0px;
 447     margin: 0px;
 448     padding: 0px;
 449
 450     width: 100%;
 451     height: 100%;
 452
 453     z-index: 0;
 454     font-size: 10pt;
 455     background-color: ivory;
 456 }
 457
 458 .html-editarea p.html-editarea-toolbar {
 459     position: absolute;
 460     background: gray;
 461
 462     bottom: -26px;
 463     height: 24px;
 464
 465     left: 0px;
 466     right: 0px;
 467
 468     border: 2px solid black;
 469
 470     margin: 0px;
 471     padding: 0px;
 472
 473     z-index: 100;
 474 }
 475
 476