Skip to content

Commit d559e3d

Browse files
author
You
committed
chore: enhance styling and layout across components for improved user experience
1 parent 161eec3 commit d559e3d

File tree

13 files changed

+576
-81
lines changed

13 files changed

+576
-81
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,4 @@ dist
44
!/src/lang/en/
55
.DS_Store
66
.idea
7+
.history

‎src/app/index.css‎

Lines changed: 304 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,342 @@
11
::-webkit-scrollbar {
2-
width: 6px;
3-
height: 6px;
2+
width: 8px;
3+
height: 8px;
44
}
55

66
::-webkit-scrollbar-corner,
77
::-webkit-scrollbar-track {
8-
background-color: #e2e2e2;
9-
border-radius: 2px;
8+
background-color: rgba(0, 0, 0, 0.05);
9+
border-radius: 4px;
1010
}
1111

1212
::-webkit-scrollbar-thumb {
13-
border-radius: 2px;
14-
background-color: rgba(0, 0, 0, 0.3);
13+
border-radius: 4px;
14+
background-color: rgba(0, 0, 0, 0.2);
15+
transition: background-color 0.2s ease;
1516
}
1617

1718
::-webkit-scrollbar-button:vertical {
1819
display: none;
1920
}
2021

2122
::-webkit-scrollbar-thumb:vertical:hover {
22-
background-color: rgba(0, 0, 0, 0.35);
23+
background-color: rgba(0, 0, 0, 0.3);
2324
}
2425

2526
::-webkit-scrollbar-thumb:vertical:active {
26-
background-color: rgba(0, 0, 0, 0.38);
27+
background-color: rgba(0, 0, 0, 0.4);
2728
}
2829

2930
/* dark */
3031

3132
.hope-ui-dark ::-webkit-scrollbar-corner,
3233
.hope-ui-dark ::-webkit-scrollbar-track {
33-
background-color: rgb(15, 15, 15);
34+
background-color: rgba(255, 255, 255, 0.05);
3435
}
3536

3637
.hope-ui-dark ::-webkit-scrollbar-thumb {
37-
background-color: #2d2d2d;
38+
background-color: rgba(255, 255, 255, 0.2);
3839
}
3940

4041
.hope-ui-dark ::-webkit-scrollbar-thumb:vertical:hover {
41-
background-color: rgb(58, 58, 58);
42+
background-color: rgba(255, 255, 255, 0.3);
4243
}
4344

4445
.hope-ui-dark ::-webkit-scrollbar-thumb:vertical:active {
45-
background-color: rgb(58, 58, 58);
46+
background-color: rgba(255, 255, 255, 0.4);
4647
}
4748

4849
.hope-select__option {
4950
flex-shrink: 0;
51+
transition: all 0.2s ease;
52+
}
53+
54+
.hope-select__option:hover {
55+
transform: translateX(2px);
56+
}
57+
58+
/* 全局样式优化 */
59+
* {
60+
box-sizing: border-box;
61+
}
62+
63+
html {
64+
scroll-behavior: smooth;
65+
-webkit-font-smoothing: antialiased;
66+
-moz-osx-font-smoothing: grayscale;
67+
text-rendering: optimizeLegibility;
68+
font-size: 15px;
69+
}
70+
71+
body {
72+
font-feature-settings:
73+
"kern" 1,
74+
"liga" 1,
75+
"calt" 1;
76+
}
77+
78+
/* 图片优化 */
79+
img {
80+
image-rendering: -webkit-optimize-contrast;
81+
image-rendering: crisp-edges;
82+
}
83+
84+
/* 链接样式优化 */
85+
a {
86+
transition: all 0.2s ease;
87+
}
88+
89+
/* 按钮和输入框焦点优化 */
90+
button:focus,
91+
input:focus,
92+
textarea:focus,
93+
select:focus {
94+
outline: none;
95+
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
96+
}
97+
98+
/* 卡片阴影优化 */
99+
.card-shadow {
100+
box-shadow:
101+
0 1px 3px 0 rgba(0, 0, 0, 0.1),
102+
0 1px 2px 0 rgba(0, 0, 0, 0.06);
103+
transition: box-shadow 0.2s ease;
104+
}
105+
106+
.card-shadow:hover {
107+
box-shadow:
108+
0 4px 6px -1px rgba(0, 0, 0, 0.1),
109+
0 2px 4px -1px rgba(0, 0, 0, 0.06);
110+
}
111+
112+
/* 深色模式卡片阴影 */
113+
.hope-ui-dark .card-shadow {
114+
box-shadow:
115+
0 1px 3px 0 rgba(0, 0, 0, 0.3),
116+
0 1px 2px 0 rgba(0, 0, 0, 0.2);
117+
}
118+
119+
.hope-ui-dark .card-shadow:hover {
120+
box-shadow:
121+
0 4px 6px -1px rgba(0, 0, 0, 0.3),
122+
0 2px 4px -1px rgba(0, 0, 0, 0.2);
123+
}
124+
125+
/* 加载动画优化 */
126+
@keyframes fadeInUp {
127+
from {
128+
opacity: 0;
129+
transform: translateY(20px);
130+
}
131+
to {
132+
opacity: 1;
133+
transform: translateY(0);
134+
}
135+
}
136+
137+
.fade-in-up {
138+
animation: fadeInUp 0.3s ease-out;
139+
}
140+
141+
/* 响应式优化 */
142+
@media (max-width: 768px) {
143+
::-webkit-scrollbar {
144+
width: 4px;
145+
height: 4px;
146+
}
147+
}
148+
149+
/* 网格项优化 */
150+
.grid-item {
151+
position: relative;
152+
overflow: hidden;
153+
}
154+
155+
.grid-item::before {
156+
content: "";
157+
position: absolute;
158+
top: 0;
159+
left: 0;
160+
right: 0;
161+
bottom: 0;
162+
background: linear-gradient(
163+
135deg,
164+
rgba(255, 255, 255, 0.1) 0%,
165+
rgba(255, 255, 255, 0) 100%
166+
);
167+
opacity: 0;
168+
transition: opacity 0.3s ease;
169+
pointer-events: none;
170+
z-index: 1;
171+
}
172+
173+
.grid-item:hover::before {
174+
opacity: 1;
175+
}
176+
177+
/* 工具栏优化 */
178+
.center-toolbar {
179+
backdrop-filter: blur(20px);
180+
-webkit-backdrop-filter: blur(20px);
181+
}
182+
183+
/* 响应式优化 */
184+
@media (max-width: 768px) {
185+
.grid-item {
186+
margin-bottom: 1rem;
187+
}
188+
189+
.center-toolbar {
190+
bottom: 1rem !important;
191+
right: 1rem !important;
192+
left: 1rem !important;
193+
width: auto !important;
194+
transform: none !important;
195+
}
196+
197+
.center-toolbar > div {
198+
justify-content: center;
199+
flex-wrap: wrap;
200+
}
201+
}
202+
203+
@media (max-width: 480px) {
204+
html {
205+
font-size: 14px;
206+
}
207+
208+
.grid-item {
209+
margin-bottom: 0.5rem;
210+
}
211+
}
212+
213+
/* 深色模式优化 */
214+
.hope-ui-dark .grid-item::before {
215+
background: linear-gradient(
216+
135deg,
217+
rgba(255, 255, 255, 0.05) 0%,
218+
rgba(255, 255, 255, 0) 100%
219+
);
220+
}
221+
222+
/* 动画优化 */
223+
@keyframes slideInFromBottom {
224+
from {
225+
opacity: 0;
226+
transform: translateY(30px);
227+
}
228+
to {
229+
opacity: 1;
230+
transform: translateY(0);
231+
}
232+
}
233+
234+
.slide-in-bottom {
235+
animation: slideInFromBottom 0.4s ease-out;
236+
}
237+
238+
/* 工具提示优化 */
239+
.hope-tooltip__content {
240+
backdrop-filter: blur(10px);
241+
border: 1px solid rgba(255, 255, 255, 0.1);
242+
box-shadow:
243+
0 10px 25px -5px rgba(0, 0, 0, 0.1),
244+
0 10px 10px -5px rgba(0, 0, 0, 0.04);
245+
}
246+
247+
/* 模态框优化 */
248+
.hope-modal__overlay {
249+
backdrop-filter: blur(8px);
250+
-webkit-backdrop-filter: blur(8px);
251+
}
252+
253+
.hope-modal__content {
254+
backdrop-filter: blur(20px);
255+
-webkit-backdrop-filter: blur(20px);
256+
border: 1px solid rgba(255, 255, 255, 0.1);
257+
}
258+
259+
/* 输入框优化 */
260+
.hope-input__input:focus {
261+
transform: translateY(-1px);
262+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
263+
}
264+
265+
/* 按钮优化 */
266+
.hope-button:not(:disabled):hover {
267+
transform: translateY(-1px);
268+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
269+
}
270+
271+
.hope-button:not(:disabled):active {
272+
transform: translateY(0);
273+
}
274+
275+
/* 选择框优化 */
276+
.hope-select__trigger:focus {
277+
transform: translateY(-1px);
278+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
279+
}
280+
281+
/* 复选框优化 */
282+
.hope-checkbox__control:hover {
283+
transform: scale(1.05);
284+
}
285+
286+
/* 开关优化 */
287+
.hope-switch__track {
288+
transition: all 0.2s ease;
289+
}
290+
291+
.hope-switch__thumb {
292+
transition: all 0.2s ease;
293+
}
294+
295+
/* 菜单优化 */
296+
.hope-menu__content {
297+
backdrop-filter: blur(20px);
298+
-webkit-backdrop-filter: blur(20px);
299+
border: 1px solid rgba(255, 255, 255, 0.1);
300+
box-shadow:
301+
0 10px 25px -5px rgba(0, 0, 0, 0.1),
302+
0 10px 10px -5px rgba(0, 0, 0, 0.04);
303+
}
304+
305+
.hope-menu__item:hover {
306+
transform: translateX(2px);
307+
}
308+
309+
/* 通知优化 */
310+
.hope-notification {
311+
backdrop-filter: blur(20px);
312+
-webkit-backdrop-filter: blur(20px);
313+
border: 1px solid rgba(255, 255, 255, 0.1);
314+
}
315+
316+
/* 警告框优化 */
317+
.hope-alert {
318+
backdrop-filter: blur(10px);
319+
-webkit-backdrop-filter: blur(10px);
320+
border: 1px solid rgba(255, 255, 255, 0.1);
321+
}
322+
323+
/* 锚点优化 */
324+
.hope-anchor:hover {
325+
transform: translateY(-1px);
326+
}
327+
328+
/* 卡片优化 */
329+
.hope-card:hover {
330+
transform: translateY(-2px);
331+
box-shadow:
332+
0 10px 25px -5px rgba(0, 0, 0, 0.1),
333+
0 10px 10px -5px rgba(0, 0, 0, 0.04);
334+
}
335+
336+
.markdown-body th,
337+
.markdown-body td,
338+
th,
339+
td {
340+
padding: 6px 8px;
341+
line-height: 1.4;
50342
}

0 commit comments

Comments
 (0)