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 <benjamingr@gmail.com>

1 files changed, 122 insertions, 74 deletions

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,