lexgui 0.2.0 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/build/lexgui.css CHANGED
@@ -1,5 +1,4 @@
1
1
  @import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@700&display=swap');
2
- @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
3
2
 
4
3
  @font-face {
5
4
  font-family: "GoogleSans";
@@ -12,13 +11,18 @@
12
11
 
13
12
  --global-font: "GoogleSans", sans-serif;
14
13
  --global-title-font: "GoogleSans", sans-serif;
15
- --global-font-size: 13px;
16
- --global-font-size-big: 15px;
17
- --global-color-primary: light-dark(#f9f9f9, #141414);
18
- --global-color-secondary: light-dark(#ececec, #252525);
19
- --global-color-terciary: light-dark(#e0e0e0, #3a3a3a);
20
- --global-color-quaternary: light-dark(#c8c8c8, #494949);
21
- --global-color-quinary: light-dark(#b0b0b0, #5c5c5c);
14
+ --global-font-size-xs: 0.625rem; /* 10px */
15
+ --global-font-size-sm: 0.75rem; /* 12px */
16
+ --global-font-size: 0.875rem; /* 14px */
17
+ --global-font-size-lg: 1rem; /* 16px */
18
+ --global-font-size-xl: 1.125rem; /* 18px */
19
+ --global-font-size-xxl: 1.375rem; /* 22px */
20
+
21
+ --global-color-primary: light-dark(#f3f3f3, #141414);
22
+ --global-color-secondary: light-dark(#e4e4e4, #252525);
23
+ --global-color-terciary: light-dark(#dcdcde, #3a3a3a);
24
+ --global-color-quaternary: light-dark(#c6c6c6, #494949);
25
+ --global-color-quinary: light-dark(#b5b5b5, #5c5c5c);
22
26
  --global-selected: #2d69da;
23
27
  --global-selected-light: #0d99ff;
24
28
  --global-selected-dark: #304b86;
@@ -27,41 +31,128 @@
27
31
  --global-color-error: #f54c4c;
28
32
  --global-button-color: light-dark(#f9f9f9, #3e3e3e);
29
33
  --global-button-color-hovered: light-dark(#ececec, #444);
30
- --global-text-primary: light-dark(#202124, #f4f4ffe6);
31
- --global-text-secondary: light-dark(#353636, #bfbfc0ea);
32
- --global-text-terciary: light-dark(#5a5a5af5, #929292d8);
33
- --global-text-quaternary: light-dark(#6b6a6af5, #585757e1);
34
+ --global-text-primary: light-dark(#202124, #efeff1);
35
+ --global-text-secondary: light-dark(#353636, #c8c8ca);
36
+ --global-text-terciary: light-dark(#5a5a5af5, #929292);
37
+ --global-text-quaternary: light-dark(#6b6a6af5, #777777);
34
38
  --global-intense-background: light-dark(#fefefe, #121212);
35
39
  --global-medium-background: #252525;
36
40
  --global-blur-background: light-dark(#f7f7f7d8, #1f1f1fe7);
37
41
  --global-color-transparent: #7b8ae200;
38
- --transition-time: 1000;
39
42
  --code-editor-font-size: 14px;
40
43
  --code-editor-row-height: 20px;
41
44
  --graphnode-background: 17, 17, 17;
42
45
  }
43
46
 
44
- :root[data-theme="light"] {
45
- color-scheme: light;
47
+ :root[data-theme="light"] { color-scheme: light }
48
+
49
+ /* Font Size media queries */
50
+
51
+ /* Large Desktops (1440px+) */
52
+ @media screen and (max-width: 1440px) {
53
+ :root {
54
+ --global-font-size-xs: 0.5625rem; /* 9px */
55
+ --global-font-size-sm: 0.6875rem; /* 11px */
56
+ --global-font-size: 0.8125rem; /* 13px */
57
+ --global-font-size-lg: 0.9375rem; /* 15px */
58
+ --global-font-size-xl: 1.0625rem; /* 17px */
59
+ --global-font-size-xxl: 1.3125rem; /* 21px */
60
+ }
46
61
  }
47
62
 
48
- /* Some global colors */
49
- .orange {
50
- color: orange
63
+ /* Small Desktops & Large Tablets (1200px - 1439px) */
64
+ @media screen and (max-width: 1200px) {
65
+ :root {
66
+ --global-font-size-xs: 0.5625rem; /* 9px */
67
+ --global-font-size-sm: 0.6875rem; /* 11px */
68
+ --global-font-size: 0.75rem; /* 12px */
69
+ --global-font-size-lg: 0.875rem; /* 14px */
70
+ --global-font-size-xl: 1rem; /* 16px */
71
+ --global-font-size-xxl: 1.25rem; /* 20px */
72
+ }
73
+ }
74
+
75
+ /* Tablets & Small Laptops (992px - 1199px) */
76
+ @media screen and (max-width: 992px) {
77
+ :root {
78
+ --global-font-size-xs: 0.5rem; /* 8px */
79
+ --global-font-size-sm: 0.625rem; /* 10px */
80
+ --global-font-size: 0.6875rem; /* 11px */
81
+ --global-font-size-lg: 0.8125rem; /* 13px */
82
+ --global-font-size-xl: 0.9375rem; /* 15px */
83
+ --global-font-size-xxl: 1.1875rem; /* 19px */
84
+ }
85
+ }
86
+
87
+ /* Large Phones & Small Tablets (768px - 991px) */
88
+ @media screen and (max-width: 768px) {
89
+ :root {
90
+ --global-font-size-xs: 0.4375rem; /* 7px */
91
+ --global-font-size-sm: 0.5625rem; /* 9px */
92
+ --global-font-size: 0.625rem; /* 10px */
93
+ --global-font-size-lg: 0.75rem; /* 12px */
94
+ --global-font-size-xl: 0.875rem; /* 14px */
95
+ --global-font-size-xxl: 1.125rem; /* 18px */
96
+ }
97
+ }
98
+
99
+ /* Small Phones (576px - 767px) */
100
+ @media screen and (max-width: 576px) {
101
+ :root {
102
+ --global-font-size-xs: 0.375rem; /* 6px */
103
+ --global-font-size-sm: 0.5rem; /* 8px */
104
+ --global-font-size: 0.5625rem; /* 9px */
105
+ --global-font-size-lg: 0.6875rem; /* 11px */
106
+ --global-font-size-xl: 0.8125rem; /* 13px */
107
+ --global-font-size-xxl: 1rem; /* 16px */
108
+ }
51
109
  }
52
110
 
53
- .gray {
54
- color: gray
111
+ /* Extra Small Phones (< 375px) */
112
+ @media screen and (max-width: 375px) {
113
+ :root {
114
+ --global-font-size-xs: 0.3125rem; /* 5px */
115
+ --global-font-size-sm: 0.4375rem; /* 7px */
116
+ --global-font-size: 0.5rem; /* 8px */
117
+ --global-font-size-lg: 0.625rem; /* 10px */
118
+ --global-font-size-xl: 0.75rem; /* 12px */
119
+ --global-font-size-xxl: 0.9375rem; /* 15px */
120
+ }
55
121
  }
56
122
 
57
- .dodgerblue {
58
- color: dodgerblue
123
+ /* Retina & HiDPI Displays (2x) */
124
+ @media screen and (min-resolution: 2dppx),
125
+ screen and (-webkit-min-device-pixel-ratio: 2) {
126
+ :root {
127
+ --global-font-size-xs: 0.625rem; /* 10px */
128
+ --global-font-size-sm: 0.75rem; /* 12px */
129
+ --global-font-size: 0.875rem; /* 14px */
130
+ --global-font-size-lg: 1rem; /* 16px */
131
+ --global-font-size-xl: 1.125rem; /* 18px */
132
+ --global-font-size-xxl: 1.375rem; /* 22px */
133
+ }
59
134
  }
60
135
 
61
- .lightblue {
62
- color: rgb(90, 168, 247)
136
+ /* Ultra Retina & 4K Screens (3x and above) */
137
+ @media screen and (min-resolution: 3dppx),
138
+ screen and (-webkit-min-device-pixel-ratio: 3) {
139
+ :root {
140
+ --global-font-size-xs: 0.6875rem; /* 11px */
141
+ --global-font-size-sm: 0.8125rem; /* 13px */
142
+ --global-font-size: 0.9375rem; /* 15px */
143
+ --global-font-size-lg: 1.0625rem; /* 17px */
144
+ --global-font-size-xl: 1.25rem; /* 20px */
145
+ --global-font-size-xxl: 1.5rem; /* 24px */
146
+ }
63
147
  }
64
148
 
149
+ /* Some global colors */
150
+
151
+ .orange { color: orange }
152
+ .gray { color: gray }
153
+ .dodgerblue { color: dodgerblue }
154
+ .lightblue { color: #5aa8f7 }
155
+
65
156
  ::-webkit-scrollbar {
66
157
  height: 3px;
67
158
  width: 4px;
@@ -109,6 +200,20 @@ canvas {
109
200
  border-radius: 6px;
110
201
  }
111
202
 
203
+ .collapsible {
204
+ display: flex;
205
+ }
206
+
207
+ .collapsible a.collapser {
208
+ --rotation: 90deg;
209
+ transform: rotate(var(--rotation, 0deg));
210
+ transition: transform 0.2s ease-out;
211
+ }
212
+
213
+ .collapsible a.collapser[data-collapsed] {
214
+ --rotation: 0deg;
215
+ }
216
+
112
217
  dialog {
113
218
  transition: display 0.1s allow-discrete, overlay 0.1s allow-discrete;
114
219
  animation: dialogHide 0.1s forwards;
@@ -118,7 +223,7 @@ dialog {
118
223
  }
119
224
 
120
225
  dialog::backdrop {
121
- background-color: #0000008c;
226
+ background-color: #000000ab;
122
227
  position: absolute;
123
228
  opacity: 1;
124
229
  transition: opacity 0.2s ease-in;
@@ -172,6 +277,11 @@ body.noevents * {
172
277
  display: none !important;
173
278
  }
174
279
 
280
+ .sticky {
281
+ position: sticky;
282
+ top: 0;
283
+ }
284
+
175
285
  .hiddenOpacity {
176
286
  opacity: 0 !important;
177
287
  pointer-events: none;
@@ -226,7 +336,117 @@ body.noevents * {
226
336
 
227
337
  .lexicon:active {
228
338
  color: var(--global-text-secondary);
229
- margin-top: 0.01em;
339
+ }
340
+
341
+ .lexicon:hover svg, .lexicon:hover svg path {
342
+ --color: var(--global-text-primary) !important;
343
+ }
344
+
345
+ /* Notifications */
346
+
347
+ .notifications ol {
348
+ width: unset;
349
+ min-width: fit-content;
350
+ max-width: 480px;
351
+ max-height: 100vh;
352
+ position: fixed;
353
+ margin: 0;
354
+ right: 1rem;
355
+ bottom: 1rem;
356
+ top: auto;
357
+ pointer-events: none;
358
+ display: flex;
359
+ flex-direction: column-reverse;
360
+ gap: 0.15em;
361
+ z-index: 100;
362
+ }
363
+
364
+ .notifications ol.list {
365
+ pointer-events: auto;
366
+ }
367
+
368
+ .lextoast {
369
+ display: flex;
370
+ flex-direction: row;
371
+ position: relative;
372
+ width: calc(100% - 1.6rem);
373
+ background-color: var(--global-intense-background);
374
+ border: 1px solid var(--global-color-terciary);
375
+ box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
376
+ overflow: hidden;
377
+ -webkit-user-select: none;
378
+ -moz-user-select: none;
379
+ -ms-user-select: none;
380
+ user-select: none;
381
+ touch-action: none;
382
+ overflow: hidden;
383
+ pointer-events: auto;
384
+ padding: 0.8rem;
385
+ border-radius: 8px;
386
+ z-index: 3000;
387
+ transition: all 0.5s cubic-bezier(.42,.97,.52,1.19);
388
+ --element-offset: 8px;
389
+ --stack-offset: calc(100% - var(--element-offset));
390
+ }
391
+
392
+ .lextoast[data-open] {
393
+ translate: 0 0 !important;
394
+ }
395
+
396
+ .lextoast[data-closed] {
397
+ translate: calc(100% + 30px) 0 !important;
398
+ }
399
+
400
+ .lextoast .lextoastcontent {
401
+ display: grid;
402
+ gap: 0.25rem;
403
+ height: fit-content;
404
+ margin: auto 0;
405
+ }
406
+
407
+ .lextoast .lextoastcontent .title {
408
+ font-size: var(--global-font-size-lg);
409
+ color: var(--global-text-primary);
410
+ }
411
+
412
+ .lextoast .lextoastcontent .desc {
413
+ font-size: var(--global-font-size-sm);
414
+ color: var(--global-text-secondary);
415
+ }
416
+
417
+ .lextoast .lexwidget {
418
+ padding-inline: 16px;
419
+ }
420
+
421
+ .lextoast .closer {
422
+ position: absolute;
423
+ top: 10px;
424
+ right: 10px;
425
+ font-size: var(--global-font-size-sm);
426
+ }
427
+
428
+ .lextoast:first-child {
429
+ z-index: 3000;
430
+ transform: translateY(0px) scale(1);
431
+ }
432
+ .lextoast:nth-child(2) {
433
+ z-index: 2999;
434
+ opacity: 0.9;
435
+ transform: translateY(var(--stack-offset)) scale(0.95);
436
+ }
437
+ .lextoast:nth-child(3) {
438
+ z-index: 2998;
439
+ opacity: 0.8;
440
+ transform: translateY(calc(var(--stack-offset) * 2)) scale(0.9);
441
+ }
442
+ .lextoast:nth-child(n+4) {
443
+ opacity: 0;
444
+ transform: translateY(calc(var(--stack-offset) * 3)) scale(0.9);
445
+ }
446
+
447
+ .notifications ol.list .lextoast {
448
+ transform: translateY(0px) scale(1);
449
+ opacity: 1;
230
450
  }
231
451
 
232
452
  /* Commandbar */
@@ -269,7 +489,7 @@ body.noevents * {
269
489
  background-color: var(--global-color-terciary);
270
490
  border-top-left-radius: 6px;
271
491
  border-bottom-left-radius: 6px;
272
- font-size: 12px;
492
+ font-size: var(--global-font-size-sm);
273
493
  }
274
494
 
275
495
  .commandbar input {
@@ -283,8 +503,8 @@ body.noevents * {
283
503
  outline: none;
284
504
  border: none;
285
505
  font-family: var(--global-font);
506
+ font-size: var(--global-font-size);
286
507
  line-height: 23px;
287
- font-size: 14px;
288
508
  font-weight: 600;
289
509
  }
290
510
 
@@ -321,8 +541,8 @@ body.noevents * {
321
541
 
322
542
  .commandbar .searchitembox .searchitem i {
323
543
  width: 12px;
324
- font-size: 11px;
325
- margin-right: 4px;
544
+ font-size: var(--global-font-size-sm);
545
+ margin-right: 8px;
326
546
  margin-top: -2px;
327
547
  vertical-align: middle;
328
548
  }
@@ -356,7 +576,7 @@ body.noevents * {
356
576
  background-color: var(--global-color-primary);
357
577
  padding: 15px;
358
578
  width: 100%;
359
- font-size: .875rem;
579
+ font-size: var(--global-font-size);
360
580
  line-height: 1.25rem;
361
581
  }
362
582
 
@@ -383,7 +603,7 @@ body.noevents * {
383
603
 
384
604
  .lexfooter ul li {
385
605
  margin-bottom: 8px;
386
- font-size: 14px;
606
+ font-size: var(--global-font-size-lg);
387
607
  }
388
608
 
389
609
  .lexfooter a {
@@ -437,7 +657,7 @@ body.noevents * {
437
657
  }
438
658
 
439
659
  .lexfooter .social a a {
440
- font-size: 24px;
660
+ font-size: var(--global-font-size-xxl);
441
661
  }
442
662
 
443
663
  .lexfooter a:hover {
@@ -457,7 +677,7 @@ body.noevents * {
457
677
 
458
678
  .lexdialog {
459
679
  outline: none;
460
- border: none;
680
+ border: 1px solid #aaaaaa48;
461
681
  background: none;
462
682
  margin: 0;
463
683
  padding: 0;
@@ -465,7 +685,7 @@ body.noevents * {
465
685
  min-width: 256px;
466
686
  min-height: max-content;
467
687
  overflow: hidden;
468
- box-shadow: 0 2px 8px #101010;
688
+ box-shadow: 0 2px 6px #101010bb;
469
689
  border-radius: 8px;
470
690
  z-index: 101;
471
691
  background-color: var(--global-color-secondary);
@@ -475,7 +695,7 @@ body.noevents * {
475
695
  outline: none;
476
696
  font-family: var(--global-title-font);
477
697
  font-weight: 600;
478
- font-size: 18px;
698
+ font-size: var(--global-font-size-xl);
479
699
  color: var(--global-text-secondary);
480
700
  text-shadow: 0px 1px 6px #22222283;
481
701
  width: calc(100% - 24px);
@@ -496,7 +716,7 @@ body.noevents * {
496
716
  padding: 15px;
497
717
  word-break: break-all;
498
718
  color: var(--global-text-primary);
499
- font-size: 14px;
719
+ font-size: var(--global-font-size);
500
720
  border-bottom-left-radius: 8px;
501
721
  border-bottom-right-radius: 8px;
502
722
  margin-left: 0px !important;
@@ -505,11 +725,11 @@ body.noevents * {
505
725
  .lexdialogcontent.notitle {
506
726
  border-top-left-radius: 8px;
507
727
  border-top-right-radius: 8px;
508
- padding-top: 36px;
728
+ padding-top: 24px;
509
729
  }
510
730
 
511
731
  .lexdialogcloser {
512
- font-size: 16px;
732
+ font-size: var(--global-font-size-lg);
513
733
  color: var(--global-text-secondary);
514
734
  cursor: pointer;
515
735
  margin-right: 0.4em;
@@ -530,11 +750,16 @@ body.noevents * {
530
750
  }
531
751
 
532
752
  .lexdialogcloser:active {
533
- margin-top: 0.1em;
753
+ transform: scale(0.99);
534
754
  }
535
755
 
536
756
  .lexdialogcloser.notitle:active {
537
- margin-top: 0.05em;
757
+ transform: scale(0.99);
758
+ }
759
+
760
+ .lexdialog.prompt textarea {
761
+ color: var(--global-text-secondary);
762
+ font-weight: normal;
538
763
  }
539
764
 
540
765
  /* Pocket Dialog */
@@ -549,7 +774,7 @@ body.noevents * {
549
774
 
550
775
  .lexdialog.pocket .lexdialogtitle {
551
776
  width: calc(100% - 28px);
552
- font-size: 14px;
777
+ font-size: var(--global-font-size-lg);
553
778
  background: var(--global-intense-background);
554
779
  }
555
780
 
@@ -612,7 +837,7 @@ body.noevents * {
612
837
  }
613
838
 
614
839
  .lexdialogtitle {
615
- text-shadow: 0px 2px 4px #8e8f9483;
840
+ text-shadow: 0px 2px 2px #8d8d8d34;
616
841
  }
617
842
 
618
843
  .lexpopup {
@@ -700,7 +925,7 @@ body.noevents * {
700
925
  .lexbranchtitle {
701
926
  font-family: var(--global-title-font);
702
927
  font-weight: 600;
703
- font-size: 15px;
928
+ font-size: var(--global-font-size-lg);
704
929
  color: var(--global-text-primary);
705
930
  background-color: var(--global-color-secondary);
706
931
  text-shadow: 0px 1px 6px #5554547c;
@@ -770,7 +995,7 @@ body.noevents * {
770
995
 
771
996
  .lexbranch .switch-branch-button {
772
997
  float: right;
773
- font-size: 11px;
998
+ font-size: var(--global-font-size-sm);
774
999
  margin: 8px 6px -4px 2px;
775
1000
  transition: 0.1s;
776
1001
  }
@@ -783,7 +1008,7 @@ body.noevents * {
783
1008
  .lexbranchtitle {
784
1009
  color: var(--global-text-secondary);
785
1010
  background-color: var(--global-color-secondary);
786
- text-shadow: 0px 1px 6px #afafaf7c;
1011
+ text-shadow: 0px 2px 2px #e0e0e03a;
787
1012
  }
788
1013
 
789
1014
  .lexbranch.closed .lexbranchtitle {
@@ -887,7 +1112,7 @@ body.noevents * {
887
1112
  color: var(--global-text-secondary);
888
1113
  }
889
1114
 
890
- .lexwidget input:not(.lexcheckbox, .lextoggle) {
1115
+ .lexwidget input:not(.lexcheckbox, .lextoggle, .lexrangeslider) {
891
1116
  font-family: var(--global-font);
892
1117
  background: none;
893
1118
  padding: 3px;
@@ -947,9 +1172,9 @@ body.noevents * {
947
1172
 
948
1173
  .lexwidget .inputicon {
949
1174
  padding: 6px;
950
- font-size: 10px;
951
- margin-top: 2px;
952
- margin-left: 2px;
1175
+ font-size: var(--global-font-size-sm);
1176
+ align-self: center;
1177
+ text-align: center;
953
1178
  }
954
1179
 
955
1180
  .lexwidget textarea {
@@ -1013,8 +1238,8 @@ body.noevents * {
1013
1238
  width: fit-content;
1014
1239
  width: -moz-fit-content;
1015
1240
  color: var(--global-text-secondary);
1016
- font-weight: 800;
1017
- font-size: 14px;
1241
+ font-weight: 600;
1242
+ font-size: var(--global-font-size);
1018
1243
  margin: 12px;
1019
1244
  padding: 2px;
1020
1245
  padding-left: 12px;
@@ -1040,7 +1265,7 @@ body.noevents * {
1040
1265
  margin-top: 0.3em;
1041
1266
  margin-right: 0.7em;
1042
1267
  color: var(--global-selected-light);
1043
- font-size: 11px;
1268
+ font-size: var(--global-font-size-sm);
1044
1269
  }
1045
1270
 
1046
1271
  .lextitle.link {
@@ -1080,7 +1305,7 @@ body.noevents * {
1080
1305
  :root[data-theme="light"] {
1081
1306
  .lexbutton {
1082
1307
  --button-color: var(--global-button-color);
1083
- border: 1px solid var(--global-color-terciary) !important;
1308
+ border: 1px solid var(--global-color-terciary);
1084
1309
  }
1085
1310
 
1086
1311
  .lexbutton.selected {
@@ -1106,12 +1331,14 @@ body.noevents * {
1106
1331
  padding-inline: 12px;
1107
1332
  }
1108
1333
 
1334
+ .lexbutton span {
1335
+ align-items: center;
1336
+ }
1337
+
1109
1338
  .lexbutton span:has(.lexbadge) {
1110
1339
  display: inline-flex;
1111
1340
  flex-wrap: nowrap;
1112
- flex-shrink: 0;
1113
1341
  justify-content: center;
1114
- align-items: center;
1115
1342
  gap: 0.4rem;
1116
1343
  }
1117
1344
 
@@ -1126,7 +1353,7 @@ body.noevents * {
1126
1353
 
1127
1354
  .lexbutton a {
1128
1355
  margin-left: 0px;
1129
- font-size: 10px;
1356
+ font-size: var(--global-font-size-sm);
1130
1357
  }
1131
1358
 
1132
1359
  .lexbutton.array span {
@@ -1212,7 +1439,7 @@ body.noevents * {
1212
1439
  }
1213
1440
 
1214
1441
  .lexcombobuttons .lexbutton.combo a {
1215
- font-size: 11px;
1442
+ font-size: var(--global-font-size-sm);
1216
1443
  }
1217
1444
 
1218
1445
  /* Dropdown (Combo) */
@@ -1236,12 +1463,12 @@ body.noevents * {
1236
1463
  }
1237
1464
 
1238
1465
  .lexdropdown .lexfilter a {
1239
- font-size: 10px;
1466
+ font-size: var(--global-font-size-sm);
1240
1467
  padding-inline: 4px;
1241
1468
  }
1242
1469
 
1243
1470
  .lexdropdown ul .lexlistitem {
1244
- font-size: 11px;
1471
+ font-size: var(--global-font-size-sm);
1245
1472
  }
1246
1473
 
1247
1474
  .lexdropdown .option {
@@ -1375,16 +1602,15 @@ body.noevents * {
1375
1602
  position: relative;
1376
1603
  width: 1.5em;
1377
1604
  height: 1.5em;
1378
- padding: 0.15rem;
1605
+ padding: 0.12rem;
1379
1606
  display: inline-block;
1380
1607
  background-color: var(--global-color-primary);
1381
1608
  color: #fff;
1382
1609
  border-width: 1px;
1383
1610
  border-style: solid;
1384
1611
  border-color: color-mix(in srgb, var(--checkbox-color) 50%, transparent);
1385
- vertical-align: -3px;
1386
1612
  border-radius: 4px;
1387
- margin: 0 4px;
1613
+ margin: auto 4px;
1388
1614
  text-align: center;
1389
1615
  -webkit-appearance: none;
1390
1616
  -moz-appearance: none;
@@ -1406,7 +1632,6 @@ body.noevents * {
1406
1632
  width: 100%;
1407
1633
  height: 100%;
1408
1634
  background-color: currentColor;
1409
- font-size: 1rem;
1410
1635
  line-height: .75;
1411
1636
  transition: clip-path .3s .1s,opacity .1s .1s,rotate .3s .1s,translate .3s .1s;
1412
1637
  display: block;
@@ -1586,6 +1811,65 @@ body.noevents * {
1586
1811
  margin-top: -1px;
1587
1812
  }
1588
1813
 
1814
+ /* Toggle Widget */
1815
+
1816
+ .lexradiogroup {
1817
+ width: 100% !important;
1818
+ display: flex;
1819
+ flex-direction: column;
1820
+ }
1821
+
1822
+ .lexradiogroup span {
1823
+ font-weight: 600;
1824
+ }
1825
+
1826
+ .lexradiogroup .lexradiogroupitem {
1827
+ display: flex;
1828
+ padding: 2px;
1829
+ gap: 0.65em;
1830
+ }
1831
+
1832
+ .lexradiogroup .lexradiogroupitem span {
1833
+ font-weight: unset;
1834
+ }
1835
+
1836
+ .lexradiogroup .lexradiogroupitem button {
1837
+ width: 14px;
1838
+ height: 14px;
1839
+ min-width: 14px !important;
1840
+ min-height: 14px !important;
1841
+ padding: 0;
1842
+ margin: auto 0;
1843
+ border-radius: 7px;
1844
+ background-color: var(--global-intense-background);
1845
+ border: 1px solid var(--global-text-secondary) !important;
1846
+ }
1847
+
1848
+ .lexradiogroup .lexradiogroupitem button:disabled {
1849
+ border-color: var(--global-color-quaternary) !important;
1850
+ }
1851
+
1852
+ .lexradiogroup .lexradiogroupitem button span {
1853
+ width: 10px;
1854
+ height: 10px;
1855
+ min-width: 10px;
1856
+ min-height: 10px;
1857
+ border-radius: 50%;
1858
+ pointer-events: none;
1859
+ margin: auto;
1860
+ }
1861
+
1862
+ .lexradiogroup .lexradiogroupitem button.checked span {
1863
+ background-color: var(--global-text-primary);
1864
+ }
1865
+
1866
+ /* Colors */
1867
+ .lexradiogroup.primary .lexradiogroupitem button.checked span { background-color: var(--global-selected); }
1868
+ .lexradiogroup.secondary .lexradiogroupitem button.checked span { background-color: var(--global-selected-light); }
1869
+ .lexradiogroup.accent .lexradiogroupitem button.checked span { background-color: var(--global-color-accent); }
1870
+ .lexradiogroup.warning .lexradiogroupitem button.checked span { background-color: var(--global-color-warning); }
1871
+ .lexradiogroup.error .lexradiogroupitem button.checked span { background-color: var(--global-color-error); }
1872
+
1589
1873
  /* Input Color Widget */
1590
1874
 
1591
1875
  .lexcolor {
@@ -1636,7 +1920,7 @@ body.noevents * {
1636
1920
 
1637
1921
  .lexvector a {
1638
1922
  width: 48px;
1639
- font-size: 11px;
1923
+ font-size: var(--global-font-size-sm);
1640
1924
  margin-left: 6px;
1641
1925
  margin-right: 6px;
1642
1926
  }
@@ -1674,7 +1958,7 @@ body.noevents * {
1674
1958
  width: 2px;
1675
1959
  right: 0.25em;
1676
1960
  top: 25%;
1677
- font-size: 11px;
1961
+ font-size: var(--global-font-size-sm);
1678
1962
  color: var(--global-text-secondary);
1679
1963
  z-index: 11;
1680
1964
  }
@@ -1744,6 +2028,7 @@ input[type=number] {
1744
2028
 
1745
2029
  .lexwidget .numberbox {
1746
2030
  display: grid;
2031
+ width: calc(100% - 4px);
1747
2032
  background-color: var(--global-button-color);
1748
2033
  border: 2px solid var(--global-color-transparent);
1749
2034
  border-radius: 6px;
@@ -1766,6 +2051,10 @@ input[type=number] {
1766
2051
  pointer-events: none;
1767
2052
  }
1768
2053
 
2054
+ .lexnumber .vecinput {
2055
+ width: calc(100% - 12px); /* remove padding, margin, and border */
2056
+ }
2057
+
1769
2058
  .lexinputmeasure {
1770
2059
  font-family: var(--global-font);
1771
2060
  font-size: var(--global-font-size);
@@ -1777,6 +2066,7 @@ input[type=number] {
1777
2066
  -webkit-appearance: none;
1778
2067
  border: none !important;
1779
2068
  width: calc(100% - 12px);
2069
+ height: 1px;
1780
2070
  outline: none;
1781
2071
  opacity: 0.7;
1782
2072
  transition: opacity .2s;
@@ -1788,10 +2078,6 @@ input[type=number] {
1788
2078
  opacity: 1;
1789
2079
  }
1790
2080
 
1791
- input[type="range"] {
1792
- height: 1px;
1793
- }
1794
-
1795
2081
  .lexinputslider::-moz-range-track {
1796
2082
  height: 1px;
1797
2083
  background: #a19dc9;
@@ -1832,6 +2118,103 @@ input[type="range"] {
1832
2118
  /* color: red; */
1833
2119
  }
1834
2120
 
2121
+ /* Range Widget */
2122
+
2123
+ .lexrangeslider {
2124
+ --range-thumb-color: var(--global-color-primary);
2125
+ --range-thumb-size: 1rem;
2126
+ --range-progress: currentColor;
2127
+ --range-fill: 1;
2128
+ --range-thumb-padding: 0.15rem;
2129
+ --range-bg: color-mix(in oklab,currentColor 10%,#0000);
2130
+ --range-dir: 1;
2131
+ --radius-selector: 0.5rem;
2132
+ -webkit-appearance: none;
2133
+ -moz-appearance: none;
2134
+ appearance: none;
2135
+ webkit-appearance: none;
2136
+ --radius-selector-max: calc(var(--radius-selector) + var(--radius-selector) + var(--radius-selector));
2137
+ border-radius: calc(var(--radius-selector) + min(var(--range-thumb-padding),var(--radius-selector-max)));
2138
+ width: calc(100% - 4px);
2139
+ height: var(--range-thumb-size);
2140
+ border: none;
2141
+ outline: none;
2142
+ color: var(--global-text-secondary);
2143
+ background-color: #0000;
2144
+ overflow: hidden;
2145
+ padding: 0;
2146
+ cursor: pointer;
2147
+ transition: opacity .2s;
2148
+ -moz-transition: .2s;
2149
+ -webkit-transition: .2s;
2150
+ vertical-align: middle;
2151
+ }
2152
+
2153
+ /* Colors */
2154
+ .lexrangeslider.primary { color: var(--global-selected); }
2155
+ .lexrangeslider.secondary { color: var(--global-selected-light); }
2156
+ .lexrangeslider.accent { color: var(--global-color-accent); }
2157
+ .lexrangeslider.warning { color: var(--global-color-warning); }
2158
+ .lexrangeslider.error { color: var(--global-color-error); }
2159
+
2160
+ .lexrangeslider.left {
2161
+ --range-dir: -1;
2162
+ }
2163
+
2164
+ .lexrangeslider.no-fill {
2165
+ --range-fill: 0;
2166
+ --range-bg: currentColor;
2167
+ }
2168
+
2169
+ .lexrangeslider:hover {
2170
+ filter: brightness(1.1);
2171
+ }
2172
+
2173
+ .lexrangeslider::-moz-range-track {
2174
+ background-color: var(--range-bg);
2175
+ border-radius: var(--radius-selector);
2176
+ width: 100%;
2177
+ height: calc(var(--range-thumb-size)*0.5);
2178
+ }
2179
+
2180
+ .lexrangeslider::-webkit-slider-runnable-track {
2181
+ background-color: var(--range-bg);
2182
+ border-radius: var(--radius-selector);
2183
+ width: 100%;
2184
+ height: calc(var(--range-thumb-size)*0.5);
2185
+ }
2186
+
2187
+ .lexrangeslider::-webkit-slider-thumb {
2188
+ box-sizing: border-box;
2189
+ border-radius: calc(var(--radius-selector) + min(var(--range-thumb-padding),var(--radius-selector-max)));
2190
+ height: var(--range-thumb-size);
2191
+ width: var(--range-thumb-size);
2192
+ border: var(--range-thumb-padding) solid;
2193
+ -webkit-appearance: none;
2194
+ -moz-appearance: none;
2195
+ appearance: none;
2196
+ webkit-appearance: none;
2197
+ color: var(--range-progress);
2198
+ box-shadow: 0 -1px oklch(0% 0 0/0.1) inset,0 8px 0 -4px oklch(100% 0 0/0.1) inset,0 1px color-mix(in oklab,currentColor calc(1*10%),#0000),0 0 0 2rem var(--range-thumb-color) inset,calc((var(--range-dir,1)*-100rem) - (var(--range-dir,1)*var(--range-thumb-size)/2)) 0 0 calc(100rem*var(--range-fill));
2199
+ background-color: currentColor;
2200
+ position: relative;
2201
+ top: 50%;
2202
+ transform: translateY(-50%);
2203
+ }
2204
+
2205
+ .lexrangeslider::-moz-range-thumb {
2206
+ box-sizing: border-box;
2207
+ border-radius: calc(var(--radius-selector) + min(var(--range-thumb-padding),var(--radius-selector-max)));
2208
+ height: var(--range-thumb-size);
2209
+ width: var(--range-thumb-size);
2210
+ border: var(--range-thumb-padding) solid;
2211
+ color: var(--range-progress);
2212
+ box-shadow: 0 -1px oklch(0% 0 0/0.1) inset,0 8px 0 -4px oklch(100% 0 0/0.1) inset,0 1px color-mix(in oklab,currentColor calc(1*10%),#0000),0 0 0 2rem var(--range-thumb-color) inset,calc((var(--range-dir,1)*-100rem) - (var(--range-dir,1)*var(--range-thumb-size)/2)) 0 0 calc(100rem*var(--range-fill));
2213
+ background-color: currentColor;
2214
+ position: relative;
2215
+ top: 50%;
2216
+ }
2217
+
1835
2218
  /* Size Widget */
1836
2219
 
1837
2220
  .lexwidget .lexsizecross {
@@ -1983,7 +2366,7 @@ input[type="range"] {
1983
2366
  -moz-user-select: none;
1984
2367
  -ms-user-select: none;
1985
2368
  user-select: none;
1986
- font-size: var(--global-font-size-big);
2369
+ font-size: var(--global-font-size-lg);
1987
2370
  font-weight: 800;
1988
2371
  }
1989
2372
 
@@ -2028,9 +2411,7 @@ input[type="range"] {
2028
2411
  .lextree .lextreeitem .tree-item-icon {
2029
2412
  width: 12px;
2030
2413
  height: 12px;
2031
- margin-right: 4px;
2032
- vertical-align: middle;
2033
- margin-top: -1px;
2414
+ margin-right: 6px;
2034
2415
  }
2035
2416
 
2036
2417
  .lextree .lextreeitem.draggingover {
@@ -2050,14 +2431,12 @@ input[type="range"] {
2050
2431
  .lextree .lextreeitem a {
2051
2432
  margin-right: 6px;
2052
2433
  margin-top: 4px;
2053
- font-size: 10px;
2434
+ font-size: var(--global-font-size-sm);
2054
2435
  }
2055
2436
 
2056
2437
  .lextree .lextreeitem a.hierarchy {
2057
- font-size: 5px;
2058
2438
  margin-right: 6px;
2059
2439
  margin-top: 4px;
2060
- vertical-align: 2px;
2061
2440
  }
2062
2441
 
2063
2442
  .lextree .lextreeitem a:hover {
@@ -2070,12 +2449,11 @@ input[type="range"] {
2070
2449
  }
2071
2450
 
2072
2451
  .lextree .lextreeitem.parent a {
2073
- font-size: 10px;
2074
- vertical-align: 1px;
2452
+ font-size: var(--global-font-size-xs);
2075
2453
  }
2076
2454
 
2077
2455
  .lextree .lextreeitem .itemicon {
2078
- font-size: 10px !important;
2456
+ font-size: var(--global-font-size-sm) !important;
2079
2457
  float: right;
2080
2458
  margin-top: 7px;
2081
2459
  margin-right: 8px;
@@ -2200,16 +2578,15 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
2200
2578
 
2201
2579
  .lexbadge {
2202
2580
  border-radius: 0.35rem;
2203
- vertical-align: middle;
2204
2581
  color: #fff;
2205
2582
  font-weight: 500;
2206
2583
  border: 1px solid var(--badge-color, #14171a);
2207
2584
  width: fit-content;
2208
2585
  justify-content: center;
2209
2586
  align-items: center;
2210
- gap: .5rem;
2587
+ gap: 0.5rem;
2211
2588
  padding-inline: 0.6rem;
2212
- font-size: 0.875rem;
2589
+ font-size: var(--global-font-size);
2213
2590
  display: inline-flex;
2214
2591
  background-color: var(--badge-color, #1d232a);
2215
2592
  }
@@ -2228,11 +2605,11 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
2228
2605
  background-image: none;
2229
2606
  }
2230
2607
  /* Sizes */
2231
- .lexbadge.xs { padding-inline: 0.4rem; font-size: 0.6rem; }
2232
- .lexbadge.sm { padding-inline: 0.5rem; font-size: 0.75rem; }
2608
+ .lexbadge.xs { padding-inline: 0.4rem; font-size: var(--global-font-size-xs); }
2609
+ .lexbadge.sm { padding-inline: 0.5rem; font-size: var(--global-font-size-sm); }
2233
2610
  /* .lexbadge.md { default } */
2234
- .lexbadge.lg { padding-inline: 0.8rem; font-size: 1rem; }
2235
- .lexbadge.xl { padding-inline: 1rem; font-size: 1.125rem; }
2611
+ .lexbadge.lg { padding-inline: 0.8rem; font-size: var(--global-font-size-lg); }
2612
+ .lexbadge.xl { padding-inline: 1rem; font-size: var(--global-font-size-xl) }
2236
2613
 
2237
2614
  /* Menu Bar */
2238
2615
 
@@ -2242,7 +2619,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
2242
2619
  display: flex;
2243
2620
  height: 100%;
2244
2621
  color: var(--global-text-primary);
2245
- font-size: 14px;
2622
+ font-size: var(--global-font-size);
2246
2623
  font-weight: 500;
2247
2624
  }
2248
2625
 
@@ -2278,17 +2655,30 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
2278
2655
  margin-top: 0.05em;
2279
2656
  }
2280
2657
 
2281
- .lexcontextmenu {
2658
+ .lexmenubox {
2282
2659
  position: absolute;
2283
2660
  padding-right: 8px;
2284
2661
  z-index: 1001;
2285
- box-shadow: 0 0 6px #2c2c2c7c !important;
2286
- background-color: var(--global-blur-background);
2287
- border: 1px solid #91909036;
2662
+ background-color: #111111f3;
2663
+ border: 1px solid #aaaaaa48;
2288
2664
  border-radius: 6px;
2665
+ transition: all 0.15s cubic-bezier(.42,.97,.52,1.19);
2666
+ transform: translate(-2px, -10px);
2667
+ opacity: 0;
2289
2668
  }
2290
2669
 
2291
- .lexcontextmenu:before {
2670
+ :root[data-theme="light"] {
2671
+ .lexmenubox {
2672
+ background-color: #fffffff3;
2673
+ box-shadow: 0px 6px 7px -3px #a7a7a7b7 !important;
2674
+ }
2675
+ }
2676
+
2677
+ .lexmenubox[data-submenu] {
2678
+ transform: translate(-10px, -2px);
2679
+ }
2680
+
2681
+ .lexmenubox:before {
2292
2682
  content: "";
2293
2683
  position: absolute;
2294
2684
  width: 100%;
@@ -2301,18 +2691,22 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
2301
2691
  z-index: -1;
2302
2692
  }
2303
2693
 
2304
- .lexcontextmenu:focus {
2694
+ .lexmenubox[data-open]{
2695
+ transform: translate(0, 0);
2696
+ opacity: 1;
2697
+ }
2698
+
2699
+ .lexmenubox:focus {
2305
2700
  outline: none;
2306
2701
  }
2307
2702
 
2308
- .lexcontextmenu .lexcontextmenuentry {
2703
+ .lexmenubox .lexmenuboxentry {
2309
2704
  font-size: var(--global-font-size);
2310
2705
  width: 100%;
2311
2706
  color: var(--global-text-primary);
2312
- padding: 4px;
2707
+ padding: 6px;
2313
2708
  padding-left: 8px;
2314
2709
  padding-right: 0px;
2315
- padding-bottom: 6px;
2316
2710
  cursor: pointer;
2317
2711
  -webkit-user-select: none;
2318
2712
  -moz-user-select: none;
@@ -2329,96 +2723,96 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
2329
2723
  position: relative;
2330
2724
  }
2331
2725
 
2332
- .lexcontextmenu .lexcontextmenuentry:first-child {
2726
+ .lexmenubox .lexmenuboxentry.disabled {
2727
+ color: var(--global-text-terciary);
2728
+ cursor: default;
2729
+ }
2730
+
2731
+ .lexmenubox .lexmenuboxentry:first-child {
2333
2732
  border-top-right-radius: 5px;
2334
2733
  border-top-left-radius: 5px;
2335
2734
  }
2336
2735
 
2337
- .lexcontextmenu .lexcontextmenuentry:last-child {
2736
+ .lexmenubox .lexmenuboxentry:last-child {
2338
2737
  border-bottom-right-radius: 5px;
2339
2738
  border-bottom-left-radius: 5px;
2340
2739
  }
2341
2740
 
2342
- .lexcontextmenu .lexcontextmenuentrycontainer {
2741
+ .lexmenubox .lexmenuboxentrycontainer {
2343
2742
  display: flex;
2344
2743
  flex-direction: row;
2345
2744
  }
2346
2745
 
2347
- .lexcontextmenu .lexcontextmenuentry .lexentryname {
2746
+ .lexmenubox .lexmenuboxentry .lexentryname {
2348
2747
  margin-right: 32px;
2349
- margin-top: 2px;
2350
2748
  }
2351
2749
 
2352
- .lexcontextmenu .lexcontextmenuentry.noicon .lexentryname {
2750
+ .lexmenubox .lexmenuboxentry.noicon .lexentryname {
2353
2751
  margin-left: 10px;
2354
2752
  }
2355
2753
 
2356
2754
  /* normal icons */
2357
- .lexcontextmenu .lexcontextmenuentry a {
2358
- font-size: 10px;
2755
+ .lexmenubox .lexmenuboxentry a {
2756
+ font-size: var(--global-font-size-sm);
2359
2757
  float: left;
2360
2758
  margin-right: 13px;
2361
- margin-top: 9px;
2362
2759
  margin-left: 9px;
2760
+ align-content: center;
2363
2761
  min-width: 10px;
2364
2762
  }
2365
2763
 
2366
2764
  /* submenu specified arrow */
2367
- .lexcontextmenu .lexcontextmenuentry a.fa-xs {
2765
+ .lexmenubox .lexmenuboxentry a.fa-xs {
2368
2766
  float: right;
2369
2767
  margin-right: 8px;
2370
2768
  }
2371
2769
 
2372
- .lexcontextmenu .lexcontextmenuentry:hover {
2770
+ .lexmenubox .lexmenuboxentry:not(.disabled):hover {
2373
2771
  background-color: var(--global-selected);
2374
2772
  color: #f5f5f5;
2375
2773
  }
2376
2774
 
2377
- .lexcontextmenu .lexcontextmenuentry:active {
2775
+ .lexmenubox .lexmenuboxentry:active {
2378
2776
  color: var(--global-text-secondary);
2379
2777
  }
2380
2778
 
2381
- .lexcontextmenu .lexcontextmenuentry input {
2779
+ .lexmenubox .lexmenuboxentry input {
2382
2780
  float: left;
2383
2781
  margin-right: 28px;
2384
2782
  margin-left: 5px;
2385
2783
  }
2386
2784
 
2387
- .lexcontextmenu .lexcontextmenuentry:hover input::after {
2785
+ .lexmenubox .lexmenuboxentry:hover input::after {
2388
2786
  border-color: #f5f5f5;
2389
2787
  }
2390
2788
 
2391
- .lexcontextmenu .lexseparator {
2789
+ .lexmenubox .lexseparator {
2392
2790
  margin: 2px 0 2px;
2393
- width: -moz-calc(100% + 14px);
2394
- width: -webkit-calc(100% + 14px);
2395
- width: calc(100% + 14px);
2791
+ width: -moz-calc(100% + 8px);
2792
+ width: -webkit-calc(100% + 8px);
2793
+ width: calc(100% + 8px);
2794
+ border-color: var(--global-text-terciary);
2795
+ opacity: 0.25;
2396
2796
  }
2397
2797
 
2398
- .lexcontextmenu .lexentryshort {
2399
- font-size: 10px;
2400
- float: right;
2401
- margin-top: 3px;
2798
+ .lexmenubox .lexentryshort {
2799
+ font-size: var(--global-font-size-xs);
2402
2800
  font-weight: bold;
2403
- color: var(--global-text-primary);
2404
- margin-right: 12px;
2405
2801
  text-align: right;
2802
+ float: right;
2803
+ align-content: center;
2804
+ color: var(--global-text-terciary);
2805
+ margin-right: 12px;
2406
2806
  }
2407
2807
 
2408
2808
  .lexmenubar .lexmenubuttons {
2409
- display: flex;
2809
+ display: inline-flex;
2410
2810
  background-color: var(--global-color-secondary);
2411
- margin-top: 10px;
2412
- margin-bottom: 10px;
2811
+ height: 75%;
2812
+ margin: auto;
2413
2813
  border-radius: 6px;
2414
2814
  padding-inline: 4px;
2415
- font-size: 16px;
2416
- }
2417
-
2418
- .lexmenubar .lexmenubuttons.center {
2419
- margin: 0 auto;
2420
- margin-top: 10px;
2421
- margin-bottom: 8px;
2815
+ font-size: var(--global-font-size-lg);
2422
2816
  }
2423
2817
 
2424
2818
  .lexmenubar .lexmenubuttons.right {
@@ -2427,12 +2821,11 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
2427
2821
  }
2428
2822
 
2429
2823
  .lexmenubar .lexmenubutton {
2430
- justify-content: center;
2431
- padding: 8px;
2432
- padding-top: 0.6em;
2433
2824
  color: var(--global-text-secondary);
2825
+ padding-inline: 0.45em;
2434
2826
  cursor: pointer;
2435
- line-height: 10px;
2827
+ place-content: center;
2828
+ justify-items: center;
2436
2829
  -webkit-user-select: none;
2437
2830
  -moz-user-select: none;
2438
2831
  -ms-user-select: none;
@@ -2443,43 +2836,215 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
2443
2836
  margin-left: 0px !important;
2444
2837
  }
2445
2838
 
2446
- .lexmenubar .lexmenubutton.disabled a {
2447
- color: light-dark(var(--global-color-terciary), var(--global-button-color));
2448
- cursor: default;
2839
+ .lexmenubar .lexmenubutton.disabled a {
2840
+ color: light-dark(var(--global-color-terciary), var(--global-button-color));
2841
+ cursor: default;
2842
+ }
2843
+
2844
+ /* Context Menu */
2845
+
2846
+ .lexcontextmenu {
2847
+ z-index: 102;
2848
+ position: absolute;
2849
+ padding-right: 20px;
2850
+ border-radius: 6px;
2851
+ box-shadow: 0 0 6px rgba(46, 46, 46, 0.596) !important;
2852
+ background-color: var(--global-blur-background);
2853
+ border: 1px solid #91909036;
2854
+ }
2855
+
2856
+ .lexcontextmenu:before {
2857
+ content: "";
2858
+ position: absolute;
2859
+ width: 100%;
2860
+ height: 100%;
2861
+ top: 0;
2862
+ left: 0;
2863
+ -webkit-backdrop-filter: blur(10px);
2864
+ backdrop-filter: blur(10px);
2865
+ z-index: -1;
2866
+ border-radius: 6px;
2867
+ }
2868
+
2869
+ .lexcontextmenu .lexmenuboxentry {
2870
+ width: 100%;
2871
+ color: var(--global-text-secondary);
2872
+ padding: 3px;
2873
+ padding-left: 10px;
2874
+ padding-right: 10px;
2875
+ padding-bottom: 4px;
2876
+ cursor: pointer;
2877
+ -webkit-user-select: none;
2878
+ -moz-user-select: none;
2879
+ -ms-user-select: none;
2880
+ user-select: none;
2881
+ }
2882
+
2883
+ .lexcontextmenu .lexmenuboxentry:first-child {
2884
+ border-top-left-radius: 5px;
2885
+ border-top-right-radius: 5px;
2886
+ }
2887
+
2888
+ .lexcontextmenu .lexmenuboxentry:last-child {
2889
+ border-bottom-left-radius: 5px;
2890
+ border-bottom-right-radius: 5px;
2891
+ }
2892
+
2893
+ .lexcontextmenu .lexmenuboxentry.cmtitle {
2894
+ background: light-dark(var(--global-color-terciary), var(--global-intense-background));
2895
+ font-weight: bold;
2896
+ cursor: default;
2897
+ }
2898
+
2899
+ .lexcontextmenu .lexmenuboxentry.cmseparator {
2900
+ height: 1px;
2901
+ border-bottom: 1px solid var(--global-color-terciary);
2902
+ padding-bottom: 0;
2903
+ padding-top: 0;
2904
+ margin-top: -4px;
2905
+ }
2906
+
2907
+ .lexcontextmenu .lexmenuboxentry .lexentryname {
2908
+ margin-right: 10px;
2909
+ margin-top: 2px;
2910
+ font-size: var(--global-font-size);
2911
+ white-space: nowrap;
2912
+ overflow: hidden;
2913
+ text-overflow: ellipsis;
2914
+ }
2915
+
2916
+ .lexcontextmenu .lexmenuboxentry .lexentryname.disabled {
2917
+ color: light-dark(#808080b0, #c0c4cb53);
2918
+ }
2919
+
2920
+ /* normal icons */
2921
+ .lexcontextmenu .lexmenuboxentry a {
2922
+ float: right;
2923
+ margin-right: 0px;
2924
+ margin-top: 10px;
2925
+ font-size: var(--global-font-size-xs);
2926
+ }
2927
+
2928
+ /* submenu specified arrow */
2929
+ .lexcontextmenu .lexmenuboxentry a.fa-xs {
2930
+ float: right;
2931
+ margin-top: -9px;
2932
+ }
2933
+
2934
+ .lexcontextmenu .lexmenuboxentry:hover:not(.cmtitle) {
2935
+ background-color: var(--global-selected);
2936
+ color: #f5f5f5;
2937
+ }
2938
+
2939
+ .lexcontextmenu .lexmenuboxentry:active:not(.cmtitle, .cmseparator) {
2940
+ padding-top: 0.22em;
2941
+ color: #b7b7cba4;
2942
+ }
2943
+
2944
+ .lexcontextmenu .lexseparator {
2945
+ margin: 3px 0 3px 10px;
2946
+ }
2947
+
2948
+ .lexcontextmenu .lexentryshort {
2949
+ font-size: var(--global-font-size-xs);
2950
+ float: right;
2951
+ font-weight: bold;
2952
+ color: #979aa0e3;
2953
+ }
2954
+
2955
+ /* Side Bar */
2956
+
2957
+ .lexsidebar {
2958
+ width: calc(100% - 20px);
2959
+ height: 100%;
2960
+ padding: 10px;
2961
+ display: flex;
2962
+ flex-direction: column;
2963
+ gap: 0.2rem;
2964
+ }
2965
+
2966
+ .lexsidebar svg, .lexsidebar svg path {
2967
+ width: 1rem;
2968
+ height: 1rem;
2969
+ --color: var(--global-text-secondary);
2970
+ fill: var(--color);
2971
+ stroke: var(--color);
2972
+ display: block;
2973
+ }
2974
+
2975
+ .lexsidebar .lexwidget {
2976
+ width: 100% !important;
2977
+ padding: 0 !important;
2978
+ }
2979
+
2980
+ .lexsidebarcontent {
2981
+ width: 100%;
2982
+ padding-block-start: 4px;
2983
+ padding-block-end: 4px;
2984
+ display: flex;
2985
+ flex-direction: column;
2986
+ overflow-y: scroll;
2987
+ overflow-x: hidden;
2988
+ }
2989
+
2990
+ .lexsidebar .lexsidebargroup {
2991
+ display: flex;
2992
+ flex-direction: column;
2993
+ gap: 0.1em;
2994
+ }
2995
+
2996
+ .lexsidebar .lexsidebargroup:nth-child(n+2) {
2997
+ margin-top: 0.15rem;
2998
+ }
2999
+
3000
+ .lexsidebar .lexsidebarseparator {
3001
+ background-color: #5251514d;
3002
+ width: 100%;
3003
+ height: 1px;
3004
+ margin: 0 auto;
3005
+ margin-top: 0.4rem;
3006
+ margin-bottom: 0.4rem;
3007
+ }
3008
+
3009
+ .lexsidebar .lexsidebargrouptitle {
3010
+ font-size: var(--global-font-size-sm);
3011
+ font-weight: 600;
3012
+ color: var(--global-text-secondary);
3013
+ overflow: hidden;
3014
+ display: flex;
3015
+ }
3016
+
3017
+ .lexsidebar .lexsidebargrouptitle div {
3018
+ transform: translate(0, 0);
3019
+ opacity: 1;
3020
+ transition: transform 0.3s cubic-bezier(0,0,.2,1), opacity 0.1s cubic-bezier(0,0,.2,1), max-height 0.3s cubic-bezier(0,0,.2,1);
3021
+ height: 44px;
3022
+ max-height: 44px;
3023
+ align-content: center;
2449
3024
  }
2450
3025
 
2451
- /* Context Menu */
3026
+ .lexsidebar .lexsidebargrouptitle a {
3027
+ margin: auto 0;
3028
+ margin-left: auto;
3029
+ margin-right: 8px;
3030
+ transition: transform 0.3s cubic-bezier(0,0,.2,1), opacity 0.1s cubic-bezier(0,0,.2,1), max-height 0.3s cubic-bezier(0,0,.2,1);
3031
+ }
2452
3032
 
2453
- .lexcontextmenubox {
2454
- z-index: 102;
2455
- position: absolute;
2456
- padding-right: 20px;
2457
- border-radius: 6px;
2458
- box-shadow: 0 0 6px rgba(46, 46, 46, 0.596) !important;
2459
- background-color: var(--global-blur-background);
2460
- border: 1px solid #91909036;
3033
+ .lexsidebar.collapsing .lexsidebargrouptitle * {
3034
+ max-height: 0px;
3035
+ transform: translate(0, -24px);
3036
+ opacity: 0;
2461
3037
  }
2462
3038
 
2463
- .lexcontextmenubox:before {
2464
- content: "";
2465
- position: absolute;
2466
- width: 100%;
2467
- height: 100%;
2468
- top: 0;
2469
- left: 0;
2470
- -webkit-backdrop-filter: blur(10px);
2471
- backdrop-filter: blur(10px);
2472
- z-index: -1;
2473
- border-radius: 6px;
3039
+ .lexsidebar.collapsed .lexsidebargrouptitle * {
3040
+ display: none;
2474
3041
  }
2475
3042
 
2476
- .lexcontextmenubox .lexcontextmenuentry {
2477
- width: 100%;
2478
- color: var(--global-text-secondary);
2479
- padding: 3px;
2480
- padding-left: 10px;
2481
- padding-right: 10px;
2482
- padding-bottom: 4px;
3043
+ .lexsidebar .lexsidebarentry {
3044
+ width: calc(100% - 16px);
3045
+ padding: 6px;
3046
+ padding-inline: 8px;
3047
+ border-radius: 8px;
2483
3048
  cursor: pointer;
2484
3049
  -webkit-user-select: none;
2485
3050
  -moz-user-select: none;
@@ -2487,157 +3052,201 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
2487
3052
  user-select: none;
2488
3053
  }
2489
3054
 
2490
- .lexcontextmenubox .lexcontextmenuentry:first-child {
2491
- border-top-left-radius: 5px;
2492
- border-top-right-radius: 5px;
3055
+ .lexsidebar .lexsidebarentry span {
3056
+ font-size: var(--global-font-size);
3057
+ overflow: hidden;
3058
+ white-space: nowrap;
3059
+ text-overflow: ellipsis;
3060
+ align-self: center;
2493
3061
  }
2494
3062
 
2495
- .lexcontextmenubox .lexcontextmenuentry:last-child {
2496
- border-bottom-left-radius: 5px;
2497
- border-bottom-right-radius: 5px;
3063
+ .lexsidebar .lexsidebarentry:hover {
3064
+ background-color: var(--global-color-secondary);
2498
3065
  }
2499
3066
 
2500
- .lexcontextmenubox .lexcontextmenuentry.cmtitle {
2501
- background: light-dark(var(--global-color-terciary), var(--global-intense-background));
2502
- font-weight: bold;
2503
- cursor: default;
3067
+ .lexsidebar .lexsidebarentry:active {
3068
+ transform: scale(0.99);
2504
3069
  }
2505
3070
 
2506
- .lexcontextmenubox .lexcontextmenuentry.cmseparator {
2507
- height: 1px;
2508
- border-bottom: 1px solid var(--global-color-terciary);
2509
- padding-bottom: 0;
2510
- padding-top: 0;
2511
- margin-top: -4px;
3071
+ .lexsidebar .lexsidebarentry div {
3072
+ display: flex;
3073
+ gap: 0.8em;
3074
+ margin: 0;
3075
+ height: 22px;
3076
+ opacity: 0.95;
2512
3077
  }
2513
3078
 
2514
- .lexcontextmenubox .lexcontextmenuentry .lexentryname {
2515
- margin-right: 10px;
2516
- margin-top: 2px;
2517
- font-size: var(--global-font-size);
2518
- white-space: nowrap;
3079
+ .lexsidebar .lexsidebarentry div i {
3080
+ min-width: 22px;
3081
+ max-width: 22px;
3082
+ margin: auto 0;
3083
+ text-align: center;
3084
+ margin-left: -2px;
3085
+ }
3086
+
3087
+ .lexsidebar .lexsidebarentry div a:not(.lexicon) {
2519
3088
  overflow: hidden;
3089
+ white-space: nowrap;
2520
3090
  text-overflow: ellipsis;
3091
+ align-content: center;
2521
3092
  }
2522
3093
 
2523
- .lexcontextmenubox .lexcontextmenuentry .lexentryname.disabled {
2524
- color: light-dark(#808080b0, #c0c4cb53);
3094
+ .lexsidebar .lexsidebarentry a.lexicon {
3095
+ margin-left: auto;
2525
3096
  }
2526
3097
 
2527
- /* normal icons */
2528
- .lexcontextmenubox .lexcontextmenuentry a {
2529
- float: right;
2530
- margin-right: 0px;
2531
- margin-top: 10px;
2532
- font-size: 10px;
3098
+ .lexsidebar .lexsidebarentry > * {
3099
+ color: var(--global-text-primary);
3100
+ font-size: var(--global-font-size);
2533
3101
  }
2534
3102
 
2535
- /* submenu specified arrow */
2536
- .lexcontextmenubox .lexcontextmenuentry a.fa-xs {
2537
- float: right;
2538
- margin-top: -8px;
3103
+ .lexsidebar .lexsidebarsubentrycontainer {
3104
+ width: calc(100% - 48px);
3105
+ margin-block-start: 4px;
3106
+ margin-block-end: 8px;
3107
+ margin-left: 16px;
3108
+ padding-inline: 16px;
3109
+ display: flex;
3110
+ flex-direction: column;
3111
+ -webkit-user-select: none;
3112
+ -moz-user-select: none;
3113
+ -ms-user-select: none;
3114
+ user-select: none;
3115
+ opacity: 0.95;
3116
+ border-left: 1px solid #5251514d;
2539
3117
  }
2540
3118
 
2541
- .lexcontextmenubox .lexcontextmenuentry:hover:not(.cmtitle) {
2542
- background-color: var(--global-selected);
2543
- color: #f5f5f5;
3119
+ .lexsidebar.collapsing .lexsidebarsubentrycontainer {
3120
+ max-height: 0px;
3121
+ transform: translate(-8px, -8px);
3122
+ opacity: 0;
3123
+ margin: 0;
2544
3124
  }
2545
3125
 
2546
- .lexcontextmenubox .lexcontextmenuentry:active:not(.cmtitle, .cmseparator) {
2547
- padding-top: 0.22em;
2548
- color: #b7b7cba4;
3126
+ .lexsidebar .lexsidebarsubentrycontainer .lexsidebarentry {
3127
+ display: flex;
3128
+ gap: 0.8em;
2549
3129
  }
2550
3130
 
2551
- .lexcontextmenubox .lexseparator {
2552
- margin: 3px 0 3px 10px;
3131
+ .lexsidebar.collapsed .lexsidebarsubentrycontainer {
3132
+ display: none;
2553
3133
  }
2554
3134
 
2555
- .lexcontextmenubox .lexentryshort {
2556
- font-size: 9px;
2557
- float: right;
2558
- /* margin-top: -13px; */
2559
- font-weight: bold;
2560
- color: #979aa0e3;
3135
+ .lexsidebar.collapsed .lexsidebarcontent div a {
3136
+ display: none;
2561
3137
  }
2562
3138
 
2563
- /* Side Bar */
2564
-
2565
- .lexsidebar {
2566
- text-align: center;
3139
+ /* .lexsidebar .lexsidebarentry a:hover {
3140
+ border: 3px solid var(--global-selected);
3141
+ background-color: var(--global-button-color-hovered);
2567
3142
  }
2568
3143
 
2569
- .lexsidebar .lexsidebarentry {
2570
- width: 64px;
2571
- height: 64px;
2572
- margin-top: -6px;
3144
+ .lexsidebar .lexsidebarentry a:active {
3145
+ font-size: 17px;
2573
3146
  }
2574
3147
 
3148
+ .lexsidebar .lexsidebarentry.selected a {
3149
+ background-color: var(--global-button-color-hovered);
3150
+ border: 4px solid var(--global-selected);
3151
+ } */
3152
+
2575
3153
  .lexsidebar .lexsidebarentry .lexsidebarentrydesc {
2576
3154
  position: absolute;
2577
- margin-left: 12px;
3155
+ margin-top: -3px;
3156
+ margin-left: 32px;
2578
3157
  font-weight: 600;
2579
- margin-top: 13px;
2580
- background-color: #afafaf;
3158
+ background-color: var(--global-text-secondary);
2581
3159
  color: var(--global-color-primary);
2582
- font-size: 16px;
3160
+ font-size: var(--global-font-size);
2583
3161
  border-radius: 6px;
2584
3162
  text-align: center;
2585
3163
  opacity: 0;
3164
+ transform: translate(-12px, 0);
2586
3165
  z-index: 102;
2587
- padding: 2px 6px;
2588
- transition: opacity ease-in 0.1s;
2589
- }
2590
-
2591
- .lexsidebar .lexsidebarentry button:hover+.lexsidebarentrydesc {
2592
- opacity: 1;
3166
+ padding: 4px 8px;
3167
+ transition: opacity ease-in 0.15s, transform ease-in 0.15s;
3168
+ pointer-events: none;
2593
3169
  }
2594
3170
 
2595
- .lexsidebar .lexsidebarentry:first-child {
2596
- padding-top: 16px;
3171
+ .lexsidebar.collapsed .lexsidebarentry:hover .lexsidebarentrydesc {
3172
+ opacity: 1;
3173
+ transform: translate(0, 0);
2597
3174
  }
2598
3175
 
2599
- .lexsidebar .lexsidebarentry button {
3176
+ .lexsidebar .lexsidebarfooter, .lexsidebar .lexsidebarheader {
2600
3177
  width: calc(100% - 16px);
2601
- height: calc(100% - 16px);
2602
- background-color: var(--global-button-color);
2603
- color: var(--global-text-primary);
2604
- font-size: 18px;
2605
- border-radius: 10px;
2606
- border: 0px solid var(--global-color-transparent);
2607
- transition: border 0.1s ease-in-out;
3178
+ height: 36px;
3179
+ display: flex;
3180
+ border-radius: 8px;
3181
+ padding: 8px;
2608
3182
  cursor: pointer;
3183
+ -webkit-user-select: none;
3184
+ -moz-user-select: none;
3185
+ -ms-user-select: none;
3186
+ user-select: none;
3187
+ transition: background-color 0.3s ease-out;
2609
3188
  }
2610
3189
 
2611
- .lexsidebar .lexsidebarentry button:hover {
2612
- border: 3px solid var(--global-selected);
2613
- background-color: var(--global-button-color-hovered);
3190
+ .lexsidebar .lexsidebarfooter:hover, .lexsidebar .lexsidebarheader:hover {
3191
+ background-color: var(--global-color-secondary);
2614
3192
  }
2615
3193
 
2616
- .lexsidebar .lexsidebarentry button:active {
2617
- font-size: 17px;
3194
+ .lexsidebar.collapsing .lexsidebarheader {
3195
+ background-color: var(--global-selected);
2618
3196
  }
2619
3197
 
2620
- .lexsidebar .lexsidebarentry.selected button {
2621
- background-color: var(--global-button-color-hovered);
2622
- border: 4px solid var(--global-selected);
3198
+ .lexsidebar .lexsidebarfooter:active, .lexsidebar .lexsidebarheader:active {
3199
+ transform: scale(0.99);
2623
3200
  }
2624
3201
 
2625
- .lexsidebar .lexsidebarfooter {
2626
- position: absolute;
2627
- bottom: 0;
3202
+ .lexsidebar .lexavatar {
3203
+ background-color: #000;
2628
3204
  }
2629
3205
 
2630
- .lexsidebar .lexsidebarfooter .lexsidebarentry button {
2631
- width: calc(100% - 16px);
2632
- height: calc(100% - 16px);
2633
- background-color: unset;
2634
- font-size: 14px;
3206
+ .lexsidebar .lexsidebarfooter div, .lexsidebar .lexsidebarheader div {
3207
+ width: calc(100% - 88px);
3208
+ height: 100%;
3209
+ padding-inline: 12px;
3210
+ justify-content: center;
3211
+ display: flex;
3212
+ flex-direction: column;
3213
+ transition: width 0.3s cubic-bezier(0,0,.2,1), padding-inline 0.3s cubic-bezier(0,0,.2,1);
2635
3214
  }
2636
3215
 
2637
- .lexsidebar .lexsidebarfooter .lexsidebarentry button:active {
2638
- font-size: 13px;
3216
+ .lexsidebar .lexsidebarfooter div span, .lexsidebar .lexsidebarheader div span {
3217
+ font-size: var(--global-font-size-sm);
3218
+ overflow: hidden;
3219
+ text-overflow: ellipsis;
3220
+ white-space: nowrap;
3221
+ transition: width 0.3s cubic-bezier(0,0,.2,1);
3222
+ }
3223
+
3224
+ .lexsidebar .lexsidebarfooter div span:first-child, .lexsidebar .lexsidebarheader div span:first-child {
3225
+ font-size: var(--global-font-size);
3226
+ font-weight: 600;
3227
+ }
3228
+
3229
+ .lexsidebar .lexsidebarfooter a, .lexsidebar .lexsidebarheader a {
3230
+ width: 32px;
3231
+ margin-left: 0px;
3232
+ align-content: center;
3233
+ }
3234
+
3235
+ .lexsidebar .lexsidebarfooter svg, .lexsidebar .lexsidebarheader svg {
3236
+ place-self: center;
3237
+ }
3238
+
3239
+ .lexsidebar.collapsing .lexsidebarfooter span, .lexsidebar.collapsing .lexsidebarfooter div,
3240
+ .lexsidebar.collapsing .lexsidebarheader span, .lexsidebar.collapsing .lexsidebarheader div {
3241
+ width: 0px;
3242
+ padding-inline: 0px;
2639
3243
  }
2640
3244
 
3245
+ /* .lexsidebar.collapsed .lexsidebarfooter span, .lexsidebar.collapsed .lexsidebarfooter div,
3246
+ .lexsidebar.collapsed .lexsidebarheader span, .lexsidebar.collapsed .lexsidebarheader div {
3247
+ display: none;
3248
+ } */
3249
+
2641
3250
  /* Overlay Buttons */
2642
3251
 
2643
3252
  .lexoverlaybuttonscontainer {
@@ -2718,7 +3327,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
2718
3327
 
2719
3328
  .lexoverlaybuttons .lexbutton {
2720
3329
  padding: 6px 6px;
2721
- font-size: var(--global-font-size-big);
3330
+ font-size: var(--global-font-size-lg);
2722
3331
  border-radius: 10px;
2723
3332
  justify-content: center;
2724
3333
  background: none;
@@ -2727,16 +3336,16 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
2727
3336
  }
2728
3337
 
2729
3338
  .lexoverlaybuttons .lexbutton span {
2730
- font-size: var(--global-font-size-big);
3339
+ font-size: var(--global-font-size-lg);
2731
3340
  }
2732
3341
 
2733
3342
  .lexoverlaybuttons .lexbutton a {
2734
3343
  line-height: 10px;
2735
- font-size: var(--global-font-size-big);
3344
+ font-size: var(--global-font-size-lg);
2736
3345
  }
2737
3346
 
2738
3347
  .lexoverlaybuttons .lexbutton.array a {
2739
- font-size: 10px;
3348
+ font-size: var(--global-font-size-sm);
2740
3349
  margin-left: 4px;
2741
3350
  }
2742
3351
 
@@ -2818,10 +3427,8 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
2818
3427
  .lexareatabs {
2819
3428
  display: flex;
2820
3429
  flex-direction: row;
2821
- margin-left: 7px;
2822
3430
  width: fit-content;
2823
3431
  width: -moz-fit-content;
2824
- border-radius: 10px;
2825
3432
  }
2826
3433
 
2827
3434
  .lexareatabs.dockingtab {
@@ -2829,7 +3436,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
2829
3436
  }
2830
3437
 
2831
3438
  .lexareatabs .lexareatab {
2832
- font-size: 13px;
3439
+ font-size: var(--global-font-size);
2833
3440
  font-weight: 600;
2834
3441
  justify-content: center;
2835
3442
  text-align: center;
@@ -2852,24 +3459,24 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
2852
3459
  }
2853
3460
 
2854
3461
  .lexareatabs.row {
2855
- width: calc(100%-9px);
2856
- }
2857
-
2858
- .lexareatabs.row {
2859
- padding: 4px;
2860
- padding-bottom: 6px;
3462
+ background-color: light-dark(var(--global-color-terciary), var(--global-button-color));
3463
+ border-radius: 8px;
3464
+ padding: 3px;
3465
+ margin: 6px;
3466
+ gap: 0.1em;
2861
3467
  }
2862
3468
 
2863
3469
  .lexareatabs.row .lexareatab {
2864
- background-color: var(--global-color-secondary);
2865
- padding-left: 16px;
2866
- padding-right: 16px;
2867
- margin-right: 4px;
2868
- border-radius: 4px;
3470
+ padding: 0.45em 1.45em;
3471
+ transition: 0.1s;
3472
+ background: none;
3473
+ border-radius: 6px;
3474
+ color: var(--global-text-secondary);
2869
3475
  }
2870
3476
 
2871
3477
  .lexareatabs.fit {
2872
- width: calc(100% - 14px);
3478
+ width: calc(100% - 12px);
3479
+ padding-inline: 6px;
2873
3480
  }
2874
3481
 
2875
3482
  .lexareatabs.fit .lexareatab {
@@ -2887,8 +3494,9 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
2887
3494
  }
2888
3495
 
2889
3496
  .lexareatabs.row .lexareatab.selected {
2890
- color: #fff;
2891
- background: light-dark(var(--global-selected-light), var(--global-selected));
3497
+ background-color: var(--global-color-primary);
3498
+ outline: none;
3499
+ color: var(--global-text-primary);
2892
3500
  }
2893
3501
 
2894
3502
  .lexareatabs.folding .lexareatab.selected {
@@ -2901,7 +3509,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
2901
3509
  }
2902
3510
 
2903
3511
  .lexareatabs.row .lexareatab.selected:hover {
2904
- color: var(--global-color-primary);
3512
+ color: var(--global-text-secondary);
2905
3513
  }
2906
3514
 
2907
3515
  .lexareatabscontainer {
@@ -2931,6 +3539,31 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
2931
3539
  border-radius: 2px;
2932
3540
  }
2933
3541
 
3542
+ /* Avatar Widget */
3543
+
3544
+ .lexavatar {
3545
+ width: 32px;
3546
+ height: 32px;
3547
+ border-radius: 8px;
3548
+ margin: auto 0;
3549
+ }
3550
+
3551
+ .lexavatar img {
3552
+ width: 100%;
3553
+ height: 100%;
3554
+ }
3555
+
3556
+ .lexavatar a svg {
3557
+ width: 60%;
3558
+ height: 100%;
3559
+ }
3560
+
3561
+ .lexavatar * {
3562
+ border-radius: 8px;
3563
+ width: 60%;
3564
+ height: 100%;
3565
+ }
3566
+
2934
3567
  /* Card Widget */
2935
3568
 
2936
3569
  .lexcard {
@@ -2955,6 +3588,10 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
2955
3588
  }
2956
3589
 
2957
3590
  .lexcard span {
3591
+ font-size: var(--global-font-size-lg);
3592
+ font-family: var(--global-title-font);
3593
+ font-weight: 600;
3594
+ text-transform: uppercase;
2958
3595
  width: calc(100% - 16px);
2959
3596
  display: flex;
2960
3597
  background-color: var(--global-blur-background);
@@ -2968,10 +3605,6 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
2968
3605
  padding: 8px;
2969
3606
  border-top-left-radius: 6px;
2970
3607
  border-top-right-radius: 6px;
2971
- font-size: 1.3em;
2972
- font-family: var(--global-title-font);
2973
- font-weight: 600;
2974
- text-transform: uppercase;
2975
3608
  }
2976
3609
 
2977
3610
  .lexcard span a {
@@ -3003,7 +3636,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
3003
3636
  height: 18px;
3004
3637
  cursor: pointer;
3005
3638
  border-radius: 4px;
3006
- font-size: 11px;
3639
+ font-size: var(--global-font-size-sm);
3007
3640
  }
3008
3641
 
3009
3642
  .lexlayer.selected {
@@ -3154,14 +3787,13 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
3154
3787
 
3155
3788
  .lexcounterbox .lexcountervalue {
3156
3789
  width: 100%;
3157
- font-size: 32px;
3790
+ font-size: var(--global-font-size-xxl);
3158
3791
  font-weight: 700;
3159
-
3160
3792
  }
3161
3793
 
3162
3794
  .lexcounterbox .lexcounterlabel {
3163
3795
  width: 100%;
3164
- margin-top: -22px;
3796
+ margin-top: -18px;
3165
3797
  color: var(--global-text-secondary);
3166
3798
  }
3167
3799
 
@@ -3210,9 +3842,8 @@ tr:hover {
3210
3842
  }
3211
3843
 
3212
3844
  th a {
3213
- /* color: var(--global-selected-light); */
3214
3845
  margin-left: 4px;
3215
- font-size: 10px !important;
3846
+ font-size: var(--global-font-size-xs) !important;
3216
3847
  }
3217
3848
 
3218
3849
  th a:active {
@@ -3765,7 +4396,7 @@ ul.lexassetscontent {
3765
4396
  font-weight: 600;
3766
4397
  background-color: #afafaf;
3767
4398
  color: var(--global-color-primary);
3768
- font-size: 14px;
4399
+ font-size: var(--global-font-size);
3769
4400
  border-radius: 6px;
3770
4401
  display: none;
3771
4402
  opacity: 0;
@@ -3775,27 +4406,8 @@ ul.lexassetscontent {
3775
4406
  pointer-events: none;
3776
4407
  }
3777
4408
 
3778
- .lexassetscontent li:hover+.lexitemdesc {
3779
- opacity: 1;
3780
- }
3781
-
3782
- .lexassetscontent .lexitemdesc {
3783
- position: absolute;
3784
- font-weight: 600;
3785
- background-color: #afafaf;
3786
- color: var(--global-color-primary);
3787
- font-size: 14px;
3788
- border-radius: 6px;
3789
- display: none;
3790
- opacity: 0;
3791
- z-index: 102;
3792
- padding: 2px 6px;
3793
- transition: opacity ease-in 0.1s;
3794
- pointer-events: none;
3795
- }
3796
-
3797
4409
  .lexassetscontent li:hover + .lexitemdesc {
3798
- opacity: 1;
4410
+ opacity: 1;
3799
4411
  }
3800
4412
 
3801
4413
  .lexassetscontent.list li {
@@ -3821,7 +4433,7 @@ ul.lexassetscontent {
3821
4433
  }
3822
4434
 
3823
4435
  .lexassetscontent .asset-file-preview text {
3824
- font-size: 64px;
4436
+ font-size: 4rem;
3825
4437
  text-anchor: middle;
3826
4438
  font-family: 'Ubuntu', sans-serif;
3827
4439
  }
@@ -3976,8 +4588,8 @@ ul.lexassetscontent {
3976
4588
  }
3977
4589
 
3978
4590
  /* Code Editor */
3979
-
3980
4591
  .codebasearea {
4592
+
3981
4593
  display: flex;
3982
4594
  position: relative;
3983
4595
  overflow: inherit;
@@ -4019,18 +4631,16 @@ ul.lexassetscontent {
4019
4631
 
4020
4632
  .codebasearea .lexareatab i {
4021
4633
  width: 12px;
4022
- font-size: 10px;
4023
- margin-right: 4px;
4024
- vertical-align: middle;
4025
- margin-top: -3px;
4634
+ font-size: var(--global-font-size-sm);
4635
+ margin-right: 6px;
4636
+ align-content: center;
4026
4637
  }
4027
4638
 
4028
4639
  .codebasearea .lexareatab img {
4029
4640
  width: 12px;
4030
4641
  height: 12px;
4031
- margin-right: 4px;
4032
- vertical-align: middle;
4033
- margin-top: -2px;
4642
+ margin-right: 6px;
4643
+ align-content: center;
4034
4644
  }
4035
4645
 
4036
4646
  .lexcodeeditor ::-webkit-scrollbar {
@@ -4717,7 +5327,7 @@ ul.lexassetscontent {
4717
5327
  .lexgraphnode .lexgraphnodeproperties {
4718
5328
  font-family: var(--global-title-font);
4719
5329
  font-weight: 600;
4720
- font-size: 13px;
5330
+ font-size: var(--global-font-size);
4721
5331
  color: #fff;
4722
5332
  text-shadow: 0px 0px 2px #1b1b1bdc;
4723
5333
  border-bottom: 1px solid #ffffff46;
@@ -4755,7 +5365,7 @@ ul.lexassetscontent {
4755
5365
  .lexgraphnode .lexgraphnodeio {
4756
5366
  font-family: var(--global-title-font);
4757
5367
  font-weight: 600;
4758
- font-size: 10px;
5368
+ font-size: var(--global-font-size-sm);
4759
5369
  color: #d9d9e3;
4760
5370
  text-shadow: 0px 1px 6px #22222283;
4761
5371
  display: flex;
@@ -4767,7 +5377,7 @@ ul.lexassetscontent {
4767
5377
  }
4768
5378
 
4769
5379
  .lexgraphnode .lexgraphnodeio .io__type {
4770
- font-size: 7px;
5380
+ font-size: calc(var(--global-font-size-xs) - 1px);
4771
5381
  font-weight: 700;
4772
5382
  line-height: 10px;
4773
5383
  min-width: 11px;
@@ -4797,7 +5407,7 @@ ul.lexassetscontent {
4797
5407
  margin-top: 3px;
4798
5408
  background-color: #afafaf;
4799
5409
  color: var(--global-color-primary);
4800
- font-size: 8px;
5410
+ font-size: var(--global-font-size-xs);
4801
5411
  border-radius: 4px;
4802
5412
  width: 28px;
4803
5413
  text-align: center;
@@ -4902,11 +5512,11 @@ ul.lexassetscontent {
4902
5512
  }
4903
5513
 
4904
5514
  .lexgraphgroup .lexgraphgrouptitle {
4905
- font-size: 14px;
4906
- margin: 8px;
4907
- color: var(--global-text-primary);
5515
+ font-size: var(--global-font-size-xl);
4908
5516
  font-family: var(--global-title-font);
4909
5517
  font-weight: 600;
5518
+ margin: 8px;
5519
+ color: var(--global-text-primary);
4910
5520
  outline: none;
4911
5521
  border: none;
4912
5522
  background: none;
@@ -4939,7 +5549,7 @@ ul.lexassetscontent {
4939
5549
  }
4940
5550
 
4941
5551
  .grapharea .graph-title button {
4942
- font-size: 16px;
5552
+ font-size: var(--global-font-size-xl);
4943
5553
  font-family: var(--global-title-font);
4944
5554
  font-weight: 600;
4945
5555
  color: var(--global-text-primary);