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

Theme Cleanup (#1089)

Browse source 
* 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>
This commit is contained in:
Joseph Milazzo 2022-02-18 07:03:19 -08:00 • committed by GitHub
parent 70b85e0668
commit 4bd9f243f2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
51 changed files with 279 additions and 163 deletions
Download patch file Download diff file Expand all files Collapse all files

85
UI/Web/src/theme/themes/dark.scss
View file

@ -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);