lexgui 0.2.0 → 0.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
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,124 @@ 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
+ max-width: 512px;
406
+ }
407
+
408
+ .lextoast .lextoastcontent div {
409
+ white-space: nowrap;
410
+ overflow: hidden;
411
+ text-overflow: ellipsis;
412
+ }
413
+
414
+ .lextoast .lextoastcontent .title {
415
+ font-size: var(--global-font-size-lg);
416
+ color: var(--global-text-primary);
417
+ }
418
+
419
+ .lextoast .lextoastcontent .desc {
420
+ font-size: var(--global-font-size-sm);
421
+ color: var(--global-text-secondary);
422
+ }
423
+
424
+ .lextoast .lexwidget {
425
+ padding-inline: 16px;
426
+ }
427
+
428
+ .lextoast .closer {
429
+ position: absolute;
430
+ top: 10px;
431
+ right: 10px;
432
+ font-size: var(--global-font-size-sm);
433
+ }
434
+
435
+ .lextoast:first-child {
436
+ z-index: 3000;
437
+ transform: translateY(0px) scale(1);
438
+ }
439
+ .lextoast:nth-child(2) {
440
+ z-index: 2999;
441
+ opacity: 0.9;
442
+ transform: translateY(var(--stack-offset)) scale(0.95);
443
+ }
444
+ .lextoast:nth-child(3) {
445
+ z-index: 2998;
446
+ opacity: 0.8;
447
+ transform: translateY(calc(var(--stack-offset) * 2)) scale(0.9);
448
+ }
449
+ .lextoast:nth-child(n+4) {
450
+ opacity: 0;
451
+ transform: translateY(calc(var(--stack-offset) * 3)) scale(0.9);
452
+ }
453
+
454
+ .notifications ol.list .lextoast {
455
+ transform: translateY(0px) scale(1);
456
+ opacity: 1;
230
457
  }
231
458
 
232
459
  /* Commandbar */
@@ -269,7 +496,7 @@ body.noevents * {
269
496
  background-color: var(--global-color-terciary);
270
497
  border-top-left-radius: 6px;
271
498
  border-bottom-left-radius: 6px;
272
- font-size: 12px;
499
+ font-size: var(--global-font-size-sm);
273
500
  }
274
501
 
275
502
  .commandbar input {
@@ -283,8 +510,8 @@ body.noevents * {
283
510
  outline: none;
284
511
  border: none;
285
512
  font-family: var(--global-font);
513
+ font-size: var(--global-font-size);
286
514
  line-height: 23px;
287
- font-size: 14px;
288
515
  font-weight: 600;
289
516
  }
290
517
 
@@ -321,8 +548,8 @@ body.noevents * {
321
548
 
322
549
  .commandbar .searchitembox .searchitem i {
323
550
  width: 12px;
324
- font-size: 11px;
325
- margin-right: 4px;
551
+ font-size: var(--global-font-size-sm);
552
+ margin-right: 8px;
326
553
  margin-top: -2px;
327
554
  vertical-align: middle;
328
555
  }
@@ -356,7 +583,7 @@ body.noevents * {
356
583
  background-color: var(--global-color-primary);
357
584
  padding: 15px;
358
585
  width: 100%;
359
- font-size: .875rem;
586
+ font-size: var(--global-font-size);
360
587
  line-height: 1.25rem;
361
588
  }
362
589
 
@@ -383,7 +610,7 @@ body.noevents * {
383
610
 
384
611
  .lexfooter ul li {
385
612
  margin-bottom: 8px;
386
- font-size: 14px;
613
+ font-size: var(--global-font-size-lg);
387
614
  }
388
615
 
389
616
  .lexfooter a {
@@ -437,7 +664,7 @@ body.noevents * {
437
664
  }
438
665
 
439
666
  .lexfooter .social a a {
440
- font-size: 24px;
667
+ font-size: var(--global-font-size-xxl);
441
668
  }
442
669
 
443
670
  .lexfooter a:hover {
@@ -457,7 +684,7 @@ body.noevents * {
457
684
 
458
685
  .lexdialog {
459
686
  outline: none;
460
- border: none;
687
+ border: 1px solid #aaaaaa48;
461
688
  background: none;
462
689
  margin: 0;
463
690
  padding: 0;
@@ -465,7 +692,7 @@ body.noevents * {
465
692
  min-width: 256px;
466
693
  min-height: max-content;
467
694
  overflow: hidden;
468
- box-shadow: 0 2px 8px #101010;
695
+ box-shadow: 0 2px 6px #101010bb;
469
696
  border-radius: 8px;
470
697
  z-index: 101;
471
698
  background-color: var(--global-color-secondary);
@@ -475,7 +702,7 @@ body.noevents * {
475
702
  outline: none;
476
703
  font-family: var(--global-title-font);
477
704
  font-weight: 600;
478
- font-size: 18px;
705
+ font-size: var(--global-font-size-xl);
479
706
  color: var(--global-text-secondary);
480
707
  text-shadow: 0px 1px 6px #22222283;
481
708
  width: calc(100% - 24px);
@@ -496,7 +723,7 @@ body.noevents * {
496
723
  padding: 15px;
497
724
  word-break: break-all;
498
725
  color: var(--global-text-primary);
499
- font-size: 14px;
726
+ font-size: var(--global-font-size);
500
727
  border-bottom-left-radius: 8px;
501
728
  border-bottom-right-radius: 8px;
502
729
  margin-left: 0px !important;
@@ -505,11 +732,11 @@ body.noevents * {
505
732
  .lexdialogcontent.notitle {
506
733
  border-top-left-radius: 8px;
507
734
  border-top-right-radius: 8px;
508
- padding-top: 36px;
735
+ padding-top: 24px;
509
736
  }
510
737
 
511
738
  .lexdialogcloser {
512
- font-size: 16px;
739
+ font-size: var(--global-font-size-lg);
513
740
  color: var(--global-text-secondary);
514
741
  cursor: pointer;
515
742
  margin-right: 0.4em;
@@ -530,11 +757,16 @@ body.noevents * {
530
757
  }
531
758
 
532
759
  .lexdialogcloser:active {
533
- margin-top: 0.1em;
760
+ transform: scale(0.99);
534
761
  }
535
762
 
536
763
  .lexdialogcloser.notitle:active {
537
- margin-top: 0.05em;
764
+ transform: scale(0.99);
765
+ }
766
+
767
+ .lexdialog.prompt textarea {
768
+ color: var(--global-text-secondary);
769
+ font-weight: normal;
538
770
  }
539
771
 
540
772
  /* Pocket Dialog */
@@ -549,7 +781,7 @@ body.noevents * {
549
781
 
550
782
  .lexdialog.pocket .lexdialogtitle {
551
783
  width: calc(100% - 28px);
552
- font-size: 14px;
784
+ font-size: var(--global-font-size-lg);
553
785
  background: var(--global-intense-background);
554
786
  }
555
787
 
@@ -572,6 +804,11 @@ body.noevents * {
572
804
  transition: opacity 0.2s;
573
805
  }
574
806
 
807
+ /* Suppose any child will be a div.. */
808
+ .lexdialog.pocket .lexdialogcontent:not(:has(div)) {
809
+ padding: 0px;
810
+ }
811
+
575
812
  .lexdialog.pocket.minimized .lexdialogtitle {
576
813
  border-bottom-left-radius: 8px;
577
814
  border-bottom-right-radius: 8px;
@@ -612,7 +849,7 @@ body.noevents * {
612
849
  }
613
850
 
614
851
  .lexdialogtitle {
615
- text-shadow: 0px 2px 4px #8e8f9483;
852
+ text-shadow: 0px 2px 2px #8d8d8d34;
616
853
  }
617
854
 
618
855
  .lexpopup {
@@ -700,7 +937,7 @@ body.noevents * {
700
937
  .lexbranchtitle {
701
938
  font-family: var(--global-title-font);
702
939
  font-weight: 600;
703
- font-size: 15px;
940
+ font-size: var(--global-font-size-lg);
704
941
  color: var(--global-text-primary);
705
942
  background-color: var(--global-color-secondary);
706
943
  text-shadow: 0px 1px 6px #5554547c;
@@ -770,7 +1007,7 @@ body.noevents * {
770
1007
 
771
1008
  .lexbranch .switch-branch-button {
772
1009
  float: right;
773
- font-size: 11px;
1010
+ font-size: var(--global-font-size-sm);
774
1011
  margin: 8px 6px -4px 2px;
775
1012
  transition: 0.1s;
776
1013
  }
@@ -783,7 +1020,7 @@ body.noevents * {
783
1020
  .lexbranchtitle {
784
1021
  color: var(--global-text-secondary);
785
1022
  background-color: var(--global-color-secondary);
786
- text-shadow: 0px 1px 6px #afafaf7c;
1023
+ text-shadow: 0px 2px 2px #e0e0e03a;
787
1024
  }
788
1025
 
789
1026
  .lexbranch.closed .lexbranchtitle {
@@ -887,7 +1124,7 @@ body.noevents * {
887
1124
  color: var(--global-text-secondary);
888
1125
  }
889
1126
 
890
- .lexwidget input:not(.lexcheckbox, .lextoggle) {
1127
+ .lexwidget input:not(.lexcheckbox, .lextoggle, .lexrangeslider) {
891
1128
  font-family: var(--global-font);
892
1129
  background: none;
893
1130
  padding: 3px;
@@ -947,9 +1184,9 @@ body.noevents * {
947
1184
 
948
1185
  .lexwidget .inputicon {
949
1186
  padding: 6px;
950
- font-size: 10px;
951
- margin-top: 2px;
952
- margin-left: 2px;
1187
+ font-size: var(--global-font-size-sm);
1188
+ align-self: center;
1189
+ text-align: center;
953
1190
  }
954
1191
 
955
1192
  .lexwidget textarea {
@@ -1013,8 +1250,8 @@ body.noevents * {
1013
1250
  width: fit-content;
1014
1251
  width: -moz-fit-content;
1015
1252
  color: var(--global-text-secondary);
1016
- font-weight: 800;
1017
- font-size: 14px;
1253
+ font-weight: 600;
1254
+ font-size: var(--global-font-size);
1018
1255
  margin: 12px;
1019
1256
  padding: 2px;
1020
1257
  padding-left: 12px;
@@ -1040,7 +1277,7 @@ body.noevents * {
1040
1277
  margin-top: 0.3em;
1041
1278
  margin-right: 0.7em;
1042
1279
  color: var(--global-selected-light);
1043
- font-size: 11px;
1280
+ font-size: var(--global-font-size-sm);
1044
1281
  }
1045
1282
 
1046
1283
  .lextitle.link {
@@ -1080,7 +1317,7 @@ body.noevents * {
1080
1317
  :root[data-theme="light"] {
1081
1318
  .lexbutton {
1082
1319
  --button-color: var(--global-button-color);
1083
- border: 1px solid var(--global-color-terciary) !important;
1320
+ border: 1px solid var(--global-color-terciary);
1084
1321
  }
1085
1322
 
1086
1323
  .lexbutton.selected {
@@ -1106,12 +1343,14 @@ body.noevents * {
1106
1343
  padding-inline: 12px;
1107
1344
  }
1108
1345
 
1346
+ .lexbutton span {
1347
+ align-items: center;
1348
+ }
1349
+
1109
1350
  .lexbutton span:has(.lexbadge) {
1110
1351
  display: inline-flex;
1111
1352
  flex-wrap: nowrap;
1112
- flex-shrink: 0;
1113
1353
  justify-content: center;
1114
- align-items: center;
1115
1354
  gap: 0.4rem;
1116
1355
  }
1117
1356
 
@@ -1126,7 +1365,7 @@ body.noevents * {
1126
1365
 
1127
1366
  .lexbutton a {
1128
1367
  margin-left: 0px;
1129
- font-size: 10px;
1368
+ font-size: var(--global-font-size-sm);
1130
1369
  }
1131
1370
 
1132
1371
  .lexbutton.array span {
@@ -1212,7 +1451,7 @@ body.noevents * {
1212
1451
  }
1213
1452
 
1214
1453
  .lexcombobuttons .lexbutton.combo a {
1215
- font-size: 11px;
1454
+ font-size: var(--global-font-size-sm);
1216
1455
  }
1217
1456
 
1218
1457
  /* Dropdown (Combo) */
@@ -1236,12 +1475,12 @@ body.noevents * {
1236
1475
  }
1237
1476
 
1238
1477
  .lexdropdown .lexfilter a {
1239
- font-size: 10px;
1478
+ font-size: var(--global-font-size-sm);
1240
1479
  padding-inline: 4px;
1241
1480
  }
1242
1481
 
1243
1482
  .lexdropdown ul .lexlistitem {
1244
- font-size: 11px;
1483
+ font-size: var(--global-font-size-sm);
1245
1484
  }
1246
1485
 
1247
1486
  .lexdropdown .option {
@@ -1375,16 +1614,15 @@ body.noevents * {
1375
1614
  position: relative;
1376
1615
  width: 1.5em;
1377
1616
  height: 1.5em;
1378
- padding: 0.15rem;
1617
+ padding: 0.12rem;
1379
1618
  display: inline-block;
1380
1619
  background-color: var(--global-color-primary);
1381
1620
  color: #fff;
1382
1621
  border-width: 1px;
1383
1622
  border-style: solid;
1384
1623
  border-color: color-mix(in srgb, var(--checkbox-color) 50%, transparent);
1385
- vertical-align: -3px;
1386
1624
  border-radius: 4px;
1387
- margin: 0 4px;
1625
+ margin: auto 4px;
1388
1626
  text-align: center;
1389
1627
  -webkit-appearance: none;
1390
1628
  -moz-appearance: none;
@@ -1406,7 +1644,6 @@ body.noevents * {
1406
1644
  width: 100%;
1407
1645
  height: 100%;
1408
1646
  background-color: currentColor;
1409
- font-size: 1rem;
1410
1647
  line-height: .75;
1411
1648
  transition: clip-path .3s .1s,opacity .1s .1s,rotate .3s .1s,translate .3s .1s;
1412
1649
  display: block;
@@ -1586,6 +1823,65 @@ body.noevents * {
1586
1823
  margin-top: -1px;
1587
1824
  }
1588
1825
 
1826
+ /* Toggle Widget */
1827
+
1828
+ .lexradiogroup {
1829
+ width: 100% !important;
1830
+ display: flex;
1831
+ flex-direction: column;
1832
+ }
1833
+
1834
+ .lexradiogroup span {
1835
+ font-weight: 600;
1836
+ }
1837
+
1838
+ .lexradiogroup .lexradiogroupitem {
1839
+ display: flex;
1840
+ padding: 2px;
1841
+ gap: 0.65em;
1842
+ }
1843
+
1844
+ .lexradiogroup .lexradiogroupitem span {
1845
+ font-weight: unset;
1846
+ }
1847
+
1848
+ .lexradiogroup .lexradiogroupitem button {
1849
+ width: 14px;
1850
+ height: 14px;
1851
+ min-width: 14px !important;
1852
+ min-height: 14px !important;
1853
+ padding: 0;
1854
+ margin: auto 0;
1855
+ border-radius: 7px;
1856
+ background-color: var(--global-intense-background);
1857
+ border: 1px solid var(--global-text-secondary) !important;
1858
+ }
1859
+
1860
+ .lexradiogroup .lexradiogroupitem button:disabled {
1861
+ border-color: var(--global-color-quaternary) !important;
1862
+ }
1863
+
1864
+ .lexradiogroup .lexradiogroupitem button span {
1865
+ width: 10px;
1866
+ height: 10px;
1867
+ min-width: 10px;
1868
+ min-height: 10px;
1869
+ border-radius: 50%;
1870
+ pointer-events: none;
1871
+ margin: auto;
1872
+ }
1873
+
1874
+ .lexradiogroup .lexradiogroupitem button.checked span {
1875
+ background-color: var(--global-text-primary);
1876
+ }
1877
+
1878
+ /* Colors */
1879
+ .lexradiogroup.primary .lexradiogroupitem button.checked span { background-color: var(--global-selected); }
1880
+ .lexradiogroup.secondary .lexradiogroupitem button.checked span { background-color: var(--global-selected-light); }
1881
+ .lexradiogroup.accent .lexradiogroupitem button.checked span { background-color: var(--global-color-accent); }
1882
+ .lexradiogroup.warning .lexradiogroupitem button.checked span { background-color: var(--global-color-warning); }
1883
+ .lexradiogroup.error .lexradiogroupitem button.checked span { background-color: var(--global-color-error); }
1884
+
1589
1885
  /* Input Color Widget */
1590
1886
 
1591
1887
  .lexcolor {
@@ -1636,7 +1932,7 @@ body.noevents * {
1636
1932
 
1637
1933
  .lexvector a {
1638
1934
  width: 48px;
1639
- font-size: 11px;
1935
+ font-size: var(--global-font-size-sm);
1640
1936
  margin-left: 6px;
1641
1937
  margin-right: 6px;
1642
1938
  }
@@ -1674,7 +1970,7 @@ body.noevents * {
1674
1970
  width: 2px;
1675
1971
  right: 0.25em;
1676
1972
  top: 25%;
1677
- font-size: 11px;
1973
+ font-size: var(--global-font-size-sm);
1678
1974
  color: var(--global-text-secondary);
1679
1975
  z-index: 11;
1680
1976
  }
@@ -1744,6 +2040,7 @@ input[type=number] {
1744
2040
 
1745
2041
  .lexwidget .numberbox {
1746
2042
  display: grid;
2043
+ width: calc(100% - 4px);
1747
2044
  background-color: var(--global-button-color);
1748
2045
  border: 2px solid var(--global-color-transparent);
1749
2046
  border-radius: 6px;
@@ -1766,6 +2063,10 @@ input[type=number] {
1766
2063
  pointer-events: none;
1767
2064
  }
1768
2065
 
2066
+ .lexnumber .vecinput {
2067
+ width: calc(100% - 12px); /* remove padding, margin, and border */
2068
+ }
2069
+
1769
2070
  .lexinputmeasure {
1770
2071
  font-family: var(--global-font);
1771
2072
  font-size: var(--global-font-size);
@@ -1777,6 +2078,7 @@ input[type=number] {
1777
2078
  -webkit-appearance: none;
1778
2079
  border: none !important;
1779
2080
  width: calc(100% - 12px);
2081
+ height: 1px;
1780
2082
  outline: none;
1781
2083
  opacity: 0.7;
1782
2084
  transition: opacity .2s;
@@ -1788,10 +2090,6 @@ input[type=number] {
1788
2090
  opacity: 1;
1789
2091
  }
1790
2092
 
1791
- input[type="range"] {
1792
- height: 1px;
1793
- }
1794
-
1795
2093
  .lexinputslider::-moz-range-track {
1796
2094
  height: 1px;
1797
2095
  background: #a19dc9;
@@ -1832,6 +2130,103 @@ input[type="range"] {
1832
2130
  /* color: red; */
1833
2131
  }
1834
2132
 
2133
+ /* Range Widget */
2134
+
2135
+ .lexrangeslider {
2136
+ --range-thumb-color: var(--global-color-primary);
2137
+ --range-thumb-size: 1rem;
2138
+ --range-progress: currentColor;
2139
+ --range-fill: 1;
2140
+ --range-thumb-padding: 0.15rem;
2141
+ --range-bg: color-mix(in oklab,currentColor 10%,#0000);
2142
+ --range-dir: 1;
2143
+ --radius-selector: 0.5rem;
2144
+ -webkit-appearance: none;
2145
+ -moz-appearance: none;
2146
+ appearance: none;
2147
+ webkit-appearance: none;
2148
+ --radius-selector-max: calc(var(--radius-selector) + var(--radius-selector) + var(--radius-selector));
2149
+ border-radius: calc(var(--radius-selector) + min(var(--range-thumb-padding),var(--radius-selector-max)));
2150
+ width: calc(100% - 4px);
2151
+ height: var(--range-thumb-size);
2152
+ border: none;
2153
+ outline: none;
2154
+ color: var(--global-text-secondary);
2155
+ background-color: #0000;
2156
+ overflow: hidden;
2157
+ padding: 0;
2158
+ cursor: pointer;
2159
+ transition: opacity .2s;
2160
+ -moz-transition: .2s;
2161
+ -webkit-transition: .2s;
2162
+ vertical-align: middle;
2163
+ }
2164
+
2165
+ /* Colors */
2166
+ .lexrangeslider.primary { color: var(--global-selected); }
2167
+ .lexrangeslider.secondary { color: var(--global-selected-light); }
2168
+ .lexrangeslider.accent { color: var(--global-color-accent); }
2169
+ .lexrangeslider.warning { color: var(--global-color-warning); }
2170
+ .lexrangeslider.error { color: var(--global-color-error); }
2171
+
2172
+ .lexrangeslider.left {
2173
+ --range-dir: -1;
2174
+ }
2175
+
2176
+ .lexrangeslider.no-fill {
2177
+ --range-fill: 0;
2178
+ --range-bg: currentColor;
2179
+ }
2180
+
2181
+ .lexrangeslider:hover {
2182
+ filter: brightness(1.1);
2183
+ }
2184
+
2185
+ .lexrangeslider::-moz-range-track {
2186
+ background-color: var(--range-bg);
2187
+ border-radius: var(--radius-selector);
2188
+ width: 100%;
2189
+ height: calc(var(--range-thumb-size)*0.5);
2190
+ }
2191
+
2192
+ .lexrangeslider::-webkit-slider-runnable-track {
2193
+ background-color: var(--range-bg);
2194
+ border-radius: var(--radius-selector);
2195
+ width: 100%;
2196
+ height: calc(var(--range-thumb-size)*0.5);
2197
+ }
2198
+
2199
+ .lexrangeslider::-webkit-slider-thumb {
2200
+ box-sizing: border-box;
2201
+ border-radius: calc(var(--radius-selector) + min(var(--range-thumb-padding),var(--radius-selector-max)));
2202
+ height: var(--range-thumb-size);
2203
+ width: var(--range-thumb-size);
2204
+ border: var(--range-thumb-padding) solid;
2205
+ -webkit-appearance: none;
2206
+ -moz-appearance: none;
2207
+ appearance: none;
2208
+ webkit-appearance: none;
2209
+ color: var(--range-progress);
2210
+ 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));
2211
+ background-color: currentColor;
2212
+ position: relative;
2213
+ top: 50%;
2214
+ transform: translateY(-50%);
2215
+ }
2216
+
2217
+ .lexrangeslider::-moz-range-thumb {
2218
+ box-sizing: border-box;
2219
+ border-radius: calc(var(--radius-selector) + min(var(--range-thumb-padding),var(--radius-selector-max)));
2220
+ height: var(--range-thumb-size);
2221
+ width: var(--range-thumb-size);
2222
+ border: var(--range-thumb-padding) solid;
2223
+ color: var(--range-progress);
2224
+ 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));
2225
+ background-color: currentColor;
2226
+ position: relative;
2227
+ top: 50%;
2228
+ }
2229
+
1835
2230
  /* Size Widget */
1836
2231
 
1837
2232
  .lexwidget .lexsizecross {
@@ -1983,7 +2378,7 @@ input[type="range"] {
1983
2378
  -moz-user-select: none;
1984
2379
  -ms-user-select: none;
1985
2380
  user-select: none;
1986
- font-size: var(--global-font-size-big);
2381
+ font-size: var(--global-font-size-lg);
1987
2382
  font-weight: 800;
1988
2383
  }
1989
2384
 
@@ -2028,9 +2423,7 @@ input[type="range"] {
2028
2423
  .lextree .lextreeitem .tree-item-icon {
2029
2424
  width: 12px;
2030
2425
  height: 12px;
2031
- margin-right: 4px;
2032
- vertical-align: middle;
2033
- margin-top: -1px;
2426
+ margin-right: 6px;
2034
2427
  }
2035
2428
 
2036
2429
  .lextree .lextreeitem.draggingover {
@@ -2050,14 +2443,12 @@ input[type="range"] {
2050
2443
  .lextree .lextreeitem a {
2051
2444
  margin-right: 6px;
2052
2445
  margin-top: 4px;
2053
- font-size: 10px;
2446
+ font-size: var(--global-font-size-sm);
2054
2447
  }
2055
2448
 
2056
2449
  .lextree .lextreeitem a.hierarchy {
2057
- font-size: 5px;
2058
2450
  margin-right: 6px;
2059
2451
  margin-top: 4px;
2060
- vertical-align: 2px;
2061
2452
  }
2062
2453
 
2063
2454
  .lextree .lextreeitem a:hover {
@@ -2070,12 +2461,11 @@ input[type="range"] {
2070
2461
  }
2071
2462
 
2072
2463
  .lextree .lextreeitem.parent a {
2073
- font-size: 10px;
2074
- vertical-align: 1px;
2464
+ font-size: var(--global-font-size-xs);
2075
2465
  }
2076
2466
 
2077
2467
  .lextree .lextreeitem .itemicon {
2078
- font-size: 10px !important;
2468
+ font-size: var(--global-font-size-sm) !important;
2079
2469
  float: right;
2080
2470
  margin-top: 7px;
2081
2471
  margin-right: 8px;
@@ -2200,16 +2590,15 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
2200
2590
 
2201
2591
  .lexbadge {
2202
2592
  border-radius: 0.35rem;
2203
- vertical-align: middle;
2204
2593
  color: #fff;
2205
2594
  font-weight: 500;
2206
2595
  border: 1px solid var(--badge-color, #14171a);
2207
2596
  width: fit-content;
2208
2597
  justify-content: center;
2209
2598
  align-items: center;
2210
- gap: .5rem;
2599
+ gap: 0.5rem;
2211
2600
  padding-inline: 0.6rem;
2212
- font-size: 0.875rem;
2601
+ font-size: var(--global-font-size);
2213
2602
  display: inline-flex;
2214
2603
  background-color: var(--badge-color, #1d232a);
2215
2604
  }
@@ -2228,11 +2617,11 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
2228
2617
  background-image: none;
2229
2618
  }
2230
2619
  /* Sizes */
2231
- .lexbadge.xs { padding-inline: 0.4rem; font-size: 0.6rem; }
2232
- .lexbadge.sm { padding-inline: 0.5rem; font-size: 0.75rem; }
2620
+ .lexbadge.xs { padding-inline: 0.4rem; font-size: var(--global-font-size-xs); }
2621
+ .lexbadge.sm { padding-inline: 0.5rem; font-size: var(--global-font-size-sm); }
2233
2622
  /* .lexbadge.md { default } */
2234
- .lexbadge.lg { padding-inline: 0.8rem; font-size: 1rem; }
2235
- .lexbadge.xl { padding-inline: 1rem; font-size: 1.125rem; }
2623
+ .lexbadge.lg { padding-inline: 0.8rem; font-size: var(--global-font-size-lg); }
2624
+ .lexbadge.xl { padding-inline: 1rem; font-size: var(--global-font-size-xl) }
2236
2625
 
2237
2626
  /* Menu Bar */
2238
2627
 
@@ -2242,7 +2631,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
2242
2631
  display: flex;
2243
2632
  height: 100%;
2244
2633
  color: var(--global-text-primary);
2245
- font-size: 14px;
2634
+ font-size: var(--global-font-size);
2246
2635
  font-weight: 500;
2247
2636
  }
2248
2637
 
@@ -2278,17 +2667,30 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
2278
2667
  margin-top: 0.05em;
2279
2668
  }
2280
2669
 
2281
- .lexcontextmenu {
2670
+ .lexmenubox {
2282
2671
  position: absolute;
2283
2672
  padding-right: 8px;
2284
2673
  z-index: 1001;
2285
- box-shadow: 0 0 6px #2c2c2c7c !important;
2286
- background-color: var(--global-blur-background);
2287
- border: 1px solid #91909036;
2674
+ background-color: #111111f3;
2675
+ border: 1px solid #aaaaaa48;
2288
2676
  border-radius: 6px;
2677
+ transition: all 0.15s cubic-bezier(.42,.97,.52,1.19);
2678
+ transform: translate(-2px, -10px);
2679
+ opacity: 0;
2289
2680
  }
2290
2681
 
2291
- .lexcontextmenu:before {
2682
+ :root[data-theme="light"] {
2683
+ .lexmenubox {
2684
+ background-color: #fffffff3;
2685
+ box-shadow: 0px 6px 7px -3px #a7a7a7b7 !important;
2686
+ }
2687
+ }
2688
+
2689
+ .lexmenubox[data-submenu] {
2690
+ transform: translate(-10px, -2px);
2691
+ }
2692
+
2693
+ .lexmenubox:before {
2292
2694
  content: "";
2293
2695
  position: absolute;
2294
2696
  width: 100%;
@@ -2301,18 +2703,22 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
2301
2703
  z-index: -1;
2302
2704
  }
2303
2705
 
2304
- .lexcontextmenu:focus {
2706
+ .lexmenubox[data-open]{
2707
+ transform: translate(0, 0);
2708
+ opacity: 1;
2709
+ }
2710
+
2711
+ .lexmenubox:focus {
2305
2712
  outline: none;
2306
2713
  }
2307
2714
 
2308
- .lexcontextmenu .lexcontextmenuentry {
2715
+ .lexmenubox .lexmenuboxentry {
2309
2716
  font-size: var(--global-font-size);
2310
2717
  width: 100%;
2311
2718
  color: var(--global-text-primary);
2312
- padding: 4px;
2719
+ padding: 6px;
2313
2720
  padding-left: 8px;
2314
2721
  padding-right: 0px;
2315
- padding-bottom: 6px;
2316
2722
  cursor: pointer;
2317
2723
  -webkit-user-select: none;
2318
2724
  -moz-user-select: none;
@@ -2329,96 +2735,96 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
2329
2735
  position: relative;
2330
2736
  }
2331
2737
 
2332
- .lexcontextmenu .lexcontextmenuentry:first-child {
2738
+ .lexmenubox .lexmenuboxentry.disabled {
2739
+ color: var(--global-text-terciary);
2740
+ cursor: default;
2741
+ }
2742
+
2743
+ .lexmenubox .lexmenuboxentry:first-child {
2333
2744
  border-top-right-radius: 5px;
2334
2745
  border-top-left-radius: 5px;
2335
2746
  }
2336
2747
 
2337
- .lexcontextmenu .lexcontextmenuentry:last-child {
2748
+ .lexmenubox .lexmenuboxentry:last-child {
2338
2749
  border-bottom-right-radius: 5px;
2339
2750
  border-bottom-left-radius: 5px;
2340
2751
  }
2341
2752
 
2342
- .lexcontextmenu .lexcontextmenuentrycontainer {
2753
+ .lexmenubox .lexmenuboxentrycontainer {
2343
2754
  display: flex;
2344
2755
  flex-direction: row;
2345
2756
  }
2346
2757
 
2347
- .lexcontextmenu .lexcontextmenuentry .lexentryname {
2758
+ .lexmenubox .lexmenuboxentry .lexentryname {
2348
2759
  margin-right: 32px;
2349
- margin-top: 2px;
2350
2760
  }
2351
2761
 
2352
- .lexcontextmenu .lexcontextmenuentry.noicon .lexentryname {
2762
+ .lexmenubox .lexmenuboxentry.noicon .lexentryname {
2353
2763
  margin-left: 10px;
2354
2764
  }
2355
2765
 
2356
2766
  /* normal icons */
2357
- .lexcontextmenu .lexcontextmenuentry a {
2358
- font-size: 10px;
2767
+ .lexmenubox .lexmenuboxentry a {
2768
+ font-size: var(--global-font-size-sm);
2359
2769
  float: left;
2360
2770
  margin-right: 13px;
2361
- margin-top: 9px;
2362
2771
  margin-left: 9px;
2772
+ align-content: center;
2363
2773
  min-width: 10px;
2364
2774
  }
2365
2775
 
2366
2776
  /* submenu specified arrow */
2367
- .lexcontextmenu .lexcontextmenuentry a.fa-xs {
2777
+ .lexmenubox .lexmenuboxentry a.fa-xs {
2368
2778
  float: right;
2369
2779
  margin-right: 8px;
2370
2780
  }
2371
2781
 
2372
- .lexcontextmenu .lexcontextmenuentry:hover {
2782
+ .lexmenubox .lexmenuboxentry:not(.disabled):hover {
2373
2783
  background-color: var(--global-selected);
2374
2784
  color: #f5f5f5;
2375
2785
  }
2376
2786
 
2377
- .lexcontextmenu .lexcontextmenuentry:active {
2787
+ .lexmenubox .lexmenuboxentry:active {
2378
2788
  color: var(--global-text-secondary);
2379
2789
  }
2380
2790
 
2381
- .lexcontextmenu .lexcontextmenuentry input {
2791
+ .lexmenubox .lexmenuboxentry input {
2382
2792
  float: left;
2383
2793
  margin-right: 28px;
2384
2794
  margin-left: 5px;
2385
2795
  }
2386
2796
 
2387
- .lexcontextmenu .lexcontextmenuentry:hover input::after {
2797
+ .lexmenubox .lexmenuboxentry:hover input::after {
2388
2798
  border-color: #f5f5f5;
2389
2799
  }
2390
2800
 
2391
- .lexcontextmenu .lexseparator {
2801
+ .lexmenubox .lexseparator {
2392
2802
  margin: 2px 0 2px;
2393
- width: -moz-calc(100% + 14px);
2394
- width: -webkit-calc(100% + 14px);
2395
- width: calc(100% + 14px);
2803
+ width: -moz-calc(100% + 8px);
2804
+ width: -webkit-calc(100% + 8px);
2805
+ width: calc(100% + 8px);
2806
+ border-color: var(--global-text-terciary);
2807
+ opacity: 0.25;
2396
2808
  }
2397
2809
 
2398
- .lexcontextmenu .lexentryshort {
2399
- font-size: 10px;
2400
- float: right;
2401
- margin-top: 3px;
2810
+ .lexmenubox .lexentryshort {
2811
+ font-size: var(--global-font-size-xs);
2402
2812
  font-weight: bold;
2403
- color: var(--global-text-primary);
2404
- margin-right: 12px;
2405
2813
  text-align: right;
2814
+ float: right;
2815
+ align-content: center;
2816
+ color: var(--global-text-terciary);
2817
+ margin-right: 12px;
2406
2818
  }
2407
2819
 
2408
2820
  .lexmenubar .lexmenubuttons {
2409
- display: flex;
2821
+ display: inline-flex;
2410
2822
  background-color: var(--global-color-secondary);
2411
- margin-top: 10px;
2412
- margin-bottom: 10px;
2823
+ height: 75%;
2824
+ margin: auto;
2413
2825
  border-radius: 6px;
2414
2826
  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;
2827
+ font-size: var(--global-font-size-lg);
2422
2828
  }
2423
2829
 
2424
2830
  .lexmenubar .lexmenubuttons.right {
@@ -2427,12 +2833,11 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
2427
2833
  }
2428
2834
 
2429
2835
  .lexmenubar .lexmenubutton {
2430
- justify-content: center;
2431
- padding: 8px;
2432
- padding-top: 0.6em;
2433
2836
  color: var(--global-text-secondary);
2837
+ padding-inline: 0.45em;
2434
2838
  cursor: pointer;
2435
- line-height: 10px;
2839
+ place-content: center;
2840
+ justify-items: center;
2436
2841
  -webkit-user-select: none;
2437
2842
  -moz-user-select: none;
2438
2843
  -ms-user-select: none;
@@ -2448,38 +2853,216 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
2448
2853
  cursor: default;
2449
2854
  }
2450
2855
 
2451
- /* Context Menu */
2856
+ /* Context Menu */
2857
+
2858
+ .lexcontextmenu {
2859
+ z-index: 102;
2860
+ position: absolute;
2861
+ padding-right: 20px;
2862
+ border-radius: 6px;
2863
+ box-shadow: 0 0 6px rgba(46, 46, 46, 0.596) !important;
2864
+ background-color: var(--global-blur-background);
2865
+ border: 1px solid #91909036;
2866
+ }
2867
+
2868
+ .lexcontextmenu:before {
2869
+ content: "";
2870
+ position: absolute;
2871
+ width: 100%;
2872
+ height: 100%;
2873
+ top: 0;
2874
+ left: 0;
2875
+ -webkit-backdrop-filter: blur(10px);
2876
+ backdrop-filter: blur(10px);
2877
+ z-index: -1;
2878
+ border-radius: 6px;
2879
+ }
2880
+
2881
+ .lexcontextmenu .lexmenuboxentry {
2882
+ width: 100%;
2883
+ color: var(--global-text-secondary);
2884
+ padding: 3px;
2885
+ padding-left: 10px;
2886
+ padding-right: 10px;
2887
+ padding-bottom: 4px;
2888
+ cursor: pointer;
2889
+ -webkit-user-select: none;
2890
+ -moz-user-select: none;
2891
+ -ms-user-select: none;
2892
+ user-select: none;
2893
+ }
2894
+
2895
+ .lexcontextmenu .lexmenuboxentry:first-child {
2896
+ border-top-left-radius: 5px;
2897
+ border-top-right-radius: 5px;
2898
+ }
2899
+
2900
+ .lexcontextmenu .lexmenuboxentry:last-child {
2901
+ border-bottom-left-radius: 5px;
2902
+ border-bottom-right-radius: 5px;
2903
+ }
2904
+
2905
+ .lexcontextmenu .lexmenuboxentry.cmtitle {
2906
+ background: light-dark(var(--global-color-terciary), var(--global-intense-background));
2907
+ font-weight: bold;
2908
+ cursor: default;
2909
+ }
2910
+
2911
+ .lexcontextmenu .lexmenuboxentry.cmseparator {
2912
+ height: 1px;
2913
+ border-bottom: 1px solid var(--global-color-terciary);
2914
+ padding-bottom: 0;
2915
+ padding-top: 0;
2916
+ margin-top: -4px;
2917
+ }
2918
+
2919
+ .lexcontextmenu .lexmenuboxentry .lexentryname {
2920
+ margin-right: 10px;
2921
+ margin-top: 2px;
2922
+ font-size: var(--global-font-size);
2923
+ white-space: nowrap;
2924
+ overflow: hidden;
2925
+ text-overflow: ellipsis;
2926
+ }
2927
+
2928
+ .lexcontextmenu .lexmenuboxentry .lexentryname.disabled {
2929
+ color: light-dark(#808080b0, #c0c4cb53);
2930
+ }
2931
+
2932
+ /* normal icons */
2933
+ .lexcontextmenu .lexmenuboxentry a {
2934
+ float: right;
2935
+ margin-right: 0px;
2936
+ margin-top: 10px;
2937
+ font-size: var(--global-font-size-xs);
2938
+ }
2939
+
2940
+ /* submenu specified arrow */
2941
+ .lexcontextmenu .lexmenuboxentry a.fa-xs {
2942
+ float: right;
2943
+ margin-top: -9px;
2944
+ }
2945
+
2946
+ .lexcontextmenu .lexmenuboxentry:hover:not(.cmtitle) {
2947
+ background-color: var(--global-selected);
2948
+ color: #f5f5f5;
2949
+ }
2950
+
2951
+ .lexcontextmenu .lexmenuboxentry:active:not(.cmtitle, .cmseparator) {
2952
+ padding-top: 0.22em;
2953
+ color: #b7b7cba4;
2954
+ }
2955
+
2956
+ .lexcontextmenu .lexseparator {
2957
+ margin: 3px 0 3px 10px;
2958
+ }
2959
+
2960
+ .lexcontextmenu .lexentryshort {
2961
+ font-size: var(--global-font-size-xs);
2962
+ float: right;
2963
+ font-weight: bold;
2964
+ color: #979aa0e3;
2965
+ }
2966
+
2967
+ /* Side Bar */
2968
+
2969
+ .lexsidebar {
2970
+ width: calc(100% - 20px);
2971
+ height: 100%;
2972
+ padding: 10px;
2973
+ display: flex;
2974
+ flex-direction: column;
2975
+ gap: 0.2rem;
2976
+ }
2977
+
2978
+ .lexsidebar svg, .lexsidebar svg path {
2979
+ width: 1rem;
2980
+ height: 1rem;
2981
+ --color: var(--global-text-secondary);
2982
+ fill: var(--color);
2983
+ stroke: var(--color);
2984
+ display: block;
2985
+ }
2986
+
2987
+ .lexsidebar .lexwidget {
2988
+ width: 100% !important;
2989
+ padding: 0 !important;
2990
+ }
2991
+
2992
+ .lexsidebarcontent {
2993
+ width: 100%;
2994
+ padding-block-start: 4px;
2995
+ padding-block-end: 4px;
2996
+ display: flex;
2997
+ flex-direction: column;
2998
+ overflow-y: scroll;
2999
+ overflow-x: hidden;
3000
+ }
3001
+
3002
+ .lexsidebar .lexsidebargroup {
3003
+ display: flex;
3004
+ flex-direction: column;
3005
+ gap: 0.1em;
3006
+ }
3007
+
3008
+ .lexsidebar .lexsidebargroup:nth-child(n+2) {
3009
+ margin-top: 0.15rem;
3010
+ }
3011
+
3012
+ .lexsidebar .lexsidebarseparator {
3013
+ background-color: #5251514d;
3014
+ width: 100%;
3015
+ height: 1px;
3016
+ margin: 0 auto;
3017
+ margin-top: 0.4rem;
3018
+ margin-bottom: 0.4rem;
3019
+ }
3020
+
3021
+ .lexsidebar .lextext {
3022
+ transform: translate(0, 0);
3023
+ opacity: 1;
3024
+ 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);
3025
+ }
3026
+
3027
+ .lexsidebar .lexsidebargrouptitle {
3028
+ font-size: var(--global-font-size-sm);
3029
+ font-weight: 600;
3030
+ color: var(--global-text-secondary);
3031
+ overflow: hidden;
3032
+ display: flex;
3033
+ }
3034
+
3035
+ .lexsidebar .lexsidebargrouptitle div {
3036
+ transform: translate(0, 0);
3037
+ opacity: 1;
3038
+ 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);
3039
+ height: 44px;
3040
+ max-height: 44px;
3041
+ align-content: center;
3042
+ }
3043
+
3044
+ .lexsidebar .lexsidebargrouptitle a {
3045
+ margin: auto 0;
3046
+ margin-left: auto;
3047
+ margin-right: 8px;
3048
+ 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);
3049
+ }
2452
3050
 
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;
3051
+ .lexsidebar.collapsing .lexsidebargrouptitle *, .lexsidebar.collapsing .lextext {
3052
+ max-height: 0px;
3053
+ transform: translate(0, -24px);
3054
+ opacity: 0;
2461
3055
  }
2462
3056
 
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;
3057
+ .lexsidebar.collapsed .lexsidebargrouptitle *, .lexsidebar.collapsed .lextext {
3058
+ display: none;
2474
3059
  }
2475
3060
 
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;
3061
+ .lexsidebar .lexsidebarentry {
3062
+ width: calc(100% - 16px);
3063
+ padding: 6px;
3064
+ padding-inline: 8px;
3065
+ border-radius: 8px;
2483
3066
  cursor: pointer;
2484
3067
  -webkit-user-select: none;
2485
3068
  -moz-user-select: none;
@@ -2487,157 +3070,209 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
2487
3070
  user-select: none;
2488
3071
  }
2489
3072
 
2490
- .lexcontextmenubox .lexcontextmenuentry:first-child {
2491
- border-top-left-radius: 5px;
2492
- border-top-right-radius: 5px;
3073
+ .lexsidebar .lexsidebarentry span {
3074
+ font-size: var(--global-font-size);
3075
+ overflow: hidden;
3076
+ white-space: nowrap;
3077
+ text-overflow: ellipsis;
3078
+ align-self: center;
2493
3079
  }
2494
3080
 
2495
- .lexcontextmenubox .lexcontextmenuentry:last-child {
2496
- border-bottom-left-radius: 5px;
2497
- border-bottom-right-radius: 5px;
3081
+ .lexsidebar .lexsidebarentry:hover {
3082
+ background-color: var(--global-color-secondary);
2498
3083
  }
2499
3084
 
2500
- .lexcontextmenubox .lexcontextmenuentry.cmtitle {
2501
- background: light-dark(var(--global-color-terciary), var(--global-intense-background));
2502
- font-weight: bold;
2503
- cursor: default;
3085
+ .lexsidebar .lexsidebarentry:active {
3086
+ transform: scale(0.99);
2504
3087
  }
2505
3088
 
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;
3089
+ .lexsidebar .lexsidebarentry div {
3090
+ display: flex;
3091
+ gap: 0.8em;
3092
+ margin: 0;
3093
+ height: 22px;
3094
+ opacity: 0.95;
2512
3095
  }
2513
3096
 
2514
- .lexcontextmenubox .lexcontextmenuentry .lexentryname {
2515
- margin-right: 10px;
2516
- margin-top: 2px;
2517
- font-size: var(--global-font-size);
2518
- white-space: nowrap;
3097
+ .lexsidebar .lexsidebarentry div i {
3098
+ min-width: 22px;
3099
+ max-width: 22px;
3100
+ margin: auto 0;
3101
+ text-align: center;
3102
+ margin-left: -2px;
3103
+ }
3104
+
3105
+ .lexsidebar .lexsidebarentry div a:not(.lexicon) {
2519
3106
  overflow: hidden;
3107
+ white-space: nowrap;
2520
3108
  text-overflow: ellipsis;
3109
+ align-content: center;
2521
3110
  }
2522
3111
 
2523
- .lexcontextmenubox .lexcontextmenuentry .lexentryname.disabled {
2524
- color: light-dark(#808080b0, #c0c4cb53);
3112
+ .lexsidebar .lexsidebarentry a.lexicon {
3113
+ margin-left: auto;
2525
3114
  }
2526
3115
 
2527
- /* normal icons */
2528
- .lexcontextmenubox .lexcontextmenuentry a {
2529
- float: right;
2530
- margin-right: 0px;
2531
- margin-top: 10px;
2532
- font-size: 10px;
3116
+ .lexsidebar .lexsidebarentry > * {
3117
+ color: var(--global-text-primary);
3118
+ font-size: var(--global-font-size);
2533
3119
  }
2534
3120
 
2535
- /* submenu specified arrow */
2536
- .lexcontextmenubox .lexcontextmenuentry a.fa-xs {
2537
- float: right;
2538
- margin-top: -8px;
3121
+ .lexsidebar .lexsidebarsubentrycontainer {
3122
+ width: calc(100% - 48px);
3123
+ margin-block-start: 4px;
3124
+ margin-block-end: 8px;
3125
+ margin-left: 16px;
3126
+ padding-inline: 16px;
3127
+ display: flex;
3128
+ flex-direction: column;
3129
+ -webkit-user-select: none;
3130
+ -moz-user-select: none;
3131
+ -ms-user-select: none;
3132
+ user-select: none;
3133
+ opacity: 0.95;
3134
+ border-left: 1px solid #5251514d;
2539
3135
  }
2540
3136
 
2541
- .lexcontextmenubox .lexcontextmenuentry:hover:not(.cmtitle) {
2542
- background-color: var(--global-selected);
2543
- color: #f5f5f5;
3137
+ .lexsidebar .lexsidebarsubentrycontainer:not(:has(div)) {
3138
+ margin: 0px;
2544
3139
  }
2545
3140
 
2546
- .lexcontextmenubox .lexcontextmenuentry:active:not(.cmtitle, .cmseparator) {
2547
- padding-top: 0.22em;
2548
- color: #b7b7cba4;
3141
+ .lexsidebar.collapsing .lexsidebarsubentrycontainer {
3142
+ max-height: 0px;
3143
+ transform: translate(-8px, -8px);
3144
+ opacity: 0;
3145
+ margin: 0;
2549
3146
  }
2550
3147
 
2551
- .lexcontextmenubox .lexseparator {
2552
- margin: 3px 0 3px 10px;
3148
+ .lexsidebar .lexsidebarsubentrycontainer .lexsidebarentry {
3149
+ display: flex;
3150
+ gap: 0.8em;
2553
3151
  }
2554
3152
 
2555
- .lexcontextmenubox .lexentryshort {
2556
- font-size: 9px;
2557
- float: right;
2558
- /* margin-top: -13px; */
2559
- font-weight: bold;
2560
- color: #979aa0e3;
3153
+ .lexsidebar.collapsed .lexsidebarsubentrycontainer {
3154
+ display: none;
2561
3155
  }
2562
3156
 
2563
- /* Side Bar */
3157
+ .lexsidebar.collapsed .lexsidebarcontent div a {
3158
+ display: none;
3159
+ }
2564
3160
 
2565
- .lexsidebar {
2566
- text-align: center;
3161
+ /* .lexsidebar .lexsidebarentry a:hover {
3162
+ border: 3px solid var(--global-selected);
3163
+ background-color: var(--global-button-color-hovered);
2567
3164
  }
2568
3165
 
2569
- .lexsidebar .lexsidebarentry {
2570
- width: 64px;
2571
- height: 64px;
2572
- margin-top: -6px;
3166
+ .lexsidebar .lexsidebarentry a:active {
3167
+ font-size: 17px;
2573
3168
  }
2574
3169
 
3170
+ .lexsidebar .lexsidebarentry.selected a {
3171
+ background-color: var(--global-button-color-hovered);
3172
+ border: 4px solid var(--global-selected);
3173
+ } */
3174
+
2575
3175
  .lexsidebar .lexsidebarentry .lexsidebarentrydesc {
2576
3176
  position: absolute;
2577
- margin-left: 12px;
3177
+ margin-top: -3px;
3178
+ margin-left: 32px;
2578
3179
  font-weight: 600;
2579
- margin-top: 13px;
2580
- background-color: #afafaf;
3180
+ background-color: var(--global-text-secondary);
2581
3181
  color: var(--global-color-primary);
2582
- font-size: 16px;
3182
+ font-size: var(--global-font-size);
2583
3183
  border-radius: 6px;
2584
3184
  text-align: center;
2585
3185
  opacity: 0;
3186
+ transform: translate(-12px, 0);
2586
3187
  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;
3188
+ padding: 4px 8px;
3189
+ transition: opacity ease-in 0.15s, transform ease-in 0.15s;
3190
+ pointer-events: none;
2593
3191
  }
2594
3192
 
2595
- .lexsidebar .lexsidebarentry:first-child {
2596
- padding-top: 16px;
3193
+ .lexsidebar.collapsed .lexsidebarentry:hover .lexsidebarentrydesc {
3194
+ opacity: 1;
3195
+ transform: translate(0, 0);
2597
3196
  }
2598
3197
 
2599
- .lexsidebar .lexsidebarentry button {
3198
+ .lexsidebar .lexsidebarfooter, .lexsidebar .lexsidebarheader {
2600
3199
  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;
3200
+ height: 36px;
3201
+ display: flex;
3202
+ border-radius: 8px;
3203
+ padding: 8px;
2608
3204
  cursor: pointer;
3205
+ -webkit-user-select: none;
3206
+ -moz-user-select: none;
3207
+ -ms-user-select: none;
3208
+ user-select: none;
3209
+ transition: background-color 0.3s ease-out;
2609
3210
  }
2610
3211
 
2611
- .lexsidebar .lexsidebarentry button:hover {
2612
- border: 3px solid var(--global-selected);
2613
- background-color: var(--global-button-color-hovered);
3212
+ .lexsidebar .lexsidebarfooter:hover, .lexsidebar .lexsidebarheader:hover {
3213
+ background-color: var(--global-color-secondary);
2614
3214
  }
2615
3215
 
2616
- .lexsidebar .lexsidebarentry button:active {
2617
- font-size: 17px;
3216
+ .lexsidebar.collapsing .lexsidebarheader {
3217
+ background-color: var(--global-selected);
2618
3218
  }
2619
3219
 
2620
- .lexsidebar .lexsidebarentry.selected button {
2621
- background-color: var(--global-button-color-hovered);
2622
- border: 4px solid var(--global-selected);
3220
+ .lexsidebar .lexsidebarfooter:active, .lexsidebar .lexsidebarheader:active {
3221
+ transform: scale(0.99);
2623
3222
  }
2624
3223
 
2625
- .lexsidebar .lexsidebarfooter {
2626
- position: absolute;
2627
- bottom: 0;
3224
+ .lexsidebar .lexavatar {
3225
+ background-color: var(--global-intense-background);
2628
3226
  }
2629
3227
 
2630
- .lexsidebar .lexsidebarfooter .lexsidebarentry button {
2631
- width: calc(100% - 16px);
2632
- height: calc(100% - 16px);
2633
- background-color: unset;
2634
- font-size: 14px;
3228
+ .lexsidebar .lexavatar:has(svg) {
3229
+ border: 1px solid #ffffff18;
3230
+ }
3231
+
3232
+ .lexsidebar .lexsidebarfooter div, .lexsidebar .lexsidebarheader div {
3233
+ width: calc(100% - 88px);
3234
+ height: 100%;
3235
+ padding-inline: 12px;
3236
+ justify-content: center;
3237
+ display: flex;
3238
+ flex-direction: column;
3239
+ transition: width 0.3s cubic-bezier(0,0,.2,1), padding-inline 0.3s cubic-bezier(0,0,.2,1);
2635
3240
  }
2636
3241
 
2637
- .lexsidebar .lexsidebarfooter .lexsidebarentry button:active {
2638
- font-size: 13px;
3242
+ .lexsidebar .lexsidebarfooter div span, .lexsidebar .lexsidebarheader div span {
3243
+ font-size: var(--global-font-size-sm);
3244
+ overflow: hidden;
3245
+ text-overflow: ellipsis;
3246
+ white-space: nowrap;
3247
+ transition: width 0.3s cubic-bezier(0,0,.2,1);
3248
+ }
3249
+
3250
+ .lexsidebar .lexsidebarfooter div span:first-child, .lexsidebar .lexsidebarheader div span:first-child {
3251
+ font-size: var(--global-font-size);
3252
+ font-weight: 600;
3253
+ }
3254
+
3255
+ .lexsidebar .lexsidebarfooter a, .lexsidebar .lexsidebarheader a {
3256
+ width: 32px;
3257
+ margin-left: 0px;
3258
+ align-content: center;
3259
+ }
3260
+
3261
+ .lexsidebar .lexsidebarfooter svg, .lexsidebar .lexsidebarheader svg {
3262
+ place-self: center;
3263
+ }
3264
+
3265
+ .lexsidebar.collapsing .lexsidebarfooter span, .lexsidebar.collapsing .lexsidebarfooter div,
3266
+ .lexsidebar.collapsing .lexsidebarheader span, .lexsidebar.collapsing .lexsidebarheader div {
3267
+ width: 0px;
3268
+ padding-inline: 0px;
2639
3269
  }
2640
3270
 
3271
+ /* .lexsidebar.collapsed .lexsidebarfooter span, .lexsidebar.collapsed .lexsidebarfooter div,
3272
+ .lexsidebar.collapsed .lexsidebarheader span, .lexsidebar.collapsed .lexsidebarheader div {
3273
+ display: none;
3274
+ } */
3275
+
2641
3276
  /* Overlay Buttons */
2642
3277
 
2643
3278
  .lexoverlaybuttonscontainer {
@@ -2718,7 +3353,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
2718
3353
 
2719
3354
  .lexoverlaybuttons .lexbutton {
2720
3355
  padding: 6px 6px;
2721
- font-size: var(--global-font-size-big);
3356
+ font-size: var(--global-font-size-lg);
2722
3357
  border-radius: 10px;
2723
3358
  justify-content: center;
2724
3359
  background: none;
@@ -2727,16 +3362,16 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
2727
3362
  }
2728
3363
 
2729
3364
  .lexoverlaybuttons .lexbutton span {
2730
- font-size: var(--global-font-size-big);
3365
+ font-size: var(--global-font-size-lg);
2731
3366
  }
2732
3367
 
2733
3368
  .lexoverlaybuttons .lexbutton a {
2734
3369
  line-height: 10px;
2735
- font-size: var(--global-font-size-big);
3370
+ font-size: var(--global-font-size-lg);
2736
3371
  }
2737
3372
 
2738
3373
  .lexoverlaybuttons .lexbutton.array a {
2739
- font-size: 10px;
3374
+ font-size: var(--global-font-size-sm);
2740
3375
  margin-left: 4px;
2741
3376
  }
2742
3377
 
@@ -2818,10 +3453,8 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
2818
3453
  .lexareatabs {
2819
3454
  display: flex;
2820
3455
  flex-direction: row;
2821
- margin-left: 7px;
2822
3456
  width: fit-content;
2823
3457
  width: -moz-fit-content;
2824
- border-radius: 10px;
2825
3458
  }
2826
3459
 
2827
3460
  .lexareatabs.dockingtab {
@@ -2829,7 +3462,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
2829
3462
  }
2830
3463
 
2831
3464
  .lexareatabs .lexareatab {
2832
- font-size: 13px;
3465
+ font-size: var(--global-font-size);
2833
3466
  font-weight: 600;
2834
3467
  justify-content: center;
2835
3468
  text-align: center;
@@ -2852,24 +3485,24 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
2852
3485
  }
2853
3486
 
2854
3487
  .lexareatabs.row {
2855
- width: calc(100%-9px);
2856
- }
2857
-
2858
- .lexareatabs.row {
2859
- padding: 4px;
2860
- padding-bottom: 6px;
3488
+ background-color: light-dark(var(--global-color-terciary), var(--global-button-color));
3489
+ border-radius: 8px;
3490
+ padding: 3px;
3491
+ margin: 6px;
3492
+ gap: 0.1em;
2861
3493
  }
2862
3494
 
2863
3495
  .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;
3496
+ padding: 0.45em 1.45em;
3497
+ transition: 0.1s;
3498
+ background: none;
3499
+ border-radius: 6px;
3500
+ color: var(--global-text-secondary);
2869
3501
  }
2870
3502
 
2871
3503
  .lexareatabs.fit {
2872
- width: calc(100% - 14px);
3504
+ width: calc(100% - 12px);
3505
+ padding-inline: 6px;
2873
3506
  }
2874
3507
 
2875
3508
  .lexareatabs.fit .lexareatab {
@@ -2887,8 +3520,9 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
2887
3520
  }
2888
3521
 
2889
3522
  .lexareatabs.row .lexareatab.selected {
2890
- color: #fff;
2891
- background: light-dark(var(--global-selected-light), var(--global-selected));
3523
+ background-color: var(--global-color-primary);
3524
+ outline: none;
3525
+ color: var(--global-text-primary);
2892
3526
  }
2893
3527
 
2894
3528
  .lexareatabs.folding .lexareatab.selected {
@@ -2901,7 +3535,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
2901
3535
  }
2902
3536
 
2903
3537
  .lexareatabs.row .lexareatab.selected:hover {
2904
- color: var(--global-color-primary);
3538
+ color: var(--global-text-secondary);
2905
3539
  }
2906
3540
 
2907
3541
  .lexareatabscontainer {
@@ -2931,6 +3565,31 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
2931
3565
  border-radius: 2px;
2932
3566
  }
2933
3567
 
3568
+ /* Avatar Widget */
3569
+
3570
+ .lexavatar {
3571
+ width: 32px;
3572
+ height: 32px;
3573
+ border-radius: 8px;
3574
+ margin: auto 0;
3575
+ }
3576
+
3577
+ .lexavatar img {
3578
+ width: 100%;
3579
+ height: 100%;
3580
+ }
3581
+
3582
+ .lexavatar a svg {
3583
+ width: 60%;
3584
+ height: 100%;
3585
+ }
3586
+
3587
+ .lexavatar * {
3588
+ border-radius: 8px;
3589
+ width: 60%;
3590
+ height: 100%;
3591
+ }
3592
+
2934
3593
  /* Card Widget */
2935
3594
 
2936
3595
  .lexcard {
@@ -2955,6 +3614,10 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
2955
3614
  }
2956
3615
 
2957
3616
  .lexcard span {
3617
+ font-size: var(--global-font-size-lg);
3618
+ font-family: var(--global-title-font);
3619
+ font-weight: 600;
3620
+ text-transform: uppercase;
2958
3621
  width: calc(100% - 16px);
2959
3622
  display: flex;
2960
3623
  background-color: var(--global-blur-background);
@@ -2968,10 +3631,6 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
2968
3631
  padding: 8px;
2969
3632
  border-top-left-radius: 6px;
2970
3633
  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
3634
  }
2976
3635
 
2977
3636
  .lexcard span a {
@@ -3003,7 +3662,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
3003
3662
  height: 18px;
3004
3663
  cursor: pointer;
3005
3664
  border-radius: 4px;
3006
- font-size: 11px;
3665
+ font-size: var(--global-font-size-sm);
3007
3666
  }
3008
3667
 
3009
3668
  .lexlayer.selected {
@@ -3154,14 +3813,13 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
3154
3813
 
3155
3814
  .lexcounterbox .lexcountervalue {
3156
3815
  width: 100%;
3157
- font-size: 32px;
3816
+ font-size: var(--global-font-size-xxl);
3158
3817
  font-weight: 700;
3159
-
3160
3818
  }
3161
3819
 
3162
3820
  .lexcounterbox .lexcounterlabel {
3163
3821
  width: 100%;
3164
- margin-top: -22px;
3822
+ margin-top: -18px;
3165
3823
  color: var(--global-text-secondary);
3166
3824
  }
3167
3825
 
@@ -3210,9 +3868,8 @@ tr:hover {
3210
3868
  }
3211
3869
 
3212
3870
  th a {
3213
- /* color: var(--global-selected-light); */
3214
3871
  margin-left: 4px;
3215
- font-size: 10px !important;
3872
+ font-size: var(--global-font-size-xs) !important;
3216
3873
  }
3217
3874
 
3218
3875
  th a:active {
@@ -3765,7 +4422,7 @@ ul.lexassetscontent {
3765
4422
  font-weight: 600;
3766
4423
  background-color: #afafaf;
3767
4424
  color: var(--global-color-primary);
3768
- font-size: 14px;
4425
+ font-size: var(--global-font-size);
3769
4426
  border-radius: 6px;
3770
4427
  display: none;
3771
4428
  opacity: 0;
@@ -3775,27 +4432,8 @@ ul.lexassetscontent {
3775
4432
  pointer-events: none;
3776
4433
  }
3777
4434
 
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
4435
  .lexassetscontent li:hover + .lexitemdesc {
3798
- opacity: 1;
4436
+ opacity: 1;
3799
4437
  }
3800
4438
 
3801
4439
  .lexassetscontent.list li {
@@ -3821,7 +4459,7 @@ ul.lexassetscontent {
3821
4459
  }
3822
4460
 
3823
4461
  .lexassetscontent .asset-file-preview text {
3824
- font-size: 64px;
4462
+ font-size: 4rem;
3825
4463
  text-anchor: middle;
3826
4464
  font-family: 'Ubuntu', sans-serif;
3827
4465
  }
@@ -3976,8 +4614,8 @@ ul.lexassetscontent {
3976
4614
  }
3977
4615
 
3978
4616
  /* Code Editor */
3979
-
3980
4617
  .codebasearea {
4618
+
3981
4619
  display: flex;
3982
4620
  position: relative;
3983
4621
  overflow: inherit;
@@ -4019,18 +4657,16 @@ ul.lexassetscontent {
4019
4657
 
4020
4658
  .codebasearea .lexareatab i {
4021
4659
  width: 12px;
4022
- font-size: 10px;
4023
- margin-right: 4px;
4024
- vertical-align: middle;
4025
- margin-top: -3px;
4660
+ font-size: var(--global-font-size-sm);
4661
+ margin-right: 6px;
4662
+ align-content: center;
4026
4663
  }
4027
4664
 
4028
4665
  .codebasearea .lexareatab img {
4029
4666
  width: 12px;
4030
4667
  height: 12px;
4031
- margin-right: 4px;
4032
- vertical-align: middle;
4033
- margin-top: -2px;
4668
+ margin-right: 6px;
4669
+ align-content: center;
4034
4670
  }
4035
4671
 
4036
4672
  .lexcodeeditor ::-webkit-scrollbar {
@@ -4717,7 +5353,7 @@ ul.lexassetscontent {
4717
5353
  .lexgraphnode .lexgraphnodeproperties {
4718
5354
  font-family: var(--global-title-font);
4719
5355
  font-weight: 600;
4720
- font-size: 13px;
5356
+ font-size: var(--global-font-size);
4721
5357
  color: #fff;
4722
5358
  text-shadow: 0px 0px 2px #1b1b1bdc;
4723
5359
  border-bottom: 1px solid #ffffff46;
@@ -4755,7 +5391,7 @@ ul.lexassetscontent {
4755
5391
  .lexgraphnode .lexgraphnodeio {
4756
5392
  font-family: var(--global-title-font);
4757
5393
  font-weight: 600;
4758
- font-size: 10px;
5394
+ font-size: var(--global-font-size-sm);
4759
5395
  color: #d9d9e3;
4760
5396
  text-shadow: 0px 1px 6px #22222283;
4761
5397
  display: flex;
@@ -4767,7 +5403,7 @@ ul.lexassetscontent {
4767
5403
  }
4768
5404
 
4769
5405
  .lexgraphnode .lexgraphnodeio .io__type {
4770
- font-size: 7px;
5406
+ font-size: calc(var(--global-font-size-xs) - 1px);
4771
5407
  font-weight: 700;
4772
5408
  line-height: 10px;
4773
5409
  min-width: 11px;
@@ -4797,7 +5433,7 @@ ul.lexassetscontent {
4797
5433
  margin-top: 3px;
4798
5434
  background-color: #afafaf;
4799
5435
  color: var(--global-color-primary);
4800
- font-size: 8px;
5436
+ font-size: var(--global-font-size-xs);
4801
5437
  border-radius: 4px;
4802
5438
  width: 28px;
4803
5439
  text-align: center;
@@ -4902,11 +5538,11 @@ ul.lexassetscontent {
4902
5538
  }
4903
5539
 
4904
5540
  .lexgraphgroup .lexgraphgrouptitle {
4905
- font-size: 14px;
4906
- margin: 8px;
4907
- color: var(--global-text-primary);
5541
+ font-size: var(--global-font-size-xl);
4908
5542
  font-family: var(--global-title-font);
4909
5543
  font-weight: 600;
5544
+ margin: 8px;
5545
+ color: var(--global-text-primary);
4910
5546
  outline: none;
4911
5547
  border: none;
4912
5548
  background: none;
@@ -4939,7 +5575,7 @@ ul.lexassetscontent {
4939
5575
  }
4940
5576
 
4941
5577
  .grapharea .graph-title button {
4942
- font-size: 16px;
5578
+ font-size: var(--global-font-size-xl);
4943
5579
  font-family: var(--global-title-font);
4944
5580
  font-weight: 600;
4945
5581
  color: var(--global-text-primary);