681 lines
12 KiB
CSS
681 lines
12 KiB
CSS
/*
|
||
* styles.css
|
||
*
|
||
* Copyright (c) 2004 David Holroyd, and contributors
|
||
* See the file 'COPYING' for terms of use
|
||
*
|
||
* Part of the Docbook-CSS stylesheet
|
||
* http://www.badgers-in-foil.co.uk/projects/docbook-css/
|
||
*/
|
||
|
||
/*
|
||
* CSS2 styling for DocBook XML
|
||
*
|
||
* To be included in the cascade _after_ core.css. Defines styling that can't
|
||
* be generated mechanically from another source.
|
||
*/
|
||
|
||
/*
|
||
* TODO:
|
||
*
|
||
* - do I remember correctly that <abstract> be hidden for screen media?
|
||
*/
|
||
|
||
|
||
article, book {
|
||
margin:.5em;
|
||
}
|
||
title, subtitle {
|
||
font-family:sans-serif;
|
||
}
|
||
title {
|
||
font-weight:bolder;
|
||
margin-bottom:.5em;
|
||
}
|
||
|
||
/*
|
||
* Sectioning elements that may contain paragraph-level elements get left/right
|
||
* margins
|
||
*/
|
||
section>*, chapter>*, bibliography>*, appendix>*, glossary>*, preface>*,
|
||
dedication>*, colophon>*, sect1>*, sect2>*, sect3>*, sect4>*, sect5>*,
|
||
bibliodiv>* {
|
||
margin-left:10%;
|
||
margin-right:10%;
|
||
}
|
||
|
||
/*
|
||
* Give admonitions bigger margins, to set them more apart from the main
|
||
* flow of text.
|
||
*/
|
||
warning, caution, important, tip, note {
|
||
margin-left: 15%;
|
||
margin-right: 15%;
|
||
}
|
||
|
||
/*
|
||
* Remove any margin defined be the previous rule when the child in question
|
||
* is a section or title. Titles should be allowed to take up the maximum
|
||
* available width, as they're usually is larger type. Sections must not
|
||
* be given margins because, the *contents* of the section will alreay have
|
||
* them; we don't want to recursively increase margins with the nesting depth
|
||
* of the document.
|
||
*/
|
||
section, title, sect1, sect2, sect3, sect4, sect5, bibliodiv {
|
||
margin-left:0;
|
||
margin-right:0;
|
||
}
|
||
|
||
book>title, article>title {
|
||
font-size:xx-large;
|
||
text-align:center;
|
||
border-bottom-style:solid;
|
||
}
|
||
|
||
appendix>title, bibliography>title, chapter>title, colophon>title, dedication>title, glossary>title, part>title, preface>title {
|
||
font-size:xx-large;
|
||
text-align:center;
|
||
}
|
||
|
||
section>title, sect1>title, bibliodiv>title {
|
||
font-size:xx-large;
|
||
}
|
||
|
||
section>section>title, sect2>title {
|
||
font-size:x-large;
|
||
margin-left:5%;
|
||
}
|
||
|
||
section>section>section>title, sect3>title {
|
||
font-size:large;
|
||
margin-left:7.5%;
|
||
}
|
||
|
||
section>section>section>section>title, sect4>title {
|
||
font-size:large;
|
||
margin-left:10%;
|
||
}
|
||
|
||
section>section>section>section>section>title, sect5>title {
|
||
font-size:inherit;
|
||
margin-left:10%;
|
||
}
|
||
|
||
biblioentry > title {
|
||
display: inline;
|
||
}
|
||
|
||
/* Give vertical spacing between compoments of the document */
|
||
|
||
*+section, *+chapter, *+bibliography, *+bibliodiv, *+appendix, *+glossary {
|
||
margin-top: 3em;
|
||
}
|
||
section>*+section {
|
||
margin-top: 2em;
|
||
}
|
||
section>section>*+section {
|
||
margin-top: 1em;
|
||
}
|
||
|
||
|
||
/*
|
||
* Give paragraph-level elements some leading space when they aren't the first
|
||
* item in their containing block.
|
||
*/
|
||
*+para, *+formalpara, *+blockquote, *+glossentry, *+table, *+variablelist,
|
||
*+example, *+informalexample, *+programlisting, *+cmdsynopsis,
|
||
*+orderedlist, *+itemizedlist, *+figure,
|
||
*>warning, *>caution, *>important, *>tip, *>note {
|
||
margin-top:.5em;
|
||
}
|
||
|
||
|
||
/*
|
||
* BiblioEntry blocks need a bit more space, since they may contain multiple
|
||
* paragraphs, and so need greater-than-paragraph spacing to make it clear
|
||
* which gap is the end just of a paragraph, and which gap is the end of the
|
||
* entry
|
||
*/
|
||
*+biblioentry {
|
||
margin-top: 1em;
|
||
}
|
||
|
||
/*
|
||
* REVISIT: I think this is the proper way; but deson't work in Firefox 0.8
|
||
|
||
formalpara > title {
|
||
display: run-in;
|
||
}
|
||
|
||
* Make all children of formalpara inline, instead...
|
||
*/
|
||
|
||
formalpara > * {
|
||
display: inline;
|
||
}
|
||
|
||
formalpara > title:after {
|
||
content: ".";
|
||
}
|
||
|
||
para, formalpara {
|
||
text-align: justify;
|
||
}
|
||
|
||
quote:before {
|
||
content: open-quote;
|
||
}
|
||
|
||
quote:after {
|
||
content: close-quote;
|
||
}
|
||
|
||
question, answer {
|
||
margin-top:.5em;
|
||
display:list-item;
|
||
}
|
||
|
||
question>para, answer>para {
|
||
display:inline;
|
||
}
|
||
|
||
/* see language specific files for content */
|
||
question:before {
|
||
display:marker;
|
||
font-weight:bolder;
|
||
}
|
||
answer:before {
|
||
display:marker;
|
||
font-weight: bolder;
|
||
}
|
||
|
||
emphasis {
|
||
font-style:italic;
|
||
}
|
||
emphasis[role="strong"] {
|
||
font-weight:bolder;
|
||
}
|
||
emphasis[role="bold"] {
|
||
font-weight:bolder;
|
||
font-style:inherit;
|
||
}
|
||
emphasis[role="underline"] {
|
||
text-decoration:underline;
|
||
font-style:inherit;
|
||
}
|
||
emphasis[role="strikethrough"] {
|
||
text-decoration:line-through;
|
||
font-style:inherit;
|
||
}
|
||
emphasis>emphasis {
|
||
font-weight:bolder;
|
||
}
|
||
|
||
foreignphrase, wordasword, productname {
|
||
font-style:italic;
|
||
}
|
||
|
||
replaceable {
|
||
font-style:italic;
|
||
}
|
||
|
||
sgmltag[class="starttag"]:before, sgmltag[class="emptytag"]:before {
|
||
content: "<";
|
||
}
|
||
|
||
sgmltag[class="starttag"]:after, sgmltag[class="endtag"]:after {
|
||
content: ">";
|
||
}
|
||
|
||
sgmltag[class="endtag"]:before {
|
||
content: "</";
|
||
}
|
||
|
||
sgmltag[class="emptytag"]:after {
|
||
content: "/>";
|
||
}
|
||
|
||
sgmltag[class="attvalue"]:before, sgmltag[class="attvalue"]:after {
|
||
content: '"';
|
||
}
|
||
|
||
sgmltag[class="genentity"]:before {
|
||
content: "&";
|
||
}
|
||
sgmltag[class="genentity"]:after {
|
||
content: ";";
|
||
}
|
||
|
||
sgmltag[class="sgmlcomment"]:before {
|
||
content: "<!--";
|
||
}
|
||
sgmltag[class="sgmlcomment"]:after {
|
||
content: "-->";
|
||
}
|
||
|
||
sgmltag[class="xmlpi"]:before {
|
||
content: "<?";
|
||
}
|
||
sgmltag[class="xmlpi"]:after {
|
||
content: "?>";
|
||
}
|
||
|
||
|
||
application, keycap, guimenu, guimenuitem, guisubmenu {
|
||
font-family: sans-serif;
|
||
}
|
||
|
||
/*
|
||
* ensure there's some whitespace between elements of an author's name
|
||
*/
|
||
author>* + *:before {
|
||
content: " ";
|
||
}
|
||
|
||
/* give keycaps a '3D' shaded look */
|
||
keycap {
|
||
padding-left: .2em;
|
||
padding-right: .2em;
|
||
border-style: solid;
|
||
border-top-width: 2px;
|
||
border-left-width: 3px;
|
||
border-right-width: 3px;
|
||
border-bottom-width: 4px;
|
||
border-top-color: #eeeecc;
|
||
border-left-color: #eeeecc;
|
||
border-right-color: #999977;
|
||
border-bottom-color: #999977;
|
||
background-color: #ddddbb;
|
||
/* All these borders may interfere with text on the line bellow. Make
|
||
the text a little smaller to try and 'pull up' the bottom edge, */
|
||
font-size: smaller;
|
||
}
|
||
|
||
keycombo>keycap+keycap:before {
|
||
/* FIXME: this appears inside the second keycap's 3D boarder, but
|
||
* ideally, we'd like it to appear inbetween the two keycaps */
|
||
content: "-";
|
||
}
|
||
|
||
menuchoice>guimenu+guimenuitem:before,
|
||
menuchoice>guimenuitem+guimenuitem:before,
|
||
menuchoice>guimenuitem+guisubmenu:before {
|
||
/*content: "->";*/
|
||
/* a 'proper' left-arrow character */
|
||
content: "\2192";
|
||
}
|
||
|
||
guibutton {
|
||
border: 2px outset #dddddd;
|
||
background-color: #dddddd;
|
||
/*
|
||
border: 2px solid;
|
||
border-top-color: #eeeeee;
|
||
border-left-color: #eeeeee;
|
||
border-right-color: #999999;
|
||
border-bottom-color: #999999;
|
||
background-color: #dddddd;
|
||
*/}
|
||
|
||
|
||
/* render link-like elements per HTML's normal styling */
|
||
link, ulink, email {
|
||
/* When ulink contains no body text, the url should be rendered
|
||
* at this point in the document. Can't see how to do this with CSS */
|
||
color:#0000ff;
|
||
text-decoration:underline;
|
||
}
|
||
|
||
/*ulink:after {
|
||
content: " <" attr(url) ">";
|
||
}*/
|
||
|
||
email:before {
|
||
content: "<";
|
||
}
|
||
email:after {
|
||
content: ">";
|
||
}
|
||
|
||
citation:before {
|
||
content: "[";
|
||
}
|
||
citation:after {
|
||
content: "]";
|
||
}
|
||
|
||
xref:after {
|
||
/* simple symbol - content: "#" attr(linkend);*/
|
||
/* 'section' symbol */
|
||
content: "\00a7" attr(linkend);
|
||
color:#0000ff;
|
||
text-decoration: underline;
|
||
}
|
||
|
||
blockquote {
|
||
padding-left:3em;
|
||
padding-bottom: 1em;
|
||
}
|
||
|
||
blockquote>attribution {
|
||
text-align:right;
|
||
font-style: italic;
|
||
}
|
||
blockquote>attribution:after {
|
||
/* I've tried various things to position the attribution after the
|
||
* other blockquote content (e.g. relative/absolute positioning), but
|
||
* none of the things I tried produced satisfactory results (e.g. the
|
||
* attribution appears at the bottom of the containing block, but it
|
||
* overlaps preceeding content). */
|
||
content:":"
|
||
}
|
||
blockquote>para:before {
|
||
content: open-quote;
|
||
}
|
||
blockquote>para:after {
|
||
content: no-close-quote;
|
||
}
|
||
blockquote>para:last-child:after {
|
||
content: close-quote;
|
||
}
|
||
|
||
/* lists */
|
||
|
||
itemizedlist {
|
||
padding-left: 1em;
|
||
list-style-type: disc;
|
||
}
|
||
|
||
listitem+listitem {
|
||
padding-top: .5em;
|
||
}
|
||
|
||
/* 2 deep nested lists */
|
||
itemizedlist itemizedlist {
|
||
list-style-type: circle;
|
||
}
|
||
|
||
/* 3 or more deep nested lists */
|
||
itemizedlist itemizedlist itemizedlist {
|
||
list-style-type: square;
|
||
}
|
||
|
||
|
||
itemizedlist>listitem {
|
||
display:list-item;
|
||
}
|
||
|
||
orderedlist {
|
||
padding-left: 1.5em;
|
||
list-style-type: decimal;
|
||
}
|
||
|
||
orderedlist>listitem {
|
||
display:list-item;
|
||
}
|
||
|
||
/*
|
||
* We've got no way of properly implementing call-out lists with CSS, so just
|
||
* present as a list of bullet points.
|
||
*/
|
||
calloutlist {
|
||
padding-left: 1em;
|
||
list-style-type: disc;
|
||
}
|
||
calloutlist>callout {
|
||
display:list-item;
|
||
}
|
||
|
||
|
||
|
||
/*
|
||
* The list of possible mark names is not defined by Docbook, but "opencircle"
|
||
* and "bullet" are used in T.D.G. example
|
||
*/
|
||
itemizedlist[mark="opencircle"], listitem[override="opencircle"] {
|
||
list-style-type: circle;
|
||
}
|
||
|
||
itemizedlist[mark="bullet"], listitem[override="bullet"] {
|
||
list-style-type: disc;
|
||
}
|
||
|
||
|
||
varlistentry>listitem {
|
||
margin-left: 2em;
|
||
}
|
||
varlistentry+varlistentry {
|
||
margin-top: .5em;
|
||
}
|
||
|
||
simplelist[type=horiz] {
|
||
display: block;
|
||
}
|
||
|
||
simplelist[type=inline]>member+member:before {
|
||
/* typically, we end up with unwanted whitespace before the comma
|
||
* (i.e. whitespace between <member> elements). I see no way of
|
||
* suppressing this with CSS.
|
||
* TODO: try a combination of :after and :first-child instead to
|
||
* avoid the above issue */
|
||
content: ", ";
|
||
}
|
||
|
||
cmdsynopsis, code, command, computeroutput, envar, filename, keycode, keysym,
|
||
literal, option, parameter, sgmltag, systemitem {
|
||
font-family: monospace;
|
||
}
|
||
|
||
filename[class=directory]:after {
|
||
content: "/";
|
||
}
|
||
|
||
/* TODO: Are these specific to 'en' locales or not? */
|
||
trademark:after {
|
||
content: "\2122"
|
||
}
|
||
trademark[class="copyright"]:after {
|
||
content: "\A9"
|
||
}
|
||
trademark[class="registered"]:after {
|
||
content: "\AE"
|
||
}
|
||
trademark[class="service"]:after {
|
||
content: "\2120"
|
||
}
|
||
|
||
example, informalexample, programlisting {
|
||
background-color:#dddddd;
|
||
padding: .5em;
|
||
border: 1px dashed black;
|
||
}
|
||
|
||
|
||
example programlisting, informalexample programlisting {
|
||
background-color: none;
|
||
padding: 0;
|
||
border: none;
|
||
}
|
||
|
||
/* admonitions */
|
||
|
||
warning, caution, tip, note, important {
|
||
border: 1px dashed gray;
|
||
padding: .5em;
|
||
}
|
||
|
||
/* Have admonition titles appear inline with generated content ("Note:" etc.) */
|
||
warning>title, caution>title, tip>title, note>title, important>title {
|
||
display: inline;
|
||
|
||
}
|
||
|
||
warning:before, caution:before, tip:before, note:before, important:before {
|
||
/* Match the style of <title> */
|
||
font-weight: bolder;
|
||
font-family: sans-serif;
|
||
}
|
||
|
||
/* FIXME: background colours are cheezy :S ... */
|
||
/* see language specific css for content: */
|
||
warning:before {
|
||
background-color: red;
|
||
}
|
||
caution:before {
|
||
background-color: yellow;
|
||
}
|
||
tip:before {
|
||
background-color: #aaaddd;
|
||
}
|
||
note:before {
|
||
background-color: #dddddd;
|
||
}
|
||
important:before {
|
||
background-color: plum;
|
||
}
|
||
|
||
/* Tables */
|
||
|
||
thead > row > entry {
|
||
/* FIXME: will under-rule every row in the <thead>, not just the last
|
||
* (I tried adding this style to <thead> itself, but this doesn't
|
||
* appear to work in combination with display:table-header-group, as
|
||
* defined in tables.css) */
|
||
border-bottom: 2px solid black;
|
||
}
|
||
|
||
thead {
|
||
font-weight: bolder;
|
||
}
|
||
|
||
entry {
|
||
padding: .2em;
|
||
}
|
||
|
||
|
||
/* Footnotes */
|
||
|
||
|
||
/*
|
||
* Attempt to display footnotes on-mouseover. This may well break if a
|
||
* footnote element has multiple children (I think the children will end up
|
||
* stacked on top of each other).
|
||
*/
|
||
|
||
footnote {
|
||
position: relative;
|
||
cursor: help;
|
||
}
|
||
footnote:hover {
|
||
}
|
||
footnote>* {
|
||
display: none;
|
||
z-index: 100;
|
||
}
|
||
footnote:hover>* {
|
||
display: block;
|
||
position: fixed;
|
||
border: 2px dotted black;
|
||
background-color: #ffeeaa;
|
||
padding: .5em;
|
||
left: 0px;
|
||
bottom: 0px;
|
||
}
|
||
footnote:before {
|
||
content: "?";
|
||
background-color: #ffeeaa;
|
||
border: 2px dotted black;
|
||
font-size: smaller;
|
||
}
|
||
|
||
|
||
/*
|
||
|
||
Attempting to format <footnote> as a sitebar, floating it to the right.
|
||
Sometimes works for footnotes in the 'main body' of some text, but works badly
|
||
when the containing block is, for instance, a table cell.
|
||
|
||
footnote:before {
|
||
content: "*";
|
||
display: block;
|
||
border: 2px dotted black;
|
||
}
|
||
|
||
footnote>* {
|
||
display: block;
|
||
float: right;
|
||
border: 2px dotted black;
|
||
padding: .5em;
|
||
width: 25%;
|
||
top: -1em;
|
||
}
|
||
|
||
footnote>*:before {
|
||
content: "*Footnote";
|
||
display: block;
|
||
font-weight: bold;
|
||
font-family: sans-serif;
|
||
}
|
||
*/
|
||
|
||
glossentry>glossterm {
|
||
font-weight: bolder;
|
||
font-style: italic;
|
||
}
|
||
|
||
|
||
userinput {
|
||
font-weight: bolder;
|
||
}
|
||
|
||
figure {
|
||
text-align: center;
|
||
}
|
||
|
||
imageobject {
|
||
display: block;
|
||
}
|
||
|
||
mediaobject>textobject {
|
||
font-size: smaller;
|
||
}
|
||
|
||
/* Content */
|
||
|
||
question:before {
|
||
content: "Q: ";
|
||
}
|
||
answer:before {
|
||
content: "A: ";
|
||
}
|
||
|
||
example > title:before {
|
||
content: "Example: ";
|
||
}
|
||
|
||
quote {
|
||
quotes: "“" "”";
|
||
}
|
||
quote quote {
|
||
quotes: "‘" "’";
|
||
}
|
||
|
||
/* Admonitions */
|
||
|
||
warning:before {
|
||
content: "Warning: ";
|
||
}
|
||
caution:before {
|
||
content: "Caution: ";
|
||
}
|
||
important:before {
|
||
content: "Important: ";
|
||
}
|
||
tip:before {
|
||
content: "Tip: ";
|
||
}
|
||
note:before {
|
||
content: "Note: ";
|
||
}
|
||
|