Skip to content

N
nexpie-grafana-theme
Commit a1d47d36 by Torkel Ödegaard
Options

css tweaks and cleanup

parent d9a913af
Showing with 11 additions and 146 deletions
public/sass/_variables.dark.scss
...@@ -64,7 +64,6 @@ $text-shadow-faint: 1px 1px 4px rgb(45, 45, 45); ...@@ -64,7 +64,6 @@ $text-shadow-faint: 1px 1px 4px rgb(45, 45, 45);
// gradients // gradients
$brand-gradient: linear-gradient(to right, rgba(255,213,0,0.7) 0%, rgba(255,68,0,0.7) 99%, rgba(255,68,0,0.7) 100%); $brand-gradient: linear-gradient(to right, rgba(255,213,0,0.7) 0%, rgba(255,68,0,0.7) 99%, rgba(255,68,0,0.7) 100%);
$page-gradient: linear-gradient(180deg, #222426 10px, rgba(15, 15, 16, .03) 100px, rgba(10, 10, 11, .03)); $page-gradient: linear-gradient(180deg, #222426 10px, rgba(15, 15, 16, .03) 100px, rgba(10, 10, 11, .03));
$dashboard-gradient: linear-gradient(180deg, #222426 10px, rgba(15, 15, 16, 0.3) 100px, rgb(10, 10, 0.3));
// Links // Links
// ------------------------- // -------------------------
...@@ -100,7 +99,6 @@ $panel-header-menu-hover-bg: $dark-5; ...@@ -100,7 +99,6 @@ $panel-header-menu-hover-bg: $dark-5;
$divider-border-color: #555; $divider-border-color: #555;
// Graphite Target Editor // Graphite Target Editor
$tight-form-border: #050505;
$tight-form-bg: $dark-3; $tight-form-bg: $dark-3;
$tight-form-func-bg: #333334; $tight-form-func-bg: #333334;
...@@ -112,7 +110,7 @@ $code-tag-border: lighten($code-tag-bg, 2%); ...@@ -112,7 +110,7 @@ $code-tag-border: lighten($code-tag-bg, 2%);
// Lists // Lists
$grafanaListBackground: $dark-3; $grafanaListBackground: $dark-4;
$grafanaListAccent: lighten($dark-2, 2%); $grafanaListAccent: lighten($dark-2, 2%);
$grafanaListBorderTop: $dark-3; $grafanaListBorderTop: $dark-3;
$grafanaListBorderBottom: $black; $grafanaListBorderBottom: $black;
...@@ -173,7 +171,7 @@ $input-box-shadow: inset 1px 0px 0.3rem 0px rgba(150, 150, 150, 0. ...@@ -173,7 +171,7 @@ $input-box-shadow: inset 1px 0px 0.3rem 0px rgba(150, 150, 150, 0.
$input-border-focus: $input-border-color !default; $input-border-focus: $input-border-color !default;
$input-box-shadow-focus: rgba(102,175,233,.6) !default; $input-box-shadow-focus: rgba(102,175,233,.6) !default;
$input-color-placeholder: $gray-1 !default; $input-color-placeholder: $gray-1 !default;
$input-label-bg: #292a2d; $input-label-bg: #292a2d;
$input-label-border-color: transparent; $input-label-border-color: transparent;
$input-invalid-border-color: lighten($red, 5%); $input-invalid-border-color: lighten($red, 5%);
......
public/sass/_variables.light.scss
...@@ -70,7 +70,6 @@ $text-shadow-faint: none; ...@@ -70,7 +70,6 @@ $text-shadow-faint: none;
// gradients // 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%); $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%); $page-gradient: linear-gradient(-60deg, transparent 70%, darken($page-bg, 4%) 98%);
$dashboard-gradient: linear-gradient(-60deg, transparent 70%, darken($page-bg, 4%) 98%);
// Links // Links
// ------------------------- // -------------------------
...@@ -107,7 +106,6 @@ $panel-header-menu-hover-bg: $gray-4; ...@@ -107,7 +106,6 @@ $panel-header-menu-hover-bg: $gray-4;
$divider-border-color: $gray-2; $divider-border-color: $gray-2;
// Graphite Target Editor // Graphite Target Editor
$tight-form-border: $gray-4;
$tight-form-bg: #eaebee; $tight-form-bg: #eaebee;
$tight-form-func-bg: $gray-5; $tight-form-func-bg: $gray-5;
...@@ -193,8 +191,8 @@ $side-menu-shadow: 0 0 5px #c2c2c2; ...@@ -193,8 +191,8 @@ $side-menu-shadow: 0 0 5px #c2c2c2;
// ------------------------- // -------------------------
$menu-dropdown-bg: $white; $menu-dropdown-bg: $white;
$menu-dropdown-hover-bg: $gray-6; $menu-dropdown-hover-bg: $gray-6;
$menu-dropdown-border-color: $tight-form-border; $menu-dropdown-border-color: $gray-4;
$menu-dropdown-shadow: 5px 5px 20px -5px $gray-4; $menu-dropdown-shadow: 5px 5px 20px -5px $gray-4;
// Breadcrumb // Breadcrumb
// ------------------------- // -------------------------
...@@ -209,7 +207,7 @@ $search-shadow: 0 5px 30px 0 $gray-4; ...@@ -209,7 +207,7 @@ $search-shadow: 0 5px 30px 0 $gray-4;
// Dropdowns // Dropdowns
// ------------------------- // -------------------------
$dropdownBackground: $white; $dropdownBackground: $white;
$dropdownBorder: $tight-form-border; $dropdownBorder: $gray-4;
$dropdownDividerTop: $gray-6; $dropdownDividerTop: $gray-6;
$dropdownDividerBottom: $white; $dropdownDividerBottom: $white;
$dropdownDivider: $dropdownDividerTop; $dropdownDivider: $dropdownDividerTop;
...@@ -252,7 +250,7 @@ $wellBackground: $gray-3; ...@@ -252,7 +250,7 @@ $wellBackground: $gray-3;
$navbarHeight: 52px; $navbarHeight: 52px;
$navbarBackgroundHighlight: #f8f8f8; $navbarBackgroundHighlight: #f8f8f8;
$navbarBackground: #f2f3f7; $navbarBackground: #f2f3f7;
$navbarBorder: 1px solid $tight-form-border; $navbarBorder: 1px solid $gray-4;
$navbarShadow: 0 0 3px #c1c1c1; $navbarShadow: 0 0 3px #c1c1c1;
$navbarText: #444; $navbarText: #444;
......
public/sass/components/_scrollbar.scss
...@@ -18,130 +18,6 @@ ...@@ -18,130 +18,6 @@
width: 6px; width: 6px;
} }
/**
* gemini-scrollbar
* @version 1.5.2
* @link http://noeldelgado.github.io/gemini-scrollbar/
* @license MIT
*/
/* disable selection while dragging */
.gm-scrollbar-disable-selection {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* fallback for native floating scrollbars */
.gm-prevented {
-webkit-overflow-scrolling: touch;
}
.gm-prevented > .gm-scrollbar {
display: none;
}
/* actual gemini-scrollbar styles */
.gm-scrollbar-container {
position: relative;
overflow: hidden!important;
width: 100%;
height: 100%;
}
.gm-scrollbar {
position: absolute;
right: 2px;
bottom: 2px;
z-index: 1;
border-radius: 3px;
&:hover {
.thumb {
opacity: 1;
transition: opacity 100ms ease-in-out;
}
}
}
.gm-scrollbar.-vertical {
width: 6px;
top: 2px;
}
.gm-scrollbar.-horizontal {
height: 6px;
left: 2px;
}
.gm-scrollbar .thumb {
position: relative;
display: block;
width: 0;
height: 0;
cursor: pointer;
border-radius: inherit;
background-color: $dark-5;
transform: translate3d(0,0,0);
opacity: 0;
}
.gemini-scrolling {
.gm-scrollbar .thumb {
opacity: 1;
transition: opacity 100ms ease-in-out;
}
}
.gm-scrollbar .thumb:hover,
.gm-scrollbar .thumb:active {
background-color: $blue-dark;
}
.gm-scrollbar.-vertical .thumb {
width: 100%;
}
.gm-scrollbar.-horizontal .thumb {
height: 100%;
}
.gm-scrollbar-container .gm-scroll-view {
width: 100%;
height: 100%;
overflow: scroll;
transform: translate3d(0,0,0);
-webkit-overflow-scrolling: touch;
}
/* @option: autoshow */
.gm-scrollbar-container.gm-autoshow .gm-scrollbar {
opacity: 0;
transition: opacity 120ms ease-out;
}
.gm-scrollbar-container.gm-autoshow:hover > .gm-scrollbar,
.gm-scrollbar-container.gm-autoshow:active > .gm-scrollbar,
.gm-scrollbar-container.gm-autoshow:focus > .gm-scrollbar {
opacity: 1;
transition: opacity 340ms ease-out;
}
.gm-resize-trigger {
position: absolute;
display: block;
top: 0;
left: 0;
height: 100%;
width: 100%;
overflow: hidden;
pointer-events: none;
z-index: -1;
opacity: 0;
}
// Srollbars // Srollbars
// //
......
public/sass/components/_search.scss
...@@ -28,7 +28,9 @@ ...@@ -28,7 +28,9 @@
.search-field-wrapper { .search-field-wrapper {
width: 100%; width: 100%;
display: flex; display: flex;
background-color: $navbarButtonBackground; background-color: $navbarBackground;
box-shadow: $navbarShadow;
position: relative;
input { input {
max-width: 653px; max-width: 653px;
...@@ -65,7 +67,7 @@ ...@@ -65,7 +67,7 @@
max-width: 800px; max-width: 800px;
visibility: none; visibility: none;
opacity: 0; opacity: 0;
background: $panel-bg; background: $page-bg;
height: calc(100% - #{$navbarHeight}); height: calc(100% - #{$navbarHeight});
&--fade-in { &--fade-in {
...@@ -143,6 +145,7 @@ ...@@ -143,6 +145,7 @@
// color: $orange; // color: $orange;
// } // }
} }
.search-item__body { .search-item__body {
flex: 1 1 auto; flex: 1 1 auto;
overflow: hidden; overflow: hidden;
......
public/sass/components/_submenu.scss
...@@ -51,15 +51,6 @@ ...@@ -51,15 +51,6 @@
.variable-link-wrapper { .variable-link-wrapper {
display: inline-block; display: inline-block;
position: relative; position: relative;
.hidden-input {
padding: 8px 7px;
border: none;
margin: 0px;
background: transparent;
border-radius: 0;
border-right: 1px solid $tight-form-border;
}
} }
.variable-value-dropdown { .variable-value-dropdown {
......
public/sass/components/_tagsinput.scss
...@@ -9,7 +9,6 @@ ...@@ -9,7 +9,6 @@
input { input {
display: inline-block; display: inline-block;
border: none; border: none;
border-right: 1px solid $tight-form-border;
margin: 0px; margin: 0px;
border-radius: 0; border-radius: 0;
padding: 8px 6px; padding: 8px 6px;
......
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