Updated CI for Blazor WebAssembly. Added styles for product cards.

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

@@ -17,7 +17,7 @@ a, .btn-link {
 }
 
 .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
-  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
+    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
 }
 
 .content {
@@ -304,4 +304,100 @@ code {
 
 .star_rating.mini.star_45::before {
     background-position: 0 -16px;
+}
+
+/* Card */
+.j-card {
+    padding-top: var(--card-padding-top);
+    padding-bottom: var(--card-padding-bottom);
+    padding-left: var(--card-padding-left);
+    padding-right: var(--card-padding-right);
+    border-width: var(--card-border-width);
+    border-top-color: var(--card-border-top-color);
+    border-left-color: var(--card-border-left-color);
+    border-right-color: var(--card-border-right-color);
+    border-bottom-color: var(--card-border-bottom-color);
+    border-radius: var(--card-border-radius);
+    background-image: var(--card-background-image);
+}
+
+/* Image */
+.j-image-container {
+
+}
+
+.j-image {
+    width: 100%;
+}
+
+/* Product */
+
+.j-product-items-container {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+}
+
+.j-voice-work-card {
+    display: flex;
+    gap: 1rem;
+    background-image: linear-gradient(0deg, rgb(30, 53, 69), rgb(39, 59, 73));
+    border-color: rgb(63, 78, 88);
+    background-image: linear-gradient(0deg, rgb(30, 53, 69), rgb(57, 79, 94));
+}
+
+.j-voice-work-image-container {
+    width: 240px;
+    width: 300px;
+}
+
+.j-voice-work-card > .j-voice-work-image-container {
+    flex-shrink: 0;
+}
+
+.j-voice-work-image {
+    border-radius: 20px;
+}
+
+.j-voice-work-content {
+    display: flex;
+    flex-direction: column;
+    gap: .5rem;
+}
+
+.j-voice-work-card > .j-voice-work-content {
+    flex-grow: 1;
+}
+
+.j-product-title {
+    font-size: 1.25rem;
+    font-weight: 600;
+    font-family: "Poppins", "M+ 1p";
+    color: #d2dce6;
+    text-shadow: 1px 1px 2px black;
+}
+
+.j-product-description {
+    /* color: #7C8099; */
+    font-size: 1rem;
+    font-family: "Poppins", "M+ 1p";
+}
+
+.j-voice-work-card > .j-voice-work-content > .j-product-description {
+    flex-grow: 1;
+}
+
+.j-voice-work-info {
+    width: 240px;
+}
+
+.j-voice-work-card > .j-voice-work-info {
+    flex-shrink: 0;
+}
+
+/* Tags */
+.j-tags {
+    display: flex;
+    gap: 1rem;
+    flex-wrap: wrap;
 }