@blinkk/root-cms 1.0.0-beta.4 → 1.0.0-beta.41

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,260 @@
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/Heading/Heading.css */
84
+ .heading {
85
+ font-size: 18px;
86
+ line-height: 1.2;
87
+ font-weight: 700;
88
+ margin-top: 0;
89
+ margin-bottom: 0;
90
+ }
91
+ .heading.size\:h1 {
92
+ font-size: 24px;
93
+ }
94
+ .heading.size\:h2 {
95
+ font-size: 18px;
96
+ }
97
+ .heading.size\:h3 {
98
+ font-size: 16px;
99
+ }
100
+ .heading.size\:h4 {
101
+ font-size: 14px;
102
+ }
103
+ .heading.weight\:regular {
104
+ font-weight: 400;
105
+ }
106
+ .heading.weight\:semi-bold {
107
+ font-weight: 500;
108
+ }
109
+ .heading.weight\:bold {
110
+ font-weight: 700;
111
+ }
112
+ .heading.color\:gray {
113
+ color: var(--color-text-gray);
114
+ }
115
+ .heading.color\:dark {
116
+ color: var(--color-text-dark);
117
+ }
118
+
119
+ /* ui/components/LocalizationModal/LocalizationModal.css */
120
+ .LocalizationModal .mantine-Modal-modal {
121
+ padding: 30px 40px;
122
+ }
123
+ .LocalizationModal__layout {
124
+ display: grid;
125
+ grid-template-columns: 400px 1fr;
126
+ margin-top: -20px;
127
+ margin-bottom: 20px;
128
+ }
129
+ .LocalizationModal__iconTitle {
130
+ display: flex;
131
+ align-items: center;
132
+ gap: 8px;
133
+ }
134
+ .LocalizationModal__locales,
135
+ .LocalizationModal__translations {
30
136
  height: 100%;
31
- left: 0;
32
- width: 100%;
33
- background-color: transparent;
34
- transition: background-color 0.18s ease;
137
+ min-height: 400px;
138
+ padding-top: 30px;
139
+ padding-bottom: 30px;
140
+ }
141
+ .LocalizationModal__locales {
142
+ padding-right: 30px;
143
+ }
144
+ .LocalizationModal__translations {
145
+ border-left: 1px solid var(--color-border);
146
+ padding-left: 30px;
147
+ margin-right: -30px;
148
+ padding-right: 30px;
149
+ max-height: 80vh;
150
+ overflow: auto;
35
151
  }
36
- .SplitPanel__divider:hover::after {
37
- background-color: lightblue;
152
+ .LocalizationModal__translations__header {
153
+ display: flex;
154
+ justify-content: space-between;
155
+ margin-bottom: 30px;
38
156
  }
39
- .SplitPanel__item.static {
40
- flex: 0 0 var(--panel-size, 100%);
157
+ .LocalizationModal__translations__header__buttons {
158
+ display: flex;
159
+ gap: 8px;
41
160
  }
42
- .SplitPanel__item.fluid {
43
- flex: 1;
161
+ .LocalizationModal__translations__table {
162
+ display: flex;
163
+ flex-direction: column;
44
164
  }
45
- .SplitPanel.dragging .SplitPanel__item {
46
- pointer-events: none;
47
- user-select: none;
165
+ .LocalizationModal__translations__table__row {
166
+ display: grid;
167
+ grid-template-columns: 1fr 1fr;
168
+ }
169
+ .LocalizationModal__translations__table__row--header {
170
+ align-items: center;
171
+ }
172
+ .LocalizationModal__translations__table__row + .LocalizationModal__translations__table__row {
173
+ border-top: 1px solid var(--color-border);
174
+ padding-top: 12px;
175
+ margin-top: 12px;
176
+ }
177
+ .LocalizationModal__translations__table__header,
178
+ .LocalizationModal__translations__table__col {
179
+ padding-left: 8px;
180
+ padding-right: 8px;
181
+ text-align: left;
182
+ }
183
+ .LocalizationModal__translations__localeSelect {
184
+ display: flex;
185
+ gap: 8px;
186
+ align-items: center;
187
+ }
188
+
189
+ /* ui/components/PublishDocModal/PublishDocModal.css */
190
+ .PublishDocModal .mantine-Modal-title {
191
+ font-size: 14px;
192
+ font-weight: 500;
193
+ }
194
+ .PublishDocModal__content {
195
+ font-size: 12px;
196
+ line-height: 1.5;
197
+ font-weight: 500;
198
+ }
199
+ .PublishDocModal__form__publishOptions__label {
200
+ margin-bottom: 8px;
201
+ }
202
+ .PublishDocModal__form__publishOptions__options {
203
+ display: grid;
204
+ grid-template-columns: 1fr 1fr;
205
+ gap: 12px;
206
+ }
207
+ .PublishDocModal__form__publishOptions__option {
208
+ border: 1px solid var(--color-border);
209
+ padding: 24px 16px;
210
+ border-radius: 4px;
211
+ cursor: pointer;
212
+ opacity: 1;
213
+ transition: all 0.3s ease;
214
+ }
215
+ .PublishDocModal__form__publishOptions__option--unselected {
216
+ opacity: 0.4;
217
+ }
218
+ .PublishDocModal__form__publishOptions__option--unselected:hover {
219
+ opacity: 0.6;
220
+ }
221
+ .PublishDocModal__form__publishOptions__option--selected {
222
+ border-color: #339af0;
223
+ }
224
+ .PublishDocModal__form__publishOptions__option__help {
225
+ padding-left: 24px;
226
+ font-size: 10px;
227
+ font-weight: 400;
228
+ margin-top: 4px;
229
+ }
230
+ .PublishDocModal__form__publishOptions__option__input {
231
+ display: flex;
232
+ align-items: center;
233
+ gap: 4px;
234
+ }
235
+ .PublishDocModal__form__publishOptions__option__input2 {
236
+ padding-left: 20px;
237
+ }
238
+ .PublishDocModal__form__publishOptions__option__input2 input {
239
+ margin-top: 16px;
240
+ display: block;
241
+ width: 100%;
242
+ border: 1px solid #dedede;
243
+ padding: 6px 8px;
244
+ font-family: inherit;
245
+ font-size: 12px;
246
+ }
247
+ .PublishDocModal__form__publishOptions__option__input2__help {
248
+ font-size: 10px;
249
+ font-weight: 400;
250
+ margin-top: 4px;
251
+ text-align: right;
252
+ }
253
+ .PublishDocModal__form__buttons {
254
+ margin-top: 24px;
255
+ display: flex;
256
+ justify-content: flex-end;
257
+ gap: 12px;
48
258
  }
49
259
 
50
260
  /* ui/layout/Layout.css */
@@ -145,6 +355,18 @@
145
355
  grid-area: bottom;
146
356
  }
147
357
 
358
+ /* ui/pages/AssetsPage/AssetsPage.css */
359
+ .AssetsPage {
360
+ padding: 60px;
361
+ }
362
+ .AssetsPage h1 {
363
+ margin-bottom: 24px;
364
+ }
365
+ .AssetsPage p {
366
+ margin-top: 16px;
367
+ max-width: 70ch;
368
+ }
369
+
148
370
  /* ui/components/NewDocModal/NewDocModal.css */
149
371
  .NewDocModal__body {
150
372
  font-size: 12px;
@@ -161,6 +383,59 @@
161
383
  gap: 12px;
162
384
  }
163
385
 
386
+ /* ui/components/SplitPanel/SplitPanel.css */
387
+ .SplitPanel {
388
+ display: flex;
389
+ height: 100%;
390
+ }
391
+ .SplitPanel__divider {
392
+ flex: 0 0 3px;
393
+ width: 3px;
394
+ height: 100%;
395
+ cursor: col-resize;
396
+ position: relative;
397
+ }
398
+ .SplitPanel__divider::before {
399
+ content: "";
400
+ display: block;
401
+ z-index: 0;
402
+ position: absolute;
403
+ top: 0;
404
+ height: 100%;
405
+ left: 1px;
406
+ width: 1px;
407
+ background-color: var(--color-border);
408
+ }
409
+ .SplitPanel__divider::after {
410
+ content: "";
411
+ display: block;
412
+ z-index: 1;
413
+ position: absolute;
414
+ top: 0;
415
+ height: 100%;
416
+ left: 0;
417
+ width: 100%;
418
+ background-color: transparent;
419
+ transition: background-color 0.18s ease;
420
+ }
421
+ .SplitPanel__divider:hover::after {
422
+ background-color: lightblue;
423
+ }
424
+ .SplitPanel__item {
425
+ overflow: hidden;
426
+ position: relative;
427
+ }
428
+ .SplitPanel__item.static {
429
+ flex: 0 0 var(--panel-size, 100%);
430
+ }
431
+ .SplitPanel__item.fluid {
432
+ flex: 1;
433
+ }
434
+ .SplitPanel.dragging .SplitPanel__item {
435
+ pointer-events: none;
436
+ user-select: none;
437
+ }
438
+
164
439
  /* ui/pages/CollectionPage/CollectionPage.css */
165
440
  .CollectionPage__side__title {
166
441
  padding: 8px 12px;
@@ -312,6 +587,7 @@
312
587
  align-items: center;
313
588
  padding: 8px 0;
314
589
  border-top: 1px solid var(--color-border);
590
+ overflow: hidden;
315
591
  }
316
592
  .CollectionPage__collection__docsList__doc__content {
317
593
  display: block;
@@ -329,123 +605,62 @@
329
605
  align-items: center;
330
606
  gap: 12px;
331
607
  }
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;
398
- }
399
- .heading.weight\:bold {
400
- font-weight: 700;
401
- }
402
- .heading.color\:gray {
403
- color: var(--color-text-gray);
404
- }
405
- .heading.color\:dark {
406
- color: var(--color-text-dark);
608
+ .CollectionPage__collection__docsList__doc__content__header__badges {
609
+ display: flex;
610
+ align-items: center;
611
+ gap: 12px;
407
612
  }
408
-
409
- /* ui/components/Text/Text.css */
410
- .text {
411
- font-size: 14px;
412
- line-height: 1.5;
413
- font-weight: 400;
414
- color: var(--color-text-default);
613
+ .CollectionPage__collection__docsList__doc__content__header__badges .mantine-Tooltip-root {
614
+ display: block;
415
615
  }
416
- .text.size\:body-sm {
417
- font-size: 12px;
616
+ .CollectionPage__collection__docsList__doc__content__header__badges .mantine-Badge-root {
617
+ display: flex;
418
618
  }
419
- .text.size\:body {
619
+ .CollectionPage__collection__docsList__doc__content__header__docId {
420
620
  font-size: 14px;
621
+ font-weight: 500;
421
622
  }
422
- .text.size\:body-lg {
423
- font-size: 16px;
623
+ .CollectionPage__collection__docsList__doc__image {
624
+ border: 1px solid var(--color-border);
625
+ flex-shrink: 0;
424
626
  }
425
- .text.weight\:regular {
426
- font-weight: 400;
627
+ .CollectionPage__collection__docsList__doc__content__title {
628
+ line-height: 36px;
629
+ font-size: 24px;
630
+ font-weight: 600;
631
+ overflow: hidden;
632
+ display: -webkit-box;
633
+ -webkit-box-orient: vertical;
634
+ -webkit-line-clamp: 1;
427
635
  }
428
- .text.weight\:semi-bold {
636
+ .CollectionPage__collection__docsList__doc__content__url {
637
+ font-size: 12px;
429
638
  font-weight: 500;
639
+ color: #ababab;
430
640
  }
431
- .text.weight\:bold {
432
- font-weight: 700;
641
+ .CollectionPage__collection__docsEmpty {
642
+ display: flex;
643
+ flex-direction: column;
644
+ align-items: center;
645
+ text-align: center;
646
+ gap: 12px;
647
+ margin-top: 80px;
433
648
  }
434
- .text.color\:gray {
435
- color: var(--color-text-gray);
649
+ .CollectionPage__collection__docsEmpty__title {
650
+ font-size: 14px;
651
+ font-weight: 500;
436
652
  }
437
- .text.color\:dark {
438
- color: var(--color-text-dark);
653
+
654
+ /* ui/pages/DataPage/DataPage.css */
655
+ .DataPage {
656
+ padding: 60px;
439
657
  }
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;
658
+ .DataPage h1 {
659
+ margin-bottom: 24px;
660
+ }
661
+ .DataPage p {
662
+ margin-top: 16px;
663
+ max-width: 70ch;
449
664
  }
450
665
 
451
666
  /* ui/components/DocEditor/DocEditor.css */
@@ -477,6 +692,9 @@
477
692
  .DocEditor__statusBar__statusBadges {
478
693
  margin-right: 16px;
479
694
  }
695
+ .DocEditor__statusBar__i18n {
696
+ margin-right: 8px;
697
+ }
480
698
  .DocEditor__statusBar__actionsMenu {
481
699
  margin-left: 4px;
482
700
  }
@@ -603,14 +821,19 @@
603
821
  .DocEditor__ImageField__imagePreview {
604
822
  margin-bottom: 10px;
605
823
  }
824
+ .DocEditor__ImageField__imagePreview__controls {
825
+ display: flex;
826
+ justify-content: flex-end;
827
+ gap: 4px;
828
+ }
606
829
  .DocEditor__ImageField__imagePreview__image {
607
830
  background: #f5f5f5;
608
831
  border: 1px solid #dedede;
609
832
  aspect-ratio: 16/9;
610
833
  width: 100%;
611
- overflow: hidden;
612
834
  padding: 10px;
613
835
  margin-bottom: 10px;
836
+ position: relative;
614
837
  }
615
838
  .DocEditor__ImageField__imagePreview__image img {
616
839
  display: block;
@@ -619,6 +842,19 @@
619
842
  object-fit: contain;
620
843
  object-position: center;
621
844
  }
845
+ .DocEditor__ImageField__imagePreview__dimens {
846
+ position: absolute;
847
+ top: -1px;
848
+ right: -1px;
849
+ padding: 4px 8px;
850
+ background: black;
851
+ color: white;
852
+ font-size: 8px;
853
+ font-weight: 700;
854
+ }
855
+ .DocEditor__ImageField__imagePreview__image__alt {
856
+ margin-top: 4px;
857
+ }
622
858
  .DocEditor__ImageField__noImage {
623
859
  font-family: var(--font-family-mono);
624
860
  margin: 10px 0;
@@ -644,62 +880,33 @@
644
880
  .DocEditor__ImageField__uploadButton__icon {
645
881
  margin-right: 10px;
646
882
  }
647
-
648
- /* ui/components/PublishDocModal/PublishDocModal.css */
649
- .PublishDocModal .mantine-Modal-title {
650
- font-size: 14px;
651
- font-weight: 500;
652
- }
653
- .PublishDocModal__content {
654
- font-size: 12px;
655
- line-height: 1.5;
656
- font-weight: 500;
657
- }
658
- .PublishDocModal__form__publishOptions__label {
659
- margin-bottom: 8px;
883
+ .DocEditor__FileField__file {
884
+ margin-bottom: 10px;
660
885
  }
661
- .PublishDocModal__form__publishOptions__options {
662
- display: grid;
663
- grid-template-columns: 1fr 1fr;
664
- gap: 12px;
886
+ .DocEditor__FileField__noFile {
887
+ font-family: var(--font-family-mono);
888
+ margin: 10px 0;
665
889
  }
666
- .PublishDocModal__form__publishOptions__option {
667
- border: 1px solid var(--color-border);
668
- padding: 12px;
890
+ .DocEditor__FileField__uploadButton {
891
+ display: inline-flex;
892
+ align-items: center;
893
+ cursor: pointer;
894
+ background: #25262b;
669
895
  border-radius: 4px;
896
+ padding: 0 14px;
897
+ height: 30px;
898
+ color: #ffffff;
899
+ font-weight: 600;
900
+ transition: all 0.3s ease;
670
901
  }
671
- .PublishDocModal__form__publishOptions__option__help {
672
- padding-left: 24px;
673
- font-size: 10px;
674
- font-weight: 400;
675
- margin-top: 4px;
676
- }
677
- .PublishDocModal__form__publishOptions__option__input input {
678
- padding-top: 4px;
679
- }
680
- .PublishDocModal__form__publishOptions__option__input2 {
681
- padding-left: 20px;
682
- }
683
- .PublishDocModal__form__publishOptions__option__input2 input {
684
- margin-top: 16px;
685
- display: block;
686
- width: 100%;
687
- border: 1px solid #dedede;
688
- padding: 6px 8px;
689
- font-family: inherit;
690
- font-size: 12px;
902
+ .DocEditor__FileField__uploadButton[aria-disabled=true] {
903
+ opacity: 0.5;
691
904
  }
692
- .PublishDocModal__form__publishOptions__option__input2__help {
693
- font-size: 10px;
694
- font-weight: 400;
695
- margin-top: 4px;
696
- text-align: right;
905
+ .DocEditor__FileField__uploadButton input[type=file] {
906
+ display: none;
697
907
  }
698
- .PublishDocModal__form__buttons {
699
- margin-top: 24px;
700
- display: flex;
701
- justify-content: flex-end;
702
- gap: 12px;
908
+ .DocEditor__FileField__uploadButton__icon {
909
+ margin-right: 10px;
703
910
  }
704
911
 
705
912
  /* ui/pages/DocumentPage/DocumentPage.css */
@@ -717,14 +924,27 @@
717
924
  border-bottom: 1px solid var(--color-border);
718
925
  display: flex;
719
926
  align-items: center;
720
- gap: 4px;
927
+ justify-content: space-between;
928
+ gap: 24px;
721
929
  height: var(--top-bar-height);
930
+ position: sticky;
931
+ top: 0;
932
+ z-index: 10;
933
+ background: white;
934
+ }
935
+ .DocumentPage__side__header__nav {
936
+ display: flex;
937
+ align-items: center;
938
+ gap: 4px;
722
939
  }
723
940
  .DocumentPage__side__header__back {
724
941
  color: var(--color-text-default);
725
942
  }
943
+ .DocumentPage__side__header__buttons {
944
+ justify-self: flex-end;
945
+ }
726
946
  .DocumentPage__side__editor {
727
- padding: 8px 12px;
947
+ padding: 8px 12px 120px;
728
948
  }
729
949
  .DocumentPage__main {
730
950
  width: 100%;
@@ -765,6 +985,14 @@
765
985
  align-items: center;
766
986
  justify-content: space-between;
767
987
  }
988
+ .DocumentPage__main__previewBar__locales .mantine-Select-input {
989
+ border: 1px solid var(--color-border);
990
+ font-size: 12px;
991
+ line-height: 24px;
992
+ height: 24px;
993
+ min-height: 24px;
994
+ max-width: 170px;
995
+ }
768
996
  .DocumentPage__main__previewFrame {
769
997
  background: #f9f9f9;
770
998
  width: 100%;
@@ -809,18 +1037,6 @@
809
1037
  font-size: 12px;
810
1038
  }
811
1039
 
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
1040
  /* ui/pages/NotFoundPage/NotFoundPage.css */
825
1041
  .NotFoundPage {
826
1042
  display: flex;
@@ -837,23 +1053,60 @@
837
1053
  font-weight: 500;
838
1054
  }
839
1055
 
840
- /* ui/pages/SettingsPage/SettingsPage.css */
841
- .SettingsPage {
842
- padding: 30px;
1056
+ /* ui/pages/ProjectPage/ProjectPage.css */
1057
+ .ProjectPage {
1058
+ padding: 60px;
843
1059
  }
844
- .SettingsPage__section {
1060
+ .ProjectPage h1 {
1061
+ margin-bottom: 24px;
1062
+ }
1063
+ .ProjectPage p {
1064
+ margin-top: 16px;
1065
+ max-width: 70ch;
1066
+ }
1067
+ .ProjectPage__section {
1068
+ margin-top: 60px;
1069
+ }
1070
+ .ProjectPage__section__title {
1071
+ margin-bottom: 20px;
1072
+ }
1073
+ .ProjectPage__collectionList {
1074
+ display: flex;
1075
+ flex-direction: column;
1076
+ justify-content: flex-start;
1077
+ gap: 12px;
1078
+ max-width: 580px;
1079
+ }
1080
+ .ProjectPage__collectionList__collection {
845
1081
  display: grid;
846
- grid-template-columns: 1fr 2fr;
1082
+ grid-template-columns: 20px 1fr;
1083
+ align-items: center;
1084
+ padding: 8px 12px;
1085
+ column-gap: 12px;
1086
+ row-gap: 4px;
1087
+ width: 100%;
1088
+ background: transparent;
1089
+ border: 2px solid black;
1090
+ border-radius: 8px;
1091
+ cursor: pointer;
1092
+ font-size: 14px;
1093
+ font-weight: 500;
1094
+ text-decoration: none;
1095
+ transition: background-color 0.18s ease;
1096
+ position: relative;
847
1097
  }
848
- .SettingsPage__section__left,
849
- .SettingsPage__section__right {
850
- padding: 30px;
1098
+ .ProjectPage__collectionList__collection:hover {
1099
+ background-color: var(--button-background-hover);
851
1100
  }
852
- .SettingsPage__section__left__title {
853
- margin-bottom: 8px;
1101
+ .ProjectPage__collectionList__collection:active {
1102
+ background-color: var(--button-background-active);
854
1103
  }
855
- .SettingsPage__section__right__title {
856
- margin-bottom: 12px;
1104
+ .ProjectPage__collectionList__collection__icon {
1105
+ margin-top: 2px;
1106
+ }
1107
+ .ProjectPage__collectionList__collection__desc {
1108
+ grid-column: 2 / span 1;
1109
+ font-size: 12px;
857
1110
  }
858
1111
 
859
1112
  /* ui/components/ShareBox/ShareBox.css */
@@ -885,28 +1138,23 @@
885
1138
  text-overflow: ellipsis;
886
1139
  }
887
1140
 
888
- /* ui/pages/AssetsPage/AssetsPage.css */
889
- .AssetsPage {
890
- padding: 60px;
891
- }
892
- .AssetsPage h1 {
893
- margin-bottom: 24px;
1141
+ /* ui/pages/SettingsPage/SettingsPage.css */
1142
+ .SettingsPage {
1143
+ padding: 30px;
894
1144
  }
895
- .AssetsPage p {
896
- margin-top: 16px;
897
- max-width: 70ch;
1145
+ .SettingsPage__section {
1146
+ display: grid;
1147
+ grid-template-columns: 1fr 2fr;
898
1148
  }
899
-
900
- /* ui/pages/DataPage/DataPage.css */
901
- .DataPage {
902
- padding: 60px;
1149
+ .SettingsPage__section__left,
1150
+ .SettingsPage__section__right {
1151
+ padding: 30px;
903
1152
  }
904
- .DataPage h1 {
905
- margin-bottom: 24px;
1153
+ .SettingsPage__section__left__title {
1154
+ margin-bottom: 8px;
906
1155
  }
907
- .DataPage p {
908
- margin-top: 16px;
909
- max-width: 70ch;
1156
+ .SettingsPage__section__right__title {
1157
+ margin-bottom: 12px;
910
1158
  }
911
1159
 
912
1160
  /* ui/pages/TranslationsPage/TranslationsPage.css */
@@ -971,6 +1219,9 @@ iframe {
971
1219
  height: auto;
972
1220
  margin: 0;
973
1221
  }
1222
+ details > div {
1223
+ box-sizing: border-box;
1224
+ }
974
1225
  a {
975
1226
  color: inherit;
976
1227
  }