@blinkk/root-cms 1.0.0-alpha.9 → 1.0.0-beta.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/dist/ui/ui.css ADDED
@@ -0,0 +1,989 @@
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
+ height: 100%;
10
+ cursor: col-resize;
11
+ position: relative;
12
+ }
13
+ .SplitPanel__divider::before {
14
+ content: "";
15
+ display: block;
16
+ z-index: 0;
17
+ position: absolute;
18
+ top: 0;
19
+ height: 100%;
20
+ left: 1px;
21
+ width: 1px;
22
+ background-color: var(--color-border);
23
+ }
24
+ .SplitPanel__divider::after {
25
+ content: "";
26
+ display: block;
27
+ z-index: 1;
28
+ position: absolute;
29
+ top: 0;
30
+ height: 100%;
31
+ left: 0;
32
+ width: 100%;
33
+ background-color: transparent;
34
+ transition: background-color 0.18s ease;
35
+ }
36
+ .SplitPanel__divider:hover::after {
37
+ background-color: lightblue;
38
+ }
39
+ .SplitPanel__item.static {
40
+ flex: 0 0 var(--panel-size, 100%);
41
+ }
42
+ .SplitPanel__item.fluid {
43
+ flex: 1;
44
+ }
45
+ .SplitPanel.dragging .SplitPanel__item {
46
+ pointer-events: none;
47
+ user-select: none;
48
+ }
49
+
50
+ /* ui/layout/Layout.css */
51
+ .Layout {
52
+ display: grid;
53
+ grid-template-areas: "top top" "side main" "bottom bottom";
54
+ grid-template-columns: 48px 1fr;
55
+ }
56
+ .Layout__top {
57
+ grid-area: top;
58
+ height: 48px;
59
+ display: flex;
60
+ align-items: center;
61
+ padding: 8px;
62
+ border-bottom: 1px solid var(--color-border);
63
+ }
64
+ .Layout__top__logo {
65
+ font-size: 14px;
66
+ line-height: 1;
67
+ font-weight: 700;
68
+ text-decoration: none;
69
+ text-transform: uppercase;
70
+ padding: 8px 12px;
71
+ display: flex;
72
+ gap: 4px;
73
+ transition: background-color 0.18s ease;
74
+ border-radius: 4px;
75
+ }
76
+ .Layout__top__version {
77
+ font-family: var(--font-family-mono);
78
+ font-size: 11px;
79
+ font-weight: 700;
80
+ letter-spacing: -0.2px;
81
+ margin-left: 4px;
82
+ background-color: lightblue;
83
+ padding: 0 4px;
84
+ border-radius: 2px;
85
+ }
86
+ .Layout__top__logo:hover {
87
+ background-color: var(--button-background-hover);
88
+ }
89
+ .Layout__top__logo:active {
90
+ background-color: var(--button-background-active);
91
+ }
92
+ .Layout__side {
93
+ grid-area: side;
94
+ border-right: 1px solid var(--color-border);
95
+ height: calc(100vh - 48px);
96
+ display: flex;
97
+ flex-direction: column;
98
+ align-items: center;
99
+ justify-content: space-between;
100
+ padding-bottom: 12px;
101
+ }
102
+ .Layout__side__button {
103
+ width: 100%;
104
+ height: 48px;
105
+ }
106
+ .Layout__side__button a {
107
+ display: flex;
108
+ position: relative;
109
+ width: 100%;
110
+ height: 100%;
111
+ justify-content: center;
112
+ align-items: center;
113
+ transition: background-color 0.18s ease;
114
+ }
115
+ .Layout__side__button a:hover {
116
+ background-color: var(--button-background-hover);
117
+ }
118
+ .Layout__side__button a::after {
119
+ content: "";
120
+ display: block;
121
+ position: absolute;
122
+ left: 0;
123
+ top: 0;
124
+ height: 100%;
125
+ width: 3px;
126
+ background-color: transparent;
127
+ transition: background-color 0.18s ease;
128
+ }
129
+ .Layout__side__button a.active::after {
130
+ background-color: lightblue;
131
+ }
132
+ .Layout__side__user .mantine-Tooltip-root {
133
+ display: block;
134
+ }
135
+ .Layout__main {
136
+ grid-area: main;
137
+ }
138
+ .Layout__bottom {
139
+ grid-area: bottom;
140
+ }
141
+
142
+ /* ui/components/NewDocModal/NewDocModal.css */
143
+ .NewDocModal__body {
144
+ font-size: 12px;
145
+ line-height: 1.5;
146
+ font-weight: 500;
147
+ }
148
+ .NewDocModal__slug {
149
+ margin-top: 16px;
150
+ }
151
+ .NewDocModal__buttons {
152
+ margin-top: 24px;
153
+ display: flex;
154
+ justify-content: flex-end;
155
+ gap: 12px;
156
+ }
157
+
158
+ /* ui/pages/CollectionPage/CollectionPage.css */
159
+ .CollectionPage__side__title {
160
+ padding: 8px 12px;
161
+ text-transform: uppercase;
162
+ font-size: 13px;
163
+ font-weight: 700;
164
+ }
165
+ .CollectionPage__side__collections {
166
+ display: flex;
167
+ flex-direction: column;
168
+ padding-top: 8px;
169
+ }
170
+ .CollectionPage__side__search input {
171
+ display: block;
172
+ width: 100%;
173
+ border: 1px solid var(--color-border);
174
+ border-left: none;
175
+ border-right: none;
176
+ border-radius: 0;
177
+ line-height: 24px;
178
+ padding: 4px 12px;
179
+ font-family: inherit;
180
+ }
181
+ .CollectionPage__side__search input:focus {
182
+ outline: none;
183
+ }
184
+ .CollectionPage__side__search input::-webkit-input-placeholder {
185
+ color: #E5E5E5;
186
+ }
187
+ .CollectionPage__side__collection {
188
+ display: grid;
189
+ grid-template-columns: 20px 1fr;
190
+ align-items: center;
191
+ padding: 8px 12px;
192
+ column-gap: 12px;
193
+ row-gap: 4px;
194
+ width: 100%;
195
+ background: transparent;
196
+ border: none;
197
+ cursor: pointer;
198
+ font-size: 14px;
199
+ font-weight: 500;
200
+ text-decoration: none;
201
+ transition: background-color 0.18s ease;
202
+ position: relative;
203
+ }
204
+ .CollectionPage__side__collection.active {
205
+ color: black;
206
+ background-color: #efefef;
207
+ }
208
+ .CollectionPage__side__collection:hover {
209
+ background-color: var(--button-background-hover);
210
+ }
211
+ .CollectionPage__side__collection:active {
212
+ background-color: var(--button-background-active);
213
+ }
214
+ .CollectionPage__side__collection__icon {
215
+ margin-top: 2px;
216
+ }
217
+ .CollectionPage__side__collection__desc {
218
+ grid-column: 2 / span 1;
219
+ font-size: 12px;
220
+ }
221
+ .CollectionPage__side__collection__arrow {
222
+ position: absolute;
223
+ top: calc(50% - 10px);
224
+ right: 12px;
225
+ }
226
+ .CollectionPage__main__unselected {
227
+ padding: 12px;
228
+ display: flex;
229
+ align-items: center;
230
+ gap: 8px;
231
+ }
232
+ .CollectionPage__main__unselected svg {
233
+ transform: rotate(180deg);
234
+ }
235
+ .CollectionPage__main__unselected__title {
236
+ font-size: 14px;
237
+ font-weight: 500;
238
+ }
239
+ .CollectionPage__collection__header {
240
+ padding: 12px;
241
+ display: none;
242
+ }
243
+ .CollectionPage__collection__header__title {
244
+ font-size: 20px;
245
+ font-weight: 700;
246
+ }
247
+ .CollectionPage__collection__header__description {
248
+ font-size: 14px;
249
+ font-weight: 500;
250
+ margin-top: 4px;
251
+ }
252
+ .CollectionPage__collection__header__description a {
253
+ font-weight: 700;
254
+ }
255
+ .CollectionPage__collection__header__description a:hover {
256
+ color: black;
257
+ }
258
+ .CollectionPage__collection__tabs .mantine-Tabs-tabsListWrapper {
259
+ display: none;
260
+ }
261
+ .CollectionPage__collection__tabs .mantine-Tabs-body {
262
+ padding-top: 0;
263
+ }
264
+ .CollectionPage__collection__tabs [role=tab] {
265
+ font-weight: 500;
266
+ }
267
+ .CollectionPage__collection__tabs [role=tab][data-active] {
268
+ border-color: lightblue;
269
+ }
270
+ .CollectionPage__collection__tabs [role=tablist] {
271
+ border-color: var(--color-border);
272
+ }
273
+ .CollectionPage__collection__docsTab {
274
+ padding: 16px 12px;
275
+ }
276
+ .CollectionPage__collection__docsTab__header {
277
+ display: flex;
278
+ justify-content: space-between;
279
+ align-items: center;
280
+ gap: 16px;
281
+ }
282
+ .CollectionPage__collection__docsTab__header__title {
283
+ flex: 1;
284
+ }
285
+ .CollectionPage__collection__docsTab__controls {
286
+ display: flex;
287
+ justify-content: flex-end;
288
+ gap: 16px;
289
+ align-items: center;
290
+ font-size: 14px;
291
+ }
292
+ .CollectionPage__collection__docsTab__controls__sort {
293
+ display: flex;
294
+ gap: 8px;
295
+ align-items: center;
296
+ }
297
+ .CollectionPage__collection__docsTab__controls__sort__label {
298
+ font-weight: 600;
299
+ }
300
+ .CollectionPage__collection__docsList {
301
+ margin-top: 16px;
302
+ border-bottom: 1px solid var(--color-border);
303
+ }
304
+ .CollectionPage__collection__docsList__doc {
305
+ display: flex;
306
+ align-items: center;
307
+ padding: 8px 0;
308
+ border-top: 1px solid var(--color-border);
309
+ }
310
+ .CollectionPage__collection__docsList__doc__content {
311
+ display: block;
312
+ padding: 0 12px;
313
+ text-decoration: none;
314
+ flex: 1;
315
+ }
316
+ .CollectionPage__collection__docsTab__content__loading {
317
+ display: flex;
318
+ justify-content: center;
319
+ margin-top: 90px;
320
+ }
321
+ .CollectionPage__collection__docsList__doc__content__header {
322
+ display: flex;
323
+ align-items: center;
324
+ gap: 12px;
325
+ }
326
+ .CollectionPage__collection__docsList__doc__content__header__badges {
327
+ display: flex;
328
+ align-items: center;
329
+ gap: 12px;
330
+ }
331
+ .CollectionPage__collection__docsList__doc__content__header__badges .mantine-Tooltip-root {
332
+ display: block;
333
+ }
334
+ .CollectionPage__collection__docsList__doc__content__header__badges .mantine-Badge-root {
335
+ display: flex;
336
+ }
337
+ .CollectionPage__collection__docsList__doc__content__header__docId {
338
+ font-size: 14px;
339
+ font-weight: 500;
340
+ }
341
+ .CollectionPage__collection__docsList__doc__image {
342
+ flex-shrink: 0;
343
+ }
344
+ .CollectionPage__collection__docsList__doc__content__title {
345
+ line-height: 36px;
346
+ font-size: 24px;
347
+ font-weight: 600;
348
+ overflow: hidden;
349
+ text-overflow: ellipsis;
350
+ white-space: nowrap;
351
+ }
352
+ .CollectionPage__collection__docsList__doc__content__url {
353
+ font-size: 12px;
354
+ font-weight: 500;
355
+ color: #ababab;
356
+ }
357
+ .CollectionPage__collection__docsEmpty {
358
+ display: flex;
359
+ flex-direction: column;
360
+ align-items: center;
361
+ text-align: center;
362
+ gap: 12px;
363
+ margin-top: 80px;
364
+ }
365
+ .CollectionPage__collection__docsEmpty__title {
366
+ font-size: 14px;
367
+ font-weight: 500;
368
+ }
369
+
370
+ /* ui/components/Heading/Heading.css */
371
+ .heading {
372
+ font-size: 18px;
373
+ line-height: 1.2;
374
+ font-weight: 700;
375
+ margin-top: 0;
376
+ margin-bottom: 0;
377
+ }
378
+ .heading.size\:h1 {
379
+ font-size: 24px;
380
+ }
381
+ .heading.size\:h2 {
382
+ font-size: 18px;
383
+ }
384
+ .heading.size\:h3 {
385
+ font-size: 16px;
386
+ }
387
+ .heading.weight\:regular {
388
+ font-weight: 400;
389
+ }
390
+ .heading.weight\:semi-bold {
391
+ font-weight: 500;
392
+ }
393
+ .heading.weight\:bold {
394
+ font-weight: 700;
395
+ }
396
+ .heading.color\:gray {
397
+ color: var(--color-text-gray);
398
+ }
399
+ .heading.color\:dark {
400
+ color: var(--color-text-dark);
401
+ }
402
+
403
+ /* ui/components/Text/Text.css */
404
+ .text {
405
+ font-size: 14px;
406
+ line-height: 1.5;
407
+ font-weight: 400;
408
+ color: var(--color-text-default);
409
+ }
410
+ .text.size\:body-sm {
411
+ font-size: 12px;
412
+ }
413
+ .text.size\:body {
414
+ font-size: 14px;
415
+ }
416
+ .text.size\:body-lg {
417
+ font-size: 16px;
418
+ }
419
+ .text.weight\:regular {
420
+ font-weight: 400;
421
+ }
422
+ .text.weight\:semi-bold {
423
+ font-weight: 500;
424
+ }
425
+ .text.weight\:bold {
426
+ font-weight: 700;
427
+ }
428
+ .text.color\:gray {
429
+ color: var(--color-text-gray);
430
+ }
431
+ .text.color\:dark {
432
+ color: var(--color-text-dark);
433
+ }
434
+ .text code {
435
+ background: #efefef;
436
+ padding: 4px 8px;
437
+ border-radius: 2px;
438
+ white-space: nowrap;
439
+ font-family: var(--font-family-mono);
440
+ font-weight: 600;
441
+ margin-left: 4px;
442
+ margin-right: 4px;
443
+ }
444
+
445
+ /* ui/components/DocEditor/DocEditor.css */
446
+ .DocEditor {
447
+ font-size: 12px;
448
+ position: relative;
449
+ }
450
+ .DocEditor__loading {
451
+ display: flex;
452
+ align-items: center;
453
+ justify-content: center;
454
+ height: 200px;
455
+ }
456
+ .DocEditor__statusBar {
457
+ position: fixed;
458
+ top: 0;
459
+ right: 0;
460
+ height: 48px;
461
+ padding: 0 10px;
462
+ display: flex;
463
+ align-items: center;
464
+ justify-content: flex-end;
465
+ }
466
+ .DocEditor__statusBar__saveState {
467
+ font-style: italic;
468
+ font-weight: 500;
469
+ }
470
+ .DocEditor__statusBar__saveState,
471
+ .DocEditor__statusBar__statusBadges {
472
+ margin-right: 16px;
473
+ }
474
+ .DocEditor__statusBar__actionsMenu {
475
+ margin-left: 4px;
476
+ }
477
+ .DocEditor__fields {
478
+ display: flex;
479
+ flex-direction: column;
480
+ gap: 16px;
481
+ }
482
+ .DocEditor__field__name {
483
+ font-weight: 600;
484
+ }
485
+ .DocEditor__ObjectField__fields {
486
+ display: flex;
487
+ flex-direction: column;
488
+ gap: 24px;
489
+ }
490
+ .DocEditor__field__header {
491
+ margin-bottom: 8px;
492
+ }
493
+ .DocEditor__field[data-type=object][data-level="0"] > .DocEditor__field__header {
494
+ padding: 4px 12px;
495
+ margin-top: 12px;
496
+ margin-left: -12px;
497
+ margin-right: -12px;
498
+ border-top: 1px solid var(--color-border);
499
+ border-bottom: 1px solid var(--color-border);
500
+ }
501
+ .DocEditor__field[data-type=object]:not([data-level="0"]) .DocEditor__ObjectField__fields {
502
+ padding-left: 12px;
503
+ border-left: 2px solid lightblue;
504
+ }
505
+ .DocEditor__ArrayField__items {
506
+ display: flex;
507
+ flex-direction: column;
508
+ gap: 8px;
509
+ }
510
+ .DocEditor__ArrayField__item__header {
511
+ cursor: pointer;
512
+ user-select: none;
513
+ display: flex;
514
+ align-items: center;
515
+ }
516
+ .DocEditor__ArrayField__item__header__icon {
517
+ flex-shrink: 0;
518
+ margin-right: 8px;
519
+ transform: rotate(90deg);
520
+ }
521
+ .DocEditor__ArrayField__item[open] .DocEditor__ArrayField__item__header__icon {
522
+ transform: rotate(180deg);
523
+ margin-top: -2px;
524
+ }
525
+ .DocEditor__ArrayField__item__header__preview {
526
+ font-family: var(--font-family-mono);
527
+ font-weight: 500;
528
+ flex: 1;
529
+ padding-right: 8px;
530
+ white-space: nowrap;
531
+ overflow: hidden;
532
+ text-overflow: ellipsis;
533
+ }
534
+ .DocEditor__ArrayField__item__header__controls {
535
+ flex-shrink: 0;
536
+ display: flex;
537
+ align-items: center;
538
+ gap: 4px;
539
+ }
540
+ .DocEditor__ArrayField__item__header__controls__arrows {
541
+ display: flex;
542
+ gap: 8px;
543
+ }
544
+ .DocEditor__ArrayField__item__header__controls__arrow {
545
+ border: none;
546
+ margin: 0;
547
+ padding: 0;
548
+ background: transparent;
549
+ cursor: pointer;
550
+ transition: transform 0.18s ease;
551
+ }
552
+ .DocEditor__ArrayField__item__header__controls__arrow:active {
553
+ transform: translateY(2px);
554
+ }
555
+ .DocEditor__ArrayField__item__header__controls__dots {
556
+ color: black;
557
+ }
558
+ .DocEditor__ArrayField__items__empty {
559
+ font-family: var(--font-family-mono);
560
+ }
561
+ .DocEditor__ArrayField__item__header__controls__menu [role=menuitem] {
562
+ padding: 8px 12px;
563
+ font-size: 14px;
564
+ }
565
+ .DocEditor__ArrayField__item__header__controls__menu [role=menuitem]:hover {
566
+ background-color: var(--button-background-hover);
567
+ }
568
+ .DocEditor__ArrayField__item__header__controls__menu [role=menuitem]:active {
569
+ background-color: var(--button-background-active);
570
+ }
571
+ .DocEditor__ArrayField__item:not([open]) .DocEditor__ArrayField__item__header {
572
+ border-left: 2px solid lightblue;
573
+ padding-left: 8px;
574
+ }
575
+ .DocEditor__ArrayField__item[open] .DocEditor__ArrayField__item__body {
576
+ padding: 8px;
577
+ border: 2px solid lightblue;
578
+ }
579
+ .DocEditor__ArrayField__add {
580
+ margin-top: 16px;
581
+ }
582
+ .DocEditor__OneOfField__select {
583
+ display: flex;
584
+ gap: 8px;
585
+ align-items: center;
586
+ justify-content: flex-end;
587
+ }
588
+ .DocEditor__OneOfField__select__label {
589
+ font-weight: 600;
590
+ }
591
+ .DocEditor__OneOfField__fields {
592
+ margin-top: 16px;
593
+ display: flex;
594
+ flex-direction: column;
595
+ gap: 24px;
596
+ }
597
+
598
+ /* ui/components/PublishDocModal/PublishDocModal.css */
599
+ .PublishDocModal .mantine-Modal-title {
600
+ font-size: 14px;
601
+ font-weight: 500;
602
+ }
603
+ .PublishDocModal__content {
604
+ font-size: 12px;
605
+ line-height: 1.5;
606
+ font-weight: 500;
607
+ }
608
+ .PublishDocModal__form__publishOptions__label {
609
+ margin-bottom: 8px;
610
+ }
611
+ .PublishDocModal__form__publishOptions__options {
612
+ display: grid;
613
+ grid-template-columns: 1fr 1fr;
614
+ gap: 12px;
615
+ }
616
+ .PublishDocModal__form__publishOptions__option {
617
+ border: 1px solid var(--color-border);
618
+ padding: 12px;
619
+ border-radius: 4px;
620
+ }
621
+ .PublishDocModal__form__publishOptions__option__help {
622
+ padding-left: 24px;
623
+ font-size: 10px;
624
+ font-weight: 400;
625
+ margin-top: 4px;
626
+ }
627
+ .PublishDocModal__form__publishOptions__option__input input {
628
+ padding-top: 4px;
629
+ }
630
+ .PublishDocModal__form__publishOptions__option__input2 {
631
+ padding-left: 20px;
632
+ }
633
+ .PublishDocModal__form__publishOptions__option__input2 input {
634
+ margin-top: 16px;
635
+ display: block;
636
+ width: 100%;
637
+ border: 1px solid #dedede;
638
+ padding: 4px 8px;
639
+ font-family: inherit;
640
+ font-size: 12px;
641
+ }
642
+ .PublishDocModal__form__publishOptions__option__input2__help {
643
+ font-size: 10px;
644
+ font-weight: 400;
645
+ margin-top: 4px;
646
+ text-align: right;
647
+ }
648
+ .PublishDocModal__form__buttons {
649
+ margin-top: 24px;
650
+ display: flex;
651
+ justify-content: flex-end;
652
+ gap: 12px;
653
+ }
654
+
655
+ /* ui/pages/DocumentPage/DocumentPage.css */
656
+ .DocumentPage {
657
+ --top-bar-height: 36px;
658
+ }
659
+ .DocumentPage__side {
660
+ max-height: calc(100vh - 48px);
661
+ overflow: auto;
662
+ }
663
+ .DocumentPage__side__header {
664
+ font-weight: 600;
665
+ font-size: 12px;
666
+ padding: 0 12px 0 4px;
667
+ border-bottom: 1px solid var(--color-border);
668
+ display: flex;
669
+ align-items: center;
670
+ gap: 4px;
671
+ height: var(--top-bar-height);
672
+ }
673
+ .DocumentPage__side__header__back {
674
+ color: var(--color-text-default);
675
+ }
676
+ .DocumentPage__side__editor {
677
+ padding: 8px 12px;
678
+ }
679
+ .DocumentPage__main {
680
+ width: 100%;
681
+ }
682
+ .DocumentPage__main__preview {
683
+ height: calc(100% - var(--top-bar-height));
684
+ }
685
+ .DocumentPage__main__previewBar {
686
+ border-bottom: 1px solid var(--color-border);
687
+ display: flex;
688
+ gap: 8px;
689
+ align-items: center;
690
+ height: var(--top-bar-height);
691
+ padding: 0 12px;
692
+ }
693
+ .DocumentPage__main__previewBar__devices,
694
+ .DocumentPage__main__previewBar__buttons {
695
+ display: flex;
696
+ align-items: center;
697
+ }
698
+ .DocumentPage__main__previewBar__devices .mantine-Tooltip-root,
699
+ .DocumentPage__main__previewBar__devices .mantine-ActionIcon-hover,
700
+ .DocumentPage__main__previewBar__buttons .mantine-Tooltip-root,
701
+ .DocumentPage__main__previewBar__buttons .mantine-ActionIcon-hover {
702
+ display: flex;
703
+ }
704
+ .DocumentPage__main__previewBar__device.active {
705
+ background: #f5f5f5;
706
+ }
707
+ .DocumentPage__main__previewBar__navbar {
708
+ flex: 1;
709
+ padding: 2px 24px;
710
+ border-radius: 30px;
711
+ border: 1px solid var(--color-border);
712
+ font-weight: 500;
713
+ font-size: 12px;
714
+ display: flex;
715
+ align-items: center;
716
+ justify-content: space-between;
717
+ }
718
+ .DocumentPage__main__previewFrame {
719
+ background: #f9f9f9;
720
+ width: 100%;
721
+ height: 100%;
722
+ overflow: hidden;
723
+ display: flex;
724
+ align-items: center;
725
+ justify-content: center;
726
+ position: relative;
727
+ }
728
+ .DocumentPage__main__previewFrame__iframeWrap {
729
+ width: calc(var(--iframe-width, 100%) * var(--iframe-scale, 1));
730
+ height: calc(var(--iframe-height, 100%) * var(--iframe-scale, 1));
731
+ position: relative;
732
+ transform: scale(var(--iframe-scale));
733
+ transform-origin: 0 0;
734
+ }
735
+ .DocumentPage__main__previewFrame iframe {
736
+ border: none;
737
+ box-sizing: content-box;
738
+ width: var(--iframe-width, 100%);
739
+ height: var(--iframe-height, 100%);
740
+ max-width: none;
741
+ border: 1px solid var(--color-border);
742
+ box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
743
+ background: #ffffff;
744
+ }
745
+ .DocumentPage__main__previewFrame[data-device=full] .DocumentPage__main__previewFrame__iframeWrap {
746
+ width: 100%;
747
+ height: 100%;
748
+ }
749
+ .DocumentPage__main__previewFrame[data-device=full] iframe {
750
+ width: 100%;
751
+ height: 100%;
752
+ border: none;
753
+ box-shadow: none;
754
+ }
755
+ .DocumentPage__main__previewFrame__deviceLabel {
756
+ position: absolute;
757
+ bottom: 8px;
758
+ right: 8px;
759
+ font-size: 12px;
760
+ }
761
+
762
+ /* ui/pages/ProjectPage/ProjectPage.css */
763
+ .ProjectPage {
764
+ padding: 60px;
765
+ }
766
+ .ProjectPage h1 {
767
+ margin-bottom: 24px;
768
+ }
769
+ .ProjectPage p {
770
+ margin-top: 16px;
771
+ max-width: 70ch;
772
+ }
773
+
774
+ /* ui/pages/NotFoundPage/NotFoundPage.css */
775
+ .NotFoundPage {
776
+ display: flex;
777
+ flex-direction: column;
778
+ align-items: center;
779
+ justify-content: center;
780
+ gap: 12px;
781
+ width: 100%;
782
+ height: 100%;
783
+ text-align: center;
784
+ }
785
+ .NotFoundPage__body {
786
+ max-width: 400px;
787
+ font-weight: 500;
788
+ }
789
+
790
+ /* ui/pages/SettingsPage/SettingsPage.css */
791
+ .SettingsPage {
792
+ padding: 30px;
793
+ }
794
+ .SettingsPage__section {
795
+ display: grid;
796
+ grid-template-columns: 1fr 2fr;
797
+ }
798
+ .SettingsPage__section__left,
799
+ .SettingsPage__section__right {
800
+ padding: 30px;
801
+ }
802
+ .SettingsPage__section__left__title {
803
+ margin-bottom: 8px;
804
+ }
805
+ .SettingsPage__section__right__title {
806
+ margin-bottom: 12px;
807
+ }
808
+
809
+ /* ui/components/ShareBox/ShareBox.css */
810
+ .ShareBox {
811
+ position: relative;
812
+ max-width: 400px;
813
+ min-height: 120px;
814
+ }
815
+ .ShareBox__addUser,
816
+ .ShareBox__user {
817
+ width: 100%;
818
+ display: grid;
819
+ grid-template-columns: 1fr 120px;
820
+ align-items: center;
821
+ gap: 8px;
822
+ }
823
+ .ShareBox__addUser__email {
824
+ width: 100%;
825
+ }
826
+ .ShareBox__users {
827
+ display: flex;
828
+ flex-direction: column;
829
+ gap: 12px;
830
+ margin-top: 12px;
831
+ }
832
+ .ShareBox__user__email {
833
+ padding: 0 11px;
834
+ overflow: hidden;
835
+ text-overflow: ellipsis;
836
+ }
837
+
838
+ /* ui/pages/AssetsPage/AssetsPage.css */
839
+ .AssetsPage {
840
+ padding: 60px;
841
+ }
842
+ .AssetsPage h1 {
843
+ margin-bottom: 24px;
844
+ }
845
+ .AssetsPage p {
846
+ margin-top: 16px;
847
+ max-width: 70ch;
848
+ }
849
+
850
+ /* ui/pages/DataPage/DataPage.css */
851
+ .DataPage {
852
+ padding: 60px;
853
+ }
854
+ .DataPage h1 {
855
+ margin-bottom: 24px;
856
+ }
857
+ .DataPage p {
858
+ margin-top: 16px;
859
+ max-width: 70ch;
860
+ }
861
+
862
+ /* ui/pages/TranslationsPage/TranslationsPage.css */
863
+ .TranslationsPage {
864
+ padding: 60px;
865
+ }
866
+ .TranslationsPage h1 {
867
+ margin-bottom: 24px;
868
+ }
869
+ .TranslationsPage p {
870
+ margin-top: 16px;
871
+ max-width: 70ch;
872
+ }
873
+
874
+ /* ui/styles/global.css */
875
+ :root {
876
+ --font-family-default: "Inter", sans-serif;
877
+ --font-family-mono:
878
+ ui-monospace,
879
+ SFMono-Regular,
880
+ Menlo,
881
+ Monaco,
882
+ Consolas,
883
+ monospace;
884
+ --color-text-default: #333333;
885
+ --color-text-dark: #333333;
886
+ --color-text-gray: #6b7280;
887
+ --color-border: #EFEFEF;
888
+ --button-background-hover: #F5F5F5;
889
+ --button-background-active: #E5E5E5;
890
+ }
891
+ html {
892
+ box-sizing: border-box;
893
+ overflow-x: hidden;
894
+ font-size: 16px;
895
+ line-height: 1.5;
896
+ }
897
+ *,
898
+ *:before,
899
+ *:after {
900
+ box-sizing: inherit;
901
+ }
902
+ html,
903
+ body {
904
+ font-family: var(--font-family-default);
905
+ color: var(--color-text-default);
906
+ height: 100%;
907
+ margin: 0;
908
+ -webkit-font-smoothing: antialiased;
909
+ -moz-osx-font-smoothing: grayscale;
910
+ scroll-behavior: smooth;
911
+ }
912
+ img,
913
+ picture,
914
+ figure,
915
+ video,
916
+ canvas,
917
+ svg,
918
+ iframe {
919
+ display: block;
920
+ max-width: 100%;
921
+ height: auto;
922
+ margin: 0;
923
+ }
924
+ a {
925
+ color: inherit;
926
+ }
927
+ select {
928
+ color-scheme: light;
929
+ }
930
+ h1,
931
+ h2,
932
+ h3,
933
+ h4,
934
+ h5,
935
+ p {
936
+ margin: 0;
937
+ }
938
+ body.menu\:open {
939
+ overflow: hidden;
940
+ }
941
+ #root {
942
+ margin: 0 auto;
943
+ min-height: 100vh;
944
+ position: relative;
945
+ }
946
+ .bootstrap {
947
+ font-size: 48px;
948
+ font-weight: 900;
949
+ width: 100%;
950
+ height: 100vh;
951
+ display: flex;
952
+ flex-direction: column;
953
+ justify-content: center;
954
+ align-items: center;
955
+ text-align: center;
956
+ padding: 40px;
957
+ gap: 36px;
958
+ position: relative;
959
+ }
960
+ .bootstrap-error {
961
+ font-size: 14px;
962
+ font-weight: 400;
963
+ position: absolute;
964
+ bottom: 100px;
965
+ left: 0;
966
+ right: 0;
967
+ text-align: center;
968
+ animation: 0.5s forwards bootstrap-loading-error;
969
+ animation-delay: 1s;
970
+ opacity: 0;
971
+ }
972
+ @keyframes bootstrap-loading-error {
973
+ 0% {
974
+ opacity: 0;
975
+ }
976
+ 100% {
977
+ opacity: 1;
978
+ }
979
+ }
980
+
981
+ /* ui/styles/theme.css */
982
+ .mantine-Tooltip-body {
983
+ font-size: 12px;
984
+ font-weight: 600;
985
+ }
986
+ .mantine-Tabs-tabControl[aria-selected=true] {
987
+ color: var(--color-text-default);
988
+ border-bottom-color: lightblue;
989
+ }