@blinkk/root-cms 1.0.0-beta.6 → 1.0.0-beta.60

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 CHANGED
@@ -1,50 +1,268 @@
1
- /* ui/components/SplitPanel/SplitPanel.css */
2
- .SplitPanel {
1
+ /* ui/components/Text/Text.css */
2
+ .text {
3
+ font-size: 14px;
4
+ line-height: 1.5;
5
+ font-weight: 400;
6
+ color: var(--color-text-default);
7
+ }
8
+ .text.size\:body-sm {
9
+ font-size: 12px;
10
+ }
11
+ .text.size\:body {
12
+ font-size: 14px;
13
+ }
14
+ .text.size\:body-lg {
15
+ font-size: 16px;
16
+ }
17
+ .text.weight\:regular {
18
+ font-weight: 400;
19
+ }
20
+ .text.weight\:semi-bold {
21
+ font-weight: 500;
22
+ }
23
+ .text.weight\:bold {
24
+ font-weight: 700;
25
+ }
26
+ .text.color\:gray {
27
+ color: var(--color-text-gray);
28
+ }
29
+ .text.color\:dark {
30
+ color: var(--color-text-dark);
31
+ }
32
+ .text code {
33
+ background: #efefef;
34
+ padding: 4px 8px;
35
+ border-radius: 2px;
36
+ white-space: nowrap;
37
+ font-family: var(--font-family-mono);
38
+ font-weight: 600;
39
+ margin-left: 4px;
40
+ margin-right: 4px;
41
+ }
42
+
43
+ /* ui/components/SlugInput/SlugInput.css */
44
+ .SlugInput__inputs {
3
45
  display: flex;
4
- height: 100%;
46
+ gap: 8px;
47
+ align-items: center;
5
48
  }
6
- .SplitPanel__divider {
7
- flex: 0 0 3px;
8
- width: 3px;
9
- height: 100%;
10
- cursor: col-resize;
11
- position: relative;
49
+ .SlugInput__slug {
50
+ flex: 1;
12
51
  }
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);
52
+ .SlugInput__urlHelp {
53
+ margin-top: 8px;
23
54
  }
24
- .SplitPanel__divider::after {
25
- content: "";
26
- display: block;
27
- z-index: 1;
28
- position: absolute;
29
- top: 0;
55
+ .SlugInput__urlHelp::before {
56
+ content: "URL: ";
57
+ }
58
+
59
+ /* ui/components/CopyDocModal/CopyDocModal.css */
60
+ .CopyDocModal__from__label,
61
+ .CopyDocModal__to__label {
62
+ margin-bottom: 8px;
63
+ }
64
+ .CopyDocModal__from__value code {
65
+ margin-left: 0;
66
+ }
67
+ .CopyDocModal__to {
68
+ margin-top: 16px;
69
+ }
70
+ .CopyDocModal__error {
71
+ margin: 24px 0;
72
+ font-size: 14px;
73
+ color: red;
74
+ font-weight: 600;
75
+ }
76
+ .CopyDocModal__buttons {
77
+ margin-top: 24px;
78
+ display: flex;
79
+ justify-content: flex-end;
80
+ gap: 12px;
81
+ }
82
+
83
+ /* ui/components/EditJsonModal/EditJsonModal.css */
84
+ .EditJsonModal__buttons {
85
+ margin-top: 24px;
86
+ display: flex;
87
+ justify-content: flex-end;
88
+ gap: 12px;
89
+ }
90
+
91
+ /* ui/components/Heading/Heading.css */
92
+ .heading {
93
+ font-size: 18px;
94
+ line-height: 1.2;
95
+ font-weight: 700;
96
+ margin-top: 0;
97
+ margin-bottom: 0;
98
+ }
99
+ .heading.size\:h1 {
100
+ font-size: 24px;
101
+ }
102
+ .heading.size\:h2 {
103
+ font-size: 18px;
104
+ }
105
+ .heading.size\:h3 {
106
+ font-size: 16px;
107
+ }
108
+ .heading.size\:h4 {
109
+ font-size: 14px;
110
+ }
111
+ .heading.weight\:regular {
112
+ font-weight: 400;
113
+ }
114
+ .heading.weight\:semi-bold {
115
+ font-weight: 500;
116
+ }
117
+ .heading.weight\:bold {
118
+ font-weight: 700;
119
+ }
120
+ .heading.color\:gray {
121
+ color: var(--color-text-gray);
122
+ }
123
+ .heading.color\:dark {
124
+ color: var(--color-text-dark);
125
+ }
126
+
127
+ /* ui/components/LocalizationModal/LocalizationModal.css */
128
+ .LocalizationModal .mantine-Modal-modal {
129
+ padding: 30px 40px;
130
+ }
131
+ .LocalizationModal__layout {
132
+ display: grid;
133
+ grid-template-columns: 400px 1fr;
134
+ margin-top: -20px;
135
+ margin-bottom: 20px;
136
+ }
137
+ .LocalizationModal__iconTitle {
138
+ display: flex;
139
+ align-items: center;
140
+ gap: 8px;
141
+ }
142
+ .LocalizationModal__locales,
143
+ .LocalizationModal__translations {
30
144
  height: 100%;
31
- left: 0;
32
- width: 100%;
33
- background-color: transparent;
34
- transition: background-color 0.18s ease;
145
+ min-height: 400px;
146
+ padding-top: 30px;
147
+ padding-bottom: 30px;
148
+ }
149
+ .LocalizationModal__locales {
150
+ padding-right: 30px;
151
+ }
152
+ .LocalizationModal__translations {
153
+ border-left: 1px solid var(--color-border);
154
+ padding-left: 30px;
155
+ margin-right: -30px;
156
+ padding-right: 30px;
157
+ max-height: 80vh;
158
+ overflow: auto;
35
159
  }
36
- .SplitPanel__divider:hover::after {
37
- background-color: lightblue;
160
+ .LocalizationModal__translations__header {
161
+ display: flex;
162
+ justify-content: space-between;
163
+ margin-bottom: 30px;
38
164
  }
39
- .SplitPanel__item.static {
40
- flex: 0 0 var(--panel-size, 100%);
165
+ .LocalizationModal__translations__header__buttons {
166
+ display: flex;
167
+ gap: 8px;
41
168
  }
42
- .SplitPanel__item.fluid {
43
- flex: 1;
169
+ .LocalizationModal__translations__table {
170
+ display: flex;
171
+ flex-direction: column;
44
172
  }
45
- .SplitPanel.dragging .SplitPanel__item {
46
- pointer-events: none;
47
- user-select: none;
173
+ .LocalizationModal__translations__table__row {
174
+ display: grid;
175
+ grid-template-columns: 1fr 1fr;
176
+ }
177
+ .LocalizationModal__translations__table__row--header {
178
+ align-items: center;
179
+ }
180
+ .LocalizationModal__translations__table__row + .LocalizationModal__translations__table__row {
181
+ border-top: 1px solid var(--color-border);
182
+ padding-top: 12px;
183
+ margin-top: 12px;
184
+ }
185
+ .LocalizationModal__translations__table__header,
186
+ .LocalizationModal__translations__table__col {
187
+ padding-left: 8px;
188
+ padding-right: 8px;
189
+ text-align: left;
190
+ }
191
+ .LocalizationModal__translations__localeSelect {
192
+ display: flex;
193
+ gap: 8px;
194
+ align-items: center;
195
+ }
196
+
197
+ /* ui/components/PublishDocModal/PublishDocModal.css */
198
+ .PublishDocModal .mantine-Modal-title {
199
+ font-size: 14px;
200
+ font-weight: 500;
201
+ }
202
+ .PublishDocModal__content {
203
+ font-size: 12px;
204
+ line-height: 1.5;
205
+ font-weight: 500;
206
+ }
207
+ .PublishDocModal__form__publishOptions__label {
208
+ margin-bottom: 8px;
209
+ }
210
+ .PublishDocModal__form__publishOptions__options {
211
+ display: grid;
212
+ grid-template-columns: 1fr 1fr;
213
+ gap: 12px;
214
+ }
215
+ .PublishDocModal__form__publishOptions__option {
216
+ border: 1px solid var(--color-border);
217
+ padding: 24px 16px;
218
+ border-radius: 4px;
219
+ cursor: pointer;
220
+ opacity: 1;
221
+ transition: all 0.3s ease;
222
+ }
223
+ .PublishDocModal__form__publishOptions__option--unselected {
224
+ opacity: 0.4;
225
+ }
226
+ .PublishDocModal__form__publishOptions__option--unselected:hover {
227
+ opacity: 0.6;
228
+ }
229
+ .PublishDocModal__form__publishOptions__option--selected {
230
+ border-color: #339af0;
231
+ }
232
+ .PublishDocModal__form__publishOptions__option__help {
233
+ padding-left: 24px;
234
+ font-size: 10px;
235
+ font-weight: 400;
236
+ margin-top: 4px;
237
+ }
238
+ .PublishDocModal__form__publishOptions__option__input {
239
+ display: flex;
240
+ align-items: center;
241
+ gap: 4px;
242
+ }
243
+ .PublishDocModal__form__publishOptions__option__input2 {
244
+ padding-left: 20px;
245
+ }
246
+ .PublishDocModal__form__publishOptions__option__input2 input {
247
+ margin-top: 16px;
248
+ display: block;
249
+ width: 100%;
250
+ border: 1px solid #dedede;
251
+ padding: 6px 8px;
252
+ font-family: inherit;
253
+ font-size: 12px;
254
+ }
255
+ .PublishDocModal__form__publishOptions__option__input2__help {
256
+ font-size: 10px;
257
+ font-weight: 400;
258
+ margin-top: 4px;
259
+ text-align: right;
260
+ }
261
+ .PublishDocModal__form__buttons {
262
+ margin-top: 24px;
263
+ display: flex;
264
+ justify-content: flex-end;
265
+ gap: 12px;
48
266
  }
49
267
 
50
268
  /* ui/layout/Layout.css */
@@ -145,6 +363,18 @@
145
363
  grid-area: bottom;
146
364
  }
147
365
 
366
+ /* ui/pages/AssetsPage/AssetsPage.css */
367
+ .AssetsPage {
368
+ padding: 60px;
369
+ }
370
+ .AssetsPage h1 {
371
+ margin-bottom: 24px;
372
+ }
373
+ .AssetsPage p {
374
+ margin-top: 16px;
375
+ max-width: 70ch;
376
+ }
377
+
148
378
  /* ui/components/NewDocModal/NewDocModal.css */
149
379
  .NewDocModal__body {
150
380
  font-size: 12px;
@@ -161,6 +391,59 @@
161
391
  gap: 12px;
162
392
  }
163
393
 
394
+ /* ui/components/SplitPanel/SplitPanel.css */
395
+ .SplitPanel {
396
+ display: flex;
397
+ height: 100%;
398
+ }
399
+ .SplitPanel__divider {
400
+ flex: 0 0 3px;
401
+ width: 3px;
402
+ height: 100%;
403
+ cursor: col-resize;
404
+ position: relative;
405
+ }
406
+ .SplitPanel__divider::before {
407
+ content: "";
408
+ display: block;
409
+ z-index: 0;
410
+ position: absolute;
411
+ top: 0;
412
+ height: 100%;
413
+ left: 1px;
414
+ width: 1px;
415
+ background-color: var(--color-border);
416
+ }
417
+ .SplitPanel__divider::after {
418
+ content: "";
419
+ display: block;
420
+ z-index: 1;
421
+ position: absolute;
422
+ top: 0;
423
+ height: 100%;
424
+ left: 0;
425
+ width: 100%;
426
+ background-color: transparent;
427
+ transition: background-color 0.18s ease;
428
+ }
429
+ .SplitPanel__divider:hover::after {
430
+ background-color: lightblue;
431
+ }
432
+ .SplitPanel__item {
433
+ overflow: hidden;
434
+ position: relative;
435
+ }
436
+ .SplitPanel__item.static {
437
+ flex: 0 0 var(--panel-size, 100%);
438
+ }
439
+ .SplitPanel__item.fluid {
440
+ flex: 1;
441
+ }
442
+ .SplitPanel.dragging .SplitPanel__item {
443
+ pointer-events: none;
444
+ user-select: none;
445
+ }
446
+
164
447
  /* ui/pages/CollectionPage/CollectionPage.css */
165
448
  .CollectionPage__side__title {
166
449
  padding: 8px 12px;
@@ -242,6 +525,11 @@
242
525
  font-size: 14px;
243
526
  font-weight: 500;
244
527
  }
528
+ .CollectionPage__collection {
529
+ height: 100%;
530
+ max-height: calc(100% - 48px);
531
+ overflow: auto;
532
+ }
245
533
  .CollectionPage__collection__header {
246
534
  padding: 12px;
247
535
  display: none;
@@ -312,6 +600,7 @@
312
600
  align-items: center;
313
601
  padding: 8px 0;
314
602
  border-top: 1px solid var(--color-border);
603
+ overflow: hidden;
315
604
  }
316
605
  .CollectionPage__collection__docsList__doc__content {
317
606
  display: block;
@@ -327,125 +616,64 @@
327
616
  .CollectionPage__collection__docsList__doc__content__header {
328
617
  display: flex;
329
618
  align-items: center;
330
- gap: 12px;
331
- }
332
- .CollectionPage__collection__docsList__doc__content__header__badges {
333
- display: flex;
334
- align-items: center;
335
- gap: 12px;
336
- }
337
- .CollectionPage__collection__docsList__doc__content__header__badges .mantine-Tooltip-root {
338
- display: block;
339
- }
340
- .CollectionPage__collection__docsList__doc__content__header__badges .mantine-Badge-root {
341
- display: flex;
342
- }
343
- .CollectionPage__collection__docsList__doc__content__header__docId {
344
- font-size: 14px;
345
- font-weight: 500;
346
- }
347
- .CollectionPage__collection__docsList__doc__image {
348
- flex-shrink: 0;
349
- }
350
- .CollectionPage__collection__docsList__doc__content__title {
351
- line-height: 36px;
352
- font-size: 24px;
353
- font-weight: 600;
354
- overflow: hidden;
355
- text-overflow: ellipsis;
356
- white-space: nowrap;
357
- }
358
- .CollectionPage__collection__docsList__doc__content__url {
359
- font-size: 12px;
360
- font-weight: 500;
361
- color: #ababab;
362
- }
363
- .CollectionPage__collection__docsEmpty {
364
- display: flex;
365
- flex-direction: column;
366
- align-items: center;
367
- text-align: center;
368
- gap: 12px;
369
- margin-top: 80px;
370
- }
371
- .CollectionPage__collection__docsEmpty__title {
372
- font-size: 14px;
373
- font-weight: 500;
374
- }
375
-
376
- /* ui/components/Heading/Heading.css */
377
- .heading {
378
- font-size: 18px;
379
- line-height: 1.2;
380
- font-weight: 700;
381
- margin-top: 0;
382
- margin-bottom: 0;
383
- }
384
- .heading.size\:h1 {
385
- font-size: 24px;
386
- }
387
- .heading.size\:h2 {
388
- font-size: 18px;
389
- }
390
- .heading.size\:h3 {
391
- font-size: 16px;
392
- }
393
- .heading.weight\:regular {
394
- font-weight: 400;
395
- }
396
- .heading.weight\:semi-bold {
397
- font-weight: 500;
619
+ gap: 12px;
398
620
  }
399
- .heading.weight\:bold {
400
- font-weight: 700;
621
+ .CollectionPage__collection__docsList__doc__content__header__badges {
622
+ display: flex;
623
+ align-items: center;
624
+ gap: 12px;
401
625
  }
402
- .heading.color\:gray {
403
- color: var(--color-text-gray);
626
+ .CollectionPage__collection__docsList__doc__content__header__badges .mantine-Tooltip-root {
627
+ display: block;
404
628
  }
405
- .heading.color\:dark {
406
- color: var(--color-text-dark);
629
+ .CollectionPage__collection__docsList__doc__content__header__badges .mantine-Badge-root {
630
+ display: flex;
407
631
  }
408
-
409
- /* ui/components/Text/Text.css */
410
- .text {
632
+ .CollectionPage__collection__docsList__doc__content__header__docId {
411
633
  font-size: 14px;
412
- line-height: 1.5;
413
- font-weight: 400;
414
- color: var(--color-text-default);
634
+ font-weight: 500;
415
635
  }
416
- .text.size\:body-sm {
417
- font-size: 12px;
636
+ .CollectionPage__collection__docsList__doc__image {
637
+ border: 1px solid var(--color-border);
638
+ flex-shrink: 0;
418
639
  }
419
- .text.size\:body {
420
- font-size: 14px;
640
+ .CollectionPage__collection__docsList__doc__content__title {
641
+ line-height: 36px;
642
+ font-size: 24px;
643
+ font-weight: 600;
644
+ overflow: hidden;
645
+ display: -webkit-box;
646
+ -webkit-box-orient: vertical;
647
+ -webkit-line-clamp: 1;
421
648
  }
422
- .text.size\:body-lg {
423
- font-size: 16px;
649
+ .CollectionPage__collection__docsList__doc__content__url {
650
+ font-size: 12px;
651
+ font-weight: 500;
652
+ color: #ababab;
424
653
  }
425
- .text.weight\:regular {
426
- font-weight: 400;
654
+ .CollectionPage__collection__docsEmpty {
655
+ display: flex;
656
+ flex-direction: column;
657
+ align-items: center;
658
+ text-align: center;
659
+ gap: 12px;
660
+ margin-top: 80px;
427
661
  }
428
- .text.weight\:semi-bold {
662
+ .CollectionPage__collection__docsEmpty__title {
663
+ font-size: 14px;
429
664
  font-weight: 500;
430
665
  }
431
- .text.weight\:bold {
432
- font-weight: 700;
433
- }
434
- .text.color\:gray {
435
- color: var(--color-text-gray);
666
+
667
+ /* ui/pages/DataPage/DataPage.css */
668
+ .DataPage {
669
+ padding: 60px;
436
670
  }
437
- .text.color\:dark {
438
- color: var(--color-text-dark);
671
+ .DataPage h1 {
672
+ margin-bottom: 24px;
439
673
  }
440
- .text code {
441
- background: #efefef;
442
- padding: 4px 8px;
443
- border-radius: 2px;
444
- white-space: nowrap;
445
- font-family: var(--font-family-mono);
446
- font-weight: 600;
447
- margin-left: 4px;
448
- margin-right: 4px;
674
+ .DataPage p {
675
+ margin-top: 16px;
676
+ max-width: 70ch;
449
677
  }
450
678
 
451
679
  /* ui/components/DocEditor/DocEditor.css */
@@ -477,6 +705,9 @@
477
705
  .DocEditor__statusBar__statusBadges {
478
706
  margin-right: 16px;
479
707
  }
708
+ .DocEditor__statusBar__i18n {
709
+ margin-right: 8px;
710
+ }
480
711
  .DocEditor__statusBar__actionsMenu {
481
712
  margin-left: 4px;
482
713
  }
@@ -488,6 +719,9 @@
488
719
  .DocEditor__field__name {
489
720
  font-weight: 600;
490
721
  }
722
+ .DocEditor__field__help {
723
+ margin-top: 2px;
724
+ }
491
725
  .DocEditor__ObjectField__fields {
492
726
  display: flex;
493
727
  flex-direction: column;
@@ -600,17 +834,29 @@
600
834
  flex-direction: column;
601
835
  gap: 24px;
602
836
  }
837
+ .DocEditor__ImageField {
838
+ padding: 10px;
839
+ margin: -10px;
840
+ }
841
+ .DocEditor__ImageField.dragging {
842
+ outline: 2px dashed black;
843
+ }
603
844
  .DocEditor__ImageField__imagePreview {
604
845
  margin-bottom: 10px;
605
846
  }
847
+ .DocEditor__ImageField__imagePreview__controls {
848
+ display: flex;
849
+ justify-content: flex-end;
850
+ gap: 4px;
851
+ }
606
852
  .DocEditor__ImageField__imagePreview__image {
607
853
  background: #f5f5f5;
608
854
  border: 1px solid #dedede;
609
855
  aspect-ratio: 16/9;
610
856
  width: 100%;
611
- overflow: hidden;
612
857
  padding: 10px;
613
858
  margin-bottom: 10px;
859
+ position: relative;
614
860
  }
615
861
  .DocEditor__ImageField__imagePreview__image img {
616
862
  display: block;
@@ -619,9 +865,22 @@
619
865
  object-fit: contain;
620
866
  object-position: center;
621
867
  }
868
+ .DocEditor__ImageField__imagePreview__dimens {
869
+ position: absolute;
870
+ top: -1px;
871
+ right: -1px;
872
+ padding: 4px 8px;
873
+ background: black;
874
+ color: white;
875
+ font-size: 8px;
876
+ font-weight: 700;
877
+ }
878
+ .DocEditor__ImageField__imagePreview__image__alt {
879
+ margin-top: 4px;
880
+ }
622
881
  .DocEditor__ImageField__noImage {
623
882
  font-family: var(--font-family-mono);
624
- margin: 10px 0;
883
+ margin-bottom: 10px;
625
884
  }
626
885
  .DocEditor__ImageField__uploadButton {
627
886
  display: inline-flex;
@@ -644,44 +903,47 @@
644
903
  .DocEditor__ImageField__uploadButton__icon {
645
904
  margin-right: 10px;
646
905
  }
647
-
648
- /* ui/components/PublishDocModal/PublishDocModal.css */
649
- .PublishDocModal .mantine-Modal-title {
650
- font-size: 14px;
651
- font-weight: 500;
906
+ .DocEditor__FileField {
907
+ padding: 10px;
908
+ margin: -10px;
652
909
  }
653
- .PublishDocModal__content {
654
- font-size: 12px;
655
- line-height: 1.5;
656
- font-weight: 500;
910
+ .DocEditor__FileField.dragging {
911
+ outline: 2px dashed black;
657
912
  }
658
- .PublishDocModal__form__publishOptions__label {
659
- margin-bottom: 8px;
913
+ .DocEditor__FileField__controls {
914
+ display: flex;
915
+ justify-content: flex-end;
916
+ gap: 4px;
660
917
  }
661
- .PublishDocModal__form__publishOptions__options {
662
- display: grid;
663
- grid-template-columns: 1fr 1fr;
664
- gap: 12px;
918
+ .DocEditor__FileField__file {
919
+ margin-bottom: 10px;
665
920
  }
666
- .PublishDocModal__form__publishOptions__option {
667
- border: 1px solid var(--color-border);
668
- padding: 12px;
921
+ .DocEditor__FileField__noFile {
922
+ font-family: var(--font-family-mono);
923
+ margin-bottom: 10px;
924
+ }
925
+ .DocEditor__FileField__uploadButton {
926
+ display: inline-flex;
927
+ align-items: center;
928
+ cursor: pointer;
929
+ background: #25262b;
669
930
  border-radius: 4px;
931
+ padding: 0 14px;
932
+ height: 30px;
933
+ color: #ffffff;
934
+ font-weight: 600;
935
+ transition: all 0.3s ease;
670
936
  }
671
- .PublishDocModal__form__publishOptions__option__help {
672
- padding-left: 24px;
673
- font-size: 10px;
674
- font-weight: 400;
675
- margin-top: 4px;
937
+ .DocEditor__FileField__uploadButton[aria-disabled=true] {
938
+ opacity: 0.5;
676
939
  }
677
- .PublishDocModal__form__publishOptions__option__input input {
678
- padding-top: 4px;
940
+ .DocEditor__FileField__uploadButton input[type=file] {
941
+ display: none;
679
942
  }
680
- .PublishDocModal__form__publishOptions__option__input2 {
681
- padding-left: 20px;
943
+ .DocEditor__FileField__uploadButton__icon {
944
+ margin-right: 10px;
682
945
  }
683
- .PublishDocModal__form__publishOptions__option__input2 input {
684
- margin-top: 16px;
946
+ .DocEditor__DateTimeField input {
685
947
  display: block;
686
948
  width: 100%;
687
949
  border: 1px solid #dedede;
@@ -689,18 +951,12 @@
689
951
  font-family: inherit;
690
952
  font-size: 12px;
691
953
  }
692
- .PublishDocModal__form__publishOptions__option__input2__help {
954
+ .DocEditor__DateTimeField__timezone {
693
955
  font-size: 10px;
694
956
  font-weight: 400;
695
957
  margin-top: 4px;
696
958
  text-align: right;
697
959
  }
698
- .PublishDocModal__form__buttons {
699
- margin-top: 24px;
700
- display: flex;
701
- justify-content: flex-end;
702
- gap: 12px;
703
- }
704
960
 
705
961
  /* ui/pages/DocumentPage/DocumentPage.css */
706
962
  .DocumentPage {
@@ -717,14 +973,27 @@
717
973
  border-bottom: 1px solid var(--color-border);
718
974
  display: flex;
719
975
  align-items: center;
720
- gap: 4px;
976
+ justify-content: space-between;
977
+ gap: 24px;
721
978
  height: var(--top-bar-height);
979
+ position: sticky;
980
+ top: 0;
981
+ z-index: 10;
982
+ background: white;
983
+ }
984
+ .DocumentPage__side__header__nav {
985
+ display: flex;
986
+ align-items: center;
987
+ gap: 4px;
722
988
  }
723
989
  .DocumentPage__side__header__back {
724
990
  color: var(--color-text-default);
725
991
  }
992
+ .DocumentPage__side__header__buttons {
993
+ justify-self: flex-end;
994
+ }
726
995
  .DocumentPage__side__editor {
727
- padding: 8px 12px;
996
+ padding: 8px 12px 120px;
728
997
  }
729
998
  .DocumentPage__main {
730
999
  width: 100%;
@@ -765,6 +1034,14 @@
765
1034
  align-items: center;
766
1035
  justify-content: space-between;
767
1036
  }
1037
+ .DocumentPage__main__previewBar__locales .mantine-Select-input {
1038
+ border: 1px solid var(--color-border);
1039
+ font-size: 12px;
1040
+ line-height: 24px;
1041
+ height: 24px;
1042
+ min-height: 24px;
1043
+ max-width: 170px;
1044
+ }
768
1045
  .DocumentPage__main__previewFrame {
769
1046
  background: #f9f9f9;
770
1047
  width: 100%;
@@ -809,18 +1086,6 @@
809
1086
  font-size: 12px;
810
1087
  }
811
1088
 
812
- /* ui/pages/ProjectPage/ProjectPage.css */
813
- .ProjectPage {
814
- padding: 60px;
815
- }
816
- .ProjectPage h1 {
817
- margin-bottom: 24px;
818
- }
819
- .ProjectPage p {
820
- margin-top: 16px;
821
- max-width: 70ch;
822
- }
823
-
824
1089
  /* ui/pages/NotFoundPage/NotFoundPage.css */
825
1090
  .NotFoundPage {
826
1091
  display: flex;
@@ -837,23 +1102,60 @@
837
1102
  font-weight: 500;
838
1103
  }
839
1104
 
840
- /* ui/pages/SettingsPage/SettingsPage.css */
841
- .SettingsPage {
842
- padding: 30px;
1105
+ /* ui/pages/ProjectPage/ProjectPage.css */
1106
+ .ProjectPage {
1107
+ padding: 60px;
843
1108
  }
844
- .SettingsPage__section {
1109
+ .ProjectPage h1 {
1110
+ margin-bottom: 24px;
1111
+ }
1112
+ .ProjectPage p {
1113
+ margin-top: 16px;
1114
+ max-width: 70ch;
1115
+ }
1116
+ .ProjectPage__section {
1117
+ margin-top: 60px;
1118
+ }
1119
+ .ProjectPage__section__title {
1120
+ margin-bottom: 20px;
1121
+ }
1122
+ .ProjectPage__collectionList {
1123
+ display: flex;
1124
+ flex-direction: column;
1125
+ justify-content: flex-start;
1126
+ gap: 12px;
1127
+ max-width: 580px;
1128
+ }
1129
+ .ProjectPage__collectionList__collection {
845
1130
  display: grid;
846
- grid-template-columns: 1fr 2fr;
1131
+ grid-template-columns: 20px 1fr;
1132
+ align-items: center;
1133
+ padding: 8px 12px;
1134
+ column-gap: 12px;
1135
+ row-gap: 4px;
1136
+ width: 100%;
1137
+ background: transparent;
1138
+ border: 2px solid black;
1139
+ border-radius: 8px;
1140
+ cursor: pointer;
1141
+ font-size: 14px;
1142
+ font-weight: 500;
1143
+ text-decoration: none;
1144
+ transition: background-color 0.18s ease;
1145
+ position: relative;
847
1146
  }
848
- .SettingsPage__section__left,
849
- .SettingsPage__section__right {
850
- padding: 30px;
1147
+ .ProjectPage__collectionList__collection:hover {
1148
+ background-color: var(--button-background-hover);
851
1149
  }
852
- .SettingsPage__section__left__title {
853
- margin-bottom: 8px;
1150
+ .ProjectPage__collectionList__collection:active {
1151
+ background-color: var(--button-background-active);
854
1152
  }
855
- .SettingsPage__section__right__title {
856
- margin-bottom: 12px;
1153
+ .ProjectPage__collectionList__collection__icon {
1154
+ margin-top: 2px;
1155
+ }
1156
+ .ProjectPage__collectionList__collection__desc {
1157
+ grid-column: 2 / span 1;
1158
+ font-size: 12px;
857
1159
  }
858
1160
 
859
1161
  /* ui/components/ShareBox/ShareBox.css */
@@ -885,28 +1187,23 @@
885
1187
  text-overflow: ellipsis;
886
1188
  }
887
1189
 
888
- /* ui/pages/AssetsPage/AssetsPage.css */
889
- .AssetsPage {
890
- padding: 60px;
891
- }
892
- .AssetsPage h1 {
893
- margin-bottom: 24px;
1190
+ /* ui/pages/SettingsPage/SettingsPage.css */
1191
+ .SettingsPage {
1192
+ padding: 30px;
894
1193
  }
895
- .AssetsPage p {
896
- margin-top: 16px;
897
- max-width: 70ch;
1194
+ .SettingsPage__section {
1195
+ display: grid;
1196
+ grid-template-columns: 1fr 2fr;
898
1197
  }
899
-
900
- /* ui/pages/DataPage/DataPage.css */
901
- .DataPage {
902
- padding: 60px;
1198
+ .SettingsPage__section__left,
1199
+ .SettingsPage__section__right {
1200
+ padding: 30px;
903
1201
  }
904
- .DataPage h1 {
905
- margin-bottom: 24px;
1202
+ .SettingsPage__section__left__title {
1203
+ margin-bottom: 8px;
906
1204
  }
907
- .DataPage p {
908
- margin-top: 16px;
909
- max-width: 70ch;
1205
+ .SettingsPage__section__right__title {
1206
+ margin-bottom: 12px;
910
1207
  }
911
1208
 
912
1209
  /* ui/pages/TranslationsPage/TranslationsPage.css */