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