doc: style fixes for the TOC

- Hide the scrollbar on the TOC on all browsers. It was never the intention for it to be visible with the scroll indication in place. A wrapper element with 20px padding was added to accommodate for hopefully all scrollbar widths as well as to avoid overflowing content. - Fixed the scroll indication gradient on Safari, which was caused by the wrong from-color, which now matches the to-color. - Fixed a issue in old IE where the TOC didn't render on the correct position through setting `left: 0` and `top: 0` on it. PR-URL: #4748 Reviewed-By: James M Snell <[email protected]>

Author: silverwind

doc/api_assets/style.css

@@ -370,18 +370,27 @@ span.type{
 width:234px;
 background:#333;
 position: fixed;
+left:0;
+top:0;
 height:100%;
+overflow: hidden;
+}
+
+#column2 .no-scrollbar{
 overflow-y: scroll;
+height:100%;
+width:100%;
+padding-right:20px;
 }
 
-#column2.interior:after{
+#column2 .no-scrollbar:after{
 content:'';
 position: fixed;
 bottom:0;
 left:0;
 width:234px;
 height:4em;
-background:linear-gradient(rgba(242,245,240,0),rgba(51,51,51,1));
+background:linear-gradient(rgba(51,51,51,0),rgba(51,51,51,1));
 pointer-events: none;
 }
 

doc/template.html

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