lexgui 0.1.46 → 0.4.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.
package/build/lexgui.css CHANGED
@@ -1,5 +1,4 @@
1
1
  @import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@700&display=swap');
2
- @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
3
2
 
4
3
  @font-face {
5
4
  font-family: "GoogleSans";
@@ -7,18 +6,23 @@
7
6
  }
8
7
 
9
8
  :root {
10
- /* this has to be set to switch between light or dark */
11
- color-scheme: light dark;
9
+ /* default color scheme */
10
+ color-scheme: dark;
12
11
 
13
12
  --global-font: "GoogleSans", sans-serif;
14
13
  --global-title-font: "GoogleSans", sans-serif;
15
- --global-font-size: 12px;
16
- --global-font-size-big: 14px;
17
- --global-color-primary: light-dark(#f9f9f9, #1c1c1c);
18
- --global-color-secondary: light-dark(#ececec, #2c2c2c);
19
- --global-color-terciary: light-dark(#e0e0e0, #444);
20
- --global-color-quaternary: light-dark(#c8c8c8, #555);
21
- --global-color-quinary: light-dark(#b0b0b0, #666);
14
+ --global-font-size-xs: 0.625rem; /* 10px */
15
+ --global-font-size-sm: 0.75rem; /* 12px */
16
+ --global-font-size: 0.875rem; /* 14px */
17
+ --global-font-size-lg: 1rem; /* 16px */
18
+ --global-font-size-xl: 1.125rem; /* 18px */
19
+ --global-font-size-xxl: 1.375rem; /* 22px */
20
+
21
+ --global-color-primary: light-dark(#f3f3f3, #141414);
22
+ --global-color-secondary: light-dark(#e4e4e4, #252525);
23
+ --global-color-terciary: light-dark(#dcdcde, #3a3a3a);
24
+ --global-color-quaternary: light-dark(#c6c6c6, #494949);
25
+ --global-color-quinary: light-dark(#b5b5b5, #5c5c5c);
22
26
  --global-selected: #2d69da;
23
27
  --global-selected-light: #0d99ff;
24
28
  --global-selected-dark: #304b86;
@@ -27,40 +31,128 @@
27
31
  --global-color-error: #f54c4c;
28
32
  --global-button-color: light-dark(#f9f9f9, #3e3e3e);
29
33
  --global-button-color-hovered: light-dark(#ececec, #444);
30
- --global-text-primary: light-dark(#202124, #f4f4ffe6);
31
- --global-text-secondary: light-dark(#2c2d2e, #cacad4ea);
32
- --global-text-terciary: light-dark(#474747f5, #727272b9);
34
+ --global-text-primary: light-dark(#202124, #efeff1);
35
+ --global-text-secondary: light-dark(#353636, #c8c8ca);
36
+ --global-text-terciary: light-dark(#5a5a5af5, #929292);
37
+ --global-text-quaternary: light-dark(#6b6a6af5, #777777);
33
38
  --global-intense-background: light-dark(#fefefe, #121212);
34
39
  --global-medium-background: #252525;
35
40
  --global-blur-background: light-dark(#f7f7f7d8, #1f1f1fe7);
36
41
  --global-color-transparent: #7b8ae200;
37
- --transition-time: 1000;
38
42
  --code-editor-font-size: 14px;
39
43
  --code-editor-row-height: 20px;
40
44
  --graphnode-background: 17, 17, 17;
41
45
  }
42
46
 
43
- :root[data-theme="light"] {
44
- color-scheme: light;
47
+ :root[data-theme="light"] { color-scheme: light }
48
+
49
+ /* Font Size media queries */
50
+
51
+ /* Large Desktops (1440px+) */
52
+ @media screen and (max-width: 1440px) {
53
+ :root {
54
+ --global-font-size-xs: 0.5625rem; /* 9px */
55
+ --global-font-size-sm: 0.6875rem; /* 11px */
56
+ --global-font-size: 0.8125rem; /* 13px */
57
+ --global-font-size-lg: 0.9375rem; /* 15px */
58
+ --global-font-size-xl: 1.0625rem; /* 17px */
59
+ --global-font-size-xxl: 1.3125rem; /* 21px */
60
+ }
45
61
  }
46
62
 
47
- /* Some global colors */
48
- .orange {
49
- color: orange
63
+ /* Small Desktops & Large Tablets (1200px - 1439px) */
64
+ @media screen and (max-width: 1200px) {
65
+ :root {
66
+ --global-font-size-xs: 0.5625rem; /* 9px */
67
+ --global-font-size-sm: 0.6875rem; /* 11px */
68
+ --global-font-size: 0.75rem; /* 12px */
69
+ --global-font-size-lg: 0.875rem; /* 14px */
70
+ --global-font-size-xl: 1rem; /* 16px */
71
+ --global-font-size-xxl: 1.25rem; /* 20px */
72
+ }
73
+ }
74
+
75
+ /* Tablets & Small Laptops (992px - 1199px) */
76
+ @media screen and (max-width: 992px) {
77
+ :root {
78
+ --global-font-size-xs: 0.5rem; /* 8px */
79
+ --global-font-size-sm: 0.625rem; /* 10px */
80
+ --global-font-size: 0.6875rem; /* 11px */
81
+ --global-font-size-lg: 0.8125rem; /* 13px */
82
+ --global-font-size-xl: 0.9375rem; /* 15px */
83
+ --global-font-size-xxl: 1.1875rem; /* 19px */
84
+ }
85
+ }
86
+
87
+ /* Large Phones & Small Tablets (768px - 991px) */
88
+ @media screen and (max-width: 768px) {
89
+ :root {
90
+ --global-font-size-xs: 0.4375rem; /* 7px */
91
+ --global-font-size-sm: 0.5625rem; /* 9px */
92
+ --global-font-size: 0.625rem; /* 10px */
93
+ --global-font-size-lg: 0.75rem; /* 12px */
94
+ --global-font-size-xl: 0.875rem; /* 14px */
95
+ --global-font-size-xxl: 1.125rem; /* 18px */
96
+ }
50
97
  }
51
98
 
52
- .gray {
53
- color: gray
99
+ /* Small Phones (576px - 767px) */
100
+ @media screen and (max-width: 576px) {
101
+ :root {
102
+ --global-font-size-xs: 0.375rem; /* 6px */
103
+ --global-font-size-sm: 0.5rem; /* 8px */
104
+ --global-font-size: 0.5625rem; /* 9px */
105
+ --global-font-size-lg: 0.6875rem; /* 11px */
106
+ --global-font-size-xl: 0.8125rem; /* 13px */
107
+ --global-font-size-xxl: 1rem; /* 16px */
108
+ }
109
+ }
110
+
111
+ /* Extra Small Phones (< 375px) */
112
+ @media screen and (max-width: 375px) {
113
+ :root {
114
+ --global-font-size-xs: 0.3125rem; /* 5px */
115
+ --global-font-size-sm: 0.4375rem; /* 7px */
116
+ --global-font-size: 0.5rem; /* 8px */
117
+ --global-font-size-lg: 0.625rem; /* 10px */
118
+ --global-font-size-xl: 0.75rem; /* 12px */
119
+ --global-font-size-xxl: 0.9375rem; /* 15px */
120
+ }
54
121
  }
55
122
 
56
- .dodgerblue {
57
- color: dodgerblue
123
+ /* Retina & HiDPI Displays (2x) */
124
+ @media screen and (min-resolution: 2dppx),
125
+ screen and (-webkit-min-device-pixel-ratio: 2) {
126
+ :root {
127
+ --global-font-size-xs: 0.625rem; /* 10px */
128
+ --global-font-size-sm: 0.75rem; /* 12px */
129
+ --global-font-size: 0.875rem; /* 14px */
130
+ --global-font-size-lg: 1rem; /* 16px */
131
+ --global-font-size-xl: 1.125rem; /* 18px */
132
+ --global-font-size-xxl: 1.375rem; /* 22px */
133
+ }
58
134
  }
59
135
 
60
- .lightblue {
61
- color: rgb(90, 168, 247)
136
+ /* Ultra Retina & 4K Screens (3x and above) */
137
+ @media screen and (min-resolution: 3dppx),
138
+ screen and (-webkit-min-device-pixel-ratio: 3) {
139
+ :root {
140
+ --global-font-size-xs: 0.6875rem; /* 11px */
141
+ --global-font-size-sm: 0.8125rem; /* 13px */
142
+ --global-font-size: 0.9375rem; /* 15px */
143
+ --global-font-size-lg: 1.0625rem; /* 17px */
144
+ --global-font-size-xl: 1.25rem; /* 20px */
145
+ --global-font-size-xxl: 1.5rem; /* 24px */
146
+ }
62
147
  }
63
148
 
149
+ /* Some global colors */
150
+
151
+ .orange { color: orange }
152
+ .gray { color: gray }
153
+ .dodgerblue { color: dodgerblue }
154
+ .lightblue { color: #5aa8f7 }
155
+
64
156
  ::-webkit-scrollbar {
65
157
  height: 3px;
66
158
  width: 4px;
@@ -90,8 +182,14 @@ body {
90
182
  margin: 0;
91
183
  padding: 0;
92
184
  font-family: var(--global-font);
93
- /* font-weight: 400; */
94
- /* letter-spacing: -0.01em; */
185
+ }
186
+
187
+ :root[data-strictVP="false"] {
188
+ overflow-y: auto;
189
+ }
190
+
191
+ blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, p, pre {
192
+ margin: 0;
95
193
  }
96
194
 
97
195
  a:any-link {
@@ -102,6 +200,67 @@ canvas {
102
200
  border-radius: 6px;
103
201
  }
104
202
 
203
+ .collapsible {
204
+ display: flex;
205
+ }
206
+
207
+ .collapsible a.collapser {
208
+ --rotation: 90deg;
209
+ transform: rotate(var(--rotation, 0deg));
210
+ transition: transform 0.2s ease-out;
211
+ }
212
+
213
+ .collapsible a.collapser[data-collapsed] {
214
+ --rotation: 0deg;
215
+ }
216
+
217
+ dialog {
218
+ transition: display 0.1s allow-discrete, overlay 0.1s allow-discrete;
219
+ animation: dialogHide 0.1s forwards;
220
+ &[open] {
221
+ animation: dialogShow 0.1s forwards;
222
+ }
223
+ }
224
+
225
+ dialog::backdrop {
226
+ background-color: #000000ab;
227
+ position: absolute;
228
+ opacity: 1;
229
+ transition: opacity 0.2s ease-in;
230
+ }
231
+
232
+ @keyframes dialogShow {
233
+ from {
234
+ opacity: 0;
235
+ transform: translate3d(0, -8px, 0)
236
+ scale3d(0.92, 0.92, 0.92)
237
+ rotate(0);
238
+ }
239
+
240
+ to {
241
+ opacity: 1;
242
+ transform: translate3d(0, 0, 0)
243
+ scale3d(1, 1, 1)
244
+ rotate(0);
245
+ }
246
+ }
247
+
248
+ @keyframes dialogHide {
249
+ from {
250
+ opacity: 1;
251
+ transform: translate3d(0, 0, 0)
252
+ scale3d(1, 1, 1)
253
+ rotate(0);
254
+ }
255
+
256
+ to {
257
+ opacity: 0;
258
+ transform: translate3d(0, -8px, 0)
259
+ scale3d(0.92, 0.92, 0.92)
260
+ rotate(0);
261
+ }
262
+ }
263
+
105
264
  body.nocursor * {
106
265
  cursor: none !important;
107
266
  }
@@ -118,6 +277,11 @@ body.noevents * {
118
277
  display: none !important;
119
278
  }
120
279
 
280
+ .sticky {
281
+ position: sticky;
282
+ top: 0;
283
+ }
284
+
121
285
  .hiddenOpacity {
122
286
  opacity: 0 !important;
123
287
  pointer-events: none;
@@ -147,6 +311,10 @@ body.noevents * {
147
311
  position: absolute;
148
312
  }
149
313
 
314
+ :root[data-strictVP="false"] {
315
+ bottom: unset;
316
+ }
317
+
150
318
  .leximage {
151
319
  text-align: center;
152
320
  }
@@ -159,6 +327,7 @@ body.noevents * {
159
327
  margin-left: 4px;
160
328
  cursor: pointer;
161
329
  line-height: inherit !important;
330
+ color: var(--global-text-secondary);
162
331
  }
163
332
 
164
333
  .lexicon:hover {
@@ -167,10 +336,122 @@ body.noevents * {
167
336
 
168
337
  .lexicon:active {
169
338
  color: var(--global-text-secondary);
170
- margin-top: 0.01em;
171
339
  }
172
340
 
173
- #global-search {
341
+ .lexicon:hover svg, .lexicon:hover svg path {
342
+ --color: var(--global-text-primary) !important;
343
+ }
344
+
345
+ /* Notifications */
346
+
347
+ .notifications ol {
348
+ width: unset;
349
+ min-width: fit-content;
350
+ max-width: 480px;
351
+ max-height: 100vh;
352
+ position: fixed;
353
+ margin: 0;
354
+ right: 1rem;
355
+ bottom: 1rem;
356
+ top: auto;
357
+ pointer-events: none;
358
+ display: flex;
359
+ flex-direction: column-reverse;
360
+ gap: 0.15em;
361
+ z-index: 100;
362
+ }
363
+
364
+ .notifications ol.list {
365
+ pointer-events: auto;
366
+ }
367
+
368
+ .lextoast {
369
+ display: flex;
370
+ flex-direction: row;
371
+ position: relative;
372
+ width: calc(100% - 1.6rem);
373
+ background-color: var(--global-intense-background);
374
+ border: 1px solid var(--global-color-terciary);
375
+ box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
376
+ overflow: hidden;
377
+ -webkit-user-select: none;
378
+ -moz-user-select: none;
379
+ -ms-user-select: none;
380
+ user-select: none;
381
+ touch-action: none;
382
+ overflow: hidden;
383
+ pointer-events: auto;
384
+ padding: 0.8rem;
385
+ border-radius: 8px;
386
+ z-index: 3000;
387
+ transition: all 0.5s cubic-bezier(.42,.97,.52,1.19);
388
+ --element-offset: 8px;
389
+ --stack-offset: calc(100% - var(--element-offset));
390
+ }
391
+
392
+ .lextoast[data-open] {
393
+ translate: 0 0 !important;
394
+ }
395
+
396
+ .lextoast[data-closed] {
397
+ translate: calc(100% + 30px) 0 !important;
398
+ }
399
+
400
+ .lextoast .lextoastcontent {
401
+ display: grid;
402
+ gap: 0.25rem;
403
+ height: fit-content;
404
+ margin: auto 0;
405
+ }
406
+
407
+ .lextoast .lextoastcontent .title {
408
+ font-size: var(--global-font-size-lg);
409
+ color: var(--global-text-primary);
410
+ }
411
+
412
+ .lextoast .lextoastcontent .desc {
413
+ font-size: var(--global-font-size-sm);
414
+ color: var(--global-text-secondary);
415
+ }
416
+
417
+ .lextoast .lexwidget {
418
+ padding-inline: 16px;
419
+ }
420
+
421
+ .lextoast .closer {
422
+ position: absolute;
423
+ top: 10px;
424
+ right: 10px;
425
+ font-size: var(--global-font-size-sm);
426
+ }
427
+
428
+ .lextoast:first-child {
429
+ z-index: 3000;
430
+ transform: translateY(0px) scale(1);
431
+ }
432
+ .lextoast:nth-child(2) {
433
+ z-index: 2999;
434
+ opacity: 0.9;
435
+ transform: translateY(var(--stack-offset)) scale(0.95);
436
+ }
437
+ .lextoast:nth-child(3) {
438
+ z-index: 2998;
439
+ opacity: 0.8;
440
+ transform: translateY(calc(var(--stack-offset) * 2)) scale(0.9);
441
+ }
442
+ .lextoast:nth-child(n+4) {
443
+ opacity: 0;
444
+ transform: translateY(calc(var(--stack-offset) * 3)) scale(0.9);
445
+ }
446
+
447
+ .notifications ol.list .lextoast {
448
+ transform: translateY(0px) scale(1);
449
+ opacity: 1;
450
+ }
451
+
452
+ /* Commandbar */
453
+
454
+ .commandbar {
174
455
  position: absolute;
175
456
  background-color: var(--global-blur-background);
176
457
  --webkit-backdrop-filter: blur(12px);
@@ -181,7 +462,8 @@ body.noevents * {
181
462
  max-width: 740px;
182
463
  top: 15%;
183
464
  left: calc(50% - min(15%, 740px));
184
- display: flex;
465
+ margin: 0;
466
+ padding: 0 0 2px 0;
185
467
  flex-wrap: wrap;
186
468
  z-index: 105;
187
469
  -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
@@ -190,23 +472,27 @@ body.noevents * {
190
472
  /* this fixes the overflow:hidden in Chrome/Opera */
191
473
  }
192
474
 
193
- #global-search .gs-header {
475
+ .commandbar[open] {
476
+ display: flex;
477
+ }
478
+
479
+ .commandbar .gs-header {
194
480
  width: 100%;
195
481
  height: 32px;
196
482
  display: flex;
197
483
  padding: 6px;
198
484
  }
199
485
 
200
- #global-search a {
486
+ .commandbar a {
201
487
  color: var(--global-text-secondary);
202
488
  padding: 10px;
203
489
  background-color: var(--global-color-terciary);
204
490
  border-top-left-radius: 6px;
205
491
  border-bottom-left-radius: 6px;
206
- font-size: 12px;
492
+ font-size: var(--global-font-size-sm);
207
493
  }
208
494
 
209
- #global-search input {
495
+ .commandbar input {
210
496
  width: 100%;
211
497
  flex: 50%;
212
498
  background: none;
@@ -217,34 +503,35 @@ body.noevents * {
217
503
  outline: none;
218
504
  border: none;
219
505
  font-family: var(--global-font);
506
+ font-size: var(--global-font-size);
220
507
  line-height: 23px;
221
- font-size: 14px;
222
508
  font-weight: 600;
223
509
  }
224
510
 
225
- #global-search .lexarea {
511
+ .commandbar .lexarea {
226
512
  background: none !important;
227
513
  }
228
514
 
229
- #global-search .searchitembox {
515
+ .commandbar .searchitembox {
230
516
  flex-basis: 100%;
231
517
  overflow-y: scroll;
232
518
  max-height: calc(512px - 48px);
233
519
  }
234
520
 
235
- #global-search .searchitembox::-webkit-scrollbar {
521
+ .commandbar .searchitembox::-webkit-scrollbar {
236
522
  display: none;
237
523
  }
238
524
 
239
- #global-search .searchitembox .searchitem {
525
+ .commandbar .searchitembox .searchitem {
240
526
  padding: 10px;
241
527
  padding-left: 50px;
242
528
  color: var(--global-text-primary);
243
- font-size: 13px;
529
+ font-size: var(--global-font-size);
530
+ line-height: 15px;
244
531
  cursor: pointer;
245
532
  }
246
533
 
247
- #global-search .searchitembox .searchitem a {
534
+ .commandbar .searchitembox .searchitem a {
248
535
  padding: 0px;
249
536
  margin-left: -28px;
250
537
  margin-top: 2px;
@@ -252,32 +539,32 @@ body.noevents * {
252
539
  float: left;
253
540
  }
254
541
 
255
- #global-search .searchitembox .searchitem i {
542
+ .commandbar .searchitembox .searchitem i {
256
543
  width: 12px;
257
- font-size: 11px;
258
- margin-right: 4px;
544
+ font-size: var(--global-font-size-sm);
545
+ margin-right: 8px;
259
546
  margin-top: -2px;
260
547
  vertical-align: middle;
261
548
  }
262
549
 
263
- #global-search .searchitembox .searchitem img {
550
+ .commandbar .searchitembox .searchitem img {
264
551
  width: 12px;
265
552
  margin-right: 4px;
266
553
  margin-top: -2px;
267
554
  vertical-align: middle;
268
555
  }
269
556
 
270
- #global-search .searchitembox .searchitem .lang-ext {
557
+ .commandbar .searchitembox .searchitem .lang-ext {
271
558
  color: #676e75;
272
559
  font-size: var(--global-font-size);
273
560
  }
274
561
 
275
- #global-search .searchitembox .searchitem.last {
562
+ .commandbar .searchitembox .searchitem.last {
276
563
  border-bottom-left-radius: 6px;
277
564
  border-bottom-right-radius: 6px;
278
565
  }
279
566
 
280
- #global-search .searchitembox .searchitem.hovered {
567
+ .commandbar .searchitembox .searchitem.hovered {
281
568
  background-color: var(--global-selected);
282
569
  color: #f5f5f5;
283
570
  }
@@ -289,7 +576,7 @@ body.noevents * {
289
576
  background-color: var(--global-color-primary);
290
577
  padding: 15px;
291
578
  width: 100%;
292
- font-size: .875rem;
579
+ font-size: var(--global-font-size);
293
580
  line-height: 1.25rem;
294
581
  }
295
582
 
@@ -309,9 +596,14 @@ body.noevents * {
309
596
  margin-bottom: 12px;
310
597
  }
311
598
 
599
+ .lexfooter h2 {
600
+ margin-block-start: 0.83em;
601
+ margin-block-end: 0.83em;
602
+ }
603
+
312
604
  .lexfooter ul li {
313
605
  margin-bottom: 8px;
314
- font-size: 14px;
606
+ font-size: var(--global-font-size-lg);
315
607
  }
316
608
 
317
609
  .lexfooter a {
@@ -365,7 +657,7 @@ body.noevents * {
365
657
  }
366
658
 
367
659
  .lexfooter .social a a {
368
- font-size: 24px;
660
+ font-size: var(--global-font-size-xxl);
369
661
  }
370
662
 
371
663
  .lexfooter a:hover {
@@ -384,20 +676,26 @@ body.noevents * {
384
676
  /* Dialogs and alerts */
385
677
 
386
678
  .lexdialog {
679
+ outline: none;
680
+ border: 1px solid #aaaaaa48;
387
681
  background: none;
682
+ margin: 0;
683
+ padding: 0;
388
684
  position: absolute;
389
685
  min-width: 256px;
390
- /* overflow: hidden; */
391
- box-shadow: 0 2px 8px #101010;
392
- border-radius: 6px;
686
+ min-height: max-content;
687
+ overflow: hidden;
688
+ box-shadow: 0 2px 6px #101010bb;
689
+ border-radius: 8px;
393
690
  z-index: 101;
394
691
  background-color: var(--global-color-secondary);
395
692
  }
396
693
 
397
694
  .lexdialogtitle {
695
+ outline: none;
398
696
  font-family: var(--global-title-font);
399
697
  font-weight: 600;
400
- font-size: 18px;
698
+ font-size: var(--global-font-size-xl);
401
699
  color: var(--global-text-secondary);
402
700
  text-shadow: 0px 1px 6px #22222283;
403
701
  width: calc(100% - 24px);
@@ -418,7 +716,7 @@ body.noevents * {
418
716
  padding: 15px;
419
717
  word-break: break-all;
420
718
  color: var(--global-text-primary);
421
- font-size: 14px;
719
+ font-size: var(--global-font-size);
422
720
  border-bottom-left-radius: 8px;
423
721
  border-bottom-right-radius: 8px;
424
722
  margin-left: 0px !important;
@@ -427,11 +725,11 @@ body.noevents * {
427
725
  .lexdialogcontent.notitle {
428
726
  border-top-left-radius: 8px;
429
727
  border-top-right-radius: 8px;
430
- padding-top: 36px;
728
+ padding-top: 24px;
431
729
  }
432
730
 
433
731
  .lexdialogcloser {
434
- font-size: 16px;
732
+ font-size: var(--global-font-size-lg);
435
733
  color: var(--global-text-secondary);
436
734
  cursor: pointer;
437
735
  margin-right: 0.4em;
@@ -452,17 +750,21 @@ body.noevents * {
452
750
  }
453
751
 
454
752
  .lexdialogcloser:active {
455
- margin-top: 0.1em;
753
+ transform: scale(0.99);
456
754
  }
457
755
 
458
756
  .lexdialogcloser.notitle:active {
459
- margin-top: 0.05em;
757
+ transform: scale(0.99);
758
+ }
759
+
760
+ .lexdialog.prompt textarea {
761
+ color: var(--global-text-secondary);
762
+ font-weight: normal;
460
763
  }
461
764
 
462
765
  /* Pocket Dialog */
463
766
 
464
767
  .lexdialog.pocket {
465
- margin: 3px;
466
768
  background-color: var(--global-color-primary);
467
769
  }
468
770
 
@@ -472,7 +774,7 @@ body.noevents * {
472
774
 
473
775
  .lexdialog.pocket .lexdialogtitle {
474
776
  width: calc(100% - 28px);
475
- font-size: 14px;
777
+ font-size: var(--global-font-size-lg);
476
778
  background: var(--global-intense-background);
477
779
  }
478
780
 
@@ -527,16 +829,6 @@ body.noevents * {
527
829
  /* Pop up dialog */
528
830
  .lexpopup {
529
831
  background: var(--global-blur-background);
530
- opacity: 0;
531
- transition: opacity 1s;
532
- }
533
-
534
- .lexpopup.fadein {
535
- opacity: 1;
536
- }
537
-
538
- .lexpopup.fadeout {
539
- opacity: 0;
540
832
  }
541
833
 
542
834
  :root[data-theme="light"] {
@@ -545,7 +837,7 @@ body.noevents * {
545
837
  }
546
838
 
547
839
  .lexdialogtitle {
548
- text-shadow: 0px 2px 4px #8e8f9483;
840
+ text-shadow: 0px 2px 2px #8d8d8d34;
549
841
  }
550
842
 
551
843
  .lexpopup {
@@ -553,6 +845,17 @@ body.noevents * {
553
845
  }
554
846
  }
555
847
 
848
+ /* Generic */
849
+
850
+ .lexcontainer {
851
+ display: flex;
852
+ flex-direction: row;
853
+ }
854
+
855
+ .lexcontainer.col {
856
+ flex-direction: column;
857
+ }
858
+
556
859
  /* Area */
557
860
 
558
861
  .lexarea {
@@ -622,7 +925,7 @@ body.noevents * {
622
925
  .lexbranchtitle {
623
926
  font-family: var(--global-title-font);
624
927
  font-weight: 600;
625
- font-size: 15px;
928
+ font-size: var(--global-font-size-lg);
626
929
  color: var(--global-text-primary);
627
930
  background-color: var(--global-color-secondary);
628
931
  text-shadow: 0px 1px 6px #5554547c;
@@ -692,7 +995,7 @@ body.noevents * {
692
995
 
693
996
  .lexbranch .switch-branch-button {
694
997
  float: right;
695
- font-size: 11px;
998
+ font-size: var(--global-font-size-sm);
696
999
  margin: 8px 6px -4px 2px;
697
1000
  transition: 0.1s;
698
1001
  }
@@ -705,7 +1008,7 @@ body.noevents * {
705
1008
  .lexbranchtitle {
706
1009
  color: var(--global-text-secondary);
707
1010
  background-color: var(--global-color-secondary);
708
- text-shadow: 0px 1px 6px #afafaf7c;
1011
+ text-shadow: 0px 2px 2px #e0e0e03a;
709
1012
  }
710
1013
 
711
1014
  .lexbranch.closed .lexbranchtitle {
@@ -760,6 +1063,11 @@ body.noevents * {
760
1063
  padding-right: 4px;
761
1064
  }
762
1065
 
1066
+ .lexwidget.right {
1067
+ margin-left: auto;
1068
+ margin-right: 8px;
1069
+ }
1070
+
763
1071
  .lexwidget.micro button {
764
1072
  padding-left: 4px;
765
1073
  padding-right: 4px;
@@ -804,7 +1112,7 @@ body.noevents * {
804
1112
  color: var(--global-text-secondary);
805
1113
  }
806
1114
 
807
- .lexwidget input:not(.lexcheckbox, .lextoggle) {
1115
+ .lexwidget input:not(.lexcheckbox, .lextoggle, .lexrangeslider) {
808
1116
  font-family: var(--global-font);
809
1117
  background: none;
810
1118
  padding: 3px;
@@ -864,9 +1172,9 @@ body.noevents * {
864
1172
 
865
1173
  .lexwidget .inputicon {
866
1174
  padding: 6px;
867
- font-size: 10px;
868
- margin-top: 2px;
869
- margin-left: 2px;
1175
+ font-size: var(--global-font-size-sm);
1176
+ align-self: center;
1177
+ text-align: center;
870
1178
  }
871
1179
 
872
1180
  .lexwidget textarea {
@@ -926,16 +1234,12 @@ body.noevents * {
926
1234
  }
927
1235
  }
928
1236
 
929
- .lexfilter input {
930
- font-family: var(--global-font);
931
- }
932
-
933
1237
  .lextitle {
934
1238
  width: fit-content;
935
1239
  width: -moz-fit-content;
936
1240
  color: var(--global-text-secondary);
937
- font-weight: 800;
938
- font-size: 13px;
1241
+ font-weight: 600;
1242
+ font-size: var(--global-font-size);
939
1243
  margin: 12px;
940
1244
  padding: 2px;
941
1245
  padding-left: 12px;
@@ -961,7 +1265,7 @@ body.noevents * {
961
1265
  margin-top: 0.3em;
962
1266
  margin-right: 0.7em;
963
1267
  color: var(--global-selected-light);
964
- font-size: 11px;
1268
+ font-size: var(--global-font-size-sm);
965
1269
  }
966
1270
 
967
1271
  .lextitle.link {
@@ -985,7 +1289,7 @@ body.noevents * {
985
1289
  background-color: var(--button-color);
986
1290
  border-radius: 6px;
987
1291
  border: 1px solid transparent;
988
- margin-top: 2px;
1292
+ /* margin-top: 2px; */
989
1293
  min-height: 22px !important;
990
1294
  color: var(--global-text-primary);
991
1295
  font-weight: 500;
@@ -995,14 +1299,13 @@ body.noevents * {
995
1299
  cursor: pointer;
996
1300
  font-family: var(--global-font);
997
1301
  transition: 0.1s linear;
998
- padding: 0.25rem;
1302
+ padding: 0.35rem;
999
1303
  }
1000
1304
 
1001
1305
  :root[data-theme="light"] {
1002
1306
  .lexbutton {
1003
1307
  --button-color: var(--global-button-color);
1004
- color: var(--global-text-primary);
1005
- border: 1px solid var(--global-color-terciary) !important;
1308
+ border: 1px solid var(--global-color-terciary);
1006
1309
  }
1007
1310
 
1008
1311
  .lexbutton.selected {
@@ -1020,13 +1323,22 @@ body.noevents * {
1020
1323
  /* Few Sizes */
1021
1324
  .lexbutton.xs { width: 25% !important; margin: 0 auto; }
1022
1325
  .lexbutton.sm { width: 45% !important; margin: 0 auto; }
1326
+ /* Styles */
1327
+ .lexbutton.outline { box-shadow: none; --button-color: var(--global-intense-background); border: 1px solid var(--global-color-quaternary) !important; }
1328
+
1329
+ .lexbutton.left {
1330
+ text-align: left;
1331
+ padding-inline: 12px;
1332
+ }
1333
+
1334
+ .lexbutton span {
1335
+ align-items: center;
1336
+ }
1023
1337
 
1024
1338
  .lexbutton span:has(.lexbadge) {
1025
1339
  display: inline-flex;
1026
1340
  flex-wrap: nowrap;
1027
- flex-shrink: 0;
1028
1341
  justify-content: center;
1029
- align-items: center;
1030
1342
  gap: 0.4rem;
1031
1343
  }
1032
1344
 
@@ -1041,11 +1353,18 @@ body.noevents * {
1041
1353
 
1042
1354
  .lexbutton a {
1043
1355
  margin-left: 0px;
1044
- font-size: 10px;
1356
+ font-size: var(--global-font-size-sm);
1357
+ }
1358
+
1359
+ .lexbutton.array span {
1360
+ display: inline-flex;
1361
+ margin-left: 8px;
1045
1362
  }
1046
1363
 
1047
1364
  .lexbutton.array a {
1048
1365
  margin-top: 2px;
1366
+ margin-right: 3px;
1367
+ margin-left: auto;
1049
1368
  }
1050
1369
 
1051
1370
  .lexbutton:hover {
@@ -1059,6 +1378,10 @@ body.noevents * {
1059
1378
  transform: scale(0.99);
1060
1379
  }
1061
1380
 
1381
+ .lexbutton:disabled {
1382
+ color: var(--global-text-terciary);
1383
+ }
1384
+
1062
1385
  .lexbutton.selected {
1063
1386
  background: #3c4145;
1064
1387
  color: #DDD;
@@ -1071,44 +1394,39 @@ body.noevents * {
1071
1394
 
1072
1395
  /* Combo Buttons */
1073
1396
 
1074
- .lexcombobuttons {
1397
+ .lexcombobuttons .lexcombobuttonsbox {
1075
1398
  display: flex;
1076
- justify-content: center;
1399
+ background-color: light-dark(var(--global-color-terciary), var(--global-button-color));
1400
+ width: max-content;
1401
+ justify-self: center;
1402
+ padding: 3px;
1403
+ border-radius: 8px;
1404
+ gap: 0.2em;
1077
1405
  }
1078
1406
 
1079
- .lexcombobuttons.right {
1080
- justify-content: right;
1407
+ .lexcombobuttons.right .lexcombobuttonsbox {
1408
+ justify-self: right;
1081
1409
  }
1082
1410
 
1083
- .lexcombobuttons.left {
1084
- justify-content: left;
1411
+ .lexcombobuttons.left .lexcombobuttonsbox {
1412
+ justify-self: left;
1085
1413
  }
1086
1414
 
1087
1415
  .lexcombobuttons .lexbutton.combo {
1088
- margin-left: 1px;
1089
- margin-right: 1px;
1090
- border-radius: 0px;
1091
1416
  display: flex;
1092
- padding: 0.65em;
1417
+ padding: 0.7em 1.6em;
1093
1418
  transition: 0.2s;
1419
+ background: none;
1094
1420
  }
1095
1421
 
1096
- .lexcombobuttons .lexbutton.combo:first-child {
1097
- border-top-left-radius: 4px;
1098
- border-bottom-left-radius: 4px;
1099
- margin-left: 0px;
1100
- }
1101
-
1102
- .lexcombobuttons .lexbutton.combo:last-child {
1103
- border-top-right-radius: 4px;
1104
- border-bottom-right-radius: 4px;
1105
- margin-right: 0px;
1422
+ .lexcombobuttons .lexbutton.combo:hover {
1423
+ color: var(--global-text-secondary);
1106
1424
  }
1107
1425
 
1108
1426
  .lexcombobuttons .lexbutton.combo.selected {
1109
- background: light-dark(var(--global-selected-light), var(--global-selected));
1427
+ background-color: var(--global-color-primary);
1110
1428
  outline: none;
1111
- color: #fff;
1429
+ color: var(--global-text-primary);
1112
1430
  }
1113
1431
 
1114
1432
  .lexcombobuttons .lexbutton.combo:active {
@@ -1116,21 +1434,20 @@ body.noevents * {
1116
1434
  color: #ccc;
1117
1435
  }
1118
1436
 
1119
- .lexcombobuttons .lexbutton.combo a {
1120
- padding: 2px;
1121
- /* margin-right: 2px; */
1122
- padding-top: 0.3em;
1123
- }
1124
-
1125
1437
  .lexcombobuttons .lexbutton.combo span {
1126
1438
  line-height: 18px;
1127
1439
  }
1128
1440
 
1441
+ .lexcombobuttons .lexbutton.combo a {
1442
+ font-size: var(--global-font-size-sm);
1443
+ }
1444
+
1129
1445
  /* Dropdown (Combo) */
1130
1446
 
1131
1447
  .lexdropdown {
1132
1448
  display: grid;
1133
1449
  align-content: center;
1450
+ position: relative;
1134
1451
  }
1135
1452
 
1136
1453
  .lexdropdown .lexwidget {
@@ -1139,16 +1456,19 @@ body.noevents * {
1139
1456
 
1140
1457
  .lexdropdown .lexfilter {
1141
1458
  width: calc(100% - 6px) !important;
1142
- background-color: var(--global-color-primary);
1143
1459
  padding: 2px 3px;
1460
+ background-color: var(--global-color-primary);
1461
+ border-bottom: 1px solid;
1462
+ border-color: color-mix(in srgb, var(--global-text-terciary), #00000000 75%);
1144
1463
  }
1145
1464
 
1146
1465
  .lexdropdown .lexfilter a {
1147
- transform: translateX(-10px);
1466
+ font-size: var(--global-font-size-sm);
1467
+ padding-inline: 4px;
1148
1468
  }
1149
1469
 
1150
- .lexdropdown .lexoptions .lexlistitem {
1151
- font-size: 11px;
1470
+ .lexdropdown ul .lexlistitem {
1471
+ font-size: var(--global-font-size-sm);
1152
1472
  }
1153
1473
 
1154
1474
  .lexdropdown .option {
@@ -1167,35 +1487,43 @@ body.noevents * {
1167
1487
  height: fit-content;
1168
1488
  }
1169
1489
 
1170
- .lexdropdown ul {
1171
- position: fixed;
1172
- list-style: none;
1490
+ .lexdropdown .lexdropdownoptions {
1173
1491
  background-color: var(--global-color-primary);
1174
1492
  -webkit-backdrop-filter: blur(10px);
1175
1493
  backdrop-filter: blur(10px);
1176
- padding: 0px;
1177
- transform: translateY(-4px);
1178
- z-index: 10;
1179
1494
  margin: 0;
1180
- margin-top: 5px;
1181
- width: 100%;
1182
- box-shadow: 0 0px 12px rgba(0, 0, 0, 0.788);
1183
- border-bottom-left-radius: 8px;
1184
- border-bottom-right-radius: 8px;
1495
+ padding: 0;
1496
+ border: none;
1497
+ outline: none;
1498
+ width: fit-content;
1185
1499
  max-height: -webkit-fill-available;
1500
+ position: fixed;
1501
+ z-index: 10000;
1502
+ box-shadow: 0 0px 6px rgba(0, 0, 0, 0.603);
1503
+ border-bottom-left-radius: 6px;
1504
+ border-bottom-right-radius: 6px;
1186
1505
  overflow-y: auto;
1187
1506
  overflow-x: hidden;
1188
1507
  }
1189
1508
 
1190
- .lexdropdown ul.place-above {
1191
- max-height: unset;
1192
- border-bottom-left-radius: 0px;
1193
- border-bottom-right-radius: 0px;
1194
- border-top-left-radius: 8px;
1195
- border-top-right-radius: 8px;
1196
- }
1197
-
1198
- .lexdropdown .lexdropdownitem {
1509
+ .lexdropdown ul {
1510
+ list-style: none;
1511
+ padding: 0px;
1512
+ z-index: 10;
1513
+ margin: 0;
1514
+ width: 100%;
1515
+ height: 100%;
1516
+ }
1517
+
1518
+ .lexdropdown .lexdropdownoptions.place-above {
1519
+ /* max-height: unset; */
1520
+ border-bottom-left-radius: 0px;
1521
+ border-bottom-right-radius: 0px;
1522
+ border-top-left-radius: 6px;
1523
+ border-top-right-radius: 6px;
1524
+ }
1525
+
1526
+ .lexdropdown .lexdropdownitem {
1199
1527
  width: 100%;
1200
1528
  cursor: pointer;
1201
1529
  color: var(--global-text-primary);
@@ -1204,18 +1532,27 @@ body.noevents * {
1204
1532
  align-content: center;
1205
1533
  display: flow-root;
1206
1534
  padding: 2px 0px;
1535
+ padding-right: 32px;
1207
1536
  -webkit-user-select: none;
1208
1537
  -moz-user-select: none;
1209
1538
  -ms-user-select: none;
1210
1539
  user-select: none;
1211
1540
  }
1212
1541
 
1213
- .lexdropdown .lexdropdownitem:hover {
1542
+ .lexdropdown .lexdropdownitem.empty {
1543
+ cursor: default;
1544
+ }
1545
+
1546
+ .lexdropdown .lexdropdownitem.empty .option {
1547
+ padding: 12px;
1548
+ }
1549
+
1550
+ .lexdropdown .lexdropdownitem:not(.empty):hover {
1214
1551
  background-color: var(--global-selected);
1215
1552
  color: var(--global-text-primary);
1216
1553
  }
1217
1554
 
1218
- .lexdropdown .lexdropdownitem:active {
1555
+ .lexdropdown .lexdropdownitem:not(.empty):active {
1219
1556
  color: #fff;
1220
1557
  }
1221
1558
 
@@ -1246,7 +1583,7 @@ body.noevents * {
1246
1583
 
1247
1584
  .lexdropdown ul {
1248
1585
  background-color: var(--global-color-primary);
1249
- box-shadow: 0 0px 8px rgba(175, 175, 175, 0.788);
1586
+ box-shadow: 0 0px 6px rgba(175, 175, 175, 0.788);
1250
1587
  }
1251
1588
 
1252
1589
  .lexdropdown .lexdropdownitem:hover {
@@ -1265,16 +1602,15 @@ body.noevents * {
1265
1602
  position: relative;
1266
1603
  width: 1.5em;
1267
1604
  height: 1.5em;
1268
- padding: 0.15rem;
1605
+ padding: 0.12rem;
1269
1606
  display: inline-block;
1270
1607
  background-color: var(--global-color-primary);
1271
1608
  color: #fff;
1272
1609
  border-width: 1px;
1273
1610
  border-style: solid;
1274
1611
  border-color: color-mix(in srgb, var(--checkbox-color) 50%, transparent);
1275
- vertical-align: -3px;
1276
1612
  border-radius: 4px;
1277
- margin: 0 4px;
1613
+ margin: auto 4px;
1278
1614
  text-align: center;
1279
1615
  -webkit-appearance: none;
1280
1616
  -moz-appearance: none;
@@ -1296,7 +1632,6 @@ body.noevents * {
1296
1632
  width: 100%;
1297
1633
  height: 100%;
1298
1634
  background-color: currentColor;
1299
- font-size: 1rem;
1300
1635
  line-height: .75;
1301
1636
  transition: clip-path .3s .1s,opacity .1s .1s,rotate .3s .1s,translate .3s .1s;
1302
1637
  display: block;
@@ -1334,7 +1669,7 @@ body.noevents * {
1334
1669
  /* Toggle Widget */
1335
1670
 
1336
1671
  .lextoggle {
1337
- --toggle-color: var(--global-button-color);
1672
+ --toggle-color: #1a1a1a;
1338
1673
  border: 1px solid transparent;
1339
1674
  color: #f9f9f9;
1340
1675
  background-color: var(--global-color-quaternary);
@@ -1344,6 +1679,8 @@ body.noevents * {
1344
1679
  appearance: none;
1345
1680
  vertical-align: middle;
1346
1681
  -webkit-user-select: none;
1682
+ -moz-user-select: none;
1683
+ -ms-user-select: none;
1347
1684
  user-select: none;
1348
1685
  border-radius: 12px;
1349
1686
  padding: 3px;
@@ -1474,6 +1811,65 @@ body.noevents * {
1474
1811
  margin-top: -1px;
1475
1812
  }
1476
1813
 
1814
+ /* Toggle Widget */
1815
+
1816
+ .lexradiogroup {
1817
+ width: 100% !important;
1818
+ display: flex;
1819
+ flex-direction: column;
1820
+ }
1821
+
1822
+ .lexradiogroup span {
1823
+ font-weight: 600;
1824
+ }
1825
+
1826
+ .lexradiogroup .lexradiogroupitem {
1827
+ display: flex;
1828
+ padding: 2px;
1829
+ gap: 0.65em;
1830
+ }
1831
+
1832
+ .lexradiogroup .lexradiogroupitem span {
1833
+ font-weight: unset;
1834
+ }
1835
+
1836
+ .lexradiogroup .lexradiogroupitem button {
1837
+ width: 14px;
1838
+ height: 14px;
1839
+ min-width: 14px !important;
1840
+ min-height: 14px !important;
1841
+ padding: 0;
1842
+ margin: auto 0;
1843
+ border-radius: 7px;
1844
+ background-color: var(--global-intense-background);
1845
+ border: 1px solid var(--global-text-secondary) !important;
1846
+ }
1847
+
1848
+ .lexradiogroup .lexradiogroupitem button:disabled {
1849
+ border-color: var(--global-color-quaternary) !important;
1850
+ }
1851
+
1852
+ .lexradiogroup .lexradiogroupitem button span {
1853
+ width: 10px;
1854
+ height: 10px;
1855
+ min-width: 10px;
1856
+ min-height: 10px;
1857
+ border-radius: 50%;
1858
+ pointer-events: none;
1859
+ margin: auto;
1860
+ }
1861
+
1862
+ .lexradiogroup .lexradiogroupitem button.checked span {
1863
+ background-color: var(--global-text-primary);
1864
+ }
1865
+
1866
+ /* Colors */
1867
+ .lexradiogroup.primary .lexradiogroupitem button.checked span { background-color: var(--global-selected); }
1868
+ .lexradiogroup.secondary .lexradiogroupitem button.checked span { background-color: var(--global-selected-light); }
1869
+ .lexradiogroup.accent .lexradiogroupitem button.checked span { background-color: var(--global-color-accent); }
1870
+ .lexradiogroup.warning .lexradiogroupitem button.checked span { background-color: var(--global-color-warning); }
1871
+ .lexradiogroup.error .lexradiogroupitem button.checked span { background-color: var(--global-color-error); }
1872
+
1477
1873
  /* Input Color Widget */
1478
1874
 
1479
1875
  .lexcolor {
@@ -1524,7 +1920,7 @@ body.noevents * {
1524
1920
 
1525
1921
  .lexvector a {
1526
1922
  width: 48px;
1527
- font-size: 11px;
1923
+ font-size: var(--global-font-size-sm);
1528
1924
  margin-left: 6px;
1529
1925
  margin-right: 6px;
1530
1926
  }
@@ -1562,7 +1958,7 @@ body.noevents * {
1562
1958
  width: 2px;
1563
1959
  right: 0.25em;
1564
1960
  top: 25%;
1565
- font-size: 11px;
1961
+ font-size: var(--global-font-size-sm);
1566
1962
  color: var(--global-text-secondary);
1567
1963
  z-index: 11;
1568
1964
  }
@@ -1632,6 +2028,7 @@ input[type=number] {
1632
2028
 
1633
2029
  .lexwidget .numberbox {
1634
2030
  display: grid;
2031
+ width: calc(100% - 4px);
1635
2032
  background-color: var(--global-button-color);
1636
2033
  border: 2px solid var(--global-color-transparent);
1637
2034
  border-radius: 6px;
@@ -1654,6 +2051,10 @@ input[type=number] {
1654
2051
  pointer-events: none;
1655
2052
  }
1656
2053
 
2054
+ .lexnumber .vecinput {
2055
+ width: calc(100% - 12px); /* remove padding, margin, and border */
2056
+ }
2057
+
1657
2058
  .lexinputmeasure {
1658
2059
  font-family: var(--global-font);
1659
2060
  font-size: var(--global-font-size);
@@ -1665,6 +2066,7 @@ input[type=number] {
1665
2066
  -webkit-appearance: none;
1666
2067
  border: none !important;
1667
2068
  width: calc(100% - 12px);
2069
+ height: 1px;
1668
2070
  outline: none;
1669
2071
  opacity: 0.7;
1670
2072
  transition: opacity .2s;
@@ -1676,10 +2078,6 @@ input[type=number] {
1676
2078
  opacity: 1;
1677
2079
  }
1678
2080
 
1679
- input[type="range"] {
1680
- height: 1px;
1681
- }
1682
-
1683
2081
  .lexinputslider::-moz-range-track {
1684
2082
  height: 1px;
1685
2083
  background: #a19dc9;
@@ -1720,6 +2118,103 @@ input[type="range"] {
1720
2118
  /* color: red; */
1721
2119
  }
1722
2120
 
2121
+ /* Range Widget */
2122
+
2123
+ .lexrangeslider {
2124
+ --range-thumb-color: var(--global-color-primary);
2125
+ --range-thumb-size: 1rem;
2126
+ --range-progress: currentColor;
2127
+ --range-fill: 1;
2128
+ --range-thumb-padding: 0.15rem;
2129
+ --range-bg: color-mix(in oklab,currentColor 10%,#0000);
2130
+ --range-dir: 1;
2131
+ --radius-selector: 0.5rem;
2132
+ -webkit-appearance: none;
2133
+ -moz-appearance: none;
2134
+ appearance: none;
2135
+ webkit-appearance: none;
2136
+ --radius-selector-max: calc(var(--radius-selector) + var(--radius-selector) + var(--radius-selector));
2137
+ border-radius: calc(var(--radius-selector) + min(var(--range-thumb-padding),var(--radius-selector-max)));
2138
+ width: calc(100% - 4px);
2139
+ height: var(--range-thumb-size);
2140
+ border: none;
2141
+ outline: none;
2142
+ color: var(--global-text-secondary);
2143
+ background-color: #0000;
2144
+ overflow: hidden;
2145
+ padding: 0;
2146
+ cursor: pointer;
2147
+ transition: opacity .2s;
2148
+ -moz-transition: .2s;
2149
+ -webkit-transition: .2s;
2150
+ vertical-align: middle;
2151
+ }
2152
+
2153
+ /* Colors */
2154
+ .lexrangeslider.primary { color: var(--global-selected); }
2155
+ .lexrangeslider.secondary { color: var(--global-selected-light); }
2156
+ .lexrangeslider.accent { color: var(--global-color-accent); }
2157
+ .lexrangeslider.warning { color: var(--global-color-warning); }
2158
+ .lexrangeslider.error { color: var(--global-color-error); }
2159
+
2160
+ .lexrangeslider.left {
2161
+ --range-dir: -1;
2162
+ }
2163
+
2164
+ .lexrangeslider.no-fill {
2165
+ --range-fill: 0;
2166
+ --range-bg: currentColor;
2167
+ }
2168
+
2169
+ .lexrangeslider:hover {
2170
+ filter: brightness(1.1);
2171
+ }
2172
+
2173
+ .lexrangeslider::-moz-range-track {
2174
+ background-color: var(--range-bg);
2175
+ border-radius: var(--radius-selector);
2176
+ width: 100%;
2177
+ height: calc(var(--range-thumb-size)*0.5);
2178
+ }
2179
+
2180
+ .lexrangeslider::-webkit-slider-runnable-track {
2181
+ background-color: var(--range-bg);
2182
+ border-radius: var(--radius-selector);
2183
+ width: 100%;
2184
+ height: calc(var(--range-thumb-size)*0.5);
2185
+ }
2186
+
2187
+ .lexrangeslider::-webkit-slider-thumb {
2188
+ box-sizing: border-box;
2189
+ border-radius: calc(var(--radius-selector) + min(var(--range-thumb-padding),var(--radius-selector-max)));
2190
+ height: var(--range-thumb-size);
2191
+ width: var(--range-thumb-size);
2192
+ border: var(--range-thumb-padding) solid;
2193
+ -webkit-appearance: none;
2194
+ -moz-appearance: none;
2195
+ appearance: none;
2196
+ webkit-appearance: none;
2197
+ color: var(--range-progress);
2198
+ box-shadow: 0 -1px oklch(0% 0 0/0.1) inset,0 8px 0 -4px oklch(100% 0 0/0.1) inset,0 1px color-mix(in oklab,currentColor calc(1*10%),#0000),0 0 0 2rem var(--range-thumb-color) inset,calc((var(--range-dir,1)*-100rem) - (var(--range-dir,1)*var(--range-thumb-size)/2)) 0 0 calc(100rem*var(--range-fill));
2199
+ background-color: currentColor;
2200
+ position: relative;
2201
+ top: 50%;
2202
+ transform: translateY(-50%);
2203
+ }
2204
+
2205
+ .lexrangeslider::-moz-range-thumb {
2206
+ box-sizing: border-box;
2207
+ border-radius: calc(var(--radius-selector) + min(var(--range-thumb-padding),var(--radius-selector-max)));
2208
+ height: var(--range-thumb-size);
2209
+ width: var(--range-thumb-size);
2210
+ border: var(--range-thumb-padding) solid;
2211
+ color: var(--range-progress);
2212
+ box-shadow: 0 -1px oklch(0% 0 0/0.1) inset,0 8px 0 -4px oklch(100% 0 0/0.1) inset,0 1px color-mix(in oklab,currentColor calc(1*10%),#0000),0 0 0 2rem var(--range-thumb-color) inset,calc((var(--range-dir,1)*-100rem) - (var(--range-dir,1)*var(--range-thumb-size)/2)) 0 0 calc(100rem*var(--range-fill));
2213
+ background-color: currentColor;
2214
+ position: relative;
2215
+ top: 50%;
2216
+ }
2217
+
1723
2218
  /* Size Widget */
1724
2219
 
1725
2220
  .lexwidget .lexsizecross {
@@ -1871,7 +2366,7 @@ input[type="range"] {
1871
2366
  -moz-user-select: none;
1872
2367
  -ms-user-select: none;
1873
2368
  user-select: none;
1874
- font-size: 14px;
2369
+ font-size: var(--global-font-size-lg);
1875
2370
  font-weight: 800;
1876
2371
  }
1877
2372
 
@@ -1916,9 +2411,7 @@ input[type="range"] {
1916
2411
  .lextree .lextreeitem .tree-item-icon {
1917
2412
  width: 12px;
1918
2413
  height: 12px;
1919
- margin-right: 4px;
1920
- vertical-align: middle;
1921
- margin-top: -1px;
2414
+ margin-right: 6px;
1922
2415
  }
1923
2416
 
1924
2417
  .lextree .lextreeitem.draggingover {
@@ -1938,14 +2431,12 @@ input[type="range"] {
1938
2431
  .lextree .lextreeitem a {
1939
2432
  margin-right: 6px;
1940
2433
  margin-top: 4px;
1941
- font-size: 10px;
2434
+ font-size: var(--global-font-size-sm);
1942
2435
  }
1943
2436
 
1944
2437
  .lextree .lextreeitem a.hierarchy {
1945
- font-size: 5px;
1946
2438
  margin-right: 6px;
1947
2439
  margin-top: 4px;
1948
- vertical-align: 2px;
1949
2440
  }
1950
2441
 
1951
2442
  .lextree .lextreeitem a:hover {
@@ -1958,12 +2449,11 @@ input[type="range"] {
1958
2449
  }
1959
2450
 
1960
2451
  .lextree .lextreeitem.parent a {
1961
- font-size: 10px;
1962
- vertical-align: 1px;
2452
+ font-size: var(--global-font-size-xs);
1963
2453
  }
1964
2454
 
1965
2455
  .lextree .lextreeitem .itemicon {
1966
- font-size: 10px !important;
2456
+ font-size: var(--global-font-size-sm) !important;
1967
2457
  float: right;
1968
2458
  margin-top: 7px;
1969
2459
  margin-right: 8px;
@@ -2088,16 +2578,15 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
2088
2578
 
2089
2579
  .lexbadge {
2090
2580
  border-radius: 0.35rem;
2091
- vertical-align: middle;
2092
2581
  color: #fff;
2093
2582
  font-weight: 500;
2094
2583
  border: 1px solid var(--badge-color, #14171a);
2095
2584
  width: fit-content;
2096
2585
  justify-content: center;
2097
2586
  align-items: center;
2098
- gap: .5rem;
2587
+ gap: 0.5rem;
2099
2588
  padding-inline: 0.6rem;
2100
- font-size: 0.875rem;
2589
+ font-size: var(--global-font-size);
2101
2590
  display: inline-flex;
2102
2591
  background-color: var(--badge-color, #1d232a);
2103
2592
  }
@@ -2116,11 +2605,11 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
2116
2605
  background-image: none;
2117
2606
  }
2118
2607
  /* Sizes */
2119
- .lexbadge.xs { padding-inline: 0.4rem; font-size: 0.6rem; }
2120
- .lexbadge.sm { padding-inline: 0.5rem; font-size: 0.75rem; }
2608
+ .lexbadge.xs { padding-inline: 0.4rem; font-size: var(--global-font-size-xs); }
2609
+ .lexbadge.sm { padding-inline: 0.5rem; font-size: var(--global-font-size-sm); }
2121
2610
  /* .lexbadge.md { default } */
2122
- .lexbadge.lg { padding-inline: 0.8rem; font-size: 1rem; }
2123
- .lexbadge.xl { padding-inline: 1rem; font-size: 1.125rem; }
2611
+ .lexbadge.lg { padding-inline: 0.8rem; font-size: var(--global-font-size-lg); }
2612
+ .lexbadge.xl { padding-inline: 1rem; font-size: var(--global-font-size-xl) }
2124
2613
 
2125
2614
  /* Menu Bar */
2126
2615
 
@@ -2130,7 +2619,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
2130
2619
  display: flex;
2131
2620
  height: 100%;
2132
2621
  color: var(--global-text-primary);
2133
- font-size: 13px;
2622
+ font-size: var(--global-font-size);
2134
2623
  font-weight: 500;
2135
2624
  }
2136
2625
 
@@ -2166,17 +2655,30 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
2166
2655
  margin-top: 0.05em;
2167
2656
  }
2168
2657
 
2169
- .lexcontextmenu {
2658
+ .lexmenubox {
2170
2659
  position: absolute;
2171
2660
  padding-right: 8px;
2172
2661
  z-index: 1001;
2173
- box-shadow: 0 0 6px #2c2c2c7c !important;
2174
- background-color: var(--global-blur-background);
2175
- border: 1px solid #91909036;
2662
+ background-color: #111111f3;
2663
+ border: 1px solid #aaaaaa48;
2176
2664
  border-radius: 6px;
2665
+ transition: all 0.15s cubic-bezier(.42,.97,.52,1.19);
2666
+ transform: translate(-2px, -10px);
2667
+ opacity: 0;
2177
2668
  }
2178
2669
 
2179
- .lexcontextmenu:before {
2670
+ :root[data-theme="light"] {
2671
+ .lexmenubox {
2672
+ background-color: #fffffff3;
2673
+ box-shadow: 0px 6px 7px -3px #a7a7a7b7 !important;
2674
+ }
2675
+ }
2676
+
2677
+ .lexmenubox[data-submenu] {
2678
+ transform: translate(-10px, -2px);
2679
+ }
2680
+
2681
+ .lexmenubox:before {
2180
2682
  content: "";
2181
2683
  position: absolute;
2182
2684
  width: 100%;
@@ -2189,18 +2691,22 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
2189
2691
  z-index: -1;
2190
2692
  }
2191
2693
 
2192
- .lexcontextmenu:focus {
2694
+ .lexmenubox[data-open]{
2695
+ transform: translate(0, 0);
2696
+ opacity: 1;
2697
+ }
2698
+
2699
+ .lexmenubox:focus {
2193
2700
  outline: none;
2194
2701
  }
2195
2702
 
2196
- .lexcontextmenu .lexcontextmenuentry {
2703
+ .lexmenubox .lexmenuboxentry {
2197
2704
  font-size: var(--global-font-size);
2198
2705
  width: 100%;
2199
2706
  color: var(--global-text-primary);
2200
- padding: 4px;
2707
+ padding: 6px;
2201
2708
  padding-left: 8px;
2202
2709
  padding-right: 0px;
2203
- padding-bottom: 6px;
2204
2710
  cursor: pointer;
2205
2711
  -webkit-user-select: none;
2206
2712
  -moz-user-select: none;
@@ -2217,109 +2723,109 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
2217
2723
  position: relative;
2218
2724
  }
2219
2725
 
2220
- .lexcontextmenu .lexcontextmenuentry:first-child {
2726
+ .lexmenubox .lexmenuboxentry.disabled {
2727
+ color: var(--global-text-terciary);
2728
+ cursor: default;
2729
+ }
2730
+
2731
+ .lexmenubox .lexmenuboxentry:first-child {
2221
2732
  border-top-right-radius: 5px;
2222
2733
  border-top-left-radius: 5px;
2223
2734
  }
2224
2735
 
2225
- .lexcontextmenu .lexcontextmenuentry:last-child {
2736
+ .lexmenubox .lexmenuboxentry:last-child {
2226
2737
  border-bottom-right-radius: 5px;
2227
2738
  border-bottom-left-radius: 5px;
2228
2739
  }
2229
2740
 
2230
- .lexcontextmenu .lexcontextmenuentrycontainer {
2741
+ .lexmenubox .lexmenuboxentrycontainer {
2231
2742
  display: flex;
2232
2743
  flex-direction: row;
2233
2744
  }
2234
2745
 
2235
- .lexcontextmenu .lexcontextmenuentry .lexentryname {
2746
+ .lexmenubox .lexmenuboxentry .lexentryname {
2236
2747
  margin-right: 32px;
2237
- margin-top: 2px;
2238
2748
  }
2239
2749
 
2240
- .lexcontextmenu .lexcontextmenuentry.noicon .lexentryname {
2750
+ .lexmenubox .lexmenuboxentry.noicon .lexentryname {
2241
2751
  margin-left: 10px;
2242
2752
  }
2243
2753
 
2244
2754
  /* normal icons */
2245
- .lexcontextmenu .lexcontextmenuentry a {
2246
- font-size: 10px;
2755
+ .lexmenubox .lexmenuboxentry a {
2756
+ font-size: var(--global-font-size-sm);
2247
2757
  float: left;
2248
2758
  margin-right: 13px;
2249
- margin-top: 9px;
2250
2759
  margin-left: 9px;
2760
+ align-content: center;
2251
2761
  min-width: 10px;
2252
2762
  }
2253
2763
 
2254
2764
  /* submenu specified arrow */
2255
- .lexcontextmenu .lexcontextmenuentry a.fa-xs {
2765
+ .lexmenubox .lexmenuboxentry a.fa-xs {
2256
2766
  float: right;
2257
2767
  margin-right: 8px;
2258
2768
  }
2259
2769
 
2260
- .lexcontextmenu .lexcontextmenuentry:hover {
2770
+ .lexmenubox .lexmenuboxentry:not(.disabled):hover {
2261
2771
  background-color: var(--global-selected);
2262
2772
  color: #f5f5f5;
2263
2773
  }
2264
2774
 
2265
- .lexcontextmenu .lexcontextmenuentry:active {
2775
+ .lexmenubox .lexmenuboxentry:active {
2266
2776
  color: var(--global-text-secondary);
2267
2777
  }
2268
2778
 
2269
- .lexcontextmenu .lexcontextmenuentry input {
2779
+ .lexmenubox .lexmenuboxentry input {
2270
2780
  float: left;
2271
2781
  margin-right: 28px;
2272
2782
  margin-left: 5px;
2273
2783
  }
2274
2784
 
2275
- .lexcontextmenu .lexcontextmenuentry:hover input::after {
2785
+ .lexmenubox .lexmenuboxentry:hover input::after {
2276
2786
  border-color: #f5f5f5;
2277
2787
  }
2278
2788
 
2279
- .lexcontextmenu .lexseparator {
2789
+ .lexmenubox .lexseparator {
2280
2790
  margin: 2px 0 2px;
2281
- width: -moz-calc(100% + 14px);
2282
- width: -webkit-calc(100% + 14px);
2283
- width: calc(100% + 14px);
2791
+ width: -moz-calc(100% + 8px);
2792
+ width: -webkit-calc(100% + 8px);
2793
+ width: calc(100% + 8px);
2794
+ border-color: var(--global-text-terciary);
2795
+ opacity: 0.25;
2284
2796
  }
2285
2797
 
2286
- .lexcontextmenu .lexentryshort {
2287
- font-size: 10px;
2288
- float: right;
2289
- margin-top: 3px;
2798
+ .lexmenubox .lexentryshort {
2799
+ font-size: var(--global-font-size-xs);
2290
2800
  font-weight: bold;
2291
- color: var(--global-text-primary);
2292
- margin-right: 12px;
2293
2801
  text-align: right;
2802
+ float: right;
2803
+ align-content: center;
2804
+ color: var(--global-text-terciary);
2805
+ margin-right: 12px;
2294
2806
  }
2295
2807
 
2296
2808
  .lexmenubar .lexmenubuttons {
2297
- display: flex;
2809
+ display: inline-flex;
2298
2810
  background-color: var(--global-color-secondary);
2299
- margin-top: 10px;
2300
- margin-bottom: 8px;
2811
+ height: 75%;
2812
+ margin: auto;
2301
2813
  border-radius: 6px;
2302
2814
  padding-inline: 4px;
2303
- }
2304
-
2305
- .lexmenubar .lexmenubuttons.center {
2306
- margin: 0 auto;
2307
- margin-top: 10px;
2308
- margin-bottom: 8px;
2815
+ font-size: var(--global-font-size-lg);
2309
2816
  }
2310
2817
 
2311
2818
  .lexmenubar .lexmenubuttons.right {
2312
- margin-left: auto;
2313
- margin-right: 16px;
2819
+ margin-left: unset;
2820
+ margin-right: 12px;
2314
2821
  }
2315
2822
 
2316
2823
  .lexmenubar .lexmenubutton {
2317
- /* display: flex; */
2318
- justify-content: center;
2319
- padding: 8px;
2320
- padding-top: 0.6em;
2321
2824
  color: var(--global-text-secondary);
2825
+ padding-inline: 0.45em;
2322
2826
  cursor: pointer;
2827
+ place-content: center;
2828
+ justify-items: center;
2323
2829
  -webkit-user-select: none;
2324
2830
  -moz-user-select: none;
2325
2831
  -ms-user-select: none;
@@ -2337,7 +2843,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
2337
2843
 
2338
2844
  /* Context Menu */
2339
2845
 
2340
- .lexcontextmenubox {
2846
+ .lexcontextmenu {
2341
2847
  z-index: 102;
2342
2848
  position: absolute;
2343
2849
  padding-right: 20px;
@@ -2347,7 +2853,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
2347
2853
  border: 1px solid #91909036;
2348
2854
  }
2349
2855
 
2350
- .lexcontextmenubox:before {
2856
+ .lexcontextmenu:before {
2351
2857
  content: "";
2352
2858
  position: absolute;
2353
2859
  width: 100%;
@@ -2360,7 +2866,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
2360
2866
  border-radius: 6px;
2361
2867
  }
2362
2868
 
2363
- .lexcontextmenubox .lexcontextmenuentry {
2869
+ .lexcontextmenu .lexmenuboxentry {
2364
2870
  width: 100%;
2365
2871
  color: var(--global-text-secondary);
2366
2872
  padding: 3px;
@@ -2374,23 +2880,23 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
2374
2880
  user-select: none;
2375
2881
  }
2376
2882
 
2377
- .lexcontextmenubox .lexcontextmenuentry:first-child {
2883
+ .lexcontextmenu .lexmenuboxentry:first-child {
2378
2884
  border-top-left-radius: 5px;
2379
2885
  border-top-right-radius: 5px;
2380
2886
  }
2381
2887
 
2382
- .lexcontextmenubox .lexcontextmenuentry:last-child {
2888
+ .lexcontextmenu .lexmenuboxentry:last-child {
2383
2889
  border-bottom-left-radius: 5px;
2384
2890
  border-bottom-right-radius: 5px;
2385
2891
  }
2386
2892
 
2387
- .lexcontextmenubox .lexcontextmenuentry.cmtitle {
2893
+ .lexcontextmenu .lexmenuboxentry.cmtitle {
2388
2894
  background: light-dark(var(--global-color-terciary), var(--global-intense-background));
2389
2895
  font-weight: bold;
2390
2896
  cursor: default;
2391
2897
  }
2392
2898
 
2393
- .lexcontextmenubox .lexcontextmenuentry.cmseparator {
2899
+ .lexcontextmenu .lexmenuboxentry.cmseparator {
2394
2900
  height: 1px;
2395
2901
  border-bottom: 1px solid var(--global-color-terciary);
2396
2902
  padding-bottom: 0;
@@ -2398,7 +2904,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
2398
2904
  margin-top: -4px;
2399
2905
  }
2400
2906
 
2401
- .lexcontextmenubox .lexcontextmenuentry .lexentryname {
2907
+ .lexcontextmenu .lexmenuboxentry .lexentryname {
2402
2908
  margin-right: 10px;
2403
2909
  margin-top: 2px;
2404
2910
  font-size: var(--global-font-size);
@@ -2407,124 +2913,340 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
2407
2913
  text-overflow: ellipsis;
2408
2914
  }
2409
2915
 
2410
- .lexcontextmenubox .lexcontextmenuentry .lexentryname.disabled {
2916
+ .lexcontextmenu .lexmenuboxentry .lexentryname.disabled {
2411
2917
  color: light-dark(#808080b0, #c0c4cb53);
2412
2918
  }
2413
2919
 
2414
- /* normal icons */
2415
- .lexcontextmenubox .lexcontextmenuentry a {
2416
- float: right;
2417
- margin-right: 0px;
2418
- margin-top: 10px;
2419
- font-size: 10px;
2920
+ /* normal icons */
2921
+ .lexcontextmenu .lexmenuboxentry a {
2922
+ float: right;
2923
+ margin-right: 0px;
2924
+ margin-top: 10px;
2925
+ font-size: var(--global-font-size-xs);
2926
+ }
2927
+
2928
+ /* submenu specified arrow */
2929
+ .lexcontextmenu .lexmenuboxentry a.fa-xs {
2930
+ float: right;
2931
+ margin-top: -9px;
2932
+ }
2933
+
2934
+ .lexcontextmenu .lexmenuboxentry:hover:not(.cmtitle) {
2935
+ background-color: var(--global-selected);
2936
+ color: #f5f5f5;
2937
+ }
2938
+
2939
+ .lexcontextmenu .lexmenuboxentry:active:not(.cmtitle, .cmseparator) {
2940
+ padding-top: 0.22em;
2941
+ color: #b7b7cba4;
2942
+ }
2943
+
2944
+ .lexcontextmenu .lexseparator {
2945
+ margin: 3px 0 3px 10px;
2946
+ }
2947
+
2948
+ .lexcontextmenu .lexentryshort {
2949
+ font-size: var(--global-font-size-xs);
2950
+ float: right;
2951
+ font-weight: bold;
2952
+ color: #979aa0e3;
2953
+ }
2954
+
2955
+ /* Side Bar */
2956
+
2957
+ .lexsidebar {
2958
+ width: calc(100% - 20px);
2959
+ height: 100%;
2960
+ padding: 10px;
2961
+ display: flex;
2962
+ flex-direction: column;
2963
+ gap: 0.2rem;
2964
+ }
2965
+
2966
+ .lexsidebar svg, .lexsidebar svg path {
2967
+ width: 1rem;
2968
+ height: 1rem;
2969
+ --color: var(--global-text-secondary);
2970
+ fill: var(--color);
2971
+ stroke: var(--color);
2972
+ display: block;
2973
+ }
2974
+
2975
+ .lexsidebar .lexwidget {
2976
+ width: 100% !important;
2977
+ padding: 0 !important;
2978
+ }
2979
+
2980
+ .lexsidebarcontent {
2981
+ width: 100%;
2982
+ padding-block-start: 4px;
2983
+ padding-block-end: 4px;
2984
+ display: flex;
2985
+ flex-direction: column;
2986
+ overflow-y: scroll;
2987
+ overflow-x: hidden;
2988
+ }
2989
+
2990
+ .lexsidebar .lexsidebargroup {
2991
+ display: flex;
2992
+ flex-direction: column;
2993
+ gap: 0.1em;
2994
+ }
2995
+
2996
+ .lexsidebar .lexsidebargroup:nth-child(n+2) {
2997
+ margin-top: 0.15rem;
2998
+ }
2999
+
3000
+ .lexsidebar .lexsidebarseparator {
3001
+ background-color: #5251514d;
3002
+ width: 100%;
3003
+ height: 1px;
3004
+ margin: 0 auto;
3005
+ margin-top: 0.4rem;
3006
+ margin-bottom: 0.4rem;
3007
+ }
3008
+
3009
+ .lexsidebar .lexsidebargrouptitle {
3010
+ font-size: var(--global-font-size-sm);
3011
+ font-weight: 600;
3012
+ color: var(--global-text-secondary);
3013
+ overflow: hidden;
3014
+ display: flex;
3015
+ }
3016
+
3017
+ .lexsidebar .lexsidebargrouptitle div {
3018
+ transform: translate(0, 0);
3019
+ opacity: 1;
3020
+ transition: transform 0.3s cubic-bezier(0,0,.2,1), opacity 0.1s cubic-bezier(0,0,.2,1), max-height 0.3s cubic-bezier(0,0,.2,1);
3021
+ height: 44px;
3022
+ max-height: 44px;
3023
+ align-content: center;
3024
+ }
3025
+
3026
+ .lexsidebar .lexsidebargrouptitle a {
3027
+ margin: auto 0;
3028
+ margin-left: auto;
3029
+ margin-right: 8px;
3030
+ transition: transform 0.3s cubic-bezier(0,0,.2,1), opacity 0.1s cubic-bezier(0,0,.2,1), max-height 0.3s cubic-bezier(0,0,.2,1);
3031
+ }
3032
+
3033
+ .lexsidebar.collapsing .lexsidebargrouptitle * {
3034
+ max-height: 0px;
3035
+ transform: translate(0, -24px);
3036
+ opacity: 0;
3037
+ }
3038
+
3039
+ .lexsidebar.collapsed .lexsidebargrouptitle * {
3040
+ display: none;
3041
+ }
3042
+
3043
+ .lexsidebar .lexsidebarentry {
3044
+ width: calc(100% - 16px);
3045
+ padding: 6px;
3046
+ padding-inline: 8px;
3047
+ border-radius: 8px;
3048
+ cursor: pointer;
3049
+ -webkit-user-select: none;
3050
+ -moz-user-select: none;
3051
+ -ms-user-select: none;
3052
+ user-select: none;
3053
+ }
3054
+
3055
+ .lexsidebar .lexsidebarentry span {
3056
+ font-size: var(--global-font-size);
3057
+ overflow: hidden;
3058
+ white-space: nowrap;
3059
+ text-overflow: ellipsis;
3060
+ align-self: center;
3061
+ }
3062
+
3063
+ .lexsidebar .lexsidebarentry:hover {
3064
+ background-color: var(--global-color-secondary);
3065
+ }
3066
+
3067
+ .lexsidebar .lexsidebarentry:active {
3068
+ transform: scale(0.99);
3069
+ }
3070
+
3071
+ .lexsidebar .lexsidebarentry div {
3072
+ display: flex;
3073
+ gap: 0.8em;
3074
+ margin: 0;
3075
+ height: 22px;
3076
+ opacity: 0.95;
3077
+ }
3078
+
3079
+ .lexsidebar .lexsidebarentry div i {
3080
+ min-width: 22px;
3081
+ max-width: 22px;
3082
+ margin: auto 0;
3083
+ text-align: center;
3084
+ margin-left: -2px;
3085
+ }
3086
+
3087
+ .lexsidebar .lexsidebarentry div a:not(.lexicon) {
3088
+ overflow: hidden;
3089
+ white-space: nowrap;
3090
+ text-overflow: ellipsis;
3091
+ align-content: center;
3092
+ }
3093
+
3094
+ .lexsidebar .lexsidebarentry a.lexicon {
3095
+ margin-left: auto;
3096
+ }
3097
+
3098
+ .lexsidebar .lexsidebarentry > * {
3099
+ color: var(--global-text-primary);
3100
+ font-size: var(--global-font-size);
2420
3101
  }
2421
3102
 
2422
- /* submenu specified arrow */
2423
- .lexcontextmenubox .lexcontextmenuentry a.fa-xs {
2424
- float: right;
2425
- margin-top: -8px;
3103
+ .lexsidebar .lexsidebarsubentrycontainer {
3104
+ width: calc(100% - 48px);
3105
+ margin-block-start: 4px;
3106
+ margin-block-end: 8px;
3107
+ margin-left: 16px;
3108
+ padding-inline: 16px;
3109
+ display: flex;
3110
+ flex-direction: column;
3111
+ -webkit-user-select: none;
3112
+ -moz-user-select: none;
3113
+ -ms-user-select: none;
3114
+ user-select: none;
3115
+ opacity: 0.95;
3116
+ border-left: 1px solid #5251514d;
2426
3117
  }
2427
3118
 
2428
- .lexcontextmenubox .lexcontextmenuentry:hover:not(.cmtitle) {
2429
- background-color: var(--global-selected);
2430
- color: #f5f5f5;
3119
+ .lexsidebar.collapsing .lexsidebarsubentrycontainer {
3120
+ max-height: 0px;
3121
+ transform: translate(-8px, -8px);
3122
+ opacity: 0;
3123
+ margin: 0;
2431
3124
  }
2432
3125
 
2433
- .lexcontextmenubox .lexcontextmenuentry:active:not(.cmtitle, .cmseparator) {
2434
- padding-top: 0.22em;
2435
- color: #b7b7cba4;
3126
+ .lexsidebar .lexsidebarsubentrycontainer .lexsidebarentry {
3127
+ display: flex;
3128
+ gap: 0.8em;
2436
3129
  }
2437
3130
 
2438
- .lexcontextmenubox .lexseparator {
2439
- margin: 3px 0 3px 10px;
3131
+ .lexsidebar.collapsed .lexsidebarsubentrycontainer {
3132
+ display: none;
2440
3133
  }
2441
3134
 
2442
- .lexcontextmenubox .lexentryshort {
2443
- font-size: 9px;
2444
- float: right;
2445
- /* margin-top: -13px; */
2446
- font-weight: bold;
2447
- color: #979aa0e3;
3135
+ .lexsidebar.collapsed .lexsidebarcontent div a {
3136
+ display: none;
2448
3137
  }
2449
3138
 
2450
- /* Side Bar */
2451
-
2452
- .lexsidebar {
2453
- text-align: center;
3139
+ /* .lexsidebar .lexsidebarentry a:hover {
3140
+ border: 3px solid var(--global-selected);
3141
+ background-color: var(--global-button-color-hovered);
2454
3142
  }
2455
3143
 
2456
- .lexsidebar .lexsidebarentry {
2457
- width: 64px;
2458
- height: 64px;
2459
- margin-top: -6px;
3144
+ .lexsidebar .lexsidebarentry a:active {
3145
+ font-size: 17px;
2460
3146
  }
2461
3147
 
3148
+ .lexsidebar .lexsidebarentry.selected a {
3149
+ background-color: var(--global-button-color-hovered);
3150
+ border: 4px solid var(--global-selected);
3151
+ } */
3152
+
2462
3153
  .lexsidebar .lexsidebarentry .lexsidebarentrydesc {
2463
3154
  position: absolute;
2464
- margin-left: 12px;
3155
+ margin-top: -3px;
3156
+ margin-left: 32px;
2465
3157
  font-weight: 600;
2466
- margin-top: 13px;
2467
- background-color: #afafaf;
3158
+ background-color: var(--global-text-secondary);
2468
3159
  color: var(--global-color-primary);
2469
- font-size: 16px;
3160
+ font-size: var(--global-font-size);
2470
3161
  border-radius: 6px;
2471
3162
  text-align: center;
2472
3163
  opacity: 0;
3164
+ transform: translate(-12px, 0);
2473
3165
  z-index: 102;
2474
- padding: 2px 6px;
2475
- transition: opacity ease-in 0.1s;
2476
- }
2477
-
2478
- .lexsidebar .lexsidebarentry button:hover+.lexsidebarentrydesc {
2479
- opacity: 1;
3166
+ padding: 4px 8px;
3167
+ transition: opacity ease-in 0.15s, transform ease-in 0.15s;
3168
+ pointer-events: none;
2480
3169
  }
2481
3170
 
2482
- .lexsidebar .lexsidebarentry:first-child {
2483
- padding-top: 16px;
3171
+ .lexsidebar.collapsed .lexsidebarentry:hover .lexsidebarentrydesc {
3172
+ opacity: 1;
3173
+ transform: translate(0, 0);
2484
3174
  }
2485
3175
 
2486
- .lexsidebar .lexsidebarentry button {
3176
+ .lexsidebar .lexsidebarfooter, .lexsidebar .lexsidebarheader {
2487
3177
  width: calc(100% - 16px);
2488
- height: calc(100% - 16px);
2489
- background-color: var(--global-button-color);
2490
- color: var(--global-text-primary);
2491
- font-size: 18px;
2492
- border-radius: 10px;
2493
- border: 0px solid var(--global-color-transparent);
2494
- transition: border 0.1s ease-in-out;
3178
+ height: 36px;
3179
+ display: flex;
3180
+ border-radius: 8px;
3181
+ padding: 8px;
2495
3182
  cursor: pointer;
3183
+ -webkit-user-select: none;
3184
+ -moz-user-select: none;
3185
+ -ms-user-select: none;
3186
+ user-select: none;
3187
+ transition: background-color 0.3s ease-out;
2496
3188
  }
2497
3189
 
2498
- .lexsidebar .lexsidebarentry button:hover {
2499
- border: 3px solid var(--global-selected);
2500
- background-color: var(--global-button-color-hovered);
3190
+ .lexsidebar .lexsidebarfooter:hover, .lexsidebar .lexsidebarheader:hover {
3191
+ background-color: var(--global-color-secondary);
2501
3192
  }
2502
3193
 
2503
- .lexsidebar .lexsidebarentry button:active {
2504
- font-size: 17px;
3194
+ .lexsidebar.collapsing .lexsidebarheader {
3195
+ background-color: var(--global-selected);
2505
3196
  }
2506
3197
 
2507
- .lexsidebar .lexsidebarentry.selected button {
2508
- background-color: var(--global-button-color-hovered);
2509
- border: 4px solid var(--global-selected);
3198
+ .lexsidebar .lexsidebarfooter:active, .lexsidebar .lexsidebarheader:active {
3199
+ transform: scale(0.99);
2510
3200
  }
2511
3201
 
2512
- .lexsidebar .lexsidebarfooter {
2513
- position: absolute;
2514
- bottom: 0;
3202
+ .lexsidebar .lexavatar {
3203
+ background-color: #000;
2515
3204
  }
2516
3205
 
2517
- .lexsidebar .lexsidebarfooter .lexsidebarentry button {
2518
- width: calc(100% - 16px);
2519
- height: calc(100% - 16px);
2520
- background-color: unset;
2521
- font-size: 14px;
3206
+ .lexsidebar .lexsidebarfooter div, .lexsidebar .lexsidebarheader div {
3207
+ width: calc(100% - 88px);
3208
+ height: 100%;
3209
+ padding-inline: 12px;
3210
+ justify-content: center;
3211
+ display: flex;
3212
+ flex-direction: column;
3213
+ transition: width 0.3s cubic-bezier(0,0,.2,1), padding-inline 0.3s cubic-bezier(0,0,.2,1);
3214
+ }
3215
+
3216
+ .lexsidebar .lexsidebarfooter div span, .lexsidebar .lexsidebarheader div span {
3217
+ font-size: var(--global-font-size-sm);
3218
+ overflow: hidden;
3219
+ text-overflow: ellipsis;
3220
+ white-space: nowrap;
3221
+ transition: width 0.3s cubic-bezier(0,0,.2,1);
3222
+ }
3223
+
3224
+ .lexsidebar .lexsidebarfooter div span:first-child, .lexsidebar .lexsidebarheader div span:first-child {
3225
+ font-size: var(--global-font-size);
3226
+ font-weight: 600;
3227
+ }
3228
+
3229
+ .lexsidebar .lexsidebarfooter a, .lexsidebar .lexsidebarheader a {
3230
+ width: 32px;
3231
+ margin-left: 0px;
3232
+ align-content: center;
3233
+ }
3234
+
3235
+ .lexsidebar .lexsidebarfooter svg, .lexsidebar .lexsidebarheader svg {
3236
+ place-self: center;
2522
3237
  }
2523
3238
 
2524
- .lexsidebar .lexsidebarfooter .lexsidebarentry button:active {
2525
- font-size: 13px;
3239
+ .lexsidebar.collapsing .lexsidebarfooter span, .lexsidebar.collapsing .lexsidebarfooter div,
3240
+ .lexsidebar.collapsing .lexsidebarheader span, .lexsidebar.collapsing .lexsidebarheader div {
3241
+ width: 0px;
3242
+ padding-inline: 0px;
2526
3243
  }
2527
3244
 
3245
+ /* .lexsidebar.collapsed .lexsidebarfooter span, .lexsidebar.collapsed .lexsidebarfooter div,
3246
+ .lexsidebar.collapsed .lexsidebarheader span, .lexsidebar.collapsed .lexsidebarheader div {
3247
+ display: none;
3248
+ } */
3249
+
2528
3250
  /* Overlay Buttons */
2529
3251
 
2530
3252
  .lexoverlaybuttonscontainer {
@@ -2605,7 +3327,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
2605
3327
 
2606
3328
  .lexoverlaybuttons .lexbutton {
2607
3329
  padding: 6px 6px;
2608
- font-size: var(--global-font-size-big);
3330
+ font-size: var(--global-font-size-lg);
2609
3331
  border-radius: 10px;
2610
3332
  justify-content: center;
2611
3333
  background: none;
@@ -2614,16 +3336,16 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
2614
3336
  }
2615
3337
 
2616
3338
  .lexoverlaybuttons .lexbutton span {
2617
- font-size: var(--global-font-size-big);
3339
+ font-size: var(--global-font-size-lg);
2618
3340
  }
2619
3341
 
2620
3342
  .lexoverlaybuttons .lexbutton a {
2621
3343
  line-height: 10px;
2622
- font-size: var(--global-font-size-big);
3344
+ font-size: var(--global-font-size-lg);
2623
3345
  }
2624
3346
 
2625
3347
  .lexoverlaybuttons .lexbutton.array a {
2626
- font-size: 10px;
3348
+ font-size: var(--global-font-size-sm);
2627
3349
  margin-left: 4px;
2628
3350
  }
2629
3351
 
@@ -2705,10 +3427,8 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
2705
3427
  .lexareatabs {
2706
3428
  display: flex;
2707
3429
  flex-direction: row;
2708
- margin-left: 7px;
2709
3430
  width: fit-content;
2710
3431
  width: -moz-fit-content;
2711
- border-radius: 10px;
2712
3432
  }
2713
3433
 
2714
3434
  .lexareatabs.dockingtab {
@@ -2716,7 +3436,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
2716
3436
  }
2717
3437
 
2718
3438
  .lexareatabs .lexareatab {
2719
- font-size: 13px;
3439
+ font-size: var(--global-font-size);
2720
3440
  font-weight: 600;
2721
3441
  justify-content: center;
2722
3442
  text-align: center;
@@ -2739,24 +3459,24 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
2739
3459
  }
2740
3460
 
2741
3461
  .lexareatabs.row {
2742
- width: 100%;
2743
- }
2744
-
2745
- .lexareatabs.row {
2746
- padding: 4px;
2747
- padding-bottom: 6px;
3462
+ background-color: light-dark(var(--global-color-terciary), var(--global-button-color));
3463
+ border-radius: 8px;
3464
+ padding: 3px;
3465
+ margin: 6px;
3466
+ gap: 0.1em;
2748
3467
  }
2749
3468
 
2750
3469
  .lexareatabs.row .lexareatab {
2751
- background-color: var(--global-color-secondary);
2752
- padding-left: 16px;
2753
- padding-right: 16px;
2754
- margin-right: 4px;
2755
- border-radius: 4px;
3470
+ padding: 0.45em 1.45em;
3471
+ transition: 0.1s;
3472
+ background: none;
3473
+ border-radius: 6px;
3474
+ color: var(--global-text-secondary);
2756
3475
  }
2757
3476
 
2758
3477
  .lexareatabs.fit {
2759
- width: calc(100% - 14px);
3478
+ width: calc(100% - 12px);
3479
+ padding-inline: 6px;
2760
3480
  }
2761
3481
 
2762
3482
  .lexareatabs.fit .lexareatab {
@@ -2774,8 +3494,9 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
2774
3494
  }
2775
3495
 
2776
3496
  .lexareatabs.row .lexareatab.selected {
2777
- color: #fff;
2778
- background: light-dark(var(--global-selected-light), var(--global-selected));
3497
+ background-color: var(--global-color-primary);
3498
+ outline: none;
3499
+ color: var(--global-text-primary);
2779
3500
  }
2780
3501
 
2781
3502
  .lexareatabs.folding .lexareatab.selected {
@@ -2788,7 +3509,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
2788
3509
  }
2789
3510
 
2790
3511
  .lexareatabs.row .lexareatab.selected:hover {
2791
- color: var(--global-color-primary);
3512
+ color: var(--global-text-secondary);
2792
3513
  }
2793
3514
 
2794
3515
  .lexareatabscontainer {
@@ -2818,6 +3539,31 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
2818
3539
  border-radius: 2px;
2819
3540
  }
2820
3541
 
3542
+ /* Avatar Widget */
3543
+
3544
+ .lexavatar {
3545
+ width: 32px;
3546
+ height: 32px;
3547
+ border-radius: 8px;
3548
+ margin: auto 0;
3549
+ }
3550
+
3551
+ .lexavatar img {
3552
+ width: 100%;
3553
+ height: 100%;
3554
+ }
3555
+
3556
+ .lexavatar a svg {
3557
+ width: 60%;
3558
+ height: 100%;
3559
+ }
3560
+
3561
+ .lexavatar * {
3562
+ border-radius: 8px;
3563
+ width: 60%;
3564
+ height: 100%;
3565
+ }
3566
+
2821
3567
  /* Card Widget */
2822
3568
 
2823
3569
  .lexcard {
@@ -2842,6 +3588,10 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
2842
3588
  }
2843
3589
 
2844
3590
  .lexcard span {
3591
+ font-size: var(--global-font-size-lg);
3592
+ font-family: var(--global-title-font);
3593
+ font-weight: 600;
3594
+ text-transform: uppercase;
2845
3595
  width: calc(100% - 16px);
2846
3596
  display: flex;
2847
3597
  background-color: var(--global-blur-background);
@@ -2855,10 +3605,6 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
2855
3605
  padding: 8px;
2856
3606
  border-top-left-radius: 6px;
2857
3607
  border-top-right-radius: 6px;
2858
- font-size: 1.3em;
2859
- font-family: var(--global-title-font);
2860
- font-weight: 600;
2861
- text-transform: uppercase;
2862
3608
  }
2863
3609
 
2864
3610
  .lexcard span a {
@@ -2890,7 +3636,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
2890
3636
  height: 18px;
2891
3637
  cursor: pointer;
2892
3638
  border-radius: 4px;
2893
- font-size: 11px;
3639
+ font-size: var(--global-font-size-sm);
2894
3640
  }
2895
3641
 
2896
3642
  .lexlayer.selected {
@@ -3015,6 +3761,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
3015
3761
  cursor: default;
3016
3762
  -webkit-user-select: none;
3017
3763
  -moz-user-select: none;
3764
+ -ms-user-select: none;
3018
3765
  user-select: none;
3019
3766
  }
3020
3767
 
@@ -3040,17 +3787,113 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
3040
3787
 
3041
3788
  .lexcounterbox .lexcountervalue {
3042
3789
  width: 100%;
3043
- font-size: 32px;
3790
+ font-size: var(--global-font-size-xxl);
3044
3791
  font-weight: 700;
3045
-
3046
3792
  }
3047
3793
 
3048
3794
  .lexcounterbox .lexcounterlabel {
3049
3795
  width: 100%;
3050
- margin-top: -22px;
3796
+ margin-top: -18px;
3051
3797
  color: var(--global-text-secondary);
3052
3798
  }
3053
3799
 
3800
+ /* Table Widget */
3801
+
3802
+ .lextable table {
3803
+ width: 100%;
3804
+ border: 2px solid;
3805
+ border-color: light-dark(#dbd8d8c0, #5c5b5b7a);
3806
+ border-collapse: separate;
3807
+ /* border-left: 0; */
3808
+ border-radius: 8px;
3809
+ border-spacing: 0px;
3810
+ overflow: hidden;
3811
+ background-color: var(--global-button-color);
3812
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
3813
+ }
3814
+
3815
+ thead {
3816
+ display: table-header-group;
3817
+ border-color: inherit;
3818
+ border-collapse: separate;
3819
+ }
3820
+
3821
+ tr {
3822
+ display: table-row;
3823
+ vertical-align: inherit;
3824
+ border-color: inherit;
3825
+ }
3826
+
3827
+ th {
3828
+ --th-color: light-dark(var(--global-text-quaternary), var(--global-text-primary));
3829
+ color: var(--th-color);
3830
+ font-size: calc(var(--global-font-size) + 1px) !important;
3831
+ cursor: pointer;
3832
+ transition: all 0.1s linear;
3833
+ background-color: color-mix(in srgb, var(--global-button-color), #000 10%);
3834
+ -webkit-user-select: none;
3835
+ -moz-user-select: none;
3836
+ -ms-user-select: none;
3837
+ user-select: none;
3838
+ }
3839
+
3840
+ tr:hover {
3841
+ background-color: color-mix(in srgb, var(--global-button-color), #000 7%);
3842
+ }
3843
+
3844
+ th a {
3845
+ margin-left: 4px;
3846
+ font-size: var(--global-font-size-xs) !important;
3847
+ }
3848
+
3849
+ th a:active {
3850
+ transform: scale(1.01);
3851
+ }
3852
+
3853
+ th:hover {
3854
+ color: color-mix(in srgb, var(--th-color), #000 10%);
3855
+ }
3856
+
3857
+ th, td {
3858
+ padding: 6px;
3859
+ padding-inline: 12px;
3860
+ text-align: left;
3861
+ vertical-align: top;
3862
+ /* border-left: 2px solid red; */
3863
+ }
3864
+
3865
+ th.sm, td.sm {
3866
+ width: 8%;
3867
+ }
3868
+
3869
+ th .lexcheckbox, td .lexcheckbox {
3870
+ margin-top: 3px;
3871
+ }
3872
+
3873
+ td {
3874
+ border-top: 2px solid;
3875
+ border-color: light-dark(#dbd8d8c0, #5c5b5b7a);
3876
+ }
3877
+
3878
+ thead:first-child tr:first-child th:first-child, tbody:first-child tr:first-child td:first-child {
3879
+ border-radius: 8px 0 0 0;
3880
+ }
3881
+
3882
+ thead:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td:first-child {
3883
+ border-radius: 0 0 0 8px;
3884
+ }
3885
+
3886
+ .lextable .lextablebuttons {
3887
+ display: inline-flex;
3888
+ gap: 8px;
3889
+ }
3890
+
3891
+ :root[data-theme="light"] {
3892
+ .lextable table {
3893
+ box-shadow: none;
3894
+ }
3895
+ }
3896
+
3054
3897
  /* Custom Widgets Widget */
3055
3898
 
3056
3899
  .lexcustomitems {
@@ -3230,6 +4073,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
3230
4073
  vertical-align: middle;
3231
4074
  -webkit-user-select: none;
3232
4075
  -moz-user-select: none;
4076
+ -ms-user-select: none;
3233
4077
  user-select: none;
3234
4078
  place-content: center;
3235
4079
  display: inline-grid;
@@ -3466,6 +4310,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
3466
4310
  /* Asset Browser */
3467
4311
 
3468
4312
  .lexassetbrowser {
4313
+ min-height: 190px;
3469
4314
  height: 100%;
3470
4315
  border-radius: 6px;
3471
4316
  background-color: var(--global-color-primary);
@@ -3521,6 +4366,9 @@ ul.lexassetscontent {
3521
4366
  font-size: var(--global-font-size);
3522
4367
  color: #AAA;
3523
4368
  -webkit-user-drag: element;
4369
+ -webkit-user-select: none;
4370
+ -moz-user-select: none;
4371
+ -ms-user-select: none;
3524
4372
  user-select: none;
3525
4373
  box-sizing: border-box;
3526
4374
  width: 10em;
@@ -3548,7 +4396,7 @@ ul.lexassetscontent {
3548
4396
  font-weight: 600;
3549
4397
  background-color: #afafaf;
3550
4398
  color: var(--global-color-primary);
3551
- font-size: 14px;
4399
+ font-size: var(--global-font-size);
3552
4400
  border-radius: 6px;
3553
4401
  display: none;
3554
4402
  opacity: 0;
@@ -3558,28 +4406,10 @@ ul.lexassetscontent {
3558
4406
  pointer-events: none;
3559
4407
  }
3560
4408
 
3561
- .lexassetscontent li:hover+.lexitemdesc {
4409
+ .lexassetscontent li:hover + .lexitemdesc {
3562
4410
  opacity: 1;
3563
4411
  }
3564
4412
 
3565
- .lexassetscontent .lexitemdesc {
3566
- position: absolute;
3567
- font-weight: 600;
3568
- background-color: #afafaf;
3569
- color: var(--global-color-primary);
3570
- font-size: 14px;
3571
- border-radius: 6px;
3572
- display: none;
3573
- opacity: 0;
3574
- z-index: 102;
3575
- padding: 2px 6px;
3576
- transition: opacity ease-in 0.1s;
3577
- pointer-events: none;
3578
- }
3579
-
3580
- .lexassetscontent li:hover + .lexitemdesc {
3581
- opacity: 1;
3582
- }
3583
4413
  .lexassetscontent.list li {
3584
4414
  width: calc(100% - 0.5em);
3585
4415
  height: 1.8em;
@@ -3603,7 +4433,7 @@ ul.lexassetscontent {
3603
4433
  }
3604
4434
 
3605
4435
  .lexassetscontent .asset-file-preview text {
3606
- font-size: 64px;
4436
+ font-size: 4rem;
3607
4437
  text-anchor: middle;
3608
4438
  font-family: 'Ubuntu', sans-serif;
3609
4439
  }
@@ -3758,8 +4588,8 @@ ul.lexassetscontent {
3758
4588
  }
3759
4589
 
3760
4590
  /* Code Editor */
3761
-
3762
4591
  .codebasearea {
4592
+
3763
4593
  display: flex;
3764
4594
  position: relative;
3765
4595
  overflow: inherit;
@@ -3801,18 +4631,16 @@ ul.lexassetscontent {
3801
4631
 
3802
4632
  .codebasearea .lexareatab i {
3803
4633
  width: 12px;
3804
- font-size: 10px;
3805
- margin-right: 4px;
3806
- vertical-align: middle;
3807
- margin-top: -3px;
4634
+ font-size: var(--global-font-size-sm);
4635
+ margin-right: 6px;
4636
+ align-content: center;
3808
4637
  }
3809
4638
 
3810
4639
  .codebasearea .lexareatab img {
3811
4640
  width: 12px;
3812
4641
  height: 12px;
3813
- margin-right: 4px;
3814
- vertical-align: middle;
3815
- margin-top: -2px;
4642
+ margin-right: 6px;
4643
+ align-content: center;
3816
4644
  }
3817
4645
 
3818
4646
  .lexcodeeditor ::-webkit-scrollbar {
@@ -3853,7 +4681,7 @@ ul.lexassetscontent {
3853
4681
 
3854
4682
  .lexcodegutter {
3855
4683
  width: 48px;
3856
- height: calc(100% - 62px);
4684
+ height: calc(100% - 65px);
3857
4685
  background-color: light-dark(var(--global-color-terciary), var(--global-medium-background));
3858
4686
  margin-top: 28px;
3859
4687
  overflow: hidden;
@@ -3862,7 +4690,7 @@ ul.lexassetscontent {
3862
4690
  }
3863
4691
 
3864
4692
  .lexcodeeditor .codetabsarea {
3865
- height: calc(100% - 72px) !important;
4693
+ height: calc(100% - 64px) !important;
3866
4694
  background-color: light-dark(var(--global-color-terciary), var(--global-medium-background));
3867
4695
  overflow: scroll;
3868
4696
  }
@@ -3879,6 +4707,10 @@ ul.lexassetscontent {
3879
4707
  width: calc(100% - 10px) !important;
3880
4708
  }
3881
4709
 
4710
+ .lexcodeeditor .codetabsarea.with-hscrollbar {
4711
+ height: calc(100% - 72px) !important;
4712
+ }
4713
+
3882
4714
  .lexcodeeditor .codetabsarea.dragging {
3883
4715
  background-color: var(--global-color-secondary);
3884
4716
  }
@@ -3890,7 +4722,7 @@ ul.lexassetscontent {
3890
4722
  -moz-osx-font-smoothing: grayscale;
3891
4723
  font-feature-settings: "ss04", "ss05";
3892
4724
  font-size: var(--code-editor-font-size);
3893
- padding-right: 6px;
4725
+ /* padding-right: 6px; */
3894
4726
  position: relative;
3895
4727
  }
3896
4728
 
@@ -3930,16 +4762,16 @@ ul.lexassetscontent {
3930
4762
  background-color: #333437a9;
3931
4763
  }
3932
4764
 
3933
- .lexcodeeditor pre.added {
3934
- background-color: #40db212f;
4765
+ .lexcodeeditor.disabled pre.active-line {
4766
+ background-color: transparent;
3935
4767
  }
3936
4768
 
3937
- .lexcodeeditor pre.removed {
3938
- background-color: #db21212f;
4769
+ .lexcodeeditor pre.added {
4770
+ background-color: #40db212f !important;
3939
4771
  }
3940
4772
 
3941
- .lexcodeeditor.disabled pre.active-line {
3942
- background: none;
4773
+ .lexcodeeditor pre.removed {
4774
+ background-color: #db21212f !important;
3943
4775
  }
3944
4776
 
3945
4777
  .lexcodeeditor.disabled .lexareatab {
@@ -3959,7 +4791,7 @@ ul.lexassetscontent {
3959
4791
  display: inline-block;
3960
4792
  }
3961
4793
 
3962
- pre .line-gutter {
4794
+ .lexcodeeditor pre .line-gutter {
3963
4795
  color: var(--global-text-terciary);
3964
4796
  width: 48px;
3965
4797
  height: var(--code-editor-row-height);
@@ -3976,6 +4808,10 @@ pre .line-gutter {
3976
4808
  z-index: 1;
3977
4809
  }
3978
4810
 
4811
+ .lexcodeeditor.no-gutter pre .line-gutter {
4812
+ opacity: 0;
4813
+ }
4814
+
3979
4815
  .lexcodeeditor .cursors,
3980
4816
  .lexcodeeditor .selections {
3981
4817
  -webkit-text-size-adjust: 100%;
@@ -4283,7 +5119,7 @@ pre .line-gutter {
4283
5119
  /* thumb */
4284
5120
  background-color: #8383839d !important;
4285
5121
  }
4286
-
5122
+
4287
5123
  .lexcodescrollbar div:hover {
4288
5124
  /* thumb */
4289
5125
  background-color: #5e5e5ea9 !important;
@@ -4491,7 +5327,7 @@ pre .line-gutter {
4491
5327
  .lexgraphnode .lexgraphnodeproperties {
4492
5328
  font-family: var(--global-title-font);
4493
5329
  font-weight: 600;
4494
- font-size: 13px;
5330
+ font-size: var(--global-font-size);
4495
5331
  color: #fff;
4496
5332
  text-shadow: 0px 0px 2px #1b1b1bdc;
4497
5333
  border-bottom: 1px solid #ffffff46;
@@ -4529,7 +5365,7 @@ pre .line-gutter {
4529
5365
  .lexgraphnode .lexgraphnodeio {
4530
5366
  font-family: var(--global-title-font);
4531
5367
  font-weight: 600;
4532
- font-size: 10px;
5368
+ font-size: var(--global-font-size-sm);
4533
5369
  color: #d9d9e3;
4534
5370
  text-shadow: 0px 1px 6px #22222283;
4535
5371
  display: flex;
@@ -4541,7 +5377,7 @@ pre .line-gutter {
4541
5377
  }
4542
5378
 
4543
5379
  .lexgraphnode .lexgraphnodeio .io__type {
4544
- font-size: 7px;
5380
+ font-size: calc(var(--global-font-size-xs) - 1px);
4545
5381
  font-weight: 700;
4546
5382
  line-height: 10px;
4547
5383
  min-width: 11px;
@@ -4571,7 +5407,7 @@ pre .line-gutter {
4571
5407
  margin-top: 3px;
4572
5408
  background-color: #afafaf;
4573
5409
  color: var(--global-color-primary);
4574
- font-size: 8px;
5410
+ font-size: var(--global-font-size-xs);
4575
5411
  border-radius: 4px;
4576
5412
  width: 28px;
4577
5413
  text-align: center;
@@ -4676,11 +5512,11 @@ pre .line-gutter {
4676
5512
  }
4677
5513
 
4678
5514
  .lexgraphgroup .lexgraphgrouptitle {
4679
- font-size: 14px;
4680
- margin: 8px;
4681
- color: var(--global-text-primary);
5515
+ font-size: var(--global-font-size-xl);
4682
5516
  font-family: var(--global-title-font);
4683
5517
  font-weight: 600;
5518
+ margin: 8px;
5519
+ color: var(--global-text-primary);
4684
5520
  outline: none;
4685
5521
  border: none;
4686
5522
  background: none;
@@ -4713,7 +5549,7 @@ pre .line-gutter {
4713
5549
  }
4714
5550
 
4715
5551
  .grapharea .graph-title button {
4716
- font-size: 16px;
5552
+ font-size: var(--global-font-size-xl);
4717
5553
  font-family: var(--global-title-font);
4718
5554
  font-weight: 600;
4719
5555
  color: var(--global-text-primary);
@@ -4794,7 +5630,7 @@ pre .line-gutter {
4794
5630
  /* .lexvideoeditor .lexvideotimebar canvas {
4795
5631
  width: calc(100%);
4796
5632
  height: calc(100% );
4797
- padding: 5px;
5633
+ padding: 5px;
4798
5634
  } */
4799
5635
 
4800
5636
  .resizeable {