Updated UI with BitBlazor components.

JSMR.UI.Blazor/wwwroot/css/app.css

@@ -150,6 +150,11 @@ code {
         grid-column: span 4;
     }
 
+.search-filter-control {
+    display: flex;
+    align-items: center;
+}
+
 .items-container {
     display: grid;
     grid-column-gap: 1.2em;
@@ -335,6 +340,16 @@ code {
     background-image: var(--card-background-image);
 }
 
+/* Input */
+.j-input {
+    background: rgb(0,20,34);
+    border: 1px solid #304562;
+}
+
+.j-textbox {
+
+}
+
 /* Image */
 .j-image-container {
 
@@ -357,6 +372,7 @@ code {
 }
 
 .j-voice-work-card {
+    position: relative;
     display: flex;
     gap: 1rem;
     background-image: linear-gradient(0deg, rgb(30, 53, 69), rgb(39, 59, 73));
@@ -367,6 +383,36 @@ code {
     border-right-color: rgb(72, 88, 99);
 }
 
+.j-voice-work-card[class*="type-sale"]::before {
+    background-image: url(../images/web/common/icon_sale_status_01.png);
+    width: 72px;
+    height: 72px;
+    position: absolute;
+    display: block;
+    top: 0;
+    left: 0;
+    z-index: 2;
+    content: "";
+    background-position: 0 -432px;
+    background-size: cover;
+    pointer-events: none;
+}
+
+.j-voice-work-card[class*="type-new"]::before {
+    background-image: url(../images/web/common/icon_sale_status_01.png);
+    width: 72px;
+    height: 72px;
+    position: absolute;
+    display: block;
+    top: 0;
+    left: 0;
+    z-index: 2;
+    content: "";
+    background-position: 0 -504px;
+    background-size: cover;
+    pointer-events: none;
+}
+
 .j-voice-work-image-container {
     width: 240px;
     width: 300px;
@@ -482,6 +528,29 @@ code {
     height: 16px;
 }
 
+.j-product-indicators {
+    display: flex;
+    gap: .5rem;
+}
+
+.j-product-indicator {
+    border-width: 1px;
+    border-style: solid;
+    border-image: none;
+    padding: 0.5rem;
+    border-radius: 100%;
+    border-color: var(--product-title-text-color);
+}
+
+.j-product-indicator-favorite {
+    border-color: #f04885;
+    background: #f048852b;
+}
+
+.j-product-indicator-favorite > .j-icon {
+    background-color: #f04885;
+}
+
 /* Tags */
 .j-tags {
     display: flex;
@@ -542,6 +611,22 @@ code {
     mask-image: url("../svg/headphones.svg");
 }
 
+.j-icon-heart {
+    mask-image: url("../svg/heart.svg");
+}
+
+.j-icon-heart-fill {
+    mask-image: url("../svg/heart-fill.svg");
+}
+
+.j-icon-warning {
+    mask-image: url("../svg/warning.svg");
+}
+
+.j-icon-warning-fill {
+    mask-image: url("../svg/warning-fill.svg");
+}
+
 .j-icon-2 {
     background-repeat: no-repeat;
     background-position: center;