]> BookStack Code Mirror - bookstack/blob - resources/sass/_variables.scss
Dropzone: Polished image manager elements
[bookstack] / resources / sass / _variables.scss
1 // Variables
2 ///////////////
3
4 // Screen breakpoints
5 $xxl: 1400px;
6 $xl: 1100px;
7 $l: 1000px;
8 $m: 880px;
9 $s: 600px;
10 $xs: 400px;
11 $xxs: 360px;
12
13 // List of screen sizes
14 $screen-sizes: (('xxs', $xxs), ('xs', $xs), ('s', $s), ('m', $m), ('l', $l), ('xl', $xl));
15
16 // Spacing (Margins+Padding)
17 $-xxxl: 64px;
18 $-xxl: 48px;
19 $-xl: 32px;
20 $-l: 24px;
21 $-m: 16px;
22 $-s: 12px;
23 $-xs: 6px;
24 $-xxs: 3px;
25
26 // List of our spacing sizes
27 $spacing: (('none', 0), ('xxs', $-xxs), ('xs', $-xs), ('s', $-s), ('m', $-m), ('l', $-l), ('xl', $-xl), ('xxl', $-xxl), ('auto', auto));
28
29 // Fonts
30 $text: -apple-system, BlinkMacSystemFont,
31 "Segoe UI", "Oxygen", "Ubuntu", "Roboto", "Cantarell",
32 "Fira Sans", "Droid Sans", "Helvetica Neue",
33 sans-serif;
34 $mono: "Lucida Console", "DejaVu Sans Mono", "Ubuntu Mono", Monaco, monospace;
35 $fs-m: 14px;
36 $fs-s: 12px;
37
38 // Colours
39 :root {
40   --color-primary: #206ea7;
41   --color-primary-light: rgba(32,110,167,0.15);
42   --color-link: #206ea7;
43
44   --color-page: #206ea7;
45   --color-page-draft: #7e50b1;
46   --color-chapter: #af4d0d;
47   --color-book: #077b70;
48   --color-bookshelf: #a94747;
49
50   --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");
51 }
52
53 :root.dark-mode {
54   --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");
55   color-scheme: only dark;
56 }
57 :root:not(.dark-mode) {
58   color-scheme: only light;
59 }
60
61 $positive: #0f7d15;
62 $negative: #ab0f0e;
63 $info: #0288D1;
64 $warning: #cf4d03;
65
66 // Text colours
67 $text-dark: #444;
68
69 // Shadows
70 $bs-light: 0 0 4px 1px #CCC;
71 $bs-dark: 0 0 4px 1px rgba(0, 0, 0, 0.5);
72 $bs-med: 0 1px 3px 1px rgba(76, 76, 76, 0.26);
73 $bs-large: 0 1px 6px 1px rgba(22, 22, 22, 0.2);
74 $bs-card: 0 1px 6px -1px rgba(0, 0, 0, 0.1);
75 $bs-card-dark: 0 1px 6px -1px rgba(0, 0, 0, 0.5);
76 $bs-hover: 0 2px 2px 1px rgba(0,0,0,.13);