Skip to content

Commit 2550c37

Browse files
DoroWolfDoroWolf
committed
update styles
1 parent 4ad8841 commit 2550c37

6 files changed

Lines changed: 282 additions & 41 deletions

File tree

‎src/App.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -157,7 +157,7 @@ onUnmounted(() => {
157157
align-items: center;
158158
box-sizing: border-box;
159159
padding: 20px;
160-
padding-top: 40px;
160+
padding-top: 60px;
161161
font-family: 'Unifont', system-ui, -apple-system, sans-serif;
162162
color: var(--color-text-primary);
163163
gap: 1rem;

‎src/assets/colors.css‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,3 @@
1-
/* ============================================================
2-
* ChessDragon 设计令牌 - 颜色系统
3-
*
4-
* 所有颜色统一使用 CSS 自定义属性，方便未来添加暗色模式。
5-
* 暗色模式只需复制 :root 块到 [data-theme="dark"] 选择器并调整值即可。
6-
* ============================================================ */
7-
81
:root {
92
/* ===== 页面背景 ===== */
103
--color-page-bg: #f0f0f0;
@@ -25,6 +18,10 @@
2518
--color-board-light: #F3F9FC;
2619
--color-board-dark: #484A4B;
2720

21+
/* ===== 滑块 ===== */
22+
--color-input-track-bg: #b3b4b6;
23+
--color-input-slider-bg: #e7e7e7;
24+
2825
/* ===== 按钮 ===== */
2926
--color-btn-bg: #e7e7e7;
3027
--color-btn-primary: #209cee;

‎src/assets/resourcePaths.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,16 @@ export function pieceImg(type: string, color: string): string {
1919
return new URL(`./texture/pieces/${type}_${color}.png`, import.meta.url).href
2020
}
2121

22+
// ---------- 图标 SVGs ----------
23+
export const iconClassic = new URL('./icon/classic.svg', import.meta.url).href
24+
export const iconChess960 = new URL('./icon/chess960.svg', import.meta.url).href
25+
export const iconCustom = new URL('./icon/custom.svg', import.meta.url).href
26+
27+
// ---------- 执棋方图标 ----------
28+
export const kingBlackIcon = new URL('./texture/icon/king_black_icon.png', import.meta.url).href
29+
export const kingRandomIcon = new URL('./texture/icon/king_random_icon.png', import.meta.url).href
30+
export const kingWhiteIcon = new URL('./texture/icon/king_white_icon.png', import.meta.url).href
31+
2232
// ---------- 升变 ----------
2333
export function promotionImg(piece: string, color: string): string {
2434
return new URL(`./texture/icon/${piece}_${color}_icon.png`, import.meta.url).href

‎src/assets/styles.css‎

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,3 +98,161 @@ textarea,
9898
opacity: 0.5;
9999
cursor: not-allowed;
100100
}
101+
102+
103+
input[type="text"],
104+
input[type="password"],
105+
input[type="email"],
106+
input[type="number"],
107+
input[type="search"],
108+
input[type="tel"],
109+
input[type="url"],
110+
textarea {
111+
appearance: none;
112+
-webkit-appearance: none;
113+
outline: none;
114+
border-radius: 0;
115+
116+
font-family: 'Unifont', monospace;
117+
color: var(--color-border);
118+
background-color: transparent;
119+
border: 2px solid var(--color-border-light);
120+
121+
padding: 8px;
122+
margin: 3px;
123+
box-sizing: border-box;
124+
125+
caret-color: var(--color-border);
126+
}
127+
128+
input:disabled,
129+
textarea:disabled {
130+
background-color: var(--color-border-light);
131+
opacity: 0.5;
132+
cursor: not-allowed;
133+
}
134+
135+
input[type="checkbox"] {
136+
-webkit-appearance: none;
137+
appearance: none;
138+
width: 16px;
139+
height: 16px;
140+
background-color: transparent;
141+
border: 2px solid var(--color-surface-border);
142+
box-shadow: 1px 1px 0 var(--color-surface-shadow);
143+
margin: 0 0 0 0;
144+
cursor: pointer;
145+
position: relative;
146+
vertical-align: middle;
147+
image-rendering: pixelated;
148+
margin: 3px;
149+
}
150+
151+
input[type="checkbox"]:checked::after {
152+
content: "";
153+
position: absolute;
154+
top: 4.5px;
155+
width: 2px;
156+
height: 2px;
157+
background-color: var(--color-surface-border);
158+
box-shadow:
159+
2px 2px 0 var(--color-surface-border),
160+
4px 4px 0 var(--color-surface-border),
161+
6px 2px 0 var(--color-surface-border),
162+
8px 0px 0 var(--color-surface-border),
163+
10px -2px 0 var(--color-surface-border);
164+
}
165+
166+
input[type="range"] {
167+
-webkit-appearance: none;
168+
appearance: none;
169+
background: transparent;
170+
cursor: pointer;
171+
}
172+
173+
input[type="range"]:focus {
174+
outline: none;
175+
}
176+
177+
input[type="range"]::-webkit-slider-runnable-track {
178+
height: 20px;
179+
background-color: var(--color-input-track-bg);
180+
border: 2px solid var(--color-surface-border);
181+
box-shadow: inset 2px 2px 0 var(--color-surface-shadow);
182+
}
183+
184+
input[type="range"]::-webkit-slider-thumb {
185+
-webkit-appearance: none;
186+
appearance: none;
187+
width: 24px;
188+
height: 15px;
189+
background-color: var(--color-input-slider-bg);
190+
box-shadow: 1px 1px 0 var(--color-surface-shadow)
191+
}
192+
193+
194+
input[type="range"]::-moz-range-track {
195+
height: 20px;
196+
background-color: var(--color-input-track-bg);
197+
border: 2px solid var(--color-surface-border);
198+
box-shadow: inset 2px 2px 0 var(--color-surface-shadow);
199+
margin-left: -2px;
200+
margin-right: -2px;
201+
box-sizing: border-box;
202+
}
203+
204+
input[type="range"]::-moz-range-thumb {
205+
-webkit-appearance: none;
206+
appearance: none;
207+
width: 24px;
208+
height: 15px;
209+
background-color: var(--color-input-slider-bg);
210+
box-shadow: 1px 1px 0 var(--color-surface-shadow);
211+
border: none;
212+
border-radius: 0%;
213+
transform: translateY(-0.5px);
214+
}
215+
216+
select {
217+
-webkit-appearance: none;
218+
-moz-appearance: none;
219+
appearance: none;
220+
221+
font-family: 'Unifont', system-ui, -apple-system, sans-serif;
222+
background-color: var(--color-btn-bg);
223+
color: var(--color-text-primary);
224+
padding: 4px 30px 4px 10px;
225+
border: 2px solid var(--color-surface-border);
226+
box-shadow: 1px 1px 0 var(--color-surface-shadow);
227+
outline: none;
228+
cursor: pointer;
229+
border-radius: 0;
230+
margin: 3px;
231+
}
232+
233+
.select-wrapper {
234+
position: relative;
235+
display: inline-block;
236+
}
237+
238+
.select-wrapper::after {
239+
content: '';
240+
position: absolute;
241+
right: 22px;
242+
top: 45%;
243+
transform: translateY(-50%);
244+
pointer-events: none; /* 确保点击穿透到 select */
245+
246+
width: 2px;
247+
height: 2px;
248+
background-color: #2b2b2b;
249+
box-shadow:
250+
2px 0 0 #2b2b2b,
251+
4px 0 0 #2b2b2b,
252+
6px 0 0 #2b2b2b,
253+
8px 0 0 #2b2b2b,
254+
2px 2px 0 #2b2b2b,
255+
4px 2px 0 #2b2b2b,
256+
6px 2px 0 #2b2b2b,
257+
4px 4px 0 #2b2b2b;
258+
}

0 commit comments

Comments
 (0)