Skip to content

Commit 509471a

Browse files
MathiasVDAMathiasVDA
committed
chore: refactor css to align with themes and variable usage
1 parent 60c0280 commit 509471a

File tree

4 files changed

+111
-128
lines changed

4 files changed

+111
-128
lines changed

‎styles/controls.css‎

Lines changed: 70 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@
88
align-items: center;
99
gap: 12px;
1010
padding: 6px 12px;
11-
background: var(--table-control-background, #f5f5f5);
12-
border-bottom: 1px solid var(--table-control-border, #dddddd);
11+
background: var(--table-control-background);
12+
border-bottom: 1px solid var(--table-control-border);
1313
flex-wrap: wrap;
1414
}
1515

@@ -22,7 +22,7 @@
2222
.yasgui-table-control-separator {
2323
width: 1px;
2424
height: 20px;
25-
background: var(--table-control-border, #dddddd);
25+
background: var(--table-control-border);
2626
}
2727

2828
/* Search input */
@@ -32,60 +32,60 @@
3232

3333
.yasgui-table-search input {
3434
padding: 6px 32px 0px 10px;
35-
border: 1px solid var(--table-control-border, #dddddd);
35+
border: 1px solid var(--table-control-border);
3636
border-radius: 4px;
3737
font-size: 14px;
3838
min-width: 200px;
39-
background: var(--table-background, #ffffff);
40-
color: var(--table-text, #000000);
39+
background: var(--table-background);
40+
color: var(--table-text);
4141
}
4242

4343
.yasgui-table-search input:focus {
4444
outline: none;
45-
border-color: var(--table-primary, #1976d2);
45+
border-color: var(--table-primary);
4646
}
4747

4848
.yasgui-table-search-icon {
4949
position: absolute;
5050
right: 8px;
5151
top: 50%;
5252
transform: translateY(-50%);
53-
color: var(--table-text-muted, #999999);
53+
color: var(--table-text-muted);
5454
pointer-events: none;
5555
}
5656

5757
/* Buttons */
5858
.yasgui-table-button {
5959
padding: 6px 12px;
60-
border: 1px solid var(--table-control-border, #dddddd);
60+
border: 1px solid var(--table-control-border);
6161
border-radius: 4px;
62-
background: var(--table-background, #ffffff);
63-
color: var(--table-text, #000000);
62+
background: var(--table-background);
63+
color: var(--table-text);
6464
font-size: 14px;
6565
cursor: pointer;
6666
transition: background 0.2s;
6767
}
6868

6969
.yasgui-table-button:hover {
70-
background: var(--table-control-hover, #e8e8e8);
70+
background: var(--table-control-hover);
7171
}
7272

7373
.yasgui-table-button:active {
7474
transform: translateY(1px);
7575
}
7676

7777
.yasgui-table-button.active {
78-
background: var(--table-primary, #1976d2);
78+
background: var(--table-primary);
7979
color: #ffffff;
80-
border-color: var(--table-primary, #1976d2);
80+
border-color: var(--table-primary);
8181
}
8282

8383
/* Icon buttons */
8484
.yasgui-table-icon-button {
8585
padding: 6px 6px;
86-
border: 1px solid var(--table-control-border, #dddddd);
86+
border: 1px solid var(--table-control-border);
8787
border-radius: 4px;
88-
background: var(--table-background, #ffffff);
88+
background: var(--table-background);
8989
cursor: pointer;
9090
display: inline-flex;
9191
align-items: center;
@@ -94,7 +94,7 @@
9494
}
9595

9696
.yasgui-table-icon-button:hover {
97-
background: var(--table-control-hover, #e8e8e8);
97+
background: var(--table-control-hover);
9898
}
9999

100100
.yasgui-table-icon-button svg {
@@ -106,7 +106,7 @@
106106
/* Labels */
107107
.yasgui-table-label {
108108
font-size: 14px;
109-
color: var(--table-text, #000000);
109+
color: var(--table-text);
110110
margin-right: 4px;
111111
}
112112

@@ -116,37 +116,37 @@
116116
align-items: center;
117117
gap: 12px;
118118
padding: 6px 12px;
119-
background: var(--table-control-background, #f5f5f5);
120-
border-bottom: 1px solid var(--table-control-border, #dddddd);
119+
background: var(--table-control-background);
120+
border-bottom: 1px solid var(--table-control-border);
121121
}
122122

123123
.table-search-input {
124124
flex: 1;
125125
min-width: 200px;
126126
max-width: 400px;
127127
padding: 6px 12px;
128-
border: 1px solid var(--table-control-border, #dddddd);
128+
border: 1px solid var(--table-control-border);
129129
border-radius: 4px;
130-
background: var(--table-background, #ffffff);
131-
color: var(--table-text, #000000);
130+
background: var(--table-background);
131+
color: var(--table-text);
132132
font-size: 14px;
133133
font-family: inherit;
134134
transition: border-color 0.2s ease;
135135
}
136136

137137
.table-search-input:focus {
138138
outline: none;
139-
border-color: var(--table-primary, #1976d2);
139+
border-color: var(--table-primary);
140140
box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.1);
141141
}
142142

143143
.table-search-input::placeholder {
144-
color: var(--table-text-muted, #999999);
144+
color: var(--table-text-muted);
145145
}
146146

147147
.table-row-count {
148148
font-size: 13px;
149-
color: var(--table-text-secondary, #666666);
149+
color: var(--table-text-secondary);
150150
white-space: nowrap;
151151
user-select: none;
152152
}
@@ -163,8 +163,8 @@
163163
display: flex;
164164
align-items: center;
165165
justify-content: space-between;
166-
background: var(--table-control-background, #f5f5f5);
167-
border-bottom: 1px solid var(--table-control-border, #dddddd);
166+
background: var(--table-control-background);
167+
border-bottom: 1px solid var(--table-control-border);
168168
}
169169

170170
.table-controls-toolbar .table-search-control {
@@ -182,16 +182,16 @@
182182

183183
.table-control-label {
184184
font-size: 13px;
185-
color: var(--table-text-secondary, #666666);
185+
color: var(--table-text-secondary);
186186
margin-right: 4px;
187187
}
188188

189189
.table-toggle-button {
190190
padding: 6px 12px;
191-
border: 1px solid var(--table-control-border, #dddddd);
191+
border: 1px solid var(--table-control-border);
192192
border-radius: 4px;
193-
background: var(--table-background, #ffffff);
194-
color: var(--table-text, #000000);
193+
background: var(--table-background);
194+
color: var(--table-text);
195195
font-size: 13px;
196196
font-family: inherit;
197197
cursor: pointer;
@@ -200,18 +200,18 @@
200200
}
201201

202202
.table-toggle-button:hover {
203-
background: var(--table-control-hover, #e8e8e8);
204-
border-color: var(--table-primary, #1976d2);
203+
background: var(--table-control-hover);
204+
border-color: var(--table-primary);
205205
}
206206

207207
.table-toggle-button:active {
208208
transform: translateY(1px);
209209
}
210210

211211
.table-toggle-button.active {
212-
background: var(--table-primary, #1976d2);
212+
background: var(--table-primary);
213213
color: #ffffff;
214-
border-color: var(--table-primary, #1976d2);
214+
border-color: var(--table-primary);
215215
}
216216

217217
.table-toggle-button:focus {
@@ -238,8 +238,8 @@
238238
top: 50%;
239239
left: 50%;
240240
transform: translate(-50%, -50%);
241-
background: var(--table-background, #ffffff);
242-
border: 1px solid var(--table-border, #dddddd);
241+
background: var(--table-background);
242+
border: 1px solid var(--table-border);
243243
border-radius: 8px;
244244
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
245245
z-index: 1001;
@@ -255,22 +255,22 @@
255255
align-items: center;
256256
justify-content: space-between;
257257
padding: 6px 20px;
258-
border-bottom: 1px solid var(--table-border, #dddddd);
258+
border-bottom: 1px solid var(--table-border);
259259
}
260260

261261
.table-modal-title {
262262
margin: 0;
263263
font-size: 18px;
264264
font-weight: 600;
265-
color: var(--table-text, #000000);
265+
color: var(--table-text);
266266
}
267267

268268
.table-modal-close {
269269
background: none;
270270
border: none;
271271
font-size: 28px;
272272
line-height: 1;
273-
color: var(--table-text-muted, #999999);
273+
color: var(--table-text-muted);
274274
cursor: pointer;
275275
padding: 0;
276276
width: 32px;
@@ -283,8 +283,8 @@
283283
}
284284

285285
.table-modal-close:hover {
286-
background: var(--table-control-hover, #e8e8e8);
287-
color: var(--table-text, #000000);
286+
background: var(--table-control-hover);
287+
color: var(--table-text);
288288
}
289289

290290
.table-modal-content {
@@ -294,7 +294,7 @@
294294
font-family: monospace;
295295
font-size: 14px;
296296
line-height: 1.6;
297-
color: var(--table-text, #000000);
297+
color: var(--table-text);
298298
white-space: pre-wrap;
299299
word-break: break-word;
300300
}
@@ -304,14 +304,14 @@
304304
justify-content: flex-end;
305305
gap: 12px;
306306
padding: 6px 20px;
307-
border-top: 1px solid var(--table-border, #dddddd);
307+
border-top: 1px solid var(--table-border);
308308
}
309309

310310
.table-modal-button {
311311
padding: 6px 16px;
312-
border: 1px solid var(--table-primary, #1976d2);
312+
border: 1px solid var(--table-primary);
313313
border-radius: 4px;
314-
background: var(--table-primary, #1976d2);
314+
background: var(--table-primary);
315315
color: #ffffff;
316316
font-size: 14px;
317317
font-family: inherit;
@@ -320,18 +320,18 @@
320320
}
321321

322322
.table-modal-button:hover {
323-
background: var(--table-link-hover, #1565c0);
324-
border-color: var(--table-link-hover, #1565c0);
323+
background: var(--table-link-hover);
324+
border-color: var(--table-link-hover);
325325
}
326326

327327
.table-modal-button-secondary {
328-
background: var(--table-background, #ffffff);
329-
color: var(--table-text, #000000);
330-
border-color: var(--table-control-border, #dddddd);
328+
background: var(--table-background);
329+
color: var(--table-text);
330+
border-color: var(--table-control-border);
331331
}
332332

333333
.table-modal-button-secondary:hover {
334-
background: var(--table-control-hover, #e8e8e8);
334+
background: var(--table-control-hover);
335335
}
336336

337337
/* Fit Controls */
@@ -340,24 +340,24 @@
340340
align-items: center;
341341
gap: 8px;
342342
padding: 6px 12px;
343-
border-left: 1px solid var(--table-control-border, #dddddd);
343+
border-left: 1px solid var(--table-control-border);
344344
}
345345

346346
.table-fit-button {
347347
padding: 6px 12px;
348-
border: 1px solid var(--table-control-border, #dddddd);
348+
border: 1px solid var(--table-control-border);
349349
border-radius: 4px;
350-
background: var(--table-background, #ffffff);
351-
color: var(--table-text, #000000);
350+
background: var(--table-background);
351+
color: var(--table-text);
352352
font-size: 13px;
353353
font-family: inherit;
354354
cursor: pointer;
355355
transition: all 0.2s ease;
356356
}
357357

358358
.table-fit-button:hover {
359-
background: var(--table-control-hover, #e8e8e8);
360-
border-color: var(--table-primary, #1976d2);
359+
background: var(--table-control-hover);
360+
border-color: var(--table-primary);
361361
}
362362

363363
.table-fit-button:active {
@@ -370,43 +370,43 @@
370370
align-items: center;
371371
gap: 8px;
372372
padding: 6px 12px;
373-
border-left: 1px solid var(--table-control-border, #dddddd);
373+
border-left: 1px solid var(--table-control-border);
374374
}
375375

376376
.table-export-label {
377377
font-size: 13px;
378-
color: var(--table-text-secondary, #666666);
378+
color: var(--table-text-secondary);
379379
margin-right: 4px;
380380
}
381381

382382
.table-export-button {
383383
padding: 6px 12px;
384-
border: 1px solid var(--table-control-border, #dddddd);
384+
border: 1px solid var(--table-control-border);
385385
border-radius: 4px;
386-
background: var(--table-background, #ffffff);
387-
color: var(--table-text, #000000);
386+
background: var(--table-background);
387+
color: var(--table-text);
388388
font-size: 13px;
389389
font-family: inherit;
390390
cursor: pointer;
391391
transition: all 0.2s ease;
392392
}
393393

394394
.table-export-button:hover {
395-
background: var(--table-control-hover, #e8e8e8);
396-
border-color: var(--table-primary, #1976d2);
395+
background: var(--table-control-hover);
396+
border-color: var(--table-primary);
397397
}
398398

399399
.table-export-button:active {
400400
transform: translateY(1px);
401401
}
402402

403403
.table-export-download {
404-
background: var(--table-primary, #1976d2);
404+
background: var(--table-primary);
405405
color: #ffffff;
406-
border-color: var(--table-primary, #1976d2);
406+
border-color: var(--table-primary);
407407
}
408408

409409
.table-export-download:hover {
410-
background: var(--table-link-hover, #1565c0);
411-
border-color: var(--table-link-hover, #1565c0);
410+
background: var(--table-link-hover);
411+
border-color: var(--table-link-hover);
412412
}

0 commit comments

Comments
 (0)