Converted majority PX values to REM
Everything but dark.scss and values inside calc() have been converted from px to rem
This commit is contained in:
Christopher
parent
3a0d33ca13
commit
cc8e7e159b
147 changed files with 712 additions and 712 deletions
|
|
@ -1,27 +1,27 @@
|
|||
$image-height: 232.91px;
|
||||
$image-width: 160px;
|
||||
$image-height: 14.556875rem;
|
||||
$image-width: 10.0rem;
|
||||
|
||||
.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);
|
||||
|
|
@ -30,15 +30,15 @@ $image-width: 160px;
|
|||
}
|
||||
|
||||
.download {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
width: 5.0rem;
|
||||
height: 5.0rem;
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
right: 30%;
|
||||
}
|
||||
|
||||
.badge-container {
|
||||
border-radius: 4px;
|
||||
border-radius: 0.25rem;
|
||||
display: block;
|
||||
height: $image-height;
|
||||
left: 0;
|
||||
|
|
@ -46,13 +46,13 @@ $image-width: 160px;
|
|||
pointer-events: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 160px;
|
||||
width: 10.0rem;
|
||||
}
|
||||
|
||||
.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);
|
||||
|
|
@ -62,8 +62,8 @@ $image-width: 160px;
|
|||
|
||||
.bulk-mode {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 5px;
|
||||
top: 0.3125rem;
|
||||
left: 0.3125rem;
|
||||
visibility: hidden;
|
||||
|
||||
&.always-show {
|
||||
|
|
@ -73,8 +73,8 @@ $image-width: 160px;
|
|||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
color: var(--checkbox-bg-color);
|
||||
}
|
||||
}
|
||||
|
|
@ -113,10 +113,10 @@ $image-width: 160px;
|
|||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 232.91px;
|
||||
height: 14.556875rem;
|
||||
transition: all 0.2s;
|
||||
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);
|
||||
|
|
@ -126,7 +126,7 @@ $image-width: 160px;
|
|||
.overlay-information--centered {
|
||||
position: absolute;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
border-radius: 50px;
|
||||
border-radius: 3.125rem;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
|
@ -141,8 +141,8 @@ $image-width: 160px;
|
|||
}
|
||||
|
||||
.count {
|
||||
top: 5px;
|
||||
right: 10px;
|
||||
top: 0.3125rem;
|
||||
right: 0.625rem;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
|
@ -152,26 +152,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;
|
||||
|
|
@ -181,15 +181,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 {
|
||||
|
|
@ -201,9 +201,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;
|
||||
|
|
@ -212,7 +212,7 @@ $image-width: 160px;
|
|||
}
|
||||
|
||||
.card-body > div:nth-child(2) {
|
||||
height: 40px;
|
||||
height: 2.5rem;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 2;
|
||||
display: -webkit-box;
|
||||
|
|
@ -225,7 +225,7 @@ $image-width: 160px;
|
|||
visibility: hidden;
|
||||
display: none;
|
||||
.card-title {
|
||||
padding: 10px;
|
||||
padding: 0.625rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -235,11 +235,11 @@ $image-width: 160px;
|
|||
.expected {
|
||||
.overlay-information--centered {
|
||||
div {
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
height: 2.0rem;
|
||||
width: 2.0rem;
|
||||
i {
|
||||
font-size: 1.4rem;
|
||||
line-height: 32px;
|
||||
line-height: 2.0rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
$scrollbarHeight: 35px;
|
||||
$scrollbarHeight: 2.1875rem;
|
||||
|
||||
img {
|
||||
user-select: none;
|
||||
|
|
@ -67,12 +67,12 @@ img {
|
|||
.highlight {
|
||||
background-color: var(--manga-reader-next-highlight-bg-color) !important;
|
||||
animation: fadein .5s both;
|
||||
backdrop-filter: blur(10px);
|
||||
backdrop-filter: blur(0.625rem);
|
||||
}
|
||||
.highlight-2 {
|
||||
background-color: var(--manga-reader-prev-highlight-bg-color) !important;
|
||||
animation: fadein .5s both;
|
||||
backdrop-filter: blur(10px);
|
||||
backdrop-filter: blur(0.625rem);
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -83,19 +83,19 @@ img {
|
|||
left: 50%;
|
||||
height: 100%;
|
||||
box-shadow:
|
||||
0px 0px calc(17px*3.14) 25px rgb(0 0 0 / 43%),
|
||||
0px 0px calc(2px*3.14) 2px rgb(0 0 0 / 43%),
|
||||
0px 0px calc(5px*3.14) 4px rgb(0 0 0 / 43%),
|
||||
0px 0px calc(0.5px*3.14) 0.3px rgb(0 0 0 / 43%);
|
||||
0.0rem 0.0rem calc(17px*3.14) 1.5625rem rgb(0 0 0 / 43%),
|
||||
0.0rem 0.0rem calc(2px*3.14) 0.125rem rgb(0 0 0 / 43%),
|
||||
0.0rem 0.0rem calc(5px*3.14) 0.25rem rgb(0 0 0 / 43%),
|
||||
0.0rem 0.0rem calc(0.5px*3.14) 0.01875rem rgb(0 0 0 / 43%);
|
||||
}
|
||||
|
||||
@supports (-moz-appearance:none) {
|
||||
::ng-deep .image-container.book-shadow[class*="double-offset"]:before, ::ng-deep .image-container.book-shadow.wide:before {
|
||||
box-shadow:
|
||||
0px 0px calc(17px*3.14) 25px rgb(0 0 0 / 43%),
|
||||
0px 0px calc(2px*3.14) 2px rgb(0 0 0 / 43%),
|
||||
0px 0px calc(5px*3.14) 4px rgb(0 0 0 / 43%),
|
||||
0px 0px calc(0.5px*3.14) 0.3px rgb(0 0 0 / 43%),
|
||||
0px 0px 1px 0.5px rgb(0 0 0 / 43%);
|
||||
0.0rem 0.0rem calc(17px*3.14) 1.5625rem rgb(0 0 0 / 43%),
|
||||
0.0rem 0.0rem calc(2px*3.14) 0.125rem rgb(0 0 0 / 43%),
|
||||
0.0rem 0.0rem calc(5px*3.14) 0.25rem rgb(0 0 0 / 43%),
|
||||
0.0rem 0.0rem calc(0.5px*3.14) 0.01875rem rgb(0 0 0 / 43%),
|
||||
0.0rem 0.0rem 0.0625rem 0.03125rem rgb(0 0 0 / 43%);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,8 +8,8 @@
|
|||
|
||||
.image-container {
|
||||
align-self: flex-start;
|
||||
max-height: 400px;
|
||||
max-width: 280px;
|
||||
max-height: 25.0rem;
|
||||
max-width: 17.5rem;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
|
||||
.main-container {
|
||||
overflow: unset !important;
|
||||
margin-top: 15px;
|
||||
margin-top: 0.9375rem;
|
||||
}
|
||||
|
||||
::ng-deep .badge-expander .content a {
|
||||
|
|
@ -30,15 +30,15 @@
|
|||
.btn-group > .btn.dropdown-toggle-split:not(first-child){
|
||||
border-top-right-radius: var(--bs-border-radius) !important;
|
||||
border-bottom-right-radius: var(--bs-border-radius) !important;
|
||||
border-width: 1px 1px 1px 0 !important;
|
||||
border-width: 0.0625rem 0.0625rem 0.0625rem 0 !important;
|
||||
}
|
||||
|
||||
.btn-group > .btn:not(:last-child):not(.dropdown-toggle) {
|
||||
border-width: 1px 0 1px 1px !important;
|
||||
border-width: 0.0625rem 0 0.0625rem 0.0625rem !important;
|
||||
}
|
||||
|
||||
.card-body > div:nth-child(2) {
|
||||
height: 50px;
|
||||
height: 3.125rem;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 2;
|
||||
display: -webkit-box;
|
||||
|
|
@ -47,17 +47,17 @@
|
|||
}
|
||||
|
||||
.under-image ~ .overlay-information {
|
||||
top: -404px;
|
||||
height: 364px;
|
||||
top: -25.25rem;
|
||||
height: 22.75rem;
|
||||
}
|
||||
|
||||
.overlay-information {
|
||||
position: relative;
|
||||
top: -364px;
|
||||
height: 364px;
|
||||
top: -22.75rem;
|
||||
height: 22.75rem;
|
||||
transition: all 0.2s;
|
||||
border-top-left-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
border-top-left-radius: 0.25rem;
|
||||
border-top-right-radius: 0.25rem;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
|
|
@ -70,9 +70,9 @@
|
|||
|
||||
.overlay-information--centered {
|
||||
position: absolute;
|
||||
border-radius: 15px;
|
||||
border-radius: 0.9375rem;
|
||||
background-color: rgba(0, 0, 0, .7);
|
||||
border-radius: 50px;
|
||||
border-radius: 3.125rem;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
|
@ -85,11 +85,11 @@
|
|||
}
|
||||
|
||||
div {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
width: 3.75rem;
|
||||
height: 3.75rem;
|
||||
i {
|
||||
font-size: 1.6rem;
|
||||
line-height: 60px;
|
||||
line-height: 3.75rem;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
@ -118,7 +118,7 @@
|
|||
-webkit-overflow-scrolling: touch;
|
||||
-ms-overflow-style: -ms-autohiding-scrollbar;
|
||||
scrollbar-width: none;
|
||||
box-shadow: inset -1px -2px 0px -1px var(--elevation-layer9);
|
||||
box-shadow: inset -0.0625rem -0.125rem 0.0rem -0.0625rem var(--elevation-layer9);
|
||||
}
|
||||
.carousel-tabs-container::-webkit-scrollbar {
|
||||
display: none;
|
||||
|
|
@ -132,11 +132,11 @@
|
|||
}
|
||||
|
||||
::ng-deep .carousel-container .header i.fa-plus, ::ng-deep .carousel-container .header i.fa-pen{
|
||||
border-width: 1px;
|
||||
border-width: 0.0625rem;
|
||||
border-style: solid;
|
||||
border-radius: 5px;
|
||||
border-radius: 0.3125rem;
|
||||
border-color: var(--primary-color);
|
||||
padding: 5px;
|
||||
padding: 0.3125rem;
|
||||
vertical-align: middle;
|
||||
|
||||
&:hover {
|
||||
|
|
@ -145,7 +145,7 @@
|
|||
}
|
||||
|
||||
::ng-deep .image-container.mobile-bg app-image img {
|
||||
max-height: 400px;
|
||||
max-height: 25.0rem;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
|
|
@ -165,7 +165,7 @@
|
|||
@media (max-width: theme.$grid-breakpoints-lg) {
|
||||
.image-container.mobile-bg{
|
||||
width: 100vw;
|
||||
top: calc(var(--nav-offset) - 20px);
|
||||
top: calc(var(--nav-offset) - 1.25rem);
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
position: fixed !important;
|
||||
|
|
@ -178,7 +178,7 @@
|
|||
::ng-deep .image-container.mobile-bg app-image img {
|
||||
max-height: unset !important;
|
||||
opacity: 0.05 !important;
|
||||
filter: blur(5px) !important;
|
||||
filter: blur(0.3125rem) !important;
|
||||
max-width: 100dvw;
|
||||
height: 100dvh !important;
|
||||
overflow: hidden;
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
}
|
||||
|
||||
.btn {
|
||||
padding: 5px;
|
||||
padding: 0.3125rem;
|
||||
}
|
||||
|
||||
// Robbie added this but it broke most of the uses
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
.overlay-information {
|
||||
position: relative;
|
||||
top: -364px;
|
||||
height: 364px;
|
||||
top: -22.75rem;
|
||||
height: 22.75rem;
|
||||
transition: all 0.2s;
|
||||
border-top-left-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
border-top-left-radius: 0.25rem;
|
||||
border-top-right-radius: 0.25rem;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
|
|
@ -17,9 +17,9 @@
|
|||
|
||||
.overlay-information--centered {
|
||||
position: absolute;
|
||||
border-radius: 15px;
|
||||
border-radius: 0.9375rem;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
border-radius: 50px;
|
||||
border-radius: 3.125rem;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
|
@ -32,11 +32,11 @@
|
|||
}
|
||||
|
||||
div {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
width: 3.75rem;
|
||||
height: 3.75rem;
|
||||
i {
|
||||
font-size: 1.6rem;
|
||||
line-height: 60px;
|
||||
line-height: 3.75rem;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
@ -46,12 +46,12 @@
|
|||
.overlay-information {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 12px;
|
||||
left: 0.75rem;
|
||||
width: calc(100% - 24px);
|
||||
height: 100%;
|
||||
transition: all 0.2s;
|
||||
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);
|
||||
|
|
@ -60,9 +60,9 @@
|
|||
|
||||
.overlay-information--centered {
|
||||
position: absolute;
|
||||
border-radius: 15px;
|
||||
border-radius: 0.9375rem;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
border-radius: 50px;
|
||||
border-radius: 3.125rem;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
|
@ -78,18 +78,18 @@
|
|||
.series {
|
||||
.overlay-information--centered {
|
||||
div {
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
height: 2.0rem;
|
||||
width: 2.0rem;
|
||||
i {
|
||||
font-size: 1.4rem;
|
||||
line-height: 32px;
|
||||
line-height: 2.0rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::ng-deep .image-container app-image img {
|
||||
border-radius: 4px 4px 0 0;
|
||||
border-radius: 0.25rem 0.25rem 0 0;
|
||||
}
|
||||
|
||||
.progress {
|
||||
|
|
@ -114,8 +114,8 @@
|
|||
.continue-from {
|
||||
background-color: var(--breadcrumb-bg-color);
|
||||
color: white;
|
||||
border-bottom-left-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
border-bottom-left-radius: 0.3125rem;
|
||||
border-bottom-right-radius: 0.3125rem;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
|
|
@ -125,11 +125,11 @@
|
|||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
padding: 0 10px 0 0;
|
||||
padding: 0 0.625rem 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 991px) {
|
||||
@media screen and (max-width: 61.9375rem) {
|
||||
.overlay-information {
|
||||
visibility: hidden;
|
||||
.overlay-information--centered {
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<form [formGroup]="editForm">
|
||||
<ul ngbNav #nav="ngbNav" [(activeId)]="activeId" class="nav-pills"
|
||||
[destroyOnHide]="false"
|
||||
orientation="{{utilityService.getActiveBreakpoint() === Breakpoint.Mobile ? 'horizontal' : 'vertical'}}" style="min-width: 135px;">
|
||||
orientation="{{utilityService.getActiveBreakpoint() === Breakpoint.Mobile ? 'horizontal' : 'vertical'}}" style="min-width: 8.4375rem;">
|
||||
|
||||
<!-- General Tab -->
|
||||
@if (user && accountService.hasAdminRole(user))
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
</div>
|
||||
<div class="modal-body scrollable-modal" [ngClass]="{'d-flex': utilityService.getActiveBreakpoint() !== Breakpoint.Mobile}">
|
||||
<form [formGroup]="editForm">
|
||||
<ul ngbNav #nav="ngbNav" [(activeId)]="activeId" class="nav-pills" orientation="{{utilityService.getActiveBreakpoint() === Breakpoint.Mobile ? 'horizontal' : 'vertical'}}" style="min-width: 135px;">
|
||||
<ul ngbNav #nav="ngbNav" [(activeId)]="activeId" class="nav-pills" orientation="{{utilityService.getActiveBreakpoint() === Breakpoint.Mobile ? 'horizontal' : 'vertical'}}" style="min-width: 8.4375rem;">
|
||||
|
||||
<!-- Info Tab -->
|
||||
<li [ngbNavItem]="TabID.Info">
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
.search-result {
|
||||
img {
|
||||
max-width: 100px;
|
||||
min-width: 100px;
|
||||
max-width: 6.25rem;
|
||||
min-width: 6.25rem;
|
||||
}
|
||||
}
|
||||
.title {
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
&.light {
|
||||
background-color: var(--elevation-layer6);
|
||||
}
|
||||
border-radius: 15px;
|
||||
border-radius: 0.9375rem;
|
||||
|
||||
&:hover {
|
||||
&.dark {
|
||||
|
|
|
|||
|
|
@ -1,32 +1,32 @@
|
|||
//
|
||||
//.publisher-img-container {
|
||||
// background-color: var(--card-bg-color);
|
||||
// border-radius: 3px;
|
||||
// padding: 2px 5px;
|
||||
// border-radius: 0.1875rem;
|
||||
// padding: 0.125rem 0.3125rem;
|
||||
// font-size: 0.8rem;
|
||||
// vertical-align: middle;
|
||||
//
|
||||
// div {
|
||||
// min-height: 32px;
|
||||
// line-height: 32px;
|
||||
// min-height: 2.0rem;
|
||||
// line-height: 2.0rem;
|
||||
// }
|
||||
//}
|
||||
|
||||
// Animation code
|
||||
|
||||
.publisher-wrapper {
|
||||
perspective: 1000px;
|
||||
height: 32px;
|
||||
perspective: 62.5rem;
|
||||
height: 2.0rem;
|
||||
|
||||
background-color: var(--card-bg-color);
|
||||
border-radius: 3px;
|
||||
padding: 2px 5px;
|
||||
border-radius: 0.1875rem;
|
||||
padding: 0.125rem 0.3125rem;
|
||||
font-size: 0.8rem;
|
||||
vertical-align: middle;
|
||||
|
||||
div {
|
||||
min-height: 32px;
|
||||
line-height: 32px;
|
||||
min-height: 2.0rem;
|
||||
line-height: 2.0rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
.img-max-width {
|
||||
hr {
|
||||
border: solid 2px rgba(var(--primary-color), 0.5) !important;
|
||||
border: solid 0.125rem rgba(var(--primary-color), 0.5) !important;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
max-height: 800px;
|
||||
max-height: 50.0rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
|
|
|
|||
|
|
@ -1,20 +1,20 @@
|
|||
.review-card {
|
||||
max-width: 320px;
|
||||
max-height: 130px;
|
||||
height: 130px;
|
||||
width: 320px;
|
||||
max-width: 20.0rem;
|
||||
max-height: 8.125rem;
|
||||
height: 8.125rem;
|
||||
width: 20.0rem;
|
||||
}
|
||||
|
||||
.profile-image {
|
||||
font-size: 1.2rem;
|
||||
padding: 20px;
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
.my-review {
|
||||
position: absolute;
|
||||
z-index: 20;
|
||||
top: 38px;
|
||||
left: 38px;
|
||||
top: 2.375rem;
|
||||
left: 2.375rem;
|
||||
}
|
||||
|
||||
.fa-star {
|
||||
|
|
@ -22,14 +22,14 @@
|
|||
}
|
||||
|
||||
.card-text {
|
||||
font-size: 14px;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
overflow: hidden;
|
||||
width: 235px;
|
||||
width: 14.6875rem;
|
||||
word-break: break-all;
|
||||
height: 20px;
|
||||
height: 1.25rem;
|
||||
}
|
||||
|
||||
.card-text.no-images {
|
||||
|
|
@ -42,14 +42,14 @@
|
|||
}
|
||||
|
||||
.card-footer {
|
||||
font-size: 13px;
|
||||
font-size: 0.8125rem;
|
||||
display: flex;
|
||||
max-width: 319px;
|
||||
max-width: 19.9375rem;
|
||||
justify-content: space-between;
|
||||
margin: 0 auto;
|
||||
|
||||
& > * {
|
||||
margin: 0 5px;
|
||||
margin: 0 0.3125rem;
|
||||
display: inline-flex;
|
||||
}
|
||||
}
|
||||
|
|
@ -57,6 +57,6 @@
|
|||
.card-body {
|
||||
display: block;
|
||||
visibility: visible;
|
||||
min-height: 93.5px;
|
||||
max-height: 93.5px;
|
||||
min-height: 5.84375rem;
|
||||
max-height: 5.84375rem;
|
||||
}
|
||||
|
|
@ -8,7 +8,7 @@
|
|||
|
||||
<div class="offcanvas-body">
|
||||
@if (CoverUrl; as coverUrl) {
|
||||
<div style="width: 160px" class="mx-auto mb-3">
|
||||
<div style="width: 10.0rem" class="mx-auto mb-3">
|
||||
@if (coverUrl) {
|
||||
<app-image height="232.91px" width="160px" [styles]="{'object-fit': 'contain', 'max-height': '232.91px'}" [imageUrl]="coverUrl"></app-image>
|
||||
}
|
||||
|
|
@ -64,13 +64,13 @@
|
|||
@if (item.imageUrl && !item.imageUrl.endsWith('default.jpg')) {
|
||||
<app-image height="24px" width="24px" [styles]="{'object-fit': 'contain'}" [imageUrl]="item.imageUrl" classes="person-img"></app-image>
|
||||
} @else {
|
||||
<i class="fa fa-user-circle align-self-center person-img" style="font-size: 28px;" aria-hidden="true"></i>
|
||||
<i class="fa fa-user-circle align-self-center person-img" style="font-size: 1.75rem;" aria-hidden="true"></i>
|
||||
}
|
||||
</div>
|
||||
<div class="col-md-9">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">{{item.name}}</h6>
|
||||
<p class="card-text" style="font-size: 14px"><small class="text-muted">{{item.role}}</small></p>
|
||||
<p class="card-text" style="font-size: 0.875rem"><small class="text-muted">{{item.role}}</small></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -113,12 +113,12 @@
|
|||
<div class="card mb-3">
|
||||
<div class="row g-0">
|
||||
<div class="col-md-4">
|
||||
<i class="fa fa-user-circle align-self-center" style="font-size: 28px; margin-top: 24px; margin-left: 24px" aria-hidden="true"></i>
|
||||
<i class="fa fa-user-circle align-self-center" style="font-size: 1.75rem; margin-top: 1.5rem; margin-left: 1.5rem" aria-hidden="true"></i>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">{{item.name}}</h6>
|
||||
<p class="card-text" style="font-size: 14px"><small class="text-muted">{{item.role}}</small></p>
|
||||
<p class="card-text" style="font-size: 0.875rem"><small class="text-muted">{{item.role}}</small></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,11 +6,11 @@
|
|||
}
|
||||
|
||||
::ng-deep .person-img {
|
||||
margin-top: 24px; margin-left: 24px;
|
||||
margin-top: 1.5rem; margin-left: 1.5rem;
|
||||
}
|
||||
|
||||
.muted {
|
||||
font-size: 14px;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
a.read-more-link {
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
<div class="mb-3">
|
||||
<app-setting-item [title]="t('edit-collection-tags.series-tab')" [showEdit]="false" [canEdit]="false">
|
||||
<ng-template #titleExtra>
|
||||
<span class="badge rounded-pill text-bg-primary ms-1" style="font-size: 11px">{{collection.totalSourceCount - series.length}} / {{collection.totalSourceCount | number}}</span>
|
||||
<span class="badge rounded-pill text-bg-primary ms-1" style="font-size: 0.6875rem">{{collection.totalSourceCount - series.length}} / {{collection.totalSourceCount | number}}</span>
|
||||
</ng-template>
|
||||
|
||||
<ng-template #view>
|
||||
|
|
|
|||
|
|
@ -7,6 +7,6 @@
|
|||
}
|
||||
|
||||
.custom-position {
|
||||
right: 15px;
|
||||
top: -42px;
|
||||
right: 0.9375rem;
|
||||
top: -2.625rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@
|
|||
<table class="table table-striped scrollable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col" style="width: 40px;">{{t('type-header')}}</th>
|
||||
<th scope="col" style="width: 2.5rem;">{{t('type-header')}}</th>
|
||||
<th scope="col">{{t('name-header')}}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
|
|
|||
|
|
@ -7,11 +7,11 @@ $breadcrumb-divider: quote(">");
|
|||
|
||||
.scrollable {
|
||||
overflow-y: auto;
|
||||
max-height: 400px;
|
||||
max-height: 25.0rem;
|
||||
}
|
||||
|
||||
.btn-outline-secondary {
|
||||
border: 1px solid #ced4da;
|
||||
border: 0.0625rem solid #ced4da;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.email-link {
|
||||
word-break: break-all;
|
||||
margin-bottom: 15px;
|
||||
margin-bottom: 0.9375rem;
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -7,11 +7,11 @@
|
|||
}
|
||||
|
||||
.custom-position {
|
||||
right: 15px;
|
||||
top: -42px;
|
||||
right: 0.9375rem;
|
||||
top: -2.625rem;
|
||||
}
|
||||
|
||||
.custom-position-2 {
|
||||
right: 160px;
|
||||
top: -42px;
|
||||
right: 10.0rem;
|
||||
top: -2.625rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
.custom-position {
|
||||
right: 15px;
|
||||
top: -42px;
|
||||
right: 0.9375rem;
|
||||
top: -2.625rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,18 +1,18 @@
|
|||
@use "../../../theme/variables" as theme;
|
||||
|
||||
.custom-position {
|
||||
right: 15px;
|
||||
top: -42px;
|
||||
right: 0.9375rem;
|
||||
top: -2.625rem;
|
||||
}
|
||||
|
||||
.custom-position-2 {
|
||||
right: 160px;
|
||||
top: -42px;
|
||||
right: 10.0rem;
|
||||
top: -2.625rem;
|
||||
}
|
||||
|
||||
@media(max-width: 576px) {
|
||||
@media(max-width: 36.0rem) {
|
||||
.custom-position-2 {
|
||||
right: 65px;
|
||||
right: 4.0625rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -42,7 +42,7 @@
|
|||
justify-content: center;
|
||||
}
|
||||
.btn {
|
||||
width: 32px;
|
||||
width: 2.0rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
.table {
|
||||
min-height: 60px;
|
||||
min-height: 3.75rem;
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
|
||||
.tr {
|
||||
height: 60px;
|
||||
height: 3.75rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
justify-content: center;
|
||||
}
|
||||
.btn {
|
||||
width: 32px;
|
||||
width: 2.0rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,6 @@
|
|||
display: inherit;
|
||||
}
|
||||
.custom-position {
|
||||
right: 5px;
|
||||
top: -42px;
|
||||
right: 0.3125rem;
|
||||
top: -2.625rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
@use '../../../theme/variables' as theme;
|
||||
|
||||
.presence {
|
||||
font-size: 12px;
|
||||
font-size: 0.75rem;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.user-info > div {
|
||||
margin-top: 3px;
|
||||
margin-top: 0.1875rem;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
|
|
@ -14,12 +14,12 @@
|
|||
}
|
||||
|
||||
.pending-badge {
|
||||
font-size: 12px;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.custom-position {
|
||||
right: 15px;
|
||||
top: -42px;
|
||||
right: 0.9375rem;
|
||||
top: -2.625rem;
|
||||
}
|
||||
|
||||
.member-name {
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
}
|
||||
|
||||
.actions {
|
||||
min-width: 152px;
|
||||
min-width: 9.5rem;
|
||||
}
|
||||
|
||||
.list-group-item:nth-child(even) {
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
justify-content: center;
|
||||
}
|
||||
.btn {
|
||||
width: 32px;
|
||||
width: 2.0rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
.main-container {
|
||||
margin-top: 10px;
|
||||
padding: 0 0 0 10px;
|
||||
margin-top: 0.625rem;
|
||||
padding: 0 0 0 0.625rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
.main-container {
|
||||
margin-top: 10px;
|
||||
padding: 0 0 0 10px;
|
||||
margin-top: 0.625rem;
|
||||
padding: 0 0 0 0.625rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
.main-container {
|
||||
margin-top: 10px;
|
||||
padding: 0 0 0 10px;
|
||||
margin-top: 0.625rem;
|
||||
padding: 0 0 0 0.625rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
@use '../theme/variables' as theme;
|
||||
|
||||
.content-wrapper {
|
||||
padding: 0 0 0 10px;
|
||||
padding: 0 0 0 0.625rem;
|
||||
height: calc(var(--vh)* 100 - var(--nav-offset));
|
||||
}
|
||||
|
||||
.companion-bar {
|
||||
transition: all var(--side-nav-companion-bar-transistion);
|
||||
margin-left: 45px;
|
||||
margin-left: 2.8125rem;
|
||||
overflow-y: hidden;
|
||||
overflow-x: hidden;
|
||||
height: calc(var(--vh)* 100 - var(--nav-mobile-offset));
|
||||
|
|
@ -86,7 +86,7 @@
|
|||
height: calc(var(--vh) * 100 - var(--nav-mobile-offset));
|
||||
scrollbar-color: rgba(255,255,255,0.3) rgba(0, 0, 0, 0.1);
|
||||
scrollbar-width: thin;
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 1.25rem;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
|
|
@ -120,7 +120,7 @@
|
|||
z-index: -1;
|
||||
pointer-events: none;
|
||||
background-color: var(--bs-body-bg);
|
||||
filter: blur(20px);
|
||||
filter: blur(1.25rem);
|
||||
object-fit: contain;
|
||||
transform: scale(1.1);
|
||||
mix-blend-mode: color;
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
.overlay {
|
||||
background-color: var(--br-actionbar-bg-color);
|
||||
color: var(--bs-body-bg);
|
||||
padding: 5px;
|
||||
border-radius: 4px;
|
||||
padding: 0.3125rem;
|
||||
border-radius: 0.25rem;
|
||||
z-index: 9999;
|
||||
width: 100vw;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
<app-drawer #commentDrawer="drawer" [(isOpen)]="drawerOpen" [options]="{topOffset: topOffset}">
|
||||
<div header>
|
||||
<h5 class="mb-0">{{t('title')}}</h5>
|
||||
<span style="font-size: 14px; color: var(--primary-color)" tabindex="0" role="button" (click)="closeReader()">{{t('close-reader')}}</span>
|
||||
<span style="font-size: 0.875rem; color: var(--primary-color)" tabindex="0" role="button" (click)="closeReader()">{{t('close-reader')}}</span>
|
||||
</div>
|
||||
<div subheader>
|
||||
<div class="pagination-cont">
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@
|
|||
|
||||
$dark-form-background-no-opacity: rgb(1, 4, 9);
|
||||
$primary-color: #0062cc;
|
||||
$action-bar-height: 38px;
|
||||
$action-bar-height: 2.375rem;
|
||||
|
||||
.reader-container {
|
||||
&::-webkit-scrollbar {
|
||||
|
|
@ -85,13 +85,13 @@ $action-bar-height: 38px;
|
|||
|
||||
// Drawer
|
||||
.control-container {
|
||||
padding-bottom: 5px;
|
||||
padding-bottom: 0.3125rem;
|
||||
}
|
||||
|
||||
.page-stub {
|
||||
margin-top: 6px;
|
||||
padding-left: 2px;
|
||||
padding-right: 2px;
|
||||
margin-top: 0.375rem;
|
||||
padding-left: 0.125rem;
|
||||
padding-right: 0.125rem;
|
||||
}
|
||||
|
||||
.drawer-body {
|
||||
|
|
@ -102,7 +102,7 @@ $action-bar-height: 38px;
|
|||
margin: 0 0.25rem;
|
||||
|
||||
li a {
|
||||
border: 1px solid var(--primary-color);
|
||||
border: 0.0625rem solid var(--primary-color);
|
||||
margin: 0 0.25rem;
|
||||
|
||||
.active {
|
||||
|
|
@ -127,7 +127,7 @@ $action-bar-height: 38px;
|
|||
.action-bar {
|
||||
background-color: var(--br-actionbar-bg-color);
|
||||
overflow: hidden;
|
||||
box-shadow: 0 0 6px 0 rgb(0 0 0 / 70%);
|
||||
box-shadow: 0 0 0.375rem 0 rgb(0 0 0 / 70%);
|
||||
max-height: $action-bar-height;
|
||||
height: $action-bar-height;
|
||||
|
||||
|
|
@ -140,14 +140,14 @@ $action-bar-height: 38px;
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media(max-width: 875px) {
|
||||
@media(max-width: 54.6875rem) {
|
||||
.book-title {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.book-title {
|
||||
margin-top: 10px;
|
||||
margin-top: 0.625rem;
|
||||
text-align: center;
|
||||
text-transform: capitalize;
|
||||
max-height: inherit;
|
||||
|
|
@ -199,8 +199,8 @@ $action-bar-height: 38px;
|
|||
|
||||
&.immersive {
|
||||
height: calc((var(--vh, 1vh) * 100));
|
||||
//padding-top: 0px;
|
||||
//padding-bottom: 0px;
|
||||
//padding-top: 0.0rem;
|
||||
//padding-bottom: 0.0rem;
|
||||
}
|
||||
|
||||
&.writing-style-vertical {
|
||||
|
|
@ -232,14 +232,14 @@ $action-bar-height: 38px;
|
|||
.book-content {
|
||||
position: relative;
|
||||
margin: 0 0;
|
||||
padding: 20px 0px;
|
||||
padding: 1.25rem 0.0rem;
|
||||
|
||||
&.column-layout-1 {
|
||||
height: calc((var(--vh) * 100) - calc($action-bar-height)); // * 2
|
||||
|
||||
&.writing-style-vertical {
|
||||
padding: 0 10px 0 0;
|
||||
margin: 20px 0;
|
||||
padding: 0 0.625rem 0 0;
|
||||
margin: 1.25rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -247,8 +247,8 @@ $action-bar-height: 38px;
|
|||
height: calc((var(--vh) * 100) - calc($action-bar-height)); // * 2
|
||||
|
||||
&.writing-style-vertical {
|
||||
padding: 0 10px 0 0;
|
||||
margin: 20px 0;
|
||||
padding: 0 0.625rem 0 0;
|
||||
margin: 1.25rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -270,23 +270,23 @@ $action-bar-height: 38px;
|
|||
|
||||
.pagination-cont {
|
||||
background: var(--br-actionbar-bg-color);
|
||||
border-radius: 5px;
|
||||
padding: 5px 15px;
|
||||
margin: 0 0 5px;
|
||||
border-radius: 0.3125rem;
|
||||
padding: 0.3125rem 0.9375rem;
|
||||
margin: 0 0 0.3125rem;
|
||||
border: var(--drawer-pagination-border);
|
||||
}
|
||||
|
||||
.virt-pagination-cont {
|
||||
padding-bottom: 5px;
|
||||
margin-bottom: 5px;
|
||||
padding-bottom: 0.3125rem;
|
||||
margin-bottom: 0.3125rem;
|
||||
box-shadow: var(--drawer-pagination-horizontal-rule);
|
||||
}
|
||||
|
||||
.bottom-bar {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
bottom: 0.0rem;
|
||||
left: 0.0rem;
|
||||
writing-mode: horizontal-tb;
|
||||
}
|
||||
|
||||
|
|
@ -296,7 +296,7 @@ $action-bar-height: 38px;
|
|||
.column-layout-1 {
|
||||
.book-content {
|
||||
column-count: 1;
|
||||
column-gap: 20px;
|
||||
column-gap: 1.25rem;
|
||||
overflow: hidden;
|
||||
word-break: break-word;
|
||||
overflow-wrap: break-word;
|
||||
|
|
@ -306,7 +306,7 @@ $action-bar-height: 38px;
|
|||
.column-layout-2 {
|
||||
.book-content {
|
||||
column-count: 2;
|
||||
column-gap: 20px;
|
||||
column-gap: 1.25rem;
|
||||
overflow: hidden;
|
||||
word-break: break-word;
|
||||
overflow-wrap: break-word;
|
||||
|
|
@ -358,7 +358,7 @@ $pagination-opacity: 0;
|
|||
|
||||
.right {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
right: 0.0rem;
|
||||
top: $action-bar-height;
|
||||
width: 20vw;
|
||||
z-index: 3;
|
||||
|
|
@ -369,7 +369,7 @@ $pagination-opacity: 0;
|
|||
outline: none;
|
||||
|
||||
&.immersive {
|
||||
top: 0px;
|
||||
top: 0.0rem;
|
||||
}
|
||||
|
||||
&.no-pointer-events {
|
||||
|
|
@ -380,7 +380,7 @@ $pagination-opacity: 0;
|
|||
// This class pushes the click area to the left a bit to let users click the scrollbar
|
||||
.right-with-scrollbar {
|
||||
position: absolute;
|
||||
right: 17px;
|
||||
right: 1.0625rem;
|
||||
top: $action-bar-height;
|
||||
width: 18%;
|
||||
z-index: 3;
|
||||
|
|
@ -392,13 +392,13 @@ $pagination-opacity: 0;
|
|||
cursor: pointer;
|
||||
|
||||
&.immersive {
|
||||
top: 0px;
|
||||
top: 0.0rem;
|
||||
}
|
||||
}
|
||||
|
||||
.left {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
left: 0.0rem;
|
||||
top: $action-bar-height;
|
||||
width: 20vw;
|
||||
background: $pagination-color;
|
||||
|
|
@ -411,7 +411,7 @@ $pagination-opacity: 0;
|
|||
cursor: pointer;
|
||||
|
||||
&.immersive {
|
||||
top: 0px;
|
||||
top: 0.0rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -23,9 +23,9 @@
|
|||
<div class="row g-0 controls">
|
||||
<label for="fontsize" class="form-label col-6">{{t('font-size-label')}}</label>
|
||||
<span class="col-6 float-end" style="display: inline-flex;">
|
||||
<i class="fa-solid fa-font" style="font-size: 12px;"></i>
|
||||
<i class="fa-solid fa-font" style="font-size: 0.75rem;"></i>
|
||||
<input type="range" class="form-range ms-2 me-2" id="fontsize" min="50" max="300" step="10" formControlName="bookReaderFontSize" [ngbTooltip]="settingsForm.get('bookReaderFontSize')?.value + '%'">
|
||||
<i class="fa-solid fa-font" style="font-size: 24px;"></i>
|
||||
<i class="fa-solid fa-font" style="font-size: 1.5rem;"></i>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -21,8 +21,8 @@
|
|||
width: auto;
|
||||
|
||||
.dot {
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
height: 1.5625rem;
|
||||
width: 1.5625rem;
|
||||
border-radius: 50%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
|
@ -41,7 +41,7 @@
|
|||
}
|
||||
|
||||
.active {
|
||||
border: 1px solid var(--primary-color);
|
||||
border: 0.0625rem solid var(--primary-color);
|
||||
}
|
||||
|
||||
::ng-deep .accordion-body {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
.main-container {
|
||||
margin-top: 10px;
|
||||
padding: 0 0 0 10px;
|
||||
margin-top: 0.625rem;
|
||||
padding: 0 0 0 0.625rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,8 +21,8 @@
|
|||
<app-person-card [entity]="item" [title]="item.name" [imageUrl]="imageService.getPersonImage(item.id)" (clicked)="goToPerson(item)">
|
||||
<ng-template #subtitle>
|
||||
<div class="d-flex justify-content-evenly">
|
||||
<div style="font-size: 12px">{{item.seriesCount | compactNumber}} series</div>
|
||||
<div style="font-size: 12px">{{item.issueCount | compactNumber}} issues</div>
|
||||
<div style="font-size: 0.75rem">{{item.seriesCount | compactNumber}} series</div>
|
||||
<div style="font-size: 0.75rem">{{item.issueCount | compactNumber}} issues</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
</app-person-card>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
.main-container {
|
||||
margin-top: 10px;
|
||||
padding: 0 0 0 10px;
|
||||
margin-top: 0.625rem;
|
||||
padding: 0 0 0 0.625rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,11 +6,11 @@
|
|||
overflow: auto;
|
||||
.modal-body {
|
||||
max-height: calc(100vh - 235px);
|
||||
min-height: 150px;
|
||||
min-height: 9.375rem;
|
||||
.list-group {
|
||||
overflow: auto;
|
||||
max-height: calc(100vh - 355px);
|
||||
min-height: 32px;
|
||||
min-height: 2.0rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
</div>
|
||||
<div class="modal-body scrollable-modal {{utilityService.getActiveBreakpoint() === Breakpoint.Mobile ? '' : 'd-flex'}}">
|
||||
<ul ngbNav #nav="ngbNav" [(activeId)]="active" class="nav-pills"
|
||||
orientation="{{utilityService.getActiveBreakpoint() === Breakpoint.Mobile ? 'horizontal' : 'vertical'}}" style="min-width: 135px;">
|
||||
orientation="{{utilityService.getActiveBreakpoint() === Breakpoint.Mobile ? 'horizontal' : 'vertical'}}" style="min-width: 8.4375rem;">
|
||||
<li [ngbNavItem]="TabID.General">
|
||||
<a ngbNavLink>{{t(TabID.General)}}</a>
|
||||
<ng-template ngbNavContent>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<div class="modal-body scrollable-modal {{utilityService.getActiveBreakpoint() === Breakpoint.Mobile ? '' : 'd-flex'}}">
|
||||
<form [formGroup]="editSeriesForm">
|
||||
<ul ngbNav #nav="ngbNav" [(activeId)]="active" class="nav-pills" [destroyOnHide]="false"
|
||||
orientation="{{utilityService.getActiveBreakpoint() === Breakpoint.Mobile ? 'horizontal' : 'vertical'}}" style="min-width: 135px;">
|
||||
orientation="{{utilityService.getActiveBreakpoint() === Breakpoint.Mobile ? 'horizontal' : 'vertical'}}" style="min-width: 8.4375rem;">
|
||||
|
||||
<li [ngbNavItem]="tabs[TabID.General]">
|
||||
<a ngbNavLink>{{t(tabs[TabID.General])}}</a>
|
||||
|
|
@ -689,7 +689,7 @@
|
|||
<ul class="list-unstyled">
|
||||
@for (volume of seriesVolumes; track volume.id) {
|
||||
<li class="d-flex my-4">
|
||||
<app-image class="me-3" style="width: 74px;" width="74px" [imageUrl]="imageService.getVolumeCoverImage(volume.id)"></app-image>
|
||||
<app-image class="me-3" style="width: 4.625rem;" width="74px" [imageUrl]="imageService.getVolumeCoverImage(volume.id)"></app-image>
|
||||
<div class="flex-grow-1">
|
||||
<h5 class="mt-0 mb-1">{{formatVolumeName(volume)}}</h5>
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
|
||||
.bulk-select {
|
||||
background-color: var(--bulk-selection-bg-color);
|
||||
border-bottom: 2px solid var(--primary-color);
|
||||
border-bottom: 0.125rem solid var(--primary-color);
|
||||
color: var(--bulk-selection-text-color) !important;
|
||||
|
||||
.btn-icon {
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@
|
|||
</virtual-scroller>
|
||||
|
||||
@if (items.length === 0 && !isLoading) {
|
||||
<div class="mx-auto" style="width: 200px;">
|
||||
<div class="mx-auto" style="width: 12.5rem;">
|
||||
<p>
|
||||
@if (noDataTemplate) {
|
||||
<ng-container [ngTemplateOutlet]="noDataTemplate"></ng-container>
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@
|
|||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
height: calc((var(--vh) *100) - 157px);
|
||||
margin-bottom: 10px;
|
||||
height: calc((var(--vh) *100) - 9.8125rem);
|
||||
margin-bottom: 0.625rem;
|
||||
|
||||
&.empty {
|
||||
height: auto;
|
||||
|
|
@ -15,7 +15,7 @@
|
|||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 0.625rem;
|
||||
}
|
||||
|
||||
.card-container {
|
||||
|
|
@ -25,7 +25,7 @@
|
|||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, 160px);
|
||||
grid-template-columns: repeat(auto-fill, 10.0rem);
|
||||
grid-gap: 0.5rem;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
@media (max-width: 36.0rem) {
|
||||
.grid {
|
||||
grid-gap: 0.3rem;
|
||||
}
|
||||
|
|
@ -46,22 +46,22 @@
|
|||
display: flex;
|
||||
flex-flow: column;
|
||||
flex-shrink: 0;
|
||||
font-size: 13px;
|
||||
font-size: 0.8125rem;
|
||||
overflow: hidden;
|
||||
padding: 0 5px;
|
||||
padding: 0 0.3125rem;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
|
||||
@media (max-width: 576px) {
|
||||
padding: 0 5px 0 5px;
|
||||
@media (max-width: 36.0rem) {
|
||||
padding: 0 0.3125rem 0 0.3125rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
text-decoration: none;
|
||||
color: hsla(0,0%,100%,.7);
|
||||
height: 25px;
|
||||
height: 1.5625rem;
|
||||
text-align: center;
|
||||
padding: 0px 5px;
|
||||
padding: 0.0rem 0.3125rem;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
background: none;
|
||||
border: 0;
|
||||
|
|
@ -94,7 +94,7 @@
|
|||
|
||||
.virtual-scroller, virtual-scroller {
|
||||
width: 100%;
|
||||
height: calc(var(--vh) * 100 - 155px);
|
||||
height: calc(var(--vh) * 100 - 9.6875rem);
|
||||
mask-image: linear-gradient(to bottom, transparent, black 0%, black 97%, transparent 100%);
|
||||
-webkit-mask-image: linear-gradient(to bottom, transparent, black 0%, black 97%, transparent 100%);
|
||||
overflow: auto;
|
||||
|
|
@ -133,8 +133,8 @@ h2 {
|
|||
cursor: pointer;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
width: 1.5625rem;
|
||||
height: 1.5625rem;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
@ -163,8 +163,8 @@ h2 {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 18px;
|
||||
border-radius: 4px;
|
||||
font-size: 1.125rem;
|
||||
border-radius: 0.25rem;
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -61,14 +61,14 @@
|
|||
|
||||
@if (chapter.isSpecial) {
|
||||
<div class="card-body meta-title" [ngbTooltip]="chapter.title.length > 34 ? chapter.title : null">
|
||||
<div class="card-content d-flex justify-content-center align-items-center text-center" style="width:100%;min-height:58px;">
|
||||
<div class="card-content d-flex justify-content-center align-items-center text-center" style="width:100%;min-height:3.625rem;">
|
||||
{{chapter.title || chapter.range}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
} @else if (chapter.titleName) {
|
||||
<div class="card-body meta-title" [ngbTooltip]="chapter.titleName.length > 34 ? chapter.titleName : null">
|
||||
<div class="card-content d-flex justify-content-center align-items-center text-center" style="width:100%;min-height:58px;">
|
||||
<div class="card-content d-flex justify-content-center align-items-center text-center" style="width:100%;min-height:3.625rem;">
|
||||
{{chapter.titleName}}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<div class="row g-0 mt-3 pb-3">
|
||||
<div class="mx-auto">
|
||||
<div class="row g-0 mb-3">
|
||||
<i class="fa fa-file-upload mx-auto" style="font-size: 24px; width: 20px;" aria-hidden="true"></i>
|
||||
<i class="fa fa-file-upload mx-auto" style="font-size: 1.5rem; width: 1.25rem;" aria-hidden="true"></i>
|
||||
</div>
|
||||
|
||||
<div class="d-flex justify-content-center">
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
</ng-template>
|
||||
</form>
|
||||
|
||||
<div class="row g-0 chooser" style="padding-top: 10px">
|
||||
<div class="row g-0 chooser" style="padding-top: 0.625rem">
|
||||
@if (showReset) {
|
||||
<div class="clickable col-auto" tabindex="0" (click)="reset()"
|
||||
[ngClass]="{'selected': !showApplyButton && selectedIndex === -1}">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
$image-height: 232.91px;
|
||||
$image-width: 160px;
|
||||
$image-height: 14.556875rem;
|
||||
$image-width: 10.0rem;
|
||||
|
||||
.card-img-top {
|
||||
width: $image-width;
|
||||
|
|
@ -9,14 +9,14 @@ $image-width: 160px;
|
|||
|
||||
|
||||
.selected {
|
||||
outline: 5px solid var(--primary-color);
|
||||
outline: 0.3125rem solid var(--primary-color);
|
||||
outline-width: medium;
|
||||
outline-offset: -1px;
|
||||
outline-offset: -0.0625rem;
|
||||
}
|
||||
|
||||
.chooser {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, 160px);
|
||||
grid-template-columns: repeat(auto-fill, 10.0rem);
|
||||
grid-gap: 0.5rem;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
|
@ -24,9 +24,9 @@ $image-width: 160px;
|
|||
ngx-file-drop ::ng-deep > div {
|
||||
// styling for the outer drop box
|
||||
width: 100%;
|
||||
border: 2px solid var(--primary-color);
|
||||
border-radius: 5px;
|
||||
height: 100px;
|
||||
border: 0.125rem solid var(--primary-color);
|
||||
border-radius: 0.3125rem;
|
||||
height: 6.25rem;
|
||||
margin: auto;
|
||||
|
||||
> div {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
.download {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
width: 5.0rem;
|
||||
height: 5.0rem;
|
||||
}
|
||||
|
|
@ -9,6 +9,6 @@ a {
|
|||
}
|
||||
|
||||
.card-title {
|
||||
padding: 5px 0;
|
||||
padding: 0.3125rem 0;
|
||||
max-width: unset;
|
||||
}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
@use '../../../card-item-common';
|
||||
|
||||
:host ::ng-deep .extreme-blur {
|
||||
filter: brightness(50%) blur(4px);
|
||||
filter: brightness(50%) blur(0.25rem);
|
||||
}
|
||||
|
||||
.card-title-container {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
$image-height: 160px;
|
||||
$image-height: 10.0rem;
|
||||
@use '../../../card-item-common';
|
||||
|
||||
// Override so we can have square cards
|
||||
|
|
@ -11,7 +11,7 @@ $image-height: 160px;
|
|||
|
||||
.card-item-container {
|
||||
background-color: unset;
|
||||
border: 1px solid transparent;
|
||||
border: 0.0625rem solid transparent;
|
||||
transition: all ease-in-out 300ms;
|
||||
|
||||
.overlay {
|
||||
|
|
@ -34,7 +34,7 @@ $image-height: 160px;
|
|||
bottom: 0;
|
||||
background-color: transparent;
|
||||
position: unset !important;
|
||||
margin-bottom: 5px;
|
||||
margin-bottom: 0.3125rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@
|
|||
|
||||
</div>
|
||||
<div class="card-body meta-title" [ngbTooltip]="series.localizedName.length > 34 ? series.localizedName : null">
|
||||
<div class="card-content d-flex justify-content-center align-items-center text-center" style="width:100%;min-height:58px;">
|
||||
<div class="card-content d-flex justify-content-center align-items-center text-center" style="width:100%;min-height:3.625rem;">
|
||||
{{relation ? (relation | relationship) : (series.localizedName | defaultValue)}}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -56,14 +56,14 @@
|
|||
@if ((libraryType === LibraryType.LightNovel || libraryType === LibraryType.Book)) {
|
||||
@if (volume.name) {
|
||||
<div class="card-body meta-title">
|
||||
<div class="card-content d-flex justify-content-center align-items-center text-center" style="width:100%;min-height:58px;">
|
||||
<div class="card-content d-flex justify-content-center align-items-center text-center" style="width:100%;min-height:3.625rem;">
|
||||
{{volume.name}}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
} @else if (volume.chapters[0].titleName) {
|
||||
<div class="card-body meta-title">
|
||||
<div class="card-content d-flex justify-content-center align-items-center text-center" style="width:100%;min-height:58px;">
|
||||
<div class="card-content d-flex justify-content-center align-items-center text-center" style="width:100%;min-height:3.625rem;">
|
||||
{{volume.chapters[0].titleName}}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
.carousel-container {
|
||||
.section-title {
|
||||
font-weight: 400;
|
||||
margin-left: 5px;
|
||||
margin-left: 0.3125rem;
|
||||
color: var(--carousel-header-text-color);
|
||||
text-decoration: var(--carousel-header-text-decoration);
|
||||
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
}
|
||||
|
||||
::ng-deep .swiper-wrapper {
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 0.625rem;
|
||||
}
|
||||
|
||||
::ng-deep .last-carousel {
|
||||
|
|
|
|||
|
|
@ -207,7 +207,7 @@
|
|||
|
||||
|
||||
|
||||
<app-loading [loading]="isLoading" style="min-height: 300px"></app-loading>
|
||||
<app-loading [loading]="isLoading" style="min-height: 18.75rem"></app-loading>
|
||||
</div>
|
||||
|
||||
</ng-container>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
.main-container {
|
||||
margin-top: 10px;
|
||||
margin-top: 0.625rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
.main-container {
|
||||
margin-top: 10px;
|
||||
padding: 0 0 0 10px;
|
||||
margin-top: 0.625rem;
|
||||
padding: 0 0 0 0.625rem;
|
||||
}
|
||||
|
||||
|
||||
.poster {
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
max-width: 18.75rem;
|
||||
}
|
||||
|
||||
@media(max-width: var(--grid-breakpoints-sm)) {
|
||||
|
|
@ -23,17 +23,17 @@
|
|||
|
||||
.card-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, 160px);
|
||||
grid-template-columns: repeat(auto-fill, 10.0rem);
|
||||
grid-gap: 0.5rem;
|
||||
justify-content: space-around;
|
||||
padding-bottom: 20px;
|
||||
padding-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
|
||||
.virtual-scroller, virtual-scroller {
|
||||
width: 100%;
|
||||
height: calc(100vh - 85px);
|
||||
max-height: calc(var(--vh)*100 - 170px);
|
||||
max-height: calc(var(--vh)*100 - 10.625rem);
|
||||
}
|
||||
|
||||
h2 {
|
||||
|
|
@ -44,7 +44,7 @@ h2 {
|
|||
.under-image {
|
||||
background-color: var(--breadcrumb-bg-color);
|
||||
color: white;
|
||||
border-bottom-left-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
border-bottom-left-radius: 0.3125rem;
|
||||
border-bottom-right-radius: 0.3125rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
.main-container {
|
||||
margin-top: 10px;
|
||||
padding: 0 0 0 10px;
|
||||
margin-top: 0.625rem;
|
||||
padding: 0 0 0 0.625rem;
|
||||
}
|
||||
|
|
@ -4,12 +4,12 @@
|
|||
}
|
||||
|
||||
.viewport {
|
||||
width: 600px;
|
||||
width: 37.5rem;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
|
||||
.main-container {
|
||||
margin-top: 10px;
|
||||
margin-top: 0.625rem;
|
||||
}
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
background-color: rgba(0,0,0,0.5);
|
||||
}
|
||||
.active {
|
||||
border: 2px solid red;
|
||||
border: 0.125rem solid red;
|
||||
}
|
||||
|
||||
.full-opacity {
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
|
||||
.spacer {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
height: 18.75rem;
|
||||
cursor: pointer;
|
||||
|
||||
.animate {
|
||||
|
|
@ -25,7 +25,7 @@
|
|||
}
|
||||
|
||||
.empty-space {
|
||||
height: 200px;
|
||||
height: 12.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -47,7 +47,7 @@ img, .full-width {
|
|||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-10px);
|
||||
transform: translateY(-0.625rem);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
}
|
||||
@if (menuOpen) {
|
||||
<div class="fixed-top overlay" [@slideFromTop]="menuOpen">
|
||||
<div style="display: flex; margin-top: 5px;">
|
||||
<div style="display: flex; margin-top: 0.3125rem;">
|
||||
<button class="btn btn-icon" style="height: 100%" [title]="t('back')" (click)="closeReader()">
|
||||
<i class="fa fa-arrow-left" aria-hidden="true"></i>
|
||||
<span class="visually-hidden">{{t('back')}}</span>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
$center-width: 50%;
|
||||
$side-width: 25%;
|
||||
|
||||
$dash-width: 3px;
|
||||
$pointer-offset: 5px;
|
||||
$dash-width: 0.1875rem;
|
||||
$pointer-offset: 0.3125rem;
|
||||
|
||||
@use '../../.././../manga-reader-common';
|
||||
|
||||
|
|
@ -54,7 +54,7 @@ $pointer-offset: 5px;
|
|||
}
|
||||
|
||||
.bottom-menu {
|
||||
padding: 20px 20px;
|
||||
padding: 1.25rem 1.25rem;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -66,23 +66,23 @@ $pointer-offset: 5px;
|
|||
color: var(--manga-reader-overlay-text-color);
|
||||
}
|
||||
|
||||
@media(min-width: 600px) {
|
||||
@media(min-width: 37.5rem) {
|
||||
.overlay .left .i {
|
||||
left: 20px;
|
||||
left: 1.25rem;
|
||||
}
|
||||
.overlay .right .i {
|
||||
right: 20px;
|
||||
right: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Splitting Icon
|
||||
.split {
|
||||
height: 20px;
|
||||
width: 40px;
|
||||
height: 1.25rem;
|
||||
width: 2.5rem;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
overflow: hidden;
|
||||
border: 2px solid #ccc;
|
||||
border: 0.125rem solid #ccc;
|
||||
vertical-align: sub;
|
||||
display: inline-block;
|
||||
|
||||
|
|
@ -92,19 +92,19 @@ $pointer-offset: 5px;
|
|||
|
||||
/* Control the left side */
|
||||
.left-side {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
height: 1.25rem;
|
||||
width: 1.25rem;
|
||||
background-color: rgba(255, 255, 255, 0.6);
|
||||
margin-top: -16px;
|
||||
margin-top: -1.0rem;
|
||||
}
|
||||
|
||||
/* Control the right side */
|
||||
.right-side {
|
||||
height: 20px;
|
||||
margin-left: 20px;
|
||||
width: 20px;
|
||||
height: 1.25rem;
|
||||
margin-left: 1.25rem;
|
||||
width: 1.25rem;
|
||||
background-color: rgba(255, 255, 255, 0.6);
|
||||
margin-top: -16px;
|
||||
margin-top: -1.0rem;
|
||||
}
|
||||
|
||||
.none {
|
||||
|
|
@ -116,32 +116,32 @@ $pointer-offset: 5px;
|
|||
}
|
||||
|
||||
.split-double {
|
||||
height: 20px;
|
||||
height: 1.25rem;
|
||||
display: inline-block;
|
||||
font-size: .7em;
|
||||
|
||||
.right {
|
||||
left: -7px;
|
||||
left: -0.4375rem;
|
||||
}
|
||||
}
|
||||
|
||||
::ng-deep {
|
||||
.custom-slider .ngx-slider .ngx-slider-bar {
|
||||
background: #e9ffe2;
|
||||
height: 2px;
|
||||
height: 0.125rem;
|
||||
}
|
||||
.custom-slider .ngx-slider .ngx-slider-selection {
|
||||
background: var(--primary-color);
|
||||
}
|
||||
|
||||
.custom-slider .ngx-slider .ngx-slider-pointer {
|
||||
width: 8px;
|
||||
height: 16px;
|
||||
width: 0.5rem;
|
||||
height: 1.0rem;
|
||||
top: auto; /* to remove the default positioning */
|
||||
bottom: 0;
|
||||
background-color: var(--primary-color); // #333;
|
||||
border-top-left-radius: 3px;
|
||||
border-top-right-radius: 3px;
|
||||
border-top-left-radius: 0.1875rem;
|
||||
border-top-right-radius: 0.1875rem;
|
||||
}
|
||||
|
||||
.custom-slider .ngx-slider .ngx-slider-pointer:after {
|
||||
|
|
@ -149,7 +149,7 @@ $pointer-offset: 5px;
|
|||
}
|
||||
|
||||
.custom-slider .ngx-slider .ngx-slider-bubble {
|
||||
bottom: 14px;
|
||||
bottom: 0.875rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
|
@ -161,12 +161,12 @@ $pointer-offset: 5px;
|
|||
|
||||
|
||||
.custom-slider .ngx-slider .ngx-slider-tick {
|
||||
width: 1px;
|
||||
height: 10px;
|
||||
margin-left: 4px;
|
||||
width: 0.0625rem;
|
||||
height: 0.625rem;
|
||||
margin-left: 0.25rem;
|
||||
border-radius: 0;
|
||||
background: #ffe4d1;
|
||||
top: -1px;
|
||||
top: -0.0625rem;
|
||||
}
|
||||
|
||||
.custom-slider .ngx-slider .ngx-slider-tick.ngx-slider-selected {
|
||||
|
|
@ -188,13 +188,13 @@ $pointer-offset: 5px;
|
|||
|
||||
i {
|
||||
color: white;
|
||||
font-size: 42px;
|
||||
font-size: 2.625rem;
|
||||
}
|
||||
|
||||
.right {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
right: 0.0rem;
|
||||
top: 0.0rem;
|
||||
width: $side-width;
|
||||
background: $pagination-bg;
|
||||
max-height: calc(var(--vh)*100);
|
||||
|
|
@ -203,8 +203,8 @@ $pointer-offset: 5px;
|
|||
|
||||
.top {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
right: 0.0rem;
|
||||
top: 0.0rem;
|
||||
width: 100%;
|
||||
background: $pagination-bg;
|
||||
z-index: 100;
|
||||
|
|
@ -212,8 +212,8 @@ $pointer-offset: 5px;
|
|||
|
||||
.left {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
left: 0.0rem;
|
||||
top: 0.0rem;
|
||||
width: $side-width;
|
||||
background: $pagination-bg;
|
||||
max-height: calc(var(--vh)*100);
|
||||
|
|
@ -222,8 +222,8 @@ $pointer-offset: 5px;
|
|||
|
||||
.bottom {
|
||||
position: fixed; // I couldn't figure out how to do this with abs, so only the bottom bar will not be scrollable
|
||||
left: 0px;
|
||||
bottom: 0px;
|
||||
left: 0.0rem;
|
||||
bottom: 0.0rem;
|
||||
width: 100%;
|
||||
background: $pagination-bg;
|
||||
z-index: 100;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
::ng-deep .select2-selection__rendered {
|
||||
padding-top: 4px !important;
|
||||
padding-top: 0.25rem !important;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -19,5 +19,5 @@
|
|||
|
||||
::ng-deep [ngbDatepickerDayView]:hover:not(.bg-primary), [ngbDatepickerDayView].active:not(.bg-primary) {
|
||||
background: var(--primary-color-dark-shade) !important;
|
||||
outline: 1px solid var(--primary-color-dark-shade) !important;
|
||||
outline: 0.0625rem solid var(--primary-color-dark-shade) !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -41,14 +41,14 @@
|
|||
</div>
|
||||
<div class="col-md-3 col-sm-9">
|
||||
<label for="sort-options" class="form-label">{{t('sort-by-label')}}</label>
|
||||
<button class="btn btn-sm btn-icon" (click)="updateSortOrder()" style="height: 25px; padding-bottom: 0;" [disabled]="filterSettings.sortDisabled">
|
||||
<button class="btn btn-sm btn-icon" (click)="updateSortOrder()" style="height: 1.5625rem; padding-bottom: 0;" [disabled]="filterSettings.sortDisabled">
|
||||
@if (isAscendingSort) {
|
||||
<i class="fa fa-arrow-up" [title]="t('ascending-alt')"></i>
|
||||
} @else {
|
||||
<i class="fa fa-arrow-down" [title]="t('descending-alt')"></i>
|
||||
}
|
||||
</button>
|
||||
<select id="sort-options" class="form-select" formControlName="sortField" style="height: 38px;">
|
||||
<select id="sort-options" class="form-select" formControlName="sortField" style="height: 2.375rem;">
|
||||
@for(field of allSortFields; track field.value) {
|
||||
<option [value]="field.value">{{field.title}}</option>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@
|
|||
}
|
||||
<div class="progress-container row g-0 align-items-center">
|
||||
@if(message.progress === 'indeterminate') {
|
||||
<div class="progress" role="progressbar" style="height: 5px;">
|
||||
<div class="progress" role="progressbar" style="height: 0.3125rem;">
|
||||
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 100%" [attr.aria-valuenow]="100" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
}
|
||||
|
|
@ -74,7 +74,7 @@
|
|||
}
|
||||
<div class="progress-container row g-0 align-items-center">
|
||||
<div class="col-2">{{prettyPrintProgress(message.body.progress) + '%'}}</div>
|
||||
<div class="col-10 progress" role="progressbar" style="height: 5px;">
|
||||
<div class="col-10 progress" role="progressbar" style="height: 0.3125rem;">
|
||||
<div class="progress-bar"
|
||||
[ngStyle]="{'width': message.body.progress * 100 + '%'}"
|
||||
[attr.aria-valuenow]="message.body.progress * 100"
|
||||
|
|
@ -116,7 +116,7 @@
|
|||
|
||||
<div class="progress-container row g-0 align-items-center">
|
||||
<div class="col-2">{{download.progress}}%</div>
|
||||
<div class="col-10 progress" role="progressbar" style="height: 5px;">
|
||||
<div class="col-10 progress" role="progressbar" style="height: 0.3125rem;">
|
||||
<div class="progress-bar" [ngStyle]="{'width': download.progress + '%'}" [attr.aria-valuenow]="download.progress" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
|
||||
.widget-button--indicator {
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
top: 1.5rem;
|
||||
color: var(--event-widget-activity-bg-color);
|
||||
|
||||
&.error {
|
||||
|
|
@ -37,16 +37,16 @@
|
|||
::ng-deep .nav-events {
|
||||
|
||||
.popover-body {
|
||||
min-width: 300px;
|
||||
max-width: 300px;
|
||||
padding: 0px;
|
||||
box-shadow: 0px 0px 12px rgb(0 0 0 / 75%);
|
||||
min-width: 18.75rem;
|
||||
max-width: 18.75rem;
|
||||
padding: 0.0rem;
|
||||
box-shadow: 0.0rem 0.0rem 0.75rem rgb(0 0 0 / 75%);
|
||||
max-height: calc(100vh - 60px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.popover {
|
||||
min-width: 300px;
|
||||
min-width: 18.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -99,9 +99,9 @@
|
|||
}
|
||||
|
||||
.btn-close {
|
||||
top: 5px;
|
||||
right: 10px;
|
||||
font-size: 11px;
|
||||
top: 0.3125rem;
|
||||
right: 0.625rem;
|
||||
font-size: 0.6875rem;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
|
@ -118,9 +118,9 @@
|
|||
}
|
||||
|
||||
.btn-close {
|
||||
top: 35px;
|
||||
right: 10px;
|
||||
font-size: 11px;
|
||||
top: 2.1875rem;
|
||||
right: 0.625rem;
|
||||
font-size: 0.6875rem;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -156,7 +156,7 @@
|
|||
}
|
||||
|
||||
@if (searchTerm.length > 0 && !isLoading) {
|
||||
<li class="list-group-item" style="min-height: 34px" (click)="$event.stopPropagation()">
|
||||
<li class="list-group-item" style="min-height: 2.125rem" (click)="$event.stopPropagation()">
|
||||
<ng-container [ngTemplateOutlet]="extraTemplate"></ng-container>
|
||||
<form [formGroup]="searchSettingsForm">
|
||||
<div class="form-check form-switch">
|
||||
|
|
|
|||
|
|
@ -3,16 +3,16 @@
|
|||
}
|
||||
|
||||
.btn-close {
|
||||
margin-top: 8px;
|
||||
margin-top: 0.5rem;
|
||||
font-size: 0.8rem;
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
right: 0.3125rem;
|
||||
}
|
||||
|
||||
|
||||
.typeahead-input {
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px;
|
||||
border: 0.0625rem solid transparent;
|
||||
border-radius: 0.25rem;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
cursor: text;
|
||||
background-color: var(--searchbar-bg-color);
|
||||
color: var(--body-text-color);
|
||||
min-height: 32px;
|
||||
min-height: 2.0rem;
|
||||
transition-property: all;
|
||||
transition-duration: 0.3s;
|
||||
display: block;
|
||||
|
|
@ -30,23 +30,23 @@
|
|||
.search {
|
||||
display: flex;
|
||||
position: relative;
|
||||
min-height: 32px;
|
||||
min-height: 2.0rem;
|
||||
|
||||
.btn-close {
|
||||
position: unset;
|
||||
margin-top: unset;
|
||||
align-self: center;
|
||||
margin: 0 8px;
|
||||
margin: 0 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
padding: 0px 6px;
|
||||
padding: 0.0rem 0.375rem;
|
||||
outline: 0 !important;
|
||||
border-radius: .28571429rem;
|
||||
margin: 0px !important;
|
||||
margin: 0.0rem !important;
|
||||
text-indent: 0 !important;
|
||||
line-height: inherit !important;
|
||||
box-shadow: none !important;
|
||||
|
|
@ -55,7 +55,7 @@
|
|||
display: block;
|
||||
opacity: 1;
|
||||
position: relative;
|
||||
left: 4px;
|
||||
left: 0.25rem;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
|
||||
|
|
@ -75,7 +75,7 @@
|
|||
}
|
||||
|
||||
|
||||
@media only screen and (max-width: 980px) {
|
||||
@media only screen and (max-width: 61.25rem) {
|
||||
.typeahead-input {
|
||||
width: 65%;
|
||||
}
|
||||
|
|
@ -83,14 +83,14 @@
|
|||
|
||||
|
||||
/* small devices (phones, 650px and down) */
|
||||
@media only screen and (max-width:650px) {
|
||||
@media only screen and (max-width:40.625rem) {
|
||||
.typeahead-input {
|
||||
width: 75%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 500px) {
|
||||
@media only screen and (max-width: 31.25rem) {
|
||||
.typeahead-input {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -113,18 +113,18 @@
|
|||
|
||||
.dropdown {
|
||||
width: 100vw;
|
||||
top: 55px; //header offset
|
||||
top: 3.4375rem; //header offset
|
||||
position: fixed;
|
||||
justify-content: center;
|
||||
left: 0;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 9px;
|
||||
margin-top: 0.5625rem;
|
||||
}
|
||||
|
||||
.list-group {
|
||||
max-width: 600px;
|
||||
max-width: 37.5rem;
|
||||
z-index:1000;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
|
|
@ -138,31 +138,31 @@
|
|||
max-height: unset;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 600px) {
|
||||
@media only screen and (max-width: 37.5rem) {
|
||||
.list-group {
|
||||
max-width: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.list-group-item {
|
||||
padding: 5px 10px;
|
||||
padding: 0.3125rem 0.625rem;
|
||||
}
|
||||
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
border-radius: 0px !important;
|
||||
border-radius: 0.0rem !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
ul ul {
|
||||
border-radius: 0px !important;
|
||||
border-radius: 0.0rem !important;
|
||||
}
|
||||
|
||||
|
||||
.spinner-border {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
right: 0.625rem;
|
||||
margin: auto;
|
||||
cursor: pointer;
|
||||
top: 30%;
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@
|
|||
>
|
||||
|
||||
<ng-template #libraryTemplate let-item>
|
||||
<div class="clickable" style="display: flex;padding: 5px;" (click)="clickLibraryResult(item)">
|
||||
<div class="clickable" style="display: flex;padding: 0.3125rem;" (click)="clickLibraryResult(item)">
|
||||
<div class="ms-1">
|
||||
<span>{{item.name}}</span>
|
||||
</div>
|
||||
|
|
@ -41,8 +41,8 @@
|
|||
</ng-template>
|
||||
|
||||
<ng-template #seriesTemplate let-item>
|
||||
<div class="clickable" style="display: flex;padding: 5px;" (click)="clickSeriesSearchResult(item)">
|
||||
<div style="width: 24px" class="me-1">
|
||||
<div class="clickable" style="display: flex;padding: 0.3125rem;" (click)="clickSeriesSearchResult(item)">
|
||||
<div style="width: 1.5rem" class="me-1">
|
||||
<app-image class="me-3 search-result" width="24px" [imageUrl]="imageService.getSeriesCoverImage(item.seriesId)"></app-image>
|
||||
</div>
|
||||
<div class="ms-1">
|
||||
|
|
@ -60,8 +60,8 @@
|
|||
</ng-template>
|
||||
|
||||
<ng-template #bookmarkTemplate let-item>
|
||||
<div class="clickable" style="display: flex;padding: 5px;" (click)="clickBookmarkSearchResult(item)">
|
||||
<div style="width: 24px" class="me-1">
|
||||
<div class="clickable" style="display: flex;padding: 0.3125rem;" (click)="clickBookmarkSearchResult(item)">
|
||||
<div style="width: 1.5rem" class="me-1">
|
||||
<app-image class="me-3 search-result" width="24px" [imageUrl]="imageService.getSeriesCoverImage(item.seriesId)"></app-image>
|
||||
</div>
|
||||
<div class="ms-1">
|
||||
|
|
@ -79,8 +79,8 @@
|
|||
</ng-template>
|
||||
|
||||
<ng-template #collectionTemplate let-item>
|
||||
<div class="clickable" style="display: flex;padding: 5px;" (click)="clickCollectionSearchResult(item)">
|
||||
<div style="width: 24px" class="me-1">
|
||||
<div class="clickable" style="display: flex;padding: 0.3125rem;" (click)="clickCollectionSearchResult(item)">
|
||||
<div style="width: 1.5rem" class="me-1">
|
||||
<app-image class="me-3 search-result" width="24px" [imageUrl]="imageService.getCollectionCoverImage(item.id)"></app-image>
|
||||
</div>
|
||||
<div class="ms-1">
|
||||
|
|
@ -94,7 +94,7 @@
|
|||
</ng-template>
|
||||
|
||||
<ng-template #readingListTemplate let-item>
|
||||
<div class="clickable" style="display: flex;padding: 5px;" (click)="clickReadingListSearchResult(item)">
|
||||
<div class="clickable" style="display: flex;padding: 0.3125rem;" (click)="clickReadingListSearchResult(item)">
|
||||
<div class="ms-1">
|
||||
<span>{{item.title}}</span>
|
||||
<app-promoted-icon [promoted]="item.promoted"></app-promoted-icon>
|
||||
|
|
@ -103,7 +103,7 @@
|
|||
</ng-template>
|
||||
|
||||
<ng-template #tagTemplate let-item>
|
||||
<div class="clickable" style="display: flex;padding: 5px;" (click)="goToOther(FilterField.Tags, item.id)">
|
||||
<div class="clickable" style="display: flex;padding: 0.3125rem;" (click)="goToOther(FilterField.Tags, item.id)">
|
||||
<div class="ms-1">
|
||||
<span>{{item.title}}</span>
|
||||
</div>
|
||||
|
|
@ -111,8 +111,8 @@
|
|||
</ng-template>
|
||||
|
||||
<ng-template #personTemplate let-item>
|
||||
<div style="display: flex;padding: 5px;" class="clickable" (click)="goToPerson(item)">
|
||||
<div style="width: 24px" class="me-1">
|
||||
<div style="display: flex;padding: 0.3125rem;" class="clickable" (click)="goToPerson(item)">
|
||||
<div style="width: 1.5rem" class="me-1">
|
||||
<app-image class="me-3 search-result"
|
||||
[styles]="{'background': 'none', 'max-height': '24px', 'height': '24px', 'width': '24px', 'border-radius': '50%'}"
|
||||
width="24px" [imageUrl]="imageService.getPersonImage(item.id)" [errorImage]="imageService.noPersonImage"></app-image>
|
||||
|
|
@ -124,7 +124,7 @@
|
|||
</ng-template>
|
||||
|
||||
<ng-template #genreTemplate let-item>
|
||||
<div style="display: flex;padding: 5px;" class="clickable" (click)="goToOther(FilterField.Genres, item.id)">
|
||||
<div style="display: flex;padding: 0.3125rem;" class="clickable" (click)="goToOther(FilterField.Genres, item.id)">
|
||||
<div class="ms-1">
|
||||
<div [innerHTML]="item.title"></div>
|
||||
</div>
|
||||
|
|
@ -134,7 +134,7 @@
|
|||
|
||||
|
||||
<ng-template #chapterTemplate let-item>
|
||||
<div style="display: flex;padding: 5px;" class="clickable" (click)="clickChapterSearchResult(item)">
|
||||
<div style="display: flex;padding: 0.3125rem;" class="clickable" (click)="clickChapterSearchResult(item)">
|
||||
<div class="ms-1">
|
||||
@if (item.files.length > 0) {
|
||||
<app-series-format [format]="item.files?.[0].format"></app-series-format>
|
||||
|
|
@ -146,7 +146,7 @@
|
|||
</ng-template>
|
||||
|
||||
<ng-template #fileTemplate let-item>
|
||||
<div class="clickable" style="display: flex;padding: 5px;" (click)="clickFileSearchResult(item)">
|
||||
<div class="clickable" style="display: flex;padding: 0.3125rem;" (click)="clickFileSearchResult(item)">
|
||||
<div class="ms-1">
|
||||
<app-series-format [format]="item.format"></app-series-format>
|
||||
<span>{{item.filePath}}</span>
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@
|
|||
display: inherit;
|
||||
}
|
||||
|
||||
@media only screen and (max-width:300px) {
|
||||
@media only screen and (max-width:18.75rem) {
|
||||
.xs-only {
|
||||
display: inherit;
|
||||
}
|
||||
|
|
@ -103,7 +103,7 @@
|
|||
}
|
||||
|
||||
.ng-autocomplete {
|
||||
margin-bottom: 0px;
|
||||
margin-bottom: 0.0rem;
|
||||
}
|
||||
|
||||
.primary-text {
|
||||
|
|
@ -125,7 +125,7 @@
|
|||
}
|
||||
|
||||
/* small devices (phones, 650px and down) */
|
||||
@media only screen and (max-width:650px) {
|
||||
@media only screen and (max-width:40.625rem) {
|
||||
.navbar-nav {
|
||||
width: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,12 +3,12 @@
|
|||
<div class="{{theme}}" #container>
|
||||
|
||||
@if (isLoading) {
|
||||
<div class="loading mx-auto" style="min-width: 200px; width: 600px;">
|
||||
<div class="loading mx-auto" style="min-width: 12.5rem; width: 37.5rem;">
|
||||
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
|
||||
{{t('loading-message')}}
|
||||
</div>
|
||||
<div class="progress-container row g-0 align-items-center">
|
||||
<div class="progress" style="height: 5px;">
|
||||
<div class="progress" style="height: 0.3125rem;">
|
||||
<div class="progress-bar" role="progressbar" [ngStyle]="{'width': loadPercent + '%'}" [attr.aria-valuenow]="loadPercent" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -58,7 +58,7 @@
|
|||
}
|
||||
|
||||
<ng-template #multiToolbar>
|
||||
<div style="min-height: 36px" id="toolbarViewer" [ngStyle]="{'background-color': backgroundColor, 'color': fontColor}">
|
||||
<div style="min-height: 2.25rem" id="toolbarViewer" [ngStyle]="{'background-color': backgroundColor, 'color': fontColor}">
|
||||
<div id="toolbarViewerLeft">
|
||||
<pdf-toggle-sidebar></pdf-toggle-sidebar>
|
||||
<pdf-find-button [textLayer]='true'></pdf-find-button>
|
||||
|
|
@ -105,16 +105,16 @@
|
|||
<button (click)="toggleScrollMode()" class="btn-icon toolbarButton" [ngbTooltip]="scrollMode | pdfScrollModeType" [disabled]="this.pageLayoutMode === 'book'">
|
||||
@switch (scrollMode) {
|
||||
@case (ScrollModeType.vertical) {
|
||||
<svg aria-hidden="true" [ngStyle]="{color: fontColor}" style="width: 24px; height: 24px; margin-top: 3px" viewBox="0 0 24 24"><path fill="currentColor" d="M9.5 4c1 0 1.5.5 1.5 1.5v5c0 1-.5 1.5-1.5 1.5h-3c-1 0-1.5-.5-1.5-1.5v-5C5 4.5 5.5 4 6.5 4zM11 0v.5c0 1-.5 1.5-1.5 1.5h-3C5.5 2 5 1.5 5 .5V0h6zM11 16v-.5c0-1-.5-1.5-1.5-1.5h-3c-1 0-1.5.5-1.5 1.5v.5h6z"></path></svg>
|
||||
<svg aria-hidden="true" [ngStyle]="{color: fontColor}" style="width: 1.5rem; height: 1.5rem; margin-top: 0.1875rem" viewBox="0 0 24 24"><path fill="currentColor" d="M9.5 4c1 0 1.5.5 1.5 1.5v5c0 1-.5 1.5-1.5 1.5h-3c-1 0-1.5-.5-1.5-1.5v-5C5 4.5 5.5 4 6.5 4zM11 0v.5c0 1-.5 1.5-1.5 1.5h-3C5.5 2 5 1.5 5 .5V0h6zM11 16v-.5c0-1-.5-1.5-1.5-1.5h-3c-1 0-1.5.5-1.5 1.5v.5h6z"></path></svg>
|
||||
}
|
||||
@case (ScrollModeType.page) {
|
||||
<svg aria-hidden="true" [ngStyle]="{color: fontColor}" style="width: 24px; height: 24px" viewBox="0 0 24 24"><path fill="currentColor" d="M10,7V9H12V17H14V7H10Z"></path></svg>
|
||||
<svg aria-hidden="true" [ngStyle]="{color: fontColor}" style="width: 1.5rem; height: 1.5rem" viewBox="0 0 24 24"><path fill="currentColor" d="M10,7V9H12V17H14V7H10Z"></path></svg>
|
||||
}
|
||||
@case (ScrollModeType.horizontal) {
|
||||
<svg aria-hidden="true" [ngStyle]="{color: fontColor}" style="width: 24px; height: 24px; margin-top: 3px"> <path fill="currentColor" d="M0 4h1.5c1 0 1.5.5 1.5 1.5v5c0 1-.5 1.5-1.5 1.5H0zM9.5 4c1 0 1.5.5 1.5 1.5v5c0 1-.5 1.5-1.5 1.5h-3c-1 0-1.5-.5-1.5-1.5v-5C5 4.5 5.5 4 6.5 4zM16 4h-1.5c-1 0-1.5.5-1.5 1.5v5c0 1 .5 1.5 1.5 1.5H16z"></path> </svg>
|
||||
<svg aria-hidden="true" [ngStyle]="{color: fontColor}" style="width: 1.5rem; height: 1.5rem; margin-top: 0.1875rem"> <path fill="currentColor" d="M0 4h1.5c1 0 1.5.5 1.5 1.5v5c0 1-.5 1.5-1.5 1.5H0zM9.5 4c1 0 1.5.5 1.5 1.5v5c0 1-.5 1.5-1.5 1.5h-3c-1 0-1.5-.5-1.5-1.5v-5C5 4.5 5.5 4 6.5 4zM16 4h-1.5c-1 0-1.5.5-1.5 1.5v5c0 1 .5 1.5 1.5 1.5H16z"></path> </svg>
|
||||
}
|
||||
@case (ScrollModeType.wrapped) {
|
||||
<svg aria-hidden="true" [ngStyle]="{color: fontColor}" style="width: 24px; height: 24px; margin-top: 3px" viewBox="0 0 24 24"><path fill="currentColor" d="M5.5 4c1 0 1.5.5 1.5 1.5v5c0 1-.5 1.5-1.5 1.5h-3c-1 0-1.5-.5-1.5-1.5v-5C1 4.5 1.5 4 2.5 4zM7 0v.5C7 1.5 6.5 2 5.5 2h-3C1.5 2 1 1.5 1 .5V0h6zM7 16v-.5c0-1-.5-1.5-1.5-1.5h-3c-1 0-1.5.5-1.5 1.5v.5h6zM13.5 4c1 0 1.5.5 1.5 1.5v5c0 1-.5 1.5-1.5 1.5h-3c-1 0-1.5-.5-1.5-1.5v-5c0-1 .5-1.5 1.5-1.5zM15 0v.5c0 1-.5 1.5-1.5 1.5h-3C9.5 2 9 1.5 9 .5V0h6zM15 16v-.507c0-1-.5-1.5-1.5-1.5h-3C9.5 14 9 14.5 9 15.5v.5h6z"></path></svg>
|
||||
<svg aria-hidden="true" [ngStyle]="{color: fontColor}" style="width: 1.5rem; height: 1.5rem; margin-top: 0.1875rem" viewBox="0 0 24 24"><path fill="currentColor" d="M5.5 4c1 0 1.5.5 1.5 1.5v5c0 1-.5 1.5-1.5 1.5h-3c-1 0-1.5-.5-1.5-1.5v-5C1 4.5 1.5 4 2.5 4zM7 0v.5C7 1.5 6.5 2 5.5 2h-3C1.5 2 1 1.5 1 .5V0h6zM7 16v-.5c0-1-.5-1.5-1.5-1.5h-3c-1 0-1.5.5-1.5 1.5v.5h6zM13.5 4c1 0 1.5.5 1.5 1.5v5c0 1-.5 1.5-1.5 1.5h-3c-1 0-1.5-.5-1.5-1.5v-5c0-1 .5-1.5 1.5-1.5zM15 0v.5c0 1-.5 1.5-1.5 1.5h-3C9.5 2 9 1.5 9 .5V0h6zM15 16v-.507c0-1-.5-1.5-1.5-1.5h-3C9.5 14 9 14.5 9 15.5v.5h6z"></path></svg>
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -125,13 +125,13 @@
|
|||
|
||||
@switch (spreadMode) {
|
||||
@case ('off') {
|
||||
<svg aria-hidden="true" [ngStyle]="{color: fontColor}" style="width: 24px; height: 24px; margin-top: 3px" viewBox="0 0 24 24"><path fill="currentColor" d="M6 3c-1 0-1.5.5-1.5 1.5v7c0 1 .5 1.5 1.5 1.5h4c1 0 1.5-.5 1.5-1.5v-7c0-1-.5-1.5-1.5-1.5z"></path></svg>
|
||||
<svg aria-hidden="true" [ngStyle]="{color: fontColor}" style="width: 1.5rem; height: 1.5rem; margin-top: 0.1875rem" viewBox="0 0 24 24"><path fill="currentColor" d="M6 3c-1 0-1.5.5-1.5 1.5v7c0 1 .5 1.5 1.5 1.5h4c1 0 1.5-.5 1.5-1.5v-7c0-1-.5-1.5-1.5-1.5z"></path></svg>
|
||||
}
|
||||
@case ('odd') {
|
||||
<svg aria-hidden="true" [ngStyle]="{color: fontColor}" style="width: 24px; height: 24px; margin-top: 3px" viewBox="0 0 24 24"><path fill="currentColor" d="M10.56 3.5C9.56 3.5 9 4 9 5v6.5c0 1 .5 1.5 1.5 1.5h4c1 0 1.5-.5 1.5-1.5V5c0-1-.5-1.5-1.5-1.5zm1.93 1.2c.8 0 1.4.2 1.8.64.5.4.7 1 .7 1.7 0 .5-.2 1-.5 1.44-.2.3-.6.6-1 .93l-.6.4c-.4.3-.6.4-.7.55-.1.1-.2.2-.3.4h3.2v1.27h-5c0-.5.1-1 .3-1.43.2-.49.7-1 1.5-1.54.7-.5 1.1-.8 1.3-1.02.3-.3.4-.7.4-1.05 0-.3-.1-.6-.3-.77-.2-.2-.4-.3-.7-.3-.4 0-.7.2-.9.5-.1.2-.1.5-.2.9h-1.4c0-.6.2-1.1.3-1.5.4-.7 1.1-1.1 2-1.1zM1.54 3.5C.54 3.5 0 4 0 5v6.5c0 1 .5 1.5 1.54 1.5h4c1 0 1.5-.5 1.5-1.5V5c0-1-.5-1.5-1.5-1.5zm1.8 1.125H4.5V12H3V6.9H1.3v-1c.5 0 .8 0 .97-.03.33-.07.53-.17.73-.37.1-.2.2-.3.25-.5.05-.2.05-.3.05-.3z"></path></svg>
|
||||
<svg aria-hidden="true" [ngStyle]="{color: fontColor}" style="width: 1.5rem; height: 1.5rem; margin-top: 0.1875rem" viewBox="0 0 24 24"><path fill="currentColor" d="M10.56 3.5C9.56 3.5 9 4 9 5v6.5c0 1 .5 1.5 1.5 1.5h4c1 0 1.5-.5 1.5-1.5V5c0-1-.5-1.5-1.5-1.5zm1.93 1.2c.8 0 1.4.2 1.8.64.5.4.7 1 .7 1.7 0 .5-.2 1-.5 1.44-.2.3-.6.6-1 .93l-.6.4c-.4.3-.6.4-.7.55-.1.1-.2.2-.3.4h3.2v1.27h-5c0-.5.1-1 .3-1.43.2-.49.7-1 1.5-1.54.7-.5 1.1-.8 1.3-1.02.3-.3.4-.7.4-1.05 0-.3-.1-.6-.3-.77-.2-.2-.4-.3-.7-.3-.4 0-.7.2-.9.5-.1.2-.1.5-.2.9h-1.4c0-.6.2-1.1.3-1.5.4-.7 1.1-1.1 2-1.1zM1.54 3.5C.54 3.5 0 4 0 5v6.5c0 1 .5 1.5 1.54 1.5h4c1 0 1.5-.5 1.5-1.5V5c0-1-.5-1.5-1.5-1.5zm1.8 1.125H4.5V12H3V6.9H1.3v-1c.5 0 .8 0 .97-.03.33-.07.53-.17.73-.37.1-.2.2-.3.25-.5.05-.2.05-.3.05-.3z"></path></svg>
|
||||
}
|
||||
@case ('even') {
|
||||
<svg aria-hidden="true" [ngStyle]="{color: fontColor}" style="width: 24px; height: 24px; margin-top: 3px"><path fill="currentColor" d="M1.5 3.5C.5 3.5 0 4 0 5v6.5c0 1 .5 1.5 1.5 1.5h4c1 0 1.5-.5 1.5-1.5V5c0-1-.5-1.5-1.5-1.5zm2 1.2c.8 0 1.4.2 1.8.6.5.4.7 1 .7 1.7 0 .5-.2 1-.5 1.4-.2.3-.5.7-1 1l-.6.4c-.4.3-.6.4-.75.56-.15.14-.25.24-.35.44H6v1.3H1c0-.6.1-1.1.3-1.5.3-.6.7-1 1.5-1.6.7-.4 1.1-.8 1.28-1 .32-.3.42-.6.42-1 0-.3-.1-.6-.23-.8-.17-.2-.37-.3-.77-.3s-.7.1-.9.5c-.04.2-.1.5-.1.9H1.1c0-.6.1-1.1.3-1.5.4-.7 1.1-1.1 2.1-1.1zM10.54 3.54C9.5 3.54 9 4 9 5v6.5c0 1 .5 1.5 1.54 1.5h4c.96 0 1.46-.5 1.46-1.5V5c0-1-.5-1.46-1.5-1.46zm1.9.95c.7 0 1.3.2 1.7.5.4.4.6.8.6 1.4 0 .4-.1.8-.4 1.1-.2.2-.3.3-.5.4.1 0 .3.1.6.3.4.3.5.8.5 1.4 0 .6-.2 1.2-.6 1.6-.4.5-1.1.7-1.9.7-1 0-1.8-.3-2.2-1-.14-.29-.24-.69-.24-1.29h1.4c0 .3 0 .5.1.7.2.4.5.5 1 .5.3 0 .5-.1.7-.3.2-.2.3-.5.3-.8 0-.5-.2-.8-.6-.95-.2-.05-.5-.15-1-.15v-1c.5 0 .8-.1 1-.14.3-.1.5-.4.5-.9 0-.3-.1-.5-.2-.7-.2-.2-.4-.3-.7-.3-.3 0-.6.1-.75.3-.2.2-.2.5-.2.86h-1.34c0-.4.1-.7.19-1.1 0-.12.2-.32.4-.62.2-.2.4-.3.7-.4.3-.1.6-.1 1-.1z"></path></svg>
|
||||
<svg aria-hidden="true" [ngStyle]="{color: fontColor}" style="width: 1.5rem; height: 1.5rem; margin-top: 0.1875rem"><path fill="currentColor" d="M1.5 3.5C.5 3.5 0 4 0 5v6.5c0 1 .5 1.5 1.5 1.5h4c1 0 1.5-.5 1.5-1.5V5c0-1-.5-1.5-1.5-1.5zm2 1.2c.8 0 1.4.2 1.8.6.5.4.7 1 .7 1.7 0 .5-.2 1-.5 1.4-.2.3-.5.7-1 1l-.6.4c-.4.3-.6.4-.75.56-.15.14-.25.24-.35.44H6v1.3H1c0-.6.1-1.1.3-1.5.3-.6.7-1 1.5-1.6.7-.4 1.1-.8 1.28-1 .32-.3.42-.6.42-1 0-.3-.1-.6-.23-.8-.17-.2-.37-.3-.77-.3s-.7.1-.9.5c-.04.2-.1.5-.1.9H1.1c0-.6.1-1.1.3-1.5.4-.7 1.1-1.1 2.1-1.1zM10.54 3.54C9.5 3.54 9 4 9 5v6.5c0 1 .5 1.5 1.54 1.5h4c.96 0 1.46-.5 1.46-1.5V5c0-1-.5-1.46-1.5-1.46zm1.9.95c.7 0 1.3.2 1.7.5.4.4.6.8.6 1.4 0 .4-.1.8-.4 1.1-.2.2-.3.3-.5.4.1 0 .3.1.6.3.4.3.5.8.5 1.4 0 .6-.2 1.2-.6 1.6-.4.5-1.1.7-1.9.7-1 0-1.8-.3-2.2-1-.14-.29-.24-.69-.24-1.29h1.4c0 .3 0 .5.1.7.2.4.5.5 1 .5.3 0 .5-.1.7-.3.2-.2.3-.5.3-.8 0-.5-.2-.8-.6-.95-.2-.05-.5-.15-1-.15v-1c.5 0 .8-.1 1-.14.3-.1.5-.4.5-.9 0-.3-.1-.5-.2-.7-.2-.2-.4-.3-.7-.3-.3 0-.6.1-.75.3-.2.2-.2.5-.2.86h-1.34c0-.4.1-.7.19-1.1 0-.12.2-.32.4-.62.2-.2.4-.3.7-.4.3-.1.6-.1 1-.1z"></path></svg>
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.toolbar-icon {
|
||||
font-size: 19px;
|
||||
font-size: 1.1875rem;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
|
|
@ -7,12 +7,12 @@
|
|||
}
|
||||
|
||||
.book-title {
|
||||
margin: 8px 0 4px !important;
|
||||
margin: 0.5rem 0 0.25rem !important;
|
||||
}
|
||||
|
||||
// Override since it's not coming from library
|
||||
::ng-deep #presentationMode {
|
||||
margin: 3px 0 4px !important;
|
||||
margin: 0.1875rem 0 0.25rem !important;
|
||||
}
|
||||
|
||||
::ng-deep .dark > ngx-extended-pdf-viewer .treeItem>a {
|
||||
|
|
@ -33,15 +33,15 @@ $pagination-opacity: 0;
|
|||
|
||||
//$pagination-color: red;
|
||||
//$pagination-opacity: 0.7;
|
||||
$action-bar-height: 36px;
|
||||
$loading-bar-height: 24px;
|
||||
$action-bar-height: 2.25rem;
|
||||
$loading-bar-height: 1.5rem;
|
||||
|
||||
// Tap to Paginate
|
||||
|
||||
|
||||
.right {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
right: 0.0rem;
|
||||
top: $action-bar-height;
|
||||
width: 20vw;
|
||||
z-index: 3;
|
||||
|
|
@ -53,7 +53,7 @@ $loading-bar-height: 24px;
|
|||
height: 100%;
|
||||
|
||||
&.immersive {
|
||||
top: 0px;
|
||||
top: 0.0rem;
|
||||
}
|
||||
|
||||
&.no-pointer-events {
|
||||
|
|
@ -66,7 +66,7 @@ $loading-bar-height: 24px;
|
|||
// This class pushes the click area to the left a bit to let users click the scrollbar
|
||||
.right-with-scrollbar {
|
||||
position: absolute;
|
||||
right: 17px;
|
||||
right: 1.0625rem;
|
||||
top: $action-bar-height;
|
||||
width: 18vw;
|
||||
z-index: 3;
|
||||
|
|
@ -79,13 +79,13 @@ $loading-bar-height: 24px;
|
|||
cursor: pointer;
|
||||
|
||||
&.immersive {
|
||||
top: 0px;
|
||||
top: 0.0rem;
|
||||
}
|
||||
}
|
||||
|
||||
.left {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
left: 0.0rem;
|
||||
top: $action-bar-height;
|
||||
width: 20vw;
|
||||
background: $pagination-color;
|
||||
|
|
@ -98,7 +98,7 @@ $loading-bar-height: 24px;
|
|||
cursor: pointer;
|
||||
|
||||
&.immersive {
|
||||
top: 0px;
|
||||
top: 0.0rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
</div>
|
||||
<div class="modal-body scrollable-modal {{utilityService.getActiveBreakpoint() === Breakpoint.Mobile ? '' : 'd-flex'}}">
|
||||
<form [formGroup]="editForm">
|
||||
<ul ngbNav #nav="ngbNav" [(activeId)]="active" class="nav-pills" orientation="{{utilityService.getActiveBreakpoint() === Breakpoint.Mobile ? 'horizontal' : 'vertical'}}" style="min-width: 135px;">
|
||||
<ul ngbNav #nav="ngbNav" [(activeId)]="active" class="nav-pills" orientation="{{utilityService.getActiveBreakpoint() === Breakpoint.Mobile ? 'horizontal' : 'vertical'}}" style="min-width: 8.4375rem;">
|
||||
|
||||
<li [ngbNavItem]="TabID.General">
|
||||
<a ngbNavLink>{{t(TabID.General)}}</a>
|
||||
|
|
|
|||
|
|
@ -1,18 +1,18 @@
|
|||
.main-container {
|
||||
margin-top: 10px;
|
||||
padding: 0 0 0 10px;
|
||||
margin-top: 0.625rem;
|
||||
padding: 0 0 0 0.625rem;
|
||||
|
||||
.person-badge {
|
||||
background: var(--card-bg-color);
|
||||
max-height: 200px;
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
max-height: 12.5rem;
|
||||
height: 12.5rem;
|
||||
width: 12.5rem;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
|
||||
i {
|
||||
max-height: 128px;
|
||||
height: 128px;
|
||||
max-height: 8.0rem;
|
||||
height: 8.0rem;
|
||||
font-size: 8rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,22 +1,22 @@
|
|||
.example-list {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
min-height: 60px;
|
||||
min-height: 3.75rem;
|
||||
display: block;
|
||||
border-radius: 4px;
|
||||
border-radius: 0.25rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.example-box {
|
||||
margin: 5px 0;
|
||||
margin: 0.3125rem 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
box-sizing: border-box;
|
||||
font-size: 14px;
|
||||
font-size: 0.875rem;
|
||||
|
||||
.drag-handle {
|
||||
cursor: move;
|
||||
font-size: 24px;
|
||||
font-size: 1.5rem;
|
||||
// TODO: This needs to be calculation based
|
||||
margin-top: 215%;
|
||||
}
|
||||
|
|
@ -24,10 +24,10 @@
|
|||
|
||||
.cdk-drag-preview {
|
||||
box-sizing: border-box;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
|
||||
0 8px 10px 1px rgba(0, 0, 0, 0.14),
|
||||
0 3px 14px 2px rgba(0, 0, 0, 0.12);
|
||||
border-radius: 0.25rem;
|
||||
box-shadow: 0 0.3125rem 0.3125rem -0.1875rem rgba(0, 0, 0, 0.2),
|
||||
0 0.5rem 0.625rem 0.0625rem rgba(0, 0, 0, 0.14),
|
||||
0 0.1875rem 0.875rem 0.125rem rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.cdk-drag-placeholder {
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
|
||||
.example-box:last-child {
|
||||
border: none;
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
|
||||
|
|
@ -49,29 +49,29 @@
|
|||
|
||||
.example-custom-placeholder {
|
||||
background: #ccc;
|
||||
border: dotted 3px #999;
|
||||
min-height: 60px;
|
||||
border: dotted 0.1875rem #999;
|
||||
min-height: 3.75rem;
|
||||
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.list-container {
|
||||
background: var(--card-bg-color);
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
padding: 0.625rem;
|
||||
border-radius: 0.3125rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.accessibility-padding {
|
||||
padding-top: 12px;
|
||||
padding-top: 0.75rem;
|
||||
}
|
||||
.bulk-padding {
|
||||
padding-top: 20px;
|
||||
padding-top: 1.25rem;
|
||||
}
|
||||
|
||||
|
||||
.virtual-scroller, virtual-scroller {
|
||||
width: 100%;
|
||||
height: calc(var(--vh) * 100 - 173px);
|
||||
height: calc(var(--vh) * 100 - 10.8125rem);
|
||||
}
|
||||
|
||||
virtual-scroller.empty {
|
||||
|
|
@ -79,5 +79,5 @@ virtual-scroller.empty {
|
|||
}
|
||||
|
||||
.manual-input {
|
||||
width: 83px;
|
||||
width: 5.1875rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<ng-container *transloco="let t; read: 'import-cbl-modal'">
|
||||
|
||||
<div class="row g-0" style="min-width: 135px;">
|
||||
<div class="row g-0" style="min-width: 8.4375rem;">
|
||||
<app-step-tracker [steps]="steps" [currentStep]="currentStepIndex"></app-step-tracker>
|
||||
</div>
|
||||
|
||||
|
|
@ -93,7 +93,7 @@
|
|||
<div class="justify-content-center col">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="flex-shrink-0">
|
||||
<i class="fa-solid fa-triangle-exclamation" style="font-size: 24px" aria-hidden="true"></i>
|
||||
<i class="fa-solid fa-triangle-exclamation" style="font-size: 1.5rem" aria-hidden="true"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 ms-3">
|
||||
{{t('validate-warning')}}
|
||||
|
|
@ -114,7 +114,7 @@
|
|||
<div class="justify-content-center col">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="flex-shrink-0">
|
||||
<i class="fa-solid fa-circle-check" style="font-size: 24px" aria-hidden="true"></i>
|
||||
<i class="fa-solid fa-circle-check" style="font-size: 1.5rem" aria-hidden="true"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 ms-3">
|
||||
{{t('validate-no-issue-description')}}
|
||||
|
|
|
|||
|
|
@ -30,10 +30,10 @@ file-upload {
|
|||
|
||||
::ng-deep .remove-btn {
|
||||
background: #C0392B;
|
||||
border-radius: 3px;
|
||||
border-radius: 0.1875rem;
|
||||
color: var(--input-text-color) !important;
|
||||
font-weight: bold;
|
||||
padding: 3px 5px;
|
||||
padding: 0.1875rem 0.3125rem;
|
||||
}
|
||||
|
||||
::ng-deep .reading-list-success--item {
|
||||
|
|
|
|||
|
|
@ -218,7 +218,7 @@
|
|||
@defer (when activeTabId === TabID.Storyline; prefetch on idle) {
|
||||
<div class="row mb-1 scroll-container" #scrollingBlock>
|
||||
@if (items.length === 0 && !isLoading) {
|
||||
<div class="mx-auto" style="width: 200px;">
|
||||
<div class="mx-auto" style="width: 12.5rem;">
|
||||
{{t('no-data')}}
|
||||
</div>
|
||||
} @else if(isLoading) {
|
||||
|
|
@ -266,7 +266,7 @@
|
|||
|
||||
</ul>
|
||||
</div>
|
||||
<div [ngbNavOutlet]="nav" style="min-height: 300px"></div>
|
||||
<div [ngbNavOutlet]="nav" style="min-height: 18.75rem"></div>
|
||||
</div>
|
||||
}
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@
|
|||
|
||||
|
||||
.main-container {
|
||||
margin-top: 10px;
|
||||
padding: 0 0 0 10px;
|
||||
margin-top: 0.625rem;
|
||||
padding: 0 0 0 0.625rem;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -17,10 +17,10 @@
|
|||
}
|
||||
|
||||
.dropdown-toggle-split {
|
||||
border-top-right-radius: 6px !important;
|
||||
border-bottom-right-radius: 6px !important;
|
||||
border-top-left-radius: 0px !important;
|
||||
border-bottom-left-radius: 0px !important;
|
||||
border-top-right-radius: 0.375rem !important;
|
||||
border-bottom-right-radius: 0.375rem !important;
|
||||
border-top-left-radius: 0.0rem !important;
|
||||
border-bottom-left-radius: 0.0rem !important;
|
||||
}
|
||||
|
||||
.reading-list-years {
|
||||
|
|
@ -30,8 +30,8 @@
|
|||
.scroll-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: calc((var(--vh) *100) - 173px);
|
||||
margin-bottom: 10px;
|
||||
height: calc((var(--vh) *100) - 10.8125rem);
|
||||
margin-bottom: 0.625rem;
|
||||
|
||||
&.empty {
|
||||
height: auto;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<ng-container *transloco="let t; read: 'reading-list-item'">
|
||||
<div class="d-flex flex-row g-0reading-list-item">
|
||||
<div class="d-none d-md-block pe-2">
|
||||
<app-image width="106px" [styles]="{'max-height': '125px'}" class="img-top me-3" [imageUrl]="imageService.getChapterCoverImage(item.chapterId)"></app-image>
|
||||
<app-image width="6.625rem" [styles]="{'max-height': '7.8125rem'}" class="img-top me-3" [imageUrl]="imageService.getChapterCoverImage(item.chapterId)"></app-image>
|
||||
@if (item.pagesRead === 0 && item.pagesTotal > 0) {
|
||||
<div class="not-read-badge" ></div>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
$image-height: 125px;
|
||||
$image-height: 7.8125rem;
|
||||
$clamp-lines: 3;
|
||||
|
||||
.reading-list-item {
|
||||
max-height: 140px;
|
||||
height: 140px;
|
||||
max-height: 8.75rem;
|
||||
height: 8.75rem;
|
||||
}
|
||||
|
||||
.progress-banner {
|
||||
height: 5px;
|
||||
height: 0.3125rem;
|
||||
|
||||
.progress {
|
||||
color: var(--card-progress-bar-color);
|
||||
|
|
@ -16,19 +16,19 @@ $clamp-lines: 3;
|
|||
}
|
||||
|
||||
.badge-container {
|
||||
border-radius: 4px;
|
||||
border-radius: 0.25rem;
|
||||
display: block;
|
||||
height: $image-height;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
width: 106px;
|
||||
width: 6.625rem;
|
||||
}
|
||||
|
||||
.not-read-badge {
|
||||
position: relative;
|
||||
top: -125px;
|
||||
left: 78px;
|
||||
top: -7.8125rem;
|
||||
left: 4.875rem;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
|
|
@ -44,7 +44,7 @@ $clamp-lines: 3;
|
|||
;
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
@media (max-width: 36.0rem) {
|
||||
::ng-deep .read-more-cont div {
|
||||
-webkit-line-clamp: $clamp-lines;
|
||||
-webkit-box-orient: vertical;
|
||||
|
|
@ -54,7 +54,7 @@ $clamp-lines: 3;
|
|||
}
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
@media (max-width: 50.0rem) {
|
||||
::ng-deep .read-more-cont div {
|
||||
-webkit-line-clamp: $clamp-lines;
|
||||
-webkit-box-orient: vertical;
|
||||
|
|
@ -64,14 +64,14 @@ $clamp-lines: 3;
|
|||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@media (max-width: 48.0rem) {
|
||||
.actions {
|
||||
display:flex;
|
||||
flex-direction: column-reverse;
|
||||
margin-left: 10px;
|
||||
margin-left: 0.625rem;
|
||||
|
||||
.btn-primary {
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 0.625rem;
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
.main-container {
|
||||
margin-top: 10px;
|
||||
padding: 0 0 0 10px;
|
||||
margin-top: 0.625rem;
|
||||
padding: 0 0 0 0.625rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,13 +2,13 @@
|
|||
.bs4-order-tracking {
|
||||
overflow: hidden;
|
||||
color: #878788;
|
||||
padding-left: 0px;
|
||||
margin-top: 30px
|
||||
padding-left: 0.0rem;
|
||||
margin-top: 1.875rem
|
||||
}
|
||||
|
||||
.bs4-order-tracking li {
|
||||
list-style-type: none;
|
||||
font-size: 17px;
|
||||
font-size: 1.0625rem;
|
||||
width: 25%;
|
||||
float: left;
|
||||
position: relative;
|
||||
|
|
@ -18,24 +18,24 @@
|
|||
}
|
||||
|
||||
.bs4-order-tracking li:first-child:before {
|
||||
margin-left: 15px !important;
|
||||
padding-left: 11px !important;
|
||||
margin-left: 0.9375rem !important;
|
||||
padding-left: 0.6875rem !important;
|
||||
text-align: left !important
|
||||
}
|
||||
|
||||
.bs4-order-tracking li:last-child:before {
|
||||
margin-right: 5px !important;
|
||||
padding-right: 11px !important;
|
||||
margin-right: 0.3125rem !important;
|
||||
padding-right: 0.6875rem !important;
|
||||
text-align: right !important
|
||||
}
|
||||
|
||||
.bs4-order-tracking li>div {
|
||||
color: #fff;
|
||||
width: 50px;
|
||||
width: 3.125rem;
|
||||
text-align: center;
|
||||
line-height: 50px;
|
||||
line-height: 3.125rem;
|
||||
display: block;
|
||||
font-size: 20px;
|
||||
font-size: 1.25rem;
|
||||
background: #878788;
|
||||
border-radius: 50%;
|
||||
margin: auto
|
||||
|
|
@ -44,12 +44,12 @@
|
|||
.bs4-order-tracking li:after {
|
||||
content: '';
|
||||
width: 150%;
|
||||
height: 2px;
|
||||
height: 0.125rem;
|
||||
background: #878788;
|
||||
position: absolute;
|
||||
left: 0%;
|
||||
right: 0%;
|
||||
top: 25px;
|
||||
top: 1.5625rem;
|
||||
z-index: -1
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,6 +4,6 @@
|
|||
}
|
||||
|
||||
.scrollable-modal {
|
||||
max-height: calc(var(--vh) * 100 - 198px);
|
||||
max-height: calc(var(--vh) * 100 - 12.375rem);
|
||||
overflow: auto;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
</div>
|
||||
<div class="modal-body scrollable-modal {{utilityService.getActiveBreakpoint() === Breakpoint.Mobile ? '' : 'd-flex'}}">
|
||||
<ul ngbNav #nav="ngbNav" [(activeId)]="active" class="nav-pills"
|
||||
orientation="{{utilityService.getActiveBreakpoint() === Breakpoint.Mobile ? 'horizontal' : 'vertical'}}" style="min-width: 135px;">
|
||||
orientation="{{utilityService.getActiveBreakpoint() === Breakpoint.Mobile ? 'horizontal' : 'vertical'}}" style="min-width: 8.4375rem;">
|
||||
<li [ngbNavItem]="TabID.General">
|
||||
<a ngbNavLink>{{t(TabID.General)}}</a>
|
||||
<ng-template ngbNavContent>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.card-body {
|
||||
padding: 0px 0px;
|
||||
padding: 0.0rem 0.0rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
|
|
|
|||
|
|
@ -7,8 +7,8 @@
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
height: calc(var(--vh, 1vh) * 100 - 57px);
|
||||
min-height: 289px;
|
||||
height: calc(var(--vh, 1vh) * 100 - 3.5625rem);
|
||||
min-height: 18.0625rem;
|
||||
position: relative;
|
||||
width: 100vw;
|
||||
max-width: 100vw;
|
||||
|
|
@ -32,7 +32,7 @@
|
|||
margin-bottom: 0;
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
margin-left: 5px;
|
||||
margin-left: 0.3125rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
|
@ -56,13 +56,13 @@
|
|||
.card {
|
||||
background-color: var(--login-card-bg-color);
|
||||
color: #fff;
|
||||
max-width: 300px;
|
||||
max-width: 18.75rem;
|
||||
border-width: var(--login-card-border-width);
|
||||
border-style: var(--login-card-border-style);
|
||||
border-color: var(--login-card-border-color);
|
||||
|
||||
&:focus {
|
||||
border: 2px solid white;
|
||||
border: 0.125rem solid white;
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -25,11 +25,11 @@
|
|||
</div>
|
||||
}
|
||||
|
||||
<div class="col-auto" style="padding-top: 8px">
|
||||
<div class="col-auto" style="padding-top: 0.5rem">
|
||||
<app-loading [loading]="isLoading" size="spinner-border-sm"></app-loading>
|
||||
</div>
|
||||
|
||||
<div class="col-auto ms-2" style="padding-top: 4px">
|
||||
<div class="col-auto ms-2" style="padding-top: 0.25rem">
|
||||
@for(link of webLinks; track link) {
|
||||
<a class="me-1" [href]="link | safeHtml" target="_blank" rel="noopener noreferrer" [title]="link">
|
||||
<app-image height="24px" width="24px" aria-hidden="true" [imageUrl]="imageService.getWebLinkImage(link)"
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
.custom-col {
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
padding-left: 0.0rem;
|
||||
padding-right: 0.0rem;
|
||||
}
|
||||
|
||||
.badge {
|
||||
|
|
@ -8,26 +8,26 @@
|
|||
}
|
||||
|
||||
.sm-popover {
|
||||
width: 150px;
|
||||
width: 9.375rem;
|
||||
|
||||
> .popover-body {
|
||||
padding-top: 10px;
|
||||
padding-top: 0.625rem;
|
||||
}
|
||||
}
|
||||
|
||||
.md-popover {
|
||||
width: 214px;
|
||||
width: 13.375rem;
|
||||
|
||||
> .popover-body {
|
||||
padding-top: 10px;
|
||||
padding-top: 0.625rem;
|
||||
}
|
||||
}
|
||||
|
||||
.lg-popover {
|
||||
width: 320px;
|
||||
width: 20.0rem;
|
||||
|
||||
> .popover-body {
|
||||
padding-top: 10px;
|
||||
padding-top: 0.625rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div class="mt-2 mb-2">
|
||||
@if (entity.publishers.length > 0) {
|
||||
<div class="publisher-img-container d-inline-flex align-items-center me-2 position-relative">
|
||||
<app-image [imageUrl]="imageService.getPublisherImage(entity.publishers[0].name)" [classes]="'me-2'" [hideOnError]="true" width="32px" height="32px"
|
||||
<app-image [imageUrl]="imageService.getPublisherImage(entity.publishers[0].name)" [classes]="'me-2'" [hideOnError]="true" width="2.0rem" height="2.0rem"
|
||||
aria-hidden="true"></app-image>
|
||||
<div class="position-relative d-inline-block" (click)="openGeneric(FilterField.Publisher, entity.publishers[0].id)">{{entity.publishers[0].name}}</div>
|
||||
<!-- <app-publisher-flipper [publishers]="entity.publishers"></app-publisher-flipper>-->
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
.publisher-img-container {
|
||||
background-color: var(--card-bg-color);
|
||||
border-radius: 3px;
|
||||
padding: 2px 5px;
|
||||
border-radius: 0.1875rem;
|
||||
padding: 0.125rem 0.3125rem;
|
||||
font-size: 0.8rem;
|
||||
vertical-align: middle;
|
||||
|
||||
div {
|
||||
min-height: 32px;
|
||||
line-height: 32px;
|
||||
min-height: 2.0rem;
|
||||
line-height: 2.0rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -340,7 +340,7 @@
|
|||
|
||||
</ul>
|
||||
</div>
|
||||
<div [ngbNavOutlet]="nav" style="min-height: 300px"></div>
|
||||
<div [ngbNavOutlet]="nav" style="min-height: 18.75rem"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -2,24 +2,24 @@
|
|||
|
||||
.to-read-counter {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 20px;
|
||||
top: 0.9375rem;
|
||||
left: 1.25rem;
|
||||
}
|
||||
|
||||
.card-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, 160px);
|
||||
grid-template-columns: repeat(auto-fill, 10.0rem);
|
||||
grid-gap: 0.5rem;
|
||||
justify-content: space-around;
|
||||
padding-bottom: 20px;
|
||||
padding-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
::ng-deep .carousel-container .header i.fa-plus, ::ng-deep .carousel-container .header i.fa-pen {
|
||||
border-width: 1px;
|
||||
border-width: 0.0625rem;
|
||||
border-style: solid;
|
||||
border-radius: 5px;
|
||||
border-radius: 0.3125rem;
|
||||
border-color: var(--primary-color);
|
||||
padding: 5px;
|
||||
padding: 0.3125rem;
|
||||
vertical-align: middle;
|
||||
|
||||
&:hover {
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
}
|
||||
|
||||
.view-value {
|
||||
font-size: 18px;
|
||||
font-size: 1.125rem;
|
||||
color: var(--primary-color);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.text-muted {
|
||||
font-size: 14px;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -6,9 +6,9 @@ h2 {
|
|||
}
|
||||
|
||||
.main-container {
|
||||
margin-top: 10px;
|
||||
max-width: 1920px;
|
||||
padding: 0 20px;
|
||||
margin-top: 0.625rem;
|
||||
max-width: 120.0rem;
|
||||
padding: 0 1.25rem;
|
||||
}
|
||||
|
||||
::ng-deep .content-wrapper:not(.closed) {
|
||||
|
|
|
|||
|
|
@ -3,6 +3,6 @@
|
|||
}
|
||||
|
||||
.collapsed {
|
||||
height: 35px;
|
||||
height: 2.1875rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
@ -2,12 +2,12 @@
|
|||
position: absolute;
|
||||
top: 50%;
|
||||
left: 46%;
|
||||
font-size: 18px;
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.indicator {
|
||||
font-weight: 500;
|
||||
margin-left: 2px;
|
||||
margin-left: 0.125rem;
|
||||
z-index: 10;
|
||||
color: var(--primary-color);
|
||||
animation: MoveUpDown 1s linear infinite;
|
||||
|
|
|
|||
|
|
@ -1,21 +1,21 @@
|
|||
.icon-and-title {
|
||||
flex-direction: column;
|
||||
min-width: 60px;
|
||||
min-width: 3.75rem;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.text {
|
||||
padding-top: 5px;
|
||||
padding-top: 0.3125rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.label {
|
||||
padding-bottom: 5px;
|
||||
padding-bottom: 0.3125rem;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
|
@ -1,18 +1,18 @@
|
|||
.tagbadge {
|
||||
background-color: var(--tagbadge-bg-color);
|
||||
transition: all .3s ease-out;
|
||||
margin: 3px 10px 3px 0px;
|
||||
border-radius: 6px;
|
||||
margin: 0.1875rem 0.625rem 0.1875rem 0.0rem;
|
||||
border-radius: 0.375rem;
|
||||
font-size: .8rem;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
width: 96px;
|
||||
width: 6.0rem;
|
||||
word-break: break-word;
|
||||
|
||||
i {
|
||||
max-height: 48px;
|
||||
height: 48px;
|
||||
width: 48px;
|
||||
max-height: 3.0rem;
|
||||
height: 3.0rem;
|
||||
width: 3.0rem;
|
||||
font-size: 2.96rem;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
|
|
@ -20,9 +20,9 @@
|
|||
|
||||
.image-container {
|
||||
background: var(--card-bg-color);
|
||||
max-height: 96px;
|
||||
height: 96px;
|
||||
width: 96px;
|
||||
max-height: 6.0rem;
|
||||
height: 6.0rem;
|
||||
width: 6.0rem;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
.blur-text {
|
||||
color: transparent;
|
||||
text-shadow: 0 0 5px var(--body-text-color);
|
||||
text-shadow: 0 0 0.3125rem var(--body-text-color);
|
||||
}
|
||||
|
||||
.read-more-cont {
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue