@meshmakers/octo-ui 3.4.1450 → 3.4.1490
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +108 -0
- package/entity-forms/README.md +460 -0
- package/fesm2022/meshmakers-octo-ui-branding-settings.mjs +2 -2
- package/fesm2022/meshmakers-octo-ui-branding-settings.mjs.map +1 -1
- package/fesm2022/meshmakers-octo-ui-entity-forms.mjs +7880 -0
- package/fesm2022/meshmakers-octo-ui-entity-forms.mjs.map +1 -0
- package/fesm2022/meshmakers-octo-ui-tree-navigation-settings.mjs +2 -2
- package/fesm2022/meshmakers-octo-ui-tree-navigation-settings.mjs.map +1 -1
- package/fesm2022/meshmakers-octo-ui.mjs +985 -402
- package/fesm2022/meshmakers-octo-ui.mjs.map +1 -1
- package/lib/runtime-browser/styles/_button.scss +87 -0
- package/lib/runtime-browser/styles/_field-input.scss +16 -0
- package/lib/runtime-browser/styles/_flat-button.scss +14 -0
- package/lib/runtime-browser/styles/_index.scss +1 -1
- package/lib/runtime-browser/styles/_styles.scss +760 -1407
- package/lib/runtime-browser/styles/_theme.scss +248 -288
- package/lib/runtime-browser/styles/_variables.scss +26 -41
- package/package.json +5 -1
- package/types/meshmakers-octo-ui-entity-forms.d.ts +2594 -0
- package/types/meshmakers-octo-ui.d.ts +197 -4
- package/lib/runtime-browser/styles/_lcars-button.scss +0 -57
- package/lib/runtime-browser/styles/_lcars-flat-btn.scss +0 -11
- package/lib/runtime-browser/styles/_lcars-input.scss +0 -13
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
@use "sass:color";
|
|
2
2
|
@use "variables" as *;
|
|
3
|
-
@use "
|
|
4
|
-
@use "
|
|
5
|
-
@use "
|
|
3
|
+
@use "flat-button" as *;
|
|
4
|
+
@use "field-input" as *;
|
|
5
|
+
@use "button" as *;
|
|
6
6
|
|
|
7
7
|
@mixin styles {
|
|
8
8
|
// Direct dockview element overrides - needed because ViewEncapsulation blocks global styles
|
|
@@ -14,30 +14,31 @@
|
|
|
14
14
|
|
|
15
15
|
.dv-tabs-container,
|
|
16
16
|
.dv-tabs-and-actions-container {
|
|
17
|
-
background-color: var(--iron-navy)
|
|
18
|
-
border-bottom: 1px solid var(--octo-mint-20)
|
|
17
|
+
background-color: var(--theme-bg-elevated, var(--iron-navy));
|
|
18
|
+
border-bottom: 1px solid var(--theme-border-subtle, var(--octo-mint-20));
|
|
19
19
|
}
|
|
20
20
|
|
|
21
|
+
// Dockview tabs: sentence case in the UI face, accent underline when active.
|
|
22
|
+
// Dockview sets its own tab colours inline via --dv-* variables, so the
|
|
23
|
+
// background/colour declarations still need !important to win.
|
|
21
24
|
.dv-tab {
|
|
22
|
-
background-color:
|
|
23
|
-
color: var(--ash-blue) !important;
|
|
24
|
-
font-family:
|
|
25
|
-
font-weight: 500
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
transition: all 0.15s ease !important;
|
|
30
|
-
border: none !important;
|
|
25
|
+
background-color: transparent !important;
|
|
26
|
+
color: var(--theme-text-secondary, var(--ash-blue)) !important;
|
|
27
|
+
font-family: var(--theme-font-ui, "Roboto", sans-serif);
|
|
28
|
+
font-weight: 500;
|
|
29
|
+
font-size: 0.75rem;
|
|
30
|
+
transition: background-color var(--theme-motion-fast, 120ms) var(--theme-motion-easing, ease), color var(--theme-motion-fast, 120ms) var(--theme-motion-easing, ease);
|
|
31
|
+
border: none;
|
|
31
32
|
|
|
32
33
|
&.dv-active-tab {
|
|
33
|
-
background-color: var(--surface-elevated) !important;
|
|
34
|
-
color: var(--octo-
|
|
35
|
-
|
|
34
|
+
background-color: var(--theme-bg-surface, var(--surface-elevated)) !important;
|
|
35
|
+
color: var(--theme-text-primary, var(--octo-text-color)) !important;
|
|
36
|
+
box-shadow: inset 0 -2px 0 var(--theme-accent, var(--octo-mint));
|
|
36
37
|
}
|
|
37
38
|
|
|
38
39
|
&:hover:not(.dv-active-tab) {
|
|
39
|
-
background-color: var(--octo-mint-15) !important;
|
|
40
|
-
color: var(--octo-text-color) !important;
|
|
40
|
+
background-color: var(--theme-bg-hover, var(--octo-mint-15)) !important;
|
|
41
|
+
color: var(--theme-text-primary, var(--octo-text-color)) !important;
|
|
41
42
|
}
|
|
42
43
|
}
|
|
43
44
|
|
|
@@ -45,7 +46,7 @@
|
|
|
45
46
|
color: var(--ash-blue) !important;
|
|
46
47
|
|
|
47
48
|
&:hover {
|
|
48
|
-
color: var(--octo-mint) !important;
|
|
49
|
+
color: var(--theme-text-accent, var(--octo-mint)) !important;
|
|
49
50
|
background-color: var(--octo-mint-20) !important;
|
|
50
51
|
}
|
|
51
52
|
}
|
|
@@ -60,17 +61,15 @@
|
|
|
60
61
|
|
|
61
62
|
&:hover,
|
|
62
63
|
&.dv-active {
|
|
63
|
-
background-color: var(--octo-mint) !important;
|
|
64
|
-
box-shadow:
|
|
64
|
+
background-color: var(--theme-text-accent, var(--octo-mint)) !important;
|
|
65
|
+
box-shadow: none;
|
|
65
66
|
}
|
|
66
67
|
}
|
|
67
68
|
|
|
68
69
|
.dv-tabs-overflow-container {
|
|
69
70
|
background-color: var(--iron-navy) !important;
|
|
70
|
-
border: 1px solid var(--octo-mint-30) !important;
|
|
71
|
-
box-shadow:
|
|
72
|
-
0 4px 20px rgba(0, 0, 0, 0.4),
|
|
73
|
-
0 0 15px var(--octo-mint-10) !important;
|
|
71
|
+
border: 1px solid var(--theme-border-default, var(--octo-mint-30)) !important;
|
|
72
|
+
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
|
|
74
73
|
}
|
|
75
74
|
|
|
76
75
|
// Dockview panel content areas
|
|
@@ -90,7 +89,7 @@
|
|
|
90
89
|
color: var(--octo-text-color) !important;
|
|
91
90
|
}
|
|
92
91
|
|
|
93
|
-
// Styles Panel
|
|
92
|
+
// Styles Panel theming (overrides library defaults)
|
|
94
93
|
// Use ::ng-deep to penetrate Angular's ViewEncapsulation
|
|
95
94
|
::ng-deep mm-styles-panel {
|
|
96
95
|
.panel-container {
|
|
@@ -100,7 +99,7 @@
|
|
|
100
99
|
}
|
|
101
100
|
|
|
102
101
|
.panel-toolbar {
|
|
103
|
-
border-bottom-color: var(--octo-mint-20) !important;
|
|
102
|
+
border-bottom-color: var(--theme-border-default, var(--octo-mint-20)) !important;
|
|
104
103
|
flex-shrink: 0 !important;
|
|
105
104
|
}
|
|
106
105
|
|
|
@@ -118,28 +117,28 @@
|
|
|
118
117
|
|
|
119
118
|
.add-button {
|
|
120
119
|
background: var(--iron-navy) !important;
|
|
121
|
-
border-color: var(--octo-mint-30) !important;
|
|
120
|
+
border-color: var(--theme-border-default, var(--octo-mint-30)) !important;
|
|
122
121
|
color: var(--ash-blue) !important;
|
|
123
122
|
|
|
124
123
|
&:hover {
|
|
125
124
|
background: var(--octo-mint-15) !important;
|
|
126
|
-
border-color: var(--octo-mint) !important;
|
|
127
|
-
color: var(--octo-mint) !important;
|
|
125
|
+
border-color: var(--theme-text-accent, var(--octo-mint)) !important;
|
|
126
|
+
color: var(--theme-text-accent, var(--octo-mint)) !important;
|
|
128
127
|
}
|
|
129
128
|
}
|
|
130
129
|
|
|
131
130
|
.style-item {
|
|
132
131
|
background: var(--surface-elevated) !important;
|
|
133
|
-
border-color: var(--octo-mint-20) !important;
|
|
132
|
+
border-color: var(--theme-border-default, var(--octo-mint-20)) !important;
|
|
134
133
|
|
|
135
134
|
&:hover {
|
|
136
135
|
background: var(--iron-navy) !important;
|
|
137
|
-
border-color: var(--octo-mint) !important;
|
|
136
|
+
border-color: var(--theme-text-accent, var(--octo-mint)) !important;
|
|
138
137
|
}
|
|
139
138
|
|
|
140
139
|
&.selected {
|
|
141
140
|
background: var(--octo-mint-15) !important;
|
|
142
|
-
border-color: var(--octo-mint) !important;
|
|
141
|
+
border-color: var(--theme-text-accent, var(--octo-mint)) !important;
|
|
143
142
|
}
|
|
144
143
|
}
|
|
145
144
|
|
|
@@ -162,7 +161,7 @@
|
|
|
162
161
|
|
|
163
162
|
.style-editor {
|
|
164
163
|
background: var(--iron-navy) !important;
|
|
165
|
-
border-top-color: var(--octo-mint-20) !important;
|
|
164
|
+
border-top-color: var(--theme-border-default, var(--octo-mint-20)) !important;
|
|
166
165
|
}
|
|
167
166
|
|
|
168
167
|
.editor-section h4 {
|
|
@@ -175,19 +174,19 @@
|
|
|
175
174
|
}
|
|
176
175
|
input[type="text"],
|
|
177
176
|
input[type="number"] {
|
|
178
|
-
@include
|
|
177
|
+
@include field-input;
|
|
179
178
|
}
|
|
180
179
|
input[type="color"] {
|
|
181
|
-
border-color: var(--octo-mint-30) !important;
|
|
180
|
+
border-color: var(--theme-border-default, var(--octo-mint-30)) !important;
|
|
182
181
|
}
|
|
183
182
|
}
|
|
184
183
|
.line-type-select {
|
|
185
|
-
@include
|
|
184
|
+
@include field-input;
|
|
186
185
|
}
|
|
187
186
|
|
|
188
187
|
.line-preview {
|
|
189
188
|
background: var(--deep-sea) !important;
|
|
190
|
-
border-color: var(--octo-mint-30) !important;
|
|
189
|
+
border-color: var(--theme-border-default, var(--octo-mint-30)) !important;
|
|
191
190
|
}
|
|
192
191
|
|
|
193
192
|
.opacity-value {
|
|
@@ -196,7 +195,7 @@
|
|
|
196
195
|
|
|
197
196
|
.panel-footer {
|
|
198
197
|
background: var(--iron-navy) !important;
|
|
199
|
-
border-top-color: var(--octo-mint-20) !important;
|
|
198
|
+
border-top-color: var(--theme-border-default, var(--octo-mint-20)) !important;
|
|
200
199
|
|
|
201
200
|
.hint {
|
|
202
201
|
color: var(--ash-blue-70) !important;
|
|
@@ -210,7 +209,7 @@
|
|
|
210
209
|
background: var(--surface-elevated) !important;
|
|
211
210
|
|
|
212
211
|
.palette-search input {
|
|
213
|
-
@include
|
|
212
|
+
@include field-input;
|
|
214
213
|
&::placeholder {
|
|
215
214
|
color: var(--ash-blue) !important;
|
|
216
215
|
}
|
|
@@ -222,15 +221,13 @@
|
|
|
222
221
|
|
|
223
222
|
.palette-category {
|
|
224
223
|
background: transparent !important;
|
|
225
|
-
border-bottom: 1px solid var(--octo-mint-10) !important;
|
|
224
|
+
border-bottom: 1px solid var(--theme-border-subtle, var(--octo-mint-10)) !important;
|
|
226
225
|
|
|
227
226
|
.category-header {
|
|
228
227
|
background: var(--iron-navy-50) !important;
|
|
229
228
|
color: var(--ash-blue) !important;
|
|
230
|
-
font-family:
|
|
229
|
+
font-family: var(--theme-font-ui, "Roboto", sans-serif) !important;
|
|
231
230
|
font-size: 11px !important;
|
|
232
|
-
text-transform: uppercase !important;
|
|
233
|
-
letter-spacing: 0.5px !important;
|
|
234
231
|
padding: 8px 12px !important;
|
|
235
232
|
cursor: pointer;
|
|
236
233
|
transition: all 0.15s ease;
|
|
@@ -261,7 +258,7 @@
|
|
|
261
258
|
|
|
262
259
|
.palette-element {
|
|
263
260
|
background: var(--iron-navy-50) !important;
|
|
264
|
-
border: 1px solid var(--octo-mint-15) !important;
|
|
261
|
+
border: 1px solid var(--theme-border-subtle, var(--octo-mint-15)) !important;
|
|
265
262
|
border-radius: 4px !important;
|
|
266
263
|
color: var(--octo-text-color) !important;
|
|
267
264
|
transition: all 0.15s ease !important;
|
|
@@ -275,7 +272,7 @@
|
|
|
275
272
|
|
|
276
273
|
.element-preview {
|
|
277
274
|
svg {
|
|
278
|
-
stroke: var(--octo-mint) !important;
|
|
275
|
+
stroke: var(--theme-text-accent, var(--octo-mint)) !important;
|
|
279
276
|
fill: none !important;
|
|
280
277
|
}
|
|
281
278
|
}
|
|
@@ -283,7 +280,6 @@
|
|
|
283
280
|
.element-label {
|
|
284
281
|
color: var(--ash-blue) !important;
|
|
285
282
|
font-size: 10px !important;
|
|
286
|
-
text-transform: uppercase !important;
|
|
287
283
|
}
|
|
288
284
|
}
|
|
289
285
|
}
|
|
@@ -300,7 +296,7 @@
|
|
|
300
296
|
.no-selection,
|
|
301
297
|
.multi-selection {
|
|
302
298
|
color: var(--ash-blue) !important;
|
|
303
|
-
font-family:
|
|
299
|
+
font-family: var(--theme-font-ui, "Roboto", sans-serif) !important;
|
|
304
300
|
|
|
305
301
|
.hint {
|
|
306
302
|
color: var(--ash-blue-70) !important;
|
|
@@ -309,9 +305,9 @@
|
|
|
309
305
|
|
|
310
306
|
// Section headers
|
|
311
307
|
.section-header {
|
|
312
|
-
color: var(--octo-
|
|
313
|
-
border-bottom-color: var(--octo-mint-20) !important;
|
|
314
|
-
font-family:
|
|
308
|
+
color: var(--theme-text-primary, var(--octo-text-color)) !important;
|
|
309
|
+
border-bottom-color: var(--theme-border-default, var(--octo-mint-20)) !important;
|
|
310
|
+
font-family: var(--theme-font-ui, "Roboto", sans-serif) !important;
|
|
315
311
|
}
|
|
316
312
|
|
|
317
313
|
// Labels
|
|
@@ -325,7 +321,7 @@
|
|
|
325
321
|
.property-row select,
|
|
326
322
|
.style-class-select,
|
|
327
323
|
.line-type-select {
|
|
328
|
-
@include
|
|
324
|
+
@include field-input;
|
|
329
325
|
}
|
|
330
326
|
|
|
331
327
|
.property-row select option,
|
|
@@ -337,21 +333,21 @@
|
|
|
337
333
|
|
|
338
334
|
// Checkboxes
|
|
339
335
|
.property-row input[type="checkbox"] {
|
|
340
|
-
accent-color: var(--octo-mint) !important;
|
|
336
|
+
accent-color: var(--theme-text-accent, var(--octo-mint)) !important;
|
|
341
337
|
}
|
|
342
338
|
|
|
343
339
|
// Color inputs
|
|
344
340
|
.property-row input[type="color"] {
|
|
345
341
|
background: var(--deep-sea) !important;
|
|
346
|
-
border: 1px solid var(--octo-mint-30) !important;
|
|
342
|
+
border: 1px solid var(--theme-border-default, var(--octo-mint-30)) !important;
|
|
347
343
|
border-radius: 4px !important;
|
|
348
344
|
}
|
|
349
345
|
|
|
350
346
|
// Type badge
|
|
351
347
|
.type-badge {
|
|
352
348
|
background: var(--octo-mint-15) !important;
|
|
353
|
-
color: var(--octo-mint) !important;
|
|
354
|
-
border: 1px solid var(--octo-mint-30) !important;
|
|
349
|
+
color: var(--theme-text-accent, var(--octo-mint)) !important;
|
|
350
|
+
border: 1px solid var(--theme-border-default, var(--octo-mint-30)) !important;
|
|
355
351
|
}
|
|
356
352
|
|
|
357
353
|
// Opacity value text
|
|
@@ -367,51 +363,39 @@
|
|
|
367
363
|
// Line preview
|
|
368
364
|
.line-preview {
|
|
369
365
|
background: var(--iron-navy) !important;
|
|
370
|
-
border-color: var(--octo-mint-20) !important;
|
|
366
|
+
border-color: var(--theme-border-default, var(--octo-mint-20)) !important;
|
|
371
367
|
}
|
|
372
368
|
|
|
373
369
|
// Opacity slider
|
|
374
370
|
.opacity-slider {
|
|
375
|
-
background:
|
|
376
|
-
to right,
|
|
377
|
-
transparent,
|
|
378
|
-
var(--octo-mint)
|
|
379
|
-
) !important;
|
|
371
|
+
background: var(--theme-border-default, var(--octo-mint-20)) !important;
|
|
380
372
|
|
|
381
373
|
&::-webkit-slider-thumb {
|
|
382
|
-
background: var(--octo-mint) !important;
|
|
383
|
-
border-color: var(--surface-elevated) !important;
|
|
374
|
+
background: var(--theme-accent, var(--octo-mint)) !important;
|
|
375
|
+
border-color: var(--theme-bg-surface, var(--surface-elevated)) !important;
|
|
384
376
|
}
|
|
385
377
|
|
|
386
378
|
&::-moz-range-thumb {
|
|
387
|
-
background: var(--octo-mint) !important;
|
|
388
|
-
border-color: var(--surface-elevated) !important;
|
|
379
|
+
background: var(--theme-accent, var(--octo-mint)) !important;
|
|
380
|
+
border-color: var(--theme-bg-surface, var(--surface-elevated)) !important;
|
|
389
381
|
}
|
|
390
382
|
}
|
|
391
383
|
|
|
392
384
|
// Image preview container
|
|
393
385
|
.image-preview-container {
|
|
394
386
|
background: var(--iron-navy) !important;
|
|
395
|
-
border-color: var(--octo-mint-20) !important;
|
|
387
|
+
border-color: var(--theme-border-default, var(--octo-mint-20)) !important;
|
|
396
388
|
}
|
|
397
389
|
|
|
398
390
|
// File upload button
|
|
399
391
|
.file-upload-button {
|
|
400
|
-
background:
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
var(--octo-mint-05)
|
|
404
|
-
) !important;
|
|
405
|
-
border: 1px solid var(--octo-mint-30) !important;
|
|
406
|
-
color: var(--octo-mint) !important;
|
|
392
|
+
background: transparent !important;
|
|
393
|
+
border: 1px solid var(--theme-border-default, var(--octo-mint-30)) !important;
|
|
394
|
+
color: var(--theme-text-accent, var(--octo-mint)) !important;
|
|
407
395
|
|
|
408
396
|
&:hover {
|
|
409
|
-
background:
|
|
410
|
-
|
|
411
|
-
var(--octo-mint-25),
|
|
412
|
-
var(--octo-mint-15)
|
|
413
|
-
) !important;
|
|
414
|
-
border-color: var(--octo-mint) !important;
|
|
397
|
+
background: var(--theme-bg-hover) !important;
|
|
398
|
+
border-color: var(--theme-text-accent, var(--octo-mint)) !important;
|
|
415
399
|
}
|
|
416
400
|
}
|
|
417
401
|
|
|
@@ -439,7 +423,7 @@
|
|
|
439
423
|
|
|
440
424
|
.editor-toolbar {
|
|
441
425
|
background: var(--iron-navy) !important;
|
|
442
|
-
border-bottom: 1px solid var(--octo-mint-20) !important;
|
|
426
|
+
border-bottom: 1px solid var(--theme-border-default, var(--octo-mint-20)) !important;
|
|
443
427
|
}
|
|
444
428
|
|
|
445
429
|
.section-content {
|
|
@@ -450,21 +434,13 @@
|
|
|
450
434
|
color: var(--ash-blue) !important;
|
|
451
435
|
|
|
452
436
|
button {
|
|
453
|
-
background:
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
var(--octo-mint-05)
|
|
457
|
-
) !important;
|
|
458
|
-
border: 1px solid var(--octo-mint-30) !important;
|
|
459
|
-
color: var(--octo-mint) !important;
|
|
437
|
+
background: transparent !important;
|
|
438
|
+
border: 1px solid var(--theme-border-default, var(--octo-mint-30)) !important;
|
|
439
|
+
color: var(--theme-text-accent, var(--octo-mint)) !important;
|
|
460
440
|
|
|
461
441
|
&:hover {
|
|
462
|
-
background:
|
|
463
|
-
|
|
464
|
-
var(--octo-mint-25),
|
|
465
|
-
var(--octo-mint-15)
|
|
466
|
-
) !important;
|
|
467
|
-
border-color: var(--octo-mint) !important;
|
|
442
|
+
background: var(--theme-bg-hover) !important;
|
|
443
|
+
border-color: var(--theme-text-accent, var(--octo-mint)) !important;
|
|
468
444
|
}
|
|
469
445
|
}
|
|
470
446
|
}
|
|
@@ -472,14 +448,14 @@
|
|
|
472
448
|
// Animation items
|
|
473
449
|
.animation-item {
|
|
474
450
|
background: var(--iron-navy-50) !important;
|
|
475
|
-
border-color: var(--octo-mint-15) !important;
|
|
451
|
+
border-color: var(--theme-border-subtle, var(--octo-mint-15)) !important;
|
|
476
452
|
|
|
477
453
|
&:hover {
|
|
478
454
|
background: var(--iron-navy-70) !important;
|
|
479
455
|
}
|
|
480
456
|
|
|
481
457
|
&.expanded {
|
|
482
|
-
border-color: var(--octo-mint-30) !important;
|
|
458
|
+
border-color: var(--theme-border-default, var(--octo-mint-30)) !important;
|
|
483
459
|
}
|
|
484
460
|
}
|
|
485
461
|
|
|
@@ -505,7 +481,7 @@
|
|
|
505
481
|
color: var(--ash-blue) !important;
|
|
506
482
|
|
|
507
483
|
&:hover {
|
|
508
|
-
color: var(--octo-mint) !important;
|
|
484
|
+
color: var(--theme-text-accent, var(--octo-mint)) !important;
|
|
509
485
|
background: var(--octo-mint-10) !important;
|
|
510
486
|
}
|
|
511
487
|
|
|
@@ -525,7 +501,7 @@
|
|
|
525
501
|
// Edit form
|
|
526
502
|
.item-edit-form {
|
|
527
503
|
background: var(--iron-navy) !important;
|
|
528
|
-
border-top-color: var(--octo-mint-20) !important;
|
|
504
|
+
border-top-color: var(--theme-border-default, var(--octo-mint-20)) !important;
|
|
529
505
|
}
|
|
530
506
|
|
|
531
507
|
.form-row label {
|
|
@@ -537,7 +513,7 @@
|
|
|
537
513
|
}
|
|
538
514
|
|
|
539
515
|
.hint-text {
|
|
540
|
-
color: var(--octo-mint) !important;
|
|
516
|
+
color: var(--theme-text-accent, var(--octo-mint)) !important;
|
|
541
517
|
}
|
|
542
518
|
|
|
543
519
|
.input-with-unit .unit {
|
|
@@ -547,14 +523,14 @@
|
|
|
547
523
|
// Anchor grid
|
|
548
524
|
.anchor-point {
|
|
549
525
|
background: var(--deep-sea) !important;
|
|
550
|
-
border-color: var(--octo-mint-30) !important;
|
|
526
|
+
border-color: var(--theme-border-default, var(--octo-mint-30)) !important;
|
|
551
527
|
|
|
552
528
|
&:hover {
|
|
553
|
-
border-color: var(--octo-mint) !important;
|
|
529
|
+
border-color: var(--theme-text-accent, var(--octo-mint)) !important;
|
|
554
530
|
}
|
|
555
531
|
|
|
556
532
|
&.selected {
|
|
557
|
-
border-color: var(--octo-mint) !important;
|
|
533
|
+
border-color: var(--theme-text-accent, var(--octo-mint)) !important;
|
|
558
534
|
background: var(--octo-mint-20) !important;
|
|
559
535
|
}
|
|
560
536
|
}
|
|
@@ -570,12 +546,12 @@
|
|
|
570
546
|
// Preset picker
|
|
571
547
|
.preset-picker {
|
|
572
548
|
background: var(--surface-elevated) !important;
|
|
573
|
-
border-color: var(--octo-mint) !important;
|
|
549
|
+
border-color: var(--theme-text-accent, var(--octo-mint)) !important;
|
|
574
550
|
}
|
|
575
551
|
|
|
576
552
|
.preset-header {
|
|
577
553
|
background: var(--octo-mint-15) !important;
|
|
578
|
-
border-bottom-color: var(--octo-mint-30) !important;
|
|
554
|
+
border-bottom-color: var(--theme-border-default, var(--octo-mint-30)) !important;
|
|
579
555
|
color: var(--octo-text-color) !important;
|
|
580
556
|
}
|
|
581
557
|
|
|
@@ -585,11 +561,11 @@
|
|
|
585
561
|
|
|
586
562
|
.preset-button {
|
|
587
563
|
background: var(--deep-sea) !important;
|
|
588
|
-
border-color: var(--octo-mint-30) !important;
|
|
564
|
+
border-color: var(--theme-border-default, var(--octo-mint-30)) !important;
|
|
589
565
|
color: var(--octo-text-color) !important;
|
|
590
566
|
|
|
591
567
|
&:hover {
|
|
592
|
-
border-color: var(--octo-mint) !important;
|
|
568
|
+
border-color: var(--theme-text-accent, var(--octo-mint)) !important;
|
|
593
569
|
background: var(--octo-mint-15) !important;
|
|
594
570
|
}
|
|
595
571
|
}
|
|
@@ -597,11 +573,11 @@
|
|
|
597
573
|
// Path textarea
|
|
598
574
|
.path-textarea {
|
|
599
575
|
background: var(--deep-sea) !important;
|
|
600
|
-
border-color: var(--octo-mint-30) !important;
|
|
576
|
+
border-color: var(--theme-border-default, var(--octo-mint-30)) !important;
|
|
601
577
|
color: var(--octo-text-color) !important;
|
|
602
578
|
|
|
603
579
|
&:focus {
|
|
604
|
-
border-color: var(--octo-mint) !important;
|
|
580
|
+
border-color: var(--theme-text-accent, var(--octo-mint)) !important;
|
|
605
581
|
outline: none !important;
|
|
606
582
|
}
|
|
607
583
|
}
|
|
@@ -613,7 +589,7 @@
|
|
|
613
589
|
|
|
614
590
|
.editor-toolbar {
|
|
615
591
|
background: var(--iron-navy) !important;
|
|
616
|
-
border-bottom: 1px solid var(--octo-mint-20) !important;
|
|
592
|
+
border-bottom: 1px solid var(--theme-border-default, var(--octo-mint-20)) !important;
|
|
617
593
|
}
|
|
618
594
|
|
|
619
595
|
.properties-list {
|
|
@@ -631,7 +607,7 @@
|
|
|
631
607
|
// Property cards
|
|
632
608
|
.property-card {
|
|
633
609
|
background: var(--iron-navy) !important;
|
|
634
|
-
border: 1px solid var(--octo-mint-20) !important;
|
|
610
|
+
border: 1px solid var(--theme-border-default, var(--octo-mint-20)) !important;
|
|
635
611
|
border-radius: 8px !important;
|
|
636
612
|
|
|
637
613
|
&:hover {
|
|
@@ -639,7 +615,7 @@
|
|
|
639
615
|
}
|
|
640
616
|
|
|
641
617
|
&.editing {
|
|
642
|
-
border-color: var(--octo-mint) !important;
|
|
618
|
+
border-color: var(--theme-text-accent, var(--octo-mint)) !important;
|
|
643
619
|
box-shadow: 0 2px 8px var(--octo-mint-20) !important;
|
|
644
620
|
}
|
|
645
621
|
}
|
|
@@ -650,7 +626,7 @@
|
|
|
650
626
|
|
|
651
627
|
.property-type-badge {
|
|
652
628
|
background: var(--octo-mint-15) !important;
|
|
653
|
-
color: var(--octo-mint) !important;
|
|
629
|
+
color: var(--theme-text-accent, var(--octo-mint)) !important;
|
|
654
630
|
}
|
|
655
631
|
|
|
656
632
|
.property-unit {
|
|
@@ -671,7 +647,7 @@
|
|
|
671
647
|
}
|
|
672
648
|
|
|
673
649
|
.color-swatch {
|
|
674
|
-
border-color: var(--octo-mint-30) !important;
|
|
650
|
+
border-color: var(--theme-border-default, var(--octo-mint-30)) !important;
|
|
675
651
|
}
|
|
676
652
|
|
|
677
653
|
// Edit form
|
|
@@ -686,12 +662,12 @@
|
|
|
686
662
|
.form-row input[type="number"],
|
|
687
663
|
.form-row select {
|
|
688
664
|
background: var(--deep-sea) !important;
|
|
689
|
-
border: 1px solid var(--octo-mint-30) !important;
|
|
665
|
+
border: 1px solid var(--theme-border-default, var(--octo-mint-30)) !important;
|
|
690
666
|
color: var(--octo-text-color) !important;
|
|
691
667
|
|
|
692
668
|
&:focus {
|
|
693
|
-
border-color: var(--octo-mint) !important;
|
|
694
|
-
box-shadow: var(--
|
|
669
|
+
border-color: var(--theme-text-accent, var(--octo-mint)) !important;
|
|
670
|
+
box-shadow: var(--theme-focus-ring) !important;
|
|
695
671
|
outline: none !important;
|
|
696
672
|
}
|
|
697
673
|
|
|
@@ -703,15 +679,15 @@
|
|
|
703
679
|
|
|
704
680
|
.form-row input[type="color"] {
|
|
705
681
|
background: var(--deep-sea) !important;
|
|
706
|
-
border: 1px solid var(--octo-mint-30) !important;
|
|
682
|
+
border: 1px solid var(--theme-border-default, var(--octo-mint-30)) !important;
|
|
707
683
|
}
|
|
708
684
|
|
|
709
685
|
.form-row input[type="checkbox"] {
|
|
710
|
-
accent-color: var(--octo-mint) !important;
|
|
686
|
+
accent-color: var(--theme-text-accent, var(--octo-mint)) !important;
|
|
711
687
|
}
|
|
712
688
|
|
|
713
689
|
.form-actions {
|
|
714
|
-
border-top-color: var(--octo-mint-20) !important;
|
|
690
|
+
border-top-color: var(--theme-border-default, var(--octo-mint-20)) !important;
|
|
715
691
|
}
|
|
716
692
|
}
|
|
717
693
|
}
|
|
@@ -722,13 +698,13 @@
|
|
|
722
698
|
|
|
723
699
|
.panel-toolbar {
|
|
724
700
|
background: var(--iron-navy) !important;
|
|
725
|
-
border-bottom: 1px solid var(--octo-mint-20) !important;
|
|
701
|
+
border-bottom: 1px solid var(--theme-border-default, var(--octo-mint-20)) !important;
|
|
726
702
|
|
|
727
703
|
.k-button {
|
|
728
704
|
color: var(--ash-blue) !important;
|
|
729
705
|
|
|
730
706
|
&:hover {
|
|
731
|
-
color: var(--octo-mint) !important;
|
|
707
|
+
color: var(--theme-text-accent, var(--octo-mint)) !important;
|
|
732
708
|
background: var(--octo-mint-10) !important;
|
|
733
709
|
}
|
|
734
710
|
}
|
|
@@ -741,7 +717,7 @@
|
|
|
741
717
|
// Property control cards
|
|
742
718
|
.property-control {
|
|
743
719
|
background: var(--iron-navy) !important;
|
|
744
|
-
border: 1px solid var(--octo-mint-20) !important;
|
|
720
|
+
border: 1px solid var(--theme-border-default, var(--octo-mint-20)) !important;
|
|
745
721
|
|
|
746
722
|
&:hover {
|
|
747
723
|
border-color: var(--octo-mint-40) !important;
|
|
@@ -761,33 +737,29 @@
|
|
|
761
737
|
// Number control (slider + input)
|
|
762
738
|
.number-control {
|
|
763
739
|
.value-slider {
|
|
764
|
-
background:
|
|
765
|
-
to right,
|
|
766
|
-
var(--octo-mint-20),
|
|
767
|
-
var(--octo-mint)
|
|
768
|
-
) !important;
|
|
740
|
+
background: var(--theme-border-default, var(--octo-mint-20)) !important;
|
|
769
741
|
|
|
770
742
|
&::-webkit-slider-thumb {
|
|
771
|
-
background: var(--octo-mint) !important;
|
|
772
|
-
border-color: var(--deep-sea) !important;
|
|
773
|
-
box-shadow:
|
|
743
|
+
background: var(--theme-accent, var(--octo-mint)) !important;
|
|
744
|
+
border-color: var(--theme-bg-app, var(--deep-sea)) !important;
|
|
745
|
+
box-shadow: none !important;
|
|
774
746
|
}
|
|
775
747
|
|
|
776
748
|
&::-moz-range-thumb {
|
|
777
|
-
background: var(--octo-mint) !important;
|
|
778
|
-
border-color: var(--deep-sea) !important;
|
|
779
|
-
box-shadow:
|
|
749
|
+
background: var(--theme-accent, var(--octo-mint)) !important;
|
|
750
|
+
border-color: var(--theme-bg-app, var(--deep-sea)) !important;
|
|
751
|
+
box-shadow: none !important;
|
|
780
752
|
}
|
|
781
753
|
}
|
|
782
754
|
|
|
783
755
|
.value-input {
|
|
784
756
|
background: var(--deep-sea) !important;
|
|
785
|
-
border: 1px solid var(--octo-mint-30) !important;
|
|
757
|
+
border: 1px solid var(--theme-border-default, var(--octo-mint-30)) !important;
|
|
786
758
|
color: var(--octo-text-color) !important;
|
|
787
759
|
|
|
788
760
|
&:focus {
|
|
789
|
-
border-color: var(--octo-mint) !important;
|
|
790
|
-
box-shadow: var(--
|
|
761
|
+
border-color: var(--theme-text-accent, var(--octo-mint)) !important;
|
|
762
|
+
box-shadow: var(--theme-focus-ring) !important;
|
|
791
763
|
}
|
|
792
764
|
}
|
|
793
765
|
}
|
|
@@ -799,16 +771,16 @@
|
|
|
799
771
|
// Color control
|
|
800
772
|
.color-control {
|
|
801
773
|
input[type="color"] {
|
|
802
|
-
border-color: var(--octo-mint-30) !important;
|
|
774
|
+
border-color: var(--theme-border-default, var(--octo-mint-30)) !important;
|
|
803
775
|
}
|
|
804
776
|
|
|
805
777
|
.color-input {
|
|
806
778
|
background: var(--deep-sea) !important;
|
|
807
|
-
border: 1px solid var(--octo-mint-30) !important;
|
|
808
|
-
color: var(--octo-mint) !important;
|
|
779
|
+
border: 1px solid var(--theme-border-default, var(--octo-mint-30)) !important;
|
|
780
|
+
color: var(--theme-text-accent, var(--octo-mint)) !important;
|
|
809
781
|
|
|
810
782
|
&:focus {
|
|
811
|
-
border-color: var(--octo-mint) !important;
|
|
783
|
+
border-color: var(--theme-text-accent, var(--octo-mint)) !important;
|
|
812
784
|
}
|
|
813
785
|
}
|
|
814
786
|
}
|
|
@@ -816,7 +788,7 @@
|
|
|
816
788
|
// Boolean control
|
|
817
789
|
.boolean-control {
|
|
818
790
|
.toggle-label input[type="checkbox"] {
|
|
819
|
-
accent-color: var(--octo-mint) !important;
|
|
791
|
+
accent-color: var(--theme-text-accent, var(--octo-mint)) !important;
|
|
820
792
|
}
|
|
821
793
|
|
|
822
794
|
.toggle-text {
|
|
@@ -827,12 +799,12 @@
|
|
|
827
799
|
// String control
|
|
828
800
|
.string-control input {
|
|
829
801
|
background: var(--deep-sea) !important;
|
|
830
|
-
border: 1px solid var(--octo-mint-30) !important;
|
|
802
|
+
border: 1px solid var(--theme-border-default, var(--octo-mint-30)) !important;
|
|
831
803
|
color: var(--octo-text-color) !important;
|
|
832
804
|
|
|
833
805
|
&:focus {
|
|
834
|
-
border-color: var(--octo-mint) !important;
|
|
835
|
-
box-shadow: var(--
|
|
806
|
+
border-color: var(--theme-text-accent, var(--octo-mint)) !important;
|
|
807
|
+
box-shadow: var(--theme-focus-ring) !important;
|
|
836
808
|
}
|
|
837
809
|
}
|
|
838
810
|
|
|
@@ -842,7 +814,7 @@
|
|
|
842
814
|
color: var(--ash-blue) !important;
|
|
843
815
|
|
|
844
816
|
&:hover {
|
|
845
|
-
color: var(--octo-mint) !important;
|
|
817
|
+
color: var(--theme-text-accent, var(--octo-mint)) !important;
|
|
846
818
|
background: var(--octo-mint-10) !important;
|
|
847
819
|
}
|
|
848
820
|
}
|
|
@@ -855,10 +827,10 @@
|
|
|
855
827
|
background: var(--surface-elevated) !important;
|
|
856
828
|
|
|
857
829
|
.settings-section {
|
|
858
|
-
border-bottom-color: var(--octo-mint-20) !important;
|
|
830
|
+
border-bottom-color: var(--theme-border-default, var(--octo-mint-20)) !important;
|
|
859
831
|
|
|
860
832
|
h4 {
|
|
861
|
-
color: var(--octo-mint) !important;
|
|
833
|
+
color: var(--theme-text-accent, var(--octo-mint)) !important;
|
|
862
834
|
}
|
|
863
835
|
}
|
|
864
836
|
|
|
@@ -870,7 +842,7 @@
|
|
|
870
842
|
input,
|
|
871
843
|
textarea {
|
|
872
844
|
background: var(--deep-sea) !important;
|
|
873
|
-
border: 1px solid var(--octo-mint-30) !important;
|
|
845
|
+
border: 1px solid var(--theme-border-default, var(--octo-mint-30)) !important;
|
|
874
846
|
color: var(--octo-text-color) !important;
|
|
875
847
|
|
|
876
848
|
&::placeholder {
|
|
@@ -878,8 +850,8 @@
|
|
|
878
850
|
}
|
|
879
851
|
|
|
880
852
|
&:focus {
|
|
881
|
-
border-color: var(--octo-mint) !important;
|
|
882
|
-
box-shadow: var(--
|
|
853
|
+
border-color: var(--theme-text-accent, var(--octo-mint)) !important;
|
|
854
|
+
box-shadow: var(--theme-focus-ring) !important;
|
|
883
855
|
}
|
|
884
856
|
}
|
|
885
857
|
|
|
@@ -887,7 +859,7 @@
|
|
|
887
859
|
.k-textbox,
|
|
888
860
|
.k-input {
|
|
889
861
|
background: var(--deep-sea) !important;
|
|
890
|
-
border-color: var(--octo-mint-30) !important;
|
|
862
|
+
border-color: var(--theme-border-default, var(--octo-mint-30)) !important;
|
|
891
863
|
color: var(--octo-text-color) !important;
|
|
892
864
|
}
|
|
893
865
|
|
|
@@ -895,7 +867,7 @@
|
|
|
895
867
|
.k-numerictextbox,
|
|
896
868
|
kendo-numerictextbox {
|
|
897
869
|
background: var(--deep-sea) !important;
|
|
898
|
-
border-color: var(--octo-mint-30) !important;
|
|
870
|
+
border-color: var(--theme-border-default, var(--octo-mint-30)) !important;
|
|
899
871
|
|
|
900
872
|
.k-input-inner {
|
|
901
873
|
background: transparent !important;
|
|
@@ -906,8 +878,8 @@
|
|
|
906
878
|
.k-spinner-increase,
|
|
907
879
|
.k-spinner-decrease {
|
|
908
880
|
background: var(--octo-mint-10) !important;
|
|
909
|
-
border-color: var(--octo-mint-30) !important;
|
|
910
|
-
color: var(--octo-mint) !important;
|
|
881
|
+
border-color: var(--theme-border-default, var(--octo-mint-30)) !important;
|
|
882
|
+
color: var(--theme-text-accent, var(--octo-mint)) !important;
|
|
911
883
|
|
|
912
884
|
&:hover {
|
|
913
885
|
background: var(--octo-mint-20) !important;
|
|
@@ -919,7 +891,7 @@
|
|
|
919
891
|
.k-textarea,
|
|
920
892
|
kendo-textarea {
|
|
921
893
|
background: var(--deep-sea) !important;
|
|
922
|
-
border-color: var(--octo-mint-30) !important;
|
|
894
|
+
border-color: var(--theme-border-default, var(--octo-mint-30)) !important;
|
|
923
895
|
|
|
924
896
|
textarea {
|
|
925
897
|
background: transparent !important;
|
|
@@ -934,11 +906,11 @@
|
|
|
934
906
|
background: var(--surface-elevated) !important;
|
|
935
907
|
|
|
936
908
|
.panel-search {
|
|
937
|
-
border-bottom: 1px solid var(--octo-mint-20) !important;
|
|
909
|
+
border-bottom: 1px solid var(--theme-border-default, var(--octo-mint-20)) !important;
|
|
938
910
|
|
|
939
911
|
input {
|
|
940
912
|
background: var(--deep-sea) !important;
|
|
941
|
-
border: 1px solid var(--octo-mint-30) !important;
|
|
913
|
+
border: 1px solid var(--theme-border-default, var(--octo-mint-30)) !important;
|
|
942
914
|
color: var(--octo-text-color) !important;
|
|
943
915
|
|
|
944
916
|
&::placeholder {
|
|
@@ -946,8 +918,8 @@
|
|
|
946
918
|
}
|
|
947
919
|
|
|
948
920
|
&:focus {
|
|
949
|
-
border-color: var(--octo-mint) !important;
|
|
950
|
-
box-shadow: var(--
|
|
921
|
+
border-color: var(--theme-text-accent, var(--octo-mint)) !important;
|
|
922
|
+
box-shadow: var(--theme-focus-ring) !important;
|
|
951
923
|
}
|
|
952
924
|
}
|
|
953
925
|
}
|
|
@@ -962,8 +934,8 @@
|
|
|
962
934
|
}
|
|
963
935
|
|
|
964
936
|
.loading-spinner {
|
|
965
|
-
border-color: var(--octo-mint-20) !important;
|
|
966
|
-
border-top-color: var(--octo-mint) !important;
|
|
937
|
+
border-color: var(--theme-border-default, var(--octo-mint-20)) !important;
|
|
938
|
+
border-top-color: var(--theme-text-accent, var(--octo-mint)) !important;
|
|
967
939
|
}
|
|
968
940
|
|
|
969
941
|
// Error state
|
|
@@ -993,7 +965,7 @@
|
|
|
993
965
|
|
|
994
966
|
.library-header {
|
|
995
967
|
background: var(--iron-navy) !important;
|
|
996
|
-
border: 1px solid var(--octo-mint-20) !important;
|
|
968
|
+
border: 1px solid var(--theme-border-default, var(--octo-mint-20)) !important;
|
|
997
969
|
|
|
998
970
|
&:hover {
|
|
999
971
|
background: var(--octo-mint-10) !important;
|
|
@@ -1002,7 +974,7 @@
|
|
|
1002
974
|
}
|
|
1003
975
|
|
|
1004
976
|
.expand-icon {
|
|
1005
|
-
color: var(--octo-mint) !important;
|
|
977
|
+
color: var(--theme-text-accent, var(--octo-mint)) !important;
|
|
1006
978
|
}
|
|
1007
979
|
|
|
1008
980
|
.library-name {
|
|
@@ -1020,18 +992,18 @@
|
|
|
1020
992
|
|
|
1021
993
|
.symbol-item {
|
|
1022
994
|
background: var(--iron-navy) !important;
|
|
1023
|
-
border: 1px solid var(--octo-mint-20) !important;
|
|
995
|
+
border: 1px solid var(--theme-border-default, var(--octo-mint-20)) !important;
|
|
1024
996
|
|
|
1025
997
|
&:hover {
|
|
1026
|
-
border-color: var(--octo-mint) !important;
|
|
1027
|
-
box-shadow:
|
|
998
|
+
border-color: var(--theme-text-accent, var(--octo-mint)) !important;
|
|
999
|
+
box-shadow: none !important;
|
|
1028
1000
|
}
|
|
1029
1001
|
}
|
|
1030
1002
|
|
|
1031
1003
|
.symbol-preview {
|
|
1032
1004
|
// Use a lighter background so dark symbols remain visible
|
|
1033
1005
|
background: #4a5568 !important;
|
|
1034
|
-
border: 1px solid var(--octo-mint-15) !important;
|
|
1006
|
+
border: 1px solid var(--theme-border-subtle, var(--octo-mint-15)) !important;
|
|
1035
1007
|
}
|
|
1036
1008
|
|
|
1037
1009
|
.symbol-label {
|
|
@@ -1050,7 +1022,7 @@
|
|
|
1050
1022
|
background: var(--surface-elevated) !important;
|
|
1051
1023
|
|
|
1052
1024
|
.list-header {
|
|
1053
|
-
border-bottom-color: var(--octo-mint-20) !important;
|
|
1025
|
+
border-bottom-color: var(--theme-border-default, var(--octo-mint-20)) !important;
|
|
1054
1026
|
color: var(--octo-text-color) !important;
|
|
1055
1027
|
}
|
|
1056
1028
|
|
|
@@ -1066,10 +1038,10 @@
|
|
|
1066
1038
|
// Binding cards
|
|
1067
1039
|
.binding-card {
|
|
1068
1040
|
background: var(--iron-navy) !important;
|
|
1069
|
-
border: 1px solid var(--octo-mint-20) !important;
|
|
1041
|
+
border: 1px solid var(--theme-border-default, var(--octo-mint-20)) !important;
|
|
1070
1042
|
|
|
1071
1043
|
&.expanded {
|
|
1072
|
-
border-color: var(--octo-mint) !important;
|
|
1044
|
+
border-color: var(--theme-text-accent, var(--octo-mint)) !important;
|
|
1073
1045
|
}
|
|
1074
1046
|
}
|
|
1075
1047
|
|
|
@@ -1087,12 +1059,12 @@
|
|
|
1087
1059
|
|
|
1088
1060
|
.effect-badge {
|
|
1089
1061
|
background: var(--octo-mint-15) !important;
|
|
1090
|
-
color: var(--octo-mint) !important;
|
|
1062
|
+
color: var(--theme-text-accent, var(--octo-mint)) !important;
|
|
1091
1063
|
}
|
|
1092
1064
|
|
|
1093
1065
|
// Binding form
|
|
1094
1066
|
.binding-form {
|
|
1095
|
-
border-top-color: var(--octo-mint-20) !important;
|
|
1067
|
+
border-top-color: var(--theme-border-default, var(--octo-mint-20)) !important;
|
|
1096
1068
|
background: var(--surface-elevated) !important;
|
|
1097
1069
|
|
|
1098
1070
|
.form-row label {
|
|
@@ -1103,12 +1075,12 @@
|
|
|
1103
1075
|
.form-row input[type="text"],
|
|
1104
1076
|
.form-row input[type="number"] {
|
|
1105
1077
|
background: var(--deep-sea) !important;
|
|
1106
|
-
border: 1px solid var(--octo-mint-30) !important;
|
|
1078
|
+
border: 1px solid var(--theme-border-default, var(--octo-mint-30)) !important;
|
|
1107
1079
|
color: var(--octo-text-color) !important;
|
|
1108
1080
|
|
|
1109
1081
|
&:focus {
|
|
1110
|
-
border-color: var(--octo-mint) !important;
|
|
1111
|
-
box-shadow: var(--
|
|
1082
|
+
border-color: var(--theme-text-accent, var(--octo-mint)) !important;
|
|
1083
|
+
box-shadow: var(--theme-focus-ring) !important;
|
|
1112
1084
|
outline: none !important;
|
|
1113
1085
|
}
|
|
1114
1086
|
|
|
@@ -1126,7 +1098,7 @@
|
|
|
1126
1098
|
|
|
1127
1099
|
code {
|
|
1128
1100
|
background: var(--deep-sea) !important;
|
|
1129
|
-
color: var(--octo-mint) !important;
|
|
1101
|
+
color: var(--theme-text-accent, var(--octo-mint)) !important;
|
|
1130
1102
|
}
|
|
1131
1103
|
}
|
|
1132
1104
|
|
|
@@ -1146,12 +1118,12 @@
|
|
|
1146
1118
|
|
|
1147
1119
|
.preview-input input[type="number"] {
|
|
1148
1120
|
background: var(--deep-sea) !important;
|
|
1149
|
-
border: 1px solid var(--octo-mint-30) !important;
|
|
1121
|
+
border: 1px solid var(--theme-border-default, var(--octo-mint-30)) !important;
|
|
1150
1122
|
color: var(--octo-text-color) !important;
|
|
1151
1123
|
}
|
|
1152
1124
|
|
|
1153
1125
|
.preview-input input[type="checkbox"] {
|
|
1154
|
-
accent-color: var(--octo-mint) !important;
|
|
1126
|
+
accent-color: var(--theme-text-accent, var(--octo-mint)) !important;
|
|
1155
1127
|
}
|
|
1156
1128
|
|
|
1157
1129
|
.boolean-label {
|
|
@@ -1163,7 +1135,7 @@
|
|
|
1163
1135
|
}
|
|
1164
1136
|
|
|
1165
1137
|
.preview-output .output-value {
|
|
1166
|
-
color: var(--octo-mint) !important;
|
|
1138
|
+
color: var(--theme-text-accent, var(--octo-mint)) !important;
|
|
1167
1139
|
}
|
|
1168
1140
|
|
|
1169
1141
|
.preview-output.error .output-value {
|
|
@@ -1220,13 +1192,13 @@
|
|
|
1220
1192
|
kendo-textbox input,
|
|
1221
1193
|
kendo-numerictextbox input {
|
|
1222
1194
|
background: var(--deep-sea) !important;
|
|
1223
|
-
border-color: var(--octo-mint-30) !important;
|
|
1195
|
+
border-color: var(--theme-border-default, var(--octo-mint-30)) !important;
|
|
1224
1196
|
color: var(--octo-text-color) !important;
|
|
1225
1197
|
|
|
1226
1198
|
&:focus,
|
|
1227
1199
|
&.k-focus {
|
|
1228
|
-
border-color: var(--octo-mint) !important;
|
|
1229
|
-
box-shadow: var(--
|
|
1200
|
+
border-color: var(--theme-text-accent, var(--octo-mint)) !important;
|
|
1201
|
+
box-shadow: var(--theme-focus-ring) !important;
|
|
1230
1202
|
}
|
|
1231
1203
|
}
|
|
1232
1204
|
|
|
@@ -1234,7 +1206,7 @@
|
|
|
1234
1206
|
.k-dropdownlist,
|
|
1235
1207
|
kendo-dropdownlist {
|
|
1236
1208
|
background: var(--deep-sea) !important;
|
|
1237
|
-
border-color: var(--octo-mint-30) !important;
|
|
1209
|
+
border-color: var(--theme-border-default, var(--octo-mint-30)) !important;
|
|
1238
1210
|
color: var(--octo-text-color) !important;
|
|
1239
1211
|
|
|
1240
1212
|
.k-input-inner {
|
|
@@ -1248,21 +1220,21 @@
|
|
|
1248
1220
|
color: var(--ash-blue) !important;
|
|
1249
1221
|
|
|
1250
1222
|
&:hover {
|
|
1251
|
-
color: var(--octo-mint) !important;
|
|
1223
|
+
color: var(--theme-text-accent, var(--octo-mint)) !important;
|
|
1252
1224
|
}
|
|
1253
1225
|
}
|
|
1254
1226
|
|
|
1255
1227
|
&:focus,
|
|
1256
1228
|
&.k-focus {
|
|
1257
|
-
border-color: var(--octo-mint) !important;
|
|
1258
|
-
box-shadow: var(--
|
|
1229
|
+
border-color: var(--theme-text-accent, var(--octo-mint)) !important;
|
|
1230
|
+
box-shadow: var(--theme-focus-ring) !important;
|
|
1259
1231
|
}
|
|
1260
1232
|
}
|
|
1261
1233
|
|
|
1262
1234
|
// Kendo NumericTextBox
|
|
1263
1235
|
.k-numerictextbox {
|
|
1264
1236
|
background: var(--deep-sea) !important;
|
|
1265
|
-
border-color: var(--octo-mint-30) !important;
|
|
1237
|
+
border-color: var(--theme-border-default, var(--octo-mint-30)) !important;
|
|
1266
1238
|
|
|
1267
1239
|
.k-input-inner {
|
|
1268
1240
|
background: transparent !important;
|
|
@@ -1273,8 +1245,8 @@
|
|
|
1273
1245
|
.k-spinner-increase,
|
|
1274
1246
|
.k-spinner-decrease {
|
|
1275
1247
|
background: var(--octo-mint-10) !important;
|
|
1276
|
-
border-color: var(--octo-mint-30) !important;
|
|
1277
|
-
color: var(--octo-mint) !important;
|
|
1248
|
+
border-color: var(--theme-border-default, var(--octo-mint-30)) !important;
|
|
1249
|
+
color: var(--theme-text-accent, var(--octo-mint)) !important;
|
|
1278
1250
|
|
|
1279
1251
|
&:hover {
|
|
1280
1252
|
background: var(--octo-mint-20) !important;
|
|
@@ -1287,7 +1259,7 @@
|
|
|
1287
1259
|
.svg-file-group,
|
|
1288
1260
|
.form-group.svg-file-group {
|
|
1289
1261
|
background: var(--surface-elevated) !important;
|
|
1290
|
-
border: 2px dashed var(--octo-mint-30) !important;
|
|
1262
|
+
border: 2px dashed var(--theme-border-default, var(--octo-mint-30)) !important;
|
|
1291
1263
|
border-radius: 8px !important;
|
|
1292
1264
|
padding: 16px !important;
|
|
1293
1265
|
transition: all 0.2s ease;
|
|
@@ -1299,22 +1271,14 @@
|
|
|
1299
1271
|
|
|
1300
1272
|
// File input button
|
|
1301
1273
|
button {
|
|
1302
|
-
background:
|
|
1303
|
-
|
|
1304
|
-
|
|
1305
|
-
var(--octo-mint-05)
|
|
1306
|
-
) !important;
|
|
1307
|
-
border: 1px solid var(--octo-mint-30) !important;
|
|
1308
|
-
color: var(--octo-mint) !important;
|
|
1274
|
+
background: transparent !important;
|
|
1275
|
+
border: 1px solid var(--theme-border-default, var(--octo-mint-30)) !important;
|
|
1276
|
+
color: var(--theme-text-accent, var(--octo-mint)) !important;
|
|
1309
1277
|
|
|
1310
1278
|
&:hover {
|
|
1311
|
-
background:
|
|
1312
|
-
|
|
1313
|
-
|
|
1314
|
-
var(--octo-mint-15)
|
|
1315
|
-
) !important;
|
|
1316
|
-
border-color: var(--octo-mint) !important;
|
|
1317
|
-
box-shadow: 0 0 10px var(--octo-mint-30) !important;
|
|
1279
|
+
background: var(--theme-bg-hover) !important;
|
|
1280
|
+
border-color: var(--theme-text-accent, var(--octo-mint)) !important;
|
|
1281
|
+
box-shadow: none !important;
|
|
1318
1282
|
}
|
|
1319
1283
|
}
|
|
1320
1284
|
}
|
|
@@ -1323,7 +1287,7 @@
|
|
|
1323
1287
|
.svg-scale-group,
|
|
1324
1288
|
.form-group.svg-scale-group {
|
|
1325
1289
|
background: var(--surface-elevated) !important;
|
|
1326
|
-
border: 1px solid var(--octo-mint-20) !important;
|
|
1290
|
+
border: 1px solid var(--theme-border-default, var(--octo-mint-20)) !important;
|
|
1327
1291
|
border-radius: 8px !important;
|
|
1328
1292
|
padding: 12px 16px !important;
|
|
1329
1293
|
|
|
@@ -1339,7 +1303,7 @@
|
|
|
1339
1303
|
// Kendo numeric textbox
|
|
1340
1304
|
.k-numerictextbox {
|
|
1341
1305
|
background: var(--deep-sea) !important;
|
|
1342
|
-
border-color: var(--octo-mint-30) !important;
|
|
1306
|
+
border-color: var(--theme-border-default, var(--octo-mint-30)) !important;
|
|
1343
1307
|
|
|
1344
1308
|
.k-input-inner {
|
|
1345
1309
|
background: var(--deep-sea) !important;
|
|
@@ -1348,8 +1312,8 @@
|
|
|
1348
1312
|
|
|
1349
1313
|
.k-input-button {
|
|
1350
1314
|
background: var(--octo-mint-10) !important;
|
|
1351
|
-
border-color: var(--octo-mint-30) !important;
|
|
1352
|
-
color: var(--octo-mint) !important;
|
|
1315
|
+
border-color: var(--theme-border-default, var(--octo-mint-30)) !important;
|
|
1316
|
+
color: var(--theme-text-accent, var(--octo-mint)) !important;
|
|
1353
1317
|
|
|
1354
1318
|
&:hover {
|
|
1355
1319
|
background: var(--octo-mint-20) !important;
|
|
@@ -1385,57 +1349,57 @@
|
|
|
1385
1349
|
|
|
1386
1350
|
input[type="text"] {
|
|
1387
1351
|
background: var(--deep-sea) !important;
|
|
1388
|
-
border: 1px solid var(--octo-mint-30) !important;
|
|
1352
|
+
border: 1px solid var(--theme-border-default, var(--octo-mint-30)) !important;
|
|
1389
1353
|
color: var(--octo-text-color) !important;
|
|
1390
1354
|
|
|
1391
1355
|
&:focus {
|
|
1392
|
-
border-color: var(--octo-mint) !important;
|
|
1393
|
-
box-shadow: var(--
|
|
1356
|
+
border-color: var(--theme-text-accent, var(--octo-mint)) !important;
|
|
1357
|
+
box-shadow: var(--theme-focus-ring) !important;
|
|
1394
1358
|
}
|
|
1395
1359
|
}
|
|
1396
1360
|
}
|
|
1397
1361
|
|
|
1398
1362
|
.preview-container {
|
|
1399
1363
|
background: var(--iron-navy) !important;
|
|
1400
|
-
border: 1px solid var(--octo-mint-20) !important;
|
|
1364
|
+
border: 1px solid var(--theme-border-default, var(--octo-mint-20)) !important;
|
|
1401
1365
|
}
|
|
1402
1366
|
}
|
|
1403
1367
|
|
|
1404
|
-
// Process Designer & Symbol Editor -
|
|
1368
|
+
// Process Designer & Symbol Editor - theme overrides
|
|
1405
1369
|
mm-process-designer,
|
|
1406
1370
|
mm-symbol-editor,
|
|
1407
1371
|
mm-symbol-editor-page {
|
|
1408
|
-
// Override designer CSS variables for
|
|
1372
|
+
// Override designer CSS variables for the Deep Sea theme
|
|
1409
1373
|
--designer-bg: var(--deep-sea) !important;
|
|
1410
1374
|
--designer-surface: var(--surface-elevated) !important;
|
|
1411
1375
|
--designer-surface-alt: var(--iron-navy) !important;
|
|
1412
|
-
--designer-border:
|
|
1376
|
+
--designer-border: var(--theme-border-default) !important;
|
|
1413
1377
|
--designer-text: var(--octo-text-color) !important;
|
|
1414
1378
|
--designer-text-muted: var(--ash-blue) !important;
|
|
1415
1379
|
--designer-accent: #{$octo-mint} !important;
|
|
1416
1380
|
--designer-accent-secondary: #{$neo-cyan} !important;
|
|
1417
1381
|
--designer-canvas-bg: var(--surface-elevated) !important;
|
|
1418
|
-
--designer-hover-bg:
|
|
1382
|
+
--designer-hover-bg: var(--theme-bg-hover) !important;
|
|
1419
1383
|
|
|
1420
1384
|
// Canvas-specific colors (SVG canvas fill and grid)
|
|
1421
1385
|
--designer-canvas-color: var(--iron-navy) !important;
|
|
1422
|
-
--designer-grid-color:
|
|
1386
|
+
--designer-grid-color: var(--theme-border-default) !important;
|
|
1423
1387
|
|
|
1424
1388
|
// Editor-specific variables (inherited from designer)
|
|
1425
1389
|
--editor-bg: var(--deep-sea) !important;
|
|
1426
1390
|
--editor-surface: var(--surface-elevated) !important;
|
|
1427
1391
|
--editor-surface-alt: var(--iron-navy) !important;
|
|
1428
|
-
--editor-border:
|
|
1392
|
+
--editor-border: var(--theme-border-default) !important;
|
|
1429
1393
|
--editor-text: var(--octo-text-color) !important;
|
|
1430
1394
|
--editor-text-muted: var(--ash-blue) !important;
|
|
1431
1395
|
--editor-accent: #{$octo-mint} !important;
|
|
1432
|
-
--editor-hover-bg:
|
|
1396
|
+
--editor-hover-bg: var(--theme-bg-hover) !important;
|
|
1433
1397
|
|
|
1434
1398
|
// Force backgrounds directly on elements
|
|
1435
1399
|
background: var(--deep-sea) !important;
|
|
1436
1400
|
}
|
|
1437
1401
|
|
|
1438
|
-
// Force
|
|
1402
|
+
// Force theme styling on process designer internal elements
|
|
1439
1403
|
::ng-deep {
|
|
1440
1404
|
mm-process-designer,
|
|
1441
1405
|
mm-symbol-editor {
|
|
@@ -1447,20 +1411,20 @@
|
|
|
1447
1411
|
background: var(--surface-elevated) !important;
|
|
1448
1412
|
}
|
|
1449
1413
|
|
|
1450
|
-
// Canvas SVG background
|
|
1414
|
+
// Canvas SVG background
|
|
1451
1415
|
.canvas-background {
|
|
1452
1416
|
fill: var(--iron-navy) !important;
|
|
1453
1417
|
}
|
|
1454
1418
|
|
|
1455
|
-
// Grid lines -
|
|
1419
|
+
// Grid lines - neutral hairline grid
|
|
1456
1420
|
.designer-grid-line {
|
|
1457
|
-
stroke:
|
|
1421
|
+
stroke: var(--theme-border-default) !important;
|
|
1458
1422
|
}
|
|
1459
1423
|
|
|
1460
1424
|
.designer-sidebar,
|
|
1461
1425
|
.designer-inspector-container {
|
|
1462
1426
|
background: var(--surface-elevated) !important;
|
|
1463
|
-
border-color:
|
|
1427
|
+
border-color: var(--theme-border-default) !important;
|
|
1464
1428
|
}
|
|
1465
1429
|
|
|
1466
1430
|
.sidebar-tab {
|
|
@@ -1469,20 +1433,20 @@
|
|
|
1469
1433
|
|
|
1470
1434
|
&.active {
|
|
1471
1435
|
background: var(--surface-elevated) !important;
|
|
1472
|
-
color: #{$octo-mint} !important;
|
|
1473
|
-
border-bottom-color: #{$octo-mint} !important;
|
|
1436
|
+
color: var(--theme-text-accent, #{$octo-mint}) !important;
|
|
1437
|
+
border-bottom-color: var(--theme-text-accent, #{$octo-mint}) !important;
|
|
1474
1438
|
}
|
|
1475
1439
|
}
|
|
1476
1440
|
|
|
1477
1441
|
.designer-statusbar {
|
|
1478
1442
|
background: var(--iron-navy) !important;
|
|
1479
|
-
border-color:
|
|
1443
|
+
border-color: var(--theme-border-default) !important;
|
|
1480
1444
|
color: var(--ash-blue) !important;
|
|
1481
1445
|
}
|
|
1482
1446
|
|
|
1483
1447
|
.dockview-panels-container {
|
|
1484
1448
|
background: var(--surface-elevated) !important;
|
|
1485
|
-
border-color:
|
|
1449
|
+
border-color: var(--theme-border-default) !important;
|
|
1486
1450
|
}
|
|
1487
1451
|
}
|
|
1488
1452
|
|
|
@@ -1493,7 +1457,7 @@
|
|
|
1493
1457
|
|
|
1494
1458
|
.editor-header {
|
|
1495
1459
|
background: var(--iron-navy) !important;
|
|
1496
|
-
border-color:
|
|
1460
|
+
border-color: var(--theme-border-default) !important;
|
|
1497
1461
|
}
|
|
1498
1462
|
|
|
1499
1463
|
.symbol-title {
|
|
@@ -1513,12 +1477,12 @@
|
|
|
1513
1477
|
|
|
1514
1478
|
.properties-panel {
|
|
1515
1479
|
background: var(--surface-elevated) !important;
|
|
1516
|
-
border-color:
|
|
1480
|
+
border-color: var(--theme-border-default) !important;
|
|
1517
1481
|
}
|
|
1518
1482
|
|
|
1519
1483
|
.panel-header {
|
|
1520
1484
|
background: var(--iron-navy) !important;
|
|
1521
|
-
border-color:
|
|
1485
|
+
border-color: var(--theme-border-default) !important;
|
|
1522
1486
|
}
|
|
1523
1487
|
|
|
1524
1488
|
.panel-title {
|
|
@@ -1527,7 +1491,7 @@
|
|
|
1527
1491
|
|
|
1528
1492
|
.panel-collapsed {
|
|
1529
1493
|
background: var(--iron-navy) !important;
|
|
1530
|
-
border-color:
|
|
1494
|
+
border-color: var(--theme-border-default) !important;
|
|
1531
1495
|
}
|
|
1532
1496
|
|
|
1533
1497
|
.collapsed-label,
|
|
@@ -1537,7 +1501,7 @@
|
|
|
1537
1501
|
}
|
|
1538
1502
|
}
|
|
1539
1503
|
|
|
1540
|
-
// Process Widget (MeshBoard) -
|
|
1504
|
+
// Process Widget (MeshBoard) - theme overrides
|
|
1541
1505
|
mm-process-widget {
|
|
1542
1506
|
// Override CSS variables used by the process widget
|
|
1543
1507
|
--process-bg: var(--iron-navy);
|
|
@@ -1556,8 +1520,8 @@
|
|
|
1556
1520
|
}
|
|
1557
1521
|
|
|
1558
1522
|
.loading-spinner {
|
|
1559
|
-
border-color:
|
|
1560
|
-
border-top-color: #{$octo-mint} !important;
|
|
1523
|
+
border-color: var(--theme-border-default) !important;
|
|
1524
|
+
border-top-color: var(--theme-text-accent, #{$octo-mint}) !important;
|
|
1561
1525
|
}
|
|
1562
1526
|
|
|
1563
1527
|
.error-container {
|
|
@@ -1579,222 +1543,127 @@
|
|
|
1579
1543
|
overflow: hidden;
|
|
1580
1544
|
}
|
|
1581
1545
|
|
|
1546
|
+
// Body text uses the UI face (Roboto, concept §6.3); titles, dialog titles
|
|
1547
|
+
// and KPI numbers use --theme-font-display (Montserrat) explicitly.
|
|
1582
1548
|
body {
|
|
1583
1549
|
background-color: var(--kendo-color-app-surface, var(--deep-sea, #1a2230));
|
|
1584
1550
|
color: var(--kendo-color-on-app-surface, var(--octo-text-color, #ffffff));
|
|
1585
|
-
font-family: var(--
|
|
1586
|
-
}
|
|
1587
|
-
|
|
1588
|
-
// LCARS panels
|
|
1589
|
-
|
|
1590
|
-
.lcars-panel {
|
|
1591
|
-
background: var(--lcars-panel-bg);
|
|
1592
|
-
border: var(--lcars-panel-border);
|
|
1593
|
-
border-radius: var(--lcars-radius-md);
|
|
1594
|
-
padding: 16px;
|
|
1595
|
-
position: relative;
|
|
1596
|
-
|
|
1597
|
-
&::before {
|
|
1598
|
-
content: "";
|
|
1599
|
-
position: absolute;
|
|
1600
|
-
top: 0;
|
|
1601
|
-
left: 0;
|
|
1602
|
-
right: 0;
|
|
1603
|
-
height: 3px;
|
|
1604
|
-
background: linear-gradient(
|
|
1605
|
-
90deg,
|
|
1606
|
-
var(--octo-mint),
|
|
1607
|
-
var(--neo-cyan),
|
|
1608
|
-
var(--royal-violet)
|
|
1609
|
-
);
|
|
1610
|
-
border-radius: var(--lcars-radius-md) var(--lcars-radius-md) 0 0;
|
|
1611
|
-
}
|
|
1551
|
+
font-family: var(--theme-font-ui);
|
|
1612
1552
|
}
|
|
1613
1553
|
|
|
1614
|
-
|
|
1615
|
-
|
|
1616
|
-
|
|
1617
|
-
|
|
1618
|
-
gap: 12px;
|
|
1619
|
-
padding: 8px 16px;
|
|
1620
|
-
background: linear-gradient(90deg, var(--iron-navy), transparent);
|
|
1621
|
-
border-left: 4px solid var(--octo-mint);
|
|
1622
|
-
margin-bottom: 16px;
|
|
1623
|
-
|
|
1624
|
-
&::after {
|
|
1625
|
-
content: "";
|
|
1626
|
-
flex: 1;
|
|
1627
|
-
height: 2px;
|
|
1628
|
-
background: linear-gradient(90deg, var(--octo-mint), transparent);
|
|
1629
|
-
}
|
|
1630
|
-
}
|
|
1631
|
-
|
|
1632
|
-
// LCARS asymmetric panel (characteristic rounded corner on one side)
|
|
1633
|
-
.lcars-panel-asymmetric {
|
|
1634
|
-
background: var(--lcars-panel-bg);
|
|
1635
|
-
border: var(--lcars-panel-border);
|
|
1636
|
-
border-radius: var(--lcars-radius-xl) var(--lcars-radius-sm)
|
|
1637
|
-
var(--lcars-radius-sm) var(--lcars-radius-xl);
|
|
1638
|
-
padding: 16px;
|
|
1639
|
-
padding-left: 24px;
|
|
1554
|
+
h1,
|
|
1555
|
+
h2,
|
|
1556
|
+
h3 {
|
|
1557
|
+
font-family: var(--theme-font-display);
|
|
1640
1558
|
}
|
|
1641
1559
|
|
|
1642
1560
|
// Kendo overrides
|
|
1643
1561
|
|
|
1644
1562
|
// AppBar
|
|
1645
1563
|
.k-appbar {
|
|
1646
|
-
background:
|
|
1647
|
-
|
|
1648
|
-
|
|
1649
|
-
color-mix(in srgb, var(--iron-navy), black 5%)
|
|
1650
|
-
) !important;
|
|
1651
|
-
border-bottom: 1px solid var(--octo-mint-30);
|
|
1652
|
-
box-shadow:
|
|
1653
|
-
0 2px 8px rgba(0, 0, 0, 0.3),
|
|
1654
|
-
0 0 20px var(--octo-mint-10);
|
|
1564
|
+
background: var(--theme-bg-elevated, var(--iron-navy)) !important;
|
|
1565
|
+
border-bottom: 1px solid var(--theme-border-subtle, var(--octo-mint-30));
|
|
1566
|
+
box-shadow: none;
|
|
1655
1567
|
}
|
|
1656
1568
|
|
|
1657
|
-
// Buttons -
|
|
1569
|
+
// Buttons - Deep Sea: flat primary / base / outline (AB#5526)
|
|
1658
1570
|
.k-button {
|
|
1659
|
-
font-family: var(--
|
|
1571
|
+
font-family: var(--theme-font-ui, inherit);
|
|
1660
1572
|
font-weight: 500;
|
|
1661
|
-
text-transform:
|
|
1662
|
-
letter-spacing:
|
|
1663
|
-
border-radius: var(--
|
|
1664
|
-
transition:
|
|
1573
|
+
text-transform: none;
|
|
1574
|
+
letter-spacing: normal;
|
|
1575
|
+
border-radius: var(--theme-radius-sm, 4px);
|
|
1576
|
+
transition:
|
|
1577
|
+
background-color var(--theme-motion-fast, 120ms) var(--theme-motion-easing, ease),
|
|
1578
|
+
border-color var(--theme-motion-fast, 120ms) var(--theme-motion-easing, ease),
|
|
1579
|
+
color var(--theme-motion-fast, 120ms) var(--theme-motion-easing, ease);
|
|
1580
|
+
|
|
1581
|
+
&:focus-visible {
|
|
1582
|
+
outline: none;
|
|
1583
|
+
box-shadow: var(--theme-focus-ring, 0 0 0 2px var(--octo-mint));
|
|
1584
|
+
}
|
|
1665
1585
|
|
|
1666
1586
|
&.k-button-solid-primary {
|
|
1667
|
-
background:
|
|
1668
|
-
|
|
1669
|
-
|
|
1670
|
-
var(--octo-mint-15)
|
|
1671
|
-
);
|
|
1672
|
-
border: 1px solid var(--octo-mint-50);
|
|
1673
|
-
color: var(--octo-text-color);
|
|
1587
|
+
background: var(--theme-accent, var(--octo-mint));
|
|
1588
|
+
border: 1px solid var(--theme-accent, var(--octo-mint));
|
|
1589
|
+
color: var(--theme-text-on-accent, var(--deep-sea));
|
|
1674
1590
|
|
|
1675
1591
|
.k-svg-icon,
|
|
1676
1592
|
.k-icon,
|
|
1677
1593
|
svg {
|
|
1678
|
-
fill: var(--
|
|
1679
|
-
color: var(--
|
|
1594
|
+
fill: var(--theme-text-on-accent, var(--deep-sea));
|
|
1595
|
+
color: var(--theme-text-on-accent, var(--deep-sea));
|
|
1680
1596
|
}
|
|
1681
1597
|
|
|
1682
1598
|
&:hover:not(:disabled) {
|
|
1683
|
-
background:
|
|
1684
|
-
|
|
1685
|
-
var(--octo-mint-45),
|
|
1686
|
-
var(--octo-mint-25)
|
|
1687
|
-
);
|
|
1688
|
-
border-color: var(--octo-mint);
|
|
1689
|
-
box-shadow: 0 0 15px var(--octo-mint-40);
|
|
1599
|
+
background: var(--theme-accent-hover, var(--octo-mint));
|
|
1600
|
+
border-color: var(--theme-accent-hover, var(--octo-mint));
|
|
1690
1601
|
}
|
|
1691
1602
|
|
|
1692
1603
|
&:active:not(:disabled) {
|
|
1693
|
-
background:
|
|
1694
|
-
180deg,
|
|
1695
|
-
var(--octo-mint-50),
|
|
1696
|
-
var(--octo-mint-30)
|
|
1697
|
-
);
|
|
1604
|
+
background: var(--theme-accent-hover, var(--octo-mint));
|
|
1698
1605
|
}
|
|
1699
1606
|
}
|
|
1700
1607
|
|
|
1701
1608
|
&.k-button-solid-secondary {
|
|
1702
|
-
background:
|
|
1703
|
-
|
|
1704
|
-
|
|
1705
|
-
color.adjust($neo-cyan, $lightness: -10%)
|
|
1706
|
-
);
|
|
1707
|
-
|
|
1708
|
-
&:hover {
|
|
1709
|
-
box-shadow: var(--lcars-glow-cyan);
|
|
1710
|
-
}
|
|
1609
|
+
background: var(--theme-accent-2, var(--neo-cyan));
|
|
1610
|
+
border-color: var(--theme-accent-2, var(--neo-cyan));
|
|
1611
|
+
color: var(--theme-text-on-accent, var(--deep-sea));
|
|
1711
1612
|
}
|
|
1712
1613
|
|
|
1713
1614
|
// Default/base solid buttons (no themeColor specified)
|
|
1714
1615
|
&.k-button-solid-base {
|
|
1715
|
-
background:
|
|
1716
|
-
|
|
1717
|
-
|
|
1718
|
-
var(--octo-mint-05)
|
|
1719
|
-
);
|
|
1720
|
-
// Theme-aware border/text so secondary/cancel buttons stay legible
|
|
1721
|
-
// on light surfaces — brand-mint at low alpha washes out on white.
|
|
1722
|
-
border: 1px solid var(--theme-border-strong, var(--octo-mint-30));
|
|
1723
|
-
color: var(--theme-text-accent, var(--octo-mint));
|
|
1616
|
+
background: var(--theme-bg-elevated, transparent);
|
|
1617
|
+
border: 1px solid var(--theme-border-default, var(--octo-mint-30));
|
|
1618
|
+
color: var(--theme-text-primary, var(--octo-text-color));
|
|
1724
1619
|
|
|
1725
1620
|
.k-svg-icon,
|
|
1726
1621
|
.k-icon,
|
|
1727
1622
|
svg {
|
|
1728
|
-
fill: var(--theme-text-
|
|
1729
|
-
color: var(--theme-text-
|
|
1623
|
+
fill: var(--theme-text-primary, var(--octo-text-color));
|
|
1624
|
+
color: var(--theme-text-primary, var(--octo-text-color));
|
|
1730
1625
|
}
|
|
1731
1626
|
|
|
1732
1627
|
&:hover:not(:disabled) {
|
|
1733
|
-
background:
|
|
1734
|
-
|
|
1735
|
-
var(--octo-mint-25),
|
|
1736
|
-
var(--octo-mint-15)
|
|
1737
|
-
);
|
|
1738
|
-
border-color: var(--theme-text-accent, var(--octo-mint-50));
|
|
1739
|
-
box-shadow: 0 0 10px var(--octo-mint-30);
|
|
1628
|
+
background: var(--theme-bg-hover, var(--octo-mint-10));
|
|
1629
|
+
border-color: var(--theme-border-strong, var(--octo-mint-50));
|
|
1740
1630
|
}
|
|
1741
1631
|
|
|
1742
1632
|
&:active:not(:disabled) {
|
|
1743
|
-
background:
|
|
1744
|
-
180deg,
|
|
1745
|
-
var(--octo-mint-30),
|
|
1746
|
-
var(--octo-mint-20)
|
|
1747
|
-
);
|
|
1633
|
+
background: var(--theme-bg-selected, var(--octo-mint-20));
|
|
1748
1634
|
}
|
|
1749
1635
|
|
|
1750
1636
|
&:disabled {
|
|
1751
1637
|
opacity: 0.5;
|
|
1752
|
-
color: var(--ash-blue);
|
|
1753
|
-
border-color: var(--ash-blue-30);
|
|
1754
|
-
background:
|
|
1638
|
+
color: var(--theme-text-muted, var(--ash-blue));
|
|
1639
|
+
border-color: var(--theme-border-subtle, var(--ash-blue-30));
|
|
1640
|
+
background: transparent;
|
|
1755
1641
|
|
|
1756
1642
|
.k-svg-icon,
|
|
1757
1643
|
.k-icon,
|
|
1758
1644
|
svg {
|
|
1759
|
-
fill: var(--ash-blue);
|
|
1760
|
-
color: var(--ash-blue);
|
|
1645
|
+
fill: var(--theme-text-muted, var(--ash-blue));
|
|
1646
|
+
color: var(--theme-text-muted, var(--ash-blue));
|
|
1761
1647
|
}
|
|
1762
1648
|
}
|
|
1763
1649
|
}
|
|
1764
1650
|
|
|
1765
1651
|
// Solid error buttons (themeColor="error")
|
|
1766
1652
|
&.k-button-solid-error {
|
|
1767
|
-
background:
|
|
1768
|
-
|
|
1769
|
-
|
|
1770
|
-
var(--bubblegum-10)
|
|
1771
|
-
);
|
|
1772
|
-
border: 1px solid var(--bubblegum-40);
|
|
1773
|
-
color: var(--bubblegum);
|
|
1653
|
+
background: var(--theme-status-error, var(--bubblegum));
|
|
1654
|
+
border: 1px solid var(--theme-status-error, var(--bubblegum));
|
|
1655
|
+
color: var(--theme-text-on-accent, var(--deep-sea));
|
|
1774
1656
|
|
|
1775
1657
|
.k-svg-icon,
|
|
1776
1658
|
.k-icon,
|
|
1777
1659
|
svg {
|
|
1778
|
-
fill: var(--
|
|
1779
|
-
color: var(--
|
|
1660
|
+
fill: var(--theme-text-on-accent, var(--deep-sea));
|
|
1661
|
+
color: var(--theme-text-on-accent, var(--deep-sea));
|
|
1780
1662
|
}
|
|
1781
1663
|
|
|
1782
1664
|
&:hover:not(:disabled) {
|
|
1783
|
-
background:
|
|
1784
|
-
|
|
1785
|
-
var(--bubblegum-30),
|
|
1786
|
-
var(--bubblegum-20)
|
|
1787
|
-
);
|
|
1788
|
-
border-color: var(--bubblegum-60);
|
|
1789
|
-
box-shadow: 0 0 10px var(--bubblegum-40);
|
|
1790
|
-
}
|
|
1791
|
-
|
|
1792
|
-
&:active:not(:disabled) {
|
|
1793
|
-
background: linear-gradient(
|
|
1794
|
-
180deg,
|
|
1795
|
-
var(--bubblegum-40),
|
|
1796
|
-
var(--bubblegum-30)
|
|
1797
|
-
);
|
|
1665
|
+
background: color-mix(in srgb, var(--theme-status-error, var(--bubblegum)) 88%, var(--theme-text-primary, white));
|
|
1666
|
+
border-color: color-mix(in srgb, var(--theme-status-error, var(--bubblegum)) 88%, var(--theme-text-primary, white));
|
|
1798
1667
|
}
|
|
1799
1668
|
|
|
1800
1669
|
&:disabled {
|
|
@@ -1803,210 +1672,188 @@
|
|
|
1803
1672
|
}
|
|
1804
1673
|
|
|
1805
1674
|
&.k-button-outline {
|
|
1806
|
-
border-width:
|
|
1807
|
-
|
|
1808
|
-
&:hover {
|
|
1809
|
-
box-shadow: var(--lcars-glow-primary);
|
|
1810
|
-
}
|
|
1675
|
+
border-width: 1px;
|
|
1811
1676
|
}
|
|
1812
1677
|
|
|
1813
|
-
// Outline base buttons
|
|
1678
|
+
// Outline base buttons
|
|
1814
1679
|
&.k-button-outline-base {
|
|
1815
|
-
color: var(--ash-blue);
|
|
1816
|
-
border-color: var(--ash-blue-50);
|
|
1680
|
+
color: var(--theme-text-primary, var(--ash-blue));
|
|
1681
|
+
border-color: var(--theme-border-default, var(--ash-blue-50));
|
|
1817
1682
|
background: transparent;
|
|
1818
1683
|
|
|
1819
1684
|
.k-svg-icon,
|
|
1820
1685
|
.k-icon,
|
|
1821
1686
|
svg {
|
|
1822
|
-
fill:
|
|
1823
|
-
color:
|
|
1687
|
+
fill: currentColor;
|
|
1688
|
+
color: currentColor;
|
|
1824
1689
|
}
|
|
1825
1690
|
|
|
1826
1691
|
&:hover:not(:disabled) {
|
|
1827
|
-
color: var(--octo-mint);
|
|
1828
|
-
|
|
1829
|
-
background: var(--octo-mint-10);
|
|
1830
|
-
box-shadow: var(--lcars-glow-primary);
|
|
1831
|
-
|
|
1832
|
-
.k-svg-icon,
|
|
1833
|
-
.k-icon,
|
|
1834
|
-
svg {
|
|
1835
|
-
fill: var(--octo-mint);
|
|
1836
|
-
color: var(--octo-mint);
|
|
1837
|
-
}
|
|
1692
|
+
border-color: var(--theme-border-strong, var(--octo-mint-50));
|
|
1693
|
+
background: var(--theme-bg-hover, var(--octo-mint-10));
|
|
1838
1694
|
}
|
|
1839
1695
|
|
|
1840
1696
|
&:active:not(:disabled) {
|
|
1841
|
-
background: var(--octo-mint-15);
|
|
1697
|
+
background: var(--theme-bg-selected, var(--octo-mint-15));
|
|
1842
1698
|
}
|
|
1843
1699
|
}
|
|
1844
1700
|
|
|
1845
1701
|
// Outline primary buttons - for selected state
|
|
1846
1702
|
&.k-button-outline-primary {
|
|
1847
|
-
color: var(--octo-mint);
|
|
1848
|
-
border-color: var(--octo-mint-50);
|
|
1703
|
+
color: var(--theme-text-accent, var(--octo-mint));
|
|
1704
|
+
border-color: var(--theme-accent, var(--octo-mint-50));
|
|
1849
1705
|
background: transparent;
|
|
1850
1706
|
|
|
1851
1707
|
.k-svg-icon,
|
|
1852
1708
|
.k-icon,
|
|
1853
1709
|
svg {
|
|
1854
|
-
fill:
|
|
1855
|
-
color:
|
|
1710
|
+
fill: currentColor;
|
|
1711
|
+
color: currentColor;
|
|
1856
1712
|
}
|
|
1857
1713
|
|
|
1858
1714
|
&:hover:not(:disabled) {
|
|
1859
|
-
background: var(--octo-mint-15);
|
|
1860
|
-
box-shadow: var(--lcars-glow-primary);
|
|
1715
|
+
background: var(--theme-accent-subtle, var(--octo-mint-15));
|
|
1861
1716
|
}
|
|
1862
1717
|
}
|
|
1863
1718
|
|
|
1864
|
-
// Flat error buttons (delete/remove actions)
|
|
1719
|
+
// Flat error buttons (delete/remove actions)
|
|
1865
1720
|
&.k-button-flat-error {
|
|
1866
|
-
color: var(--bubblegum) !important;
|
|
1867
|
-
background:
|
|
1868
|
-
border: 1px solid
|
|
1721
|
+
color: var(--theme-status-error, var(--bubblegum)) !important;
|
|
1722
|
+
background: transparent;
|
|
1723
|
+
border: 1px solid transparent;
|
|
1869
1724
|
|
|
1870
1725
|
.k-svg-icon,
|
|
1871
1726
|
.k-icon,
|
|
1872
1727
|
svg {
|
|
1873
|
-
fill: var(--bubblegum) !important;
|
|
1874
|
-
color: var(--bubblegum) !important;
|
|
1728
|
+
fill: var(--theme-status-error, var(--bubblegum)) !important;
|
|
1729
|
+
color: var(--theme-status-error, var(--bubblegum)) !important;
|
|
1875
1730
|
}
|
|
1876
1731
|
|
|
1877
1732
|
&:hover {
|
|
1878
|
-
background: var(--bubblegum-20);
|
|
1879
|
-
border-color: var(--bubblegum-50);
|
|
1880
|
-
box-shadow: 0 0 8px var(--bubblegum-40);
|
|
1733
|
+
background: var(--theme-status-error-subtle, var(--bubblegum-20));
|
|
1881
1734
|
}
|
|
1882
1735
|
|
|
1883
1736
|
&:active {
|
|
1884
|
-
background: var(--bubblegum-30);
|
|
1737
|
+
background: var(--theme-status-error-subtle, var(--bubblegum-30));
|
|
1885
1738
|
}
|
|
1886
1739
|
}
|
|
1887
1740
|
|
|
1888
|
-
// General flat buttons
|
|
1741
|
+
// General flat buttons
|
|
1889
1742
|
&.k-button-flat {
|
|
1890
1743
|
&:not(.k-button-flat-error):not(.k-button-flat-primary) {
|
|
1891
|
-
color: var(--ash-blue);
|
|
1744
|
+
color: var(--theme-text-secondary, var(--ash-blue));
|
|
1892
1745
|
|
|
1893
1746
|
.k-svg-icon,
|
|
1894
1747
|
.k-icon,
|
|
1895
1748
|
svg {
|
|
1896
|
-
fill:
|
|
1897
|
-
color:
|
|
1749
|
+
fill: currentColor;
|
|
1750
|
+
color: currentColor;
|
|
1898
1751
|
}
|
|
1899
1752
|
|
|
1900
1753
|
&:hover {
|
|
1901
|
-
background: var(--ash-blue-15);
|
|
1902
|
-
color: var(--octo-mint);
|
|
1903
|
-
|
|
1904
|
-
.k-svg-icon,
|
|
1905
|
-
.k-icon,
|
|
1906
|
-
svg {
|
|
1907
|
-
fill: var(--octo-mint);
|
|
1908
|
-
color: var(--octo-mint);
|
|
1909
|
-
}
|
|
1754
|
+
background: var(--theme-bg-hover, var(--ash-blue-15));
|
|
1755
|
+
color: var(--theme-text-primary, var(--octo-mint));
|
|
1910
1756
|
}
|
|
1911
1757
|
}
|
|
1912
1758
|
}
|
|
1913
1759
|
}
|
|
1914
1760
|
|
|
1915
|
-
// Grid -
|
|
1761
|
+
// Grid - Deep Sea: surface body, elevated header band, neutral hairlines
|
|
1916
1762
|
.k-grid {
|
|
1917
|
-
border: var(--
|
|
1918
|
-
border-radius: var(--
|
|
1763
|
+
border: 1px solid var(--theme-border-default, var(--octo-mint-20));
|
|
1764
|
+
border-radius: var(--theme-radius-md, 6px);
|
|
1919
1765
|
overflow: hidden;
|
|
1920
1766
|
|
|
1921
1767
|
.k-grid-header {
|
|
1922
|
-
background:
|
|
1923
|
-
|
|
1924
|
-
var(--iron-navy),
|
|
1925
|
-
var(--surface-elevated)
|
|
1926
|
-
);
|
|
1927
|
-
border-bottom: 2px solid var(--octo-mint-30);
|
|
1768
|
+
background: var(--theme-bg-elevated, var(--surface-elevated));
|
|
1769
|
+
border-bottom: 1px solid var(--theme-border-default, var(--octo-mint-30));
|
|
1928
1770
|
|
|
1929
1771
|
th {
|
|
1930
|
-
font-family: var(--
|
|
1772
|
+
font-family: var(--theme-font-ui, inherit);
|
|
1931
1773
|
font-weight: 600;
|
|
1932
|
-
text-transform:
|
|
1933
|
-
|
|
1934
|
-
|
|
1935
|
-
color: var(--octo-mint);
|
|
1774
|
+
text-transform: none;
|
|
1775
|
+
letter-spacing: normal;
|
|
1776
|
+
color: var(--theme-text-secondary, var(--octo-mint));
|
|
1936
1777
|
}
|
|
1937
1778
|
}
|
|
1938
1779
|
|
|
1939
1780
|
.k-grid-content {
|
|
1940
|
-
background: var(--deep-sea-80);
|
|
1781
|
+
background: var(--theme-bg-surface, var(--deep-sea-80));
|
|
1941
1782
|
|
|
1942
1783
|
tr {
|
|
1943
|
-
transition: background var(--
|
|
1784
|
+
transition: background var(--theme-motion-fast) var(--theme-motion-easing);
|
|
1944
1785
|
|
|
1945
1786
|
&:hover {
|
|
1946
|
-
background: var(--octo-mint-08) !important;
|
|
1787
|
+
background: var(--theme-bg-hover, var(--octo-mint-08)) !important;
|
|
1947
1788
|
}
|
|
1948
1789
|
|
|
1949
1790
|
&.k-selected {
|
|
1950
|
-
background: var(--octo-mint-15) !important;
|
|
1951
|
-
border-left: 3px solid var(--octo-mint);
|
|
1791
|
+
background: var(--theme-bg-selected, var(--octo-mint-15)) !important;
|
|
1952
1792
|
}
|
|
1953
1793
|
}
|
|
1954
1794
|
}
|
|
1955
1795
|
|
|
1956
1796
|
.k-pager {
|
|
1957
|
-
background: var(--iron-navy);
|
|
1958
|
-
border-top: 1px solid var(--octo-mint-20);
|
|
1797
|
+
background: var(--theme-bg-elevated, var(--iron-navy));
|
|
1798
|
+
border-top: 1px solid var(--theme-border-subtle, var(--octo-mint-20));
|
|
1959
1799
|
}
|
|
1960
1800
|
}
|
|
1961
1801
|
|
|
1962
|
-
//
|
|
1802
|
+
// A grid inside a content panel must not become a second card: the panel
|
|
1803
|
+
// already supplies the border, the radius and the surface.
|
|
1804
|
+
.lcars-content-panel .k-grid {
|
|
1805
|
+
border: none;
|
|
1806
|
+
border-radius: 0;
|
|
1807
|
+
box-shadow: none;
|
|
1808
|
+
}
|
|
1809
|
+
|
|
1810
|
+
// TreeView
|
|
1963
1811
|
.k-treeview {
|
|
1964
1812
|
.k-treeview-item {
|
|
1965
1813
|
.k-treeview-leaf {
|
|
1966
|
-
border-radius: var(--
|
|
1967
|
-
transition:
|
|
1814
|
+
border-radius: var(--theme-radius-sm, 4px);
|
|
1815
|
+
transition: background-color var(--theme-motion-fast) var(--theme-motion-easing);
|
|
1968
1816
|
|
|
1969
1817
|
&:hover {
|
|
1970
|
-
background: var(--octo-mint-10);
|
|
1818
|
+
background: var(--theme-bg-hover, var(--octo-mint-10));
|
|
1971
1819
|
}
|
|
1972
1820
|
|
|
1973
1821
|
&.k-selected {
|
|
1974
|
-
background: var(--octo-mint-20);
|
|
1975
|
-
|
|
1976
|
-
box-shadow: inset 0 0 10px var(--octo-mint-10);
|
|
1822
|
+
background: var(--theme-bg-selected, var(--octo-mint-20));
|
|
1823
|
+
color: var(--theme-text-primary, inherit);
|
|
1977
1824
|
}
|
|
1978
1825
|
}
|
|
1979
1826
|
}
|
|
1980
1827
|
}
|
|
1981
1828
|
|
|
1982
|
-
// Input fields
|
|
1829
|
+
// Input fields
|
|
1983
1830
|
.k-input,
|
|
1984
1831
|
.k-picker,
|
|
1985
1832
|
.k-textbox {
|
|
1986
|
-
background: var(--deep-sea-80);
|
|
1987
|
-
border: 1px solid var(--ash-blue-30);
|
|
1988
|
-
border-radius: var(--
|
|
1989
|
-
transition:
|
|
1833
|
+
background: var(--theme-bg-input, var(--deep-sea-80));
|
|
1834
|
+
border: 1px solid var(--theme-border-default, var(--ash-blue-30));
|
|
1835
|
+
border-radius: var(--theme-radius-sm, 4px);
|
|
1836
|
+
transition: border-color var(--theme-motion-fast) var(--theme-motion-easing);
|
|
1990
1837
|
|
|
1991
1838
|
&:hover {
|
|
1992
|
-
border-color: var(--octo-mint-50);
|
|
1839
|
+
border-color: var(--theme-border-strong, var(--octo-mint-50));
|
|
1993
1840
|
}
|
|
1994
1841
|
|
|
1995
1842
|
&:focus,
|
|
1996
1843
|
&.k-focus {
|
|
1997
|
-
border-color: var(--octo-mint);
|
|
1998
|
-
box-shadow: var(--
|
|
1844
|
+
border-color: var(--theme-accent, var(--octo-mint));
|
|
1845
|
+
box-shadow: var(--theme-focus-ring);
|
|
1999
1846
|
}
|
|
2000
1847
|
}
|
|
2001
1848
|
|
|
2002
|
-
// Form fields
|
|
1849
|
+
// Form fields (global for all dialogs)
|
|
2003
1850
|
kendo-formfield,
|
|
2004
1851
|
.k-form-field {
|
|
2005
1852
|
kendo-label,
|
|
2006
1853
|
.k-label,
|
|
2007
1854
|
> label {
|
|
2008
1855
|
color: var(--ash-blue) !important;
|
|
2009
|
-
font-family: var(--
|
|
1856
|
+
font-family: var(--theme-font-ui, inherit);
|
|
2010
1857
|
font-weight: 500;
|
|
2011
1858
|
}
|
|
2012
1859
|
|
|
@@ -2021,7 +1868,7 @@
|
|
|
2021
1868
|
}
|
|
2022
1869
|
}
|
|
2023
1870
|
|
|
2024
|
-
// Standalone labels
|
|
1871
|
+
// Standalone labels
|
|
2025
1872
|
.k-label,
|
|
2026
1873
|
kendo-label {
|
|
2027
1874
|
color: var(--ash-blue) !important;
|
|
@@ -2078,7 +1925,7 @@
|
|
|
2078
1925
|
.form-field {
|
|
2079
1926
|
> label {
|
|
2080
1927
|
color: var(--ash-blue) !important;
|
|
2081
|
-
font-family: var(--
|
|
1928
|
+
font-family: var(--theme-font-ui, inherit);
|
|
2082
1929
|
font-weight: 500;
|
|
2083
1930
|
|
|
2084
1931
|
.required {
|
|
@@ -2097,9 +1944,9 @@
|
|
|
2097
1944
|
|
|
2098
1945
|
.form-section {
|
|
2099
1946
|
h4 {
|
|
2100
|
-
color: var(--octo-mint) !important;
|
|
2101
|
-
font-family: var(--
|
|
2102
|
-
border-bottom-color: var(--octo-mint-20) !important;
|
|
1947
|
+
color: var(--theme-text-primary, var(--octo-mint)) !important;
|
|
1948
|
+
font-family: var(--theme-font-display, inherit);
|
|
1949
|
+
border-bottom-color: var(--theme-border-subtle, var(--octo-mint-20)) !important;
|
|
2103
1950
|
}
|
|
2104
1951
|
}
|
|
2105
1952
|
|
|
@@ -2114,7 +1961,7 @@
|
|
|
2114
1961
|
}
|
|
2115
1962
|
|
|
2116
1963
|
input[type="radio"] {
|
|
2117
|
-
accent-color: var(--octo-mint);
|
|
1964
|
+
accent-color: var(--theme-accent, var(--octo-mint));
|
|
2118
1965
|
}
|
|
2119
1966
|
}
|
|
2120
1967
|
}
|
|
@@ -2122,13 +1969,13 @@
|
|
|
2122
1969
|
|
|
2123
1970
|
// Config cards (Columns, Sorting, Filters, Options, Query Info)
|
|
2124
1971
|
.config-card {
|
|
2125
|
-
background: var(--surface-elevated-60) !important;
|
|
2126
|
-
border-color: var(--octo-mint-20) !important;
|
|
1972
|
+
background: var(--theme-bg-elevated, var(--surface-elevated-60)) !important;
|
|
1973
|
+
border-color: var(--theme-border-default, var(--octo-mint-20)) !important;
|
|
2127
1974
|
|
|
2128
1975
|
.card-header {
|
|
2129
1976
|
.card-title {
|
|
2130
|
-
color: var(--octo-mint) !important;
|
|
2131
|
-
font-family: var(--
|
|
1977
|
+
color: var(--theme-text-primary, var(--octo-mint)) !important;
|
|
1978
|
+
font-family: var(--theme-font-display, inherit);
|
|
2132
1979
|
}
|
|
2133
1980
|
|
|
2134
1981
|
.card-count {
|
|
@@ -2137,7 +1984,7 @@
|
|
|
2137
1984
|
|
|
2138
1985
|
kendo-svgicon,
|
|
2139
1986
|
.k-svg-icon {
|
|
2140
|
-
color: var(--octo-mint) !important;
|
|
1987
|
+
color: var(--theme-text-secondary, var(--octo-mint)) !important;
|
|
2141
1988
|
}
|
|
2142
1989
|
}
|
|
2143
1990
|
|
|
@@ -2182,17 +2029,17 @@
|
|
|
2182
2029
|
|
|
2183
2030
|
// Loading indicator
|
|
2184
2031
|
.loading-indicator {
|
|
2185
|
-
color: var(--octo-mint) !important;
|
|
2032
|
+
color: var(--theme-text-accent, var(--octo-mint)) !important;
|
|
2186
2033
|
}
|
|
2187
2034
|
|
|
2188
2035
|
// Config sections (used in Pie Chart, Bar Chart, etc.)
|
|
2189
2036
|
.config-section {
|
|
2190
|
-
background: var(--surface-elevated-60) !important;
|
|
2191
|
-
border-color: var(--octo-mint-20) !important;
|
|
2037
|
+
background: var(--theme-bg-elevated, var(--surface-elevated-60)) !important;
|
|
2038
|
+
border-color: var(--theme-border-default, var(--octo-mint-20)) !important;
|
|
2192
2039
|
|
|
2193
2040
|
.section-title {
|
|
2194
|
-
color: var(--octo-mint) !important;
|
|
2195
|
-
font-family: var(--
|
|
2041
|
+
color: var(--theme-text-primary, var(--octo-mint)) !important;
|
|
2042
|
+
font-family: var(--theme-font-display, inherit);
|
|
2196
2043
|
}
|
|
2197
2044
|
|
|
2198
2045
|
.section-hint {
|
|
@@ -2202,13 +2049,13 @@
|
|
|
2202
2049
|
|
|
2203
2050
|
// Form sections (used in Stats Grid Config Dialog, etc.)
|
|
2204
2051
|
.form-section {
|
|
2205
|
-
background: var(--surface-elevated-60) !important;
|
|
2206
|
-
border-color: var(--octo-mint-20) !important;
|
|
2052
|
+
background: var(--theme-bg-elevated, var(--surface-elevated-60)) !important;
|
|
2053
|
+
border-color: var(--theme-border-default, var(--octo-mint-20)) !important;
|
|
2207
2054
|
|
|
2208
2055
|
.section-header {
|
|
2209
2056
|
h4 {
|
|
2210
|
-
color: var(--octo-mint) !important;
|
|
2211
|
-
font-family: var(--
|
|
2057
|
+
color: var(--theme-text-primary, var(--octo-mint)) !important;
|
|
2058
|
+
font-family: var(--theme-font-display, inherit);
|
|
2212
2059
|
}
|
|
2213
2060
|
}
|
|
2214
2061
|
|
|
@@ -2219,11 +2066,13 @@
|
|
|
2219
2066
|
|
|
2220
2067
|
// Stat items (used in Stats Grid Config Dialog)
|
|
2221
2068
|
.stat-item {
|
|
2222
|
-
background: var(--surface-elevated-80) !important;
|
|
2223
|
-
border-color: var(--octo-mint-20) !important;
|
|
2069
|
+
background: var(--theme-bg-surface, var(--surface-elevated-80)) !important;
|
|
2070
|
+
border-color: var(--theme-border-default, var(--octo-mint-20)) !important;
|
|
2224
2071
|
|
|
2225
2072
|
.stat-number {
|
|
2226
|
-
color: var(--octo-mint) !important;
|
|
2073
|
+
color: var(--theme-text-primary, var(--octo-mint)) !important;
|
|
2074
|
+
font-family: var(--theme-font-display, inherit);
|
|
2075
|
+
font-variant-numeric: tabular-nums;
|
|
2227
2076
|
}
|
|
2228
2077
|
}
|
|
2229
2078
|
}
|
|
@@ -2245,95 +2094,77 @@
|
|
|
2245
2094
|
}
|
|
2246
2095
|
}
|
|
2247
2096
|
|
|
2248
|
-
// Input buttons (DatePicker calendar, NumericTextBox spinners, etc.)
|
|
2097
|
+
// Input buttons (DatePicker calendar, NumericTextBox spinners, etc.)
|
|
2249
2098
|
.k-input-button,
|
|
2250
2099
|
.sort-button,
|
|
2251
2100
|
.k-spinner-increase,
|
|
2252
2101
|
.k-spinner-decrease {
|
|
2253
|
-
background:
|
|
2254
|
-
border-color: var(--octo-mint-30) !important;
|
|
2255
|
-
color: var(--octo-mint) !important;
|
|
2102
|
+
background: transparent !important;
|
|
2103
|
+
border-color: var(--theme-border-subtle, var(--octo-mint-30)) !important;
|
|
2104
|
+
color: var(--theme-text-secondary, var(--octo-mint)) !important;
|
|
2256
2105
|
|
|
2257
2106
|
// Make SVG icons visible
|
|
2258
2107
|
.k-svg-icon,
|
|
2259
2108
|
.k-icon,
|
|
2260
2109
|
svg {
|
|
2261
|
-
fill:
|
|
2262
|
-
color:
|
|
2110
|
+
fill: currentColor !important;
|
|
2111
|
+
color: currentColor !important;
|
|
2263
2112
|
}
|
|
2264
2113
|
|
|
2265
2114
|
&:hover {
|
|
2266
|
-
background: var(--octo-mint-20) !important;
|
|
2267
|
-
|
|
2115
|
+
background: var(--theme-bg-hover, var(--octo-mint-20)) !important;
|
|
2116
|
+
color: var(--theme-text-primary, var(--octo-mint)) !important;
|
|
2268
2117
|
}
|
|
2269
2118
|
|
|
2270
2119
|
&:active {
|
|
2271
|
-
background: var(--octo-mint-30) !important;
|
|
2120
|
+
background: var(--theme-bg-selected, var(--octo-mint-30)) !important;
|
|
2272
2121
|
}
|
|
2273
2122
|
}
|
|
2274
2123
|
|
|
2275
|
-
// Dropdown/Popup
|
|
2124
|
+
// Dropdown/Popup
|
|
2276
2125
|
.k-popup {
|
|
2277
|
-
background: var(--iron-navy);
|
|
2278
|
-
border: 1px solid var(--octo-mint-30);
|
|
2279
|
-
border-radius: var(--
|
|
2280
|
-
box-shadow:
|
|
2281
|
-
0 8px 32px rgba(0, 0, 0, 0.4),
|
|
2282
|
-
0 0 20px var(--octo-mint-10);
|
|
2126
|
+
background: var(--theme-bg-overlay, var(--iron-navy));
|
|
2127
|
+
border: 1px solid var(--theme-border-default, var(--octo-mint-30));
|
|
2128
|
+
border-radius: var(--theme-radius-lg, 8px);
|
|
2129
|
+
box-shadow: var(--theme-shadow-popup, 0 8px 32px rgba(0, 0, 0, 0.4));
|
|
2283
2130
|
|
|
2284
2131
|
.k-list-item {
|
|
2285
2132
|
padding: 6px 12px !important;
|
|
2286
2133
|
font-size: 0.8125rem !important; // 13px - compact to match app styling
|
|
2287
2134
|
line-height: 1.4 !important;
|
|
2288
2135
|
min-height: auto !important;
|
|
2289
|
-
transition: background var(--
|
|
2136
|
+
transition: background var(--theme-motion-fast) var(--theme-motion-easing);
|
|
2290
2137
|
|
|
2291
2138
|
&:hover {
|
|
2292
|
-
background: var(--octo-mint-15);
|
|
2139
|
+
background: var(--theme-bg-hover, var(--octo-mint-15));
|
|
2293
2140
|
}
|
|
2294
2141
|
|
|
2295
2142
|
&.k-selected {
|
|
2296
|
-
background: var(--octo-mint-25);
|
|
2297
|
-
color: var(--octo-mint);
|
|
2143
|
+
background: var(--theme-bg-selected, var(--octo-mint-25));
|
|
2144
|
+
color: var(--theme-text-primary, var(--octo-mint));
|
|
2298
2145
|
}
|
|
2299
2146
|
}
|
|
2300
2147
|
}
|
|
2301
2148
|
|
|
2302
|
-
// Dialog -
|
|
2149
|
+
// Dialog - Deep Sea: overlay surface, neutral hairlines, display-face title
|
|
2303
2150
|
.k-dialog {
|
|
2304
|
-
border: 1px solid var(--octo-mint-30);
|
|
2305
|
-
border-radius: var(--
|
|
2306
|
-
box-shadow:
|
|
2307
|
-
0 16px 64px rgba(0, 0, 0, 0.5),
|
|
2308
|
-
0 0 40px var(--octo-mint-15);
|
|
2151
|
+
border: 1px solid var(--theme-border-default, var(--octo-mint-30));
|
|
2152
|
+
border-radius: var(--theme-radius-lg, 8px);
|
|
2153
|
+
box-shadow: var(--theme-shadow-popup, 0 16px 64px rgba(0, 0, 0, 0.5));
|
|
2309
2154
|
overflow: hidden;
|
|
2310
2155
|
|
|
2311
2156
|
.k-dialog-titlebar {
|
|
2312
|
-
background:
|
|
2313
|
-
|
|
2314
|
-
|
|
2315
|
-
var(--surface-elevated)
|
|
2316
|
-
);
|
|
2317
|
-
border-bottom: 2px solid var(--octo-mint);
|
|
2318
|
-
font-family: var(--lcars-font-primary);
|
|
2157
|
+
background: var(--theme-bg-elevated, var(--surface-elevated));
|
|
2158
|
+
border-bottom: 1px solid var(--theme-border-default, var(--octo-mint));
|
|
2159
|
+
font-family: var(--theme-font-display, inherit);
|
|
2319
2160
|
font-weight: 600;
|
|
2320
|
-
text-transform:
|
|
2321
|
-
letter-spacing:
|
|
2322
|
-
|
|
2323
|
-
&::before {
|
|
2324
|
-
content: "";
|
|
2325
|
-
position: absolute;
|
|
2326
|
-
left: 0;
|
|
2327
|
-
top: 0;
|
|
2328
|
-
bottom: 0;
|
|
2329
|
-
width: 4px;
|
|
2330
|
-
background: var(--octo-mint);
|
|
2331
|
-
}
|
|
2161
|
+
text-transform: none;
|
|
2162
|
+
letter-spacing: normal;
|
|
2332
2163
|
}
|
|
2333
2164
|
|
|
2334
2165
|
.k-dialog-content,
|
|
2335
2166
|
.k-window-content {
|
|
2336
|
-
background: var(--deep-sea);
|
|
2167
|
+
background: var(--theme-bg-overlay, var(--deep-sea));
|
|
2337
2168
|
display: flex;
|
|
2338
2169
|
flex-direction: column;
|
|
2339
2170
|
overflow: hidden;
|
|
@@ -2360,38 +2191,38 @@
|
|
|
2360
2191
|
}
|
|
2361
2192
|
|
|
2362
2193
|
.k-dialog-actions {
|
|
2363
|
-
background: var(--iron-navy);
|
|
2364
|
-
border-top: 1px solid var(--octo-mint-20);
|
|
2194
|
+
background: var(--theme-bg-overlay, var(--iron-navy));
|
|
2195
|
+
border-top: 1px solid var(--theme-border-subtle, var(--octo-mint-20));
|
|
2365
2196
|
flex-shrink: 0;
|
|
2366
2197
|
|
|
2367
2198
|
.k-button {
|
|
2368
|
-
@include
|
|
2199
|
+
@include octo-button;
|
|
2369
2200
|
|
|
2370
|
-
//
|
|
2201
|
+
// Flat/outline buttons in action rows get the same outline look
|
|
2371
2202
|
&.k-button-flat,
|
|
2372
2203
|
&.k-button-outline {
|
|
2373
|
-
@include
|
|
2204
|
+
@include flat-button;
|
|
2374
2205
|
}
|
|
2375
2206
|
}
|
|
2376
2207
|
}
|
|
2377
2208
|
}
|
|
2378
2209
|
|
|
2379
|
-
// Window action buttons (WindowService dialogs)
|
|
2210
|
+
// Window action buttons (WindowService dialogs)
|
|
2380
2211
|
.k-window > .k-actions {
|
|
2381
|
-
background: var(--iron-navy);
|
|
2382
|
-
border-top: 1px solid var(--octo-mint-20);
|
|
2212
|
+
background: var(--theme-bg-overlay, var(--iron-navy));
|
|
2213
|
+
border-top: 1px solid var(--theme-border-subtle, var(--octo-mint-20));
|
|
2383
2214
|
|
|
2384
2215
|
.k-button {
|
|
2385
|
-
@include
|
|
2216
|
+
@include octo-button;
|
|
2386
2217
|
|
|
2387
2218
|
&.k-button-flat,
|
|
2388
2219
|
&.k-button-outline {
|
|
2389
|
-
@include
|
|
2220
|
+
@include flat-button;
|
|
2390
2221
|
}
|
|
2391
2222
|
}
|
|
2392
2223
|
}
|
|
2393
2224
|
|
|
2394
|
-
// Widget config dialog buttons (inside window content)
|
|
2225
|
+
// Widget config dialog buttons (inside window content)
|
|
2395
2226
|
// MeshBoard library exposes `mm-dialog-actions` on all dialog button containers
|
|
2396
2227
|
// and `mm-toolbar-actions` on toolbar button areas for consistent host-app styling.
|
|
2397
2228
|
.k-window-content {
|
|
@@ -2401,37 +2232,30 @@
|
|
|
2401
2232
|
.dialog-actions .k-button,
|
|
2402
2233
|
.toolbar .k-button,
|
|
2403
2234
|
.dialog-button.k-button {
|
|
2404
|
-
@include
|
|
2235
|
+
@include octo-button;
|
|
2405
2236
|
|
|
2406
2237
|
&.k-button-flat {
|
|
2407
|
-
@include
|
|
2238
|
+
@include flat-button;
|
|
2408
2239
|
}
|
|
2409
2240
|
}
|
|
2410
2241
|
}
|
|
2411
2242
|
|
|
2412
2243
|
// Dialog Danger variant - for production/staging confirmation dialogs
|
|
2413
2244
|
.mm-dialog-danger .k-dialog {
|
|
2414
|
-
border-color: var(--bubblegum-50);
|
|
2415
|
-
box-shadow:
|
|
2416
|
-
0 16px 64px rgba(0, 0, 0, 0.5),
|
|
2417
|
-
0 0 40px var(--bubblegum-20);
|
|
2245
|
+
border-color: var(--theme-status-error, var(--bubblegum-50));
|
|
2418
2246
|
|
|
2419
2247
|
.k-dialog-titlebar {
|
|
2420
|
-
border-bottom-color: var(--bubblegum);
|
|
2421
|
-
color: var(--bubblegum);
|
|
2422
|
-
|
|
2423
|
-
&::before {
|
|
2424
|
-
background: var(--bubblegum);
|
|
2425
|
-
}
|
|
2248
|
+
border-bottom-color: var(--theme-status-error, var(--bubblegum));
|
|
2249
|
+
color: var(--theme-status-error, var(--bubblegum));
|
|
2426
2250
|
}
|
|
2427
2251
|
|
|
2428
2252
|
.k-dialog-actions {
|
|
2429
|
-
border-top-color: var(--bubblegum-30);
|
|
2253
|
+
border-top-color: var(--theme-border-subtle, var(--bubblegum-30));
|
|
2430
2254
|
}
|
|
2431
2255
|
}
|
|
2432
2256
|
|
|
2433
2257
|
// --------------------------------------------------------------------------
|
|
2434
|
-
// Drawer -
|
|
2258
|
+
// Drawer - flat elevated surface (Deep Sea)
|
|
2435
2259
|
//
|
|
2436
2260
|
// Hierarchy classes: the shared CommandService stamps `mm-drawer-level-<n>`
|
|
2437
2261
|
// on every drawer item and Kendo adds its own `k-level-<n>` — but only while
|
|
@@ -2440,7 +2264,7 @@
|
|
|
2440
2264
|
// mini rail and can be reset there in one place.
|
|
2441
2265
|
// --------------------------------------------------------------------------
|
|
2442
2266
|
.k-drawer {
|
|
2443
|
-
background:
|
|
2267
|
+
background: var(--theme-bg-elevated);
|
|
2444
2268
|
border-right: 1px solid var(--theme-border-subtle);
|
|
2445
2269
|
// Kendo's own theme sets `.k-drawer { color: var(--kendo-color-subtle) }`.
|
|
2446
2270
|
// That token is not part of our theme contract and resolves to an almost
|
|
@@ -2459,11 +2283,11 @@
|
|
|
2459
2283
|
|
|
2460
2284
|
.k-drawer-item {
|
|
2461
2285
|
color: var(--theme-text-primary);
|
|
2462
|
-
border-radius:
|
|
2463
|
-
margin: 2px 4px
|
|
2286
|
+
border-radius: var(--theme-radius-sm, 4px);
|
|
2287
|
+
margin: 2px 4px;
|
|
2464
2288
|
padding: 10px 12px;
|
|
2465
2289
|
min-height: 44px;
|
|
2466
|
-
transition: all var(--
|
|
2290
|
+
transition: all var(--theme-motion-fast) var(--theme-motion-easing);
|
|
2467
2291
|
display: flex;
|
|
2468
2292
|
align-items: center;
|
|
2469
2293
|
justify-content: flex-start;
|
|
@@ -2488,13 +2312,12 @@
|
|
|
2488
2312
|
}
|
|
2489
2313
|
|
|
2490
2314
|
&:hover {
|
|
2491
|
-
background: var(--
|
|
2315
|
+
background: var(--theme-bg-hover);
|
|
2492
2316
|
color: var(--theme-text-primary);
|
|
2493
2317
|
}
|
|
2494
2318
|
|
|
2495
2319
|
&.k-selected {
|
|
2496
|
-
background:
|
|
2497
|
-
border-left: 3px solid var(--octo-mint);
|
|
2320
|
+
background: var(--theme-bg-selected);
|
|
2498
2321
|
color: var(--theme-text-accent);
|
|
2499
2322
|
}
|
|
2500
2323
|
|
|
@@ -2508,7 +2331,7 @@
|
|
|
2508
2331
|
min-height: 1px;
|
|
2509
2332
|
padding: 0;
|
|
2510
2333
|
margin: 8px 12px;
|
|
2511
|
-
background:
|
|
2334
|
+
background: var(--theme-border-subtle);
|
|
2512
2335
|
}
|
|
2513
2336
|
|
|
2514
2337
|
// Nested entries: indented under their group header with a vertical
|
|
@@ -2589,14 +2412,14 @@
|
|
|
2589
2412
|
margin-left: auto;
|
|
2590
2413
|
flex-shrink: 0;
|
|
2591
2414
|
padding: 1px 8px;
|
|
2592
|
-
border-radius:
|
|
2415
|
+
border-radius: var(--theme-radius-xs, 2px);
|
|
2593
2416
|
font-size: 0.7rem;
|
|
2594
|
-
font-weight:
|
|
2595
|
-
letter-spacing: 0.5px;
|
|
2417
|
+
font-weight: 600;
|
|
2596
2418
|
line-height: 1.4;
|
|
2419
|
+
font-variant-numeric: tabular-nums;
|
|
2597
2420
|
color: var(--theme-text-accent);
|
|
2598
|
-
background: var(--
|
|
2599
|
-
border: 1px solid
|
|
2421
|
+
background: var(--theme-accent-subtle);
|
|
2422
|
+
border: 1px solid transparent;
|
|
2600
2423
|
}
|
|
2601
2424
|
}
|
|
2602
2425
|
}
|
|
@@ -2623,7 +2446,6 @@
|
|
|
2623
2446
|
}
|
|
2624
2447
|
|
|
2625
2448
|
&.k-selected {
|
|
2626
|
-
border-left: 3px solid var(--octo-mint);
|
|
2627
2449
|
padding-left: 0;
|
|
2628
2450
|
}
|
|
2629
2451
|
|
|
@@ -2677,217 +2499,85 @@
|
|
|
2677
2499
|
padding: 0 4px;
|
|
2678
2500
|
font-size: 0.6rem;
|
|
2679
2501
|
line-height: 1.3;
|
|
2680
|
-
border-radius:
|
|
2502
|
+
border-radius: var(--theme-radius-xs, 2px);
|
|
2681
2503
|
background: var(--theme-bg-app);
|
|
2682
2504
|
}
|
|
2683
2505
|
}
|
|
2684
2506
|
}
|
|
2685
2507
|
|
|
2686
|
-
// Tabs -
|
|
2508
|
+
// Tabs - sentence case, accent underline on the active tab (concept §6.1)
|
|
2687
2509
|
.k-tabstrip {
|
|
2688
2510
|
.k-tabstrip-items {
|
|
2689
|
-
border-bottom:
|
|
2511
|
+
border-bottom: 1px solid var(--theme-border-subtle, var(--ash-blue-20));
|
|
2690
2512
|
|
|
2691
2513
|
.k-item {
|
|
2692
|
-
font-family: var(--
|
|
2514
|
+
font-family: var(--theme-font-ui, inherit);
|
|
2693
2515
|
font-weight: 500;
|
|
2694
|
-
text-transform:
|
|
2695
|
-
letter-spacing:
|
|
2696
|
-
border-radius: var(--
|
|
2697
|
-
transition:
|
|
2516
|
+
text-transform: none;
|
|
2517
|
+
letter-spacing: normal;
|
|
2518
|
+
border-radius: var(--theme-radius-sm, 4px) var(--theme-radius-sm, 4px) 0 0;
|
|
2519
|
+
transition: background-color var(--theme-motion-fast) var(--theme-motion-easing), color var(--theme-motion-fast) var(--theme-motion-easing);
|
|
2698
2520
|
|
|
2699
2521
|
&:hover {
|
|
2700
|
-
background: var(--octo-mint-10);
|
|
2522
|
+
background: var(--theme-bg-hover, var(--octo-mint-10));
|
|
2701
2523
|
}
|
|
2702
2524
|
|
|
2703
2525
|
&.k-active {
|
|
2704
|
-
background:
|
|
2705
|
-
border-bottom:
|
|
2706
|
-
color: var(--octo-mint);
|
|
2526
|
+
background: transparent;
|
|
2527
|
+
border-bottom: 2px solid var(--theme-accent, var(--octo-mint));
|
|
2528
|
+
color: var(--theme-text-accent, var(--octo-mint));
|
|
2707
2529
|
}
|
|
2708
2530
|
}
|
|
2709
2531
|
}
|
|
2710
2532
|
}
|
|
2711
2533
|
|
|
2712
|
-
// Cards
|
|
2534
|
+
// Cards
|
|
2713
2535
|
.k-card {
|
|
2714
|
-
background: var(--
|
|
2715
|
-
border: var(--
|
|
2716
|
-
border-radius: var(--
|
|
2536
|
+
background: var(--theme-bg-surface);
|
|
2537
|
+
border: 1px solid var(--theme-border-default, var(--octo-mint-20));
|
|
2538
|
+
border-radius: var(--theme-radius-md, 6px);
|
|
2717
2539
|
overflow: hidden;
|
|
2718
2540
|
|
|
2719
2541
|
.k-card-header {
|
|
2720
|
-
background:
|
|
2721
|
-
border-
|
|
2722
|
-
font-family: var(--
|
|
2542
|
+
background: transparent;
|
|
2543
|
+
border-bottom: 1px solid var(--theme-border-subtle, var(--octo-mint-20));
|
|
2544
|
+
font-family: var(--theme-font-display, inherit);
|
|
2723
2545
|
font-weight: 600;
|
|
2724
2546
|
}
|
|
2725
2547
|
}
|
|
2726
2548
|
|
|
2727
|
-
// Tooltip
|
|
2549
|
+
// Tooltip
|
|
2728
2550
|
.k-tooltip {
|
|
2729
|
-
background: var(--iron-navy);
|
|
2730
|
-
|
|
2731
|
-
border
|
|
2732
|
-
|
|
2733
|
-
|
|
2734
|
-
var(--lcars-glow-primary);
|
|
2551
|
+
background: var(--theme-bg-overlay, var(--iron-navy));
|
|
2552
|
+
color: var(--theme-text-primary, inherit);
|
|
2553
|
+
border: 1px solid var(--theme-border-default, var(--octo-mint-40));
|
|
2554
|
+
border-radius: var(--theme-radius-sm, 4px);
|
|
2555
|
+
box-shadow: var(--theme-shadow-popup, 0 4px 16px rgba(0, 0, 0, 0.3));
|
|
2735
2556
|
}
|
|
2736
2557
|
|
|
2737
|
-
// Progress indicators
|
|
2558
|
+
// Progress indicators
|
|
2738
2559
|
.k-progressbar {
|
|
2739
|
-
background: var(--ash-blue-20);
|
|
2740
|
-
border-radius: var(--
|
|
2560
|
+
background: var(--theme-border-subtle, var(--ash-blue-20));
|
|
2561
|
+
border-radius: var(--theme-radius-xs, 2px);
|
|
2741
2562
|
overflow: hidden;
|
|
2742
2563
|
|
|
2743
2564
|
.k-selected {
|
|
2744
|
-
background:
|
|
2745
|
-
box-shadow: var(--lcars-glow-primary);
|
|
2565
|
+
background: var(--theme-accent, var(--octo-mint));
|
|
2746
2566
|
}
|
|
2747
2567
|
}
|
|
2748
2568
|
|
|
2749
|
-
// Chip/Badge
|
|
2569
|
+
// Chip/Badge
|
|
2750
2570
|
.k-chip {
|
|
2751
|
-
font-family: var(--
|
|
2571
|
+
font-family: var(--theme-font-ui, inherit);
|
|
2752
2572
|
font-weight: 500;
|
|
2753
|
-
border-radius: var(--
|
|
2573
|
+
border-radius: var(--theme-radius-xs, 2px);
|
|
2754
2574
|
|
|
2755
2575
|
&.k-chip-solid-primary {
|
|
2756
|
-
background:
|
|
2757
|
-
|
|
2758
|
-
var(--octo-mint),
|
|
2759
|
-
color.adjust($octo-mint, $lightness: -10%)
|
|
2760
|
-
);
|
|
2576
|
+
background: var(--theme-accent, var(--octo-mint));
|
|
2577
|
+
color: var(--theme-text-on-accent, var(--deep-sea));
|
|
2761
2578
|
}
|
|
2762
2579
|
}
|
|
2763
2580
|
|
|
2764
|
-
// LCARS utilities
|
|
2765
|
-
|
|
2766
|
-
// Glow effects
|
|
2767
|
-
.lcars-glow-mint {
|
|
2768
|
-
box-shadow: var(--lcars-glow-primary);
|
|
2769
|
-
}
|
|
2770
|
-
.lcars-glow-cyan {
|
|
2771
|
-
box-shadow: var(--lcars-glow-cyan);
|
|
2772
|
-
}
|
|
2773
|
-
.lcars-glow-violet {
|
|
2774
|
-
box-shadow: var(--lcars-glow-violet);
|
|
2775
|
-
}
|
|
2776
|
-
.lcars-glow-pink {
|
|
2777
|
-
box-shadow: var(--lcars-glow-pink);
|
|
2778
|
-
}
|
|
2779
|
-
|
|
2780
|
-
// Text colors
|
|
2781
|
-
.lcars-text-mint {
|
|
2782
|
-
color: var(--octo-mint);
|
|
2783
|
-
}
|
|
2784
|
-
.lcars-text-cyan {
|
|
2785
|
-
color: var(--neo-cyan);
|
|
2786
|
-
}
|
|
2787
|
-
.lcars-text-violet {
|
|
2788
|
-
color: var(--royal-violet);
|
|
2789
|
-
}
|
|
2790
|
-
.lcars-text-pink {
|
|
2791
|
-
color: var(--bubblegum);
|
|
2792
|
-
}
|
|
2793
|
-
.lcars-text-toffee {
|
|
2794
|
-
color: var(--toffee);
|
|
2795
|
-
}
|
|
2796
|
-
|
|
2797
|
-
// Background colors
|
|
2798
|
-
.lcars-bg-panel {
|
|
2799
|
-
background: var(--lcars-panel-bg);
|
|
2800
|
-
}
|
|
2801
|
-
.lcars-bg-deep {
|
|
2802
|
-
background: var(--deep-sea);
|
|
2803
|
-
}
|
|
2804
|
-
.lcars-bg-navy {
|
|
2805
|
-
background: var(--iron-navy);
|
|
2806
|
-
}
|
|
2807
|
-
|
|
2808
|
-
// Borders
|
|
2809
|
-
.lcars-border-mint {
|
|
2810
|
-
border-color: var(--octo-mint);
|
|
2811
|
-
}
|
|
2812
|
-
.lcars-border-glow {
|
|
2813
|
-
border: 1px solid var(--octo-mint-40);
|
|
2814
|
-
box-shadow: var(--lcars-glow-primary);
|
|
2815
|
-
}
|
|
2816
|
-
|
|
2817
|
-
// LCARS decorative elements
|
|
2818
|
-
.lcars-divider {
|
|
2819
|
-
height: 2px;
|
|
2820
|
-
background: linear-gradient(
|
|
2821
|
-
90deg,
|
|
2822
|
-
var(--octo-mint),
|
|
2823
|
-
var(--neo-cyan),
|
|
2824
|
-
transparent
|
|
2825
|
-
);
|
|
2826
|
-
margin: 16px 0;
|
|
2827
|
-
}
|
|
2828
|
-
|
|
2829
|
-
.lcars-corner-accent {
|
|
2830
|
-
position: relative;
|
|
2831
|
-
|
|
2832
|
-
&::before {
|
|
2833
|
-
content: "";
|
|
2834
|
-
position: absolute;
|
|
2835
|
-
top: 0;
|
|
2836
|
-
left: 0;
|
|
2837
|
-
width: 40px;
|
|
2838
|
-
height: 40px;
|
|
2839
|
-
border-left: 3px solid var(--octo-mint);
|
|
2840
|
-
border-top: 3px solid var(--octo-mint);
|
|
2841
|
-
border-radius: var(--lcars-radius-md) 0 0 0;
|
|
2842
|
-
}
|
|
2843
|
-
}
|
|
2844
|
-
|
|
2845
|
-
// Scan line animation (subtle LCARS effect)
|
|
2846
|
-
.lcars-scanline {
|
|
2847
|
-
position: relative;
|
|
2848
|
-
overflow: hidden;
|
|
2849
|
-
|
|
2850
|
-
&::after {
|
|
2851
|
-
content: "";
|
|
2852
|
-
position: absolute;
|
|
2853
|
-
top: 0;
|
|
2854
|
-
left: -100%;
|
|
2855
|
-
width: 100%;
|
|
2856
|
-
height: 100%;
|
|
2857
|
-
background: linear-gradient(
|
|
2858
|
-
90deg,
|
|
2859
|
-
transparent,
|
|
2860
|
-
var(--octo-mint-05),
|
|
2861
|
-
transparent
|
|
2862
|
-
);
|
|
2863
|
-
animation: lcars-scan 3s ease-in-out infinite;
|
|
2864
|
-
}
|
|
2865
|
-
}
|
|
2866
|
-
|
|
2867
|
-
@keyframes lcars-scan {
|
|
2868
|
-
0% {
|
|
2869
|
-
left: -100%;
|
|
2870
|
-
}
|
|
2871
|
-
100% {
|
|
2872
|
-
left: 100%;
|
|
2873
|
-
}
|
|
2874
|
-
}
|
|
2875
|
-
|
|
2876
|
-
// Pulse animation for active/alert elements
|
|
2877
|
-
@keyframes lcars-pulse {
|
|
2878
|
-
0%,
|
|
2879
|
-
100% {
|
|
2880
|
-
opacity: 1;
|
|
2881
|
-
}
|
|
2882
|
-
50% {
|
|
2883
|
-
opacity: 0.7;
|
|
2884
|
-
}
|
|
2885
|
-
}
|
|
2886
|
-
|
|
2887
|
-
.lcars-pulse {
|
|
2888
|
-
animation: lcars-pulse 2s ease-in-out infinite;
|
|
2889
|
-
}
|
|
2890
|
-
|
|
2891
2581
|
// Layout
|
|
2892
2582
|
|
|
2893
2583
|
.octo-body {
|
|
@@ -2911,18 +2601,18 @@
|
|
|
2911
2601
|
}
|
|
2912
2602
|
|
|
2913
2603
|
&::-webkit-scrollbar-thumb {
|
|
2914
|
-
background: var(--ash-blue-80);
|
|
2915
|
-
border-radius: 4px;
|
|
2916
|
-
border:
|
|
2604
|
+
background: var(--theme-border-strong, var(--ash-blue-80));
|
|
2605
|
+
border-radius: var(--theme-radius-sm, 4px);
|
|
2606
|
+
border: none;
|
|
2917
2607
|
|
|
2918
2608
|
&:hover {
|
|
2919
|
-
background: var(--
|
|
2609
|
+
background: var(--theme-text-muted, var(--ash-blue));
|
|
2920
2610
|
}
|
|
2921
2611
|
}
|
|
2922
2612
|
|
|
2923
2613
|
&::-webkit-scrollbar-track {
|
|
2924
|
-
background:
|
|
2925
|
-
border-radius: 4px;
|
|
2614
|
+
background: transparent;
|
|
2615
|
+
border-radius: var(--theme-radius-sm, 4px);
|
|
2926
2616
|
}
|
|
2927
2617
|
|
|
2928
2618
|
// Override form container to not handle its own scrolling -
|
|
@@ -2966,7 +2656,7 @@
|
|
|
2966
2656
|
min-height: 600px;
|
|
2967
2657
|
}
|
|
2968
2658
|
|
|
2969
|
-
// Scrollbars
|
|
2659
|
+
// Scrollbars — neutral thumb on a transparent track (Deep Sea)
|
|
2970
2660
|
|
|
2971
2661
|
::-webkit-scrollbar {
|
|
2972
2662
|
width: 8px;
|
|
@@ -2974,145 +2664,118 @@
|
|
|
2974
2664
|
}
|
|
2975
2665
|
|
|
2976
2666
|
::-webkit-scrollbar-track {
|
|
2977
|
-
background:
|
|
2978
|
-
border-radius: var(--
|
|
2667
|
+
background: transparent;
|
|
2668
|
+
border-radius: var(--theme-radius-sm, 4px);
|
|
2979
2669
|
}
|
|
2980
2670
|
|
|
2981
2671
|
::-webkit-scrollbar-thumb {
|
|
2982
|
-
background:
|
|
2983
|
-
border-radius: var(--
|
|
2984
|
-
border:
|
|
2672
|
+
background: var(--theme-border-strong, var(--ash-blue));
|
|
2673
|
+
border-radius: var(--theme-radius-sm, 4px);
|
|
2674
|
+
border: none;
|
|
2985
2675
|
|
|
2986
2676
|
&:hover {
|
|
2987
|
-
background:
|
|
2677
|
+
background: var(--theme-text-muted, var(--ash-blue));
|
|
2988
2678
|
}
|
|
2989
2679
|
}
|
|
2990
2680
|
|
|
2991
2681
|
// Firefox scrollbar
|
|
2992
2682
|
* {
|
|
2993
2683
|
scrollbar-width: thin;
|
|
2994
|
-
scrollbar-color: var(--
|
|
2684
|
+
scrollbar-color: var(--theme-border-strong, var(--iron-navy)) transparent;
|
|
2995
2685
|
}
|
|
2996
2686
|
|
|
2997
|
-
// Login popup
|
|
2687
|
+
// Login popup — flat overlay surface; start = end so the shared-auth
|
|
2688
|
+
// gradient variables render flat.
|
|
2998
2689
|
|
|
2999
2690
|
mm-login-app-bar-section {
|
|
3000
|
-
--mm-login-bg-start: var(--iron-navy);
|
|
3001
|
-
--mm-login-bg-end: var(--surface-elevated);
|
|
3002
|
-
--mm-login-accent: #{$octo-mint};
|
|
2691
|
+
--mm-login-bg-start: var(--theme-bg-overlay, var(--iron-navy));
|
|
2692
|
+
--mm-login-bg-end: var(--theme-bg-overlay, var(--surface-elevated));
|
|
2693
|
+
--mm-login-accent: var(--theme-accent, #{$octo-mint});
|
|
3003
2694
|
--mm-login-accent-rgb: 100, 206, 185;
|
|
3004
2695
|
--mm-login-text: var(--theme-text-on-accent, #ffffff);
|
|
3005
|
-
--mm-login-btn-primary-start: #{$octo-mint};
|
|
3006
|
-
--mm-login-btn-primary-end: #{
|
|
3007
|
-
--mm-login-btn-primary-text: var(--deep-sea);
|
|
3008
|
-
--mm-login-font: var(--
|
|
2696
|
+
--mm-login-btn-primary-start: var(--theme-accent, #{$octo-mint});
|
|
2697
|
+
--mm-login-btn-primary-end: var(--theme-accent, #{$octo-mint});
|
|
2698
|
+
--mm-login-btn-primary-text: var(--theme-text-on-accent, var(--deep-sea));
|
|
2699
|
+
--mm-login-font: var(--theme-font-ui);
|
|
3009
2700
|
}
|
|
3010
2701
|
|
|
3011
2702
|
// Style the popup container itself
|
|
3012
2703
|
.k-popup {
|
|
3013
|
-
background: var(--iron-navy) !important;
|
|
3014
|
-
border: 1px solid var(--octo-mint-30) !important;
|
|
3015
|
-
border-radius: 8px !important;
|
|
3016
|
-
box-shadow:
|
|
3017
|
-
0 8px 32px rgba(0, 0, 0, 0.4),
|
|
3018
|
-
0 0 20px var(--octo-mint-10) !important;
|
|
2704
|
+
background: var(--theme-bg-overlay, var(--iron-navy)) !important;
|
|
2705
|
+
border: 1px solid var(--theme-border-default, var(--octo-mint-30)) !important;
|
|
2706
|
+
border-radius: var(--theme-radius-lg, 8px) !important;
|
|
2707
|
+
box-shadow: var(--theme-shadow-popup, 0 8px 32px rgba(0, 0, 0, 0.4)) !important;
|
|
3019
2708
|
// Allow scrolling in dropdowns - do NOT use overflow: hidden
|
|
3020
2709
|
|
|
3021
|
-
// Login popup content
|
|
2710
|
+
// Login popup content — rendered in body, so CSS variables from
|
|
3022
2711
|
// mm-login-app-bar-section :host don't cascade here. Style directly.
|
|
3023
2712
|
> .content {
|
|
3024
|
-
--mm-login-bg-start: var(--iron-navy);
|
|
3025
|
-
--mm-login-bg-end: var(--surface-elevated);
|
|
3026
|
-
--mm-login-accent: #{$octo-mint};
|
|
2713
|
+
--mm-login-bg-start: var(--theme-bg-overlay, var(--iron-navy));
|
|
2714
|
+
--mm-login-bg-end: var(--theme-bg-overlay, var(--surface-elevated));
|
|
2715
|
+
--mm-login-accent: var(--theme-accent, #{$octo-mint});
|
|
3027
2716
|
--mm-login-accent-rgb: 100, 206, 185;
|
|
3028
2717
|
--mm-login-text: var(--theme-text-on-accent, #ffffff);
|
|
3029
|
-
--mm-login-btn-primary-start: #{$octo-mint};
|
|
3030
|
-
--mm-login-btn-primary-end: #{
|
|
3031
|
-
--mm-login-btn-primary-text: var(--deep-sea);
|
|
3032
|
-
--mm-login-font: var(--
|
|
2718
|
+
--mm-login-btn-primary-start: var(--theme-accent, #{$octo-mint});
|
|
2719
|
+
--mm-login-btn-primary-end: var(--theme-accent, #{$octo-mint});
|
|
2720
|
+
--mm-login-btn-primary-text: var(--theme-text-on-accent, var(--deep-sea));
|
|
2721
|
+
--mm-login-font: var(--theme-font-ui);
|
|
3033
2722
|
|
|
3034
|
-
background:
|
|
3035
|
-
180deg,
|
|
3036
|
-
var(--iron-navy),
|
|
3037
|
-
var(--surface-elevated)
|
|
3038
|
-
) !important;
|
|
2723
|
+
background: var(--theme-bg-overlay, var(--iron-navy)) !important;
|
|
3039
2724
|
|
|
3040
2725
|
.user-avatar {
|
|
3041
|
-
border:
|
|
3042
|
-
box-shadow:
|
|
2726
|
+
border: 1px solid var(--theme-border-default, var(--octo-mint-40)) !important;
|
|
2727
|
+
box-shadow: none !important;
|
|
3043
2728
|
|
|
3044
2729
|
.k-avatar-text {
|
|
3045
|
-
font-family: var(
|
|
3046
|
-
--lcars-font-primary,
|
|
3047
|
-
"Montserrat",
|
|
3048
|
-
sans-serif
|
|
3049
|
-
) !important;
|
|
2730
|
+
font-family: var(--theme-font-display, "Montserrat", sans-serif) !important;
|
|
3050
2731
|
font-weight: 600 !important;
|
|
3051
|
-
text-transform: uppercase !important;
|
|
2732
|
+
text-transform: uppercase !important; // initials
|
|
3052
2733
|
}
|
|
3053
2734
|
}
|
|
3054
2735
|
|
|
3055
2736
|
.user-name {
|
|
3056
|
-
font-family: var(
|
|
3057
|
-
|
|
3058
|
-
"Montserrat",
|
|
3059
|
-
sans-serif
|
|
3060
|
-
) !important;
|
|
3061
|
-
color: var(--octo-text-color) !important;
|
|
2737
|
+
font-family: var(--theme-font-display, "Montserrat", sans-serif) !important;
|
|
2738
|
+
color: var(--theme-text-primary, var(--octo-text-color)) !important;
|
|
3062
2739
|
}
|
|
3063
2740
|
|
|
3064
2741
|
.buttons {
|
|
3065
2742
|
.k-button {
|
|
3066
|
-
font-family: var(
|
|
3067
|
-
--lcars-font-primary,
|
|
3068
|
-
"Montserrat",
|
|
3069
|
-
sans-serif
|
|
3070
|
-
) !important;
|
|
2743
|
+
font-family: var(--theme-font-ui, sans-serif) !important;
|
|
3071
2744
|
}
|
|
3072
2745
|
|
|
3073
2746
|
button.k-button-solid-primary {
|
|
3074
|
-
background:
|
|
3075
|
-
180deg,
|
|
3076
|
-
var(--octo-mint),
|
|
3077
|
-
color.adjust($octo-mint, $lightness: -10%)
|
|
3078
|
-
) !important;
|
|
2747
|
+
background: var(--theme-accent, var(--octo-mint)) !important;
|
|
3079
2748
|
border: none !important;
|
|
3080
|
-
color: var(--deep-sea) !important;
|
|
2749
|
+
color: var(--theme-text-on-accent, var(--deep-sea)) !important;
|
|
3081
2750
|
|
|
3082
2751
|
&:hover {
|
|
3083
|
-
background:
|
|
3084
|
-
|
|
3085
|
-
color.adjust($octo-mint, $lightness: 5%),
|
|
3086
|
-
var(--octo-mint)
|
|
3087
|
-
) !important;
|
|
3088
|
-
box-shadow: 0 0 15px var(--octo-mint-50) !important;
|
|
2752
|
+
background: var(--theme-accent-hover, var(--octo-mint)) !important;
|
|
2753
|
+
box-shadow: none !important;
|
|
3089
2754
|
}
|
|
3090
2755
|
}
|
|
3091
2756
|
|
|
3092
2757
|
a.k-button-solid {
|
|
3093
|
-
background:
|
|
3094
|
-
border: 1px solid var(--octo-mint-30) !important;
|
|
3095
|
-
color: var(--octo-mint) !important;
|
|
2758
|
+
background: transparent !important;
|
|
2759
|
+
border: 1px solid var(--theme-border-default, var(--octo-mint-30)) !important;
|
|
2760
|
+
color: var(--theme-text-primary, var(--octo-mint)) !important;
|
|
3096
2761
|
|
|
3097
2762
|
&:hover {
|
|
3098
|
-
background: var(--octo-mint-20) !important;
|
|
3099
|
-
box-shadow:
|
|
2763
|
+
background: var(--theme-bg-hover, var(--octo-mint-20)) !important;
|
|
2764
|
+
box-shadow: none !important;
|
|
3100
2765
|
}
|
|
3101
2766
|
}
|
|
3102
2767
|
}
|
|
3103
2768
|
}
|
|
3104
2769
|
}
|
|
3105
2770
|
|
|
3106
|
-
// Context menu
|
|
2771
|
+
// Context menu — overlay surface, sentence case, neutral hover
|
|
3107
2772
|
.k-context-menu,
|
|
3108
2773
|
.k-menu.k-context-menu {
|
|
3109
|
-
background: var(--iron-navy);
|
|
3110
|
-
border: 1px solid var(--octo-mint-30);
|
|
3111
|
-
border-radius: 8px;
|
|
3112
|
-
box-shadow:
|
|
3113
|
-
|
|
3114
|
-
0 0 20px var(--octo-mint-15);
|
|
3115
|
-
padding: 8px 0;
|
|
2774
|
+
background: var(--theme-bg-overlay, var(--iron-navy));
|
|
2775
|
+
border: 1px solid var(--theme-border-default, var(--octo-mint-30));
|
|
2776
|
+
border-radius: var(--theme-radius-lg, 8px);
|
|
2777
|
+
box-shadow: var(--theme-shadow-popup, 0 8px 32px rgba(0, 0, 0, 0.5));
|
|
2778
|
+
padding: 4px 0;
|
|
3116
2779
|
min-width: 180px;
|
|
3117
2780
|
overflow: hidden;
|
|
3118
2781
|
|
|
@@ -3121,14 +2784,16 @@
|
|
|
3121
2784
|
margin: 0;
|
|
3122
2785
|
|
|
3123
2786
|
.k-menu-link {
|
|
3124
|
-
padding:
|
|
3125
|
-
color: var(--ash-blue);
|
|
3126
|
-
font-family: var(--
|
|
2787
|
+
padding: 8px 14px;
|
|
2788
|
+
color: var(--theme-text-primary, var(--ash-blue));
|
|
2789
|
+
font-family: var(--theme-font-ui, inherit);
|
|
3127
2790
|
font-size: 0.85rem;
|
|
3128
|
-
font-weight:
|
|
3129
|
-
text-transform:
|
|
3130
|
-
letter-spacing:
|
|
3131
|
-
transition:
|
|
2791
|
+
font-weight: 400;
|
|
2792
|
+
text-transform: none;
|
|
2793
|
+
letter-spacing: normal;
|
|
2794
|
+
transition:
|
|
2795
|
+
background-color var(--theme-motion-fast) var(--theme-motion-easing),
|
|
2796
|
+
color var(--theme-motion-fast) var(--theme-motion-easing);
|
|
3132
2797
|
display: flex;
|
|
3133
2798
|
align-items: center;
|
|
3134
2799
|
gap: 12px;
|
|
@@ -3140,66 +2805,57 @@
|
|
|
3140
2805
|
.k-svg-icon,
|
|
3141
2806
|
.k-icon,
|
|
3142
2807
|
svg {
|
|
3143
|
-
fill: var(--ash-blue);
|
|
3144
|
-
color: var(--ash-blue);
|
|
3145
|
-
width:
|
|
3146
|
-
height:
|
|
3147
|
-
transition: all 0.15s ease;
|
|
2808
|
+
fill: var(--theme-text-secondary, var(--ash-blue));
|
|
2809
|
+
color: var(--theme-text-secondary, var(--ash-blue));
|
|
2810
|
+
width: 16px;
|
|
2811
|
+
height: 16px;
|
|
3148
2812
|
}
|
|
3149
2813
|
}
|
|
3150
2814
|
|
|
3151
2815
|
// Hover state
|
|
3152
2816
|
&:hover > .k-menu-link,
|
|
3153
2817
|
&.k-hover > .k-menu-link {
|
|
3154
|
-
background:
|
|
3155
|
-
|
|
3156
|
-
var(--octo-mint-20),
|
|
3157
|
-
var(--octo-mint-05)
|
|
3158
|
-
);
|
|
3159
|
-
color: var(--octo-mint);
|
|
2818
|
+
background: var(--theme-bg-hover, var(--octo-mint-10));
|
|
2819
|
+
color: var(--theme-text-primary, var(--octo-mint));
|
|
3160
2820
|
|
|
3161
2821
|
.k-svg-icon,
|
|
3162
2822
|
.k-icon,
|
|
3163
2823
|
svg {
|
|
3164
|
-
fill: var(--octo-mint);
|
|
3165
|
-
color: var(--octo-mint);
|
|
2824
|
+
fill: var(--theme-text-primary, var(--octo-mint));
|
|
2825
|
+
color: var(--theme-text-primary, var(--octo-mint));
|
|
3166
2826
|
}
|
|
3167
2827
|
}
|
|
3168
2828
|
|
|
3169
2829
|
// Focus state
|
|
3170
2830
|
&:focus > .k-menu-link,
|
|
3171
2831
|
&.k-focus > .k-menu-link {
|
|
3172
|
-
background: var(--octo-mint-15);
|
|
3173
|
-
box-shadow:
|
|
2832
|
+
background: var(--theme-bg-selected, var(--octo-mint-15));
|
|
2833
|
+
box-shadow: none;
|
|
3174
2834
|
}
|
|
3175
2835
|
|
|
3176
2836
|
// Delete/destructive action styling
|
|
3177
2837
|
&[data-command="delete"],
|
|
3178
2838
|
&.destructive {
|
|
3179
2839
|
.k-menu-link {
|
|
3180
|
-
color: var(--bubblegum);
|
|
2840
|
+
color: var(--theme-status-error, var(--bubblegum));
|
|
3181
2841
|
|
|
3182
2842
|
.k-svg-icon,
|
|
3183
2843
|
.k-icon,
|
|
3184
2844
|
svg {
|
|
3185
|
-
fill: var(--bubblegum);
|
|
3186
|
-
color: var(--bubblegum);
|
|
2845
|
+
fill: var(--theme-status-error, var(--bubblegum));
|
|
2846
|
+
color: var(--theme-status-error, var(--bubblegum));
|
|
3187
2847
|
}
|
|
3188
2848
|
}
|
|
3189
2849
|
|
|
3190
2850
|
&:hover > .k-menu-link {
|
|
3191
|
-
background:
|
|
3192
|
-
|
|
3193
|
-
var(--bubblegum-20),
|
|
3194
|
-
var(--bubblegum-05)
|
|
3195
|
-
);
|
|
3196
|
-
color: var(--bubblegum);
|
|
2851
|
+
background: var(--theme-status-error-subtle, var(--bubblegum-10));
|
|
2852
|
+
color: var(--theme-status-error, var(--bubblegum));
|
|
3197
2853
|
|
|
3198
2854
|
.k-svg-icon,
|
|
3199
2855
|
.k-icon,
|
|
3200
2856
|
svg {
|
|
3201
|
-
fill: var(--bubblegum);
|
|
3202
|
-
color: var(--bubblegum);
|
|
2857
|
+
fill: var(--theme-status-error, var(--bubblegum));
|
|
2858
|
+
color: var(--theme-status-error, var(--bubblegum));
|
|
3203
2859
|
}
|
|
3204
2860
|
}
|
|
3205
2861
|
}
|
|
@@ -3208,14 +2864,9 @@
|
|
|
3208
2864
|
// Separator
|
|
3209
2865
|
.k-menu-separator,
|
|
3210
2866
|
.k-separator {
|
|
3211
|
-
margin:
|
|
2867
|
+
margin: 4px 0;
|
|
3212
2868
|
height: 1px;
|
|
3213
|
-
background:
|
|
3214
|
-
90deg,
|
|
3215
|
-
transparent,
|
|
3216
|
-
var(--octo-mint-30),
|
|
3217
|
-
transparent
|
|
3218
|
-
);
|
|
2869
|
+
background: var(--theme-border-subtle, var(--octo-mint-20));
|
|
3219
2870
|
border: none;
|
|
3220
2871
|
}
|
|
3221
2872
|
}
|
|
@@ -3223,14 +2874,14 @@
|
|
|
3223
2874
|
// Context menu popup wrapper
|
|
3224
2875
|
.k-menu-popup {
|
|
3225
2876
|
.k-context-menu {
|
|
3226
|
-
background: var(--iron-navy);
|
|
2877
|
+
background: var(--theme-bg-overlay, var(--iron-navy));
|
|
3227
2878
|
}
|
|
3228
2879
|
}
|
|
3229
2880
|
|
|
3230
2881
|
// Animation container for context menu
|
|
3231
2882
|
.k-animation-container {
|
|
3232
2883
|
&:has(.k-context-menu) {
|
|
3233
|
-
border-radius: 8px;
|
|
2884
|
+
border-radius: var(--theme-radius-lg, 8px);
|
|
3234
2885
|
overflow: hidden;
|
|
3235
2886
|
}
|
|
3236
2887
|
}
|
|
@@ -3257,31 +2908,31 @@
|
|
|
3257
2908
|
// Context menu button (three-dot icon) - override Kendo default gray background
|
|
3258
2909
|
.k-icon-button {
|
|
3259
2910
|
background: transparent;
|
|
3260
|
-
border-color:
|
|
3261
|
-
color: var(--octo-mint);
|
|
2911
|
+
border-color: transparent;
|
|
2912
|
+
color: var(--theme-text-secondary, var(--octo-mint));
|
|
3262
2913
|
|
|
3263
2914
|
&:hover {
|
|
3264
|
-
background: var(--octo-mint-10);
|
|
3265
|
-
|
|
2915
|
+
background: var(--theme-bg-hover, var(--octo-mint-10));
|
|
2916
|
+
color: var(--theme-text-primary, var(--octo-mint));
|
|
3266
2917
|
}
|
|
3267
2918
|
}
|
|
3268
2919
|
}
|
|
3269
2920
|
|
|
3270
2921
|
// List view toolbar styling
|
|
3271
2922
|
.list-view-toolbar {
|
|
3272
|
-
background:
|
|
3273
|
-
border-bottom: 1px solid var(--octo-mint-20);
|
|
2923
|
+
background: var(--theme-bg-elevated, transparent);
|
|
2924
|
+
border-bottom: 1px solid var(--theme-border-subtle, var(--octo-mint-20));
|
|
3274
2925
|
padding: 12px 16px;
|
|
3275
2926
|
|
|
3276
2927
|
.k-button {
|
|
3277
|
-
@include
|
|
2928
|
+
@include octo-button;
|
|
3278
2929
|
}
|
|
3279
2930
|
}
|
|
3280
2931
|
|
|
3281
2932
|
// Kendo grid toolbar (rendered by mm-list-view / kendo-grid internally)
|
|
3282
2933
|
.k-grid-toolbar {
|
|
3283
2934
|
.k-button {
|
|
3284
|
-
@include
|
|
2935
|
+
@include octo-button;
|
|
3285
2936
|
}
|
|
3286
2937
|
}
|
|
3287
2938
|
|
|
@@ -3303,7 +2954,7 @@
|
|
|
3303
2954
|
}
|
|
3304
2955
|
|
|
3305
2956
|
.k-button {
|
|
3306
|
-
@include
|
|
2957
|
+
@include octo-button;
|
|
3307
2958
|
}
|
|
3308
2959
|
|
|
3309
2960
|
// Responsive
|
|
@@ -3319,15 +2970,18 @@
|
|
|
3319
2970
|
}
|
|
3320
2971
|
}
|
|
3321
2972
|
|
|
3322
|
-
//
|
|
3323
|
-
//
|
|
3324
|
-
//
|
|
3325
|
-
//
|
|
3326
|
-
//
|
|
2973
|
+
// --------------------------------------------------------------------------
|
|
2974
|
+
// Legacy LCARS page pattern — kept ONLY for the Meshmakers App until it
|
|
2975
|
+
// migrates to <mm-page> (AB#5526). The Refinery Studio no longer uses these
|
|
2976
|
+
// classes; new pages use <mm-page> from @meshmakers/octo-ui. Deep Sea look:
|
|
2977
|
+
// no accent bar or header rule, sentence-case display title, a plain
|
|
2978
|
+
// surface card for the content panel, and no "READY" footer (concept §3.4).
|
|
2979
|
+
// --------------------------------------------------------------------------
|
|
3327
2980
|
.lcars-page-header {
|
|
3328
2981
|
display: flex;
|
|
3329
2982
|
align-items: center;
|
|
3330
|
-
|
|
2983
|
+
flex-wrap: wrap;
|
|
2984
|
+
gap: 8px 12px;
|
|
3331
2985
|
padding: 4px 0;
|
|
3332
2986
|
flex-shrink: 0;
|
|
3333
2987
|
|
|
@@ -3336,14 +2990,9 @@
|
|
|
3336
2990
|
}
|
|
3337
2991
|
}
|
|
3338
2992
|
|
|
3339
|
-
.lcars-header-accent
|
|
3340
|
-
|
|
3341
|
-
|
|
3342
|
-
align-self: center;
|
|
3343
|
-
background: linear-gradient(180deg, var(--octo-mint), var(--neo-cyan));
|
|
3344
|
-
border-radius: 4px 0 0 4px;
|
|
3345
|
-
box-shadow: 0 0 15px var(--octo-mint-50);
|
|
3346
|
-
flex-shrink: 0;
|
|
2993
|
+
.lcars-header-accent,
|
|
2994
|
+
.lcars-header-line {
|
|
2995
|
+
display: none;
|
|
3347
2996
|
}
|
|
3348
2997
|
|
|
3349
2998
|
.header-content {
|
|
@@ -3355,88 +3004,43 @@
|
|
|
3355
3004
|
.page-title {
|
|
3356
3005
|
display: flex;
|
|
3357
3006
|
align-items: baseline;
|
|
3358
|
-
|
|
3007
|
+
flex-wrap: wrap;
|
|
3008
|
+
gap: 4px 10px;
|
|
3359
3009
|
margin: 0;
|
|
3360
|
-
font-family: var(--
|
|
3010
|
+
font-family: var(--theme-font-display);
|
|
3361
3011
|
|
|
3362
3012
|
.title-prefix {
|
|
3363
|
-
font-
|
|
3364
|
-
font-
|
|
3365
|
-
|
|
3366
|
-
|
|
3367
|
-
text-
|
|
3013
|
+
font-family: var(--theme-font-ui, inherit);
|
|
3014
|
+
font-size: 0.8125rem;
|
|
3015
|
+
font-weight: 500;
|
|
3016
|
+
letter-spacing: normal;
|
|
3017
|
+
color: var(--theme-text-secondary, var(--ash-blue));
|
|
3018
|
+
text-transform: none;
|
|
3368
3019
|
}
|
|
3369
3020
|
|
|
3370
3021
|
.title-main {
|
|
3371
|
-
font-size: 1.
|
|
3022
|
+
font-size: 1.25rem;
|
|
3023
|
+
line-height: 1.4;
|
|
3372
3024
|
font-weight: 600;
|
|
3373
|
-
letter-spacing:
|
|
3374
|
-
color: var(--octo-text-color);
|
|
3375
|
-
text-transform:
|
|
3025
|
+
letter-spacing: normal;
|
|
3026
|
+
color: var(--theme-text-primary, var(--octo-text-color));
|
|
3027
|
+
text-transform: none;
|
|
3376
3028
|
}
|
|
3377
3029
|
}
|
|
3378
3030
|
|
|
3379
|
-
.header-stats {
|
|
3380
|
-
display: flex;
|
|
3381
|
-
gap: 16px;
|
|
3382
|
-
}
|
|
3383
|
-
|
|
3384
|
-
.stat-badge {
|
|
3385
|
-
display: flex;
|
|
3386
|
-
align-items: center;
|
|
3387
|
-
gap: 8px;
|
|
3388
|
-
padding: 4px 12px;
|
|
3389
|
-
background: var(--octo-mint-10);
|
|
3390
|
-
border: 1px solid var(--octo-mint-30);
|
|
3391
|
-
border-radius: 4px;
|
|
3392
|
-
|
|
3393
|
-
.badge-icon {
|
|
3394
|
-
font-size: 0.6rem;
|
|
3395
|
-
color: var(--octo-mint);
|
|
3396
|
-
animation: lcars-pulse 2s ease-in-out infinite;
|
|
3397
|
-
}
|
|
3398
|
-
|
|
3399
|
-
.badge-label {
|
|
3400
|
-
font-size: 0.75rem;
|
|
3401
|
-
font-weight: 500;
|
|
3402
|
-
color: var(--octo-mint);
|
|
3403
|
-
text-transform: uppercase;
|
|
3404
|
-
letter-spacing: 1px;
|
|
3405
|
-
}
|
|
3406
|
-
}
|
|
3407
|
-
|
|
3408
|
-
.lcars-header-line {
|
|
3409
|
-
flex: 1;
|
|
3410
|
-
height: 2px;
|
|
3411
|
-
background: linear-gradient(
|
|
3412
|
-
90deg,
|
|
3413
|
-
var(--octo-mint),
|
|
3414
|
-
var(--neo-cyan),
|
|
3415
|
-
transparent
|
|
3416
|
-
);
|
|
3417
|
-
border-radius: 1px;
|
|
3418
|
-
align-self: center;
|
|
3419
|
-
}
|
|
3420
|
-
|
|
3421
3031
|
// Content Panel
|
|
3422
3032
|
.lcars-content-panel {
|
|
3423
3033
|
flex: 1;
|
|
3424
3034
|
display: flex;
|
|
3425
3035
|
flex-direction: column;
|
|
3426
3036
|
position: relative;
|
|
3427
|
-
background: var(--surface-elevated-40);
|
|
3428
|
-
border: 1px solid var(--octo-mint-20);
|
|
3429
|
-
border-radius:
|
|
3037
|
+
background: var(--theme-bg-surface, var(--surface-elevated-40));
|
|
3038
|
+
border: 1px solid var(--theme-border-default, var(--octo-mint-20));
|
|
3039
|
+
border-radius: var(--theme-radius-md, 6px);
|
|
3040
|
+
box-shadow: var(--theme-shadow-panel, none);
|
|
3430
3041
|
overflow: hidden;
|
|
3431
3042
|
min-height: 0;
|
|
3432
3043
|
|
|
3433
|
-
&:hover {
|
|
3434
|
-
border-color: var(--octo-mint-35);
|
|
3435
|
-
box-shadow:
|
|
3436
|
-
0 4px 30px rgba(0, 0, 0, 0.3),
|
|
3437
|
-
0 0 30px var(--octo-mint-08);
|
|
3438
|
-
}
|
|
3439
|
-
|
|
3440
3044
|
// Ensure child components fill available space
|
|
3441
3045
|
mm-list-view,
|
|
3442
3046
|
mm-base-tree-detail {
|
|
@@ -3447,245 +3051,79 @@
|
|
|
3447
3051
|
}
|
|
3448
3052
|
}
|
|
3449
3053
|
|
|
3450
|
-
.panel-accent-top
|
|
3451
|
-
height: 3px;
|
|
3452
|
-
background: linear-gradient(
|
|
3453
|
-
90deg,
|
|
3454
|
-
var(--octo-mint),
|
|
3455
|
-
var(--neo-cyan),
|
|
3456
|
-
var(--royal-violet)
|
|
3457
|
-
);
|
|
3458
|
-
flex-shrink: 0;
|
|
3459
|
-
}
|
|
3460
|
-
|
|
3054
|
+
.panel-accent-top,
|
|
3461
3055
|
.panel-accent-bottom {
|
|
3462
|
-
|
|
3463
|
-
background: linear-gradient(
|
|
3464
|
-
90deg,
|
|
3465
|
-
transparent,
|
|
3466
|
-
var(--octo-mint-30),
|
|
3467
|
-
transparent
|
|
3468
|
-
);
|
|
3469
|
-
flex-shrink: 0;
|
|
3470
|
-
}
|
|
3471
|
-
|
|
3472
|
-
// LCARS Footer
|
|
3473
|
-
.lcars-footer {
|
|
3474
|
-
display: flex;
|
|
3475
|
-
align-items: center;
|
|
3476
|
-
gap: 8px;
|
|
3477
|
-
padding: 8px 0;
|
|
3478
|
-
flex-shrink: 0;
|
|
3479
|
-
}
|
|
3480
|
-
|
|
3481
|
-
.footer-bar {
|
|
3482
|
-
height: 8px;
|
|
3483
|
-
border-radius: 4px;
|
|
3484
|
-
transition: all 0.3s ease;
|
|
3485
|
-
|
|
3486
|
-
&.bar-1 {
|
|
3487
|
-
width: 60px;
|
|
3488
|
-
background: linear-gradient(90deg, var(--octo-mint), var(--neo-cyan));
|
|
3489
|
-
box-shadow: 0 0 8px var(--octo-mint-40);
|
|
3490
|
-
}
|
|
3491
|
-
|
|
3492
|
-
&.bar-2 {
|
|
3493
|
-
width: 40px;
|
|
3494
|
-
background: var(--royal-violet);
|
|
3495
|
-
box-shadow: 0 0 8px var(--royal-violet-40);
|
|
3496
|
-
}
|
|
3497
|
-
|
|
3498
|
-
&.bar-3 {
|
|
3499
|
-
width: 24px;
|
|
3500
|
-
background: var(--toffee);
|
|
3501
|
-
box-shadow: 0 0 8px var(--toffee-40);
|
|
3502
|
-
}
|
|
3503
|
-
}
|
|
3504
|
-
|
|
3505
|
-
.footer-spacer {
|
|
3506
|
-
flex: 1;
|
|
3056
|
+
display: none;
|
|
3507
3057
|
}
|
|
3508
3058
|
|
|
3059
|
+
// The "READY" footer is gone; its parts stay defined so stray markup
|
|
3060
|
+
// renders nothing.
|
|
3061
|
+
.lcars-footer,
|
|
3062
|
+
.footer-bar,
|
|
3063
|
+
.footer-spacer,
|
|
3509
3064
|
.footer-indicator {
|
|
3510
|
-
display:
|
|
3511
|
-
align-items: center;
|
|
3512
|
-
gap: 8px;
|
|
3513
|
-
padding: 4px 12px;
|
|
3514
|
-
background: rgba(55, 180, 0, 0.1);
|
|
3515
|
-
border: 1px solid rgba(55, 180, 0, 0.3);
|
|
3516
|
-
border-radius: 4px;
|
|
3517
|
-
|
|
3518
|
-
.indicator-dot {
|
|
3519
|
-
width: 8px;
|
|
3520
|
-
height: 8px;
|
|
3521
|
-
border-radius: 50%;
|
|
3522
|
-
background: #37b400;
|
|
3523
|
-
box-shadow: 0 0 10px rgba(55, 180, 0, 0.6);
|
|
3524
|
-
animation: lcars-pulse 2s ease-in-out infinite;
|
|
3525
|
-
}
|
|
3526
|
-
|
|
3527
|
-
.indicator-text {
|
|
3528
|
-
font-family: var(--lcars-font-primary);
|
|
3529
|
-
font-size: 0.7rem;
|
|
3530
|
-
font-weight: 600;
|
|
3531
|
-
letter-spacing: 2px;
|
|
3532
|
-
color: #37b400;
|
|
3533
|
-
text-transform: uppercase;
|
|
3534
|
-
}
|
|
3535
|
-
}
|
|
3536
|
-
|
|
3537
|
-
// Responsive LCARS Page Layout
|
|
3538
|
-
@media (max-width: 1024px) {
|
|
3539
|
-
.page-title .title-main {
|
|
3540
|
-
font-size: 1.25rem;
|
|
3541
|
-
}
|
|
3542
|
-
|
|
3543
|
-
.lcars-header-accent {
|
|
3544
|
-
height: 48px;
|
|
3545
|
-
}
|
|
3065
|
+
display: none;
|
|
3546
3066
|
}
|
|
3547
3067
|
|
|
3548
3068
|
@media (max-width: 768px) {
|
|
3549
|
-
.lcars-page-header {
|
|
3550
|
-
flex-wrap: wrap;
|
|
3551
|
-
gap: 10px;
|
|
3552
|
-
}
|
|
3553
|
-
|
|
3554
|
-
.lcars-header-accent {
|
|
3555
|
-
width: 6px;
|
|
3556
|
-
height: 40px;
|
|
3557
|
-
}
|
|
3558
|
-
|
|
3559
|
-
.page-title {
|
|
3560
|
-
flex-direction: column;
|
|
3561
|
-
gap: 2px;
|
|
3562
|
-
|
|
3563
|
-
.title-prefix {
|
|
3564
|
-
font-size: 0.6rem;
|
|
3565
|
-
}
|
|
3566
|
-
|
|
3567
|
-
.title-main {
|
|
3568
|
-
font-size: 1.1rem;
|
|
3569
|
-
}
|
|
3570
|
-
}
|
|
3571
|
-
|
|
3572
|
-
.header-stats {
|
|
3573
|
-
display: none;
|
|
3574
|
-
}
|
|
3575
|
-
|
|
3576
|
-
.lcars-header-line {
|
|
3577
|
-
width: 100%;
|
|
3578
|
-
order: 3;
|
|
3579
|
-
}
|
|
3580
|
-
|
|
3581
|
-
.lcars-footer {
|
|
3582
|
-
flex-wrap: wrap;
|
|
3583
|
-
gap: 6px;
|
|
3584
|
-
|
|
3585
|
-
.footer-bar {
|
|
3586
|
-
height: 6px;
|
|
3587
|
-
|
|
3588
|
-
&.bar-1 {
|
|
3589
|
-
width: 40px;
|
|
3590
|
-
}
|
|
3591
|
-
&.bar-2 {
|
|
3592
|
-
width: 28px;
|
|
3593
|
-
}
|
|
3594
|
-
&.bar-3 {
|
|
3595
|
-
width: 18px;
|
|
3596
|
-
}
|
|
3597
|
-
}
|
|
3598
|
-
}
|
|
3599
|
-
|
|
3600
|
-
.footer-indicator {
|
|
3601
|
-
padding: 3px 8px;
|
|
3602
|
-
|
|
3603
|
-
.indicator-text {
|
|
3604
|
-
font-size: 0.6rem;
|
|
3605
|
-
}
|
|
3606
|
-
}
|
|
3607
|
-
}
|
|
3608
|
-
|
|
3609
|
-
@media (max-width: 480px) {
|
|
3610
3069
|
.page-title .title-main {
|
|
3611
|
-
font-size:
|
|
3612
|
-
letter-spacing: 1px;
|
|
3613
|
-
}
|
|
3614
|
-
|
|
3615
|
-
.footer-bar {
|
|
3616
|
-
&.bar-2,
|
|
3617
|
-
&.bar-3 {
|
|
3618
|
-
display: none;
|
|
3619
|
-
}
|
|
3070
|
+
font-size: 1.1rem;
|
|
3620
3071
|
}
|
|
3621
3072
|
}
|
|
3622
3073
|
|
|
3623
3074
|
// mm-base-form
|
|
3624
3075
|
.mm-base-form-container {
|
|
3625
|
-
//
|
|
3626
|
-
--mm-form-bg: color-mix(in srgb, var(--surface-elevated) 60%, transparent);
|
|
3627
|
-
--mm-form-bg-alt: color-mix(in srgb, var(--surface-elevated) 80%, transparent);
|
|
3628
|
-
--mm-form-border: var(--octo-mint-20);
|
|
3629
|
-
--mm-form-border-subtle: var(--octo-mint-15);
|
|
3630
|
-
--mm-form-text: var(--octo-text-color);
|
|
3631
|
-
--mm-form-text-subtle: var(--ash-blue);
|
|
3632
|
-
--mm-form-text-label: var(--ash-blue);
|
|
3633
|
-
--mm-form-accent: var(--octo-mint);
|
|
3076
|
+
// Form CSS custom properties from the Deep Sea tokens
|
|
3077
|
+
--mm-form-bg: var(--theme-bg-surface, color-mix(in srgb, var(--surface-elevated) 60%, transparent));
|
|
3078
|
+
--mm-form-bg-alt: var(--theme-bg-elevated, color-mix(in srgb, var(--surface-elevated) 80%, transparent));
|
|
3079
|
+
--mm-form-border: var(--theme-border-default, var(--octo-mint-20));
|
|
3080
|
+
--mm-form-border-subtle: var(--theme-border-subtle, var(--octo-mint-15));
|
|
3081
|
+
--mm-form-text: var(--theme-text-primary, var(--octo-text-color));
|
|
3082
|
+
--mm-form-text-subtle: var(--theme-text-secondary, var(--ash-blue));
|
|
3083
|
+
--mm-form-text-label: var(--theme-text-secondary, var(--ash-blue));
|
|
3084
|
+
--mm-form-accent: var(--theme-accent, var(--octo-mint));
|
|
3634
3085
|
--mm-form-error: var(--theme-status-error, #ec658f);
|
|
3635
|
-
--mm-form-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
|
3086
|
+
--mm-form-shadow: var(--theme-shadow-panel, 0 4px 20px rgba(0, 0, 0, 0.3));
|
|
3636
3087
|
--mm-form-overlay-bg: color-mix(in srgb, var(--deep-sea) 95%, transparent);
|
|
3637
3088
|
|
|
3638
|
-
background:
|
|
3089
|
+
background: var(--theme-bg-app, var(--deep-sea));
|
|
3639
3090
|
|
|
3640
3091
|
// Extra padding at bottom for scroll visibility
|
|
3641
3092
|
padding-bottom: 32px !important;
|
|
3642
3093
|
|
|
3643
|
-
// Form wrapper
|
|
3094
|
+
// Form wrapper
|
|
3644
3095
|
.mm-form-wrapper {
|
|
3645
|
-
border-radius:
|
|
3096
|
+
border-radius: var(--theme-radius-md, 6px);
|
|
3646
3097
|
width: 100% !important;
|
|
3647
3098
|
max-width: 1400px !important;
|
|
3648
3099
|
margin: 0 0 64px 0 !important; // Left-align with bottom margin for scroll space
|
|
3649
|
-
|
|
3650
|
-
&::before {
|
|
3651
|
-
content: "";
|
|
3652
|
-
display: block;
|
|
3653
|
-
height: 3px;
|
|
3654
|
-
background: linear-gradient(
|
|
3655
|
-
90deg,
|
|
3656
|
-
var(--octo-mint),
|
|
3657
|
-
var(--neo-cyan),
|
|
3658
|
-
var(--royal-violet)
|
|
3659
|
-
);
|
|
3660
|
-
border-radius: 8px 8px 0 0;
|
|
3661
|
-
}
|
|
3662
3100
|
}
|
|
3663
3101
|
|
|
3664
|
-
// Form header
|
|
3102
|
+
// Form header
|
|
3665
3103
|
.mm-form-header {
|
|
3666
|
-
background: var(--
|
|
3667
|
-
border-bottom-color: var(--octo-mint-20);
|
|
3104
|
+
background: var(--theme-bg-elevated, transparent);
|
|
3105
|
+
border-bottom-color: var(--theme-border-subtle, var(--octo-mint-20));
|
|
3668
3106
|
|
|
3669
3107
|
.mm-form-title {
|
|
3670
|
-
font-family: var(--
|
|
3671
|
-
text-transform:
|
|
3672
|
-
letter-spacing:
|
|
3673
|
-
color: var(--octo-text-color);
|
|
3108
|
+
font-family: var(--theme-font-display);
|
|
3109
|
+
text-transform: none;
|
|
3110
|
+
letter-spacing: normal;
|
|
3111
|
+
color: var(--theme-text-primary, var(--octo-text-color));
|
|
3674
3112
|
}
|
|
3675
3113
|
}
|
|
3676
3114
|
|
|
3677
|
-
// Form actions
|
|
3115
|
+
// Form actions
|
|
3678
3116
|
.mm-form-actions {
|
|
3679
|
-
background: var(--
|
|
3680
|
-
border-top-color: var(--octo-mint-20);
|
|
3117
|
+
background: var(--theme-bg-elevated, transparent);
|
|
3118
|
+
border-top-color: var(--theme-border-subtle, var(--octo-mint-20));
|
|
3681
3119
|
|
|
3682
3120
|
.k-button {
|
|
3683
|
-
@include
|
|
3121
|
+
@include octo-button;
|
|
3684
3122
|
}
|
|
3685
3123
|
}
|
|
3686
3124
|
}
|
|
3687
3125
|
|
|
3688
|
-
// Markdown Widget & Config Dialog -
|
|
3126
|
+
// Markdown Widget & Config Dialog - theme via CSS variable overrides
|
|
3689
3127
|
mm-markdown-widget,
|
|
3690
3128
|
mm-markdown-config-dialog {
|
|
3691
3129
|
--mm-prose-text: #c8d0d8;
|
|
@@ -3709,7 +3147,7 @@
|
|
|
3709
3147
|
--mm-prose-hr-start: #{$octo-mint};
|
|
3710
3148
|
--mm-prose-hr-end: #{$neo-cyan};
|
|
3711
3149
|
--mm-prose-img-border: rgba(#{$octo-mint}, 0.2);
|
|
3712
|
-
--mm-prose-font: var(--
|
|
3150
|
+
--mm-prose-font: var(--theme-font-ui);
|
|
3713
3151
|
}
|
|
3714
3152
|
|
|
3715
3153
|
mm-markdown-config-dialog {
|
|
@@ -3728,19 +3166,13 @@
|
|
|
3728
3166
|
|
|
3729
3167
|
// MeshBoard View Container
|
|
3730
3168
|
.meshboard-view {
|
|
3731
|
-
background:
|
|
3732
|
-
180deg,
|
|
3733
|
-
var(--deep-sea-95),
|
|
3734
|
-
var(--deep-sea)
|
|
3735
|
-
) !important;
|
|
3169
|
+
background: var(--theme-bg-app) !important;
|
|
3736
3170
|
|
|
3737
3171
|
// Loading state
|
|
3738
3172
|
.loading-container {
|
|
3739
3173
|
.k-loading-text {
|
|
3740
|
-
color: var(--octo-mint);
|
|
3741
|
-
font-family: var(--
|
|
3742
|
-
text-transform: uppercase;
|
|
3743
|
-
letter-spacing: 1px;
|
|
3174
|
+
color: var(--theme-text-accent, var(--octo-mint));
|
|
3175
|
+
font-family: var(--theme-font-ui);
|
|
3744
3176
|
}
|
|
3745
3177
|
}
|
|
3746
3178
|
|
|
@@ -3748,26 +3180,22 @@
|
|
|
3748
3180
|
.model-unavailable {
|
|
3749
3181
|
.message-card {
|
|
3750
3182
|
background: var(--surface-elevated-90);
|
|
3751
|
-
border: 1px solid var(--octo-mint-30);
|
|
3183
|
+
border: 1px solid var(--theme-border-default, var(--octo-mint-30));
|
|
3752
3184
|
border-radius: 8px;
|
|
3753
|
-
box-shadow:
|
|
3754
|
-
0 8px 32px rgba(0, 0, 0, 0.4),
|
|
3755
|
-
0 0 20px var(--octo-mint-10);
|
|
3185
|
+
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
|
|
3756
3186
|
|
|
3757
3187
|
&::before {
|
|
3758
3188
|
content: "";
|
|
3759
3189
|
display: block;
|
|
3760
3190
|
height: 3px;
|
|
3761
|
-
background:
|
|
3191
|
+
background: var(--theme-status-error, var(--bubblegum));
|
|
3762
3192
|
border-radius: 8px 8px 0 0;
|
|
3763
3193
|
margin: -2rem -2rem 1.5rem -2rem;
|
|
3764
3194
|
}
|
|
3765
3195
|
|
|
3766
3196
|
h2 {
|
|
3767
3197
|
color: var(--octo-text-color);
|
|
3768
|
-
font-family: var(--
|
|
3769
|
-
text-transform: uppercase;
|
|
3770
|
-
letter-spacing: 1px;
|
|
3198
|
+
font-family: var(--theme-font-display);
|
|
3771
3199
|
}
|
|
3772
3200
|
|
|
3773
3201
|
p {
|
|
@@ -3778,11 +3206,10 @@
|
|
|
3778
3206
|
color: var(--ash-blue);
|
|
3779
3207
|
|
|
3780
3208
|
a {
|
|
3781
|
-
color: var(--octo-mint);
|
|
3209
|
+
color: var(--theme-text-accent, var(--octo-mint));
|
|
3782
3210
|
|
|
3783
3211
|
&:hover {
|
|
3784
3212
|
color: var(--neo-cyan);
|
|
3785
|
-
text-shadow: 0 0 8px var(--octo-mint-50);
|
|
3786
3213
|
}
|
|
3787
3214
|
}
|
|
3788
3215
|
}
|
|
@@ -3794,22 +3221,18 @@
|
|
|
3794
3221
|
}
|
|
3795
3222
|
}
|
|
3796
3223
|
|
|
3797
|
-
// MeshBoard Toolbar
|
|
3224
|
+
// MeshBoard Toolbar
|
|
3798
3225
|
.meshboard-toolbar {
|
|
3799
|
-
background:
|
|
3800
|
-
|
|
3801
|
-
|
|
3802
|
-
|
|
3803
|
-
|
|
3804
|
-
border-bottom: 2px solid var(--octo-mint-30) !important;
|
|
3805
|
-
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
|
3226
|
+
background: var(--theme-bg-elevated) !important;
|
|
3227
|
+
border-bottom: 1px solid var(--theme-border-default, var(--octo-mint-30)) !important;
|
|
3228
|
+
// No drop shadow: the border separates the header (Deep Sea §6.1 — flat surfaces; the shadow
|
|
3229
|
+
// read as a heavy band in the light theme, visual check #18).
|
|
3230
|
+
box-shadow: none;
|
|
3806
3231
|
|
|
3807
3232
|
.toolbar-left {
|
|
3808
3233
|
.meshboard-title {
|
|
3809
3234
|
color: var(--octo-text-color) !important;
|
|
3810
|
-
font-family: var(--
|
|
3811
|
-
text-transform: uppercase;
|
|
3812
|
-
letter-spacing: 1px;
|
|
3235
|
+
font-family: var(--theme-font-display);
|
|
3813
3236
|
}
|
|
3814
3237
|
|
|
3815
3238
|
.meshboard-description {
|
|
@@ -3820,30 +3243,28 @@
|
|
|
3820
3243
|
.toolbar-right,
|
|
3821
3244
|
.mm-toolbar-actions {
|
|
3822
3245
|
.k-button {
|
|
3823
|
-
@include
|
|
3246
|
+
@include octo-button;
|
|
3824
3247
|
}
|
|
3825
3248
|
}
|
|
3826
3249
|
}
|
|
3827
3250
|
|
|
3828
|
-
// MeshBoard Empty State
|
|
3251
|
+
// MeshBoard Empty State
|
|
3829
3252
|
.meshboard-view .empty-state {
|
|
3830
3253
|
.empty-state-content {
|
|
3831
3254
|
background: var(--surface-elevated-60);
|
|
3832
|
-
border: 1px solid var(--octo-mint-20);
|
|
3255
|
+
border: 1px solid var(--theme-border-default, var(--octo-mint-20));
|
|
3833
3256
|
border-radius: 12px;
|
|
3834
3257
|
padding: 3rem;
|
|
3835
3258
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
|
3836
3259
|
|
|
3837
3260
|
kendo-svg-icon {
|
|
3838
|
-
color: var(--octo-mint) !important;
|
|
3261
|
+
color: var(--theme-text-accent, var(--octo-mint)) !important;
|
|
3839
3262
|
opacity: 0.6;
|
|
3840
3263
|
}
|
|
3841
3264
|
|
|
3842
3265
|
h3 {
|
|
3843
3266
|
color: var(--octo-text-color) !important;
|
|
3844
|
-
font-family: var(--
|
|
3845
|
-
text-transform: uppercase;
|
|
3846
|
-
letter-spacing: 1px;
|
|
3267
|
+
font-family: var(--theme-font-display);
|
|
3847
3268
|
}
|
|
3848
3269
|
|
|
3849
3270
|
p {
|
|
@@ -3851,47 +3272,40 @@
|
|
|
3851
3272
|
}
|
|
3852
3273
|
|
|
3853
3274
|
.k-button {
|
|
3854
|
-
@include
|
|
3275
|
+
@include octo-button;
|
|
3855
3276
|
}
|
|
3856
3277
|
}
|
|
3857
3278
|
}
|
|
3858
3279
|
|
|
3859
|
-
// Kendo TileLayout
|
|
3280
|
+
// Kendo TileLayout
|
|
3860
3281
|
kendo-tilelayout {
|
|
3861
3282
|
background: transparent !important;
|
|
3862
3283
|
|
|
3863
3284
|
kendo-tilelayout-item {
|
|
3864
|
-
background: var(--surface-elevated-60) !important;
|
|
3865
|
-
border: 1px solid var(--octo-mint-20) !important;
|
|
3866
|
-
border-radius:
|
|
3285
|
+
background: var(--theme-bg-surface, var(--surface-elevated-60)) !important;
|
|
3286
|
+
border: 1px solid var(--theme-border-default, var(--octo-mint-20)) !important;
|
|
3287
|
+
border-radius: var(--theme-radius-md, 6px) !important;
|
|
3288
|
+
box-shadow: var(--theme-shadow-panel, none);
|
|
3867
3289
|
overflow: hidden;
|
|
3868
3290
|
transition:
|
|
3869
|
-
border-color
|
|
3870
|
-
box-shadow
|
|
3291
|
+
border-color var(--theme-motion-base) var(--theme-motion-easing),
|
|
3292
|
+
box-shadow var(--theme-motion-base) var(--theme-motion-easing);
|
|
3871
3293
|
|
|
3872
3294
|
&:hover {
|
|
3873
|
-
border-color: var(--octo-mint-40) !important;
|
|
3874
|
-
box-shadow:
|
|
3875
|
-
0 4px 20px rgba(0, 0, 0, 0.3),
|
|
3876
|
-
0 0 15px var(--octo-mint-10);
|
|
3295
|
+
border-color: var(--theme-border-strong, var(--octo-mint-40)) !important;
|
|
3296
|
+
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
|
3877
3297
|
}
|
|
3878
3298
|
|
|
3879
3299
|
// Widget header
|
|
3880
3300
|
kendo-tilelayout-item-header {
|
|
3881
|
-
background:
|
|
3882
|
-
|
|
3883
|
-
var(--octo-mint-10),
|
|
3884
|
-
transparent
|
|
3885
|
-
) !important;
|
|
3886
|
-
border-bottom: 1px solid var(--octo-mint-20) !important;
|
|
3301
|
+
background: var(--theme-bg-elevated) !important;
|
|
3302
|
+
border-bottom: 1px solid var(--theme-border-default, var(--octo-mint-20)) !important;
|
|
3887
3303
|
|
|
3888
3304
|
.widget-header {
|
|
3889
3305
|
.widget-title {
|
|
3890
|
-
color: var(--octo-mint) !important;
|
|
3891
|
-
font-family: var(--
|
|
3306
|
+
color: var(--theme-text-primary, var(--octo-mint)) !important;
|
|
3307
|
+
font-family: var(--theme-font-display);
|
|
3892
3308
|
font-weight: 600;
|
|
3893
|
-
text-transform: uppercase;
|
|
3894
|
-
letter-spacing: 0.5px;
|
|
3895
3309
|
font-size: 0.85rem;
|
|
3896
3310
|
}
|
|
3897
3311
|
|
|
@@ -3901,7 +3315,7 @@
|
|
|
3901
3315
|
|
|
3902
3316
|
.unconfigured-badge {
|
|
3903
3317
|
background: var(--toffee) !important;
|
|
3904
|
-
box-shadow:
|
|
3318
|
+
box-shadow: none;
|
|
3905
3319
|
}
|
|
3906
3320
|
|
|
3907
3321
|
.widget-actions {
|
|
@@ -3909,8 +3323,8 @@
|
|
|
3909
3323
|
color: var(--ash-blue);
|
|
3910
3324
|
|
|
3911
3325
|
&:hover {
|
|
3912
|
-
color: var(--octo-mint);
|
|
3913
|
-
background: var(--octo-mint-15);
|
|
3326
|
+
color: var(--theme-text-primary, var(--octo-mint));
|
|
3327
|
+
background: var(--theme-bg-hover, var(--octo-mint-15));
|
|
3914
3328
|
}
|
|
3915
3329
|
}
|
|
3916
3330
|
|
|
@@ -3931,7 +3345,7 @@
|
|
|
3931
3345
|
|
|
3932
3346
|
// Widget body
|
|
3933
3347
|
kendo-tilelayout-item-body {
|
|
3934
|
-
background: var(--deep-sea-50) !important;
|
|
3348
|
+
background: var(--theme-bg-surface, var(--deep-sea-50)) !important;
|
|
3935
3349
|
}
|
|
3936
3350
|
}
|
|
3937
3351
|
}
|
|
@@ -3945,7 +3359,7 @@
|
|
|
3945
3359
|
// Widget Error State
|
|
3946
3360
|
.widget-error {
|
|
3947
3361
|
color: var(--bubblegum) !important;
|
|
3948
|
-
font-family: var(--
|
|
3362
|
+
font-family: var(--theme-font-ui);
|
|
3949
3363
|
}
|
|
3950
3364
|
|
|
3951
3365
|
// MeshBoard widgets
|
|
@@ -3953,9 +3367,9 @@
|
|
|
3953
3367
|
// KPI Widget
|
|
3954
3368
|
.kpi-widget {
|
|
3955
3369
|
.kpi-value {
|
|
3956
|
-
color: var(--octo-mint) !important;
|
|
3957
|
-
font-family: var(--
|
|
3958
|
-
|
|
3370
|
+
color: var(--theme-text-primary, var(--octo-mint)) !important;
|
|
3371
|
+
font-family: var(--theme-font-display);
|
|
3372
|
+
font-variant-numeric: tabular-nums;
|
|
3959
3373
|
}
|
|
3960
3374
|
|
|
3961
3375
|
.kpi-prefix,
|
|
@@ -3965,15 +3379,13 @@
|
|
|
3965
3379
|
|
|
3966
3380
|
.kpi-label {
|
|
3967
3381
|
color: var(--ash-blue) !important;
|
|
3968
|
-
font-family: var(--
|
|
3969
|
-
text-transform: uppercase;
|
|
3970
|
-
letter-spacing: 1px;
|
|
3382
|
+
font-family: var(--theme-font-ui);
|
|
3971
3383
|
}
|
|
3972
3384
|
|
|
3973
3385
|
.kpi-trend {
|
|
3974
3386
|
&.trend-up {
|
|
3975
3387
|
background: var(--octo-mint-15) !important;
|
|
3976
|
-
color: var(--octo-mint) !important;
|
|
3388
|
+
color: var(--theme-text-accent, var(--octo-mint)) !important;
|
|
3977
3389
|
}
|
|
3978
3390
|
|
|
3979
3391
|
&.trend-down {
|
|
@@ -3988,18 +3400,17 @@
|
|
|
3988
3400
|
}
|
|
3989
3401
|
}
|
|
3990
3402
|
|
|
3991
|
-
// Widget Group -
|
|
3403
|
+
// Widget Group - item header styling
|
|
3992
3404
|
.widget-group-item-header {
|
|
3993
3405
|
background: var(--iron-navy-80) !important;
|
|
3994
|
-
border-bottom-color: var(--octo-mint-15) !important;
|
|
3406
|
+
border-bottom-color: var(--theme-border-subtle, var(--octo-mint-15)) !important;
|
|
3995
3407
|
}
|
|
3996
3408
|
|
|
3997
3409
|
.widget-group-item-title {
|
|
3998
|
-
font-family: var(--
|
|
3999
|
-
letter-spacing: 0.5px;
|
|
3410
|
+
font-family: var(--theme-font-display);
|
|
4000
3411
|
}
|
|
4001
3412
|
|
|
4002
|
-
// Entity Associations Widget -
|
|
3413
|
+
// Entity Associations Widget - background styling
|
|
4003
3414
|
.group-header {
|
|
4004
3415
|
background: var(--iron-navy-60) !important;
|
|
4005
3416
|
|
|
@@ -4008,37 +3419,37 @@
|
|
|
4008
3419
|
}
|
|
4009
3420
|
}
|
|
4010
3421
|
|
|
4011
|
-
// Stats Grid Widget -
|
|
3422
|
+
// Stats Grid Widget - theme via CSS variable overrides
|
|
4012
3423
|
mm-stats-grid-widget {
|
|
4013
3424
|
--mm-stat-mint-bg: rgba(#{$octo-mint}, 0.1);
|
|
4014
3425
|
--mm-stat-mint-border: #{$octo-mint};
|
|
4015
3426
|
--mm-stat-mint-text: #{$octo-mint};
|
|
4016
|
-
--mm-stat-mint-glow:
|
|
3427
|
+
--mm-stat-mint-glow: none;
|
|
4017
3428
|
|
|
4018
3429
|
--mm-stat-cyan-bg: rgba(#{$neo-cyan}, 0.1);
|
|
4019
3430
|
--mm-stat-cyan-border: #{$neo-cyan};
|
|
4020
3431
|
--mm-stat-cyan-text: #{$neo-cyan};
|
|
4021
|
-
--mm-stat-cyan-glow:
|
|
3432
|
+
--mm-stat-cyan-glow: none;
|
|
4022
3433
|
|
|
4023
3434
|
--mm-stat-violet-bg: rgba(#{$royal-violet}, 0.1);
|
|
4024
3435
|
--mm-stat-violet-border: #{$royal-violet};
|
|
4025
3436
|
--mm-stat-violet-text: #{$lilac-glow};
|
|
4026
|
-
--mm-stat-violet-glow:
|
|
3437
|
+
--mm-stat-violet-glow: none;
|
|
4027
3438
|
|
|
4028
3439
|
--mm-stat-toffee-bg: rgba(#{$toffee}, 0.1);
|
|
4029
3440
|
--mm-stat-toffee-border: #{$toffee};
|
|
4030
3441
|
--mm-stat-toffee-text: #{$toffee};
|
|
4031
|
-
--mm-stat-toffee-glow:
|
|
3442
|
+
--mm-stat-toffee-glow: none;
|
|
4032
3443
|
|
|
4033
3444
|
--mm-stat-lilac-bg: rgba(#{$lilac-glow}, 0.1);
|
|
4034
3445
|
--mm-stat-lilac-border: #{$lilac-glow};
|
|
4035
3446
|
--mm-stat-lilac-text: #{$lilac-glow};
|
|
4036
|
-
--mm-stat-lilac-glow:
|
|
3447
|
+
--mm-stat-lilac-glow: none;
|
|
4037
3448
|
|
|
4038
3449
|
--mm-stat-bubblegum-bg: rgba(#{$bubblegum}, 0.1);
|
|
4039
3450
|
--mm-stat-bubblegum-border: #{$bubblegum};
|
|
4040
3451
|
--mm-stat-bubblegum-text: #{$bubblegum};
|
|
4041
|
-
--mm-stat-bubblegum-glow:
|
|
3452
|
+
--mm-stat-bubblegum-glow: none;
|
|
4042
3453
|
|
|
4043
3454
|
--mm-stat-default-bg: color-mix(in srgb, var(--ash-blue) 10%, transparent);
|
|
4044
3455
|
--mm-stat-default-border: var(--ash-blue);
|
|
@@ -4046,28 +3457,26 @@
|
|
|
4046
3457
|
--mm-stat-default-glow: none;
|
|
4047
3458
|
}
|
|
4048
3459
|
|
|
4049
|
-
// Additional stats-grid
|
|
3460
|
+
// Additional stats-grid styling (hover, fonts, labels)
|
|
4050
3461
|
.stats-grid {
|
|
4051
3462
|
.stat-card {
|
|
4052
3463
|
background: var(--surface-elevated-40) !important;
|
|
4053
|
-
border: 1px solid var(--octo-mint-15);
|
|
3464
|
+
border: 1px solid var(--theme-border-subtle, var(--octo-mint-15));
|
|
4054
3465
|
border-radius: 8px;
|
|
4055
3466
|
|
|
4056
3467
|
&:hover {
|
|
4057
|
-
box-shadow:
|
|
4058
|
-
|
|
4059
|
-
0 0 10px var(--octo-mint-15);
|
|
4060
|
-
border-color: var(--octo-mint-30);
|
|
3468
|
+
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
|
|
3469
|
+
border-color: var(--theme-border-strong, var(--octo-mint-30));
|
|
4061
3470
|
}
|
|
4062
3471
|
}
|
|
4063
3472
|
|
|
4064
3473
|
.stat-value {
|
|
4065
|
-
font-family: var(--
|
|
3474
|
+
font-family: var(--theme-font-display);
|
|
4066
3475
|
}
|
|
4067
3476
|
|
|
4068
3477
|
.stat-label {
|
|
4069
3478
|
color: var(--ash-blue) !important;
|
|
4070
|
-
font-family: var(--
|
|
3479
|
+
font-family: var(--theme-font-ui);
|
|
4071
3480
|
}
|
|
4072
3481
|
|
|
4073
3482
|
.stats-error {
|
|
@@ -4078,35 +3487,33 @@
|
|
|
4078
3487
|
// Service Health Widget
|
|
4079
3488
|
.service-health {
|
|
4080
3489
|
background: var(--surface-elevated-40) !important;
|
|
4081
|
-
border: 1px solid var(--octo-mint-15);
|
|
3490
|
+
border: 1px solid var(--theme-border-subtle, var(--octo-mint-15));
|
|
4082
3491
|
|
|
4083
3492
|
&.clickable:hover {
|
|
4084
3493
|
background: var(--surface-elevated-60) !important;
|
|
4085
|
-
box-shadow:
|
|
4086
|
-
|
|
4087
|
-
0 0 10px var(--octo-mint-10);
|
|
4088
|
-
border-color: var(--octo-mint-30);
|
|
3494
|
+
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
|
|
3495
|
+
border-color: var(--theme-border-strong, var(--octo-mint-30));
|
|
4089
3496
|
}
|
|
4090
3497
|
|
|
4091
3498
|
&.healthy {
|
|
4092
3499
|
.health-dot {
|
|
4093
3500
|
background: var(--octo-mint) !important;
|
|
4094
|
-
box-shadow:
|
|
3501
|
+
box-shadow: none;
|
|
4095
3502
|
}
|
|
4096
3503
|
|
|
4097
3504
|
.pulse-ring.pulse-active {
|
|
4098
|
-
border-color: var(--octo-mint) !important;
|
|
3505
|
+
border-color: var(--theme-text-accent, var(--octo-mint)) !important;
|
|
4099
3506
|
}
|
|
4100
3507
|
|
|
4101
3508
|
.health-status {
|
|
4102
|
-
color: var(--octo-mint) !important;
|
|
3509
|
+
color: var(--theme-text-accent, var(--octo-mint)) !important;
|
|
4103
3510
|
}
|
|
4104
3511
|
}
|
|
4105
3512
|
|
|
4106
3513
|
&.unhealthy {
|
|
4107
3514
|
.health-dot {
|
|
4108
3515
|
background: var(--bubblegum) !important;
|
|
4109
|
-
box-shadow:
|
|
3516
|
+
box-shadow: none;
|
|
4110
3517
|
}
|
|
4111
3518
|
|
|
4112
3519
|
.pulse-ring {
|
|
@@ -4120,13 +3527,11 @@
|
|
|
4120
3527
|
|
|
4121
3528
|
.service-name {
|
|
4122
3529
|
color: var(--octo-text-color) !important;
|
|
4123
|
-
font-family: var(--
|
|
3530
|
+
font-family: var(--theme-font-display);
|
|
4124
3531
|
}
|
|
4125
3532
|
|
|
4126
3533
|
.health-status {
|
|
4127
|
-
font-family: var(--
|
|
4128
|
-
text-transform: uppercase;
|
|
4129
|
-
letter-spacing: 0.5px;
|
|
3534
|
+
font-family: var(--theme-font-ui);
|
|
4130
3535
|
}
|
|
4131
3536
|
|
|
4132
3537
|
.last-checked {
|
|
@@ -4134,17 +3539,13 @@
|
|
|
4134
3539
|
}
|
|
4135
3540
|
}
|
|
4136
3541
|
|
|
4137
|
-
// Entity Card Widget - UML style
|
|
3542
|
+
// Entity Card Widget - UML style
|
|
4138
3543
|
.entity-card {
|
|
4139
3544
|
background: var(--surface-elevated-60) !important;
|
|
4140
|
-
border: 1px solid var(--octo-mint-20) !important;
|
|
3545
|
+
border: 1px solid var(--theme-border-default, var(--octo-mint-20)) !important;
|
|
4141
3546
|
|
|
4142
3547
|
.entity-header {
|
|
4143
|
-
background:
|
|
4144
|
-
180deg,
|
|
4145
|
-
var(--octo-mint-30),
|
|
4146
|
-
var(--octo-mint-15)
|
|
4147
|
-
) !important;
|
|
3548
|
+
background: var(--theme-accent-subtle) !important;
|
|
4148
3549
|
border-bottom: 2px solid var(--octo-mint);
|
|
4149
3550
|
|
|
4150
3551
|
.entity-stereotype {
|
|
@@ -4153,7 +3554,7 @@
|
|
|
4153
3554
|
|
|
4154
3555
|
.entity-name {
|
|
4155
3556
|
color: var(--octo-text-color) !important;
|
|
4156
|
-
font-family: var(--
|
|
3557
|
+
font-family: var(--theme-font-display);
|
|
4157
3558
|
}
|
|
4158
3559
|
}
|
|
4159
3560
|
|
|
@@ -4161,7 +3562,7 @@
|
|
|
4161
3562
|
background: var(--deep-sea-50);
|
|
4162
3563
|
|
|
4163
3564
|
.attribute-row {
|
|
4164
|
-
border-bottom-color: var(--octo-mint-10) !important;
|
|
3565
|
+
border-bottom-color: var(--theme-border-subtle, var(--octo-mint-10)) !important;
|
|
4165
3566
|
|
|
4166
3567
|
&:hover {
|
|
4167
3568
|
background: var(--octo-mint-08) !important;
|
|
@@ -4179,11 +3580,11 @@
|
|
|
4179
3580
|
|
|
4180
3581
|
.entity-footer {
|
|
4181
3582
|
background: var(--iron-navy-50) !important;
|
|
4182
|
-
border-top-color: var(--octo-mint-20) !important;
|
|
3583
|
+
border-top-color: var(--theme-border-default, var(--octo-mint-20)) !important;
|
|
4183
3584
|
|
|
4184
3585
|
.entity-id {
|
|
4185
3586
|
color: var(--ash-blue) !important;
|
|
4186
|
-
font-family: var(--
|
|
3587
|
+
font-family: var(--theme-font-mono);
|
|
4187
3588
|
}
|
|
4188
3589
|
}
|
|
4189
3590
|
}
|
|
@@ -4191,12 +3592,8 @@
|
|
|
4191
3592
|
// Status Indicator Widget
|
|
4192
3593
|
.status-indicator {
|
|
4193
3594
|
.status-badge {
|
|
4194
|
-
font-family: var(--
|
|
4195
|
-
box-shadow:
|
|
4196
|
-
}
|
|
4197
|
-
|
|
4198
|
-
.status-text {
|
|
4199
|
-
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
|
|
3595
|
+
font-family: var(--theme-font-ui);
|
|
3596
|
+
box-shadow: var(--theme-shadow-panel, none);
|
|
4200
3597
|
}
|
|
4201
3598
|
|
|
4202
3599
|
.status-error {
|
|
@@ -4215,23 +3612,17 @@
|
|
|
4215
3612
|
|
|
4216
3613
|
.widget-types-list {
|
|
4217
3614
|
background: var(--deep-sea-50) !important;
|
|
4218
|
-
border-color: var(--octo-mint-20) !important;
|
|
3615
|
+
border-color: var(--theme-border-default, var(--octo-mint-20)) !important;
|
|
4219
3616
|
|
|
4220
3617
|
.list-header {
|
|
4221
|
-
background:
|
|
4222
|
-
|
|
4223
|
-
|
|
4224
|
-
|
|
4225
|
-
) !important;
|
|
4226
|
-
border-bottom-color: var(--octo-mint-20) !important;
|
|
4227
|
-
color: var(--octo-mint) !important;
|
|
4228
|
-
font-family: var(--lcars-font-primary);
|
|
4229
|
-
text-transform: uppercase;
|
|
4230
|
-
letter-spacing: 0.5px;
|
|
3618
|
+
background: var(--theme-bg-elevated) !important;
|
|
3619
|
+
border-bottom-color: var(--theme-border-default, var(--octo-mint-20)) !important;
|
|
3620
|
+
color: var(--theme-text-accent, var(--octo-mint)) !important;
|
|
3621
|
+
font-family: var(--theme-font-ui);
|
|
4231
3622
|
}
|
|
4232
3623
|
|
|
4233
3624
|
.widget-type-item {
|
|
4234
|
-
border-bottom-color: var(--octo-mint-10) !important;
|
|
3625
|
+
border-bottom-color: var(--theme-border-subtle, var(--octo-mint-10)) !important;
|
|
4235
3626
|
|
|
4236
3627
|
&:hover {
|
|
4237
3628
|
background: var(--octo-mint-08) !important;
|
|
@@ -4244,7 +3635,7 @@
|
|
|
4244
3635
|
|
|
4245
3636
|
.widget-icon {
|
|
4246
3637
|
background: var(--octo-mint-10) !important;
|
|
4247
|
-
color: var(--octo-mint) !important;
|
|
3638
|
+
color: var(--theme-text-accent, var(--octo-mint)) !important;
|
|
4248
3639
|
}
|
|
4249
3640
|
|
|
4250
3641
|
&.selected .widget-icon {
|
|
@@ -4263,14 +3654,14 @@
|
|
|
4263
3654
|
}
|
|
4264
3655
|
|
|
4265
3656
|
.selected-indicator {
|
|
4266
|
-
color: var(--octo-mint) !important;
|
|
3657
|
+
color: var(--theme-text-accent, var(--octo-mint)) !important;
|
|
4267
3658
|
}
|
|
4268
3659
|
}
|
|
4269
3660
|
}
|
|
4270
3661
|
}
|
|
4271
3662
|
|
|
4272
3663
|
.dialog-actions {
|
|
4273
|
-
border-top-color: var(--octo-mint-20) !important;
|
|
3664
|
+
border-top-color: var(--theme-border-default, var(--octo-mint-20)) !important;
|
|
4274
3665
|
}
|
|
4275
3666
|
}
|
|
4276
3667
|
|
|
@@ -4282,29 +3673,27 @@
|
|
|
4282
3673
|
}
|
|
4283
3674
|
|
|
4284
3675
|
.header-actions .k-button {
|
|
4285
|
-
@include
|
|
3676
|
+
@include octo-button;
|
|
4286
3677
|
}
|
|
4287
3678
|
}
|
|
4288
3679
|
|
|
4289
3680
|
.create-form {
|
|
4290
3681
|
background: var(--surface-elevated-50) !important;
|
|
4291
|
-
border-color: var(--octo-mint-20) !important;
|
|
3682
|
+
border-color: var(--theme-border-default, var(--octo-mint-20)) !important;
|
|
4292
3683
|
|
|
4293
3684
|
.form-title {
|
|
4294
|
-
color: var(--octo-mint) !important;
|
|
4295
|
-
font-family: var(--
|
|
4296
|
-
text-transform: uppercase;
|
|
4297
|
-
letter-spacing: 0.5px;
|
|
3685
|
+
color: var(--theme-text-accent, var(--octo-mint)) !important;
|
|
3686
|
+
font-family: var(--theme-font-display);
|
|
4298
3687
|
}
|
|
4299
3688
|
|
|
4300
3689
|
.form-actions .k-button {
|
|
4301
|
-
@include
|
|
3690
|
+
@include octo-button;
|
|
4302
3691
|
}
|
|
4303
3692
|
}
|
|
4304
3693
|
|
|
4305
3694
|
.meshboards-list {
|
|
4306
3695
|
background: var(--deep-sea-50) !important;
|
|
4307
|
-
border-color: var(--octo-mint-20) !important;
|
|
3696
|
+
border-color: var(--theme-border-default, var(--octo-mint-20)) !important;
|
|
4308
3697
|
|
|
4309
3698
|
.loading-state,
|
|
4310
3699
|
.empty-state {
|
|
@@ -4319,13 +3708,13 @@
|
|
|
4319
3708
|
}
|
|
4320
3709
|
|
|
4321
3710
|
kendo-svg-icon {
|
|
4322
|
-
color: var(--octo-mint) !important;
|
|
3711
|
+
color: var(--theme-text-accent, var(--octo-mint)) !important;
|
|
4323
3712
|
opacity: 0.5;
|
|
4324
3713
|
}
|
|
4325
3714
|
}
|
|
4326
3715
|
|
|
4327
3716
|
.meshboard-item {
|
|
4328
|
-
border-bottom-color: var(--octo-mint-10) !important;
|
|
3717
|
+
border-bottom-color: var(--theme-border-subtle, var(--octo-mint-10)) !important;
|
|
4329
3718
|
|
|
4330
3719
|
&:not(.active):not(.editing):hover {
|
|
4331
3720
|
background: var(--octo-mint-08) !important;
|
|
@@ -4343,7 +3732,7 @@
|
|
|
4343
3732
|
.item-content {
|
|
4344
3733
|
.item-icon {
|
|
4345
3734
|
background: var(--octo-mint-10) !important;
|
|
4346
|
-
color: var(--octo-mint) !important;
|
|
3735
|
+
color: var(--theme-text-accent, var(--octo-mint)) !important;
|
|
4347
3736
|
}
|
|
4348
3737
|
|
|
4349
3738
|
.item-info {
|
|
@@ -4373,7 +3762,7 @@
|
|
|
4373
3762
|
|
|
4374
3763
|
.item-edit {
|
|
4375
3764
|
.edit-actions .k-button {
|
|
4376
|
-
@include
|
|
3765
|
+
@include octo-button;
|
|
4377
3766
|
}
|
|
4378
3767
|
}
|
|
4379
3768
|
}
|
|
@@ -4398,25 +3787,21 @@
|
|
|
4398
3787
|
.form-group {
|
|
4399
3788
|
label {
|
|
4400
3789
|
color: var(--ash-blue) !important;
|
|
4401
|
-
font-family: var(--
|
|
4402
|
-
text-transform: uppercase;
|
|
4403
|
-
letter-spacing: 0.5px;
|
|
3790
|
+
font-family: var(--theme-font-ui);
|
|
4404
3791
|
font-size: 0.8rem;
|
|
4405
3792
|
}
|
|
4406
3793
|
}
|
|
4407
3794
|
|
|
4408
3795
|
.section-title {
|
|
4409
|
-
color: var(--octo-mint) !important;
|
|
4410
|
-
border-bottom-color: var(--octo-mint-20) !important;
|
|
4411
|
-
font-family: var(--
|
|
3796
|
+
color: var(--theme-text-accent, var(--octo-mint)) !important;
|
|
3797
|
+
border-bottom-color: var(--theme-border-default, var(--octo-mint-20)) !important;
|
|
3798
|
+
font-family: var(--theme-font-display);
|
|
4412
3799
|
}
|
|
4413
3800
|
|
|
4414
3801
|
kendo-formfield {
|
|
4415
3802
|
kendo-label {
|
|
4416
3803
|
color: var(--ash-blue) !important;
|
|
4417
|
-
font-family: var(--
|
|
4418
|
-
text-transform: uppercase;
|
|
4419
|
-
letter-spacing: 0.5px;
|
|
3804
|
+
font-family: var(--theme-font-ui);
|
|
4420
3805
|
font-size: 0.8rem;
|
|
4421
3806
|
}
|
|
4422
3807
|
|
|
@@ -4429,7 +3814,7 @@
|
|
|
4429
3814
|
kendo-dialog-actions {
|
|
4430
3815
|
flex-shrink: 0;
|
|
4431
3816
|
background: var(--iron-navy) !important;
|
|
4432
|
-
border-top-color: var(--octo-mint-20) !important;
|
|
3817
|
+
border-top-color: var(--theme-border-default, var(--octo-mint-20)) !important;
|
|
4433
3818
|
}
|
|
4434
3819
|
}
|
|
4435
3820
|
|
|
@@ -4468,33 +3853,31 @@
|
|
|
4468
3853
|
mm-variables-editor .variables-editor,
|
|
4469
3854
|
.variables-editor {
|
|
4470
3855
|
background: var(--surface-elevated-60) !important;
|
|
4471
|
-
border: 1px solid var(--octo-mint-20) !important;
|
|
3856
|
+
border: 1px solid var(--theme-border-default, var(--octo-mint-20)) !important;
|
|
4472
3857
|
border-radius: 8px !important;
|
|
4473
3858
|
padding: 1rem !important;
|
|
4474
3859
|
|
|
4475
3860
|
.variables-header {
|
|
4476
|
-
border-bottom: 1px solid var(--octo-mint-20) !important;
|
|
3861
|
+
border-bottom: 1px solid var(--theme-border-default, var(--octo-mint-20)) !important;
|
|
4477
3862
|
|
|
4478
3863
|
.section-title {
|
|
4479
|
-
color: var(--octo-mint) !important;
|
|
4480
|
-
font-family: var(--
|
|
4481
|
-
text-transform: uppercase;
|
|
4482
|
-
letter-spacing: 0.5px;
|
|
3864
|
+
color: var(--theme-text-accent, var(--octo-mint)) !important;
|
|
3865
|
+
font-family: var(--theme-font-display) !important;
|
|
4483
3866
|
}
|
|
4484
3867
|
}
|
|
4485
3868
|
|
|
4486
3869
|
.variables-list {
|
|
4487
3870
|
background: var(--deep-sea-50) !important;
|
|
4488
|
-
border-color: var(--octo-mint-20) !important;
|
|
3871
|
+
border-color: var(--theme-border-default, var(--octo-mint-20)) !important;
|
|
4489
3872
|
|
|
4490
3873
|
.list-header {
|
|
4491
3874
|
background: var(--octo-mint-10) !important;
|
|
4492
|
-
border-bottom-color: var(--octo-mint-20) !important;
|
|
4493
|
-
color: var(--octo-mint) !important;
|
|
3875
|
+
border-bottom-color: var(--theme-border-default, var(--octo-mint-20)) !important;
|
|
3876
|
+
color: var(--theme-text-accent, var(--octo-mint)) !important;
|
|
4494
3877
|
}
|
|
4495
3878
|
|
|
4496
3879
|
.variable-row {
|
|
4497
|
-
border-bottom-color: var(--octo-mint-10) !important;
|
|
3880
|
+
border-bottom-color: var(--theme-border-subtle, var(--octo-mint-10)) !important;
|
|
4498
3881
|
|
|
4499
3882
|
&:hover {
|
|
4500
3883
|
background: var(--octo-mint-05) !important;
|
|
@@ -4508,7 +3891,7 @@
|
|
|
4508
3891
|
|
|
4509
3892
|
.empty-state {
|
|
4510
3893
|
background: var(--deep-sea-50) !important;
|
|
4511
|
-
border: 1px dashed var(--octo-mint-30) !important;
|
|
3894
|
+
border: 1px dashed var(--theme-border-default, var(--octo-mint-30)) !important;
|
|
4512
3895
|
color: var(--ash-blue) !important;
|
|
4513
3896
|
|
|
4514
3897
|
p {
|
|
@@ -4522,17 +3905,17 @@
|
|
|
4522
3905
|
|
|
4523
3906
|
.usage-hint {
|
|
4524
3907
|
background: var(--deep-sea-50) !important;
|
|
4525
|
-
border: 1px solid var(--octo-mint-15) !important;
|
|
3908
|
+
border: 1px solid var(--theme-border-subtle, var(--octo-mint-15)) !important;
|
|
4526
3909
|
color: var(--ash-blue) !important;
|
|
4527
3910
|
|
|
4528
3911
|
strong {
|
|
4529
|
-
color: var(--octo-mint) !important;
|
|
3912
|
+
color: var(--theme-text-accent, var(--octo-mint)) !important;
|
|
4530
3913
|
}
|
|
4531
3914
|
|
|
4532
3915
|
code {
|
|
4533
3916
|
background: var(--octo-mint-15) !important;
|
|
4534
|
-
color: var(--octo-mint) !important;
|
|
4535
|
-
font-family: var(--
|
|
3917
|
+
color: var(--theme-text-accent, var(--octo-mint)) !important;
|
|
3918
|
+
font-family: var(--theme-font-mono) !important;
|
|
4536
3919
|
}
|
|
4537
3920
|
}
|
|
4538
3921
|
}
|
|
@@ -4541,18 +3924,18 @@
|
|
|
4541
3924
|
mm-time-range-picker {
|
|
4542
3925
|
.time-range-picker {
|
|
4543
3926
|
.k-button {
|
|
4544
|
-
@include
|
|
3927
|
+
@include octo-button;
|
|
4545
3928
|
|
|
4546
3929
|
&.active {
|
|
4547
3930
|
background: var(--octo-mint-25) !important;
|
|
4548
|
-
border-color: var(--octo-mint) !important;
|
|
3931
|
+
border-color: var(--theme-text-accent, var(--octo-mint)) !important;
|
|
4549
3932
|
color: var(--octo-text-color) !important;
|
|
4550
3933
|
}
|
|
4551
3934
|
}
|
|
4552
3935
|
|
|
4553
3936
|
.date-range-display {
|
|
4554
3937
|
color: var(--ash-blue);
|
|
4555
|
-
font-family: var(--
|
|
3938
|
+
font-family: var(--theme-font-mono);
|
|
4556
3939
|
font-size: 0.85rem;
|
|
4557
3940
|
}
|
|
4558
3941
|
}
|
|
@@ -4560,7 +3943,7 @@
|
|
|
4560
3943
|
|
|
4561
3944
|
// Cron builder
|
|
4562
3945
|
mm-cron-builder {
|
|
4563
|
-
// Override CSS custom properties with
|
|
3946
|
+
// Override CSS custom properties with theme colors
|
|
4564
3947
|
--mm-cron-bg: #{var(--surface-elevated-60)};
|
|
4565
3948
|
--mm-cron-border: #{var(--octo-mint-20)};
|
|
4566
3949
|
--mm-cron-border-radius: 8px;
|
|
@@ -4575,107 +3958,85 @@
|
|
|
4575
3958
|
--mm-cron-success: var(--theme-status-success, #37b400);
|
|
4576
3959
|
--mm-cron-code-bg: var(--deep-sea);
|
|
4577
3960
|
--mm-cron-code-text: #{$octo-mint};
|
|
4578
|
-
--mm-cron-shadow:
|
|
4579
|
-
|
|
4580
|
-
--mm-cron-font-
|
|
4581
|
-
--mm-cron-font-mono: var(--lcars-font-mono);
|
|
3961
|
+
--mm-cron-shadow: var(--theme-shadow-panel, 0 1px 2px rgba(0, 0, 0, 0.35));
|
|
3962
|
+
--mm-cron-font-family: var(--theme-font-ui);
|
|
3963
|
+
--mm-cron-font-mono: var(--theme-font-mono);
|
|
4582
3964
|
|
|
4583
|
-
// Additional
|
|
3965
|
+
// Additional styling
|
|
4584
3966
|
.cron-builder {
|
|
4585
|
-
border: 1px solid var(--octo-mint-25);
|
|
3967
|
+
border: 1px solid var(--theme-border-default, var(--octo-mint-25));
|
|
4586
3968
|
transition:
|
|
4587
3969
|
border-color 0.2s ease,
|
|
4588
3970
|
box-shadow 0.2s ease;
|
|
4589
3971
|
|
|
4590
3972
|
&:hover:not(.disabled) {
|
|
4591
|
-
border-color: var(--octo-mint-40);
|
|
4592
|
-
box-shadow:
|
|
4593
|
-
0 4px 30px rgba(0, 0, 0, 0.3),
|
|
4594
|
-
0 0 25px var(--octo-mint-10);
|
|
3973
|
+
border-color: var(--theme-border-strong, var(--octo-mint-40));
|
|
4595
3974
|
}
|
|
4596
3975
|
}
|
|
4597
3976
|
|
|
4598
|
-
// Expression display
|
|
3977
|
+
// Expression display
|
|
4599
3978
|
.expression-value {
|
|
4600
|
-
border: 1px solid var(--octo-mint-30);
|
|
4601
|
-
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
|
|
3979
|
+
border: 1px solid var(--theme-border-default, var(--octo-mint-30));
|
|
4602
3980
|
|
|
4603
|
-
&:not(.invalid) {
|
|
4604
|
-
text-shadow: 0 0 8px var(--octo-mint-50);
|
|
4605
|
-
}
|
|
4606
3981
|
}
|
|
4607
3982
|
|
|
4608
3983
|
// Human readable preview
|
|
4609
3984
|
.human-readable {
|
|
4610
|
-
background:
|
|
4611
|
-
|
|
4612
|
-
var(--iron-navy-80),
|
|
4613
|
-
var(--deep-sea-90)
|
|
4614
|
-
);
|
|
4615
|
-
border: 1px solid var(--octo-mint-15);
|
|
3985
|
+
background: var(--theme-bg-sunken);
|
|
3986
|
+
border: 1px solid var(--theme-border-subtle, var(--octo-mint-15));
|
|
4616
3987
|
border-left: 3px solid var(--octo-mint);
|
|
4617
3988
|
}
|
|
4618
3989
|
|
|
4619
|
-
// Preset buttons
|
|
3990
|
+
// Preset buttons
|
|
4620
3991
|
.preset-button {
|
|
4621
|
-
@include
|
|
3992
|
+
@include octo-button;
|
|
4622
3993
|
|
|
4623
3994
|
&:hover:not(:disabled) {
|
|
4624
|
-
border-color: var(--octo-mint);
|
|
4625
|
-
color: var(--octo-mint);
|
|
4626
|
-
box-shadow:
|
|
3995
|
+
border-color: var(--theme-text-accent, var(--octo-mint));
|
|
3996
|
+
color: var(--theme-text-accent, var(--octo-mint));
|
|
3997
|
+
box-shadow: none;
|
|
4627
3998
|
}
|
|
4628
3999
|
}
|
|
4629
4000
|
|
|
4630
4001
|
// Day toggle buttons
|
|
4631
4002
|
.day-button {
|
|
4632
|
-
@include
|
|
4003
|
+
@include octo-button;
|
|
4633
4004
|
|
|
4634
4005
|
&.k-selected,
|
|
4635
4006
|
&[ng-reflect-selected="true"] {
|
|
4636
|
-
background:
|
|
4637
|
-
|
|
4638
|
-
var(--octo-mint-30),
|
|
4639
|
-
var(--octo-mint-20)
|
|
4640
|
-
) !important;
|
|
4641
|
-
border-color: var(--octo-mint) !important;
|
|
4007
|
+
background: var(--theme-bg-selected) !important;
|
|
4008
|
+
border-color: var(--theme-text-accent, var(--octo-mint)) !important;
|
|
4642
4009
|
color: var(--octo-text-color) !important;
|
|
4643
|
-
box-shadow:
|
|
4010
|
+
box-shadow: none;
|
|
4644
4011
|
}
|
|
4645
4012
|
}
|
|
4646
4013
|
|
|
4647
4014
|
// Mode buttons (daily mode, monthly mode)
|
|
4648
4015
|
.mode-buttons button {
|
|
4649
|
-
@include
|
|
4016
|
+
@include octo-button;
|
|
4650
4017
|
|
|
4651
4018
|
&.k-selected,
|
|
4652
4019
|
&[ng-reflect-selected="true"] {
|
|
4653
|
-
background:
|
|
4654
|
-
|
|
4655
|
-
var(--octo-mint-30),
|
|
4656
|
-
var(--octo-mint-20)
|
|
4657
|
-
) !important;
|
|
4658
|
-
border-color: var(--octo-mint) !important;
|
|
4020
|
+
background: var(--theme-bg-selected) !important;
|
|
4021
|
+
border-color: var(--theme-text-accent, var(--octo-mint)) !important;
|
|
4659
4022
|
color: var(--octo-text-color) !important;
|
|
4660
|
-
box-shadow:
|
|
4023
|
+
box-shadow: none;
|
|
4661
4024
|
}
|
|
4662
4025
|
}
|
|
4663
4026
|
|
|
4664
|
-
// TabStrip
|
|
4027
|
+
// TabStrip overrides
|
|
4665
4028
|
::ng-deep .k-tabstrip {
|
|
4666
4029
|
.k-tabstrip-items-wrapper {
|
|
4667
4030
|
background: transparent;
|
|
4668
|
-
border-bottom: 1px solid var(--octo-mint-20);
|
|
4031
|
+
border-bottom: 1px solid var(--theme-border-default, var(--octo-mint-20));
|
|
4669
4032
|
}
|
|
4670
4033
|
|
|
4671
4034
|
.k-tabstrip-items .k-item {
|
|
4672
4035
|
background: transparent;
|
|
4673
4036
|
color: var(--ash-blue);
|
|
4674
|
-
font-family: var(--
|
|
4037
|
+
font-family: var(--theme-font-ui);
|
|
4675
4038
|
font-weight: 500;
|
|
4676
|
-
text-transform: uppercase;
|
|
4677
4039
|
font-size: 0.75rem;
|
|
4678
|
-
letter-spacing: 0.5px;
|
|
4679
4040
|
border: none;
|
|
4680
4041
|
transition: all 0.15s ease;
|
|
4681
4042
|
|
|
@@ -4685,7 +4046,7 @@
|
|
|
4685
4046
|
}
|
|
4686
4047
|
|
|
4687
4048
|
&.k-active {
|
|
4688
|
-
color: var(--octo-mint);
|
|
4049
|
+
color: var(--theme-text-accent, var(--octo-mint));
|
|
4689
4050
|
background: var(--octo-mint-15);
|
|
4690
4051
|
border-bottom: 2px solid var(--octo-mint);
|
|
4691
4052
|
}
|
|
@@ -4700,7 +4061,7 @@
|
|
|
4700
4061
|
// Dropdown styling
|
|
4701
4062
|
::ng-deep .k-dropdownlist {
|
|
4702
4063
|
background: var(--deep-sea);
|
|
4703
|
-
border: 1px solid var(--octo-mint-20);
|
|
4064
|
+
border: 1px solid var(--theme-border-default, var(--octo-mint-20));
|
|
4704
4065
|
color: var(--octo-text-color);
|
|
4705
4066
|
|
|
4706
4067
|
&:hover {
|
|
@@ -4708,17 +4069,17 @@
|
|
|
4708
4069
|
}
|
|
4709
4070
|
|
|
4710
4071
|
&.k-focus {
|
|
4711
|
-
border-color: var(--octo-mint);
|
|
4712
|
-
box-shadow: var(--
|
|
4072
|
+
border-color: var(--theme-text-accent, var(--octo-mint));
|
|
4073
|
+
box-shadow: var(--theme-focus-ring);
|
|
4713
4074
|
}
|
|
4714
4075
|
}
|
|
4715
4076
|
|
|
4716
4077
|
// TextBox styling (custom tab)
|
|
4717
4078
|
::ng-deep .k-textbox {
|
|
4718
4079
|
background: var(--deep-sea);
|
|
4719
|
-
border: 1px solid var(--octo-mint-20);
|
|
4720
|
-
color: var(--octo-mint);
|
|
4721
|
-
font-family: var(--
|
|
4080
|
+
border: 1px solid var(--theme-border-default, var(--octo-mint-20));
|
|
4081
|
+
color: var(--theme-text-accent, var(--octo-mint));
|
|
4082
|
+
font-family: var(--theme-font-mono);
|
|
4722
4083
|
|
|
4723
4084
|
&:hover {
|
|
4724
4085
|
border-color: var(--octo-mint-40);
|
|
@@ -4726,19 +4087,15 @@
|
|
|
4726
4087
|
|
|
4727
4088
|
&:focus,
|
|
4728
4089
|
&.k-focus {
|
|
4729
|
-
border-color: var(--octo-mint);
|
|
4730
|
-
box-shadow: var(--
|
|
4090
|
+
border-color: var(--theme-text-accent, var(--octo-mint));
|
|
4091
|
+
box-shadow: var(--theme-focus-ring);
|
|
4731
4092
|
}
|
|
4732
4093
|
}
|
|
4733
4094
|
|
|
4734
4095
|
// Syntax reference box
|
|
4735
4096
|
.syntax-reference {
|
|
4736
|
-
background:
|
|
4737
|
-
|
|
4738
|
-
var(--iron-navy-60),
|
|
4739
|
-
var(--deep-sea-80)
|
|
4740
|
-
);
|
|
4741
|
-
border: 1px solid var(--octo-mint-15);
|
|
4097
|
+
background: var(--theme-bg-sunken);
|
|
4098
|
+
border: 1px solid var(--theme-border-subtle, var(--octo-mint-15));
|
|
4742
4099
|
}
|
|
4743
4100
|
|
|
4744
4101
|
// Next executions list
|
|
@@ -4746,24 +4103,20 @@
|
|
|
4746
4103
|
color: var(--ash-blue);
|
|
4747
4104
|
|
|
4748
4105
|
&::before {
|
|
4749
|
-
color: var(--octo-mint);
|
|
4750
|
-
text-shadow: 0 0 6px var(--octo-mint-50);
|
|
4106
|
+
color: var(--theme-text-accent, var(--octo-mint));
|
|
4751
4107
|
}
|
|
4752
4108
|
}
|
|
4753
4109
|
|
|
4754
4110
|
// Copy button success state
|
|
4755
4111
|
.copy-button.copied {
|
|
4756
4112
|
color: #37b400 !important;
|
|
4757
|
-
text-shadow: 0 0 8px rgba(55, 180, 0, 0.5);
|
|
4758
4113
|
}
|
|
4759
4114
|
|
|
4760
4115
|
// Labels
|
|
4761
4116
|
kendo-label {
|
|
4762
4117
|
color: var(--ash-blue);
|
|
4763
4118
|
font-weight: 500;
|
|
4764
|
-
text-transform: uppercase;
|
|
4765
4119
|
font-size: 0.75rem;
|
|
4766
|
-
letter-spacing: 0.5px;
|
|
4767
4120
|
}
|
|
4768
4121
|
}
|
|
4769
4122
|
|