* 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.
- Set `document.scrollingElement` as the scrolling element
for scrolling to anchors when the app is mobile mode
to enhance support in newer browsers.
The CSS View Module spec considers `document.documentElement`/`<html>`
to be the standard scrolling element
and that is what appears to be used in the latest Firefox and Chrome.
However, some older browsers and even the current Safari
use `document.body` as the scrolling element
which is why I suspect the original code used `document.body`.
Since some browsers scroll on different elements,
`document.scrollingElement` exists
so the browser can tell us what to use
for scrolling to anchors work for all modern browsers.
Since `document.scrollingElement` is undefined in older browsers,
`document.body` is available as fallback mobile scrolling element.
- Use `max-width`/`max-height` mobile detection media queries
instead of `max-device-width`/`max-device-height`.
Some browsers inaccurately report the device dimensions
and get the mobile version of the DevDocs unexpectedly.
Not depending on the device dimensions also improves the experience
by displaying the mobile version
if a desktop browser window is sufficiently small enough.
