ux: color tweaks

public/app/features/dashboard/partials/settings.html

@@ -85,16 +85,12 @@
     </div>
     </div>
 	</div>
 	</div>
 
 
-	<div ng-if="editor.index == 2">
+	<div ng-if="editor.index == 1">
 		<dash-links-editor></dash-links-editor>
 		<dash-links-editor></dash-links-editor>
 	</div>
 	</div>
 
 
-	<div ng-if="editor.index == 3">
+	<div ng-if="editor.index == 2">
 		<gf-time-picker-settings dashboard="dashboard"></gf-time-picker-settings>
 		<gf-time-picker-settings dashboard="dashboard"></gf-time-picker-settings>
 	</div>
 	</div>
 
 
-	<div ng-if="editor.index == 4">
-		<acl-settings dashboard="dashboard"></acl-settings>
-	</div>
-
 </div>
 </div>

public/app/partials/dashboard.html

@@ -3,9 +3,8 @@
 
 
 	<div class="scroll-canvas scroll-canvas--dashboard">
 	<div class="scroll-canvas scroll-canvas--dashboard">
 		<div gemini-scrollbar>
 		<div gemini-scrollbar>
+      <div dash-editor-view class="dash-edit-view"></div>
 			<div class="dashboard-container">
 			<div class="dashboard-container">
-				<div dash-editor-view class="dash-edit-view"></div>
-				<div class="clearfix"></div>
 
 
 				<dashboard-submenu ng-if="dashboard.meta.submenuEnabled" dashboard="dashboard"></dashboard-submenu>
 				<dashboard-submenu ng-if="dashboard.meta.submenuEnabled" dashboard="dashboard"></dashboard-submenu>
 
 

public/sass/_variables.dark.scss

@@ -62,7 +62,8 @@ $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(60deg, transparent 70%, darken($page-bg, 4%) 98%);
+$page-gradient: linear-gradient(180deg, rgb(36, 36, 36) 40px, rgba(178, 31, 31, 0.03) 100px, rgba(253, 187, 45, 0.03));
+$dashboard-gradient: linear-gradient(180deg, #242424 10px, rgba(15, 15, 15, 1) 100px, rgb(10, 10, 10));
 
 
 // Links
 // Links
 // -------------------------
 // -------------------------

public/sass/_variables.light.scss

@@ -69,6 +69,7 @@ $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
 // -------------------------
 // -------------------------

public/sass/components/_navbar.scss

@@ -4,13 +4,14 @@
   overflow: visible;
   overflow: visible;
   position: relative;
   position: relative;
   margin-left: $side-menu-width;
   margin-left: $side-menu-width;
+  box-shadow: 0 0 20px black;
+  z-index: 1;
 }
 }
 
 
 .navbar-inner {
 .navbar-inner {
   min-height: $navbarHeight;
   min-height: $navbarHeight;
   padding-right: $spacer;
   padding-right: $spacer;
   background-color: $navbarBackground;
   background-color: $navbarBackground;
-  border-bottom: $navbarBorder;
   @include clearfix();
   @include clearfix();
 }
 }
 
 

public/sass/components/_sidemenu.scss

@@ -5,7 +5,8 @@
   flex-direction: column;
   flex-direction: column;
   width: $side-menu-width;
   width: $side-menu-width;
   background: $navbarBackground;
   background: $navbarBackground;
-  z-index: 1;
+  z-index: 10;
+  box-shadow: 0 0 20px black;
 
 
   a:focus {
   a:focus {
     text-decoration: none;
     text-decoration: none;
@@ -17,6 +18,9 @@
     background: $side-menu-bg;
     background: $side-menu-bg;
     position: initial;
     position: initial;
     height: auto;
     height: auto;
+    box-shadow: 0 0 20px black;
+    position: relative;
+    z-index: 1;
   }
   }
   .sidemenu__top,
   .sidemenu__top,
   .sidemenu__bottom {
   .sidemenu__bottom {

public/sass/components/_tabbed_view.scss

 .tabbed-view {
 .tabbed-view {
-  background-color: $page-bg;
-  background-image: $page-gradient;
-  margin: (-$panel-margin*2) (-$panel-margin);
-  margin-bottom: $spacer*2;
+  background-color: $panel-bg;
   padding: $spacer*3;
   padding: $spacer*3;
+  margin-bottom: $dashboard-padding;
 
 
   &.tabbed-view--panel-edit {
   &.tabbed-view--panel-edit {
     padding: 0;
     padding: 0;

public/sass/components/_view_states.scss

@@ -48,6 +48,10 @@
     }
     }
   }
   }
 
 
+  .navbar {
+    box-shadow: none;
+  }
+
   .navbar-page-btn {
   .navbar-page-btn {
     border-color: transparent;
     border-color: transparent;
     background: transparent;
     background: transparent;

public/sass/layout/_page.scss

@@ -11,9 +11,7 @@
 .main-view {
 .main-view {
   position: relative;
   position: relative;
   flex-grow: 1;
   flex-grow: 1;
-
-  $gradient-opacity: 0.03;
-  background: linear-gradient(135deg, rgba(26, 42, 108, $gradient-opacity), rgba(178, 31, 31, $gradient-opacity), rgba(253, 187, 45, $gradient-opacity)); //Matt experiement
+  background: $page-gradient;
 }
 }
 
 
 .page-container {
 .page-container {

public/sass/pages/_dashboard.scss

 .dashboard-container {
 .dashboard-container {
   padding: $dashboard-padding;
   padding: $dashboard-padding;
+  background: $dashboard-gradient;
   width: 100%;
   width: 100%;
+  min-height: 100%;
 }
 }
 
 
 .template-variable {
 .template-variable {
   color: $variable;
   color: $variable;
 }
 }
 
 
-
-
 div.flot-text {
 div.flot-text {
   color: $text-color !important;
   color: $text-color !important;
 }
 }