Skip to content

Commit 033e425

Browse files
feniofenio
committed
Extract shared CSS styles into global stylesheet
Move duplicated CSS classes (header, error-banner, buttons, loading/empty states, info-section, setting-group, page layout) from 11 component files into src/app.css. Components retain only local overrides where they differ from the defaults. Bump version to 0.6.2.
1 parent a8b98bb commit 033e425

16 files changed

Lines changed: 170 additions & 574 deletions

File tree

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "anylinuxfs-gui",
3-
"version": "0.6.1",
3+
"version": "0.6.2",
44
"private": true,
55
"type": "module",
66
"scripts": {

‎src-tauri/Cargo.lock‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src-tauri/Cargo.toml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
[package]
22
name = "anylinuxfs-gui"
3-
version = "0.6.1"
3+
version = "0.6.2"
44
edition = "2021"
55

66
[lib]

‎src-tauri/tauri.conf.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
{
22
"$schema": "https://schema.tauri.app/config/2",
33
"productName": "anylinuxfs-gui",
4-
"version": "0.6.1",
4+
"version": "0.6.2",
55
"identifier": "com.anylinuxfs.gui",
66
"build": {
77
"beforeDevCommand": "npm run dev",
8-
"devUrl": "http://localhost:5173",
8+
"devUrl": "http://localhost:2137",
99
"beforeBuildCommand": "npm run build",
1010
"frontendDist": "../build"
1111
},

‎src/app.css‎

Lines changed: 165 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -184,3 +184,168 @@ nav {
184184
height: 100vh;
185185
overflow: hidden;
186186
}
187+
188+
/* Shared component styles */
189+
190+
.page {
191+
display: flex;
192+
flex-direction: column;
193+
height: 100%;
194+
}
195+
196+
.header {
197+
display: flex;
198+
align-items: center;
199+
justify-content: space-between;
200+
margin-bottom: 20px;
201+
}
202+
203+
.header h2 {
204+
font-size: 18px;
205+
font-weight: 600;
206+
color: var(--text-primary);
207+
margin: 0;
208+
}
209+
210+
.error-banner {
211+
display: flex;
212+
align-items: center;
213+
justify-content: space-between;
214+
padding: 10px 14px;
215+
background: var(--error-bg);
216+
border: 1px solid var(--error-border);
217+
border-radius: 6px;
218+
color: var(--error-color);
219+
font-size: 13px;
220+
margin-bottom: 16px;
221+
}
222+
223+
.error-banner button {
224+
padding: 4px 10px;
225+
border-radius: 4px;
226+
border: none;
227+
background: var(--error-color);
228+
color: white;
229+
font-size: 12px;
230+
cursor: pointer;
231+
}
232+
233+
.loading,
234+
.empty {
235+
padding: 24px;
236+
text-align: center;
237+
color: var(--text-secondary);
238+
}
239+
240+
.empty p {
241+
margin: 0 0 8px;
242+
}
243+
244+
.empty .hint {
245+
font-size: 13px;
246+
}
247+
248+
.info-section {
249+
margin-top: 20px;
250+
padding: 16px;
251+
background: var(--neutral-bg);
252+
border: 1px solid var(--border-color);
253+
border-radius: 8px;
254+
}
255+
256+
.info-section p {
257+
margin: 0 0 8px;
258+
font-size: 13px;
259+
color: var(--text-secondary);
260+
}
261+
262+
.info-section p:last-child {
263+
margin-bottom: 0;
264+
}
265+
266+
.info-section strong {
267+
color: var(--text-primary);
268+
}
269+
270+
.btn-primary,
271+
.btn-secondary,
272+
.btn-danger {
273+
padding: 6px 14px;
274+
border-radius: 6px;
275+
font-size: 13px;
276+
font-weight: 500;
277+
cursor: pointer;
278+
}
279+
280+
.btn-primary {
281+
border: none;
282+
background: var(--accent-color);
283+
color: white;
284+
}
285+
286+
.btn-primary:hover:not(:disabled) {
287+
background: var(--accent-hover);
288+
}
289+
290+
.btn-secondary {
291+
border: 1px solid var(--border-color);
292+
background: var(--button-secondary-bg);
293+
color: var(--text-primary);
294+
}
295+
296+
.btn-secondary:hover:not(:disabled) {
297+
background: var(--button-secondary-hover);
298+
}
299+
300+
.btn-danger {
301+
border: none;
302+
background: var(--danger-color);
303+
color: white;
304+
}
305+
306+
.btn-danger:hover:not(:disabled) {
307+
background: var(--danger-hover);
308+
}
309+
310+
.btn-primary:disabled,
311+
.btn-secondary:disabled,
312+
.btn-danger:disabled {
313+
opacity: 0.5;
314+
cursor: not-allowed;
315+
}
316+
317+
.setting-group {
318+
background: var(--card-bg);
319+
border: 1px solid var(--border-color);
320+
border-radius: 8px;
321+
padding: 20px;
322+
margin-bottom: 16px;
323+
}
324+
325+
.setting-group h3 {
326+
font-size: 15px;
327+
font-weight: 600;
328+
color: var(--text-primary);
329+
margin: 0 0 4px;
330+
}
331+
332+
.setting-group .description {
333+
font-size: 13px;
334+
color: var(--text-secondary);
335+
margin: 0 0 16px;
336+
}
337+
338+
.setting {
339+
margin-bottom: 16px;
340+
}
341+
342+
.setting:last-child {
343+
margin-bottom: 0;
344+
}
345+
346+
.setting .hint {
347+
display: block;
348+
font-size: 12px;
349+
color: var(--text-tertiary);
350+
margin-top: 4px;
351+
}

‎src/components/ConfigPanel.svelte‎

Lines changed: 0 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -154,80 +154,11 @@
154154
flex-direction: column;
155155
}
156156
157-
.header {
158-
margin-bottom: 20px;
159-
}
160-
161-
.header h2 {
162-
font-size: 18px;
163-
font-weight: 600;
164-
color: var(--text-primary);
165-
margin: 0;
166-
}
167-
168-
.error-banner {
169-
display: flex;
170-
align-items: center;
171-
justify-content: space-between;
172-
padding: 10px 14px;
173-
background: var(--error-bg);
174-
border: 1px solid var(--error-border);
175-
border-radius: 6px;
176-
color: var(--error-color);
177-
font-size: 13px;
178-
margin-bottom: 16px;
179-
}
180-
181-
.error-banner button {
182-
padding: 4px 10px;
183-
border-radius: 4px;
184-
border: none;
185-
background: var(--error-color);
186-
color: white;
187-
font-size: 12px;
188-
cursor: pointer;
189-
}
190-
191-
.loading {
192-
padding: 24px;
193-
text-align: center;
194-
color: var(--text-secondary);
195-
}
196-
197157
.settings-grid {
198158
flex: 1;
199159
overflow-y: auto;
200160
}
201161
202-
.setting-group {
203-
background: var(--card-bg);
204-
border: 1px solid var(--border-color);
205-
border-radius: 8px;
206-
padding: 20px;
207-
margin-bottom: 16px;
208-
}
209-
210-
.setting-group h3 {
211-
font-size: 15px;
212-
font-weight: 600;
213-
color: var(--text-primary);
214-
margin: 0 0 4px;
215-
}
216-
217-
.setting-group .description {
218-
font-size: 13px;
219-
color: var(--text-secondary);
220-
margin: 0 0 16px;
221-
}
222-
223-
.setting {
224-
margin-bottom: 16px;
225-
}
226-
227-
.setting:last-child {
228-
margin-bottom: 0;
229-
}
230-
231162
.setting label {
232163
display: block;
233164
font-size: 13px;
@@ -276,13 +207,6 @@
276207
white-space: nowrap;
277208
}
278209
279-
.setting .hint {
280-
display: block;
281-
font-size: 12px;
282-
color: var(--text-tertiary);
283-
margin-top: 4px;
284-
}
285-
286210
.actions {
287211
display: flex;
288212
justify-content: flex-end;
@@ -294,35 +218,5 @@
294218
.btn-secondary,
295219
.btn-primary {
296220
padding: 8px 16px;
297-
border-radius: 6px;
298-
font-size: 13px;
299-
font-weight: 500;
300-
cursor: pointer;
301-
}
302-
303-
.btn-secondary {
304-
border: 1px solid var(--border-color);
305-
background: var(--button-secondary-bg);
306-
color: var(--text-primary);
307-
}
308-
309-
.btn-secondary:hover:not(:disabled) {
310-
background: var(--button-secondary-hover);
311-
}
312-
313-
.btn-primary {
314-
border: none;
315-
background: var(--accent-color);
316-
color: white;
317-
}
318-
319-
.btn-primary:hover:not(:disabled) {
320-
background: var(--accent-hover);
321-
}
322-
323-
.btn-secondary:disabled,
324-
.btn-primary:disabled {
325-
opacity: 0.5;
326-
cursor: not-allowed;
327221
}
328222
</style>

‎src/components/LogViewer.svelte‎

Lines changed: 0 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -139,20 +139,10 @@
139139
}
140140
141141
.header {
142-
display: flex;
143-
align-items: center;
144-
justify-content: space-between;
145142
margin-bottom: 16px;
146143
flex-shrink: 0;
147144
}
148145
149-
.header h2 {
150-
font-size: 18px;
151-
font-weight: 600;
152-
color: var(--text-primary);
153-
margin: 0;
154-
}
155-
156146
.controls {
157147
display: flex;
158148
align-items: center;
@@ -192,12 +182,6 @@
192182
}
193183
194184
.error-banner {
195-
padding: 10px 14px;
196-
background: var(--error-bg);
197-
border: 1px solid var(--error-border);
198-
border-radius: 6px;
199-
color: var(--error-color);
200-
font-size: 13px;
201185
margin-bottom: 12px;
202186
flex-shrink: 0;
203187
}
@@ -215,8 +199,6 @@
215199
216200
.loading,
217201
.empty {
218-
padding: 24px;
219-
text-align: center;
220202
color: var(--log-text-secondary);
221203
}
222204

0 commit comments

Comments
 (0)