docutils/docutils/writers/html_base/html-base.css

   1 /* Basic style sheet for the HTML output of Docutils.                      */
   2 /*                                                                         */
   3 /* :Author: Günter Milde, based on html4css1.css by David Goodger          */
   4 /* :Id: $Id$              */
   5 /* :Copyright: © 2015 Günter Milde.                                        */
   6 /* :License: Released under the terms of the `2-Clause BSD license`_,      */
   7 /*        in short:                                                        */
   8 /*                                                                         */
   9 /*    Copying and distribution of this file, with or without modification, */
  10 /*    are permitted in any medium without royalty provided the copyright   */
  11 /*    notice and this notice are preserved.                                */
  12 /*                                                                         */
  13 /*    This file is offered as-is, without any warranty.                    */
  14 /*                                                                         */
  15 /* .. _2-Clause BSD license: http://www.spdx.org/licenses/BSD-2-Clause     */
  16
  17
  18 /* This stylesheet contains basic rules for the output of the       */
  19 /* Docutils HTML writers. It validates_ as CSS2.1_                  */
  20 /*                                                                  */
  21 /* .. _CSS2.1: http://www.w3.org/TR/CSS2                            */
  22 /* .. _validates: http://jigsaw.w3.org/css-validator/validator$link */
  23
  24
  25 /* Document Structure */
  26 /* ****************** */
  27
  28 /* Document           */
  29
  30 body {
  31   padding: 0 5%;
  32   margin: 8px 0;
  33 }
  34
  35 div.document {
  36   line-height:1.3;
  37   counter-reset: table;
  38   /* counter-reset: figure; */
  39   /* avoid long lines --> better reading */
  40   /* OTOH: lines should not be too short because of missing hyphenation, */
  41   max-width: 50em;
  42   margin: auto;
  43 }
  44
  45 .align-left  { text-align: left; }
  46 .align-right { text-align: right; }
  47 .align-center {
  48   clear: both;
  49   text-align: center;
  50 }
  51
  52 /* Sections           */
  53
  54 h1.title, p.subtitle {
  55   text-align: center;
  56 }
  57
  58 h1 + p.subtitle { font-size: 1.6em; }
  59 h1 + p.section-subtitle { font-size: 1.6em; }
  60 h2 + p.section-subtitle { font-size: 1.28em; }
  61
  62 a.toc-backref {
  63   color: black;
  64   text-decoration: none;
  65 }
  66
  67 /* Stop floating sidebars, images and figures at section level 1,2,3 */
  68 h1, h2, h3 { clear: both; }
  69
  70 /* Transitions */
  71
  72 hr.docutils {
  73   width: 80%;
  74   margin-top: 1em;
  75   margin-bottom: 1em;
  76   clear: both;
  77 }
  78
  79 /* Paragraphs               */
  80 /* ==========               */
  81
  82 /* vertical space (parskip) */
  83 p, ol, ul, dl,
  84 div.line-block,
  85 table{
  86   margin-top: 0.5em;
  87   margin-bottom: 0.5em;
  88 }
  89 h1, h2, h3, h4, h5, h6,
  90 dl > dd {
  91   margin-bottom: 0.5em;
  92 }
  93
  94 /* titles */
  95 p.admonition-title,
  96 p.topic-title,
  97 p.sidebar-title,
  98 p.system-message-title {
  99   font-weight: bold;
 100 }
 101
 102 p.subtitle,
 103 p.section-subtitle,
 104 p.sidebar-subtitle {
 105   font-weight: bold;
 106   margin-top: -0.5em;
 107 }
 108
 109
 110 /* Warnings, Errors */
 111 div.caution p.admonition-title,
 112 div.attention p.admonition-title,
 113 div.danger p.admonition-title,
 114 div.error p.admonition-title,
 115 div.warning p.admonition-title,
 116 div.system-messages h1,
 117 div.error,
 118 span.problematic,
 119 p.system-message-title {
 120   color: red;
 121 }
 122
 123 /* Lists                    */
 124 /* ==========               */
 125
 126 /* compact and simple lists: no margin between items */
 127 dl.simple > dd, dl.compact > dd,
 128 .compact li, .compact ul, .compact ol
 129 .simple  li, .simple  ul, .simple  ol,
 130 .simple > li p, .compact > li p {
 131   margin-top: 0;
 132   margin-bottom: 0;
 133 }
 134
 135 /* Enumerated Lists         */
 136
 137 ol.arabic     { list-style: decimal }
 138 ol.loweralpha { list-style: lower-alpha }
 139 ol.upperalpha { list-style: upper-alpha }
 140 ol.lowerroman { list-style: lower-roman }
 141 ol.upperroman { list-style: upper-roman }
 142
 143 /* Definition Lists         */
 144
 145 dl > dd p:first-child { margin-top: 0; }
 146 /* :last-child is not part of CSS 2.1 (introduced in CSS 3) */
 147 /* dl > dd p:last-child  { margin-bottom: 0; } */
 148
 149 /* lists nested in definition lists */
 150 /* :only-child is not part of CSS 2.1 (introduced in CSS 3) */
 151 dd > ul:only-child, dd > ol:only-child { padding-left: 1em; }
 152
 153 dt span.classifier { font-style: italic }
 154 dt span.classifier:before {
 155   font-style: normal;
 156   margin: 0.5em;
 157   content: ":";
 158 }
 159
 160 /* Field Lists              */
 161
 162 /* bold field name, content starts on the same line */
 163 dl.field-list > dt,
 164 dl.option-list > dt,
 165 dl.docinfo > dt,
 166 dl.footnote > dt,
 167 dl.citation > dt,
 168 dl.description > dt {
 169   font-weight: bold;
 170   clear: left;
 171   float: left;
 172   margin: 0;
 173   padding: 0;
 174   padding-right: 0.5em;
 175 }
 176 /* Offset for field content (corresponds to the --field-name-limit option) */
 177 dl.field-list > dd,
 178 dl.option-list > dd,
 179 dl.docinfo > dd {
 180   margin-left:  9em; /* ca. 14 chars in the test examples */
 181 /*   padding-left: 0.5em; */
 182 }
 183 /* start field-body on a new line after long field names */
 184 dl.field-list > dd > *:first-child,
 185 dl.option-list > dd > *:first-child,
 186 dl.docinfo > dd  > *:first-child {
 187   display: inline-block;
 188   width: 100%;
 189   margin: 0;
 190 }
 191 /* field names followed by a colon */
 192 dl.field-list > dt:after,
 193 dl.docinfo    > dt:after {
 194   content: ":";
 195 }
 196
 197 /* example for custom field-name width */
 198 dl.field-list.narrow > dd {
 199   margin-left: 5em;
 200 }
 201 /* run-in: start field-body on same line after long field names */
 202 dl.field-list.run-in > dd p {
 203   display: block;
 204 }
 205
 206 /* Bibliographic Fields */
 207
 208 /* use special field-list dl.docinfo */
 209
 210 pre.address {
 211   margin-bottom: 0;
 212   margin-top: 0;
 213   font: inherit;
 214 }
 215 dd.authors > p { margin: 0; }
 216
 217 div.abstract p.topic-title {
 218   text-align: center;
 219 }
 220
 221 div.dedication {
 222   margin: 2em 5em;
 223   text-align: center;
 224   font-style: italic;
 225 }
 226 div.dedication p.topic-title {
 227   font-style: normal;
 228 }
 229
 230 /* Option Lists             */
 231
 232 dl.option-list {
 233   margin-left: 1em;
 234 }
 235 dl.option-list > dt {
 236   font-weight: normal;
 237 }
 238 span.option {
 239   white-space: nowrap;
 240 }
 241
 242 /* Text Blocks           */
 243 /* ============          */
 244
 245 /* Line Blocks              */
 246
 247 div.line-block {
 248   display: block;
 249 }
 250 div.line-block div.line-block {
 251   margin-top: 0;
 252   margin-bottom: 0;
 253   margin-left: 1.5em;
 254 }
 255
 256 /* Literal Blocks           */
 257
 258 pre.literal-block, pre.doctest-block,
 259 pre.math, pre.code {
 260   margin-left: 1.5em;
 261   margin-right: 1.5em
 262 }
 263
 264 /* Block Quotes             */
 265
 266 blockquote,
 267 div.topic {
 268   margin-left: 1.5em;
 269   margin-right: 1.5em
 270 }
 271 blockquote > table,
 272 div.topic > table {
 273   margin-top: 0;
 274   margin-bottom: 0;
 275 }
 276 blockquote p.attribution,
 277 div.topic p.attribution {
 278   text-align: right;
 279   margin-left: 20%;
 280 }
 281
 282 /* Tables                   */
 283 /* ======                   */
 284
 285 /* margins and borders for "normal" tables */
 286 table {
 287   border-collapse: collapse;
 288 }
 289 td, th {
 290   border-style: solid;
 291   border-color: silver;
 292   padding: 0 1ex;
 293 /* some borders missing at some magnifications
 294 /* in Firefox 31.5.0 and opera 10.63 */
 295   border-width: thin;
 296 }
 297 td > p:first-child, th > p:first-child {
 298   margin-top: 0;
 299 }
 300 td > p, th > p {
 301   margin-bottom: 0;
 302 }
 303 th {
 304   vertical-align: bottom;
 305 }
 306
 307 table > caption {
 308   text-align: left;
 309   margin-bottom: 0.25em
 310 }
 311
 312 table.borderless td, table.borderless th {
 313   border: 0;
 314   padding: 0;
 315   padding-right: 0.5em /* separate table cells */
 316 }
 317
 318 /* "booktabs" style (no vertical lines) */
 319 table.booktabs {
 320   border: 0;
 321   border-top: 2px solid;
 322   border-bottom: 2px solid;
 323   border-collapse: collapse;
 324 }
 325
 326 table.booktabs * {
 327   border: 0;
 328 }
 329 table.booktabs th {
 330   border-bottom: thin solid;
 331   text-align: left;
 332 }
 333
 334 /* numbered tables (counter defined in div.document) */
 335 table.numbered > caption:before {
 336   counter-increment: table;
 337   content: "Table " counter(table) ": ";
 338   font-weight: bold;
 339 }
 340
 341 /* Explicit Markup Blocks   */
 342 /* ======================   */
 343
 344 /* Footnotes and Citations  */
 345 /* -----------------------  */
 346
 347 /* line on the left */
 348 dl.footnote {
 349   padding-left: 1ex;
 350   border-left: solid;
 351   border-left-width: thin;
 352 }
 353
 354 dl > dt.label {
 355   font-weight: normal;
 356 }
 357 dt.label > span.fn-backref {
 358   margin: 0.2em;
 359 }
 360 dt.label > span.fn-backref > a {
 361   font-style: italic;
 362 }
 363
 364 /* Directives               */
 365 /* ----------               */
 366
 367 /* Admonitions              */
 368 /* System Messages          */
 369
 370 div.admonition,
 371 div.system-message {
 372   margin: 2em;
 373   border: medium outset;
 374   padding-right: 1em;
 375   padding-left: 1em;
 376 }
 377
 378 /* Body Elements            */
 379 /* ~~~~~~~~~~~~~            */
 380
 381 /* Image and Figure */
 382
 383 img.align-left,
 384 .figure.align-left,
 385 object.align-left {
 386   clear: left;
 387   float: left;
 388   margin-right: 1em
 389 }
 390 img.align-right,
 391 .figure.align-right,
 392 object.align-right {
 393   clear: right;
 394   float: right;
 395   margin-left: 1em
 396 }
 397 img.align-center,
 398 .figure.align-center,
 399 object.align-center {
 400   display: block;
 401   margin-left: auto;
 402   margin-right: auto;
 403 }
 404 /* reset inner alignment in figures */
 405 div.align-right {
 406   text-align: inherit }
 407
 408 /* Topic                    */
 409
 410 div.topic { margin: 2em }
 411
 412 /* Sidebar                  */
 413
 414 /* in a layout with fixed margins,                     */
 415 /* the sidebar can be moved into the margin completely */
 416 div.sidebar {
 417   border: medium outset;
 418   padding-right: 1em;
 419   padding-left: 1em;
 420   width: 30%;
 421   max-width: 26em;
 422   float: right;
 423   clear: right;
 424   margin-left: 1em;
 425   margin-right: -5.5%;
 426   background-color: #ffffee ;
 427 }
 428 p.sidebar-title { font-size: larger; }
 429
 430 /* Code                     */
 431
 432 pre.code, code { background-color: #eeeeee }
 433 pre.code .ln { color: gray; } /* line numbers */
 434 /* basic highlighting: for a complete scheme, see */
 435 /* http://docutils.sourceforge.net/sandbox/stylesheets/ */
 436 pre.code .comment, code .comment { color: #5C6576 }
 437 pre.code .keyword, code .keyword { color: #3B0D06; font-weight: bold }
 438 pre.code .literal.string, code .literal.string { color: #0C5404 }
 439 pre.code .name.builtin, code .name.builtin { color: #352B84 }
 440 pre.code .deleted, code .deleted { background-color: #DEB0A1}
 441 pre.code .inserted, code .inserted { background-color: #A3D289}
 442
 443 /* Math                     */
 444 /* styled separately (see math.css for math-output=HTML) */
 445
 446 /* Rubric                   */
 447
 448 p.rubric {
 449   font-weight: bold;
 450   font-size: larger;
 451   color: maroon;
 452 }
 453
 454 /* Epigraph                 */
 455 /* Highlights               */
 456 /* Pull-Quote               */
 457 /* Compound Paragraph       */
 458 /* Container                */
 459
 460 /* can be styled in a custom stylesheet */
 461
 462 /* Document Header and Footer */
 463
 464 div.footer, div.header {
 465   clear: both;
 466   font-size: smaller;
 467 }
 468
 469 /* Contents                 */
 470
 471 div.topic.contents {
 472   margin: 0; /* don't indent like a topic */
 473 }
 474 ul.auto-toc {
 475   list-style-type: none;
 476 }
 477
 478 /* Inline Markup            */
 479 /* =============            */
 480
 481 /* Emphasis                 */
 482 /*   em                     */
 483 /* Strong Emphasis          */
 484 /*   strong                 */
 485 /* Interpreted Text         */
 486 /*   span.interpreted       */
 487 /* Title Reference          */
 488 /*   cite                   */
 489 /* Inline Literals          */
 490
 491 tt.literal, span.docutils.literal {
 492   font-family: monospace;
 493   /* possible values: normal, nowrap, pre, pre-wrap, pre-line */
 494   white-space: pre-wrap;
 495 }
 496 /* do not wraph a hyphens and similar: */
 497 .literal > span.pre { white-space: nowrap; }
 498
 499 /* Hyperlink References     */
 500
 501 a { text-decoration: none; }
 502
 503 /* External Targets         */
 504 /*   span.target.external   */
 505 /* Internal Targets         */
 506 /*   span.target.internal   */
 507 /* Footnote References      */
 508 /*   a.footnote-reference   */
 509 /* Citation References      */
 510 /*   a.citation-reference   */