Updated UI. Fixed circle search performance.
This commit is contained in:
@@ -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;
|
||||
}
|
||||
22
JSMR.UI.Blazor/wwwroot/css/jsmr-mud-blazor.css
Normal file
22
JSMR.UI.Blazor/wwwroot/css/jsmr-mud-blazor.css
Normal file
@@ -0,0 +1,22 @@
|
||||
.mud-input {
|
||||
background-color: var(--input-background-color);
|
||||
font-family: var(--font-family);
|
||||
}
|
||||
|
||||
.mud-input-control {
|
||||
border-color: var(--input-border-color);
|
||||
}
|
||||
|
||||
.mud-input > input.mud-input-root,
|
||||
div.mud-input-slot.mud-input-root {
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
.mud-input > input.mud-input-root-outlined.mud-input-root-margin-dense,
|
||||
div.mud-input-slot.mud-input-root-outlined.mud-input-root-margin-dense {
|
||||
padding: .25rem .5rem;
|
||||
}
|
||||
|
||||
.mud-typography {
|
||||
font-family: var(--font-family);
|
||||
}
|
||||
9
JSMR.UI.Blazor/wwwroot/css/theme-base.css
Normal file
9
JSMR.UI.Blazor/wwwroot/css/theme-base.css
Normal file
@@ -0,0 +1,9 @@
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--primary-text-color);
|
||||
font-family: var(--font-family);
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: 600;
|
||||
}
|
||||
24
JSMR.UI.Blazor/wwwroot/css/theme-frozen.css
Normal file
24
JSMR.UI.Blazor/wwwroot/css/theme-frozen.css
Normal file
@@ -0,0 +1,24 @@
|
||||
:root {
|
||||
--font-family: 'Poppins';
|
||||
--background-color: rgb(16, 36, 50);
|
||||
--input-background-color: rgb(0,20,34);
|
||||
--input-border-color: #304562;
|
||||
--primary-text-color: rgb(180,200, 214);
|
||||
--product-container-background-color: rgb(39,59,73);
|
||||
--product-container-box-shadow: 1px 1px 4px rgba(0,0,0,.5);
|
||||
--product-title-text-color: rgb(200,220,234);
|
||||
--image-overlay-opacity: 0.9;
|
||||
--tag-background-color: #415664;
|
||||
--tag-text-color: rgb(210,220,230);
|
||||
--tag-border: none;
|
||||
--tag-border-radius: 0.8em;
|
||||
--tag-padding: 0.3em 1em;
|
||||
--tag-margin: 1em 0.5em 0 0;
|
||||
--tag-hover-background-color: #596f7e;
|
||||
--tag-hover-text-color: rgb(240,250,254);
|
||||
--tag-hover-border: none;
|
||||
--product-footer-background-color: rgb(0,20,34);
|
||||
--product-footer-text-color: rgb(220,230,234);
|
||||
--expected-date-text-color: #ffe073;
|
||||
--planned-date-text-color: #73bdff;
|
||||
}
|
||||
Reference in New Issue
Block a user