mirror of
https://github.com/rio-labs/rio.git
synced 2026-05-07 03:49:30 -05:00
Aran-Fey
69 lines
1.4 KiB
SCSS
69 lines
1.4 KiB
SCSS
@use "sass:meta";
|
|
@import "./utils";
|
|
|
|
// Light / Dark highlight.js themes
|
|
//
|
|
// Switch between these by setting the `data-theme` attribute on the `html`
|
|
html[data-theme="light"] {
|
|
@include meta.load-css(
|
|
"./syntax_highlighting/highlightjs-default-light.css"
|
|
);
|
|
}
|
|
|
|
html[data-theme="dark"] {
|
|
@include meta.load-css(
|
|
"./syntax_highlighting/highlightjs-default-dark.css"
|
|
);
|
|
}
|
|
|
|
a {
|
|
color: var(--rio-local-level-2-bg);
|
|
}
|
|
|
|
a:hover {
|
|
color: var(--rio-local-level-2-bg-active);
|
|
}
|
|
|
|
code {
|
|
font-family: $monospace-fonts;
|
|
}
|
|
|
|
html {
|
|
background: var(--rio-global-background-bg);
|
|
|
|
// Fill the whole screen, at least
|
|
min-width: 100%;
|
|
min-height: 100%;
|
|
|
|
@include single-container;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
|
|
font-family: var(--rio-global-font, sans-serif);
|
|
|
|
// It's pretty common for random elements to be added to the <body> by
|
|
// browser extensions or JS libraries, so we can't simply use
|
|
// `@single-container()`.
|
|
//
|
|
// I'm not really sure what purpose(s) those elements serve, but it seems
|
|
// unwise to simply hide them. For now, we'll turn the body into a Stack.
|
|
display: inline-grid;
|
|
|
|
& > * {
|
|
grid-row: 1;
|
|
grid-column: 1;
|
|
}
|
|
}
|
|
|
|
// Force input elements to use the font-family we specified. For some reason
|
|
// they don't inherit it per default.
|
|
input,
|
|
textarea,
|
|
select {
|
|
font-family: var(--rio-global-font);
|
|
font-size: var(--rio-global-text-font-size);
|
|
}
|