slightly tweak styling (bg/border colors of some elements)

vladimiry · May 7, 2021 · 45a0d7c · 45a0d7c
1 parent f04dbbe
commit 45a0d7c
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 10 deletions.
diff --git a/src/web/browser-window/app-theming.scss b/src/web/browser-window/app-theming.scss
@@ -2,13 +2,32 @@
 @import "src/web/variables";
 
 .list-group-item:not(.list-group-item-warning) {
-    background-color: $card-cap-bg;
     color: $app-theming-db-view-color-text-mail;
 }
 
+#{$app-prefix}-settings .modal-body {
+    .list-group-item:not(.list-group-item-warning) {
+        background-color: $card-cap-bg;
+        border: 1px solid $card-border-color;
+    }
+
+    & > .wrapper > .list-group {
+        .list-group-item:not(.list-group-item-warning) {
+            @include hover-focus() {
+                background-color: darken($card-cap-bg, 5%);
+            }
+        }
+    }
+}
+
 #{$app-prefix}-db-view-mail-tab {
     .list-group-item:not(.list-group-item-warning) {
         background-color: $secondary;
+        border: 1px solid darken($secondary, 10%);
+
+        @include hover-focus() {
+            background-color: darken($secondary, 5%);
+        }
     }
 }
 
@@ -64,8 +83,9 @@
 
 #{$app-prefix}-account-edit {
     .rounded {
-        background-color: $card-cap-bg;
         color: $card-cap-color;
+        background-color: $card-cap-bg;
+        border: 1px solid $card-border-color;
     }
 }
 
@@ -118,15 +138,15 @@
 
 #{$app-prefix}-db-view-monaco-editor {
     .monaco-editor > .overflow-guard {
-        border: 1px solid $app-theming-db-view-color-border;
+        border: 1px solid $border-color;
     }
 }
 
 .#{$app-prefix}-db-view-mails-export-modal {
     .btn-group {
         .btn {
             &.active {
-                @include lib.btn-warning-light-active();
+                @include lib.app-btn-warning-light-active();
             }
         }
     }

diff --git a/src/web/browser-window/app/_db-view/db-view-mails-search.component.scss b/src/web/browser-window/app/_db-view/db-view-mails-search.component.scss
@@ -13,7 +13,7 @@
     }
 
     .btn-warning-light {
-        @include lib.btn-warning-light-active();
+        @include lib.app-btn-warning-light-active();
     }
 
     .custom-switch {

diff --git a/src/web/browser-window/lib.scss b/src/web/browser-window/lib.scss
@@ -5,7 +5,7 @@
     padding-right: variables.$btn-padding-x * 0.9;
 }
 
-@mixin btn-warning-light-active {
+@mixin app-btn-warning-light-active {
     // TODO tweak the ".btn-warning-light" style once globally rather than using mixin
     $bg: map_get(variables.$app-account-title-btn-colors, "selected-bg");
     $border: map_get(variables.$app-account-title-btn-colors, "selected-border");

diff --git a/src/web/theming-variables-dark.scss b/src/web/theming-variables-dark.scss
@@ -12,13 +12,13 @@ $close-color: $body-color;
 $input-bg: $body-bg;
 $input-disabled-bg: lighten($body-bg, 10%);
 $input-color: $body-color;
-$input-border-color: lighten($body-bg, 10%);
+$input-border-color: $border-color;
 $input-box-shadow: variables.$app-dark-bg;
 $input-placeholder-color: darken($body-color, 10%);
 
 $card-bg: $body-bg;
 $card-cap-bg: variables.$app-dark-bg;
-$card-border-color: darken($border-color, 5%);
+$card-border-color: darken($card-cap-bg, 3%);
 
 $dropdown-bg: $body-bg;
 $dropdown-color: $body-color;
@@ -29,7 +29,7 @@ $dropdown-border-color: $border-color;
 $dropdown-divider-bg: $border-color;
 
 $list-group-bg: $body-bg;
-$list-group-border-color: $border-color;
+$list-group-border-color: $card-border-color;
 $list-group-action-color: $body-color;
 $list-group-action-hover-color: darken($body-color, 10%);
 $list-group-hover-bg: $dropdown-link-hover-bg;
@@ -47,6 +47,7 @@ $modal-header-border-color: $border-color;
 
 $secondary: darken(#686a71, 2%);
 $progress-bar-color: variables.$gray-100;
+
 $app-theming-db-view-color-bg-body: $body-bg;
 $app-theming-db-view-color-border: $secondary;
 $app-theming-datepicker-color-box-shadow: lighten($body-bg, 5%);

diff --git a/src/web/theming-variables-light.scss b/src/web/theming-variables-light.scss
@@ -3,7 +3,11 @@
 $secondary: variables.$secondary !default;
 $body-bg: variables.$body-bg !default;
 $body-color: variables.$body-color !default;
+$border-color: variables.$border-color !default;
 $progress-bar-color: variables.$gray-700 !default;
+$card-cap-bg: #f1f3f5 !default;
+$card-border-color: darken($card-cap-bg, 10%) !default;
+$list-group-border-color: $card-border-color !default;
 
 $app-theming-color-secondary-btn-split-border: darken($secondary, 7%) !default;
 $app-theming-db-view-color-bg-body: lighten(#d1d7dc, 10%) !default;

diff --git a/src/web/vendor-variables.scss b/src/web/vendor-variables.scss
@@ -3,7 +3,7 @@
 @import "font-awesome/scss/mixins";
 
 $primary: #1ba489 !default;
-$secondary: lighten(#ced4da, 2%) !default;
+$secondary: #d4d9de !default;
 $modal-header-padding: 0.7rem;
 $list-group-item-padding-x: 1.25rem * 0.5;
 $list-group-item-padding-y: 0.65rem !default;