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>
This commit is contained in:
Roman Reiss
parent
1d79787e2e
commit
3add7a7b9c
@ -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:link,
|
||||
a:active {
|
||||
a, a:link, a:active {
|
||||
color: #80bd01;
|
||||
text-decoration: none;
|
||||
border-radius: 2px;
|
||||
padding: .1em .2em;
|
||||
margin: -.1em 0;
|
||||
margin: -.1em;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:focus {
|
||||
a:hover, a:focus {
|
||||
color: #fff;
|
||||
background-color: #80bd01;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
strong {
|
||||
@ -43,53 +54,70 @@ code a:hover {
|
||||
background: none;
|
||||
}
|
||||
|
||||
em code {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
min-height: 48px;
|
||||
background: #d2d2d2;
|
||||
background-clip: padding-box;
|
||||
border: 3px solid #fff;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
background: #888;
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
#changelog #gtoc {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#gtoc {
|
||||
font-size: 0.8em;
|
||||
font-size: .8em;
|
||||
}
|
||||
|
||||
#gtoc p {
|
||||
}
|
||||
|
||||
#gtoc a {
|
||||
}
|
||||
|
||||
#gtoc a:hover {
|
||||
}
|
||||
|
||||
.api_stability_0,
|
||||
.api_stability_1,
|
||||
.api_stability_2,
|
||||
.api_stability_3,
|
||||
.api_stability_4,
|
||||
.api_stability_5 {
|
||||
.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_1 *,
|
||||
.api_stability_2 *,
|
||||
.api_stability_3 *,
|
||||
.api_stability_4 *,
|
||||
.api_stability_5 * {
|
||||
.api_stability * {
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.api_stability_0 a,
|
||||
.api_stability_1 a,
|
||||
.api_stability_2 a,
|
||||
.api_stability_3 a,
|
||||
.api_stability_4 a,
|
||||
.api_stability_5 a {
|
||||
.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 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,
|
||||
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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
margin: 1.5em 0 0.5em;
|
||||
font-size: 1em;
|
||||
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;
|
||||
margin: 0.166666em -4.0em 1.0em 0em;
|
||||
background: #f2f2f2;
|
||||
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;
|
||||
}
|
||||
|
||||
#toc {
|
||||
margin: 0 0 1em 0;
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
|
||||
#toc ul a:hover,
|
||||
#toc ul a:focus {
|
||||
margin-top: .666em;
|
||||
}
|
||||
|
||||
#apicontent li {
|
||||
margin-bottom: 0.5em;
|
||||
margin-bottom: .5em;
|
||||
}
|
||||
|
||||
#apicontent li:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
p tt,
|
||||
p code,
|
||||
li code {
|
||||
font-size: 0.9em;
|
||||
p tt, p code, li code {
|
||||
font-size: .9em;
|
||||
color: #040404;
|
||||
background-color: #f0f0f0;
|
||||
padding: .1em .2em;
|
||||
background-color: #f2f2f2;
|
||||
border-radius: 2px;
|
||||
padding: .1em .3em;
|
||||
}
|
||||
|
||||
a code {
|
||||
color: inherit;
|
||||
background: inherit;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
span.type, a.type {
|
||||
font-size: 0.9em;
|
||||
padding: 0.2em 0.4em;
|
||||
.type {
|
||||
font-size: .9em;
|
||||
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;
|
||||
width: 234px;
|
||||
height: 4em;
|
||||
background: linear-gradient(rgba(51, 51, 51, 0), rgba(51, 51, 51, 1));
|
||||
pointer-events: none;
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
#column2 ul {
|
||||
list-style: none;
|
||||
margin-left: 0em;
|
||||
margin-top: 1.25em;
|
||||
margin: 1.25em 0;
|
||||
background: #333;
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 3em;
|
||||
}
|
||||
|
||||
#column2 ul li {
|
||||
padding-left: 1.4em;
|
||||
margin-bottom: 0.5em;
|
||||
padding-bottom: 0.5em;
|
||||
font-size: 0.8em;
|
||||
margin-bottom: .5em;
|
||||
padding-bottom: .5em;
|
||||
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:hover,
|
||||
#column2 ul li a.active, #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,
|
||||
#column2 ul li a:hover,
|
||||
#column2 ul li a:focus {
|
||||
#intro a:hover, #column2 ul li a:hover, #column2 ul li a:focus {
|
||||
color: #fff;
|
||||
background: none;
|
||||
}
|
||||
|
||||
span > .mark,
|
||||
span > .mark:visited {
|
||||
span > .mark, span > .mark:visited {
|
||||
font-size: 18px;
|
||||
color: #707070;
|
||||
position: absolute;
|
||||
@ -448,17 +432,17 @@ span > .mark:visited {
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
span > .mark:hover {
|
||||
color: #FE7110;
|
||||
span > .mark:hover, span > .mark:focus, span > .mark:active {
|
||||
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,
|
||||
td > *:last-child {
|
||||
th > *: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-right: 0.5em;
|
||||
padding-left: .5em;
|
||||
padding-right: .5em;
|
||||
width: auto;
|
||||
}
|
||||
pre {
|
||||
@ -495,8 +479,8 @@ td > *:last-child {
|
||||
}
|
||||
#column1.interior {
|
||||
margin-left: 0;
|
||||
padding-left: 0.5em;
|
||||
padding-right: 0.5em;
|
||||
padding-left: .5em;
|
||||
padding-right: .5em;
|
||||
width: auto;
|
||||
}
|
||||
pre {
|
||||
|
||||
@ -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">
|
||||
<a href="/" title="Go back to the home page">
|
||||
Node.js (1)
|
||||
</a>
|
||||
</div>
|
||||
__GTOC__
|
||||
<div id="intro" class="interior">
|
||||
<a href="/" title="Go back to the home page">
|
||||
Node.js (1)
|
||||
</a>
|
||||
</div>
|
||||
__GTOC__
|
||||
</div>
|
||||
|
||||
<div id="column1" data-id="__ID__" class="interior">
|
||||
|
||||
@ -186,8 +186,10 @@ function parseListItem(text) {
|
||||
}
|
||||
|
||||
function parseAPIHeader(text) {
|
||||
text = text.replace(/(.*:)\s(\d)([\s\S]*)/,
|
||||
'<pre class="api_stability_$2">$1 $2$3</pre>');
|
||||
text = text.replace(
|
||||
/(.*:)\s(\d)([\s\S]*)/,
|
||||
'<pre class="api_stability api_stability_$2">$1 $2$3</pre>'
|
||||
);
|
||||
return text;
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user