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/cover-image-chooser/cover-image-chooser.component.html

@@ -3,13 +3,13 @@
         <ngx-file-drop (onFileDrop)="dropped($event)" 
         (onFileOver)="fileOver($event)" (onFileLeave)="fileLeave($event)" accept=".png,.jpg,.jpeg" [directory]="false" dropZoneClassName="file-upload" contentClassName="file-upload-zone" [directory]="false">
             <ng-template ngx-file-drop-content-tmp let-openFileSelector="openFileSelector">
-                <div class="row no-gutters mt-3 pb-3" *ngIf="mode === 'all'">
+                <div class="row g-0 mt-3 pb-3" *ngIf="mode === 'all'">
                     <div class="mx-auto">
-                        <div class="row no-gutters mb-3">
+                        <div class="row g-0 mb-3">
                             <i class="fa fa-file-upload mx-auto" style="font-size: 24px;" aria-hidden="true"></i>
                         </div>
                         
-                        <div class="row no-gutters">
+                        <div class="row g-0">
                             <div class="mx-auto">
                                 <a class="col" style="padding-right:0px" href="javascript:void(0)" (click)="mode = 'url'; setupEnterHandler()"><span class="phone-hidden">Enter a </span>Url</a>
                                 <span class="col" style="padding-right:0px">•</span>
@@ -23,17 +23,16 @@
                 
 
                 <ng-container *ngIf="mode === 'url'">
-                    <div class="row no-gutters mt-3 pb-3 ml-md-2 mr-md-2">
-                        <div class="input-group col-md-10 mr-md-2" style="width: 100%">
+                    <div class="row g-0 mt-3 pb-3 ms-md-2 me-md-2">
+                        <div class="input-group col-md-10 me-md-2" style="width: 100%">
+                            <!-- TOOD: Bootstrap migration: This should be replaced with just the label-->
                             <div class="input-group-prepend">
-                                <label class="input-group-text" for="load-image">Url</label>
+                                <label class="input-group-text form-label" for="load-image">Url</label>
                             </div>
                             <input type="text" autocomplete="off" class="form-control" formControlName="coverImageUrl" placeholder="https://" id="load-image" class="form-control">
-                            <div class="input-group-append">
-                                <button class="btn btn-outline-secondary" type="button" id="load-image-addon" (click)="loadImage(); mode='all';" [disabled]="form.get('coverImageUrl')?.value.length === 0">
-                                    Load
-                                </button>
-                            </div>
+                            <button class="btn btn-outline-secondary" type="button" id="load-image-addon" (click)="loadImage(); mode='all';" [disabled]="form.get('coverImageUrl')?.value.length === 0">
+                                Load
+                            </button>
                         </div>
                         <button class="col btn btn-secondary" href="javascript:void(0)" (click)="mode = 'all'" aria-label="Back">
                             <i class="fas fa-share" aria-hidden="true" style="transform: rotateY(180deg)"></i>&nbsp;
@@ -51,7 +50,7 @@
         </ng-template>
     </form>
 
-    <div class="row no-gutters chooser" style="padding-top: 10px">
+    <div class="row g-0 chooser" style="padding-top: 10px">
         <div class="image-card col-auto {{selectedIndex === idx ? 'selected' : ''}}" *ngFor="let url of imageUrls; let idx = index;" tabindex="0" attr.aria-label="Image {{idx + 1}}" (click)="selectImage(idx)">
             <app-image class="card-img-top" height="230px" width="158px" [imageUrl]="url"></app-image>
         </div>

UI/Web/src/app/cards/cover-image-chooser/cover-image-chooser.component.scss

@@ -1,4 +1,3 @@
-@use '../../../theme/colors';
 $image-height: 230px;
 $image-width: 160px;
 
@@ -14,7 +13,7 @@ $image-width: 160px;
 }
 
 .selected {
-    outline: 5px solid colors.$primary-color;
+    outline: 5px solid var(--primary-color);
     outline-width: medium;
     outline-offset: -1px;
 }
@@ -22,7 +21,7 @@ $image-width: 160px;
 ngx-file-drop ::ng-deep > div {
     // styling for the outer drop box
     width: 100%;
-    border: 2px solid colors.$primary-color;
+    border: 2px solid var(--primary-color);
     border-radius: 5px;
     height: 100px;
     margin: auto;