perfect-gui 4.1.4 → 4.2.0

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 (2) hide show
  1. package/package.json +1 -1
  2. package/src/styles.js +398 -363
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "perfect-gui",
3
- "version": "4.1.4",
3
+ "version": "4.2.0",
4
4
  "description": "Nice and simple GUI for JavaScript",
5
5
  "main": "src/index.js",
6
6
  "scripts": {
package/src/styles.js CHANGED
@@ -3,366 +3,401 @@
3
3
  * depending on a css loader
4
4
  */
5
5
 
6
- export default function( position_type ) {
7
- return /* css */`
8
- .p-gui {
9
- position: ${ position_type };
10
- top: 0;
11
- left: 0;
12
- transform: translate3d(0,0,0);
13
- padding-top: 21px;
14
- background: #2e2e2e;
15
- display: flex;
16
- justify-content: center;
17
- flex-wrap: wrap;
18
- font-family: Verdana, Arial, sans-serif;
19
- width: 290px;
20
- overflow: auto;
21
- box-shadow: 0 0 2px black;
22
- box-sizing: border-box;
23
- z-index: 99999;
24
- user-select: none;
25
- border-bottom-right-radius: 3px;
26
- border-bottom-left-radius: 3px;
27
- cursor: auto;
28
- }
29
-
30
- .p-gui * {
31
- font-size: 11px;
32
- }
33
-
34
- .p-gui::-webkit-scrollbar,
35
- .p-gui *::-webkit-scrollbar {
36
- width: 10px;
37
- }
38
-
39
- .p-gui::-webkit-scrollbar-track,
40
- .p-gui *::-webkit-scrollbar-track {
41
- background: #2f2f2f;
42
- border-radius: 3px;
43
- }
44
-
45
- .p-gui::-webkit-scrollbar-thumb,
46
- .p-gui *::-webkit-scrollbar-thumb {
47
- background: #757576;
48
- border-radius: 10px;
49
- box-sizing: border-box;
50
- border: 1px solid #2f2f2f;
51
- }
52
-
53
- .p-gui--collapsed {
54
- height: 0;
55
- padding: 21px 10px 0 10px;
56
- overflow: hidden;
57
- }
58
-
59
- .p-gui__header {
60
- position: absolute;
61
- top: 0;
62
- left: 0;
63
- width: 100%;
64
- height: 20px;
65
- background-color: rgba(0, 0, 0, .8);
66
- border-bottom: 1px solid #484848;
67
- cursor: grab;
68
- color: grey;
69
- font-size: 10px;
70
- line-height: 20px;
71
- padding-left: 8px;
72
- box-sizing: border-box;
73
- touch-action: none;
74
- }
75
-
76
- .p-gui__header-close {
77
- width: 20px;
78
- height: 20px;
79
- position: absolute;
80
- top: 0;
81
- right: 0;
82
- cursor: pointer;
83
- background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUAQMAAAC3R49OAAAABlBMVEUAAAD///+l2Z/dAAAAAXRSTlMAQObYZgAAABFJREFUCNdjIAb8//8BjIkAAOrOBd3TR0jRAAAAAElFTkSuQmCC);
84
- background-size: 50% 50%;
85
- background-position: center;
86
- background-repeat: no-repeat;
87
- }
88
-
89
- .p-gui--collapsed .p-gui__header-close {
90
- background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUAQMAAAC3R49OAAAABlBMVEUAAAD///+l2Z/dAAAAAXRSTlMAQObYZgAAABVJREFUCNdjYEhgIIj///8AwsSoBQD43QydY5mb0QAAAABJRU5ErkJggg==);
91
- }
92
-
93
- .p-gui__image-container {
94
- width: 100%;
95
- display: grid;
96
- grid-template-columns: repeat(auto-fill, 32%);
97
- justify-content: space-between;
98
- padding: 0 2%;
99
- }
100
-
101
- .p-gui__image {
102
- aspect-ratio: 1 / 1;
103
- background-size: cover;
104
- cursor: pointer;
105
- position: relative;
106
- margin-top: 1px;
107
- margin-bottom: 19px;
108
- }
109
-
110
- .p-gui__image-text {
111
- position: absolute;
112
- bottom: -15px;
113
- color: #eee;
114
- text-shadow: 0 -1px 0 #111;
115
- white-space: nowrap;
116
- width: 100%;
117
- overflow: hidden;
118
- text-overflow: ellipsis;
119
- }
120
-
121
- .p-gui__button,
122
- .p-gui__switch,
123
- .p-gui__list,
124
- .p-gui__vector2,
125
- .p-gui__color {
126
- width: 100%;
127
- padding: 7px;
128
- color: white;
129
- border-bottom: 1px solid #00ff89;
130
- cursor: pointer;
131
- position: relative;
132
- box-sizing: border-box;
133
- margin-bottom: 3px;
134
- }
135
-
136
- .p-gui__button,
137
- .p-gui__switch {
138
- margin-right: 2px;
139
- margin-left: 2px;
140
- border: 1px solid rgba(0,0,0,.5);
141
- border-bottom: 1px solid #00ff89;
142
- border-radius: 2px;
143
- background: rgba(0, 0, 0, .3);
144
- background: linear-gradient(180deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 5%, rgba(0,0,0,0) 95%, rgba(0,0,0,0.3) 100%);
145
- }
146
-
147
- .p-gui__button:hover,
148
- .p-gui__switch:hover {
149
- background: rgba(0, 0, 0, .3);
150
- }
151
-
152
- .p-gui__folder .p-gui__button,
153
- .p-gui__folder .p-gui__switch {
154
- margin-right: 0;
155
- margin-left: 0;
156
- }
157
-
158
- .p-gui__vector2 {
159
- background: transparent;
160
- border-bottom: 1px solid #ff9999;
161
- aspect-ratio: 1;
162
- padding-bottom: 0;
163
- }
164
-
165
- .p-gui__vector2-area {
166
- position: relative;
167
- background: rgba(0, 0, 0, .3);
168
- margin-top: 8px;
169
- width: 100%;
170
- height: calc(100% - 28px);
171
- touch-action: none;
172
- }
173
-
174
- .p-gui__vector2-line {
175
- position: absolute;
176
- background: white;
177
- opacity: .3;
178
- pointer-events: none;
179
- }
180
-
181
- .p-gui__vector2-line-x {
182
- width: 100%;
183
- height: 1px;
184
- left: 0;
185
- top: 50%;
186
- transform: translateY(-50%);
187
- }
188
-
189
- .p-gui__vector2-line-y {
190
- width: 1px;
191
- height: 100%;
192
- top: 0;
193
- left: 50%;
194
- transform: translateX(-50%);
195
- }
196
-
197
- .p-gui__vector2-dot {
198
- position: absolute;
199
- top: 0;
200
- left: 0;
201
- width: 8px;
202
- height: 8px;
203
- border-radius: 50%;
204
- background: #d5d5d5;
205
- border: 2px solid #ff9999;
206
- transform: translate(-50%, -50%);
207
- pointer-events: none;
208
- }
209
-
210
- .p-gui__switch-checkbox {
211
- width: 5px;
212
- height: 5px;
213
- background-color: rgba(0, 0, 0, .5);
214
- position: absolute;
215
- top: 0;
216
- right: 8px;
217
- bottom: 0;
218
- margin: auto;
219
- border-radius: 50%;
220
- pointer-events: none;
221
- }
222
-
223
- .p-gui__switch-checkbox--active {
224
- background-color: #00ff89;
225
- box-shadow: 0 0 5px #00ff89;
226
- }
227
-
228
- .p-gui__list,
229
- .p-gui__color {
230
- cursor: default;
231
- }
232
-
233
- .p-gui__list-dropdown,
234
- .p-gui__color-picker {
235
- position: absolute;
236
- right: 5px;
237
- top: 0;
238
- bottom: 0;
239
- margin: auto;
240
- height: 21px;
241
- cursor: pointer;
242
- }
243
-
244
- .p-gui__list-dropdown {
245
- background: rgba(0,0,0,.25);
246
- color: white;
247
- border: 1px solid rgba(0,0,0,.5);
248
- border-radius: 3px;
249
- padding: 0 12px;
250
- top: -1px;
251
- }
252
-
253
- .p-gui__color-picker {
254
- -webkit-appearance: none;
255
- padding: 0;
256
- background-color: transparent;
257
- border: 1px solid #222222;
258
- }
259
-
260
- .p-gui__color-picker::-webkit-color-swatch-wrapper {
261
- padding: 0;
262
- }
263
- .p-gui__color-picker::-webkit-color-swatch {
264
- border: none;
265
- }
266
-
267
- .p-gui__slider {
268
- width: 100%;
269
- margin-bottom: 8px;
270
- padding: 7px;
271
- color: white;
272
- position: relative;
273
- min-height: 14px;
274
- }
275
-
276
- .p-gui__slider-ctrl {
277
- -webkit-appearance: none;
278
- padding: 0;
279
- font: inherit;
280
- outline: none;
281
- opacity: .8;
282
- background: #00a1ff;
283
- box-sizing: border-box;
284
- cursor: pointer;
285
- position: absolute;
286
- bottom: -4px; /* 5px height -1px de dépassement du curseur */
287
- right: 0;
288
- height: 5px;
289
- width: 100%;
290
- margin: 0;
291
- }
292
-
293
- /* la zone de déplacement */
294
- .p-gui__slider-ctrl::-webkit-slider-runnable-track {
295
- height: 13px;
296
- border: none;
297
- border-radius: 0;
298
- background-color: transparent; /* supprimé définie sur l'input */
299
- }
300
-
301
- /* Curseur */
302
- .p-gui__slider-ctrl::-webkit-slider-thumb {
303
- -webkit-appearance: none; /* également nécessaire sur le curseur */
304
- width: 15px;
305
- height: 7px;
306
- border: none; /* pris en compte sur Webkit et Edge */
307
- background: white; /* pris en compte sur Webkit only */
308
- position: relative;
309
- top: 3px;
310
- border-radius: 1px;
311
- }
312
-
313
- .p-gui__slider-value,
314
- .p-gui__vector-value {
315
- display: inline-block;
316
- position: absolute;
317
- right: 7px;
318
- }
319
-
320
- .p-gui__folder {
321
- width: 100%;
322
- position: relative;
323
- background: #434343;
324
- overflow: auto;
325
- margin-bottom: 3px;
326
- display: flex;
327
- flex-wrap: wrap;
328
- border-left: 2px solid grey;
329
- padding: 0 3px;
330
- }
331
-
332
- .p-gui__folder--first {
333
- margin-top: 0;
334
- }
335
-
336
- .p-gui__folder--closed {
337
- height: 22px;
338
- overflow: hidden;
339
- }
340
-
341
- .p-gui__folder-header {
342
- padding: 5px;
343
- background-color: rgba(0, 0, 0, .5);
344
- color: white;
345
- cursor: pointer;
346
- width: 100%;
347
- margin: 0 -2px 2px -3px;
348
- }
349
-
350
- .p-gui__folder-header:hover {
351
- background-color: rgba(0, 0, 0, .75);
352
- }
353
-
354
- .p-gui__folder-arrow {
355
- width: 8px;
356
- height: 8px;
357
- display: inline-block;
358
- background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAHlBMVEUAAAD///////////////////////////////////8kfJuVAAAACXRSTlMA9Z1fCdMo1yxEJnA0AAAAK0lEQVQI12PABlRgjKkJUMZMYRhjpgqMAZSEMICSaIzpDWiKhdENhEhgAgATSg5jyWnYewAAAABJRU5ErkJggg==);
359
- background-size: contain;
360
- margin-right: 5px;
361
- transform: rotate(90deg)
362
- }
363
-
364
- .p-gui__folder--closed .p-gui__folder-arrow {
365
- transform: rotate(0deg);
366
- }
367
- `
368
- };
6
+ export default function( position_type ) {
7
+ return /* css */`
8
+ .p-gui {
9
+ --main-border-radius: 5px;
10
+ --color-bg: #121212;
11
+ --color-border: #484848;
12
+ --color-border-2: rgba(255,255,255,.1);
13
+ --color-accent: #1681ca;
14
+ --color-accent-hover: #218fda;
15
+
16
+ position: ${ position_type };
17
+ top: 0;
18
+ left: 0;
19
+ transform: translate3d(0,0,0);
20
+ padding-top: 21px;
21
+ background: var(--color-bg);
22
+ display: flex;
23
+ justify-content: center;
24
+ flex-wrap: wrap;
25
+ font-family: Verdana, Arial, sans-serif;
26
+ width: 290px;
27
+ overflow: auto;
28
+ box-shadow: 0 0 2px black;
29
+ box-sizing: border-box;
30
+ z-index: 99999;
31
+ user-select: none;
32
+ border-bottom-right-radius: 3px;
33
+ border-bottom-left-radius: 3px;
34
+ cursor: auto;
35
+ border-radius: var(--main-border-radius);
36
+ border: 1px solid var(--color-border);
37
+ }
38
+
39
+ .p-gui * {
40
+ font-size: 11px;
41
+ }
42
+
43
+ .p-gui::-webkit-scrollbar,
44
+ .p-gui *::-webkit-scrollbar {
45
+ width: 10px;
46
+ }
47
+
48
+ .p-gui::-webkit-scrollbar-track,
49
+ .p-gui *::-webkit-scrollbar-track {
50
+ background: #2f2f2f;
51
+ border-radius: 3px;
52
+ }
53
+
54
+ .p-gui::-webkit-scrollbar-thumb,
55
+ .p-gui *::-webkit-scrollbar-thumb {
56
+ background: #757576;
57
+ border-radius: 10px;
58
+ box-sizing: border-box;
59
+ border: 1px solid #2f2f2f;
60
+ }
61
+
62
+ .p-gui--collapsed {
63
+ height: 0;
64
+ padding: 21px 10px 0 10px;
65
+ overflow: hidden;
66
+ }
67
+
68
+ .p-gui__header {
69
+ position: absolute;
70
+ top: 0;
71
+ left: 0;
72
+ width: 100%;
73
+ height: 20px;
74
+ background-color: rgba(0, 0, 0, .8);
75
+ cursor: grab;
76
+ color: grey;
77
+ font-size: 10px;
78
+ line-height: 20px;
79
+ padding-left: 12px;
80
+ box-sizing: border-box;
81
+ touch-action: none;
82
+ }
83
+
84
+ .p-gui__header-close {
85
+ width: 20px;
86
+ height: 20px;
87
+ position: absolute;
88
+ top: 0;
89
+ right: 5px;
90
+ cursor: pointer;
91
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUAQMAAAC3R49OAAAABlBMVEUAAAD///+l2Z/dAAAAAXRSTlMAQObYZgAAABFJREFUCNdjIAb8//8BjIkAAOrOBd3TR0jRAAAAAElFTkSuQmCC);
92
+ background-size: 50% 50%;
93
+ background-position: center;
94
+ background-repeat: no-repeat;
95
+ }
96
+
97
+ .p-gui--collapsed .p-gui__header-close {
98
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUAQMAAAC3R49OAAAABlBMVEUAAAD///+l2Z/dAAAAAXRSTlMAQObYZgAAABVJREFUCNdjYEhgIIj///8AwsSoBQD43QydY5mb0QAAAABJRU5ErkJggg==);
99
+ }
100
+
101
+ .p-gui__image-container {
102
+ width: 100%;
103
+ display: grid;
104
+ grid-template-columns: repeat(auto-fill, 32%);
105
+ justify-content: space-between;
106
+ padding: 0 2%;
107
+ }
108
+
109
+ .p-gui__image {
110
+ aspect-ratio: 1 / 1;
111
+ background-size: cover;
112
+ cursor: pointer;
113
+ position: relative;
114
+ margin-top: 1px;
115
+ margin-bottom: 19px;
116
+ }
117
+
118
+ .p-gui__image-text {
119
+ position: absolute;
120
+ bottom: -15px;
121
+ color: #eee;
122
+ text-shadow: 0 -1px 0 #111;
123
+ white-space: nowrap;
124
+ width: 100%;
125
+ overflow: hidden;
126
+ text-overflow: ellipsis;
127
+ }
128
+
129
+ .p-gui__button,
130
+ .p-gui__switch,
131
+ .p-gui__list,
132
+ .p-gui__vector2,
133
+ .p-gui__color {
134
+ width: 100%;
135
+ padding: 7px 13px;
136
+ color: white;
137
+ cursor: pointer;
138
+ position: relative;
139
+ box-sizing: border-box;
140
+ margin-bottom: 3px;
141
+ margin: 3px;
142
+
143
+ border: 1px solid var(--color-border-2);
144
+ border-radius: var(--main-border-radius);
145
+ }
146
+
147
+ .p-gui__vector2 {
148
+ padding: 7px;
149
+ }
150
+
151
+ .p-gui__button,
152
+ .p-gui__switch {
153
+ margin-right: 4px;
154
+ margin-left: 4px;
155
+ }
156
+
157
+ .p-gui__button {
158
+ background: var(--color-accent);
159
+ text-align: center;
160
+ color: white;
161
+ border: none;
162
+ }
163
+
164
+ .p-gui__button:hover {
165
+ background: var(--color-accent-hover);
166
+ }
167
+
168
+ .p-gui__switch {
169
+ background: rgba(255, 255, 255, .05);
170
+ }
171
+
172
+ .p-gui__switch:hover {
173
+ background: rgba(255, 255, 255, .1);
174
+ }
175
+
176
+ .p-gui__folder .p-gui__button,
177
+ .p-gui__folder .p-gui__switch {
178
+ margin-right: 0;
179
+ margin-left: 0;
180
+ }
181
+
182
+ .p-gui__vector2 {
183
+ background: transparent;
184
+ aspect-ratio: 1;
185
+ padding-bottom: 0;
186
+ }
187
+
188
+ .p-gui__vector2-area {
189
+ position: relative;
190
+ background: rgba(0, 0, 0, .3);
191
+ margin-top: 8px;
192
+ width: 100%;
193
+ height: calc(100% - 28px);
194
+ touch-action: none;
195
+ }
196
+
197
+ .p-gui__vector2-line {
198
+ position: absolute;
199
+ background: white;
200
+ opacity: .3;
201
+ pointer-events: none;
202
+ }
203
+
204
+ .p-gui__vector2-line-x {
205
+ width: 100%;
206
+ height: 1px;
207
+ left: 0;
208
+ top: 50%;
209
+ transform: translateY(-50%);
210
+ }
211
+
212
+ .p-gui__vector2-line-y {
213
+ width: 1px;
214
+ height: 100%;
215
+ top: 0;
216
+ left: 50%;
217
+ transform: translateX(-50%);
218
+ }
219
+
220
+ .p-gui__vector2-dot {
221
+ position: absolute;
222
+ top: 0;
223
+ left: 0;
224
+ width: 8px;
225
+ height: 8px;
226
+ border-radius: 50%;
227
+ background: #d5d5d5;
228
+ border: 2px solid #ff9999;
229
+ transform: translate(-50%, -50%);
230
+ pointer-events: none;
231
+ }
232
+
233
+ .p-gui__switch-checkbox {
234
+ width: 5px;
235
+ height: 5px;
236
+ background-color: rgba(0, 0, 0, .5);
237
+ border: 1px solid grey;
238
+ position: absolute;
239
+ top: 0;
240
+ right: 10px;
241
+ bottom: 0;
242
+ margin: auto;
243
+ border-radius: 50%;
244
+ pointer-events: none;
245
+ }
246
+
247
+ .p-gui__switch-checkbox--active {
248
+ background-color: #00ff89;
249
+ box-shadow: 0 0 7px #00ff89;
250
+ }
251
+
252
+ .p-gui__list,
253
+ .p-gui__color {
254
+ cursor: default;
255
+ }
256
+
257
+ .p-gui__list-dropdown,
258
+ .p-gui__color-picker {
259
+ position: absolute;
260
+ right: 5px;
261
+ top: 0;
262
+ bottom: 0;
263
+ margin: auto;
264
+ height: 21px;
265
+ cursor: pointer;
266
+ border-radius: 3px;
267
+ border: 1px solid var(--color-border-2);
268
+ }
269
+
270
+ .p-gui__list-dropdown {
271
+ background: rgba(255, 255, 255,.05);
272
+ color: white;
273
+ padding: 0 12px;
274
+ top: 0px;
275
+ }
276
+
277
+ .p-gui__list-dropdown:hover {
278
+ background: rgba(255, 255, 255, .1);
279
+ }
280
+
281
+ .p-gui__color-picker {
282
+ -webkit-appearance: none;
283
+ padding: 0;
284
+ background-color: transparent;
285
+ border: 1px solid #222222;
286
+ overflow: hidden;
287
+ }
288
+
289
+ .p-gui__color-picker::-webkit-color-swatch-wrapper {
290
+ padding: 0;
291
+ }
292
+ .p-gui__color-picker::-webkit-color-swatch {
293
+ border: none;
294
+ }
295
+
296
+ .p-gui__slider {
297
+ width: 100%;
298
+ margin-bottom: 8px;
299
+ padding: 7px;
300
+ color: white;
301
+ position: relative;
302
+ min-height: 14px;
303
+ }
304
+
305
+ .p-gui__slider-ctrl {
306
+ -webkit-appearance: none;
307
+ padding: 0;
308
+ font: inherit;
309
+ outline: none;
310
+ opacity: .8;
311
+ background: var(--color-accent);
312
+ box-sizing: border-box;
313
+ cursor: pointer;
314
+ position: absolute;
315
+ bottom: -4px; /* 5px height -1px de dépassement du curseur */
316
+ right: 0;
317
+ height: 5px;
318
+ width: 100%;
319
+ margin: 0;
320
+ }
321
+
322
+ /* la zone de déplacement */
323
+ .p-gui__slider-ctrl::-webkit-slider-runnable-track {
324
+ height: 13px;
325
+ border: none;
326
+ border-radius: 0;
327
+ background-color: transparent; /* supprimé définie sur l'input */
328
+ }
329
+
330
+ /* Curseur */
331
+ .p-gui__slider-ctrl::-webkit-slider-thumb {
332
+ -webkit-appearance: none; /* également nécessaire sur le curseur */
333
+ width: 15px;
334
+ height: 7px;
335
+ border: none; /* pris en compte sur Webkit et Edge */
336
+ background: white; /* pris en compte sur Webkit only */
337
+ position: relative;
338
+ top: 3px;
339
+ border-radius: 1px;
340
+ }
341
+
342
+ .p-gui__slider-value,
343
+ .p-gui__vector-value {
344
+ display: inline-block;
345
+ position: absolute;
346
+ right: 7px;
347
+ }
348
+
349
+ .p-gui__folder {
350
+ width: 100%;
351
+ position: relative;
352
+ background: #434343;
353
+ overflow: auto;
354
+ margin-bottom: 3px;
355
+ display: flex;
356
+ flex-wrap: wrap;
357
+ border-left: 3px solid grey;
358
+ border-bottom: 1px solid grey;
359
+ padding: 0 3px;
360
+ }
361
+
362
+ .p-gui__folder:last-of-type {
363
+ margin-bottom: 0;
364
+ border-bottom: none;
365
+ }
366
+
367
+ .p-gui__folder--first {
368
+ margin-top: 0;
369
+ }
370
+
371
+ .p-gui__folder--closed {
372
+ height: 32px;
373
+ overflow: hidden;
374
+ }
375
+
376
+ .p-gui__folder-header {
377
+ padding: 10px 5px;
378
+ background-color: rgba(0, 0, 0, .5);
379
+ color: white;
380
+ cursor: pointer;
381
+ width: 100%;
382
+ margin: 0 -2px 2px -3px;
383
+ }
384
+
385
+ .p-gui__folder-header:hover {
386
+ background-color: rgba(0, 0, 0, .75);
387
+ }
388
+
389
+ .p-gui__folder-arrow {
390
+ width: 8px;
391
+ height: 8px;
392
+ display: inline-block;
393
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAHlBMVEUAAAD///////////////////////////////////8kfJuVAAAACXRSTlMA9Z1fCdMo1yxEJnA0AAAAK0lEQVQI12PABlRgjKkJUMZMYRhjpgqMAZSEMICSaIzpDWiKhdENhEhgAgATSg5jyWnYewAAAABJRU5ErkJggg==);
394
+ background-size: contain;
395
+ margin-right: 5px;
396
+ transform: rotate(90deg)
397
+ }
398
+
399
+ .p-gui__folder--closed .p-gui__folder-arrow {
400
+ transform: rotate(0deg);
401
+ }
402
+ `
403
+ };