Skip to content

Commit c6085c0

Browse files
wangweihanNBwangweihanNB
authored
Add initial CSS styles for the application
1 parent f95123d commit c6085c0

1 file changed

Lines changed: 265 additions & 0 deletions

File tree

‎css/style.css‎

Lines changed: 265 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,265 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
9+
background: #1e1e2e;
10+
color: #cdd6f4;
11+
padding: 16px;
12+
padding-bottom: 80px;
13+
}
14+
15+
.app-container {
16+
max-width: 800px;
17+
margin: 0 auto;
18+
}
19+
20+
/* 头部 */
21+
.header {
22+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
23+
padding: 24px 20px;
24+
border-radius: 16px;
25+
margin-bottom: 20px;
26+
text-align: center;
27+
}
28+
29+
.header h1 {
30+
font-size: 28px;
31+
margin-bottom: 8px;
32+
}
33+
34+
.header p {
35+
font-size: 14px;
36+
opacity: 0.9;
37+
}
38+
39+
/* 表单区域 */
40+
.add-section, .search-section, .snippets-section {
41+
background: #313244;
42+
border-radius: 16px;
43+
padding: 20px;
44+
margin-bottom: 16px;
45+
}
46+
47+
.add-section h3, .section-header h3 {
48+
font-size: 18px;
49+
margin-bottom: 16px;
50+
color: #f5c2e7;
51+
}
52+
53+
.input-field, .select-field, .textarea-field {
54+
width: 100%;
55+
padding: 12px;
56+
margin-bottom: 12px;
57+
background: #45475a;
58+
border: none;
59+
border-radius: 10px;
60+
color: #cdd6f4;
61+
font-size: 14px;
62+
font-family: inherit;
63+
}
64+
65+
.textarea-field {
66+
font-family: 'Courier New', monospace;
67+
resize: vertical;
68+
}
69+
70+
.input-field:focus, .select-field:focus, .textarea-field:focus {
71+
outline: none;
72+
border: 1px solid #89b4fa;
73+
}
74+
75+
.btn-primary {
76+
width: 100%;
77+
padding: 14px;
78+
background: #89b4fa;
79+
color: #1e1e2e;
80+
border: none;
81+
border-radius: 12px;
82+
font-size: 16px;
83+
font-weight: bold;
84+
cursor: pointer;
85+
transition: transform 0.1s;
86+
}
87+
88+
.btn-primary:active {
89+
transform: scale(0.98);
90+
}
91+
92+
/* 搜索和过滤 */
93+
.filter-buttons {
94+
display: flex;
95+
gap: 8px;
96+
flex-wrap: wrap;
97+
margin-top: 12px;
98+
}
99+
100+
.filter-btn {
101+
padding: 6px 12px;
102+
background: #45475a;
103+
border: none;
104+
border-radius: 20px;
105+
color: #cdd6f4;
106+
font-size: 12px;
107+
cursor: pointer;
108+
}
109+
110+
.filter-btn.active {
111+
background: #89b4fa;
112+
color: #1e1e2e;
113+
}
114+
115+
/* 片段列表 */
116+
.section-header {
117+
display: flex;
118+
justify-content: space-between;
119+
align-items: center;
120+
margin-bottom: 16px;
121+
flex-wrap: wrap;
122+
gap: 10px;
123+
}
124+
125+
.actions {
126+
display: flex;
127+
gap: 8px;
128+
}
129+
130+
.btn-small {
131+
padding: 6px 12px;
132+
background: #45475a;
133+
border: none;
134+
border-radius: 8px;
135+
color: #cdd6f4;
136+
font-size: 12px;
137+
cursor: pointer;
138+
}
139+
140+
.btn-small.danger {
141+
background: #f38ba8;
142+
color: #1e1e2e;
143+
}
144+
145+
.snippets-list {
146+
display: flex;
147+
flex-direction: column;
148+
gap: 12px;
149+
}
150+
151+
.snippet-card {
152+
background: #181825;
153+
border-radius: 12px;
154+
padding: 16px;
155+
border-left: 3px solid #89b4fa;
156+
}
157+
158+
.snippet-header {
159+
display: flex;
160+
justify-content: space-between;
161+
align-items: flex-start;
162+
margin-bottom: 8px;
163+
flex-wrap: wrap;
164+
gap: 8px;
165+
}
166+
167+
.snippet-name {
168+
font-size: 16px;
169+
font-weight: bold;
170+
color: #89b4fa;
171+
}
172+
173+
.snippet-category {
174+
background: #45475a;
175+
padding: 2px 8px;
176+
border-radius: 12px;
177+
font-size: 10px;
178+
}
179+
180+
.snippet-tags {
181+
display: flex;
182+
gap: 6px;
183+
flex-wrap: wrap;
184+
margin-bottom: 12px;
185+
}
186+
187+
.snippet-tag {
188+
background: #313244;
189+
padding: 2px 8px;
190+
border-radius: 12px;
191+
font-size: 10px;
192+
color: #a6adc8;
193+
}
194+
195+
.snippet-code {
196+
background: #11111b;
197+
padding: 12px;
198+
border-radius: 8px;
199+
font-family: 'Courier New', monospace;
200+
font-size: 12px;
201+
overflow-x: auto;
202+
white-space: pre-wrap;
203+
word-break: break-all;
204+
margin-bottom: 12px;
205+
max-height: 150px;
206+
overflow-y: auto;
207+
}
208+
209+
.snippet-actions {
210+
display: flex;
211+
gap: 10px;
212+
}
213+
214+
.copy-btn, .delete-btn {
215+
padding: 6px 12px;
216+
border: none;
217+
border-radius: 6px;
218+
font-size: 12px;
219+
cursor: pointer;
220+
}
221+
222+
.copy-btn {
223+
background: #94e2d5;
224+
color: #1e1e2e;
225+
}
226+
227+
.delete-btn {
228+
background: #f38ba8;
229+
color: #1e1e2e;
230+
}
231+
232+
.empty-state {
233+
text-align: center;
234+
padding: 40px;
235+
color: #6c7086;
236+
}
237+
238+
.stats-section {
239+
text-align: center;
240+
padding: 12px;
241+
color: #6c7086;
242+
font-size: 14px;
243+
}
244+
245+
/* 提示浮层 */
246+
.toast {
247+
position: fixed;
248+
bottom: 30px;
249+
left: 50%;
250+
transform: translateX(-50%);
251+
background: #1e1e2e;
252+
color: #cdd6f4;
253+
padding: 10px 20px;
254+
border-radius: 30px;
255+
font-size: 14px;
256+
opacity: 0;
257+
transition: opacity 0.3s;
258+
pointer-events: none;
259+
z-index: 1000;
260+
border: 1px solid #89b4fa;
261+
}
262+
263+
.toast.show {
264+
opacity: 1;
265+
}

0 commit comments

Comments
 (0)