BookStack/resources/sass/_variables.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;
}

$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);
Initial commit 2015-07-13 03:01:42 +08:00			`// Variables`
			`///////////////`

			`// Screen breakpoints`
Added responsive functionality to tri-layout view. 2018-12-09 07:34:06 +08:00			`$xxl: 1400px;`
Initial commit 2015-07-13 03:01:42 +08:00			`$xl: 1100px;`
			`$l: 1000px;`
Started on a design update - Added base of new grid system. - Added new margin/padding/visiblity helpers. - Made header collapse to overflow menu on mobile. 2018-10-17 01:49:16 +08:00			`$m: 880px;`
Initial commit 2015-07-13 03:01:42 +08:00			`$s: 600px;`
			`$xs: 400px;`
			`$xxs: 360px;`

Actioned some todo items, Cleaned old grid css 2019-04-07 16:57:48 +08:00			`// List of screen sizes`
Started on a design update - Added base of new grid system. - Added new margin/padding/visiblity helpers. - Made header collapse to overflow menu on mobile. 2018-10-17 01:49:16 +08:00			`$screen-sizes: (('xxs', $xxs), ('xs', $xs), ('s', $s), ('m', $m), ('l', $l), ('xl', $xl));`

Initial commit 2015-07-13 03:01:42 +08:00			`// Spacing (Margins+Padding)`
			`$-xxxl: 64px;`
			`$-xxl: 48px;`
			`$-xl: 32px;`
			`$-l: 24px;`
			`$-m: 16px;`
			`$-s: 12px;`
			`$-xs: 6px;`
			`$-xxs: 3px;`

Actioned some todo items, Cleaned old grid css 2019-04-07 16:57:48 +08:00			`// List of our spacing sizes`
Added user filter to audit log Included testing to cover. Closes #2472 2021-03-21 23:04:32 +08:00			`$spacing: (('none', 0), ('xxs', $-xxs), ('xs', $-xs), ('s', $-s), ('m', $-m), ('l', $-l), ('xl', $-xl), ('xxl', $-xxl), ('auto', auto));`
Started on a design update - Added base of new grid system. - Added new margin/padding/visiblity helpers. - Made header collapse to overflow menu on mobile. 2018-10-17 01:49:16 +08:00
Initial commit 2015-07-13 03:01:42 +08:00			`// Fonts`
Removed included fonts, Set to use system fonts. All font definitions moved into _text.scss. Needs override documentation to complete. Relates to #423. 2017-08-19 21:33:55 +08:00			`$text: -apple-system, BlinkMacSystemFont,`
			`"Segoe UI", "Oxygen", "Ubuntu", "Roboto", "Cantarell",`
			`"Fira Sans", "Droid Sans", "Helvetica Neue",`
			`sans-serif;`
Fix "Ubunto Mono" $mono type misspelling 2020-09-24 05:19:30 +08:00			`$mono: "Lucida Console", "DejaVu Sans Mono", "Ubuntu Mono", Monaco, monospace;`
Started looking at the books listing design 2018-12-02 00:29:57 +08:00			`$fs-m: 14px;`
			`$fs-s: 12px;`
Initial commit 2015-07-13 03:01:42 +08:00
			`// Colours`
Converted primary color use to css variable - Removed all existing SCSS usage of primary color. - Cut down custom styles injection to just be css vars. - Reduced button styles so default button is primary. - Updated button styles to lighten/brighten on hover & active states even when a custom color is set. - Removed unused scss color vars. - Updated default BookStack blue to achieve better accessibility. 2019-08-25 19:40:04 +08:00			`:root {`
Tweaked entity color palette for accessibility Also converted entity colors to CSS variables for easier instance customization. Related to #1320 2019-08-26 21:37:53 +08:00			`--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;`
Converted primary color use to css variable - Removed all existing SCSS usage of primary color. - Cut down custom styles injection to just be css vars. - Reduced button styles so default button is primary. - Updated button styles to lighten/brighten on hover & active states even when a custom color is set. - Removed unused scss color vars. - Updated default BookStack blue to achieve better accessibility. 2019-08-25 19:40:04 +08:00			`}`
Tweaked entity color palette for accessibility Also converted entity colors to CSS variables for easier instance customization. Related to #1320 2019-08-26 21:37:53 +08:00
Tweaked colors for accessibility, applied fixes found during testing - Fixed overriding h3 content header style. - Updated notification styling to be less overwhelming. - Increased floated image margin. - Adjusted callout icon placement. - Fixed tinymce fullscreen zindex issue. 2019-05-06 07:15:03 +08:00			`$positive: #0f7d15;`
			`$negative: #ab0f0e;`
Converted primary color use to css variable - Removed all existing SCSS usage of primary color. - Cut down custom styles injection to just be css vars. - Reduced button styles so default button is primary. - Updated button styles to lighten/brighten on hover & active states even when a custom color is set. - Removed unused scss color vars. - Updated default BookStack blue to achieve better accessibility. 2019-08-25 19:40:04 +08:00			`$info: #0288D1;`
			`$warning: #cf4d03;`
Initial commit 2015-07-13 03:01:42 +08:00
			`// Text colours`
			`$text-dark: #444;`

			`// Shadows`
			`$bs-light: 0 0 4px 1px #CCC;`
Started work on supporting a dark-mode - Most elements done, but still need to do editors, tables and final pass. - Toggled only by quick js check at the moment, checking via css media query. Need to make into user-preference toggle. For #1234 2020-04-11 05:38:29 +08:00			`$bs-dark: 0 0 4px 1px rgba(0, 0, 0, 0.5);`
Initial commit 2015-07-13 03:01:42 +08:00			`$bs-med: 0 1px 3px 1px rgba(76, 76, 76, 0.26);`
Tweaked colors for accessibility, applied fixes found during testing - Fixed overriding h3 content header style. - Updated notification styling to be less overwhelming. - Increased floated image margin. - Adjusted callout icon placement. - Fixed tinymce fullscreen zindex issue. 2019-05-06 07:15:03 +08:00			`$bs-large: 0 1px 6px 1px rgba(22, 22, 22, 0.2);`
Started reworking of page-show design - Updated core toolbar & breadcrumb design 2018-10-22 03:05:11 +08:00			`$bs-card: 0 1px 6px -1px rgba(0, 0, 0, 0.1);`
Rolled dark mode out to the editors - Updated editor, and other area, styles to look okay in dark mode. - Used tinyMCE theme generator to create dark mode theme. - Updated tinymce to latest 4x version. 2020-04-11 22:48:08 +08:00			`$bs-card-dark: 0 1px 6px -1px rgba(0, 0, 0, 0.5);`
Fix "Ubunto Mono" $mono type misspelling 2020-09-24 05:19:30 +08:00			`$bs-hover: 0 2px 2px 1px rgba(0,0,0,.13);`