lexgui 0.4.2 → 0.5.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
@@ -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
+ 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 {
@@ -1104,7 +1271,7 @@ body.noevents * {
1104
1271
  height: 2px;
1105
1272
  width: 11px;
1106
1273
  cursor: ew-resize;
1107
- color: var(--global-text-terciary);
1274
+ color: var(--global-text-tertiary);
1108
1275
  }
1109
1276
 
1110
1277
  .lexwidgetseparator div:hover {
@@ -1151,8 +1318,8 @@ body.noevents * {
1151
1318
  background-color: var(--global-button-color);
1152
1319
  }
1153
1320
 
1154
- .lexwidget .lextext:not(:has(div)):hover {
1155
- background-color: var(--global-button-color-hovered);
1321
+ .lexwidget input:not(.lexcheckbox, .lextoggle, .lexrangeslider):hover {
1322
+ background-color: color-mix(in srgb, var(--global-button-color), #000 7%);
1156
1323
  }
1157
1324
 
1158
1325
  .lexwidget .lextext input {
@@ -1218,7 +1385,7 @@ body.noevents * {
1218
1385
  .lexwidget input:disabled:not(.lextoggle) {
1219
1386
  outline: none;
1220
1387
  border: none;
1221
- color: var(--global-text-terciary);
1388
+ color: var(--global-text-tertiary);
1222
1389
  }
1223
1390
 
1224
1391
  .lexseparator {
@@ -1236,7 +1403,7 @@ body.noevents * {
1236
1403
  }
1237
1404
 
1238
1405
  :root[data-theme="light"] .lexwidget .lextext {
1239
- border: 1px solid var(--global-color-terciary) !important;
1406
+ border: 1px solid var(--global-color-tertiary) !important;
1240
1407
  }
1241
1408
 
1242
1409
  :root[data-theme="light"] .lexbranch .lexseparator {
@@ -1254,6 +1421,7 @@ body.noevents * {
1254
1421
  padding: 2px;
1255
1422
  padding-left: 12px;
1256
1423
  padding-right: 12px;
1424
+ line-height: 1.5;
1257
1425
  display: grid;
1258
1426
  align-content: center;
1259
1427
  border-radius: 12px;
@@ -1299,7 +1467,6 @@ body.noevents * {
1299
1467
  background-color: var(--button-color);
1300
1468
  border-radius: 6px;
1301
1469
  border: 1px solid transparent;
1302
- /* margin-top: 2px; */
1303
1470
  min-height: 22px !important;
1304
1471
  color: var(--global-text-primary);
1305
1472
  font-weight: 500;
@@ -1314,7 +1481,7 @@ body.noevents * {
1314
1481
 
1315
1482
  :root[data-theme="light"] .lexbutton {
1316
1483
  --button-color: var(--global-button-color);
1317
- border: 1px solid var(--global-color-terciary);
1484
+ border: 1px solid var(--global-color-tertiary);
1318
1485
  }
1319
1486
 
1320
1487
  :root[data-theme="light"] .lexbutton.selected {
@@ -1362,11 +1529,11 @@ body.noevents * {
1362
1529
  .lexbutton a {
1363
1530
  margin-left: 0px;
1364
1531
  font-size: var(--global-font-size-sm);
1532
+ pointer-events: none;
1365
1533
  }
1366
1534
 
1367
1535
  .lexbutton.array span {
1368
1536
  display: inline-flex;
1369
- margin-left: 8px;
1370
1537
  }
1371
1538
 
1372
1539
  .lexbutton.array a {
@@ -1387,7 +1554,7 @@ body.noevents * {
1387
1554
  }
1388
1555
 
1389
1556
  .lexbutton:disabled {
1390
- color: var(--global-text-terciary);
1557
+ color: var(--global-text-tertiary);
1391
1558
  }
1392
1559
 
1393
1560
  .lexbutton.selected {
@@ -1404,7 +1571,7 @@ body.noevents * {
1404
1571
 
1405
1572
  .lexcombobuttons .lexcombobuttonsbox {
1406
1573
  display: flex;
1407
- background-color: light-dark(var(--global-color-terciary), var(--global-button-color));
1574
+ background-color: light-dark(var(--global-color-tertiary), var(--global-button-color));
1408
1575
  width: max-content;
1409
1576
  justify-self: center;
1410
1577
  padding: 3px;
@@ -1450,71 +1617,77 @@ body.noevents * {
1450
1617
  font-size: var(--global-font-size-sm);
1451
1618
  }
1452
1619
 
1453
- /* Dropdown (Combo) */
1620
+ /* Select (Combobox) */
1454
1621
 
1455
- .lexdropdown {
1622
+ .lexselect {
1456
1623
  display: grid;
1457
1624
  align-content: center;
1458
1625
  position: relative;
1459
1626
  }
1460
1627
 
1461
- .lexdropdown .lexwidget {
1628
+ .lexselect .lexwidget {
1462
1629
  padding: 0;
1463
1630
  }
1464
1631
 
1465
- .lexdropdown .lexfilter {
1632
+ .lexselect .lexfilter {
1466
1633
  width: calc(100% - 6px) !important;
1467
1634
  padding: 2px 3px;
1468
1635
  background-color: var(--global-color-primary);
1469
1636
  border-bottom: 1px solid;
1470
- border-color: color-mix(in srgb, var(--global-text-terciary), #00000000 75%);
1637
+ border-color: color-mix(in srgb, var(--global-text-tertiary), #00000000 75%);
1638
+ }
1639
+
1640
+ .lexselect .lexfilter input:hover {
1641
+ background-color: var(--global-color-primary);
1471
1642
  }
1472
1643
 
1473
- .lexdropdown .lexfilter a {
1644
+ .lexselect .lexfilter a {
1474
1645
  font-size: var(--global-font-size-sm);
1475
1646
  padding-inline: 4px;
1476
1647
  }
1477
1648
 
1478
- .lexdropdown ul .lexlistitem {
1649
+ .lexselect ul .lexlistitem {
1479
1650
  font-size: var(--global-font-size-sm);
1480
1651
  }
1481
1652
 
1482
- .lexdropdown .option {
1653
+ .lexselect .option {
1483
1654
  display: flex;
1484
- flex-direction: column;
1485
1655
  align-items: center;
1486
1656
  width: 100%;
1487
1657
  position: relative;
1488
1658
  }
1489
1659
 
1490
- .lexdropdown .option:not(.media) {
1491
- padding-left: 12px;
1660
+ .lexselect .option.media {
1661
+ flex-direction: column;
1492
1662
  }
1493
1663
 
1494
- .lexdropdown .lexlistitem {
1664
+ .lexselect .lexlistitem {
1495
1665
  height: fit-content;
1496
1666
  }
1497
1667
 
1498
- .lexdropdown .lexdropdownoptions {
1668
+ .lexselect .lexselectoptions {
1499
1669
  background-color: var(--global-color-primary);
1500
1670
  -webkit-backdrop-filter: blur(10px);
1501
1671
  backdrop-filter: blur(10px);
1502
1672
  margin: 0;
1503
1673
  padding: 0;
1504
- border: none;
1505
1674
  outline: none;
1506
1675
  width: fit-content;
1507
1676
  max-height: -webkit-fill-available;
1508
1677
  position: fixed;
1509
1678
  z-index: 10000;
1510
1679
  box-shadow: 0 0px 6px rgba(0, 0, 0, 0.603);
1511
- border-bottom-left-radius: 6px;
1512
- border-bottom-right-radius: 6px;
1680
+ border-radius: 6px;
1681
+ border: 1px solid #7a797c4f;
1513
1682
  overflow-y: auto;
1514
1683
  overflow-x: hidden;
1515
1684
  }
1516
1685
 
1517
- .lexdropdown ul {
1686
+ dialog .lexselect .lexselectoptions {
1687
+ max-height: none;
1688
+ }
1689
+
1690
+ .lexselect ul {
1518
1691
  list-style: none;
1519
1692
  padding: 0px;
1520
1693
  z-index: 10;
@@ -1523,76 +1696,87 @@ body.noevents * {
1523
1696
  height: 100%;
1524
1697
  }
1525
1698
 
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;
1699
+ .lexselect ul .lexselectinnerlist {
1700
+ width: calc(100% - 0.6rem);
1701
+ height: calc(100% - 25px);
1702
+ padding: 0.3rem;
1703
+ display: grid;
1532
1704
  }
1533
1705
 
1534
- .lexdropdown .lexdropdownitem {
1535
- width: 100%;
1706
+ .lexselect .lexselectitem {
1707
+ width: calc(100% - 0.7rem);
1536
1708
  cursor: pointer;
1537
1709
  color: var(--global-text-primary);
1538
1710
  min-height: 20px;
1539
1711
  line-height: 22px;
1712
+ padding-inline: 0.35rem;
1713
+ padding-block: 0.2rem;
1714
+ border-radius: 6px;
1540
1715
  align-content: center;
1541
1716
  display: flow-root;
1542
- padding: 2px 0px;
1543
- padding-right: 32px;
1544
1717
  -webkit-user-select: none;
1545
1718
  -moz-user-select: none;
1546
1719
  -ms-user-select: none;
1547
1720
  user-select: none;
1548
1721
  }
1549
1722
 
1550
- .lexdropdown .lexdropdownitem.empty {
1723
+ .lexselect .lexselectlabel {
1724
+ width: calc(100% - 1.6rem);
1725
+ color: var(--global-text-primary);
1726
+ padding-inline: 0.8rem;
1727
+ padding-block: 0.2rem;
1728
+ min-height: 20px;
1729
+ line-height: 22px;
1730
+ align-content: center;
1731
+ display: flow-root;
1732
+ font-weight: 600;
1733
+ }
1734
+
1735
+ .lexselect .lexselectitem.empty {
1551
1736
  cursor: default;
1552
1737
  }
1553
1738
 
1554
- .lexdropdown .lexdropdownitem.empty .option {
1739
+ .lexselect .lexselectitem.empty .option {
1555
1740
  padding: 12px;
1556
1741
  }
1557
1742
 
1558
- .lexdropdown .lexdropdownitem:not(.empty):hover {
1559
- background-color: var(--global-selected);
1560
- color: var(--global-text-primary);
1743
+ .lexselect .lexselectitem:not(.empty):hover {
1744
+ background-color: var(--global-color-tertiary);
1561
1745
  }
1562
1746
 
1563
- .lexdropdown .lexdropdownitem:not(.empty):active {
1747
+ .lexselect .lexselectitem:not(.empty):active {
1564
1748
  color: #fff;
1565
1749
  }
1566
1750
 
1567
- .lexdropdown .lexdropdownitem a {
1751
+ .lexselect .lexselectitem a {
1568
1752
  display: none;
1569
- right: 24px;
1570
- position: absolute;
1753
+ margin-left: auto;
1754
+ margin-right: 8px;
1571
1755
  }
1572
1756
 
1573
- .lexdropdown .lexdropdownitem.selected {
1757
+ .lexselect .lexselectitem.selected {
1574
1758
  font-weight: 700;
1575
1759
  }
1576
1760
 
1577
- .lexdropdown .lexdropdownitem.selected a {
1761
+ .lexselect .lexselectitem.selected a {
1578
1762
  display: block;
1579
1763
  }
1580
1764
 
1581
- .lexdropdown img {
1765
+ .lexselect img {
1582
1766
  max-height: 64px;
1583
1767
  margin-top: 8px;
1584
1768
  }
1585
1769
 
1586
- :root[data-theme="light"] .lexdropdown .lexfilter {
1770
+ :root[data-theme="light"] .lexselect .lexfilter {
1587
1771
  background-color: var(--global-color-primary);
1588
1772
  }
1589
1773
 
1590
- :root[data-theme="light"] .lexdropdown ul {
1774
+ :root[data-theme="light"] .lexselect ul {
1591
1775
  background-color: var(--global-color-primary);
1592
1776
  box-shadow: 0 0px 6px rgba(175, 175, 175, 0.788);
1593
1777
  }
1594
1778
 
1595
- :root[data-theme="light"] .lexdropdown .lexdropdownitem:hover {
1779
+ :root[data-theme="light"] .lexselect .lexselectitem:hover {
1596
1780
  background-color: var(--global-selected-light);
1597
1781
  color: #fff;
1598
1782
  }
@@ -1661,9 +1845,13 @@ body.noevents * {
1661
1845
 
1662
1846
  .lexcheckboxsubmenu {
1663
1847
  width: 100%;
1664
- padding: 6px;
1848
+ padding: 4px;
1849
+ padding-inline: 8px;
1665
1850
  color: var(--global-text-secondary);
1666
- margin-top: -1px;
1851
+ }
1852
+
1853
+ .lexcheckboxsubmenu .lexwidget {
1854
+ width: 100% !important;
1667
1855
  }
1668
1856
 
1669
1857
  /* Toggle Widget */
@@ -1785,12 +1973,12 @@ body.noevents * {
1785
1973
  }
1786
1974
 
1787
1975
  .lextoggle:disabled {
1788
- border: 1px solid var(--global-text-terciary);
1976
+ border: 1px solid var(--global-text-tertiary);
1789
1977
  cursor: not-allowed;
1790
1978
  }
1791
1979
 
1792
1980
  .lextoggle:disabled:before {
1793
- background-color: var(--global-text-terciary);
1981
+ background-color: var(--global-text-tertiary);
1794
1982
  }
1795
1983
 
1796
1984
  .lextogglecont {
@@ -1817,6 +2005,7 @@ body.noevents * {
1817
2005
  width: 100% !important;
1818
2006
  display: flex;
1819
2007
  flex-direction: column;
2008
+ padding: 0.1em;
1820
2009
  }
1821
2010
 
1822
2011
  .lexradiogroup span {
@@ -1825,7 +2014,8 @@ body.noevents * {
1825
2014
 
1826
2015
  .lexradiogroup .lexradiogroupitem {
1827
2016
  display: flex;
1828
- padding: 2px;
2017
+ padding: 0.1em;
2018
+ padding-inline: 1.4em;
1829
2019
  gap: 0.65em;
1830
2020
  }
1831
2021
 
@@ -1936,16 +2126,12 @@ body.noevents * {
1936
2126
  transition: 0.1s linear;
1937
2127
  }
1938
2128
 
1939
- .lexwidget.nobranch .lexvector .vecbox {
1940
- background: var(--global-button-color-hovered);
1941
- }
1942
-
1943
2129
  .lexvector a.fa-lock {
1944
2130
  min-width: 12px;
1945
2131
  }
1946
2132
 
1947
2133
  .lexvector .vecbox:hover {
1948
- background: var(--global-button-color-hovered);
2134
+ background-color: color-mix(in srgb, var(--global-button-color), #000 7%);
1949
2135
  }
1950
2136
 
1951
2137
  .lexwidget.nobranch .lexvector .vecbox:hover {
@@ -2038,7 +2224,7 @@ input[type=number] {
2038
2224
  }
2039
2225
 
2040
2226
  .lexwidget .numberbox:hover {
2041
- background-color: var(--global-button-color-hovered);
2227
+ background-color: color-mix(in srgb, var(--global-button-color), #000 7%);
2042
2228
  }
2043
2229
 
2044
2230
  .lexwidget .numberbox:has(input:focus) {
@@ -2237,7 +2423,7 @@ input[type=number] {
2237
2423
 
2238
2424
  .lexwidget .lexpad .lexinnerpad {
2239
2425
  border-radius: 4px;
2240
- background-color: light-dark(var(--global-color-terciary), var(--global-intense-background));
2426
+ background-color: light-dark(var(--global-color-tertiary), var(--global-intense-background));
2241
2427
  }
2242
2428
 
2243
2429
  .lexwidget .lexpad .lexinnerpad .lexpadthumb {
@@ -2393,7 +2579,10 @@ input[type=number] {
2393
2579
  list-style-type: none;
2394
2580
  align-items: center;
2395
2581
  line-height: 25px;
2396
- display: flex;
2582
+ display: inline-flex;
2583
+ white-space: nowrap;
2584
+ overflow: hidden;
2585
+ text-overflow: ellipsis;
2397
2586
  cursor: pointer;
2398
2587
  outline: none;
2399
2588
  border-radius: 6px;
@@ -2431,7 +2620,7 @@ input[type=number] {
2431
2620
 
2432
2621
  .lextree .lextreeitem:hover {
2433
2622
  color: var(--global-text-primary);
2434
- background: rgba(129, 132, 163, 0.191);
2623
+ background: var(--global-color-tertiary);
2435
2624
  }
2436
2625
 
2437
2626
  .lextree .lextreeitem.selected {
@@ -2480,19 +2669,19 @@ input[type=number] {
2480
2669
  }
2481
2670
 
2482
2671
  .lexfileinput::file-selector-button:hover {
2483
- background-color: var(--global-button-color-hovered);
2672
+ background-color: color-mix(in srgb, var(--global-button-color), #fff 4%);
2484
2673
  color: var(--global-text-primary);
2485
2674
  }
2486
2675
 
2487
- .lexfileinput::file-selector-button:active {
2488
- background-color: var(--global-color-terciary);
2676
+ .lexfileinput::file-selector-button:not(:disabled):active {
2677
+ background-color: var(--global-color-tertiary);
2489
2678
  color: var(--global-text-secondary);
2490
2679
  transform: scale(0.99);
2491
2680
  }
2492
2681
 
2493
2682
  .lexfileinput:disabled::file-selector-button {
2494
- cursor: not-allowed;
2495
- color: var(--global-text-terciary);
2683
+ cursor: default;
2684
+ color: var(--global-text-tertiary);
2496
2685
  }
2497
2686
 
2498
2687
  /* Progress bar */
@@ -2606,6 +2795,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
2606
2795
  width: 100%;
2607
2796
  background-color: var(--global-color-primary);
2608
2797
  display: flex;
2798
+ overflow: hidden;
2609
2799
  height: 100%;
2610
2800
  color: var(--global-text-primary);
2611
2801
  font-size: var(--global-font-size);
@@ -2711,7 +2901,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
2711
2901
  }
2712
2902
 
2713
2903
  .lexmenubox .lexmenuboxentry.disabled {
2714
- color: var(--global-text-terciary);
2904
+ color: var(--global-text-tertiary);
2715
2905
  cursor: default;
2716
2906
  }
2717
2907
 
@@ -2778,7 +2968,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
2778
2968
  width: -moz-calc(100% + 8px);
2779
2969
  width: -webkit-calc(100% + 8px);
2780
2970
  width: calc(100% + 8px);
2781
- border-color: var(--global-text-terciary);
2971
+ border-color: var(--global-text-tertiary);
2782
2972
  opacity: 0.25;
2783
2973
  }
2784
2974
 
@@ -2788,7 +2978,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
2788
2978
  text-align: right;
2789
2979
  float: right;
2790
2980
  align-content: center;
2791
- color: var(--global-text-terciary);
2981
+ color: var(--global-text-tertiary);
2792
2982
  margin-right: 12px;
2793
2983
  }
2794
2984
 
@@ -2828,7 +3018,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
2828
3018
  }
2829
3019
 
2830
3020
  .lexmenubar .lexmenubutton.disabled a {
2831
- color: light-dark(var(--global-color-terciary), var(--global-button-color));
3021
+ color: light-dark(var(--global-color-tertiary), var(--global-button-color));
2832
3022
  cursor: default;
2833
3023
  }
2834
3024
 
@@ -2882,14 +3072,14 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
2882
3072
  }
2883
3073
 
2884
3074
  .lexcontextmenu .lexmenuboxentry.cmtitle {
2885
- background: light-dark(var(--global-color-terciary), var(--global-intense-background));
3075
+ background: light-dark(var(--global-color-tertiary), var(--global-intense-background));
2886
3076
  font-weight: bold;
2887
3077
  cursor: default;
2888
3078
  }
2889
3079
 
2890
3080
  .lexcontextmenu .lexmenuboxentry.cmseparator {
2891
3081
  height: 1px;
2892
- border-bottom: 1px solid var(--global-color-terciary);
3082
+ border-bottom: 1px solid var(--global-color-tertiary);
2893
3083
  padding-bottom: 0;
2894
3084
  padding-top: 0;
2895
3085
  margin-top: -4px;
@@ -2954,13 +3144,8 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
2954
3144
  gap: 0.2rem;
2955
3145
  }
2956
3146
 
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;
3147
+ .lexsidebar *::-webkit-scrollbar {
3148
+ display: none;
2964
3149
  }
2965
3150
 
2966
3151
  .lexsidebar .lexwidget {
@@ -3061,6 +3246,10 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
3061
3246
  background-color: var(--global-color-secondary);
3062
3247
  }
3063
3248
 
3249
+ .lexsidebar .lexsidebarentry.selected {
3250
+ background-color: var(--global-selected);
3251
+ }
3252
+
3064
3253
  .lexsidebar .lexsidebarentry:active {
3065
3254
  transform: scale(0.99);
3066
3255
  }
@@ -3097,6 +3286,11 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
3097
3286
  font-size: var(--global-font-size);
3098
3287
  }
3099
3288
 
3289
+ .lexsidebar .lexcheckbox {
3290
+ width: 1.25em;
3291
+ height: 1.25em;
3292
+ }
3293
+
3100
3294
  .lexsidebar .lexsidebarsubentrycontainer {
3101
3295
  width: calc(100% - 48px);
3102
3296
  margin-block-start: 4px;
@@ -3114,11 +3308,16 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
3114
3308
  border-left: 1px solid #5251514d;
3115
3309
  }
3116
3310
 
3311
+ .lexsidebar .collapsablecontainer {
3312
+ 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);
3313
+ padding-inline: 4px;
3314
+ }
3315
+
3117
3316
  .lexsidebar .lexsidebarsubentrycontainer:not(:has(div)) {
3118
3317
  margin: 0px;
3119
3318
  }
3120
3319
 
3121
- .lexsidebar.collapsing .lexsidebarsubentrycontainer {
3320
+ .lexsidebar.collapsing .collapsablecontainer {
3122
3321
  max-height: 0px;
3123
3322
  transform: translate(-8px, -8px);
3124
3323
  opacity: 0;
@@ -3130,34 +3329,19 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
3130
3329
  gap: 0.8em;
3131
3330
  }
3132
3331
 
3133
- .lexsidebar.collapsed .lexsidebarsubentrycontainer {
3134
- display: none;
3332
+ .lexsidebar.collapsed .collapsablecontainer {
3333
+ display: none !important;
3135
3334
  }
3136
3335
 
3137
3336
  .lexsidebar.collapsed .lexsidebarcontent div a {
3138
3337
  display: none;
3139
3338
  }
3140
3339
 
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
3340
  .lexsidebar .lexsidebarentry .lexsidebarentrydesc {
3156
3341
  position: absolute;
3157
- margin-top: -3px;
3158
3342
  margin-left: 32px;
3159
3343
  font-weight: 600;
3160
- background-color: var(--global-text-secondary);
3344
+ background-color: var(--global-text-primary);
3161
3345
  color: var(--global-color-primary);
3162
3346
  font-size: var(--global-font-size);
3163
3347
  border-radius: 6px;
@@ -3207,7 +3391,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
3207
3391
  background-color: var(--global-intense-background);
3208
3392
  }
3209
3393
 
3210
- .lexsidebar .lexavatar:has(svg) {
3394
+ .lexsidebar:not(.collapsing) .lexavatar:has(svg) {
3211
3395
  border: 1px solid #ffffff18;
3212
3396
  }
3213
3397
 
@@ -3257,10 +3441,10 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
3257
3441
  padding-inline: 0px;
3258
3442
  }
3259
3443
 
3260
- /* .lexsidebar.collapsed .lexsidebarfooter span, .lexsidebar.collapsed .lexsidebarfooter div,
3444
+ .lexsidebar.collapsed .lexsidebarfooter span, .lexsidebar.collapsed .lexsidebarfooter div,
3261
3445
  .lexsidebar.collapsed .lexsidebarheader span, .lexsidebar.collapsed .lexsidebarheader div {
3262
3446
  display: none;
3263
- } */
3447
+ }
3264
3448
 
3265
3449
  /* Overlay Buttons */
3266
3450
 
@@ -3277,17 +3461,16 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
3277
3461
  width: auto !important;
3278
3462
  height: auto !important;
3279
3463
  justify-content: start;
3464
+ gap: 0.35em;
3280
3465
  z-index: 100;
3281
3466
  background-color: var(--global-color-secondary);
3282
3467
  margin: 8px;
3283
3468
  padding: 0.25em;
3284
- padding-bottom: 0.3em;
3285
3469
  border-radius: 12px;
3286
3470
  }
3287
3471
 
3288
3472
  .lexoverlaybuttons .lexwidget {
3289
3473
  padding: 0px;
3290
- margin-right: 6px;
3291
3474
  pointer-events: auto;
3292
3475
  min-width: 32px;
3293
3476
  }
@@ -3382,7 +3565,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
3382
3565
 
3383
3566
  .lexoverlaybuttons .lexbutton:hover {
3384
3567
  color: var(--global-text-primary);
3385
- background: var(--global-button-color-hovered);
3568
+ background-color: color-mix(in srgb, var(--global-button-color), #fff 4%);
3386
3569
  }
3387
3570
 
3388
3571
  .lexoverlaybuttons .lexbutton.selected:hover {
@@ -3396,8 +3579,8 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
3396
3579
 
3397
3580
  .lexoverlaybuttons .lexoverlaygroup {
3398
3581
  display: flex;
3399
- margin-right: 6px;
3400
- background-color: var(--global-color-terciary);
3582
+ flex: none;
3583
+ background-color: var(--global-color-tertiary);
3401
3584
  border-radius: 8px;
3402
3585
  }
3403
3586
 
@@ -3431,10 +3614,6 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
3431
3614
  margin-right: 0px;
3432
3615
  }
3433
3616
 
3434
- .lexoverlaybuttons .lexwidget:last-child {
3435
- margin-right: 0px;
3436
- }
3437
-
3438
3617
  /* Area Tabs */
3439
3618
 
3440
3619
  .lexareatabs {
@@ -3445,7 +3624,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
3445
3624
  }
3446
3625
 
3447
3626
  .lexareatabs.dockingtab {
3448
- background-color: #7cb9f34e;
3627
+ background-color: #9ebbd65e !important;
3449
3628
  }
3450
3629
 
3451
3630
  .lexareatabs .lexareatab {
@@ -3472,7 +3651,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
3472
3651
  }
3473
3652
 
3474
3653
  .lexareatabs.row {
3475
- background-color: light-dark(var(--global-color-terciary), var(--global-button-color));
3654
+ background-color: light-dark(var(--global-color-tertiary), var(--global-button-color));
3476
3655
  border-radius: 8px;
3477
3656
  padding: 3px;
3478
3657
  margin: 6px;
@@ -3538,10 +3717,6 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
3538
3717
  margin: 4px 7px !important;
3539
3718
  }
3540
3719
 
3541
- .lexareatabscontent {
3542
- /* overflow-y: scroll; */
3543
- }
3544
-
3545
3720
  .lexareatabscontent.folded {
3546
3721
  max-height: 0px;
3547
3722
  }
@@ -3559,21 +3734,15 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
3559
3734
  height: 32px;
3560
3735
  border-radius: 8px;
3561
3736
  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%;
3737
+ align-content: center;
3572
3738
  }
3573
3739
 
3574
3740
  .lexavatar * {
3575
3741
  border-radius: 8px;
3576
- width: 60%;
3742
+ }
3743
+
3744
+ .lexavatar img {
3745
+ width: 100%;
3577
3746
  height: 100%;
3578
3747
  }
3579
3748
 
@@ -3589,7 +3758,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
3589
3758
  height: 128px;
3590
3759
  object-fit: cover;
3591
3760
  border-radius: 6px;
3592
- outline: 3px solid var(--global-text-terciary);
3761
+ outline: 3px solid var(--global-text-tertiary);
3593
3762
  }
3594
3763
 
3595
3764
  .lexcard:hover a {
@@ -3702,8 +3871,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
3702
3871
  }
3703
3872
 
3704
3873
  .lexlistitem:hover {
3705
- background-color: var(--global-color-secondary);
3706
- color: var(--global-text-primary);
3874
+ background-color: var(--global-color-tertiary);
3707
3875
  }
3708
3876
 
3709
3877
  .lexlistitem:active {
@@ -3721,7 +3889,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
3721
3889
  .lexwidget:has(.lexcheckboxsubmenu),
3722
3890
  .lexwidget:has(.lextogglesubmenu),
3723
3891
  .lexwidget:has(.lexcustomcontainer) {
3724
- background-color: light-dark(var(--global-color-terciary), var(--global-medium-background));
3892
+ background-color: light-dark(var(--global-color-tertiary), var(--global-medium-background));
3725
3893
  border-radius: 6px;
3726
3894
  }
3727
3895
 
@@ -3752,7 +3920,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
3752
3920
  display: inline-flex;
3753
3921
  flex-wrap: wrap;
3754
3922
  line-height: 12px;
3755
- background-color: light-dark(var(--global-color-terciary), var(--global-button-color));
3923
+ background-color: light-dark(var(--global-color-tertiary), var(--global-button-color));
3756
3924
  border-radius: 8px;
3757
3925
  padding: 4px;
3758
3926
  }
@@ -3779,7 +3947,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
3779
3947
  }
3780
3948
 
3781
3949
  .lextags .lextag a:hover {
3782
- color: light-dark(var(--global-text-terciary), var(--global-text-secondary));
3950
+ color: light-dark(var(--global-text-tertiary), var(--global-text-secondary));
3783
3951
  cursor: pointer;
3784
3952
  }
3785
3953
 
@@ -3807,6 +3975,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
3807
3975
  .lexcounterbox .lexcounterlabel {
3808
3976
  width: 100%;
3809
3977
  margin-top: -18px;
3978
+ font-size: var(--global-font-size-sm);
3810
3979
  color: var(--global-text-secondary);
3811
3980
  }
3812
3981
 
@@ -3814,17 +3983,24 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
3814
3983
 
3815
3984
  .lextable table {
3816
3985
  width: 100%;
3817
- border: 2px solid;
3818
- border-color: light-dark(#dbd8d8c0, #5c5b5b7a);
3986
+ border: 1px solid;
3987
+ border-color: light-dark(#dbd8d8c0, var(--global-button-color));
3819
3988
  border-collapse: separate;
3820
- /* border-left: 0; */
3821
3989
  border-radius: 8px;
3822
3990
  border-spacing: 0px;
3823
3991
  overflow: hidden;
3824
- background-color: var(--global-button-color);
3992
+ background-color: var(--global-color-primary);
3825
3993
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
3826
3994
  }
3827
3995
 
3996
+ .lextable svg, .lextable svg path {
3997
+ --color: var(--global-text-tertiary);
3998
+ }
3999
+
4000
+ .lextable svg.success, .lextable svg.success path {
4001
+ --color: #42d065 !important;
4002
+ }
4003
+
3828
4004
  thead {
3829
4005
  display: table-header-group;
3830
4006
  border-color: inherit;
@@ -3835,28 +4011,40 @@ tr {
3835
4011
  display: table-row;
3836
4012
  vertical-align: inherit;
3837
4013
  border-color: inherit;
4014
+ transition: transform 0.2s ease-in;
4015
+ }
4016
+
4017
+ tr:has(input:checked) {
4018
+ background-color: var(--global-color-tertiary);
4019
+ }
4020
+
4021
+ tr:hover, tr.dragging {
4022
+ background-color: var(--global-color-secondary);
4023
+ }
4024
+
4025
+ tr.dragging {
4026
+ transition: none !important;
4027
+ pointer-events: none;
3838
4028
  }
3839
4029
 
3840
4030
  th {
3841
- --th-color: light-dark(var(--global-text-quaternary), var(--global-text-primary));
4031
+ --th-color: var(--global-text-secondary);
3842
4032
  color: var(--th-color);
3843
- font-size: calc(var(--global-font-size) + 1px) !important;
4033
+ font-size: var(--global-font-size);
3844
4034
  cursor: pointer;
3845
4035
  transition: all 0.1s linear;
3846
- background-color: color-mix(in srgb, var(--global-button-color), #000 10%);
4036
+ background-color: var(--global-color-tertiary);
3847
4037
  -webkit-user-select: none;
3848
4038
  -moz-user-select: none;
3849
4039
  -ms-user-select: none;
3850
4040
  user-select: none;
3851
4041
  }
3852
4042
 
3853
- tr:hover {
3854
- background-color: color-mix(in srgb, var(--global-button-color), #000 7%);
3855
- }
3856
-
3857
- th a {
3858
- margin-left: 4px;
4043
+ th a, td a {
3859
4044
  font-size: var(--global-font-size-xs) !important;
4045
+ display: flex;
4046
+ margin-left: 0px !important;
4047
+ place-self: center;
3860
4048
  }
3861
4049
 
3862
4050
  th a:active {
@@ -3872,7 +4060,6 @@ th, td {
3872
4060
  padding-inline: 12px;
3873
4061
  text-align: left;
3874
4062
  vertical-align: top;
3875
- /* border-left: 2px solid red; */
3876
4063
  }
3877
4064
 
3878
4065
  th.sm, td.sm {
@@ -3881,9 +4068,12 @@ th.sm, td.sm {
3881
4068
 
3882
4069
  th .lexcheckbox, td .lexcheckbox {
3883
4070
  margin-top: 3px;
4071
+ width: 1.25em;
4072
+ height: 1.25em;
3884
4073
  }
3885
4074
 
3886
4075
  td {
4076
+ align-content: center;
3887
4077
  border-top: 2px solid;
3888
4078
  border-color: light-dark(#dbd8d8c0, #5c5b5b7a);
3889
4079
  }
@@ -3898,7 +4088,11 @@ thead:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td
3898
4088
 
3899
4089
  .lextable .lextablebuttons {
3900
4090
  display: inline-flex;
3901
- gap: 8px;
4091
+ gap: 0.8rem;
4092
+ }
4093
+
4094
+ .lextable .lextablebuttons .lexicon {
4095
+ font-size: var(--global-font-size-sm) !important;
3902
4096
  }
3903
4097
 
3904
4098
  :root[data-theme="light"] .lextable table {
@@ -4025,11 +4219,11 @@ thead:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td
4025
4219
  }
4026
4220
 
4027
4221
  .lexknob.disabled .knobmarker {
4028
- background-color: var(--global-text-terciary);
4222
+ background-color: var(--global-text-tertiary);
4029
4223
  }
4030
4224
 
4031
4225
  .lexknob.disabled .knobmarker {
4032
- background-color: var(--global-text-terciary);
4226
+ background-color: var(--global-text-tertiary);
4033
4227
  }
4034
4228
 
4035
4229
  .lexknob.sm .knobmarker {
@@ -4191,7 +4385,7 @@ thead:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td
4191
4385
  }
4192
4386
 
4193
4387
  .lextimeline .lexbutton.accept:hover {
4194
- background-color: var(--global-button-color-hovered);
4388
+ background-color: color-mix(in srgb, var(--global-button-color), #000 7%);
4195
4389
  }
4196
4390
 
4197
4391
  /**/
@@ -4679,7 +4873,7 @@ ul.lexassetscontent {
4679
4873
  }
4680
4874
 
4681
4875
  .lexcodetabinfo {
4682
- background-color: light-dark(var(--global-color-terciary), var(--global-medium-background));
4876
+ background-color: light-dark(var(--global-color-tertiary), var(--global-medium-background));
4683
4877
  position: absolute;
4684
4878
  z-index: 3;
4685
4879
  bottom: 0px;
@@ -4689,7 +4883,7 @@ ul.lexassetscontent {
4689
4883
  .lexcodegutter {
4690
4884
  width: 48px;
4691
4885
  height: calc(100% - 65px);
4692
- background-color: light-dark(var(--global-color-terciary), var(--global-medium-background));
4886
+ background-color: light-dark(var(--global-color-tertiary), var(--global-medium-background));
4693
4887
  margin-top: 28px;
4694
4888
  overflow: hidden;
4695
4889
  position: absolute;
@@ -4698,7 +4892,7 @@ ul.lexassetscontent {
4698
4892
 
4699
4893
  .lexcodeeditor .codetabsarea {
4700
4894
  height: calc(100% - 64px) !important;
4701
- background-color: light-dark(var(--global-color-terciary), var(--global-medium-background));
4895
+ background-color: light-dark(var(--global-color-tertiary), var(--global-medium-background));
4702
4896
  overflow: scroll;
4703
4897
  }
4704
4898
 
@@ -4799,7 +4993,7 @@ ul.lexassetscontent {
4799
4993
  }
4800
4994
 
4801
4995
  .lexcodeeditor pre .line-gutter {
4802
- color: var(--global-text-terciary);
4996
+ color: var(--global-text-tertiary);
4803
4997
  width: 48px;
4804
4998
  height: var(--code-editor-row-height);
4805
4999
  font-size: var(--code-editor-font-size);
@@ -4997,7 +5191,7 @@ ul.lexassetscontent {
4997
5191
  }
4998
5192
 
4999
5193
  .lexcodeeditor .autocomplete pre:hover {
5000
- background-color: var(--global-color-terciary);
5194
+ background-color: var(--global-color-tertiary);
5001
5195
  cursor: pointer;
5002
5196
  }
5003
5197
 
@@ -5206,7 +5400,7 @@ ul.lexassetscontent {
5206
5400
  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
5401
  }
5208
5402
 
5209
- .lexgraph .lexdropdown ul {
5403
+ .lexgraph .lexselect ul {
5210
5404
  max-height: unset;
5211
5405
  }
5212
5406
 
@@ -5247,6 +5441,7 @@ ul.lexassetscontent {
5247
5441
  left: 0;
5248
5442
  bottom: 0;
5249
5443
  right: 0;
5444
+ stroke: unset;
5250
5445
  }
5251
5446
 
5252
5447
  .lexgraph .box-selection-svg {