//// Content// ._container { position: relative; z-index: var(--contentZ); height: 100%; margin-left: var(--sidebarWidth); pointer-events: none; @extend %border-box; @include mobile { margin-left: var(--sidebarMediumWidth); } ._sidebar-hidden & { margin-left: 0; } body:not(._native-scrollbars) & { -webkit-margin-end: -1px; }} ._content { position: relative; height: 100%; overflow-y: scroll; margin-left: .875rem; padding: 1.125rem 1.5rem 0; font-size: .875rem; pointer-events: auto; -webkit-overflow-scrolling: touch; @extend %border-box; ._sidebar-hidden &:before { content: ''; display: block; margin-top: var(--headerHeight); } ._text-justify-hyphenate & { text-align: justify; hyphens: auto; } ._overlay-scrollbars & { padding-left: .625rem; } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { margin-left: 0; } @supports (-ms-overflow-style: none) { margin-left: 0; } body:not(._native-scrollbars) & { -webkit-padding-start: .625rem; -webkit-padding-end: .75rem; }} %loading { content: 'Loading\2026'; position: absolute; top: 50%; left: 0; right: 0; line-height: 1; margin-top: -.6em; font-size: 4rem; font-weight: 300; letter-spacing: -.125rem; color: var(--loadingText); text-align: center; cursor: default;} ._content-loading:before { @extend %loading;} //// Splash screen// ._splash-title { color: var(--splashText); @extend %loading, %user-select-none;} //// Intro// ._intro { display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; -ms-flex-pack: center; justify-content: center; -ms-flex-align: center; align-items: center; min-height: calc(100vh - 2.375rem); ._sidebar-hidden & { min-height: calc(100vh - 2.375rem - var(--headerHeight)); }} ._intro-message { max-width: 37rem; margin: .5rem 0; padding: 1rem 1.25rem; @extend %note, %note-green;} ._intro-hide { float: right; line-height: 1.5rem; cursor: pointer;} ._intro-title { margin: 0 0 1rem; font-size: 1rem; line-height: 1.5rem;} ._intro-list { margin: 1rem 0; padding-left: 2.25rem;} ._intro-link { cursor: pointer; } //// Error// ._error { position: absolute; top: 50%; left: 0; right: 0; padding: 0 2rem; line-height: 1.5rem; text-align: center;} ._error-title { margin: -5.5rem 0 1rem; line-height: 2rem; font-size: 1.5rem;} ._error-text { margin: 0 0 1rem; color: var(--textColorLight);} ._error-links { font-size: 1rem; font-weight: var(--boldFontWeight);} ._error-link { padding: 0 .5rem; } //// Heading// ._lined-heading,%lined-heading { display: flex; align-items: center; > * { margin: 0 .3125rem; } &:after { content: ''; flex-grow: 1; height: 1px; margin-top: .25rem; margin-left: 1rem; background: var(--boxBorderLight); }} ._block-heading { @extend %block-heading; } ._heading-links { float: right; font-weight: normal; > a + a { margin-left: .25rem; }} //// Table of contents// ._toc { float: right; max-width: 15em; margin: .25rem 0 1.5rem 1.5rem; padding: .625rem 1rem; @extend %box; + h1, + ._lined-heading { margin-top: 0; }} ._toc-title { margin: 0 0 .5rem; font-size: inherit; font-weight: var(--boldFontWeight);} ._toc-list { margin: 0; padding: 0 1em 0 0; list-style: none;} ._toc-link { @extend %internal-link; } //// Static page// ._static { padding-bottom: 2em; > ._lined-heading:first-child { margin-top: 0; }} //// Credits table// ._credits { max-width: 100%;} //// Doc table// ._docs { width: 100%; margin-top: .25rem; line-height: 1.5rem; th, td { width: 1%; &:first-child { width: auto; } &:last-child { width: 12rem; } }} ._docs-name:before { float: left; margin: .25rem .5rem .25rem 0; @extend %doc-icon;} ._docs-size { text-align: right; > small { color: var(--textColorLight); }} ._docs-tools { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-align: center; align-items: center; line-height: 1.5rem; margin-top: -.5rem; input[type=checkbox] { vertical-align: top; margin: .25rem; }} ._docs-links { -ms-flex: 0 0 auto; flex: 0 0 auto; margin: .5rem 0; padding: .25rem 0; @extend %box; ._btn-link { vertical-align: top; padding: 0 .75rem; } ._btn-link:not(._show) { display: none; } ._btn-link._show ~ ._btn-link._show { border-left: 1px solid var(--boxBorder); }} //// News// ._content { ._news-row { position: relative; padding-left: 10em; font-size: .8125rem; color: var(--textColorLight); + ._news-row { margin-top: 1em; } } ._news-title { display: block; font-size: .875rem; color: var(--textColor); } ._news-date { position: absolute; top: 0; left: 0; font-size: .875rem; }} //// Keyboard shortcuts// ._shortcuts-title { width: 16rem; max-width: 40%; margin: 2rem 0 1rem; font-size: 1rem; text-align: right;} ._shortcuts-dl { margin: 1rem 0; } ._shortcuts-dt { float: left; clear: left; margin: 0 0 .75rem; width: 16rem; max-width: 40%; font-weight: normal; text-align: right;} ._shortcuts-dd { display: block; margin: 0 0 .75rem; padding: 1px 0 1px .75rem; overflow: hidden;} ._shortcut-code { display: inline-block; vertical-align: top; padding: 0 .5em; @extend %label;} //// Search aliases// ._aliases { display: flex; justify-content: space-between; > table { margin-top: 0; width: calc(50% - 0.5rem); }} //// Utilities// ._bold { font-weight: var(--boldFontWeight); }._note { @extend %note; }._note-green { @extend %note-green; }._label { @extend %label; }._code { @extend %code; }._highlight, ._highlight > td { background: var(--highlightBackground) !important; } ._table { width: 100%; }._mobile ._table { overflow-x: auto; } ._pre-heading { @extend %pre-heading; } ._pre-clip { display: none; position: absolute; top: 0; right: 0; opacity: .5; padding: .375rem; cursor: pointer; pre:hover > & { display: block; top: 0.1875rem; padding: 0; } &:hover { opacity: 1; } > svg { @extend %svg-icon; fill: var(--absolute); } &._pre-clip-success > svg, &._pre-clip-error > svg { display: none; } &._pre-clip-success:before { content: 'Copied'; } &._pre-clip-error:before { content: 'Error'; }} ._btn { display: inline-block; vertical-align: top; line-height: normal; white-space: nowrap; padding: .375rem .675rem; background-color: var(--boxBackground); border: 1px solid var(--boxBorder); border-radius: 3px; cursor: pointer; &:active { box-shadow: inset 0 1px 1px rgba(black, .05), inset 0 1px 4px var(--boxBorder); }} ._file-btn { position: relative; overflow: hidden; > input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; visibility: hidden; }} ._btn-link { line-height: inherit; color: var(--linkColor); text-decoration: var(--linkTextDecoration); &:hover { color: var(--linkColorHover); text-decoration: underline; }} ._reset-btn,._reset-btn:hover { color: var(--textColorRed);} ._github-btn { display: inline-block; vertical-align: text-top; margin-left: .25rem; background: inherit;}
//
// Content
//
._container {
position: relative;
z-index: var(--contentZ);
height: 100%;
margin-left: var(--sidebarWidth);
pointer-events: none;
@extend %border-box;
@include mobile { margin-left: var(--sidebarMediumWidth); }
._sidebar-hidden & { margin-left: 0; }
body:not(._native-scrollbars) & { -webkit-margin-end: -1px; }
}
._content {
position: relative;
height: 100%;
overflow-y: scroll;
margin-left: .875rem;
padding: 1.125rem 1.5rem 0;
font-size: .875rem;
pointer-events: auto;
-webkit-overflow-scrolling: touch;
@extend %border-box;
._sidebar-hidden &:before {
content: '';
display: block;
margin-top: var(--headerHeight);
}
._text-justify-hyphenate & {
text-align: justify;
hyphens: auto;
}
._overlay-scrollbars & { padding-left: .625rem; }
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { margin-left: 0; }
@supports (-ms-overflow-style: none) { margin-left: 0; }
body:not(._native-scrollbars) & {
-webkit-padding-start: .625rem;
-webkit-padding-end: .75rem;
}
}
%loading {
content: 'Loading\2026';
position: absolute;
top: 50%;
left: 0;
right: 0;
line-height: 1;
margin-top: -.6em;
font-size: 4rem;
font-weight: 300;
letter-spacing: -.125rem;
color: var(--loadingText);
text-align: center;
cursor: default;
}
._content-loading:before {
@extend %loading;
}
//
// Splash screen
//
._splash-title {
color: var(--splashText);
@extend %loading, %user-select-none;
}
//
// Intro
//
._intro {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
min-height: calc(100vh - 2.375rem);
._sidebar-hidden & {
min-height: calc(100vh - 2.375rem - var(--headerHeight));
}
}
._intro-message {
max-width: 37rem;
margin: .5rem 0;
padding: 1rem 1.25rem;
@extend %note, %note-green;
}
._intro-hide {
float: right;
line-height: 1.5rem;
cursor: pointer;
}
._intro-title {
margin: 0 0 1rem;
font-size: 1rem;
line-height: 1.5rem;
}
._intro-list {
margin: 1rem 0;
padding-left: 2.25rem;
}
._intro-link { cursor: pointer; }
//
// Error
//
._error {
position: absolute;
top: 50%;
left: 0;
right: 0;
padding: 0 2rem;
line-height: 1.5rem;
text-align: center;
}
._error-title {
margin: -5.5rem 0 1rem;
line-height: 2rem;
font-size: 1.5rem;
}
._error-text {
margin: 0 0 1rem;
color: var(--textColorLight);
}
._error-links {
font-size: 1rem;
font-weight: var(--boldFontWeight);
}
._error-link { padding: 0 .5rem; }
//
// Heading
//
._lined-heading,
%lined-heading {
display: flex;
align-items: center;
> * { margin: 0 .3125rem; }
&:after {
content: '';
flex-grow: 1;
height: 1px;
margin-top: .25rem;
margin-left: 1rem;
background: var(--boxBorderLight);
}
}
._block-heading { @extend %block-heading; }
._heading-links {
float: right;
font-weight: normal;
> a + a { margin-left: .25rem; }
}
//
// Table of contents
//
._toc {
float: right;
max-width: 15em;
margin: .25rem 0 1.5rem 1.5rem;
padding: .625rem 1rem;
@extend %box;
+ h1, + ._lined-heading { margin-top: 0; }
}
._toc-title {
margin: 0 0 .5rem;
font-size: inherit;
font-weight: var(--boldFontWeight);
}
._toc-list {
margin: 0;
padding: 0 1em 0 0;
list-style: none;
}
._toc-link { @extend %internal-link; }
//
// Static page
//
._static {
padding-bottom: 2em;
> ._lined-heading:first-child { margin-top: 0; }
}
//
// Credits table
//
._credits {
max-width: 100%;
}
//
// Doc table
//
._docs {
width: 100%;
margin-top: .25rem;
line-height: 1.5rem;
th, td {
width: 1%;
&:first-child { width: auto; }
&:last-child { width: 12rem; }
}
}
._docs-name:before {
float: left;
margin: .25rem .5rem .25rem 0;
@extend %doc-icon;
}
._docs-size {
text-align: right;
> small { color: var(--textColorLight); }
}
._docs-tools {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-align: center;
align-items: center;
line-height: 1.5rem;
margin-top: -.5rem;
input[type=checkbox] {
vertical-align: top;
margin: .25rem;
}
}
._docs-links {
-ms-flex: 0 0 auto;
flex: 0 0 auto;
margin: .5rem 0;
padding: .25rem 0;
@extend %box;
._btn-link {
vertical-align: top;
padding: 0 .75rem;
}
._btn-link:not(._show) { display: none; }
._btn-link._show ~ ._btn-link._show { border-left: 1px solid var(--boxBorder); }
}
//
// News
//
._content {
._news-row {
position: relative;
padding-left: 10em;
font-size: .8125rem;
color: var(--textColorLight);
+ ._news-row { margin-top: 1em; }
}
._news-title {
display: block;
font-size: .875rem;
color: var(--textColor);
}
._news-date {
position: absolute;
top: 0;
left: 0;
font-size: .875rem;
}
}
//
// Keyboard shortcuts
//
._shortcuts-title {
width: 16rem;
max-width: 40%;
margin: 2rem 0 1rem;
font-size: 1rem;
text-align: right;
}
._shortcuts-dl { margin: 1rem 0; }
._shortcuts-dt {
float: left;
clear: left;
margin: 0 0 .75rem;
width: 16rem;
max-width: 40%;
font-weight: normal;
text-align: right;
}
._shortcuts-dd {
display: block;
margin: 0 0 .75rem;
padding: 1px 0 1px .75rem;
overflow: hidden;
}
._shortcut-code {
display: inline-block;
vertical-align: top;
padding: 0 .5em;
@extend %label;
}
//
// Search aliases
//
._aliases {
display: flex;
justify-content: space-between;
> table {
margin-top: 0;
width: calc(50% - 0.5rem);
}
}
//
// Utilities
//
._bold { font-weight: var(--boldFontWeight); }
._note { @extend %note; }
._note-green { @extend %note-green; }
._label { @extend %label; }
._code { @extend %code; }
._highlight, ._highlight > td { background: var(--highlightBackground) !important; }
._table { width: 100%; }
._mobile ._table { overflow-x: auto; }
._pre-heading { @extend %pre-heading; }
._pre-clip {
display: none;
position: absolute;
top: 0;
right: 0;
opacity: .5;
padding: .375rem;
cursor: pointer;
pre:hover > & {
display: block;
top: 0.1875rem;
padding: 0;
}
&:hover { opacity: 1; }
> svg {
@extend %svg-icon;
fill: var(--absolute);
}
&._pre-clip-success > svg,
&._pre-clip-error > svg {
display: none;
}
&._pre-clip-success:before { content: 'Copied'; }
&._pre-clip-error:before { content: 'Error'; }
}
._btn {
display: inline-block;
vertical-align: top;
line-height: normal;
white-space: nowrap;
padding: .375rem .675rem;
background-color: var(--boxBackground);
border: 1px solid var(--boxBorder);
border-radius: 3px;
cursor: pointer;
&:active {
box-shadow: inset 0 1px 1px rgba(black, .05), inset 0 1px 4px var(--boxBorder);
}
}
._file-btn {
position: relative;
overflow: hidden;
> input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
visibility: hidden;
}
}
._btn-link {
line-height: inherit;
color: var(--linkColor);
text-decoration: var(--linkTextDecoration);
&:hover {
color: var(--linkColorHover);
text-decoration: underline;
}
}
._reset-btn,
._reset-btn:hover {
color: var(--textColorRed);
}
._github-btn {
display: inline-block;
vertical-align: text-top;
margin-left: .25rem;
background: inherit;
}