doc/manual/css-docbook/styles.css

   1 /*
   2  * styles.css
   3  *
   4  * Copyright (c) 2004 David Holroyd, and contributors
   5  * See the file 'COPYING' for terms of use
   6  *
   7  * Part of the Docbook-CSS stylesheet
   8  *   http://www.badgers-in-foil.co.uk/projects/docbook-css/
   9  */
  10
  11 /*
  12  * CSS2 styling for DocBook XML
  13  *
  14  * To be included in the cascade _after_ core.css.  Defines styling that can't
  15  * be generated mechanically from another source.
  16  */
  17
  18 /*
  19  * TODO:
  20  *
  21  *  - do I remember correctly that <abstract> be hidden for screen media?
  22  */
  23
  24
  25 article, book {
  26         margin:.5em;
  27 }
  28 title, subtitle {
  29         font-family:sans-serif;
  30 }
  31 title {
  32         font-weight:bolder;
  33         margin-bottom:.5em;
  34 }
  35
  36 /*
  37  * Sectioning elements that may contain paragraph-level elements get left/right
  38  * margins
  39  */
  40 section>*, chapter>*, bibliography>*, appendix>*, glossary>*, preface>*,
  41 dedication>*, colophon>*, sect1>*, sect2>*, sect3>*, sect4>*, sect5>*,
  42 bibliodiv>* {
  43         margin-left:10%;
  44         margin-right:10%;
  45 }
  46
  47 /*
  48  * Give admonitions bigger margins, to set them more apart from the main
  49  * flow of text.
  50  */
  51 warning, caution, important, tip, note {
  52         margin-left: 15%;
  53         margin-right: 15%;
  54 }
  55
  56 /*
  57  * Remove any margin defined be the previous rule when the child in question
  58  * is a section or title.  Titles should be allowed to take up the maximum
  59  * available width, as they're usually is larger type.  Sections must not
  60  * be given margins because, the *contents* of the section will alreay have
  61  * them; we don't want to recursively increase margins with the nesting depth
  62  * of the document.
  63  */
  64 section, title, sect1, sect2, sect3, sect4, sect5, bibliodiv {
  65         margin-left:0;
  66         margin-right:0;
  67 }
  68
  69 book>title, article>title {
  70         font-size:xx-large;
  71         text-align:center;
  72         border-bottom-style:solid;
  73 }
  74
  75 appendix>title, bibliography>title, chapter>title, colophon>title, dedication>title, glossary>title, part>title, preface>title {
  76         font-size:xx-large;
  77         text-align:center;
  78 }
  79
  80 section>title, sect1>title, bibliodiv>title {
  81         font-size:xx-large;
  82 }
  83
  84 section>section>title, sect2>title {
  85         font-size:x-large;
  86         margin-left:5%;
  87 }
  88
  89 section>section>section>title, sect3>title {
  90         font-size:large;
  91         margin-left:7.5%;
  92 }
  93
  94 section>section>section>section>title, sect4>title {
  95         font-size:large;
  96         margin-left:10%;
  97 }
  98
  99 section>section>section>section>section>title, sect5>title {
 100         font-size:inherit;
 101         margin-left:10%;
 102 }
 103
 104 biblioentry > title {
 105         display: inline;
 106 }
 107
 108 /* Give vertical spacing between compoments of the document */
 109
 110 *+section, *+chapter, *+bibliography, *+bibliodiv, *+appendix, *+glossary {
 111         margin-top: 3em;
 112 }
 113 section>*+section {
 114         margin-top: 2em;
 115 }
 116 section>section>*+section {
 117         margin-top: 1em;
 118 }
 119
 120
 121 /*
 122  * Give paragraph-level elements some leading space when they aren't the first
 123  * item in their containing block.
 124  */
 125 *+para, *+formalpara, *+blockquote, *+glossentry, *+table, *+variablelist,
 126 *+example, *+informalexample, *+programlisting, *+cmdsynopsis,
 127 *+orderedlist, *+itemizedlist, *+figure,
 128 *>warning, *>caution, *>important, *>tip, *>note {
 129         margin-top:.5em;
 130 }
 131
 132
 133 /*
 134  * BiblioEntry blocks need a bit more space, since they may contain multiple
 135  * paragraphs, and so need greater-than-paragraph spacing to make it clear
 136  * which gap is the end just of a paragraph, and which gap is the end of the
 137  * entry
 138  */
 139 *+biblioentry {
 140         margin-top: 1em;
 141 }
 142
 143 /*
 144  * REVISIT: I think this is the proper way; but deson't work in Firefox 0.8
 145
 146 formalpara > title {
 147         display: run-in;
 148 }
 149
 150  * Make all children of formalpara inline, instead...
 151  */
 152
 153 formalpara > * {
 154         display: inline;
 155 }
 156
 157 formalpara > title:after {
 158         content: ".";
 159 }
 160
 161 para, formalpara {
 162         text-align: justify;
 163 }
 164
 165 quote:before {
 166         content: open-quote;
 167 }
 168
 169 quote:after {
 170         content: close-quote;
 171 }
 172
 173 question, answer {
 174         margin-top:.5em;
 175         display:list-item;
 176 }
 177
 178 question>para, answer>para {
 179         display:inline;
 180 }
 181
 182 /* see language specific files for content */
 183 question:before {
 184         display:marker;
 185         font-weight:bolder;
 186 }
 187 answer:before {
 188         display:marker;
 189         font-weight: bolder;
 190 }
 191
 192 emphasis {
 193         font-style:italic;
 194 }
 195 emphasis[role="strong"] {
 196         font-weight:bolder;
 197 }
 198 emphasis[role="bold"] {
 199         font-weight:bolder;
 200         font-style:inherit;
 201 }
 202 emphasis[role="underline"] {
 203         text-decoration:underline;
 204         font-style:inherit;
 205 }
 206 emphasis[role="strikethrough"] {
 207         text-decoration:line-through;
 208         font-style:inherit;
 209 }
 210 emphasis>emphasis {
 211         font-weight:bolder;
 212 }
 213
 214 foreignphrase, wordasword, productname {
 215         font-style:italic;
 216 }
 217
 218 replaceable {
 219         font-style:italic;
 220 }
 221
 222 sgmltag[class="starttag"]:before, sgmltag[class="emptytag"]:before {
 223         content: "<";
 224 }
 225
 226 sgmltag[class="starttag"]:after, sgmltag[class="endtag"]:after {
 227         content: ">";
 228 }
 229
 230 sgmltag[class="endtag"]:before {
 231         content: "</";
 232 }
 233
 234 sgmltag[class="emptytag"]:after {
 235         content: "/>";
 236 }
 237
 238 sgmltag[class="attvalue"]:before, sgmltag[class="attvalue"]:after {
 239         content: '"';
 240 }
 241
 242 sgmltag[class="genentity"]:before {
 243         content: "&";
 244 }
 245 sgmltag[class="genentity"]:after {
 246         content: ";";
 247 }
 248
 249 sgmltag[class="sgmlcomment"]:before {
 250         content: "<!--";
 251 }
 252 sgmltag[class="sgmlcomment"]:after {
 253         content: "-->";
 254 }
 255
 256 sgmltag[class="xmlpi"]:before {
 257         content: "<?";
 258 }
 259 sgmltag[class="xmlpi"]:after {
 260         content: "?>";
 261 }
 262
 263
 264 application, keycap, guimenu, guimenuitem, guisubmenu {
 265         font-family: sans-serif;
 266 }
 267
 268 /*
 269  * ensure there's some whitespace between elements of an author's name
 270  */
 271 author>* + *:before {
 272         content: " ";
 273 }
 274
 275 /* give keycaps a '3D' shaded look */
 276 keycap {
 277         padding-left: .2em;
 278         padding-right: .2em;
 279         border-style: solid;
 280         border-top-width: 2px;
 281         border-left-width: 3px;
 282         border-right-width: 3px;
 283         border-bottom-width: 4px;
 284         border-top-color: #eeeecc;
 285         border-left-color: #eeeecc;
 286         border-right-color: #999977;
 287         border-bottom-color: #999977;
 288         background-color: #ddddbb;
 289         /* All these borders may interfere with text on the line bellow.  Make
 290            the text a little smaller to try and 'pull up' the bottom edge, */
 291         font-size: smaller;
 292 }
 293
 294 keycombo>keycap+keycap:before {
 295         /* FIXME: this appears inside the second keycap's 3D boarder, but
 296          * ideally, we'd like it to appear inbetween the two keycaps */
 297         content: "-";
 298 }
 299
 300 menuchoice>guimenu+guimenuitem:before,
 301 menuchoice>guimenuitem+guimenuitem:before,
 302 menuchoice>guimenuitem+guisubmenu:before {
 303         /*content: "->";*/
 304         /* a 'proper' left-arrow character */
 305         content: "\2192";
 306 }
 307
 308 guibutton {
 309         border: 2px outset #dddddd;
 310         background-color: #dddddd;
 311 /*
 312         border: 2px solid;
 313         border-top-color: #eeeeee;
 314         border-left-color: #eeeeee;
 315         border-right-color: #999999;
 316         border-bottom-color: #999999;
 317         background-color: #dddddd;
 318 */}
 319
 320
 321 /* render link-like elements per HTML's normal styling */
 322 link, ulink, email {
 323         /* When ulink contains no body text, the url should be rendered
 324          * at this point in the document.  Can't see how to do this with CSS */
 325         color:#0000ff;
 326         text-decoration:underline;
 327 }
 328
 329 /*ulink:after {
 330         content: " <" attr(url) ">";
 331 }*/
 332
 333 email:before {
 334         content: "<";
 335 }
 336 email:after {
 337         content: ">";
 338 }
 339
 340 citation:before {
 341         content: "[";
 342 }
 343 citation:after {
 344         content: "]";
 345 }
 346
 347 xref:after {
 348         /* simple symbol - content: "#" attr(linkend);*/
 349         /* 'section' symbol */
 350         content: "\00a7" attr(linkend);
 351         color:#0000ff;
 352         text-decoration: underline;
 353 }
 354
 355 blockquote {
 356         padding-left:3em;
 357         padding-bottom: 1em;
 358 }
 359
 360 blockquote>attribution {
 361         text-align:right;
 362         font-style: italic;
 363 }
 364 blockquote>attribution:after {
 365         /* I've tried various things to position the attribution after the
 366          * other blockquote content (e.g. relative/absolute positioning), but
 367          * none of the things I tried produced satisfactory results (e.g. the
 368          * attribution appears at the bottom of the containing block, but it
 369          * overlaps preceeding content). */
 370         content:":"
 371 }
 372 blockquote>para:before {
 373         content: open-quote;
 374 }
 375 blockquote>para:after {
 376         content: no-close-quote;
 377 }
 378 blockquote>para:last-child:after {
 379         content: close-quote;
 380 }
 381
 382 /* lists */
 383
 384 itemizedlist {
 385         padding-left: 1em;
 386         list-style-type: disc;
 387 }
 388
 389 listitem+listitem {
 390         padding-top: .5em;
 391 }
 392
 393 /* 2 deep nested lists */
 394 itemizedlist itemizedlist {
 395         list-style-type: circle;
 396 }
 397
 398 /* 3 or more deep nested lists */
 399 itemizedlist itemizedlist itemizedlist {
 400         list-style-type: square;
 401 }
 402
 403
 404 itemizedlist>listitem {
 405         display:list-item;
 406 }
 407
 408 orderedlist {
 409         padding-left: 1.5em;
 410         list-style-type: decimal;
 411 }
 412
 413 orderedlist>listitem {
 414         display:list-item;
 415 }
 416
 417 /*
 418  * We've got no way of properly implementing call-out lists with CSS, so just
 419  * present as a list of bullet points.
 420  */
 421 calloutlist {
 422         padding-left: 1em;
 423         list-style-type: disc;
 424 }
 425 calloutlist>callout {
 426         display:list-item;
 427 }
 428
 429
 430
 431 /*
 432  * The list of possible mark names is not defined by Docbook, but "opencircle"
 433  * and "bullet" are used in T.D.G. example
 434  */
 435 itemizedlist[mark="opencircle"], listitem[override="opencircle"] {
 436         list-style-type: circle;
 437 }
 438
 439 itemizedlist[mark="bullet"], listitem[override="bullet"] {
 440         list-style-type: disc;
 441 }
 442
 443
 444 varlistentry>listitem {
 445         margin-left: 2em;
 446 }
 447 varlistentry+varlistentry {
 448         margin-top: .5em;
 449 }
 450
 451 simplelist[type=horiz] {
 452         display: block;
 453 }
 454
 455 simplelist[type=inline]>member+member:before {
 456         /* typically, we end up with unwanted whitespace before the comma
 457          * (i.e. whitespace between <member> elements).  I see no way of
 458          * suppressing this with CSS.
 459          * TODO: try a combination of :after and :first-child instead to
 460          * avoid the above issue */
 461         content: ", ";
 462 }
 463
 464 cmdsynopsis, code, command, computeroutput, envar, filename, keycode, keysym,
 465 literal, option, parameter, sgmltag, systemitem {
 466         font-family: monospace;
 467 }
 468
 469 filename[class=directory]:after {
 470         content: "/";
 471 }
 472
 473 /* TODO: Are these specific to 'en' locales or not? */
 474 trademark:after {
 475         content: "\2122"
 476 }
 477 trademark[class="copyright"]:after {
 478         content: "\A9"
 479 }
 480 trademark[class="registered"]:after {
 481         content: "\AE"
 482 }
 483 trademark[class="service"]:after {
 484         content: "\2120"
 485 }
 486
 487 example, informalexample, programlisting  {
 488         background-color:#dddddd;
 489         padding: .5em;
 490         border: 1px dashed black;
 491 }
 492
 493
 494 example programlisting, informalexample programlisting {
 495         background-color: none;
 496         padding: 0;
 497         border: none;
 498 }
 499
 500 /* admonitions */
 501
 502 warning, caution, tip, note, important {
 503         border: 1px dashed gray;
 504         padding: .5em;
 505 }
 506
 507 /* Have admonition titles appear inline with generated content ("Note:" etc.) */
 508 warning>title, caution>title, tip>title, note>title, important>title {
 509         display: inline;
 510
 511 }
 512
 513 warning:before, caution:before, tip:before, note:before, important:before {
 514         /* Match the style of <title> */
 515         font-weight: bolder;
 516         font-family: sans-serif;
 517 }
 518
 519 /* FIXME: background colours are cheezy :S ... */
 520 /* see language specific css for content: */
 521 warning:before {
 522         background-color: red;
 523 }
 524 caution:before {
 525         background-color: yellow;
 526 }
 527 tip:before {
 528         background-color: #aaaddd;
 529 }
 530 note:before {
 531         background-color: #dddddd;
 532 }
 533 important:before {
 534         background-color: plum;
 535 }
 536
 537 /* Tables */
 538
 539 thead > row > entry {
 540         /* FIXME: will under-rule every row in the <thead>, not just the last
 541          * (I tried adding this style to <thead> itself, but this doesn't
 542          * appear to work in combination with display:table-header-group, as
 543          * defined in tables.css) */
 544         border-bottom: 2px solid black;
 545 }
 546
 547 thead {
 548         font-weight: bolder;
 549 }
 550
 551 entry {
 552         padding: .2em;
 553 }
 554
 555
 556 /* Footnotes */
 557
 558
 559 /*
 560  * Attempt to display footnotes on-mouseover.  This may well break if a
 561  * footnote element has multiple children (I think the children will end up
 562  * stacked on top of each other).
 563  */
 564
 565 footnote {
 566         position: relative;
 567         cursor: help;
 568 }
 569 footnote:hover {
 570 }
 571 footnote>* {
 572         display: none;
 573         z-index: 100;
 574 }
 575 footnote:hover>* {
 576         display: block;
 577         position: fixed;
 578         border: 2px dotted black;
 579         background-color: #ffeeaa;
 580         padding: .5em;
 581         left: 0px;
 582         bottom: 0px;
 583 }
 584 footnote:before {
 585         content: "?";
 586         background-color: #ffeeaa;
 587         border: 2px dotted black;
 588         font-size: smaller;
 589 }
 590
 591
 592 /*
 593
 594 Attempting to format <footnote> as a sitebar, floating it to the right.
 595 Sometimes works for footnotes in the 'main body' of some text, but works badly
 596 when the containing block is, for instance, a table cell.
 597
 598 footnote:before {
 599         content: "*";
 600         display: block;
 601         border: 2px dotted black;
 602 }
 603
 604 footnote>* {
 605         display: block;
 606         float: right;
 607         border: 2px dotted black;
 608         padding: .5em;
 609         width: 25%;
 610         top: -1em;
 611 }
 612
 613 footnote>*:before {
 614         content: "*Footnote";
 615         display: block;
 616         font-weight: bold;
 617         font-family: sans-serif;
 618 }
 619 */
 620
 621 glossentry>glossterm {
 622         font-weight: bolder;
 623         font-style: italic;
 624 }
 625
 626
 627 userinput {
 628         font-weight: bolder;
 629 }
 630
 631 figure {
 632         text-align: center;
 633 }
 634
 635 imageobject {
 636         display: block;
 637 }
 638
 639 mediaobject>textobject {
 640         font-size: smaller;
 641 }