// Cosmo 2.3.2 // Variables // -------------------------------------------------- // Global values // -------------------------------------------------- // Grays // ------------------------- $black: #000; // ------------------------- $black: #000; $dark-1: #141414; $dark-2: #1f1d1d; $dark-3: #292929; $dark-4: #373737; $dark-5: #444444; $gray-1: #555555; $gray-2: #7B7B7B; $gray-3: #b3b3b3; $gray-4: #D8D9DA; $gray-5: #ECECEC; $gray-6: #f4f5f8; $gray-7: #fbfbfb; $white: #fff; // Accent colors // ------------------------- $blue: #2AB2E4; $blue-dark: #3CAAD6; $green: #28B62C; $red: #FF4136; $yellow: #FF851B; $orange: #Ff7941; $pink: #E671B8; $purple: #9954BB; $variable: #2AB2E4; $brand-primary: $orange; $brand-success: $green; $brand-warning: $orange; $brand-danger: $red; $brand-text-highlight: #f7941d; // Status colors // ------------------------- $online: #01A64F; $warn: #F79520; $critical: #EC2128; // Scaffolding // ------------------------- $body-bg: $white; $page-bg: $white; $body-color: $gray-1; $text-color: $gray-1; $text-color-strong: $white; $text-color-weak: $gray-1; $text-color-faint: $gray-3; $text-color-emphasis: $dark-5; $text-shadow-strong: none; $text-shadow-faint: none; // gradients $brand-gradient: linear-gradient(to right, rgba(255,213,0,1.0) 0%, rgba(255,68,0,1.0) 99%, rgba(255,68,0,1.0) 100%); $page-gradient: linear-gradient(60deg, transparent 70%, darken($page-bg, 4%) 98%); // Links // ------------------------- $link-color: $gray-1; $link-color-disabled: lighten($link-color, 30%); $link-hover-color: darken($link-color, 20%); $external-link-color: $blue; // Typography // ------------------------- $headings-color: $text-color; $abbr-border-color: $gray-2 !default; $text-muted: darken($link-color,30%); $blockquote-small-color: $gray-2 !default; $blockquote-border-color: $gray-3 !default; $hr-border-color: $dark-3 !default; // Components $component-active-color: $white !default; $component-active-bg: $brand-primary !default; // Panel // ------------------------- $panel-bg: $gray-7; $panel-border: solid 1px $gray-6; $divider-border-color: $gray-2; // Graphite Target Editor $tight-form-border: $gray-4; $tight-form-bg: $gray-6; $tight-form-func-bg: $gray-5; $tight-form-func-highlight-bg: $gray-6; $modal-background: $body-bg; $code-tag-bg: $dark-5; // Lists $grafanaListBackground: $gray-6; $grafanaListAccent: $gray-5; $grafanaListBorderTop: $gray-3; $grafanaListBorderBottom: $gray-3; $grafanaListHighlight: $gray-5; $grafanaListMainLinkColor: $text-color; // Tables // ------------------------- $table-bg: transparent; // overall background-color $table-bg-accent: $gray-5; // for striping $table-bg-hover: $gray-5; // for hover $table-bg-active: $table-bg-hover !default; $table-border: $gray-3; // table and cell border // Scrollbars $scrollbarBackground: $gray-5; $scrollbarBackground2: $gray-5; $scrollbarBorder: $gray-4; // Buttons // ------------------------- $btn-primary-bg: $brand-primary; $btn-primary-bg-hl: lighten($brand-primary, 8%); $btn-secondary-bg: $blue-dark; $btn-secondary-bg-hl: lighten($blue-dark, 4%); $btn-success-bg: lighten($green, 3%); $btn-success-bg-hl: darken($green, 3%); $btn-warning-bg: lighten($orange, 3%); $btn-warning-bg-hl: darken($orange, 3%); $btn-danger-bg: lighten($red, 3%); $btn-danger-bg-hl: darken($red, 3%); $btn-inverse-bg: $gray-5; $btn-inverse-bg-hl: darken($gray-5, 5%); $btn-inverse-text-color: $dark-4; $btn-link-color: $gray-1; $iconContainerBackground: $white; // Forms // ------------------------- $input-bg: $gray-7; $input-bg-disabled: $gray-5; $input-color: $dark-3; $input-border-color: $gray-5; $input-box-shadow: none; $input-border-focus: $blue !default; $input-box-shadow-focus: $blue !default; $input-color-placeholder: $gray-4 !default; $input-label-bg: $gray-6; // Sidemenu // ------------------------- $side-menu-bg: $body-bg; $side-menu-item-hover-bg: $gray-6; $side-menu-opacity: 0.97; // search $search-shadow: 0 5px 30px 0 lighten($gray-2, 30%); // Dropdowns // ------------------------- $dropdownBackground: $white; $dropdownBorder: $tight-form-border; $dropdownDividerTop: $gray-6; $dropdownDividerBottom: $white; $dropdownDivider: $dropdownDividerTop; $dropdownTitle: $gray-3; $dropdownLinkColor: $dark-3; $dropdownLinkColorHover: $link-color; $dropdownLinkColorActive: $link-color; $dropdownLinkBackgroundActive: $gray-6; $dropdownLinkBackgroundHover: $gray-6; // COMPONENT VARIABLES // -------------------------------------------------- // Input placeholder text color // ------------------------- $placeholderText: $gray-2; // Hr border color // ------------------------- $hrBorder: $gray-3; // Horizontal forms & lists // ------------------------- $horizontalComponentOffset: 180px; // Wells // ------------------------- $wellBackground: $gray-3; // Navbar // ------------------------- $navbarHeight: 52px; $navbarBackgroundHighlight: #f8f8f8; $navbarBackground: #f8f8f8; $navbarBorder: 1px solid $tight-form-border; $navbarText: #666; $navbarLinkColor: #666; $navbarLinkColorHover: #333; $navbarLinkColorActive: #555; $navbarLinkBackgroundHover: transparent; $navbarLinkBackgroundActive: darken($navbarBackground, 6.5%); $navbarDropdownShadow: inset 0px 4px 7px -4px darken($body-bg, 20%); $navbarBrandColor: $navbarLinkColor; $navbarButtonBackground: lighten($navbarBackground, 3%); $navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%); // Pagination // ------------------------- $paginationBackground: $gray-2; $paginationBorder: transparent; $paginationActiveBackground: $blue; // Form states and alerts // ------------------------- $state-warning-text: lighten($orange, 10%); $state-warning-bg: $orange; $warningBorder: transparent; $errorText: lighten($red, 10%); $errorBackground: $red; $errorBorder: transparent; $successText: lighten($green, 10%); $successBackground: $green; $successBorder: transparent; $infoText: $blue; $infoBackground: $blue-dark; $infoBorder: transparent; // popover $popover-bg: $gray-5; $popover-color: $text-color; $popover-help-bg: $blue-dark; $popover-help-color: $gray-6; // Tooltips and popovers // ------------------------- $tooltipColor: $text-color; $tooltipBackground: $gray-5; $tooltipArrowWidth: 5px; $tooltipArrowColor: $tooltipBackground; $tooltipLinkColor: $link-color; $graph-tooltip-bg: $gray-5; // images $checkboxImageUrl: '../img/checkbox_white.png'; // cards $card-background: linear-gradient(135deg, $gray-5, $gray-6); $card-background-hover: linear-gradient(135deg, $gray-6, $gray-7); $card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, .1), 1px 1px 0 0 rgba(0, 0, 0, .1);