lexgui 0.4.2 → 0.5.1

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 (15) hide show
  1. package/build/components/audio.js +156 -146
  2. package/build/components/codeeditor.js +8 -6
  3. package/build/components/nodegraph.js +4 -3
  4. package/build/components/timeline.js +41 -18
  5. package/build/lexgui.css +478 -238
  6. package/build/lexgui.js +4423 -3337
  7. package/build/lexgui.min.css +1 -1
  8. package/build/lexgui.min.js +1 -1
  9. package/build/lexgui.module.js +4423 -3337
  10. package/build/lexgui.module.min.js +1 -1
  11. package/changelog.md +35 -2
  12. package/examples/area_tabs.html +17 -2
  13. package/examples/dialogs.html +3 -3
  14. package/examples/timeline.html +1 -1
  15. package/package.json +1 -1
package/build/lexgui.css CHANGED
@@ -19,27 +19,35 @@
19
19
  --global-font-size-xl: 1.125rem; /* 18px */
20
20
  --global-font-size-xxl: 1.375rem; /* 22px */
21
21
 
22
- --global-color-primary: light-dark(#f3f3f3, #141414);
23
- --global-color-secondary: light-dark(#e4e4e4, #252525);
24
- --global-color-terciary: light-dark(#dcdcde, #3a3a3a);
25
- --global-color-quaternary: light-dark(#c6c6c6, #494949);
26
- --global-color-quinary: light-dark(#b5b5b5, #5c5c5c);
22
+ --global-color-primary: light-dark(#f5f5f6, #0f0f0f); /* Near White / Near Black */
23
+ --global-color-secondary: light-dark(#e8e8ea, #1c1c1c); /* Very Light Gray / Very Dark Gray */
24
+ --global-color-tertiary: light-dark(#d6d6d8, #292929); /* Soft Gray / Deep Gray */
25
+ --global-color-quaternary: light-dark(#bfbfc2, #404040); /* Muted Gray / Medium Dark */
26
+ --global-color-quinary: light-dark(#a5a5a8, #595959); /* Gentle Gray / Soft Dark Gray */
27
+
27
28
  --global-selected: #2d69da;
28
29
  --global-selected-light: #0d99ff;
29
30
  --global-selected-dark: #304b86;
30
31
  --global-color-accent: #ec5377;
31
32
  --global-color-warning: #ffc107;
32
33
  --global-color-error: #f54c4c;
33
- --global-button-color: light-dark(#f9f9f9, #3e3e3e);
34
- --global-button-color-hovered: light-dark(#ececec, #444);
35
- --global-text-primary: light-dark(#202124, #efeff1);
36
- --global-text-secondary: light-dark(#353636, #c8c8ca);
37
- --global-text-terciary: light-dark(#5a5a5af5, #929292);
38
- --global-text-quaternary: light-dark(#6b6a6af5, #777777);
39
- --global-intense-background: light-dark(#fefefe, #121212);
34
+ --global-button-color: light-dark(#f9f9f9, #363636);
35
+ --global-text-primary: light-dark(#0d0d0e, #f0efef);
36
+ --global-text-secondary: light-dark(#262627, #d1d1d3);
37
+ --global-text-tertiary: light-dark(#3c3c3df5, #aaaaaa);
38
+ --global-text-quaternary: light-dark(#515152f5, #807f7f);
39
+ --global-intense-background: light-dark(#fefefe, #09090a);
40
40
  --global-medium-background: #252525;
41
41
  --global-blur-background: light-dark(#f7f7f7d8, #1f1f1fe7);
42
- --global-color-transparent: #7b8ae200;
42
+ --global-color-transparent: #00000000;
43
+
44
+ --svg-size-xs: 0.7rem;
45
+ --svg-size-sm: 0.85rem;
46
+ --svg-size-md: 1rem;
47
+ --svg-size-lg: 1.25rem;
48
+ --svg-size-xl: 1.4rem;
49
+ --svg-size-xxl: 1.6rem;
50
+
43
51
  --code-editor-font-size: 14px;
44
52
  --code-editor-row-height: 20px;
45
53
  --graphnode-background: 17, 17, 17;
@@ -202,13 +210,14 @@ canvas {
202
210
  }
203
211
 
204
212
  .collapsible {
213
+ width: 100%;
205
214
  display: flex;
206
215
  }
207
216
 
208
217
  .collapsible a.collapser {
209
218
  --rotation: 90deg;
210
219
  transform: rotate(var(--rotation, 0deg));
211
- transition: transform 0.2s ease-out;
220
+ transition: transform 0.15s ease-out;
212
221
  }
213
222
 
214
223
  .collapsible a.collapser[data-collapsed] {
@@ -289,6 +298,12 @@ body.noevents * {
289
298
  pointer-events: none;
290
299
  }
291
300
 
301
+ svg.xs { width: var(--svg-size-xs); height: var(--svg-size-xs); }
302
+ svg.sm { width: var(--svg-size-sm); height: var(--svg-size-sm); }
303
+ svg.lg { width: var(--svg-size-lg); height: var(--svg-size-lg); }
304
+ svg.xl { width: var(--svg-size-xl); height: var(--svg-size-xl); }
305
+ svg.xxl { width: var(--svg-size-xxl); height: var(--svg-size-xxl); }
306
+
292
307
  #modal {
293
308
  left: 0;
294
309
  right: 0;
@@ -311,6 +326,7 @@ body.noevents * {
311
326
  width: 100%;
312
327
  height: 100%;
313
328
  position: absolute;
329
+ outline: none;
314
330
  }
315
331
 
316
332
  :root[data-strictVP="false"] {
@@ -342,6 +358,18 @@ body.noevents * {
342
358
  transform: scale(0.99);
343
359
  }
344
360
 
361
+ svg, svg path {
362
+ width: 1rem;
363
+ height: 1rem;
364
+ --color: var(--global-text-secondary);
365
+ stroke: var(--color);
366
+ display: block;
367
+ }
368
+
369
+ a svg, svg path {
370
+ pointer-events: none;
371
+ }
372
+
345
373
  .lexicon:hover svg, .lexicon:hover svg path {
346
374
  --color: var(--global-text-primary) !important;
347
375
  }
@@ -375,7 +403,7 @@ body.noevents * {
375
403
  position: relative;
376
404
  width: calc(100% - 1.6rem);
377
405
  background-color: var(--global-intense-background);
378
- border: 1px solid var(--global-color-terciary);
406
+ border: 1px solid var(--global-color-tertiary);
379
407
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
380
408
  overflow: hidden;
381
409
  -webkit-user-select: none;
@@ -497,7 +525,7 @@ body.noevents * {
497
525
  .commandbar a {
498
526
  color: var(--global-text-secondary);
499
527
  padding: 10px;
500
- background-color: var(--global-color-terciary);
528
+ background-color: var(--global-color-tertiary);
501
529
  border-top-left-radius: 6px;
502
530
  border-bottom-left-radius: 6px;
503
531
  font-size: var(--global-font-size-sm);
@@ -510,7 +538,7 @@ body.noevents * {
510
538
  border-top-right-radius: 6px;
511
539
  border-bottom-right-radius: 6px;
512
540
  color: var(--global-text-secondary);
513
- background-color: var(--global-color-terciary);
541
+ background-color: var(--global-color-tertiary);
514
542
  outline: none;
515
543
  border: none;
516
544
  font-family: var(--global-font);
@@ -655,7 +683,6 @@ body.noevents * {
655
683
  max-width: 28px;
656
684
  max-height: 28px;
657
685
  transition: all .2s ease-in-out;
658
- fill: var(--global-text-secondary);
659
686
  }
660
687
 
661
688
  .lexfooter .social a {
@@ -677,6 +704,7 @@ body.noevents * {
677
704
 
678
705
  .lexfooter svg:hover {
679
706
  fill: var(--global-selected-light);
707
+ stroke: var(--global-selected-light);
680
708
  }
681
709
 
682
710
  .lexfooter hr {
@@ -702,6 +730,10 @@ body.noevents * {
702
730
  background-color: var(--global-color-secondary);
703
731
  }
704
732
 
733
+ .lexdialog:has(.lexselect) {
734
+ overflow: visible;
735
+ }
736
+
705
737
  .lexdialogtitle {
706
738
  outline: none;
707
739
  font-family: var(--global-title-font);
@@ -757,7 +789,7 @@ body.noevents * {
757
789
  }
758
790
 
759
791
  .lexdialogcloser:hover {
760
- color: var(--global-text-terciary);
792
+ color: var(--global-text-tertiary);
761
793
  }
762
794
 
763
795
  .lexdialogcloser:active {
@@ -866,6 +898,139 @@ body.noevents * {
866
898
  flex-direction: column;
867
899
  }
868
900
 
901
+ /* Dropdown Menu */
902
+
903
+ .lexdropdownmenu {
904
+ background-color: var(--global-color-primary);
905
+ font-size: var(--global-font-size);
906
+ position: fixed;
907
+ left: 0px;
908
+ top: 0px;
909
+ min-width: 172px;
910
+ max-width: 244px;
911
+ z-index: 150;
912
+ display: flex;
913
+ flex-direction: column;
914
+ padding: 0.2rem;
915
+ border-radius: 6px;
916
+ border: 1px solid #7a797c4f;
917
+ animation-duration: 400ms;
918
+ animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
919
+ will-change: transform, opacity;
920
+ }
921
+
922
+ .lexdropdownmenuitem {
923
+ display: flex;
924
+ flex-direction: row;
925
+ padding: 0.5rem;
926
+ border-radius: 6px;
927
+ gap: 0.5rem;
928
+ white-space: nowrap;
929
+ overflow: hidden;
930
+ text-overflow: ellipsis;
931
+ cursor: pointer;
932
+ transition: all 0.1s linear;
933
+ -webkit-user-select: none;
934
+ -moz-user-select: none;
935
+ -ms-user-select: none;
936
+ user-select: none;
937
+ }
938
+
939
+ .lexdropdownmenuitem.disabled {
940
+ color: var(--global-text-tertiary);
941
+ cursor: default;
942
+ }
943
+
944
+ .lexdropdownmenuitem.label {
945
+ font-weight: 600;
946
+ cursor: default;
947
+ }
948
+
949
+ .lexdropdownmenuitem:not(.label, .disabled):hover {
950
+ background-color: var(--global-color-tertiary);
951
+ }
952
+
953
+ .lexdropdownmenuitem:not(.label, .disabled):active {
954
+ transform: scale(0.99);
955
+ }
956
+
957
+ .lexdropdownmenuitem a {
958
+ margin-left: auto;
959
+ margin-right: 4px;
960
+ align-content: center;
961
+ pointer-events: none;
962
+ }
963
+
964
+ .lexdropdownmenuitem a:first-child {
965
+ margin: 0;
966
+ }
967
+
968
+ .lexdropdownmenu .separator {
969
+ width: calc(100% + 0.4rem);
970
+ translate: -0.2rem 0;
971
+ border-bottom: 1px solid;
972
+ border-color: var(--global-text-tertiary);
973
+ opacity: 0.25;
974
+ margin-block: 0.1rem;
975
+ }
976
+
977
+ .lexdropdownmenu[data-side="top"]{
978
+ animation-name: slideDownAndFade;
979
+ }
980
+ .lexdropdownmenu[data-side="right"]{
981
+ animation-name: slideLeftAndFade;
982
+ }
983
+ .lexdropdownmenu[data-side="bottom"]{
984
+ animation-name: slideUpAndFade;
985
+ }
986
+ .lexdropdownmenu[data-side="left"]{
987
+ animation-name: slideRightAndFade;
988
+ }
989
+
990
+ @keyframes slideUpAndFade {
991
+ from {
992
+ opacity: 0;
993
+ transform: translateY(8px);
994
+ }
995
+ to {
996
+ opacity: 1;
997
+ transform: translateY(0);
998
+ }
999
+ }
1000
+
1001
+ @keyframes slideRightAndFade {
1002
+ from {
1003
+ opacity: 0;
1004
+ transform: translateX(-8px);
1005
+ }
1006
+ to {
1007
+ opacity: 1;
1008
+ transform: translateX(0);
1009
+ }
1010
+ }
1011
+
1012
+ @keyframes slideDownAndFade {
1013
+ from {
1014
+ opacity: 0;
1015
+ transform: translateY(-8px);
1016
+ }
1017
+ to {
1018
+ opacity: 1;
1019
+ transform: translateY(0);
1020
+ }
1021
+ }
1022
+
1023
+ @keyframes slideLeftAndFade {
1024
+ from {
1025
+ opacity: 0;
1026
+ transform: translateX(8px);
1027
+ }
1028
+ to {
1029
+ opacity: 1;
1030
+ transform: translateX(0);
1031
+ }
1032
+ }
1033
+
869
1034
  /* Area */
870
1035
 
871
1036
  .lexarea {
@@ -938,7 +1103,8 @@ body.noevents * {
938
1103
  font-size: var(--global-font-size-lg);
939
1104
  color: var(--global-text-primary);
940
1105
  background-color: var(--global-color-secondary);
941
- text-shadow: 0px 1px 6px #5554547c;
1106
+ text-shadow: 0px 1px 6px #42424260;
1107
+ letter-spacing: calc(var(--global-font-size-lg) * 0.025);
942
1108
  padding: 10px;
943
1109
  display: flex;
944
1110
  border-top-left-radius: 8px;
@@ -962,7 +1128,7 @@ body.noevents * {
962
1128
  display: flex;
963
1129
  padding: 0px;
964
1130
  cursor: default;
965
- background-color: var(--global-color-terciary);
1131
+ background-color: var(--global-color-tertiary);
966
1132
  text-shadow: none;
967
1133
  color: #5f6770;
968
1134
  }
@@ -1007,15 +1173,16 @@ body.noevents * {
1007
1173
  }
1008
1174
 
1009
1175
  .lexbranch .switch-branch-button {
1010
- float: right;
1011
1176
  font-size: var(--global-font-size-sm);
1012
- transition: transform 0.1s ease-out;
1177
+ transition: transform 0.15s ease-out;
1013
1178
  margin-left: auto;
1179
+ margin-right: 8px;
1014
1180
  align-content: center;
1181
+ transform: rotate(90deg);
1015
1182
  }
1016
1183
 
1017
1184
  .lexbranch.closed .switch-branch-button {
1018
- transform: rotate(180deg);
1185
+ transform: rotate(0deg);
1019
1186
  }
1020
1187
 
1021
1188
  :root[data-theme="light"] .lexbranchtitle {
@@ -1061,7 +1228,7 @@ body.noevents * {
1061
1228
  }
1062
1229
 
1063
1230
  .lexwidget.nobranch {
1064
- width: calc(100% - 10px) !important;
1231
+ width: calc(100% - 10px);
1065
1232
  }
1066
1233
 
1067
1234
  .lexwidget.auto {
@@ -1095,6 +1262,8 @@ body.noevents * {
1095
1262
 
1096
1263
  .lexinlinewidgets {
1097
1264
  display: flex;
1265
+ gap: 0.1rem;
1266
+ justify-content: space-around;
1098
1267
  }
1099
1268
 
1100
1269
  .lexwidgetseparator div {
@@ -1104,7 +1273,7 @@ body.noevents * {
1104
1273
  height: 2px;
1105
1274
  width: 11px;
1106
1275
  cursor: ew-resize;
1107
- color: var(--global-text-terciary);
1276
+ color: var(--global-text-tertiary);
1108
1277
  }
1109
1278
 
1110
1279
  .lexwidgetseparator div:hover {
@@ -1124,6 +1293,11 @@ body.noevents * {
1124
1293
  color: var(--global-text-secondary);
1125
1294
  }
1126
1295
 
1296
+ .lexinlinewidgets .lexwidgetname {
1297
+ width: fit-content !important;
1298
+ padding-inline: 0.4rem;
1299
+ }
1300
+
1127
1301
  .lexwidget input:not(.lexcheckbox, .lextoggle, .lexrangeslider) {
1128
1302
  font-family: var(--global-font);
1129
1303
  background: none;
@@ -1133,13 +1307,13 @@ body.noevents * {
1133
1307
  outline: none;
1134
1308
  border-radius: 6px;
1135
1309
  border: 2px solid var(--global-color-transparent);
1136
- transition: border-color 0.1s linear;
1310
+ transition: background-color 0.2s linear, border-color 0.15s linear;
1137
1311
  }
1138
1312
 
1139
1313
  .lexwidget .lextext {
1140
1314
  border-radius: 6px;
1141
1315
  position: relative;
1142
- transition: 0.1s linear;
1316
+ transition: 0.2s linear;
1143
1317
  }
1144
1318
 
1145
1319
  .lexwidget .lextext.formlabel {
@@ -1151,8 +1325,8 @@ body.noevents * {
1151
1325
  background-color: var(--global-button-color);
1152
1326
  }
1153
1327
 
1154
- .lexwidget .lextext:not(:has(div)):hover {
1155
- background-color: var(--global-button-color-hovered);
1328
+ .lexwidget input:not(.lexcheckbox, .lextoggle, .lexrangeslider):hover {
1329
+ background-color: color-mix(in srgb, var(--global-button-color), #000 7%);
1156
1330
  }
1157
1331
 
1158
1332
  .lexwidget .lextext input {
@@ -1218,7 +1392,7 @@ body.noevents * {
1218
1392
  .lexwidget input:disabled:not(.lextoggle) {
1219
1393
  outline: none;
1220
1394
  border: none;
1221
- color: var(--global-text-terciary);
1395
+ color: var(--global-text-tertiary);
1222
1396
  }
1223
1397
 
1224
1398
  .lexseparator {
@@ -1236,7 +1410,7 @@ body.noevents * {
1236
1410
  }
1237
1411
 
1238
1412
  :root[data-theme="light"] .lexwidget .lextext {
1239
- border: 1px solid var(--global-color-terciary) !important;
1413
+ border: 1px solid var(--global-color-tertiary) !important;
1240
1414
  }
1241
1415
 
1242
1416
  :root[data-theme="light"] .lexbranch .lexseparator {
@@ -1254,6 +1428,7 @@ body.noevents * {
1254
1428
  padding: 2px;
1255
1429
  padding-left: 12px;
1256
1430
  padding-right: 12px;
1431
+ line-height: 1.5;
1257
1432
  display: grid;
1258
1433
  align-content: center;
1259
1434
  border-radius: 12px;
@@ -1299,7 +1474,6 @@ body.noevents * {
1299
1474
  background-color: var(--button-color);
1300
1475
  border-radius: 6px;
1301
1476
  border: 1px solid transparent;
1302
- /* margin-top: 2px; */
1303
1477
  min-height: 22px !important;
1304
1478
  color: var(--global-text-primary);
1305
1479
  font-weight: 500;
@@ -1314,7 +1488,7 @@ body.noevents * {
1314
1488
 
1315
1489
  :root[data-theme="light"] .lexbutton {
1316
1490
  --button-color: var(--global-button-color);
1317
- border: 1px solid var(--global-color-terciary);
1491
+ border: 1px solid var(--global-color-tertiary);
1318
1492
  }
1319
1493
 
1320
1494
  :root[data-theme="light"] .lexbutton.selected {
@@ -1326,6 +1500,7 @@ body.noevents * {
1326
1500
  .lexbutton.primary { --button-color: var(--global-selected) !important; color: #f9f9f9 !important; }
1327
1501
  .lexbutton.secondary { --button-color: var(--global-selected-light) !important; color: #f9f9f9 !important; }
1328
1502
  .lexbutton.accent { --button-color: var(--global-color-accent) !important; color: #f9f9f9 !important; }
1503
+ .lexbutton.contrast { --button-color: var(--global-text-primary) !important; color: var(--global-color-primary) !important; }
1329
1504
  .lexbutton.warning { --button-color: var(--global-color-warning) !important; color: #793205 !important; }
1330
1505
  .lexbutton.error { --button-color: var(--global-color-error) !important; color: #52020d !important; }
1331
1506
  /* Few Sizes */
@@ -1362,11 +1537,11 @@ body.noevents * {
1362
1537
  .lexbutton a {
1363
1538
  margin-left: 0px;
1364
1539
  font-size: var(--global-font-size-sm);
1540
+ pointer-events: none;
1365
1541
  }
1366
1542
 
1367
1543
  .lexbutton.array span {
1368
1544
  display: inline-flex;
1369
- margin-left: 8px;
1370
1545
  }
1371
1546
 
1372
1547
  .lexbutton.array a {
@@ -1387,7 +1562,7 @@ body.noevents * {
1387
1562
  }
1388
1563
 
1389
1564
  .lexbutton:disabled {
1390
- color: var(--global-text-terciary);
1565
+ color: var(--global-text-tertiary);
1391
1566
  }
1392
1567
 
1393
1568
  .lexbutton.selected {
@@ -1395,16 +1570,11 @@ body.noevents * {
1395
1570
  color: #DDD;
1396
1571
  }
1397
1572
 
1398
- .lexbutton.noname {
1399
- margin-left: 0px;
1400
- margin-top: 0px;
1401
- }
1402
-
1403
1573
  /* Combo Buttons */
1404
1574
 
1405
1575
  .lexcombobuttons .lexcombobuttonsbox {
1406
1576
  display: flex;
1407
- background-color: light-dark(var(--global-color-terciary), var(--global-button-color));
1577
+ background-color: light-dark(var(--global-color-tertiary), var(--global-button-color));
1408
1578
  width: max-content;
1409
1579
  justify-self: center;
1410
1580
  padding: 3px;
@@ -1450,71 +1620,77 @@ body.noevents * {
1450
1620
  font-size: var(--global-font-size-sm);
1451
1621
  }
1452
1622
 
1453
- /* Dropdown (Combo) */
1623
+ /* Select (Combobox) */
1454
1624
 
1455
- .lexdropdown {
1625
+ .lexselect {
1456
1626
  display: grid;
1457
1627
  align-content: center;
1458
1628
  position: relative;
1459
1629
  }
1460
1630
 
1461
- .lexdropdown .lexwidget {
1631
+ .lexselect .lexwidget {
1462
1632
  padding: 0;
1463
1633
  }
1464
1634
 
1465
- .lexdropdown .lexfilter {
1635
+ .lexselect .lexfilter {
1466
1636
  width: calc(100% - 6px) !important;
1467
1637
  padding: 2px 3px;
1468
1638
  background-color: var(--global-color-primary);
1469
1639
  border-bottom: 1px solid;
1470
- border-color: color-mix(in srgb, var(--global-text-terciary), #00000000 75%);
1640
+ border-color: color-mix(in srgb, var(--global-text-tertiary), #00000000 75%);
1471
1641
  }
1472
1642
 
1473
- .lexdropdown .lexfilter a {
1643
+ .lexselect .lexfilter input:hover {
1644
+ background-color: var(--global-color-primary);
1645
+ }
1646
+
1647
+ .lexselect .lexfilter a {
1474
1648
  font-size: var(--global-font-size-sm);
1475
1649
  padding-inline: 4px;
1476
1650
  }
1477
1651
 
1478
- .lexdropdown ul .lexlistitem {
1652
+ .lexselect ul .lexlistitem {
1479
1653
  font-size: var(--global-font-size-sm);
1480
1654
  }
1481
1655
 
1482
- .lexdropdown .option {
1656
+ .lexselect .option {
1483
1657
  display: flex;
1484
- flex-direction: column;
1485
1658
  align-items: center;
1486
1659
  width: 100%;
1487
1660
  position: relative;
1488
1661
  }
1489
1662
 
1490
- .lexdropdown .option:not(.media) {
1491
- padding-left: 12px;
1663
+ .lexselect .option.media {
1664
+ flex-direction: column;
1492
1665
  }
1493
1666
 
1494
- .lexdropdown .lexlistitem {
1667
+ .lexselect .lexlistitem {
1495
1668
  height: fit-content;
1496
1669
  }
1497
1670
 
1498
- .lexdropdown .lexdropdownoptions {
1671
+ .lexselect .lexselectoptions {
1499
1672
  background-color: var(--global-color-primary);
1500
1673
  -webkit-backdrop-filter: blur(10px);
1501
1674
  backdrop-filter: blur(10px);
1502
1675
  margin: 0;
1503
1676
  padding: 0;
1504
- border: none;
1505
1677
  outline: none;
1506
1678
  width: fit-content;
1507
1679
  max-height: -webkit-fill-available;
1508
1680
  position: fixed;
1509
1681
  z-index: 10000;
1510
1682
  box-shadow: 0 0px 6px rgba(0, 0, 0, 0.603);
1511
- border-bottom-left-radius: 6px;
1512
- border-bottom-right-radius: 6px;
1683
+ border-radius: 6px;
1684
+ border: 1px solid #7a797c4f;
1513
1685
  overflow-y: auto;
1514
1686
  overflow-x: hidden;
1515
1687
  }
1516
1688
 
1517
- .lexdropdown ul {
1689
+ dialog .lexselect .lexselectoptions {
1690
+ max-height: none;
1691
+ }
1692
+
1693
+ .lexselect ul {
1518
1694
  list-style: none;
1519
1695
  padding: 0px;
1520
1696
  z-index: 10;
@@ -1523,76 +1699,87 @@ body.noevents * {
1523
1699
  height: 100%;
1524
1700
  }
1525
1701
 
1526
- .lexdropdown .lexdropdownoptions.place-above {
1527
- /* max-height: unset; */
1528
- border-bottom-left-radius: 0px;
1529
- border-bottom-right-radius: 0px;
1530
- border-top-left-radius: 6px;
1531
- border-top-right-radius: 6px;
1702
+ .lexselect ul .lexselectinnerlist {
1703
+ width: calc(100% - 0.6rem);
1704
+ height: calc(100% - 25px);
1705
+ padding: 0.3rem;
1706
+ display: grid;
1532
1707
  }
1533
1708
 
1534
- .lexdropdown .lexdropdownitem {
1535
- width: 100%;
1709
+ .lexselect .lexselectitem {
1710
+ width: calc(100% - 0.7rem);
1536
1711
  cursor: pointer;
1537
1712
  color: var(--global-text-primary);
1538
1713
  min-height: 20px;
1539
1714
  line-height: 22px;
1715
+ padding-inline: 0.35rem;
1716
+ padding-block: 0.2rem;
1717
+ border-radius: 6px;
1540
1718
  align-content: center;
1541
1719
  display: flow-root;
1542
- padding: 2px 0px;
1543
- padding-right: 32px;
1544
1720
  -webkit-user-select: none;
1545
1721
  -moz-user-select: none;
1546
1722
  -ms-user-select: none;
1547
1723
  user-select: none;
1548
1724
  }
1549
1725
 
1550
- .lexdropdown .lexdropdownitem.empty {
1726
+ .lexselect .lexselectlabel {
1727
+ width: calc(100% - 1.6rem);
1728
+ color: var(--global-text-primary);
1729
+ padding-inline: 0.8rem;
1730
+ padding-block: 0.2rem;
1731
+ min-height: 20px;
1732
+ line-height: 22px;
1733
+ align-content: center;
1734
+ display: flow-root;
1735
+ font-weight: 600;
1736
+ }
1737
+
1738
+ .lexselect .lexselectitem.empty {
1551
1739
  cursor: default;
1552
1740
  }
1553
1741
 
1554
- .lexdropdown .lexdropdownitem.empty .option {
1742
+ .lexselect .lexselectitem.empty .option {
1555
1743
  padding: 12px;
1556
1744
  }
1557
1745
 
1558
- .lexdropdown .lexdropdownitem:not(.empty):hover {
1559
- background-color: var(--global-selected);
1560
- color: var(--global-text-primary);
1746
+ .lexselect .lexselectitem:not(.empty):hover {
1747
+ background-color: var(--global-color-tertiary);
1561
1748
  }
1562
1749
 
1563
- .lexdropdown .lexdropdownitem:not(.empty):active {
1750
+ .lexselect .lexselectitem:not(.empty):active {
1564
1751
  color: #fff;
1565
1752
  }
1566
1753
 
1567
- .lexdropdown .lexdropdownitem a {
1754
+ .lexselect .lexselectitem a {
1568
1755
  display: none;
1569
- right: 24px;
1570
- position: absolute;
1756
+ margin-left: auto;
1757
+ margin-right: 8px;
1571
1758
  }
1572
1759
 
1573
- .lexdropdown .lexdropdownitem.selected {
1760
+ .lexselect .lexselectitem.selected {
1574
1761
  font-weight: 700;
1575
1762
  }
1576
1763
 
1577
- .lexdropdown .lexdropdownitem.selected a {
1764
+ .lexselect .lexselectitem.selected a {
1578
1765
  display: block;
1579
1766
  }
1580
1767
 
1581
- .lexdropdown img {
1768
+ .lexselect img {
1582
1769
  max-height: 64px;
1583
1770
  margin-top: 8px;
1584
1771
  }
1585
1772
 
1586
- :root[data-theme="light"] .lexdropdown .lexfilter {
1773
+ :root[data-theme="light"] .lexselect .lexfilter {
1587
1774
  background-color: var(--global-color-primary);
1588
1775
  }
1589
1776
 
1590
- :root[data-theme="light"] .lexdropdown ul {
1777
+ :root[data-theme="light"] .lexselect ul {
1591
1778
  background-color: var(--global-color-primary);
1592
1779
  box-shadow: 0 0px 6px rgba(175, 175, 175, 0.788);
1593
1780
  }
1594
1781
 
1595
- :root[data-theme="light"] .lexdropdown .lexdropdownitem:hover {
1782
+ :root[data-theme="light"] .lexselect .lexselectitem:hover {
1596
1783
  background-color: var(--global-selected-light);
1597
1784
  color: #fff;
1598
1785
  }
@@ -1600,7 +1787,8 @@ body.noevents * {
1600
1787
  /* Check box */
1601
1788
 
1602
1789
  .lexcheckbox {
1603
- --checkbox-color: var(--global-selected);
1790
+ --checkbox-bg-color: var(--global-selected);
1791
+ --checkbox-fg-color: #fff;
1604
1792
  vertical-align: middle;
1605
1793
  flex-shrink: 0;
1606
1794
  transition: background-color .2s,box-shadow .2s;
@@ -1610,10 +1798,10 @@ body.noevents * {
1610
1798
  padding: 0.12rem;
1611
1799
  display: inline-block;
1612
1800
  background-color: var(--global-color-primary);
1613
- color: #fff;
1801
+ color: var(--checkbox-fg-color);
1614
1802
  border-width: 1px;
1615
1803
  border-style: solid;
1616
- border-color: color-mix(in srgb, var(--checkbox-color) 50%, transparent);
1804
+ border-color: color-mix(in srgb, var(--checkbox-bg-color) 50%, transparent);
1617
1805
  border-radius: 4px;
1618
1806
  margin: auto 4px;
1619
1807
  text-align: center;
@@ -1624,11 +1812,12 @@ body.noevents * {
1624
1812
  }
1625
1813
 
1626
1814
  /* Colors */
1627
- .lexcheckbox.primary { --checkbox-color: var(--global-selected); }
1628
- .lexcheckbox.secondary { --checkbox-color: var(--global-selected-light); }
1629
- .lexcheckbox.accent { --checkbox-color: var(--global-color-accent); }
1630
- .lexcheckbox.warning { --checkbox-color: var(--global-color-warning); }
1631
- .lexcheckbox.error { --checkbox-color: var(--global-color-error); }
1815
+ .lexcheckbox.primary { --checkbox-bg-color: var(--global-selected); }
1816
+ .lexcheckbox.secondary { --checkbox-bg-color: var(--global-selected-light); }
1817
+ .lexcheckbox.accent { --checkbox-bg-color: var(--global-color-accent); }
1818
+ .lexcheckbox.contrast { --checkbox-bg-color: var(--global-text-primary); --checkbox-fg-color: var(--global-color-primary); }
1819
+ .lexcheckbox.warning { --checkbox-bg-color: var(--global-color-warning); }
1820
+ .lexcheckbox.error { --checkbox-bg-color: var(--global-color-error); }
1632
1821
 
1633
1822
  .lexcheckbox:before {
1634
1823
  content: "";
@@ -1644,8 +1833,7 @@ body.noevents * {
1644
1833
  }
1645
1834
 
1646
1835
  .lexcheckbox:checked,.lexcheckbox[aria-checked=true] {
1647
- background-color: var(--checkbox-color);
1648
- color: #fff !important;
1836
+ background-color: var(--checkbox-bg-color);
1649
1837
  }
1650
1838
 
1651
1839
  .lexcheckbox:checked:before, .lexcheckbox[aria-checked=true]:before {
@@ -1654,24 +1842,36 @@ body.noevents * {
1654
1842
  }
1655
1843
 
1656
1844
  .lexcheckboxcont {
1657
- display: inline-flex;
1658
- gap: 8px;
1845
+ display: flex;
1846
+ gap: 0.4rem;
1659
1847
  margin: 0 auto;
1660
1848
  }
1661
1849
 
1850
+ .lexcheckboxcont span {
1851
+ width: 95%;
1852
+ overflow: hidden;
1853
+ text-overflow: ellipsis;
1854
+ white-space: nowrap;
1855
+ }
1856
+
1662
1857
  .lexcheckboxsubmenu {
1663
1858
  width: 100%;
1664
- padding: 6px;
1859
+ padding: 4px;
1860
+ padding-inline: 8px;
1665
1861
  color: var(--global-text-secondary);
1666
- margin-top: -1px;
1862
+ }
1863
+
1864
+ .lexcheckboxsubmenu .lexwidget {
1865
+ width: 100% !important;
1667
1866
  }
1668
1867
 
1669
1868
  /* Toggle Widget */
1670
1869
 
1671
1870
  .lextoggle {
1672
- --toggle-color: #1a1a1a;
1871
+ --toggle-bg-color: #1a1a1a;
1872
+ --toggle-fg-color: #f9f9f9;
1673
1873
  border: 1px solid transparent;
1674
- color: #f9f9f9;
1874
+ color: var(--toggle-fg-color);
1675
1875
  background-color: var(--global-color-quaternary);
1676
1876
  cursor: pointer;
1677
1877
  -webkit-appearance: none;
@@ -1699,11 +1899,12 @@ body.noevents * {
1699
1899
  }
1700
1900
 
1701
1901
  /* Colors */
1702
- .lextoggle.primary { --toggle-color: var(--global-selected); }
1703
- .lextoggle.secondary { --toggle-color: var(--global-selected-light); }
1704
- .lextoggle.accent { --toggle-color: var(--global-color-accent); }
1705
- .lextoggle.warning { --toggle-color: var(--global-color-warning); }
1706
- .lextoggle.error { --toggle-color: var(--global-color-error); }
1902
+ .lextoggle.primary { --toggle-bg-color: var(--global-selected); }
1903
+ .lextoggle.secondary { --toggle-bg-color: var(--global-selected-light); }
1904
+ .lextoggle.accent { --toggle-bg-color: var(--global-color-accent); }
1905
+ .lextoggle.contrast { --toggle-bg-color: var(--global-text-primary); --toggle-fg-color: var(--global-color-primary); }
1906
+ .lextoggle.warning { --toggle-bg-color: var(--global-color-warning); }
1907
+ .lextoggle.error { --toggle-bg-color: var(--global-color-error); }
1707
1908
 
1708
1909
  .lextoggle > * {
1709
1910
  z-index: 1;
@@ -1766,12 +1967,12 @@ body.noevents * {
1766
1967
 
1767
1968
  .lextoggle:checked, .lextoggle[aria-checked=true], .lextoggle:has(>input:checked) {
1768
1969
  border: 1px solid var(--global-color-secondary);
1769
- background-color: var(--toggle-color);
1970
+ background-color: var(--toggle-bg-color);
1770
1971
  grid-template-columns: 1fr 1fr 0fr;
1771
1972
  }
1772
1973
 
1773
1974
  .lextoggle.outline:checked, .lextoggle.outline[aria-checked=true], .lextoggle.outline:has(>input:checked) {
1774
- color: var(--toggle-color);
1975
+ color: var(--toggle-bg-color);
1775
1976
  border: 1px solid currentColor;
1776
1977
  background-color: var(--global-color-primary);
1777
1978
  }
@@ -1781,27 +1982,31 @@ body.noevents * {
1781
1982
  }
1782
1983
 
1783
1984
  .lextoggle:indeterminate {
1784
- grid-template-columns: .5fr 1fr .5fr
1985
+ grid-template-columns: 0.5fr 1fr 0.5fr;
1785
1986
  }
1786
1987
 
1787
1988
  .lextoggle:disabled {
1788
- border: 1px solid var(--global-text-terciary);
1989
+ border: 1px solid var(--global-text-tertiary);
1789
1990
  cursor: not-allowed;
1790
1991
  }
1791
1992
 
1792
1993
  .lextoggle:disabled:before {
1793
- background-color: var(--global-text-terciary);
1994
+ background-color: var(--global-text-tertiary);
1794
1995
  }
1795
1996
 
1796
1997
  .lextogglecont {
1797
1998
  font-weight: bold;
1798
- display: inline-flex;
1799
- gap: 8px;
1999
+ display: flex;
2000
+ gap: 0.4rem;
1800
2001
  margin: 0 auto;
1801
2002
  }
1802
2003
 
1803
2004
  .lextogglecont .toggletext {
1804
2005
  font-weight: bold;
2006
+ width: 95%;
2007
+ overflow: hidden;
2008
+ text-overflow: ellipsis;
2009
+ white-space: nowrap;
1805
2010
  }
1806
2011
 
1807
2012
  .lextogglesubmenu {
@@ -1811,12 +2016,13 @@ body.noevents * {
1811
2016
  margin-top: -1px;
1812
2017
  }
1813
2018
 
1814
- /* Toggle Widget */
2019
+ /* Radio Group Widget */
1815
2020
 
1816
2021
  .lexradiogroup {
1817
2022
  width: 100% !important;
1818
2023
  display: flex;
1819
2024
  flex-direction: column;
2025
+ padding: 0.1em;
1820
2026
  }
1821
2027
 
1822
2028
  .lexradiogroup span {
@@ -1825,7 +2031,8 @@ body.noevents * {
1825
2031
 
1826
2032
  .lexradiogroup .lexradiogroupitem {
1827
2033
  display: flex;
1828
- padding: 2px;
2034
+ padding: 0.1em;
2035
+ padding-inline: 1.4em;
1829
2036
  gap: 0.65em;
1830
2037
  }
1831
2038
 
@@ -1834,15 +2041,15 @@ body.noevents * {
1834
2041
  }
1835
2042
 
1836
2043
  .lexradiogroup .lexradiogroupitem button {
1837
- width: 14px;
1838
- height: 14px;
1839
- min-width: 14px !important;
1840
- min-height: 14px !important;
2044
+ width: 16px;
2045
+ height: 16px;
2046
+ min-width: 16px !important;
2047
+ min-height: 16px !important;
1841
2048
  padding: 0;
1842
2049
  margin: auto 0;
1843
- border-radius: 7px;
2050
+ border-radius: 8px;
1844
2051
  background-color: var(--global-intense-background);
1845
- border: 1px solid var(--global-text-secondary) !important;
2052
+ border: 1px solid var(--global-text-tertiary) !important;
1846
2053
  }
1847
2054
 
1848
2055
  .lexradiogroup .lexradiogroupitem button:disabled {
@@ -1867,6 +2074,7 @@ body.noevents * {
1867
2074
  .lexradiogroup.primary .lexradiogroupitem button.checked span { background-color: var(--global-selected); }
1868
2075
  .lexradiogroup.secondary .lexradiogroupitem button.checked span { background-color: var(--global-selected-light); }
1869
2076
  .lexradiogroup.accent .lexradiogroupitem button.checked span { background-color: var(--global-color-accent); }
2077
+ .lexradiogroup.contrast .lexradiogroupitem button.checked span { background-color: var(--global-text-primary); }
1870
2078
  .lexradiogroup.warning .lexradiogroupitem button.checked span { background-color: var(--global-color-warning); }
1871
2079
  .lexradiogroup.error .lexradiogroupitem button.checked span { background-color: var(--global-color-error); }
1872
2080
 
@@ -1936,16 +2144,12 @@ body.noevents * {
1936
2144
  transition: 0.1s linear;
1937
2145
  }
1938
2146
 
1939
- .lexwidget.nobranch .lexvector .vecbox {
1940
- background: var(--global-button-color-hovered);
1941
- }
1942
-
1943
2147
  .lexvector a.fa-lock {
1944
2148
  min-width: 12px;
1945
2149
  }
1946
2150
 
1947
2151
  .lexvector .vecbox:hover {
1948
- background: var(--global-button-color-hovered);
2152
+ background-color: color-mix(in srgb, var(--global-button-color), #000 7%);
1949
2153
  }
1950
2154
 
1951
2155
  .lexwidget.nobranch .lexvector .vecbox:hover {
@@ -2034,11 +2238,12 @@ input[type=number] {
2034
2238
  border-radius: 6px;
2035
2239
  margin-right: 2px;
2036
2240
  position: relative;
2241
+ overflow-x: hidden;
2037
2242
  transition: 0.1s linear;
2038
2243
  }
2039
2244
 
2040
2245
  .lexwidget .numberbox:hover {
2041
- background-color: var(--global-button-color-hovered);
2246
+ background-color: color-mix(in srgb, var(--global-button-color), #000 7%);
2042
2247
  }
2043
2248
 
2044
2249
  .lexwidget .numberbox:has(input:focus) {
@@ -2047,7 +2252,6 @@ input[type=number] {
2047
2252
 
2048
2253
  .lexwidget .numberbox span {
2049
2254
  position: absolute;
2050
- top: 1px;
2051
2255
  pointer-events: none;
2052
2256
  }
2053
2257
 
@@ -2114,10 +2318,6 @@ input[type=number] {
2114
2318
  right: 0.8em;
2115
2319
  }
2116
2320
 
2117
- .lexwidget .lock {
2118
- /* color: red; */
2119
- }
2120
-
2121
2321
  /* Range Widget */
2122
2322
 
2123
2323
  .lexrangeslider {
@@ -2126,7 +2326,7 @@ input[type=number] {
2126
2326
  --range-progress: currentColor;
2127
2327
  --range-fill: 1;
2128
2328
  --range-thumb-padding: 0.15rem;
2129
- --range-bg: color-mix(in oklab,currentColor 10%,#0000);
2329
+ --range-bg: color-mix(in oklab,currentColor 20%,#0000);
2130
2330
  --range-dir: 1;
2131
2331
  --radius-selector: 0.5rem;
2132
2332
  -webkit-appearance: none;
@@ -2139,7 +2339,7 @@ input[type=number] {
2139
2339
  height: var(--range-thumb-size);
2140
2340
  border: none;
2141
2341
  outline: none;
2142
- color: var(--global-text-secondary);
2342
+ color: var(--global-text-tertiary);
2143
2343
  background-color: #0000;
2144
2344
  overflow: hidden;
2145
2345
  padding: 0;
@@ -2150,10 +2350,15 @@ input[type=number] {
2150
2350
  vertical-align: middle;
2151
2351
  }
2152
2352
 
2353
+ .lexrangeslider:disabled {
2354
+ cursor: default;
2355
+ }
2356
+
2153
2357
  /* Colors */
2154
2358
  .lexrangeslider.primary { color: var(--global-selected); }
2155
2359
  .lexrangeslider.secondary { color: var(--global-selected-light); }
2156
2360
  .lexrangeslider.accent { color: var(--global-color-accent); }
2361
+ .lexrangeslider.contrast { color: var(--global-text-primary); }
2157
2362
  .lexrangeslider.warning { color: var(--global-color-warning); }
2158
2363
  .lexrangeslider.error { color: var(--global-color-error); }
2159
2364
 
@@ -2184,6 +2389,10 @@ input[type=number] {
2184
2389
  height: calc(var(--range-thumb-size)*0.5);
2185
2390
  }
2186
2391
 
2392
+ .lexrangeslider:disabled::-webkit-slider-runnable-track {
2393
+ color: var(--global-color-quaternary);
2394
+ }
2395
+
2187
2396
  .lexrangeslider::-webkit-slider-thumb {
2188
2397
  box-sizing: border-box;
2189
2398
  border-radius: calc(var(--radius-selector) + min(var(--range-thumb-padding),var(--radius-selector-max)));
@@ -2237,7 +2446,7 @@ input[type=number] {
2237
2446
 
2238
2447
  .lexwidget .lexpad .lexinnerpad {
2239
2448
  border-radius: 4px;
2240
- background-color: light-dark(var(--global-color-terciary), var(--global-intense-background));
2449
+ background-color: light-dark(var(--global-color-tertiary), var(--global-intense-background));
2241
2450
  }
2242
2451
 
2243
2452
  .lexwidget .lexpad .lexinnerpad .lexpadthumb {
@@ -2345,6 +2554,10 @@ input[type=number] {
2345
2554
  padding-left: 8px;
2346
2555
  }
2347
2556
 
2557
+ .lextree .lextreetools input:hover {
2558
+ background: none;
2559
+ }
2560
+
2348
2561
  .lextree .lextreetools.notitle {
2349
2562
  padding-top: 14px;
2350
2563
  border-top-left-radius: 8px;
@@ -2393,7 +2606,10 @@ input[type=number] {
2393
2606
  list-style-type: none;
2394
2607
  align-items: center;
2395
2608
  line-height: 25px;
2396
- display: flex;
2609
+ display: inline-flex;
2610
+ white-space: nowrap;
2611
+ overflow: hidden;
2612
+ text-overflow: ellipsis;
2397
2613
  cursor: pointer;
2398
2614
  outline: none;
2399
2615
  border-radius: 6px;
@@ -2403,6 +2619,15 @@ input[type=number] {
2403
2619
  user-select: none;
2404
2620
  }
2405
2621
 
2622
+ .lextree .lextreeitem input {
2623
+ padding: 0;
2624
+ border: none;
2625
+ }
2626
+
2627
+ .lextree .lextreeitem input:hover {
2628
+ background: none;
2629
+ }
2630
+
2406
2631
  .lextree .lextreeitem div {
2407
2632
  display: flex;
2408
2633
  gap: 0.25rem;
@@ -2431,7 +2656,7 @@ input[type=number] {
2431
2656
 
2432
2657
  .lextree .lextreeitem:hover {
2433
2658
  color: var(--global-text-primary);
2434
- background: rgba(129, 132, 163, 0.191);
2659
+ background: var(--global-color-tertiary);
2435
2660
  }
2436
2661
 
2437
2662
  .lextree .lextreeitem.selected {
@@ -2480,19 +2705,19 @@ input[type=number] {
2480
2705
  }
2481
2706
 
2482
2707
  .lexfileinput::file-selector-button:hover {
2483
- background-color: var(--global-button-color-hovered);
2708
+ background-color: color-mix(in srgb, var(--global-button-color), #fff 4%);
2484
2709
  color: var(--global-text-primary);
2485
2710
  }
2486
2711
 
2487
- .lexfileinput::file-selector-button:active {
2488
- background-color: var(--global-color-terciary);
2712
+ .lexfileinput::file-selector-button:not(:disabled):active {
2713
+ background-color: var(--global-color-tertiary);
2489
2714
  color: var(--global-text-secondary);
2490
2715
  transform: scale(0.99);
2491
2716
  }
2492
2717
 
2493
2718
  .lexfileinput:disabled::file-selector-button {
2494
- cursor: not-allowed;
2495
- color: var(--global-text-terciary);
2719
+ cursor: default;
2720
+ color: var(--global-text-tertiary);
2496
2721
  }
2497
2722
 
2498
2723
  /* Progress bar */
@@ -2568,7 +2793,6 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
2568
2793
  .lexbadge {
2569
2794
  border-radius: 0.35rem;
2570
2795
  color: #fff;
2571
- font-weight: 500;
2572
2796
  border: 1px solid var(--badge-color, #14171a);
2573
2797
  width: fit-content;
2574
2798
  justify-content: center;
@@ -2584,6 +2808,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
2584
2808
  .lexbadge.primary { --badge-color: var(--global-selected); }
2585
2809
  .lexbadge.secondary { --badge-color: var(--global-selected-light); }
2586
2810
  .lexbadge.accent { --badge-color: var(--global-color-accent); }
2811
+ .lexbadge.contrast { --badge-color: var(--global-text-primary); color: var(--global-color-primary); }
2587
2812
  .lexbadge.warning { --badge-color: var(--global-color-warning); }
2588
2813
  .lexbadge.error { --badge-color: var(--global-color-error); }
2589
2814
  /* Styles */
@@ -2606,6 +2831,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
2606
2831
  width: 100%;
2607
2832
  background-color: var(--global-color-primary);
2608
2833
  display: flex;
2834
+ overflow: hidden;
2609
2835
  height: 100%;
2610
2836
  color: var(--global-text-primary);
2611
2837
  font-size: var(--global-font-size);
@@ -2711,7 +2937,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
2711
2937
  }
2712
2938
 
2713
2939
  .lexmenubox .lexmenuboxentry.disabled {
2714
- color: var(--global-text-terciary);
2940
+ color: var(--global-text-tertiary);
2715
2941
  cursor: default;
2716
2942
  }
2717
2943
 
@@ -2778,7 +3004,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
2778
3004
  width: -moz-calc(100% + 8px);
2779
3005
  width: -webkit-calc(100% + 8px);
2780
3006
  width: calc(100% + 8px);
2781
- border-color: var(--global-text-terciary);
3007
+ border-color: var(--global-text-tertiary);
2782
3008
  opacity: 0.25;
2783
3009
  }
2784
3010
 
@@ -2788,7 +3014,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
2788
3014
  text-align: right;
2789
3015
  float: right;
2790
3016
  align-content: center;
2791
- color: var(--global-text-terciary);
3017
+ color: var(--global-text-tertiary);
2792
3018
  margin-right: 12px;
2793
3019
  }
2794
3020
 
@@ -2828,7 +3054,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
2828
3054
  }
2829
3055
 
2830
3056
  .lexmenubar .lexmenubutton.disabled a {
2831
- color: light-dark(var(--global-color-terciary), var(--global-button-color));
3057
+ color: light-dark(var(--global-color-tertiary), var(--global-button-color));
2832
3058
  cursor: default;
2833
3059
  }
2834
3060
 
@@ -2882,14 +3108,14 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
2882
3108
  }
2883
3109
 
2884
3110
  .lexcontextmenu .lexmenuboxentry.cmtitle {
2885
- background: light-dark(var(--global-color-terciary), var(--global-intense-background));
3111
+ background: light-dark(var(--global-color-tertiary), var(--global-intense-background));
2886
3112
  font-weight: bold;
2887
3113
  cursor: default;
2888
3114
  }
2889
3115
 
2890
3116
  .lexcontextmenu .lexmenuboxentry.cmseparator {
2891
3117
  height: 1px;
2892
- border-bottom: 1px solid var(--global-color-terciary);
3118
+ border-bottom: 1px solid var(--global-color-tertiary);
2893
3119
  padding-bottom: 0;
2894
3120
  padding-top: 0;
2895
3121
  margin-top: -4px;
@@ -2954,13 +3180,8 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
2954
3180
  gap: 0.2rem;
2955
3181
  }
2956
3182
 
2957
- .lexsidebar svg, .lexsidebar svg path {
2958
- width: 1rem;
2959
- height: 1rem;
2960
- --color: var(--global-text-secondary);
2961
- fill: var(--color);
2962
- stroke: var(--color);
2963
- display: block;
3183
+ .lexsidebar *::-webkit-scrollbar {
3184
+ display: none;
2964
3185
  }
2965
3186
 
2966
3187
  .lexsidebar .lexwidget {
@@ -3061,6 +3282,10 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
3061
3282
  background-color: var(--global-color-secondary);
3062
3283
  }
3063
3284
 
3285
+ .lexsidebar .lexsidebarentry.selected {
3286
+ background-color: var(--global-selected);
3287
+ }
3288
+
3064
3289
  .lexsidebar .lexsidebarentry:active {
3065
3290
  transform: scale(0.99);
3066
3291
  }
@@ -3097,6 +3322,11 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
3097
3322
  font-size: var(--global-font-size);
3098
3323
  }
3099
3324
 
3325
+ .lexsidebar .lexcheckbox {
3326
+ width: 1.25em;
3327
+ height: 1.25em;
3328
+ }
3329
+
3100
3330
  .lexsidebar .lexsidebarsubentrycontainer {
3101
3331
  width: calc(100% - 48px);
3102
3332
  margin-block-start: 4px;
@@ -3114,11 +3344,16 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
3114
3344
  border-left: 1px solid #5251514d;
3115
3345
  }
3116
3346
 
3347
+ .lexsidebar .collapsablecontainer {
3348
+ 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);
3349
+ padding-inline: 4px;
3350
+ }
3351
+
3117
3352
  .lexsidebar .lexsidebarsubentrycontainer:not(:has(div)) {
3118
3353
  margin: 0px;
3119
3354
  }
3120
3355
 
3121
- .lexsidebar.collapsing .lexsidebarsubentrycontainer {
3356
+ .lexsidebar.collapsing .collapsablecontainer {
3122
3357
  max-height: 0px;
3123
3358
  transform: translate(-8px, -8px);
3124
3359
  opacity: 0;
@@ -3130,34 +3365,19 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
3130
3365
  gap: 0.8em;
3131
3366
  }
3132
3367
 
3133
- .lexsidebar.collapsed .lexsidebarsubentrycontainer {
3134
- display: none;
3368
+ .lexsidebar.collapsed .collapsablecontainer {
3369
+ display: none !important;
3135
3370
  }
3136
3371
 
3137
3372
  .lexsidebar.collapsed .lexsidebarcontent div a {
3138
3373
  display: none;
3139
3374
  }
3140
3375
 
3141
- /* .lexsidebar .lexsidebarentry a:hover {
3142
- border: 3px solid var(--global-selected);
3143
- background-color: var(--global-button-color-hovered);
3144
- }
3145
-
3146
- .lexsidebar .lexsidebarentry a:active {
3147
- font-size: 17px;
3148
- }
3149
-
3150
- .lexsidebar .lexsidebarentry.selected a {
3151
- background-color: var(--global-button-color-hovered);
3152
- border: 4px solid var(--global-selected);
3153
- } */
3154
-
3155
3376
  .lexsidebar .lexsidebarentry .lexsidebarentrydesc {
3156
3377
  position: absolute;
3157
- margin-top: -3px;
3158
3378
  margin-left: 32px;
3159
3379
  font-weight: 600;
3160
- background-color: var(--global-text-secondary);
3380
+ background-color: var(--global-text-primary);
3161
3381
  color: var(--global-color-primary);
3162
3382
  font-size: var(--global-font-size);
3163
3383
  border-radius: 6px;
@@ -3207,7 +3427,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
3207
3427
  background-color: var(--global-intense-background);
3208
3428
  }
3209
3429
 
3210
- .lexsidebar .lexavatar:has(svg) {
3430
+ .lexsidebar:not(.collapsing) .lexavatar:has(svg) {
3211
3431
  border: 1px solid #ffffff18;
3212
3432
  }
3213
3433
 
@@ -3257,10 +3477,10 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
3257
3477
  padding-inline: 0px;
3258
3478
  }
3259
3479
 
3260
- /* .lexsidebar.collapsed .lexsidebarfooter span, .lexsidebar.collapsed .lexsidebarfooter div,
3480
+ .lexsidebar.collapsed .lexsidebarfooter span, .lexsidebar.collapsed .lexsidebarfooter div,
3261
3481
  .lexsidebar.collapsed .lexsidebarheader span, .lexsidebar.collapsed .lexsidebarheader div {
3262
3482
  display: none;
3263
- } */
3483
+ }
3264
3484
 
3265
3485
  /* Overlay Buttons */
3266
3486
 
@@ -3277,17 +3497,16 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
3277
3497
  width: auto !important;
3278
3498
  height: auto !important;
3279
3499
  justify-content: start;
3500
+ gap: 0.35em;
3280
3501
  z-index: 100;
3281
3502
  background-color: var(--global-color-secondary);
3282
3503
  margin: 8px;
3283
3504
  padding: 0.25em;
3284
- padding-bottom: 0.3em;
3285
3505
  border-radius: 12px;
3286
3506
  }
3287
3507
 
3288
3508
  .lexoverlaybuttons .lexwidget {
3289
3509
  padding: 0px;
3290
- margin-right: 6px;
3291
3510
  pointer-events: auto;
3292
3511
  min-width: 32px;
3293
3512
  }
@@ -3382,7 +3601,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
3382
3601
 
3383
3602
  .lexoverlaybuttons .lexbutton:hover {
3384
3603
  color: var(--global-text-primary);
3385
- background: var(--global-button-color-hovered);
3604
+ background-color: color-mix(in srgb, var(--global-button-color), #fff 4%);
3386
3605
  }
3387
3606
 
3388
3607
  .lexoverlaybuttons .lexbutton.selected:hover {
@@ -3396,8 +3615,8 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
3396
3615
 
3397
3616
  .lexoverlaybuttons .lexoverlaygroup {
3398
3617
  display: flex;
3399
- margin-right: 6px;
3400
- background-color: var(--global-color-terciary);
3618
+ flex: none;
3619
+ background-color: var(--global-color-tertiary);
3401
3620
  border-radius: 8px;
3402
3621
  }
3403
3622
 
@@ -3431,10 +3650,6 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
3431
3650
  margin-right: 0px;
3432
3651
  }
3433
3652
 
3434
- .lexoverlaybuttons .lexwidget:last-child {
3435
- margin-right: 0px;
3436
- }
3437
-
3438
3653
  /* Area Tabs */
3439
3654
 
3440
3655
  .lexareatabs {
@@ -3445,7 +3660,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
3445
3660
  }
3446
3661
 
3447
3662
  .lexareatabs.dockingtab {
3448
- background-color: #7cb9f34e;
3663
+ background-color: #9ebbd65e !important;
3449
3664
  }
3450
3665
 
3451
3666
  .lexareatabs .lexareatab {
@@ -3461,7 +3676,6 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
3461
3676
  -moz-user-select: none;
3462
3677
  -ms-user-select: none;
3463
3678
  user-select: none;
3464
- transition: 0.2s;
3465
3679
  line-height: 16px;
3466
3680
  }
3467
3681
 
@@ -3469,10 +3683,11 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
3469
3683
  position: absolute;
3470
3684
  background: light-dark(var(--global-selected-light), var(--global-selected));
3471
3685
  z-index: 0;
3686
+ transition: linear transform 0.15s;
3472
3687
  }
3473
3688
 
3474
3689
  .lexareatabs.row {
3475
- background-color: light-dark(var(--global-color-terciary), var(--global-button-color));
3690
+ background-color: light-dark(var(--global-color-tertiary), var(--global-button-color));
3476
3691
  border-radius: 8px;
3477
3692
  padding: 3px;
3478
3693
  margin: 6px;
@@ -3538,10 +3753,6 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
3538
3753
  margin: 4px 7px !important;
3539
3754
  }
3540
3755
 
3541
- .lexareatabscontent {
3542
- /* overflow-y: scroll; */
3543
- }
3544
-
3545
3756
  .lexareatabscontent.folded {
3546
3757
  max-height: 0px;
3547
3758
  }
@@ -3559,21 +3770,15 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
3559
3770
  height: 32px;
3560
3771
  border-radius: 8px;
3561
3772
  margin: auto 0;
3562
- }
3563
-
3564
- .lexavatar img {
3565
- width: 100%;
3566
- height: 100%;
3567
- }
3568
-
3569
- .lexavatar a svg {
3570
- width: 60%;
3571
- height: 100%;
3773
+ align-content: center;
3572
3774
  }
3573
3775
 
3574
3776
  .lexavatar * {
3575
3777
  border-radius: 8px;
3576
- width: 60%;
3778
+ }
3779
+
3780
+ .lexavatar img {
3781
+ width: 100%;
3577
3782
  height: 100%;
3578
3783
  }
3579
3784
 
@@ -3589,7 +3794,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
3589
3794
  height: 128px;
3590
3795
  object-fit: cover;
3591
3796
  border-radius: 6px;
3592
- outline: 3px solid var(--global-text-terciary);
3797
+ outline: 3px solid var(--global-text-tertiary);
3593
3798
  }
3594
3799
 
3595
3800
  .lexcard:hover a {
@@ -3702,8 +3907,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
3702
3907
  }
3703
3908
 
3704
3909
  .lexlistitem:hover {
3705
- background-color: var(--global-color-secondary);
3706
- color: var(--global-text-primary);
3910
+ background-color: var(--global-color-tertiary);
3707
3911
  }
3708
3912
 
3709
3913
  .lexlistitem:active {
@@ -3721,7 +3925,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
3721
3925
  .lexwidget:has(.lexcheckboxsubmenu),
3722
3926
  .lexwidget:has(.lextogglesubmenu),
3723
3927
  .lexwidget:has(.lexcustomcontainer) {
3724
- background-color: light-dark(var(--global-color-terciary), var(--global-medium-background));
3928
+ background-color: light-dark(var(--global-color-tertiary), var(--global-medium-background));
3725
3929
  border-radius: 6px;
3726
3930
  }
3727
3931
 
@@ -3752,7 +3956,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
3752
3956
  display: inline-flex;
3753
3957
  flex-wrap: wrap;
3754
3958
  line-height: 12px;
3755
- background-color: light-dark(var(--global-color-terciary), var(--global-button-color));
3959
+ background-color: light-dark(var(--global-color-tertiary), var(--global-button-color));
3756
3960
  border-radius: 8px;
3757
3961
  padding: 4px;
3758
3962
  }
@@ -3779,7 +3983,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
3779
3983
  }
3780
3984
 
3781
3985
  .lextags .lextag a:hover {
3782
- color: light-dark(var(--global-text-terciary), var(--global-text-secondary));
3986
+ color: light-dark(var(--global-text-tertiary), var(--global-text-secondary));
3783
3987
  cursor: pointer;
3784
3988
  }
3785
3989
 
@@ -3807,6 +4011,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
3807
4011
  .lexcounterbox .lexcounterlabel {
3808
4012
  width: 100%;
3809
4013
  margin-top: -18px;
4014
+ font-size: var(--global-font-size-sm);
3810
4015
  color: var(--global-text-secondary);
3811
4016
  }
3812
4017
 
@@ -3814,17 +4019,24 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
3814
4019
 
3815
4020
  .lextable table {
3816
4021
  width: 100%;
3817
- border: 2px solid;
3818
- border-color: light-dark(#dbd8d8c0, #5c5b5b7a);
4022
+ border: 1px solid;
4023
+ border-color: light-dark(#dbd8d8c0, var(--global-button-color));
3819
4024
  border-collapse: separate;
3820
- /* border-left: 0; */
3821
4025
  border-radius: 8px;
3822
4026
  border-spacing: 0px;
3823
4027
  overflow: hidden;
3824
- background-color: var(--global-button-color);
4028
+ background-color: var(--global-color-primary);
3825
4029
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
3826
4030
  }
3827
4031
 
4032
+ .lextable svg, .lextable svg path {
4033
+ --color: var(--global-text-tertiary);
4034
+ }
4035
+
4036
+ .lextable svg.success, .lextable svg.success path {
4037
+ --color: #42d065 !important;
4038
+ }
4039
+
3828
4040
  thead {
3829
4041
  display: table-header-group;
3830
4042
  border-color: inherit;
@@ -3835,28 +4047,44 @@ tr {
3835
4047
  display: table-row;
3836
4048
  vertical-align: inherit;
3837
4049
  border-color: inherit;
4050
+ transition: transform 0.2s ease-in;
4051
+ }
4052
+
4053
+ tr:has(input:checked) {
4054
+ background-color: var(--global-color-tertiary);
4055
+ }
4056
+
4057
+ tr:hover, tr.dragging {
4058
+ background-color: var(--global-color-secondary);
4059
+ }
4060
+
4061
+ tr.dragging {
4062
+ transition: none !important;
4063
+ pointer-events: none;
3838
4064
  }
3839
4065
 
3840
4066
  th {
3841
- --th-color: light-dark(var(--global-text-quaternary), var(--global-text-primary));
4067
+ --th-color: var(--global-text-secondary);
3842
4068
  color: var(--th-color);
3843
- font-size: calc(var(--global-font-size) + 1px) !important;
4069
+ font-size: var(--global-font-size);
3844
4070
  cursor: pointer;
3845
4071
  transition: all 0.1s linear;
3846
- background-color: color-mix(in srgb, var(--global-button-color), #000 10%);
4072
+ background-color: var(--global-color-tertiary);
3847
4073
  -webkit-user-select: none;
3848
4074
  -moz-user-select: none;
3849
4075
  -ms-user-select: none;
3850
4076
  user-select: none;
3851
4077
  }
3852
4078
 
3853
- tr:hover {
3854
- background-color: color-mix(in srgb, var(--global-button-color), #000 7%);
4079
+ th a {
4080
+ pointer-events: none;
3855
4081
  }
3856
4082
 
3857
- th a {
3858
- margin-left: 4px;
4083
+ th a, td a {
3859
4084
  font-size: var(--global-font-size-xs) !important;
4085
+ display: flex;
4086
+ margin-left: 0px !important;
4087
+ place-self: center;
3860
4088
  }
3861
4089
 
3862
4090
  th a:active {
@@ -3871,8 +4099,15 @@ th, td {
3871
4099
  padding: 6px;
3872
4100
  padding-inline: 12px;
3873
4101
  text-align: left;
3874
- vertical-align: top;
3875
- /* border-left: 2px solid red; */
4102
+ align-content: center;
4103
+ }
4104
+
4105
+ th.centered, td.centered {
4106
+ text-align: center;
4107
+ }
4108
+
4109
+ .lextable.centered th, .lextable.centered td {
4110
+ text-align: center;
3876
4111
  }
3877
4112
 
3878
4113
  th.sm, td.sm {
@@ -3880,11 +4115,15 @@ th.sm, td.sm {
3880
4115
  }
3881
4116
 
3882
4117
  th .lexcheckbox, td .lexcheckbox {
3883
- margin-top: 3px;
4118
+ width: 1.25em;
4119
+ height: 1.25em;
3884
4120
  }
3885
4121
 
3886
4122
  td {
4123
+ justify-items: center;
3887
4124
  border-top: 2px solid;
4125
+ overflow: hidden;
4126
+ white-space: nowrap;
3888
4127
  border-color: light-dark(#dbd8d8c0, #5c5b5b7a);
3889
4128
  }
3890
4129
 
@@ -3898,7 +4137,11 @@ thead:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td
3898
4137
 
3899
4138
  .lextable .lextablebuttons {
3900
4139
  display: inline-flex;
3901
- gap: 8px;
4140
+ gap: 0.8rem;
4141
+ }
4142
+
4143
+ .lextable .lextablebuttons .lexicon {
4144
+ font-size: var(--global-font-size-sm) !important;
3902
4145
  }
3903
4146
 
3904
4147
  :root[data-theme="light"] .lextable table {
@@ -4025,11 +4268,11 @@ thead:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td
4025
4268
  }
4026
4269
 
4027
4270
  .lexknob.disabled .knobmarker {
4028
- background-color: var(--global-text-terciary);
4271
+ background-color: var(--global-text-tertiary);
4029
4272
  }
4030
4273
 
4031
4274
  .lexknob.disabled .knobmarker {
4032
- background-color: var(--global-text-terciary);
4275
+ background-color: var(--global-text-tertiary);
4033
4276
  }
4034
4277
 
4035
4278
  .lexknob.sm .knobmarker {
@@ -4173,10 +4416,6 @@ thead:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td
4173
4416
  margin: 0px;
4174
4417
  }
4175
4418
 
4176
- .lextimeline .lextitle {
4177
- padding-left: 24px;
4178
- }
4179
-
4180
4419
  .lextimeline .lextree ul {
4181
4420
  margin: 0;
4182
4421
  padding-bottom: 0px;
@@ -4191,7 +4430,7 @@ thead:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td
4191
4430
  }
4192
4431
 
4193
4432
  .lextimeline .lexbutton.accept:hover {
4194
- background-color: var(--global-button-color-hovered);
4433
+ background-color: color-mix(in srgb, var(--global-button-color), #000 7%);
4195
4434
  }
4196
4435
 
4197
4436
  /**/
@@ -4679,7 +4918,7 @@ ul.lexassetscontent {
4679
4918
  }
4680
4919
 
4681
4920
  .lexcodetabinfo {
4682
- background-color: light-dark(var(--global-color-terciary), var(--global-medium-background));
4921
+ background-color: light-dark(var(--global-color-tertiary), var(--global-medium-background));
4683
4922
  position: absolute;
4684
4923
  z-index: 3;
4685
4924
  bottom: 0px;
@@ -4689,7 +4928,7 @@ ul.lexassetscontent {
4689
4928
  .lexcodegutter {
4690
4929
  width: 48px;
4691
4930
  height: calc(100% - 65px);
4692
- background-color: light-dark(var(--global-color-terciary), var(--global-medium-background));
4931
+ background-color: light-dark(var(--global-color-tertiary), var(--global-medium-background));
4693
4932
  margin-top: 28px;
4694
4933
  overflow: hidden;
4695
4934
  position: absolute;
@@ -4698,7 +4937,7 @@ ul.lexassetscontent {
4698
4937
 
4699
4938
  .lexcodeeditor .codetabsarea {
4700
4939
  height: calc(100% - 64px) !important;
4701
- background-color: light-dark(var(--global-color-terciary), var(--global-medium-background));
4940
+ background-color: light-dark(var(--global-color-tertiary), var(--global-medium-background));
4702
4941
  overflow: scroll;
4703
4942
  }
4704
4943
 
@@ -4799,7 +5038,7 @@ ul.lexassetscontent {
4799
5038
  }
4800
5039
 
4801
5040
  .lexcodeeditor pre .line-gutter {
4802
- color: var(--global-text-terciary);
5041
+ color: var(--global-text-tertiary);
4803
5042
  width: 48px;
4804
5043
  height: var(--code-editor-row-height);
4805
5044
  font-size: var(--code-editor-font-size);
@@ -4997,7 +5236,7 @@ ul.lexassetscontent {
4997
5236
  }
4998
5237
 
4999
5238
  .lexcodeeditor .autocomplete pre:hover {
5000
- background-color: var(--global-color-terciary);
5239
+ background-color: var(--global-color-tertiary);
5001
5240
  cursor: pointer;
5002
5241
  }
5003
5242
 
@@ -5206,7 +5445,7 @@ ul.lexassetscontent {
5206
5445
  cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAA4lJREFUWEftl1FIk1EUx/9qOGtNU4wkC1RQEc2hD9P5oigqH1PxIQqhgYI+iHtIE0ZQKoZo6BDniFScsIcgCSEILMPhJBRCh6G+qKSopHy2iVnOudniyDdZY3NTJ/rghcvGuPvO7/zP/557Pz+c8/A75/i4cAAERNPGzTMXyFEBfwAB6+vrqoiIiMcA9gFYzhrEEeAKgKC1tbX6nZ2dh3t7e3UJCQnvAJgBWM8KxBkgWKvV3g8KCnoZFxfHZ1l2fHV1tS4vL+8rgD1OFZ+WxREgAMCN0tLSex0dHR9DQkJ4ra2tkMlkFoPBoGppaWlTqVQGrix/fUXhCEDfQwDcMRqNY9nZ2YKpqSkkJydDoVBYExMTN7a3t5vi4+M1AHZ9VRbnbXgdQOTs7OzbtrY2YV9f32GiUqkU7e3tFpPJNL6ystKckZExyvmDzHri4QxwFUDE2NhYvV6vL5HJZIHOT6ay1NTU2FiW7RoYGFBUVVWtnKYszgAU8KZarS5JSkpqEIlEfFepRUdHo7e3dzclJWVrc3NTERMT8/qkZXEGICOGSSQSYX9//yCfz6et6XYUFxdDrVbTNp1YWlpqT01NHTxuWZwB7Ea8y7LsF4ZhgicnJ90C8Hg8ZGZmQiwWo6GhAQaD4VV4ePgTDoK6qcfh6iw4MOL09PSbzs7O1O7u7v8eEhsbC4lEgtzcXLNYLPa32WyW5eXlaaPR+Hlubm64srJyAsAOAK+2qisAMuItnU73fH5+/lF5efmhEaurq9HY2GhZWFhYWlxcnNRqtd9UKtUsgF8AqEf8BLDF+eHEClDA8J6engcikahJKBReIwnS0tIwMjKyL5fLXyiVSqoLBfrDZWsCQJMyt/cIj/LTAlcKkBFDs7KykoaGhoYDAwPpkIJOp9u1Wq0fcnJyOgFscFlTMGrRdFbQpJ7glfR2OlcAjkbUMQwTWlBQgLKystWoqCgpgGVObsqYgh4roLMs7i4kZMTbMzMzGqVSmdbV1UXt+Gltbe17AD8A/PbVweQO4MCIo6OjcoFAIDWbzZ/S09ObAVDX2+Rk96rGnha5AyAjhmk0msL8/PxnDMOU6fX67wBYzmxeOdxTcHcmpN/JiILCwsLIiooKcVFR0TCX+bavpD/KhHYwHt2QAFA7JqfbHe9NYl6vOepWfHBHBECftL1o+kx6Twp4ncFpF16494LTJnTs/18qcKnAPygqQzAAgQjBAAAAAElFTkSuQmCC) 4 4, auto !important;
5207
5446
  }
5208
5447
 
5209
- .lexgraph .lexdropdown ul {
5448
+ .lexgraph .lexselect ul {
5210
5449
  max-height: unset;
5211
5450
  }
5212
5451
 
@@ -5247,6 +5486,7 @@ ul.lexassetscontent {
5247
5486
  left: 0;
5248
5487
  bottom: 0;
5249
5488
  right: 0;
5489
+ stroke: unset;
5250
5490
  }
5251
5491
 
5252
5492
  .lexgraph .box-selection-svg {