@linkdlab/funcnodes_react_flow 0.3.16 → 0.3.17

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.
Files changed (9) hide show
  1. package/dist/esm/index.esm.mjs +3 -3
  2. package/dist/esm/index.esm.mjs.map +1 -1
  3. package/dist/esm/style.css +331 -320
  4. package/dist/index.d.ts +13 -2
  5. package/dist/style.css +331 -320
  6. package/dist/umd/index.umd.js +3 -3
  7. package/dist/umd/index.umd.js.map +1 -1
  8. package/dist/umd/style.css +331 -320
  9. package/package.json +6 -6
package/dist/umd/style.css CHANGED
@@ -11,6 +11,94 @@
11
11
  stroke: #11ff00;
12
12
  }
13
13
 
14
+ .dialogoverlay {
15
+ background-color: rgba(0, 0, 0, 0.5);
16
+ position: fixed;
17
+ inset: 0;
18
+ animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
19
+ z-index: 2000;
20
+ }
21
+
22
+ .dialogconent {
23
+ background-color: var(--funcnodesbackground1);
24
+ border-radius: 6px;
25
+ box-shadow: var(--funheadercolor) 0px 10px 38px -10px, var(--funheadercolor) 0px 10px 20px -15px;
26
+ position: fixed;
27
+ top: 50%;
28
+ left: 50%;
29
+ transform: translate(-50%, -50%);
30
+ width: 90vw;
31
+ max-width: 85vw;
32
+ max-height: 85vh;
33
+ padding: 25px;
34
+ animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
35
+ color: var(--funcnodestextcolor1);
36
+ border: 1px solid var(--funheadercolor);
37
+ display: flex;
38
+ flex-direction: column;
39
+ z-index: 2001;
40
+ }
41
+
42
+ .dialogtitle {
43
+ margin: 0;
44
+ font-weight: 500;
45
+ color: var(--funheadercolor);
46
+ font-size: 17px;
47
+ }
48
+
49
+ .dialogdescription {
50
+ margin: 10px 0 20px;
51
+ font-size: 15px;
52
+ line-height: 1.5;
53
+ }
54
+
55
+ .dialogclosebutton {
56
+ border-radius: 100%;
57
+ height: 25px;
58
+ width: 25px;
59
+ display: inline-flex;
60
+ background-color: inherit;
61
+ align-items: center;
62
+ justify-content: center;
63
+ color: var(--funheadercolor);
64
+ position: absolute;
65
+ top: 10px;
66
+ right: 10px;
67
+ border: none;
68
+ }
69
+ .dialogclosebutton:hover {
70
+ background-color: var(--funheadercolor);
71
+ color: var(--funcnodesbackground1);
72
+ }
73
+ .dialogclosebutton:active {
74
+ background-color: var(--funheadercolor);
75
+ color: var(--funcnodestextcolor1);
76
+ }
77
+
78
+ .dialogsendbutton {
79
+ background-color: var(--funcnodesbackground1);
80
+ color: var(--funheadercolor);
81
+ border: 1px solid var(--funheadercolor);
82
+ border-radius: 99rem;
83
+ padding: 10px 20px;
84
+ cursor: pointer;
85
+ font-size: 15px;
86
+ margin-top: 20px;
87
+ }
88
+ .dialogsendbutton:hover {
89
+ background-color: var(--funheadercolor);
90
+ color: var(--funcnodesbackground1);
91
+ }
92
+ .dialogsendbutton:active {
93
+ background-color: var(--funheadercolor);
94
+ color: var(--funcnodestextcolor1);
95
+ }
96
+
97
+ .dialogchildren {
98
+ margin-top: 20px;
99
+ overflow: auto;
100
+ }
101
+
14
102
  :root {
15
103
  --expandtime: 0.3s;
16
104
  --libnodebgcolor: #48465f;
@@ -20,7 +108,7 @@
20
108
  .libcontainer {
21
109
  top: 0;
22
110
  left: 0;
23
- height: 100%;
111
+ min-height: 100%;
24
112
  padding: 0.5rem;
25
113
  box-sizing: border-box;
26
114
  display: flex;
@@ -256,94 +344,6 @@
256
344
  color: #0056b3;
257
345
  }
258
346
 
259
- .dialogoverlay {
260
- background-color: rgba(0, 0, 0, 0.5);
261
- position: fixed;
262
- inset: 0;
263
- animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
264
- z-index: 2000;
265
- }
266
-
267
- .dialogconent {
268
- background-color: var(--funcnodesbackground1);
269
- border-radius: 6px;
270
- box-shadow: var(--funheadercolor) 0px 10px 38px -10px, var(--funheadercolor) 0px 10px 20px -15px;
271
- position: fixed;
272
- top: 50%;
273
- left: 50%;
274
- transform: translate(-50%, -50%);
275
- width: 90vw;
276
- max-width: 85vw;
277
- max-height: 85vh;
278
- padding: 25px;
279
- animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
280
- color: var(--funcnodestextcolor1);
281
- border: 1px solid var(--funheadercolor);
282
- display: flex;
283
- flex-direction: column;
284
- z-index: 2001;
285
- }
286
-
287
- .dialogtitle {
288
- margin: 0;
289
- font-weight: 500;
290
- color: var(--funheadercolor);
291
- font-size: 17px;
292
- }
293
-
294
- .dialogdescription {
295
- margin: 10px 0 20px;
296
- font-size: 15px;
297
- line-height: 1.5;
298
- }
299
-
300
- .dialogclosebutton {
301
- border-radius: 100%;
302
- height: 25px;
303
- width: 25px;
304
- display: inline-flex;
305
- background-color: inherit;
306
- align-items: center;
307
- justify-content: center;
308
- color: var(--funheadercolor);
309
- position: absolute;
310
- top: 10px;
311
- right: 10px;
312
- border: none;
313
- }
314
- .dialogclosebutton:hover {
315
- background-color: var(--funheadercolor);
316
- color: var(--funcnodesbackground1);
317
- }
318
- .dialogclosebutton:active {
319
- background-color: var(--funheadercolor);
320
- color: var(--funcnodestextcolor1);
321
- }
322
-
323
- .dialogsendbutton {
324
- background-color: var(--funcnodesbackground1);
325
- color: var(--funheadercolor);
326
- border: 1px solid var(--funheadercolor);
327
- border-radius: 99rem;
328
- padding: 10px 20px;
329
- cursor: pointer;
330
- font-size: 15px;
331
- margin-top: 20px;
332
- }
333
- .dialogsendbutton:hover {
334
- background-color: var(--funheadercolor);
335
- color: var(--funcnodesbackground1);
336
- }
337
- .dialogsendbutton:active {
338
- background-color: var(--funheadercolor);
339
- color: var(--funcnodestextcolor1);
340
- }
341
-
342
- .dialogchildren {
343
- margin-top: 20px;
344
- overflow: auto;
345
- }
346
-
347
347
  /* this gets exported as style.css and can be used for the default theming */
348
348
  /* these are the necessary styles for React Flow, they get used by base.css and style.css */
349
349
  .react-flow {
@@ -832,71 +832,211 @@
832
832
  top: 100%;
833
833
  }
834
834
 
835
- :root {
836
- --funheadercolor: #00d9ff;
837
- --funcnodesbackground1: hsl(243, 26%, 13%);
838
- --funcnodesbackground2: hsl(245, 22%, 22%);
839
- --funcnodesbackground_light: hsl(240, 22%, 38%);
840
- --containerboarderradius: 1rem;
841
- --funcnodestextcolor1: #ffffff;
835
+ .basicstyleelement, .headermenucontent, .styled-select__menu, .styleelement, .styledcheckbox, .styledinput, .styledbtn, .styleddropdown {
836
+ background-color: var(--funcnodesbackground1);
837
+ color: var(--funcnodestextcolor1);
838
+ border-radius: 0.75rem;
839
+ border: 1px solid var(--funheadercolor);
842
840
  }
843
841
 
844
- .funcnodescontainer {
845
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
846
- -webkit-font-smoothing: antialiased;
847
- -moz-osx-font-smoothing: grayscale;
842
+ .styleelement, .styledcheckbox, .styledinput, .styledbtn, .styleddropdown {
843
+ height: 2rem;
844
+ padding-left: 0.5rem;
845
+ padding-right: 0.5rem;
848
846
  }
849
- .funcnodescontainer code {
850
- font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
847
+ .styleelement:hover, .styledcheckbox:hover, .styledinput:hover, .styledbtn:hover, .styleddropdown:hover {
848
+ background-color: var(--funcnodesbackground_light);
851
849
  }
852
-
853
- .funcnodesreactflowcontainer {
854
- width: 100%;
855
- height: 100%;
856
- background-color: var(--funcnodesbackground1);
857
- position: relative;
858
- display: flex;
859
- flex-direction: column;
860
- color: var(--funcnodestextcolor1);
850
+ .styleelement:active, .styledcheckbox:active, .styledinput:active, .styledbtn:active, .styleddropdown:active {
851
+ background-color: var(--funheadercolor);
852
+ color: var(--funcnodesbackground1);
861
853
  }
862
- .funcnodesreactflowcontainer * {
863
- box-sizing: border-box;
854
+ .styleelement:focus, .styledcheckbox:focus, .styledinput:focus, .styledbtn:focus, .styleddropdown:focus {
855
+ outline: 1px solid var(--funheadercolor);
864
856
  }
865
857
 
866
- .funcnodesreactflowbody {
867
- flex-grow: 1;
868
- position: relative;
869
- display: flex;
870
- flex-direction: row;
871
- overflow: hidden;
858
+ .styleddropdown {
859
+ padding-right: 0.25rem;
872
860
  }
873
861
 
874
- .reactflowlayer {
875
- flex-grow: 1;
876
- position: relative;
877
- overflow: hidden;
878
- background-color: var(--funcnodesbackground2);
879
- margin: 0.5rem;
880
- border-radius: var(--containerboarderradius);
862
+ .styledbtn {
863
+ cursor: pointer;
881
864
  }
882
865
 
883
- .vscrollcontainer {
884
- overflow-y: auto;
885
- overflow-x: hidden;
886
- flex-grow: 1;
887
- padding: 0.5rem;
888
- box-sizing: border-box;
866
+ .styledinput :focus {
867
+ outline: none;
889
868
  }
890
869
 
891
- .workerselect {
892
- max-width: 140px;
870
+ input[type=number]::-webkit-inner-spin-button,
871
+ input[type=number]::-webkit-outer-spin-button {
872
+ opacity: 0.5;
873
+ background-color: tr;
893
874
  }
894
875
 
895
- .workerselectoption.selected {
896
- color: var(--funcnodestextcolor1);
876
+ .styledcheckbox {
877
+ height: auto;
878
+ accent-color: var(--funheadercolor);
897
879
  }
898
- .workerselectoption.active {
899
- color: green;
880
+ .styledcheckbox:focus {
881
+ outline: none;
882
+ }
883
+ .styledcheckbox:after {
884
+ content: "";
885
+ background-color: var(--funheadercolor);
886
+ }
887
+ .styledcheckbox.checked {
888
+ background-color: var(--funheadercolor);
889
+ color: var(--funcnodesbackground1);
890
+ }
891
+
892
+ .SliderContainer {
893
+ display: flex;
894
+ align-items: center;
895
+ width: 100%;
896
+ height: 100%;
897
+ min-height: 20px;
898
+ }
899
+
900
+ .SliderRoot {
901
+ position: relative;
902
+ display: flex;
903
+ align-items: center;
904
+ user-select: none;
905
+ touch-action: none;
906
+ width: 100%;
907
+ height: fit-content;
908
+ }
909
+
910
+ .SliderTrack {
911
+ background-color: var(--funcnodesbackground1);
912
+ position: relative;
913
+ flex-grow: 1;
914
+ border-radius: 9999px;
915
+ height: 3px;
916
+ }
917
+
918
+ .SliderRange {
919
+ position: absolute;
920
+ background-color: var(--funheadercolor);
921
+ border-radius: 9999px;
922
+ height: 100%;
923
+ }
924
+
925
+ .SliderThumb {
926
+ display: block;
927
+ width: 10px;
928
+ height: 10px;
929
+ background-color: white;
930
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3333333333);
931
+ border-radius: 10px;
932
+ }
933
+
934
+ .SliderThumb:hover {
935
+ background-color: #999;
936
+ }
937
+
938
+ .SliderThumb:focus {
939
+ outline: none;
940
+ box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.3333333333);
941
+ }
942
+
943
+ .styled-select__control {
944
+ height: 100%;
945
+ min-height: initial;
946
+ }
947
+ .styled-select__menu-list {
948
+ max-height: 200px !important;
949
+ padding-left: 0;
950
+ height: initial;
951
+ }
952
+ .styled-select__menu {
953
+ margin-left: -0.5rem;
954
+ }
955
+ .styled-select__option:hover {
956
+ background-color: var(--funcnodesbackground_light);
957
+ }
958
+
959
+ button {
960
+ font-family: inherit;
961
+ font-size: inherit;
962
+ }
963
+
964
+ .smooth-expand-expanded {
965
+ position: absolute;
966
+ top: 0;
967
+ left: 0;
968
+ width: 100vw;
969
+ height: 100vh;
970
+ }
971
+
972
+ :root {
973
+ --funheadercolor: #00d9ff;
974
+ --funcnodesbackground1: hsl(243, 26%, 13%);
975
+ --funcnodesbackground2: hsl(245, 22%, 22%);
976
+ --funcnodesbackground_light: hsl(240, 22%, 38%);
977
+ --containerboarderradius: 1rem;
978
+ --funcnodestextcolor1: #ffffff;
979
+ --funcnodes-z-index: 1000;
980
+ }
981
+
982
+ .funcnodescontainer {
983
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
984
+ -webkit-font-smoothing: antialiased;
985
+ -moz-osx-font-smoothing: grayscale;
986
+ }
987
+ .funcnodescontainer code {
988
+ font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
989
+ }
990
+
991
+ .funcnodesreactflowcontainer {
992
+ width: 100%;
993
+ height: 100%;
994
+ flex-grow: 1;
995
+ z-index: var(--funcnodes-z-index);
996
+ background-color: var(--funcnodesbackground1);
997
+ position: relative;
998
+ display: flex;
999
+ flex-direction: column;
1000
+ color: var(--funcnodestextcolor1);
1001
+ }
1002
+ .funcnodesreactflowcontainer * {
1003
+ box-sizing: border-box;
1004
+ }
1005
+
1006
+ .funcnodesreactflowbody {
1007
+ flex-grow: 1;
1008
+ position: relative;
1009
+ display: flex;
1010
+ flex-direction: row;
1011
+ overflow: hidden;
1012
+ }
1013
+
1014
+ .reactflowlayer {
1015
+ flex-grow: 1;
1016
+ position: relative;
1017
+ overflow: hidden;
1018
+ background-color: var(--funcnodesbackground2);
1019
+ margin: 0.5rem;
1020
+ border-radius: var(--containerboarderradius);
1021
+ }
1022
+
1023
+ .vscrollcontainer {
1024
+ overflow-y: auto;
1025
+ overflow-x: hidden;
1026
+ flex-grow: 1;
1027
+ padding: 0.5rem;
1028
+ box-sizing: border-box;
1029
+ }
1030
+
1031
+ .workerselect {
1032
+ max-width: 140px;
1033
+ }
1034
+
1035
+ .workerselectoption.selected {
1036
+ color: var(--funcnodestextcolor1);
1037
+ }
1038
+ .workerselectoption.active {
1039
+ color: green;
900
1040
  }
901
1041
  .workerselectoption.inactive {
902
1042
  color: red;
@@ -906,18 +1046,18 @@
906
1046
  position: absolute;
907
1047
  right: 0;
908
1048
  padding: 10px;
909
- z-index: 1001;
1049
+ z-index: 2;
910
1050
  display: flex;
911
1051
  flex-direction: row;
912
1052
  margin-right: 10px;
913
1053
  }
914
1054
 
915
- .smooth-expand-expanded {
916
- position: absolute;
917
- top: 0;
918
- left: 0;
919
- width: 100vw;
920
- height: 100vh;
1055
+ .FuncnodesApp {
1056
+ height: 100%;
1057
+ width: 100%;
1058
+ flex-grow: 1;
1059
+ display: flex;
1060
+ flex-direction: column;
921
1061
  }
922
1062
 
923
1063
  .funcnodesreactflowheader {
@@ -928,7 +1068,7 @@
928
1068
  position: relative;
929
1069
  top: 0;
930
1070
  left: 0;
931
- z-index: 1000;
1071
+ z-index: 1;
932
1072
  }
933
1073
  .funcnodesreactflowheader .headerelement {
934
1074
  height: 100%;
@@ -987,133 +1127,41 @@
987
1127
  color: #fff;
988
1128
  }
989
1129
 
990
- .basicstyleelement, .styled-select__menu, .styleelement, .styledcheckbox, .styledinput, .styledbtn, .styleddropdown, .headermenucontent {
991
- background-color: var(--funcnodesbackground1);
992
- color: var(--funcnodestextcolor1);
993
- border-radius: 0.75rem;
994
- border: 1px solid var(--funheadercolor);
995
- }
996
-
997
- .styleelement, .styledcheckbox, .styledinput, .styledbtn, .styleddropdown {
998
- height: 2rem;
999
- padding-left: 0.5rem;
1000
- padding-right: 0.5rem;
1001
- }
1002
- .styleelement:hover, .styledcheckbox:hover, .styledinput:hover, .styledbtn:hover, .styleddropdown:hover {
1003
- background-color: var(--funcnodesbackground_light);
1004
- }
1005
- .styleelement:active, .styledcheckbox:active, .styledinput:active, .styledbtn:active, .styleddropdown:active {
1006
- background-color: var(--funheadercolor);
1007
- color: var(--funcnodesbackground1);
1008
- }
1009
- .styleelement:focus, .styledcheckbox:focus, .styledinput:focus, .styledbtn:focus, .styleddropdown:focus {
1010
- outline: 1px solid var(--funheadercolor);
1011
- }
1012
-
1013
- .styleddropdown {
1014
- padding-right: 0.25rem;
1015
- }
1016
-
1017
- .styledbtn {
1018
- cursor: pointer;
1019
- }
1020
-
1021
- .styledinput :focus {
1022
- outline: none;
1023
- }
1024
-
1025
- input[type=number]::-webkit-inner-spin-button,
1026
- input[type=number]::-webkit-outer-spin-button {
1027
- opacity: 0.5;
1028
- background-color: tr;
1029
- }
1030
-
1031
- .styledcheckbox {
1032
- height: auto;
1033
- accent-color: var(--funheadercolor);
1034
- }
1035
- .styledcheckbox:focus {
1036
- outline: none;
1037
- }
1038
- .styledcheckbox:after {
1039
- content: "";
1040
- background-color: var(--funheadercolor);
1041
- }
1042
- .styledcheckbox.checked {
1043
- background-color: var(--funheadercolor);
1044
- color: var(--funcnodesbackground1);
1045
- }
1046
-
1047
- .SliderContainer {
1130
+ .nodesettings_container {
1131
+ min-height: 100%;
1048
1132
  display: flex;
1049
- align-items: center;
1050
- width: 100%;
1051
- height: 100%;
1052
- min-height: 20px;
1133
+ flex-direction: row;
1053
1134
  }
1054
-
1055
- .SliderRoot {
1056
- position: relative;
1135
+ .nodesettings_expander {
1136
+ min-height: 100%;
1057
1137
  display: flex;
1058
1138
  align-items: center;
1059
- user-select: none;
1060
- touch-action: none;
1061
- width: 100%;
1062
- height: fit-content;
1063
- }
1064
-
1065
- .SliderTrack {
1066
- background-color: var(--funcnodesbackground1);
1067
- position: relative;
1068
- flex-grow: 1;
1069
- border-radius: 9999px;
1070
- height: 3px;
1071
- }
1072
-
1073
- .SliderRange {
1074
- position: absolute;
1075
- background-color: var(--funheadercolor);
1076
- border-radius: 9999px;
1077
- height: 100%;
1078
- }
1079
-
1080
- .SliderThumb {
1081
- display: block;
1082
- width: 10px;
1083
- height: 10px;
1084
- background-color: white;
1085
- box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3333333333);
1086
- border-radius: 10px;
1087
- }
1088
-
1089
- .SliderThumb:hover {
1090
- background-color: #999;
1091
- }
1092
-
1093
- .SliderThumb:focus {
1094
- outline: none;
1095
- box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.3333333333);
1139
+ justify-content: center;
1140
+ cursor: pointer;
1141
+ padding: 3px 3px;
1096
1142
  }
1097
-
1098
- .styled-select__control {
1099
- height: 100%;
1100
- min-height: initial;
1143
+ .nodesettings_content {
1144
+ display: flex;
1145
+ flex-direction: column;
1146
+ flex: 1;
1147
+ padding: 0 5px;
1148
+ overflow: auto;
1149
+ transition: width 0.5s;
1101
1150
  }
1102
- .styled-select__menu-list {
1103
- max-height: 200px !important;
1104
- padding-left: 0;
1105
- height: initial;
1151
+ .nodesettings_content.expanded {
1152
+ width: 250px;
1106
1153
  }
1107
- .styled-select__menu {
1108
- margin-left: -0.5rem;
1154
+ .nodesettings_content.collapsed {
1155
+ width: 0;
1109
1156
  }
1110
- .styled-select__option:hover {
1111
- background-color: var(--funcnodesbackground_light);
1157
+ .nodesettings_section {
1158
+ margin-bottom: 10px;
1159
+ margin-left: 0.5rem;
1112
1160
  }
1113
-
1114
- button {
1115
- font-family: inherit;
1116
- font-size: inherit;
1161
+ .nodesettings_component {
1162
+ margin-bottom: 0.5rem;
1163
+ margin-left: 0.5rem;
1164
+ margin-top: 0.5rem;
1117
1165
  }
1118
1166
 
1119
1167
  :root {
@@ -1385,6 +1433,25 @@ input.nodedatainput.styledinput,
1385
1433
  transition: width 0.3s ease;
1386
1434
  }
1387
1435
 
1436
+ .styled-select__control {
1437
+ height: 100%;
1438
+ min-height: initial;
1439
+ min-width: 10px;
1440
+ }
1441
+ .styled-select__menu-list {
1442
+ max-height: 200px;
1443
+ }
1444
+ .styled-select__single-value {
1445
+ text-align: start;
1446
+ }
1447
+ .styled-select__option {
1448
+ text-align: start;
1449
+ padding: 2px 5px;
1450
+ }
1451
+ .styled-select__option:hover {
1452
+ cursor: pointer;
1453
+ }
1454
+
1388
1455
  .tablecontainer {
1389
1456
  overflow: auto;
1390
1457
  background-color: white;
@@ -1410,62 +1477,6 @@ input.nodedatainput.styledinput,
1410
1477
  font-weight: inherit !important;
1411
1478
  }
1412
1479
 
1413
- .nodesettings_container {
1414
- height: 100%;
1415
- display: flex;
1416
- flex-direction: row;
1417
- }
1418
- .nodesettings_expander {
1419
- height: 100%;
1420
- display: flex;
1421
- align-items: center;
1422
- justify-content: center;
1423
- cursor: pointer;
1424
- padding: 3px 3px;
1425
- }
1426
- .nodesettings_content {
1427
- display: flex;
1428
- flex-direction: column;
1429
- flex: 1;
1430
- padding: 0 5px;
1431
- overflow: auto;
1432
- transition: width 0.5s;
1433
- }
1434
- .nodesettings_content.expanded {
1435
- width: 250px;
1436
- }
1437
- .nodesettings_content.collapsed {
1438
- width: 0;
1439
- }
1440
- .nodesettings_section {
1441
- margin-bottom: 10px;
1442
- margin-left: 0.5rem;
1443
- }
1444
- .nodesettings_component {
1445
- margin-bottom: 0.5rem;
1446
- margin-left: 0.5rem;
1447
- margin-top: 0.5rem;
1448
- }
1449
-
1450
- .styled-select__control {
1451
- height: 100%;
1452
- min-height: initial;
1453
- min-width: 10px;
1454
- }
1455
- .styled-select__menu-list {
1456
- max-height: 200px;
1457
- }
1458
- .styled-select__single-value {
1459
- text-align: start;
1460
- }
1461
- .styled-select__option {
1462
- text-align: start;
1463
- padding: 2px 5px;
1464
- }
1465
- .styled-select__option:hover {
1466
- cursor: pointer;
1467
- }
1468
-
1469
1480
  .colorspace {
1470
1481
  margin: 0.2rem;
1471
1482
  display: grid;