From cdf8f708cfa8819f2479d78e4f5ad0148f0418a7 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Mon, 23 Sep 2019 16:04:11 +0300 Subject: doc: implement minor CSS improvements * split selectors to one per line * remove units from 0 * use double colon pseudo selectors consistently * use `background-color` instead of the `background` shorthand since only the color is supposed to change * remove leading zeros from numbers * remove redundant values from shorthands * use lowercase hex for colors * use numeric values for `font-weight` PR-URL: https://github.com/nodejs/node/pull/29669 Reviewed-By: Benjamin Gruenbaum --- doc/api_assets/style.css | 196 +++++++++++++++++++++++++++++------------------ 1 file changed, 122 insertions(+), 74 deletions(-) (limited to 'doc') diff --git a/doc/api_assets/style.css b/doc/api_assets/style.css index bdef22b04f..4f1f5c9384 100644 --- a/doc/api_assets/style.css +++ b/doc/api_assets/style.css @@ -13,28 +13,38 @@ html { } body { - font-family: "Lato", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif; + font-family: Lato, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif; margin: 0; padding: 0; color: #333; - background: #fff; -} - -h1 { font-size: 2.5rem } -h2 { font-size: 2rem } -h3 { font-size: 1.75rem } -h4 { font-size: 1.5rem } -h5 { font-size: 1.25rem } -h6 { font-size: 1rem } - -h1, h2, h3, h4, h5, h6 { + background-color: #fff; +} + +h1 { font-size: 2.5rem; } +h2 { font-size: 2rem; } +h3 { font-size: 1.75rem; } +h4 { font-size: 1.5rem; } +h5 { font-size: 1.25rem; } +h6 { font-size: 1rem; } + +h1, +h2, +h3, +h4, +h5, +h6 { margin: 1.5rem 0 1rem; text-rendering: optimizeLegibility; font-weight: 700; position: relative; } -pre, tt, code, .pre, span.type, a.type { +pre, +tt, +code, +.pre, +span.type, +a.type { font-family: SFMono-Regular, Menlo, Consolas, "Liberation Mono", "Courier New", monospace; font-size: .9em; } @@ -43,14 +53,17 @@ pre, tt, code, .pre, span.type, a.type { position: relative; } -a, a:link, a:active { +a, +a:link, +a:active { color: #43853d; text-decoration: none; border-radius: 2px; padding: 1px 3px; } -a:hover, a:focus { +a:hover, +a:focus { color: #fff; background-color: #43853d; outline: none; @@ -61,7 +74,7 @@ strong { } code a:hover { - background: none; + background-color: transparent; } em code { @@ -86,8 +99,8 @@ em code { #gtoc > ul > li { display: inline; border-right: 1px #000 solid; - margin-right: 0.4rem; - padding-right: 0.4rem; + margin-right: .4rem; + padding-right: .4rem; } #gtoc > ul > li:last-child { @@ -114,8 +127,8 @@ li.version-picker a span { } ol.version-picker { - background: #fff; - border: 1px #43853d solid; + background-color: #fff; + border: 1px solid #43853d; border-radius: 0 0 2px 2px; display: none; list-style: none; @@ -151,39 +164,40 @@ ol.version-picker li:last-child a { } .api_stability { - color: white !important; - margin: 0 0 1rem 0; - font-family: "Lato", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif; + color: #fff !important; + margin: 0 0 1rem; padding: 1rem; line-height: 1.5; } .api_stability * { - color: white !important; + color: #fff !important; } .api_stability a { text-decoration: underline; } -.api_stability a:hover, .api_stability a:active, .api_stability a:focus { - background: rgba(255, 255, 255, .4); +.api_stability a:hover, +.api_stability a:active, +.api_stability a:focus { + background-color: rgba(255, 255, 255, .4); } .api_stability a code { - background: none; + background-color: transparent; } .api_stability_0 { - background-color: #D60027; + background-color: #d60027; } .api_stability_1 { - background-color: #EC5315; + background-color: #ec5315; } .api_stability_2 { - background-color: #4EBA0F; + background-color: #4eba0f; } .api_metadata { @@ -196,7 +210,7 @@ ol.version-picker li:last-child a { } .api_metadata span:last-child { - margin-right: 0px; + margin-right: 0; } ul.plain { @@ -209,7 +223,7 @@ abbr { p { text-rendering: optimizeLegibility; - margin: 0 0 1.125rem 0; + margin: 0 0 1.125rem; line-height: 1.5; } @@ -220,29 +234,41 @@ p { table { border-collapse: collapse; - margin: 0 0 1.5rem 0; + margin: 0 0 1.5rem; } -th, td { +th, +td { border: 1px solid #aaa; - padding: .75rem 1rem .75rem 1rem; + padding: .75rem 1rem; vertical-align: top; } th { - text-align:left; + text-align: left; } -ol, ul, dl { - margin: 0 0 .6rem 0; +ol, +ul, +dl { + margin: 0 0 .6rem; padding: 0; } -ol ul, ol ol, ol dl, ul ul, ul ol, ul dl, dl ul, dl ol, dl dl { +ol ul, +ol ol, +ol dl, +ul ul, +ul ol, +ul dl, +dl ul, +dl ol, +dl dl { margin-bottom: 0; } -ul, ol { +ul, +ol { margin-left: 2rem; } @@ -253,7 +279,7 @@ dl dt { dl dd { position: relative; - margin: 0 1rem 0; + margin: 0 1rem; } dd + dt.pre { @@ -278,7 +304,10 @@ h3 + h3 { margin: 0 0 .5rem; } -h2, h3, h4, h5 { +h2, +h3, +h4, +h5 { position: relative; padding-right: 40px; } @@ -288,26 +317,38 @@ h2, h3, h4, h5 { font-size: smaller; } -h1 span, h2 span, h3 span, h4 span { +h1 span, +h2 span, +h3 span, +h4 span { position: absolute; display: block; top: 0; right: 0; } -h1 span:hover, h2 span:hover, h3 span:hover, h4 span:hover { +h1 span:hover, +h2 span:hover, +h3 span:hover, +h4 span:hover { opacity: 1; } -h1 span a, h2 span a, h3 span a, h4 span a { +h1 span a, +h2 span a, +h3 span a, +h4 span a { color: #000; text-decoration: none; - font-weight: bold; + font-weight: 700; } -pre, tt, code { +pre, +tt, +code { line-height: 1.5rem; - margin: 0; padding: 0; + margin: 0; + padding: 0; } .pre { @@ -317,7 +358,7 @@ pre, tt, code { pre { padding: 1rem; vertical-align: top; - background: #f2f2f2; + background-color: #f2f2f2; margin: 1rem; overflow-x: auto; } @@ -341,18 +382,17 @@ code.pre { #intro a { color: #ddd; - font-weight: bold; + font-weight: 700; } hr { - background: none; + background-color: transparent; border: medium none; border-bottom: 1px solid #7a7a7a; - margin: 0 0 1rem 0; + margin: 0 0 1rem; } #toc h2 { - margin-top: 0; margin: 1.5rem 0; } @@ -361,7 +401,7 @@ hr { } #toc ul a { - text-decoration:none; + text-decoration: none; } #toc ul li { @@ -390,7 +430,8 @@ hr { margin-bottom: 0; } -tt, code { +tt, +code { color: #040404; background-color: #f2f2f2; border-radius: 2px; @@ -398,12 +439,12 @@ tt, code { } .api_stability code { - background: rgba(0, 0, 0, .1); + background-color: rgba(0, 0, 0, .1); } a code { color: inherit; - background: inherit; + background-color: inherit; padding: 0; } @@ -419,7 +460,7 @@ a code { #column2.interior { width: 234px; - background: #333; + background-color: #333; position: fixed; left: 0; top: 0; @@ -431,7 +472,7 @@ a code { #column2 ul { list-style: none; margin: .9rem 0 .5rem; - background: #333; + background-color: #333; } #column2 > :first-child { @@ -467,33 +508,40 @@ a code { border-radius: 0; } -#column2 ul li a.active, #column2 ul li a.active:hover, +#column2 ul li a.active, +#column2 ul li a.active:hover, #column2 ul li a.active:focus { color: #43853d; border-radius: 0; border-bottom: 1px solid #43853d; - background: none; + background-color: transparent; } -#intro a:hover, #intro a:focus, -#column2 ul li a:hover, #column2 ul li a:focus { +#intro a:hover, +#intro a:focus, +#column2 ul li a:hover, +#column2 ul li a:focus { color: #fff; - background: none; + background-color: transparent; } -span > .mark, span > .mark:visited { +span > .mark, +span > .mark:visited { color: #707070; position: absolute; - top: 0px; - right: 0px; + top: 0; + right: 0; } -span > .mark:hover, span > .mark:focus, span > .mark:active { +span > .mark:hover, +span > .mark:focus, +span > .mark:active { color: #43853d; - background: none; + background-color: transparent; } -th > *:last-child, td > *:last-child { +th > *:last-child, +td > *:last-child { margin-bottom: 0; } @@ -504,7 +552,7 @@ th > *:last-child, td > *:last-child { } /* simpler clearfix */ -.clearfix:after { +.clearfix::after { content: "."; display: block; height: 0; @@ -536,14 +584,14 @@ th > *:last-child, td > *:last-child { @media print { html { height: auto; - font-size: 0.75em; + font-size: .75em; } #column2.interior { display: none; } #column1.interior { - margin-left: 0px; - padding: 0px; + margin-left: 0; + padding: 0; overflow-y: auto; } .api_metadata, -- cgit v1.2.3