88f7579a9d
If an <emphasis> element is placed inside a <programlisting> in a cookbook recipe, the result is bold italic text in the HTML output. This isn't particularly readable. Fix is to style emphasis elements inside programlistings so the font weight is not bold but is still italicised. http://bugzilla.clutter-project.org/show_bug.cgi?id=2475
967 lines
13 KiB
CSS
967 lines
13 KiB
CSS
/*
|
|
Generic XHTML / DocBook XHTML CSS Stylesheet.
|
|
|
|
Browser wrangling and typographic design by
|
|
Oyvind Kolas / pippin@gimp.org
|
|
|
|
Customised for Poky by
|
|
Matthew Allum / mallum@o-hand.com
|
|
|
|
Thanks to:
|
|
Liam R. E. Quin
|
|
William Skaggs
|
|
Jakub Steiner
|
|
|
|
Structure
|
|
---------
|
|
|
|
The stylesheet is divided into the following sections:
|
|
|
|
Positioning
|
|
Margins, paddings, width, font-size, clearing.
|
|
Decorations
|
|
Borders, style
|
|
Colors
|
|
Colors
|
|
Graphics
|
|
Graphical backgrounds
|
|
Nasty IE tweaks
|
|
Workarounds needed to make it work in internet explorer,
|
|
currently makes the stylesheet non validating, but up until
|
|
this point it is validating.
|
|
Mozilla extensions
|
|
Transparency for footer
|
|
Rounded corners on boxes
|
|
|
|
*/
|
|
|
|
|
|
/*************** /
|
|
/ Positioning /
|
|
/ ***************/
|
|
|
|
body {
|
|
font-family: Verdana, Sans, sans-serif;
|
|
|
|
min-width: 640px;
|
|
width: 80%;
|
|
margin: 0em auto;
|
|
padding: 2em 5em 5em 5em;
|
|
color: #333;
|
|
}
|
|
|
|
h1,h2,h3,h4,h5,h6,h7 {
|
|
font-family: Arial, Sans;
|
|
color:#999999;
|
|
clear: both;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 2em;
|
|
text-align: left;
|
|
padding: 0em 0em 0em 0em;
|
|
margin: 2em 0em 0em 0em;
|
|
}
|
|
|
|
h2.subtitle {
|
|
margin: 0.10em 0em 3.0em 0em;
|
|
padding: 0em 0em 0em 0em;
|
|
font-size: 1.8em;
|
|
padding-left: 20%;
|
|
font-weight: normal;
|
|
font-style: italic;
|
|
}
|
|
|
|
h2 {
|
|
margin: 2em 0em 0.66em 0em;
|
|
padding: 0.5em 0em 0em 0em;
|
|
font-size: 1.5em;
|
|
font-weight: normal;
|
|
}
|
|
|
|
h3.subtitle {
|
|
margin: 0em 0em 1em 0em;
|
|
padding: 0em 0em 0em 0em;
|
|
font-size: 142.14%;
|
|
text-align: right;
|
|
}
|
|
|
|
h3 {
|
|
margin: 1em 0em 0.5em 0em;
|
|
padding: 1em 0em 0em 0em;
|
|
font-size: 140%;
|
|
font-weight: normal;
|
|
}
|
|
|
|
h4 {
|
|
margin: 1em 0em 0.5em 0em;
|
|
padding: 1em 0em 0em 0em;
|
|
font-size: 120%;
|
|
font-weight: normal;
|
|
}
|
|
|
|
h5 {
|
|
margin: 1em 0em 0.5em 0em;
|
|
padding: 1em 0em 0em 0em;
|
|
font-size: 110.000%;
|
|
border-bottom: 1px solid black;
|
|
}
|
|
|
|
h6 {
|
|
margin: 1em 0em 0em 0em;
|
|
padding: 1em 0em 0em 0em;
|
|
font-size: 80%;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.authorgroup {
|
|
background-color: transparent;
|
|
background-repeat: no-repeat;
|
|
padding-top: 256px;
|
|
/* background-image: url("images/clutter-logo.png"); */
|
|
background-position: right top;
|
|
float: right;
|
|
margin-top: -256px;
|
|
padding-right: 50px;
|
|
margin-left: 50px;
|
|
text-align: right;
|
|
width: 200px;
|
|
}
|
|
|
|
h3.author {
|
|
margin: 0em 0me 0em 0em;
|
|
padding: 0em 0em 0em 0em;
|
|
font-weight: normal;
|
|
font-size: 100%;
|
|
clear: both;
|
|
}
|
|
|
|
.author tt.email {
|
|
font-size: 66%;
|
|
}
|
|
|
|
.titlepage hr {
|
|
width: 0em;
|
|
clear: both;
|
|
}
|
|
|
|
.revhistory {
|
|
padding-top: 2em;
|
|
clear: both;
|
|
}
|
|
|
|
.toc,
|
|
.list-of-tables,
|
|
.list-of-examples,
|
|
.list-of-figures {
|
|
padding: 1.33em 0em 2.5em 0em;
|
|
}
|
|
|
|
.toc p,
|
|
.list-of-tables p,
|
|
.list-of-figures p,
|
|
.list-of-examples p {
|
|
padding: 0em 0em 0em 0em;
|
|
padding: 0em 0em 0.3em;
|
|
margin: 1.5em 0em 0em 0em;
|
|
}
|
|
|
|
.toc p b,
|
|
.list-of-tables p b,
|
|
.list-of-figures p b,
|
|
.list-of-examples p b{
|
|
font-size: 100.0%;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.toc dl,
|
|
.list-of-tables dl,
|
|
.list-of-figures dl,
|
|
.list-of-examples dl {
|
|
margin: 0em 0em 0.5em 0em;
|
|
padding: 0em 0em 0em 0em;
|
|
}
|
|
|
|
.toc dt {
|
|
margin: 0em 0em 0em 0em;
|
|
padding: 0em 0em 0em 0em;
|
|
}
|
|
|
|
.toc dd {
|
|
margin: 0em 0em 0em 2.6em;
|
|
padding: 0em 0em 0em 0em;
|
|
}
|
|
|
|
div.glossary dl,
|
|
div.variablelist dl {
|
|
}
|
|
|
|
.glossary dl dt,
|
|
.variablelist dl dt,
|
|
.variablelist dl dt span.term {
|
|
font-weight: normal;
|
|
width: 20em;
|
|
text-align: right;
|
|
}
|
|
|
|
.variablelist dl dt {
|
|
margin-top: 0.5em;
|
|
}
|
|
|
|
.glossary dl dd,
|
|
.variablelist dl dd {
|
|
margin-top: -1em;
|
|
margin-left: 25.5em;
|
|
}
|
|
|
|
.glossary dd p,
|
|
.variablelist dd p {
|
|
margin-top: 0em;
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
|
|
div.calloutlist table td {
|
|
padding: 0em 0em 0em 0em;
|
|
margin: 0em 0em 0em 0em;
|
|
}
|
|
|
|
div.calloutlist table td p {
|
|
margin-top: 0em;
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
div p.copyright {
|
|
text-align: left;
|
|
}
|
|
|
|
div.legalnotice p.legalnotice-title {
|
|
margin-bottom: 0em;
|
|
font-size: 80%;
|
|
}
|
|
|
|
p {
|
|
line-height: 1.5em;
|
|
margin-top: 0em;
|
|
|
|
}
|
|
|
|
dl {
|
|
padding-top: 0em;
|
|
}
|
|
|
|
hr {
|
|
border: solid 1px;
|
|
}
|
|
|
|
|
|
.mediaobject,
|
|
.mediaobjectco {
|
|
text-align: center;
|
|
}
|
|
|
|
img {
|
|
border: none;
|
|
}
|
|
|
|
ul {
|
|
padding: 0em 0em 0em 1.5em;
|
|
}
|
|
|
|
ul li {
|
|
padding: 0em 0em 0em 0em;
|
|
}
|
|
|
|
ul li p {
|
|
text-align: left;
|
|
}
|
|
|
|
table {
|
|
width :100%;
|
|
}
|
|
|
|
th {
|
|
padding: 0.25em;
|
|
text-align: left;
|
|
font-weight: normal;
|
|
vertical-align: top;
|
|
}
|
|
|
|
td {
|
|
padding: 0.25em;
|
|
vertical-align: top;
|
|
}
|
|
|
|
p a[id] {
|
|
margin: 0px;
|
|
padding: 0px;
|
|
display: inline;
|
|
background-image: none;
|
|
}
|
|
|
|
a {
|
|
text-decoration: underline;
|
|
color: #444;
|
|
}
|
|
|
|
pre {
|
|
overflow: auto;
|
|
}
|
|
|
|
a:hover {
|
|
text-decoration: underline;
|
|
/*font-weight: bold;*/
|
|
}
|
|
|
|
|
|
div.informalfigure,
|
|
div.informalexample,
|
|
div.informaltable,
|
|
div.figure,
|
|
div.table,
|
|
div.example {
|
|
margin: 1em 0em;
|
|
padding: 1em;
|
|
page-break-inside: avoid;
|
|
background-color: #3ab1cc;
|
|
}
|
|
|
|
|
|
div.informalfigure p.title b,
|
|
div.informalexample p.title b,
|
|
div.informaltable p.title b,
|
|
div.figure p.title b,
|
|
div.example p.title b,
|
|
div.table p.title b{
|
|
padding-top: 0em;
|
|
margin-top: 0em;
|
|
font-size: 100%;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.mediaobject .caption,
|
|
.mediaobject .caption p {
|
|
text-align: center;
|
|
font-size: 80%;
|
|
padding-top: 0.5em;
|
|
padding-bottom: 0.5em;
|
|
}
|
|
|
|
.epigraph {
|
|
padding-left: 55%;
|
|
margin-bottom: 1em;
|
|
color: #666;
|
|
font-size: 80%;
|
|
}
|
|
|
|
.epigraph p {
|
|
text-align: left;
|
|
}
|
|
|
|
.epigraph .quote {
|
|
font-style: italic;
|
|
}
|
|
.epigraph .attribution {
|
|
font-style: normal;
|
|
text-align: right;
|
|
}
|
|
|
|
span.application {
|
|
font-style: italic;
|
|
}
|
|
|
|
span.property, span.type {
|
|
font-family: monospace;
|
|
}
|
|
|
|
.programlisting {
|
|
font-family: monospace;
|
|
font-size: 80%;
|
|
white-space: pre;
|
|
margin: 1.33em 0em;
|
|
padding: 1.33em;
|
|
}
|
|
|
|
.tip,
|
|
.warning,
|
|
.caution,
|
|
.note {
|
|
margin-top: 1em;
|
|
margin-bottom: 1em;
|
|
|
|
}
|
|
|
|
/* force full width of table within div */
|
|
.tip table,
|
|
.warning table,
|
|
.caution table,
|
|
.note table {
|
|
border: none;
|
|
width: 100%;
|
|
}
|
|
|
|
|
|
.tip table th,
|
|
.warning table th,
|
|
.caution table th,
|
|
.note table th {
|
|
padding: 0.8em 0.0em 0.0em 0.0em;
|
|
margin : 0em 0em 0em 0em;
|
|
}
|
|
|
|
.tip p,
|
|
.warning p,
|
|
.caution p,
|
|
.note p {
|
|
margin-top: 0.5em;
|
|
margin-bottom: 0.5em;
|
|
padding-right: 1em;
|
|
text-align: left;
|
|
}
|
|
|
|
.acronym {
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
b.keycap,
|
|
.keycap {
|
|
padding: 0.09em 0.3em;
|
|
margin: 0em;
|
|
}
|
|
|
|
.itemizedlist li {
|
|
clear: none;
|
|
}
|
|
|
|
.filename {
|
|
font-size: medium;
|
|
font-family: Courier, monospace;
|
|
}
|
|
|
|
|
|
div.navheader, div.heading{
|
|
position: absolute;
|
|
left: 0em;
|
|
top: 0em;
|
|
width: 100%;
|
|
background-color: #cdf;
|
|
width: 100%;
|
|
}
|
|
|
|
div.navfooter, div.footing{
|
|
position: fixed;
|
|
left: 0em;
|
|
bottom: 0em;
|
|
background-color: #eee;
|
|
width: 100%;
|
|
}
|
|
|
|
|
|
div.navheader td,
|
|
div.navfooter td {
|
|
font-size: 66%;
|
|
}
|
|
|
|
div.navheader table th {
|
|
/*font-family: Georgia, Times, serif;*/
|
|
/*font-size: x-large;*/
|
|
font-size: 80%;
|
|
}
|
|
|
|
div.navheader table {
|
|
border-left: 0em;
|
|
border-right: 0em;
|
|
border-top: 0em;
|
|
width: 100%;
|
|
}
|
|
|
|
div.navfooter table {
|
|
border-left: 0em;
|
|
border-right: 0em;
|
|
border-bottom: 0em;
|
|
width: 100%;
|
|
}
|
|
|
|
div.navheader table td a,
|
|
div.navfooter table td a {
|
|
color: #777;
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* normal text in the footer */
|
|
div.navfooter table td {
|
|
color: black;
|
|
}
|
|
|
|
div.navheader table td a:visited,
|
|
div.navfooter table td a:visited {
|
|
color: #444;
|
|
}
|
|
|
|
|
|
/* links in header and footer */
|
|
div.navheader table td a:hover,
|
|
div.navfooter table td a:hover {
|
|
text-decoration: underline;
|
|
background-color: transparent;
|
|
color: #33a;
|
|
}
|
|
|
|
div.navheader hr,
|
|
div.navfooter hr {
|
|
display: none;
|
|
}
|
|
|
|
|
|
.qandaset tr.question td p {
|
|
margin: 0em 0em 1em 0em;
|
|
padding: 0em 0em 0em 0em;
|
|
}
|
|
|
|
.qandaset tr.answer td p {
|
|
margin: 0em 0em 1em 0em;
|
|
padding: 0em 0em 0em 0em;
|
|
}
|
|
.answer td {
|
|
padding-bottom: 1.5em;
|
|
}
|
|
|
|
.emphasis {
|
|
font-weight: bold;
|
|
}
|
|
|
|
pre.programlisting .emphasis {
|
|
font-weight: normal !important;
|
|
}
|
|
|
|
/************* /
|
|
/ decorations /
|
|
/ *************/
|
|
|
|
.titlepage {
|
|
}
|
|
|
|
.part .title {
|
|
}
|
|
|
|
.subtitle {
|
|
border: none;
|
|
}
|
|
|
|
/*
|
|
h1 {
|
|
border: none;
|
|
}
|
|
|
|
h2 {
|
|
border-top: solid 0.2em;
|
|
border-bottom: solid 0.06em;
|
|
}
|
|
|
|
h3 {
|
|
border-top: 0em;
|
|
border-bottom: solid 0.06em;
|
|
}
|
|
|
|
h4 {
|
|
border: 0em;
|
|
border-bottom: solid 0.06em;
|
|
}
|
|
|
|
h5 {
|
|
border: 0em;
|
|
}
|
|
*/
|
|
|
|
.programlisting {
|
|
border: solid 1px;
|
|
}
|
|
|
|
div.figure,
|
|
div.table,
|
|
div.informalfigure,
|
|
div.informaltable,
|
|
div.informalexample,
|
|
div.example {
|
|
border: 1px solid;
|
|
}
|
|
|
|
|
|
|
|
.tip,
|
|
.warning,
|
|
.caution,
|
|
.note {
|
|
border: 1px solid;
|
|
}
|
|
|
|
.tip table th,
|
|
.warning table th,
|
|
.caution table th,
|
|
.note table th {
|
|
border-bottom: 1px solid;
|
|
}
|
|
|
|
.question td {
|
|
border-top: 1px solid black;
|
|
}
|
|
|
|
.answer {
|
|
}
|
|
|
|
|
|
b.keycap,
|
|
.keycap {
|
|
border: 1px solid;
|
|
}
|
|
|
|
|
|
div.navheader, div.heading{
|
|
border-bottom: 1px solid;
|
|
}
|
|
|
|
|
|
div.navfooter, div.footing{
|
|
border-top: 1px solid;
|
|
}
|
|
|
|
/********* /
|
|
/ colors /
|
|
/ *********/
|
|
|
|
body {
|
|
color: #333;
|
|
background: white;
|
|
}
|
|
|
|
a {
|
|
background: transparent;
|
|
}
|
|
|
|
a:hover {
|
|
background-color: #dedede;
|
|
}
|
|
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6,
|
|
h7,
|
|
h8 {
|
|
background-color: transparent;
|
|
}
|
|
|
|
hr {
|
|
border-color: #aaa;
|
|
}
|
|
|
|
|
|
.tip, .warning, .caution, .note {
|
|
border-color: #aaa;
|
|
}
|
|
|
|
|
|
.tip table th,
|
|
.warning table th,
|
|
.caution table th,
|
|
.note table th {
|
|
border-bottom-color: #aaa;
|
|
}
|
|
|
|
|
|
.warning {
|
|
background-color: #fea;
|
|
}
|
|
|
|
.caution {
|
|
background-color: #fea;
|
|
}
|
|
|
|
.tip {
|
|
background-color: #eff;
|
|
}
|
|
|
|
.note {
|
|
background-color: #8bd12e;
|
|
}
|
|
|
|
.glossary dl dt,
|
|
.variablelist dl dt,
|
|
.variablelist dl dt span.term {
|
|
color: #044;
|
|
}
|
|
|
|
div.figure,
|
|
div.table,
|
|
div.example,
|
|
div.informalfigure,
|
|
div.informaltable,
|
|
div.informalexample {
|
|
border-color: #aaa;
|
|
}
|
|
|
|
pre.programlisting {
|
|
color: black;
|
|
background-color: #fff;
|
|
border-color: #aaa;
|
|
border-width: 2px;
|
|
}
|
|
|
|
.guimenu,
|
|
.guilabel,
|
|
.guimenuitem {
|
|
background-color: #eee;
|
|
}
|
|
|
|
|
|
b.keycap,
|
|
.keycap {
|
|
background-color: #eee;
|
|
border-color: #999;
|
|
}
|
|
|
|
|
|
div.navheader {
|
|
border-color: black;
|
|
}
|
|
|
|
|
|
div.navfooter {
|
|
border-color: black;
|
|
}
|
|
|
|
|
|
/*********** /
|
|
/ graphics /
|
|
/ ***********/
|
|
|
|
/*
|
|
body {
|
|
background-image: url("images/body_bg.jpg");
|
|
background-attachment: fixed;
|
|
}
|
|
|
|
.navheader,
|
|
.note,
|
|
.tip {
|
|
background-image: url("images/note_bg.jpg");
|
|
background-attachment: fixed;
|
|
}
|
|
|
|
.warning,
|
|
.caution {
|
|
background-image: url("images/warning_bg.jpg");
|
|
background-attachment: fixed;
|
|
}
|
|
|
|
.figure,
|
|
.informalfigure,
|
|
.example,
|
|
.informalexample,
|
|
.table,
|
|
.informaltable {
|
|
background-image: url("images/figure_bg.jpg");
|
|
background-attachment: fixed;
|
|
}
|
|
|
|
*/
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6,
|
|
h7{
|
|
}
|
|
|
|
div.preface .titlepage .title,
|
|
div.colophon .title,
|
|
div.chapter .titlepage .title {
|
|
background-image: url("images/title-bg.png");
|
|
background-position: bottom;
|
|
background-repeat: repeat-x;
|
|
}
|
|
|
|
div.section div.section .titlepage .title,
|
|
div.sect2 .titlepage .title {
|
|
background: none;
|
|
}
|
|
|
|
|
|
h1.title {
|
|
background-color: transparent;
|
|
background-image: url("images/clutter-logo.png");
|
|
background-repeat: no-repeat;
|
|
height: 128px;
|
|
text-indent: 400px;
|
|
overflow:hidden;
|
|
margin: 2em 1em 2em 0em;
|
|
text-align: right;
|
|
}
|
|
|
|
h2.subtitle {
|
|
background-color: transparent;
|
|
text-indent: -9000px;
|
|
overflow:hidden;
|
|
width: 0px;
|
|
display: none;
|
|
}
|
|
|
|
/*************************************** /
|
|
/ pippin.gimp.org specific alterations /
|
|
/ ***************************************/
|
|
|
|
/*
|
|
div.heading, div.navheader {
|
|
color: #777;
|
|
font-size: 80%;
|
|
padding: 0;
|
|
margin: 0;
|
|
text-align: left;
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
width: 100%;
|
|
height: 50px;
|
|
background: url('/gfx/heading_bg.png') transparent;
|
|
background-repeat: repeat-x;
|
|
background-attachment: fixed;
|
|
border: none;
|
|
}
|
|
|
|
div.heading a {
|
|
color: #444;
|
|
}
|
|
|
|
div.footing, div.navfooter {
|
|
border: none;
|
|
color: #ddd;
|
|
font-size: 80%;
|
|
text-align:right;
|
|
|
|
width: 100%;
|
|
padding-top: 10px;
|
|
position: absolute;
|
|
bottom: 0px;
|
|
left: 0px;
|
|
|
|
background: url('/gfx/footing_bg.png') transparent;
|
|
}
|
|
*/
|
|
|
|
|
|
|
|
/****************** /
|
|
/ nasty ie tweaks /
|
|
/ ******************/
|
|
|
|
/*
|
|
div.heading, div.navheader {
|
|
width:expression(document.body.clientWidth + "px");
|
|
}
|
|
|
|
div.footing, div.navfooter {
|
|
width:expression(document.body.clientWidth + "px");
|
|
margin-left:expression("-5em");
|
|
}
|
|
body {
|
|
padding:expression("4em 5em 0em 5em");
|
|
}
|
|
*/
|
|
|
|
/**************************************** /
|
|
/ mozilla vendor specific css extensions /
|
|
/ ****************************************/
|
|
/*
|
|
div.navfooter, div.footing{
|
|
-moz-opacity: 0.8em;
|
|
}
|
|
|
|
div.figure,
|
|
div.table,
|
|
div.informalfigure,
|
|
div.informaltable,
|
|
div.informalexample,
|
|
div.example,
|
|
.tip,
|
|
.warning,
|
|
.caution,
|
|
.note {
|
|
-moz-border-radius: 0.5em;
|
|
}
|
|
|
|
b.keycap,
|
|
.keycap {
|
|
-moz-border-radius: 0.3em;
|
|
}
|
|
*/
|
|
|
|
table tr td table tr td {
|
|
display: none;
|
|
}
|
|
|
|
|
|
hr {
|
|
display: none;
|
|
}
|
|
|
|
table {
|
|
border: 0em;
|
|
}
|
|
|
|
.photo {
|
|
float: right;
|
|
margin-left: 1.5em;
|
|
margin-bottom: 1.5em;
|
|
margin-top: 0em;
|
|
max-width: 17em;
|
|
border: 1px solid gray;
|
|
padding: 3px;
|
|
background: white;
|
|
}
|
|
.seperator {
|
|
padding-top: 2em;
|
|
clear: both;
|
|
}
|
|
|
|
#validators {
|
|
margin-top: 5em;
|
|
text-align: right;
|
|
color: #777;
|
|
}
|
|
@media print {
|
|
body {
|
|
font-size: 8pt;
|
|
}
|
|
.noprint {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
|
|
.tip,
|
|
.note {
|
|
background: #91ae35;
|
|
color: #fff;
|
|
padding: 20px;
|
|
margin: 20px;
|
|
}
|
|
|
|
.tip h3,
|
|
.note h3 {
|
|
padding: 0em;
|
|
margin: 0em;
|
|
font-size: 2em;
|
|
font-weight: bold;
|
|
color: #fff;
|
|
}
|
|
|
|
.tip a,
|
|
.note a {
|
|
color: #fff;
|
|
text-decoration: underline;
|
|
}
|