7d6915b4d0
DocBookCSS is a mostly-pure-CSS2 implementation of the DocBook standard. Unlike DocBookXSL which relies on transforming the XML, it utilizes the XML-styling features of modern web browsers to display the DocBook. Its appearance still is a long way from the Haiku Book and Userguide, but it looks (mostly) the same as the old DocBookXSL so we can stop using that. Eventually we just need to make DocBookCSS use our styling.
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: ";
|
||
}
|
||
|