Skip to content

Commit

Permalink
Simplify CSS theming by setting CSS variables
Browse files Browse the repository at this point in the history
  • Loading branch information
@GuillaumeGomez
GuillaumeGomez committed Jun 28, 2022
1 parent a518b3a commit 7f6ce7d
Show file tree
Hide file tree
Showing 4 changed files with 73 additions and 199 deletions.
55 changes: 55 additions & 0 deletions src/librustdoc/html/static/css/rustdoc.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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;
Expand Down
63 changes: 6 additions & 57 deletions src/librustdoc/html/static/css/themes/ayu.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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);
}
Expand Down Expand Up @@ -125,10 +104,6 @@ pre, .rustdoc.source .example-wrap {
color: #ffb44c;
}

.source .sidebar {
background-color: #14191f;
}

.sidebar-elems .location {
color: #ff7733;
}
Expand All @@ -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;
}
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down
76 changes: 6 additions & 70 deletions src/librustdoc/html/static/css/themes/dark.css
View file
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -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;
}
Expand Down Expand Up @@ -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;
Expand All @@ -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;
}
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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; }
Expand All @@ -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 */
Expand Down Expand Up @@ -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;
}
Expand Down
Loading

0 comments on commit 7f6ce7d

Please sign in to comment.