html { height: 100%; font-size: 100%; background: #fff; // fallback to show the error message to browsers that don't support CSS variables. background: var(--documentBackground); @include mobile { font-size: 93.75%; } @include print { background: none; } @import 'global/print';} html._theme-default { color-scheme: light only;}html._theme-dark { color-scheme: dark only;} body { height: 100%; margin: 0; overflow: auto; font-size: 1em; font-weight: normal; font-family: $baseFont; line-height: 1.7; color: $textColor; // fallback to show the error message to browsers that don't support CSS variables. color: var(--textColor); word-wrap: break-word; overflow-wrap: break-word; background: var(--contentBackground); touch-action: manipulation; -webkit-tap-highlight-color: rgba(black, 0); -webkit-touch-callout: none; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;} a { color: var(--linkColor); text-decoration: var(--linkTextDecoration); &:hover { color: var(--linkColorHover); text-decoration: underline; }} img { max-width: 100%; height: auto; border: 0;} h1, h2, h3, h4, h5, h6 { margin: 1.5em 0 1em; line-height: 1.3; font-weight: var(--bolderFontWeight);} h1 { font-size: 1.5em; }h2 { font-size: 1.375em; }h3 { font-size: 1.25em; }h4 { font-size: 1.125em; }h5, h6 { font-size: 1em; } p { margin: 0 0 1em; }p:last-child { margin-bottom: 0; } b, strong { font-weight: var(--boldFontWeight); } small { font-size: .9em; } ul, ol { margin: 1.5em 0; padding: 0 0 0 2em; list-style: disc outside;} ul ul { list-style-type: circle; }ol { list-style-type: decimal; }ol ol { list-style-type: lower-alpha; }ol ol ol { list-style-type: lower-roman; } li + li { margin-top: .25em; }li > ul, li > ol, dd > ul, dd > ol { margin: .5em 0; }li > p { margin-bottom: .25em; } dl { margin: 1.5em 0; }dt { font-weight: var(--boldFontWeight); }dd { margin: .375em; padding-left: 1em; + dt { margin-top: 1em; }} abbr, acronym, dfn { cursor: help; border-bottom: 1px dotted var(--textColor);} pre, code, samp, %pre, %code { font-family: var(--monoFont); font-weight: normal; font-style: normal; font-size: .9em; color: var(--textColor); white-space: pre-wrap; direction: ltr; -moz-tab-size: 2; -o-tab-size: 2; tab-size: 2;} pre, %pre { position: relative; margin: 1.5em 0; padding: .375rem .625rem; line-height: 1.5; overflow: auto; @extend %box;} a > code { color: inherit; } table { margin: 1.5em 0; background: none; border: 1px solid var(--boxBorder); border-collapse: separate; border-spacing: 0; border-radius: 3px; display: inline-block; overflow-x: auto; max-width: 100%;} caption { font-weight: var(--boldFontWeight); padding: 0 .7em .3em;} th, td { vertical-align: top; padding: .3em .7em; padding-bottom: -webkit-calc(.3em + 1px); padding-bottom: calc(.3em + 1px); text-align: left; white-space: normal !important;} th { font-weight: var(--boldFontWeight); border: 0; border-bottom: 1px solid var(--boxBorder); border-radius: 0; @extend %heading-box; &:empty { background: none; } + th, + td { border-left: 1px solid var(--boxBorder); } tr:first-child > &:first-child { border-top-left-radius: 3px; } tr:first-child > &:last-child { border-top-right-radius: 3px; } tr:last-child > &:first-child { border-bottom-left-radius: 3px; } thead > tr:last-child > &:first-child { border-bottom-left-radius: 0; } tr:last-child > & { border-bottom-width: 0; } thead > tr:last-child > & { border-bottom-width: 1px; }} td { background: var(--contentBackground); border-bottom: 1px solid var(--boxBorderLight); + td { border-left: 1px solid var(--boxBorderLight); } tr:last-child > & { border-bottom: 0; } > pre:only-child, > p:only-child, > ul:only-child, > ol:only-child { margin-top: 0; margin-bottom: 0; } > pre:first-child, > p:first-child, > ul:first-child, > ol:first-child { margin-top: 0; } > pre:last-child, > p:last-child, > ul:last-child, > ol:last-child { margin-bottom: 0; }} section, main { display: block; outline: 0;} label { display: block; @extend %user-select-none;} input, button { display: inline-block; margin: 0; font-family: inherit; font-size: 100%; color: var(--textColor); line-height: normal; @extend %border-box;} input[type=checkbox] { width: 1rem; height: 1rem; cursor: pointer;} button { padding: 0; background: none; border: 0; cursor: pointer;} button, input[type="search"] { -webkit-appearance: none; appearance: none;} button:focus { outline: 1px dotted; outline: -webkit-focus-ring-color auto 5px;} img, iframe { background: var(--externalsBackground);} input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration { -webkit-appearance: none;} ::-ms-clear { display: none; } ::-moz-focus-inner { padding: 0 !important; border: 0 !important;} ::-webkit-input-placeholder { color: var(--textColorLighter); }::-moz-placeholder { color: var(--textColorLighter); opacity: 1; }:-ms-input-placeholder { color: var(--textColorLighter); } body:not(._native-scrollbars) { *::-webkit-scrollbar { -webkit-appearance: none; } *::-webkit-scrollbar:vertical { width: 16px; } *::-webkit-scrollbar:horizontal { height: 16px; } *::-webkit-scrollbar-button, *::-webkit-scrollbar-corner { display: none; } *::-webkit-scrollbar-track { background: var(--contentBackground); border: 1px solid var(--contentBackground); &:hover { background: var(--sidebarBackground); border-color: var(--sidebarBorder); } &:vertical { border-width: 0 0 0 1px; } &:vertical:corner-present { border-width: 0 0 1px 1px; border-radius: 0 0 0 2px; } &:horizontal { border-width: 1px 1px 0 1px; border-radius: 2px 2px 0 0; } } *::-webkit-scrollbar-thumb { min-height: 2rem; background: var(--scrollbarColor); background-clip: padding-box; border: 5px solid rgba(black, 0); border-radius: 10px; &:hover, &:active { background-color: var(--scrollbarColorHover); border-width: 4px; } }}
html {
height: 100%;
font-size: 100%;
background: #fff; // fallback to show the error message to browsers that don't support CSS variables.
background: var(--documentBackground);
@include mobile { font-size: 93.75%; }
@include print { background: none; }
@import 'global/print';
}
html._theme-default {
color-scheme: light only;
}
html._theme-dark {
color-scheme: dark only;
}
body {
height: 100%;
margin: 0;
overflow: auto;
font-size: 1em;
font-weight: normal;
font-family: $baseFont;
line-height: 1.7;
color: $textColor; // fallback to show the error message to browsers that don't support CSS variables.
color: var(--textColor);
word-wrap: break-word;
overflow-wrap: break-word;
background: var(--contentBackground);
touch-action: manipulation;
-webkit-tap-highlight-color: rgba(black, 0);
-webkit-touch-callout: none;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
a {
color: var(--linkColor);
text-decoration: var(--linkTextDecoration);
&:hover {
color: var(--linkColorHover);
text-decoration: underline;
}
}
img {
max-width: 100%;
height: auto;
border: 0;
}
h1, h2, h3, h4, h5, h6 {
margin: 1.5em 0 1em;
line-height: 1.3;
font-weight: var(--bolderFontWeight);
}
h1 { font-size: 1.5em; }
h2 { font-size: 1.375em; }
h3 { font-size: 1.25em; }
h4 { font-size: 1.125em; }
h5, h6 { font-size: 1em; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
b, strong { font-weight: var(--boldFontWeight); }
small { font-size: .9em; }
ul, ol {
margin: 1.5em 0;
padding: 0 0 0 2em;
list-style: disc outside;
}
ul ul { list-style-type: circle; }
ol { list-style-type: decimal; }
ol ol { list-style-type: lower-alpha; }
ol ol ol { list-style-type: lower-roman; }
li + li { margin-top: .25em; }
li > ul, li > ol, dd > ul, dd > ol { margin: .5em 0; }
li > p { margin-bottom: .25em; }
dl { margin: 1.5em 0; }
dt { font-weight: var(--boldFontWeight); }
dd {
margin: .375em;
padding-left: 1em;
+ dt { margin-top: 1em; }
}
abbr, acronym, dfn {
cursor: help;
border-bottom: 1px dotted var(--textColor);
}
pre, code, samp, %pre, %code {
font-family: var(--monoFont);
font-weight: normal;
font-style: normal;
font-size: .9em;
color: var(--textColor);
white-space: pre-wrap;
direction: ltr;
-moz-tab-size: 2;
-o-tab-size: 2;
tab-size: 2;
}
pre, %pre {
position: relative;
margin: 1.5em 0;
padding: .375rem .625rem;
line-height: 1.5;
overflow: auto;
@extend %box;
}
a > code { color: inherit; }
table {
margin: 1.5em 0;
background: none;
border: 1px solid var(--boxBorder);
border-collapse: separate;
border-spacing: 0;
border-radius: 3px;
display: inline-block;
overflow-x: auto;
max-width: 100%;
}
caption {
font-weight: var(--boldFontWeight);
padding: 0 .7em .3em;
}
th, td {
vertical-align: top;
padding: .3em .7em;
padding-bottom: -webkit-calc(.3em + 1px);
padding-bottom: calc(.3em + 1px);
text-align: left;
white-space: normal !important;
}
th {
font-weight: var(--boldFontWeight);
border: 0;
border-bottom: 1px solid var(--boxBorder);
border-radius: 0;
@extend %heading-box;
&:empty { background: none; }
+ th, + td { border-left: 1px solid var(--boxBorder); }
tr:first-child > &:first-child { border-top-left-radius: 3px; }
tr:first-child > &:last-child { border-top-right-radius: 3px; }
tr:last-child > &:first-child { border-bottom-left-radius: 3px; }
thead > tr:last-child > &:first-child { border-bottom-left-radius: 0; }
tr:last-child > & { border-bottom-width: 0; }
thead > tr:last-child > & { border-bottom-width: 1px; }
}
td {
background: var(--contentBackground);
border-bottom: 1px solid var(--boxBorderLight);
+ td { border-left: 1px solid var(--boxBorderLight); }
tr:last-child > & { border-bottom: 0; }
> pre:only-child, > p:only-child, > ul:only-child, > ol:only-child {
margin-top: 0;
margin-bottom: 0;
}
> pre:first-child, > p:first-child, > ul:first-child, > ol:first-child { margin-top: 0; }
> pre:last-child, > p:last-child, > ul:last-child, > ol:last-child { margin-bottom: 0; }
}
section, main {
display: block;
outline: 0;
}
label {
display: block;
@extend %user-select-none;
}
input, button {
display: inline-block;
margin: 0;
font-family: inherit;
font-size: 100%;
color: var(--textColor);
line-height: normal;
@extend %border-box;
}
input[type=checkbox] {
width: 1rem;
height: 1rem;
cursor: pointer;
}
button {
padding: 0;
background: none;
border: 0;
cursor: pointer;
}
button, input[type="search"] {
-webkit-appearance: none;
appearance: none;
}
button:focus {
outline: 1px dotted;
outline: -webkit-focus-ring-color auto 5px;
}
img, iframe {
background: var(--externalsBackground);
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
::-ms-clear { display: none; }
::-moz-focus-inner {
padding: 0 !important;
border: 0 !important;
}
::-webkit-input-placeholder { color: var(--textColorLighter); }
::-moz-placeholder { color: var(--textColorLighter); opacity: 1; }
:-ms-input-placeholder { color: var(--textColorLighter); }
body:not(._native-scrollbars) {
*::-webkit-scrollbar { -webkit-appearance: none; }
*::-webkit-scrollbar:vertical { width: 16px; }
*::-webkit-scrollbar:horizontal { height: 16px; }
*::-webkit-scrollbar-button,
*::-webkit-scrollbar-corner { display: none; }
*::-webkit-scrollbar-track {
background: var(--contentBackground);
border: 1px solid var(--contentBackground);
&:hover {
background: var(--sidebarBackground);
border-color: var(--sidebarBorder);
}
&:vertical { border-width: 0 0 0 1px; }
&:vertical:corner-present {
border-width: 0 0 1px 1px;
border-radius: 0 0 0 2px;
}
&:horizontal {
border-width: 1px 1px 0 1px;
border-radius: 2px 2px 0 0;
}
}
*::-webkit-scrollbar-thumb {
min-height: 2rem;
background: var(--scrollbarColor);
background-clip: padding-box;
border: 5px solid rgba(black, 0);
border-radius: 10px;
&:hover,
&:active {
background-color: var(--scrollbarColorHover);
border-width: 4px;
}
}
}