diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index f157f6b3979..300f30a514b 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.scss @@ -6,17 +6,17 @@ // ------------------------- $black: #000; $gray: #bbb; -$gray-dark: #262626; -$gray-darker: #1f1f1f; +$gray-dark: #262626; +$gray-darker: #1f1f1f; -$gray-light: #ADAFAE; -$gray-lighter: #BBBFC2; +$gray-light: #ADAFAE; +$gray-lighter: #BBBFC2; $white: #fff; // Accent colors // ------------------------- $blue: #33B5E5; -$blue-dark: #005f81; +$blue-dark: #005f81; $green: #669900; $red: #CC3900; $yellow: #ECBB13; @@ -33,9 +33,10 @@ $critical: #ed2e18; // grafana Variables // ------------------------- -$grafanaPanelBackground: $gray-darker; -$grafanaPanelBorder: solid 1px $gray-dark; -$grafanaTriggerBorder: solid 1px #555; +$panel-bg: $gray-darker; +$panel-border: solid 1px $gray-dark; + +$divider-border-color: #555; // Graphite Target Editor $grafanaTargetBorder: $black; diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss index 24b2e18ce0d..15170fe82f6 100644 --- a/public/sass/_variables.light.scss +++ b/public/sass/_variables.light.scss @@ -10,11 +10,11 @@ // Grays // ------------------------- $black: #000; -$gray-darker: lighten(#000, 11.5%); // #222 -$gray-dark: lighten(#000, 20%); // #333 +$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-lighter: lighten(#000, 97.5%); // #eee +$gray-light: lighten(#000, 60%); // #999 +$gray-lighter: lighten(#000, 97.5%); // #eee $white: #fff; @@ -38,9 +38,10 @@ $critical: #EC2128; // grafana Variables // ------------------------- -$grafanaPanelBackground: $gray-lighter; -$grafanaPanelBorder: solid 1px #ddd; -$grafanaTriggerBorder: solid 1px $gray-light; +$panel-bg: $gray-lighter; +$panel-border: solid 1px #ddd; + +$divider-border-color: $gray-light; // Scaffolding // ------------------------- @@ -178,7 +179,7 @@ $labelBackground: #f8f8f8; // Sidemenu // ------------------------- -$sideMenuBackground: $grafanaPanelBackground; +$sideMenuBackground: $panel-bg; $sideMenuBackgroundHighlight: darken($sideMenuBackground, 4%); // search diff --git a/public/sass/components/_dashboard.scss b/public/sass/components/_dashboard.scss index 2ce928c955c..ef6842f6605 100644 --- a/public/sass/components/_dashboard.scss +++ b/public/sass/components/_dashboard.scss @@ -47,7 +47,7 @@ .row-close { padding: 0px; margin: 0px; - background: $grafanaPanelBackground; + background: $panel-bg; text-align: center; } @@ -116,9 +116,9 @@ div.flot-text { } .panel-container { - background-color: $grafanaPanelBackground; + background-color: $panel-bg; position: relative; - border: $grafanaPanelBorder; + border: $panel-border; &:hover { .panel-actions { display: block; @@ -185,7 +185,7 @@ div.flot-text { position: absolute; border-left: 31px solid transparent; border-right: 30px solid transparent; - border-bottom: 27px solid $grafanaPanelBackground; + border-bottom: 27px solid $panel-bg; left: 0; bottom: 0; } diff --git a/public/sass/components/_filter-list.scss b/public/sass/components/_filter-list.scss index 73f8057b686..045f4115dbc 100644 --- a/public/sass/components/_filter-list.scss +++ b/public/sass/components/_filter-list.scss @@ -16,7 +16,7 @@ .filter-list > li { padding: 10px; margin-bottom: 2px; - background: $grafanaPanelBackground; + background: $panel-bg; &:last-child { margin: 0; diff --git a/public/sass/components/_filter-table.scss b/public/sass/components/_filter-table.scss index 28fcefb1b3d..75546af29a1 100644 --- a/public/sass/components/_filter-table.scss +++ b/public/sass/components/_filter-table.scss @@ -49,7 +49,7 @@ } .filter-table .expanded { - border-color: $grafanaPanelBackground; + border-color: $panel-bg; } .filter-table .expanded > td { diff --git a/public/sass/components/_gfbox.scss b/public/sass/components/_gfbox.scss index aae6f7402d0..d1d85ad98a1 100644 --- a/public/sass/components/_gfbox.scss +++ b/public/sass/components/_gfbox.scss @@ -1,6 +1,6 @@ .gf-box { margin: 10px 5px; - background-color: $grafanaPanelBackground; + background-color: $panel-bg; position: relative; border: 1px solid $grafanaTargetFuncBackground; } diff --git a/public/sass/components/_modals.scss b/public/sass/components/_modals.scss index 6165766e80f..a7a96956667 100644 --- a/public/sass/components/_modals.scss +++ b/public/sass/components/_modals.scss @@ -23,7 +23,7 @@ position: fixed; z-index: $zindexModal; width: 100%; - background-color: $grafanaPanelBackground; + background-color: $panel-bg; @include box-shadow(0 3px 7px rgba(0,0,0,0.3)); @include background-clip(padding-box); outline: none; @@ -38,7 +38,7 @@ .modal-header { padding: 9px 15px; - border-bottom: 1px solid $grafanaPanelBackground; + border-bottom: 1px solid $panel-bg; } // Body (where all modal content resides) @@ -55,8 +55,8 @@ // Footer (for actions) .modal-footer { padding: 14px 15px 15px; - border-top: 1px solid $grafanaPanelBackground; - background-color: $grafanaPanelBackground; + border-top: 1px solid $panel-bg; + background-color: $panel-bg; text-align: right; // right align buttons @include clearfix(); // clear it in case folks use .pull-* classes on buttons } diff --git a/public/sass/components/_search.scss b/public/sass/components/_search.scss index 1a117f252b9..ced2963f414 100644 --- a/public/sass/components/_search.scss +++ b/public/sass/components/_search.scss @@ -7,8 +7,8 @@ width: 700px; box-shadow: $searchShadow; padding: 10px; - background-color: $grafanaPanelBackground; - border: $grafanaPanelBorder; + background-color: $panel-bg; + border: $panel-border; .label-tag { margin-left: 6px; diff --git a/public/sass/components/_submenu.scss b/public/sass/components/_submenu.scss index 1d88a669904..46c5f08554e 100644 --- a/public/sass/components/_submenu.scss +++ b/public/sass/components/_submenu.scss @@ -18,8 +18,8 @@ margin-right: 20px; display: inline-block; border-radius: 3px; - background-color: $grafanaPanelBackground; - border: $grafanaPanelBorder; + background-color: $panel-bg; + border: $panel-border; margin-right: 10px; display: inline-block; diff --git a/public/sass/components/_tables_lists.scss b/public/sass/components/_tables_lists.scss index f6d1edf35bc..30983225585 100644 --- a/public/sass/components/_tables_lists.scss +++ b/public/sass/components/_tables_lists.scss @@ -4,14 +4,14 @@ th { text-align: left; padding: 5px 10px; - border-bottom: 4px solid $grafanaPanelBackground; + border-bottom: 4px solid $panel-bg; } tr td { background-color: $grafanaListBackground; padding: 5px 10px; white-space: nowrap; - border-bottom: 4px solid $grafanaPanelBackground; + border-bottom: 4px solid $panel-bg; &.nobg { background-color: transparent; } diff --git a/public/sass/components/_tabs.scss b/public/sass/components/_tabs.scss index 792314df2d3..ba12f9df549 100644 --- a/public/sass/components/_tabs.scss +++ b/public/sass/components/_tabs.scss @@ -1,6 +1,6 @@ .nav-tabs-alt { - border-bottom: $grafanaTriggerBorder; + border-bottom: 1px solid $divider-border-color; padding-left: 10px; margin: 0 0 10px 0; @@ -16,9 +16,9 @@ li.active > a:focus, li.active > a:hover { @include border-radius(3px); - border: $grafanaTriggerBorder; + border: 1px solid $divider-border-color; background-color: transparent; - border-bottom: 1px solid $grafanaPanelBackground; + border-bottom: 1px solid $panel-bg; color: $linkColor; } @@ -33,7 +33,7 @@ .tab-content { padding: 10px; - background-color: $grafanaPanelBackground; + background-color: $panel-bg; } } diff --git a/public/sass/components/_timepicker.scss b/public/sass/components/_timepicker.scss index d703e78e329..275d4a336a0 100644 --- a/public/sass/components/_timepicker.scss +++ b/public/sass/components/_timepicker.scss @@ -16,14 +16,14 @@ margin: -5px -10px 10px 5px; padding: 10px 20px; float: right; - background-color: $grafanaPanelBackground; + background-color: $panel-bg; @include box-shadow($navbarDropdownShadow); } .gf-timepicker-absolute-section { width: 300px; float: left; - border-right: $grafanaTriggerBorder; + border-right: 1px solid $divider-border-color; padding: 0 0 0 20px; select { width: 183px; diff --git a/public/sass/pages/_apps.scss b/public/sass/pages/_apps.scss index 35e4f8522cd..73959edf50b 100644 --- a/public/sass/pages/_apps.scss +++ b/public/sass/pages/_apps.scss @@ -1,7 +1,7 @@ .app-edit-logo-box { padding: 1.2rem; - background: $grafanaPanelBackground; + background: $panel-bg; text-align: center; img { max-width: 7rem; @@ -14,7 +14,7 @@ margin: 0 0 0 2rem; li { - background: $grafanaPanelBackground; + background: $panel-bg; margin-top: 4px; padding: 0.2rem 1rem; } diff --git a/public/sass/pages/_login.scss b/public/sass/pages/_login.scss index b79260522f8..f4a3458d038 100644 --- a/public/sass/pages/_login.scss +++ b/public/sass/pages/_login.scss @@ -27,7 +27,7 @@ } .login-inner-box { - background: $grafanaPanelBackground; + background: $panel-bg; } .login-tab-header { @@ -144,7 +144,7 @@ .invite-box { text-align: center; border: 1px solid $grafanaTargetFuncBackground; - background-color: $grafanaPanelBackground; + background-color: $panel-bg; width: 800px; margin-left: auto; margin-right: auto; diff --git a/public/sass/pages/_playlist.scss b/public/sass/pages/_playlist.scss index 782d49d584d..ac17cb02d94 100644 --- a/public/sass/pages/_playlist.scss +++ b/public/sass/pages/_playlist.scss @@ -4,7 +4,7 @@ position: relative; width: 700px; box-shadow: 0px 0px 55px 0px black; - background-color: $grafanaPanelBackground; + background-color: $panel-bg; .label-tag { margin-left: 6px;