@mohamedatia/fly-design-system 2.4.0 → 2.6.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.
- package/fesm2022/mohamedatia-fly-design-system.mjs +1446 -122
- package/fesm2022/mohamedatia-fly-design-system.mjs.map +1 -1
- package/package.json +1 -1
- package/scss/_business-app-buttons.scss +209 -208
- package/scss/_theme-auto.scss +10 -9
- package/scss/_theme-dark-vars.scss +50 -0
- package/scss/_theme-dark.scss +142 -79
- package/scss/_theme-light.scss +60 -47
- package/scss/_theme-spatial-vars.scss +56 -66
- package/scss/_theme-spatial.scss +23 -22
- package/scss/_tokens.scss +115 -126
- package/scss/apps.scss +886 -0
- package/types/mohamedatia-fly-design-system.d.ts +626 -3
- package/types/mohamedatia-fly-design-system.d.ts.map +1 -1
package/scss/apps.scss
ADDED
|
@@ -0,0 +1,886 @@
|
|
|
1
|
+
button.circles-sidebar__collapse{
|
|
2
|
+
display: none !important;
|
|
3
|
+
}
|
|
4
|
+
.circles-sidebar__top{
|
|
5
|
+
display: none !important;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
// ─── Signals list — Circles app (matches "Signals.html" design) ──────────────
|
|
9
|
+
// Wrapped in a triple-chained `.signals-list` so every rule starts at specificity
|
|
10
|
+
// (0, 3, 0). Descendant selectors land at (0, 4, 0)+, beating Angular's
|
|
11
|
+
// view-encapsulated selectors (`.foo[_ngcontent-…]` = (0, 2, 0)) without needing
|
|
12
|
+
// `!important`. Matches the same DOM as a single `.signals-list` — chaining a
|
|
13
|
+
// class on itself is functionally equivalent, just heavier on the cascade.
|
|
14
|
+
|
|
15
|
+
.signals-list.signals-list.signals-list {
|
|
16
|
+
color: var(--label-primary, #fff);
|
|
17
|
+
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
18
|
+
|
|
19
|
+
// ── Page header ───────────────────────────────────────────────────────────
|
|
20
|
+
.ph.ph--listing {
|
|
21
|
+
padding: 0 0 22px;
|
|
22
|
+
|
|
23
|
+
.crumbs {
|
|
24
|
+
font-size: 13px;
|
|
25
|
+
color: var(--label-secondary, rgba(255, 255, 255, 0.65));
|
|
26
|
+
margin-bottom: 6px;
|
|
27
|
+
}
|
|
28
|
+
.crumb--link {
|
|
29
|
+
color: var(--circles-primary, #4575fe);
|
|
30
|
+
text-decoration: none;
|
|
31
|
+
&:hover { filter: brightness(1.15); }
|
|
32
|
+
}
|
|
33
|
+
.crumb__sep { margin: 0 8px; opacity: 0.5; }
|
|
34
|
+
.crumb--active {
|
|
35
|
+
color: var(--label-primary, #fff);
|
|
36
|
+
font-weight: 500;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.ph__row {
|
|
40
|
+
display: flex;
|
|
41
|
+
align-items: flex-start;
|
|
42
|
+
justify-content: space-between;
|
|
43
|
+
gap: 24px;
|
|
44
|
+
}
|
|
45
|
+
.ph__l { min-width: 0; }
|
|
46
|
+
|
|
47
|
+
.ph__title {
|
|
48
|
+
font-size: 46px;
|
|
49
|
+
font-weight: 400;
|
|
50
|
+
letter-spacing: -0.01em;
|
|
51
|
+
line-height: 1.05;
|
|
52
|
+
color: var(--label-primary, #fff);
|
|
53
|
+
margin: 0 0 4px;
|
|
54
|
+
}
|
|
55
|
+
.ph__sub {
|
|
56
|
+
color: var(--label-primary, #fff);
|
|
57
|
+
font-size: 14px;
|
|
58
|
+
margin: 0;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.ph__metric { text-align: end; color: var(--label-primary, #fff); }
|
|
62
|
+
.ph__metric-v {
|
|
63
|
+
font-size: 54px;
|
|
64
|
+
line-height: 1;
|
|
65
|
+
display: block;
|
|
66
|
+
background: var(--circles-gradient, linear-gradient(135deg, #4575fe 0%, #60c293 100%));
|
|
67
|
+
background-clip: text;
|
|
68
|
+
-webkit-background-clip: text;
|
|
69
|
+
color: transparent;
|
|
70
|
+
-webkit-text-fill-color: transparent;
|
|
71
|
+
}
|
|
72
|
+
.ph__metric-l {
|
|
73
|
+
font-family: inherit;
|
|
74
|
+
font-size: 11px;
|
|
75
|
+
letter-spacing: 0.2em;
|
|
76
|
+
text-transform: uppercase;
|
|
77
|
+
color: var(--label-tertiary, rgba(255, 255, 255, 0.55));
|
|
78
|
+
font-weight: 600;
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
// ── Toolbar wrapper ───────────────────────────────────────────────────────
|
|
83
|
+
.signals-page-toolbar {
|
|
84
|
+
display: flex;
|
|
85
|
+
flex-direction: column;
|
|
86
|
+
gap: 14px;
|
|
87
|
+
margin-bottom: 18px;
|
|
88
|
+
align-items: start;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
// Status filter (pill tab strip)
|
|
92
|
+
.signals-page-statusfilter {
|
|
93
|
+
display: inline-flex;
|
|
94
|
+
align-items: center;
|
|
95
|
+
gap: 6px;
|
|
96
|
+
padding: 5px;
|
|
97
|
+
border-radius: 999px;
|
|
98
|
+
background: rgba(255, 255, 255, 0.10);
|
|
99
|
+
border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.30));
|
|
100
|
+
width: fit-content;
|
|
101
|
+
|
|
102
|
+
button[role="tab"] {
|
|
103
|
+
display: inline-flex;
|
|
104
|
+
align-items: center;
|
|
105
|
+
gap: 8px;
|
|
106
|
+
padding: 8px 16px;
|
|
107
|
+
border: none;
|
|
108
|
+
background: transparent;
|
|
109
|
+
border-radius: 999px;
|
|
110
|
+
color: var(--label-secondary, rgba(255, 255, 255, 0.65));
|
|
111
|
+
font: 500 13px / 1 inherit;
|
|
112
|
+
cursor: pointer;
|
|
113
|
+
transition: background 180ms ease, color 180ms ease;
|
|
114
|
+
|
|
115
|
+
&:hover { color: var(--label-primary, #fff); }
|
|
116
|
+
|
|
117
|
+
&.on,
|
|
118
|
+
&[aria-selected="true"] {
|
|
119
|
+
background: rgba(255, 255, 255, 0.28);
|
|
120
|
+
color: var(--label-primary, #fff);
|
|
121
|
+
box-shadow:
|
|
122
|
+
0 4px 12px -8px rgba(0, 0, 0, 0.35),
|
|
123
|
+
0 1px 0 rgba(255, 255, 255, 0.4) inset;
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
&__count {
|
|
128
|
+
font-size: 11px;
|
|
129
|
+
padding: 2px 7px;
|
|
130
|
+
background: rgba(255, 255, 255, 0.15);
|
|
131
|
+
border-radius: 999px;
|
|
132
|
+
color: var(--label-secondary, rgba(255, 255, 255, 0.75));
|
|
133
|
+
font-weight: 600;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
button.on .signals-page-statusfilter__count,
|
|
137
|
+
button[aria-selected="true"] .signals-page-statusfilter__count {
|
|
138
|
+
background: var(--circles-gradient, linear-gradient(135deg, #4575fe 0%, #60c293 100%));
|
|
139
|
+
color: #fff;
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
// Toolbar right group (search + action buttons)
|
|
144
|
+
.signals-page-toolbar__right {
|
|
145
|
+
display: flex;
|
|
146
|
+
align-items: center;
|
|
147
|
+
gap: 10px;
|
|
148
|
+
flex-wrap: wrap;
|
|
149
|
+
width:100%;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
.signals-page-search {
|
|
153
|
+
flex: 1 1 320px;
|
|
154
|
+
max-width: 520px;
|
|
155
|
+
margin-inline-end: auto;
|
|
156
|
+
height: 42px;
|
|
157
|
+
border-radius: 14px;
|
|
158
|
+
display: flex;
|
|
159
|
+
align-items: center;
|
|
160
|
+
gap: 10px;
|
|
161
|
+
padding: 0 14px;
|
|
162
|
+
background: rgba(255, 255, 255, 0.14);
|
|
163
|
+
border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.32));
|
|
164
|
+
color: var(--label-secondary, rgba(255, 255, 255, 0.75));
|
|
165
|
+
|
|
166
|
+
&__icon {
|
|
167
|
+
width: 16px;
|
|
168
|
+
height: 16px;
|
|
169
|
+
color: var(--label-secondary, rgba(255, 255, 255, 0.65));
|
|
170
|
+
flex-shrink: 0;
|
|
171
|
+
}
|
|
172
|
+
&__input {
|
|
173
|
+
flex: 1 1 auto;
|
|
174
|
+
min-width: 0;
|
|
175
|
+
border: none;
|
|
176
|
+
outline: none;
|
|
177
|
+
background: transparent;
|
|
178
|
+
color: var(--label-primary, #fff);
|
|
179
|
+
font: inherit;
|
|
180
|
+
font-size: 14px;
|
|
181
|
+
|
|
182
|
+
&::placeholder { color: var(--label-tertiary, rgba(255, 255, 255, 0.55)); }
|
|
183
|
+
}
|
|
184
|
+
&__kbd {
|
|
185
|
+
font: 600 11px/1 inherit;
|
|
186
|
+
color: var(--label-secondary, rgba(255, 255, 255, 0.7));
|
|
187
|
+
padding: 3px 6px;
|
|
188
|
+
background: rgba(255, 255, 255, 0.18);
|
|
189
|
+
border: 1px solid rgba(255, 255, 255, 0.25);
|
|
190
|
+
border-radius: 6px;
|
|
191
|
+
flex-shrink: 0;
|
|
192
|
+
}
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
.signals-page-btn {
|
|
196
|
+
height: 42px;
|
|
197
|
+
padding: 0 16px;
|
|
198
|
+
display: inline-flex;
|
|
199
|
+
align-items: center;
|
|
200
|
+
gap: 8px;
|
|
201
|
+
border-radius: 12px;
|
|
202
|
+
background: rgba(255, 255, 255, 0.14);
|
|
203
|
+
border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.32));
|
|
204
|
+
color: var(--label-primary, #fff);
|
|
205
|
+
font: 500 13px/1 inherit;
|
|
206
|
+
cursor: pointer;
|
|
207
|
+
transition: background 180ms ease, transform 100ms ease;
|
|
208
|
+
|
|
209
|
+
&:hover { background: rgba(255, 255, 255, 0.24); }
|
|
210
|
+
&:active { transform: scale(0.98); }
|
|
211
|
+
|
|
212
|
+
svg { width: 14px; height: 14px; }
|
|
213
|
+
|
|
214
|
+
&[aria-label="Import"] { width: 42px; padding: 0; justify-content: center; }
|
|
215
|
+
|
|
216
|
+
&--primary {
|
|
217
|
+
background: var(--circles-gradient, linear-gradient(135deg, #4575fe 0%, #60c293 100%));
|
|
218
|
+
border-color: transparent;
|
|
219
|
+
color: #fff;
|
|
220
|
+
box-shadow:
|
|
221
|
+
0 1px 0 rgba(255, 255, 255, 0.22) inset,
|
|
222
|
+
0 6px 18px -6px rgba(69, 117, 254, 0.45);
|
|
223
|
+
|
|
224
|
+
&:hover {
|
|
225
|
+
background: var(--circles-gradient-hover, linear-gradient(135deg, #3a66e8 0%, #4fb482 100%));
|
|
226
|
+
}
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
&__caret {
|
|
230
|
+
width: 12px;
|
|
231
|
+
height: 12px;
|
|
232
|
+
opacity: 0.7;
|
|
233
|
+
transition: transform 180ms ease;
|
|
234
|
+
}
|
|
235
|
+
&[aria-expanded="true"] &__caret { transform: rotate(180deg); }
|
|
236
|
+
}
|
|
237
|
+
|
|
238
|
+
// Toggle pill inside Recycle-bin button
|
|
239
|
+
.signals-page-toggle {
|
|
240
|
+
display: inline-flex;
|
|
241
|
+
align-items: center;
|
|
242
|
+
width: 32px;
|
|
243
|
+
height: 18px;
|
|
244
|
+
padding: 2px;
|
|
245
|
+
border-radius: 999px;
|
|
246
|
+
background: rgba(255, 255, 255, 0.18);
|
|
247
|
+
transition: background 180ms ease;
|
|
248
|
+
|
|
249
|
+
&__thumb {
|
|
250
|
+
width: 14px;
|
|
251
|
+
height: 14px;
|
|
252
|
+
border-radius: 50%;
|
|
253
|
+
background: #fff;
|
|
254
|
+
transition: transform 180ms ease;
|
|
255
|
+
}
|
|
256
|
+
}
|
|
257
|
+
.signals-page-btn--toggle[aria-pressed="true"] {
|
|
258
|
+
.signals-page-toggle { background: var(--primary-color, #2563ff); }
|
|
259
|
+
.signals-page-toggle__thumb { transform: translateX(14px); }
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
// ── Table → glass-card list ─────────────────────────────────────────────
|
|
263
|
+
|
|
264
|
+
.signals-table {
|
|
265
|
+
width: 100%;
|
|
266
|
+
border-collapse: separate;
|
|
267
|
+
border-spacing: 0;
|
|
268
|
+
background: transparent;
|
|
269
|
+
}
|
|
270
|
+
|
|
271
|
+
.signals-table,
|
|
272
|
+
.signals-table thead,
|
|
273
|
+
.signals-table tbody {
|
|
274
|
+
display: block;
|
|
275
|
+
width: 100%;
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
.signals-table colgroup { display: none; }
|
|
279
|
+
|
|
280
|
+
// Shared row grid (header + body) — 5 columns:
|
|
281
|
+
// Title · Category · PESTLE · Status · Updated. (Checkbox + actions cells
|
|
282
|
+
// are display:none so they don't claim grid tracks.)
|
|
283
|
+
.signals-table tr {
|
|
284
|
+
display: grid;
|
|
285
|
+
grid-template-columns:
|
|
286
|
+
minmax(0, 1.6fr)
|
|
287
|
+
minmax(0, 0.8fr)
|
|
288
|
+
minmax(0, 1.05fr)
|
|
289
|
+
minmax(0, 0.7fr)
|
|
290
|
+
minmax(0, 0.6fr);
|
|
291
|
+
align-items: center;
|
|
292
|
+
gap: 18px;
|
|
293
|
+
}
|
|
294
|
+
|
|
295
|
+
.signals-table th[hidden],
|
|
296
|
+
.signals-table td[hidden] { display: none; }
|
|
297
|
+
|
|
298
|
+
// Hide checkbox column (header + body cells)
|
|
299
|
+
.signals-table .signals-table__cell--check { display: none; }
|
|
300
|
+
|
|
301
|
+
// Hide table header row entirely
|
|
302
|
+
.signals-table thead { display: none; }
|
|
303
|
+
|
|
304
|
+
// Header row
|
|
305
|
+
.signals-table thead tr {
|
|
306
|
+
padding: 0 22px 10px;
|
|
307
|
+
background: transparent;
|
|
308
|
+
border: none;
|
|
309
|
+
box-shadow: none;
|
|
310
|
+
}
|
|
311
|
+
.signals-table thead th {
|
|
312
|
+
background: transparent;
|
|
313
|
+
border: none;
|
|
314
|
+
padding: 0;
|
|
315
|
+
font-size: 11px;
|
|
316
|
+
letter-spacing: 0.2em;
|
|
317
|
+
text-transform: uppercase;
|
|
318
|
+
color: var(--label-tertiary, rgba(255, 255, 255, 0.55));
|
|
319
|
+
font-weight: 600;
|
|
320
|
+
text-align: start;
|
|
321
|
+
}
|
|
322
|
+
|
|
323
|
+
// Body container — flex column of glass cards
|
|
324
|
+
.signals-table tbody {
|
|
325
|
+
display: flex;
|
|
326
|
+
flex-direction: column;
|
|
327
|
+
gap: 10px;
|
|
328
|
+
}
|
|
329
|
+
|
|
330
|
+
// Row = glass card
|
|
331
|
+
.signals-table__row {
|
|
332
|
+
position: relative;
|
|
333
|
+
padding: 16px 22px;
|
|
334
|
+
border-radius: 18px;
|
|
335
|
+
background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.08));
|
|
336
|
+
-webkit-backdrop-filter: blur(20px) saturate(140%);
|
|
337
|
+
backdrop-filter: blur(20px) saturate(140%);
|
|
338
|
+
border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.30));
|
|
339
|
+
box-shadow:
|
|
340
|
+
0 1px 0 rgba(255, 255, 255, 0.35) inset,
|
|
341
|
+
0 -1px 0 rgba(255, 255, 255, 0.08) inset,
|
|
342
|
+
0 8px 22px -14px rgba(0, 0, 0, 0.5);
|
|
343
|
+
transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease;
|
|
344
|
+
cursor: pointer;
|
|
345
|
+
|
|
346
|
+
&:hover {
|
|
347
|
+
transform: translateY(-1px);
|
|
348
|
+
background: linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.12));
|
|
349
|
+
box-shadow:
|
|
350
|
+
0 1px 0 rgba(255, 255, 255, 0.45) inset,
|
|
351
|
+
0 -1px 0 rgba(255, 255, 255, 0.12) inset,
|
|
352
|
+
0 14px 32px -16px rgba(0, 0, 0, 0.6);
|
|
353
|
+
}
|
|
354
|
+
|
|
355
|
+
&::before {
|
|
356
|
+
content: "";
|
|
357
|
+
position: absolute;
|
|
358
|
+
inset-inline-start: 8px;
|
|
359
|
+
top: 14px;
|
|
360
|
+
bottom: 14px;
|
|
361
|
+
width: 3px;
|
|
362
|
+
border-radius: 3px;
|
|
363
|
+
background: var(--row-swatch, rgba(255, 255, 255, 0.4));
|
|
364
|
+
opacity: 0.85;
|
|
365
|
+
}
|
|
366
|
+
}
|
|
367
|
+
|
|
368
|
+
// Reset table-cell defaults on body cells (base state)
|
|
369
|
+
.signals-table tbody td {
|
|
370
|
+
display: block;
|
|
371
|
+
padding: 0;
|
|
372
|
+
background: transparent;
|
|
373
|
+
border: none;
|
|
374
|
+
font-size: 13px;
|
|
375
|
+
color: var(--label-primary, #fff);
|
|
376
|
+
}
|
|
377
|
+
|
|
378
|
+
// Kill Circles' per-cell hover paint without touching layout properties.
|
|
379
|
+
// Their selector is .circles-data-table.signals-table[_ngcontent] tbody[_ngcontent]
|
|
380
|
+
// tr[_ngcontent]:hover td[_ngcontent] = (0, 7, 3).
|
|
381
|
+
// Chaining `.signals-table` 5× here gives (0, 3+5+1+1, 3) = (0, 10, 3) > theirs.
|
|
382
|
+
.signals-table.signals-table.signals-table.signals-table.signals-table tbody tr:hover td,
|
|
383
|
+
.signals-table.signals-table.signals-table.signals-table.signals-table tbody tr:focus td,
|
|
384
|
+
.signals-table.signals-table.signals-table.signals-table.signals-table tbody tr:focus-within td {
|
|
385
|
+
background: transparent;
|
|
386
|
+
background-image: none;
|
|
387
|
+
border-color: transparent;
|
|
388
|
+
box-shadow: none;
|
|
389
|
+
}
|
|
390
|
+
|
|
391
|
+
// Checkbox cell
|
|
392
|
+
.signals-table__cell--check {
|
|
393
|
+
display: flex;
|
|
394
|
+
align-items: center;
|
|
395
|
+
justify-content: center;
|
|
396
|
+
}
|
|
397
|
+
.signals-table__check {
|
|
398
|
+
position: relative;
|
|
399
|
+
display: inline-flex;
|
|
400
|
+
cursor: pointer;
|
|
401
|
+
|
|
402
|
+
input {
|
|
403
|
+
position: absolute;
|
|
404
|
+
inset: 0;
|
|
405
|
+
width: 100%;
|
|
406
|
+
height: 100%;
|
|
407
|
+
opacity: 0;
|
|
408
|
+
margin: 0;
|
|
409
|
+
cursor: pointer;
|
|
410
|
+
}
|
|
411
|
+
&-box {
|
|
412
|
+
width: 18px;
|
|
413
|
+
height: 18px;
|
|
414
|
+
border-radius: 5px;
|
|
415
|
+
background: rgba(255, 255, 255, 0.10);
|
|
416
|
+
border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.35));
|
|
417
|
+
transition: background 150ms ease, border-color 150ms ease;
|
|
418
|
+
}
|
|
419
|
+
input:checked + &-box {
|
|
420
|
+
background: var(--primary-color, #2563ff);
|
|
421
|
+
border-color: var(--primary-color, #2563ff);
|
|
422
|
+
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='%23fff' d='M6.5 12.1 2.9 8.5l1.2-1.2 2.4 2.4 5.4-5.4 1.2 1.2z'/></svg>");
|
|
423
|
+
background-size: cover;
|
|
424
|
+
}
|
|
425
|
+
}
|
|
426
|
+
|
|
427
|
+
// Title cell — bold EN + Arabic subtitle
|
|
428
|
+
.signals-table__title {
|
|
429
|
+
min-width: 0;
|
|
430
|
+
|
|
431
|
+
strong {
|
|
432
|
+
display: block;
|
|
433
|
+
font-size: 15px;
|
|
434
|
+
font-weight: 600;
|
|
435
|
+
color: var(--label-primary, #fff);
|
|
436
|
+
margin: 0 0 3px;
|
|
437
|
+
line-height: 1.3;
|
|
438
|
+
overflow: hidden;
|
|
439
|
+
text-overflow: ellipsis;
|
|
440
|
+
white-space: nowrap;
|
|
441
|
+
}
|
|
442
|
+
}
|
|
443
|
+
.signals-table__ar {
|
|
444
|
+
display: none;
|
|
445
|
+
}
|
|
446
|
+
|
|
447
|
+
// Category cell — plain-text <td> rendered as a glass pill with swatch dot.
|
|
448
|
+
.signals-table__row > td:nth-of-type(3) {
|
|
449
|
+
display: inline-flex;
|
|
450
|
+
align-items: center;
|
|
451
|
+
gap: 8px;
|
|
452
|
+
height: 30px;
|
|
453
|
+
padding: 0 12px 0 10px;
|
|
454
|
+
border-radius: 999px;
|
|
455
|
+
background: rgba(255, 255, 255, 0.14);
|
|
456
|
+
border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.30));
|
|
457
|
+
color: var(--label-primary, #fff);
|
|
458
|
+
font-size: 12.5px;
|
|
459
|
+
font-weight: 500;
|
|
460
|
+
width: fit-content;
|
|
461
|
+
align-self: center;
|
|
462
|
+
|
|
463
|
+
&::before {
|
|
464
|
+
content: "";
|
|
465
|
+
width: 8px;
|
|
466
|
+
height: 8px;
|
|
467
|
+
border-radius: 999px;
|
|
468
|
+
background: var(--row-swatch, rgba(255, 255, 255, 0.85));
|
|
469
|
+
box-shadow: 0 0 8px var(--row-swatch, rgba(255, 255, 255, 0.6));
|
|
470
|
+
}
|
|
471
|
+
}
|
|
472
|
+
|
|
473
|
+
// PESTLE bullets
|
|
474
|
+
.pestle {
|
|
475
|
+
display: flex;
|
|
476
|
+
gap: 5px;
|
|
477
|
+
}
|
|
478
|
+
.pestle__k {
|
|
479
|
+
width: 24px;
|
|
480
|
+
height: 24px;
|
|
481
|
+
border-radius: 999px;
|
|
482
|
+
display: grid;
|
|
483
|
+
place-items: center;
|
|
484
|
+
font-size: 11px;
|
|
485
|
+
font-weight: 700;
|
|
486
|
+
background: rgba(255, 255, 255, 0.08);
|
|
487
|
+
border: 1px solid rgba(255, 255, 255, 0.18);
|
|
488
|
+
color: rgba(255, 255, 255, 0.30);
|
|
489
|
+
transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
|
|
490
|
+
|
|
491
|
+
// Active letter — all PESTLE keys share the Circles gradient
|
|
492
|
+
&--on {
|
|
493
|
+
background: var(--circles-gradient, linear-gradient(135deg, #4575fe 0%, #60c293 100%));
|
|
494
|
+
border-color: transparent;
|
|
495
|
+
color: #fff;
|
|
496
|
+
box-shadow:
|
|
497
|
+
0 2px 8px -3px rgba(69, 117, 254, 0.45),
|
|
498
|
+
0 1px 0 rgba(255, 255, 255, 0.35) inset;
|
|
499
|
+
}
|
|
500
|
+
}
|
|
501
|
+
|
|
502
|
+
// Status pill
|
|
503
|
+
fly-status-badge { display: inline-flex; }
|
|
504
|
+
|
|
505
|
+
.status-badge {
|
|
506
|
+
display: inline-flex;
|
|
507
|
+
align-items: center;
|
|
508
|
+
gap: 7px;
|
|
509
|
+
height: 28px;
|
|
510
|
+
padding: 0 12px;
|
|
511
|
+
border-radius: 999px;
|
|
512
|
+
font-size: 12px;
|
|
513
|
+
font-weight: 600;
|
|
514
|
+
background: rgba(255, 255, 255, 0.14);
|
|
515
|
+
border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.30));
|
|
516
|
+
color: var(--label-primary, #fff);
|
|
517
|
+
width: fit-content;
|
|
518
|
+
white-space: nowrap;
|
|
519
|
+
flex-shrink: 0;
|
|
520
|
+
|
|
521
|
+
&::before {
|
|
522
|
+
content: "";
|
|
523
|
+
width: 7px;
|
|
524
|
+
height: 7px;
|
|
525
|
+
border-radius: 999px;
|
|
526
|
+
background: currentColor;
|
|
527
|
+
opacity: 0.95;
|
|
528
|
+
box-shadow: 0 0 8px currentColor;
|
|
529
|
+
}
|
|
530
|
+
|
|
531
|
+
&--published {
|
|
532
|
+
background: rgba(80, 140, 220, 0.40);
|
|
533
|
+
border-color: rgba(140, 185, 240, 0.55);
|
|
534
|
+
}
|
|
535
|
+
&--review {
|
|
536
|
+
background: rgba(220, 160, 70, 0.42);
|
|
537
|
+
border-color: rgba(245, 200, 130, 0.6);
|
|
538
|
+
}
|
|
539
|
+
&--draft {
|
|
540
|
+
background: rgba(255, 255, 255, 0.16);
|
|
541
|
+
border-color: rgba(255, 255, 255, 0.32);
|
|
542
|
+
}
|
|
543
|
+
&--approved {
|
|
544
|
+
background: rgba(80, 180, 130, 0.40);
|
|
545
|
+
border-color: rgba(140, 215, 175, 0.6);
|
|
546
|
+
}
|
|
547
|
+
&--archived {
|
|
548
|
+
background: rgba(165, 140, 200, 0.40);
|
|
549
|
+
border-color: rgba(200, 180, 225, 0.6);
|
|
550
|
+
}
|
|
551
|
+
}
|
|
552
|
+
|
|
553
|
+
// Date cell
|
|
554
|
+
.signals-table__date {
|
|
555
|
+
color: var(--label-primary, rgba(255, 255, 255, 0.85));
|
|
556
|
+
font-size: 13px;
|
|
557
|
+
font-weight: 500;
|
|
558
|
+
font-variant-numeric: tabular-nums;
|
|
559
|
+
}
|
|
560
|
+
|
|
561
|
+
// Actions cell + icon buttons
|
|
562
|
+
.circles-data-table__actions {
|
|
563
|
+
display: none !important;
|
|
564
|
+
align-items: center;
|
|
565
|
+
justify-content: flex-end;
|
|
566
|
+
gap: 4px;
|
|
567
|
+
}
|
|
568
|
+
.signals-card__icon-btn {
|
|
569
|
+
width: 30px;
|
|
570
|
+
height: 30px;
|
|
571
|
+
border-radius: 9px;
|
|
572
|
+
display: grid;
|
|
573
|
+
place-items: center;
|
|
574
|
+
padding: 0;
|
|
575
|
+
border: none;
|
|
576
|
+
background: transparent;
|
|
577
|
+
color: var(--label-secondary, rgba(255, 255, 255, 0.65));
|
|
578
|
+
cursor: pointer;
|
|
579
|
+
transition: background 150ms ease, color 150ms ease, transform 100ms ease;
|
|
580
|
+
|
|
581
|
+
svg { width: 14px; height: 14px; }
|
|
582
|
+
|
|
583
|
+
&:hover {
|
|
584
|
+
background: rgba(255, 255, 255, 0.20);
|
|
585
|
+
color: var(--label-primary, #fff);
|
|
586
|
+
}
|
|
587
|
+
&:active { transform: scale(0.94); }
|
|
588
|
+
|
|
589
|
+
&--danger {
|
|
590
|
+
color: rgba(225, 130, 130, 0.75);
|
|
591
|
+
&:hover {
|
|
592
|
+
background: rgba(220, 80, 80, 0.18);
|
|
593
|
+
color: #ff8a8a;
|
|
594
|
+
}
|
|
595
|
+
}
|
|
596
|
+
}
|
|
597
|
+
|
|
598
|
+
// Compact-layout fallback (narrow windows)
|
|
599
|
+
@media (max-width: 1100px) {
|
|
600
|
+
.signals-table tr {
|
|
601
|
+
grid-template-columns:
|
|
602
|
+
minmax(0, 1.6fr)
|
|
603
|
+
minmax(0, 0.8fr)
|
|
604
|
+
minmax(0, 1fr)
|
|
605
|
+
minmax(0, 0.65fr)
|
|
606
|
+
minmax(0, 0.55fr);
|
|
607
|
+
gap: 12px;
|
|
608
|
+
}
|
|
609
|
+
.signals-table__row { padding: 14px 18px; }
|
|
610
|
+
.ph.ph--listing .ph__title { font-size: 38px; }
|
|
611
|
+
.ph.ph--listing .ph__metric-v { font-size: 42px; }
|
|
612
|
+
}
|
|
613
|
+
}
|
|
614
|
+
|
|
615
|
+
// ─── Circles app shell: sidebar (left) | content (right) ─────────────────────
|
|
616
|
+
// Same specificity trick as above — triple-chained class selectors so these
|
|
617
|
+
// rules beat the Circles federated remote's view-encapsulated styles without
|
|
618
|
+
// `!important`.
|
|
619
|
+
|
|
620
|
+
.circles-app.circles-app.circles-app {
|
|
621
|
+
display: flex;
|
|
622
|
+
flex-direction: row;
|
|
623
|
+
align-items: stretch;
|
|
624
|
+
height: 100%;
|
|
625
|
+
width: 100%;
|
|
626
|
+
min-height: 0;
|
|
627
|
+
overflow: hidden;
|
|
628
|
+
color: var(--label-primary, #fff);
|
|
629
|
+
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
630
|
+
|
|
631
|
+
// Mobile hamburger trigger — hidden on desktop
|
|
632
|
+
.circles-mobile-trigger {
|
|
633
|
+
display: none;
|
|
634
|
+
}
|
|
635
|
+
|
|
636
|
+
@media (max-width: 768px) {
|
|
637
|
+
flex-direction: column;
|
|
638
|
+
.circles-mobile-trigger { display: inline-flex; }
|
|
639
|
+
}
|
|
640
|
+
}
|
|
641
|
+
|
|
642
|
+
// Sidebar — fixed 260px column
|
|
643
|
+
.circles-sidebar.circles-sidebar.circles-sidebar {
|
|
644
|
+
flex: 0 0 260px;
|
|
645
|
+
display: flex;
|
|
646
|
+
flex-direction: column;
|
|
647
|
+
height: 100%;
|
|
648
|
+
min-height: 0;
|
|
649
|
+
padding: 28px 22px 22px 28px;
|
|
650
|
+
box-sizing: border-box;
|
|
651
|
+
overflow-y: auto;
|
|
652
|
+
background: transparent;
|
|
653
|
+
border: none;
|
|
654
|
+
|
|
655
|
+
// Section label ("MODULES")
|
|
656
|
+
.circles-sidebar__section {
|
|
657
|
+
display: none;
|
|
658
|
+
}
|
|
659
|
+
|
|
660
|
+
// Nav list
|
|
661
|
+
.circles-sidebar__nav {
|
|
662
|
+
display: flex;
|
|
663
|
+
flex-direction: column;
|
|
664
|
+
gap: 2px;
|
|
665
|
+
list-style: none;
|
|
666
|
+
padding: 0;
|
|
667
|
+
margin: 0;
|
|
668
|
+
|
|
669
|
+
li { display: block; }
|
|
670
|
+
}
|
|
671
|
+
|
|
672
|
+
// Nav item — button reset + design-spec pill
|
|
673
|
+
.circles-sidebar__nav-item {
|
|
674
|
+
display: flex;
|
|
675
|
+
align-items: center;
|
|
676
|
+
gap: 12px;
|
|
677
|
+
width: 100%;
|
|
678
|
+
padding: 10px 12px;
|
|
679
|
+
border-radius: 14px;
|
|
680
|
+
background: transparent;
|
|
681
|
+
border: 1px solid transparent;
|
|
682
|
+
color: var(--label-primary, rgba(255, 255, 255, 0.92));
|
|
683
|
+
font: 500 14px / 1 inherit;
|
|
684
|
+
font-family: inherit;
|
|
685
|
+
cursor: pointer;
|
|
686
|
+
text-align: start;
|
|
687
|
+
transition: background 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
|
|
688
|
+
position: relative;
|
|
689
|
+
|
|
690
|
+
&:hover {
|
|
691
|
+
background: rgba(255, 255, 255, 0.15);
|
|
692
|
+
color: var(--label-primary, #fff);
|
|
693
|
+
}
|
|
694
|
+
|
|
695
|
+
&:focus-visible {
|
|
696
|
+
outline: none;
|
|
697
|
+
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
|
|
698
|
+
}
|
|
699
|
+
|
|
700
|
+
&.active,
|
|
701
|
+
&[aria-current="page"] {
|
|
702
|
+
background: rgba(255, 255, 255, 0.24);
|
|
703
|
+
border-color: rgba(255, 255, 255, 0.4);
|
|
704
|
+
color: var(--label-primary, #fff);
|
|
705
|
+
box-shadow: 0 4px 14px -8px rgba(0, 0, 0, 0.25);
|
|
706
|
+
}
|
|
707
|
+
}
|
|
708
|
+
|
|
709
|
+
// Nav icon (SVG sizing — markup has no width/height attrs)
|
|
710
|
+
.circles-sidebar__nav-icon {
|
|
711
|
+
display: inline-flex;
|
|
712
|
+
align-items: center;
|
|
713
|
+
justify-content: center;
|
|
714
|
+
flex-shrink: 0;
|
|
715
|
+
width: 16px;
|
|
716
|
+
height: 16px;
|
|
717
|
+
color: var(--label-secondary, rgba(255, 255, 255, 0.65));
|
|
718
|
+
transition: color 150ms ease;
|
|
719
|
+
|
|
720
|
+
svg {
|
|
721
|
+
width: 16px;
|
|
722
|
+
height: 16px;
|
|
723
|
+
display: block;
|
|
724
|
+
}
|
|
725
|
+
}
|
|
726
|
+
.circles-sidebar__nav-item:hover .circles-sidebar__nav-icon,
|
|
727
|
+
.circles-sidebar__nav-item.active .circles-sidebar__nav-icon,
|
|
728
|
+
.circles-sidebar__nav-item[aria-current="page"] .circles-sidebar__nav-icon {
|
|
729
|
+
color: var(--label-primary, #fff);
|
|
730
|
+
}
|
|
731
|
+
|
|
732
|
+
// Nav label
|
|
733
|
+
.circles-sidebar__nav-label {
|
|
734
|
+
flex: 1 1 auto;
|
|
735
|
+
min-width: 0;
|
|
736
|
+
overflow: hidden;
|
|
737
|
+
text-overflow: ellipsis;
|
|
738
|
+
white-space: nowrap;
|
|
739
|
+
}
|
|
740
|
+
|
|
741
|
+
// Active indicator (right-edge dot — design has no separate one but markup includes a span)
|
|
742
|
+
.circles-sidebar__nav-indicator { display: none; }
|
|
743
|
+
|
|
744
|
+
// Foot (user info) — pushed to bottom
|
|
745
|
+
.circles-sidebar__foot {
|
|
746
|
+
margin-top: auto;
|
|
747
|
+
padding-top: 18px;
|
|
748
|
+
border-top: 1px solid rgba(255, 255, 255, 0.10);
|
|
749
|
+
}
|
|
750
|
+
|
|
751
|
+
.circles-sidebar__user {
|
|
752
|
+
display: flex;
|
|
753
|
+
align-items: center;
|
|
754
|
+
gap: 10px;
|
|
755
|
+
padding: 8px;
|
|
756
|
+
border-radius: 12px;
|
|
757
|
+
transition: background 150ms ease;
|
|
758
|
+
|
|
759
|
+
&:hover { background: rgba(255, 255, 255, 0.10); }
|
|
760
|
+
}
|
|
761
|
+
|
|
762
|
+
.circles-sidebar__avatar {
|
|
763
|
+
flex-shrink: 0;
|
|
764
|
+
width: 32px;
|
|
765
|
+
height: 32px;
|
|
766
|
+
border-radius: 50%;
|
|
767
|
+
background: rgba(255, 255, 255, 0.15);
|
|
768
|
+
border: 1px solid rgba(255, 255, 255, 0.25);
|
|
769
|
+
display: grid;
|
|
770
|
+
place-items: center;
|
|
771
|
+
font-size: 12px;
|
|
772
|
+
font-weight: 600;
|
|
773
|
+
color: var(--label-primary, #fff);
|
|
774
|
+
}
|
|
775
|
+
|
|
776
|
+
.circles-sidebar__user-meta {
|
|
777
|
+
flex: 1 1 auto;
|
|
778
|
+
min-width: 0;
|
|
779
|
+
}
|
|
780
|
+
|
|
781
|
+
.circles-sidebar__user-name {
|
|
782
|
+
font-size: 13px;
|
|
783
|
+
font-weight: 500;
|
|
784
|
+
color: var(--label-primary, #fff);
|
|
785
|
+
overflow: hidden;
|
|
786
|
+
text-overflow: ellipsis;
|
|
787
|
+
white-space: nowrap;
|
|
788
|
+
}
|
|
789
|
+
|
|
790
|
+
.circles-sidebar__user-more {
|
|
791
|
+
flex-shrink: 0;
|
|
792
|
+
width: 24px;
|
|
793
|
+
height: 24px;
|
|
794
|
+
padding: 0;
|
|
795
|
+
border: none;
|
|
796
|
+
border-radius: 6px;
|
|
797
|
+
background: transparent;
|
|
798
|
+
color: var(--label-secondary, rgba(255, 255, 255, 0.6));
|
|
799
|
+
cursor: pointer;
|
|
800
|
+
display: grid;
|
|
801
|
+
place-items: center;
|
|
802
|
+
|
|
803
|
+
&:hover {
|
|
804
|
+
background: rgba(255, 255, 255, 0.15);
|
|
805
|
+
color: var(--label-primary, #fff);
|
|
806
|
+
}
|
|
807
|
+
}
|
|
808
|
+
}
|
|
809
|
+
|
|
810
|
+
// Angular component hosts inside the Circles app must establish a height
|
|
811
|
+
// chain. Circles' own :host rule sizes the host to `100vh` + `overflow: hidden`
|
|
812
|
+
// — that's wrong because fly-circles renders inside a fly-window much smaller
|
|
813
|
+
// than the viewport, so the bottom of the page overflows past the window edge
|
|
814
|
+
// into clipped territory (pagination unreachable, scroll stops short).
|
|
815
|
+
// !important is needed because :host compiles to `[_nghost-…]` (0,1,0) which
|
|
816
|
+
// beats a plain `fly-circles` selector (0,0,1).
|
|
817
|
+
fly-circles {
|
|
818
|
+
display: block !important;
|
|
819
|
+
height: 100% !important;
|
|
820
|
+
min-height: 0 !important;
|
|
821
|
+
overflow: visible !important;
|
|
822
|
+
}
|
|
823
|
+
|
|
824
|
+
fly-signals-list,
|
|
825
|
+
fly-scenarios-list,
|
|
826
|
+
fly-trends-list,
|
|
827
|
+
fly-roadmaps-list,
|
|
828
|
+
fly-future-jobs-list {
|
|
829
|
+
display: block;
|
|
830
|
+
width: 100%;
|
|
831
|
+
min-height: 0;
|
|
832
|
+
}
|
|
833
|
+
|
|
834
|
+
.circles-module-page.circles-module-page.circles-module-page {
|
|
835
|
+
min-height: 0;
|
|
836
|
+
overflow: visible;
|
|
837
|
+
}
|
|
838
|
+
|
|
839
|
+
// Content area — fills remaining width.
|
|
840
|
+
// Bottom padding reserves space for the floating agent panel so the
|
|
841
|
+
// pagination and the last row aren't hidden behind it.
|
|
842
|
+
// Agent bar sits ~32px from viewport bottom + ~90-110px tall (input row
|
|
843
|
+
// + toolbar) → 160px gives a comfortable clearance.
|
|
844
|
+
.circles-content.circles-content.circles-content {
|
|
845
|
+
flex: 1 1 auto;
|
|
846
|
+
min-width: 0;
|
|
847
|
+
height: 100%;
|
|
848
|
+
min-height: 0;
|
|
849
|
+
overflow-y: auto;
|
|
850
|
+
overflow-x: hidden;
|
|
851
|
+
padding: 22px 32px 50px 8px;
|
|
852
|
+
box-sizing: border-box;
|
|
853
|
+
scroll-padding-block-end: 160px;
|
|
854
|
+
}
|
|
855
|
+
.signals-list.signals-list.signals-list .signals-page-btn--primary{
|
|
856
|
+
display: none;
|
|
857
|
+
}
|
|
858
|
+
|
|
859
|
+
// Trend cards — same frosted glass treatment as signals rows.
|
|
860
|
+
// Triple-chained for specificity vs the Circles federated remote's own styles.
|
|
861
|
+
.trend-card.trend-card.trend-card {
|
|
862
|
+
position: relative;
|
|
863
|
+
padding: 16px 22px;
|
|
864
|
+
border-radius: 18px;
|
|
865
|
+
background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.08));
|
|
866
|
+
-webkit-backdrop-filter: blur(20px) saturate(140%);
|
|
867
|
+
backdrop-filter: blur(20px) saturate(140%);
|
|
868
|
+
border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.30));
|
|
869
|
+
box-shadow:
|
|
870
|
+
0 1px 0 rgba(255, 255, 255, 0.35) inset,
|
|
871
|
+
0 -1px 0 rgba(255, 255, 255, 0.08) inset,
|
|
872
|
+
0 8px 22px -14px rgba(0, 0, 0, 0.5);
|
|
873
|
+
transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease;
|
|
874
|
+
|
|
875
|
+
&:hover {
|
|
876
|
+
transform: translateY(-1px);
|
|
877
|
+
background: linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.12));
|
|
878
|
+
box-shadow:
|
|
879
|
+
0 1px 0 rgba(255, 255, 255, 0.45) inset,
|
|
880
|
+
0 -1px 0 rgba(255, 255, 255, 0.12) inset,
|
|
881
|
+
0 14px 32px -16px rgba(0, 0, 0, 0.6);
|
|
882
|
+
}
|
|
883
|
+
}
|
|
884
|
+
.trend-card__acts{
|
|
885
|
+
display: none !important;
|
|
886
|
+
}
|