_variables.scss

$breakpoint-one-column: 400px !default;
$breakpoint-two-columns: 800px !default;
$breakpoint-three-columns: 1200px !default;

$sidebar-item-indent: 0.3rem;
$sidebar-item-conversation-indent: 0.6rem;
$sidebar-item-icon-width: 1.5rem;

:root {
  --body-bg: #f8f9f8;
  --font-family: "PT Sans", Helvetica, Arial, sans-serif;
  --font-family-monospace: "Ubuntu Mono", monospace;
  --font-size: 16px;
  --h1-font-size: 2.2rem;
  --h2-font-size: 1.5rem;
  --text-color: #333;
  --link-color: #4a6b4c;
  --quote-color: #aaa;
  --gutter: 1rem;
  --gutter-small: 0.5rem;
  --gutter-big: 2rem;
  --error-color: #900;
  --success-color: #090;
  --focus-outline: 0 0 1px 2px rgba(243, 218, 218, 0.3);
  --highlight-color-bg: #fbe4e6;
  --highlight-color: #333;
  --hr-border: 1px solid #d8d8d8;
  --button-bg: #354d36;
  --button-color: #fff;
  --button-border: 1px solid #354d36;
  --button-focus-outline: 2px solid #97b799;
  --button-disabled-bg: #b5ccb6;
  --button-disabled-color: #fff;
  --button-disabled-border: #fff;
  --button-danger-bg: #9c2626;
  --button-danger-color: #fff;
  --code-bg: inherit;
  --notify-bg: rgba(30, 30, 30, 0.85);
  --notify-color: #eaeaea;
  --notify-box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.3);
  --notify-border-radius: 8px;
  --input-bg: #fff;
  --input-gutter: 0.8rem;
  --input-border: 1px solid #888;
  --input-border-radius: 2px;
  --input-color: #555;
  --input-focus-outline: 1px solid #999;
  --input-disabled-bg: #f3f3f3;
  --input-disabled-color: #6f6f6f;
  --input-placeholder-color: #8e8e8e;
  --input-focus-placeholder-color: #bbb;
  --chat-header-box-shadow: 0 4px 5px -3px rgba(0, 0, 0, 0.1);
  --chat-input-bg: #e8e8e8;
  --chat-input-border: 0;
  --chat-input-border-radius: 8px;
  --autocomplete-bg: #fbfbfb;
  --autocomplete-border: 1px solid #888;
  --autocomplete-focus: inherit;
  --autocomplete-focus-bg: #e5e5e5;
  --ts-color: #4d4d4d;
  --ts-font-size: 0.9rem;
  --sidebar-left-bg: #5f8961;
  --sidebar-left-frozen-color: #a7d4aa;
  --sidebar-left-text: #fefefe;
  --sidebar-left-width: 300px;
  --sidebar-left-outline: #8ece93 auto 3px;
  --sidebar-left-border: 0;
  --sidebar-left-border-bottom: #fefefe;
  --sidebar-left-search-placeholder-color: #527754;
  --sidebar-left-search-focus-bg: #527754;
  --sidebar-right-bg: var(--body-bg);
  --sidebar-right-text: var(--text-color);
  --sidebar-right-width: 280px;
  --tooltip-background: #222;
  --tooltip-color: #f0f0f0;

  --syntax-hl-base-bg: #dfdfdf;
  --syntax-hl-base: inherit;
  --syntax-hl-addition-bg: inherit;
  --syntax-hl-addition: inherit;
  --syntax-hl-attr-bg: inherit;
  --syntax-hl-attr: inherit;
  --syntax-hl-attribute-bg: inherit;
  --syntax-hl-attribute: inherit;
  --syntax-hl-built-in-bg: inherit;
  --syntax-hl-built-in: inherit;
  --syntax-hl-bullet-bg: inherit;
  --syntax-hl-bullet: inherit;
  --syntax-hl-code-bg: inherit;
  --syntax-hl-code: inherit;
  --syntax-hl-comment-bg: inherit;
  --syntax-hl-comment: inherit;
  --syntax-hl-deletion-bg: inherit;
  --syntax-hl-deletion: inherit;
  --syntax-hl-doctag-bg: inherit;
  --syntax-hl-doctag: inherit;
  --syntax-hl-formula-bg: inherit;
  --syntax-hl-formula: inherit;
  --syntax-hl-function-bg: inherit;
  --syntax-hl-function: inherit;
  --syntax-hl-keyword-bg: inherit;
  --syntax-hl-keyword: inherit;
  --syntax-hl-link-bg: inherit;
  --syntax-hl-link: inherit;
  --syntax-hl-literal-bg: inherit;
  --syntax-hl-literal: inherit;
  --syntax-hl-meta-bg: inherit;
  --syntax-hl-meta: inherit;
  --syntax-hl-meta-keyword-bg: inherit;
  --syntax-hl-meta-keyword: inherit;
  --syntax-hl-meta-string-bg: inherit;
  --syntax-hl-meta-string: inherit;
  --syntax-hl-name-bg: inherit;
  --syntax-hl-name: inherit;
  --syntax-hl-number-bg: inherit;
  --syntax-hl-number: inherit;
  --syntax-hl-params-bg: inherit;
  --syntax-hl-params: inherit;
  --syntax-hl-quote-bg: inherit;
  --syntax-hl-quote: inherit;
  --syntax-hl-regexp-bg: inherit;
  --syntax-hl-regexp: inherit;
  --syntax-hl-section-bg: inherit;
  --syntax-hl-section: inherit;
  --syntax-hl-selector-attr-bg: inherit;
  --syntax-hl-selector-attr: inherit;
  --syntax-hl-selector-class-bg: inherit;
  --syntax-hl-selector-class: inherit;
  --syntax-hl-selector-id-bg: inherit;
  --syntax-hl-selector-id: inherit;
  --syntax-hl-selector-pseudo-bg: inherit;
  --syntax-hl-selector-pseudo: inherit;
  --syntax-hl-selector-tag-bg: inherit;
  --syntax-hl-selector-tag: inherit;
  --syntax-hl-string-bg: inherit;
  --syntax-hl-string: inherit;
  --syntax-hl-subst-bg: inherit;
  --syntax-hl-subst: inherit;
  --syntax-hl-symbol-bg: inherit;
  --syntax-hl-symbol: inherit;
  --syntax-hl-template-variable-bg: inherit;
  --syntax-hl-template-variable: inherit;
  --syntax-hl-title-bg: inherit;
  --syntax-hl-title: inherit;
  --syntax-hl-type-bg: inherit;
  --syntax-hl-type: inherit;
  --syntax-hl-variable-bg: inherit;
  --syntax-hl-variable: inherit;
}

body.for-cms {
  --font-size: 18px;
  --h1-font-size: 2.5rem;
  --h2-font-size: 2rem;
  --content-max-width: 52rem;
  --footer-bg: #333;
  --footer-color: var(--sidebar-left-text);
}