adjust global navigations

src/client/styles/scss/_subnav.scss

@@ -14,7 +14,7 @@ header.grw-header {
   // Adjust to be on top of the growi subnavigation
   z-index: $zindex-sticky;
 
-  height: 80px;
+  height: 110px;
   pointer-events: none; // disable pointer events for sticky
 
   .grw-subnav {

src/client/styles/scss/_variables.scss

@@ -9,11 +9,11 @@ $font-family-monospace-not-strictly: Monaco, Menlo, Consolas, 'Courier New', Mei
 $grw-navbar-height: 52px;
 $grw-navbar-border-width: 3px;
 
-$grw-sidebar-nav-width: 64px;
+$grw-sidebar-nav-width: 64px; // !!DO NOT CHANGE!! 'margin-left' for '.css-teprsg' is hardcoded
 $grw-sidebar-content-min-width: 240px;
 
 $grw-logo-width: $grw-sidebar-nav-width;
-$grw-logomark-width: 40px;
+$grw-logomark-width: 36px;
 
 // fix tab width to 95 pixels
 // see also '_on-edit.scss'

src/client/styles/scss/theme/_apply-colors.scss

@@ -82,8 +82,6 @@ $input-focus-color: $color-global;
 //
 
 .grw-logo {
-  background-color: darken($bgcolor-logo, 10%);
-
   // set transition for fill
   svg * {
     transition: fill 0.8s ease-out;

src/client/styles/scss/theme/default.scss

@@ -19,7 +19,6 @@ html[light] {
 
   // Background colors
   $bgcolor-global: white;
-  $bgcolor-navbar: #334455;
   $bgcolor-inline-code: #f9f2f4;
   $bgcolor-card: #f5f5f5;
 
@@ -41,10 +40,20 @@ html[light] {
   $bgcolor-list-active: $primary;
   $color-list-hover: $color-reversal;
 
+  // Navbar
+  $bgcolor-navbar: #2a2929;
+  $border-color-navbar-gradient-left: #545fff;
+  $border-color-navbar-gradient-right: #00a6e5;
+
   // Logo colors
   $bgcolor-logo: $bgcolor-navbar;
   $fillcolor-logo-mark: lighten(desaturate($bgcolor-navbar, 10%), 15%);
 
+  // Sidebar
+  $bgcolor-sidebar: #122c55;
+  $color-sidebar-context: $color-global;
+  $bgcolor-sidebar-context: #f4f6fc;
+
   // Icon colors
   $color-editor-icons: $color-global;
 
@@ -65,11 +74,6 @@ html[light] {
   // badge
   $color-badge: $color-reversal;
 
-  // Sidebar
-  $bgcolor-sidebar: $bgcolor-navbar;
-  $color-sidebar-context: $color-global;
-  $bgcolor-sidebar-context: darken($bgcolor-global, 10%);
-
   @import 'apply-colors';
   @import 'apply-colors-light';
 }
@@ -113,6 +117,11 @@ html[dark] {
   $bgcolor-logo: $bgcolor-navbar;
   $fillcolor-logo-mark: #444;
 
+  // Sidebar
+  $bgcolor-sidebar: $bgcolor-navbar;
+  $color-sidebar-context: $color-global;
+  $bgcolor-sidebar-context: lighten($bgcolor-navbar, 5%);
+
   // Icon colors
   $color-editor-icons: $color-global;
 
@@ -133,11 +142,6 @@ html[dark] {
   // badge
   $color-badge: $color-reversal;
 
-  // Sidebar
-  $bgcolor-sidebar: $bgcolor-navbar;
-  $color-sidebar-context: $color-global;
-  $bgcolor-sidebar-context: lighten($bgcolor-navbar, 5%);
-
   @import 'apply-colors';
   @import 'apply-colors-dark';
 }