Skip to content

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

css tweaks and cleanup

parent d9a913af
Showing with 9 additions and 144 deletions
public/sass/_variables.dark.scss
......@@ -64,7 +64,6 @@ $text-shadow-faint: 1px 1px 4px rgb(45, 45, 45);
// 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%);
$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
// -------------------------
......@@ -100,7 +99,6 @@ $panel-header-menu-hover-bg: $dark-5;
$divider-border-color: #555;
// Graphite Target Editor
$tight-form-border: #050505;
$tight-form-bg: $dark-3;
$tight-form-func-bg: #333334;
......@@ -112,7 +110,7 @@ $code-tag-border: lighten($code-tag-bg, 2%);
// Lists
$grafanaListBackground: $dark-3;
$grafanaListBackground: $dark-4;
$grafanaListAccent: lighten($dark-2, 2%);
$grafanaListBorderTop: $dark-3;
$grafanaListBorderBottom: $black;
......
public/sass/_variables.light.scss
......@@ -70,7 +70,6 @@ $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%);
$dashboard-gradient: linear-gradient(-60deg, transparent 70%, darken($page-bg, 4%) 98%);
// Links
// -------------------------
......@@ -107,7 +106,6 @@ $panel-header-menu-hover-bg: $gray-4;
$divider-border-color: $gray-2;
// Graphite Target Editor
$tight-form-border: $gray-4;
$tight-form-bg: #eaebee;
$tight-form-func-bg: $gray-5;
......@@ -193,7 +191,7 @@ $side-menu-shadow: 0 0 5px #c2c2c2;
// -------------------------
$menu-dropdown-bg: $white;
$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;
// Breadcrumb
......@@ -209,7 +207,7 @@ $search-shadow: 0 5px 30px 0 $gray-4;
// Dropdowns
// -------------------------
$dropdownBackground: $white;
$dropdownBorder: $tight-form-border;
$dropdownBorder: $gray-4;
$dropdownDividerTop: $gray-6;
$dropdownDividerBottom: $white;
$dropdownDivider: $dropdownDividerTop;
......@@ -252,7 +250,7 @@ $wellBackground: $gray-3;
$navbarHeight: 52px;
$navbarBackgroundHighlight: #f8f8f8;
$navbarBackground: #f2f3f7;
$navbarBorder: 1px solid $tight-form-border;
$navbarBorder: 1px solid $gray-4;
$navbarShadow: 0 0 3px #c1c1c1;
$navbarText: #444;
......
public/sass/components/_scrollbar.scss
......@@ -18,130 +18,6 @@
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
//
......
public/sass/components/_search.scss
......@@ -28,7 +28,9 @@
.search-field-wrapper {
width: 100%;
display: flex;
background-color: $navbarButtonBackground;
background-color: $navbarBackground;
box-shadow: $navbarShadow;
position: relative;
input {
max-width: 653px;
......@@ -65,7 +67,7 @@
max-width: 800px;
visibility: none;
opacity: 0;
background: $panel-bg;
background: $page-bg;
height: calc(100% - #{$navbarHeight});
&--fade-in {
......@@ -143,6 +145,7 @@
// color: $orange;
// }
}
.search-item__body {
flex: 1 1 auto;
overflow: hidden;
......
public/sass/components/_submenu.scss
......@@ -51,15 +51,6 @@
.variable-link-wrapper {
display: inline-block;
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 {
......
public/sass/components/_tagsinput.scss
......@@ -9,7 +9,6 @@
input {
display: inline-block;
border: none;
border-right: 1px solid $tight-form-border;
margin: 0px;
border-radius: 0;
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