grafana/public/sass/_variables.light.scss

// Cosmo 2.3.2
// Variables
// --------------------------------------------------


// Global values
// --------------------------------------------------


// Grays
// -------------------------
$black:                 #000;
$gray-darker:           lighten(#000, 11.5%); // #222
$gray-dark:             lighten(#000, 20%);   // #333
$gray:                  lighten(#000, 33.5%); // #555
$gray-light:            lighten(#000, 60%);   // #999
$gray-light2:           lighten(#000, 70%);   // #999
$gray-lighter:          lighten(#000, 96.5%); // #eee
$gray-lightest:         lighten(#000, 98%); // #eee
$white:                 #fff;


// Accent colors
// -------------------------
$blue:             	   	#2AB2E4;
$blue-dark:              #75CAEB;
$green:                 #28B62C;
$red:                   #FF4136;
$yellow:                #FF851B;
$orange:                #FF7518;
$pink:                  #E671B8;
$purple:                #9954BB;
$variable:              #2AB2E4;

$brand-primary:         $blue-dark;
$brand-success:         $green;
$brand-warning:         $orange;
$brand-danger:          $red;

// Status colors
// -------------------------
$online:                #01A64F;
$warn:                  #F79520;
$critical:              #EC2128;

// Scaffolding
// -------------------------

$body-bg:  		  $white;
$page-bg:  		  $white;
$body-color:    $gray;
$text-color:    $gray;

// Links
// -------------------------
$link-color:             $gray;
$link-color-disabled:    lighten($link-color,30%);
$link-hover-color:       darken($link-color, 20%);

// Typography
// -------------------------
$headings-color:         $text-color;
$abbr-border-color: 	 $gray-light !default;
$text-muted: 			 darken($link-color,30%);

$blockquote-small-color:  $gray-light !default;
$blockquote-border-color: $gray-lighter !default;

$hr-border-color: rgba(0,0,0,.1) !default;

// Components
$component-active-color: #fff !default;
$component-active-bg:    $brand-primary !default;

// Panel
// -------------------------

$panel-bg: 		    $gray-lightest;
$panel-border: 	  solid 1px $gray-lighter;

$divider-border-color: 		$gray-light;

// Submenu
$submenuBackground:     rgb(218, 217, 217);
$submenuBorder:         $white;

// Graphite Target Editor
$tight-form-border:     #ddd;
$tight-form-bg:     		#efefef;

$tight-form-func-bg: 			darken($tight-form-bg, 5%);
$tight-form-func-highlight-bg: 	darken($tight-form-bg, 10%);

$modal-background: 		$body-bg;
$code-tag-bg: 	#ddd;

// Lists
$grafanaListBackground:  	     darken($gray-lighter,5%);
$grafanaListAccent:            darken($gray-lighter,8%);
$grafanaListBorderTop:         #eee;
$grafanaListBorderBottom:      #eee;
$grafanaListHighlight:         darken($gray-lighter,10%);
$grafanaListHighlightContrast: #ddd;
$grafanaListMainLinkColor:     $text-color;


// Tables
// -------------------------
$table-bg:                   transparent; // overall background-color
$table-bg-accent:            #f9f9f9; // for striping
$table-bg-hover:             #E8F8FD; // for hover
$table-bg-active:            $table-bg-hover !default;
$table-border:               #ddd; // table and cell border


// Scrollbars
$scrollbarBackground: $gray-lighter;
$scrollbarBackground2: $gray-lighter;
$scrollbarBorder: $gray-light;

// Buttons
// -------------------------
$btnBackground:                     $gray-lighter;
$btnBackgroundHighlight:            darken($gray-lighter, 15%);
$btnBorder:                         #bbb;

$btnPrimaryBackground:              lighten($blue, 3%);
$btnPrimaryBackgroundHighlight:     darken($blue, 3%);

$btnInfoBackground:                 lighten($purple, 3%);
$btnInfoBackgroundHighlight:        darken($purple, 3%);

$btnSuccessBackground:              lighten($green, 3%);
$btnSuccessBackgroundHighlight:     darken($green, 3%);

$btnWarningBackground:              lighten($orange, 3%);
$btnWarningBackgroundHighlight:     darken($orange, 3%);

$btnDangerBackground:               lighten($red, 3%);
$btnDangerBackgroundHighlight:      darken($red, 3%);

$btnInverseBackground:              $gray-lighter;
$btnInverseBackgroundHighlight:     darken($gray-lighter, 5%);
$btnInverseText:                    $black;
$btnInverseBorder:                  $gray-light;

$btnText:              				$gray-lighter;

$iconContainerBackground:			      $white;
$iconContainerBackgroundHighlight:	lighten($white, 5%);
$iconContainerBorder:				        1px solid rgba(0,0,0, 0.05);
$iconContainerShadow:				        0 0 14px 2px rgba(0,0,0, 0.05);


// Forms
// -------------------------
$input-bg:                       $white;
$input-bg-disabled:              $gray-lighter;

$input-color:                    #020202;
$input-border-color:             $gray-lighter;
$input-box-shadow:               inset 0 1px 1px rgba(0,0,0,.075) !default;
$input-border-focus:             #66afe9 !default;
$input-box-shadow-focus:         rgba(102,175,233,.6) !default;
$input-color-placeholder:        #999 !default;
$input-label-bg:	        		   #f8f8f8;

// Sidemenu
// -------------------------
$sideMenuBackground:            $panel-bg;
$sideMenuBackgroundHighlight:   darken($sideMenuBackground, 4%);

// search
$searchShadow: 0 5px 30px 0 lighten($gray-light, 30%);

// Dropdowns
// -------------------------
$dropdownBackground:            $white;
$dropdownBorder:                $tight-form-border;
$dropdownDividerTop:            #e5e5e5;
$dropdownDividerBottom:         $white;
$dropdownDivider:               $dropdownDividerTop;
$dropdownTitle:                 #333;

$dropdownLinkColor:             $gray-dark;
$dropdownLinkColorHover:        $white;
$dropdownLinkColorActive:       $white;

$dropdownLinkBackgroundActive:  $blue;
$dropdownLinkBackgroundHover:   $blue;


// COMPONENT VARIABLES
// --------------------------------------------------


// Input placeholder text color
// -------------------------
$placeholderText:         $gray-light;


// Hr border color
// -------------------------
$hrBorder:                $gray-lighter;


// Horizontal forms & lists
// -------------------------
$horizontalComponentOffset:       180px;


// Wells
// -------------------------
$wellBackground:                  $gray-lighter;


// 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-light;
$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:                lighten($purple,10%);
$infoBackground:          $purple;
$infoBorder:              transparent;


// Tooltips and popovers
// -------------------------
$tooltipColor:            $white;
$tooltipBackground:       $gray-dark;
$tooltipArrowWidth:       5px;
$tooltipArrowColor:       $tooltipBackground;
$tooltipLinkColor:        darken($white,11%);

$popoverBackground:       $white;
$popoverArrowWidth:       15px;
$popoverArrowColor:       $white;
$popoverTitleBackground:  $white;

// Special enhancement for popovers
$popoverArrowOuterWidth:  $popoverArrowWidth + 1;
$popoverArrowOuterColor:  rgba(0,0,0,.25);

// images
$checkboxImageUrl: '../img/checkbox_white.png';