09fa2d2c9c
Forces browser colorscheme based on BookStack color scheme, via 'color-scheme' css property. Sets proper dark mode colors for some previously missed areas like templates and attachment control buttons. Also fixed search bar icon position for some search inputs.
75 lines
2.7 KiB
SCSS
75 lines
2.7 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
|
|
:root {
|
|
--color-primary: #206ea7;
|
|
--color-primary-light: rgba(32,110,167,0.15);
|
|
|
|
--color-page: #206ea7;
|
|
--color-page-draft: #7e50b1;
|
|
--color-chapter: #af4d0d;
|
|
--color-book: #077b70;
|
|
--color-bookshelf: #a94747;
|
|
|
|
--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;
|
|
}
|
|
:root:not(.dark-mode) {
|
|
color-scheme: only light;
|
|
}
|
|
|
|
$positive: #0f7d15;
|
|
$negative: #ab0f0e;
|
|
$info: #0288D1;
|
|
$warning: #cf4d03;
|
|
|
|
// 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);
|