94 lines
3.1 KiB
SCSS
94 lines
3.1 KiB
SCSS
// Variables
|
|
///////////////
|
|
|
|
// Screen breakpoints
|
|
$xxxl: 1700px;
|
|
$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
|
|
$font-body: -apple-system, BlinkMacSystemFont,
|
|
"Segoe UI", "Oxygen", "Ubuntu", "Roboto", "Cantarell",
|
|
"Fira Sans", "Droid Sans", "Helvetica Neue",
|
|
sans-serif;
|
|
$font-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;
|
|
|
|
// 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);
|
|
|
|
// CSS root variables
|
|
:root {
|
|
--font-body: #{$font-body};
|
|
--font-code: #{$font-mono};
|
|
|
|
--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;
|
|
} |