Angular 14 (#1420)
* Updated to Angular 14 * Fixed all new tslint issues * Fixed a routing bug for Angular 14 * Updated ngBootstrap and bootstrap. Fixed side nav item not highlighting on route change * Refactored how default dark styles are done * Migrated everything to a typed form * Bump versions by dotnet-bump-version. * Fixed a regression where click areas need an explicit z-index * Cleanup some css * Bumped docnet back to the alpha which has our downstream fixes * Updated dependencies to later versions. Mainly just NetVips with some archive fixes. * Fixed broken unit tests (due to some fixes in SharpCompress that changed byte arrays, but not visible quality)
This commit is contained in:
Joseph Milazzo
GitHub
parent
01e874150e
commit
b38a26f92b
71 changed files with 4638 additions and 835 deletions
|
|
@ -20,3 +20,7 @@ $grid-breakpoints-xl: 1200px;
|
|||
|
||||
$grid-breakpoints: (xs: $grid-breakpoints-xs, sm: $grid-breakpoints-sm, md: $grid-breakpoints-md, lg: $grid-breakpoints-lg, xl: $grid-breakpoints-xl);
|
||||
|
||||
// Override any bootstrap styles we don't want
|
||||
:root {
|
||||
--hr-color: transparent;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -42,9 +42,11 @@ button:disabled, .form-control:disabled, .form-control[readonly], .disabled, :di
|
|||
.btn-icon {
|
||||
cursor: pointer;
|
||||
color: var(--body-text-color);
|
||||
border: none;
|
||||
|
||||
&:hover, &:focus {
|
||||
color: var(--body-text-color);
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
:root .bg-dark {
|
||||
:root, :root .bg-dark {
|
||||
--color-scheme: dark;
|
||||
--primary-color: #4ac694;
|
||||
--primary-color-dark-shade: #3B9E76;
|
||||
|
|
@ -9,6 +9,7 @@
|
|||
--body-text-color: #efefef;
|
||||
--btn-icon-filter: invert(1) grayscale(100%) brightness(200%);
|
||||
--primary-color-scrollbar: rgba(74,198,148,0.75);
|
||||
|
||||
|
||||
/* Navbar */
|
||||
--navbar-bg-color: black;
|
||||
|
|
@ -42,6 +43,7 @@
|
|||
--btn-disabled-bg-color: #343a40;
|
||||
--btn-disabled-text-color: white;
|
||||
--btn-disabled-border-color: #6c757d;
|
||||
--bs-btn-disabled-border-color: transparent;
|
||||
|
||||
/* Nav (Tabs) */
|
||||
--nav-tab-border-color: rgba(44, 118, 88, 0.7);
|
||||
|
|
|
|||
|
|
@ -1,4 +1,243 @@
|
|||
/* Default styles for Kavita */
|
||||
:root {
|
||||
@import './dark.scss'; // Just re-import variables from dark since that's all we support
|
||||
//@import './dark.scss'; // Just re-import variables from dark since that's all we support
|
||||
--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%);
|
||||
--primary-color-scrollbar: rgba(74,198,148,0.75);
|
||||
|
||||
|
||||
/* 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;
|
||||
--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);
|
||||
--btn-primary-border-color: var(--primary-color);
|
||||
--btn-primary-hover-text-color: white;
|
||||
--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(255 255 255 / 50%);
|
||||
--btn-fa-icon-color: white;
|
||||
--btn-disabled-bg-color: #343a40;
|
||||
--btn-disabled-text-color: white;
|
||||
--btn-disabled-border-color: #6c757d;
|
||||
--bs-btn-disabled-border-color: transparent;
|
||||
|
||||
/* 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(--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: 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: rgba(44, 118, 88, 0.7);
|
||||
--nav-tab-border-right: rgba(44, 118, 88, 0.7);
|
||||
--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 */
|
||||
--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/Switch */
|
||||
--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);
|
||||
--tagbadge-filled-border-color: rgba(239, 239, 239, 0.125);
|
||||
--tagbadge-filled-text-color: var(--body-text-color);
|
||||
--tagbadge-filled-bg-color: var(--primary-color);
|
||||
|
||||
/* Side Nav */
|
||||
--side-nav-bg-color: rgba(0,0,0,0.2);
|
||||
--side-nav-mobile-bg-color: rgb(25,26,28);
|
||||
--side-nav-openclose-transition: 0.15s ease-in-out;
|
||||
--side-nav-box-shadow: rgba(0,0,0,0.5);
|
||||
--side-nav-mobile-box-shadow: 3px 0em 5px 10em rgb(0 0 0 / 50%);
|
||||
--side-nav-hover-text-color: white;
|
||||
--side-nav-hover-bg-color: black;
|
||||
--side-nav-color: white;
|
||||
--side-nav-border-radius: 5px;
|
||||
--side-nav-border: none;
|
||||
--side-nav-border-closed: none;
|
||||
--side-nav-border-transition: 0.5s ease-in-out;
|
||||
--side-nav-companion-bar-transistion: 0.15s linear;
|
||||
--side-nav-bg-color-transition: 0.5s ease-in-out;
|
||||
--side-nav-closed-bg-color: transparent;
|
||||
--side-nav-item-active-color: var(--primary-color);
|
||||
--side-nav-item-active-text-color: white;
|
||||
--side-nav-active-bg-color: rgba(0,0,0,0.5);
|
||||
--side-nav-overlay-color: rgba(0,0,0,0.5);
|
||||
|
||||
|
||||
/* 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: rgb(22, 27, 34);
|
||||
--list-group-active-border-color: none;
|
||||
|
||||
/* Popover */
|
||||
--popover-body-bg-color: var(--navbar-bg-color);
|
||||
--popover-body-text-color: var(--navbar-text-color);
|
||||
--popover-outerarrow-color: transparent;
|
||||
--popover-arrow-color: transparent;
|
||||
--popover-bg-color: black;
|
||||
--popover-border-color: black;
|
||||
|
||||
/* 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: white;
|
||||
--pagination-link-bg-color: rgba(1, 4, 9, 0.5);
|
||||
--pagination-focus-border-color: var(--primary-color);
|
||||
--pagination-link-hover-color: var(--primary-color);
|
||||
|
||||
/* Progress Bar */
|
||||
--progress-striped-animated-color: linear-gradient(45deg, rgba(74,198,148, 0.75) 25%, rgba(51, 138, 103, 0.75) 25%, rgba(51, 138, 103, 0.75) 50%, rgba(74,198,148, 0.75) 50%, rgba(74,198,148, 0.75) 75%, rgba(51, 138, 103, 0.75) 75%, rgba(51, 138, 103, 0.75));
|
||||
--progress-bg-color: var(--nav-header-bg-color);
|
||||
--progress-bar-color: var(--primary-color-dark-shade);
|
||||
|
||||
/* 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);
|
||||
--accordion-body-bg-color: #292929;
|
||||
--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: #292929;
|
||||
--accordion-button-focus-border-color: unset;
|
||||
--accordion-button-focus-box-shadow: unset;
|
||||
--accordion-active-body-bg-color: #292929;
|
||||
|
||||
/* 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-width: 0 1px 1px 1px;
|
||||
--card-border-style: solid;
|
||||
--card-border-color: transparent;
|
||||
--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;
|
||||
--input-range-color: var(--primary-color);
|
||||
--input-range-active-color: var(--primary-color-darker-shade);
|
||||
|
||||
/* 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);
|
||||
--radio-focus-boxshadow-color: rgb(255 255 255 / 50%);
|
||||
|
||||
/* Carousel */
|
||||
--carousel-header-text-color: var(--body-text-color);
|
||||
--carousel-header-text-decoration: none;
|
||||
--carousel-hover-header-text-decoration: none;
|
||||
|
||||
/** Drawer */
|
||||
--drawer-background-color: black; // TODO: Remove this for bg
|
||||
--drawer-bg-color: #292929;
|
||||
--drawer-text-color: white;
|
||||
|
||||
/** Event Widget */
|
||||
--event-widget-bg-color: rgb(1, 4, 9);
|
||||
--event-widget-item-bg-color: rgb(1, 4, 9);
|
||||
--event-widget-text-color: var(--body-text-color);
|
||||
--event-widget-item-border-color: rgba(53, 53, 53, 0.5);
|
||||
--event-widget-border-color: rgba(1, 4, 9, 0.5);
|
||||
|
||||
/* Search */
|
||||
--search-result-text-lite-color: initial;
|
||||
|
||||
/* Bulk Selection */
|
||||
--bulk-selection-text-color: var(--navbar-text-color);
|
||||
--bulk-selection-highlight-text-color: var(--primary-color);
|
||||
|
||||
/* List Card Item */
|
||||
--card-list-item-bg-color: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.15) 1%, rgba(0,0,0,0) 100%);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ body {
|
|||
|
||||
hr {
|
||||
background-color: var(--hr-color);
|
||||
border-top: 0px;
|
||||
}
|
||||
|
||||
.accent {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue