mirror of
https://github.com/rust-lang/rust.git
synced 2025-04-28 02:57:37 +00:00
Rollup merge of #98460 - GuillaumeGomez:css-simplification, r=jsha
Use CSS variables to handle theming This is the start for our simplification of theming. Considering how big the diff quickly becomes, I think it's better to do it in multiple parts. (The 3 first commits come from https://github.com/rust-lang/rust/pull/98297 so once it's merged, they'll disappear). Normally they shouldn't be any UI changes. You can check it [here](https://rustdoc.crud.net/imperio/css-simplification/doc/foo/index.html). cc `@notriddle` r? `@jsha`
This commit is contained in:
Guillaume Gomez
GitHub
commit
bda659e873
@ -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;
|
||||
@ -629,11 +660,6 @@ h2.location a {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.invisible {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.content .in-band {
|
||||
flex-grow: 1;
|
||||
margin: 0px;
|
||||
@ -1008,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;
|
||||
}
|
||||
@ -1428,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);
|
||||
}
|
||||
@ -62,10 +41,6 @@ h4 {
|
||||
background-color: #0f1419;
|
||||
}
|
||||
|
||||
.invisible {
|
||||
background: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.docblock code {
|
||||
color: #ffb454;
|
||||
}
|
||||
@ -129,10 +104,6 @@ pre, .rustdoc.source .example-wrap {
|
||||
color: #ffb44c;
|
||||
}
|
||||
|
||||
.source .sidebar {
|
||||
background-color: #14191f;
|
||||
}
|
||||
|
||||
.sidebar-elems .location {
|
||||
color: #ff7733;
|
||||
}
|
||||
@ -153,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;
|
||||
}
|
||||
@ -233,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;
|
||||
@ -617,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;
|
||||
}
|
||||
@ -49,10 +27,6 @@ h2, h3, h4 {
|
||||
background-color: #353535;
|
||||
}
|
||||
|
||||
.invisible {
|
||||
background: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.docblock code, .docblock-short code {
|
||||
background-color: #2A2A2A;
|
||||
}
|
||||
@ -98,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;
|
||||
@ -115,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;
|
||||
}
|
||||
@ -214,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;
|
||||
}
|
||||
@ -261,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; }
|
||||
@ -291,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 */
|
||||
@ -488,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;
|
||||
}
|
||||
@ -51,10 +27,6 @@ h2, h3, h4 {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.invisible {
|
||||
background: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.docblock code, .docblock-short code {
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
@ -100,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;
|
||||
@ -117,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;
|
||||
}
|
||||
@ -213,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;
|
||||
}
|
||||
@ -250,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; }
|
||||
@ -275,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 */
|
||||
@ -472,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…
Reference in New Issue
Block a user