Updated UI. Fixed circle search performance.

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

@@ -1,5 +1,5 @@
 html, body {
-    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    /*font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;*/
 }
 
 h1:focus {
@@ -111,4 +111,197 @@ code {
 
 .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
     text-align: start;
+}
+
+/* Custom */
+
+/* Search Filters */
+.search-filter-control-container {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    grid-column-gap: 16px;
+    grid-row-gap: 12px;
+    background-color: #0f2031;
+    padding: 12px;
+    border: 1px solid #304562;
+    margin-bottom: 24px
+}
+
+    .search-filter-control-container > .search-filter-control {
+        display: flex;
+        align-items: center;
+    }
+
+    .search-filter-control-container > .search-filter-control-span-2 {
+        display: flex;
+        align-items: center;
+        grid-column: span 2;
+    }
+
+    .search-filter-control-container > .search-filter-control-span-3 {
+        display: flex;
+        align-items: center;
+        grid-column: span 3;
+    }
+
+    .search-filter-control-container > .search-filter-control-span-4 {
+        display: flex;
+        align-items: center;
+        grid-column: span 4;
+    }
+
+.items-container {
+    display: grid;
+    grid-column-gap: 1.2em;
+    grid-row-gap: 1.2em;
+}
+
+.circle-items-container {
+    grid-template-columns: repeat(auto-fill,minmax(300px,1fr));
+}
+
+.j-image-container {
+    position: relative;
+}
+
+.j-image-overlay {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+    background-color: #000;
+    opacity: 0.1;
+}
+
+.j-image.j-lazy-load {
+    opacity: 0;
+}
+
+.j-image[loading="lazy"] {
+    transition: .5s linear;
+}
+
+/* Pagination */
+
+.pagination {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    margin-top: 20px;
+    margin-bottom: 20px;
+    border-radius: 0px;
+    bottom: 0;
+    background: var(--background-color);
+    padding: .5rem 0;
+    margin: 0;
+    position: sticky;
+    display: grid;
+    grid-template-columns: 1fr 2fr 1fr;
+    z-index: 1;
+}
+
+/* Circle */
+.j-circle-image-container {
+    height: 300px;
+}
+
+.j-circle-image-container-mini {
+    height: 100px;
+}
+
+.j-circle-image {
+    display: block;
+    min-width: 200px;
+    width: 226px;
+    height: 170px;
+    object-fit: cover;
+    background-color: black;
+    border: 1px solid #949494;
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+}
+
+.j-circle-image-mini {
+    display: block;
+    object-fit: cover;
+    background-color: black;
+    border: 1px solid #949494;
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+}
+
+/* Cirlce Stars */
+.circle-star-container {
+    mask-image: url("../svg/star-fill.svg");
+    mask-size: auto;
+    align-self: center;
+    mask-repeat: repeat-x;
+    background: rgb(180,200, 214);
+    height: 16px;
+    width: 80px;
+}
+
+.circle-star {
+    mask-image: url("../svg/star-fill.svg");
+    mask-size: auto;
+    align-self: center;
+    mask-repeat: repeat-x;
+    height: 16px;
+    background: linear-gradient(rgb(252,224,43), rgb(249,179,2));
+}
+
+.circle-star-poor {
+    width: 16px;
+    width: 8px;
+    background-color: darkred;
+}
+
+.circle-star-below-average {
+    width: 16px;
+    background-color: orange;
+}
+
+.circle-star-average {
+    width: 32px;
+}
+
+.circle-star-above-average {
+    width: 48px;
+}
+
+.circle-star-popular {
+    width: 64px;
+}
+
+.circle-star-super-popular {
+    width: 80px;
+}
+
+.circle-star-ultra-popular {
+    width: 80px;
+    background: linear-gradient(to bottom,#4dbdd4 0,#3398ac 100%);
+}
+
+.circle-star-god-tier {
+    width: 80px;
+    background: linear-gradient(to bottom,#8963d3 0,#6640b3 100%);
+}
+
+.star_rating.mini::before {
+    height: 16px;
+    width: 80px;
+}
+
+.star_rating.mini::before {
+    background: url(assets/images/web/common/icon_star_rating_02.png) no-repeat 0 0;
+    background-position-x: 0px;
+    background-position-y: 0px;
+    background-size: auto;
+    background-size: auto 32px;
+}
+
+.star_rating.mini.star_45::before {
+    background-position: 0 -16px;
 }