Skip to content

N
nexpie-grafana-theme
Commit 8eee4d8e by Torkel Ödegaard
Options

fix(dashboard): fixed white theme for new dashboard row look / dash edit mode, #6442

parent f3090d8c
Showing with 30 additions and 26 deletions
public/sass/_variables.dark.scss
...@@ -90,6 +90,8 @@ $component-active-bg: $brand-primary !default; ...@@ -90,6 +90,8 @@ $component-active-bg: $brand-primary !default;
// ------------------------- // -------------------------
$panel-bg: $dark-2; $panel-bg: $dark-2;
$panel-border: solid 1px $dark-3; $panel-border: solid 1px $dark-3;
$panel-drop-zone-bg: repeating-linear-gradient(-128deg, #111, #111 10px, #191919 10px, #222 20px);
$panel-menu-border: solid 1px black;
$divider-border-color: #555; $divider-border-color: #555;
...@@ -280,3 +282,6 @@ $dash-row-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, .1), 1px 1px 0 0 rgba(0, 0, 0, ...@@ -280,3 +282,6 @@ $dash-row-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, .1), 1px 1px 0 0 rgba(0, 0, 0,
// footer // footer
$footer-link-color: $gray-1; $footer-link-color: $gray-1;
$footer-link-hover: $gray-4; $footer-link-hover: $gray-4;
// Dashboard row
$dash-row-border-color: $dark-4
public/sass/_variables.light.scss
...@@ -97,6 +97,8 @@ $component-active-bg: $brand-primary !default; ...@@ -97,6 +97,8 @@ $component-active-bg: $brand-primary !default;
$panel-bg: $gray-7; $panel-bg: $gray-7;
$panel-border: solid 1px $gray-6; $panel-border: solid 1px $gray-6;
$panel-drop-zone-bg: repeating-linear-gradient(-128deg, $body-bg, $body-bg 10px, $gray-6 10px, $gray-6 20px);
$panel-menu-border: solid 1px white;
$divider-border-color: $gray-2; $divider-border-color: $gray-2;
...@@ -297,10 +299,9 @@ $card-background: linear-gradient(135deg, $gray-5, $gray-6); ...@@ -297,10 +299,9 @@ $card-background: linear-gradient(135deg, $gray-5, $gray-6);
$card-background-hover: linear-gradient(135deg, $gray-6, $gray-7); $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); $card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, .1), 1px 1px 0 0 rgba(0, 0, 0, .1);
// dash row
$dash-row-background: linear-gradient(135deg, $gray-5, $gray-6);
$dash-row-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, .1), 1px 1px 0 0 rgba(0, 0, 0, .1);
// footer // footer
$footer-link-color: $gray-3; $footer-link-color: $gray-3;
$footer-link-hover: $dark-5; $footer-link-hover: $dark-5;
// Dashboard row
$dash-row-border-color: $gray-4
public/sass/components/_row.scss
...@@ -58,7 +58,7 @@ ...@@ -58,7 +58,7 @@
a.active { a.active {
color: $link-color; color: $link-color;
background: $panel-bg; background: $panel-bg;
border: $panel-border; border: 1px solid $dash-row-border-color;
border-bottom: none; border-bottom: none;
position: relative; position: relative;
top: 1px; top: 1px;
...@@ -93,13 +93,13 @@ a.dash-row-header-actions--tight { ...@@ -93,13 +93,13 @@ a.dash-row-header-actions--tight {
.dash-edit-mode { .dash-edit-mode {
.dash-row-header { .dash-row-header {
display: flex; display: flex;
border-bottom: 1px solid $dark-4; border-bottom: 1px solid $dash-row-border-color;
border-right: 1px solid $dark-4; border-right: 1px solid $dash-row-border-color;
margin-right: 0; margin-right: 0;
} }
.dash-row-header::after { .dash-row-header::after {
content: ' '; content: ' ';
border-top: 1px solid $dark-4; border-top: 1px solid $dash-row-border-color;
width: 15px; width: 15px;
position: relative; position: relative;
} }
...@@ -107,23 +107,23 @@ a.dash-row-header-actions--tight { ...@@ -107,23 +107,23 @@ a.dash-row-header-actions--tight {
margin-bottom: $spacer; margin-bottom: $spacer;
} }
.dash-row-header-title { .dash-row-header-title {
border-left: 1px solid $dark-4; border-left: 1px solid $dash-row-border-color;
} }
.dash-row-header-title::before { .dash-row-header-title::before {
content: ' '; content: ' ';
border-top: 1px solid $dark-4; border-top: 1px solid $dash-row-border-color;
width: 15px; width: 15px;
position: absolute; position: absolute;
margin: -9px 0 0 -9px; margin: -9px 0 0 -9px;
} }
.panels-wrapper { .panels-wrapper {
padding: $panel-margin*2 $panel-margin 0 $panel-margin; padding: $panel-margin*2 $panel-margin 0 $panel-margin;
border-left: 1px solid $dark-4; border-left: 1px solid $dash-row-border-color;
border-right: 1px solid $dark-4; border-right: 1px solid $dash-row-border-color;
} }
.panels-wrapper::after { .panels-wrapper::after {
content: ' '; content: ' ';
border-bottom: 1px solid $dark-4; border-bottom: 1px solid $dash-row-border-color;
width: 15px; width: 15px;
position: absolute; position: absolute;
margin: 0 0 0 -6px; margin: 0 0 0 -6px;
...@@ -152,22 +152,20 @@ a.dash-row-header-actions--tight { ...@@ -152,22 +152,20 @@ a.dash-row-header-actions--tight {
.dash-row-options { .dash-row-options {
background: $panel-bg; background: $panel-bg;
border-left: $panel-border; border-left: 1px solid $dash-row-border-color;
border-bottom: $panel-border; border-bottom: 1px solid $dash-row-border-color;
border-right: $panel-border; border-right: 1px solid $dash-row-border-color;
margin: 0 0 $panel-margin*2 0; margin: 0 0 $panel-margin*2 0;
padding: $panel-margin*2; padding: $panel-margin*2;
box-shadow: 0px 3px 7px -3px $black;
} }
.dash-row-add-panel { .dash-row-add-panel {
background: $panel-bg; background: $panel-bg;
border-left: $panel-border; border-left: 1px solid $dash-row-border-color;
border-bottom: $panel-border; border-bottom: 1px solid $dash-row-border-color;
border-right: $panel-border; border-right: 1px solid $dash-row-border-color;
margin: 0 0 $panel-margin*2 0; margin: 0 0 $panel-margin*2 0;
padding: $panel-margin*2; padding: $panel-margin*2;
box-shadow: 0px 3px 7px -3px $black;
display: flex; display: flex;
} }
......
public/sass/pages/_dashboard.scss
...@@ -124,11 +124,11 @@ div.flot-text { ...@@ -124,11 +124,11 @@ div.flot-text {
z-index: 500; z-index: 500;
position: absolute; position: absolute;
background: $tight-form-func-bg; background: $tight-form-func-bg;
border: 1px solid black; border: $panel-menu-border;
.panel-menu-row { .panel-menu-row {
white-space: nowrap; white-space: nowrap;
border-bottom: 1px solid black; border-bottom: $panel-menu-border;
&:last-child { &:last-child {
border-bottom: none; border-bottom: none;
} }
...@@ -140,7 +140,7 @@ div.flot-text { ...@@ -140,7 +140,7 @@ div.flot-text {
.panel-menu-link { .panel-menu-link {
display: inline-block; display: inline-block;
border-right: 1px solid black; border-right: $panel-menu-border;
&:last-child { &:last-child {
border: none; border: none;
} }
...@@ -164,14 +164,14 @@ div.flot-text { ...@@ -164,14 +164,14 @@ div.flot-text {
.panel-drop-zone { .panel-drop-zone {
display: none; display: none;
.panel-container { .panel-container {
border: 1px solid $dark-3; border: $panel-border;
display: flex; display: flex;
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
text-align: center; text-align: center;
color: $text-color-faint; color: $text-color-faint;
font-weight: bold; font-weight: bold;
background: repeating-linear-gradient(-128deg, #111, #111 10px, #191919 10px, #222 20px); background: $panel-drop-zone-bg;
} }
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment