Simplify CSS theming by setting CSS variables

This commit is contained in:
Guillaume Gomez
2022-06-24 17:03:04 +02:00
parent a518b3a62c
commit 7f6ce7dddd
4 changed files with 73 additions and 199 deletions

View File

@@ -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;