@xeplr/ui-table 1.0.0 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +151 -0
- package/package.json +18 -5
- package/src/XeplrTable.jsx +11 -3
- package/src/actions/ActionsCell.jsx +36 -1
- package/src/index.js +4 -0
- package/src/renderers/_helpers.js +43 -0
- package/src/renderers/avatarName.jsx +31 -0
- package/src/renderers/currency.jsx +25 -0
- package/src/renderers/dateDisplay.jsx +38 -0
- package/src/renderers/index.js +22 -0
- package/src/renderers/link.jsx +24 -0
- package/src/renderers/memberChips.jsx +35 -0
- package/src/renderers/statusBadge.jsx +15 -0
- package/src/renderers/tags.jsx +23 -0
- package/src/renderers/twoLine.jsx +16 -0
- package/src/useTableController.js +12 -1
- package/src/xeplr-table.css +248 -249
package/src/xeplr-table.css
CHANGED
|
@@ -1,10 +1,19 @@
|
|
|
1
|
+
/* Uses @xeplr/ui-account's --xeplr-* theme tokens when available (apply
|
|
2
|
+
.xeplr-theme-light/-dark on an ancestor — see xeplr-ui-account/src/designs/
|
|
3
|
+
theme.css); falls back to this file's original dark palette otherwise.
|
|
4
|
+
(Previously this had a `prefers-color-scheme: light` media block PLUS a
|
|
5
|
+
trailing hardcoded-dark "gold accent" override block that always won the
|
|
6
|
+
cascade regardless of the media query or the app's own theme class — both
|
|
7
|
+
removed in favor of one token-driven system that actually respects
|
|
8
|
+
whatever theme the app explicitly sets.) */
|
|
9
|
+
|
|
1
10
|
/* ── Container ── */
|
|
2
11
|
.xeplr-table-container {
|
|
3
12
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
4
13
|
font-size: 14px;
|
|
5
|
-
color: #e0e0e0;
|
|
6
|
-
background: #1a1a2e;
|
|
7
|
-
border: 1px solid #2a2a4a;
|
|
14
|
+
color: var(--xeplr-text-primary, #e0e0e0);
|
|
15
|
+
background: var(--xeplr-bg-tertiary, #1a1a2e);
|
|
16
|
+
border: 1px solid var(--xeplr-border-primary, #2a2a4a);
|
|
8
17
|
border-radius: 8px;
|
|
9
18
|
overflow: hidden;
|
|
10
19
|
}
|
|
@@ -14,23 +23,23 @@
|
|
|
14
23
|
display: flex;
|
|
15
24
|
gap: 8px;
|
|
16
25
|
padding: 8px 12px;
|
|
17
|
-
border-bottom: 1px solid #2a2a4a;
|
|
18
|
-
background: #16162a;
|
|
26
|
+
border-bottom: 1px solid var(--xeplr-border-primary, #2a2a4a);
|
|
27
|
+
background: var(--xeplr-bg-secondary, #16162a);
|
|
19
28
|
}
|
|
20
29
|
|
|
21
30
|
.xeplr-table-toolbar-btn {
|
|
22
31
|
padding: 4px 12px;
|
|
23
|
-
border: 1px solid #3a3a5a;
|
|
32
|
+
border: 1px solid var(--xeplr-border-secondary, #3a3a5a);
|
|
24
33
|
border-radius: 4px;
|
|
25
34
|
background: transparent;
|
|
26
|
-
color: #a0a0c0;
|
|
35
|
+
color: var(--xeplr-text-secondary, #a0a0c0);
|
|
27
36
|
cursor: pointer;
|
|
28
37
|
font-size: 12px;
|
|
29
38
|
}
|
|
30
39
|
|
|
31
40
|
.xeplr-table-toolbar-btn:hover {
|
|
32
|
-
background: #2a2a4a;
|
|
33
|
-
color: #e0e0e0;
|
|
41
|
+
background: var(--xeplr-bg-hover, #2a2a4a);
|
|
42
|
+
color: var(--xeplr-text-primary, #e0e0e0);
|
|
34
43
|
}
|
|
35
44
|
|
|
36
45
|
/* ── Scroll wrapper ── */
|
|
@@ -48,11 +57,12 @@
|
|
|
48
57
|
/* ── Header ── */
|
|
49
58
|
.xeplr-table-th {
|
|
50
59
|
padding: 0;
|
|
51
|
-
background: #16162a;
|
|
52
|
-
border-bottom: 2px solid #2a2a4a;
|
|
60
|
+
background: var(--xeplr-bg-secondary, #16162a);
|
|
61
|
+
border-bottom: 2px solid var(--xeplr-border-primary, #2a2a4a);
|
|
53
62
|
text-align: left;
|
|
54
63
|
font-weight: 600;
|
|
55
64
|
white-space: nowrap;
|
|
65
|
+
color: var(--xeplr-text-secondary, inherit);
|
|
56
66
|
}
|
|
57
67
|
|
|
58
68
|
.xeplr-table-header-cell {
|
|
@@ -72,28 +82,28 @@
|
|
|
72
82
|
}
|
|
73
83
|
|
|
74
84
|
.xeplr-table-header-label.sortable:hover {
|
|
75
|
-
color: #7c7cff;
|
|
85
|
+
color: var(--xeplr-accent, #7c7cff);
|
|
76
86
|
}
|
|
77
87
|
|
|
78
88
|
.xeplr-table-sort-icon {
|
|
79
89
|
font-size: 10px;
|
|
80
|
-
color: #7c7cff;
|
|
90
|
+
color: var(--xeplr-accent, #7c7cff);
|
|
81
91
|
}
|
|
82
92
|
|
|
83
93
|
/* ── Body ── */
|
|
84
94
|
.xeplr-table-td {
|
|
85
95
|
padding: 8px 12px;
|
|
86
|
-
border-bottom: 1px solid #2a2a4a;
|
|
96
|
+
border-bottom: 1px solid var(--xeplr-border-secondary, #2a2a4a);
|
|
87
97
|
}
|
|
88
98
|
|
|
89
99
|
.xeplr-table-row:hover {
|
|
90
|
-
background: #1e1e3a;
|
|
100
|
+
background: var(--xeplr-bg-hover, #1e1e3a);
|
|
91
101
|
}
|
|
92
102
|
|
|
93
103
|
.xeplr-table-empty {
|
|
94
104
|
padding: 24px;
|
|
95
105
|
text-align: center;
|
|
96
|
-
color: #666;
|
|
106
|
+
color: var(--xeplr-text-muted, #666);
|
|
97
107
|
}
|
|
98
108
|
|
|
99
109
|
/* ── Filter trigger ── */
|
|
@@ -112,18 +122,18 @@
|
|
|
112
122
|
border: none;
|
|
113
123
|
border-radius: 4px;
|
|
114
124
|
background: transparent;
|
|
115
|
-
color: #555;
|
|
125
|
+
color: var(--xeplr-text-muted, #555);
|
|
116
126
|
cursor: pointer;
|
|
117
127
|
}
|
|
118
128
|
|
|
119
129
|
.xeplr-table-filter-trigger:hover {
|
|
120
|
-
background: #2a2a4a;
|
|
121
|
-
color: #a0a0c0;
|
|
130
|
+
background: var(--xeplr-bg-hover, #2a2a4a);
|
|
131
|
+
color: var(--xeplr-text-secondary, #a0a0c0);
|
|
122
132
|
}
|
|
123
133
|
|
|
124
134
|
.xeplr-table-filter-trigger.xeplr-table-filter-active {
|
|
125
|
-
color: #7c7cff;
|
|
126
|
-
background: #2a2a5a;
|
|
135
|
+
color: var(--xeplr-accent, #7c7cff);
|
|
136
|
+
background: var(--xeplr-bg-active, #2a2a5a);
|
|
127
137
|
}
|
|
128
138
|
|
|
129
139
|
/* ── Filter panel ── */
|
|
@@ -134,10 +144,10 @@
|
|
|
134
144
|
z-index: 100;
|
|
135
145
|
min-width: 220px;
|
|
136
146
|
max-width: 300px;
|
|
137
|
-
background: #1e1e38;
|
|
138
|
-
border: 1px solid #3a3a5a;
|
|
147
|
+
background: var(--xeplr-bg-tertiary, #1e1e38);
|
|
148
|
+
border: 1px solid var(--xeplr-border-primary, #3a3a5a);
|
|
139
149
|
border-radius: 6px;
|
|
140
|
-
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
|
|
150
|
+
box-shadow: var(--xeplr-shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.4));
|
|
141
151
|
padding: 8px;
|
|
142
152
|
margin-top: 4px;
|
|
143
153
|
}
|
|
@@ -148,27 +158,27 @@
|
|
|
148
158
|
gap: 6px;
|
|
149
159
|
margin-top: 8px;
|
|
150
160
|
padding-top: 8px;
|
|
151
|
-
border-top: 1px solid #2a2a4a;
|
|
161
|
+
border-top: 1px solid var(--xeplr-border-secondary, #2a2a4a);
|
|
152
162
|
}
|
|
153
163
|
|
|
154
164
|
.xeplr-table-filter-clear-btn,
|
|
155
165
|
.xeplr-table-filter-close-btn {
|
|
156
166
|
padding: 4px 10px;
|
|
157
|
-
border: 1px solid #3a3a5a;
|
|
167
|
+
border: 1px solid var(--xeplr-border-secondary, #3a3a5a);
|
|
158
168
|
border-radius: 4px;
|
|
159
169
|
background: transparent;
|
|
160
|
-
color: #a0a0c0;
|
|
170
|
+
color: var(--xeplr-text-secondary, #a0a0c0);
|
|
161
171
|
cursor: pointer;
|
|
162
172
|
font-size: 12px;
|
|
163
173
|
}
|
|
164
174
|
|
|
165
175
|
.xeplr-table-filter-close-btn {
|
|
166
|
-
background: #3a3a6a;
|
|
167
|
-
color: #e0e0e0;
|
|
176
|
+
background: var(--xeplr-accent-muted, #3a3a6a);
|
|
177
|
+
color: var(--xeplr-text-primary, #e0e0e0);
|
|
168
178
|
}
|
|
169
179
|
|
|
170
|
-
.xeplr-table-filter-clear-btn:hover { background: #2a2a4a; }
|
|
171
|
-
.xeplr-table-filter-close-btn:hover { background: #4a4a7a; }
|
|
180
|
+
.xeplr-table-filter-clear-btn:hover { background: var(--xeplr-bg-hover, #2a2a4a); }
|
|
181
|
+
.xeplr-table-filter-close-btn:hover { background: var(--xeplr-accent-hover, #4a4a7a); }
|
|
172
182
|
|
|
173
183
|
/* ── Shared filter elements ── */
|
|
174
184
|
.xeplr-table-filter-search,
|
|
@@ -177,10 +187,10 @@
|
|
|
177
187
|
width: 100%;
|
|
178
188
|
padding: 6px 8px;
|
|
179
189
|
margin-bottom: 6px;
|
|
180
|
-
border: 1px solid #3a3a5a;
|
|
190
|
+
border: 1px solid var(--xeplr-input-border, #3a3a5a);
|
|
181
191
|
border-radius: 4px;
|
|
182
|
-
background: #141428;
|
|
183
|
-
color: #e0e0e0;
|
|
192
|
+
background: var(--xeplr-input-bg, #141428);
|
|
193
|
+
color: var(--xeplr-input-text, #e0e0e0);
|
|
184
194
|
font-size: 13px;
|
|
185
195
|
box-sizing: border-box;
|
|
186
196
|
}
|
|
@@ -189,7 +199,7 @@
|
|
|
189
199
|
.xeplr-table-filter-input:focus,
|
|
190
200
|
.xeplr-table-filter-operator:focus {
|
|
191
201
|
outline: none;
|
|
192
|
-
border-color: #7c7cff;
|
|
202
|
+
border-color: var(--xeplr-accent, #7c7cff);
|
|
193
203
|
}
|
|
194
204
|
|
|
195
205
|
/* ── String filter ── */
|
|
@@ -202,16 +212,16 @@
|
|
|
202
212
|
.xeplr-table-filter-bulk button {
|
|
203
213
|
flex: 1;
|
|
204
214
|
padding: 3px 0;
|
|
205
|
-
border: 1px solid #3a3a5a;
|
|
215
|
+
border: 1px solid var(--xeplr-border-secondary, #3a3a5a);
|
|
206
216
|
border-radius: 3px;
|
|
207
217
|
background: transparent;
|
|
208
|
-
color: #a0a0c0;
|
|
218
|
+
color: var(--xeplr-text-secondary, #a0a0c0);
|
|
209
219
|
cursor: pointer;
|
|
210
220
|
font-size: 11px;
|
|
211
221
|
}
|
|
212
222
|
|
|
213
223
|
.xeplr-table-filter-bulk button:hover {
|
|
214
|
-
background: #2a2a4a;
|
|
224
|
+
background: var(--xeplr-bg-hover, #2a2a4a);
|
|
215
225
|
}
|
|
216
226
|
|
|
217
227
|
.xeplr-table-filter-list {
|
|
@@ -231,13 +241,13 @@
|
|
|
231
241
|
}
|
|
232
242
|
|
|
233
243
|
.xeplr-table-filter-option:hover {
|
|
234
|
-
background: #2a2a4a;
|
|
244
|
+
background: var(--xeplr-bg-hover, #2a2a4a);
|
|
235
245
|
}
|
|
236
246
|
|
|
237
247
|
.xeplr-table-filter-empty {
|
|
238
248
|
padding: 8px;
|
|
239
249
|
text-align: center;
|
|
240
|
-
color: #666;
|
|
250
|
+
color: var(--xeplr-text-muted, #666);
|
|
241
251
|
font-size: 12px;
|
|
242
252
|
}
|
|
243
253
|
|
|
@@ -251,22 +261,22 @@
|
|
|
251
261
|
.xeplr-table-filter-null-controls button {
|
|
252
262
|
flex: 1;
|
|
253
263
|
padding: 4px 0;
|
|
254
|
-
border: 1px solid #3a3a5a;
|
|
264
|
+
border: 1px solid var(--xeplr-border-secondary, #3a3a5a);
|
|
255
265
|
border-radius: 3px;
|
|
256
266
|
background: transparent;
|
|
257
|
-
color: #a0a0c0;
|
|
267
|
+
color: var(--xeplr-text-secondary, #a0a0c0);
|
|
258
268
|
cursor: pointer;
|
|
259
269
|
font-size: 11px;
|
|
260
270
|
}
|
|
261
271
|
|
|
262
272
|
.xeplr-table-filter-null-controls button:hover {
|
|
263
|
-
background: #2a2a4a;
|
|
273
|
+
background: var(--xeplr-bg-hover, #2a2a4a);
|
|
264
274
|
}
|
|
265
275
|
|
|
266
276
|
.xeplr-table-filter-null-controls button.active {
|
|
267
|
-
background: #3a3a6a;
|
|
268
|
-
color: #7c7cff;
|
|
269
|
-
border-color: #7c7cff;
|
|
277
|
+
background: var(--xeplr-accent-muted, #3a3a6a);
|
|
278
|
+
color: var(--xeplr-accent, #7c7cff);
|
|
279
|
+
border-color: var(--xeplr-accent, #7c7cff);
|
|
270
280
|
}
|
|
271
281
|
|
|
272
282
|
/* ── Boolean filter ── */
|
|
@@ -278,22 +288,22 @@
|
|
|
278
288
|
.xeplr-table-bool-btn {
|
|
279
289
|
flex: 1;
|
|
280
290
|
padding: 6px 0;
|
|
281
|
-
border: 1px solid #3a3a5a;
|
|
291
|
+
border: 1px solid var(--xeplr-border-secondary, #3a3a5a);
|
|
282
292
|
border-radius: 4px;
|
|
283
293
|
background: transparent;
|
|
284
|
-
color: #a0a0c0;
|
|
294
|
+
color: var(--xeplr-text-secondary, #a0a0c0);
|
|
285
295
|
cursor: pointer;
|
|
286
296
|
font-size: 13px;
|
|
287
297
|
}
|
|
288
298
|
|
|
289
299
|
.xeplr-table-bool-btn:hover {
|
|
290
|
-
background: #2a2a4a;
|
|
300
|
+
background: var(--xeplr-bg-hover, #2a2a4a);
|
|
291
301
|
}
|
|
292
302
|
|
|
293
303
|
.xeplr-table-bool-btn.active {
|
|
294
|
-
background: #3a3a6a;
|
|
295
|
-
color: #7c7cff;
|
|
296
|
-
border-color: #7c7cff;
|
|
304
|
+
background: var(--xeplr-accent-muted, #3a3a6a);
|
|
305
|
+
color: var(--xeplr-accent, #7c7cff);
|
|
306
|
+
border-color: var(--xeplr-accent, #7c7cff);
|
|
297
307
|
}
|
|
298
308
|
|
|
299
309
|
/* ── Pagination ── */
|
|
@@ -302,23 +312,23 @@
|
|
|
302
312
|
align-items: center;
|
|
303
313
|
gap: 8px;
|
|
304
314
|
padding: 8px 12px;
|
|
305
|
-
border-top: 1px solid #2a2a4a;
|
|
306
|
-
background: #16162a;
|
|
315
|
+
border-top: 1px solid var(--xeplr-border-primary, #2a2a4a);
|
|
316
|
+
background: var(--xeplr-bg-secondary, #16162a);
|
|
307
317
|
font-size: 13px;
|
|
308
318
|
}
|
|
309
319
|
|
|
310
320
|
.xeplr-table-pagination button {
|
|
311
321
|
padding: 4px 8px;
|
|
312
|
-
border: 1px solid #3a3a5a;
|
|
322
|
+
border: 1px solid var(--xeplr-border-secondary, #3a3a5a);
|
|
313
323
|
border-radius: 4px;
|
|
314
324
|
background: transparent;
|
|
315
|
-
color: #a0a0c0;
|
|
325
|
+
color: var(--xeplr-text-secondary, #a0a0c0);
|
|
316
326
|
cursor: pointer;
|
|
317
327
|
}
|
|
318
328
|
|
|
319
329
|
.xeplr-table-pagination button:hover:not(:disabled) {
|
|
320
|
-
background: #2a2a4a;
|
|
321
|
-
color: #e0e0e0;
|
|
330
|
+
background: var(--xeplr-bg-hover, #2a2a4a);
|
|
331
|
+
color: var(--xeplr-text-primary, #e0e0e0);
|
|
322
332
|
}
|
|
323
333
|
|
|
324
334
|
.xeplr-table-pagination button:disabled {
|
|
@@ -327,20 +337,20 @@
|
|
|
327
337
|
}
|
|
328
338
|
|
|
329
339
|
.xeplr-table-page-info {
|
|
330
|
-
color: #a0a0c0;
|
|
340
|
+
color: var(--xeplr-text-secondary, #a0a0c0);
|
|
331
341
|
}
|
|
332
342
|
|
|
333
343
|
.xeplr-table-page-size {
|
|
334
344
|
padding: 3px 6px;
|
|
335
|
-
border: 1px solid #3a3a5a;
|
|
345
|
+
border: 1px solid var(--xeplr-input-border, #3a3a5a);
|
|
336
346
|
border-radius: 4px;
|
|
337
|
-
background: #141428;
|
|
338
|
-
color: #e0e0e0;
|
|
347
|
+
background: var(--xeplr-input-bg, #141428);
|
|
348
|
+
color: var(--xeplr-input-text, #e0e0e0);
|
|
339
349
|
font-size: 12px;
|
|
340
350
|
}
|
|
341
351
|
|
|
342
352
|
.xeplr-table-row-count {
|
|
343
|
-
color: #666;
|
|
353
|
+
color: var(--xeplr-text-muted, #666);
|
|
344
354
|
margin-left: auto;
|
|
345
355
|
}
|
|
346
356
|
|
|
@@ -354,7 +364,7 @@
|
|
|
354
364
|
}
|
|
355
365
|
|
|
356
366
|
.xeplr-table-filter-list::-webkit-scrollbar-thumb {
|
|
357
|
-
background: #3a3a5a;
|
|
367
|
+
background: var(--xeplr-border-secondary, #3a3a5a);
|
|
358
368
|
border-radius: 3px;
|
|
359
369
|
}
|
|
360
370
|
|
|
@@ -376,26 +386,26 @@
|
|
|
376
386
|
border: none;
|
|
377
387
|
border-radius: 4px;
|
|
378
388
|
background: transparent;
|
|
379
|
-
color: #666;
|
|
389
|
+
color: var(--xeplr-text-muted, #666);
|
|
380
390
|
cursor: pointer;
|
|
381
391
|
font-size: 12px;
|
|
382
392
|
transition: transform 0.15s;
|
|
383
393
|
}
|
|
384
394
|
|
|
385
395
|
.xeplr-table-expand-btn:hover {
|
|
386
|
-
background: #2a2a4a;
|
|
387
|
-
color: #a0a0c0;
|
|
396
|
+
background: var(--xeplr-bg-hover, #2a2a4a);
|
|
397
|
+
color: var(--xeplr-text-secondary, #a0a0c0);
|
|
388
398
|
}
|
|
389
399
|
|
|
390
400
|
.xeplr-table-expand-btn.expanded {
|
|
391
401
|
transform: rotate(90deg);
|
|
392
|
-
color: #7c7cff;
|
|
402
|
+
color: var(--xeplr-accent, #7c7cff);
|
|
393
403
|
}
|
|
394
404
|
|
|
395
405
|
/* ── Expanded child row ── */
|
|
396
406
|
.xeplr-table-row-expanded > td {
|
|
397
407
|
padding: 0;
|
|
398
|
-
background: #141428;
|
|
408
|
+
background: var(--xeplr-bg-secondary, #141428);
|
|
399
409
|
}
|
|
400
410
|
|
|
401
411
|
.xeplr-table-td-expanded {
|
|
@@ -404,7 +414,7 @@
|
|
|
404
414
|
|
|
405
415
|
.xeplr-table-child-container {
|
|
406
416
|
padding: 12px 16px 12px 48px;
|
|
407
|
-
border-bottom: 2px solid #2a2a4a;
|
|
417
|
+
border-bottom: 2px solid var(--xeplr-border-primary, #2a2a4a);
|
|
408
418
|
}
|
|
409
419
|
|
|
410
420
|
.xeplr-table-child-header {
|
|
@@ -417,7 +427,7 @@
|
|
|
417
427
|
.xeplr-table-child-title {
|
|
418
428
|
font-size: 13px;
|
|
419
429
|
font-weight: 600;
|
|
420
|
-
color: #a0a0c0;
|
|
430
|
+
color: var(--xeplr-text-secondary, #a0a0c0);
|
|
421
431
|
text-transform: uppercase;
|
|
422
432
|
letter-spacing: 0.5px;
|
|
423
433
|
}
|
|
@@ -428,7 +438,7 @@
|
|
|
428
438
|
}
|
|
429
439
|
|
|
430
440
|
.xeplr-table-child {
|
|
431
|
-
border: 1px solid #2a2a4a;
|
|
441
|
+
border: 1px solid var(--xeplr-border-primary, #2a2a4a);
|
|
432
442
|
border-radius: 6px;
|
|
433
443
|
overflow: hidden;
|
|
434
444
|
}
|
|
@@ -439,23 +449,23 @@
|
|
|
439
449
|
}
|
|
440
450
|
|
|
441
451
|
.xeplr-table-toolbar-btn-add {
|
|
442
|
-
color: #7c7cff;
|
|
443
|
-
border-color: #7c7cff;
|
|
452
|
+
color: var(--xeplr-accent, #7c7cff);
|
|
453
|
+
border-color: var(--xeplr-accent, #7c7cff);
|
|
444
454
|
}
|
|
445
455
|
|
|
446
456
|
.xeplr-table-toolbar-btn-add:hover {
|
|
447
|
-
background: #2a2a5a;
|
|
448
|
-
color: #9d9dff;
|
|
457
|
+
background: var(--xeplr-bg-active, #2a2a5a);
|
|
458
|
+
color: var(--xeplr-accent-hover, #9d9dff);
|
|
449
459
|
}
|
|
450
460
|
|
|
451
461
|
.xeplr-table-toolbar-btn-delete {
|
|
452
|
-
color: #ff6b6b;
|
|
453
|
-
border-color: #ff6b6b;
|
|
462
|
+
color: var(--xeplr-danger, #ff6b6b);
|
|
463
|
+
border-color: var(--xeplr-danger, #ff6b6b);
|
|
454
464
|
}
|
|
455
465
|
|
|
456
466
|
.xeplr-table-toolbar-btn-delete:hover {
|
|
457
|
-
background: #3a1a1a;
|
|
458
|
-
color: #ff8a8a;
|
|
467
|
+
background: var(--xeplr-danger-bg, #3a1a1a);
|
|
468
|
+
color: var(--xeplr-danger, #ff8a8a);
|
|
459
469
|
}
|
|
460
470
|
|
|
461
471
|
.xeplr-table-toolbar-btn-delete:disabled {
|
|
@@ -471,13 +481,13 @@
|
|
|
471
481
|
}
|
|
472
482
|
|
|
473
483
|
.xeplr-table-toolbar-btn-commit {
|
|
474
|
-
color: #66bb6a;
|
|
475
|
-
border-color: #66bb6a;
|
|
484
|
+
color: var(--xeplr-success, #66bb6a);
|
|
485
|
+
border-color: var(--xeplr-success, #66bb6a);
|
|
476
486
|
}
|
|
477
487
|
|
|
478
488
|
.xeplr-table-toolbar-btn-commit:hover {
|
|
479
|
-
background: #1a3a1a;
|
|
480
|
-
color: #81c784;
|
|
489
|
+
background: var(--xeplr-success-bg, #1a3a1a);
|
|
490
|
+
color: var(--xeplr-success, #81c784);
|
|
481
491
|
}
|
|
482
492
|
|
|
483
493
|
.xeplr-table-toolbar-btn-commit:disabled {
|
|
@@ -486,13 +496,13 @@
|
|
|
486
496
|
}
|
|
487
497
|
|
|
488
498
|
.xeplr-table-toolbar-btn-discard {
|
|
489
|
-
color: #ff9800;
|
|
490
|
-
border-color: #ff9800;
|
|
499
|
+
color: var(--xeplr-warning, #ff9800);
|
|
500
|
+
border-color: var(--xeplr-warning, #ff9800);
|
|
491
501
|
}
|
|
492
502
|
|
|
493
503
|
.xeplr-table-toolbar-btn-discard:hover {
|
|
494
|
-
background: #3a2a0a;
|
|
495
|
-
color: #ffb74d;
|
|
504
|
+
background: var(--xeplr-warning-bg, #3a2a0a);
|
|
505
|
+
color: var(--xeplr-warning, #ffb74d);
|
|
496
506
|
}
|
|
497
507
|
|
|
498
508
|
.xeplr-table-toolbar-btn-discard:disabled {
|
|
@@ -502,11 +512,11 @@
|
|
|
502
512
|
|
|
503
513
|
/* ── Row status indicators ── */
|
|
504
514
|
.xeplr-table-row-new {
|
|
505
|
-
border-left: 3px solid #66bb6a;
|
|
515
|
+
border-left: 3px solid var(--xeplr-success, #66bb6a);
|
|
506
516
|
}
|
|
507
517
|
|
|
508
518
|
.xeplr-table-row-edited {
|
|
509
|
-
border-left: 3px solid #ffc107;
|
|
519
|
+
border-left: 3px solid var(--xeplr-warning, #ffc107);
|
|
510
520
|
}
|
|
511
521
|
|
|
512
522
|
/* ── Checkbox column ── */
|
|
@@ -520,11 +530,11 @@
|
|
|
520
530
|
width: 16px;
|
|
521
531
|
height: 16px;
|
|
522
532
|
cursor: pointer;
|
|
523
|
-
accent-color: #7c7cff;
|
|
533
|
+
accent-color: var(--xeplr-accent, #7c7cff);
|
|
524
534
|
}
|
|
525
535
|
|
|
526
536
|
.xeplr-table-row-selected {
|
|
527
|
-
background: #1e1e3a;
|
|
537
|
+
background: var(--xeplr-bg-active, #1e1e3a);
|
|
528
538
|
}
|
|
529
539
|
|
|
530
540
|
/* ── Actions column ── */
|
|
@@ -553,19 +563,44 @@
|
|
|
553
563
|
border: 1px solid transparent;
|
|
554
564
|
border-radius: 4px;
|
|
555
565
|
background: transparent;
|
|
556
|
-
color: #666;
|
|
566
|
+
color: var(--xeplr-text-muted, #666);
|
|
557
567
|
cursor: pointer;
|
|
558
568
|
}
|
|
559
569
|
|
|
560
570
|
.xeplr-table-action-btn:hover {
|
|
561
|
-
border-color: #3a3a5a;
|
|
562
|
-
background: #2a2a4a;
|
|
571
|
+
border-color: var(--xeplr-border-secondary, #3a3a5a);
|
|
572
|
+
background: var(--xeplr-bg-hover, #2a2a4a);
|
|
573
|
+
}
|
|
574
|
+
|
|
575
|
+
.xeplr-table-action-view:hover { color: var(--xeplr-accent, #7c7cff); }
|
|
576
|
+
.xeplr-table-action-copy:hover { color: var(--xeplr-text-secondary, #a0a0c0); }
|
|
577
|
+
.xeplr-table-action-edit:hover { color: var(--xeplr-warning, #ffc107); }
|
|
578
|
+
.xeplr-table-action-delete:hover { color: var(--xeplr-danger, #ff6b6b); }
|
|
579
|
+
|
|
580
|
+
.xeplr-table-action-btn:disabled {
|
|
581
|
+
opacity: 0.5;
|
|
582
|
+
cursor: not-allowed;
|
|
583
|
+
}
|
|
584
|
+
|
|
585
|
+
/* ── Custom row actions (props.rowActions) — text-label buttons, e.g. Rollback/Delete ── */
|
|
586
|
+
.xeplr-table-action-label {
|
|
587
|
+
width: auto;
|
|
588
|
+
height: auto;
|
|
589
|
+
padding: 4px 10px;
|
|
590
|
+
font-size: 12px;
|
|
591
|
+
font-weight: 600;
|
|
592
|
+
white-space: nowrap;
|
|
563
593
|
}
|
|
564
594
|
|
|
565
|
-
.xeplr-table-action-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
595
|
+
.xeplr-table-action-danger {
|
|
596
|
+
border-color: var(--xeplr-danger, #ff6b6b);
|
|
597
|
+
color: var(--xeplr-danger, #ff6b6b);
|
|
598
|
+
}
|
|
599
|
+
|
|
600
|
+
.xeplr-table-action-danger:hover:not(:disabled) {
|
|
601
|
+
background: var(--xeplr-danger-bg, #3a1a1a);
|
|
602
|
+
color: var(--xeplr-danger, #ff8a8a);
|
|
603
|
+
}
|
|
569
604
|
|
|
570
605
|
/* ── Modal overlay ── */
|
|
571
606
|
.xeplr-table-modal-overlay {
|
|
@@ -578,7 +613,7 @@
|
|
|
578
613
|
display: flex;
|
|
579
614
|
align-items: center;
|
|
580
615
|
justify-content: center;
|
|
581
|
-
background: rgba(0, 0, 0, 0.6);
|
|
616
|
+
background: var(--xeplr-bg-overlay, rgba(0, 0, 0, 0.6));
|
|
582
617
|
}
|
|
583
618
|
|
|
584
619
|
.xeplr-table-modal {
|
|
@@ -587,10 +622,10 @@
|
|
|
587
622
|
max-height: 85vh;
|
|
588
623
|
display: flex;
|
|
589
624
|
flex-direction: column;
|
|
590
|
-
background: #1e1e38;
|
|
591
|
-
border: 1px solid #3a3a5a;
|
|
625
|
+
background: var(--xeplr-bg-tertiary, #1e1e38);
|
|
626
|
+
border: 1px solid var(--xeplr-border-primary, #3a3a5a);
|
|
592
627
|
border-radius: 10px;
|
|
593
|
-
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
|
|
628
|
+
box-shadow: var(--xeplr-shadow-lg, 0 12px 40px rgba(0, 0, 0, 0.5));
|
|
594
629
|
}
|
|
595
630
|
|
|
596
631
|
.xeplr-table-modal-header {
|
|
@@ -598,13 +633,13 @@
|
|
|
598
633
|
align-items: center;
|
|
599
634
|
justify-content: space-between;
|
|
600
635
|
padding: 14px 20px;
|
|
601
|
-
border-bottom: 1px solid #2a2a4a;
|
|
636
|
+
border-bottom: 1px solid var(--xeplr-border-secondary, #2a2a4a);
|
|
602
637
|
}
|
|
603
638
|
|
|
604
639
|
.xeplr-table-modal-title {
|
|
605
640
|
font-size: 16px;
|
|
606
641
|
font-weight: 600;
|
|
607
|
-
color: #e0e0e0;
|
|
642
|
+
color: var(--xeplr-text-primary, #e0e0e0);
|
|
608
643
|
}
|
|
609
644
|
|
|
610
645
|
.xeplr-table-modal-close {
|
|
@@ -617,13 +652,13 @@
|
|
|
617
652
|
border: none;
|
|
618
653
|
border-radius: 4px;
|
|
619
654
|
background: transparent;
|
|
620
|
-
color: #666;
|
|
655
|
+
color: var(--xeplr-text-muted, #666);
|
|
621
656
|
cursor: pointer;
|
|
622
657
|
}
|
|
623
658
|
|
|
624
659
|
.xeplr-table-modal-close:hover {
|
|
625
|
-
background: #2a2a4a;
|
|
626
|
-
color: #e0e0e0;
|
|
660
|
+
background: var(--xeplr-bg-hover, #2a2a4a);
|
|
661
|
+
color: var(--xeplr-text-primary, #e0e0e0);
|
|
627
662
|
}
|
|
628
663
|
|
|
629
664
|
.xeplr-table-modal-body {
|
|
@@ -641,7 +676,7 @@
|
|
|
641
676
|
margin-bottom: 4px;
|
|
642
677
|
font-size: 12px;
|
|
643
678
|
font-weight: 600;
|
|
644
|
-
color: #a0a0c0;
|
|
679
|
+
color: var(--xeplr-text-secondary, #a0a0c0);
|
|
645
680
|
text-transform: uppercase;
|
|
646
681
|
letter-spacing: 0.5px;
|
|
647
682
|
}
|
|
@@ -652,8 +687,8 @@
|
|
|
652
687
|
padding: 1px 5px;
|
|
653
688
|
font-size: 9px;
|
|
654
689
|
font-weight: 700;
|
|
655
|
-
color: #7c7cff;
|
|
656
|
-
border: 1px solid #7c7cff;
|
|
690
|
+
color: var(--xeplr-accent, #7c7cff);
|
|
691
|
+
border: 1px solid var(--xeplr-accent, #7c7cff);
|
|
657
692
|
border-radius: 3px;
|
|
658
693
|
vertical-align: middle;
|
|
659
694
|
text-transform: uppercase;
|
|
@@ -662,17 +697,17 @@
|
|
|
662
697
|
.xeplr-table-modal-input {
|
|
663
698
|
width: 100%;
|
|
664
699
|
padding: 8px 10px;
|
|
665
|
-
border: 1px solid #3a3a5a;
|
|
700
|
+
border: 1px solid var(--xeplr-input-border, #3a3a5a);
|
|
666
701
|
border-radius: 5px;
|
|
667
|
-
background: #141428;
|
|
668
|
-
color: #e0e0e0;
|
|
702
|
+
background: var(--xeplr-input-bg, #141428);
|
|
703
|
+
color: var(--xeplr-input-text, #e0e0e0);
|
|
669
704
|
font-size: 14px;
|
|
670
705
|
box-sizing: border-box;
|
|
671
706
|
}
|
|
672
707
|
|
|
673
708
|
.xeplr-table-modal-input:focus {
|
|
674
709
|
outline: none;
|
|
675
|
-
border-color: #7c7cff;
|
|
710
|
+
border-color: var(--xeplr-accent, #7c7cff);
|
|
676
711
|
}
|
|
677
712
|
|
|
678
713
|
.xeplr-table-modal-input:disabled {
|
|
@@ -683,7 +718,7 @@
|
|
|
683
718
|
.xeplr-table-modal-checkbox {
|
|
684
719
|
width: 18px;
|
|
685
720
|
height: 18px;
|
|
686
|
-
accent-color: #7c7cff;
|
|
721
|
+
accent-color: var(--xeplr-accent, #7c7cff);
|
|
687
722
|
}
|
|
688
723
|
|
|
689
724
|
.xeplr-table-modal-footer {
|
|
@@ -692,33 +727,33 @@
|
|
|
692
727
|
justify-content: flex-end;
|
|
693
728
|
padding-top: 16px;
|
|
694
729
|
margin-top: 4px;
|
|
695
|
-
border-top: 1px solid #2a2a4a;
|
|
730
|
+
border-top: 1px solid var(--xeplr-border-secondary, #2a2a4a);
|
|
696
731
|
}
|
|
697
732
|
|
|
698
733
|
.xeplr-table-modal-btn {
|
|
699
734
|
padding: 8px 18px;
|
|
700
|
-
border: 1px solid #3a3a5a;
|
|
735
|
+
border: 1px solid var(--xeplr-border-secondary, #3a3a5a);
|
|
701
736
|
border-radius: 5px;
|
|
702
737
|
background: transparent;
|
|
703
|
-
color: #a0a0c0;
|
|
738
|
+
color: var(--xeplr-text-secondary, #a0a0c0);
|
|
704
739
|
cursor: pointer;
|
|
705
740
|
font-size: 13px;
|
|
706
741
|
font-weight: 500;
|
|
707
742
|
}
|
|
708
743
|
|
|
709
744
|
.xeplr-table-modal-btn:hover {
|
|
710
|
-
background: #2a2a4a;
|
|
711
|
-
color: #e0e0e0;
|
|
745
|
+
background: var(--xeplr-bg-hover, #2a2a4a);
|
|
746
|
+
color: var(--xeplr-text-primary, #e0e0e0);
|
|
712
747
|
}
|
|
713
748
|
|
|
714
749
|
.xeplr-table-modal-btn-primary {
|
|
715
|
-
background: #7c7cff;
|
|
716
|
-
color: #fff;
|
|
717
|
-
border-color: #7c7cff;
|
|
750
|
+
background: var(--xeplr-accent, #7c7cff);
|
|
751
|
+
color: var(--xeplr-accent-text, #fff);
|
|
752
|
+
border-color: var(--xeplr-accent, #7c7cff);
|
|
718
753
|
}
|
|
719
754
|
|
|
720
755
|
.xeplr-table-modal-btn-primary:hover {
|
|
721
|
-
background: #6a6aee;
|
|
756
|
+
background: var(--xeplr-accent-hover, #6a6aee);
|
|
722
757
|
}
|
|
723
758
|
|
|
724
759
|
.xeplr-table-modal-btn-primary:disabled {
|
|
@@ -732,7 +767,7 @@
|
|
|
732
767
|
}
|
|
733
768
|
|
|
734
769
|
.xeplr-table-row-clickable:hover {
|
|
735
|
-
background: #1e1e3a;
|
|
770
|
+
background: var(--xeplr-bg-hover, #1e1e3a);
|
|
736
771
|
}
|
|
737
772
|
|
|
738
773
|
/* ── Detail popup ── */
|
|
@@ -742,10 +777,10 @@
|
|
|
742
777
|
max-height: 90vh;
|
|
743
778
|
display: flex;
|
|
744
779
|
flex-direction: column;
|
|
745
|
-
background: #1e1e38;
|
|
746
|
-
border: 1px solid #3a3a5a;
|
|
780
|
+
background: var(--xeplr-bg-tertiary, #1e1e38);
|
|
781
|
+
border: 1px solid var(--xeplr-border-primary, #3a3a5a);
|
|
747
782
|
border-radius: 10px;
|
|
748
|
-
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
|
|
783
|
+
box-shadow: var(--xeplr-shadow-lg, 0 16px 48px rgba(0, 0, 0, 0.6));
|
|
749
784
|
}
|
|
750
785
|
|
|
751
786
|
.xeplr-table-detail-body {
|
|
@@ -770,14 +805,14 @@
|
|
|
770
805
|
.xeplr-table-detail-label {
|
|
771
806
|
font-size: 11px;
|
|
772
807
|
font-weight: 600;
|
|
773
|
-
color: #666;
|
|
808
|
+
color: var(--xeplr-text-muted, #666);
|
|
774
809
|
text-transform: uppercase;
|
|
775
810
|
letter-spacing: 0.5px;
|
|
776
811
|
}
|
|
777
812
|
|
|
778
813
|
.xeplr-table-detail-value {
|
|
779
814
|
font-size: 14px;
|
|
780
|
-
color: #e0e0e0;
|
|
815
|
+
color: var(--xeplr-text-primary, #e0e0e0);
|
|
781
816
|
padding: 6px 0;
|
|
782
817
|
}
|
|
783
818
|
|
|
@@ -786,128 +821,92 @@
|
|
|
786
821
|
gap: 8px;
|
|
787
822
|
margin-bottom: 20px;
|
|
788
823
|
padding-bottom: 16px;
|
|
789
|
-
border-bottom: 1px solid #2a2a4a;
|
|
824
|
+
border-bottom: 1px solid var(--xeplr-border-secondary, #2a2a4a);
|
|
790
825
|
}
|
|
791
826
|
|
|
792
827
|
.xeplr-table-detail-children {
|
|
793
828
|
margin-top: 8px;
|
|
794
829
|
}
|
|
795
830
|
|
|
796
|
-
/*
|
|
797
|
-
|
|
798
|
-
|
|
799
|
-
|
|
800
|
-
|
|
801
|
-
|
|
802
|
-
|
|
803
|
-
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
|
|
811
|
-
.xeplr-table-th { border-bottom-color: #d0d0d0; }
|
|
812
|
-
.xeplr-table-td { border-bottom-color: #eee; }
|
|
813
|
-
.xeplr-table-pagination { border-top-color: #e0e0e0; }
|
|
814
|
-
.xeplr-table-row:hover { background: #f5f5ff; }
|
|
815
|
-
|
|
816
|
-
.xeplr-table-toolbar-btn,
|
|
817
|
-
.xeplr-table-filter-clear-btn,
|
|
818
|
-
.xeplr-table-pagination button,
|
|
819
|
-
.xeplr-table-filter-bulk button,
|
|
820
|
-
.xeplr-table-filter-null-controls button,
|
|
821
|
-
.xeplr-table-bool-btn {
|
|
822
|
-
border-color: #d0d0d0;
|
|
823
|
-
color: #666;
|
|
824
|
-
}
|
|
825
|
-
|
|
826
|
-
.xeplr-table-filter-close-btn {
|
|
827
|
-
background: #e8e8f0;
|
|
828
|
-
color: #333;
|
|
829
|
-
}
|
|
830
|
-
|
|
831
|
-
.xeplr-table-filter-panel {
|
|
832
|
-
background: #fff;
|
|
833
|
-
border-color: #d0d0d0;
|
|
834
|
-
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
|
|
835
|
-
}
|
|
836
|
-
|
|
837
|
-
.xeplr-table-filter-search,
|
|
838
|
-
.xeplr-table-filter-input,
|
|
839
|
-
.xeplr-table-filter-operator,
|
|
840
|
-
.xeplr-table-page-size {
|
|
841
|
-
background: #f8f8fa;
|
|
842
|
-
border-color: #d0d0d0;
|
|
843
|
-
color: #333;
|
|
844
|
-
}
|
|
845
|
-
|
|
846
|
-
.xeplr-table-filter-trigger { color: #bbb; }
|
|
847
|
-
.xeplr-table-filter-trigger:hover { background: #f0f0f0; color: #666; }
|
|
848
|
-
.xeplr-table-filter-trigger.xeplr-table-filter-active { color: #5555dd; background: #ededff; }
|
|
849
|
-
|
|
850
|
-
.xeplr-table-header-label.sortable:hover { color: #5555dd; }
|
|
851
|
-
.xeplr-table-sort-icon { color: #5555dd; }
|
|
852
|
-
|
|
853
|
-
.xeplr-table-bool-btn.active,
|
|
854
|
-
.xeplr-table-filter-null-controls button.active {
|
|
855
|
-
background: #ededff;
|
|
856
|
-
color: #5555dd;
|
|
857
|
-
border-color: #5555dd;
|
|
858
|
-
}
|
|
859
|
-
|
|
860
|
-
/* Detail popup */
|
|
861
|
-
.xeplr-table-detail { background: #fff; border-color: #d0d0d0; box-shadow: 0 16px 48px rgba(0,0,0,0.15); }
|
|
862
|
-
.xeplr-table-detail-label { color: #999; }
|
|
863
|
-
.xeplr-table-detail-value { color: #333; }
|
|
864
|
-
.xeplr-table-detail-actions { border-bottom-color: #e0e0e0; }
|
|
865
|
-
.xeplr-table-row-clickable:hover { background: #f5f5ff; }
|
|
866
|
-
|
|
867
|
-
/* Expand / child table */
|
|
868
|
-
.xeplr-table-expand-btn:hover { background: #f0f0f0; color: #666; }
|
|
869
|
-
.xeplr-table-expand-btn.expanded { color: #5555dd; }
|
|
870
|
-
.xeplr-table-row-expanded > td { background: #f8f8fa; }
|
|
871
|
-
.xeplr-table-child-container { border-bottom-color: #e0e0e0; }
|
|
872
|
-
.xeplr-table-child-title { color: #666; }
|
|
873
|
-
.xeplr-table-child { border-color: #e0e0e0; }
|
|
874
|
-
|
|
875
|
-
/* Commit / discard */
|
|
876
|
-
.xeplr-table-toolbar-btn-commit { color: #2e7d32; border-color: #2e7d32; }
|
|
877
|
-
.xeplr-table-toolbar-btn-commit:hover { background: #e8f5e9; }
|
|
878
|
-
.xeplr-table-toolbar-btn-discard { color: #e65100; border-color: #e65100; }
|
|
879
|
-
.xeplr-table-toolbar-btn-discard:hover { background: #fff3e0; }
|
|
880
|
-
.xeplr-table-row-new { border-left-color: #2e7d32; }
|
|
881
|
-
.xeplr-table-row-edited { border-left-color: #f57f17; }
|
|
882
|
-
|
|
883
|
-
/* Actions */
|
|
884
|
-
.xeplr-table-toolbar-btn-add { color: #5555dd; border-color: #5555dd; }
|
|
885
|
-
.xeplr-table-toolbar-btn-add:hover { background: #ededff; }
|
|
886
|
-
.xeplr-table-toolbar-btn-delete { color: #d32f2f; border-color: #d32f2f; }
|
|
887
|
-
.xeplr-table-toolbar-btn-delete:hover { background: #ffebee; }
|
|
888
|
-
|
|
889
|
-
.xeplr-table-checkbox { accent-color: #5555dd; }
|
|
890
|
-
.xeplr-table-row-selected { background: #f5f5ff; }
|
|
891
|
-
|
|
892
|
-
.xeplr-table-action-btn:hover { border-color: #d0d0d0; background: #f5f5f5; }
|
|
893
|
-
.xeplr-table-action-view:hover { color: #5555dd; }
|
|
894
|
-
.xeplr-table-action-edit:hover { color: #f57f17; }
|
|
895
|
-
.xeplr-table-action-delete:hover { color: #d32f2f; }
|
|
896
|
-
|
|
897
|
-
/* Modal */
|
|
898
|
-
.xeplr-table-modal { background: #fff; border-color: #d0d0d0; box-shadow: 0 12px 40px rgba(0,0,0,0.15); }
|
|
899
|
-
.xeplr-table-modal-overlay { background: rgba(0,0,0,0.3); }
|
|
900
|
-
.xeplr-table-modal-header { border-bottom-color: #e0e0e0; }
|
|
901
|
-
.xeplr-table-modal-title { color: #333; }
|
|
902
|
-
.xeplr-table-modal-close:hover { background: #f0f0f0; color: #333; }
|
|
903
|
-
.xeplr-table-modal-label { color: #666; }
|
|
904
|
-
.xeplr-table-modal-id-badge { color: #5555dd; border-color: #5555dd; }
|
|
905
|
-
.xeplr-table-modal-input { background: #f8f8fa; border-color: #d0d0d0; color: #333; }
|
|
906
|
-
.xeplr-table-modal-input:focus { border-color: #5555dd; }
|
|
907
|
-
.xeplr-table-modal-footer { border-top-color: #e0e0e0; }
|
|
908
|
-
.xeplr-table-modal-btn { border-color: #d0d0d0; color: #666; }
|
|
909
|
-
.xeplr-table-modal-btn:hover { background: #f0f0f0; color: #333; }
|
|
910
|
-
.xeplr-table-modal-btn-primary { background: #5555dd; color: #fff; border-color: #5555dd; }
|
|
911
|
-
.xeplr-table-modal-btn-primary:hover { background: #4444cc; }
|
|
912
|
-
.xeplr-table-modal-checkbox { accent-color: #5555dd; }
|
|
831
|
+
/* ─────────────────────────────────────────────────────────────────
|
|
832
|
+
* Cell renderers (config-driven). Used when a column declares
|
|
833
|
+
* `render: { type: '...' }` instead of a custom cell function.
|
|
834
|
+
* ───────────────────────────────────────────────────────────────── */
|
|
835
|
+
|
|
836
|
+
/* avatarName ── avatar + bold name + optional subtitle */
|
|
837
|
+
.xeplr-r-avatarname {
|
|
838
|
+
display: flex; gap: 10px; align-items: center;
|
|
839
|
+
}
|
|
840
|
+
.xeplr-r-avatarname-sm .xeplr-r-avatar { width: 24px; height: 24px; font-size: 10px; }
|
|
841
|
+
.xeplr-r-avatar {
|
|
842
|
+
width: 32px; height: 32px; border-radius: 50%;
|
|
843
|
+
display: grid; place-items: center;
|
|
844
|
+
color: #1a1408; font-weight: 700; font-size: 11px;
|
|
845
|
+
flex-shrink: 0;
|
|
913
846
|
}
|
|
847
|
+
.xeplr-r-avatarname-text { min-width: 0; }
|
|
848
|
+
.xeplr-r-avatarname-name { font-weight: 600; color: var(--xeplr-text-primary, #e6e9f5); }
|
|
849
|
+
.xeplr-r-avatarname-sub { font-size: 12px; color: var(--xeplr-text-secondary, #8a93b8); margin-top: 2px; }
|
|
850
|
+
|
|
851
|
+
/* tags ── pill list. gold/blue are deliberate multi-color category variants,
|
|
852
|
+
not light/dark concerns — left as fixed accent colors on purpose. */
|
|
853
|
+
.xeplr-r-tags { display: flex; flex-wrap: wrap; gap: 4px; }
|
|
854
|
+
.xeplr-r-tag {
|
|
855
|
+
display: inline-block;
|
|
856
|
+
padding: 2px 9px;
|
|
857
|
+
border-radius: 999px;
|
|
858
|
+
font-size: 11px;
|
|
859
|
+
font-weight: 500;
|
|
860
|
+
border: 1px solid;
|
|
861
|
+
}
|
|
862
|
+
.xeplr-r-tag-gold { background: rgba(212, 175, 55, 0.14); border-color: rgba(212, 175, 55, 0.35); color: #e9c156; }
|
|
863
|
+
.xeplr-r-tag-muted { background: var(--xeplr-tag-bg, #1c2340); border-color: var(--xeplr-tag-border, #2a3458); color: var(--xeplr-tag-text, #8a93b8); }
|
|
864
|
+
.xeplr-r-tag-blue { background: rgba(91, 141, 239, 0.14); border-color: rgba(91, 141, 239, 0.35); color: #88aef5; }
|
|
865
|
+
.xeplr-r-tag-more { color: var(--xeplr-text-secondary, #8a93b8); font-size: 11px; align-self: center; }
|
|
866
|
+
|
|
867
|
+
/* currency */
|
|
868
|
+
.xeplr-r-currency { display: inline-flex; align-items: baseline; gap: 2px; }
|
|
869
|
+
.xeplr-r-currency-bold { font-weight: 700; color: var(--xeplr-text-primary, #e6e9f5); }
|
|
870
|
+
.xeplr-r-currency-sym { color: var(--xeplr-text-secondary, #8a93b8); font-size: 0.92em; }
|
|
871
|
+
.xeplr-r-currency-sym-after { margin-left: 3px; }
|
|
872
|
+
|
|
873
|
+
/* memberChips ── avatar+name chips with overflow */
|
|
874
|
+
.xeplr-r-chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
|
|
875
|
+
.xeplr-r-chip {
|
|
876
|
+
display: inline-flex; align-items: center; gap: 6px;
|
|
877
|
+
background: var(--xeplr-tag-bg, #1c2340); border: 1px solid var(--xeplr-tag-border, #2a3458);
|
|
878
|
+
border-radius: 999px;
|
|
879
|
+
padding: 3px 10px 3px 4px;
|
|
880
|
+
font-size: 12px;
|
|
881
|
+
color: var(--xeplr-tag-text, #c8cbe8);
|
|
882
|
+
}
|
|
883
|
+
.xeplr-r-chip-avatar {
|
|
884
|
+
width: 22px; height: 22px; border-radius: 50%;
|
|
885
|
+
display: grid; place-items: center;
|
|
886
|
+
color: #1a1408; font-weight: 700; font-size: 10px;
|
|
887
|
+
}
|
|
888
|
+
.xeplr-r-chip-more { color: var(--xeplr-text-secondary, #8a93b8); font-size: 11px; }
|
|
889
|
+
|
|
890
|
+
/* twoLine */
|
|
891
|
+
.xeplr-r-twoline-primary { font-weight: 600; color: var(--xeplr-text-primary, #e6e9f5); }
|
|
892
|
+
.xeplr-r-twoline-sub { font-size: 12px; color: var(--xeplr-text-secondary, #8a93b8); margin-top: 2px; }
|
|
893
|
+
|
|
894
|
+
/* statusBadge */
|
|
895
|
+
.xeplr-r-badge {
|
|
896
|
+
display: inline-block;
|
|
897
|
+
padding: 2px 10px;
|
|
898
|
+
border-radius: 999px;
|
|
899
|
+
font-size: 11px;
|
|
900
|
+
font-weight: 600;
|
|
901
|
+
border: 1px solid;
|
|
902
|
+
}
|
|
903
|
+
|
|
904
|
+
/* dateDisplay */
|
|
905
|
+
.xeplr-r-date { color: var(--xeplr-text-secondary, #c8cbe8); font-variant-numeric: tabular-nums; }
|
|
906
|
+
|
|
907
|
+
/* link — deliberate gold brand color, not a light/dark concern */
|
|
908
|
+
.xeplr-r-link { color: #d4af37; cursor: pointer; }
|
|
909
|
+
.xeplr-r-link:hover { color: #e9c156; text-decoration: underline; }
|
|
910
|
+
|
|
911
|
+
.xeplr-r-avatar-img { object-fit: cover; }
|
|
912
|
+
.xeplr-r-chip-avatar-img { object-fit: cover; }
|