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>
This commit is contained in:
Joseph Milazzo
GitHub
parent
c776ca3b72
commit
568ea9fd3a
168 changed files with 4710 additions and 1666 deletions
|
|
@ -1,10 +1,8 @@
|
|||
import { Injectable } from '@angular/core';
|
||||
import { ActivatedRouteSnapshot } from '@angular/router';
|
||||
import { FilterSettings } from 'src/app/cards/card-detail-layout/card-detail-layout.component';
|
||||
import { Chapter } from 'src/app/_models/chapter';
|
||||
import { LibraryType } from 'src/app/_models/library';
|
||||
import { MangaFormat } from 'src/app/_models/manga-format';
|
||||
import { AgeRating } from 'src/app/_models/metadata/age-rating';
|
||||
import { Series } from 'src/app/_models/series';
|
||||
import { SeriesFilter } from 'src/app/_models/series-filter';
|
||||
import { Volume } from 'src/app/_models/volume';
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!-- <div class="circular">
|
||||
<div class="inner"></div>
|
||||
<div class="number">
|
||||
<span class="sr-only">{{currentValue}}%</span>
|
||||
<span class="visually-hidden">{{currentValue}}%</span>
|
||||
<i class="fa fa-angle-double-down" style="font-size: 36px;" aria-hidden="true"></i>
|
||||
</div>
|
||||
<div class="circle">
|
||||
|
|
|
|||
|
|
@ -1,7 +1,3 @@
|
|||
$background: rgba(0, 0, 0, .4);
|
||||
$primary-color: #4ac694;
|
||||
|
||||
|
||||
.number {
|
||||
position: absolute;
|
||||
top:50%;
|
||||
|
|
@ -9,15 +5,6 @@ $primary-color: #4ac694;
|
|||
z-index:10;
|
||||
font-size:18px;
|
||||
font-weight:500;
|
||||
color:$primary-color;
|
||||
color: var(--primary-color);
|
||||
animation: MoveUpDown 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes MoveUpDown {
|
||||
0%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
}
|
||||
|
|
@ -2,8 +2,8 @@
|
|||
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title" id="modal-basic-title">{{config.header}}</h4>
|
||||
<button type="button" class="close" aria-label="Close" (click)="close()">
|
||||
<span aria-hidden="true">×</span>
|
||||
<button type="button" class="btn-close" aria-label="Close" (click)="close()">
|
||||
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body" style="overflow-x: auto" [innerHtml]="config.content | safeHtml">
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<div class="tagbadge cursor clickable" style="cursor: pointer;">
|
||||
<div class="media">
|
||||
<!-- <img src="..." class="align-self-center mr-3" alt="..."> -->
|
||||
<i class="fa fa-user-circle align-self-center mr-2" aria-hidden="true"></i>
|
||||
<div class="media-body">
|
||||
<div class="tagbadge cursor clickable">
|
||||
<div class="d-flex">
|
||||
<!-- <img src="..." class="align-self-center me-3" alt="..."> -->
|
||||
<i class="fa fa-user-circle align-self-center me-2" aria-hidden="true"></i>
|
||||
<div class="flex-grow-1">
|
||||
<span class="mt-0 mb-0">{{person.name}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,23 +1,18 @@
|
|||
@use '../../../theme/colors';
|
||||
|
||||
$bg-color: #c9c9c9;
|
||||
$bdr-color: #f2f2f2;
|
||||
|
||||
.badge {
|
||||
//background-color: $bg-color;
|
||||
.tagbadge {
|
||||
background-color: var(--tagbadge-bg-color);
|
||||
transition: all .3s ease-out;
|
||||
margin: 3px 5px 3px 0px;
|
||||
padding: 2px 15px;
|
||||
padding: 2px 10px;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
border: 1px solid $bdr-color;
|
||||
border: 1px solid var(--tagbadge-border-color);
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
width: auto;
|
||||
|
||||
i {
|
||||
color: colors.$primary-color;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
margin-left: 10px;
|
||||
margin-right: 0px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
.read-more-link {
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
cursor: pointer;
|
||||
}
|
||||
// .read-more-link {
|
||||
// font-weight: bold;
|
||||
// text-decoration: none;
|
||||
// cursor: pointer;
|
||||
// color: var(--body-text-color) !important;
|
||||
// }
|
||||
|
|
@ -1,16 +1,14 @@
|
|||
$bg-color: #c9c9c9;
|
||||
$bdr-color: #f2f2f2;
|
||||
|
||||
::ng-deep .tagbadge {
|
||||
background-color: $bg-color;
|
||||
.tagbadge {
|
||||
background-color: var(--tagbadge-bg-color);
|
||||
transition: all .3s ease-out;
|
||||
margin: 3px 5px 3px 0px;
|
||||
padding: 2px 10px;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
border: 1px solid $bdr-color;
|
||||
border: 1px solid var(--tagbadge-border-color);
|
||||
display: inline-block;
|
||||
cursor: default;
|
||||
width: auto;
|
||||
|
||||
i {
|
||||
font-size: 14px;
|
||||
|
|
@ -20,15 +18,15 @@ $bdr-color: #f2f2f2;
|
|||
}
|
||||
}
|
||||
|
||||
::ng-deep .selectable-cursor {
|
||||
cursor: default !important;
|
||||
.selectable-cursor {
|
||||
cursor: text !important;
|
||||
|
||||
i {
|
||||
cursor: default !important;
|
||||
cursor: text !important;
|
||||
}
|
||||
}
|
||||
|
||||
::ng-deep .not-allowed-cursor {
|
||||
.not-allowed-cursor {
|
||||
cursor: not-allowed !important;
|
||||
|
||||
i {
|
||||
|
|
@ -36,7 +34,7 @@ $bdr-color: #f2f2f2;
|
|||
}
|
||||
}
|
||||
|
||||
::ng-deep .clickable-cursor {
|
||||
.clickable-cursor {
|
||||
cursor: pointer !important;
|
||||
|
||||
i {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<div class="modal-header">
|
||||
<h4 class="modal-title">New Update Available!</h4>
|
||||
<button type="button" class="close" aria-label="Close" (click)="close()">
|
||||
<span aria-hidden="true">×</span>
|
||||
<button type="button" class="btn-close" aria-label="Close" (click)="close()">
|
||||
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue