Skip to content

Commit f63c640

Browse files
steam-bell-92steam-bell-92
committed
Udpated merch store UI/UX
1 parent 8642bbb commit f63c640

File tree

9 files changed

+865
-193
lines changed

9 files changed

+865
-193
lines changed

‎src/components/merch/FilterBar.css‎

Lines changed: 88 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,22 @@
1-
/* Filter Bar Styles */
1+
/* Filter Sidebar Styles */
22

33
.filter-bar {
44
background: var(--ifm-card-background-color);
5-
border-bottom: 1px solid var(--ifm-color-emphasis-200);
6-
position: sticky;
7-
top: 60px;
8-
z-index: 100;
5+
border: 1px solid var(--ifm-color-emphasis-200);
6+
border-radius: 12px;
7+
padding: 1.5rem;
98
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
109
}
1110

1211
.filter-bar-container {
13-
max-width: 1400px;
14-
margin: 0 auto;
15-
padding: 1.5rem 2rem;
1612
display: flex;
17-
justify-content: space-between;
18-
align-items: center;
13+
flex-direction: column;
1914
gap: 2rem;
20-
flex-wrap: wrap;
2115
}
2216

2317
/* Filter Section */
2418
.filter-section {
25-
flex: 1;
26-
min-width: 300px;
19+
width: 100%;
2720
}
2821

2922
.filter-header {
@@ -44,35 +37,52 @@
4437
/* Category Filters */
4538
.category-filters {
4639
display: flex;
40+
flex-direction: column;
4741
gap: 0.75rem;
48-
flex-wrap: wrap;
4942
}
5043

5144
.category-button {
5245
display: flex;
5346
align-items: center;
54-
gap: 0.5rem;
55-
padding: 0.5rem 1rem;
56-
background: var(--ifm-color-emphasis-100);
57-
border: 2px solid transparent;
47+
gap: 0.75rem;
48+
padding: 0.75rem 1rem;
49+
background: #f5f5f5;
50+
border: 2px solid #e0e0e0;
5851
border-radius: 8px;
5952
font-size: 0.875rem;
6053
font-weight: 500;
6154
color: #2d3748;
6255
cursor: pointer;
6356
transition: all 0.2s ease;
57+
width: 100%;
58+
text-align: left;
6459
}
6560

6661
.category-button:hover {
67-
background: var(--ifm-color-emphasis-200);
68-
transform: translateY(-2px);
62+
background: #ffffff;
63+
border-color: #cccccc;
64+
transform: translateX(4px);
65+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
66+
color: #1a1a1a;
67+
}
68+
69+
.category-button:active {
70+
transform: translateX(2px);
6971
}
7072

7173
.category-button.active {
72-
background: var(--ifm-color-primary);
73-
border-color: var(--ifm-color-primary);
74+
background: linear-gradient(135deg, #667eea 0%, #5b47d6 100%);
75+
border-color: #667eea;
7476
color: #ffffff !important;
7577
font-weight: 600;
78+
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
79+
}
80+
81+
.category-button.active:hover {
82+
background: linear-gradient(135deg, #818cf8 0%, #06b6d4 100%);
83+
border-color: #818cf8;
84+
transform: translateX(4px);
85+
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
7686
}
7787

7888
.category-icon {
@@ -85,20 +95,20 @@
8595

8696
/* Sort Section */
8797
.sort-section {
88-
min-width: 200px;
98+
width: 100%;
8999
}
90100

91101
.sort-select {
92102
width: 100%;
93103
padding: 0.625rem 1rem;
94-
background: var(--ifm-color-emphasis-100);
95-
border: 2px solid var(--ifm-color-emphasis-200);
104+
background: #f5f5f5;
105+
border: 2px solid #e0e0e0;
96106
border-radius: 8px;
97107
font-size: 0.875rem;
98108
font-weight: 500;
99109
color: var(--ifm-font-color-base);
100110
cursor: pointer;
101-
transition: all 0.2s ease;
111+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
102112
appearance: none;
103113
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
104114
background-repeat: no-repeat;
@@ -107,46 +117,47 @@
107117
}
108118

109119
.sort-select:hover {
110-
border-color: var(--ifm-color-primary);
120+
background-color: #ffffff;
121+
border-color: #999999;
122+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
111123
}
112124

113125
.sort-select:focus {
114126
outline: none;
115-
border-color: var(--ifm-color-primary);
116-
box-shadow: 0 0 0 3px var(--ifm-color-primary-lightest);
127+
border-color: #667eea;
128+
background-color: #ffffff;
129+
box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.15), 0 2px 8px rgba(102, 126, 234, 0.2);
117130
}
118131

119132
/* Responsive Design */
120-
@media (max-width: 768px) {
121-
.filter-bar-container {
122-
padding: 1rem;
123-
flex-direction: column;
124-
align-items: stretch;
125-
}
126-
127-
.filter-section {
128-
min-width: 100%;
133+
@media (max-width: 992px) {
134+
.filter-bar {
135+
margin-bottom: 2rem;
129136
}
130137

131138
.category-filters {
132-
gap: 0.5rem;
139+
flex-direction: row;
140+
flex-wrap: wrap;
133141
}
134142

135143
.category-button {
136-
padding: 0.5rem 0.75rem;
137-
font-size: 0.8125rem;
144+
width: auto;
138145
}
146+
}
139147

140-
.category-icon {
141-
font-size: 1rem;
148+
@media (max-width: 768px) {
149+
.filter-bar-container {
150+
padding: 1rem;
151+
gap: 1.5rem;
142152
}
143153

144-
.sort-section {
145-
min-width: 100%;
154+
.category-filters {
155+
gap: 0.5rem;
146156
}
147157

148-
.filter-bar {
149-
top: 0;
158+
.category-button {
159+
padding: 0.5rem 0.75rem;
160+
font-size: 0.8125rem;
150161
}
151162
}
152163

@@ -157,21 +168,43 @@
157168
}
158169

159170
[data-theme="dark"] .category-button {
160-
background: var(--ifm-color-emphasis-200);
171+
background: #2a2a2a;
172+
border-color: #404040;
161173
color: var(--ifm-font-color-base);
162174
}
163175

176+
[data-theme="dark"] .category-button:hover {
177+
background: #3a3a3a;
178+
border-color: #555555;
179+
box-shadow: 0 8px 16px rgba(255, 255, 255, 0.1);
180+
}
181+
164182
[data-theme="dark"] .category-button.active {
165-
background: rgba(16, 185, 129, 0.15);
166-
border-color: var(--ifm-color-primary);
167-
color: #10b981 !important;
183+
background: rgba(255, 255, 255, 0.15);
184+
border-color: #ffffff;
185+
color: #ffffff !important;
186+
box-shadow: 0 6px 12px rgba(255, 255, 255, 0.15);
168187
}
169188

170-
[data-theme="dark"] .category-button:hover {
171-
background: var(--ifm-color-emphasis-300);
189+
[data-theme="dark"] .category-button.active:hover {
190+
background: rgba(255, 255, 255, 0.25);
191+
border-color: #ffffff;
192+
box-shadow: 0 10px 20px rgba(255, 255, 255, 0.2);
172193
}
173194

174195
[data-theme="dark"] .sort-select {
175-
background: var(--ifm-color-emphasis-200);
176-
border-color: var(--ifm-color-emphasis-300);
196+
background: #2a2a2a;
197+
border-color: #404040;
198+
}
199+
200+
[data-theme="dark"] .sort-select:hover {
201+
background: #3a3a3a;
202+
border-color: #555555;
203+
box-shadow: 0 6px 12px rgba(255, 255, 255, 0.08);
204+
}
205+
206+
[data-theme="dark"] .sort-select:focus {
207+
border-color: #ffffff;
208+
background: #3a3a3a;
209+
box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.1), 0 6px 12px rgba(255, 255, 255, 0.08);
177210
}

‎src/components/merch/ProductCard.css‎

Lines changed: 29 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,18 @@
44
background: var(--ifm-card-background-color);
55
border-radius: 16px;
66
overflow: hidden;
7-
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
7+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
88
transition: all 0.3s ease;
99
height: 100%;
1010
display: flex;
1111
flex-direction: column;
12+
border: 1px solid rgba(0, 0, 0, 0.06);
1213
}
1314

1415
.product-card:hover {
15-
transform: translateY(-8px);
16-
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
16+
transform: translateY(-4px);
17+
box-shadow: 0 12px 24px rgba(102, 126, 234, 0.15);
18+
border-color: rgba(102, 126, 234, 0.3);
1719
}
1820

1921
/* Image Section */
@@ -58,22 +60,23 @@
5860
}
5961

6062
.overlay-button {
61-
background: white;
63+
background: rgba(255, 255, 255, 0.95);
6264
border: none;
6365
border-radius: 50%;
64-
width: 48px;
65-
height: 48px;
66+
width: 44px;
67+
height: 44px;
6668
display: flex;
6769
align-items: center;
6870
justify-content: center;
6971
cursor: pointer;
7072
transition: all 0.2s ease;
71-
color: var(--ifm-color-primary);
73+
color: #667eea;
74+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
7275
}
7376

7477
.overlay-button:hover {
7578
transform: scale(1.1);
76-
background: var(--ifm-color-primary);
79+
background: linear-gradient(135deg, #667eea 0%, #06b6d4 100%);
7780
color: white;
7881
}
7982

@@ -111,14 +114,16 @@
111114
position: absolute;
112115
top: 12px;
113116
left: 12px;
114-
background: var(--ifm-color-primary);
117+
background: linear-gradient(135deg, #667eea 0%, #5b47d6 100%);
115118
color: white;
116-
padding: 4px 12px;
117-
border-radius: 20px;
118-
font-size: 0.75rem;
119+
padding: 4px 10px;
120+
border-radius: 6px;
121+
font-size: 0.7rem;
119122
font-weight: 600;
120123
text-transform: uppercase;
124+
letter-spacing: 0.5px;
121125
z-index: 3;
126+
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
122127
}
123128

124129
/* Content Section */
@@ -201,7 +206,7 @@
201206
display: flex;
202207
align-items: baseline;
203208
font-weight: 700;
204-
color: var(--ifm-color-primary);
209+
color: #5b47d6;
205210
}
206211

207212
.price-currency {
@@ -215,9 +220,10 @@
215220
.product-card-button {
216221
display: flex;
217222
align-items: center;
223+
justify-content: center;
218224
gap: 0.5rem;
219-
padding: 0.625rem 1.25rem;
220-
background: var(--ifm-color-primary);
225+
padding: 0.625rem 1rem;
226+
background: linear-gradient(135deg, #667eea 0%, #5b47d6 100%);
221227
color: white;
222228
border: none;
223229
border-radius: 8px;
@@ -226,12 +232,17 @@
226232
cursor: pointer;
227233
transition: all 0.2s ease;
228234
white-space: nowrap;
235+
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
229236
}
230237

231238
.product-card-button:hover {
232-
background: var(--ifm-color-primary-dark);
233-
transform: translateY(-2px);
234-
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
239+
background: linear-gradient(135deg, #818cf8 0%, #06b6d4 100%);
240+
transform: translateY(-1px);
241+
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
242+
}
243+
244+
.product-card-button:active {
245+
transform: translateY(0);
235246
}
236247

237248
.product-card-button:active {

0 commit comments

Comments
 (0)