lib/isodoc/csand/html/htmlstyle.scss in asciidoctor-csand-0.2.7 vs lib/isodoc/csand/html/htmlstyle.scss in asciidoctor-csand-0.2.8

- old
+ new

@@ -89,11 +89,11 @@ dd { grid-column-start: 2; } -dd p { +dd p, dt p { margin-top: 0px; } /* HTML5 display-role reset for older browsers */ @@ -162,11 +162,11 @@ #toggle { position: fixed; height: 100%; width: 30px; - background-color:#1d1d1d; + background-color:#4D7EA5; color: white!important; cursor: pointer; z-index: 100; } @@ -216,11 +216,11 @@ #toc li { padding: 5px 10px; } #toc a { - color: #485094; + color: #4D7EA5; text-decoration: none; display: block; } #toc a:hover { @@ -238,12 +238,12 @@ #toc .toc-active a { color: white; } #toc .toc-active, #toc li:hover { - background: #1d1d1d; - box-shadow: inset -5px 0px 10px -5px #1d1d1d!important; + background: #4D7EA5; + box-shadow: inset -5px 0px 10px -5px #4D7EA5!important; } #toc li:hover a { color: white; @@ -269,11 +269,11 @@ top:0; height: 100%; position: fixed; display: block; z-index: 98; - box-shadow: -5px 0px 10px #1d1d1d + /*box-shadow: -5px 0px 10px #1d1d1d*/ } .document-type { position: relative; width: 25px; @@ -301,11 +301,11 @@ bottom:0; } p.document-type { font-weight: 400; - height: 210px; + height: 120px; } #governance-band p.document-type { font-weight: 400; height: 230px!important; @@ -315,11 +315,11 @@ font-weight: 300; height:160px; } #standard-band { - background-color: #0ac442; + color: #0ac442; } #standard { border-bottom: solid 3px #0ac442; } @@ -346,24 +346,16 @@ font-size: 1em; margin: 0 0 2em 0; text-transform: uppercase; } -#proposal { - border-bottom: solid 3px #00BFFF; -} - -#proposal-band { - background-color: #00BFFF; -} - #working-draft { border-bottom: solid 3px #fda706; } -#working-draft-band { - background-color: #fda706; +#working-draft-band p { + color: #fda706; } #committee-draft { border-bottom: solid 3px #fd06fd; } @@ -378,85 +370,69 @@ #draft-standard-band { background-color: #fdf906; } -#final-draft { - border-bottom: solid 3px #7e0d13; -} - -#final-draft-band { - background-color: #7e0d13; -} - -#published { +#standard { border-bottom: solid 3px #0ac442; } -#published-band { - background-color: #0ac442; +#obsolete { + border-bottom: solid 3px #7e0d13; } -#withdrawn { - border-bottom: solid 3px #a0a0a0; +#obsolete-band { + background-color: #7e0d13; } -#withdrawn-band { - background-color: #a0a0a0; -} - /* 3. TYPOGRAPHY */ /* 3.1 Titles */ h1,h2,h3,h4,h5,h6 { font-family: $headerfont; - color: #0e1a85; + color: black; font-weight: 600; margin-top: 2em; margin-bottom: 0.3em; } h1 { - font-size: 1.4em; + font-size: 1.8em; text-transform: uppercase; margin-top: 2em; } h1#content { margin-top: 2em; } h2 { - font-size: 1.3em; - font-weight: 400; + font-size: 1.6em; } h3 { - font-size: 1.1em; - font-weight: 400; + font-size: 1.5em; } - - /* +/* span[id^="toc"]:after { float: left; padding-right: 4px; margin-left: -20px; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 0.8em; color: #cfcfcf; content: "\f0c1"; } - */ - +*/ .TermNum, .Terms, .AltTerms { - color: #485094; + color: #00549f; font-weight: 400; } p.TermNum { font-size: 0.9em; @@ -487,31 +463,31 @@ 3.2 Links */ a, a:visited{ text-decoration: none; - color: #485094; + color: #4D7EA5; } a:hover { color: white; - background: #1d1d1d; - box-shadow: 3px 0 0 #1d1d1d, -3px 0 0 #1d1d1d; + background: #4D7EA5; + box-shadow: 3px 0 0 #4D7EA5, -3px 0 0 #4D7EA5; /* padding: 2px 0 2px 0; */ } ::selection { - background: #1d1d1d; /* WebKit/Blink Browsers */ + background: #4D7EA5; /* WebKit/Blink Browsers */ color: white; } ::-moz-selection { - background: #1d1d1d; /* Gecko Browsers */ + background: #4D7EA5; /* Gecko Browsers */ color: white; } .contact-info a:hover { - color: #485094; + color: #4D7EA5; text-decoration: underline; background: none; box-shadow: 0 0 0 0; } @@ -519,62 +495,35 @@ /* 3.3 Lists */ - ul { - margin-left: 1.2em; - } - ul { - margin-left: 1.2em; } + margin-left: 0.5em; } -ul > li { - list-style: none; -} - - ul > li:before { - content: "—"; - display: inline-block; width: 1em; - margin-left: -1.2em; - } - - li p { - display: inline; - } - -li:first-child { - margin-top: 1em; -} - #toc ul { margin-bottom: 0.25em; } #toc li { list-style-type: none; } -#toc li:before { - content: " "; - display: none; -} - - /* 3.4 Rules */ .rule { width: 100%; height: 1px; - background-color: #0e1a85; + background-color: #00427e; margin: 2em 0; } - +/* h2 p { display: inline; } +*/ /* 3.5 Bibliograhy */ @@ -588,16 +537,18 @@ 3.6 Source Code + figures */ .figure, .Sourcecode { font-family: $monospacefont; - background-color: #f7f7f7; - font-size: 0.8em; + background-color: #F5F6F6; + font-size: 1em; line-height: 1.6em; - padding: 1.5em; - margin: 2em 0 1em 0; overflow: auto; + border-left: solid 5px #B1B6B8; + color: rgb(91, 94, 95); + padding: 1.2em 1.2em 1.2em 2.2em; + margin: 2em 0 2em -1em;; } .FigureTitle { font-weight: 700; font-size: 1em; @@ -607,24 +558,27 @@ /* 3.7 Notes */ .Note { - background-color: #fff495; - color: #47430c; - padding: 1.2em; - margin: 2em 0 1em 0; + background-color: #F5F6F6; + border-left: solid 5px #B1B6B8; + color: rgb(91, 94, 95); + padding: 1.2em 1.2em 1.2em 2.2em; + margin: 2em 0 2em -1em; } /* 3.8 Examples */ .example { - background-color: #e1eef1; - padding: 1.2em; - margin: 2em 0 1em 0; + background-color: #F5F6F6; + border-left: solid 5px #B1B6B8; + color: rgb(91, 94, 95); + padding: 1.2em 1.2em 1.2em 2.2em; + margin: 2em 0 2em -1em;; } .example .example-title { font-weight: 700; text-transform: uppercase; @@ -642,25 +596,36 @@ font-weight: 300; margin: 1em 0 2em 0; margin-left: auto; margin-right: auto; padding-right: 2em; + border: solid 1px #F5F6F6!important; } table, th, td { - border: 1px solid black; - font-size: 0.95em; + border: none!important; + font-size: 1em; } td, th { padding: 1em; } td.header { font-weight: 400; } +tr:nth-child(even) { + background-color: #FBF9F8; +} + +thead { + background-color: #4D7EA5; + color: white; + border: none; +} + p.TableTitle { text-align: center; margin-top: 2.5em; font-weight: 400; } @@ -682,17 +647,16 @@ /* 3.11 Blockquotes */ .Quote { - background-color: #f7f7f7; + background-color: #F5F6F6; + border-left: solid 5px #B1B6B8; + color: rgb(91, 94, 95); + padding: 1.2em 1.2em 1.2em 2.2em; + margin: 2em 0 2em -1em;; font-style: italic; - width: 80%; - padding: 1.5em; - margin-top: 2em; - margin-left: auto; - margin-right: auto; } .QuoteAttribution {text-align:right;} @@ -700,13 +664,15 @@ /* 3.12 Formulas */ .formula, .Formula { - background-color: #f7f7f7; - padding: 1.5em; - margin-top: 2em; + background-color: #F5F6F6; + border-left: solid 5px #B1B6B8; + color: rgb(91, 94, 95); + padding: 1.2em 1.2em 1.2em 2.2em; + margin: 2em 0 2em -1em;; text-align: center; } /* 3.13 Contact Info @@ -742,18 +708,20 @@ /* Keywords */ span.keyword { - font-weight: 600; + font-weight: 400; } /* Paragraphs */ p { + font-size: 1.2em; + line-height: 1.5; margin-top: 1em; margin-bottom: 1em; } /* Admonitions */ @@ -777,99 +745,168 @@ /* 4.1 Top Logo */ +/* .wrapper-top { background-color:#0e1a85; - /* background-image: url("img/dots@2x.png"); */ background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAYAAABccqhmAAAACXBIWXMAABYlAAAWJQFJUiTwAAADwUlEQVR4nO3YgQ2AMAwDwcAiWZ1NizrH30lIeIEq9nPOGSDqPgC7+93v/suy3Mmvhx+6VAAIcwFAmc4nyzYAIMgGAGEuACirdyBZtgEASTYACHMBQFm9A8myDQBIsgFAmAsAyuodSJZtAECSDQDCXABQVu9AsmwDAJJsABDmAoCyegeSZRsAkGQDgDAXAJTVO5As2wCAJBsAhLkAoKzegWTZBgAk2QAgzAUAZfUOJMs2ACDJBgBhLgAoq3cgWbYBAEk2AAhzAUBZvQPJsg0ASLIBQJgLAMrqHUiWbQBAkg0AwlwAUFbvQLJsAwCSbAAQ5gKAsnoHkmUbAJBkA4AwFwCU1TuQLNsAgCQbAIS5AKCs3oFk2QYAJNkAIMwFAGX1DiTLNgAgyQYAYS4AKKt3IFm2AQBJNgAIcwFAWb0DybINAEiyAUCYCwDK6h1Ilm0AQJINAMJcAFBW70CybAMAkmwAEOYCgLJ6B5JlGwCQZAOAMBcAlNU7kCzbAIAkGwCEuQCgrN6BZNkGACTZACDMBQBl9Q4kyzYAIMkGAGEuACirdyBZtgEASTYACHMBQFm9A8myDQBIsgFAmAsAyuodSJZtAECSDQDCXABQVu9AsmwDAJJsABDmAoCyegeSZRsAkGQDgDAXAJTVO5As2wCAJBsAhLkAoKzegWTZBgAk2QAgzAUAZfUOJMs2ACDJBgBhLgAoq3cgWbYBAEk2AAhzAUBZvQPJsg0ASLIBQJgLAMrqHUiWbQBAkg0AwlwAUFbvQLJsAwCSbAAQ5gKAsnoHkmUbAJBkA4AwFwCU1TuQLNsAgCQbAIS5AKCs3oFk2QYAJNkAIMwFAGX1DiTLNgAgyQYAYS4AKKt3IFm2AQBJNgAIcwFAWb0DybINAEiyAUCYCwDK6h1Ilm0AQJINAMJcAFBW70CybAMAkmwAEOYCgLJ6B5JlGwCQZAOAMBcAlNU7kCzbAIAkGwCEuQCgrN6BZNkGACTZACDMBQBl9Q4kyzYAIMkGAGEuACirdyBZtgEASTYACHMBQFm9A8myDQBIsgFAmAsAyuodSJZtAECSDQDCXABQVu9AsmwDAJJsABDmAoCyegeSZRsAkGQDgDAXAJTVO5As2wCAJBsAhLkAoKzegWTZBgAk2QAgzAUAZfUOJMs2ACDJBgBhLgAoq3cgWbYBAEk2AAhzAUBZvQPJsg0ASLIBQJgLAMrqHUiWbQBAkg0AwlwAUFbvQLJsAwCSbAAQ5gKAsnoHkmUbAJBkA4AwFwCU1TuQLNsAgCQbAFTNzA9ggAr9aahO8QAAAABJRU5ErkJggg=='); color: #ffffff; padding: 2em 0; } +*/ +.coverpage { + background: radial-gradient(#2D5D8E, #0D1E2B); + /*background-image: url("img/dots@2x.png");*/ + color: #ffffff; + padding: 2em 0; + } .doc-number { - font-size: 0.5em; + font-size: 1em; font-family: $bodyfont; } .coverpage-title { padding-bottom: 0.5em; font-family: $headerfont; - font-size: 1.2em; - line-height: 1.2em; + font-size: 1.5em; font-weight: 900; - padding-left: 1em; - padding-right: 1em; } - .WordSection11 { + .title-section1 { padding: 0 2em 0 3em; } - .WordSection2 { - padding: 0 3em 0 6em; + .prefatory-section { + padding: 0 3em 0 3em; } .zzSTDTitle1, .MsoCommentText { display: none; } .coverpage { text-align: center; - padding-left: 1.5em; } + .coverpage-logo { + margin-top: 2em; + margin-bottom: 6em; + } + .coverpage-logo span, .coverpage-tc-name span { font-family: $bodyfont; text-transform: uppercase; - font-weight: 600; + font-weight: 300; + display: block; } .coverpage-tc-name { font-size: 1.2em; line-height: 1.2em; margin: 0.25em 0; } + + .document-info { + margin: 3em 3em 2em 5em; +} + /* 4.2 Document Identity */ .coverpage-doc-identity { - font-size: 2em; - line-height: 2em; + width: 100%; + height: 50px; + margin: 2em 0; } + .title-first { + font-size: 3em; + line-height: 2em; + font-weight: 900; + text-transform: uppercase; + text-decoration: underline solid #EE9C4F; + margin-top: 2em; + } + + .title-second { + font-size: 2em; + line-height: 2em; + font-weight: 300; + letter-spacing: 1px; + } + + img.csa-logo { + height: 50px; + float: right; + margin-right: 2em; + } + .coverpage-title .title-second { display: none; } .coverpage-stage-block { font-family: $bodyfont; font-weight: 700; - font-size: 1.25em; - margin: 2em 0em 2em 0em; + font-size: 1em; + margin: 1em 0em 1em 0em; text-transform: uppercase; } +.section-title { + background: linear-gradient(#A5A8AB, #B1B6B8); + padding: 4em 2em 3em 5.5em; + margin: 4em -3em 3em -5em; + border-bottom: 8px solid #EE9C4F; +} +.section-title .super-title { + font-size: 2em; + font-weight: 100; + line-height: 1em; + margin: 0; + color: white; + text-transform: uppercase; +} + +.section-title h1 { + font-size: 2em; + font-weight: 800; + line-height: 1em; + margin-top: 0.5em; + margin-bottom: 0; + color: white; + text-transform: none; +} + +h2 { + border-bottom: solid 1px #4D7EA5; + color: #4D7EA5; +} + +h3, h4, h5, h6 { + color: #EE9C4F; +} - /* 4.3 Draft Warning */ .coverpage-warning { border-top: solid 1px #f36f36; border-bottom: solid 1px #f36f36; margin: 1em 2em; - color: #485094; + color: #00549f; padding: 1em; } .coverpage-warning .title { color: #f36f36; @@ -890,11 +927,11 @@ font-size: 0.8em; text-align: left; } - .copyright .name, .copyright .address {color: #485094;} + .copyright .name, .copyright .address {color: #00549f;} /* 5.0 Other styles @@ -914,11 +951,11 @@ right: 30px; z-index: 99; font-size: 12px; border: none; outline: none; - background-color: #1d1d1d; + background-color: #4D7EA5; opacity: 0.15; color: white; cursor: pointer; padding: 10px 15px 10px 15px; border-radius: 4px; @@ -931,5 +968,73 @@ a.anchorjs-link:hover { background: none; color: #485094; box-shadow: none; } + +nav h1:hover a:after { + display: none; +} + +.document-stage-band p { + color: #EE9C4F!important; +} + +.document-type-band p { + color: #4D7EA5!important; +} + +@page { + margin: 1cm; +} + +@media print { + + .section-title, .document-info, nav { + page-break-before: always; + } + + .coverpage { + height: 23cm; + } + + .coverpage-doc-identity { + position: absolute; + bottom: 1cm; + } + + #toggle, .document-stage-band, + .document-type-band { + display: none; + } + + .container { + padding-left: 0; + } + + nav { + position: relative; + width: auto; + font-size: 0.9em; + overflow: auto; + padding: 0; + margin-right: 0; + background-color: white; + } + + #toc .toc-active a { + color: #4D7EA5; + } + + #toc .toc-active, #toc li:hover { + background: white; + box-shadow: none !important; } + + #toc li:hover a { + color: black; } + + + h1.toc-contents { + margin-top: 2em; } + +} +