fix bg color

src/client/styles/scss/_override-bootstrap.scss

@@ -31,8 +31,8 @@
 
 // Well (substitute Well of bootstrap3)
 .card.well {
-  padding: $card-spacer-y $card-spacer-x;
   min-height: 20px;
+  padding: $card-spacer-y $card-spacer-x;
   border-radius: 3px;
 }
 
@@ -77,8 +77,8 @@
     background: $this-color;
     border: 1px solid $this-color;
     opacity: 0.8;
-    box-shadow: none !important;
   }
+
   &:active &.active {
     box-shadow: none;
   }
@@ -127,6 +127,7 @@ fieldset[disabled] .btn {
 
 // input form (disabled box-shadow added in bootstrap4)
 .form-group .form-control {
+
   &:focus,
   &.focus {
     box-shadow: none;

src/client/styles/scss/_variables.scss

@@ -2,7 +2,12 @@
 $growi-green: #74bc46;
 $growi-blue: #175fa5;
 
-$font-family-monospace-not-strictly: Monaco, Menlo, Consolas, 'Courier New', MeiryoKe_Gothic, monospace;
+$font-family-monospace-not-strictly: Monaco,
+  Menlo,
+  Consolas,
+  'Courier New',
+  MeiryoKe_Gothic,
+  monospace;
 
 //== Layout
 $grw-navbar-height: 50px;
@@ -13,3 +18,5 @@ $grw-logomark-width: 32px;
 // see also '_on-edit.scss'
 $grw-nav-main-left-tab-width: 95px;
 $grw-nav-main-tab-height: 42px;
+
+$bgcolor-card: #f5f5f5 !default;

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

@@ -3,20 +3,27 @@
 //
 @import '~bootstrap/scss/bootstrap-reboot';
 
-@each $color, $value in $theme-colors {
+@each $color,
+  $value in $theme-colors {
   @include bg-variant('.bg-#{$color}', $value);
 }
-@each $color, $value in $theme-colors {
+
+@each $color,
+  $value in $theme-colors {
   .btn-#{$color} {
     @include button-variant($value, $value);
   }
 }
-@each $color, $value in $theme-colors {
+
+@each $color,
+  $value in $theme-colors {
   .btn-outline-#{$color} {
     @include button-outline-variant($value);
   }
 }
-@each $theme-color, $color in $theme-colors {
+
+@each $theme-color,
+  $color in $theme-colors {
   .alert.alert-#{$theme-color} {
     color: white;
     background: $color;
@@ -37,6 +44,7 @@
 .border-light {
   border-color: $light !important;
 }
+
 // Link buttons
 .btn-link {
   color: $link-color;
@@ -48,6 +56,7 @@
 
 // Dropdown
 .dropdown-item {
+
   &.active,
   &:active {
     @include gradient-bg($dropdown-link-active-bg);
@@ -63,6 +72,7 @@
 .nav.nav-tabs {
   > li > a {
     color: $color-link;
+
     &:hover,
     &:focus {
       color: $color-link-hover;
@@ -79,6 +89,7 @@ body {
 }
 
 .logo {
+
   // set transition for fill
   svg * {
     transition: fill 0.8s ease-out;
@@ -94,6 +105,7 @@ body {
         .group1 {
           fill: $growi-green;
         }
+
         .group2 {
           fill: $growi-blue;
         }
@@ -131,26 +143,32 @@ legend {
 .modal {
   .modal-header {
     border-bottom-color: $border;
+
     &.bg-primary,
     &.bg-info,
     &.bg-success,
     &.bg-warning,
     &.bg-danger {
       color: white;
+
       .close {
         color: white;
       }
     }
+
     .close {
       opacity: 0.5;
+
       &:hover {
         opacity: 0.9;
       }
     }
   }
+
   .modal-content {
     background-color: $bgcolor-global;
   }
+
   .modal-footer {
     border-top-color: $border;
   }
@@ -164,9 +182,8 @@ legend {
 }
 
 .card.well {
-  background-color: #f2f2f2;
-  background-color: #f5f5f5;
-  border-color: #f0f0f0;
+  background-color: $bgcolor-card;
+  border-color: $light;
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
 }
 
@@ -176,13 +193,16 @@ legend {
 .admin-page {
   span.slider {
     background-color: #ccc;
+
     &:before {
       background-color: white;
     }
   }
+
   input:checked + .slider {
     background-color: #007bff;
   }
+
   input:focus + .slider {
     box-shadow: 0 0 1px #007bff;
   }
@@ -194,6 +214,7 @@ legend {
 .crowi-sidebar {
   background-color: darken($bgcolor-global, 4%);
   border-left: solid 1px $border;
+
   .system-version {
     background-color: darken($bgcolor-global, 4%);
   }
@@ -205,6 +226,7 @@ legend {
 .wiki {
   a {
     color: $color-link-wiki;
+
     &:hover {
       color: $color-link-wiki-hover;
     }
@@ -215,6 +237,7 @@ legend {
     button {
       color: $color-link-wiki;
     }
+
     button:hover {
       color: $color-link-wiki-hover;
     }
@@ -237,11 +260,13 @@ body.on-edit {
 
     .page-editor-editor-container {
       border-right-color: $navbar-border;
+
       .navbar-editor {
         background-color: $bgcolor-global; // same color with active tab
         border-bottom-color: $border;
       }
     }
+
     .page-editor-preview-container {
       background-color: $bgcolor-global;
     }
@@ -259,12 +284,15 @@ body.on-edit {
   .page-comments-row {
     border-top-color: $border;
   }
+
   .page-comment .page-comment-main,
   .page-comment-form .comment-form-main {
     background-color: darken($bgcolor-global, 4%);
+
     &:before {
       border-right-color: darken($bgcolor-global, 4%);
     }
+
     .nav.nav-tabs {
       > li.active > a {
         background: transparent;
@@ -285,9 +313,11 @@ body.on-edit {
         > li > a {
           background-color: transparent;
         }
+
         li:hover {
           background-color: darken($bgcolor-global, 4%);
         }
+
         li.active {
           background-color: darken($bgcolor-global, 8%);
           border-color: theme-color('primary');