lib/isodoc/iec/html/htmlstyle.scss
/*
0 CSS RESET
*/
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
@import 'base_style/all';
body {
line-height: 1.3;
}
/* New CSS */
body {
margin-left: 298px;
margin-right: 2em;
}
main {
padding-left: 4em;
padding-right: 2em;
}
.title-section, .prefatory-section {
padding-left: 4em;
padding-top: 2em;
}
.coverpage_docnumber, .coverpage_techcommittee {
text-align: right;
font-size: 0.9em;
line-height: 0.5em;
}
.doctitle-en, .doctitle-fr {
margin-top: 2em;
text-align: left;
}
.doctitle-en {
padding-left: 3em;
margin-left: -3em;
/*padding-top: 2em;*/
padding-bottom: 2em;
}
.doctitle-en span {
font-size: 2em;
line-height: 1.5em;
}
.doctitle-fr span {
font-size: 1.5em;
line-height: 1.2em;
font-style: italic;
}
.doctitle-part {
margin-top: 1em;
}
/*
span.title {
text-transform: uppercase;
font-size: 1em;
font-weight: 800;
}
*/
span.title, span.subtitle, span.part {
font-weight: 800;
}
span.partlabel {
display: block;
}
.coverpage_docstage {
margin-top: 2em;
margin-bottom: 2em;
}
.coverpage_warning {
font-size: 0.9em;
font-style: italic;
padding-bottom: 1em;
}
.boilerplate-copyright p {
margin-top: 1em;
display: block;
}
#boilerplate-message, #boilerplate-name,
#boilerplate-address {
font-size: 0.9em;
}
/* TYPOGRAPHY */
h1, .h1 {
font-size: 1.5em;
line-height: 2em;
margin-top: 2em;
margin-bottom: 1em;
}
h2, .h2 {
font-size: 1.2em;
line-height: 1.5em;
margin-top: 2em;
margin-bottom: 1em;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
line-height: 1.2;
}
p {
margin-top: 1em;
margin-bottom: 1em;
}
p.zzSTDTitle1 {
font-weight: 700;
font-size: 1.5em;
text-transform: uppercase;
}
.zzSTDTitle2 {
font-weight: 700;
font-size: 1.5em;
}
span.obligation {
font-weight: 400;
}
a {
color: black;
text-decoration-color: black;
}
nav a {
text-decoration: none;
color: black;
}
h2 p, .h2 p {
display: inline;
}
ul > li {
list-style: none;
}
ul > li > p:first-child::before {
content: "\2014";
display: inline-block;
width: 1em;
margin-left: -1.5em;
margin-right: 0.5em;
}
li p {
/* display: inline-block; */
margin-bottom: 0.6em;
line-height: 1.2;
}
#toc li::before {
content: " ";
display: none;
}
p.AltTerms {
margin-bottom: 0;
font-style: italic;
margin-left: 2em;
}
p.Terms {
margin-top: 0em;
}
p.TermNum {
font-weight: bold;
}
/* Navigation*/
nav {
@include sidebarNav(#f5faff, 278px, 20px);
}
#toggle {
@include sidebarNavToggle(black, #f5faff)
}
#toc, #toc > ul :is(.h1, .h2, .h3, .h4, .h5, .h6) {
@include toc(black, black, black);
@include sidebarToc();
.toc-active,
li:hover {
box-shadow: 0px 1px 0px 0px black !important;
color: black;
background: none;
}
ul {
a:hover {
box-shadow: none;
color: black;
}
}
}
#toc > ul :is(.h1, .h2, .h3, .h4, .h5, .h6) {
margin-top: 0;
margin-bottom: 0;
font-size: 100%;
}
@media screen and (min-width: 768px) {
nav {
line-height: 1.2em;
}
#toggle {
border-right: solid black 1px;
margin-left: -4em;
margin-top: -2em;
}
.container {
padding-left: 360px;
}
.rule.toc {
display: none;
}
h1.toc-contents {
margin-top: 1em;
}
ul#toc-list, ul#toc-list > :is(.h1, .h2, .h3, .h4, .h5, .h6) {
padding:0;
margin:0;
}
}
@media screen and (max-width: 768px) {
#toggle {
display: none;
margin-left: -4em;
margin-top: -2em;
}
body {
margin-left: 2em;
}
main {
padding: 0;
}
.title-section, .prefatory-section {
padding-left: 0;
padding-top: 0;
width: 100%;
}
}
div.figure > img, div.figure > svg {
margin-left: auto;
margin-right: auto;
display: block;
max-width: 100%;
height: auto;
}
table div.figure {
padding: 0;
margin: 0;
}
/*
Document types + stages
*/
.document-type-band {
@include docBand($order: 2, $offset: 180px);
.document-type {
top: 20px;
}
}
.document-stage-band {
@include docBand(1, 210px);
}
p.document-stage {
@include docBandTitle(210px);
}
#governance-band p.document-type {
font-weight: 400;
height: 230px!important;
}
p.document-stage {
font-weight: 300;
height:160px;
}
#standard-band {
background-color: #0ac442;
}
#standard {
border-bottom: solid 3px #0ac442;
}
#governance {
border-bottom: solid 3px #750697;
}
#governance-band {
background-color: #750697;
}
#guide {
border-bottom: solid 3px #48a0e7;
}
#guide-band {
background-color: #48a0e7;
}
.coverpage-maturity {
font-family: 'Overpass', sans-serif;
font-weight: 400;
font-size: 1em;
margin: 0 0 2em 0;
text-transform: uppercase;
}
#working-draft {
border-bottom: solid 3px #fda706;
}
#working-draft-band {
background-color: #fda706;
}
#committee-draft {
border-bottom: solid 3px #fd06fd;
}
#committee-draft-band {
background-color: #fd06fd;
}
#draft-standard {
border-bottom: solid 3px #fdf906;
}
#draft-standard {
border-bottom: solid 3px #fdf906;
}
#standard {
border-bottom: solid 3px #0ac442;
}
#standard-band {
background-color: #0ac442;
}
#obsolete {
border-bottom: solid 3px #7e0d13;
}
#obsolete-band {
background-color: #7e0d13;
}
/* 3 Other styles */
/*
3.3 Lists
*/
ul, ol {margin-left: 2em;}
#toc-list ul {margin-bottom: 0.25em;}
#toc-list ol li {list-style-type: none;}
/* https://github.com/metanorma/metanorma-iso/issues/319 : ordered list rendering */
ol[class="alphabet"] {
counter-reset: alphabet;
}
ol[class="arabic"] {
counter-reset: arabic;
}
ol[class="roman"] {
counter-reset: roman;
}
ol[class="alphabet_upper"] {
counter-reset: alphabet_upper;
}
ol[class="roman_upper"] {
counter-reset: roman_upper;
}
ol[class="alphabet"] ol[class="alphabet"] {
counter-reset: alphabet2;
}
ol[class="arabic"] ol[class="arabic"] {
counter-reset: arabic2;
}
ol[class="roman"] ol[class="roman"] {
counter-reset: roman2;
}
ol[class="alphabet_upper"] ol[class="alphabet_upper"] {
counter-reset: alphabet_upper2;
}
ol[class="roman_upper"] ol[class="roman_upper"] {
counter-reset: roman_upper2;
}
ol {
counter-reset: alphabet;
}
ol > li {
list-style: none;
position: relative;
}
ol > li::before {
position: absolute;
left: -1.4em;
}
ol[class="roman"] > li::before {
left: -2.0em;
}
ol[class="roman_upper"] > li::before {
left: -2.3em;
}
ol[class="alphabet"] > li::before {
counter-increment: alphabet;
content: counter(alphabet, lower-alpha)") "
}
ol[class="arabic"] > li::before {
counter-increment: arabic;
content: counter(arabic, decimal)") "
}
ol[class="roman"] > li::before {
counter-increment: roman;
content: counter(roman, lower-roman)") "
}
ol[class="alphabet_upper"] > li::before {
counter-increment: alphabet_upper;
content: counter(alphabet_upper, upper-alpha)") "
}
ol[class="roman_upper"] > li::before {
counter-increment: roman_upper;
content: counter(roman_upper, upper-roman)") "
}
ol > li::before {
counter-increment: alphabet;
content: counter(alphabet, lower-alpha)") "
}
ol[class="alphabet"] ol[class="alphabet"] > li::before {
counter-increment: alphabet2;
content: counter(alphabet2, lower-alpha)") "
}
ol[class="arabic"] ol[class="arabic"] > li::before {
counter-increment: arabic2;
content: counter(arabic2, decimal)") "
}
ol[class="roman"] ol[class="roman"] > li::before {
counter-increment: roman2;
content: counter(roman2, lower-roman)") "
}
ol[class="alphabet_upper"] ol[class="alphabet_upper"] > li::before {
counter-increment: alphabet_upper2;
content: counter(alphabet_upper2, upper-alpha)") "
}
ol[class="roman_upper"] ol[class="roman_upper"] > li::before {
counter-increment: roman_upper2;
content: counter(roman_upper2, upper-roman)") "
}
/*
3.4 Rules
*/
.rule {
@include rule(1px, #0e1a85)
}
/*
3.5 Bibliograhy
*/
p.Biblio,
p.NormRef {
margin-top: 1em;
margin-left: 2em;
}
/*
3.6 Source Code + figures
*/
.figure,
pre,
.pseudocode {
@include pseudocodeBlock(#f5faff);
font-size: $monospacefontsize;
}
pre {
@include monospaceBlockStyle()
}
@include admonitionBlock();
@include recommendationBlock();
@include listBlock();
.FigureTitle,
.SourceTitle {
@include blockTitle()
}
/*
3.7 Notes
*/
.Note, .note {
background-color: #fff495;
color: #47430c;
padding: 0.5em;
margin: 1.5em 0 1.5em 0;
text-align: left;
}
.Note p, .note p {
margin: 0;
}
.Admonition {
background-color: #ffcccc;
color: #47430c;
padding: 0.5em;
margin: 1.5em 0 1.5em 0;
text-align: left;
}
.Admonition p {
margin: 0;
}
/*
3.8 Examples
*/
.example {
@include exampleBlock(#e1eef1, #424242, 0.5em);
text-align: left;
.example-title {
margin-top: 0;
}
pre,
.pseudocode {
background: none;
}
}
/*
3.9 Tables
*/
/*
3.9 Tables
*/
table {
@include table(1px solid black);
text-align: center;
td,
th {
font-size: 0.95em;
padding: 1em !important;
}
}
p.TableTitle {
text-align: center;
margin-top: 2.5em;
font-weight: 800;
font-size: 1.1em;
}
.TableFootnote {
text-align: left!important;
}
/*
3.10 Footnotes
*/
a.footnote-number, a.TableFootnoteRef, span.TableFootnoteRef {
vertical-align: super;
font-size: 0.8em;
}
.footnote {
font-size: $footnotefontsize;
}
sup a {
vertical-align: super;
font-size: 0.8em;
}
#footnote_box {
font-size: $footnotefontsize;
background: white;
padding: 0 10px;
margin: 10px;
border: 1px solid #888;
-moz-box-shadow: 0px 0px 5px #888;
-webkit-box-shadow: 0px 0px 5px #888;
box-shadow: 0px 0px 5px #888;
}
ol.footnotes-list, aside.footnote {
margin-left: 1em;
}
ol.footnotes-list li, aside.footnote {
font-size: $footnotefontsize;
vertical-align: top;
list-style:decimal;
margin-bottom: 1em;
}
ol.footnotes-list:first-child {
margin-top: 2em;
}
ol.footnotes-list p, aside.footnote p {
display: inline;
}
ol > li > p::before {
content: "";
display: none;
}
/*
3.11 Blockquotes
*/
.Quote {
@include blockquoteBlock(#f5faff);
}
/*
3.12 Formulas
*/
.formula {
@include formulaBlock(#f5faff)
}
dl.formula_dl {
background-color: #f5faff;
}
/*
Keywords
*/
span.keyword {
font-weight: 600;
}
.Admonition, .admonition {
background-color: #ffb3b3;
/* color: #47430c;*/
padding: 0.5em;
margin: 1.5em 0 1.5em 0;
text-align: left;
}
.Admonition p, .admonition p {
margin: 0;
}
/* Collapse TOC */
.collapse-group {
display: flex;
align-items: center;
position: relative;
}
.collapse-button {
position: absolute;
right: 0;
display: inline-block;
height: 20px;
width: 20px;
cursor: pointer;
background-image: url('data:image/svg+xml,<svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="rgba(0,0,0,.54)" d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"></path></svg>');
}
.collapse {
display: none;
}
.expand {
transform: rotateZ(-180deg);
}