Simplify CSS theming by setting CSS variables
This commit is contained in:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user