doc: improve scrolling, various CSS tweaks

- Made scrolling of the sidebar not affect the main page by using a combination
  of overflow:hidden and overflow:scroll.
- Changed the scrollbar of the sidebar to be visible again for accessibilty
  reasons and removed the indication gradient because it was causing too much
  issues.
- In WebKit-based browsers, the scrollbar received custom styling making it
  appear to be outside of the sidebar.
- The main content is no longer limited to 702px width, but now uses all
  available space.
- Changed the background of the code blocks to a very similar, but neutral
  color and made inline blocks the same color.
- Made inline code blocks inside italic sections not italic.
- Simplified styling of api_stability classes by introducing a common class
  name for the stability levels.
- Fixed various issues related to the green hover background on links.
- Fixed code box overflow outside the main content area.
- Various minor tweaks to paddings and margins.
- Cleaned up numbers in the stylesheet, removing unnecessary units, decimals
  and empty selectors.

PR-URL: https://github.com/nodejs/node/pull/5198
Reviewed-By: James M Snell <jasnell@gmail.com>

doc/api_assets/style.css

@@ -4,6 +4,8 @@ html {
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-variant-ligatures: none;
           font-variant-ligatures: none;
+  height: 100%;
+  overflow: hidden;
 }
 
 body {
@@ -13,26 +15,35 @@ body {
   padding: 0;
   color: #333;
   background: #fff;
+  overflow: hidden;
+  height: 100%;
+  display: block;
+}
+
+pre, tt, code, .pre, span.type, a.type {
+  font-family: Monaco, Consolas, "Lucida Console", monospace;
 }
 
 #content {
   font-size: 1.8em;
+  overflow: hidden;
+  display: block;
+  position: relative;
+  height: 100%;
 }
 
-a,
+a, a:link, a:active {
-a:link,
-a:active {
   color: #80bd01;
   text-decoration: none;
   border-radius: 2px;
   padding: .1em .2em;
-  margin: -.1em 0;
+  margin: -.1em;
 }
 
-a:hover,
+a:hover, a:focus {
-a:focus {
   color: #fff;
   background-color: #80bd01;
+  outline: none;
 }
 
 strong {
@@ -43,53 +54,70 @@ code a:hover {
   background: none;
 }
 
-#changelog #gtoc {
+em code {
+  font-style: normal;
+}
+
+::-webkit-scrollbar {
+  -webkit-appearance: none;
+}
+
+::-webkit-scrollbar-button {
   display: none;
 }
 
-#gtoc {
+::-webkit-scrollbar-track {
-  font-size: 0.8em;
+  background: #fff;
 }
 
-#gtoc p {
+::-webkit-scrollbar-thumb {
+  min-height: 48px;
+  background: #d2d2d2;
+  background-clip: padding-box;
+  border: 3px solid #fff;
+  border-radius: 5px;
 }
 
-#gtoc a {
+::-webkit-scrollbar-thumb:active {
+  background: #888;
+  border-width: 2px;
 }
 
-#gtoc a:hover {
+::-webkit-scrollbar {
+  width: 10px;
 }
 
-.api_stability_0,
+#changelog #gtoc {
-.api_stability_1,
+  display: none;
-.api_stability_2,
+}
-.api_stability_3,
+
-.api_stability_4,
+#gtoc {
-.api_stability_5 {
+  font-size: .8em;
+}
+
+.api_stability {
   color: white !important;
-  margin: 0em 0 1.0em 0;
+  margin: 0 0 1em 0;
   font-family: "Lato", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif;
   font-weight: 700;
 }
 
-.api_stability_0 *,
+.api_stability * {
-.api_stability_1 *,
-.api_stability_2 *,
-.api_stability_3 *,
-.api_stability_4 *,
-.api_stability_5 * {
   color: white !important;
 }
 
-.api_stability_0 a,
+.api_stability a {
-.api_stability_1 a,
-.api_stability_2 a,
-.api_stability_3 a,
-.api_stability_4 a,
-.api_stability_5 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 code {
+  background: none;
+}
+
 .api_stability_0 {
   background-color: #D60027;
 }
@@ -123,7 +151,7 @@ p {
 
 #apicontent > *:last-child {
   margin-bottom: 0;
-  padding-bottom: 2.0em;
+  padding-bottom: 2em;
 }
 
 table {
@@ -135,21 +163,16 @@ th, td {
   border: 1px solid #aaa;
 }
 
-table p {
-}
-
 th {
   text-align:left;
 }
 
 ol, ul, dl {
-  margin: 0 0 0.6em 0;
+  margin: 0 0 .6em 0;
   padding: 0;
 }
 
-ol ul, ol ol, ol dl,
+ol ul, ol ol, ol dl, ul ul, ul ol, ul dl, dl ul, dl ol, dl dl {
-ul ul, ul ol, ul dl,
-dl ul, dl ol, dl dl {
   margin-bottom: 0;
 }
 
@@ -175,16 +198,16 @@ h1, h2, h3, h4, h5, h6 {
   text-rendering: optimizeLegibility;
   font-weight: 700;
   position: relative;
-  margin-bottom: 0.5em;
+  margin-bottom: .5em;
 }
 
 header h1 {
-  line-height: 2.0em;
+  line-height: 2em;
   margin: 0;
 }
 
 #apicontent {
-  padding-top: 1.0em;
+  padding-top: 1em;
 }
 
 #toc + h1 {
@@ -194,20 +217,20 @@ header h1 {
 
 h2 {
   font-size: 1.5em;
-  margin: 1.0em 0 0.5em;
+  margin: 1em 0 .5em;
 }
 
 h2 + h2 {
-  margin: 0 0 0.5em;
+  margin: 0 0 .5em;
 }
 
 h3 {
-  font-size: 1.0em;
+  font-size: 1em;
-  margin: 1.5em 0 0.5em;
+  margin: 1.5em 0 .5em;
 }
 
 h3 + h3 {
-  margin: 0 0 0.5em;
+  margin: 0 0 .5em;
 }
 
 h2, h3, h4 {
@@ -227,7 +250,7 @@ h1 span:hover, h2 span:hover, h3 span:hover, h4 span:hover {
 }
 
 h1 span a, h2 span a, h3 span a, h4 span a {
-  font-size: 0.8em;
+  font-size: .8em;
   color: #000;
   text-decoration: none;
   font-weight: bold;
@@ -245,26 +268,24 @@ h6 {
 
 pre, tt, code {
   line-height: 1.5em;
-  font-family: Monaco, Consolas, "Lucida Console", monospace;
   margin: 0; padding: 0;
 }
 
 .pre {
-  font-family: Monaco, Consolas, "Lucida Console", monospace;
   line-height: 1.5em;
   font-size: 1.2em;
 }
 
 pre {
-  padding: 1.0em 1.5em;
+  padding: 1em;
   vertical-align: top;
-  background: #f2f5f0;
+  background: #f2f2f2;
-  margin: 0.166666em -4.0em 1.0em 0em;
+  margin: 1em;
   overflow-x: auto;
 }
 
 pre > code {
-  font-size: 0.8em;
+  font-size: .8em;
 }
 
 pre + h3 {
@@ -277,7 +298,7 @@ code.pre {
 
 #intro {
   margin-top: 1.25em;
-  margin-left: 1.0em;
+  margin-left: 1em;
 }
 
 #intro a {
@@ -290,128 +311,95 @@ hr {
   background: none;
   border: medium none;
   border-bottom: 1px solid #7a7a7a;
-  margin: 0em 0em 1em 0;
+  margin: 0 0 1em 0;
-}
-
-#toc {
 }
 
 #toc h2 {
   margin-top: 0;
-  font-size: 1.0em;
+  font-size: 1em;
   line-height: 0;
   margin: 1.5em 0;
 }
 
 #toc ul {
-  font-size: 0.8125em;
+  font-size: .8125em;
 }
 
-#toc ul ul { font-size: 1.0em; }
+#toc ul ul {
+  font-size: 1em;
+}
 
 #toc ul a {
   text-decoration:none;
 }
 
 #toc ul li {
-  margin-bottom: 0.6666em;
+  margin-bottom: .666em;
   list-style: square outside;
 }
 
 #toc li > ul {
-  margin-top: 0.6666em;
+  margin-top: .666em;
-}
-
-#toc ul a:hover,
-#toc ul a:focus {
 }
 
 #apicontent li {
-  margin-bottom: 0.5em;
+  margin-bottom: .5em;
 }
 
 #apicontent li:last-child {
   margin-bottom: 0;
 }
 
-p tt,
+p tt, p code, li code {
-p code,
+  font-size: .9em;
-li code {
-  font-size: 0.9em;
   color: #040404;
-  background-color: #f0f0f0;
+  background-color: #f2f2f2;
-  padding: .1em .2em;
   border-radius: 2px;
+  padding: .1em .3em;
 }
 
 a code {
   color: inherit;
   background: inherit;
+  padding: 0;
 }
 
-span.type, a.type {
+.type {
-  font-size: 0.9em;
+  font-size: .9em;
-  padding: 0.2em 0.4em;
   line-height: 1.5em;
-  font-family: Monaco, Consolas, "Lucida Console", monospace;
-  margin: 0;
-}
-
-#content {
-  margin: 0 auto;
-  overflow: visible;
-  clear: both;
-  display: block;
 }
 
 #column1.interior {
-  width: 702px;
   margin-left: 234px;
-  padding-left: 2.0em;
+  padding: 0 2em;
+  -webkit-padding-start: 1.5em;
+  height: 100%;
+  position: relative;
+  overflow-y: scroll;
 }
 
 #column2.interior {
   width: 234px;
   background: #333;
-  position: fixed;
+  position: absolute;
   left: 0;
   top: 0;
-  height: 100%;
-  overflow: hidden;
-}
-
-#column2 .no-scrollbar {
-  overflow-y: scroll;
-  height: 100%;
-  width: 100%;
-  padding-right: 20px;
-}
-
-#column2 .no-scrollbar:after {
-  content: '';
-  position: fixed;
   bottom: 0;
-  left: 0;
+  overflow-x: hidden;
-  width: 234px;
+  overflow-y: scroll;
-  height: 4em;
-  background: linear-gradient(rgba(51, 51, 51, 0), rgba(51, 51, 51, 1));
-  pointer-events: none;
 }
 
 #column2 ul {
   list-style: none;
-  margin-left: 0em;
+  margin: 1.25em 0;
-  margin-top: 1.25em;
   background: #333;
-  margin-bottom: 0;
-  padding-bottom: 3em;
 }
 
 #column2 ul li {
   padding-left: 1.4em;
-  margin-bottom: 0.5em;
+  margin-bottom: .5em;
-  padding-bottom: 0.5em;
+  padding-bottom: .5em;
-  font-size: 0.8em;
+  font-size: .8em;
 }
 
 #column2 ul li:last-child {
@@ -423,8 +411,7 @@ span.type, a.type {
   border-radius: 0;
 }
 
-#column2 ul li a.active,
+#column2 ul li a.active, #column2 ul li a.active:hover,
-#column2 ul li a.active:hover,
 #column2 ul li a.active:focus {
   color: #80bd01;
   border-radius: 0;
@@ -432,15 +419,12 @@ span.type, a.type {
   background: none;
 }
 
-#intro a:hover,
+#intro a:hover, #column2 ul li a:hover, #column2 ul li a:focus {
-#column2 ul li a:hover,
-#column2 ul li a:focus {
   color: #fff;
   background: none;
 }
 
-span > .mark,
+span > .mark, span > .mark:visited {
-span > .mark:visited {
   font-size: 18px;
   color: #707070;
   position: absolute;
@@ -448,17 +432,17 @@ span > .mark:visited {
   right: 0px;
 }
 
-span > .mark:hover {
+span > .mark:hover, span > .mark:focus, span > .mark:active {
-  color: #FE7110;
+  color: #80bd01;
+  background: none;
 }
 
 th, td {
-  padding: 0.75em 1.0em 0.75em 1.0em;
+  padding: .75em 1em .75em 1em;
   vertical-align: top;
 }
 
-th > *:last-child,
+th > *:last-child, td > *:last-child {
-td > *:last-child {
   margin-bottom: 0;
 }
 
@@ -477,8 +461,8 @@ td > *:last-child {
   }
   #column1.interior {
     margin-left: 0;
-    padding-left: 0.5em;
+    padding-left: .5em;
-    padding-right: 0.5em;
+    padding-right: .5em;
     width: auto;
   }
   pre {
@@ -495,8 +479,8 @@ td > *:last-child {
   }
   #column1.interior {
     margin-left: 0;
-    padding-left: 0.5em;
+    padding-left: .5em;
-    padding-right: 0.5em;
+    padding-right: .5em;
     width: auto;
   }
   pre {

doc/template.html

@@ -11,14 +11,12 @@
 <body class="alt apidoc" id="api-section-__FILENAME__">
   <div id="content" class="clearfix">
     <div id="column2" class="interior">
-      <div class="no-scrollbar">
+      <div id="intro" class="interior">
-        <div id="intro" class="interior">
+        <a href="/" title="Go back to the home page">
-          <a href="/" title="Go back to the home page">
+          Node.js (1)
-            Node.js (1)
+        </a>
-          </a>
-        </div>
-        __GTOC__
       </div>
+      __GTOC__
     </div>
 
     <div id="column1" data-id="__ID__" class="interior">

tools/doc/html.js

@@ -186,8 +186,10 @@ function parseListItem(text) {
 }
 
 function parseAPIHeader(text) {
-  text = text.replace(/(.*:)\s(\d)([\s\S]*)/,
+  text = text.replace(
-                      '<pre class="api_stability_$2">$1 $2$3</pre>');
+    /(.*:)\s(\d)([\s\S]*)/,
+    '<pre class="api_stability api_stability_$2">$1 $2$3</pre>'
+  );
   return text;
 }