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

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

@@ -1,7 +1,7 @@
 :root {
     --font-family: 'Poppins';
-    --background-color: #131419;
-    --background-color-original: rgb(16, 36, 50);
+    --background-color-backup: #131419;
+    --background-color: rgb(16, 36, 50);
     --input-background-color: rgb(0,20,34);
     --input-border-color: #304562;
     --primary-text-color: rgb(180,200, 214);
@@ -22,4 +22,26 @@
     --product-footer-text-color: rgb(220,230,234);
     --expected-date-text-color: #ffe073;
     --planned-date-text-color: #73bdff;
+    --card-padding-top: .5rem;
+    --card-padding-bottom: .5rem;
+    --card-padding-left: .5rem;
+    --card-padding-right: .5rem;
+    --card-background-image: linear-gradient(0deg, #1C2029, #1C1F28);
+    --card-border-radius: 30px;
+    --card-border-width: 2px;
+    --card-border-top-color: #353B4C;
+    --card-border-left-color: #212630;
+    --card-border-right-color: #212531;
+    --card-border-bottom-color: #212530;
 }
+
+/*
+    padding: .5rem;
+        border-width: 2px;
+        border-top-color: #353B4C;
+        border-left-color: #212630;
+        border-right-color: #212531;
+        border-bottom-color: #212530;
+        border-radius: 30px;
+        background-image: linear-gradient(0deg, #1C2029, #1C1F28);
+*/