@echothink-ui/project 0.1.0

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.
Files changed (55) hide show
  1. package/README.md +5 -0
  2. package/dist/components/ProjectActivityTimeline.d.ts +5 -0
  3. package/dist/components/ProjectAppDomainPanel.d.ts +8 -0
  4. package/dist/components/ProjectCard.d.ts +8 -0
  5. package/dist/components/ProjectCreateForm.d.ts +7 -0
  6. package/dist/components/ProjectDashboardTemplate.d.ts +11 -0
  7. package/dist/components/ProjectManagementPage.d.ts +17 -0
  8. package/dist/components/ProjectMembersPanel.d.ts +9 -0
  9. package/dist/components/ProjectModelConfigPanel.d.ts +9 -0
  10. package/dist/components/ProjectPermissionPanel.d.ts +9 -0
  11. package/dist/components/ProjectResourcePanel.d.ts +6 -0
  12. package/dist/components/ProjectScopeSelector.d.ts +7 -0
  13. package/dist/components/ProjectSettingsPanel.d.ts +6 -0
  14. package/dist/components/ProjectStatusSummary.d.ts +6 -0
  15. package/dist/components/ProjectSummaryPanel.d.ts +5 -0
  16. package/dist/components/ProjectTab.d.ts +3 -0
  17. package/dist/components/ProjectTabGroup.d.ts +12 -0
  18. package/dist/components/ProjectTable.d.ts +9 -0
  19. package/dist/index.cjs +2112 -0
  20. package/dist/index.cjs.map +1 -0
  21. package/dist/index.css +2059 -0
  22. package/dist/index.css.map +1 -0
  23. package/dist/index.d.ts +21 -0
  24. package/dist/index.js +2098 -0
  25. package/dist/index.js.map +1 -0
  26. package/dist/types.d.ts +99 -0
  27. package/dist/utils.d.ts +288 -0
  28. package/package.json +45 -0
  29. package/src/components/ProjectActivityTimeline.test.tsx +43 -0
  30. package/src/components/ProjectActivityTimeline.tsx +118 -0
  31. package/src/components/ProjectAppDomainPanel.tsx +147 -0
  32. package/src/components/ProjectCard.tsx +117 -0
  33. package/src/components/ProjectCreateForm.test.tsx +45 -0
  34. package/src/components/ProjectCreateForm.tsx +176 -0
  35. package/src/components/ProjectDashboardTemplate.tsx +107 -0
  36. package/src/components/ProjectManagementPage.tsx +112 -0
  37. package/src/components/ProjectMembersPanel.tsx +181 -0
  38. package/src/components/ProjectModelConfigPanel.tsx +294 -0
  39. package/src/components/ProjectPermissionPanel.tsx +174 -0
  40. package/src/components/ProjectResourcePanel.tsx +154 -0
  41. package/src/components/ProjectScopeSelector.test.tsx +50 -0
  42. package/src/components/ProjectScopeSelector.tsx +92 -0
  43. package/src/components/ProjectSettingsPanel.test.tsx +25 -0
  44. package/src/components/ProjectSettingsPanel.tsx +244 -0
  45. package/src/components/ProjectStatusSummary.tsx +165 -0
  46. package/src/components/ProjectSummaryPanel.test.tsx +37 -0
  47. package/src/components/ProjectSummaryPanel.tsx +85 -0
  48. package/src/components/ProjectTab.tsx +8 -0
  49. package/src/components/ProjectTabGroup.tsx +38 -0
  50. package/src/components/ProjectTable.tsx +138 -0
  51. package/src/index.test.tsx +337 -0
  52. package/src/index.tsx +41 -0
  53. package/src/styles.css +2431 -0
  54. package/src/types.ts +111 -0
  55. package/src/utils.ts +96 -0
package/dist/index.css ADDED
@@ -0,0 +1,2059 @@
1
+ @import "@echothink-ui/core/styles.css";
2
+ @import "@echothink-ui/layouts/styles.css";
3
+ @import "@echothink-ui/data/styles.css";
4
+ @import "@echothink-ui/charts/styles.css";
5
+
6
+ /* src/styles.css */
7
+ .eth-project-management-page,
8
+ .eth-project-status-summary,
9
+ .eth-project-table {
10
+ color: var(--eth-color-text-primary);
11
+ font-family: var(--eth-font-family);
12
+ min-inline-size: 0;
13
+ }
14
+ .eth-project-management-page {
15
+ background: var(--eth-color-background);
16
+ display: grid;
17
+ gap: var(--eth-space-lg);
18
+ inline-size: 100%;
19
+ }
20
+ .eth-project-management-page > .eth-page-header {
21
+ margin: 0;
22
+ }
23
+ .eth-project-management-page__filters {
24
+ align-items: flex-end;
25
+ background: var(--eth-color-layer-01);
26
+ border-block-end: 1px solid var(--eth-color-border-subtle);
27
+ display: flex;
28
+ gap: 0;
29
+ inline-size: 100%;
30
+ min-inline-size: 0;
31
+ overflow-x: auto;
32
+ padding-inline: var(--eth-space-xl);
33
+ scrollbar-width: none;
34
+ }
35
+ .eth-project-management-page__filters::-webkit-scrollbar {
36
+ display: none;
37
+ }
38
+ .eth-project-management-page__filter {
39
+ align-items: center;
40
+ background: transparent;
41
+ border: 0;
42
+ border-block-end: 2px solid transparent;
43
+ color: var(--eth-color-text-secondary);
44
+ cursor: pointer;
45
+ display: inline-flex;
46
+ flex: 0 0 auto;
47
+ font: inherit;
48
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
49
+ line-height: 1.2857;
50
+ min-block-size: 2.5rem;
51
+ padding: 0 var(--eth-space-lg);
52
+ position: relative;
53
+ white-space: nowrap;
54
+ }
55
+ .eth-project-management-page__filter:hover {
56
+ color: var(--eth-color-text-primary);
57
+ }
58
+ .eth-project-management-page__filter:focus-visible {
59
+ outline: 2px solid var(--eth-color-focus);
60
+ outline-offset: -2px;
61
+ }
62
+ .eth-project-management-page__filter[aria-disabled=true] {
63
+ cursor: default;
64
+ }
65
+ .eth-project-management-page__filter--active {
66
+ border-block-end-color: var(--eth-color-interactive-primary);
67
+ color: var(--eth-color-text-primary);
68
+ font-weight: 600;
69
+ }
70
+ .eth-project-status-summary {
71
+ display: grid;
72
+ gap: var(--eth-space-lg);
73
+ padding-inline: var(--eth-space-xl);
74
+ }
75
+ .eth-project-status-summary__kpis {
76
+ display: grid;
77
+ gap: var(--eth-space-lg);
78
+ grid-template-columns: repeat(4, minmax(0, 1fr));
79
+ min-inline-size: 0;
80
+ }
81
+ .eth-project-status-summary .eth-kpi {
82
+ background: var(--eth-color-layer-01);
83
+ block-size: 100%;
84
+ min-block-size: 7rem;
85
+ }
86
+ .eth-project-status-summary__bar {
87
+ background: var(--eth-color-layer-02);
88
+ border: 1px solid var(--eth-color-border-subtle);
89
+ display: flex;
90
+ min-block-size: 0.5rem;
91
+ overflow: hidden;
92
+ }
93
+ .eth-project-status-summary__bar-segment {
94
+ background: var(--eth-color-border-strong);
95
+ display: block;
96
+ min-inline-size: 0.25rem;
97
+ }
98
+ .eth-project-status-summary__bar-segment--running {
99
+ background: var(--eth-color-info);
100
+ }
101
+ .eth-project-status-summary__bar-segment--in-progress {
102
+ background: #4589ff;
103
+ }
104
+ .eth-project-status-summary__bar-segment--approval-required,
105
+ .eth-project-status-summary__bar-segment--blocked,
106
+ .eth-project-status-summary__bar-segment--failed {
107
+ background: var(--eth-color-danger);
108
+ }
109
+ .eth-project-status-summary__bar-segment--completed,
110
+ .eth-project-status-summary__bar-segment--succeeded {
111
+ background: var(--eth-color-success);
112
+ }
113
+ .eth-project-status-summary__bar-segment--not-started {
114
+ background: var(--eth-color-text-helper);
115
+ }
116
+ .eth-project-status-summary__legend {
117
+ align-items: center;
118
+ display: flex;
119
+ flex-wrap: wrap;
120
+ gap: var(--eth-space-sm);
121
+ min-inline-size: 0;
122
+ }
123
+ .eth-project-table {
124
+ padding-block-end: var(--eth-space-xl);
125
+ padding-inline: var(--eth-space-xl);
126
+ }
127
+ .eth-project-table .eth-data-table-wrap {
128
+ background: var(--eth-color-layer-01);
129
+ }
130
+ .eth-project-table .eth-project-table__table {
131
+ inline-size: 100%;
132
+ min-inline-size: 58rem;
133
+ table-layout: fixed;
134
+ }
135
+ .eth-project-table .eth-project-table__table th,
136
+ .eth-project-table .eth-project-table__table td {
137
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
138
+ line-height: 1.2857;
139
+ overflow: hidden;
140
+ padding-inline: var(--eth-space-lg);
141
+ text-overflow: ellipsis;
142
+ vertical-align: middle;
143
+ }
144
+ .eth-project-table .eth-project-table__table thead th {
145
+ background: var(--eth-color-layer-selected);
146
+ color: var(--eth-color-text-secondary);
147
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
148
+ font-weight: 600;
149
+ letter-spacing: 0;
150
+ white-space: nowrap;
151
+ }
152
+ .eth-project-table__name {
153
+ align-items: start;
154
+ display: flex;
155
+ flex-direction: column;
156
+ gap: var(--eth-space-2xs);
157
+ min-inline-size: 0;
158
+ }
159
+ .eth-project-table__title,
160
+ .eth-project-table__description,
161
+ .eth-project-table__owner,
162
+ .eth-project-table__updated {
163
+ display: block;
164
+ min-inline-size: 0;
165
+ overflow: hidden;
166
+ text-overflow: ellipsis;
167
+ white-space: nowrap;
168
+ }
169
+ .eth-project-table__title {
170
+ color: var(--eth-color-text-primary);
171
+ font-weight: 600;
172
+ line-height: 1.2857;
173
+ }
174
+ .eth-project-table__description {
175
+ color: var(--eth-color-text-secondary);
176
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
177
+ line-height: 1.3333;
178
+ }
179
+ .eth-project-table__title-button.eth-button {
180
+ block-size: auto;
181
+ display: inline-flex;
182
+ justify-content: flex-start;
183
+ min-block-size: 1.5rem;
184
+ min-inline-size: 0;
185
+ max-inline-size: 100%;
186
+ padding: 0;
187
+ text-align: start;
188
+ }
189
+ .eth-project-table__title-button.eth-button .cds--btn__text {
190
+ display: block;
191
+ min-inline-size: 0;
192
+ overflow: hidden;
193
+ text-overflow: ellipsis;
194
+ white-space: nowrap;
195
+ }
196
+ .eth-project-table__status {
197
+ display: inline-flex;
198
+ max-inline-size: 100%;
199
+ min-inline-size: 0;
200
+ }
201
+ .eth-project-table__metric {
202
+ display: block;
203
+ font-variant-numeric: tabular-nums;
204
+ min-inline-size: 0;
205
+ overflow: hidden;
206
+ text-overflow: ellipsis;
207
+ white-space: nowrap;
208
+ }
209
+ .eth-project-tab {
210
+ font-family: var(--eth-font-family);
211
+ }
212
+ .eth-project-card {
213
+ --eth-project-card-accent: var(--eth-color-interactive-primary);
214
+ --eth-project-card-border: var(--eth-color-border-subtle);
215
+ --eth-project-card-layer: var(--eth-color-layer-01);
216
+ --eth-project-card-layer-alt: var(--eth-color-layer-02);
217
+ --eth-project-card-text-secondary: var(--eth-color-text-secondary);
218
+ background: var(--eth-project-card-layer);
219
+ border: 1px solid var(--eth-project-card-border);
220
+ border-block-start: 3px solid var(--eth-project-card-accent);
221
+ color: var(--eth-color-text-primary);
222
+ display: grid;
223
+ font-family: var(--eth-font-family);
224
+ grid-template-rows: auto 1fr auto;
225
+ inline-size: min(100%, 44rem);
226
+ min-inline-size: 0;
227
+ overflow: hidden;
228
+ }
229
+ .eth-project-card--blocked,
230
+ .eth-project-card--failed,
231
+ .eth-project-card--approval-required {
232
+ --eth-project-card-accent: var(--eth-color-danger);
233
+ }
234
+ .eth-project-card--warning,
235
+ .eth-project-card--stale,
236
+ .eth-project-card--pending-approval {
237
+ --eth-project-card-accent: var(--eth-color-warning);
238
+ }
239
+ .eth-project-card--succeeded,
240
+ .eth-project-card--completed,
241
+ .eth-project-card--synced,
242
+ .eth-project-card--active {
243
+ --eth-project-card-accent: var(--eth-color-success);
244
+ }
245
+ .eth-project-card--inactive,
246
+ .eth-project-card--not-started,
247
+ .eth-project-card--paused {
248
+ --eth-project-card-accent: var(--eth-color-border-strong);
249
+ }
250
+ .eth-project-card__header {
251
+ align-items: start;
252
+ border-block-end: 1px solid var(--eth-project-card-border);
253
+ display: grid;
254
+ gap: var(--eth-space-lg);
255
+ grid-template-columns: minmax(0, 1fr) auto;
256
+ min-inline-size: 0;
257
+ padding: var(--eth-space-lg);
258
+ }
259
+ .eth-project-card__heading {
260
+ display: grid;
261
+ gap: var(--eth-space-xs);
262
+ min-inline-size: 0;
263
+ }
264
+ .eth-project-card__heading h3,
265
+ .eth-project-card__heading p,
266
+ .eth-project-card__metadata,
267
+ .eth-project-card__metadata dt,
268
+ .eth-project-card__metadata dd {
269
+ margin: 0;
270
+ }
271
+ .eth-project-card__heading h3 {
272
+ font-size: calc(1.25rem * var(--eth-text-scale, 1));
273
+ font-weight: 600;
274
+ line-height: 1.4;
275
+ overflow-wrap: anywhere;
276
+ }
277
+ .eth-project-card__heading p {
278
+ color: var(--eth-project-card-text-secondary);
279
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
280
+ line-height: 1.4286;
281
+ overflow-wrap: anywhere;
282
+ }
283
+ .eth-project-card__status {
284
+ justify-self: end;
285
+ min-inline-size: 0;
286
+ }
287
+ .eth-project-card__status .cds--tag,
288
+ .eth-project-card .eth-status-dot {
289
+ margin: 0;
290
+ max-inline-size: 100%;
291
+ }
292
+ .eth-project-card__metadata {
293
+ display: grid;
294
+ grid-template-columns: repeat(5, minmax(0, 1fr));
295
+ min-inline-size: 0;
296
+ }
297
+ .eth-project-card__metadata div {
298
+ align-content: start;
299
+ border-inline-end: 1px solid var(--eth-project-card-border);
300
+ display: grid;
301
+ gap: var(--eth-space-xs);
302
+ min-block-size: 5rem;
303
+ min-inline-size: 0;
304
+ padding: var(--eth-space-lg);
305
+ }
306
+ .eth-project-card__metadata div:last-child {
307
+ border-inline-end: 0;
308
+ }
309
+ .eth-project-card__metadata dt {
310
+ color: var(--eth-project-card-text-secondary);
311
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
312
+ font-weight: 600;
313
+ letter-spacing: 0;
314
+ line-height: 1.3333;
315
+ }
316
+ .eth-project-card__metadata dd {
317
+ color: var(--eth-color-text-primary);
318
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
319
+ font-variant-numeric: tabular-nums;
320
+ font-weight: 600;
321
+ line-height: 1.4286;
322
+ min-inline-size: 0;
323
+ overflow-wrap: anywhere;
324
+ }
325
+ .eth-project-card__actions {
326
+ align-items: center;
327
+ background: var(--eth-project-card-layer-alt);
328
+ border-block-start: 1px solid var(--eth-project-card-border);
329
+ display: flex;
330
+ flex-wrap: wrap;
331
+ gap: var(--eth-space-sm);
332
+ justify-content: flex-end;
333
+ min-block-size: 3rem;
334
+ min-inline-size: 0;
335
+ padding: var(--eth-space-md) var(--eth-space-lg);
336
+ }
337
+ .eth-project-card__actions .eth-actions {
338
+ align-items: center;
339
+ display: flex;
340
+ flex-wrap: wrap;
341
+ gap: var(--eth-space-sm);
342
+ justify-content: flex-end;
343
+ min-inline-size: 0;
344
+ }
345
+ .eth-project-card__actions .eth-button {
346
+ min-inline-size: 6rem;
347
+ }
348
+ .eth-project-scope-selector {
349
+ color: var(--eth-color-text-primary);
350
+ inline-size: min(100%, 48rem);
351
+ min-inline-size: 0;
352
+ }
353
+ .eth-project-scope-selector:focus {
354
+ outline: none;
355
+ }
356
+ .eth-project-scope-selector:focus-visible {
357
+ outline: 2px solid var(--eth-color-focus);
358
+ outline-offset: 2px;
359
+ }
360
+ .eth-project-scope-selector__group {
361
+ background: var(--eth-color-border-subtle);
362
+ border: 1px solid var(--eth-color-border-subtle);
363
+ display: grid;
364
+ gap: 1px;
365
+ grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr));
366
+ inline-size: 100%;
367
+ min-inline-size: 0;
368
+ }
369
+ .eth-project-scope-selector__item {
370
+ background: var(--eth-color-layer-01);
371
+ color: var(--eth-color-text-primary);
372
+ cursor: pointer;
373
+ display: block;
374
+ min-block-size: 4.5rem;
375
+ min-inline-size: 0;
376
+ position: relative;
377
+ }
378
+ .eth-project-scope-selector__item:not(.eth-project-scope-selector__item--readonly):hover {
379
+ background: var(--eth-color-layer-hover);
380
+ }
381
+ .eth-project-scope-selector__item--active {
382
+ background: var(--eth-color-layer-selected);
383
+ box-shadow: inset 0 0 0 2px var(--eth-color-focus);
384
+ z-index: 1;
385
+ }
386
+ .eth-project-scope-selector__item--active::before {
387
+ background: var(--eth-color-focus);
388
+ block-size: 0.1875rem;
389
+ content: "";
390
+ inline-size: 100%;
391
+ inset-block-start: 0;
392
+ inset-inline-start: 0;
393
+ position: absolute;
394
+ }
395
+ .eth-project-scope-selector__item--readonly {
396
+ cursor: default;
397
+ }
398
+ .eth-project-scope-selector__item:focus-within {
399
+ outline: 2px solid var(--eth-color-focus);
400
+ outline-offset: -2px;
401
+ z-index: 2;
402
+ }
403
+ .eth-project-scope-selector__control {
404
+ block-size: 1px;
405
+ border: 0;
406
+ clip: rect(0 0 0 0);
407
+ clip-path: inset(50%);
408
+ inline-size: 1px;
409
+ margin: -1px;
410
+ overflow: hidden;
411
+ padding: 0;
412
+ position: absolute;
413
+ white-space: nowrap;
414
+ }
415
+ .eth-project-scope-selector__content {
416
+ display: grid;
417
+ gap: var(--eth-space-sm);
418
+ min-block-size: 4.5rem;
419
+ min-inline-size: 0;
420
+ padding: var(--eth-space-lg);
421
+ padding-block-start: var(--eth-space-md);
422
+ }
423
+ .eth-project-scope-selector__title-row {
424
+ align-items: flex-start;
425
+ display: flex;
426
+ gap: var(--eth-space-md);
427
+ justify-content: space-between;
428
+ min-inline-size: 0;
429
+ }
430
+ .eth-project-scope-selector__label {
431
+ color: var(--eth-color-text-primary);
432
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
433
+ font-weight: 600;
434
+ line-height: 1.2857;
435
+ min-inline-size: 0;
436
+ overflow: hidden;
437
+ text-overflow: ellipsis;
438
+ white-space: nowrap;
439
+ }
440
+ .eth-project-scope-selector__status {
441
+ display: inline-flex;
442
+ flex: 0 1 auto;
443
+ min-inline-size: 0;
444
+ }
445
+ .eth-project-scope-selector__status .eth-status-dot {
446
+ margin: 0;
447
+ max-inline-size: 8rem;
448
+ }
449
+ .eth-project-scope-selector__kind {
450
+ color: var(--eth-color-text-secondary);
451
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
452
+ line-height: 1.3333;
453
+ overflow: hidden;
454
+ text-overflow: ellipsis;
455
+ white-space: nowrap;
456
+ }
457
+ .eth-project-scope-selector__empty.eth-state {
458
+ inline-size: 100%;
459
+ margin: 0;
460
+ }
461
+ @media (max-width: 36rem) {
462
+ .eth-project-scope-selector__group {
463
+ grid-template-columns: 1fr;
464
+ }
465
+ .eth-project-scope-selector__content {
466
+ min-block-size: 4rem;
467
+ }
468
+ }
469
+ .eth-project-summary-panel {
470
+ --eth-project-summary-accent: var(--eth-color-interactive-primary);
471
+ --eth-project-summary-border: var(--eth-color-border-subtle);
472
+ --eth-project-summary-layer: var(--eth-color-layer-01);
473
+ --eth-project-summary-layer-alt: var(--eth-color-layer-02);
474
+ --eth-project-summary-text-secondary: var(--eth-color-text-secondary);
475
+ background: var(--eth-project-summary-layer);
476
+ border: 1px solid var(--eth-project-summary-border);
477
+ border-block-start: 3px solid var(--eth-project-summary-accent);
478
+ color: var(--eth-color-text-primary);
479
+ display: grid;
480
+ font-family: var(--eth-font-family);
481
+ inline-size: min(100%, 36rem);
482
+ min-inline-size: 0;
483
+ overflow: hidden;
484
+ }
485
+ .eth-project-summary-panel--blocked,
486
+ .eth-project-summary-panel--failed,
487
+ .eth-project-summary-panel--approval-required {
488
+ --eth-project-summary-accent: var(--eth-color-danger);
489
+ }
490
+ .eth-project-summary-panel--warning,
491
+ .eth-project-summary-panel--stale,
492
+ .eth-project-summary-panel--pending-approval {
493
+ --eth-project-summary-accent: var(--eth-color-warning);
494
+ }
495
+ .eth-project-summary-panel--succeeded,
496
+ .eth-project-summary-panel--completed,
497
+ .eth-project-summary-panel--synced,
498
+ .eth-project-summary-panel--active {
499
+ --eth-project-summary-accent: var(--eth-color-success);
500
+ }
501
+ .eth-project-summary-panel--inactive,
502
+ .eth-project-summary-panel--not-started,
503
+ .eth-project-summary-panel--paused {
504
+ --eth-project-summary-accent: var(--eth-color-border-strong);
505
+ }
506
+ .eth-project-summary-panel:focus {
507
+ outline: none;
508
+ }
509
+ .eth-project-summary-panel:focus-visible {
510
+ outline: 2px solid var(--eth-color-focus);
511
+ outline-offset: -2px;
512
+ }
513
+ .eth-project-summary-panel__header {
514
+ align-items: start;
515
+ border-block-end: 1px solid var(--eth-project-summary-border);
516
+ display: grid;
517
+ gap: var(--eth-space-lg);
518
+ grid-template-columns: minmax(0, 1fr) auto;
519
+ min-inline-size: 0;
520
+ padding: var(--eth-space-lg);
521
+ }
522
+ .eth-project-summary-panel__heading {
523
+ display: grid;
524
+ gap: var(--eth-space-xs);
525
+ min-inline-size: 0;
526
+ }
527
+ .eth-project-summary-panel__heading h3,
528
+ .eth-project-summary-panel__heading p,
529
+ .eth-project-summary-panel__metadata,
530
+ .eth-project-summary-panel__metadata dt,
531
+ .eth-project-summary-panel__metadata dd {
532
+ margin: 0;
533
+ }
534
+ .eth-project-summary-panel__heading h3 {
535
+ font-size: calc(1.25rem * var(--eth-text-scale, 1));
536
+ font-weight: 600;
537
+ line-height: 1.4;
538
+ overflow-wrap: anywhere;
539
+ }
540
+ .eth-project-summary-panel__heading p {
541
+ color: var(--eth-project-summary-text-secondary);
542
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
543
+ line-height: 1.4286;
544
+ overflow-wrap: anywhere;
545
+ }
546
+ .eth-project-summary-panel__status {
547
+ justify-self: end;
548
+ min-inline-size: 0;
549
+ }
550
+ .eth-project-summary-panel__status .eth-badge,
551
+ .eth-project-summary-panel .eth-status-dot {
552
+ margin: 0;
553
+ max-inline-size: 100%;
554
+ }
555
+ .eth-project-summary-panel__metadata {
556
+ display: grid;
557
+ grid-template-columns: repeat(2, minmax(0, 1fr));
558
+ min-inline-size: 0;
559
+ }
560
+ .eth-project-summary-panel__metadata-item {
561
+ align-content: start;
562
+ border-block-end: 1px solid var(--eth-project-summary-border);
563
+ display: grid;
564
+ gap: var(--eth-space-xs);
565
+ min-block-size: 4.75rem;
566
+ min-inline-size: 0;
567
+ padding: var(--eth-space-lg);
568
+ }
569
+ .eth-project-summary-panel__metadata-item:nth-child(odd) {
570
+ border-inline-end: 1px solid var(--eth-project-summary-border);
571
+ }
572
+ .eth-project-summary-panel__metadata-item:nth-last-child(-n+2) {
573
+ border-block-end: 0;
574
+ }
575
+ .eth-project-summary-panel__metadata-item--health {
576
+ background: var(--eth-project-summary-layer-alt);
577
+ }
578
+ .eth-project-summary-panel__metadata dt {
579
+ color: var(--eth-project-summary-text-secondary);
580
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
581
+ font-weight: 600;
582
+ letter-spacing: 0;
583
+ line-height: 1.3333;
584
+ }
585
+ .eth-project-summary-panel__metadata dd {
586
+ color: var(--eth-color-text-primary);
587
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
588
+ font-variant-numeric: tabular-nums;
589
+ font-weight: 600;
590
+ line-height: 1.4286;
591
+ min-inline-size: 0;
592
+ overflow-wrap: anywhere;
593
+ }
594
+ @media (width <= 36rem) {
595
+ .eth-project-summary-panel {
596
+ inline-size: 100%;
597
+ }
598
+ .eth-project-summary-panel__header {
599
+ grid-template-columns: 1fr;
600
+ }
601
+ .eth-project-summary-panel__status {
602
+ justify-self: start;
603
+ }
604
+ .eth-project-summary-panel__metadata {
605
+ grid-template-columns: 1fr;
606
+ }
607
+ .eth-project-summary-panel__metadata-item,
608
+ .eth-project-summary-panel__metadata-item:nth-child(odd) {
609
+ border-inline-end: 0;
610
+ }
611
+ .eth-project-summary-panel__metadata-item:nth-last-child(-n+2) {
612
+ border-block-end: 1px solid var(--eth-project-summary-border);
613
+ }
614
+ .eth-project-summary-panel__metadata-item:last-child {
615
+ border-block-end: 0;
616
+ }
617
+ }
618
+ .eth-project-status-summary {
619
+ --eth-project-status-border: var(--eth-color-border-subtle);
620
+ --eth-project-status-layer: var(--eth-color-layer-01);
621
+ --eth-project-status-layer-raised: var(--eth-color-layer-02);
622
+ background: var(--eth-project-status-layer);
623
+ border: 1px solid var(--eth-project-status-border);
624
+ color: var(--eth-color-text-primary);
625
+ display: grid;
626
+ font-family: var(--eth-font-family);
627
+ inline-size: min(100%, 56rem);
628
+ min-inline-size: 0;
629
+ }
630
+ .eth-project-status-summary:focus {
631
+ outline: none;
632
+ }
633
+ .eth-project-status-summary:focus-visible {
634
+ outline: 2px solid var(--eth-color-focus);
635
+ outline-offset: -2px;
636
+ }
637
+ .eth-project-status-summary__header {
638
+ align-items: flex-start;
639
+ background: var(--eth-project-status-layer-raised);
640
+ border-block-end: 1px solid var(--eth-project-status-border);
641
+ display: flex;
642
+ gap: var(--eth-space-lg);
643
+ justify-content: space-between;
644
+ min-inline-size: 0;
645
+ padding: var(--eth-space-lg);
646
+ }
647
+ .eth-project-status-summary__heading {
648
+ display: grid;
649
+ gap: var(--eth-space-xs);
650
+ min-inline-size: 0;
651
+ }
652
+ .eth-project-status-summary__heading h3,
653
+ .eth-project-status-summary__heading p,
654
+ .eth-project-status-summary__empty {
655
+ margin: 0;
656
+ }
657
+ .eth-project-status-summary__heading h3 {
658
+ color: var(--eth-color-text-primary);
659
+ font-size: calc(1rem * var(--eth-text-scale, 1));
660
+ font-weight: 600;
661
+ line-height: 1.375;
662
+ overflow-wrap: anywhere;
663
+ }
664
+ .eth-project-status-summary__heading p,
665
+ .eth-project-status-summary__empty {
666
+ color: var(--eth-color-text-secondary);
667
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
668
+ line-height: 1.4286;
669
+ overflow-wrap: anywhere;
670
+ }
671
+ .eth-project-status-summary__header > .eth-badge {
672
+ flex: 0 1 auto;
673
+ margin: 0;
674
+ max-inline-size: 14rem;
675
+ }
676
+ .eth-project-status-summary__kpis {
677
+ display: grid;
678
+ grid-template-columns: repeat(4, minmax(0, 1fr));
679
+ min-inline-size: 0;
680
+ }
681
+ .eth-project-status-summary__kpis .eth-kpi {
682
+ align-content: start;
683
+ background: var(--eth-project-status-layer-raised);
684
+ border: 0;
685
+ border-block-start: 0;
686
+ display: grid;
687
+ gap: var(--eth-space-sm);
688
+ min-block-size: 6.75rem;
689
+ min-inline-size: 0;
690
+ padding: var(--eth-space-lg);
691
+ }
692
+ .eth-project-status-summary__kpis .eth-kpi + .eth-kpi {
693
+ border-inline-start: 1px solid var(--eth-project-status-border);
694
+ }
695
+ .eth-project-status-summary__kpis .eth-kpi__header {
696
+ align-items: flex-start;
697
+ display: flex;
698
+ flex-wrap: wrap;
699
+ gap: var(--eth-space-xs);
700
+ justify-content: space-between;
701
+ min-inline-size: 0;
702
+ }
703
+ .eth-project-status-summary__kpis .eth-kpi__title,
704
+ .eth-project-status-summary__kpis .eth-kpi__description {
705
+ color: var(--eth-color-text-secondary);
706
+ margin: 0;
707
+ overflow-wrap: anywhere;
708
+ }
709
+ .eth-project-status-summary__kpis .eth-kpi__value {
710
+ color: var(--eth-color-text-primary);
711
+ display: block;
712
+ font-size: calc(1.75rem * var(--eth-text-scale, 1));
713
+ font-weight: 400;
714
+ line-height: 1.2857;
715
+ }
716
+ .eth-project-status-summary__distribution {
717
+ border-block-start: 1px solid var(--eth-project-status-border);
718
+ display: grid;
719
+ gap: var(--eth-space-md);
720
+ min-inline-size: 0;
721
+ padding: var(--eth-space-lg);
722
+ }
723
+ .eth-project-status-summary__bar {
724
+ background: var(--eth-color-border-subtle);
725
+ block-size: var(--eth-space-sm);
726
+ display: flex;
727
+ inline-size: 100%;
728
+ min-inline-size: 0;
729
+ overflow: hidden;
730
+ }
731
+ .eth-project-status-summary__bar-segment {
732
+ background: var(--eth-color-border-strong);
733
+ flex-basis: 0;
734
+ min-inline-size: 0;
735
+ }
736
+ .eth-project-status-summary__bar-segment + .eth-project-status-summary__bar-segment {
737
+ border-inline-start: 1px solid var(--eth-project-status-layer-raised);
738
+ }
739
+ .eth-project-status-summary__bar-segment--inflight,
740
+ .eth-project-status-summary__bar-segment--running,
741
+ .eth-project-status-summary__bar-segment--in-progress {
742
+ background: var(--eth-color-info);
743
+ }
744
+ .eth-project-status-summary__bar-segment--attention,
745
+ .eth-project-status-summary__bar-segment--approval-required,
746
+ .eth-project-status-summary__bar-segment--blocked,
747
+ .eth-project-status-summary__bar-segment--failed {
748
+ background: var(--eth-color-danger);
749
+ }
750
+ .eth-project-status-summary__bar-segment--warning,
751
+ .eth-project-status-summary__bar-segment--pending-approval,
752
+ .eth-project-status-summary__bar-segment--stale {
753
+ background: var(--eth-color-warning);
754
+ }
755
+ .eth-project-status-summary__bar-segment--complete,
756
+ .eth-project-status-summary__bar-segment--completed,
757
+ .eth-project-status-summary__bar-segment--succeeded,
758
+ .eth-project-status-summary__bar-segment--synced,
759
+ .eth-project-status-summary__bar-segment--active {
760
+ background: var(--eth-color-success);
761
+ }
762
+ .eth-project-status-summary__bar-segment--paused,
763
+ .eth-project-status-summary__bar-segment--queued,
764
+ .eth-project-status-summary__bar-segment--not-started,
765
+ .eth-project-status-summary__bar-segment--inactive {
766
+ background: var(--eth-color-border-strong);
767
+ }
768
+ .eth-project-status-summary__legend {
769
+ align-items: center;
770
+ display: flex;
771
+ flex-wrap: wrap;
772
+ gap: var(--eth-space-sm);
773
+ min-inline-size: 0;
774
+ }
775
+ .eth-project-status-summary__legend > span {
776
+ display: inline-flex;
777
+ max-inline-size: 100%;
778
+ min-inline-size: 0;
779
+ }
780
+ .eth-project-status-summary__legend .eth-status-dot {
781
+ background: var(--eth-project-status-layer);
782
+ margin: 0;
783
+ max-inline-size: 100%;
784
+ }
785
+ @media (width <= 54rem) {
786
+ .eth-project-status-summary__kpis {
787
+ grid-template-columns: repeat(2, minmax(0, 1fr));
788
+ }
789
+ .eth-project-status-summary__kpis .eth-kpi {
790
+ border-block-start: 1px solid var(--eth-project-status-border);
791
+ }
792
+ .eth-project-status-summary__kpis .eth-kpi:nth-child(-n+2) {
793
+ border-block-start: 0;
794
+ }
795
+ .eth-project-status-summary__kpis .eth-kpi:nth-child(2n+1) {
796
+ border-inline-start: 0;
797
+ }
798
+ }
799
+ @media (width <= 34rem) {
800
+ .eth-project-status-summary__header {
801
+ display: grid;
802
+ }
803
+ .eth-project-status-summary__kpis {
804
+ grid-template-columns: minmax(0, 1fr);
805
+ }
806
+ .eth-project-status-summary__kpis .eth-kpi,
807
+ .eth-project-status-summary__kpis .eth-kpi:nth-child(-n+2) {
808
+ border-block-start: 1px solid var(--eth-project-status-border);
809
+ border-inline-start: 0;
810
+ }
811
+ .eth-project-status-summary__kpis .eth-kpi:first-child {
812
+ border-block-start: 0;
813
+ }
814
+ }
815
+ .eth-project-app-domain-panel {
816
+ background: var(--eth-color-layer-01);
817
+ border: 1px solid var(--eth-color-border-subtle);
818
+ color: var(--eth-color-text-primary);
819
+ display: grid;
820
+ gap: var(--eth-space-lg);
821
+ inline-size: 100%;
822
+ min-inline-size: 0;
823
+ padding: var(--eth-space-lg);
824
+ }
825
+ .eth-project-app-domain-panel:focus {
826
+ outline: none;
827
+ }
828
+ .eth-project-app-domain-panel:focus-visible {
829
+ outline: 2px solid var(--eth-color-focus);
830
+ outline-offset: -2px;
831
+ }
832
+ .eth-project-app-domain-panel__header {
833
+ align-items: flex-start;
834
+ display: flex;
835
+ gap: var(--eth-space-lg);
836
+ justify-content: space-between;
837
+ min-inline-size: 0;
838
+ }
839
+ .eth-project-app-domain-panel__header h3 {
840
+ color: var(--eth-color-text-primary);
841
+ font-size: calc(1rem * var(--eth-text-scale, 1));
842
+ font-weight: 600;
843
+ line-height: 1.375;
844
+ margin: 0;
845
+ }
846
+ .eth-project-app-domain-panel__summary {
847
+ border: 1px solid var(--eth-color-border-subtle);
848
+ display: grid;
849
+ flex: 0 0 auto;
850
+ grid-template-columns: repeat(3, minmax(4.75rem, 1fr));
851
+ margin: 0;
852
+ }
853
+ .eth-project-app-domain-panel__summary div {
854
+ background: var(--eth-color-layer-02);
855
+ display: grid;
856
+ gap: var(--eth-space-2xs);
857
+ min-inline-size: 0;
858
+ padding: var(--eth-space-sm) var(--eth-space-md);
859
+ }
860
+ .eth-project-app-domain-panel__summary div + div {
861
+ border-inline-start: 1px solid var(--eth-color-border-subtle);
862
+ }
863
+ .eth-project-app-domain-panel__summary dt,
864
+ .eth-project-app-domain-panel__summary dd {
865
+ margin: 0;
866
+ }
867
+ .eth-project-app-domain-panel__summary dt {
868
+ color: var(--eth-color-text-secondary);
869
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
870
+ line-height: 1.3333;
871
+ }
872
+ .eth-project-app-domain-panel__summary dd {
873
+ color: var(--eth-color-text-primary);
874
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
875
+ font-variant-numeric: tabular-nums;
876
+ font-weight: 600;
877
+ line-height: 1.2857;
878
+ }
879
+ .eth-project-app-domain-panel .eth-data-table-wrap {
880
+ border-color: var(--eth-color-border-subtle);
881
+ }
882
+ .eth-project-app-domain-panel__table {
883
+ min-inline-size: 36rem;
884
+ table-layout: fixed;
885
+ }
886
+ .eth-project-app-domain-panel__domain {
887
+ display: grid;
888
+ gap: var(--eth-space-2xs);
889
+ min-inline-size: 0;
890
+ }
891
+ .eth-project-app-domain-panel__domain strong,
892
+ .eth-project-app-domain-panel__domain span {
893
+ min-inline-size: 0;
894
+ overflow: hidden;
895
+ text-overflow: ellipsis;
896
+ white-space: nowrap;
897
+ }
898
+ .eth-project-app-domain-panel__domain strong {
899
+ color: var(--eth-color-text-primary);
900
+ font-weight: 600;
901
+ }
902
+ .eth-project-app-domain-panel__domain span {
903
+ color: var(--eth-color-text-secondary);
904
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
905
+ line-height: 1.3333;
906
+ }
907
+ .eth-project-app-domain-panel .eth-data-table__actions {
908
+ gap: var(--eth-space-xs);
909
+ }
910
+ .eth-project-members-panel {
911
+ background: var(--eth-color-layer-01);
912
+ border: 1px solid var(--eth-color-border-subtle);
913
+ color: var(--eth-color-text-primary);
914
+ display: grid;
915
+ gap: var(--eth-space-lg);
916
+ inline-size: 100%;
917
+ min-inline-size: 0;
918
+ padding: var(--eth-space-lg);
919
+ }
920
+ .eth-project-members-panel:focus {
921
+ outline: none;
922
+ }
923
+ .eth-project-members-panel:focus-visible {
924
+ outline: 2px solid var(--eth-color-focus);
925
+ outline-offset: -2px;
926
+ }
927
+ .eth-project-members-panel__header {
928
+ align-items: flex-start;
929
+ display: flex;
930
+ gap: var(--eth-space-lg);
931
+ justify-content: space-between;
932
+ min-inline-size: 0;
933
+ }
934
+ .eth-project-members-panel__heading {
935
+ display: grid;
936
+ gap: var(--eth-space-md);
937
+ min-inline-size: 0;
938
+ }
939
+ .eth-project-members-panel__heading h3 {
940
+ color: var(--eth-color-text-primary);
941
+ font-size: calc(1rem * var(--eth-text-scale, 1));
942
+ font-weight: 600;
943
+ line-height: 1.375;
944
+ margin: 0;
945
+ }
946
+ .eth-project-resource-panel {
947
+ background: var(--eth-color-layer-01);
948
+ border: 1px solid var(--eth-color-border-subtle);
949
+ color: var(--eth-color-text-primary);
950
+ display: grid;
951
+ gap: var(--eth-space-lg);
952
+ inline-size: 100%;
953
+ min-inline-size: 0;
954
+ padding: var(--eth-space-lg);
955
+ }
956
+ .eth-project-resource-panel:focus {
957
+ outline: none;
958
+ }
959
+ .eth-project-resource-panel:focus-visible {
960
+ outline: 2px solid var(--eth-color-focus);
961
+ outline-offset: -2px;
962
+ }
963
+ .eth-project-resource-panel__header {
964
+ align-items: flex-start;
965
+ display: flex;
966
+ gap: var(--eth-space-lg);
967
+ justify-content: space-between;
968
+ min-inline-size: 0;
969
+ }
970
+ .eth-project-resource-panel__header h3 {
971
+ color: var(--eth-color-text-primary);
972
+ font-size: calc(1rem * var(--eth-text-scale, 1));
973
+ font-weight: 600;
974
+ line-height: 1.375;
975
+ margin: 0;
976
+ }
977
+ .eth-project-resource-panel__summary {
978
+ border: 1px solid var(--eth-color-border-subtle);
979
+ display: grid;
980
+ flex: 0 0 auto;
981
+ grid-template-columns: repeat(3, minmax(4.75rem, 1fr));
982
+ margin: 0;
983
+ }
984
+ .eth-project-resource-panel__summary div {
985
+ background: var(--eth-color-layer-02);
986
+ display: grid;
987
+ gap: var(--eth-space-2xs);
988
+ min-inline-size: 0;
989
+ padding: var(--eth-space-sm) var(--eth-space-md);
990
+ }
991
+ .eth-project-resource-panel__summary div + div {
992
+ border-inline-start: 1px solid var(--eth-color-border-subtle);
993
+ }
994
+ .eth-project-resource-panel__summary dt,
995
+ .eth-project-resource-panel__summary dd {
996
+ margin: 0;
997
+ }
998
+ .eth-project-resource-panel__summary dt {
999
+ color: var(--eth-color-text-secondary);
1000
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
1001
+ line-height: 1.3333;
1002
+ }
1003
+ .eth-project-resource-panel__summary dd {
1004
+ color: var(--eth-color-text-primary);
1005
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
1006
+ font-variant-numeric: tabular-nums;
1007
+ font-weight: 600;
1008
+ line-height: 1.2857;
1009
+ }
1010
+ .eth-project-resource-panel .eth-data-table-wrap {
1011
+ border-color: var(--eth-color-border-subtle);
1012
+ }
1013
+ .eth-project-resource-panel__table {
1014
+ min-inline-size: 44rem;
1015
+ table-layout: fixed;
1016
+ }
1017
+ .eth-project-resource-panel__resource {
1018
+ align-items: center;
1019
+ display: grid;
1020
+ gap: var(--eth-space-md);
1021
+ grid-template-columns: 2rem minmax(0, 1fr);
1022
+ min-inline-size: 0;
1023
+ }
1024
+ .eth-project-resource-panel__resource-icon {
1025
+ align-items: center;
1026
+ background: var(--eth-color-layer-02);
1027
+ border: 1px solid var(--eth-color-border-subtle);
1028
+ block-size: 2rem;
1029
+ color: var(--eth-color-text-secondary);
1030
+ display: inline-flex;
1031
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
1032
+ font-weight: 600;
1033
+ inline-size: 2rem;
1034
+ justify-content: center;
1035
+ line-height: 1;
1036
+ }
1037
+ .eth-project-resource-panel__resource-copy {
1038
+ display: grid;
1039
+ gap: var(--eth-space-2xs);
1040
+ min-inline-size: 0;
1041
+ }
1042
+ .eth-project-resource-panel__resource-copy strong,
1043
+ .eth-project-resource-panel__resource-copy span {
1044
+ min-inline-size: 0;
1045
+ overflow: hidden;
1046
+ text-overflow: ellipsis;
1047
+ white-space: nowrap;
1048
+ }
1049
+ .eth-project-resource-panel__resource-copy strong {
1050
+ color: var(--eth-color-text-primary);
1051
+ font-weight: 600;
1052
+ }
1053
+ .eth-project-resource-panel__resource-copy span,
1054
+ .eth-project-resource-panel__muted {
1055
+ color: var(--eth-color-text-secondary);
1056
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
1057
+ line-height: 1.3333;
1058
+ }
1059
+ .eth-project-resource-panel__updated {
1060
+ color: var(--eth-color-text-primary);
1061
+ font-variant-numeric: tabular-nums;
1062
+ white-space: nowrap;
1063
+ }
1064
+ .eth-project-resource-panel .eth-data-table__actions {
1065
+ gap: var(--eth-space-xs);
1066
+ }
1067
+ @media (max-width: 42rem) {
1068
+ .eth-project-resource-panel {
1069
+ padding: var(--eth-space-md);
1070
+ }
1071
+ .eth-project-resource-panel__header {
1072
+ display: grid;
1073
+ }
1074
+ .eth-project-resource-panel__summary {
1075
+ inline-size: 100%;
1076
+ }
1077
+ }
1078
+ .eth-project-activity-timeline {
1079
+ color: var(--eth-color-text-primary);
1080
+ display: grid;
1081
+ gap: var(--eth-space-lg);
1082
+ inline-size: min(100%, 44rem);
1083
+ min-inline-size: 0;
1084
+ }
1085
+ .eth-project-activity-timeline__header {
1086
+ border-block-end: 1px solid var(--eth-color-border-subtle);
1087
+ padding-block-end: var(--eth-space-sm);
1088
+ }
1089
+ .eth-project-activity-timeline__header h3 {
1090
+ font-size: calc(1rem * var(--eth-text-scale, 1));
1091
+ font-weight: 600;
1092
+ line-height: 1.375;
1093
+ margin: 0;
1094
+ }
1095
+ .eth-project-activity-timeline__list {
1096
+ display: grid;
1097
+ gap: 0;
1098
+ list-style: none;
1099
+ margin: 0;
1100
+ min-inline-size: 0;
1101
+ padding: 0;
1102
+ }
1103
+ .eth-project-activity-timeline__item {
1104
+ --eth-project-activity-accent: var(--eth-color-interactive-primary);
1105
+ display: grid;
1106
+ gap: 0 var(--eth-space-md);
1107
+ grid-template-columns: minmax(3.75rem, max-content) 1rem minmax(0, 1fr);
1108
+ min-inline-size: 0;
1109
+ }
1110
+ .eth-project-activity-timeline__item--success {
1111
+ --eth-project-activity-accent: var(--eth-color-success);
1112
+ }
1113
+ .eth-project-activity-timeline__item--warning {
1114
+ --eth-project-activity-accent: var(--eth-color-warning);
1115
+ }
1116
+ .eth-project-activity-timeline__item--danger {
1117
+ --eth-project-activity-accent: var(--eth-color-danger);
1118
+ }
1119
+ .eth-project-activity-timeline__item--neutral {
1120
+ --eth-project-activity-accent: var(--eth-color-border-strong);
1121
+ }
1122
+ .eth-project-activity-timeline__time {
1123
+ color: var(--eth-color-text-secondary);
1124
+ font-family: var(--eth-font-mono);
1125
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
1126
+ font-variant-numeric: tabular-nums;
1127
+ justify-self: end;
1128
+ line-height: 1.3333;
1129
+ padding-block-start: var(--eth-space-2xs);
1130
+ white-space: nowrap;
1131
+ }
1132
+ .eth-project-activity-timeline__rail {
1133
+ display: flex;
1134
+ justify-content: center;
1135
+ min-block-size: 100%;
1136
+ position: relative;
1137
+ }
1138
+ .eth-project-activity-timeline__rail::after {
1139
+ background: var(--eth-color-border-subtle);
1140
+ block-size: calc(100% - var(--eth-space-xs));
1141
+ content: "";
1142
+ inline-size: 1px;
1143
+ inset-block-start: 0.875rem;
1144
+ inset-inline-start: calc(50% - 0.5px);
1145
+ position: absolute;
1146
+ }
1147
+ .eth-project-activity-timeline__item:last-child .eth-project-activity-timeline__rail::after {
1148
+ display: none;
1149
+ }
1150
+ .eth-project-activity-timeline__marker {
1151
+ background: var(--eth-project-activity-accent);
1152
+ block-size: 0.625rem;
1153
+ border: 2px solid var(--eth-color-layer-01);
1154
+ border-radius: 50%;
1155
+ box-shadow: 0 0 0 1px var(--eth-project-activity-accent);
1156
+ inline-size: 0.625rem;
1157
+ margin-block-start: var(--eth-space-xs);
1158
+ position: relative;
1159
+ z-index: 1;
1160
+ }
1161
+ .eth-project-activity-timeline__event {
1162
+ border-block-end: 1px solid var(--eth-color-border-subtle);
1163
+ display: grid;
1164
+ gap: var(--eth-space-xs);
1165
+ min-inline-size: 0;
1166
+ padding-block-end: var(--eth-space-lg);
1167
+ }
1168
+ .eth-project-activity-timeline__item + .eth-project-activity-timeline__item .eth-project-activity-timeline__time,
1169
+ .eth-project-activity-timeline__item + .eth-project-activity-timeline__item .eth-project-activity-timeline__rail,
1170
+ .eth-project-activity-timeline__item + .eth-project-activity-timeline__item .eth-project-activity-timeline__event {
1171
+ padding-block-start: var(--eth-space-lg);
1172
+ }
1173
+ .eth-project-activity-timeline__item:last-child .eth-project-activity-timeline__event {
1174
+ border-block-end: 0;
1175
+ padding-block-end: 0;
1176
+ }
1177
+ .eth-project-activity-timeline__event-header {
1178
+ align-items: center;
1179
+ display: flex;
1180
+ flex-wrap: wrap;
1181
+ gap: var(--eth-space-sm);
1182
+ min-inline-size: 0;
1183
+ }
1184
+ .eth-project-activity-timeline__actor {
1185
+ color: var(--eth-color-text-secondary);
1186
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
1187
+ line-height: 1.3333;
1188
+ min-inline-size: 0;
1189
+ overflow-wrap: anywhere;
1190
+ }
1191
+ .eth-project-activity-timeline__summary {
1192
+ color: var(--eth-color-text-primary);
1193
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
1194
+ font-weight: 600;
1195
+ line-height: 1.4286;
1196
+ min-inline-size: 0;
1197
+ overflow-wrap: anywhere;
1198
+ }
1199
+ .eth-project-activity-timeline__details {
1200
+ color: var(--eth-color-text-secondary);
1201
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
1202
+ line-height: 1.4286;
1203
+ margin: 0;
1204
+ min-inline-size: 0;
1205
+ overflow-wrap: anywhere;
1206
+ }
1207
+ .eth-project-create-form {
1208
+ background: var(--eth-color-layer-01);
1209
+ border: 1px solid var(--eth-color-border-subtle);
1210
+ color: var(--eth-color-text-primary);
1211
+ display: grid;
1212
+ inline-size: min(100%, 54rem);
1213
+ margin: 0;
1214
+ min-inline-size: 0;
1215
+ }
1216
+ .eth-project-create-form__header {
1217
+ background: var(--eth-color-layer-02);
1218
+ border-block-end: 1px solid var(--eth-color-border-subtle);
1219
+ display: grid;
1220
+ gap: var(--eth-space-sm);
1221
+ padding: var(--eth-space-xl);
1222
+ }
1223
+ .eth-project-create-form__title {
1224
+ font-size: calc(1.25rem * var(--eth-text-scale, 1));
1225
+ font-weight: 400;
1226
+ line-height: 1.4;
1227
+ margin: 0;
1228
+ }
1229
+ .eth-project-create-form__description {
1230
+ color: var(--eth-color-text-secondary);
1231
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
1232
+ line-height: 1.4286;
1233
+ margin: 0;
1234
+ max-inline-size: 42rem;
1235
+ }
1236
+ .eth-project-create-form__validation {
1237
+ margin: var(--eth-space-lg) var(--eth-space-xl) 0;
1238
+ }
1239
+ .eth-project-create-form__section.eth-form-section {
1240
+ border-block-start: 0;
1241
+ padding: var(--eth-space-xl);
1242
+ }
1243
+ .eth-project-create-form__section + .eth-project-create-form__section {
1244
+ border-block-start: 1px solid var(--eth-color-border-subtle);
1245
+ }
1246
+ .eth-project-create-form__grid {
1247
+ align-items: start;
1248
+ column-gap: var(--eth-space-xl);
1249
+ display: grid;
1250
+ grid-template-columns: repeat(2, minmax(0, 1fr));
1251
+ min-inline-size: 0;
1252
+ row-gap: var(--eth-space-lg);
1253
+ }
1254
+ .eth-project-create-form__grid--setup {
1255
+ grid-template-columns: minmax(14rem, 24rem);
1256
+ }
1257
+ .eth-project-create-form__field,
1258
+ .eth-project-create-form__field .cds--text-input-wrapper,
1259
+ .eth-project-create-form__field .cds--select,
1260
+ .eth-project-create-form__field .cds--select-input,
1261
+ .eth-project-create-form__field .cds--text-input,
1262
+ .eth-project-create-form__field .cds--text-area__wrapper,
1263
+ .eth-project-create-form__field .cds--text-area {
1264
+ inline-size: 100%;
1265
+ min-inline-size: 0;
1266
+ }
1267
+ .eth-project-create-form__field--wide {
1268
+ grid-column: 1 / -1;
1269
+ }
1270
+ .eth-project-create-form__field .cds--text-area {
1271
+ min-block-size: 7rem;
1272
+ resize: vertical;
1273
+ }
1274
+ .eth-project-create-form__actions {
1275
+ align-items: center;
1276
+ background: var(--eth-color-layer-02);
1277
+ border-block-start: 1px solid var(--eth-color-border-subtle);
1278
+ display: flex;
1279
+ flex-wrap: wrap;
1280
+ gap: var(--eth-space-sm);
1281
+ justify-content: flex-end;
1282
+ padding: var(--eth-space-lg) var(--eth-space-xl);
1283
+ }
1284
+ .eth-project-create-form__actions .eth-button {
1285
+ min-inline-size: 8.5rem;
1286
+ }
1287
+ @media (width <= 72rem) {
1288
+ .eth-project-status-summary__kpis {
1289
+ grid-template-columns: repeat(2, minmax(0, 1fr));
1290
+ }
1291
+ }
1292
+ @media (width <= 48rem) {
1293
+ .eth-project-management-page {
1294
+ gap: var(--eth-space-md);
1295
+ }
1296
+ .eth-project-management-page__filters,
1297
+ .eth-project-status-summary,
1298
+ .eth-project-table {
1299
+ padding-inline: var(--eth-space-lg);
1300
+ }
1301
+ .eth-project-status-summary__kpis {
1302
+ grid-template-columns: minmax(0, 1fr);
1303
+ }
1304
+ .eth-project-card {
1305
+ inline-size: 100%;
1306
+ }
1307
+ .eth-project-card__header {
1308
+ grid-template-columns: 1fr;
1309
+ }
1310
+ .eth-project-card__status {
1311
+ justify-self: start;
1312
+ }
1313
+ .eth-project-card__metadata {
1314
+ grid-template-columns: repeat(2, minmax(0, 1fr));
1315
+ }
1316
+ .eth-project-card__metadata div {
1317
+ border-block-end: 1px solid var(--eth-project-card-border);
1318
+ }
1319
+ .eth-project-card__metadata div:nth-child(2n) {
1320
+ border-inline-end: 0;
1321
+ }
1322
+ .eth-project-card__metadata div:last-child {
1323
+ border-block-end: 0;
1324
+ grid-column: 1 / -1;
1325
+ }
1326
+ .eth-project-card__actions,
1327
+ .eth-project-card__actions .eth-actions {
1328
+ justify-content: stretch;
1329
+ }
1330
+ .eth-project-card__actions .eth-button {
1331
+ flex: 1 1 10rem;
1332
+ }
1333
+ }
1334
+ .eth-project-members-panel__summary {
1335
+ border: 1px solid var(--eth-color-border-subtle);
1336
+ display: grid;
1337
+ grid-template-columns: repeat(3, minmax(5.5rem, 1fr));
1338
+ margin: 0;
1339
+ max-inline-size: 22rem;
1340
+ }
1341
+ .eth-project-members-panel__summary div {
1342
+ background: var(--eth-color-layer-02);
1343
+ display: grid;
1344
+ gap: var(--eth-space-2xs);
1345
+ min-inline-size: 0;
1346
+ padding: var(--eth-space-sm) var(--eth-space-md);
1347
+ }
1348
+ .eth-project-members-panel__summary div + div {
1349
+ border-inline-start: 1px solid var(--eth-color-border-subtle);
1350
+ }
1351
+ .eth-project-members-panel__summary dt,
1352
+ .eth-project-members-panel__summary dd {
1353
+ margin: 0;
1354
+ }
1355
+ .eth-project-members-panel__summary dt {
1356
+ color: var(--eth-color-text-secondary);
1357
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
1358
+ line-height: 1.3333;
1359
+ }
1360
+ .eth-project-members-panel__summary dd {
1361
+ color: var(--eth-color-text-primary);
1362
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
1363
+ font-variant-numeric: tabular-nums;
1364
+ font-weight: 600;
1365
+ line-height: 1.2857;
1366
+ }
1367
+ .eth-project-members-panel .eth-data-table-wrap {
1368
+ border-color: var(--eth-color-border-subtle);
1369
+ }
1370
+ .eth-project-members-panel__table {
1371
+ min-inline-size: 42rem;
1372
+ table-layout: fixed;
1373
+ }
1374
+ .eth-project-members-panel__member {
1375
+ align-items: center;
1376
+ display: flex;
1377
+ gap: var(--eth-space-md);
1378
+ min-inline-size: 0;
1379
+ }
1380
+ .eth-project-members-panel__member strong {
1381
+ color: var(--eth-color-text-primary);
1382
+ font-weight: 600;
1383
+ min-inline-size: 0;
1384
+ overflow: hidden;
1385
+ text-overflow: ellipsis;
1386
+ white-space: nowrap;
1387
+ }
1388
+ .eth-project-members-panel__avatar {
1389
+ align-items: center;
1390
+ background: var(--eth-color-layer-selected);
1391
+ block-size: 2rem;
1392
+ border: 1px solid var(--eth-color-border-subtle);
1393
+ color: var(--eth-color-text-primary);
1394
+ display: inline-flex;
1395
+ flex: 0 0 auto;
1396
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
1397
+ font-weight: 600;
1398
+ inline-size: 2rem;
1399
+ justify-content: center;
1400
+ line-height: 1;
1401
+ object-fit: cover;
1402
+ }
1403
+ .eth-project-members-panel__role-select {
1404
+ inline-size: min(100%, 10rem);
1405
+ }
1406
+ .eth-project-members-panel__role-select .cds--select,
1407
+ .eth-project-members-panel__role-select .cds--select-input {
1408
+ inline-size: 100%;
1409
+ }
1410
+ .eth-project-members-panel__role-badge {
1411
+ align-items: center;
1412
+ background: var(--eth-color-layer-02);
1413
+ border: 1px solid var(--eth-color-border-subtle);
1414
+ color: var(--eth-color-text-secondary);
1415
+ display: inline-flex;
1416
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
1417
+ font-weight: 600;
1418
+ min-block-size: 1.5rem;
1419
+ max-inline-size: 100%;
1420
+ padding: 0 var(--eth-space-sm);
1421
+ }
1422
+ .eth-project-members-panel__role-badge,
1423
+ .eth-project-members-panel .eth-status-dot {
1424
+ overflow: hidden;
1425
+ text-overflow: ellipsis;
1426
+ white-space: nowrap;
1427
+ }
1428
+ .eth-project-members-panel .eth-data-table__actions {
1429
+ gap: var(--eth-space-xs);
1430
+ }
1431
+ @media (max-width: 42rem) {
1432
+ .eth-project-app-domain-panel {
1433
+ padding: var(--eth-space-md);
1434
+ }
1435
+ .eth-project-app-domain-panel__header {
1436
+ display: grid;
1437
+ }
1438
+ .eth-project-app-domain-panel__summary {
1439
+ inline-size: 100%;
1440
+ }
1441
+ .eth-project-members-panel {
1442
+ padding: var(--eth-space-md);
1443
+ }
1444
+ .eth-project-members-panel__header {
1445
+ display: grid;
1446
+ }
1447
+ .eth-project-members-panel__summary {
1448
+ inline-size: 100%;
1449
+ max-inline-size: none;
1450
+ }
1451
+ .eth-project-create-form__header,
1452
+ .eth-project-create-form__section.eth-form-section,
1453
+ .eth-project-create-form__actions {
1454
+ padding-inline: var(--eth-space-lg);
1455
+ }
1456
+ .eth-project-create-form__grid,
1457
+ .eth-project-create-form__grid--setup {
1458
+ grid-template-columns: minmax(0, 1fr);
1459
+ }
1460
+ .eth-project-create-form__actions {
1461
+ align-items: stretch;
1462
+ flex-direction: column-reverse;
1463
+ }
1464
+ .eth-project-create-form__actions .eth-button {
1465
+ inline-size: 100%;
1466
+ }
1467
+ }
1468
+ @media (max-width: 480px) {
1469
+ .eth-project-activity-timeline__item {
1470
+ grid-template-columns: 1rem minmax(0, 1fr);
1471
+ }
1472
+ .eth-project-activity-timeline__time {
1473
+ grid-column: 2;
1474
+ justify-self: start;
1475
+ }
1476
+ .eth-project-activity-timeline__rail {
1477
+ grid-column: 1;
1478
+ grid-row: 1 / span 2;
1479
+ }
1480
+ .eth-project-activity-timeline__event {
1481
+ grid-column: 2;
1482
+ }
1483
+ }
1484
+ .eth-project-settings-panel {
1485
+ background: var(--eth-color-layer-01);
1486
+ border: 1px solid var(--eth-color-border-subtle);
1487
+ color: var(--eth-color-text-primary);
1488
+ display: grid;
1489
+ inline-size: min(100%, 64rem);
1490
+ min-inline-size: 0;
1491
+ }
1492
+ .eth-project-settings-panel:focus {
1493
+ outline: none;
1494
+ }
1495
+ .eth-project-settings-panel:focus-visible {
1496
+ outline: 2px solid var(--eth-color-focus);
1497
+ outline-offset: -2px;
1498
+ }
1499
+ .eth-project-settings-panel__header {
1500
+ align-items: start;
1501
+ border-block-end: 1px solid var(--eth-color-border-subtle);
1502
+ display: grid;
1503
+ gap: var(--eth-space-xl);
1504
+ grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem);
1505
+ min-inline-size: 0;
1506
+ padding: var(--eth-space-xl);
1507
+ }
1508
+ .eth-project-settings-panel__heading {
1509
+ display: grid;
1510
+ gap: var(--eth-space-sm);
1511
+ min-inline-size: 0;
1512
+ }
1513
+ .eth-project-settings-panel__eyebrow {
1514
+ color: var(--eth-color-text-secondary);
1515
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
1516
+ letter-spacing: 0.04em;
1517
+ line-height: 1.3333;
1518
+ margin: 0;
1519
+ text-transform: uppercase;
1520
+ }
1521
+ .eth-project-settings-panel__heading h2 {
1522
+ color: var(--eth-color-text-primary);
1523
+ font-size: calc(1.75rem * var(--eth-text-scale, 1));
1524
+ font-weight: 400;
1525
+ line-height: 1.2857;
1526
+ margin: 0;
1527
+ }
1528
+ .eth-project-settings-panel__heading p:not(.eth-project-settings-panel__eyebrow) {
1529
+ color: var(--eth-color-text-secondary);
1530
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
1531
+ line-height: 1.4286;
1532
+ margin: 0;
1533
+ max-inline-size: 40rem;
1534
+ }
1535
+ .eth-project-settings-panel__summary {
1536
+ border: 1px solid var(--eth-color-border-subtle);
1537
+ display: grid;
1538
+ grid-template-columns: repeat(3, minmax(0, 1fr));
1539
+ margin: 0;
1540
+ min-inline-size: 0;
1541
+ }
1542
+ .eth-project-settings-panel__summary div {
1543
+ background: var(--eth-color-layer-02);
1544
+ display: grid;
1545
+ gap: var(--eth-space-2xs);
1546
+ min-inline-size: 0;
1547
+ padding: var(--eth-space-sm) var(--eth-space-md);
1548
+ }
1549
+ .eth-project-settings-panel__summary div + div {
1550
+ border-inline-start: 1px solid var(--eth-color-border-subtle);
1551
+ }
1552
+ .eth-project-settings-panel__summary dt,
1553
+ .eth-project-settings-panel__summary dd {
1554
+ margin: 0;
1555
+ min-inline-size: 0;
1556
+ }
1557
+ .eth-project-settings-panel__summary dt {
1558
+ color: var(--eth-color-text-secondary);
1559
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
1560
+ line-height: 1.3333;
1561
+ }
1562
+ .eth-project-settings-panel__summary dd {
1563
+ color: var(--eth-color-text-primary);
1564
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
1565
+ font-weight: 600;
1566
+ line-height: 1.2857;
1567
+ overflow: hidden;
1568
+ text-overflow: ellipsis;
1569
+ white-space: nowrap;
1570
+ }
1571
+ .eth-project-settings-panel__content {
1572
+ display: grid;
1573
+ min-inline-size: 0;
1574
+ }
1575
+ .eth-project-settings-panel .eth-form-section {
1576
+ border-block-start: 0;
1577
+ gap: var(--eth-space-2xl);
1578
+ grid-template-columns: minmax(12rem, 17rem) minmax(0, 1fr);
1579
+ padding: var(--eth-space-xl);
1580
+ }
1581
+ .eth-project-settings-panel .eth-form-section + .eth-form-section {
1582
+ border-block-start: 1px solid var(--eth-color-border-subtle);
1583
+ }
1584
+ .eth-project-settings-panel .eth-form-section__header {
1585
+ display: block;
1586
+ }
1587
+ .eth-project-settings-panel .eth-form-section__body {
1588
+ gap: var(--eth-space-lg);
1589
+ }
1590
+ .eth-project-settings-panel__stack,
1591
+ .eth-project-settings-panel__members {
1592
+ display: grid;
1593
+ gap: var(--eth-space-lg);
1594
+ max-inline-size: 36rem;
1595
+ min-inline-size: 0;
1596
+ }
1597
+ .eth-project-settings-panel__field-grid {
1598
+ display: grid;
1599
+ gap: var(--eth-space-lg);
1600
+ grid-template-columns: repeat(2, minmax(12rem, 1fr));
1601
+ min-inline-size: 0;
1602
+ }
1603
+ .eth-project-settings-panel .cds--text-input-wrapper,
1604
+ .eth-project-settings-panel .cds--select,
1605
+ .eth-project-settings-panel .cds--select-input,
1606
+ .eth-project-settings-panel .cds--text-input,
1607
+ .eth-project-settings-panel .cds--text-area__wrapper,
1608
+ .eth-project-settings-panel .cds--text-area {
1609
+ inline-size: 100%;
1610
+ }
1611
+ .eth-project-settings-panel__member-meta {
1612
+ align-items: center;
1613
+ color: var(--eth-color-text-secondary);
1614
+ display: flex;
1615
+ flex-wrap: wrap;
1616
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
1617
+ gap: var(--eth-space-sm);
1618
+ line-height: 1.3333;
1619
+ }
1620
+ .eth-project-settings-panel__member-meta span + span::before {
1621
+ color: var(--eth-color-border-strong);
1622
+ content: "/";
1623
+ margin-inline-end: var(--eth-space-sm);
1624
+ }
1625
+ .eth-project-settings-panel__member-list {
1626
+ border: 1px solid var(--eth-color-border-subtle);
1627
+ display: grid;
1628
+ min-inline-size: 0;
1629
+ }
1630
+ .eth-project-settings-panel__member-row {
1631
+ align-items: center;
1632
+ background: var(--eth-color-layer-02);
1633
+ display: grid;
1634
+ gap: var(--eth-space-md);
1635
+ grid-template-columns: 2rem minmax(0, 1fr) minmax(9rem, 12rem);
1636
+ min-block-size: 3rem;
1637
+ min-inline-size: 0;
1638
+ padding: var(--eth-space-sm) var(--eth-space-md);
1639
+ }
1640
+ .eth-project-settings-panel__member-row + .eth-project-settings-panel__member-row {
1641
+ border-block-start: 1px solid var(--eth-color-border-subtle);
1642
+ }
1643
+ .eth-project-settings-panel__member-avatar {
1644
+ align-items: center;
1645
+ background: var(--eth-color-layer-selected);
1646
+ color: var(--eth-color-text-primary);
1647
+ display: inline-flex;
1648
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
1649
+ font-weight: 600;
1650
+ block-size: 2rem;
1651
+ inline-size: 2rem;
1652
+ justify-content: center;
1653
+ line-height: 1;
1654
+ }
1655
+ .eth-project-settings-panel__member-main {
1656
+ display: grid;
1657
+ gap: var(--eth-space-2xs);
1658
+ min-inline-size: 0;
1659
+ }
1660
+ .eth-project-settings-panel__member-main strong,
1661
+ .eth-project-settings-panel__member-main span {
1662
+ min-inline-size: 0;
1663
+ overflow: hidden;
1664
+ text-overflow: ellipsis;
1665
+ white-space: nowrap;
1666
+ }
1667
+ .eth-project-settings-panel__member-main strong {
1668
+ color: var(--eth-color-text-primary);
1669
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
1670
+ font-weight: 600;
1671
+ line-height: 1.4286;
1672
+ }
1673
+ .eth-project-settings-panel__member-main span,
1674
+ .eth-project-settings-panel__empty {
1675
+ color: var(--eth-color-text-secondary);
1676
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
1677
+ line-height: 1.3333;
1678
+ }
1679
+ .eth-project-settings-panel__empty {
1680
+ background: var(--eth-color-layer-02);
1681
+ border: 1px solid var(--eth-color-border-subtle);
1682
+ margin: 0;
1683
+ padding: var(--eth-space-lg);
1684
+ }
1685
+ @media (max-width: 58rem) {
1686
+ .eth-project-settings-panel {
1687
+ inline-size: 100%;
1688
+ }
1689
+ .eth-project-settings-panel__header,
1690
+ .eth-project-settings-panel .eth-form-section {
1691
+ grid-template-columns: 1fr;
1692
+ }
1693
+ .eth-project-settings-panel__summary {
1694
+ max-inline-size: 100%;
1695
+ }
1696
+ }
1697
+ @media (max-width: 38rem) {
1698
+ .eth-project-settings-panel__header,
1699
+ .eth-project-settings-panel .eth-form-section {
1700
+ padding: var(--eth-space-lg);
1701
+ }
1702
+ .eth-project-settings-panel__summary,
1703
+ .eth-project-settings-panel__field-grid,
1704
+ .eth-project-settings-panel__member-row {
1705
+ grid-template-columns: 1fr;
1706
+ }
1707
+ .eth-project-settings-panel__summary div + div,
1708
+ .eth-project-settings-panel__member-row + .eth-project-settings-panel__member-row {
1709
+ border-block-start: 1px solid var(--eth-color-border-subtle);
1710
+ border-inline-start: 0;
1711
+ }
1712
+ .eth-project-settings-panel__member-avatar {
1713
+ display: none;
1714
+ }
1715
+ }
1716
+ .eth-project-model-config-panel {
1717
+ background: var(--eth-color-layer-01);
1718
+ border: 1px solid var(--eth-color-border-subtle);
1719
+ color: var(--eth-color-text-primary);
1720
+ display: grid;
1721
+ gap: 0;
1722
+ inline-size: min(100%, 64rem);
1723
+ min-inline-size: 0;
1724
+ }
1725
+ .eth-project-model-config-panel:focus {
1726
+ outline: none;
1727
+ }
1728
+ .eth-project-model-config-panel:focus-visible {
1729
+ outline: 2px solid var(--eth-color-focus);
1730
+ outline-offset: -2px;
1731
+ }
1732
+ .eth-project-model-config-panel__header {
1733
+ align-items: start;
1734
+ background: var(--eth-color-layer-02);
1735
+ border-block-end: 1px solid var(--eth-color-border-subtle);
1736
+ column-gap: var(--eth-space-xl);
1737
+ display: grid;
1738
+ grid-template-columns: minmax(0, 1fr) minmax(20rem, 28rem);
1739
+ min-inline-size: 0;
1740
+ padding: var(--eth-space-xl);
1741
+ row-gap: var(--eth-space-lg);
1742
+ }
1743
+ .eth-project-model-config-panel__heading {
1744
+ min-inline-size: 0;
1745
+ }
1746
+ .eth-project-model-config-panel__heading h3,
1747
+ .eth-project-model-config-panel__parameter-copy h4 {
1748
+ color: var(--eth-color-text-primary);
1749
+ margin: 0;
1750
+ }
1751
+ .eth-project-model-config-panel__heading h3 {
1752
+ font-size: calc(1rem * var(--eth-text-scale, 1));
1753
+ font-weight: 600;
1754
+ line-height: 1.375;
1755
+ }
1756
+ .eth-project-model-config-panel__heading p,
1757
+ .eth-project-model-config-panel__parameter-copy p {
1758
+ color: var(--eth-color-text-secondary);
1759
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
1760
+ line-height: 1.4286;
1761
+ margin: var(--eth-space-xs) 0 0;
1762
+ }
1763
+ .eth-project-model-config-panel__heading p {
1764
+ max-inline-size: 42rem;
1765
+ }
1766
+ .eth-project-model-config-panel__summary {
1767
+ border: 1px solid var(--eth-color-border-subtle);
1768
+ display: grid;
1769
+ grid-template-columns: repeat(3, minmax(0, 1fr));
1770
+ margin: 0;
1771
+ min-inline-size: 0;
1772
+ }
1773
+ .eth-project-model-config-panel__summary div {
1774
+ background: var(--eth-color-layer-01);
1775
+ display: grid;
1776
+ gap: var(--eth-space-2xs);
1777
+ min-inline-size: 0;
1778
+ padding: var(--eth-space-sm) var(--eth-space-md);
1779
+ }
1780
+ .eth-project-model-config-panel__summary div + div {
1781
+ border-inline-start: 1px solid var(--eth-color-border-subtle);
1782
+ }
1783
+ .eth-project-model-config-panel__summary dt,
1784
+ .eth-project-model-config-panel__summary dd,
1785
+ .eth-project-model-config-panel__parameter-meta dt,
1786
+ .eth-project-model-config-panel__parameter-meta dd {
1787
+ margin: 0;
1788
+ }
1789
+ .eth-project-model-config-panel__summary dt,
1790
+ .eth-project-model-config-panel__parameter-meta dt {
1791
+ color: var(--eth-color-text-secondary);
1792
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
1793
+ line-height: 1.3333;
1794
+ }
1795
+ .eth-project-model-config-panel__summary dd,
1796
+ .eth-project-model-config-panel__parameter-meta dd {
1797
+ color: var(--eth-color-text-primary);
1798
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
1799
+ font-variant-numeric: tabular-nums;
1800
+ font-weight: 600;
1801
+ line-height: 1.2857;
1802
+ min-inline-size: 0;
1803
+ overflow: hidden;
1804
+ text-overflow: ellipsis;
1805
+ white-space: nowrap;
1806
+ }
1807
+ .eth-project-model-config-panel__selectors {
1808
+ column-gap: var(--eth-space-lg);
1809
+ display: grid;
1810
+ grid-template-columns: repeat(2, minmax(14rem, 1fr));
1811
+ min-inline-size: 0;
1812
+ padding: var(--eth-space-xl);
1813
+ row-gap: var(--eth-space-lg);
1814
+ }
1815
+ .eth-project-model-config-panel__selectors .eth-form-field,
1816
+ .eth-project-model-config-panel__selectors .cds--select,
1817
+ .eth-project-model-config-panel__selectors .cds--select-input {
1818
+ inline-size: 100%;
1819
+ }
1820
+ .eth-project-model-config-panel__parameters {
1821
+ border-block-start: 1px solid var(--eth-color-border-subtle);
1822
+ display: grid;
1823
+ min-inline-size: 0;
1824
+ }
1825
+ .eth-project-model-config-panel__parameter {
1826
+ align-items: center;
1827
+ border-block-end: 1px solid var(--eth-color-border-subtle);
1828
+ column-gap: var(--eth-space-2xl);
1829
+ display: grid;
1830
+ grid-template-columns: minmax(14rem, 20rem) minmax(20rem, 1fr);
1831
+ min-inline-size: 0;
1832
+ padding: var(--eth-space-xl);
1833
+ row-gap: var(--eth-space-lg);
1834
+ }
1835
+ .eth-project-model-config-panel__parameter:last-child {
1836
+ border-block-end: 0;
1837
+ }
1838
+ .eth-project-model-config-panel__parameter-copy,
1839
+ .eth-project-model-config-panel__parameter-control {
1840
+ min-inline-size: 0;
1841
+ }
1842
+ .eth-project-model-config-panel__parameter-copy h4 {
1843
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
1844
+ font-weight: 600;
1845
+ line-height: 1.2857;
1846
+ }
1847
+ .eth-project-model-config-panel__parameter-copy p {
1848
+ max-inline-size: 28rem;
1849
+ }
1850
+ .eth-project-model-config-panel__parameter-meta {
1851
+ column-gap: var(--eth-space-lg);
1852
+ display: flex;
1853
+ flex-wrap: wrap;
1854
+ margin: var(--eth-space-md) 0 0;
1855
+ row-gap: var(--eth-space-sm);
1856
+ }
1857
+ .eth-project-model-config-panel__parameter-meta div {
1858
+ min-inline-size: 4.75rem;
1859
+ }
1860
+ .eth-project-model-config-panel__parameter-control .cds--slider-container {
1861
+ inline-size: 100%;
1862
+ max-inline-size: none;
1863
+ }
1864
+ .eth-project-model-config-panel__parameter-control .cds--slider {
1865
+ flex: 1 1 auto;
1866
+ max-inline-size: none;
1867
+ }
1868
+ .eth-project-model-config-panel__parameter-control .cds--slider__range-label {
1869
+ color: var(--eth-color-text-secondary);
1870
+ }
1871
+ .eth-project-model-config-panel__parameter-control .eth-number-input {
1872
+ inline-size: min(100%, 14rem);
1873
+ }
1874
+ @media (max-width: 56rem) {
1875
+ .eth-project-model-config-panel__header,
1876
+ .eth-project-model-config-panel__parameter {
1877
+ grid-template-columns: 1fr;
1878
+ }
1879
+ .eth-project-model-config-panel__summary {
1880
+ inline-size: 100%;
1881
+ }
1882
+ }
1883
+ @media (max-width: 42rem) {
1884
+ .eth-project-model-config-panel__header,
1885
+ .eth-project-model-config-panel__selectors,
1886
+ .eth-project-model-config-panel__parameter {
1887
+ padding: var(--eth-space-lg);
1888
+ }
1889
+ .eth-project-model-config-panel__selectors,
1890
+ .eth-project-model-config-panel__summary {
1891
+ grid-template-columns: 1fr;
1892
+ }
1893
+ .eth-project-model-config-panel__summary div + div {
1894
+ border-block-start: 1px solid var(--eth-color-border-subtle);
1895
+ border-inline-start: 0;
1896
+ }
1897
+ }
1898
+ .eth-project-permission-panel {
1899
+ --eth-project-permission-layer: var(--eth-color-layer-01);
1900
+ --eth-project-permission-layer-alt: var(--eth-color-layer-02);
1901
+ --eth-project-permission-layer-hover: var(--eth-color-layer-hover);
1902
+ --eth-project-permission-border: var(--eth-color-border-subtle);
1903
+ --eth-project-permission-text-secondary: var(--eth-color-text-secondary);
1904
+ background: var(--eth-project-permission-layer);
1905
+ border: 1px solid var(--eth-project-permission-border);
1906
+ color: var(--eth-color-text-primary);
1907
+ display: grid;
1908
+ inline-size: 100%;
1909
+ max-inline-size: 64rem;
1910
+ min-inline-size: 0;
1911
+ overflow: hidden;
1912
+ }
1913
+ .eth-project-permission-panel:focus {
1914
+ outline: none;
1915
+ }
1916
+ .eth-project-permission-panel:focus-visible {
1917
+ outline: 2px solid var(--eth-color-focus);
1918
+ outline-offset: -2px;
1919
+ }
1920
+ .eth-project-permission-panel__header {
1921
+ align-items: flex-start;
1922
+ border-block-end: 1px solid var(--eth-project-permission-border);
1923
+ display: flex;
1924
+ gap: var(--eth-space-lg);
1925
+ justify-content: space-between;
1926
+ min-inline-size: 0;
1927
+ padding: var(--eth-space-lg);
1928
+ }
1929
+ .eth-project-permission-panel__heading {
1930
+ display: grid;
1931
+ gap: var(--eth-space-xs);
1932
+ min-inline-size: 0;
1933
+ }
1934
+ .eth-project-permission-panel__heading h3,
1935
+ .eth-project-permission-panel__heading p,
1936
+ .eth-project-permission-panel__summary {
1937
+ margin: 0;
1938
+ }
1939
+ .eth-project-permission-panel__heading h3 {
1940
+ color: var(--eth-color-text-primary);
1941
+ font-size: calc(1.25rem * var(--eth-text-scale, 1));
1942
+ font-weight: 400;
1943
+ line-height: 1.4;
1944
+ }
1945
+ .eth-project-permission-panel__heading p {
1946
+ color: var(--eth-project-permission-text-secondary);
1947
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
1948
+ line-height: 1.4286;
1949
+ }
1950
+ .eth-project-permission-panel__summary {
1951
+ border: 1px solid var(--eth-project-permission-border);
1952
+ display: grid;
1953
+ flex: 0 0 20rem;
1954
+ grid-template-columns: repeat(3, minmax(0, 1fr));
1955
+ }
1956
+ .eth-project-permission-panel__summary div {
1957
+ display: grid;
1958
+ gap: var(--eth-space-2xs);
1959
+ min-inline-size: 0;
1960
+ padding: var(--eth-space-sm) var(--eth-space-md);
1961
+ }
1962
+ .eth-project-permission-panel__summary div + div {
1963
+ border-inline-start: 1px solid var(--eth-project-permission-border);
1964
+ }
1965
+ .eth-project-permission-panel__summary dt,
1966
+ .eth-project-permission-panel__summary dd {
1967
+ min-inline-size: 0;
1968
+ overflow: hidden;
1969
+ text-overflow: ellipsis;
1970
+ white-space: nowrap;
1971
+ }
1972
+ .eth-project-permission-panel__summary dt {
1973
+ color: var(--eth-project-permission-text-secondary);
1974
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
1975
+ line-height: 1.3333;
1976
+ }
1977
+ .eth-project-permission-panel__summary dd {
1978
+ color: var(--eth-color-text-primary);
1979
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
1980
+ font-variant-numeric: tabular-nums;
1981
+ font-weight: 600;
1982
+ line-height: 1.2857;
1983
+ margin: 0;
1984
+ }
1985
+ .eth-project-permission-panel .eth-data-table-wrap {
1986
+ border: 0;
1987
+ inline-size: 100%;
1988
+ min-inline-size: 0;
1989
+ overflow-x: auto;
1990
+ }
1991
+ .eth-project-permission-panel .eth-data-table {
1992
+ background: var(--eth-project-permission-layer);
1993
+ min-inline-size: 42rem;
1994
+ table-layout: fixed;
1995
+ }
1996
+ .eth-project-permission-panel .eth-data-table th,
1997
+ .eth-project-permission-panel .eth-data-table td {
1998
+ border-block-end: 1px solid var(--eth-project-permission-border);
1999
+ min-inline-size: 0;
2000
+ padding: var(--eth-space-sm) var(--eth-space-md);
2001
+ vertical-align: middle;
2002
+ }
2003
+ .eth-project-permission-panel .eth-data-table th {
2004
+ background: var(--eth-project-permission-layer-alt);
2005
+ color: var(--eth-project-permission-text-secondary);
2006
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
2007
+ font-weight: 600;
2008
+ letter-spacing: 0;
2009
+ line-height: 1.3333;
2010
+ white-space: nowrap;
2011
+ }
2012
+ .eth-project-permission-panel .eth-data-table td {
2013
+ color: var(--eth-color-text-primary);
2014
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
2015
+ line-height: 1.4286;
2016
+ }
2017
+ .eth-project-permission-panel .eth-data-table tbody tr:hover {
2018
+ background: var(--eth-project-permission-layer-hover);
2019
+ }
2020
+ .eth-project-permission-panel .eth-data-table tbody tr:last-child td {
2021
+ border-block-end: 0;
2022
+ }
2023
+ .eth-project-permission-panel__subject {
2024
+ color: var(--eth-color-text-primary);
2025
+ font-weight: 600;
2026
+ }
2027
+ .eth-project-permission-panel__resource {
2028
+ color: var(--eth-project-permission-text-secondary);
2029
+ }
2030
+ .eth-project-permission-panel__state {
2031
+ margin: 0;
2032
+ }
2033
+ .eth-project-permission-panel__toggle {
2034
+ align-items: center;
2035
+ display: inline-flex;
2036
+ justify-content: center;
2037
+ margin: 0;
2038
+ min-block-size: 2rem;
2039
+ min-inline-size: 2rem;
2040
+ }
2041
+ .eth-project-permission-panel__toggle .cds--form-item,
2042
+ .eth-project-permission-panel__toggle .cds--checkbox-wrapper {
2043
+ align-items: center;
2044
+ display: inline-flex;
2045
+ margin: 0;
2046
+ }
2047
+ .eth-project-permission-panel__empty {
2048
+ padding: var(--eth-space-lg);
2049
+ }
2050
+ @media (max-width: 42rem) {
2051
+ .eth-project-permission-panel__header {
2052
+ display: grid;
2053
+ }
2054
+ .eth-project-permission-panel__summary {
2055
+ flex-basis: auto;
2056
+ inline-size: 100%;
2057
+ }
2058
+ }
2059
+ /*# sourceMappingURL=index.css.map */