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: https://github.com/nodejs/node/pull/4748 Reviewed-By: James M Snell <jasnell@gmail.com>
9 years ago · 55607a0f32
2 changed files with 18 additions and 7 deletions
--- a/doc/api_assets/style.css
+++ b/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;
 }

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

    <div id="column1" data-id="__ID__" class="interior">