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 }
 252
 253 /*
 254  * Przypisy
 255  */
 256
 257 /* Znaczniki w tekście */
 258 .htmlview .annotation {
 259     vertical-align: super;
 260     text-decoration: none;
 261     font-size: 0.66em;
 262 }
 263
 264 .htmlview .annotation:before {
 265     content: "[" counter(main) "]";
 266     counter-increment: main;
 267 }
 268
 269 .htmlview .annotation:hover {
 270     background-color: #dfdfdf;
 271 }
 272
 273 .htmlview .annotation-inline-box[x-focused] > .annotation {
 274     background-color: #860000;
 275     color: #dfdfdf;
 276 }
 277
 278 *.htmlview *.annotation-inline-box {
 279     position: static;
 280 }
 281
 282 /*
 283  * Przypisy w tekście
 284  */
 285  .htmlview .annotation-inline-box > span[x-annotation-box]
 286  {
 287      display: none;
 288      position: absolute;
 289
 290      max-width: 36em;
 291
 292      font-size: 8pt;
 293      line-height: 12pt;
 294      font-weight: normal;
 295      font-style: normal;
 296
 297      background: white;
 298      border-color: gray;
 299      border-width: 2px;
 300      border-style: outset;
 301      padding: 3px 5px;
 302
 303      text-decoration: none;
 304      z-index: 10;
 305  }
 306
 307 .htmlview .annotation-inline-box[x-focused] > span[x-annotation-box],
 308 .htmlview .annotation-inline-box:hover > span[x-annotation-box] {
 309     display: block;
 310  }
 311
 312
 313 /*
 314  * Przypisy na końcu utworu (aktualnie nieuzywane)
 315  */
 316 .htmlview .annotations-block {
 317     counter-reset: secondary;
 318 }
 319
 320 .htmlview .annotations-block .annotation-body {
 321     position: relative;
 322     padding-left: 2.5em;
 323     padding-top: 0.2em;
 324 }
 325
 326 .htmlview .annotations-block .annotation-backref {
 327     position: absolute;
 328     top: 0.4em;
 329     left: -0.4em;
 330     width: 2.5em;
 331     text-align: right;
 332
 333 }
 334
 335 .htmlview .annotations-block .annotation-backref:before {
 336     content: "[" counter(secondary) "]";
 337     counter-increment: secondary;
 338 }
 339
 340
 341
 342
 343
 344 /*
 345  * EDITABLE ELEMENTS
 346  */
 347
 348
 349
 350 .htmlview *[x-editable] {
 351     padding-left: 3px;
 352 }
 353
 354 /* focused editable element */
 355 /* .htmlview *[x-editable]:hover
 356 {
 357
 358 } */
 359
 360 .htmlview *[x-editable][x-open]
 361 {
 362     visibility: hidden;
 363 }
 364
 365 .htmlview *[x-editable] > .context-menu {
 366     position: absolute;
 367     top: 0px;
 368     left: -50px;
 369     width: 50px;
 370
 371     text-align: center;
 372     font-size: 11px;
 373     line-height: 15px;
 374
 375     font-weight: normal;
 376     font-style: normal;
 377
 378     background-color: #dfdfdf;
 379
 380     margin: 0px;
 381     padding: 0px;
 382     visibility: inherit;
 383     display: block;
 384
 385     border-top: 1px solid black;
 386     border-left: 1px solid black;
 387     border-bottom: 1px solid black;
 388
 389     overflow: hidden;
 390
 391     -moz-border-radius-topleft: 2px;
 392     -moz-border-radius-bottomleft: 2px;
 393
 394     -webkit-border-top-left-radius: 2px;
 395     -webkit-border-bottom-left-radius: 2px;
 396
 397     z-index: 3000;
 398 }
 399
 400 .htmlview *[x-editable] > .context-menu * {
 401     margin: 0px;
 402     display: block;
 403
 404     padding: 2px;
 405     cursor: pointer;
 406     border-bottom: 1px solid black;
 407 }
 408
 409 .htmlview *[x-editable] > .context-menu *:last-child {
 410     cursor: pointer;
 411     border-bottom: none;
 412 }
 413
 414 .htmlview *[x-editable] > .context-menu *:hover {
 415     background-color: orange;
 416 }
 417
 418 /*
 419  * VISIBILITY RULES
 420  */
 421 .htmlview *[x-editable] > .default-menu {
 422     visibility: inherit;
 423     opacity: 0.4;
 424 }
 425
 426 .htmlview *[x-editable] > .default-menu:hover {
 427     opacity: 1;
 428 }
 429
 430 .htmlview *[x-editable][x-open] > .default-menu {
 431     visibility: hidden;
 432 }
 433
 434 .htmlview *[x-editable] > .edit-menu {
 435     visibility: hidden;
 436 }
 437
 438 .htmlview *[x-editable][x-open] > .edit-menu {
 439     visibility: visible;
 440 }
 441
 442 .html-editarea {
 443     border: 2px solid black;
 444     background-color: gray;
 445     padding: 1px;
 446
 447     z-index: 2000;
 448 }
 449
 450 .html-editarea textarea
 451 {
 452     border: 0px;
 453     margin: 0px;
 454     padding: 0px;
 455
 456     width: 100%;
 457     height: 100%;
 458
 459     z-index: 0;
 460     font-size: 10pt;
 461     background-color: ivory;
 462 }
 463
 464 .html-editarea p.html-editarea-toolbar {
 465     position: absolute;
 466     background: gray;
 467
 468     bottom: -26px;
 469     height: 24px;
 470
 471     left: 0px;
 472     right: 0px;
 473
 474     border: 2px solid black;
 475
 476     margin: 0px;
 477     padding: 0px;
 478
 479     z-index: 100;
 480 }
 481
 482