Jelajahi Sumber

css tweaks and cleanup

Torkel Ödegaard 8 tahun lalu
induk
melakukan
a1d47d36f6

+ 2 - 4
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%);
 

+ 4 - 6
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;

+ 0 - 124
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
 //
 

+ 5 - 2
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;

+ 0 - 9
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 {

+ 0 - 1
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;