AZEN-SGG/Kavita
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Custom Theme Support (#1077)

Browse source 
* 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>
This commit is contained in:
Joseph Milazzo 2022-02-16 07:12:38 -08:00 • committed by GitHub
parent c776ca3b72
commit 568ea9fd3a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
168 changed files with 4710 additions and 1666 deletions
Download patch file Download diff file Expand all files Collapse all files

169
UI/Web/src/theme/themes/dark.scss Normal file
View file

@ -0,0 +1,169 @@
:root .bg-dark {
--color-scheme: dark;
--primary-color: #4ac694;
--primary-color-dark-shade: #3B9E76;
--primary-color-darker-shade: #338A67;
--primary-color-darkest-shade: #25624A;
--error-color: #BD362F;
--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;
--input-focused-border-color: #ccc;
--input-text-color: #fff;
--input-placeholder-color: #aeaeae;
--input-border-color: #ccc;
/* Buttons */
--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-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-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: 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-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-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-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-link-active-text-color: white;
--nav-link-text-color: white;
/* 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);
/* 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);
/* 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);
--pagination-active-link-text-color: white;
--pagination-link-border-color: rgba(239, 239, 239, 0.125);
--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-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 */
--accordion-body-bg-color: rgba(22,27,34,0.5);
--accordion-body-border-color: rgba(239, 239, 239, 0.125);
--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);
/* 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);
--accent-text-color: lightgrey;
--grid-breakpoints-xs: $grid-breakpoint-xs;
--grid-breakpoints-sm: $grid-breakpoint-sm;
--grid-breakpoints-md: $grid-breakpoint-md;
--grid-breakpoints-lg: $grid-breakpoint-lg;
--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-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);
--manga-reader-overlay-text-color: white;
--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);
/* Carousel */
--carousel-header-text-color: var(--body-text-color);
--carousel-header-text-decoration: none;
--carousel-hover-header-text-decoration: underline;
}