f7ad387a10
Needed some level of harcoding though due to callouts using colors, which can't be css colors as DOMPDF won't understand these. Use css variables elsewhere and added new dark variants to fit a bit better.
89 lines
3 KiB
SCSS
89 lines
3 KiB
SCSS
// Variables
|
|
///////////////
|
|
|
|
// Screen breakpoints
|
|
$xxl: 1400px;
|
|
$xl: 1100px;
|
|
$l: 1000px;
|
|
$m: 880px;
|
|
$s: 600px;
|
|
$xs: 400px;
|
|
$xxs: 360px;
|
|
|
|
// List of screen sizes
|
|
$screen-sizes: (('xxs', $xxs), ('xs', $xs), ('s', $s), ('m', $m), ('l', $l), ('xl', $xl));
|
|
|
|
// Spacing (Margins+Padding)
|
|
$-xxxl: 64px;
|
|
$-xxl: 48px;
|
|
$-xl: 32px;
|
|
$-l: 24px;
|
|
$-m: 16px;
|
|
$-s: 12px;
|
|
$-xs: 6px;
|
|
$-xxs: 3px;
|
|
|
|
// List of our spacing sizes
|
|
$spacing: (('none', 0), ('xxs', $-xxs), ('xs', $-xs), ('s', $-s), ('m', $-m), ('l', $-l), ('xl', $-xl), ('xxl', $-xxl), ('auto', auto));
|
|
|
|
// Fonts
|
|
$text: -apple-system, BlinkMacSystemFont,
|
|
"Segoe UI", "Oxygen", "Ubuntu", "Roboto", "Cantarell",
|
|
"Fira Sans", "Droid Sans", "Helvetica Neue",
|
|
sans-serif;
|
|
$mono: "Lucida Console", "DejaVu Sans Mono", "Ubuntu Mono", Monaco, monospace;
|
|
$fs-m: 14px;
|
|
$fs-s: 12px;
|
|
|
|
// Colours
|
|
$positive: #0f7d15;
|
|
$negative: #ab0f0e;
|
|
$info: #0288D1;
|
|
$warning: #cf4d03;
|
|
$positive-dark: #4aa850;
|
|
$negative-dark: #e85c5b;
|
|
$info-dark: #0288D1;
|
|
$warning-dark: #de8a5a;
|
|
|
|
:root {
|
|
--color-primary: #206ea7;
|
|
--color-primary-light: rgba(32,110,167,0.15);
|
|
--color-link: #206ea7;
|
|
|
|
--color-page: #206ea7;
|
|
--color-page-draft: #7e50b1;
|
|
--color-chapter: #af4d0d;
|
|
--color-book: #077b70;
|
|
--color-bookshelf: #a94747;
|
|
|
|
--color-positive: #{$positive};
|
|
--color-negative: #{$negative};
|
|
--color-info: #{$info};
|
|
--color-warning: #{$warning};
|
|
|
|
--bg-disabled: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100%25' width='100%25'%3E%3Cdefs%3E%3Cpattern id='doodad' width='19' height='19' viewBox='0 0 40 40' patternUnits='userSpaceOnUse' patternTransform='rotate(143)'%3E%3Crect width='100%25' height='100%25' fill='rgba(42, 67, 101,0)'/%3E%3Cpath d='M-10 30h60v20h-60zM-10-10h60v20h-60' fill='rgba(26, 32, 44,0)'/%3E%3Cpath d='M-10 10h60v20h-60zM-10-30h60v20h-60z' fill='rgba(0, 0, 0,0.05)'/%3E%3C/pattern%3E%3C/defs%3E%3Crect fill='url(%23doodad)' height='200%25' width='200%25'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
:root.dark-mode {
|
|
--bg-disabled: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100%25' width='100%25'%3E%3Cdefs%3E%3Cpattern id='doodad' width='19' height='19' viewBox='0 0 40 40' patternUnits='userSpaceOnUse' patternTransform='rotate(143)'%3E%3Crect width='100%25' height='100%25' fill='rgba(42, 67, 101,0)'/%3E%3Cpath d='M-10 30h60v20h-60zM-10-10h60v20h-60' fill='rgba(26, 32, 44,0)'/%3E%3Cpath d='M-10 10h60v20h-60zM-10-30h60v20h-60z' fill='rgba(255, 255, 255,0.05)'/%3E%3C/pattern%3E%3C/defs%3E%3Crect fill='url(%23doodad)' height='200%25' width='200%25'/%3E%3C/svg%3E");
|
|
color-scheme: only dark;
|
|
|
|
--color-positive: #4aa850;
|
|
--color-negative: #e85c5b;
|
|
--color-warning: #de8a5a;
|
|
}
|
|
:root:not(.dark-mode) {
|
|
color-scheme: only light;
|
|
}
|
|
|
|
// Text colours
|
|
$text-dark: #444;
|
|
|
|
// Shadows
|
|
$bs-light: 0 0 4px 1px #CCC;
|
|
$bs-dark: 0 0 4px 1px rgba(0, 0, 0, 0.5);
|
|
$bs-med: 0 1px 3px 1px rgba(76, 76, 76, 0.26);
|
|
$bs-large: 0 1px 6px 1px rgba(22, 22, 22, 0.2);
|
|
$bs-card: 0 1px 6px -1px rgba(0, 0, 0, 0.1);
|
|
$bs-card-dark: 0 1px 6px -1px rgba(0, 0, 0, 0.5);
|
|
$bs-hover: 0 2px 2px 1px rgba(0,0,0,.13);
|