diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index fd7674491c3..85a0f8f9abe 100644 --- a/public/sass/_variables.dark.scss +++ b/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; @@ -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-box-shadow-focus: rgba(102,175,233,.6) !default; $input-color-placeholder: $gray-1 !default; -$input-label-bg: #292a2d; +$input-label-bg: #292a2d; $input-label-border-color: transparent; $input-invalid-border-color: lighten($red, 5%); diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss index 9617aec1bf9..5532281ea93 100644 --- a/public/sass/_variables.light.scss +++ b/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,8 +191,8 @@ $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-shadow: 5px 5px 20px -5px $gray-4; +$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; diff --git a/public/sass/components/_scrollbar.scss b/public/sass/components/_scrollbar.scss index 03b5fb5eed9..45caa614011 100644 --- a/public/sass/components/_scrollbar.scss +++ b/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 // diff --git a/public/sass/components/_search.scss b/public/sass/components/_search.scss index cd7ac6d24b9..972a7fe61b6 100644 --- a/public/sass/components/_search.scss +++ b/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; diff --git a/public/sass/components/_submenu.scss b/public/sass/components/_submenu.scss index 8211fffa9ee..8cf5c02a649 100644 --- a/public/sass/components/_submenu.scss +++ b/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 { diff --git a/public/sass/components/_tagsinput.scss b/public/sass/components/_tagsinput.scss index 0753f045a61..dc6faf15771 100644 --- a/public/sass/components/_tagsinput.scss +++ b/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;