BookStack Code Mirror - bookstack/blob - resources/sass/_vars.scss

   1 // Variables
   2 // A range of SASS and plain CSS variables used in BookStack
   3 ////////////////////////////////////////////////////////////
   4
   5 // This is simply placed here at the top to prevent parsing/rendering issues
   6 // where built CSS files may have a starting BOM mark which can break the first css rule
   7 // when used inline, so this is here as a sacrifice in such scenarios instead of an important rule.
   8 // Related: https://github.com/sass/dart-sass/issues/472
   9 .dummy-style {color: red;}
  10
  11 // Screen breakpoints
  12 $bp-xxxl: 1700px;
  13 $bp-xxl: 1400px;
  14 $bp-xl: 1100px;
  15 $bp-l: 1000px;
  16 $bp-m: 880px;
  17 $bp-s: 600px;
  18 $bp-xs: 400px;
  19 $bp-xxs: 360px;
  20
  21 // List of screen sizes
  22 $screen-sizes: (('xxs', $bp-xxs), ('xs', $bp-xs), ('s', $bp-s), ('m', $bp-m), ('l', $bp-l), ('xl', $bp-xl));
  23
  24 // Spacing (Margins+Padding)
  25 $xxxl: 64px;
  26 $xxl: 48px;
  27 $xl: 32px;
  28 $l: 24px;
  29 $m: 16px;
  30 $s: 12px;
  31 $xs: 6px;
  32 $xxs: 3px;
  33
  34 // List of our spacing sizes
  35 $spacing: (('none', 0), ('xxs', $xxs), ('xs', $xs), ('s', $s), ('m', $m), ('l', $l), ('xl', $xl), ('xxl', $xxl), ('auto', auto));
  36
  37 // Fonts
  38 $font-body: -apple-system, BlinkMacSystemFont,
  39 "Segoe UI", "Oxygen", "Ubuntu", "Roboto", "Cantarell",
  40 "Fira Sans", "Droid Sans", "Helvetica Neue",
  41 sans-serif;
  42 $font-mono: "Lucida Console", "DejaVu Sans Mono", "Ubuntu Mono", Monaco, monospace;
  43 $fs-m: 14px;
  44 $fs-s: 12px;
  45
  46 // Colours
  47 $positive: #0f7d15;
  48 $negative: #ab0f0e;
  49 $info: #0288D1;
  50 $warning: #cf4d03;
  51 $positive-dark: #4aa850;
  52 $negative-dark: #e85c5b;
  53 $info-dark: #0288D1;
  54 $warning-dark: #de8a5a;
  55
  56 // Text colours
  57 $text-dark: #444;
  58
  59 // Shadows
  60 $bs-light: 0 0 4px 1px #CCC;
  61 $bs-dark: 0 0 4px 1px rgba(0, 0, 0, 0.5);
  62 $bs-med: 0 1px 3px 1px rgba(76, 76, 76, 0.26);
  63 $bs-large: 0 1px 6px 1px rgba(22, 22, 22, 0.2);
  64 $bs-card: 0 1px 6px -1px rgba(0, 0, 0, 0.1);
  65 $bs-card-dark: 0 1px 6px -1px rgba(0, 0, 0, 0.5);
  66 $bs-hover: 0 2px 2px 1px rgba(0,0,0,.13);
  67
  68 // CSS root variables
  69 :root {
  70   --font-body: #{$font-body};
  71   --font-code: #{$font-mono};
  72
  73   --color-primary: #206ea7;
  74   --color-primary-light: rgba(32,110,167,0.15);
  75   --color-link: #206ea7;
  76
  77   --color-page: #206ea7;
  78   --color-page-draft: #7e50b1;
  79   --color-chapter: #af4d0d;
  80   --color-book: #077b70;
  81   --color-bookshelf: #a94747;
  82
  83   --color-positive: #{$positive};
  84   --color-negative: #{$negative};
  85   --color-info: #{$info};
  86   --color-warning: #{$warning};
  87
  88   --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");
  89 }
  90
  91 :root.dark-mode {
  92   --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");
  93   color-scheme: only dark;
  94
  95   --color-positive: #4aa850;
  96   --color-negative: #e85c5b;
  97   --color-warning: #de8a5a;
  98 }
  99 :root:not(.dark-mode) {
 100   color-scheme: only light;
 101 }