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