Add new style sheets based on current CSS3 Values style sheet.
authortbah <tavmjong@free.fr>
Sat, 12 Nov 2011 17:12:59 +0100
changeset 6 718aceb6f004
parent 5 9205059d6889
child 7 e68290223fbb
Add new style sheets based on current CSS3 Values style sheet.
master/style/default.css
master/style/default_no_issues.css
master/style/default_svg.css
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/master/style/default.css	Sat Nov 12 17:12:59 2011 +0100
@@ -0,0 +1,550 @@
+/*
+ * Style sheet for the CSS3 specification,
+ * to be used in addition to http://www.w3.org/StyleSheets/TR/W3C-{WD,PR,REC}
+ * $Id: default.css,v 1.8 2011-08-18 02:18:14 tatkinsj Exp $
+ */
+
[email protected] print {
+
+	/* the following doesn't work for now,
+		 instead we rely on a patched version of html2ps which has this built-in */
+	.dlink { display: none }
+
+	/* the following doesn't work for now,
+		 instead we rely on a patched version of html2ps which has this built-in */
+	div.navbar {
+		 display: none;
+	}
+
+	html { margin: 0 !important }
+	body { font-family: serif }
+	th, td { font-family: inherit }
+	a { color: inherit !important }
+	div.example:before { font-family: serif !important }
+	pre.example:before { font-family: serif !important }
+	a:link, a:visited { text-decoration: none !important }
+	a:link:after, a:visited:after { /* create a cross-ref "see..." */ }
+}
[email protected] {
+	margin: 1.5cm 1.1cm;
+}
+
+/* html body { margin-left: 8.5em } /* Overrides 70px in base.css */
+
+body {counter-reset: exampleno figure; max-width: 50em; margin: 0 auto !important; color: #444; }
+
+/* Pagination */
+h1, h2, h3, h4, h5, h6 { page-break-after: avoid; font-family: inherit }
+div.figure, div.sidefigure, pre, table.propdef, table.propdef-extra,
+div.example { page-break-inside: avoid }
+dt { page-break-after: avoid }
+
+span.id {float: right; font-weight: bold}
+
+/* General Structural Markup */
+h2, h3, h5, h6 { margin-top: 3em; }
+
+h1 + h2 { margin-top: 0; }
+
+h4 { margin-top: 4em; }
+
+p, div.note {
+	text-indent: 0;
+	margin-bottom: 0;
+	margin-top: 1em
+}
+
+dd > p:first-child, li > p:first-child, .note > p:first-child {
+	margin-top: 0
+}
+
+pre {
+	text-align: left; /* fixes justification in Mac IE 5 */
+	text-indent: 0;   /* fixes indent in Mac Netscape 6 */
+	margin-top: 1em;
+	margin-bottom: 1em;
+	font-size: 90% /*smaller*/;
+}
+
+img {
+	border-style: none;
+	color: white;
+}
+.toc {
+	text-indent: 0;
+}
+
+
[email protected] all { /* NS < 6 doesn't like borders around inline elements... */
+
+	body {
+		line-height: 1.5;
+	}
+
+	a:link, a:visited {
+		color: inherit;
+		text-decoration: underline;
+	}
+
+	a.logo:link, a.logo:visited {
+		padding: 0;
+		border-style: none;
+	}
+
+	/* Hmm, this seems to confuse many browsers... */
+	dl dd { margin: 0 0 1em 2em }
+	.head dd { margin-bottom: 0; }
+	ul, ol { margin-left: 0; padding-left: 2em; }
+	li { margin: 0.25em 2em 0.5em 0; padding-left: 0 }
+
+}
+ul.indexlist { margin-left: 0; /*column-width: 13em; columns: 13em*/ }
+ul.indexlist li { margin-left: 0; list-style: none }
+ul.indexlist li li { margin-left: 1em }
+
+/* Examples */
+
+.example {
+	counter-increment: exampleno;
+}
+div.example:before {
+	content: "Example";
+	content: "Example " counter(exampleno);
+	min-width: 7.5em;
+	text-transform: uppercase;      
+}
+pre.example:before {
+	content: "Example";
+	content: "Example " counter(exampleno);
+	min-width: 7.5em;
+	text-transform: uppercase;
+}
+div.example, div.illegal-example, div.html, div.illegal-html, div.xml,
+div.illegal-xml, pre.example, pre.illegal-example, pre.html,
+pre.illegal-html, pre.xml, pre.illegal-xml {
+	padding: 0.5em;
+	margin: 1em 0;
+	position: relative;
+	clear: both;
+}
+pre.example, pre.illegal-example, pre.html,
+pre.illegal-html, pre.xml, pre.illegal-xml {
+	padding-top: 1.5em;
+}
+pre.illegal-example { color: red }
+div.illegal-example { color: red }
+div.illegal-example p { color: black }
+
+div.html { color: #600 }
+pre.html { color: #600 }
+pre.illegal-html { color: red }
+div.illegal-html { color: red }
+div.illegal-html p { color: black }
+pre.deprecated-html { color: red }
+div.deprecated-html { color: red }
+div.deprecated-html p { color: black }
+
+div.xml { color: #600 }
+pre.xml { color: #600 }
+pre.illegal-xml { color: red }
+div.illegal-xml { color: red }
+div.illegal-xml p { color: black }
+
+/* code { font-size: 90% } */
+.css, .property { color: #005a9c }		/* inline CSS code (SPAN/CODE) */
+code.css { font-family: inherit; font-size: 100% }
+code.html { color: #600 }	/* inline HTML */
+code.xml { color: #600 }	/* inline XML */
+.property { font: inherit; white-space: nowrap; }	/* name of a CSS property (SPAN) */  
+.descriptor { }			/* name of a CSS descriptor (SPAN) */
+.type { font-style: italic }	/* A <type> value for a property */
+
+dfn { font-weight: bolder; /*font-size: 1em*/ }
+
+p.issue, div.issue, p.note, div.note, div.example {
+	padding: .5em;
+	border-left-width: .5em;
+	border-left-style: solid;
+}
+
+/* Open issue / editorial remark; not intended for a final publication */
+p.issue, div.issue {
+	border-color: #E05252;
+	background: #FBE9E9;
+	counter-increment: issue;
+}
+
+p.issue:before, div.issue:before {
+	content: "Issue " counter(issue);
+	padding-right: 1em;
+	text-transform: uppercase;
+	color: #E05252;    
+}
+
+span.issue { color: red; }
+
+/* Class note is a non-normative note. May be inline or a P or DIV */
+p.note, div.note {
+	border-color: #52E052;
+	background: #E9FBE9;
+}
+
+span.note { color: green; }
+
+
+.normref { color: red }	
+.informref { color: green }	
+
+/* Example box */
+div.example {
+	border-color: #E0CB52;
+	background: #FCFAEE;    
+}
+
+div.example:before { color: #B9AB2D; }
+
+/* ToC not indented, but font style shows hierarchy */
+ul.toc {margin: 1em 0; padding: 0; line-height: 1.3; font-weight: bold; text-transform: uppercase; }
+ul.toc ul {margin: 0; padding: 0; font-weight: normal; text-transform: none; }
+ul.toc ul ul {margin: 0 0 0 2em; font-style: italic; }
+ul.toc ul ul ul {margin: 0}
+ul.toc > li {margin: 1.5em 0; padding: 0; }
+ul.toc ul.toc li { margin: 0.3em 0 0 0; }
+ul.toc a { text-decoration: none; }
+ul.toc a:hover, ul.toc a:focus { text-decoration: underline; }
+/*
+ul.toc li li li, ul.toc li li li ul {margin-left: 0; display: inline}
+ul.toc li li li ul, ul.toc li li li ul li {margin-left: 0; display: inline}
+*/
+
[email protected] all { /* NS4 doesn't align the floats properly :-( */
+
+	/* Section numbers in a column of their own */
+	ul.toc span.secno {margin-right: 1em} /* workaround for Opera6 */
+	ul.toc span.secno {float: left; width: 4em; margin-left: -5em}
+	ul.toc ul ul span.secno { margin-left: -7em; }
+	/*ul.toc span.secno {text-align: right}*/
+	ul.toc li {clear: both}
+	ul.toc {margin-left: 5em}
+	/* If we had 'tab', floats would not be needed here:
+		 ul.toc span.secno {tab: 5em right; margin-right: 1em}
+		 ul.toc li {text-indent: 5em hanging}
+	 The second line in case items wrap
+	*/
+}
+
+ul.index {
+	list-style: disc;		/* Mac NS has problem with 'none' */
+	list-style: none;
+}
+
+s, del {text-decoration: line-through; color: red}
+u, ins {text-decoration: underline; background: #bfa}
+
+div.figure, div.sidefigure {
+	text-align: center;
+	margin: 2.5em 0;
+}
+div.sidefigure {
+	float: right;
+	width: 50%;
+	margin: 0 0 0.5em 0.5em
+}
+div.figure img, div.sidefigure img {
+	display: block;
+	margin: auto;
+	max-width: 100%
+}
+p.caption, caption {
+	text-align: center;
+	font-style: italic;
+	font-size: 90%;
+}
+p.caption:before {
+	content: "Figure " counter(figure) ". ";
+	font-weight: bold;
+}
+p.caption {
+	counter-increment: figure;
+}
+
+/* DL list is indented, but figure inside it is not */
+dd { margin-left: 2em }
+dd div.figure { margin-left: -2em }
+
+sup {
+	vertical-align: super;
+	font-size: 80%
+}
+
+/* "Equations" (not real MathML, but simple HTML) are put in a
+blockquote and may have an equation number. We make sure the
+blockquote has enough margin on the right and then put the equation
+number there. */
+
+blockquote {
+	margin: 0.5em 4em 0.5em 2em;
+	text-indent: 0;
+}
+.eqno {
+	text-align: right;
+	float: right;
+	width: 3em;
+	margin: 0 -4em 0 0;
+	font-weight: bold;
+	/* background: silver; color: black; padding: 0.1em */
+}
+
+table.equiv-table { border-spacing: 0; margin: 0.5em 0 }
+table.equiv-table th, table.equiv-table td { padding: 0.3em }
+table.equiv-table th { text-align: left }
+/* table.equiv-table th:first-child { text-align: right } */
+table.equiv-table td, table.equiv-table th { border-bottom: thin solid #666 }
+table.equiv-table { border-bottom: hidden }
+table.equiv-table { empty-cells: show }
+table.equiv-table caption { margin: 0.5em 0 0 0 }
+
+/* Style for table of properties */
+table.proptable {
+	font-size: small;
+	border-collapse: collapse;
+	border-spacing: 0;
+	text-align: left;
+	margin: 1em 0;
+}
+
+table.proptable td, table.proptable th {
+	padding: 0.4em;
+	text-align: center;
+}
+
+table.proptable tr:hover td {
+	background: #DEF;
+}
+
+
+/* Style for table that defines a property or a descriptor */
+table.propdef, table.propdef-extra, table.descdef {
+	border-spacing: 0;
+	padding: 0 1em 0.5em;
+	width: 100%;
+	table-layout: fixed;
+	background: #DEF;
+	margin: 1.2em 0;
+	border-left: 0.5em solid #8CCBF2;
+}
+
+/* Since Jan 2008, some CSS modules use <th> instead of <td> in the
+first column of a table.propdef. These rules handle both. As of Jan
+2008, http://www.w3.org/Style/spec-mark-up still only documents <td>
+*/
+
+table.propdef td, table.propdef-extra td, table.descdef td,
+table.propdef th, table.propdef-extra th, table.descdef th {
+	padding: 0.5em;
+	vertical-align: baseline;
+	border-bottom: 1px solid #bbd7e9;
+}
+/*
+table.propdef dfn, table.propdef-extra dfn, table.descdef dfn {
+	font-weight: bold;
+	font-style: normal
+}
+*/
+table.propdef td:first-child,
+table.propdef-extra td:first-child,
+table.descdef td:first-child,
+table.propdef th:first-child,
+table.propdef-extra th:first-child,
+table.descdef th:first-child {
+	font-style: italic;
+	font-weight: normal;
+	width: 8.3em;
+	padding-left: 1em;      
+}
+table.propdef td[colspan]:first-child,
+table.propdef-extra td[colspan]:first-child,
+table.descdef td[colspan]:first-child,
+table.propdef th[colspan]:first-child,
+table.propdef-extra th[colspan]:first-child,
+table.descdef th[colspan]:first-child {
+	font-style: inherit
+}
+table.propdef tr:first-child,
+table.propdef-extra tr:first-child,
+table.descdef tr:first-child {
+	
+}
+
+table.propdef > tbody > tr:last-child th,
+table.propdef-extra > tbody > tr:last-child th,
+table.descdef > tbody > tr:last-child th,
+table.propdef > tbody > tr:last-child td,
+table.propdef-extra > tbody > tr:last-child td,
+table.descdef > tbody > tr:last-child td {
+	border-bottom: 0;
+}
+
+table.propdef tr:first-child th,
+table.propdef-extra tr:first-child th,
+table.descdef tr:first-child th,
+table.propdef tr:first-child td,
+table.propdef-extra tr:first-child td,
+table.descdef tr:first-child td {
+	padding-top: 1em;
+}
+
+/* For when values are extra-complex and need formatting for readability */
+table td.pre {
+	white-space: pre-wrap;
+}
+
+/* A footnote at the bottom of a propdef */
+table.propdef td.footnote {padding-top: 0.6em; width: auto}
+table.propdef td.footnote:before {
+	content: " ";
+	display: block;
+	height: 0.6em;
+	width: 4em;
+	border-top: thin solid;
+}
+
+/* table.propdef tr:first-child td { padding-top: 0.1em; padding-bottom: 0.1em } */
+
+/* This would replace :first-child for Opera, but it confuses WinIE :-( */
+/*
+table.propdef td { width: 8em }
+table.propdef td + td { width: auto }
+table.propdef tr { background: #005A9C; color: white }
+table.propdef tr + tr { background: transparent; color: black }
+*/
+
+table.proptable td .property {
+	display: block;
+	text-align: left;
+	font-weight: bold;
+}
+
+/* CSS modules typically don't use MUST, SHOULD etc. from RFC 2119,
+or, if they do, they don't put them in uppercase. But the following
+class is provided in case a spec wants to use RFC 2119 terms in
+uppercase in the source. */
+
+em.rfc2119 {
+	text-transform: lowercase;
+	font-variant: small-caps;
+	font-style: normal
+}
+
+/* In Profile specs, a table of required features: */
+
+table.features th {
+	background: #00589f;
+	color: #fff;
+	text-align: left;
+	padding: 0.2em 0.2em 0.2em 0.5em;
+}
+table.features td {
+	vertical-align: top;
+	border-bottom: 1px solid #ccc;
+	padding: 0.3em 0.3em 0.3em 0.7em;
+}
+
+
+/* Style for data tables (and properly marked-up proptables) */
+
+.data, .proptable {
+	margin: 1em auto;
+	border-collapse: collapse;
+	width: 100%;
+	border: hidden;      
+}
+.data caption {
+	width: 100%;
+	text-align: center;
+}
+
+.data td, .data thx,
+.proptable td, .proptable thx {
+	padding: 0.5em;
+	text-align: center;
+	border-top: 1px dotted;        
+}
+
+.data thead td:empty {
+	padding: 0;
+	border: 0;
+}
+
+.data thead th[scope="row"],
+.proptable thead th[scope="row"] {
+	text-align: right;
+	color: inherit;
+}
+
+.data thead,
+.proptable thead,
+.data tbody,
+.proptable tbody {
+	color: inherit;
+	border-bottom: 1px solid;
+}
+	
+.data colgroup {
+	border-left: 1px solid;
+}
+
+.data tbody th:first-child,
+.proptable tbody th:first-child ,
+.data tbody td[scope="row"]:first-child,
+.proptable tbody td[scope="row"]:first-child {
+	text-align: right;
+	color: inherit;
+	border-right: 1px solid;
+	border-top: 1px dotted;
+	padding-right: 1em;
+}
+
+.data tbody th[rowspan],
+.proptable tbody th[rowspan],
+.data tbody td[rowspan],
+.proptable tbody td[rowspan]{
+	border-left: 1px dotted;
+}
+
+.data tbody th[rowspan]:first-child,
+.proptable tbody th[rowspan]:first-child,
+.data tbody td[rowspan]:first-child,
+.proptable tbody td[rowspan]:first-child{
+	border-left: 0;
+	border-right: 1px dotted;
+}    
+
+.complex.data th,
+.complex.data td {
+	border: 1px dotted;
+}
+
+
+.data img {
+	vertical-align: middle;
+}
+
+table.propdef {
+	table-layout: auto;
+}
+.propdef th {
+	font-style: italic;
+	font-weight: normal;
+	text-align: left;
+	width: 3em;
+}
+dt dfn code {
+	font-size: inherit;
+}
+
+/* This is mostly to make the list inside the CR exit criteria more compact. */
+ol.inline, ol.inline li {display: inline; padding: 0; margin: 0}
+ol.inline {counter-reset: list-item}
+ol.inline li {counter-increment: list-item}
+ol.inline li:before {content: "(" counter(list-item) ") "; font-weight: bold}
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/master/style/default_no_issues.css	Sat Nov 12 17:12:59 2011 +0100
@@ -0,0 +1,11 @@
+/*
+ * Turns off issues and annotations.
+ */
+
[email protected] url('default_svg.css');
+
+p.issue, div.issue, p.annotation, div.annotation {
+	display:none;
+}
+
+
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/master/style/default_svg.css	Sat Nov 12 17:12:59 2011 +0100
@@ -0,0 +1,183 @@
+/*
+ * Style sheet for the SVG 2 specification,
+ * to be used in addition to http://www.w3.org/StyleSheets/TR/W3C-{WD,PR,REC}
+ * References the CSS3 style sheet.
+ */
+
[email protected] url(default.css);
+
+/* Copy note for use with annotation. */
+div.annotation {
+	text-indent: 0;
+	margin-bottom: 0;
+	margin-top: 1em
+}
+
+.annotation> p:first-child {
+	margin-top: 0
+}
+
+p.annotation, div.annotation {
+	padding: .5em;
+	border-left-width: .5em;
+	border-left-style: solid;
+}
+
+/* Class annotation is list of annotations; not intended for a final publication. */
+p.annotation, div.annotation {
+	border-color: #C752E0;
+	background: #F8E9FB;
+	counter-increment: annotation;
+}
+
+p.annotation:before, div.annotation:before {
+	content: "Annotation " counter(annotation);
+	padding-right: 1em;
+	text-transform: uppercase;
+	color: #C752E0;    
+}
+
+span.annotation { color: purple; }
+
+
+/* Imported from svg-style.css */
+.code-fragment {
+    color: #A52A2A;
+    font-weight: bold;
+    font-size: 90%
+}
+.element-name {
+    color: #A52A2A;
+    font-weight: bold;
+    font-size: 90%
+}
+.attr-name {
+    color: #2A2AA5;
+    font-weight: bold;
+    font-size: 90%
+}
+.prop-name {
+    color: black;
+    font-weight: bold;
+    font-size: 90%
+}
+.attr-value, .prop-value {
+    font-weight: bold;
+    font-size: 90%
+}
+
+body { line-height: 1.3; }
+
+/* Added to match new style sheet */
+div.element-summary {
+	border-color: #52A7E0;
+	background: #E9F4FB;
+}
+
+
+div.element-summary {
+	padding: .5em;
+	border-left-width: .5em;
+	border-left-style: solid;
+}
+
+
+/*.element-summary { background: #d9e8ff; padding: 1em; margin-top: 1em }*/
+.element-summary-name { float: right; font-size: 110% }
+.element-summary dl, .element-summary dt { margin-top: 0; margin-bottom: 0; }
+.element-summary * + dt { margin-top: 0.5em; }
+.element-summary dd { margin-top: 0; }
+.element-summary ul.no-bullets { list-style: none; margin-left: 0; padding-left: 0 }
+.element-summary ul.no-bullets li { padding-left: 2em; text-indent: -2em; }
+.expander { color: #888; text-decoration: underline; cursor: pointer; font-size: 85% }
+.expander { }
+.expander:active { color: #C00 }
+.expander:hover { background: #ffa }
+.expander:after { content: 'show ยป' }
+
+.xgrammar { color: #A52A2A; font-family: monospace; font-size: 90% }
+
+pre.idl, pre.dtd-fragment { color: black; padding: 1em; margin-top: 1em; margin-left: 0; font-size: 1em; overflow: auto; font-size: 14px }
+pre.idl { background: #d9e8ff }
+pre.idl a:link, pre.idl a:visited { color: black; }
+
+dl.interface dt {
+  margin-top: 1em;
+}
+
+dl.interface dt.attribute,
+dl.interface dt.constant,
+dl.interface dt.operation {
+  margin-top: 2em;
+}
+
+dl.interface dt.attribute,
+dl.interface dt.constant,
+dl.interface dt.operation,
+dl.interface li.parameter,
+dl.interface dt.exception {
+  font-weight: normal;
+  display: list-item;
+}
+
+dl.interface dt.attribute.first-child,
+dl.interface dt.constant.first-child,
+dl.interface dt.operation.first-child,
+dl.interface li.parameter.first-child,
+dl.interface dt.exception.first-child {
+  margin-top: 0;
+}
+
+dl.interface dd.attribute,
+dl.interface dd.constant,
+dl.interface dd.operation,
+dl.interface li.parameter,
+dl.interface dd.exception {
+  margin-top: 0.5em;
+  margin-left: 0;
+}
+
+.idlattr, .idlattr:link, .idlattr:visited {
+  background: #d9e8ff;
+  color: black;
+}
+
+ol.parameters {
+  list-style-type: disc;
+  padding-left: 0;
+  margin-left: 0;
+}
+
+var {
+  font-style: italic;
+}
+
+dl.definitions > dt,
+.adef-list dl > dt { margin-top: 1em; }
+
+dl.definitions > dt + dt,
+.adef-list dl > dt + dt { margin-top: 0; }
+
+dl.definitions > dd > :first-child,
+.adef-list dl > dd > :first-child { margin-top: 0; }
+
+.adef { font-size: 14px }
+
+
+/*
+ * Temporary styles for use only while the spec is in development:
+ */
+
+body, h1, h2, h3 {
+    /* mark everything as not yet reviewed */
+    background-color: #FFEEEE ! important;
+}
+
+.ready-for-wg-review {
+    background-color: #FBFBB6 ! important;
+}
+
+.ready-for-wider-review {
+    background-color: white ! important;
+}
+