clean code

src/client/styles/scss/theme/antarctic.scss

@@ -49,7 +49,6 @@ html[dark] {
 
   // Background colors
   $bgcolor-global: $themelight;
-  $bgcolor-navbar: $themecolor;
   $bgcolor-inline-code: #f9f2f4;
   $bgcolor-card: #f5f5f5;
 
@@ -71,10 +70,20 @@ html[dark] {
   $bgcolor-list-active: $primary;
   $color-list-hover: $color-reversal;
 
+  // Navbar
+  $bgcolor-navbar: $themecolor;
+  $border-color-navbar-gradient-left: #545fff;
+  $border-color-navbar-gradient-right: #00a6e5;
+
   // Logo colors
   $bgcolor-logo: $bgcolor-navbar;
   $fillcolor-logo-mark: lighten(desaturate($bgcolor-inline-code, 10%), 15%);
 
+  // Sidebar
+  $bgcolor-sidebar: $bgcolor-navbar;
+  $color-sidebar-context: $color-reversal;
+  $bgcolor-sidebar-context: lighten($bgcolor-navbar, 10%);
+
   // Icon colors
   $color-editor-icons: $color-global;
 
@@ -95,11 +104,6 @@ html[dark] {
   // badge
   $color-badge: $color-reversal;
 
-  // Sidebar
-  $bgcolor-sidebar: $bgcolor-navbar;
-  $color-sidebar-context: $color-reversal;
-  $bgcolor-sidebar-context: lighten($bgcolor-navbar, 10%);
-
   @import 'apply-colors';
   @import 'apply-colors-light';
 

src/client/styles/scss/theme/christmas.scss

@@ -16,7 +16,6 @@ $themecolor: #b3000c;
 $themelight: white;
 
 $subthemecolor: #017e20;
-$bgcolor-navbar: $themecolor;
 $bgcolor-global: $themelight;
 $linktext: lighten(#0d5901, 5%);
 $linktext-hover: lighten($linktext, 12%);
@@ -60,9 +59,19 @@ html[dark] {
   $bgcolor-list-active: $themecolor;
   $color-list-hover: $color-reversal;
 
+  // Navbar
+  $bgcolor-navbar: $themecolor;
+  $border-color-navbar-gradient-left: #545fff;
+  $border-color-navbar-gradient-right: #00a6e5;
+
   // Logo colors
   $bgcolor-logo: $themecolor;
 
+  // Sidebar
+  $bgcolor-sidebar: $themecolor;
+  $color-sidebar-context: $color-reversal;
+  $bgcolor-sidebar-context: lighten($themecolor, 10%);
+
   // Icon colors
   $color-editor-icons: $color-global;
 
@@ -83,11 +92,6 @@ html[dark] {
   // badge
   $color-badge: $color-reversal;
 
-  // Sidebar
-  $bgcolor-sidebar: $themecolor;
-  $color-sidebar-context: $color-reversal;
-  $bgcolor-sidebar-context: lighten($themecolor, 10%);
-
   @import 'apply-colors';
   @import 'apply-colors-light';
 

src/client/styles/scss/theme/future.scss

@@ -12,7 +12,6 @@ html[light],
 html[dark] {
   // Background colors
   $bgcolor-global: $themecolor;
-  $bgcolor-navbar: #011414;
   $bgcolor-inline-code: darken($themecolor, 5%);
   $bgcolor-card: darken($themecolor, 5%);
 
@@ -35,10 +34,20 @@ html[dark] {
   $bgcolor-list-active: $primary;
   $color-list-hover: $color-reversal;
 
+  // Navbar
+  $bgcolor-navbar: #011414;
+  $border-color-navbar-gradient-left: #545fff;
+  $border-color-navbar-gradient-right: #00a6e5;
+
   // Logo colors
   $bgcolor-logo: darken($themecolor, 10%);
   $fillcolor-logo-mark: lighten($accentcolor, 15%);
 
+  // Sidebar
+  $bgcolor-sidebar: $bgcolor-navbar;
+  $color-sidebar-context: $color-reversal;
+  $bgcolor-sidebar-context: lighten($bgcolor-navbar, 10%);
+
   // Icon colors
   $color-editor-icons: $color-global;
 
@@ -59,11 +68,6 @@ html[dark] {
   // badge
   $color-badge: $color-reversal;
 
-  // Sidebar
-  $bgcolor-sidebar: $bgcolor-navbar;
-  $color-sidebar-context: $color-reversal;
-  $bgcolor-sidebar-context: lighten($bgcolor-navbar, 10%);
-
   @import 'apply-colors';
   @import 'apply-colors-dark';
 

src/client/styles/scss/theme/halloween.scss

@@ -36,7 +36,6 @@ html[light],
 html[dark] {
   // Background colors
   $bgcolor-global: #050000;
-  $bgcolor-navbar: #334455;
   $bgcolor-inline-code: #f9f2f4;
   $bgcolor-card: #f5f5f5;
 
@@ -58,10 +57,20 @@ html[dark] {
   $bgcolor-list-active: $primary;
   $color-list-hover: $themecolor;
 
+  // Navbar
+  $bgcolor-navbar: #223344;
+  $border-color-navbar-gradient-left: #545fff;
+  $border-color-navbar-gradient-right: #00a6e5;
+
   // Logo colors
   $bgcolor-logo: darken($themecolor, 10%);
   $fillcolor-logo-mark: lighten($accentcolor, 15%);
 
+  // Sidebar
+  $bgcolor-sidebar: $bgcolor-navbar;
+  $color-sidebar-context: $color-reversal;
+  $bgcolor-sidebar-context: lighten($bgcolor-navbar, 10%);
+
   // Icon colors
   $color-editor-icons: $color-global;
 
@@ -82,11 +91,6 @@ html[dark] {
   // badge
   $color-badge: $color-reversal;
 
-  // Sidebar
-  $bgcolor-sidebar: $bgcolor-navbar;
-  $color-sidebar-context: $color-reversal;
-  $bgcolor-sidebar-context: lighten($bgcolor-navbar, 10%);
-
   @import 'apply-colors';
   @import 'apply-colors-dark';
 

src/client/styles/scss/theme/island.scss

@@ -19,7 +19,6 @@ html[dark] {
   // Background colors
   $bgcolor-card: #f5f5f5;
   $bgcolor-global: lighten($color-themelight, 10%);
-  $bgcolor-navbar: $color-navbar;
 
   // Font colors
   $color-reversal: #eeeeee;
@@ -34,10 +33,20 @@ html[dark] {
   $bgcolor-list-active: $color-primary;
   $color-list-hover: $color-reversal;
 
+  // Navbar
+  $bgcolor-navbar: #0c2a44;
+  $border-color-navbar-gradient-left: #545fff;
+  $border-color-navbar-gradient-right: #00a6e5;
+
   // Logo colors
   $bgcolor-logo: $color-navbar;
   $fillcolor-logo-mark: lighten(desaturate($bgcolor-inline-code, 10%), 15%);
 
+  // Sidebar
+  $bgcolor-sidebar: $color-navbar;
+  $color-sidebar-context: $color-reversal;
+  $bgcolor-sidebar-context: lighten($color-navbar, 10%);
+
   // Icon colors
   $color-editor-icons: $color-global;
 
@@ -58,11 +67,6 @@ html[dark] {
   // badge
   $color-badge: $color-reversal;
 
-  // Sidebar
-  $bgcolor-sidebar: $color-navbar;
-  $color-sidebar-context: $color-reversal;
-  $bgcolor-sidebar-context: lighten($color-navbar, 10%);
-
   @import 'apply-colors';
   @import 'apply-colors-light';
 

src/client/styles/scss/theme/nature.scss

@@ -57,7 +57,6 @@ html[dark] {
 
   // Background colors
   $bgcolor-global: $themelight;
-  $bgcolor-navbar: $themecolor;
   $bgcolor-inline-code: #f9f2f4;
   $bgcolor-card: #f5f5f5;
 
@@ -78,10 +77,20 @@ html[dark] {
   $bgcolor-list-active: $primary;
   $color-list-hover: $color-reversal;
 
+  // Navbar
+  $bgcolor-navbar: $themecolor;
+  $border-color-navbar-gradient-left: #545fff;
+  $border-color-navbar-gradient-right: #00a6e5;
+
   // Logo colors
   $bgcolor-logo: $bgcolor-navbar;
   $fillcolor-logo-mark: lighten(desaturate($bgcolor-inline-code, 10%), 15%);
 
+  // Sidebar
+  $bgcolor-sidebar: $bgcolor-navbar;
+  $color-sidebar-context: $color-reversal;
+  $bgcolor-sidebar-context: lighten($bgcolor-navbar, 10%);
+
   // Icon colors
   $color-editor-icons: $color-global;
 
@@ -102,11 +111,6 @@ html[dark] {
   // badge
   $color-badge: $color-reversal;
 
-  // Sidebar
-  $bgcolor-sidebar: $bgcolor-navbar;
-  $color-sidebar-context: $color-reversal;
-  $bgcolor-sidebar-context: lighten($bgcolor-navbar, 10%);
-
   @import 'apply-colors';
   @import 'apply-colors-light';
 

src/client/styles/scss/theme/spring.scss

@@ -51,7 +51,6 @@ html[dark] {
 
   // Background colors
   $bgcolor-global: white;
-  $bgcolor-navbar: $themecolor;
   $bgcolor-inline-code: #f9f2f4;
   $bgcolor-card: #f5f5f5;
 
@@ -73,10 +72,20 @@ html[dark] {
   $bgcolor-list-active: $accentcolor;
   $color-list-hover: lighten($accentcolor, 20%);
 
+  // Navbar
+  $bgcolor-navbar: $themecolor;
+  $border-color-navbar-gradient-left: #545fff;
+  $border-color-navbar-gradient-right: #00a6e5;
+
   // Logo colors
   $bgcolor-logo: $bgcolor-navbar;
   $fillcolor-logo-mark: lighten(desaturate($bgcolor-inline-code, 10%), 15%);
 
+  // Sidebar
+  $bgcolor-sidebar: $bgcolor-navbar;
+  $color-sidebar-context: $color-reversal;
+  $bgcolor-sidebar-context: lighten($bgcolor-navbar, 10%);
+
   // Icon colors
   $color-editor-icons: $color-global;
 
@@ -97,11 +106,6 @@ html[dark] {
   // badge
   $color-badge: $color-reversal;
 
-  // Sidebar
-  $bgcolor-sidebar: $bgcolor-navbar;
-  $color-sidebar-context: $color-reversal;
-  $bgcolor-sidebar-context: lighten($bgcolor-navbar, 10%);
-
   @import 'apply-colors';
   @import 'apply-colors-light';
 

src/client/styles/scss/theme/wood.scss

@@ -43,7 +43,6 @@ html[dark] {
 
   // Background colors
   $bgcolor-global: $themelight;
-  $bgcolor-navbar: $themecolor;
   $bgcolor-inline-code: darken($themecolor, 20%);
   $bgcolor-card: #f5f5f5;
 
@@ -65,11 +64,21 @@ html[dark] {
   $bgcolor-list-active: $primary;
   $color-list-hover: $color-reversal;
 
+  // Navbar
+  $bgcolor-navbar: $themecolor;
+  $border-color-navbar-gradient-left: #545fff;
+  $border-color-navbar-gradient-right: #00a6e5;
+
   // Logo colors
   $bgcolor-logo: darken($themecolor, 10%);
   $fillcolor-logo-mark: lighten(desaturate($themecolor, 50%), 50%); // Icon colors
   $color-editor-icons: $color-global;
 
+  // Sidebar
+  $bgcolor-sidebar: $bgcolor-navbar;
+  $color-sidebar-context: $color-reversal;
+  $bgcolor-sidebar-context: lighten($bgcolor-navbar, 10%);
+
   // Border colors
   $border-color-theme: #ccc; // former: `$navbar-border: #ccc;`
 
@@ -87,11 +96,6 @@ html[dark] {
   // badge
   $color-badge: $color-reversal;
 
-  // Sidebar
-  $bgcolor-sidebar: $bgcolor-navbar;
-  $color-sidebar-context: $color-reversal;
-  $bgcolor-sidebar-context: lighten($bgcolor-navbar, 10%);
-
   // portal
   $info: lighten($themecolor, 10%);