Merge pull request #2208 from weseek/support/define-color-for-theme-color-box

Support/define color for theme color box

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

@@ -183,18 +183,6 @@ ul.pagination {
   }
 }
 
-/*
- * GROWI admin page #themeOptions
- */
-.admin-page {
-  #themeOptions {
-    .theme-option-container.active a {
-      background-color: darken(theme-color('primary'), 15%);
-      border-color: darken(theme-color('primary'), 15%);
-    }
-  }
-}
-
 /*
  * GROWI comment form
  */

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

@@ -77,18 +77,6 @@
   }
 }
 
-/*
- * GROWI admin page #themeOptions
- */
-.admin-page {
-  #themeOptions {
-    .theme-option-container.active a {
-      background-color: lighten(theme-color('primary'), 20%);
-      border-color: lighten(theme-color('primary'), 20%);
-    }
-  }
-}
-
 /*
  * GROWI comment form
  */

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

@@ -331,6 +331,10 @@ mark.rbt-highlight-text {
       .theme-option-name {
         color: $color-global;
       }
+      a {
+        background-color: $color-theme-color-box;
+        border-color: $color-theme-color-box;
+      }
     }
   }
 }

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

@@ -86,6 +86,9 @@ html[dark] {
   $color-dropdown-link-active: $color-reversal;
   $color-dropdown-link-hover: $color-global;
 
+  // admin theme box
+  $color-theme-color-box: lighten($themecolor, 20%);
+
   // alert
   $color-alert: $color-reversal;
 

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

@@ -74,6 +74,9 @@ html[dark] {
   $color-dropdown-link-active: $color-reversal;
   $color-dropdown-link-hover: $color-global;
 
+  // admin theme box
+  $color-theme-color-box: lighten($themecolor, 20%);
+
   // alert
   $color-alert: $color-reversal;
 
@@ -207,6 +210,6 @@ html[dark] {
 
   .search-top .dropdown-toggle {
     color: black;
-    background-color: hsla(0,0%,100%,.8);
+    background-color: hsla(0, 0%, 100%, 0.8);
   }
-}
+}

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

@@ -56,6 +56,9 @@ html[light] {
   $color-dropdown-link-active: $color-reversal;
   $color-dropdown-link-hover: $color-reversal;
 
+  // admin theme box
+  $color-theme-color-box: lighten($primary, 20%);
+
   // alert
   $color-alert: $color-reversal;
 
@@ -117,6 +120,9 @@ html[dark] {
   $color-dropdown-link-active: $color-global;
   $color-dropdown-link-hover: $color-reversal;
 
+  // admin theme box
+  $color-theme-color-box: $primary;
+
   // alert
   $color-alert: $color-reversal;
 

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

@@ -50,6 +50,9 @@ html[dark] {
   $color-dropdown-link-active: $color-reversal;
   $color-dropdown-link-hover: $color-global;
 
+  // admin theme box
+  $color-theme-color-box: lighten($primary, 20%);
+
   // alert
   $color-alert: $color-reversal;
 

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

@@ -73,6 +73,9 @@ html[dark] {
   $color-dropdown-link-active: $color-reversal;
   $color-dropdown-link-hover: $color-global;
 
+  // admin theme box
+  $color-theme-color-box: lighten($primary, 20%);
+
   // alert
   $color-alert: $color-reversal;
 

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

@@ -49,6 +49,9 @@ html[dark] {
   $color-dropdown-link-active: $color-reversal;
   $color-dropdown-link-hover: $color-global;
 
+  // admin theme box
+  $color-theme-color-box: lighten($primary, 20%);
+
   // alert
   $color-alert: $color-reversal;
 
@@ -69,13 +72,16 @@ html[dark] {
     }
   }
 
-  .nav-tabs, .nav-tabs .nav-link.active, .nav-link {
+  .nav-tabs,
+  .nav-tabs .nav-link.active,
+  .nav-link {
     background: none;
     border-color: $color-primary;
     border-bottom-color: $color-primary;
   }
 
-  .card, .card-header {
+  .card,
+  .card-header {
     background: none;
     border: none;
   }

src/client/styles/scss/theme/kibela.scss

@@ -53,6 +53,9 @@ html[light] {
   $color-dropdown-link-active: $color-reversal;
   $color-dropdown-link-hover: $color-global;
 
+  // admin theme box
+  $color-theme-color-box: lighten($bgcolor-theme, 20%);
+
   // alert
   $color-alert: $color-reversal;
 
@@ -116,6 +119,9 @@ html[dark] {
   $color-dropdown-link-active: $color-reversal;
   $color-dropdown-link-hover: $color-global;
 
+  // admin theme box
+  $color-theme-color-box: lighten($bgcolor-theme, 20%);
+
   // alert
   $color-alert: $color-reversal;
 

src/client/styles/scss/theme/mono-blue.scss

@@ -1,8 +1,6 @@
 @import '../variables';
 @import '../override-bootstrap-variables';
 
-
-
 html[light] {
   // Theme colors
   $themecolor: #00587a;
@@ -29,7 +27,6 @@ html[light] {
   $color-inline-code: $subthemecolor;
   $color-search: #c0d6df;
 
-
   // List Group colors
   $color-list: $color-global;
   $bgcolor-list: transparent;
@@ -51,6 +48,9 @@ html[light] {
   $bgcolor-dropdown-link-active: $primary;
   $color-dropdown-link-active: $color-reversal;
 
+  // admin theme box
+  $color-theme-color-box: lighten($primary, 20%);
+
   // alert
   $color-alert: $color-reversal;
 
@@ -62,7 +62,6 @@ html[light] {
   $color-sidebar-context: $color-reversal;
   $bgcolor-sidebar-context: lighten($bgcolor-sidebar, 10%);
 
-
   @import 'apply-colors';
   @import 'apply-colors-light';
 
@@ -119,7 +118,6 @@ html[dark] {
   $color-inline-code: $subthemecolor;
   $color-search: #000102;
 
-
   // List Group colors
   $color-list: $color-global;
   $bgcolor-list: transparent;
@@ -142,6 +140,9 @@ html[dark] {
   $bgcolor-dropdown-link-active: $primary;
   $color-dropdown-link-active: $color-reversal;
 
+  // admin theme box
+  $color-theme-color-box: $primary;
+
   // alert
   $color-alert: $color-reversal;
 
@@ -153,7 +154,6 @@ html[dark] {
   $color-sidebar-context: $color-reversal;
   $bgcolor-sidebar-context: lighten($bgcolor-sidebar, 10%);
 
-
   @import 'apply-colors';
   @import 'apply-colors-dark';
 
@@ -188,4 +188,4 @@ html[dark] {
   .table {
     color: white;
   }
-}
+}

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

@@ -93,6 +93,9 @@ html[dark] {
   $color-dropdown-link-active: $color-reversal;
   $color-dropdown-link-hover: $color-global;
 
+  // admin theme box
+  $color-theme-color-box: lighten($primary, 20%);
+
   // alert
   $color-alert: $color-reversal;
 

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

@@ -88,6 +88,9 @@ html[dark] {
   $color-dropdown-link-active: $color-reversal;
   $color-dropdown-link-hover: $color-global;
 
+  // admin theme box
+  $color-theme-color-box: darken($primary, 20%);
+
   // alert
   $color-alert: $color-reversal;
 

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

@@ -12,7 +12,6 @@
 // $dark: #;
 
 .growi:not(.login-page) {
-
   // add background-image
   #page-wrapper,
   .page-editor-preview-container {
@@ -79,6 +78,9 @@ html[dark] {
   $color-dropdown-link-active: $color-reversal;
   $color-dropdown-link-hover: $color-global;
 
+  // admin theme box
+  $color-theme-color-box: lighten($primary, 20%);
+
   // alert
   $color-alert: $color-reversal;
 
@@ -103,7 +105,6 @@ html[dark] {
   .grw-navbar {
     background-image: url('/images/themes/wood/wood-navbar.jpg');
     border-bottom: $accentcolor 4px solid;
-
   }
 }