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

Merge 707fb2cc72 into ef2640b5fc

Browse source
This commit is contained in:
Christopher 2025-07-06 17:30:42 +02:00 • committed by GitHub
commit 1b06d2af37
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 187 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

110
UI/Web/src/_card-item-common.scss
View file

@ -1,27 +1,26 @@
$image-height: 232.91px; $image-height: 14.556875rem;
$image-width: 160px; $image-width: 10rem;
.error-banner { .error-banner {
width: $image-width; width: $image-width;
height: 18px; height: 1.125rem;
background-color: var(--toast-error-bg-color); background-color: var(--toast-error-bg-color);
font-size: 12px; font-size: 0.75rem;
color: white; color: white;
text-transform: uppercase; text-transform: uppercase;
text-align: center; text-align: center;
position: absolute; position: absolute;
top: 0px; top: 0.0rem;
right: 0px; right: 0.0rem;
} }
.selected-highlight { .selected-highlight {
outline: 2px solid var(--primary-color); outline: 0.125rem solid var(--primary-color);
} }
.progress-banner { .progress-banner {
width: $image-width; width: $image-width;
height: 5px; height: 0.3125rem;
.progress { .progress {
color: var(--card-progress-bar-color); color: var(--card-progress-bar-color);
@ -30,15 +29,15 @@ $image-width: 160px;
} }
.download { .download {
width: 80px; width: 5rem;
height: 80px; height: 5rem;
position: absolute; position: absolute;
top: 25%; top: 25%;
right: 30%; right: 30%;
} }
.badge-container { .badge-container {
border-radius: 4px; border-radius: 0.25rem;
display: block; display: block;
height: $image-height; height: $image-height;
left: 0; left: 0;
@ -46,13 +45,13 @@ $image-width: 160px;
pointer-events: none; pointer-events: none;
position: absolute; position: absolute;
top: 0; top: 0;
width: 160px; width: 10rem;
} }
.not-read-badge { .not-read-badge {
position: absolute; position: absolute;
top: calc(-1 * (var(--card-progress-triangle-size) / 2)); top: calc(-1 * (var(--card-progress-triangle-size) / 2));
right: -14px; right: -0.875rem;
z-index: 1000; z-index: 1000;
height: var(--card-progress-triangle-size); height: var(--card-progress-triangle-size);
width: var(--card-progress-triangle-size); width: var(--card-progress-triangle-size);
@ -62,9 +61,10 @@ $image-width: 160px;
.bulk-mode { .bulk-mode {
position: absolute; position: absolute;
top: 5px; top: 0;
left: 5px; left: 0;
visibility: hidden; visibility: hidden;
transition: all ease-in-out 300ms;
&.always-show { &.always-show {
visibility: visible !important; visibility: visible !important;
@ -73,9 +73,39 @@ $image-width: 160px;
} }
input[type="checkbox"] { input[type="checkbox"] {
width: 20px; width: 1.25rem;
height: 20px; height: 1.25rem;
color: var(--checkbox-bg-color); color: var(--checkbox-bg-color);
border-radius: 50%;
border: 0.125rem solid #f0f0f0;
background-color: var(--elevation-layer11-dark);
transform: scale(0.85);
transition: all ease-in-out 300ms;
left: 0.4375rem;
position: relative;
top: 0.3125rem;
box-shadow: 0 0 0.3125rem 0.125rem hsl(0deg 0% 0% / 69%);
&:hover {
cursor: pointer;
}
&:checked {
border: unset;
transform: scale(1);
background-color: var(--primary-color);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
&:focus {
box-shadow: 0 0 0.3125rem 0.125rem hsl(0deg 0% 0% / 69%);
}
}
&:hover {
~ .card-overlay {
background-color: var(--card-overlay-hover-bg-color);
}
} }
} }
@ -113,10 +143,10 @@ $image-width: 160px;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 232.91px; height: 14.556875rem;
transition: all 0.2s; transition: 300ms ease-in-out all;
border-top-left-radius: 4px; border-top-left-radius: 0.25rem;
border-top-right-radius: 4px; border-top-right-radius: 0.25rem;
&:hover { &:hover {
background-color: var(--card-overlay-hover-bg-color); background-color: var(--card-overlay-hover-bg-color);
@ -126,7 +156,7 @@ $image-width: 160px;
.overlay-information--centered { .overlay-information--centered {
position: absolute; position: absolute;
background-color: rgba(0, 0, 0, 0.7); background-color: rgba(0, 0, 0, 0.7);
border-radius: 50px; border-radius: 0.9375rem;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
@ -141,8 +171,8 @@ $image-width: 160px;
} }
.count { .count {
top: 5px; top: 0.3125rem;
right: 10px; right: 0.625rem;
position: absolute; position: absolute;
} }
} }
@ -152,26 +182,26 @@ $image-width: 160px;
} }
.library { .library {
font-size: 13px; font-size: 0.8125rem;
text-decoration: none; text-decoration: none;
margin-top: 0px; margin-top: 0.0rem;
} }
.card-title-container { .card-title-container {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 0 5px; padding: 0 0.3125rem;
:first-child { :first-child {
min-width: 22px; min-width: 1.375rem;
} }
.card-title { .card-title {
font-size: 0.8rem; font-size: 0.8rem;
margin: 0; margin: 0;
text-align: center; text-align: center;
max-width: 90px; max-width: 5.625rem;
a { a {
overflow: hidden; overflow: hidden;
@ -181,15 +211,15 @@ $image-width: 160px;
} }
.card-actions { .card-actions {
min-width: 15.82px; min-width: 0.98875rem;
} }
.card-format { .card-format {
min-width: 22px; min-width: 1.375rem;
} }
::ng-deep app-card-actionables .dropdown .dropdown-toggle { ::ng-deep app-card-actionables .dropdown .dropdown-toggle {
padding: 0 5px; padding: 0 0.3125rem;
} }
.meta-title { .meta-title {
@ -201,9 +231,9 @@ $image-width: 160px;
.card-title { .card-title {
font-size: 0.8rem; font-size: 0.8rem;
margin: 0; margin: 0;
padding: 10px 0; padding: 0.625rem 0;
text-align: center; text-align: center;
max-width: 120px; max-width: 7.5rem;
a { a {
overflow: hidden; overflow: hidden;
@ -212,7 +242,7 @@ $image-width: 160px;
} }
.card-body > div:nth-child(2) { .card-body > div:nth-child(2) {
height: 40px; height: 2.5rem;
overflow: hidden; overflow: hidden;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
display: -webkit-box; display: -webkit-box;
@ -225,7 +255,7 @@ $image-width: 160px;
visibility: hidden; visibility: hidden;
display: none; display: none;
.card-title { .card-title {
padding: 10px; padding: 0.625rem;
} }
} }
@ -235,11 +265,11 @@ $image-width: 160px;
.expected { .expected {
.overlay-information--centered { .overlay-information--centered {
div { div {
height: 32px; height: 2rem;
width: 32px; width: 2rem;
i { i {
font-size: 1.4rem; font-size: 1.4rem;
line-height: 32px; line-height: 2rem;
} }
} }
} }

10
UI/Web/src/app/cards/bulk-operations/bulk-operations.component.html
View file

@ -1,16 +1,16 @@
<ng-container *transloco="let t; read: 'bulk-operations'"> <ng-container *transloco="let t; read: 'bulk-operations'">
@if (bulkSelectionService.selections$ | async; as selectionCount) { @if (bulkSelectionService.selections$ | async; as selectionCount) {
@if (selectionCount > 0) { @if (selectionCount > 0) {
<div class="bulk-select-container" [ngStyle]="{'margin-left': marginLeft + 'px', 'margin-right': marginRight + 'px'}"> <div class="bulk-select-container">
<div class="bulk-select"> <div class="bulk-select">
<div class="d-flex justify-content-around align-items-center"> <div class="d-flex align-items-center">
<span class="highlight"> <span class="highlight">
<i class="fa fa-check me-1" aria-hidden="true"></i> <i class="fa fa-check me-1" aria-hidden="true"></i>
{{t('items-selected',{num: selectionCount | number})}} {{t('items-selected',{num: selectionCount | number})}}
</span> </span>
<span> <span class="selection-actions">
@if (hasMarkAsUnread) { @if (hasMarkAsUnread) {
<button class="btn btn-icon" (click)="executeAction(Action.MarkAsUnread)" [ngbTooltip]="t('mark-as-unread')" placement="bottom"> <button class="btn btn-icon" (click)="executeAction(Action.MarkAsUnread)" [ngbTooltip]="t('mark-as-unread')" placement="bottom">
<i class="fa-regular fa-circle-check" aria-hidden="true"></i> <i class="fa-regular fa-circle-check" aria-hidden="true"></i>
@ -23,12 +23,12 @@
<span class="visually-hidden">{{t('mark-as-read')}}</span> <span class="visually-hidden">{{t('mark-as-read')}}</span>
</button> </button>
} }
<app-card-actionables (actionHandler)="performAction($event)" [inputActions]="actions" labelBy="bulk-actions-header" iconClass="fa-ellipsis-h" /> <app-card-actionables (actionHandler)="performAction($event)" [inputActions]="actions" labelBy="bulk-actions-header" iconClass="fa-ellipsis-h" class="actionables"/>
</span> </span>
<span id="bulk-actions-header" class="visually-hidden">Bulk Actions</span> <span id="bulk-actions-header" class="visually-hidden">Bulk Actions</span>
<button class="btn btn-icon" (click)="bulkSelectionService.deselectAll()"><i class="fa fa-times me-1" aria-hidden="true"></i>{{t('deselect-all')}}</button> <button class="btn btn-icon deselect" (click)="bulkSelectionService.deselectAll()"><i class="fa fa-times me-1" aria-hidden="true"></i>{{t('deselect-all')}}</button>
</div> </div>
</div> </div>
</div> </div>

105
UI/Web/src/app/cards/bulk-operations/bulk-operations.component.scss
View file

@ -2,18 +2,111 @@
z-index: 1; z-index: 1;
top: 0; top: 0;
position: sticky; position: sticky;
margin-right: 1.8125rem;
.bulk-select { .bulk-select {
background-color: var(--bulk-selection-bg-color); background-color: var(--bulk-selection-bg-color);
border-bottom: 2px solid var(--primary-color); border: 0.125rem solid var(--primary-color);
color: var(--bulk-selection-text-color) !important; box-shadow: 0 0.25rem 1.875rem rgba(0,0,0,0.1);
padding: 0.125rem;
.btn-icon { div {
color: var(--bulk-selection-text-color); justify-content: space-between;
margin: 0 0.75rem;
.highlight {
color: var(--primary-color);
font-size: 0.8125rem;
}
.selection-actions {
display: flex;
align-items: center;
.btn-icon {
color: var(--bulk-selection-text-color);
padding: 0 1rem;
margin-right: 0.375rem;
font-size: 1.125rem;
display: flex;
min-height: 2.5rem;
align-items: center;
&:hover {
background-color: #ffffff2e;
}
}
}
.btn.deselect {
font-size: 0.75rem;
color: var(--text-light-muted-color);
transition: 300ms ease-in-out all;
i {
color: var(--text-light-muted-color);
transition: 300ms ease-in-out all;
}
&:hover {
color: var(--bulk-selection-text-color);
i {
color: var(--bulk-selection-text-color);
}
}
}
}
> button.btn {
font-size: 0.75rem;
} }
} }
} }
.highlight { :host ::ng-deep .bulk-select-container {
color: var(--bulk-selection-highlight-text-color) !important; .bulk-select {
div {
.selection-actions {
.actionables {
.btn {
padding: 0 1rem;
font-size: 1.3125rem;
display: flex;
min-height: 2.5rem;
align-items: center;
border-radius: 0.375rem;
&:hover {
background-color: #ffffff2e;
}
}
}
}
}
}
}
@media (max-width: 687px) {
.bulk-select-container {
margin: unset;
}
}
@media (max-width: 428px) {
.bulk-select-container {
.bulk-select {
div {
.highlight {
font-size: 0.6875rem;
}
.selection-actions {
.btn {
font-size: 1.0625rem;
padding: 0.625rem;
}
}
.btn.deselect {
font-size: 0.6875rem;
}
}
}
}
} }

11
UI/Web/src/app/nav/_components/nav-header/nav-header.component.scss
View file

@ -126,6 +126,17 @@
/* small devices (phones, 650px and down) */ /* small devices (phones, 650px and down) */
@media only screen and (max-width:650px) { @media only screen and (max-width:650px) {
:host ::ng-deep {
.navbar-nav {
.nav-item.search {
.ng-autocomplete {
input {
font-size: 1rem !important;
}
}
}
}
}
.navbar-nav { .navbar-nav {
width: 0; width: 0;
} }

1
UI/Web/src/app/registration/user-login/user-login.component.scss
View file

@ -15,6 +15,7 @@ a {
color: #fff !important; color: #fff !important;
border-color: var(--login-input-border-color); border-color: var(--login-input-border-color);
font-family: var(--login-input-font-family); font-family: var(--login-input-font-family);
font-size: 1rem;
&:focus { &:focus {
border-color: var(--login-input-border-color-focus); border-color: var(--login-input-border-color-focus);

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

@ -51,6 +51,7 @@
--primary-color-scrollbar: rgba(255,255,255,0.3); --primary-color-scrollbar: rgba(255,255,255,0.3);
--default-state-scrollbar: transparent; --default-state-scrollbar: transparent;
--text-muted-color: hsla(0,0%,100%,.45); --text-muted-color: hsla(0,0%,100%,.45);
--text-light-muted-color: hsla(0,0%,100%,.7);
/* Override bootstrap css variables */ /* Override bootstrap css variables */
--bs-body-bg: #1f2020; --bs-body-bg: #1f2020;