mirror of
https://github.com/freeCodeCamp/devdocs
synced 2024-11-16 19:48:10 +01:00
a30fcf9d9a
* Switch from SASS variables to CSS variables for most styling These are the simple cases, and the more complex ones will be covered by future commits. I’ve also replaced $fooZ ± 1 with the appropriate variable to avoid a runtime `calc()`. * Eliminate the `$style` variable 🔥 I’ve added a `--absolute` variable that’s `white` in dark mode and `black` in regular mode. * Remove `$inputFocusBorder` 🔥 * Switch the Prism styles to CSS variables * Convert `$mediumScreen` to a mixin * 🔥 `$selectionText` * Eliminate the final uses of SCSS variables I’ve dropped the 95% opacity on the background of the method source code overlay in RDoc since the difference isn’t noticeable but it makes implementation a lot easier. * Misc fixes * Extract the common variables from the two themes to a new file * Remove illegal usages of CSS variables in SCSS functions This flattens out the buttons on the settings page which makes the styles simpler (and more modern-looking IMO) and removes the box-shadow on the button, which was completely invisible to me. * Fix usages of SCSS functions in CSS variables * Use `html._theme-*` selectors * Eliminate `application-dark.css`; switch themes by toggling classes This also means that the Application Cache doesn’t have to get updated when toggling themes, and a new CSS file that’s nearly the same doesn’t need to be downloaded.
45 lines
1.1 KiB
SCSS
45 lines
1.1 KiB
SCSS
%sphinx {
|
|
h2 { @extend %block-heading; }
|
|
h3 { @extend %block-label; }
|
|
h4 { font-size: 1em; }
|
|
> dl:not(.docutils) > dt { @extend %block-label, %label-blue; }
|
|
dd > dl:not(.docutils) > dt { @extend %block-label; }
|
|
dt + dt { margin-top: -.5em; }
|
|
|
|
.note, .admonition, div.versionadded, div.versionchanged, .deprecated-removed, .deprecated, .topic { @extend %note; }
|
|
|
|
.important { @extend %note-orange; }
|
|
.warning, .deprecated-removed, .deprecated { @extend %note-red; }
|
|
.hint { @extend %note-green; }
|
|
|
|
.versionmodified, span.title, .topic-title {
|
|
display: block;
|
|
font-weight: var(--boldFontWeight);
|
|
}
|
|
|
|
p > code, li > code, dd > code, .docutils > dt > code { @extend %label; }
|
|
|
|
ul.simple { margin: 1em 0; }
|
|
|
|
h2 > a, h3 > a, dt[id] > a.external, dt[id] > a.internal { float: right; }
|
|
|
|
.admonition-title {
|
|
float: left;
|
|
margin: 0 .5em 0 0;
|
|
font-weight: var(--boldFontWeight);
|
|
|
|
&:after { content: ':'; }
|
|
}
|
|
|
|
.admonition > dl, .admonition > ul {
|
|
clear: left;
|
|
margin: 0;
|
|
}
|
|
.admonition-title + dl { padding-top: .5em; }
|
|
|
|
td > div { margin: 0 !important; }
|
|
}
|
|
|
|
._sphinx {
|
|
@extend %sphinx;
|
|
}
|