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

converted px to rem values

Browse source
This commit is contained in:
Christopher 2025-05-02 05:56:58 -06:00
parent 5245a3088c
commit e37186a756
2 changed files with 53 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,26 +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);
@ -29,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;
@ -45,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);
@ -73,18 +73,18 @@ $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-radius: 50%;
border: 2px solid #f0f0f0; border: 0.125rem solid #f0f0f0;
background-color: var(--elevation-layer11-dark); background-color: var(--elevation-layer11-dark);
transform: scale(0.85); transform: scale(0.85);
transition: all ease-in-out 300ms; transition: all ease-in-out 300ms;
left: 7px; left: 0.4375rem;
position: relative; position: relative;
top: 5px; top: 0.3125rem;
box-shadow: 0 0 5px 2px hsl(0deg 0% 0% / 69%); box-shadow: 0 0 0.3125rem 0.125rem hsl(0deg 0% 0% / 69%);
&:hover { &:hover {
cursor: pointer; cursor: pointer;
@ -98,7 +98,7 @@ $image-width: 160px;
} }
&:focus { &:focus {
box-shadow: 0 0 5px 2px hsl(0deg 0% 0% / 69%); box-shadow: 0 0 0.3125rem 0.125rem hsl(0deg 0% 0% / 69%);
} }
} }
@ -143,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: 300ms ease-in-out all; 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);
@ -156,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: 15px; border-radius: 0.9375rem;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
@ -171,8 +171,8 @@ $image-width: 160px;
} }
.count { .count {
top: 5px; top: 0.3125rem;
right: 10px; right: 0.625rem;
position: absolute; position: absolute;
} }
} }
@ -182,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;
@ -211,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 {
@ -231,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;
@ -242,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;
@ -255,7 +255,7 @@ $image-width: 160px;
visibility: hidden; visibility: hidden;
display: none; display: none;
.card-title { .card-title {
padding: 10px; padding: 0.625rem;
} }
} }
@ -265,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;
} }
} }
} }

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

@ -2,18 +2,17 @@
z-index: 1; z-index: 1;
top: 0; top: 0;
position: sticky; position: sticky;
margin-right: 29px; margin-right: 1.8125rem;
.bulk-select { .bulk-select {
background-color: var(--bulk-selection-bg-color); background-color: var(--bulk-selection-bg-color);
border: 2px solid var(--primary-color); border: 0.125rem solid var(--primary-color);
box-shadow: 0 4px 30px rgba(0,0,0,0.1); box-shadow: 0 0.25rem 1.875rem rgba(0,0,0,0.1);
backdrop-filter: blur(20px); padding: 0.125rem;
padding: 2px;
div { div {
justify-content: space-between; justify-content: space-between;
margin: 0 12px; margin: 0 0.75rem;
.highlight { .highlight {
color: var(--primary-color); color: var(--primary-color);
@ -27,10 +26,10 @@
.btn-icon { .btn-icon {
color: var(--bulk-selection-text-color); color: var(--bulk-selection-text-color);
padding: 0 1rem; padding: 0 1rem;
margin-right: 6px; margin-right: 0.375rem;
font-size: 21px; font-size: 1.125rem;
display: flex; display: flex;
min-height: 40px; min-height: 2.5rem;
align-items: center; align-items: center;
&:hover { &:hover {
@ -40,7 +39,7 @@
} }
.btn.deselect { .btn.deselect {
font-size: 12px; font-size: 0.75rem;
color: var(--text-light-muted-color); color: var(--text-light-muted-color);
transition: 300ms ease-in-out all; transition: 300ms ease-in-out all;
i { i {
@ -69,11 +68,11 @@
.actionables { .actionables {
.btn { .btn {
padding: 0 1rem; padding: 0 1rem;
font-size: 21px; font-size: 1.3125rem;
display: flex; display: flex;
min-height: 40px; min-height: 2.5rem;
align-items: center; align-items: center;
border-radius: 6px; border-radius: 0.375rem;
&:hover { &:hover {
background-color: #ffffff2e; background-color: #ffffff2e;