/* 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 { margin-left: auto; margin-right: auto; display: block; max-width: 100%; height: auto; } /* 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,'); } .collapse { display: none; } .expand { transform: rotateZ(-180deg); }