Converted majority PX values to REM

Everything but dark.scss and values inside calc() have been converted from px to rem

UI/Web/src/_card-item-common.scss

@@ -1,27 +1,27 @@
-$image-height: 232.91px;
+$image-height: 14.556875rem;
-$image-width: 160px;
+$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;
+  top: 0.0rem;
-  right: 0px;
+  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;
+  width: 5.0rem;
-  height: 80px;
+  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;
+  top: 0.3125rem;
-  left: 5px;
+  left: 0.3125rem;
   visibility: hidden;
 
   &.always-show {
@@ -73,8 +73,8 @@ $image-width: 160px;
   }
 
   input[type="checkbox"] {
-    width: 20px;
+    width: 1.25rem;
-    height: 20px;
+    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-left-radius: 0.25rem;
-      border-top-right-radius: 4px;
+      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;
+    top: 0.3125rem;
-    right: 10px;
+    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;
+      height: 2.0rem;
-      width: 32px;
+      width: 2.0rem;
       i {
         font-size: 1.4rem;
-        line-height: 32px;
+        line-height: 2.0rem;
       }
     }
   }

UI/Web/src/_manga-reader-common.scss

@@ -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%),
+      0.0rem 0.0rem calc(17px*3.14) 1.5625rem rgb(0 0 0 / 43%),
-      0px 0px calc(2px*3.14) 2px rgb(0 0 0 / 43%),
+      0.0rem 0.0rem calc(2px*3.14) 0.125rem rgb(0 0 0 / 43%),
-      0px 0px calc(5px*3.14) 4px rgb(0 0 0 / 43%),
+      0.0rem 0.0rem calc(5px*3.14) 0.25rem rgb(0 0 0 / 43%),
-      0px 0px calc(0.5px*3.14) 0.3px 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%),
+      0.0rem 0.0rem calc(17px*3.14) 1.5625rem rgb(0 0 0 / 43%),
-      0px 0px calc(2px*3.14) 2px rgb(0 0 0 / 43%),
+      0.0rem 0.0rem calc(2px*3.14) 0.125rem rgb(0 0 0 / 43%),
-      0px 0px calc(5px*3.14) 4px rgb(0 0 0 / 43%),
+      0.0rem 0.0rem calc(5px*3.14) 0.25rem rgb(0 0 0 / 43%),
-      0px 0px calc(0.5px*3.14) 0.3px rgb(0 0 0 / 43%),
+      0.0rem 0.0rem calc(0.5px*3.14) 0.01875rem rgb(0 0 0 / 43%),
-      0px 0px 1px 0.5px rgb(0 0 0 / 43%);
+      0.0rem 0.0rem 0.0625rem 0.03125rem rgb(0 0 0 / 43%);
   }
 }

UI/Web/src/_series-detail-common.scss

@@ -8,8 +8,8 @@
 
 .image-container {
   align-self: flex-start;
-  max-height: 400px;
+  max-height: 25.0rem;
-  max-width: 280px;
+  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;
+  top: -25.25rem;
-  height: 364px;
+  height: 22.75rem;
 }
 
 .overlay-information {
   position: relative;
-  top: -364px;
+  top: -22.75rem;
-  height: 364px;
+  height: 22.75rem;
   transition: all 0.2s;
-  border-top-left-radius: 4px;
+  border-top-left-radius: 0.25rem;
-  border-top-right-radius: 4px;
+  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;
+      width: 3.75rem;
-      height: 60px;
+      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;

UI/Web/src/app/_single-module/card-actionables/card-actionables.component.scss

@@ -28,7 +28,7 @@
 }
 
 .btn {
-    padding: 5px;
+    padding: 0.3125rem;
 }
 
 // Robbie added this but it broke most of the uses

UI/Web/src/app/_single-module/cover-image/cover-image.component.scss

@@ -1,10 +1,10 @@
 .overlay-information {
     position: relative;
-    top: -364px;
+    top: -22.75rem;
-    height: 364px;
+    height: 22.75rem;
     transition: all 0.2s;
-    border-top-left-radius: 4px;
+    border-top-left-radius: 0.25rem;
-    border-top-right-radius: 4px;
+    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;
+            width: 3.75rem;
-            height: 60px;
+            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-left-radius: 0.25rem;
-    border-top-right-radius: 4px;
+    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;
+            height: 2.0rem;
-            width: 32px;
+            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-left-radius: 0.3125rem;
-        border-bottom-right-radius: 5px;
+        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 {

UI/Web/src/app/_single-module/edit-chapter-modal/edit-chapter-modal.component.html

@@ -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))

UI/Web/src/app/_single-module/edit-volume-modal/edit-volume-modal.component.html

@@ -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">

UI/Web/src/app/_single-module/match-series-result-item/match-series-result-item.component.scss

@@ -1,7 +1,7 @@
 .search-result {
     img {
-        max-width: 100px;
+        max-width: 6.25rem;
-        min-width: 100px;
+        min-width: 6.25rem;
     }
 }
 .title {
@@ -19,7 +19,7 @@
     &.light {
         background-color: var(--elevation-layer6);
     }
-    border-radius: 15px;
+    border-radius: 0.9375rem;
 
     &:hover {
         &.dark {

UI/Web/src/app/_single-module/publisher-flipper/publisher-flipper.component.scss

@@ -1,32 +1,32 @@
 //
 //.publisher-img-container {
 //  background-color: var(--card-bg-color);
-//  border-radius: 3px;
+//  border-radius: 0.1875rem;
-//  padding: 2px 5px;
+//  padding: 0.125rem 0.3125rem;
 //  font-size: 0.8rem;
 //  vertical-align: middle;
 //
 //  div {
-//    min-height: 32px;
+//    min-height: 2.0rem;
-//    line-height: 32px;
+//    line-height: 2.0rem;
 //  }
 //}
 
 // Animation code
 
 .publisher-wrapper {
-  perspective: 1000px;
+  perspective: 62.5rem;
-  height: 32px;
+  height: 2.0rem;
 
   background-color: var(--card-bg-color);
-  border-radius: 3px;
+  border-radius: 0.1875rem;
-  padding: 2px 5px;
+  padding: 0.125rem 0.3125rem;
   font-size: 0.8rem;
   vertical-align: middle;
 
   div {
-    min-height: 32px;
+    min-height: 2.0rem;
-    line-height: 32px;
+    line-height: 2.0rem;
   }
 }
 

UI/Web/src/app/_single-module/review-card-modal/review-card-modal.component.scss

@@ -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 {

UI/Web/src/app/_single-module/review-card/review-card.component.scss

@@ -1,20 +1,20 @@
 .review-card {
-  max-width: 320px;
+  max-width: 20.0rem;
-  max-height: 130px;
+  max-height: 8.125rem;
-  height: 130px;
+  height: 8.125rem;
-  width: 320px;
+  width: 20.0rem;
 }
 
 .profile-image {
     font-size: 1.2rem;
-    padding: 20px;
+    padding: 1.25rem;
 }
 
 .my-review {
     position: absolute;
     z-index: 20;
-    top: 38px;
+    top: 2.375rem;
-    left: 38px;
+    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;
+    min-height: 5.84375rem;
-    max-height: 93.5px;
+    max-height: 5.84375rem;
 }

UI/Web/src/app/_single-module/series-preview-drawer/series-preview-drawer.component.html

@@ -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>

UI/Web/src/app/_single-module/series-preview-drawer/series-preview-drawer.component.scss

@@ -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 {

UI/Web/src/app/_single-module/smart-collection-drawer/smart-collection-drawer.component.html

@@ -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>

UI/Web/src/app/_single-module/user-scrobble-history/user-scrobble-history.component.scss

@@ -7,6 +7,6 @@
 }
 
 .custom-position {
-  right: 15px;
+  right: 0.9375rem;
-  top: -42px;
+  top: -2.625rem;
 }

UI/Web/src/app/admin/_modals/directory-picker/directory-picker.component.html

@@ -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>

UI/Web/src/app/admin/_modals/directory-picker/directory-picker.component.scss

@@ -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 {

UI/Web/src/app/admin/invite-user/invite-user.component.scss

@@ -1,5 +1,5 @@
 .email-link {
     word-break: break-all;
-    margin-bottom: 15px;
+    margin-bottom: 0.9375rem;
     display: block;
 }

UI/Web/src/app/admin/license/license.component.scss

@@ -7,11 +7,11 @@
 }
 
 .custom-position {
-  right: 15px;
+  right: 0.9375rem;
-  top: -42px;
+  top: -2.625rem;
 }
 
 .custom-position-2 {
-  right: 160px;
+  right: 10.0rem;
-  top: -42px;
+  top: -2.625rem;
 }

UI/Web/src/app/admin/manage-email-settings/manage-email-settings.component.scss

@@ -1,4 +1,4 @@
 .custom-position {
-  right: 15px;
+  right: 0.9375rem;
-  top: -42px;
+  top: -2.625rem;
 }

UI/Web/src/app/admin/manage-library/manage-library.component.scss

@@ -1,18 +1,18 @@
 @use "../../../theme/variables" as theme;
 
 .custom-position {
-    right: 15px;
+    right: 0.9375rem;
-    top: -42px;
+    top: -2.625rem;
 }
 
 .custom-position-2 {
-  right: 160px;
+  right: 10.0rem;
-  top: -42px;
+  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;
         }
     }
 }

UI/Web/src/app/admin/manage-matched-metadata/manage-matched-metadata.component.scss

@@ -1,9 +1,9 @@
 .table {
-  min-height: 60px;
+  min-height: 3.75rem;
   width: 100%;
 
 }
 
 .tr {
-  height: 60px;
+  height: 3.75rem;
 }

UI/Web/src/app/admin/manage-media-issues/manage-media-issues.component.scss

@@ -15,7 +15,7 @@
             justify-content: center;
         }
         .btn {
-            width: 32px;
+            width: 2.0rem;
         }
     }
 }

UI/Web/src/app/admin/manage-settings/manage-settings.component.scss

@@ -2,6 +2,6 @@
     display: inherit;
 }
 .custom-position {
-  right: 5px;
+  right: 0.3125rem;
-  top: -42px;
+  top: -2.625rem;
 }

UI/Web/src/app/admin/manage-users/manage-users.component.scss

@@ -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;
+  right: 0.9375rem;
-  top: -42px;
+  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;
     }
   }
 }

UI/Web/src/app/all-filters/all-filters.component.scss

@@ -1,4 +1,4 @@
 .main-container {
-  margin-top: 10px;
+  margin-top: 0.625rem;
-  padding: 0 0 0 10px;
+  padding: 0 0 0 0.625rem;
 }

UI/Web/src/app/all-series/_components/all-series/all-series.component.scss

@@ -1,4 +1,4 @@
 .main-container {
-  margin-top: 10px;
+  margin-top: 0.625rem;
-  padding: 0 0 0 10px;
+  padding: 0 0 0 0.625rem;
 }

UI/Web/src/app/announcements/_components/announcements/announcements.component.scss

@@ -1,4 +1,4 @@
 .main-container {
-  margin-top: 10px;
+  margin-top: 0.625rem;
-  padding: 0 0 0 10px;
+  padding: 0 0 0 0.625rem;
 }

UI/Web/src/app/app.component.scss

@@ -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;

UI/Web/src/app/book-reader/_components/book-line-overlay/book-line-overlay.component.scss

@@ -1,8 +1,8 @@
 .overlay {
   background-color: var(--br-actionbar-bg-color);
   color: var(--bs-body-bg);
-  padding: 5px;
+  padding: 0.3125rem;
-  border-radius: 4px;
+  border-radius: 0.25rem;
   z-index: 9999;
   width: 100vw;
 }

UI/Web/src/app/book-reader/_components/book-reader/book-reader.component.html

@@ -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">

UI/Web/src/app/book-reader/_components/book-reader/book-reader.component.scss

@@ -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;
+    margin-top: 0.375rem;
-    padding-left: 2px;
+    padding-left: 0.125rem;
-    padding-right: 2px;
+    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-top: 0.0rem;
-        //padding-bottom: 0px;
+        //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;
+          padding: 0 0.625rem 0 0;
-          margin: 20px 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;
+            padding: 0 0.625rem 0 0;
-            margin: 20px 0;
+            margin: 1.25rem 0;
         }
     }
 
@@ -270,23 +270,23 @@ $action-bar-height: 38px;
 
 .pagination-cont {
     background: var(--br-actionbar-bg-color);
-    border-radius: 5px;
+    border-radius: 0.3125rem;
-    padding: 5px 15px;
+    padding: 0.3125rem 0.9375rem;
-    margin: 0 0 5px;
+    margin: 0 0 0.3125rem;
     border: var(--drawer-pagination-border);
 }
 
 .virt-pagination-cont {
-    padding-bottom: 5px;
+    padding-bottom: 0.3125rem;
-    margin-bottom: 5px;
+    margin-bottom: 0.3125rem;
     box-shadow: var(--drawer-pagination-horizontal-rule);
 }
 
 .bottom-bar {
     position: fixed;
     width: 100%;
-    bottom: 0px;
+    bottom: 0.0rem;
-    left: 0px;
+    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;
     }
 }
 

UI/Web/src/app/book-reader/_components/reader-settings/reader-settings.component.html

@@ -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>
 

UI/Web/src/app/book-reader/_components/reader-settings/reader-settings.component.scss

@@ -21,8 +21,8 @@
             width: auto;
 
             .dot {
-                height: 25px;
+                height: 1.5625rem;
-                width: 25px;
+                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 {

UI/Web/src/app/bookmark/_components/bookmarks/bookmarks.component.scss

@@ -1,4 +1,4 @@
 .main-container {
-  margin-top: 10px;
+  margin-top: 0.625rem;
-  padding: 0 0 0 10px;
+  padding: 0 0 0 0.625rem;
 }

UI/Web/src/app/browse-people/browse-authors.component.html

@@ -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: 0.75rem">{{item.seriesCount | compactNumber}} series</div>
-                <div style="font-size: 12px">{{item.issueCount | compactNumber}} issues</div>
+                <div style="font-size: 0.75rem">{{item.issueCount | compactNumber}} issues</div>
             </div>
           </ng-template>
         </app-person-card>

UI/Web/src/app/browse-people/browse-authors.component.scss

@@ -1,4 +1,4 @@
 .main-container {
-  margin-top: 10px;
+  margin-top: 0.625rem;
-  padding: 0 0 0 10px;
+  padding: 0 0 0 0.625rem;
 }

UI/Web/src/app/cards/_modals/bulk-add-to-collection/bulk-add-to-collection.component.scss

@@ -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;
         }
     }
 }

UI/Web/src/app/cards/_modals/edit-collection-tags/edit-collection-tags.component.html

@@ -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>

UI/Web/src/app/cards/_modals/edit-series-modal/edit-series-modal.component.html

@@ -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>

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

@@ -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 {

UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.html

@@ -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>

UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.scss

@@ -2,8 +2,8 @@
     display: flex;
     flex-direction: row;
     width: 100%;
-    height: calc((var(--vh) *100) - 157px);
+    height: calc((var(--vh) *100) - 9.8125rem);
-    margin-bottom: 10px;
+    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) {
+    @media (max-width: 36.0rem) {
-        padding: 0 5px 0 5px;
+        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;
+  width: 1.5625rem;
-  height: 25px;
+  height: 1.5625rem;
   position: relative;
   overflow: hidden;
 }
@@ -163,8 +163,8 @@ h2 {
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 18px;
+  font-size: 1.125rem;
-  border-radius: 4px;
+  border-radius: 0.25rem;
   transform-style: preserve-3d;
 }
 

UI/Web/src/app/cards/chapter-card/chapter-card.component.html

@@ -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>

UI/Web/src/app/cards/cover-image-chooser/cover-image-chooser.component.html

@@ -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}">

UI/Web/src/app/cards/cover-image-chooser/cover-image-chooser.component.scss

@@ -1,5 +1,5 @@
-$image-height: 232.91px;
+$image-height: 14.556875rem;
-$image-width: 160px;
+$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: 0.125rem solid var(--primary-color);
-    border-radius: 5px;
+    border-radius: 0.3125rem;
-    height: 100px;
+    height: 6.25rem;
     margin: auto;
 
     > div {

UI/Web/src/app/cards/download-indicator/download-indicator.component.scss

@@ -1,4 +1,4 @@
 .download {
-    width: 80px;
+    width: 5.0rem;
-    height: 80px;
+    height: 5.0rem;
 }

UI/Web/src/app/cards/external-series-card/external-series-card.component.scss

@@ -9,6 +9,6 @@ a {
 }
 
 .card-title {
-    padding: 5px 0;
+    padding: 0.3125rem 0;
     max-width: unset;
 }

UI/Web/src/app/cards/next-expected-card/next-expected-card.component.scss

@@ -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 {

UI/Web/src/app/cards/person-card/person-card.component.scss

@@ -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;
 

UI/Web/src/app/cards/series-card/series-card.component.html

@@ -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>

UI/Web/src/app/cards/volume-card/volume-card.component.html

@@ -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>

UI/Web/src/app/carousel/_components/carousel-reel/carousel-reel.component.scss

@@ -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 {

UI/Web/src/app/chapter-detail/chapter-detail.component.html

@@ -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>

UI/Web/src/app/collections/_components/all-collections/all-collections.component.scss

@@ -1,3 +1,3 @@
 .main-container {
-  margin-top: 10px;
+  margin-top: 0.625rem;
 }

UI/Web/src/app/collections/_components/collection-detail/collection-detail.component.scss

@@ -1,12 +1,12 @@
 .main-container {
-  margin-top: 10px;
+  margin-top: 0.625rem;
-  padding: 0 0 0 10px;
+  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-left-radius: 0.3125rem;
-  border-bottom-right-radius: 5px;
+  border-bottom-right-radius: 0.3125rem;
   text-align: center;
 }

UI/Web/src/app/dashboard/_components/dashboard.component.scss

@@ -1,4 +1,4 @@
 .main-container {
-    margin-top: 10px;
+    margin-top: 0.625rem;
-    padding: 0 0 0 10px;
+    padding: 0 0 0 0.625rem;
 }

UI/Web/src/app/library-detail/library-detail.component.scss

@@ -4,12 +4,12 @@
 }
 
 .viewport {
-    width: 600px;
+    width: 37.5rem;
     height: 100%;
     overflow-y: auto;
 }
 
 
 .main-container {
-    margin-top: 10px;
+    margin-top: 0.625rem;
 }

UI/Web/src/app/manga-reader/_components/infinite-scroller/infinite-scroller.component.scss

@@ -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);
     }
 }
 

UI/Web/src/app/manga-reader/_components/manga-reader/manga-reader.component.html

@@ -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>

UI/Web/src/app/manga-reader/_components/manga-reader/manga-reader.component.scss

@@ -1,8 +1,8 @@
 $center-width: 50%;
 $side-width: 25%;
 
-$dash-width: 3px;
+$dash-width: 0.1875rem;
-$pointer-offset: 5px;
+$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;
+    height: 1.25rem;
-    width: 40px;
+    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;
+        height: 1.25rem;
-        width: 20px;
+        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;
+        height: 1.25rem;
-        margin-left: 20px;
+        margin-left: 1.25rem;
-        width: 20px;
+        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;
+      width: 0.5rem;
-      height: 16px;
+      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-left-radius: 0.1875rem;
-      border-top-right-radius: 3px;
+      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;
+      width: 0.0625rem;
-      height: 10px;
+      height: 0.625rem;
-      margin-left: 4px;
+      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;
+      right: 0.0rem;
-      top: 0px;
+      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;
+        right: 0.0rem;
-        top: 0px;
+        top: 0.0rem;
         width: 100%;
         background: $pagination-bg;
         z-index: 100;
@@ -212,8 +212,8 @@ $pointer-offset: 5px;
 
     .left {
         position: absolute;
-        left: 0px;
+        left: 0.0rem;
-        top: 0px;
+        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;
+        left: 0.0rem;
-        bottom: 0px;
+        bottom: 0.0rem;
         width: 100%;
         background: $pagination-bg;
         z-index: 100;

UI/Web/src/app/metadata-filter/_components/metadata-filter-row/metadata-filter-row.component.scss

@@ -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;
 }

UI/Web/src/app/metadata-filter/metadata-filter.component.html

@@ -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>
                 }

UI/Web/src/app/nav/_components/events-widget/events-widget.component.html

@@ -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>

UI/Web/src/app/nav/_components/events-widget/events-widget.component.scss

@@ -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;
+        min-width: 18.75rem;
-        max-width: 300px;
+        max-width: 18.75rem;
-        padding: 0px;
+        padding: 0.0rem;
-        box-shadow: 0px 0px 12px rgb(0 0 0 / 75%);
+        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;
+      top: 0.3125rem;
-      right: 10px;
+      right: 0.625rem;
-      font-size: 11px;
+      font-size: 0.6875rem;
       position: absolute;
     }
   }
@@ -118,9 +118,9 @@
     }
 
     .btn-close {
-      top: 35px;
+      top: 2.1875rem;
-      right: 10px;
+      right: 0.625rem;
-      font-size: 11px;
+      font-size: 0.6875rem;
       position: absolute;
     }
   }

UI/Web/src/app/nav/_components/grouped-typeahead/grouped-typeahead.component.html

@@ -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">

UI/Web/src/app/nav/_components/grouped-typeahead/grouped-typeahead.component.scss

@@ -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: 0.0625rem solid transparent;
-  border-radius: 4px;
+  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%;

UI/Web/src/app/nav/_components/nav-header/nav-header.component.html

@@ -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 class="clickable" style="display: flex;padding: 0.3125rem;" (click)="clickSeriesSearchResult(item)">
-                      <div style="width: 24px" class="me-1">
+                      <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 class="clickable" style="display: flex;padding: 0.3125rem;" (click)="clickBookmarkSearchResult(item)">
-                      <div style="width: 24px" class="me-1">
+                      <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 class="clickable" style="display: flex;padding: 0.3125rem;" (click)="clickCollectionSearchResult(item)">
-                      <div style="width: 24px" class="me-1">
+                      <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="display: flex;padding: 0.3125rem;" class="clickable" (click)="goToPerson(item)">
-                  <div style="width: 24px" class="me-1">
+                  <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>

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

@@ -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;
   }

UI/Web/src/app/pdf-reader/_components/pdf-reader/pdf-reader.component.html

@@ -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>
                 }
               }
 

UI/Web/src/app/pdf-reader/_components/pdf-reader/pdf-reader.component.scss

@@ -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;
+$action-bar-height: 2.25rem;
-$loading-bar-height: 24px;
+$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;
   }
 }
 

UI/Web/src/app/person-detail/_modal/edit-person-modal/edit-person-modal.component.html

@@ -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>

UI/Web/src/app/person-detail/person-detail.component.scss

@@ -1,18 +1,18 @@
 .main-container {
-  margin-top: 10px;
+  margin-top: 0.625rem;
-  padding: 0 0 0 10px;
+  padding: 0 0 0 0.625rem;
 
   .person-badge {
     background: var(--card-bg-color);
-    max-height: 200px;
+    max-height: 12.5rem;
-    height: 200px;
+    height: 12.5rem;
-    width: 200px;
+    width: 12.5rem;
     border-radius: 50%;
     overflow: hidden;
 
     i {
-      max-height: 128px;
+      max-height: 8.0rem;
-      height: 128px;
+      height: 8.0rem;
       font-size: 8rem;
     }
   }

UI/Web/src/app/reading-list/_components/draggable-ordered-list/draggable-ordered-list.component.scss

@@ -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;
+  border-radius: 0.25rem;
-  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
+  box-shadow: 0 0.3125rem 0.3125rem -0.1875rem rgba(0, 0, 0, 0.2),
-              0 8px 10px 1px rgba(0, 0, 0, 0.14),
+              0 0.5rem 0.625rem 0.0625rem rgba(0, 0, 0, 0.14),
-              0 3px 14px 2px rgba(0, 0, 0, 0.12);
+              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;
+  border: dotted 0.1875rem #999;
-  min-height: 60px;
+  min-height: 3.75rem;
   transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
 }
 
 .list-container {
   background: var(--card-bg-color);
-  padding: 10px;
+  padding: 0.625rem;
-  border-radius: 5px;
+  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;
 }

UI/Web/src/app/reading-list/_components/import-cbl/import-cbl.component.html

@@ -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')}}

UI/Web/src/app/reading-list/_components/import-cbl/import-cbl.component.scss

@@ -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 {

UI/Web/src/app/reading-list/_components/reading-list-detail/reading-list-detail.component.html

@@ -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>

UI/Web/src/app/reading-list/_components/reading-list-detail/reading-list-detail.component.scss

@@ -2,8 +2,8 @@
 
 
 .main-container {
-  margin-top: 10px;
+  margin-top: 0.625rem;
-  padding: 0 0 0 10px;
+  padding: 0 0 0 0.625rem;
 }
 
 
@@ -17,10 +17,10 @@
 }
 
 .dropdown-toggle-split {
-    border-top-right-radius: 6px !important;
+    border-top-right-radius: 0.375rem !important;
-    border-bottom-right-radius: 6px !important;
+    border-bottom-right-radius: 0.375rem !important;
-    border-top-left-radius: 0px !important;
+    border-top-left-radius: 0.0rem !important;
-    border-bottom-left-radius: 0px !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);
+    height: calc((var(--vh) *100) - 10.8125rem);
-    margin-bottom: 10px;
+    margin-bottom: 0.625rem;
 
     &.empty {
         height: auto;

UI/Web/src/app/reading-list/_components/reading-list-item/reading-list-item.component.html

@@ -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>
       }

UI/Web/src/app/reading-list/_components/reading-list-item/reading-list-item.component.scss

@@ -1,13 +1,13 @@
-$image-height: 125px;
+$image-height: 7.8125rem;
 $clamp-lines: 3;
 
 .reading-list-item {
-  max-height: 140px;
+  max-height: 8.75rem;
-  height: 140px;
+  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;
+    top: -7.8125rem;
-    left: 78px;
+    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;
         }
     }

UI/Web/src/app/reading-list/_components/reading-lists/reading-lists.component.scss

@@ -1,4 +1,4 @@
 .main-container {
-  margin-top: 10px;
+  margin-top: 0.625rem;
-  padding: 0 0 0 10px;
+  padding: 0 0 0 0.625rem;
 }

UI/Web/src/app/reading-list/_components/step-tracker/step-tracker.component.scss

@@ -2,13 +2,13 @@
 .bs4-order-tracking {
     overflow: hidden;
     color: #878788;
-    padding-left: 0px;
+    padding-left: 0.0rem;
-    margin-top: 30px
+    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;
+    margin-left: 0.9375rem !important;
-    padding-left: 11px !important;
+    padding-left: 0.6875rem !important;
     text-align: left !important
   }
   
   .bs4-order-tracking li:last-child:before {
-    margin-right: 5px !important;
+    margin-right: 0.3125rem !important;
-    padding-right: 11px !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
   }
   

UI/Web/src/app/reading-list/_modals/add-to-list-modal/add-to-list-modal.component.scss

@@ -4,6 +4,6 @@
 }
 
 .scrollable-modal {
-    max-height: calc(var(--vh) * 100 - 198px);
+    max-height: calc(var(--vh) * 100 - 12.375rem);
     overflow: auto;
 }

UI/Web/src/app/reading-list/_modals/edit-reading-list-modal/edit-reading-list-modal.component.html

@@ -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>

UI/Web/src/app/registration/_components/confirm-email-change/confirm-email-change.component.scss

@@ -1,5 +1,5 @@
 .card-body {
-    padding: 0px 0px;
+    padding: 0.0rem 0.0rem;
 }
 
 .card {

UI/Web/src/app/registration/_components/splash-container/splash-container.component.scss

@@ -7,8 +7,8 @@
     align-items: center;
     justify-content: center;
     flex-direction: column;
-    height: calc(var(--vh, 1vh) * 100 - 57px);
+    height: calc(var(--vh, 1vh) * 100 - 3.5625rem);
-    min-height: 289px;
+    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;
 
         }
 

UI/Web/src/app/series-detail/_components/external-rating/external-rating.component.html

@@ -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)"

UI/Web/src/app/series-detail/_components/external-rating/external-rating.component.scss

@@ -1,6 +1,6 @@
 .custom-col {
-    padding-left: 0px;
+    padding-left: 0.0rem;
-    padding-right: 0px;
+    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;
   }
 }
 

UI/Web/src/app/series-detail/_components/metadata-detail-row/metadata-detail-row.component.html

@@ -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>-->

UI/Web/src/app/series-detail/_components/metadata-detail-row/metadata-detail-row.component.scss

@@ -1,13 +1,13 @@
 .publisher-img-container {
     background-color: var(--card-bg-color);
-    border-radius: 3px;
+    border-radius: 0.1875rem;
-    padding: 2px 5px;
+    padding: 0.125rem 0.3125rem;
     font-size: 0.8rem;
     vertical-align: middle;
 
     div {
-        min-height: 32px;
+        min-height: 2.0rem;
-        line-height: 32px;
+        line-height: 2.0rem;
     }
 }
 

UI/Web/src/app/series-detail/_components/series-detail/series-detail.component.html

@@ -340,7 +340,7 @@
 
         </ul>
       </div>
-      <div [ngbNavOutlet]="nav" style="min-height: 300px"></div>
+      <div [ngbNavOutlet]="nav" style="min-height: 18.75rem"></div>
     </div>
 
 

UI/Web/src/app/series-detail/_components/series-detail/series-detail.component.scss

@@ -2,24 +2,24 @@
 
 .to-read-counter {
   position: absolute;
-  top: 15px;
+  top: 0.9375rem;
-  left: 20px;
+  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 {

UI/Web/src/app/settings/_components/setting-item/setting-item.component.scss

@@ -7,7 +7,7 @@
 }
 
 .view-value {
-  font-size: 18px;
+  font-size: 1.125rem;
   color: var(--primary-color);
   cursor: pointer;
 }

UI/Web/src/app/settings/_components/setting-switch/setting-switch.component.scss

@@ -1,5 +1,5 @@
 .text-muted {
-  font-size: 14px;
+  font-size: 0.875rem;
 }
 
 

UI/Web/src/app/settings/_components/settings/settings.component.scss

@@ -6,9 +6,9 @@ h2 {
 }
 
 .main-container {
-  margin-top: 10px;
+  margin-top: 0.625rem;
-  max-width: 1920px;
+  max-width: 120.0rem;
-  padding: 0 20px;
+  padding: 0 1.25rem;
 }
 
 ::ng-deep .content-wrapper:not(.closed) {

UI/Web/src/app/shared/badge-expander/badge-expander.component.scss

@@ -3,6 +3,6 @@
 }
 
 .collapsed {
-    height: 35px;
+    height: 2.1875rem;
     overflow: hidden;
 }

UI/Web/src/app/shared/circular-loader/circular-loader.component.scss

@@ -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;

UI/Web/src/app/shared/icon-and-title/icon-and-title.component.scss

@@ -1,21 +1,21 @@
 .icon-and-title {
     flex-direction: column;
-    min-width: 60px;
+    min-width: 3.75rem;
 }
 
 .icon {
-    width: 20px;
+    width: 1.25rem;
-    height: 20px;
+    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;
 }

UI/Web/src/app/shared/person-badge/person-badge.component.scss

@@ -1,18 +1,18 @@
 .tagbadge {
     background-color: var(--tagbadge-bg-color);
     transition: all .3s ease-out;
-    margin: 3px 10px 3px 0px;
+    margin: 0.1875rem 0.625rem 0.1875rem 0.0rem;
-    border-radius: 6px;
+    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;
+        max-height: 3.0rem;
-        height: 48px;
+        height: 3.0rem;
-        width: 48px;
+        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;
+        max-height: 6.0rem;
-        height: 96px;
+        height: 6.0rem;
-        width: 96px;
+        width: 6.0rem;
         border-radius: 50%;
         overflow: hidden;
     }

UI/Web/src/app/shared/read-more/read-more.component.scss

@@ -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 {