Template:Spec-paragraph/styles.css

/**
 * Styles for specifications that follow the W3C style guide
 * per .
 * the original style definitions can be found at
 * .

/* boxes *******************************************/ .specp { padding: 0.1em 0; border: none; page-break-inside: avoid; margin: 0.4em 0; }

div.specp.norm, div.specp.instruction { background-color:inherit; }

div.specp.note, div.specp.info { padding: 0.1em 0.5em; border-width: 0 0 0 6pt; border-style: solid; border-color: #52e052; background-color:#e9fbe9; }

div.specp.note::before, div.specp.info::before { content: "Note: "; font-weight: normal; text-decoration: underline; display: inline-block; margin-right: 1ex; }

div.specp.advisement, div.specp.warning { padding: 0.1em 0.5em; border-width: 0 0 0 6pt; border-style: solid; border-color: orange; background-color:#fec; }

div.specp.def, div.specp.definition { padding: 0.1em 0.5em; border-width: 0 0 0 6pt; border-style: solid; border-color: #8ccbf2; background-color:#def; }

/* example box ***********************************************/

div.specp.example { padding: 0.1em 0.5em; border-width: 0 0 0 6pt; border-style: solid; border-color: #e0cb52; background-color:#fcfaee; }

div.specp.example::before { content: "Example: "; font-weight: normal; text-decoration: underline; }

div.specp.example.mw-collapsed::before { content: "Example..."; } div.specp.example .handle { position: relative; top: -1.5em; }

/* callapsible box ***********************************************/ div.specp:not(.mw-collapsed)::before { display: block; }

div.specp.mw-collapsed::before { display: inline; }

div.specp > .mw-collapsible-toggle-expanded { position: relative; top: -1.5em; padding-left: 1ex; }

/* discussions *******************************************/

div.specp.discussion { border-color: grey; border-width: 0 6pt; border-style: solid; background-color:#eee; margin-top: -0.5em; padding: .5em 0.5em; font-size: 86%; }

div.specp.discussion:not(.mw-collapsed)::before { display: block; }

div.specp.discussion.mw-collapsed::before { display: inline-block; content: "Discussion..."; }

div.specp.discussion > .mw-collapsible-toggle-expanded { position: relative; top: 0; padding-left: 1ex; }

div.specp.under-discussion { padding-right: 0.5em; border-right-color: grey; border-right-width: 6pt; border-right-style: solid; padding-right: 0.5em; }

/* handles *******************************************/ .specp .handle { padding: 0 0.5em; margin: 0 0 0.5em 0.5em; display: block; float: right; border: 1px solid grey; border-radius: 3px; background-color: #eee; font-weight: normal; font-size: 86%; }

.specp .handle::before { content: "#"; font-weight: normal; }

/* status marker *******************************************/

div.specp.wip { border-right-color: purple; border-right-width: 6pt; border-right-style: solid; padding-right: 0.5em; }

div.specp.wip::before { content: "[WIP] "; font-weight: bold; } div.specp.new { border-right-color: purple; border-right-width: 6pt; border-right-style: solid; padding-right: 0.5em; }

div.specp.new::before { content: "[NEW] "; font-weight: bold; }

div.specp.fixme { border-right-color: red; border-right-width: 6pt; border-right-style: solid; padding-right: 0.5em; }

div.specp.fixme::before { content: "[FIXME] "; font-weight: bold; }

div.specp.todo { border-right-color: purple; border-right-width: 6pt; border-right-style: solid; padding-right: 0.5em; }

div.specp.todo::before { content: "[TODO] "; font-weight: bold; }