| // Licensed under the Apache License, Version 2.0 (the "License"); you may not |
| // use this file except in compliance with the License. You may obtain a copy of |
| // the License at |
| // |
| // http://www.apache.org/licenses/LICENSE-2.0 |
| // |
| // Unless required by applicable law or agreed to in writing, software |
| // distributed under the License is distributed on an "AS IS" BASIS, WITHOUT |
| // WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the |
| // License for the specific language governing permissions and limitations under |
| // the License. |
| |
| // Import bootstrap functions here so the color utilities can be used below |
| @import '~bootstrap/scss/functions'; |
| // _variable_overrides.scss is auto-generated by the 'gen_initialize' Grunt task when starting the dev server or creating a release. |
| @import 'variable_overrides'; |
| |
| // ============================================================================================= |
| // Note: Fauxton colors/styling must be defined first so they can be referrenced when overriding |
| // the Bootstrap settings at the end of this file. |
| // ============================================================================================= |
| |
| // ============================================================================================= |
| // Fauxton's base colors and styles. |
| // All color literals should only be defined here, so it's easy to reference the complete array |
| // of colors used in Fauxton. This helps in keeping Fauxton's color scheme consistent and |
| // short. |
| // ============================================================================================= |
| |
| // base |
| $cf-background01: #f2f2f2 !default; // main page background color. former $background |
| $cf-background02: #333333 !default; // background for overlay panels, trays |
| $cf-background03: #564e4c !default; // background for items in dropdowns, main nav bar |
| $cf-background-01-alt: #f7f7f7 !default; // sidebar subitems, stripped table |
| $cf-brand-highlight: #af2d24 !default; // former $brandHighlight |
| $cf-brand-hightlight-hover: #e73d34 !default; // former $hoverHighlight |
| $cf-border-color01: #cccccc !default; |
| $cf-border-color02: #999999 !default; |
| $cf-primary: #208019 !default; |
| $cf-secondary: #0076ad !default; |
| $cf-danger: #e00025 !default; |
| $cf-success: #448c11 !default; |
| $cf-info: #329898 !default; |
| $cf-error: #d9534f !default; |
| $cf-warning: #d9c74f !default; |
| $cf-white: #ffffff !default; |
| $cf-black: #000000 !default; |
| $cf-transparent: transparent !default; |
| |
| // typography |
| $cf-text01: #333333 !default; // default text color for pages |
| $cf-text02: #ffffff !default; // text color for overlay panels, trays |
| $cf-text03: #d9d9d9 !default; // text color for items in dropdowns, main nav bar |
| $cf-text04: #767f89 !default; // sidebar subitems |
| $cf-text05: #666666 !default; // font-icon, top header icons/text |
| $cf-text01-muted: #999999 !default; |
| $cf-text02-muted: #bbbbbb !default; |
| $cf-sans-font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !default; |
| |
| // padding and margins |
| $cf-main-content-padding: 1rem !default; |
| $cf-border-radius: 0.375rem !default; |
| |
| // shadows |
| $cf-box-shadow: 2px 2px rgba(0, 0, 0, 0.2) !default; |
| |
| // ============================================================================================= |
| // Fauxton's component-specific styles |
| // The variables below must NOT use color literals. Instead refering one of the base colors above. |
| // The only is the code editor since it has its own color scheme for syntax highlighting. |
| // ============================================================================================= |
| |
| // buttons |
| $cf-disable-mix-amount: 15% !default; |
| $cf-btn-active-bg-shade-amount: 20% !default; |
| |
| $cf-btn-primary-bg: $cf-primary !default; |
| $cf-btn-primary-color: $cf-white !default; |
| $cf-btn-primary-border: $cf-btn-primary-bg !default; |
| $cf-btn-primary-bg-disabled: tint-color( |
| $cf-btn-primary-bg, |
| $cf-disable-mix-amount |
| ) !default; |
| $cf-btn-primary-color-disabled: tint-color( |
| $cf-btn-primary-color, |
| $cf-disable-mix-amount |
| ) !default; |
| $cf-btn-primary-bg-hover: $cf-brand-hightlight-hover !default; |
| $cf-btn-primary-color-hover: $cf-btn-primary-color !default; |
| |
| $cf-btn-secondary-bg: $cf-white !default; |
| $cf-btn-secondary-color: $cf-text01 !default; |
| $cf-btn-secondary-border: $cf-border-color02 !default; |
| $cf-btn-secondary-bg-disabled: tint-color( |
| $cf-btn-secondary-bg, |
| $cf-disable-mix-amount |
| ) !default; |
| $cf-btn-secondary-color-disabled: tint-color( |
| $cf-btn-secondary-color, |
| $cf-disable-mix-amount |
| ) !default; |
| $cf-btn-secondary-bg-hover: $cf-brand-hightlight-hover !default; |
| $cf-btn-secondary-color-hover: $cf-white !default; |
| |
| $cf-btn-danger-bg: $cf-danger !default; |
| $cf-btn-danger-color: $cf-white !default; |
| $cf-btn-danger-border: $cf-btn-danger-bg !default; |
| $cf-btn-danger-bg-disabled: tint-color( |
| $cf-btn-danger-bg, |
| $cf-disable-mix-amount |
| ) !default; |
| $cf-btn-danger-color-disabled: tint-color( |
| $cf-btn-danger-color, |
| $cf-disable-mix-amount |
| ) !default; |
| $cf-btn-danger-bg-hover: $cf-brand-hightlight-hover !default; |
| $cf-btn-danger-color-hover: $cf-btn-danger-color !default; |
| |
| $cf-btn-cancel-bg: transparent !default; |
| $cf-btn-cancel-color: $cf-text05 !default; |
| $cf-btn-cancel-border: $cf-btn-cancel-bg !default; |
| $cf-btn-cancel-bg-disabled: transparent !default; |
| $cf-btn-cancel-color-disabled: tint-color( |
| $cf-btn-cancel-color, |
| $cf-disable-mix-amount |
| ) !default; |
| $cf-btn-cancel-bg-hover: transparent !default; |
| $cf-btn-cancel-color-hover: $cf-brand-hightlight-hover !default; |
| |
| $cf-text-fonticon01: $cf-text05 !default; |
| |
| // code editor or viewer |
| $cf-code-bg: #4d4d4d !default; |
| $cf-code-gutter-bg: #3a3a3a !default; |
| $cf-code-cursor-color: $cf-white !default; |
| $cf-code-btn-string-edit-color: $cf-white !default; |
| $cf-code-btn-string-edit-color-hover: $cf-brand-hightlight-hover !default; |
| $cf-code-active-bg: $cf-black !default; |
| $cf-code-selection-bg: rgba(29, 151, 215, 0.5) !default; |
| $cf-code-token-variable-color: $cf-white !default; |
| $cf-code-token-constant-color: #88d5f6 !default; |
| $cf-code-token-boolean-color: #f8c072 !default; |
| $cf-code-token-string-color: #18e2b6 !default; |
| $cf-code-token-muted: $cf-text02-muted !default; |
| |
| // documents list (JSON view) |
| $cf-jsondocs-header-bg: $cf-code-gutter-bg !default; |
| $cf-jsondocs-header-label: $cf-text03 !default; |
| $cf-jsondocs-header-docid: $cf-text03 !default; |
| $cf-jsondocs-header-border: $cf-black !default; |
| $cf-jsondocs-data-border: $cf-black !default; |
| $cf-jsondocs-check-bg: $cf-background01 !default; |
| $cf-jsondocs-check-border: 2px solid $cf-border-color02 !default; |
| $cf-jsondocs-check-border-hover: 2px solid $cf-border-color01 !default; |
| $cf-jsondocs-check-checked-bg: $cf-background01 !default; |
| $cf-jsondocs-check-checked-border: 2px solid $cf-border-color02 !default; |
| |
| // dropdown menus |
| $cf-dropdown-bg: $cf-background02 !default; |
| $cf-dropdown-color: $cf-text02 !default; |
| $cf-dropdown-heading-bg: $cf-background02 !default; |
| $cf-dropdown-heading-color: $cf-text02 !default; |
| $cf-dropdown-item-bg: $cf-background03 !default; |
| $cf-dropdown-item-color: $cf-text03 !default; |
| $cf-dropdown-item-bg-hover: $cf-brand-hightlight-hover !default; |
| $cf-dropdown-item-color-hover: $cf-white !default; |
| |
| // forms |
| $cf-input-bg: $cf-white !default; |
| $cf-check-radio-bg: $cf-secondary !default; |
| |
| // links |
| $cf-link-color: $cf-brand-highlight !default; |
| $cf-link-color-hover: $cf-brand-hightlight-hover !default; |
| $cf-link-decoration: none !default; |
| $cf-link-decoration-hover: none !default; |
| |
| // main nav bar |
| $cf-navbar-width: 220px !default; |
| $cf-navbar-width-collapsed: 64px !default; |
| |
| $cf-navbar-color: $cf-text03 !default; |
| $cf-navbar-bg: $cf-background02 !default; |
| $cf-navbar-item-bg: $cf-background03 !default; |
| $cf-navbar-item-color: $cf-text03 !default; |
| $cf-navbar-item-bg-hover: $cf-brand-hightlight-hover !default; |
| $cf-navbar-item-color-hover: $cf-white !default; |
| $cf-navbar-item-bg-active: $cf-brand-highlight !default; |
| $cf-navbar-item-color-active: $cf-white !default; |
| $cf-navbar-item-badge-bg: $cf-link-color-hover !default; |
| $cf-navbar-item-badge-bg-hover: $cf-navbar-item-color-hover !default; |
| $cf-navbar-item-badge-bg-active: $cf-navbar-item-color-active !default; |
| |
| // notifications |
| $cf-alert-bg: $cf-white !default; |
| $cf-alert-color: $cf-text01 !default; |
| $cf-alert-info-color: $cf-info !default; |
| $cf-alert-success-color: $cf-success !default; |
| $cf-alert-error-color: $cf-error !default; |
| |
| // pagination |
| $cf-pagination-bg: $cf-white !default; |
| $cf-pagination-color: $cf-link-color !default; |
| $cf-pagination-color-disabled: $cf-text01-muted !default; |
| $cf-pagination-border: $cf-border-color01 !default; |
| $cf-pagination-bg-hover: $cf-background01 !default; |
| $cf-pagination-color-hover: $cf-link-color !default; |
| $cf-pagination-active-bg: $cf-brand-highlight !default; |
| $cf-pagination-active-color: $cf-text02 !default; |
| |
| // partition selector |
| $cf-partition-selector-bg: transparent !default; |
| $cf-partition-selector-color: $cf-text-fonticon01 !default; |
| $cf-partition-selector-color-hover: $cf-brand-hightlight-hover !default; |
| $cf-partition-selector-color-active: $cf-brand-highlight !default; |
| |
| // pills |
| $cf-pill-bg: $cf-background03 !default; |
| $cf-pill-color: $cf-text03 !default; |
| $cf-pill-color-hover: $cf-brand-hightlight-hover !default; |
| |
| // sidebar |
| $cf-sidebar-width: 330px !default; |
| $cf-sidebar-bg: $cf-white !default; |
| $cf-sidebar-color: $cf-text01 !default; |
| $cf-sidebar-icon-color: $cf-text-fonticon01 !default; |
| $cf-sidebar-icon-color-hover: $cf-brand-hightlight-hover !default; |
| $cf-sidebar-bg-hover: $cf-brand-hightlight-hover !default; |
| $cf-sidebar-color-hover: $cf-white !default; |
| $cf-sidebar-bg-active: $cf-background01 !default; |
| $cf-sidebar-color-active: $cf-brand-highlight !default; |
| $cf-sidebar-subitem-bg: $cf-background-01-alt !default; |
| $cf-sidebar-subitem-color: $cf-text04 !default; |
| $cf-sidebar-subitem-bg-hover: $cf-brand-hightlight-hover !default; |
| $cf-sidebar-subitem-color-hover: $cf-white !default; |
| |
| // slider |
| $cf-slider-bg: $cf-background01 !default; |
| $cf-slider-bg-highlight: $cf-brand-highlight !default; |
| $cf-slider-border-color: $cf-border-color02 !default; |
| |
| // page header |
| $cf-page-header-border: $cf-border-color01 !default; |
| |
| // tabs |
| $cf-tab-wrapper-bg: $cf-transparent !default; |
| $cf-tab-element-bg: $cf-background01 !default; |
| $cf-tab-element-color: $cf-text01 !default; |
| $cf-tab-element-bg-active: $cf-transparent !default; |
| $cf-tab-element-color-active: $cf-tab-element-color !default; |
| $cf-tab-element-indicator-active: $cf-link-color-hover !default; |
| $cf-tab-element-bg-hover: $cf-transparent !default; |
| $cf-tab-element-color-hover: $cf-link-color-hover !default; |
| $cf-tab-element-indicator-hover: $cf-tab-element-indicator-active !default; |
| $cf-tab-element-badge: $cf-link-color-hover !default; |
| |
| // tables |
| $cf-table-stripped-bg: $cf-background-01-alt !default; |
| |
| // top header |
| $cf-topheader-bg: $cf-background01 !default; |
| $cf-topheader-color: $cf-text-fonticon01 !default; |
| $cf-topheader-title-color: $cf-text01 !default; |
| $cf-topheader-bg-hover: $cf-background01 !default; |
| $cf-topheader-color-hover: $cf-brand-hightlight-hover !default; |
| $cf-topheader-height: 64px !default; |
| |
| // tray |
| $cf-tray-body-bg: $cf-background02 !default; |
| $cf-tray-body-color: $cf-text02 !default; |
| |
| // logo paths can be set via settings.json |
| $largeLogoPath: '../../../../../assets/img/CouchDB-negative-logo.png' !default; |
| $smallLogoPath: '../../../../../assets/img/couchdb-logo.png' !default; |
| |
| // ============================================================================================= |
| // Bootstrap V5 variable overrides |
| // ============================================================================================= |
| |
| // globals |
| $body-bg: $cf-background01 !default; |
| $body-color: $cf-text01 !default; |
| $text-muted: $cf-text01-muted !default; |
| $font-family-base: $cf-sans-font-family !default; |
| $link-color: $cf-link-color !default; |
| $link-hover-color: $cf-link-color-hover !default; |
| $link-decoration: $cf-link-decoration !default; |
| $link-hover-decoration: $cf-link-decoration-hover !default; |
| $primary: $cf-primary !default; |
| $secondary: $cf-secondary !default; |
| $danger: $cf-danger !default; |
| $success: $cf-success !default; |
| $info: $cf-info !default; |
| $warning: $cf-warning !default; |
| |
| // dropdowns |
| $dropdown-bg: $cf-dropdown-bg !default; |
| $dropdown-color: $cf-dropdown-color !default; |
| |
| // forms |
| $input-btn-focus-color: rgba($cf-brand-highlight, 0.25) !default; |
| $input-focus-border-color: tint-color($cf-brand-highlight, 50%) !default; |
| $input-bg: $cf-input-bg !default; |
| $form-check-input-checked-bg-color: $cf-check-radio-bg !default; |
| $form-check-input-checked-border-color: $cf-check-radio-bg !default; |
| |
| // modals |
| $modal-backdrop-opacity: 0.5 !default; |
| |
| // pagination |
| $pagination-bg: $cf-pagination-bg !default; |
| $pagination-color: $cf-pagination-color !default; |
| $pagination-disabled-color: $cf-pagination-color-disabled !default; |
| $pagination-border-color: $cf-pagination-border !default; |
| // disabling border radius because paginatio buttons should always be square to match the footer. |
| $pagination-border-radius: 0 !default; |
| $pagination-active-bg: $cf-pagination-active-bg !default; |
| $pagination-active-color: $cf-pagination-active-color !default; |
| $pagination-hover-color: $cf-pagination-color-hover !default; |
| $pagination-hover-bg: $cf-pagination-bg-hover !default; |
| |
| // popover |
| $popover-bg: $cf-background02 !default; |
| $popover-body-color: $cf-text02 !default; |
| |
| // tables |
| $table-striped-bg: $cf-table-stripped-bg !default; |
| |
| // other |
| $enable-rounded: true !default; |