Simplify CSS theming by setting CSS variables
This commit is contained in:
Guillaume Gomez
parent
a518b3a62c
commit
7f6ce7dddd
4 changed files with 73 additions and 199 deletions
|
|
@ -114,6 +114,9 @@ body {
|
|||
-webkit-font-feature-settings: "kern", "liga";
|
||||
-moz-font-feature-settings: "kern", "liga";
|
||||
font-feature-settings: "kern", "liga";
|
||||
|
||||
background-color: var(--main-background-color);
|
||||
color: var(--main-color);
|
||||
}
|
||||
|
||||
h1 {
|
||||
|
|
@ -214,6 +217,26 @@ a.srclink,
|
|||
font-family: "Fira Sans", Arial, NanumBarunGothic, sans-serif;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4,
|
||||
a#toggle-all-docs,
|
||||
a.anchor,
|
||||
.small-section-header a,
|
||||
#source-sidebar a,
|
||||
pre.rust a,
|
||||
.sidebar h2 a,
|
||||
.sidebar h3 a,
|
||||
.mobile-topbar h2 a,
|
||||
.in-band a,
|
||||
.search-results a,
|
||||
.module-item .stab,
|
||||
.import-item .stab,
|
||||
.result-name .primitive > i, .result-name .keyword > i,
|
||||
.content .method .where,
|
||||
.content .fn .where,
|
||||
.content .where.fmt-newline {
|
||||
color: var(--main-color);
|
||||
}
|
||||
|
||||
ol, ul {
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
|
@ -391,6 +414,14 @@ nav.sub {
|
|||
display: none;
|
||||
}
|
||||
|
||||
.source .sidebar, #sidebar-toggle, #source-sidebar {
|
||||
background-color: var(--sidebar-background-color);
|
||||
}
|
||||
|
||||
#sidebar-toggle:hover {
|
||||
background-color: var(--sidebar-background-color-hover);
|
||||
}
|
||||
|
||||
.source .sidebar > *:not(#sidebar-toggle) {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
|
|
@ -1003,6 +1034,11 @@ table,
|
|||
top: -5px;
|
||||
}
|
||||
|
||||
.popover, .popover::before {
|
||||
background-color: var(--main-background-color);
|
||||
color: var(--main-color);
|
||||
}
|
||||
|
||||
#help-button .popover {
|
||||
max-width: 600px;
|
||||
}
|
||||
|
|
@ -1423,6 +1459,25 @@ pre.rust {
|
|||
animation: rotating 2s linear infinite;
|
||||
}
|
||||
|
||||
.setting-line .radio-line input:checked {
|
||||
box-shadow: inset 0 0 0 3px var(--main-background-color);
|
||||
background-color: var(--settings-input-color);
|
||||
}
|
||||
.setting-line .radio-line input:focus {
|
||||
box-shadow: 0 0 1px 1px var(--settings-input-color);
|
||||
}
|
||||
/* In here we combine both `:focus` and `:checked` properties. */
|
||||
.setting-line .radio-line input:checked:focus {
|
||||
box-shadow: inset 0 0 0 3px var(--main-background-color),
|
||||
0 0 2px 2px var(--settings-input-color);
|
||||
}
|
||||
.setting-line .radio-line input:hover {
|
||||
border-color: var(--settings-input-color) !important;
|
||||
}
|
||||
input:checked + .slider {
|
||||
background-color: var(--settings-input-color);
|
||||
}
|
||||
|
||||
#help-button > button {
|
||||
font-family: "Fira Sans", Arial, sans-serif;
|
||||
text-align: center;
|
||||
|
|
|
|||
|
|
@ -3,30 +3,12 @@ Based off of the Ayu theme
|
|||
Original by Dempfi (https://github.com/dempfi/ayu)
|
||||
*/
|
||||
|
||||
/* General structure and fonts */
|
||||
|
||||
body, .popover, .popover::before {
|
||||
background-color: #0f1419;
|
||||
color: #c5c5c5;
|
||||
}
|
||||
|
||||
.setting-line .radio-line input {
|
||||
border-color: #c5c5c5;
|
||||
}
|
||||
.setting-line .radio-line input:checked {
|
||||
box-shadow: inset 0 0 0 3px #0f1419;
|
||||
background-color: #ffb454;
|
||||
}
|
||||
.setting-line .radio-line input:focus {
|
||||
box-shadow: 0 0 1px 1px #ffb454;
|
||||
}
|
||||
/* In here we combine both `:focus` and `:checked` properties. */
|
||||
.setting-line .radio-line input:checked:focus {
|
||||
box-shadow: inset 0 0 0 3px 0f1419,
|
||||
0 0 2px 2px #ffb454;
|
||||
}
|
||||
.setting-line .radio-line input:hover {
|
||||
border-color: #ffb454 !important;
|
||||
:root {
|
||||
--main-background-color: #0f1419;
|
||||
--main-color: #c5c5c5;
|
||||
--settings-input-color: #ffb454;
|
||||
--sidebar-background-color: #14191f;
|
||||
--sidebar-background-color-hover: rgba(70, 70, 70, 0.33);
|
||||
}
|
||||
|
||||
.slider {
|
||||
|
|
@ -35,9 +17,6 @@ body, .popover, .popover::before {
|
|||
.slider:before {
|
||||
background-color: white;
|
||||
}
|
||||
input:checked + .slider {
|
||||
background-color: #ffb454;
|
||||
}
|
||||
input:focus + .slider {
|
||||
box-shadow: 0 0 0 2px #0a84ff, 0 0 0 6px rgba(10, 132, 255, 0.3);
|
||||
}
|
||||
|
|
@ -125,10 +104,6 @@ pre, .rustdoc.source .example-wrap {
|
|||
color: #ffb44c;
|
||||
}
|
||||
|
||||
.source .sidebar {
|
||||
background-color: #14191f;
|
||||
}
|
||||
|
||||
.sidebar-elems .location {
|
||||
color: #ff7733;
|
||||
}
|
||||
|
|
@ -149,12 +124,6 @@ pre, .rustdoc.source .example-wrap {
|
|||
border-color: #5c6773;
|
||||
}
|
||||
|
||||
.content .method .where,
|
||||
.content .fn .where,
|
||||
.content .where.fmt-newline {
|
||||
color: #c5c5c5;
|
||||
}
|
||||
|
||||
.search-results a:hover {
|
||||
background-color: #777;
|
||||
}
|
||||
|
|
@ -229,17 +198,6 @@ a {
|
|||
color: #39AFD7;
|
||||
}
|
||||
|
||||
a#toggle-all-docs,
|
||||
a.anchor,
|
||||
.small-section-header a,
|
||||
#source-sidebar a,
|
||||
pre.rust a,
|
||||
.sidebar h2 a,
|
||||
.sidebar h3 a,
|
||||
.mobile-topbar h2 a,
|
||||
.in-band a {
|
||||
color: #c5c5c5;
|
||||
}
|
||||
.sidebar h2 a,
|
||||
.sidebar h3 a {
|
||||
color: white;
|
||||
|
|
@ -613,15 +571,6 @@ kbd {
|
|||
color: #999;
|
||||
}
|
||||
|
||||
#sidebar-toggle {
|
||||
background-color: #14191f;
|
||||
}
|
||||
#sidebar-toggle:hover {
|
||||
background-color: rgba(70, 70, 70, 0.33);
|
||||
}
|
||||
#source-sidebar {
|
||||
background-color: #14191f;
|
||||
}
|
||||
#source-sidebar > .title {
|
||||
color: #fff;
|
||||
border-bottom-color: #5c6773;
|
||||
|
|
|
|||
|
|
@ -1,25 +1,9 @@
|
|||
body, .popover, .popover::before {
|
||||
background-color: #353535;
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
.setting-line .radio-line input {
|
||||
border-color: #ddd;
|
||||
}
|
||||
.setting-line .radio-line input:checked {
|
||||
box-shadow: inset 0 0 0 3px #353535;
|
||||
background-color: #2196f3;
|
||||
}
|
||||
.setting-line .radio-line input:focus {
|
||||
box-shadow: 0 0 1px 1px #2196f3;
|
||||
}
|
||||
/* In here we combine both `:focus` and `:checked` properties. */
|
||||
.setting-line .radio-line input:checked:focus {
|
||||
box-shadow: inset 0 0 0 3px #353535,
|
||||
0 0 2px 2px #2196f3;
|
||||
}
|
||||
.setting-line .radio-line input:hover {
|
||||
border-color: #2196f3 !important;
|
||||
:root {
|
||||
--main-background-color: #353535;
|
||||
--main-color: #ddd;
|
||||
--settings-input-color: #2196f3;
|
||||
--sidebar-background-color: #565656;
|
||||
--sidebar-background-color-hover: #676767;
|
||||
}
|
||||
|
||||
.slider {
|
||||
|
|
@ -28,16 +12,10 @@ body, .popover, .popover::before {
|
|||
.slider:before {
|
||||
background-color: white;
|
||||
}
|
||||
input:checked + .slider {
|
||||
background-color: #2196F3;
|
||||
}
|
||||
input:focus + .slider {
|
||||
box-shadow: 0 0 0 2px #0a84ff, 0 0 0 6px rgba(10, 132, 255, 0.3);
|
||||
}
|
||||
|
||||
h1, h2, h3, h4 {
|
||||
color: #ddd;
|
||||
}
|
||||
h1.fqn {
|
||||
border-bottom-color: #d2d2d2;
|
||||
}
|
||||
|
|
@ -94,10 +72,6 @@ pre, .rustdoc.source .example-wrap {
|
|||
background: #444;
|
||||
}
|
||||
|
||||
.source .sidebar {
|
||||
background-color: #565656;
|
||||
}
|
||||
|
||||
.line-numbers span { color: #3B91E2; }
|
||||
.line-numbers .line-highlighted {
|
||||
background-color: #0a042f !important;
|
||||
|
|
@ -111,12 +85,6 @@ pre, .rustdoc.source .example-wrap {
|
|||
border-color: #ddd;
|
||||
}
|
||||
|
||||
.content .method .where,
|
||||
.content .fn .where,
|
||||
.content .where.fmt-newline {
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
.search-results a:hover {
|
||||
background-color: #777;
|
||||
}
|
||||
|
|
@ -210,20 +178,6 @@ a {
|
|||
color: #D2991D;
|
||||
}
|
||||
|
||||
a#toggle-all-docs,
|
||||
a.anchor,
|
||||
.small-section-header a,
|
||||
#source-sidebar a,
|
||||
pre.rust a,
|
||||
.sidebar h2 a,
|
||||
.sidebar h3 a,
|
||||
.mobile-topbar h2 a,
|
||||
.in-band a {
|
||||
color: #ddd;
|
||||
}
|
||||
.search-results a {
|
||||
color: #ddd;
|
||||
}
|
||||
a.test-arrow {
|
||||
color: #dedede;
|
||||
}
|
||||
|
|
@ -257,11 +211,6 @@ details.undocumented > summary::before {
|
|||
border-color: #008dfd;
|
||||
}
|
||||
|
||||
.module-item .stab,
|
||||
.import-item .stab {
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
.stab.empty-impl { background: #FFF5D6; border-color: #FFC600; color: #2f2f2f; }
|
||||
.stab.unstable { background: #FFF5D6; border-color: #FFC600; color: #2f2f2f; }
|
||||
.stab.deprecated { background: #ffc4c4; border-color: #db7b7b; color: #2f2f2f; }
|
||||
|
|
@ -287,10 +236,6 @@ details.undocumented > summary::before {
|
|||
color: grey;
|
||||
}
|
||||
|
||||
.result-name .primitive > i, .result-name .keyword > i {
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
.line-numbers :target { background-color: transparent; }
|
||||
|
||||
/* Code highlighting */
|
||||
|
|
@ -484,15 +429,6 @@ kbd {
|
|||
color: #ccc;
|
||||
}
|
||||
|
||||
#sidebar-toggle {
|
||||
background-color: #565656;
|
||||
}
|
||||
#sidebar-toggle:hover {
|
||||
background-color: #676767;
|
||||
}
|
||||
#source-sidebar {
|
||||
background-color: #565656;
|
||||
}
|
||||
#source-sidebar > .title {
|
||||
border-bottom-color: #ccc;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,27 +1,9 @@
|
|||
/* General structure and fonts */
|
||||
|
||||
body, .popover, .popover::before {
|
||||
background-color: white;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.setting-line .radio-line input {
|
||||
border-color: black;
|
||||
}
|
||||
.setting-line .radio-line input:checked {
|
||||
box-shadow: inset 0 0 0 3px white;
|
||||
background-color: #2196f3;
|
||||
}
|
||||
.setting-line .radio-line input:focus {
|
||||
box-shadow: 0 0 1px 1px #2196f3;
|
||||
}
|
||||
/* In here we combine both `:focus` and `:checked` properties. */
|
||||
.setting-line .radio-line input:checked:focus {
|
||||
box-shadow: inset 0 0 0 3px white,
|
||||
0 0 2px 2px #2196f3;
|
||||
}
|
||||
.setting-line .radio-line input:hover {
|
||||
border-color: #2196f3 !important;
|
||||
:root {
|
||||
--main-background-color: white;
|
||||
--main-color: black;
|
||||
--settings-input-color: #2196f3;
|
||||
--sidebar-background-color: #F5F5F5;
|
||||
--sidebar-background-color-hover: #E0E0E0;
|
||||
}
|
||||
|
||||
.slider {
|
||||
|
|
@ -30,16 +12,10 @@ body, .popover, .popover::before {
|
|||
.slider:before {
|
||||
background-color: white;
|
||||
}
|
||||
input:checked + .slider {
|
||||
background-color: #2196F3;
|
||||
}
|
||||
input:focus + .slider {
|
||||
box-shadow: 0 0 0 2px #0a84ff, 0 0 0 6px rgba(10, 132, 255, 0.3);
|
||||
}
|
||||
|
||||
h1, h2, h3, h4 {
|
||||
color: black;
|
||||
}
|
||||
h1.fqn {
|
||||
border-bottom-color: #DDDDDD;
|
||||
}
|
||||
|
|
@ -96,10 +72,6 @@ pre, .rustdoc.source .example-wrap {
|
|||
background-color: #fff;
|
||||
}
|
||||
|
||||
.source .sidebar {
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
|
||||
.line-numbers span { color: #c67e2d; }
|
||||
.line-numbers .line-highlighted {
|
||||
background-color: #FDFFD3 !important;
|
||||
|
|
@ -113,12 +85,6 @@ pre, .rustdoc.source .example-wrap {
|
|||
border-color: #ddd;
|
||||
}
|
||||
|
||||
.content .method .where,
|
||||
.content .fn .where,
|
||||
.content .where.fmt-newline {
|
||||
color: #4E4C4C;
|
||||
}
|
||||
|
||||
.search-results a:hover {
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
|
@ -209,20 +175,6 @@ a {
|
|||
color: #3873AD;
|
||||
}
|
||||
|
||||
a#toggle-all-docs,
|
||||
a.anchor,
|
||||
.small-section-header a,
|
||||
#source-sidebar a,
|
||||
pre.rust a,
|
||||
.sidebar h2 a,
|
||||
.sidebar h3 a,
|
||||
.mobile-topbar h2 a,
|
||||
.in-band a {
|
||||
color: #000;
|
||||
}
|
||||
.search-results a {
|
||||
color: initial;
|
||||
}
|
||||
a.test-arrow {
|
||||
color: #f5f5f5;
|
||||
}
|
||||
|
|
@ -246,11 +198,6 @@ details.undocumented > summary::before {
|
|||
border-color: #66afe9;
|
||||
}
|
||||
|
||||
.module-item .stab,
|
||||
.import-item .stab {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.stab.empty-impl { background: #FFF5D6; border-color: #FFC600; }
|
||||
.stab.unstable { background: #FFF5D6; border-color: #FFC600; }
|
||||
.stab.deprecated { background: #ffc4c4; border-color: #db7b7b; }
|
||||
|
|
@ -271,10 +218,6 @@ details.undocumented > summary::before {
|
|||
color: grey;
|
||||
}
|
||||
|
||||
.result-name .primitive > i, .result-name .keyword > i {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.line-numbers :target { background-color: transparent; }
|
||||
|
||||
/* Code highlighting */
|
||||
|
|
@ -468,15 +411,6 @@ kbd {
|
|||
color: #999;
|
||||
}
|
||||
|
||||
#sidebar-toggle {
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
#sidebar-toggle:hover {
|
||||
background-color: #E0E0E0;
|
||||
}
|
||||
#source-sidebar {
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
#source-sidebar > .title {
|
||||
border-bottom-color: #ccc;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue