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/styles.scss

@@ -1,42 +1,47 @@
 @use '../node_modules/swiper/swiper.scss' as swiper;
-@use '~bootstrap/scss/mixins/_breakpoints.scss' as breakpoints;
+
+// Import themes which define the css variables we use to customize the app
+@import './theme/themes/light';
+@import './theme/themes/dark';
+@import './theme/themes/eink';
 
 // Import colors for overrides of bootstrap theme
-@import './theme/colors';
 @import './theme/toastr';
+@import './theme/variables';
 
 // Bootstrap must be after _colors since we define the colors there
 @import '~bootstrap/scss/bootstrap';
 
 
-
-@import './theme/dark.scss';
-
+// Import all the customized theme overrides
+@import './theme/components/input';
+@import './theme/components/anchors';
+@import './theme/components/nav';
+@import './theme/components/buttons';
+@import './theme/components/toast';
+@import './theme/components/checkbox';
+@import './theme/components/tagbadge';
+@import './theme/components/list';
+@import './theme/components/navbar';
+@import './theme/components/popover';
+@import './theme/components/pagination';
+@import './theme/components/dropdown';
+@import './theme/components/accordion';
+@import './theme/components/breadcrumb';
+@import './theme/components/ratingstar';
+@import './theme/components/modal';
+@import './theme/components/card';
+@import './theme/components/slider';
+@import './theme/components/radios';
+@import './theme/components/selects';
 
 
+@import './theme/utilities/utilities';
+@import './theme/utilities/animations';
+@import './theme/utilities/global';
 
 
 // Global Styles
-button:disabled, .form-control:disabled, .form-control[readonly], .disabled, :disabled {
-  cursor: not-allowed;
-}
-
-label, select, .clickable {
-  cursor: pointer;
-}
-
-.btn-primary {
-  color: white;
-}
-
-:root {
-  color-scheme: light;
-}
-
-// :root .bg-dark {
-//   color-scheme: dark;
-// }
-
 @font-face {
   font-family: "EBGarmond";
   src: url("assets/fonts/EBGarmond/EBGaramond-VariableFont_wght.ttf") format("truetype");
@@ -47,59 +52,18 @@ label, select, .clickable {
   src: url("assets/fonts/Spartan/Spartan-VariableFont_wght.ttf");
 }
 
-html, body { height: 100%; }
-body {
-  margin: 0; 
-  font-family: "EBGaramond", "Helvetica Neue", sans-serif;
-}
-
-
-.btn-icon {
+label, select, .clickable {
   cursor: pointer;
 }
 
-.btn.btn-secondary.alt {
-  background-color: #424c72;
-  border-color: #444f75;
-
-  &:hover {
-    background-color: #3b4466; 
-  }
-
-  &:focus {
-    background-color: #343c59;
-    box-shadow: 0 0 0 0.2rem rgb(68 79 117 / 50%); 
-  }
+html, body { height: 100%; color-scheme: var(--color-scheme); }
+body {
+  margin: 0; 
+  font-family: var(--body-font-family);
+  color: var(--body-text-color);
 }
 
-
+// Needed for fullscreen
 app-root {
   background-color: inherit;
 }
-
-
-
-
-// Utiliities
-@include breakpoints.media-breakpoint-down(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) {
-  .phone-hidden {
-    display: none;
-  }
-}
-
-@include breakpoints.media-breakpoint-up(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) {
-  .not-phone-hidden {
-    display: none;
-  }
-}
-
-@keyframes fadein {
-  from { opacity: 0; }
-  to   { opacity: 1; }
-}
-
-// Debug styles
-.redlines * {
-  outline: 1px solid red;
-  outline-offset: -1px;
-}