lib/isodoc/iso/html/style-iso.scss
/*
0 CSS RESET
*/
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
@import 'base_style/all';
body {
@include bodyStyle1(16px, 1.4em, -internal-root-color, #ffffff, 300);
main {
margin: 0;
}
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1.3;
}
blockquote, q {
quotes: none;
}
blockquote::before, blockquote::after,
q::before, q::after {
content: '';
content: none;
}
/* 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, 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;
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;
}
h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
margin-bottom: 1em;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
line-height: 1.2;
}
{% if doctype == "Amendment" or doctype == "Technical Corrigendum" %}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
font-weight: normal;
font-size: initial;
font-style: italic;
}
{% endif %}
p {
margin-top: 1em;
margin-bottom: 1em;
}
p.zzSTDTitle1 {
font-weight: 700;
font-size: 1.5em;
}
p.zzSTDTitle2 {
font-size: 1.5em;
}
span.obligation {
font-weight: 400;
}
a {
color: black;
text-decoration-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 {
margin-bottom: 0.6em;
line-height: 1.2;
}
p.AltTerms {
margin-bottom: 0;
}
p.Terms {
margin-top: 0em;
}
/* Navigation*/
#toc, #toc > ul :is(.h1, .h2, .h3, .h4, .h5, .h6) {
@include toc(null, #f7f7f7, black);
@include sidebarToc();
.toc-active,
li:hover {
box-shadow: 0px 1px 0px 0px black !important;
background: none;
}
li::before {
content: " ";
display: none;
}
}
#toc > ul :is(.h1, .h2, .h3, .h4, .h5, .h6) {
margin-top: 0;
margin-bottom: 0;
font-size: 100%;
}
nav {
@include sidebarNav(#f7f7f7, 278px, 20px);
line-height: 1.2em;
}
#toggle {
@include sidebarNavToggle(black, #f7f7f7);
border-right: solid black 1px;
margin-left: -4em;
margin-top: -2em;
}
@media screen and (min-width: 768px) {
.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) {
body {
margin-left: 2em;
}
main {
padding: 0;
}
.title-section, .prefatory-section {
padding-left: 0;
padding-top: 0;
width: 100%;
}
}
.figure,
pre,
.pseudocode {
@include pseudocodeBlock(#f7f7f7);
font-size: $normalfontsize;
}
div.figure {
@include figureBlock();
}
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, 100%);
}
p.document-stage {
@include docBandTitle(210px);
writing-mode: vertical-rl;
}
#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.2 Links
*/
a {
color: black;
text-decoration-color: black;
}
/*
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 : force a) parentheses for ordered lists */
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(#f7f7f7);
font-size: $normalfontsize;
}
pre {
@include monospaceBlockStyle()
}
@include admonitionBlock();
@include recommendationBlock();
@include listBlock();
.figure-title, .FigureTitle, .SourceTitle, .AdmonitionTitle, .RecommendationTitle {
@include blockTitle()
}
.figure dl {
}
/*
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, .zzHelp p {
margin: 0;
}
div.zzHelp {
color: green;
padding: 0.5em;
margin: 1.5em 0 1.5em 0;
text-align: left;
}
/*
3.8 Examples
*/
.example {
@include exampleBlock(#e1eef1, black, 0.5em);
color: black;
padding-left: 0.5em;
.example-title {
margin-top: 0;
}
pre,
.pseudocode {
background: none;
}
}
/*
3.9 Tables
*/
table {
@include table(1px solid black);
}
td,
th {
padding: 1em !important;
}
table.rouge-line-table td, table.rouge-line-table th {
padding: 0em !important;
}
td > p:first-child, th > p:first-child {
margin-top: 0em;
}
td > p:last-child, th > p:last-child {
margin-bottom: 0em;
}
p.TableTitle {
text-align: center;
margin-top: 2.5em;
font-weight: 800;
font-size: 1.1em;
}
.TableFootnote {
text-align: left !important;
}
/*
table.modspec {
@include table($border: none !important);
text-align: left;
color: #010d16;
tr:nth-child(even) {
background: #ffffff
}
tr:nth-child(odd) {
background: #ffffff
}
thead tr th {
background-color: #5d99d6;
}
td, th {
padding: 1em;
}
td.header {
font-weight: 400;
}
}
*/
/*
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(#f7f7f7);
}
/*
3.12 Formulas
*/
.formula {
@include formulaBlock(#f7f7f7);
margin-left: 20%;
margin-right: 20%;
}
dl.formula_dl {
background-color: #f7f7f7;
margin-left: 20%;
margin-right: 20%;
}
/*
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);
}