@blinkk/root-cms 1.0.0-alpha.26 → 1.0.0-alpha.28

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/dist/ui.css ADDED
@@ -0,0 +1,529 @@
1
+ /* ui/components/SplitPanel/SplitPanel.css */
2
+ .SplitPanel {
3
+ display: flex;
4
+ height: 100%;
5
+ }
6
+ .SplitPanel__divider {
7
+ flex: 0 0 3px;
8
+ width: 3px;
9
+ background-color: var(--color-border);
10
+ height: 100%;
11
+ cursor: col-resize;
12
+ transition: background-color 0.18s ease;
13
+ }
14
+ .SplitPanel__divider:hover {
15
+ background-color: lightblue;
16
+ }
17
+ .SplitPanel__item.static {
18
+ flex: 0 0 var(--panel-size, 100%);
19
+ }
20
+ .SplitPanel__item.fluid {
21
+ flex: 1;
22
+ }
23
+ .SplitPanel.dragging .SplitPanel__item {
24
+ pointer-events: none;
25
+ user-select: none;
26
+ }
27
+
28
+ /* ui/layout/Layout.css */
29
+ .Layout {
30
+ display: grid;
31
+ grid-template-areas: "top top" "side main" "bottom bottom";
32
+ grid-template-columns: 48px 1fr;
33
+ }
34
+ .Layout__top {
35
+ grid-area: top;
36
+ height: 48px;
37
+ display: flex;
38
+ align-items: center;
39
+ padding: 8px;
40
+ border-bottom: 1px solid var(--color-border);
41
+ }
42
+ .Layout__top__logo {
43
+ font-size: 14px;
44
+ line-height: 1;
45
+ font-weight: 700;
46
+ text-decoration: none;
47
+ text-transform: uppercase;
48
+ padding: 8px 12px;
49
+ display: flex;
50
+ gap: 4px;
51
+ transition: background-color 0.18s ease;
52
+ border-radius: 4px;
53
+ }
54
+ .Layout__top__version {
55
+ font-family: var(--font-family-mono);
56
+ font-size: 11px;
57
+ font-weight: 700;
58
+ letter-spacing: -0.2px;
59
+ margin-left: 4px;
60
+ background-color: lightblue;
61
+ padding: 0 4px;
62
+ border-radius: 2px;
63
+ }
64
+ .Layout__top__logo:hover {
65
+ background-color: var(--button-background-hover);
66
+ }
67
+ .Layout__top__logo:active {
68
+ background-color: var(--button-background-active);
69
+ }
70
+ .Layout__side {
71
+ grid-area: side;
72
+ border-right: 1px solid var(--color-border);
73
+ height: calc(100vh - 48px);
74
+ display: flex;
75
+ flex-direction: column;
76
+ align-items: center;
77
+ }
78
+ .Layout__side a {
79
+ display: flex;
80
+ position: relative;
81
+ width: 100%;
82
+ height: 48px;
83
+ justify-content: center;
84
+ align-items: center;
85
+ transition: background-color 0.18s ease;
86
+ }
87
+ .Layout__side a:hover {
88
+ background-color: var(--button-background-hover);
89
+ }
90
+ .Layout__side a::after {
91
+ content: "";
92
+ display: block;
93
+ position: absolute;
94
+ left: 0;
95
+ top: 0;
96
+ height: 100%;
97
+ width: 3px;
98
+ background-color: transparent;
99
+ transition: background-color 0.18s ease;
100
+ }
101
+ .Layout__side a.active::after {
102
+ background-color: lightblue;
103
+ }
104
+ .Layout__main {
105
+ grid-area: main;
106
+ }
107
+ .Layout__bottom {
108
+ grid-area: bottom;
109
+ }
110
+
111
+ /* ui/pages/CollectionPage/CollectionPage.css */
112
+ .CollectionPage__side__title {
113
+ padding: 8px 12px;
114
+ text-transform: uppercase;
115
+ font-size: 13px;
116
+ font-weight: 700;
117
+ }
118
+ .CollectionPage__side__collections {
119
+ display: flex;
120
+ flex-direction: column;
121
+ padding-top: 8px;
122
+ }
123
+ .CollectionPage__side__search input {
124
+ display: block;
125
+ width: 100%;
126
+ border: 1px solid var(--color-border);
127
+ border-left: none;
128
+ border-right: none;
129
+ border-radius: 0;
130
+ line-height: 24px;
131
+ padding: 4px 12px;
132
+ font-family: inherit;
133
+ }
134
+ .CollectionPage__side__search input:focus {
135
+ outline: none;
136
+ }
137
+ .CollectionPage__side__search input::-webkit-input-placeholder {
138
+ color: #E5E5E5;
139
+ }
140
+ .CollectionPage__side__collection {
141
+ display: flex;
142
+ align-items: center;
143
+ padding: 8px 12px;
144
+ gap: 8px;
145
+ width: 100%;
146
+ background: transparent;
147
+ border: none;
148
+ cursor: pointer;
149
+ font-size: 14px;
150
+ font-weight: 500;
151
+ text-decoration: none;
152
+ transition: background-color 0.18s ease;
153
+ position: relative;
154
+ }
155
+ .CollectionPage__side__collection.active {
156
+ color: black;
157
+ }
158
+ .CollectionPage__side__collection:hover {
159
+ background-color: var(--button-background-hover);
160
+ }
161
+ .CollectionPage__side__collection:active {
162
+ background-color: var(--button-background-active);
163
+ }
164
+ .CollectionPage__side__collection__arrow {
165
+ position: absolute;
166
+ top: calc(50% - 10px);
167
+ right: 12px;
168
+ }
169
+ .CollectionPage__main__unselected {
170
+ display: inline-flex;
171
+ flex-direction: column;
172
+ align-items: center;
173
+ justify-content: center;
174
+ gap: 12px;
175
+ text-align: center;
176
+ padding: 48px;
177
+ }
178
+ .CollectionPage__main__unselected__title {
179
+ max-width: 400px;
180
+ font-weight: 500;
181
+ }
182
+ .CollectionPage__collection__header {
183
+ padding: 12px;
184
+ }
185
+ .CollectionPage__collection__header__title {
186
+ font-size: 20px;
187
+ font-weight: 700;
188
+ }
189
+ .CollectionPage__collection__header__description {
190
+ font-size: 14px;
191
+ font-weight: 500;
192
+ margin-top: 4px;
193
+ }
194
+ .CollectionPage__collection__header__description a {
195
+ font-weight: 700;
196
+ }
197
+ .CollectionPage__collection__header__description a:hover {
198
+ color: black;
199
+ }
200
+ .CollectionPage__collection__tabs [role=tab] {
201
+ font-weight: 500;
202
+ }
203
+ .CollectionPage__collection__tabs [role=tab][data-active] {
204
+ border-color: lightblue;
205
+ }
206
+ .CollectionPage__collection__tabs [role=tablist] {
207
+ border-color: var(--color-border);
208
+ }
209
+ .CollectionPage__collection__docsTab {
210
+ padding: 12px;
211
+ }
212
+ .CollectionPage__collection__docsTab__controls {
213
+ display: flex;
214
+ justify-content: flex-end;
215
+ gap: 16px;
216
+ align-items: center;
217
+ font-size: 14px;
218
+ }
219
+ .CollectionPage__collection__docsTab__controls__sort {
220
+ display: flex;
221
+ gap: 8px;
222
+ align-items: center;
223
+ }
224
+ .CollectionPage__collection__docsTab__controls__sort__label {
225
+ font-weight: 600;
226
+ }
227
+
228
+ /* ui/components/NewDocModal/NewDocModal.css */
229
+ .NewDocModal__body {
230
+ font-size: 12px;
231
+ line-height: 1.5;
232
+ font-weight: 500;
233
+ }
234
+ .NewDocModal__slug {
235
+ margin-top: 16px;
236
+ }
237
+ .NewDocModal__buttons {
238
+ margin-top: 24px;
239
+ display: flex;
240
+ justify-content: flex-end;
241
+ gap: 12px;
242
+ }
243
+
244
+ /* ui/pages/DocumentEditor/DocumentEditor.css */
245
+ .DocumentEditor {
246
+ font-size: 12px;
247
+ }
248
+ .DocumentEditor__loading {
249
+ display: flex;
250
+ align-items: center;
251
+ justify-content: center;
252
+ height: 200px;
253
+ }
254
+ .DocumentEditor__fields {
255
+ display: flex;
256
+ flex-direction: column;
257
+ gap: 16px;
258
+ }
259
+ .DocumentEditor__field__name {
260
+ font-weight: 600;
261
+ }
262
+ .DocumentEditor__ObjectField__fields {
263
+ display: flex;
264
+ flex-direction: column;
265
+ gap: 24px;
266
+ }
267
+ .DocumentEditor__field__header {
268
+ margin-bottom: 8px;
269
+ }
270
+ .DocumentEditor__field[data-type=object][data-level="0"] > .DocumentEditor__field__header {
271
+ padding: 4px 12px;
272
+ margin-top: 12px;
273
+ margin-left: -12px;
274
+ margin-right: -12px;
275
+ border-top: 1px solid var(--color-border);
276
+ border-bottom: 1px solid var(--color-border);
277
+ }
278
+ .DocumentEditor__field[data-type=object]:not([data-level="0"]) .DocumentEditor__ObjectField__fields {
279
+ padding-left: 12px;
280
+ border-left: 2px solid lightblue;
281
+ }
282
+ .DocumentEditor__ArrayField__items {
283
+ display: flex;
284
+ flex-direction: column;
285
+ gap: 8px;
286
+ }
287
+ .DocumentEditor__ArrayField__item__header {
288
+ cursor: pointer;
289
+ user-select: none;
290
+ display: flex;
291
+ align-items: center;
292
+ }
293
+ .DocumentEditor__ArrayField__item__header__icon {
294
+ flex-shrink: 0;
295
+ margin-right: 8px;
296
+ transform: rotate(90deg);
297
+ }
298
+ .DocumentEditor__ArrayField__item[open] .DocumentEditor__ArrayField__item__header__icon {
299
+ transform: rotate(180deg);
300
+ margin-top: -2px;
301
+ }
302
+ .DocumentEditor__ArrayField__item__header__preview {
303
+ font-family: var(--font-family-mono);
304
+ font-weight: 500;
305
+ flex: 1;
306
+ padding-right: 8px;
307
+ white-space: nowrap;
308
+ overflow: hidden;
309
+ text-overflow: ellipsis;
310
+ }
311
+ .DocumentEditor__ArrayField__item__header__controls {
312
+ flex-shrink: 0;
313
+ display: flex;
314
+ align-items: center;
315
+ gap: 4px;
316
+ }
317
+ .DocumentEditor__ArrayField__item__header__controls__arrows {
318
+ display: flex;
319
+ gap: 8px;
320
+ }
321
+ .DocumentEditor__ArrayField__item__header__controls__arrow {
322
+ border: none;
323
+ margin: 0;
324
+ padding: 0;
325
+ background: transparent;
326
+ cursor: pointer;
327
+ transition: transform 0.18s ease;
328
+ }
329
+ .DocumentEditor__ArrayField__item__header__controls__arrow:active {
330
+ transform: translateY(2px);
331
+ }
332
+ .DocumentEditor__ArrayField__item__header__controls__dots {
333
+ color: black;
334
+ }
335
+ .DocumentEditor__ArrayField__items__empty {
336
+ font-family: var(--font-family-mono);
337
+ }
338
+ .DocumentEditor__ArrayField__item__header__controls__menu [role=menuitem] {
339
+ padding: 8px 12px;
340
+ font-size: 14px;
341
+ }
342
+ .DocumentEditor__ArrayField__item__header__controls__menu [role=menuitem]:hover {
343
+ background-color: var(--button-background-hover);
344
+ }
345
+ .DocumentEditor__ArrayField__item__header__controls__menu [role=menuitem]:active {
346
+ background-color: var(--button-background-active);
347
+ }
348
+ .DocumentEditor__ArrayField__item:not([open]) .DocumentEditor__ArrayField__item__header {
349
+ border-left: 2px solid lightblue;
350
+ padding-left: 8px;
351
+ }
352
+ .DocumentEditor__ArrayField__item[open] .DocumentEditor__ArrayField__item__body {
353
+ padding: 8px;
354
+ border: 2px solid lightblue;
355
+ }
356
+ .DocumentEditor__ArrayField__add {
357
+ margin-top: 16px;
358
+ }
359
+ .DocumentEditor__OneOfField__select {
360
+ display: flex;
361
+ gap: 8px;
362
+ align-items: center;
363
+ }
364
+ .DocumentEditor__OneOfField__select__label {
365
+ font-weight: 600;
366
+ }
367
+ .DocumentEditor__OneOfField__fields {
368
+ margin-top: 24px;
369
+ display: flex;
370
+ flex-direction: column;
371
+ gap: 24px;
372
+ }
373
+
374
+ /* ui/pages/DocumentPage/DocumentPage.css */
375
+ .DocumentPage__side {
376
+ max-height: calc(100vh - 48px);
377
+ overflow: auto;
378
+ }
379
+ .DocumentPage__side__header {
380
+ font-weight: 600;
381
+ font-size: 12px;
382
+ padding: 4px 12px 4px 4px;
383
+ border-bottom: 1px solid var(--color-border);
384
+ display: flex;
385
+ align-items: center;
386
+ gap: 4px;
387
+ }
388
+ .DocumentPage__side__header__back {
389
+ color: var(--color-text-default);
390
+ }
391
+ .DocumentPage__side__editor {
392
+ padding: 8px 12px;
393
+ }
394
+ .DocumentPage__main {
395
+ padding: 12px;
396
+ }
397
+
398
+ /* ui/pages/ProjectPage/ProjectPage.css */
399
+ .ProjectPage {
400
+ padding: 8px;
401
+ }
402
+ .ProjectPage__collection {
403
+ display: flex;
404
+ align-items: center;
405
+ gap: 4px;
406
+ }
407
+
408
+ /* ui/pages/NotFoundPage/NotFoundPage.css */
409
+ .NotFoundPage {
410
+ display: flex;
411
+ flex-direction: column;
412
+ align-items: center;
413
+ justify-content: center;
414
+ gap: 12px;
415
+ width: 100%;
416
+ height: 100%;
417
+ text-align: center;
418
+ }
419
+ .NotFoundPage__body {
420
+ max-width: 400px;
421
+ font-weight: 500;
422
+ }
423
+
424
+ /* ui/styles/global.css */
425
+ :root {
426
+ --font-family-default: "Inter", sans-serif;
427
+ --font-family-mono:
428
+ ui-monospace,
429
+ SFMono-Regular,
430
+ Menlo,
431
+ Monaco,
432
+ Consolas,
433
+ monospace;
434
+ --color-text-default: #333333;
435
+ --color-border: #EFEFEF;
436
+ --button-background-hover: #F5F5F5;
437
+ --button-background-active: #E5E5E5;
438
+ }
439
+ html {
440
+ box-sizing: border-box;
441
+ overflow-x: hidden;
442
+ font-size: 16px;
443
+ line-height: 1.5;
444
+ }
445
+ *,
446
+ *:before,
447
+ *:after {
448
+ box-sizing: inherit;
449
+ }
450
+ html,
451
+ body {
452
+ font-family: var(--font-family-default);
453
+ color: var(--color-text-default);
454
+ height: 100%;
455
+ margin: 0;
456
+ -webkit-font-smoothing: antialiased;
457
+ -moz-osx-font-smoothing: grayscale;
458
+ scroll-behavior: smooth;
459
+ }
460
+ img,
461
+ picture,
462
+ figure,
463
+ video,
464
+ canvas,
465
+ svg,
466
+ iframe {
467
+ display: block;
468
+ max-width: 100%;
469
+ height: auto;
470
+ margin: 0;
471
+ }
472
+ a {
473
+ color: inherit;
474
+ }
475
+ select {
476
+ color-scheme: light;
477
+ }
478
+ h1,
479
+ h2,
480
+ h3,
481
+ h4,
482
+ h5,
483
+ p {
484
+ margin: 0;
485
+ }
486
+ body.menu\:open {
487
+ overflow: hidden;
488
+ }
489
+ #root {
490
+ margin: 0 auto;
491
+ min-height: 100vh;
492
+ position: relative;
493
+ }
494
+ .bootstrap {
495
+ font-size: 48px;
496
+ font-weight: 900;
497
+ width: 100%;
498
+ height: 100vh;
499
+ display: flex;
500
+ flex-direction: column;
501
+ justify-content: center;
502
+ align-items: center;
503
+ text-align: center;
504
+ padding: 40px;
505
+ gap: 36px;
506
+ position: relative;
507
+ }
508
+ .bootstrap-error {
509
+ font-size: 14px;
510
+ font-weight: 400;
511
+ position: absolute;
512
+ bottom: 100px;
513
+ left: 0;
514
+ right: 0;
515
+ text-align: center;
516
+ animation: 0.5s forwards bootstrap-loading-error;
517
+ animation-delay: 1s;
518
+ opacity: 0;
519
+ }
520
+ @keyframes bootstrap-loading-error {
521
+ 0% {
522
+ opacity: 0;
523
+ }
524
+ 100% {
525
+ opacity: 1;
526
+ }
527
+ }
528
+
529
+ /* ui/styles/main.css */