gemstar 0.0.2 → 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.
@@ -0,0 +1,523 @@
1
+ :root {
2
+ color-scheme: light;
3
+ --canvas: #f1ecdf;
4
+ --panel: #fff9ef;
5
+ --panel-strong: #f7efe0;
6
+ --ink: #1f1b17;
7
+ --muted: #6b6057;
8
+ --line: #ddcfbf;
9
+ --accent: #b44d25;
10
+ --accent-soft: rgba(180, 77, 37, 0.14);
11
+ --green: #2f8f5b;
12
+ --green-soft: rgba(47, 143, 91, 0.12);
13
+ --red: #a9473c;
14
+ --red-soft: rgba(169, 71, 60, 0.12);
15
+ --grey: #7c7c85;
16
+ --grey-soft: rgba(124, 124, 133, 0.1);
17
+ --shadow: 0 1.1rem 2.4rem rgba(66, 44, 28, 0.08);
18
+ }
19
+
20
+ * { box-sizing: border-box; }
21
+ body {
22
+ margin: 0;
23
+ color: var(--ink);
24
+ font-family: "Avenir Next", "Helvetica Neue", "Segoe UI", sans-serif;
25
+ background: #fff;
26
+ }
27
+ a {
28
+ color: inherit;
29
+ text-decoration: none;
30
+ }
31
+ a[data-gem-link-inline="true"] {
32
+ color: #2563c9;
33
+ }
34
+ a[data-gem-link-inline="true"]:hover {
35
+ text-decoration: underline;
36
+ }
37
+ button,
38
+ select {
39
+ font: inherit;
40
+ }
41
+ code,
42
+ pre {
43
+ font-family: "SFMono-Regular", "Cascadia Code", monospace;
44
+ }
45
+ .app-shell {
46
+ min-height: 100vh;
47
+ display: flex;
48
+ flex-direction: column;
49
+ }
50
+ .topbar {
51
+ display: flex;
52
+ align-items: center;
53
+ justify-content: space-between;
54
+ gap: 0.6rem;
55
+ padding: 0.4rem 0.65rem;
56
+ border-bottom: 1px solid #ece8df;
57
+ background: #fff;
58
+ position: sticky;
59
+ top: 0;
60
+ z-index: 2;
61
+ flex-wrap: nowrap;
62
+ }
63
+ .brand-lockup {
64
+ display: flex;
65
+ align-items: center;
66
+ gap: 0.65rem;
67
+ flex: 0 1 auto;
68
+ min-width: 0;
69
+ }
70
+ .brand-mark {
71
+ width: 1.55rem;
72
+ height: 1.55rem;
73
+ border-radius: 0.35rem;
74
+ display: grid;
75
+ place-items: center;
76
+ font-weight: 700;
77
+ font-size: 0.82rem;
78
+ color: white;
79
+ background: linear-gradient(145deg, #c05a2b, #8f3517);
80
+ }
81
+ .brand-kicker,
82
+ .detail-kicker {
83
+ margin: 0;
84
+ color: var(--accent);
85
+ text-transform: uppercase;
86
+ letter-spacing: 0.1em;
87
+ font-size: 0.65rem;
88
+ }
89
+ .brand-lockup h1,
90
+ .sidebar-header h2,
91
+ .detail h2,
92
+ .detail h3,
93
+ .empty-state h2 {
94
+ margin: 0.05rem 0 0;
95
+ line-height: 1;
96
+ }
97
+ .brand-lockup h1 {
98
+ white-space: nowrap;
99
+ font-size: 0.96rem;
100
+ }
101
+ .picker-row {
102
+ display: flex;
103
+ gap: 0.45rem;
104
+ flex-wrap: nowrap;
105
+ align-items: center;
106
+ flex: 1 1 auto;
107
+ justify-content: flex-end;
108
+ min-width: 0;
109
+ }
110
+ .picker {
111
+ display: inline-flex;
112
+ align-items: center;
113
+ gap: 0.28rem;
114
+ color: var(--muted);
115
+ font-size: 0.78rem;
116
+ min-width: 0;
117
+ }
118
+ .picker-prefix {
119
+ white-space: nowrap;
120
+ color: var(--muted);
121
+ }
122
+ .picker-prefix[data-text-label="true"] {
123
+ color: var(--ink);
124
+ font-weight: 700;
125
+ }
126
+ .picker select {
127
+ min-width: 10rem;
128
+ max-width: 17rem;
129
+ border: 1px solid var(--line);
130
+ border-radius: 0.35rem;
131
+ padding: 0.24rem 0.45rem;
132
+ background: #fff;
133
+ color: var(--ink);
134
+ box-shadow: none;
135
+ font-size: 0.8rem;
136
+ }
137
+ .workspace {
138
+ display: grid;
139
+ gap: 0.45rem;
140
+ padding: 0.45rem 0.55rem;
141
+ }
142
+ .sidebar,
143
+ .detail,
144
+ .empty-state {
145
+ background: #fff;
146
+ border: 1px solid #ece8df;
147
+ border-radius: 0.35rem;
148
+ box-shadow: none;
149
+ }
150
+ .toolbar {
151
+ display: flex;
152
+ justify-content: space-between;
153
+ gap: 0.45rem;
154
+ align-items: center;
155
+ padding: 0.35rem 0.5rem;
156
+ flex-wrap: wrap;
157
+ background: transparent;
158
+ }
159
+ .toolbar-actions {
160
+ display: flex;
161
+ gap: 0.3rem;
162
+ flex-wrap: wrap;
163
+ margin-left: auto;
164
+ }
165
+ .action,
166
+ .add-gem,
167
+ .link-button {
168
+ border: 1px solid var(--line);
169
+ border-radius: 0.3rem;
170
+ padding: 0.22rem 0.5rem;
171
+ background: #fff;
172
+ color: var(--ink);
173
+ font-size: 0.78rem;
174
+ }
175
+ .action-primary {
176
+ background: linear-gradient(145deg, #c55a28, #984119);
177
+ color: white;
178
+ border-color: rgba(152, 65, 25, 0.65);
179
+ }
180
+ .action[disabled],
181
+ .add-gem[disabled] {
182
+ opacity: 0.55;
183
+ cursor: not-allowed;
184
+ }
185
+ .toolbar-meta {
186
+ color: var(--muted);
187
+ display: flex;
188
+ gap: 0.28rem;
189
+ flex-wrap: wrap;
190
+ align-items: center;
191
+ font-size: 0.88rem;
192
+ justify-content: flex-start;
193
+ }
194
+ .workspace-body {
195
+ display: grid;
196
+ grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr);
197
+ gap: 0.45rem;
198
+ min-height: calc(100vh - 8rem);
199
+ height: calc(100vh - 8rem);
200
+ }
201
+ .sidebar {
202
+ padding: 0.45rem;
203
+ display: grid;
204
+ gap: 0.3rem;
205
+ align-content: start;
206
+ min-height: 0;
207
+ overflow: auto;
208
+ }
209
+ .detail-subtitle {
210
+ margin: 0.3rem 0 0;
211
+ color: var(--muted);
212
+ }
213
+ .detail-origin {
214
+ margin: 0;
215
+ color: var(--ink);
216
+ font-size: 0.9rem;
217
+ }
218
+ .sidebar-header {
219
+ display: grid;
220
+ gap: 0.35rem;
221
+ position: sticky;
222
+ top: -0.45rem;
223
+ z-index: 1;
224
+ background: #fff;
225
+ padding: 0.45rem 0 0.35rem;
226
+ border-bottom: 1px solid #f0ede6;
227
+ }
228
+ .sidebar-header-row {
229
+ display: flex;
230
+ align-items: center;
231
+ justify-content: space-between;
232
+ gap: 0.5rem;
233
+ }
234
+ .list-filters {
235
+ display: flex;
236
+ gap: 0.28rem;
237
+ flex-wrap: wrap;
238
+ }
239
+ .list-filter-button {
240
+ border: 1px solid var(--line);
241
+ border-radius: 999px;
242
+ padding: 0.18rem 0.5rem;
243
+ background: #fff;
244
+ color: var(--muted);
245
+ font-size: 0.74rem;
246
+ line-height: 1;
247
+ min-height: 2rem;
248
+ }
249
+ .list-filter-button.is-active {
250
+ border-color: rgba(47, 143, 91, 0.4);
251
+ background: var(--green-soft);
252
+ color: var(--green);
253
+ }
254
+ .gem-search {
255
+ width: 100%;
256
+ border: 1px solid #e2ddd2;
257
+ border-radius: 0.35rem;
258
+ padding: 0.32rem 0.45rem;
259
+ background: #fff;
260
+ color: var(--ink);
261
+ font-size: 0.78rem;
262
+ }
263
+ .gem-search::placeholder {
264
+ color: #93877b;
265
+ }
266
+ .gem-list {
267
+ display: grid;
268
+ gap: 0;
269
+ }
270
+ .gem-row {
271
+ display: grid;
272
+ gap: 0.08rem;
273
+ padding: 0.38rem 0.2rem;
274
+ border-radius: 0;
275
+ border: 0;
276
+ border-bottom: 1px solid #f0ede6;
277
+ background: transparent;
278
+ transition: background 120ms ease, color 120ms ease;
279
+ }
280
+ .gem-row[hidden] {
281
+ display: none;
282
+ }
283
+ .gem-row:hover,
284
+ .gem-row.is-selected {
285
+ background: #faf8f3;
286
+ }
287
+ .gem-name {
288
+ font-weight: 700;
289
+ font-size: 0.9rem;
290
+ }
291
+ .gem-name-row {
292
+ display: flex;
293
+ align-items: center;
294
+ justify-content: space-between;
295
+ gap: 0.5rem;
296
+ }
297
+ .gem-updated-dot {
298
+ width: 0.45rem;
299
+ height: 0.45rem;
300
+ border-radius: 999px;
301
+ background: var(--green);
302
+ flex: 0 0 auto;
303
+ margin-right: 0.2rem;
304
+ }
305
+ .gem-row.status-removed .gem-updated-dot {
306
+ background: var(--red);
307
+ }
308
+ .gem-version {
309
+ color: var(--muted);
310
+ font-size: 0.76rem;
311
+ }
312
+ .gem-row.status-added .gem-version {
313
+ color: var(--green);
314
+ font-weight: 600;
315
+ }
316
+ .detail {
317
+ padding: 0.5rem 0.8rem 0.5rem 0.5rem;
318
+ display: grid;
319
+ gap: 0.45rem;
320
+ align-content: start;
321
+ min-height: 0;
322
+ overflow: auto;
323
+ }
324
+ .detail-hero,
325
+ .panel-heading {
326
+ display: flex;
327
+ justify-content: space-between;
328
+ gap: 0.65rem;
329
+ align-items: start;
330
+ flex-wrap: wrap;
331
+ }
332
+ .detail-hero-copy {
333
+ display: grid;
334
+ gap: 0.2rem;
335
+ min-width: 0;
336
+ width: 100%;
337
+ }
338
+ .detail-title-row {
339
+ display: flex;
340
+ align-items: start;
341
+ justify-content: space-between;
342
+ gap: 0.65rem;
343
+ min-width: 0;
344
+ width: 100%;
345
+ }
346
+ .detail-hero-copy h2 {
347
+ margin: 0;
348
+ font-size: 2.35rem;
349
+ line-height: 1.02;
350
+ min-width: 0;
351
+ flex: 1 1 auto;
352
+ }
353
+ .detail-title-version {
354
+ font-size: 0.62em;
355
+ font-weight: 600;
356
+ color: var(--muted);
357
+ }
358
+ .detail-title-row .link-strip {
359
+ margin-left: auto;
360
+ align-self: start;
361
+ flex: 0 0 auto;
362
+ }
363
+ .panel-heading-meta {
364
+ color: var(--muted);
365
+ font-size: 0.76rem;
366
+ }
367
+ .empty-panel {
368
+ border: 1px solid #f0ede6;
369
+ border-radius: 0.25rem;
370
+ background: #fff;
371
+ padding: 0.5rem;
372
+ }
373
+ .link-strip {
374
+ display: flex;
375
+ gap: 0.3rem;
376
+ flex-wrap: wrap;
377
+ justify-content: flex-end;
378
+ }
379
+ .icon-button {
380
+ width: 2rem;
381
+ height: 2rem;
382
+ padding: 0;
383
+ display: inline-flex;
384
+ align-items: center;
385
+ justify-content: center;
386
+ }
387
+ .icon-button svg {
388
+ width: 1rem;
389
+ height: 1rem;
390
+ }
391
+ .revision-panel {
392
+ display: grid;
393
+ gap: 0.4rem;
394
+ }
395
+ .revision-group {
396
+ display: grid;
397
+ gap: 0.3rem;
398
+ }
399
+ .revision-group-header h4 {
400
+ margin: 0.8rem 0 0.3rem;
401
+ font-size: 1.35rem;
402
+ line-height: 1.15;
403
+ }
404
+ .detail-origin {
405
+ margin-top: 0.2rem;
406
+ }
407
+ .detail-origin-list {
408
+ margin: 0.2rem 0 0 1.1rem;
409
+ padding: 0;
410
+ }
411
+ .detail-origin-list li + li {
412
+ margin-top: 0.12rem;
413
+ }
414
+ .revision-card {
415
+ border-radius: 0.2rem;
416
+ border: 1px solid #f0ede6;
417
+ background: #fff;
418
+ overflow: hidden;
419
+ }
420
+ .revision-future {
421
+ border-style: dashed;
422
+ border-color: rgba(124, 124, 133, 0.55);
423
+ background: linear-gradient(180deg, rgba(124, 124, 133, 0.07), rgba(255,255,255,0.45));
424
+ }
425
+ .revision-current {
426
+ border-color: rgba(47, 143, 91, 0.25);
427
+ }
428
+ .revision-previous {
429
+ border-color: rgba(124, 124, 133, 0.2);
430
+ background: #f4f4f1;
431
+ }
432
+ .revision-card-header {
433
+ display: flex;
434
+ align-items: start;
435
+ justify-content: space-between;
436
+ gap: 0.4rem;
437
+ margin-bottom: 0;
438
+ }
439
+ .revision-card-titlebar {
440
+ width: 100%;
441
+ display: flex;
442
+ align-items: center;
443
+ justify-content: space-between;
444
+ flex-wrap: wrap;
445
+ gap: 0.45rem;
446
+ padding: 0.42rem 0.5rem 0.46rem;
447
+ margin: 0;
448
+ background: rgba(47, 143, 91, 0.09);
449
+ border-bottom: 1px solid #f0ede6;
450
+ min-width: 0;
451
+ }
452
+ .revision-previous .revision-card-titlebar {
453
+ background: rgba(124, 124, 133, 0.09);
454
+ }
455
+ .revision-future .revision-card-titlebar {
456
+ background: rgba(124, 124, 133, 0.07);
457
+ }
458
+ .revision-card-actions {
459
+ display: inline-flex;
460
+ align-items: center;
461
+ gap: 0.25rem;
462
+ flex: 0 0 auto;
463
+ margin-left: auto;
464
+ }
465
+ .revision-card h5 {
466
+ margin: 0;
467
+ font-size: 1.55rem;
468
+ line-height: 1.1;
469
+ color: var(--ink);
470
+ min-width: 0;
471
+ }
472
+ .revision-markup {
473
+ padding: 0.7rem;
474
+ }
475
+ .revision-markup a[href] {
476
+ color: #2563c9;
477
+ }
478
+ .revision-markup a[href]:hover {
479
+ text-decoration: underline;
480
+ }
481
+ .revision-markup > :first-child {
482
+ margin-top: 0;
483
+ }
484
+ .revision-markup > :last-child {
485
+ margin-bottom: 0;
486
+ }
487
+ .empty-state,
488
+ .empty-panel {
489
+ padding: 0.6rem;
490
+ }
491
+ @media (max-width: 980px) {
492
+ .topbar {
493
+ align-items: start;
494
+ flex-direction: column;
495
+ flex-wrap: wrap;
496
+ }
497
+ .brand-lockup h1 {
498
+ white-space: normal;
499
+ }
500
+ .picker-row {
501
+ width: 100%;
502
+ justify-content: stretch;
503
+ flex-wrap: wrap;
504
+ }
505
+ .picker {
506
+ width: 100%;
507
+ justify-content: space-between;
508
+ }
509
+ .picker select {
510
+ min-width: 0;
511
+ width: 100%;
512
+ max-width: none;
513
+ }
514
+ .workspace-body {
515
+ grid-template-columns: 1fr;
516
+ min-height: 0;
517
+ height: auto;
518
+ }
519
+ .sidebar,
520
+ .detail {
521
+ overflow: visible;
522
+ }
523
+ }