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;

JSMR.UI.Blazor/wwwroot/css/bit-blazor.css

@@ -0,0 +1,41 @@
+.bit-tfl-inp,
+.bit-drp-wrp,
+.bit-dtp-wrp {
+    border: 1px solid var(--input-border-color);
+    background-color: var(--input-background-color);
+    transition: background-color .2s,color .2s,border-color .2s,box-shadow .2s;
+    padding: .25rem .5rem;
+}
+
+.bit-tfl-fgp {
+    border: 1px solid var(--input-border-color);
+}
+
+.bit-tfl-inp:hover,
+.bit-drp-wrp:hover {
+    border: 1px solid var(--input-hover-border-color);
+    background-color: var(--input-background-color);
+}
+
+.bit-tfl-inp:focus,
+.bit-drp-wrp:focus {
+    background-color: var(--input-background-color);
+    border: 1px solid var(--input-focus-border-color);
+    box-shadow: var(--input-focus-box-shadow);
+}
+
+/* DropDownList */
+.bit-drp-cal {
+    background-color: var(--input-background-color);
+}
+
+.bit-drp-itm:hover {
+    color: #ffffffde;
+    background: rgba(255,255,255,.03);
+}
+
+.bit-drp-sel,
+.bit-drp-sel:hover {
+    color: #ffffffde;
+    background: rgba(100,181,246,.16);
+}

JSMR.UI.Blazor/wwwroot/css/radzen.css

@@ -0,0 +1,48 @@
+.rz-timespanpicker > .rz-inputtext.j-input,
+.rz-colorpicker.j-input,
+.rz-lookup-search input.j-input,
+.rz-numeric.j-input,
+.rz-datepicker > .rz-inputtext.j-input,
+.rz-multiselect, .rz-dropdown.j-input,
+.mask.j-input,
+.rz-textarea.j-input,
+.rz-textbox.j-input {
+    border: 1px solid var(--input-border-color);
+    background-color: var(--input-background-color);
+    transition: background-color .2s,color .2s,border-color .2s,box-shadow .2s;
+    padding: .25rem .5rem;
+}
+
+.j-input.rz-form-field:hover .rz-form-field-content,
+.j-input.rz-autocomplete:hover:not(.rz-state-disabled),
+.j-input.rz-timespanpicker > .rz-inputtext:not(:disabled):not(.rz-state-disabled):hover,
+.j-input.rz-colorpicker:not(:disabled):not(.rz-state-disabled):hover,
+.j-input.rz-lookup-search input:not(:disabled):not(.rz-state-disabled):hover,
+.j-input.rz-numeric:not(:disabled):not(.rz-state-disabled):hover,
+.j-input.rz-datepicker > .rz-inputtext:not(:disabled):not(.rz-state-disabled):hover,
+.j-input.rz-multiselect:not(:disabled):not(.rz-state-disabled):hover,
+.j-input.rz-dropdown:not(:disabled):not(.rz-state-disabled):hover,
+.j-input.mask:not(:disabled):not(.rz-state-disabled):hover,
+.j-input.rz-textarea:not(:disabled):not(.rz-state-disabled):hover,
+.j-input.rz-textbox:not(:disabled):not(.rz-state-disabled):hover {
+    border: 1px solid var(--input-hover-border-color);
+    background-color: var(--input-background-color);
+}
+
+.j-input.rz-form-field.rz-state-focused .rz-form-field-content,
+.j-input.rz-numeric:focus-within:not(.rz-state-disabled),
+.j-input.rz-autocomplete:focus-within:not(.rz-state-disabled),
+.j-input.rz-timespanpicker > .rz-inputtext:not(:disabled):not(.rz-state-disabled):focus,
+.j-input.rz-colorpicker:not(:disabled):not(.rz-state-disabled):focus,
+.j-input.rz-lookup-search input:not(:disabled):not(.rz-state-disabled):focus,
+.j-input.rz-numeric:not(:disabled):not(.rz-state-disabled):focus,
+.j-input.rz-datepicker > .rz-inputtext:not(:disabled):not(.rz-state-disabled):focus,
+.j-input.rz-multiselect:not(:disabled):not(.rz-state-disabled):focus,
+.j-input.rz-dropdown:not(:disabled):not(.rz-state-disabled):focus,
+.j-input.mask:not(:disabled):not(.rz-state-disabled):focus,
+.j-input.rz-textarea:not(:disabled):not(.rz-state-disabled):focus,
+.j-input.rz-textbox:not(:disabled):not(.rz-state-disabled):focus {
+    background-color: var(--input-background-color);
+    border: 1px solid var(--input-focus-border-color);
+    box-shadow: var(--input-focus-box-shadow);
+}

JSMR.UI.Blazor/wwwroot/css/theme-base.css

@@ -5,5 +5,5 @@ body {
 }
 
 label {
-    font-weight: 600;
+    font-weight: 500;
 }

JSMR.UI.Blazor/wwwroot/css/theme-frozen.css

@@ -34,6 +34,11 @@
     --card-border-left-color: #212630;
     --card-border-right-color: #212531;
     --card-border-bottom-color: #212530;
+    --input-border-color: #304562;
+    --input-hover-border-color: #64b5f6;
+    --input-background-color: rgb(0,20,34);
+    --input-focus-border-color: #64b5f6;
+    --input-focus-box-shadow: 0 0 0 1px #93cbf9;
 }
 
 /*