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

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;
608
+ .CollectionPage__collection__docsList__doc__content__header__badges {
609
+ display: flex;
610
+ align-items: center;
611
+ gap: 12px;
401
612
  }
402
- .heading.color\:gray {
403
- color: var(--color-text-gray);
613
+ .CollectionPage__collection__docsList__doc__content__header__badges .mantine-Tooltip-root {
614
+ display: block;
404
615
  }
405
- .heading.color\:dark {
406
- color: var(--color-text-dark);
616
+ .CollectionPage__collection__docsList__doc__content__header__badges .mantine-Badge-root {
617
+ display: flex;
407
618
  }
408
-
409
- /* ui/components/Text/Text.css */
410
- .text {
619
+ .CollectionPage__collection__docsList__doc__content__header__docId {
411
620
  font-size: 14px;
412
- line-height: 1.5;
413
- font-weight: 400;
414
- color: var(--color-text-default);
621
+ font-weight: 500;
415
622
  }
416
- .text.size\:body-sm {
417
- font-size: 12px;
623
+ .CollectionPage__collection__docsList__doc__image {
624
+ border: 1px solid var(--color-border);
625
+ flex-shrink: 0;
418
626
  }
419
- .text.size\:body {
420
- font-size: 14px;
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;
421
635
  }
422
- .text.size\:body-lg {
423
- font-size: 16px;
636
+ .CollectionPage__collection__docsList__doc__content__url {
637
+ font-size: 12px;
638
+ font-weight: 500;
639
+ color: #ababab;
424
640
  }
425
- .text.weight\:regular {
426
- font-weight: 400;
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;
427
648
  }
428
- .text.weight\:semi-bold {
649
+ .CollectionPage__collection__docsEmpty__title {
650
+ font-size: 14px;
429
651
  font-weight: 500;
430
652
  }
431
- .text.weight\:bold {
432
- font-weight: 700;
433
- }
434
- .text.color\:gray {
435
- color: var(--color-text-gray);
653
+
654
+ /* ui/pages/DataPage/DataPage.css */
655
+ .DataPage {
656
+ padding: 60px;
436
657
  }
437
- .text.color\:dark {
438
- color: var(--color-text-dark);
658
+ .DataPage h1 {
659
+ margin-bottom: 24px;
439
660
  }
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;
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%;
@@ -809,18 +1029,6 @@
809
1029
  font-size: 12px;
810
1030
  }
811
1031
 
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
1032
  /* ui/pages/NotFoundPage/NotFoundPage.css */
825
1033
  .NotFoundPage {
826
1034
  display: flex;
@@ -837,23 +1045,60 @@
837
1045
  font-weight: 500;
838
1046
  }
839
1047
 
840
- /* ui/pages/SettingsPage/SettingsPage.css */
841
- .SettingsPage {
842
- padding: 30px;
1048
+ /* ui/pages/ProjectPage/ProjectPage.css */
1049
+ .ProjectPage {
1050
+ padding: 60px;
843
1051
  }
844
- .SettingsPage__section {
1052
+ .ProjectPage h1 {
1053
+ margin-bottom: 24px;
1054
+ }
1055
+ .ProjectPage p {
1056
+ margin-top: 16px;
1057
+ max-width: 70ch;
1058
+ }
1059
+ .ProjectPage__section {
1060
+ margin-top: 60px;
1061
+ }
1062
+ .ProjectPage__section__title {
1063
+ margin-bottom: 20px;
1064
+ }
1065
+ .ProjectPage__collectionList {
1066
+ display: flex;
1067
+ flex-direction: column;
1068
+ justify-content: flex-start;
1069
+ gap: 12px;
1070
+ max-width: 580px;
1071
+ }
1072
+ .ProjectPage__collectionList__collection {
845
1073
  display: grid;
846
- grid-template-columns: 1fr 2fr;
1074
+ grid-template-columns: 20px 1fr;
1075
+ align-items: center;
1076
+ padding: 8px 12px;
1077
+ column-gap: 12px;
1078
+ row-gap: 4px;
1079
+ width: 100%;
1080
+ background: transparent;
1081
+ border: 2px solid black;
1082
+ border-radius: 8px;
1083
+ cursor: pointer;
1084
+ font-size: 14px;
1085
+ font-weight: 500;
1086
+ text-decoration: none;
1087
+ transition: background-color 0.18s ease;
1088
+ position: relative;
847
1089
  }
848
- .SettingsPage__section__left,
849
- .SettingsPage__section__right {
850
- padding: 30px;
1090
+ .ProjectPage__collectionList__collection:hover {
1091
+ background-color: var(--button-background-hover);
851
1092
  }
852
- .SettingsPage__section__left__title {
853
- margin-bottom: 8px;
1093
+ .ProjectPage__collectionList__collection:active {
1094
+ background-color: var(--button-background-active);
854
1095
  }
855
- .SettingsPage__section__right__title {
856
- margin-bottom: 12px;
1096
+ .ProjectPage__collectionList__collection__icon {
1097
+ margin-top: 2px;
1098
+ }
1099
+ .ProjectPage__collectionList__collection__desc {
1100
+ grid-column: 2 / span 1;
1101
+ font-size: 12px;
857
1102
  }
858
1103
 
859
1104
  /* ui/components/ShareBox/ShareBox.css */
@@ -885,28 +1130,23 @@
885
1130
  text-overflow: ellipsis;
886
1131
  }
887
1132
 
888
- /* ui/pages/AssetsPage/AssetsPage.css */
889
- .AssetsPage {
890
- padding: 60px;
891
- }
892
- .AssetsPage h1 {
893
- margin-bottom: 24px;
1133
+ /* ui/pages/SettingsPage/SettingsPage.css */
1134
+ .SettingsPage {
1135
+ padding: 30px;
894
1136
  }
895
- .AssetsPage p {
896
- margin-top: 16px;
897
- max-width: 70ch;
1137
+ .SettingsPage__section {
1138
+ display: grid;
1139
+ grid-template-columns: 1fr 2fr;
898
1140
  }
899
-
900
- /* ui/pages/DataPage/DataPage.css */
901
- .DataPage {
902
- padding: 60px;
1141
+ .SettingsPage__section__left,
1142
+ .SettingsPage__section__right {
1143
+ padding: 30px;
903
1144
  }
904
- .DataPage h1 {
905
- margin-bottom: 24px;
1145
+ .SettingsPage__section__left__title {
1146
+ margin-bottom: 8px;
906
1147
  }
907
- .DataPage p {
908
- margin-top: 16px;
909
- max-width: 70ch;
1148
+ .SettingsPage__section__right__title {
1149
+ margin-bottom: 12px;
910
1150
  }
911
1151
 
912
1152
  /* ui/pages/TranslationsPage/TranslationsPage.css */
@@ -971,6 +1211,9 @@ iframe {
971
1211
  height: auto;
972
1212
  margin: 0;
973
1213
  }
1214
+ details > div {
1215
+ box-sizing: border-box;
1216
+ }
974
1217
  a {
975
1218
  color: inherit;
976
1219
  }