openxiangda-cli 2.0.0-alpha.67 → 2.0.0-alpha.68

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.
@@ -3,14 +3,14 @@ body,
3
3
  #root {
4
4
  min-height: 100%;
5
5
  margin: 0;
6
- background: #f3f7fd;
6
+ background: var(--oxa-shell-bg, #f5f5f5);
7
7
  }
8
8
 
9
9
  body {
10
- color: #172033;
10
+ color: var(--oxa-shell-text, #1f1f1f);
11
11
  font-family:
12
- Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
13
- "Microsoft YaHei", sans-serif;
12
+ -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
13
+ Arial, "Noto Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
14
14
  }
15
15
 
16
16
  * {
@@ -26,26 +26,38 @@ body {
26
26
 
27
27
  .oxa-global-request-loading {
28
28
  position: fixed;
29
- z-index: 1200;
30
- top: 14px;
31
- left: 50%;
32
- display: inline-flex;
33
- align-items: center;
34
- gap: 8px;
35
- padding: 7px 13px;
36
- border: 1px solid #dbe7f7;
37
- border-radius: 999px;
38
- background: rgba(255, 255, 255, 0.96);
39
- box-shadow: 0 8px 24px rgba(31, 59, 102, 0.15);
40
- color: #355070;
41
- font-size: 13px;
29
+ z-index: 1300;
30
+ top: 0;
31
+ right: 0;
32
+ left: 0;
33
+ height: 2px;
34
+ overflow: hidden;
42
35
  pointer-events: none;
43
- transform: translateX(-50%);
36
+ }
37
+
38
+ .oxa-global-request-loading span {
39
+ position: absolute;
40
+ width: 38%;
41
+ height: 100%;
42
+ border-radius: 2px;
43
+ background: var(--oxa-shell-primary, #1677ff);
44
+ animation: oxa-request-progress 1.1s ease-in-out infinite;
45
+ box-shadow: 0 0 8px var(--oxa-shell-primary, #1677ff);
46
+ }
47
+
48
+ @keyframes oxa-request-progress {
49
+ from {
50
+ transform: translateX(-120%);
51
+ }
52
+
53
+ to {
54
+ transform: translateX(380%);
55
+ }
44
56
  }
45
57
 
46
58
  .oxa-app-layout {
47
59
  min-height: 100vh;
48
- background: #f3f7fd;
60
+ background: var(--oxa-shell-bg, #f5f5f5);
49
61
  }
50
62
 
51
63
  .oxa-sider {
@@ -53,8 +65,8 @@ body {
53
65
  top: 0;
54
66
  z-index: 20;
55
67
  height: 100vh;
56
- border-right: 1px solid #e5eaf2;
57
- background: #fff !important;
68
+ border-right: 1px solid var(--oxa-shell-border, #f0f0f0);
69
+ background: var(--oxa-shell-surface, #fff) !important;
58
70
  box-shadow: none;
59
71
  }
60
72
 
@@ -66,17 +78,18 @@ body {
66
78
 
67
79
  .oxa-brand {
68
80
  display: flex;
69
- min-height: 104px;
81
+ min-height: 64px;
70
82
  align-items: center;
71
- gap: 14px;
72
- padding: 20px 22px;
83
+ gap: 12px;
84
+ border-bottom: 1px solid var(--oxa-shell-border, #f0f0f0);
85
+ padding: 12px 18px;
73
86
  }
74
87
 
75
88
  .oxa-brand-mark {
76
89
  position: relative;
77
- width: 38px;
78
- min-width: 38px;
79
- height: 44px;
90
+ width: 32px;
91
+ min-width: 32px;
92
+ height: 36px;
80
93
  }
81
94
 
82
95
  .oxa-brand-mark::before,
@@ -84,31 +97,31 @@ body {
84
97
  position: absolute;
85
98
  bottom: 2px;
86
99
  width: 10px;
87
- height: 42px;
100
+ height: 34px;
88
101
  border-radius: 3px 3px 1px 1px;
89
- background: linear-gradient(180deg, #1f78ff, #315eea);
102
+ background: var(--oxa-shell-primary, #1677ff);
90
103
  content: "";
91
104
  transform-origin: bottom;
92
105
  }
93
106
 
94
107
  .oxa-brand-mark::before {
95
- left: 6px;
108
+ left: 5px;
96
109
  transform: rotate(27deg);
97
110
  }
98
111
 
99
112
  .oxa-brand-mark::after {
100
- right: 6px;
113
+ right: 5px;
101
114
  transform: rotate(-27deg);
102
115
  }
103
116
 
104
117
  .oxa-brand-mark span {
105
118
  position: absolute;
106
119
  z-index: 1;
107
- right: 5px;
120
+ right: 4px;
108
121
  bottom: 3px;
109
122
  width: 15px;
110
123
  height: 9px;
111
- background: #fff;
124
+ background: var(--oxa-shell-surface, #fff);
112
125
  transform: skewX(-27deg);
113
126
  }
114
127
 
@@ -120,8 +133,8 @@ body {
120
133
 
121
134
  .oxa-brand-copy strong {
122
135
  overflow: hidden;
123
- color: #101828;
124
- font-size: 19px;
136
+ color: var(--oxa-shell-text, #1f1f1f);
137
+ font-size: 16px;
125
138
  line-height: 1.2;
126
139
  text-overflow: ellipsis;
127
140
  white-space: nowrap;
@@ -129,8 +142,8 @@ body {
129
142
 
130
143
  .oxa-brand-copy span {
131
144
  overflow: hidden;
132
- color: #667792;
133
- font-size: 13px;
145
+ color: var(--oxa-shell-text-secondary, #595959);
146
+ font-size: 12px;
134
147
  text-overflow: ellipsis;
135
148
  white-space: nowrap;
136
149
  }
@@ -148,7 +161,7 @@ body {
148
161
  min-height: 44px;
149
162
  margin-inline: 0;
150
163
  margin-block: 4px;
151
- color: #47566f;
164
+ color: var(--oxa-shell-text-secondary, #595959);
152
165
  font-weight: 600;
153
166
  }
154
167
 
@@ -157,8 +170,8 @@ body {
157
170
  }
158
171
 
159
172
  .oxa-menu .ant-menu-item-selected {
160
- color: #1677ff;
161
- background: #eaf3ff !important;
173
+ color: var(--oxa-shell-primary, #1677ff);
174
+ background: var(--oxa-shell-primary-bg, #e6f4ff) !important;
162
175
  }
163
176
 
164
177
  .oxa-sider-footer {
@@ -166,21 +179,21 @@ body {
166
179
  right: 12px;
167
180
  bottom: 16px;
168
181
  left: 12px;
169
- border-top: 1px solid #edf0f5;
170
- background: #fff;
182
+ border-top: 1px solid var(--oxa-shell-border, #f0f0f0);
183
+ background: var(--oxa-shell-surface, #fff);
171
184
  padding-top: 12px;
172
185
  }
173
186
 
174
187
  .oxa-sider-footer .ant-btn {
175
188
  min-height: 42px;
176
189
  justify-content: flex-start;
177
- color: #52627a;
190
+ color: var(--oxa-shell-text-secondary, #595959);
178
191
  font-weight: 600;
179
192
  }
180
193
 
181
194
  .oxa-workspace {
182
195
  min-width: 0;
183
- background: #f3f7fd;
196
+ background: var(--oxa-shell-bg, #f5f5f5);
184
197
  }
185
198
 
186
199
  .oxa-topbar {
@@ -188,59 +201,156 @@ body {
188
201
  top: 0;
189
202
  z-index: 15;
190
203
  display: flex;
191
- height: 92px;
204
+ height: 52px;
192
205
  align-items: center;
193
206
  justify-content: space-between;
194
- border-bottom: 1px solid #edf0f5;
195
- background: #fff !important;
196
- padding: 14px 28px !important;
207
+ border-bottom: 1px solid var(--oxa-shell-border, #f0f0f0);
208
+ background: var(--oxa-shell-surface, #fff) !important;
209
+ padding: 0 20px !important;
197
210
  line-height: normal;
198
211
  }
199
212
 
200
- .oxa-topbar-page {
201
- display: grid;
202
- gap: 8px;
203
- }
204
-
205
- .oxa-topbar-page .ant-breadcrumb {
206
- color: #64748b;
213
+ .oxa-topbar .ant-breadcrumb {
214
+ color: var(--oxa-shell-text-secondary, #595959);
207
215
  font-weight: 500;
208
216
  }
209
217
 
210
- .oxa-topbar-page .ant-typography {
211
- margin: 0;
212
- color: #101828;
213
- font-size: 22px;
218
+ .oxa-topbar .ant-breadcrumb-link {
219
+ cursor: pointer;
214
220
  }
215
221
 
216
222
  .oxa-current-user {
217
- min-width: 180px;
223
+ display: inline-flex;
224
+ min-width: 0;
225
+ height: 36px;
226
+ align-items: center;
227
+ gap: 8px;
218
228
  justify-content: flex-end;
229
+ border: 0;
230
+ border-radius: 6px;
231
+ background: transparent;
232
+ padding: 3px 6px;
233
+ color: var(--oxa-shell-text, #1f1f1f);
234
+ cursor: pointer;
235
+ transition: background 0.2s;
236
+ }
237
+
238
+ .oxa-current-user:hover,
239
+ .oxa-current-user:focus-visible {
240
+ background: var(--oxa-shell-hover, rgb(0 0 0 / 6%));
241
+ outline: 0;
219
242
  }
220
243
 
221
244
  .oxa-current-user-avatar {
222
- background: linear-gradient(135deg, #2868f0, #2ea8f2);
245
+ background: var(--oxa-shell-primary, #1677ff);
246
+ }
247
+
248
+ .oxa-current-user strong {
249
+ max-width: 96px;
250
+ overflow: hidden;
251
+ font-size: 13px;
252
+ font-weight: 600;
253
+ text-overflow: ellipsis;
254
+ white-space: nowrap;
255
+ }
256
+
257
+ .oxa-current-user-chevron {
258
+ color: var(--oxa-shell-text-tertiary, #8c8c8c);
259
+ font-size: 10px;
260
+ }
261
+
262
+ .oxa-user-dropdown {
263
+ width: 292px;
264
+ overflow: hidden;
265
+ border: 1px solid var(--oxa-shell-border, #f0f0f0);
266
+ border-radius: 8px;
267
+ background: var(--oxa-shell-elevated, #fff);
268
+ box-shadow: var(--oxa-shell-shadow, 0 1px 6px rgb(0 0 0 / 8%));
269
+ padding-top: 4px;
223
270
  }
224
271
 
225
- .oxa-current-user-copy {
272
+ .oxa-user-dropdown-profile {
273
+ display: flex;
274
+ align-items: center;
275
+ gap: 12px;
276
+ padding: 14px 16px 10px;
277
+ }
278
+
279
+ .oxa-user-dropdown-profile > div:last-child {
226
280
  display: grid;
227
- gap: 4px;
281
+ min-width: 0;
282
+ flex: 1;
283
+ gap: 2px;
228
284
  }
229
285
 
230
- .oxa-current-user-copy strong {
231
- color: #101828;
232
- font-size: 15px;
286
+ .oxa-user-dropdown-profile strong,
287
+ .oxa-user-dropdown-profile span,
288
+ .oxa-user-dropdown-profile small {
289
+ overflow: hidden;
290
+ text-overflow: ellipsis;
291
+ white-space: nowrap;
233
292
  }
234
293
 
235
- .oxa-current-user-copy span {
236
- color: #75839a;
294
+ .oxa-user-dropdown-profile span,
295
+ .oxa-user-dropdown-profile small,
296
+ .oxa-user-dropdown-roles > span,
297
+ .oxa-user-dropdown-theme > span {
298
+ color: var(--oxa-shell-text-secondary, #595959);
237
299
  font-size: 12px;
238
300
  }
239
301
 
302
+ .oxa-user-dropdown-roles,
303
+ .oxa-user-dropdown-theme {
304
+ display: grid;
305
+ gap: 7px;
306
+ margin: 0 12px;
307
+ border-top: 1px solid var(--oxa-shell-border, #f0f0f0);
308
+ padding: 10px 4px;
309
+ }
310
+
311
+ .oxa-user-dropdown > .ant-dropdown-menu {
312
+ border-top: 1px solid var(--oxa-shell-border, #f0f0f0);
313
+ border-radius: 0;
314
+ box-shadow: none;
315
+ }
316
+
317
+ .oxa-route-history {
318
+ position: sticky;
319
+ z-index: 14;
320
+ top: 52px;
321
+ height: 36px;
322
+ overflow: hidden;
323
+ border-bottom: 1px solid var(--oxa-shell-border, #f0f0f0);
324
+ background: var(--oxa-shell-surface, #fff);
325
+ padding: 0 12px;
326
+ }
327
+
328
+ .oxa-route-history .ant-tabs,
329
+ .oxa-route-history .ant-tabs-nav {
330
+ height: 35px;
331
+ margin: 0;
332
+ }
333
+
334
+ .oxa-route-history .ant-tabs-content-holder {
335
+ display: none;
336
+ }
337
+
338
+ .oxa-route-history .ant-tabs-tab {
339
+ border: 0 !important;
340
+ border-right: 1px solid var(--oxa-shell-border, #f0f0f0) !important;
341
+ border-radius: 0 !important;
342
+ background: transparent !important;
343
+ padding: 5px 12px !important;
344
+ }
345
+
346
+ .oxa-route-history .ant-tabs-tab-active {
347
+ background: var(--oxa-shell-primary-bg, #e6f4ff) !important;
348
+ }
349
+
240
350
  .oxa-mobile-page {
241
351
  min-height: 100vh;
242
352
  box-sizing: border-box;
243
- background: #f3f7fd;
353
+ background: var(--oxa-shell-bg, #f5f5f5);
244
354
  padding: 16px;
245
355
  }
246
356
 
@@ -266,17 +376,17 @@ body {
266
376
  width: 100%;
267
377
  min-height: 42px;
268
378
  box-sizing: border-box;
269
- border: 1px solid #d9e2f0;
379
+ border: 1px solid var(--oxa-shell-border-strong, #d9d9d9);
270
380
  border-radius: 8px;
271
- background: #fff;
381
+ background: var(--oxa-shell-surface, #fff);
272
382
  padding: 9px 11px;
273
- color: #172033;
383
+ color: var(--oxa-shell-text, #1f1f1f);
274
384
  font: inherit;
275
385
  }
276
386
 
277
387
  .oxa-mobile-input:focus {
278
- border-color: #1677ff;
279
- outline: 2px solid rgb(22 119 255 / 15%);
388
+ border-color: var(--oxa-shell-primary, #1677ff);
389
+ outline: 2px solid color-mix(in srgb, var(--oxa-shell-primary, #1677ff) 15%, transparent);
280
390
  }
281
391
 
282
392
  .oxa-mobile-filter,
@@ -298,7 +408,7 @@ body {
298
408
  }
299
409
 
300
410
  .oxa-mobile-record-card {
301
- border-color: #dfe6ef;
411
+ border-color: var(--oxa-shell-border, #f0f0f0);
302
412
  }
303
413
 
304
414
  .oxa-mobile-record-heading {
@@ -308,7 +418,7 @@ body {
308
418
 
309
419
  .oxa-mobile-record-heading a {
310
420
  overflow: hidden;
311
- color: #1677ff;
421
+ color: var(--oxa-shell-primary, #1677ff);
312
422
  font-size: 16px;
313
423
  font-weight: 650;
314
424
  text-overflow: ellipsis;
@@ -334,32 +444,27 @@ body {
334
444
  justify-self: end;
335
445
  }
336
446
 
337
- .oxa-current-user-chevron {
338
- color: #65748a;
339
- font-size: 12px;
340
- }
341
-
342
447
  .oxa-content {
343
448
  min-width: 0;
344
- background: #f3f7fd;
449
+ background: var(--oxa-shell-bg, #f5f5f5);
345
450
  }
346
451
 
347
452
  .oxa-main {
348
453
  width: 100%;
349
454
  max-width: 1680px;
350
- min-height: calc(100vh - 92px);
455
+ min-height: calc(100vh - 88px);
351
456
  margin: 0 auto;
352
- padding: 24px 28px 48px;
457
+ padding: 20px 24px 48px;
353
458
  }
354
459
 
355
460
  .oxa-title {
356
461
  margin: 0;
357
- color: #172033;
462
+ color: var(--oxa-shell-text, #1f1f1f);
358
463
  font-size: 19px;
359
464
  }
360
465
 
361
466
  .oxa-muted {
362
- color: #7b879b;
467
+ color: var(--oxa-shell-text-secondary, #595959);
363
468
  }
364
469
 
365
470
  .oxa-page-heading {
@@ -375,36 +480,83 @@ body {
375
480
  .oxa-section-card,
376
481
  .oxa-detail-hero,
377
482
  .oxa-edit-hero {
378
- border-color: #dfe6ef;
379
- box-shadow: 0 1px 3px rgb(28 44 72 / 5%);
483
+ border-color: var(--oxa-shell-border, #f0f0f0);
484
+ background: var(--oxa-shell-surface, #fff);
485
+ box-shadow: var(--oxa-shell-shadow, 0 1px 6px rgb(0 0 0 / 8%));
380
486
  }
381
487
 
382
488
  .oxa-list-card > .ant-card-body {
383
- padding: 22px;
489
+ padding: 0;
490
+ }
491
+
492
+ .oxa-list-surface {
493
+ display: grid;
494
+ }
495
+
496
+ .oxa-search-panel {
497
+ display: grid;
498
+ grid-template-columns: minmax(0, 1fr) auto;
499
+ align-items: start;
500
+ gap: 12px;
501
+ border-bottom: 1px solid var(--oxa-shell-border, #f0f0f0);
502
+ padding: 16px;
384
503
  }
385
504
 
386
505
  .oxa-filter-grid {
387
506
  display: grid;
388
507
  grid-template-columns: repeat(4, minmax(170px, 1fr));
389
508
  gap: 12px;
390
- border: 1px solid #e5eaf1;
391
- border-radius: 8px;
392
- background: #fbfcfe;
393
- padding: 16px;
509
+ }
510
+
511
+ .oxa-filter-item > .ant-select,
512
+ .oxa-filter-item > .ant-picker {
513
+ width: 100%;
514
+ }
515
+
516
+ .oxa-filter-item.is-collapsed {
517
+ display: none;
518
+ }
519
+
520
+ .oxa-filter-actions,
521
+ .oxa-list-toolbar,
522
+ .oxa-list-toolbar-primary,
523
+ .oxa-list-toolbar-secondary {
524
+ display: flex;
525
+ align-items: center;
526
+ gap: 8px;
527
+ }
528
+
529
+ .oxa-filter-actions {
530
+ align-items: flex-start;
531
+ }
532
+
533
+ .oxa-list-toolbar {
534
+ min-height: 56px;
535
+ justify-content: space-between;
536
+ border-bottom: 1px solid var(--oxa-shell-border, #f0f0f0);
537
+ padding: 10px 16px;
538
+ }
539
+
540
+ .oxa-list-toolbar-secondary .ant-btn {
541
+ color: var(--oxa-shell-text-secondary, #595959);
394
542
  }
395
543
 
396
544
  .oxa-list-card .ant-table-wrapper {
397
- border: 1px solid #e5eaf1;
398
- border-radius: 8px;
545
+ border: 0;
546
+ border-radius: 0;
399
547
  overflow: hidden;
400
548
  }
401
549
 
402
550
  .oxa-list-card .ant-table-thead > tr > th {
403
- background: #fafbfd;
404
- color: #27364d;
551
+ background: var(--oxa-shell-subtle, #fafafa);
552
+ color: var(--oxa-shell-text, #1f1f1f);
405
553
  font-weight: 600;
406
554
  }
407
555
 
556
+ .oxa-list-card .ant-table-pagination {
557
+ margin: 16px !important;
558
+ }
559
+
408
560
  .oxa-sections {
409
561
  display: grid;
410
562
  gap: 16px;
@@ -441,8 +593,8 @@ body {
441
593
  display: flex;
442
594
  justify-content: flex-end;
443
595
  gap: 10px;
444
- border-top: 1px solid #e7ebf1;
445
- background: rgb(255 255 255 / 96%);
596
+ border-top: 1px solid var(--oxa-shell-border, #f0f0f0);
597
+ background: color-mix(in srgb, var(--oxa-shell-surface, #fff) 96%, transparent);
446
598
  padding: 14px 0;
447
599
  backdrop-filter: blur(8px);
448
600
  }
@@ -450,7 +602,7 @@ body {
450
602
  .oxa-form-full .oxa-actions {
451
603
  margin-top: 4px;
452
604
  padding-inline: 18px;
453
- box-shadow: 0 -3px 12px rgb(25 43 70 / 4%);
605
+ box-shadow: 0 -3px 12px color-mix(in srgb, var(--oxa-shell-text, #1f1f1f) 4%, transparent);
454
606
  }
455
607
 
456
608
  .oxa-authoritative-selector {
@@ -480,7 +632,7 @@ body {
480
632
  .oxa-selector-option-copy small,
481
633
  .oxa-selector-tag small,
482
634
  .oxa-resolved-item small {
483
- color: #7b879b;
635
+ color: var(--oxa-shell-text-secondary, #595959);
484
636
  font-size: 11px;
485
637
  }
486
638
 
@@ -490,14 +642,14 @@ body {
490
642
  height: 28px;
491
643
  place-items: center;
492
644
  border-radius: 7px;
493
- background: #eaf3ff;
494
- color: #1677ff;
645
+ background: var(--oxa-shell-primary-bg, #e6f4ff);
646
+ color: var(--oxa-shell-primary, #1677ff);
495
647
  font-size: 14px;
496
648
  }
497
649
 
498
650
  .oxa-selector-avatar {
499
- background: #eaf3ff;
500
- color: #1677ff;
651
+ background: var(--oxa-shell-primary-bg, #e6f4ff);
652
+ color: var(--oxa-shell-primary, #1677ff);
501
653
  font-size: 12px;
502
654
  }
503
655
 
@@ -506,8 +658,8 @@ body {
506
658
  height: 26px;
507
659
  align-items: center;
508
660
  gap: 5px;
509
- border-color: #dbe5f2;
510
- background: #f6f9fd;
661
+ border-color: var(--oxa-shell-border, #f0f0f0);
662
+ background: var(--oxa-shell-subtle, #fafafa);
511
663
  padding-inline: 4px 7px;
512
664
  }
513
665
 
@@ -530,9 +682,9 @@ body {
530
682
  min-height: 30px;
531
683
  align-items: center;
532
684
  gap: 7px;
533
- border: 1px solid #dce5f0;
685
+ border: 1px solid var(--oxa-shell-border, #f0f0f0);
534
686
  border-radius: 7px;
535
- background: #f8faff;
687
+ background: var(--oxa-shell-subtle, #fafafa);
536
688
  padding: 4px 8px;
537
689
  }
538
690
 
@@ -542,9 +694,9 @@ body {
542
694
  }
543
695
 
544
696
  .oxa-resolved-resource .oxa-resolved-item {
545
- border-color: #cfe1ff;
546
- background: #eff6ff;
547
- color: #155fc7;
697
+ border-color: var(--oxa-shell-primary-border, #91caff);
698
+ background: var(--oxa-shell-primary-bg, #e6f4ff);
699
+ color: var(--oxa-shell-primary, #1677ff);
548
700
  }
549
701
 
550
702
  .oxa-directory-trigger {
@@ -552,9 +704,10 @@ body {
552
704
  min-height: 38px;
553
705
  align-items: center;
554
706
  gap: 8px;
555
- border: 1px solid #d9d9d9;
707
+ border: 1px solid var(--oxa-shell-border-strong, #d9d9d9);
556
708
  border-radius: 8px;
557
- background: #fff;
709
+ background: var(--oxa-shell-surface, #fff);
710
+ color: var(--oxa-shell-text, #1f1f1f);
558
711
  padding: 3px 5px 3px 10px;
559
712
  cursor: pointer;
560
713
  transition: border-color 0.2s, box-shadow 0.2s;
@@ -562,20 +715,20 @@ body {
562
715
 
563
716
  .oxa-directory-trigger:hover,
564
717
  .oxa-directory-trigger:focus-visible {
565
- border-color: #1677ff;
566
- box-shadow: 0 0 0 2px rgb(22 119 255 / 10%);
718
+ border-color: var(--oxa-shell-primary, #1677ff);
719
+ box-shadow: 0 0 0 2px color-mix(in srgb, var(--oxa-shell-primary, #1677ff) 10%, transparent);
567
720
  outline: 0;
568
721
  }
569
722
 
570
723
  .oxa-directory-trigger.is-disabled {
571
- border-color: #d9d9d9;
572
- background: #f5f5f5;
573
- color: rgb(0 0 0 / 25%);
724
+ border-color: var(--oxa-shell-border-strong, #d9d9d9);
725
+ background: var(--oxa-shell-subtle, #fafafa);
726
+ color: var(--oxa-shell-text-disabled, rgb(0 0 0 / 25%));
574
727
  cursor: not-allowed;
575
728
  }
576
729
 
577
730
  .oxa-directory-trigger-icon {
578
- color: #1677ff;
731
+ color: var(--oxa-shell-primary, #1677ff);
579
732
  }
580
733
 
581
734
  .oxa-directory-trigger-values {
@@ -588,7 +741,7 @@ body {
588
741
  }
589
742
 
590
743
  .oxa-directory-placeholder {
591
- color: rgb(0 0 0 / 25%);
744
+ color: var(--oxa-shell-text-disabled, rgb(0 0 0 / 25%));
592
745
  }
593
746
 
594
747
  .oxa-directory-panel {
@@ -601,9 +754,9 @@ body {
601
754
  min-height: 460px;
602
755
  grid-template-columns: 220px minmax(280px, 1fr) 240px;
603
756
  overflow: hidden;
604
- border: 1px solid #e5eaf1;
757
+ border: 1px solid var(--oxa-shell-border, #f0f0f0);
605
758
  border-radius: 8px;
606
- background: #fff;
759
+ background: var(--oxa-shell-surface, #fff);
607
760
  }
608
761
 
609
762
  .oxa-directory-tree-pane,
@@ -614,8 +767,8 @@ body {
614
767
  }
615
768
 
616
769
  .oxa-directory-tree-pane {
617
- border-right: 1px solid #edf0f5;
618
- background: #fafbfd;
770
+ border-right: 1px solid var(--oxa-shell-border, #f0f0f0);
771
+ background: var(--oxa-shell-subtle, #fafafa);
619
772
  }
620
773
 
621
774
  .oxa-directory-member-pane {
@@ -632,7 +785,7 @@ body {
632
785
 
633
786
  .oxa-directory-member-row {
634
787
  min-height: 58px;
635
- border-bottom: 1px solid #edf0f5;
788
+ border-bottom: 1px solid var(--oxa-shell-border, #f0f0f0);
636
789
  padding: 8px 4px;
637
790
  }
638
791
 
@@ -654,8 +807,8 @@ body {
654
807
 
655
808
  .oxa-directory-department-row:hover,
656
809
  .oxa-directory-department-row:focus-visible {
657
- border-color: #cfe1ff;
658
- background: #f2f7ff;
810
+ border-color: var(--oxa-shell-primary-border, #91caff);
811
+ background: var(--oxa-shell-primary-bg, #e6f4ff);
659
812
  outline: 0;
660
813
  }
661
814
 
@@ -667,13 +820,13 @@ body {
667
820
  }
668
821
 
669
822
  .oxa-directory-department-row small {
670
- color: #7b879b;
823
+ color: var(--oxa-shell-text-secondary, #595959);
671
824
  font-size: 11px;
672
825
  }
673
826
 
674
827
  .oxa-directory-selected-pane {
675
- border-left: 1px solid #edf0f5;
676
- background: #fafbfd;
828
+ border-left: 1px solid var(--oxa-shell-border, #f0f0f0);
829
+ background: var(--oxa-shell-subtle, #fafafa);
677
830
  }
678
831
 
679
832
  .oxa-directory-pane-title,
@@ -688,7 +841,7 @@ body {
688
841
  .oxa-directory-pane-title {
689
842
  min-height: 32px;
690
843
  margin-bottom: 10px;
691
- color: #27364d;
844
+ color: var(--oxa-shell-text, #1f1f1f);
692
845
  font-weight: 600;
693
846
  }
694
847
 
@@ -711,7 +864,7 @@ body {
711
864
  .oxa-directory-member-row small,
712
865
  .oxa-directory-selected-item small {
713
866
  overflow: hidden;
714
- color: #7b879b;
867
+ color: var(--oxa-shell-text-secondary, #595959);
715
868
  font-size: 11px;
716
869
  text-overflow: ellipsis;
717
870
  white-space: nowrap;
@@ -726,9 +879,9 @@ body {
726
879
  display: flex;
727
880
  align-items: center;
728
881
  gap: 8px;
729
- border: 1px solid #e1e7f0;
882
+ border: 1px solid var(--oxa-shell-border, #f0f0f0);
730
883
  border-radius: 7px;
731
- background: #fff;
884
+ background: var(--oxa-shell-surface, #fff);
732
885
  padding: 7px;
733
886
  }
734
887
 
@@ -738,7 +891,7 @@ body {
738
891
 
739
892
  .oxa-directory-footer {
740
893
  justify-content: flex-end;
741
- border-top: 1px solid #edf0f5;
894
+ border-top: 1px solid var(--oxa-shell-border, #f0f0f0);
742
895
  padding-top: 14px;
743
896
  }
744
897
 
@@ -749,28 +902,28 @@ body {
749
902
 
750
903
  .oxa-file-dropzone .ant-upload-drag {
751
904
  min-height: 72px;
752
- border-color: #dbe3ee;
753
- background: #fbfcfe;
905
+ border-color: var(--oxa-shell-border-strong, #d9d9d9);
906
+ background: var(--oxa-shell-subtle, #fafafa);
754
907
  padding: 12px;
755
908
  }
756
909
 
757
910
  .oxa-file-dropzone .ant-upload-drag-container {
758
911
  display: grid;
759
912
  gap: 5px;
760
- color: #52627a;
913
+ color: var(--oxa-shell-text-secondary, #595959);
761
914
  }
762
915
 
763
916
  .oxa-file-dropzone small {
764
- color: #8a96a9;
917
+ color: var(--oxa-shell-text-tertiary, #8c8c8c);
765
918
  }
766
919
 
767
920
  .oxa-file-dropzone kbd {
768
- border: 1px solid #d8dee8;
921
+ border: 1px solid var(--oxa-shell-border-strong, #d9d9d9);
769
922
  border-bottom-width: 2px;
770
923
  border-radius: 4px;
771
- background: #fff;
924
+ background: var(--oxa-shell-surface, #fff);
772
925
  padding: 1px 5px;
773
- color: #35445b;
926
+ color: var(--oxa-shell-text, #1f1f1f);
774
927
  font-family: inherit;
775
928
  }
776
929
 
@@ -785,9 +938,9 @@ body {
785
938
  min-height: 50px;
786
939
  align-items: center;
787
940
  gap: 10px;
788
- border: 1px solid #e2e8f0;
941
+ border: 1px solid var(--oxa-shell-border, #f0f0f0);
789
942
  border-radius: 8px;
790
- background: #fff;
943
+ background: var(--oxa-shell-surface, #fff);
791
944
  padding: 7px 9px;
792
945
  }
793
946
 
@@ -797,8 +950,8 @@ body {
797
950
  height: 32px;
798
951
  place-items: center;
799
952
  border-radius: 7px;
800
- background: #edf5ff;
801
- color: #1677ff;
953
+ background: var(--oxa-shell-primary-bg, #e6f4ff);
954
+ color: var(--oxa-shell-primary, #1677ff);
802
955
  }
803
956
 
804
957
  .oxa-file-meta {
@@ -819,7 +972,7 @@ body {
819
972
  }
820
973
 
821
974
  .oxa-file-name-button:hover strong {
822
- color: #1677ff;
975
+ color: var(--oxa-shell-primary, #1677ff);
823
976
  }
824
977
 
825
978
  .oxa-file-name-button:disabled {
@@ -835,14 +988,14 @@ body {
835
988
 
836
989
  .oxa-file-meta small,
837
990
  .oxa-file-empty {
838
- color: #7b879b;
991
+ color: var(--oxa-shell-text-secondary, #595959);
839
992
  font-size: 12px;
840
993
  }
841
994
 
842
995
  .oxa-file-error {
843
- border-color: #ffccc7;
844
- background: #fff2f0;
845
- color: #cf1322;
996
+ border-color: var(--oxa-shell-error-border, #ffccc7);
997
+ background: var(--oxa-shell-error-bg, #fff2f0);
998
+ color: var(--oxa-shell-error, #ff4d4f);
846
999
  }
847
1000
 
848
1001
  .oxa-file-error > span {
@@ -850,7 +1003,7 @@ body {
850
1003
  }
851
1004
 
852
1005
  .oxa-file-empty {
853
- border: 1px dashed #dbe3ee;
1006
+ border: 1px dashed var(--oxa-shell-border-strong, #d9d9d9);
854
1007
  border-radius: 8px;
855
1008
  padding: 10px;
856
1009
  text-align: center;
@@ -881,7 +1034,7 @@ body {
881
1034
 
882
1035
  .oxa-file-preview-page {
883
1036
  min-height: 100vh;
884
- background: #eef2f7;
1037
+ background: var(--oxa-shell-bg, #f5f5f5);
885
1038
  }
886
1039
 
887
1040
  .oxa-file-preview-toolbar {
@@ -893,10 +1046,10 @@ body {
893
1046
  align-items: center;
894
1047
  justify-content: space-between;
895
1048
  gap: 20px;
896
- border-bottom: 1px solid #dfe5ee;
897
- background: rgb(255 255 255 / 96%);
1049
+ border-bottom: 1px solid var(--oxa-shell-border, #f0f0f0);
1050
+ background: color-mix(in srgb, var(--oxa-shell-surface, #fff) 96%, transparent);
898
1051
  padding: 10px 20px;
899
- box-shadow: 0 2px 12px rgb(26 45 75 / 6%);
1052
+ box-shadow: var(--oxa-shell-shadow, 0 1px 6px rgb(0 0 0 / 8%));
900
1053
  backdrop-filter: blur(12px);
901
1054
  }
902
1055
 
@@ -913,7 +1066,7 @@ body {
913
1066
  }
914
1067
 
915
1068
  .oxa-file-preview-title > .anticon {
916
- color: #1677ff;
1069
+ color: var(--oxa-shell-primary, #1677ff);
917
1070
  font-size: 26px;
918
1071
  }
919
1072
 
@@ -931,7 +1084,7 @@ body {
931
1084
  }
932
1085
 
933
1086
  .oxa-file-preview-title span {
934
- color: #7b879b;
1087
+ color: var(--oxa-shell-text-secondary, #595959);
935
1088
  font-size: 12px;
936
1089
  }
937
1090
 
@@ -947,7 +1100,7 @@ body {
947
1100
  height: calc(100vh - 106px);
948
1101
  border: 0;
949
1102
  border-radius: 8px;
950
- background: #fff;
1103
+ background: var(--oxa-shell-surface, #fff);
951
1104
  box-shadow: 0 8px 32px rgb(24 42 72 / 10%);
952
1105
  }
953
1106
 
@@ -965,13 +1118,13 @@ body {
965
1118
  height: calc(100vh - 106px);
966
1119
  overflow: auto;
967
1120
  border-radius: 8px;
968
- background: #fff;
1121
+ background: var(--oxa-shell-surface, #fff);
969
1122
  box-shadow: 0 8px 32px rgb(24 42 72 / 10%);
970
1123
  }
971
1124
 
972
1125
  .oxa-docx-preview .docx-wrapper {
973
1126
  min-height: 100%;
974
- background: #dfe4eb;
1127
+ background: var(--oxa-shell-subtle, #fafafa);
975
1128
  padding: 24px;
976
1129
  }
977
1130
 
@@ -989,7 +1142,7 @@ body {
989
1142
  min-height: 0;
990
1143
  flex: 1;
991
1144
  overflow: auto;
992
- border-top: 1px solid #e5eaf1;
1145
+ border-top: 1px solid var(--oxa-shell-border, #f0f0f0);
993
1146
  }
994
1147
 
995
1148
  .oxa-spreadsheet-scroll table {
@@ -1003,10 +1156,10 @@ body {
1003
1156
  .oxa-spreadsheet-scroll td {
1004
1157
  min-width: 96px;
1005
1158
  max-width: 360px;
1006
- border-right: 1px solid #e5eaf1;
1007
- border-bottom: 1px solid #e5eaf1;
1159
+ border-right: 1px solid var(--oxa-shell-border, #f0f0f0);
1160
+ border-bottom: 1px solid var(--oxa-shell-border, #f0f0f0);
1008
1161
  padding: 7px 9px;
1009
- background: #fff;
1162
+ background: var(--oxa-shell-surface, #fff);
1010
1163
  text-align: left;
1011
1164
  vertical-align: top;
1012
1165
  white-space: pre-wrap;
@@ -1018,8 +1171,8 @@ body {
1018
1171
  z-index: 1;
1019
1172
  left: 0;
1020
1173
  min-width: 52px;
1021
- background: #f5f7fa;
1022
- color: #7b879b;
1174
+ background: var(--oxa-shell-subtle, #fafafa);
1175
+ color: var(--oxa-shell-text-secondary, #595959);
1023
1176
  text-align: center;
1024
1177
  }
1025
1178
 
@@ -1054,7 +1207,7 @@ body {
1054
1207
  }
1055
1208
 
1056
1209
  .oxa-record-meta {
1057
- color: #7b879b;
1210
+ color: var(--oxa-shell-text-secondary, #595959);
1058
1211
  font-size: 12px;
1059
1212
  }
1060
1213
 
@@ -1069,10 +1222,7 @@ body {
1069
1222
  }
1070
1223
 
1071
1224
  .oxa-detail-layout {
1072
- display: grid;
1073
- grid-template-columns: minmax(0, 1fr) 320px;
1074
- align-items: start;
1075
- gap: 16px;
1225
+ display: block;
1076
1226
  }
1077
1227
 
1078
1228
  .oxa-detail-main,
@@ -1088,14 +1238,51 @@ body {
1088
1238
 
1089
1239
  .oxa-detail-main .ant-descriptions-item-label,
1090
1240
  .oxa-detail-aside .ant-descriptions-item-label {
1091
- color: #7b879b;
1241
+ color: var(--oxa-shell-text-secondary, #595959);
1242
+ }
1243
+
1244
+ .oxa-audit-collapse {
1245
+ overflow: hidden;
1246
+ border: 1px solid var(--oxa-shell-border, #f0f0f0);
1247
+ border-radius: 8px;
1248
+ background: var(--oxa-shell-surface, #fff);
1249
+ }
1250
+
1251
+ .oxa-audit-collapse > .ant-collapse-item > .ant-collapse-header {
1252
+ min-height: 52px;
1253
+ align-items: center;
1254
+ padding: 14px 18px;
1255
+ }
1256
+
1257
+ .oxa-audit-collapse .ant-collapse-content-box {
1258
+ padding: 0 18px 12px !important;
1259
+ }
1260
+
1261
+ .oxa-audit-collapse-heading {
1262
+ display: flex;
1263
+ min-width: 0;
1264
+ flex: 1;
1265
+ align-items: center;
1266
+ justify-content: space-between;
1267
+ gap: 16px;
1268
+ }
1269
+
1270
+ .oxa-audit-collapse-heading span {
1271
+ color: var(--oxa-shell-text-secondary, #595959);
1272
+ font-size: 12px;
1273
+ }
1274
+
1275
+ .oxa-audit-loading {
1276
+ padding: 18px 0;
1277
+ color: var(--oxa-shell-text-secondary, #595959);
1278
+ text-align: center;
1092
1279
  }
1093
1280
 
1094
1281
  .oxa-audit-entry {
1095
1282
  display: grid;
1096
1283
  gap: 4px;
1097
1284
  padding: 10px 0;
1098
- border-bottom: 1px solid #edf0f5;
1285
+ border-bottom: 1px solid var(--oxa-shell-border, #f0f0f0);
1099
1286
  }
1100
1287
 
1101
1288
  .oxa-audit-entry:last-child {
@@ -1116,7 +1303,7 @@ body {
1116
1303
 
1117
1304
  .oxa-audit-meta {
1118
1305
  flex-wrap: wrap;
1119
- color: #7b879b;
1306
+ color: var(--oxa-shell-text-secondary, #595959);
1120
1307
  font-size: 12px;
1121
1308
  }
1122
1309
 
@@ -1135,12 +1322,12 @@ body {
1135
1322
  gap: 3px;
1136
1323
  padding: 7px 8px;
1137
1324
  border-radius: 6px;
1138
- background: #f7f9fc;
1325
+ background: var(--oxa-shell-subtle, #fafafa);
1139
1326
  }
1140
1327
 
1141
1328
  .oxa-audit-change-values {
1142
1329
  min-width: 0;
1143
- color: #47566f;
1330
+ color: var(--oxa-shell-text-secondary, #595959);
1144
1331
  font-size: 12px;
1145
1332
  }
1146
1333
 
@@ -1152,7 +1339,7 @@ body {
1152
1339
  }
1153
1340
 
1154
1341
  .oxa-audit-entry > span {
1155
- color: #7b879b;
1342
+ color: var(--oxa-shell-text-secondary, #595959);
1156
1343
  font-size: 12px;
1157
1344
  }
1158
1345
 
@@ -1164,21 +1351,21 @@ body {
1164
1351
  justify-content: space-between;
1165
1352
  gap: 8px;
1166
1353
  padding: 9px 12px;
1167
- border: 1px solid #d9dfe9;
1354
+ border: 1px solid var(--oxa-shell-border-strong, #d9d9d9);
1168
1355
  border-radius: 8px;
1169
- background: #fff;
1170
- color: #1f2b3d;
1356
+ background: var(--oxa-shell-surface, #fff);
1357
+ color: var(--oxa-shell-text, #1f1f1f);
1171
1358
  font: inherit;
1172
1359
  text-align: left;
1173
1360
  }
1174
1361
 
1175
1362
  .oxa-mobile-reference-trigger:disabled {
1176
- background: #f5f7fa;
1177
- color: #9aa5b5;
1363
+ background: var(--oxa-shell-subtle, #fafafa);
1364
+ color: var(--oxa-shell-text-disabled, rgb(0 0 0 / 25%));
1178
1365
  }
1179
1366
 
1180
1367
  .oxa-mobile-reference-placeholder {
1181
- color: #9aa5b5;
1368
+ color: var(--oxa-shell-text-disabled, rgb(0 0 0 / 25%));
1182
1369
  }
1183
1370
 
1184
1371
  .oxa-mobile-reference-backdrop {
@@ -1187,7 +1374,7 @@ body {
1187
1374
  inset: 0;
1188
1375
  display: flex;
1189
1376
  align-items: flex-end;
1190
- background: rgb(15 23 42 / 42%);
1377
+ background: var(--oxa-shell-mask, rgb(0 0 0 / 45%));
1191
1378
  }
1192
1379
 
1193
1380
  .oxa-mobile-reference-sheet {
@@ -1198,7 +1385,7 @@ body {
1198
1385
  padding: 16px 16px max(16px, env(safe-area-inset-bottom));
1199
1386
  overflow: auto;
1200
1387
  border-radius: 16px 16px 0 0;
1201
- background: #fff;
1388
+ background: var(--oxa-shell-elevated, #fff);
1202
1389
  box-shadow: 0 -8px 32px rgb(15 23 42 / 18%);
1203
1390
  }
1204
1391
 
@@ -1206,7 +1393,7 @@ body {
1206
1393
  display: flex;
1207
1394
  align-items: center;
1208
1395
  justify-content: space-between;
1209
- color: #1f2b3d;
1396
+ color: var(--oxa-shell-text, #1f1f1f);
1210
1397
  }
1211
1398
 
1212
1399
  .oxa-mobile-reference-header button,
@@ -1214,7 +1401,7 @@ body {
1214
1401
  .oxa-mobile-reference-confirm {
1215
1402
  border: 0;
1216
1403
  background: transparent;
1217
- color: #2d6cdf;
1404
+ color: var(--oxa-shell-primary, #1677ff);
1218
1405
  font: inherit;
1219
1406
  }
1220
1407
 
@@ -1236,17 +1423,17 @@ body {
1236
1423
  border: 0;
1237
1424
  border-radius: 8px;
1238
1425
  background: transparent;
1239
- color: #1f2b3d;
1426
+ color: var(--oxa-shell-text, #1f1f1f);
1240
1427
  font: inherit;
1241
1428
  text-align: left;
1242
1429
  }
1243
1430
 
1244
1431
  .oxa-mobile-reference-option.is-selected {
1245
- background: #edf4ff;
1432
+ background: var(--oxa-shell-primary-bg, #e6f4ff);
1246
1433
  }
1247
1434
 
1248
1435
  .oxa-mobile-reference-option:disabled {
1249
- color: #aab3c0;
1436
+ color: var(--oxa-shell-text-disabled, rgb(0 0 0 / 25%));
1250
1437
  opacity: 0.7;
1251
1438
  }
1252
1439
 
@@ -1259,7 +1446,7 @@ body {
1259
1446
 
1260
1447
  .oxa-mobile-reference-option-copy small {
1261
1448
  overflow: hidden;
1262
- color: #7b879b;
1449
+ color: var(--oxa-shell-text-secondary, #595959);
1263
1450
  font-size: 12px;
1264
1451
  text-overflow: ellipsis;
1265
1452
  white-space: nowrap;
@@ -1269,26 +1456,26 @@ body {
1269
1456
  .oxa-mobile-reference-empty,
1270
1457
  .oxa-mobile-reference-error {
1271
1458
  padding: 12px 4px;
1272
- color: #7b879b;
1459
+ color: var(--oxa-shell-text-secondary, #595959);
1273
1460
  font-size: 13px;
1274
1461
  text-align: center;
1275
1462
  }
1276
1463
 
1277
1464
  .oxa-mobile-reference-error {
1278
- color: #cf3c46;
1465
+ color: var(--oxa-shell-error, #ff4d4f);
1279
1466
  }
1280
1467
 
1281
1468
  .oxa-mobile-reference-more,
1282
1469
  .oxa-mobile-reference-confirm {
1283
1470
  min-height: 42px;
1284
1471
  border-radius: 8px;
1285
- background: #f0f5ff;
1472
+ background: var(--oxa-shell-primary-bg, #e6f4ff);
1286
1473
  font-weight: 600;
1287
1474
  text-align: center;
1288
1475
  }
1289
1476
 
1290
1477
  .oxa-mobile-reference-confirm {
1291
- background: #2d6cdf;
1478
+ background: var(--oxa-shell-primary, #1677ff);
1292
1479
  color: #fff;
1293
1480
  }
1294
1481
 
@@ -1303,16 +1490,16 @@ body {
1303
1490
  min-height: 42px;
1304
1491
  align-items: center;
1305
1492
  justify-content: center;
1306
- border: 1px solid #d9dfe9 !important;
1493
+ border: 1px solid var(--oxa-shell-border-strong, #d9d9d9) !important;
1307
1494
  border-radius: 8px;
1308
- background: #fff !important;
1309
- color: #2d6cdf;
1495
+ background: var(--oxa-shell-surface, #fff) !important;
1496
+ color: var(--oxa-shell-primary, #1677ff);
1310
1497
  font-weight: 600;
1311
1498
  }
1312
1499
 
1313
1500
  .oxa-mobile-file-button.ant-btn:disabled {
1314
- background: #f5f7fa;
1315
- color: #9aa5b5;
1501
+ background: var(--oxa-shell-subtle, #fafafa);
1502
+ color: var(--oxa-shell-text-disabled, rgb(0 0 0 / 25%));
1316
1503
  }
1317
1504
 
1318
1505
  .oxa-mobile-pending-files {
@@ -1326,9 +1513,9 @@ body {
1326
1513
  align-items: center;
1327
1514
  gap: 8px;
1328
1515
  padding: 7px 9px;
1329
- border: 1px solid #dbe3ee;
1516
+ border: 1px solid var(--oxa-shell-border, #f0f0f0);
1330
1517
  border-radius: 8px;
1331
- background: #fbfcfe;
1518
+ background: var(--oxa-shell-subtle, #fafafa);
1332
1519
  font-size: 13px;
1333
1520
  }
1334
1521
 
@@ -1347,19 +1534,19 @@ body {
1347
1534
  }
1348
1535
 
1349
1536
  .oxa-mobile-pending-file-copy small {
1350
- color: #7b879b;
1537
+ color: var(--oxa-shell-text-secondary, #595959);
1351
1538
  font-size: 12px;
1352
1539
  }
1353
1540
 
1354
1541
  .oxa-mobile-pending-status {
1355
- color: #2d6cdf;
1542
+ color: var(--oxa-shell-primary, #1677ff);
1356
1543
  white-space: nowrap;
1357
1544
  }
1358
1545
 
1359
1546
  .oxa-mobile-pending-error {
1360
1547
  max-width: 42%;
1361
1548
  overflow: hidden;
1362
- color: #cf3c46;
1549
+ color: var(--oxa-shell-error, #ff4d4f);
1363
1550
  text-overflow: ellipsis;
1364
1551
  white-space: nowrap;
1365
1552
  }
@@ -1370,10 +1557,6 @@ body {
1370
1557
  grid-template-columns: repeat(2, minmax(0, 1fr));
1371
1558
  }
1372
1559
 
1373
- .oxa-detail-layout {
1374
- grid-template-columns: 1fr;
1375
- }
1376
-
1377
1560
  .oxa-detail-aside {
1378
1561
  position: static;
1379
1562
  grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -1382,23 +1565,23 @@ body {
1382
1565
 
1383
1566
  @media (max-width: 900px) {
1384
1567
  .oxa-topbar {
1385
- height: 80px;
1386
- padding: 12px 16px !important;
1387
- }
1388
-
1389
- .oxa-topbar-page .ant-breadcrumb {
1390
- display: none;
1568
+ height: 52px;
1569
+ padding: 0 12px !important;
1391
1570
  }
1392
1571
 
1393
1572
  .oxa-current-user {
1394
1573
  min-width: 0;
1395
1574
  }
1396
1575
 
1397
- .oxa-current-user-copy,
1576
+ .oxa-current-user strong,
1398
1577
  .oxa-current-user-chevron {
1399
1578
  display: none;
1400
1579
  }
1401
1580
 
1581
+ .oxa-route-history {
1582
+ top: 52px;
1583
+ }
1584
+
1402
1585
  .oxa-main {
1403
1586
  padding: 16px;
1404
1587
  }
@@ -1409,6 +1592,21 @@ body {
1409
1592
  grid-template-columns: 1fr;
1410
1593
  }
1411
1594
 
1595
+ .oxa-search-panel {
1596
+ grid-template-columns: 1fr;
1597
+ }
1598
+
1599
+ .oxa-filter-actions,
1600
+ .oxa-list-toolbar {
1601
+ align-items: stretch;
1602
+ flex-direction: column;
1603
+ }
1604
+
1605
+ .oxa-list-toolbar-primary,
1606
+ .oxa-list-toolbar-secondary {
1607
+ flex-wrap: wrap;
1608
+ }
1609
+
1412
1610
  .oxa-detail-hero-main,
1413
1611
  .oxa-detail-hero-top,
1414
1612
  .oxa-edit-hero-title,
@@ -1430,7 +1628,7 @@ body {
1430
1628
  .oxa-directory-tree-pane,
1431
1629
  .oxa-directory-selected-pane {
1432
1630
  border: 0;
1433
- border-bottom: 1px solid #edf0f5;
1631
+ border-bottom: 1px solid var(--oxa-shell-border, #f0f0f0);
1434
1632
  }
1435
1633
 
1436
1634
  .oxa-directory-tree-pane,
@@ -1440,3 +1638,11 @@ body {
1440
1638
  overflow: auto;
1441
1639
  }
1442
1640
  }
1641
+
1642
+ @media (prefers-reduced-motion: reduce) {
1643
+ .oxa-global-request-loading span {
1644
+ width: 100%;
1645
+ animation: none;
1646
+ transform: none;
1647
+ }
1648
+ }