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