Theme Cleanup (#1089)

* Fixed e-ink theme not properly applying correctly

* Fixed some seed changes. Changed card checkboxes to use our themed ones

* Fixed recently added carousel not going to recently-added page

* Fixed an issue where no results found would show when searching for a library name

* Cleaned up list a bit, typeahead dropdown still needs work

* Added a TODO to streamline series-card component

* Removed ng-lazyload-image module since we don't use it. We use lazysizes

* Darken card on hover

* Fixing accordion focus style

* ux pass updates

- Fixed typeahead width
- Fixed changelog download buttons
- Fixed a select
- Fixed various input box-shadows
- Fixed all anchors to only have underline on hover
- Added navtab hover and active effects

* more ux pass

- Fixed spacing on theme cards
- Fixed some light theme issues
- Exposed text-muted-color for theme card subtitle color

* UX pass fixes

- Changed back to bright green for primary on dark theme
- Changed fa icon to black on e-ink

* Merged changelog component

* Fixed anchor buttons text decoration

* Changed nav tabs to have a background color instead of open active state

* When user is not authenticated, make sure we set default theme (dark)

* Cleanup on carousel

* Updated Users tab to use small buttons with icons to align with Library tab

* Cleaned up brand to not underline, removed default link underline on hover in dropdown and pill tabs

* Fixed collection detail posters not rendering

Co-authored-by: Robbie Davis <robbie@therobbiedavis.com>

UI/Web/src/theme/_variables.scss

@@ -9,6 +9,8 @@ $theme-colors: (
 );
 
 $form-select-indicator-color:#cecece;
+$accordion-icon-color: #cecece;
+$accordion-icon-active-color: #cecece;
 
 $grid-breakpoints-xs: 0;
 $grid-breakpoints-sm: 576px;

UI/Web/src/theme/components/_accordion.scss

@@ -13,12 +13,19 @@
     }
 }
 
-.accordion-button:not(.collapsed) {
-    color: var(--accordion-header-text-color); 
-    background-color: var(--accordion-body-bg-color);
-}
+.accordion-button {
+    &:not(.collapsed) {
+        color: var(--accordion-header-text-color); 
+        background-color: var(--accordion-body-bg-color);
+    }
 
-.accordion-button.collapsed {
-    color: var(--accordion-header-collapsed-text-color); 
-    background-color: var(--accordion-header-collapsed-bg-color);
+    &.collapsed {
+        color: var(--accordion-header-collapsed-text-color); 
+        background-color: var(--accordion-header-collapsed-bg-color);
+    }
+
+    &:focus {
+        border-color: var(--accordion-button-focus-border-color);
+        box-shadow: var(--accordion-button-focus-box-shadow);
+    }
 }

UI/Web/src/theme/components/_anchors.scss

@@ -6,10 +6,27 @@ a:not(.dark-exempt) {
     }
   }
 
+  a.btn {
+    color: inherit;
+    text-decoration: none;
+  
+    &:hover {
+      text-decoration: none;
+    }
+  }
+
 a.read-more-link {
     font-weight: bold;
     text-decoration: none;
     color: var(--body-text-color);
     cursor: pointer;
     color: var(--body-text-color) !important;
-}
+}
+
+a {
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}

UI/Web/src/theme/components/_buttons.scss

@@ -69,3 +69,7 @@ button:disabled, .form-control:disabled, .form-control[readonly], .disabled, :di
 button i.fa {
   color: var(--btn-fa-icon-color);
 }
+
+.btn-check:focus + .btn, .btn:focus {
+  box-shadow: 0 0 0 0.25rem var(--btn-focus-boxshadow-color);
+}

UI/Web/src/theme/components/_card.scss

@@ -4,11 +4,11 @@
     border-color: var(--card-border-color);
     position: relative;
 
-    .overlay:hover {
-        background-color: var(--card-overlay-hover-bg-color);
-    }
-
     .card-overlay {
-        background-color: var(--card-overlay-hover-bg-color);
+        background-color: var(--card-overlay-bg-color);
+
+        &:hover {
+            background-color: var(--card-overlay-hover-bg-color);
+        }
     }
 }

UI/Web/src/theme/components/_checkbox.scss

@@ -8,8 +8,13 @@
         border-color: var(--checkbox-checked-bg-color);
     }
 
-    &:focus, &:hover {
+    &:hover {
         border-color: var(--checkbox-focus-border-color);
     }
+
+    &:focus {
+        border-color: var(--checkbox-focus-border-color);
+        box-shadow: 0 0 0 0.25rem var(--checkbox-focus-boxshadow-color);
+    }
 }
 

UI/Web/src/theme/components/_dropdown.scss

@@ -10,6 +10,7 @@
         &:hover, &:focus {
             color: var(--dropdown-item-hover-text-color); 
             background-color: var(--dropdown-item-hover-bg-color);
+            text-decoration: none;
         }
     }
 }

UI/Web/src/theme/components/_input.scss

@@ -7,6 +7,7 @@ input, .form-control {
         border-color: var(--input-focused-border-color);
         background-color: var(--input-bg-color);
         color: var(--input-text-color);
+        box-shadow: 0 0 0 0.25rem var(--input-focus-boxshadow-color);
     }
 
     &:read-only {

UI/Web/src/theme/components/_list.scss

@@ -3,7 +3,6 @@
   background-color: var(--list-group-item-bg-color);
   border-color: var(--list-group-item-border-color);
 
-  // TODO: We need a css class where we can exclude hover effects, like when list is just used for layout purposes
   &:hover {
     color: var(--list-group-hover-text-color);
     background-color: var(--list-group-hover-bg-color);
@@ -12,6 +11,7 @@
   &.active {
     color: var(--list-group-hover-text-color);
     background-color: var(--list-group-hover-bg-color);
+    border-color: var(--list-group-active-border-color);
   }
 
   &.no-hover:hover {

UI/Web/src/theme/components/_nav.scss

@@ -3,6 +3,7 @@
 
     &:hover, &:focus {
         color: var(--nav-link-hover-text-color);
+        text-decoration: none;
     }
 
     &.active {
@@ -21,6 +22,7 @@
     
     .nav-link {
         color: var(--nav-link-text-color);
+        position: relative;
         
         &.active, &:focus {
             color: var(--nav-tab-active-text-color);
@@ -29,6 +31,11 @@
             border-left-color: var(--nav-tab-border-left);
             border-bottom-color: var(--nav-tab-border-bottom);
             border-right-color: var(--nav-tab-border-right);
+            transform: scaleY(1);
+        }
+
+        &.active::before {
+            transform: scaleY(1);
         }
     
         &:hover {
@@ -36,9 +43,26 @@
             background-color: var(--nav-tab-hover-bg-color);
             border-top-color: var(--nav-tab-hover-border-top);
             border-left-color: var(--nav-tab-hover-border-left);
-            border-bottom-color: var(--nav-tab-border-hover-bottom);
-            border-right-color: var(--nav-tab-border-hover-right);
-            border-color: var(--nav-tab-border-hover-color);
+            border-bottom-color: var(--nav-tab-hover-border-bottom);
+            border-right-color: var(--nav-tab-hover-border-right);
+        }
+
+        &.active:hover {
+            background-color: var(--nav-tab-active-hover-bg-color);
+        }
+
+        &::before {
+            content: "";
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            transform: scaleY(0);
+            transform-origin: bottom center;
+            background: var(--nav-tab-active-hover-bg-color);
+            z-index: -1;
+            transition: transform 0.2s;
         }
     }
 

UI/Web/src/theme/components/_radios.scss

@@ -4,4 +4,8 @@ input[type='radio'] {
     &:hover {
         accent-color: var(--radio-hover-accent-color);
     }
+
+    &:focus {
+        box-shadow: 0 0 0 0.25rem var(--radio-focus-boxshadow-color);
+    }
 }

UI/Web/src/theme/components/_selects.scss

@@ -7,6 +7,7 @@
         border-color: var(--input-focused-border-color);
         background-color: var(--input-bg-color);
         color: var(--input-text-color);
+        box-shadow: 0 0 0 0.25rem var(--input-focus-boxshadow-color);
     }
 
     &:read-only {

UI/Web/src/theme/themes/dark.scss

@@ -5,16 +5,16 @@
     --primary-color-darker-shade: #338A67;
     --primary-color-darkest-shade: #25624A;
     --error-color: #BD362F;
-    --bs-body-bg: #343a40; 
+    --bs-body-bg: #343a40;
     --body-text-color: #efefef;
     --btn-icon-filter: invert(1) grayscale(100%) brightness(200%);
-  
+
     /* Navbar */
     --navbar-bg-color: black;
     --navbar-text-color: white;
     --navbar-fa-icon-color: white;
     --navbar-btn-hover-outline-color: rgba(255, 255, 255, 1);
-  
+
     /* Inputs */
     --input-bg-color: #343a40;
     --input-bg-readonly-color: #434648;
@@ -22,78 +22,81 @@
     --input-text-color: #fff;
     --input-placeholder-color: #aeaeae;
     --input-border-color: #ccc;
-  
+    --input-focus-boxshadow-color: rgb(255 255 255 / 50%);
+
     /* Buttons */
+    --btn-focus-boxshadow-color: rgb(255 255 255 / 50%);
     --btn-primary-text-color: white;
-    --btn-primary-bg-color: var(--primary-color-darker-shade);
-    --btn-primary-border-color: var(--primary-color-darker-shade);
+    --btn-primary-bg-color: var(--primary-color);
+    --btn-primary-border-color: var(--primary-color);
     --btn-primary-hover-text-color: white;
-    --btn-primary-hover-bg-color: var(--primary-color-darkest-shade);
-    --btn-primary-hover-border-color: var(--primary-color-darkest-shade);
+    --btn-primary-hover-bg-color: var(--primary-color-darker-shade);
+    --btn-primary-hover-border-color: var(--primary-color-darker-shade);
     --btn-alt-bg-color: #424c72;
     --btn-alt-border-color: #444f75;
     --btn-alt-hover-bg-color: #3b4466;
     --btn-alt-focus-bg-color: #343c59;
-    --btn-alt-focus-boxshadow-color: rgb(68 79 117 / 50%);
+    --btn-alt-focus-boxshadow-color: rgb(255 255 255 / 50%);
     --btn-fa-icon-color: white;
     --btn-disabled-bg-color: #343a40;
     --btn-disabled-text-color: white;
     --btn-disabled-border-color: #6c757d;
-  
+
     /* Nav (Tabs) */
     --nav-tab-border-color: rgba(44, 118, 88, 0.7);
     --nav-tab-text-color: var(--body-text-color);
-    --nav-tab-bg-color: var(--bs-body-bg);
-    --nav-tab-hover-border-color: var(--primary-color-dark-shade);
+    --nav-tab-bg-color: var(--primary-color);
+    --nav-tab-hover-border-color: var(--primary-color);
     --nav-tab-active-text-color: white;
     --nav-tab-border-hover-color: transparent;
     --nav-tab-hover-text-color: var(--body-text-color);
-    --nav-tab-hover-bg-color: var(--primary-color-dark-shade);
+    --nav-tab-hover-bg-color: transparent;
     --nav-tab-border-top: rgba(44, 118, 88, 0.7);
     --nav-tab-border-left: rgba(44, 118, 88, 0.7);
-    --nav-tab-border-bottom: var(--bs-body-bg);
+    --nav-tab-border-bottom: rgba(44, 118, 88, 0.7);
     --nav-tab-border-right: rgba(44, 118, 88, 0.7);
-    --nav-tab-border-hover-top: var(--primary-color-dark-shade);
-    --nav-tab-border-hover-left: var(--primary-color-dark-shade);
-    --nav-tab-border-hover-bottom: rgba(44, 118, 88, 0.7);
-    --nav-tab-border-hover-right: var(--primary-color-dark-shade);
-
-    --nav-link-bg-color: var(--primary-color-dark-shade);
+    --nav-tab-hover-border-top: rgba(44, 118, 88, 0.7);
+    --nav-tab-hover-border-left: rgba(44, 118, 88, 0.7);
+    --nav-tab-hover-border-bottom: var(--bs-body-bg);
+    --nav-tab-hover-border-right: rgba(44, 118, 88, 0.7);
+    --nav-tab-active-hover-bg-color: var(--primary-color);
+    --nav-link-bg-color: var(--primary-color);
     --nav-link-active-text-color: white;
     --nav-link-text-color: white;
-    
 
-    /* Header */    
+    /* Header */
     --nav-header-text-color: white;
     --nav-header-bg-color: rgb(22, 27, 34);
-  
+
     /* Toasts */
     --toast-success-bg-color: rgba(59, 158, 118, 0.9);
     --toast-error-bg-color: #BD362F;
     --toast-info-bg-color: #2F96B4;
     --toast-warning-bg-color: #F89406;
-  
+
     /* Checkboxes */
     --checkbox-checked-bg-color: var(--primary-color);
     --checkbox-border-color: var(--input-focused-border-color);
     --checkbox-focus-border-color: var(--primary-color);
-  
+    --checkbox-focus-boxshadow-color: rgb(255 255 255 / 50%);
+
     /* Tag Badge */
     --tagbadge-border-color: rgba(239, 239, 239, 0.125);
     --tagbadge-text-color: var(--body-text-color);
     --tagbadge-bg-color: var(--nav-tab-hover-bg-color);
-  
+
     /* List items */
     --list-group-item-text-color: var(--body-text-color); /*rgba(74, 198, 148, 0.9)*/
     --list-group-item-bg-color: #343a40;
     --list-group-item-border-color: rgba(239, 239, 239, 0.125);
     --list-group-hover-text-color: white;
     --list-group-hover-bg-color: var(--accordion-body-bg-color);
-  
+    --list-group-active-border-color: none;
+
     /* Popover */
     --popover-body-bg-color: var(--navbar-bg-color);
     --popover-body-text-color: var(--navbar-text-color);
-  
+
     /* Pagination */
     --pagination-active-link-border-color: var(--primary-color);
     --pagination-active-link-bg-color: var(--primary-color);
@@ -102,14 +105,14 @@
     --pagination-link-text-color: var(--primary-color);
     --pagination-link-bg-color: rgba(1, 4, 9, 0.5);
     --pagination-focus-border-color: var(--primary-color);
-  
+
     /* Dropdown */
     --dropdown-item-hover-text-color: white;
-    --dropdown-item-hover-bg-color: var(--primary-color-dark-shade);
+    --dropdown-item-hover-bg-color: var(--primary-color);
     --dropdown-item-text-color: var(--navbar-text-color);
     --dropdown-item-bg-color: var(--navbar-bg-color);
     --dropdown-overlay-color: rgba(0,0,0,0.5);
-  
+
     /* Accordion */
     --accordion-header-text-color: rgba(74, 198, 148, 0.9);
     --accordion-header-bg-color: rgba(52, 60, 70, 0.5); /* This is a good accent color */
@@ -118,16 +121,18 @@
     --accordion-body-text-color: var(--body-text-color);
     --accordion-header-collapsed-text-color: rgba(74, 198, 148, 0.9);
     --accordion-header-collapsed-bg-color: rgba(22,27,34,0.5);
-  
+    --accordion-button-focus-border-color: unset;
+    --accordion-button-focus-box-shadow: unset;
+
     /* Breadcrumb */
     --breadcrumb-bg-color: #292d32;
     --breadcrumb-item-text-color: var(--body-text-color);
-  
+
     /* Rating star */
     --ratingstar-color: white;
     --ratingstar-star-empty: #b0c4de;
     --ratingstar-star-filled: var(--primary-color);
-  
+
     /* Global */
     --hr-color: rgba(239, 239, 239, 0.125);
     --accent-bg-color: rgba(1, 4, 9, 0.5);
@@ -139,17 +144,18 @@
     --grid-breakpoints-xl: $grid-breakpoint-xl;
     --body-font-family: "EBGaramond", "Helvetica Neue", sans-serif;
     --brand-font-family: "Spartan", sans-serif;
-  
+
     /* Card */
     --card-bg-color: rgba(22,27,34,0.5);
     --card-text-color: var(--body-text-color);
     --card-border-color: rgba(239, 239, 239, 0.125);
     --card-progress-bar-color: var(--primary-color);
+    --card-overlay-bg-color: rgba(0, 0, 0, 0);
     --card-overlay-hover-bg-color: rgba(0, 0, 0, 0.2);
-  
+
     /* Slider */
     --slider-text-color: white;
-  
+
     /* Manga Reader */
     --manga-reader-overlay-filter: blur(10px);
     --manga-reader-overlay-bg-color: rgba(0,0,0,0.5);
@@ -157,10 +163,11 @@
     --manga-reader-bg-color: black;
     --manga-reader-next-highlight-bg-color: rgba(65, 225, 100, 0.5);
     --manga-reader-prev-highlight-bg-color: rgba(65, 105, 225, 0.5);
-    
+
     /* Radios */
     --radio-accent-color: var(--primary-color);
-    --radio-hover-accent-color: var(--primary-color-dark-shade);
+    --radio-hover-accent-color: var(--primary-color);
+    --radio-focus-boxshadow-color: rgb(255 255 255 / 50%);
 
     /* Carousel */
     --carousel-header-text-color: var(--body-text-color);

UI/Web/src/theme/themes/e-ink.scss

@@ -1,4 +1,4 @@
-:root .bg-eink {
+:root .bg-e-ink {
   --color-scheme: light;
   --primary-color: black;
   --primary-color-dark-shade: #3B9E76;
@@ -22,12 +22,22 @@
   --input-border-color: #ccc;
 
   /* Buttons */
-  --btn-primary-text-color: white;
+  --btn-primary-text-color: black;
+  --btn-primary-bg-color: white;
+  --btn-primary-border-color: black;
+  --btn-primary-hover-text-color: white;
+  --btn-primary-hover-bg-color: black;
+  --btn-primary-hover-border-color: black;
   --btn-alt-bg-color: #424c72;
   --btn-alt-border-color: #444f75;
   --btn-alt-hover-bg-color: #3b4466;
   --btn-alt-focus-bg-color: #343c59;
   --btn-alt-focus-boxshadow-color: rgb(68 79 117 / 50%);
+  --btn-fa-icon-color: black;
+  --btn-disabled-bg-color: #020202;
+  --btn-disabled-text-color: white;
+  --btn-disabled-border-color: #6c757d;
+
 
   /* Nav */
   --nav-link-active-text-color: white;
@@ -87,6 +97,7 @@
   --list-group-hover-text-color: black;
   --list-group-hover-bg-color: #eaeaea;
   --list-group-item-border-color: rgba(239, 239, 239, 0.125);
+  --list-group-active-border-color: none;
 
   /* Dropdown */
   --dropdown-item-hover-text-color: white;

UI/Web/src/theme/themes/light.scss

@@ -22,7 +22,7 @@
     --input-border-color: #ccc;
   
     /* Buttons */
-    --btn-primary-text-color: white;
+    --btn-primary-text-color: black;
     --btn-alt-bg-color: #424c72;
     --btn-alt-border-color: #444f75;
     --btn-alt-hover-bg-color: #3b4466;
@@ -41,7 +41,7 @@
     --nav-tab-border-hover-color: transparent;
     
     /* Checkboxes */
-    --checkbox-checked-bg-color: var(--primary-color);
+    --checkbox-checked-bg-color: black;
     --checkbox-bg-color: white;
     --checkbox-border-color: var(--primary-color);
     --checkbox-focus-border-color: var(--input-border-color);
@@ -70,6 +70,7 @@
     --grid-breakpoints-xl: $grid-breakpoint-xl;
     --body-font-family: "EBGaramond", "Helvetica Neue", sans-serif;
     --brand-font-family: "Spartan", sans-serif;
+    --text-muted-color: #aaa;
   
     /* Breadcrumb */
     --breadcrumb-bg-color: #eaeaea;
@@ -79,6 +80,7 @@
     --card-text-color: #000;
     --card-border-color: #ccc;
     --card-progress-bar-color: var(--primary-color);
+    --card-overlay-bg-color: rgba(0, 0, 0, 0);
     --card-overlay-hover-bg-color: rgba(0, 0, 0, 0.2);
   
     /* List items */
@@ -87,6 +89,7 @@
     --list-group-hover-text-color: inherit;
     --list-group-hover-bg-color: #eaeaea;
     --list-group-item-border-color: rgba(239, 239, 239, 0.125);
+    --list-group-active-border-color: none;
   
     /* Dropdown */
     --dropdown-item-hover-text-color: white;

UI/Web/src/theme/utilities/_global.scss

@@ -11,5 +11,5 @@ hr {
 }
 
 .text-muted {
-    color: #d7d7d7 !important;
+    color: var(--text-muted-color) !important;
 }