Custom Theme Support (#1077)

* Started the migration to bootstrap 5. Introduced a breakpoint system that bootstrap reflects for our screens.

* sr only migrated

* mr/ml -> me/ms

* pl/pr -> ps/pe

* btn-block

* removed input-group-append

* Added form-label to all labels

* Added some style overrides for inputs

* Replaced form-group with mb-3

* Ignore journal files

* Update media to d-flex/flex-grow-1

* Fixed reading list detail page

* For develop builds, don't inline critical styles

* Fixed some downstream security issues

* Fixed a layout issue in series detail

* Fixed issue with btn-light not having background color. Updated layout for series detail metadata

* Cleaned up nav search

* Laid out the organization for custom theme components. Update _inputs.scss with variable overrides and depending on theme, it will just work.

* Lots of theming work

* Added inputs to the theme page

* Login and input placeholder changes

- Fixed login screen centering issue on all devices
- Changed the format of the login screen
- Change the input placeholder color

* Added checkbox styles

* Refactored tagbadges and removed some ngdeep selectors

* Added nav bar component and refactored some styles into event widget

* Cleaned nav events again and made dedicated popover body

* Finished pagination component

* Fixed up some styles with buttons

* refactored dropdown component

* Update accordion component

* Refactored breadcrumbs and rating star. Fixed a missing style for cards

* Fixed some styling issues on person badge, added modal component, and some global styles

* Finished moving everything within dark to component files

* Fixed up filter buttons, move card styles into a component theme, fixed slider style

* Refactored library card and grouped typeahead

* Updated normal typeahead component and reduced amount of ngdeep selector

* Refactored grid breakpoints to be available by css variable, but it's hardcoded into the app

* Ensure breakpoints are defined per theme

* Fixed up some styling overrides and customization for nav links and alt button

* Removed some deep styles, moved css out of splash container and brough back labels for login page

* Finished css variable refactor

* Refactored all the theme variable definitions into files for each theme.

* Added back bootstrap overrides

* Added a note about bootstrap theme colors being not-possible to swap out at runtime

* Cleaned up some dead code

* Implemented the ability to set a custom theme on the site. Cleaned up misc code throughout.

* Additional changes

- Fixed nav where "kavita" was not hiding correctly on small viewports
- Fixed search bar to make the behavior more consistent
- Fixed accordion buttons
- Changed accordion buttons to be more responsive
- Added radio button colors
- Fixed radios on theme test page
- Changed login and reset password card layouts to be more consistent.
- Added primary color shade for when darker shading is needed.

* Built a basic site, allow the user to apply different themes, refactored nav service code out.

* Implemented the ability update a user's theme

* Added unit tests for Scan and Get Content in SiteThemeService.

* Fixed a bug in the login code and Pref code which wasn't joining on SiteTheme table. Wrote Unit tests and the UI component to manage current theme.

* Implemented scan so that it manages custom themes with unit tests

* Component updates

- Repositioning style ordering
- Adding indicator override
- Adding select styles

* SignlaR integration, some fixes when creating custom entities, one single migration. Just login functionality left.

* More ui updated

- Added .no-hover to prevent hover on elements where not needed
- Changed all selects I could find to appropriate class
- Changed up nav tabs to work more like bootstrap tabs than pills
- Added padding to top of some containers to make styles consistent
- Added ability to change navbar fontawesome icon colors
- removed some unecessary inline styling
- Changed radio button to appropriate class
- Toned down primate color, a bit too bright for dark theme.
- Added ability to change button fontawesome icon color

* nav-tab fix for series-detail

* Added themes folder to gitignore

* Adding card overlay

* Fixing up light theme

* Everything is done. Only bug is that color-scheme isn't being set properly from css variable.

* Checkboxes have pointer by default. Confirm/Confirm email use default (dark) theme by default

* Fixed an error where color-scheme wasn't reflecting correctly on themes on first load

* Fixed user preferences not available on login

* Changing dual radios to switches and color tweaks

* disabled primary APCA fix

* button APCA fixes

* Fixed some timing issues with first load and image service

* Fixed swiper issues from upgrade

* Changed themes to be scss files again and adjusted Seed code

* Migrated carousel to css variables. Fixed a broken animation for search.

* Cleaned up some backend smells

* Fixed white border outline on nav tabs, added some variables for header

* Nav bar has been css variable-ified

* Added some basic eink stuff to make the app useable

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

UI/Web/src/app/cards/card-item/card-item.component.html

@@ -12,7 +12,7 @@
 
         <span class="download" *ngIf="download$ | async as download">
           <app-circular-loader [currentValue]="download.progress"></app-circular-loader>
-          <span class="sr-only" role="status">
+          <span class="visually-hidden" role="status">
             {{download.progress}}% downloaded
           </span>
         </span>
@@ -27,8 +27,9 @@
       </div>
 
       <div class="count" *ngIf="count > 1">
-        <span class="badge badge-primary">{{count}}</span>
+        <span class="badge bg-primary">{{count}}</span>
       </div>
+      <div class="card-overlay"></div>
     </div>
 
     <div class="card-body" *ngIf="title.length > 0 || actions.length > 0">
@@ -36,12 +37,12 @@
         <span class="card-title" placement="top" id="{{title}}_{{entity?.id}}" [ngbTooltip]="tooltipTitle" (click)="handleClick()" tabindex="0">
           <span *ngIf="isPromoted()">
             <i class="fa fa-angle-double-up" aria-hidden="true"></i>
-            <span class="sr-only">(promoted)</span>
+            <span class="visually-hidden">(promoted)</span>
           </span>
-          <i class="fa {{utilityService.mangaFormatIcon(format)}}" aria-hidden="true" *ngIf="format != MangaFormat.UNKNOWN" title="{{utilityService.mangaFormat(format)}}"></i><span class="sr-only">{{utilityService.mangaFormat(format)}}</span>
+          <i class="fa {{utilityService.mangaFormatIcon(format)}}" aria-hidden="true" *ngIf="format != MangaFormat.UNKNOWN" title="{{utilityService.mangaFormat(format)}}"></i><span class="visually-hidden">{{utilityService.mangaFormat(format)}}</span>
           &nbsp;{{title}}
         </span>
-        <span class="card-actions float-right">
+        <span class="card-actions float-end">
           <app-card-actionables (actionHandler)="performAction($event)" [actions]="actions" [labelBy]="title"></app-card-actionables>
         </span>
       </div>

UI/Web/src/app/cards/card-item/card-item.component.scss

@@ -1,4 +1,4 @@
-@use '../../../theme/colors';
+
 
 $triangle-size: 30px;
 $image-height: 230px;
@@ -7,7 +7,7 @@ $image-width: 160px;
 .error-banner {
     width: 160px;
     height: 18px;
-    background-color: colors.$error-color;
+    background-color: var(--toast-error-bg-color);
     font-size: 12px;
     color: white;
     text-transform: uppercase;
@@ -25,6 +25,11 @@ $image-width: 160px;
     padding-left: 0px;
     padding-right: 0px;
     box-sizing: border-box;
+    position: relative;
+    background-color: var(--card-bg-color);
+    color: var(--card-text-color);
+    border-color: var(--card-border-color);
+
 }
 
 .card-title {
@@ -39,7 +44,7 @@ $image-width: 160px;
 }
 
 .selected-highlight {
-    outline: 2px solid colors.$primary-color;
+    outline: 2px solid var(--primary-color);
 }
 
 
@@ -52,7 +57,7 @@ $image-width: 160px;
     height: 5px;
 
     .progress {
-        color: colors.$primary-color;
+        color: var(--card-progress-bar-color);
         background-color: transparent;
     }
 }
@@ -73,7 +78,7 @@ $image-width: 160px;
     height: 0;
     border-style: solid;
     border-width: 0 $triangle-size $triangle-size 0;
-    border-color: transparent colors.$primary-color transparent transparent;
+    border-color: transparent var(--primary-color) transparent transparent;
 }
 
 
@@ -106,10 +111,12 @@ $image-width: 160px;
 
         .bulk-mode {
             visibility: visible;
+            z-index: 110;
         }
 
         .overlay-item {
             visibility: visible;
+            z-index: 100;
         }
     }
     
@@ -142,3 +149,17 @@ $image-width: 160px;
     text-decoration: none;
     margin-top: 0px;
 }
+
+.card-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 230px;
+    z-index: 10;
+    transition: opacity 0.2s;
+}
+
+.card-overlay:hover {
+    opacity: 0;
+}