mirror of
https://github.com/rio-labs/rio.git
synced 2025-12-30 17:59:51 -06:00
73 lines
1.6 KiB
SCSS
73 lines
1.6 KiB
SCSS
@use "sass:meta";
|
|
@use "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: utils.$monospace-fonts;
|
|
}
|
|
|
|
// It's pretty common for random elements to be added to the <body> or even the
|
|
// <html> by browser extensions or JS libraries, so we can't simply use
|
|
// `@single-container()` there.
|
|
//
|
|
// I'm not really sure what purpose(s) those elements serve, but it seems
|
|
// unwise to simply hide them. For now, we'll use a Stack.
|
|
@mixin single-container-where-3rd-party-elements-can-be-injected {
|
|
display: inline-grid;
|
|
|
|
& > * {
|
|
grid-row: 1;
|
|
grid-column: 1;
|
|
}
|
|
}
|
|
|
|
html {
|
|
background: var(--rio-global-background-bg);
|
|
|
|
// Fill the whole screen, at least
|
|
min-width: 100%;
|
|
min-height: 100%;
|
|
|
|
@include single-container-where-3rd-party-elements-can-be-injected();
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
|
|
font-family: var(--rio-global-font, sans-serif);
|
|
|
|
@include single-container-where-3rd-party-elements-can-be-injected();
|
|
}
|
|
|
|
// 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);
|
|
}
|