@blinkk/root-cms 1.0.0-beta.2 → 1.0.0-beta.20

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,76 @@
1
- /* ui/components/SplitPanel/SplitPanel.css */
2
- .SplitPanel {
3
- display: flex;
4
- height: 100%;
1
+ /* ui/components/Heading/Heading.css */
2
+ .heading {
3
+ font-size: 18px;
4
+ line-height: 1.2;
5
+ font-weight: 700;
6
+ margin-top: 0;
7
+ margin-bottom: 0;
5
8
  }
6
- .SplitPanel__divider {
7
- flex: 0 0 3px;
8
- width: 3px;
9
- height: 100%;
10
- cursor: col-resize;
11
- position: relative;
9
+ .heading.size\:h1 {
10
+ font-size: 24px;
12
11
  }
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);
12
+ .heading.size\:h2 {
13
+ font-size: 18px;
23
14
  }
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;
15
+ .heading.size\:h3 {
16
+ font-size: 16px;
35
17
  }
36
- .SplitPanel__divider:hover::after {
37
- background-color: lightblue;
18
+ .heading.weight\:regular {
19
+ font-weight: 400;
38
20
  }
39
- .SplitPanel__item.static {
40
- flex: 0 0 var(--panel-size, 100%);
21
+ .heading.weight\:semi-bold {
22
+ font-weight: 500;
41
23
  }
42
- .SplitPanel__item.fluid {
43
- flex: 1;
24
+ .heading.weight\:bold {
25
+ font-weight: 700;
44
26
  }
45
- .SplitPanel.dragging .SplitPanel__item {
46
- pointer-events: none;
47
- user-select: none;
27
+ .heading.color\:gray {
28
+ color: var(--color-text-gray);
29
+ }
30
+ .heading.color\:dark {
31
+ color: var(--color-text-dark);
32
+ }
33
+
34
+ /* ui/components/Text/Text.css */
35
+ .text {
36
+ font-size: 14px;
37
+ line-height: 1.5;
38
+ font-weight: 400;
39
+ color: var(--color-text-default);
40
+ }
41
+ .text.size\:body-sm {
42
+ font-size: 12px;
43
+ }
44
+ .text.size\:body {
45
+ font-size: 14px;
46
+ }
47
+ .text.size\:body-lg {
48
+ font-size: 16px;
49
+ }
50
+ .text.weight\:regular {
51
+ font-weight: 400;
52
+ }
53
+ .text.weight\:semi-bold {
54
+ font-weight: 500;
55
+ }
56
+ .text.weight\:bold {
57
+ font-weight: 700;
58
+ }
59
+ .text.color\:gray {
60
+ color: var(--color-text-gray);
61
+ }
62
+ .text.color\:dark {
63
+ color: var(--color-text-dark);
64
+ }
65
+ .text code {
66
+ background: #efefef;
67
+ padding: 4px 8px;
68
+ border-radius: 2px;
69
+ white-space: nowrap;
70
+ font-family: var(--font-family-mono);
71
+ font-weight: 600;
72
+ margin-left: 4px;
73
+ margin-right: 4px;
48
74
  }
49
75
 
50
76
  /* ui/layout/Layout.css */
@@ -83,6 +109,12 @@
83
109
  padding: 0 4px;
84
110
  border-radius: 2px;
85
111
  }
112
+ .Layout__top__project {
113
+ font-size: 13px;
114
+ line-height: 1;
115
+ font-weight: 600;
116
+ margin-left: 12px;
117
+ }
86
118
  .Layout__top__logo:hover {
87
119
  background-color: var(--button-background-hover);
88
120
  }
@@ -139,6 +171,18 @@
139
171
  grid-area: bottom;
140
172
  }
141
173
 
174
+ /* ui/pages/AssetsPage/AssetsPage.css */
175
+ .AssetsPage {
176
+ padding: 60px;
177
+ }
178
+ .AssetsPage h1 {
179
+ margin-bottom: 24px;
180
+ }
181
+ .AssetsPage p {
182
+ margin-top: 16px;
183
+ max-width: 70ch;
184
+ }
185
+
142
186
  /* ui/components/NewDocModal/NewDocModal.css */
143
187
  .NewDocModal__body {
144
188
  font-size: 12px;
@@ -155,6 +199,55 @@
155
199
  gap: 12px;
156
200
  }
157
201
 
202
+ /* ui/components/SplitPanel/SplitPanel.css */
203
+ .SplitPanel {
204
+ display: flex;
205
+ height: 100%;
206
+ }
207
+ .SplitPanel__divider {
208
+ flex: 0 0 3px;
209
+ width: 3px;
210
+ height: 100%;
211
+ cursor: col-resize;
212
+ position: relative;
213
+ }
214
+ .SplitPanel__divider::before {
215
+ content: "";
216
+ display: block;
217
+ z-index: 0;
218
+ position: absolute;
219
+ top: 0;
220
+ height: 100%;
221
+ left: 1px;
222
+ width: 1px;
223
+ background-color: var(--color-border);
224
+ }
225
+ .SplitPanel__divider::after {
226
+ content: "";
227
+ display: block;
228
+ z-index: 1;
229
+ position: absolute;
230
+ top: 0;
231
+ height: 100%;
232
+ left: 0;
233
+ width: 100%;
234
+ background-color: transparent;
235
+ transition: background-color 0.18s ease;
236
+ }
237
+ .SplitPanel__divider:hover::after {
238
+ background-color: lightblue;
239
+ }
240
+ .SplitPanel__item.static {
241
+ flex: 0 0 var(--panel-size, 100%);
242
+ }
243
+ .SplitPanel__item.fluid {
244
+ flex: 1;
245
+ }
246
+ .SplitPanel.dragging .SplitPanel__item {
247
+ pointer-events: none;
248
+ user-select: none;
249
+ }
250
+
158
251
  /* ui/pages/CollectionPage/CollectionPage.css */
159
252
  .CollectionPage__side__title {
160
253
  padding: 8px 12px;
@@ -367,79 +460,16 @@
367
460
  font-weight: 500;
368
461
  }
369
462
 
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);
463
+ /* ui/pages/DataPage/DataPage.css */
464
+ .DataPage {
465
+ padding: 60px;
430
466
  }
431
- .text.color\:dark {
432
- color: var(--color-text-dark);
467
+ .DataPage h1 {
468
+ margin-bottom: 24px;
433
469
  }
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;
470
+ .DataPage p {
471
+ margin-top: 16px;
472
+ max-width: 70ch;
443
473
  }
444
474
 
445
475
  /* ui/components/DocEditor/DocEditor.css */
@@ -594,6 +624,63 @@
594
624
  flex-direction: column;
595
625
  gap: 24px;
596
626
  }
627
+ .DocEditor__ImageField__imagePreview {
628
+ margin-bottom: 10px;
629
+ }
630
+ .DocEditor__ImageField__imagePreview__image {
631
+ background: #f5f5f5;
632
+ border: 1px solid #dedede;
633
+ aspect-ratio: 16/9;
634
+ width: 100%;
635
+ padding: 10px;
636
+ margin-bottom: 10px;
637
+ position: relative;
638
+ }
639
+ .DocEditor__ImageField__imagePreview__image img {
640
+ display: block;
641
+ width: 100%;
642
+ height: 100%;
643
+ object-fit: contain;
644
+ object-position: center;
645
+ }
646
+ .DocEditor__ImageField__imagePreview__dimens {
647
+ position: absolute;
648
+ top: -1px;
649
+ right: -1px;
650
+ padding: 4px 8px;
651
+ background: black;
652
+ color: white;
653
+ font-size: 8px;
654
+ font-weight: 700;
655
+ }
656
+ .DocEditor__ImageField__imagePreview__image__alt {
657
+ margin-top: 4px;
658
+ }
659
+ .DocEditor__ImageField__noImage {
660
+ font-family: var(--font-family-mono);
661
+ margin: 10px 0;
662
+ }
663
+ .DocEditor__ImageField__uploadButton {
664
+ display: inline-flex;
665
+ align-items: center;
666
+ cursor: pointer;
667
+ background: #25262b;
668
+ border-radius: 4px;
669
+ padding: 0 14px;
670
+ height: 30px;
671
+ color: #ffffff;
672
+ font-weight: 600;
673
+ transition: all 0.3s ease;
674
+ }
675
+ .DocEditor__ImageField__uploadButton[aria-disabled=true] {
676
+ opacity: 0.5;
677
+ }
678
+ .DocEditor__ImageField__uploadButton input[type=file] {
679
+ display: none;
680
+ }
681
+ .DocEditor__ImageField__uploadButton__icon {
682
+ margin-right: 10px;
683
+ }
597
684
 
598
685
  /* ui/components/PublishDocModal/PublishDocModal.css */
599
686
  .PublishDocModal .mantine-Modal-title {
@@ -635,7 +722,7 @@
635
722
  display: block;
636
723
  width: 100%;
637
724
  border: 1px solid #dedede;
638
- padding: 4px 8px;
725
+ padding: 6px 8px;
639
726
  font-family: inherit;
640
727
  font-size: 12px;
641
728
  }
@@ -674,7 +761,7 @@
674
761
  color: var(--color-text-default);
675
762
  }
676
763
  .DocumentPage__side__editor {
677
- padding: 8px 12px;
764
+ padding: 8px 12px 120px;
678
765
  }
679
766
  .DocumentPage__main {
680
767
  width: 100%;
@@ -759,18 +846,6 @@
759
846
  font-size: 12px;
760
847
  }
761
848
 
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
849
  /* ui/pages/NotFoundPage/NotFoundPage.css */
775
850
  .NotFoundPage {
776
851
  display: flex;
@@ -787,23 +862,60 @@
787
862
  font-weight: 500;
788
863
  }
789
864
 
790
- /* ui/pages/SettingsPage/SettingsPage.css */
791
- .SettingsPage {
792
- padding: 30px;
865
+ /* ui/pages/ProjectPage/ProjectPage.css */
866
+ .ProjectPage {
867
+ padding: 60px;
793
868
  }
794
- .SettingsPage__section {
869
+ .ProjectPage h1 {
870
+ margin-bottom: 24px;
871
+ }
872
+ .ProjectPage p {
873
+ margin-top: 16px;
874
+ max-width: 70ch;
875
+ }
876
+ .ProjectPage__section {
877
+ margin-top: 60px;
878
+ }
879
+ .ProjectPage__section__title {
880
+ margin-bottom: 20px;
881
+ }
882
+ .ProjectPage__collectionList {
883
+ display: flex;
884
+ flex-direction: column;
885
+ justify-content: flex-start;
886
+ gap: 12px;
887
+ max-width: 580px;
888
+ }
889
+ .ProjectPage__collectionList__collection {
795
890
  display: grid;
796
- grid-template-columns: 1fr 2fr;
891
+ grid-template-columns: 20px 1fr;
892
+ align-items: center;
893
+ padding: 8px 12px;
894
+ column-gap: 12px;
895
+ row-gap: 4px;
896
+ width: 100%;
897
+ background: transparent;
898
+ border: 2px solid black;
899
+ border-radius: 8px;
900
+ cursor: pointer;
901
+ font-size: 14px;
902
+ font-weight: 500;
903
+ text-decoration: none;
904
+ transition: background-color 0.18s ease;
905
+ position: relative;
797
906
  }
798
- .SettingsPage__section__left,
799
- .SettingsPage__section__right {
800
- padding: 30px;
907
+ .ProjectPage__collectionList__collection:hover {
908
+ background-color: var(--button-background-hover);
801
909
  }
802
- .SettingsPage__section__left__title {
803
- margin-bottom: 8px;
910
+ .ProjectPage__collectionList__collection:active {
911
+ background-color: var(--button-background-active);
804
912
  }
805
- .SettingsPage__section__right__title {
806
- margin-bottom: 12px;
913
+ .ProjectPage__collectionList__collection__icon {
914
+ margin-top: 2px;
915
+ }
916
+ .ProjectPage__collectionList__collection__desc {
917
+ grid-column: 2 / span 1;
918
+ font-size: 12px;
807
919
  }
808
920
 
809
921
  /* ui/components/ShareBox/ShareBox.css */
@@ -835,28 +947,23 @@
835
947
  text-overflow: ellipsis;
836
948
  }
837
949
 
838
- /* ui/pages/AssetsPage/AssetsPage.css */
839
- .AssetsPage {
840
- padding: 60px;
841
- }
842
- .AssetsPage h1 {
843
- margin-bottom: 24px;
950
+ /* ui/pages/SettingsPage/SettingsPage.css */
951
+ .SettingsPage {
952
+ padding: 30px;
844
953
  }
845
- .AssetsPage p {
846
- margin-top: 16px;
847
- max-width: 70ch;
954
+ .SettingsPage__section {
955
+ display: grid;
956
+ grid-template-columns: 1fr 2fr;
848
957
  }
849
-
850
- /* ui/pages/DataPage/DataPage.css */
851
- .DataPage {
852
- padding: 60px;
958
+ .SettingsPage__section__left,
959
+ .SettingsPage__section__right {
960
+ padding: 30px;
853
961
  }
854
- .DataPage h1 {
855
- margin-bottom: 24px;
962
+ .SettingsPage__section__left__title {
963
+ margin-bottom: 8px;
856
964
  }
857
- .DataPage p {
858
- margin-top: 16px;
859
- max-width: 70ch;
965
+ .SettingsPage__section__right__title {
966
+ margin-bottom: 12px;
860
967
  }
861
968
 
862
969
  /* ui/pages/TranslationsPage/TranslationsPage.css */
@@ -921,6 +1028,9 @@ iframe {
921
1028
  height: auto;
922
1029
  margin: 0;
923
1030
  }
1031
+ details > div {
1032
+ box-sizing: border-box;
1033
+ }
924
1034
  a {
925
1035
  color: inherit;
926
1036
  }