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-width: 160px;
$image-height: 14.556875rem;
$image-width: 10rem;
.error-banner {
width: $image-width;
height: 18px;
height: 1.125rem;
background-color: var(--toast-error-bg-color);
font-size: 12px;
font-size: 0.75rem;
color: white;
text-transform: uppercase;
text-align: center;
position: absolute;
top: 0px;
right: 0px;
top: 0.0rem;
right: 0.0rem;
}
.selected-highlight {
outline: 2px solid var(--primary-color);
outline: 0.125rem solid var(--primary-color);
}
.progress-banner {
width: $image-width;
height: 5px;
height: 0.3125rem;
.progress {
color: var(--card-progress-bar-color);
@ -29,15 +29,15 @@ $image-width: 160px;
}
.download {
width: 80px;
height: 80px;
width: 5rem;
height: 5rem;
position: absolute;
top: 25%;
right: 30%;
}
.badge-container {
border-radius: 4px;
border-radius: 0.25rem;
display: block;
height: $image-height;
left: 0;
@ -45,13 +45,13 @@ $image-width: 160px;
pointer-events: none;
position: absolute;
top: 0;
width: 160px;
width: 10rem;
}
.not-read-badge {
position: absolute;
top: calc(-1 * (var(--card-progress-triangle-size) / 2));
right: -14px;
right: -0.875rem;
z-index: 1000;
height: var(--card-progress-triangle-size);
width: var(--card-progress-triangle-size);
@ -73,18 +73,18 @@ $image-width: 160px;
}
input[type="checkbox"] {
width: 20px;
height: 20px;
width: 1.25rem;
height: 1.25rem;
color: var(--checkbox-bg-color);
border-radius: 50%;
border: 2px solid #f0f0f0;
border: 0.125rem solid #f0f0f0;
background-color: var(--elevation-layer11-dark);
transform: scale(0.85);
transition: all ease-in-out 300ms;
left: 7px;
left: 0.4375rem;
position: relative;
top: 5px;
box-shadow: 0 0 5px 2px hsl(0deg 0% 0% / 69%);
top: 0.3125rem;
box-shadow: 0 0 0.3125rem 0.125rem hsl(0deg 0% 0% / 69%);
&:hover {
cursor: pointer;
@ -98,7 +98,7 @@ $image-width: 160px;
}
&: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;
left: 0;
width: 100%;
height: 232.91px;
height: 14.556875rem;
transition: 300ms ease-in-out all;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-top-left-radius: 0.25rem;
border-top-right-radius: 0.25rem;
&:hover {
background-color: var(--card-overlay-hover-bg-color);
@ -156,7 +156,7 @@ $image-width: 160px;
.overlay-information--centered {
position: absolute;
background-color: rgba(0, 0, 0, 0.7);
border-radius: 15px;
border-radius: 0.9375rem;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
@ -171,8 +171,8 @@ $image-width: 160px;
}
.count {
top: 5px;
right: 10px;
top: 0.3125rem;
right: 0.625rem;
position: absolute;
}
}
@ -182,26 +182,26 @@ $image-width: 160px;
}
.library {
font-size: 13px;
font-size: 0.8125rem;
text-decoration: none;
margin-top: 0px;
margin-top: 0.0rem;
}
.card-title-container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 5px;
padding: 0 0.3125rem;
:first-child {
min-width: 22px;
min-width: 1.375rem;
}
.card-title {
font-size: 0.8rem;
margin: 0;
text-align: center;
max-width: 90px;
max-width: 5.625rem;
a {
overflow: hidden;
@ -211,15 +211,15 @@ $image-width: 160px;
}
.card-actions {
min-width: 15.82px;
min-width: 0.98875rem;
}
.card-format {
min-width: 22px;
min-width: 1.375rem;
}
::ng-deep app-card-actionables .dropdown .dropdown-toggle {
padding: 0 5px;
padding: 0 0.3125rem;
}
.meta-title {
@ -231,9 +231,9 @@ $image-width: 160px;
.card-title {
font-size: 0.8rem;
margin: 0;
padding: 10px 0;
padding: 0.625rem 0;
text-align: center;
max-width: 120px;
max-width: 7.5rem;
a {
overflow: hidden;
@ -242,7 +242,7 @@ $image-width: 160px;
}
.card-body > div:nth-child(2) {
height: 40px;
height: 2.5rem;
overflow: hidden;
-webkit-line-clamp: 2;
display: -webkit-box;
@ -255,7 +255,7 @@ $image-width: 160px;
visibility: hidden;
display: none;
.card-title {
padding: 10px;
padding: 0.625rem;
}
}
@ -265,11 +265,11 @@ $image-width: 160px;
.expected {
.overlay-information--centered {
div {
height: 32px;
width: 32px;
height: 2rem;
width: 2rem;
i {
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;
top: 0;
position: sticky;
margin-right: 29px;
margin-right: 1.8125rem;
.bulk-select {
background-color: var(--bulk-selection-bg-color);
border: 2px solid var(--primary-color);
box-shadow: 0 4px 30px rgba(0,0,0,0.1);
backdrop-filter: blur(20px);
padding: 2px;
border: 0.125rem solid var(--primary-color);
box-shadow: 0 0.25rem 1.875rem rgba(0,0,0,0.1);
padding: 0.125rem;
div {
justify-content: space-between;
margin: 0 12px;
margin: 0 0.75rem;
.highlight {
color: var(--primary-color);
@ -27,10 +26,10 @@
.btn-icon {
color: var(--bulk-selection-text-color);
padding: 0 1rem;
margin-right: 6px;
font-size: 21px;
margin-right: 0.375rem;
font-size: 1.125rem;
display: flex;
min-height: 40px;
min-height: 2.5rem;
align-items: center;
&:hover {
@ -40,7 +39,7 @@
}
.btn.deselect {
font-size: 12px;
font-size: 0.75rem;
color: var(--text-light-muted-color);
transition: 300ms ease-in-out all;
i {
@ -69,11 +68,11 @@
.actionables {
.btn {
padding: 0 1rem;
font-size: 21px;
font-size: 1.3125rem;
display: flex;
min-height: 40px;
min-height: 2.5rem;
align-items: center;
border-radius: 6px;
border-radius: 0.375rem;
&:hover {
background-color: #ffffff2e;