X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/067cb9c5b7b020da6dda398773cd7236fa3b51f2..refs/pull/5280/head:/resources/sass/_variables.scss diff --git a/resources/sass/_variables.scss b/resources/sass/_variables.scss index 061a83746..35586bf58 100644 --- a/resources/sass/_variables.scss +++ b/resources/sass/_variables.scss @@ -2,17 +2,14 @@ /////////////// // Screen breakpoints +$xxxl: 1700px; $xxl: 1400px; $xl: 1100px; -$ipad-width: 1028px; // Is actually 1024 but we go over to ensure functionality. $l: 1000px; $m: 880px; $s: 600px; $xs: 400px; $xxs: 360px; -$screen-lg: 1200px; -$screen-md: 992px; -$screen-sm: 768px; // List of screen sizes $screen-sizes: (('xxs', $xxs), ('xs', $xs), ('s', $s), ('m', $m), ('l', $l), ('xl', $xl)); @@ -28,38 +25,29 @@ $-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)); +$spacing: (('none', 0), ('xxs', $-xxs), ('xs', $-xs), ('s', $-s), ('m', $-m), ('l', $-l), ('xl', $-xl), ('xxl', $-xxl), ('auto', auto)); // Fonts -$text: -apple-system, BlinkMacSystemFont, +$font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu", "Roboto", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; -$mono: "Lucida Console", "DejaVu Sans Mono", "Ubunto Mono", Monaco, monospace; -$heading: $text; +$font-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; -} - $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; -$text-light: #EEE; // Shadows $bs-light: 0 0 4px 1px #CCC; @@ -67,4 +55,40 @@ $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-hover: 0 2px 2px 1px rgba(0,0,0,.13); \ No newline at end of file +$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; +} \ No newline at end of file