lexgui 0.4.1 → 0.5.0

package/build/lexgui.css

@@ -1,9 +1,10 @@
+/* clean-css ignore:start */
 @import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@700&display=swap');
-
 @font-face {
     font-family: "GoogleSans";
     src: url("https://raw.githubusercontent.com/jxarco/lexgui.js/master/data/GoogleSans.ttf");
 }
+/* clean-css ignore:end */
 
 :root {
     /* default color scheme */
@@ -18,27 +19,35 @@
     --global-font-size-xl: 1.125rem; /* 18px */
     --global-font-size-xxl: 1.375rem; /* 22px */
 
-    --global-color-primary: light-dark(#f3f3f3, #141414);
-    --global-color-secondary: light-dark(#e4e4e4, #252525);
-    --global-color-terciary: light-dark(#dcdcde, #3a3a3a);
-    --global-color-quaternary: light-dark(#c6c6c6, #494949);
-    --global-color-quinary: light-dark(#b5b5b5, #5c5c5c);
+    --global-color-primary: light-dark(#f5f5f6, #0f0f0f); /* Near White / Near Black */
+    --global-color-secondary: light-dark(#e8e8ea, #1c1c1c); /* Very Light Gray / Very Dark Gray */
+    --global-color-tertiary: light-dark(#d6d6d8, #292929); /* Soft Gray / Deep Gray */
+    --global-color-quaternary: light-dark(#bfbfc2, #404040); /* Muted Gray / Medium Dark */
+    --global-color-quinary: light-dark(#a5a5a8, #595959); /* Gentle Gray / Soft Dark Gray */
+
     --global-selected: #2d69da;
     --global-selected-light: #0d99ff;
     --global-selected-dark: #304b86;
     --global-color-accent: #ec5377;
     --global-color-warning: #ffc107;
     --global-color-error: #f54c4c;
-    --global-button-color: light-dark(#f9f9f9, #3e3e3e);
-    --global-button-color-hovered: light-dark(#ececec, #444);
-    --global-text-primary: light-dark(#202124, #efeff1);
-    --global-text-secondary: light-dark(#353636, #c8c8ca);
-    --global-text-terciary: light-dark(#5a5a5af5, #929292);
-    --global-text-quaternary: light-dark(#6b6a6af5, #777777);
-    --global-intense-background: light-dark(#fefefe, #121212);
+    --global-button-color: light-dark(#f9f9f9, #363636);
+    --global-text-primary: light-dark(#0d0d0e, #f0efef);
+    --global-text-secondary: light-dark(#262627, #d1d1d3);
+    --global-text-tertiary: light-dark(#3c3c3df5, #aaaaaa);
+    --global-text-quaternary: light-dark(#515152f5, #807f7f);
+    --global-intense-background: light-dark(#fefefe, #09090a);
     --global-medium-background: #252525;
     --global-blur-background: light-dark(#f7f7f7d8, #1f1f1fe7);
-    --global-color-transparent: #7b8ae200;
+    --global-color-transparent: #00000000;
+
+    --svg-size-xs: 0.7rem;
+    --svg-size-sm: 0.85rem;
+    --svg-size-md: 1rem;
+    --svg-size-lg: 1.25rem;
+    --svg-size-xl: 1.4rem;
+    --svg-size-xxl: 1.6rem;
+
     --code-editor-font-size: 14px;
     --code-editor-row-height: 20px;
     --graphnode-background: 17, 17, 17;
@@ -201,13 +210,14 @@ canvas {
 }
 
 .collapsible {
+    width: 100%;
     display: flex;
 }
 
 .collapsible a.collapser {
     --rotation: 90deg;
     transform: rotate(var(--rotation, 0deg));
-    transition: transform 0.2s ease-out;
+    transition: transform 0.15s ease-out;
 }
 
 .collapsible a.collapser[data-collapsed] {
@@ -217,9 +227,10 @@ canvas {
 dialog {
     transition: display 0.1s allow-discrete, overlay 0.1s allow-discrete;
     animation: dialogHide 0.1s forwards;
-    &[open] {
-        animation: dialogShow 0.1s forwards;
-    }
+}
+
+dialog[open] {
+    animation: dialogShow 0.1s forwards;
 }
 
 dialog::backdrop {
@@ -287,6 +298,12 @@ body.noevents * {
     pointer-events: none;
 }
 
+svg.xs { width: var(--svg-size-xs); height: var(--svg-size-xs); }
+svg.sm { width: var(--svg-size-sm); height: var(--svg-size-sm); }
+svg.lg { width: var(--svg-size-lg); height: var(--svg-size-lg); }
+svg.xl { width: var(--svg-size-xl); height: var(--svg-size-xl); }
+svg.xxl { width: var(--svg-size-xxl); height: var(--svg-size-xxl); }
+
 #modal {
     left: 0;
     right: 0;
@@ -309,6 +326,7 @@ body.noevents * {
     width: 100%;
     height: 100%;
     position: absolute;
+    outline: none;
 }
 
 :root[data-strictVP="false"] {
@@ -328,6 +346,7 @@ body.noevents * {
     cursor: pointer;
     line-height: inherit !important;
     color: var(--global-text-secondary);
+    align-content: center;
 }
 
 .lexicon:hover {
@@ -336,6 +355,19 @@ body.noevents * {
 
 .lexicon:active {
     color: var(--global-text-secondary);
+    transform: scale(0.99);
+}
+
+svg, svg path {
+    width: 1rem;
+    height: 1rem;
+    --color: var(--global-text-secondary);
+    stroke: var(--color);
+    display: block;
+}
+
+svg path {
+    pointer-events: none;
 }
 
 .lexicon:hover svg, .lexicon:hover svg path {
@@ -371,7 +403,7 @@ body.noevents * {
     position: relative;
     width: calc(100% - 1.6rem);
     background-color: var(--global-intense-background);
-    border: 1px solid var(--global-color-terciary);
+    border: 1px solid var(--global-color-tertiary);
     box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
     overflow: hidden;
     -webkit-user-select: none;
@@ -493,7 +525,7 @@ body.noevents * {
 .commandbar a {
     color: var(--global-text-secondary);
     padding: 10px;
-    background-color: var(--global-color-terciary);
+    background-color: var(--global-color-tertiary);
     border-top-left-radius: 6px;
     border-bottom-left-radius: 6px;
     font-size: var(--global-font-size-sm);
@@ -506,7 +538,7 @@ body.noevents * {
     border-top-right-radius: 6px;
     border-bottom-right-radius: 6px;
     color: var(--global-text-secondary);
-    background-color: var(--global-color-terciary);
+    background-color: var(--global-color-tertiary);
     outline: none;
     border: none;
     font-family: var(--global-font);
@@ -651,7 +683,6 @@ body.noevents * {
     max-width: 28px;
     max-height: 28px;
     transition: all .2s ease-in-out;
-    fill: var(--global-text-secondary);
 }
 
 .lexfooter .social a {
@@ -673,6 +704,7 @@ body.noevents * {
 
 .lexfooter svg:hover {
     fill: var(--global-selected-light);
+    stroke: var(--global-selected-light);
 }
 
 .lexfooter hr {
@@ -698,6 +730,10 @@ body.noevents * {
     background-color: var(--global-color-secondary);
 }
 
+.lexdialog:has(.lexselect) {
+    overflow: visible;
+}
+
 .lexdialogtitle {
     outline: none;
     font-family: var(--global-title-font);
@@ -753,7 +789,7 @@ body.noevents * {
 }
 
 .lexdialogcloser:hover {
-    color: var(--global-text-terciary);
+    color: var(--global-text-tertiary);
 }
 
 .lexdialogcloser:active {
@@ -843,18 +879,12 @@ body.noevents * {
     background: var(--global-blur-background);
 }
 
-:root[data-theme="light"] {
-    .lexdialog {
-        box-shadow: 0px 2px 6px #30303083;
-    }
-
-    .lexdialogtitle {
-        text-shadow: 0px 2px 2px #8d8d8d34;
-    }
+:root[data-theme="light"] .lexdialog {
+    box-shadow: 0px 2px 6px #30303083;
+}
 
-    .lexpopup {
-        background: var(--global-blur-background);
-    }
+:root[data-theme="light"] .lexdialogtitle {
+    text-shadow: 0px 2px 2px #8d8d8d34;
 }
 
 /* Generic */
@@ -868,6 +898,139 @@ body.noevents * {
     flex-direction: column;
 }
 
+/* Dropdown Menu */
+
+.lexdropdownmenu {
+    background-color: var(--global-color-primary);
+    font-size: var(--global-font-size);
+    position: fixed;
+    left: 0px;
+    top: 0px;
+    min-width: 172px;
+    max-width: 244px;
+    z-index: 150;
+    display: flex;
+    flex-direction: column;
+    padding: 0.2rem;
+    border-radius: 6px;
+    border: 1px solid #7a797c4f;
+    animation-duration: 400ms;
+	animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+	will-change: transform, opacity;
+}
+
+.lexdropdownmenuitem {
+    display: flex;
+    flex-direction: row;
+    padding: 0.5rem;
+    border-radius: 6px;
+    gap: 0.5rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    cursor: pointer;
+    transition: all 0.1s linear;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+.lexdropdownmenuitem.disabled {
+    color: var(--global-text-tertiary);
+    cursor: default;
+}
+
+.lexdropdownmenuitem.label {
+    font-weight: 600;
+    cursor: default;
+}
+
+.lexdropdownmenuitem:not(.label, .disabled):hover {
+    background-color: var(--global-color-tertiary);
+}
+
+.lexdropdownmenuitem:not(.label, .disabled):active {
+    transform: scale(0.99);
+}
+
+.lexdropdownmenuitem a {
+    margin-left: auto;
+    margin-right: 4px;
+    align-content: center;
+    pointer-events: none;
+}
+
+.lexdropdownmenuitem a:first-child {
+    margin: 0;
+}
+
+.lexdropdownmenu .separator {
+    width: calc(100% + 0.4rem);
+    translate: -0.2rem 0;
+    border-bottom: 1px solid;
+    border-color: var(--global-text-tertiary);
+    opacity: 0.25;
+    margin-block: 0.1rem;
+}
+
+.lexdropdownmenu[data-side="top"]{
+	animation-name: slideDownAndFade;
+}
+.lexdropdownmenu[data-side="right"]{
+	animation-name: slideLeftAndFade;
+}
+.lexdropdownmenu[data-side="bottom"]{
+	animation-name: slideUpAndFade;
+}
+.lexdropdownmenu[data-side="left"]{
+	animation-name: slideRightAndFade;
+}
+
+@keyframes slideUpAndFade {
+	from {
+		opacity: 0;
+		transform: translateY(8px);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
+@keyframes slideRightAndFade {
+	from {
+		opacity: 0;
+		transform: translateX(-8px);
+	}
+	to {
+		opacity: 1;
+		transform: translateX(0);
+	}
+}
+
+@keyframes slideDownAndFade {
+	from {
+		opacity: 0;
+		transform: translateY(-8px);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
+@keyframes slideLeftAndFade {
+	from {
+		opacity: 0;
+		transform: translateX(8px);
+	}
+	to {
+		opacity: 1;
+		transform: translateX(0);
+	}
+}
+
 /* Area */
 
 .lexarea {
@@ -940,8 +1103,10 @@ body.noevents * {
     font-size: var(--global-font-size-lg);
     color: var(--global-text-primary);
     background-color: var(--global-color-secondary);
-    text-shadow: 0px 1px 6px #5554547c;
+    text-shadow: 0px 1px 6px #42424260;
+    letter-spacing: calc(var(--global-font-size-lg) * 0.025);
     padding: 10px;
+    display: flex;
     border-top-left-radius: 8px;
     border-top-right-radius: 8px;
     cursor: pointer;
@@ -963,7 +1128,7 @@ body.noevents * {
     display: flex;
     padding: 0px;
     cursor: default;
-    background-color: var(--global-color-terciary);
+    background-color: var(--global-color-tertiary);
     text-shadow: none;
     color: #5f6770;
 }
@@ -995,6 +1160,8 @@ body.noevents * {
 
 .lexbranch .branchicon {
     font-size: var(--global-font-size);
+    margin-right: 12px;
+    align-content: center;
 }
 
 .lexbranch.first .lexbranchtitle {
@@ -1006,26 +1173,26 @@ body.noevents * {
 }
 
 .lexbranch .switch-branch-button {
-    float: right;
     font-size: var(--global-font-size-sm);
-    margin: 8px 6px -4px 2px;
-    transition: 0.1s;
+    transition: transform 0.15s ease-out;
+    margin-left: auto;
+    margin-right: 8px;
+    align-content: center;
+    transform: rotate(90deg);
 }
 
 .lexbranch.closed .switch-branch-button {
-    transform: rotate(180deg);
+    transform: rotate(0deg);
 }
 
-:root[data-theme="light"] {
-    .lexbranchtitle {
-        color: var(--global-text-secondary);
-        background-color: var(--global-color-secondary);
-        text-shadow: 0px 2px 2px #e0e0e03a;
-    }
+:root[data-theme="light"] .lexbranchtitle {
+    color: var(--global-text-secondary);
+    background-color: var(--global-color-secondary);
+    text-shadow: 0px 2px 2px #e0e0e03a;
+}
 
-    .lexbranch.closed .lexbranchtitle {
-        background-color: inherit;
-    }
+:root[data-theme="light"] .lexbranch.closed .lexbranchtitle {
+    background-color: inherit;
 }
 
 /* Widgets */
@@ -1061,7 +1228,7 @@ body.noevents * {
 }
 
 .lexwidget.nobranch {
-    padding-left: 12px;
+    width: calc(100% - 10px);
 }
 
 .lexwidget.auto {
@@ -1104,7 +1271,7 @@ body.noevents * {
     height: 2px;
     width: 11px;
     cursor: ew-resize;
-    color: var(--global-text-terciary);
+    color: var(--global-text-tertiary);
 }
 
 .lexwidgetseparator div:hover {
@@ -1151,8 +1318,8 @@ body.noevents * {
     background-color: var(--global-button-color);
 }
 
-.lexwidget .lextext:not(:has(div)):hover {
-    background-color: var(--global-button-color-hovered);
+.lexwidget input:not(.lexcheckbox, .lextoggle, .lexrangeslider):hover {
+    background-color: color-mix(in srgb, var(--global-button-color), #000 7%);
 }
 
 .lexwidget .lextext input {
@@ -1218,7 +1385,7 @@ body.noevents * {
 .lexwidget input:disabled:not(.lextoggle) {
     outline: none;
     border: none;
-    color: var(--global-text-terciary);
+    color: var(--global-text-tertiary);
 }
 
 .lexseparator {
@@ -1235,15 +1402,13 @@ body.noevents * {
     margin: 5px 0 5px 4px;
 }
 
-:root[data-theme="light"] {
-    .lexwidget .lextext {
-        border: 1px solid var(--global-color-terciary) !important;
-    }
+:root[data-theme="light"] .lexwidget .lextext {
+    border: 1px solid var(--global-color-tertiary) !important;
+}
 
-    .lexbranch .lexseparator {
-        border-top: 1px solid #e7e7e7;
-        border-bottom: 1px solid #c1c1c1;
-    }
+:root[data-theme="light"] .lexbranch .lexseparator {
+    border-top: 1px solid #e7e7e7;
+    border-bottom: 1px solid #c1c1c1;
 }
 
 .lextitle {
@@ -1256,6 +1421,7 @@ body.noevents * {
     padding: 2px;
     padding-left: 12px;
     padding-right: 12px;
+    line-height: 1.5;
     display: grid;
     align-content: center;
     border-radius: 12px;
@@ -1301,7 +1467,6 @@ body.noevents * {
     background-color: var(--button-color);
     border-radius: 6px;
     border: 1px solid transparent;
-    /* margin-top: 2px; */
     min-height: 22px !important;
     color: var(--global-text-primary);
     font-weight: 500;
@@ -1314,16 +1479,14 @@ body.noevents * {
     padding: 0.35rem;
 }
 
-:root[data-theme="light"] {
-    .lexbutton {
-        --button-color: var(--global-button-color);
-        border: 1px solid var(--global-color-terciary);
-    }
+:root[data-theme="light"] .lexbutton {
+    --button-color: var(--global-button-color);
+    border: 1px solid var(--global-color-tertiary);
+}
 
-    .lexbutton.selected {
-        background: #3c4145;
-        color: #DDD;
-    }
+:root[data-theme="light"] .lexbutton.selected {
+    background: #3c4145;
+    color: #DDD;
 }
 
 /* Colors */
@@ -1366,11 +1529,11 @@ body.noevents * {
 .lexbutton a {
     margin-left: 0px;
     font-size: var(--global-font-size-sm);
+    pointer-events: none;
 }
 
 .lexbutton.array span {
     display: inline-flex;
-    margin-left: 8px;
 }
 
 .lexbutton.array a {
@@ -1391,7 +1554,7 @@ body.noevents * {
 }
 
 .lexbutton:disabled {
-    color: var(--global-text-terciary);
+    color: var(--global-text-tertiary);
 }
 
 .lexbutton.selected {
@@ -1408,7 +1571,7 @@ body.noevents * {
 
 .lexcombobuttons .lexcombobuttonsbox {
     display: flex;
-    background-color: light-dark(var(--global-color-terciary), var(--global-button-color));
+    background-color: light-dark(var(--global-color-tertiary), var(--global-button-color));
     width: max-content;
     justify-self: center;
     padding: 3px;
@@ -1454,71 +1617,77 @@ body.noevents * {
     font-size: var(--global-font-size-sm);
 }
 
-/* Dropdown (Combo) */
+/* Select (Combobox) */
 
-.lexdropdown {
+.lexselect {
     display: grid;
     align-content: center;
     position: relative;
 }
 
-.lexdropdown .lexwidget {
+.lexselect .lexwidget {
     padding: 0;
 }
 
-.lexdropdown .lexfilter {
+.lexselect .lexfilter {
     width: calc(100% - 6px) !important;
     padding: 2px 3px;
     background-color: var(--global-color-primary);
     border-bottom: 1px solid;
-    border-color: color-mix(in srgb, var(--global-text-terciary), #00000000 75%);
+    border-color: color-mix(in srgb, var(--global-text-tertiary), #00000000 75%);
+}
+
+.lexselect .lexfilter input:hover {
+    background-color: var(--global-color-primary);
 }
 
-.lexdropdown .lexfilter a {
+.lexselect .lexfilter a {
     font-size: var(--global-font-size-sm);
     padding-inline: 4px;
 }
 
-.lexdropdown ul .lexlistitem {
+.lexselect ul .lexlistitem {
     font-size: var(--global-font-size-sm);
 }
 
-.lexdropdown .option {
+.lexselect .option {
     display: flex;
-    flex-direction: column;
     align-items: center;
     width: 100%;
     position: relative;
 }
 
-.lexdropdown .option:not(.media) {
-    padding-left: 12px;
+.lexselect .option.media {
+    flex-direction: column;
 }
 
-.lexdropdown .lexlistitem {
+.lexselect .lexlistitem {
     height: fit-content;
 }
 
-.lexdropdown .lexdropdownoptions {
+.lexselect .lexselectoptions {
     background-color: var(--global-color-primary);
     -webkit-backdrop-filter: blur(10px);
     backdrop-filter: blur(10px);
     margin: 0;
     padding: 0;
-    border: none;
     outline: none;
     width: fit-content;
     max-height: -webkit-fill-available;
     position: fixed;
     z-index: 10000;
     box-shadow: 0 0px 6px rgba(0, 0, 0, 0.603);
-    border-bottom-left-radius: 6px;
-    border-bottom-right-radius: 6px;
+    border-radius: 6px;
+    border: 1px solid #7a797c4f;
     overflow-y: auto;
     overflow-x: hidden;
 }
 
-.lexdropdown ul {
+dialog .lexselect .lexselectoptions {
+    max-height: none;
+}
+
+.lexselect ul {
     list-style: none;
     padding: 0px;
     z-index: 10;
@@ -1527,81 +1696,89 @@ body.noevents * {
     height: 100%;
 }
 
-.lexdropdown .lexdropdownoptions.place-above {
-    /* max-height: unset; */
-    border-bottom-left-radius: 0px;
-    border-bottom-right-radius: 0px;
-    border-top-left-radius: 6px;
-    border-top-right-radius: 6px;
+.lexselect ul .lexselectinnerlist {
+    width: calc(100% - 0.6rem);
+    height: calc(100% - 25px);
+    padding: 0.3rem;
+    display: grid;
 }
 
-.lexdropdown .lexdropdownitem {
-    width: 100%;
+.lexselect .lexselectitem {
+    width: calc(100% - 0.7rem);
     cursor: pointer;
     color: var(--global-text-primary);
     min-height: 20px;
     line-height: 22px;
+    padding-inline: 0.35rem;
+    padding-block: 0.2rem;
+    border-radius: 6px;
     align-content: center;
     display: flow-root;
-    padding: 2px 0px;
-    padding-right: 32px;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
 }
 
-.lexdropdown .lexdropdownitem.empty {
+.lexselect .lexselectlabel {
+    width: calc(100% - 1.6rem);
+    color: var(--global-text-primary);
+    padding-inline: 0.8rem;
+    padding-block: 0.2rem;
+    min-height: 20px;
+    line-height: 22px;
+    align-content: center;
+    display: flow-root;
+    font-weight: 600;
+}
+
+.lexselect .lexselectitem.empty {
     cursor: default;
 }
 
-.lexdropdown .lexdropdownitem.empty .option {
+.lexselect .lexselectitem.empty .option {
     padding: 12px;
 }
 
-.lexdropdown .lexdropdownitem:not(.empty):hover {
-    background-color: var(--global-selected);
-    color: var(--global-text-primary);
+.lexselect .lexselectitem:not(.empty):hover {
+    background-color: var(--global-color-tertiary);
 }
 
-.lexdropdown .lexdropdownitem:not(.empty):active {
+.lexselect .lexselectitem:not(.empty):active {
     color: #fff;
 }
 
-.lexdropdown .lexdropdownitem a {
+.lexselect .lexselectitem a {
     display: none;
-    right: 24px;
-    position: absolute;
+    margin-left: auto;
+    margin-right: 8px;
 }
 
-.lexdropdown .lexdropdownitem.selected {
+.lexselect .lexselectitem.selected {
     font-weight: 700;
 }
 
-.lexdropdown .lexdropdownitem.selected a {
+.lexselect .lexselectitem.selected a {
     display: block;
 }
 
-.lexdropdown img {
+.lexselect img {
     max-height: 64px;
     margin-top: 8px;
 }
 
-:root[data-theme="light"] {
-
-    .lexdropdown .lexfilter {
-        background-color: var(--global-color-primary);
-    }
+:root[data-theme="light"] .lexselect .lexfilter {
+    background-color: var(--global-color-primary);
+}
 
-    .lexdropdown ul {
-        background-color: var(--global-color-primary);
-        box-shadow: 0 0px 6px rgba(175, 175, 175, 0.788);
-    }
+:root[data-theme="light"] .lexselect ul {
+    background-color: var(--global-color-primary);
+    box-shadow: 0 0px 6px rgba(175, 175, 175, 0.788);
+}
 
-    .lexdropdown .lexdropdownitem:hover {
-        background-color: var(--global-selected-light);
-        color: #fff;
-    }
+:root[data-theme="light"] .lexselect .lexselectitem:hover {
+    background-color: var(--global-selected-light);
+    color: #fff;
 }
 
 /* Check box */
@@ -1661,21 +1838,20 @@ body.noevents * {
 }
 
 .lexcheckboxcont {
-    font-weight: bold;
     display: inline-flex;
     gap: 8px;
     margin: 0 auto;
 }
 
-.lexcheckboxcont .checkboxtext {
-    font-weight: bold;
-}
-
 .lexcheckboxsubmenu {
     width: 100%;
-    padding: 6px;
+    padding: 4px;
+    padding-inline: 8px;
     color: var(--global-text-secondary);
-    margin-top: -1px;
+}
+
+.lexcheckboxsubmenu .lexwidget {
+    width: 100% !important;
 }
 
 /* Toggle Widget */
@@ -1797,12 +1973,12 @@ body.noevents * {
 }
 
 .lextoggle:disabled {
-    border: 1px solid var(--global-text-terciary);
+    border: 1px solid var(--global-text-tertiary);
     cursor: not-allowed;
 }
 
 .lextoggle:disabled:before {
-    background-color: var(--global-text-terciary);
+    background-color: var(--global-text-tertiary);
 }
 
 .lextogglecont {
@@ -1829,6 +2005,7 @@ body.noevents * {
     width: 100% !important;
     display: flex;
     flex-direction: column;
+    padding: 0.1em;
 }
 
 .lexradiogroup span {
@@ -1837,7 +2014,8 @@ body.noevents * {
 
 .lexradiogroup .lexradiogroupitem {
     display: flex;
-    padding: 2px;
+    padding: 0.1em;
+    padding-inline: 1.4em;
     gap: 0.65em;
 }
 
@@ -1948,16 +2126,12 @@ body.noevents * {
     transition: 0.1s linear;
 }
 
-.lexwidget.nobranch .lexvector .vecbox {
-    background: var(--global-button-color-hovered);
-}
-
 .lexvector a.fa-lock {
     min-width: 12px;
 }
 
 .lexvector .vecbox:hover {
-    background: var(--global-button-color-hovered);
+    background-color: color-mix(in srgb, var(--global-button-color), #000 7%);
 }
 
 .lexwidget.nobranch .lexvector .vecbox:hover {
@@ -2050,7 +2224,7 @@ input[type=number] {
 }
 
 .lexwidget .numberbox:hover {
-    background-color: var(--global-button-color-hovered);
+    background-color: color-mix(in srgb, var(--global-button-color), #000 7%);
 }
 
 .lexwidget .numberbox:has(input:focus) {
@@ -2249,7 +2423,7 @@ input[type=number] {
 
 .lexwidget .lexpad .lexinnerpad {
     border-radius: 4px;
-    background-color: light-dark(var(--global-color-terciary), var(--global-intense-background));
+    background-color: light-dark(var(--global-color-tertiary), var(--global-intense-background));
 }
 
 .lexwidget .lexpad .lexinnerpad .lexpadthumb {
@@ -2331,7 +2505,7 @@ input[type=number] {
 
 .lextree {
     border-radius: 6px;
-    width: calc(100% - 6px);
+    width: 100%;
     min-height: 12px;
     margin: 0 auto;
     margin-top: 6px;
@@ -2385,6 +2559,9 @@ input[type=number] {
 .lextree ul {
     padding-bottom: 16px;
     padding-inline-start: 0px;
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
 }
 
 .lextree input {
@@ -2401,8 +2578,11 @@ input[type=number] {
 .lextree .lextreeitem {
     list-style-type: none;
     align-items: center;
-    margin-bottom: 3px;
     line-height: 25px;
+    display: inline-flex;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
     cursor: pointer;
     outline: none;
     border-radius: 6px;
@@ -2412,6 +2592,13 @@ input[type=number] {
     user-select: none;
 }
 
+.lextree .lextreeitem div {
+    display: flex;
+    gap: 0.25rem;
+    margin-left: auto;
+    margin-right: 8px;
+}
+
 .lextree .lextreeitem img {
     width: 12px;
     height: 12px;
@@ -2424,6 +2611,7 @@ input[type=number] {
     width: 12px;
     height: 12px;
     margin-right: 6px;
+    font-size: var(--global-font-size-sm);
 }
 
 .lextree .lextreeitem.draggingover {
@@ -2432,7 +2620,7 @@ input[type=number] {
 
 .lextree .lextreeitem:hover {
     color: var(--global-text-primary);
-    background: rgba(129, 132, 163, 0.191);
+    background: var(--global-color-tertiary);
 }
 
 .lextree .lextreeitem.selected {
@@ -2440,35 +2628,13 @@ input[type=number] {
     background: light-dark(var(--global-selected-light), var(--global-selected));
 }
 
-.lextree .lextreeitem a {
-    margin-right: 6px;
-    margin-top: 4px;
-    font-size: var(--global-font-size-sm);
-}
-
 .lextree .lextreeitem a.hierarchy {
     margin-right: 6px;
     margin-top: 4px;
 }
 
-.lextree .lextreeitem a:hover {
-    color: var(--global-text-primary);
-}
-
-.lextree .lextreeitem a:active {
-    color: var(--global-button-color);
-    margin-top: 6px;
-}
-
-.lextree .lextreeitem.parent a {
-    font-size: var(--global-font-size-xs);
-}
-
-.lextree .lextreeitem .itemicon {
-    font-size: var(--global-font-size-sm) !important;
-    float: right;
-    margin-top: 7px;
-    margin-right: 8px;
+.lextree .lextreeitem .lexicon {
+    font-size: var(--global-font-size-sm);
 }
 
 .lextree .lextreeitem .itemicon:hover {
@@ -2503,19 +2669,19 @@ input[type=number] {
 }
 
 .lexfileinput::file-selector-button:hover {
-    background-color: var(--global-button-color-hovered);
+    background-color: color-mix(in srgb, var(--global-button-color), #fff 4%);
     color: var(--global-text-primary);
 }
 
-.lexfileinput::file-selector-button:active {
-    background-color: var(--global-color-terciary);
+.lexfileinput::file-selector-button:not(:disabled):active {
+    background-color: var(--global-color-tertiary);
     color: var(--global-text-secondary);
     transform: scale(0.99);
 }
 
 .lexfileinput:disabled::file-selector-button {
-    cursor: not-allowed;
-    color: var(--global-text-terciary);
+    cursor: default;
+    color: var(--global-text-tertiary);
 }
 
 /* Progress bar */
@@ -2629,6 +2795,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     width: 100%;
     background-color: var(--global-color-primary);
     display: flex;
+    overflow: hidden;
     height: 100%;
     color: var(--global-text-primary);
     font-size: var(--global-font-size);
@@ -2679,11 +2846,9 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     opacity: 0;
 }
 
-:root[data-theme="light"] {
-    .lexmenubox {
-        background-color: #fffffff3;
-        box-shadow: 0px 6px 7px -3px #a7a7a7b7 !important;
-    }
+:root[data-theme="light"] .lexmenubox {
+    background-color: #fffffff3;
+    box-shadow: 0px 6px 7px -3px #a7a7a7b7 !important;
 }
 
 .lexmenubox[data-submenu] {
@@ -2736,7 +2901,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 }
 
 .lexmenubox .lexmenuboxentry.disabled {
-    color: var(--global-text-terciary);
+    color: var(--global-text-tertiary);
     cursor: default;
 }
 
@@ -2803,7 +2968,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     width: -moz-calc(100% + 8px);
     width: -webkit-calc(100% + 8px);
     width: calc(100% + 8px);
-    border-color: var(--global-text-terciary);
+    border-color: var(--global-text-tertiary);
     opacity: 0.25;
 }
 
@@ -2813,7 +2978,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     text-align: right;
     float: right;
     align-content: center;
-    color: var(--global-text-terciary);
+    color: var(--global-text-tertiary);
     margin-right: 12px;
 }
 
@@ -2848,8 +3013,12 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     margin-left: 0px !important;
 }
 
+.lexmenubar .lexmenubutton.main a {
+    font-size: var(--global-font-size-xxl);
+}
+
 .lexmenubar .lexmenubutton.disabled a {
-    color: light-dark(var(--global-color-terciary), var(--global-button-color));
+    color: light-dark(var(--global-color-tertiary), var(--global-button-color));
     cursor: default;
 }
 
@@ -2903,14 +3072,14 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 }
 
 .lexcontextmenu .lexmenuboxentry.cmtitle {
-    background: light-dark(var(--global-color-terciary), var(--global-intense-background));
+    background: light-dark(var(--global-color-tertiary), var(--global-intense-background));
     font-weight: bold;
     cursor: default;
 }
 
 .lexcontextmenu .lexmenuboxentry.cmseparator {
     height: 1px;
-    border-bottom: 1px solid var(--global-color-terciary);
+    border-bottom: 1px solid var(--global-color-tertiary);
     padding-bottom: 0;
     padding-top: 0;
     margin-top: -4px;
@@ -2975,13 +3144,8 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     gap: 0.2rem;
 }
 
-.lexsidebar svg, .lexsidebar svg path {
-    width: 1rem;
-    height: 1rem;
-    --color: var(--global-text-secondary);
-    fill: var(--color);
-    stroke: var(--color);
-    display: block;
+.lexsidebar *::-webkit-scrollbar {
+    display: none;
 }
 
 .lexsidebar .lexwidget {
@@ -3082,6 +3246,10 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     background-color: var(--global-color-secondary);
 }
 
+.lexsidebar .lexsidebarentry.selected {
+    background-color: var(--global-selected);
+}
+
 .lexsidebar .lexsidebarentry:active {
     transform: scale(0.99);
 }
@@ -3118,6 +3286,11 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     font-size: var(--global-font-size);
 }
 
+.lexsidebar .lexcheckbox {
+    width: 1.25em;
+    height: 1.25em;
+}
+
 .lexsidebar .lexsidebarsubentrycontainer {
     width: calc(100% - 48px);
     margin-block-start: 4px;
@@ -3125,6 +3298,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     margin-left: 16px;
     padding-inline: 16px;
     display: flex;
+    align-self: center;
     flex-direction: column;
     -webkit-user-select: none;
     -moz-user-select: none;
@@ -3134,11 +3308,16 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     border-left: 1px solid #5251514d;
 }
 
+.lexsidebar .collapsablecontainer {
+    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);
+    padding-inline: 4px;
+}
+
 .lexsidebar .lexsidebarsubentrycontainer:not(:has(div)) {
     margin: 0px;
 }
 
-.lexsidebar.collapsing .lexsidebarsubentrycontainer {
+.lexsidebar.collapsing .collapsablecontainer {
     max-height: 0px;
     transform: translate(-8px, -8px);
     opacity: 0;
@@ -3150,34 +3329,19 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     gap: 0.8em;
 }
 
-.lexsidebar.collapsed .lexsidebarsubentrycontainer {
-    display: none;
+.lexsidebar.collapsed .collapsablecontainer {
+    display: none !important;
 }
 
 .lexsidebar.collapsed .lexsidebarcontent div a {
     display: none;
 }
 
-/* .lexsidebar .lexsidebarentry a:hover {
-    border: 3px solid var(--global-selected);
-    background-color: var(--global-button-color-hovered);
-}
-
-.lexsidebar .lexsidebarentry a:active {
-    font-size: 17px;
-}
-
-.lexsidebar .lexsidebarentry.selected a {
-    background-color: var(--global-button-color-hovered);
-    border: 4px solid var(--global-selected);
-} */
-
 .lexsidebar .lexsidebarentry .lexsidebarentrydesc {
     position: absolute;
-    margin-top: -3px;
     margin-left: 32px;
     font-weight: 600;
-    background-color: var(--global-text-secondary);
+    background-color: var(--global-text-primary);
     color: var(--global-color-primary);
     font-size: var(--global-font-size);
     border-radius: 6px;
@@ -3201,7 +3365,9 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     display: flex;
     border-radius: 8px;
     padding: 8px;
+    font-size: var(--global-font-size);
     cursor: pointer;
+    align-items: center;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
@@ -3225,18 +3391,21 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     background-color: var(--global-intense-background);
 }
 
-.lexsidebar .lexavatar:has(svg) {
+.lexsidebar:not(.collapsing) .lexavatar:has(svg) {
     border: 1px solid #ffffff18;
 }
 
 .lexsidebar .lexsidebarfooter div, .lexsidebar .lexsidebarheader div {
-    width: calc(100% - 88px);
     height: 100%;
+    transition: width 0.3s cubic-bezier(0,0,.2,1), padding-inline 0.3s cubic-bezier(0,0,.2,1);
+}
+
+.lexsidebar .lexsidebarfooter div.infodefault, .lexsidebar .lexsidebarheader div.infodefault {
+    width: calc(100% - 88px);
     padding-inline: 12px;
     justify-content: center;
     display: flex;
     flex-direction: column;
-    transition: width 0.3s cubic-bezier(0,0,.2,1), padding-inline 0.3s cubic-bezier(0,0,.2,1);
 }
 
 .lexsidebar .lexsidebarfooter div span, .lexsidebar .lexsidebarheader div span {
@@ -3258,6 +3427,10 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     align-content: center;
 }
 
+.lexsidebar .lexsidebarheader a.toggler {
+    margin-left: auto;
+}
+
 .lexsidebar .lexsidebarfooter svg, .lexsidebar .lexsidebarheader svg {
     place-self: center;
 }
@@ -3268,10 +3441,10 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     padding-inline: 0px;
 }
 
-/* .lexsidebar.collapsed .lexsidebarfooter span, .lexsidebar.collapsed .lexsidebarfooter div,
+.lexsidebar.collapsed .lexsidebarfooter span, .lexsidebar.collapsed .lexsidebarfooter div,
 .lexsidebar.collapsed .lexsidebarheader span, .lexsidebar.collapsed .lexsidebarheader div {
     display: none;
-} */
+}
 
 /* Overlay Buttons */
 
@@ -3288,17 +3461,16 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     width: auto !important;
     height: auto !important;
     justify-content: start;
+    gap: 0.35em;
     z-index: 100;
     background-color: var(--global-color-secondary);
     margin: 8px;
     padding: 0.25em;
-    padding-bottom: 0.3em;
     border-radius: 12px;
 }
 
 .lexoverlaybuttons .lexwidget {
     padding: 0px;
-    margin-right: 6px;
     pointer-events: auto;
     min-width: 32px;
 }
@@ -3375,10 +3547,8 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     margin-left: 4px;
 }
 
-:root[data-theme="light"] {
-    .lexoverlaybuttons .lexbutton img {
-        filter: invert(1);
-    }
+:root[data-theme="light"] .lexoverlaybuttons .lexbutton img {
+    filter: invert(1);
 }
 
 .lexoverlaybuttons .lexbutton.selected {
@@ -3395,7 +3565,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 
 .lexoverlaybuttons .lexbutton:hover {
     color: var(--global-text-primary);
-    background: var(--global-button-color-hovered);
+    background-color: color-mix(in srgb, var(--global-button-color), #fff 4%);
 }
 
 .lexoverlaybuttons .lexbutton.selected:hover {
@@ -3409,8 +3579,8 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 
 .lexoverlaybuttons .lexoverlaygroup {
     display: flex;
-    margin-right: 6px;
-    background-color: var(--global-color-terciary);
+    flex: none;
+    background-color: var(--global-color-tertiary);
     border-radius: 8px;
 }
 
@@ -3444,10 +3614,6 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     margin-right: 0px;
 }
 
-.lexoverlaybuttons .lexwidget:last-child {
-    margin-right: 0px;
-}
-
 /* Area Tabs */
 
 .lexareatabs {
@@ -3458,7 +3624,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 }
 
 .lexareatabs.dockingtab {
-    background-color: #7cb9f34e;
+    background-color: #9ebbd65e !important;
 }
 
 .lexareatabs .lexareatab {
@@ -3485,7 +3651,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 }
 
 .lexareatabs.row {
-    background-color: light-dark(var(--global-color-terciary), var(--global-button-color));
+    background-color: light-dark(var(--global-color-tertiary), var(--global-button-color));
     border-radius: 8px;
     padding: 3px;
     margin: 6px;
@@ -3551,10 +3717,6 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     margin: 4px 7px !important;
 }
 
-.lexareatabscontent {
-    /* overflow-y: scroll; */
-}
-
 .lexareatabscontent.folded {
     max-height: 0px;
 }
@@ -3572,21 +3734,15 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     height: 32px;
     border-radius: 8px;
     margin: auto 0;
-}
-
-.lexavatar img {
-    width: 100%;
-    height: 100%;
-}
-
-.lexavatar a svg {
-    width: 60%;
-    height: 100%;
+    align-content: center;
 }
 
 .lexavatar * {
     border-radius: 8px;
-    width: 60%;
+}
+
+.lexavatar img {
+    width: 100%;
     height: 100%;
 }
 
@@ -3602,7 +3758,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     height: 128px;
     object-fit: cover;
     border-radius: 6px;
-    outline: 3px solid var(--global-text-terciary);
+    outline: 3px solid var(--global-text-tertiary);
 }
 
 .lexcard:hover a {
@@ -3715,8 +3871,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 }
 
 .lexlistitem:hover {
-    background-color: var(--global-color-secondary);
-    color: var(--global-text-primary);
+    background-color: var(--global-color-tertiary);
 }
 
 .lexlistitem:active {
@@ -3734,7 +3889,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 .lexwidget:has(.lexcheckboxsubmenu),
 .lexwidget:has(.lextogglesubmenu),
 .lexwidget:has(.lexcustomcontainer) {
-    background-color: light-dark(var(--global-color-terciary), var(--global-medium-background));
+    background-color: light-dark(var(--global-color-tertiary), var(--global-medium-background));
     border-radius: 6px;
 }
 
@@ -3765,7 +3920,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     display: inline-flex;
     flex-wrap: wrap;
     line-height: 12px;
-    background-color: light-dark(var(--global-color-terciary), var(--global-button-color));
+    background-color: light-dark(var(--global-color-tertiary), var(--global-button-color));
     border-radius: 8px;
     padding: 4px;
 }
@@ -3792,7 +3947,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 }
 
 .lextags .lextag a:hover {
-    color: light-dark(var(--global-text-terciary), var(--global-text-secondary));
+    color: light-dark(var(--global-text-tertiary), var(--global-text-secondary));
     cursor: pointer;
 }
 
@@ -3820,6 +3975,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 .lexcounterbox .lexcounterlabel {
     width: 100%;
     margin-top: -18px;
+    font-size: var(--global-font-size-sm);
     color: var(--global-text-secondary);
 }
 
@@ -3827,17 +3983,24 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 
 .lextable table {
     width: 100%;
-    border: 2px solid;
-    border-color: light-dark(#dbd8d8c0, #5c5b5b7a);
+    border: 1px solid;
+    border-color: light-dark(#dbd8d8c0, var(--global-button-color));
     border-collapse: separate;
-    /* border-left: 0; */
     border-radius: 8px;
     border-spacing: 0px;
     overflow: hidden;
-    background-color: var(--global-button-color);
+    background-color: var(--global-color-primary);
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 }
 
+.lextable svg, .lextable svg path {
+    --color: var(--global-text-tertiary);
+}
+
+.lextable svg.success, .lextable svg.success path {
+    --color: #42d065 !important;
+}
+
 thead {
     display: table-header-group;
     border-color: inherit;
@@ -3848,28 +4011,40 @@ tr {
     display: table-row;
     vertical-align: inherit;
     border-color: inherit;
+    transition: transform 0.2s ease-in;
+}
+
+tr:has(input:checked) {
+    background-color: var(--global-color-tertiary);
+}
+
+tr:hover, tr.dragging {
+    background-color: var(--global-color-secondary);
+}
+
+tr.dragging {
+    transition: none !important;
+    pointer-events: none;
 }
 
 th {
-    --th-color: light-dark(var(--global-text-quaternary), var(--global-text-primary));
+    --th-color: var(--global-text-secondary);
     color: var(--th-color);
-    font-size: calc(var(--global-font-size) + 1px) !important;
+    font-size: var(--global-font-size);
     cursor: pointer;
     transition: all 0.1s linear;
-    background-color: color-mix(in srgb, var(--global-button-color), #000 10%);
+    background-color: var(--global-color-tertiary);
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
 }
 
-tr:hover {
-    background-color: color-mix(in srgb, var(--global-button-color), #000 7%);
-}
-
-th a {
-    margin-left: 4px;
+th a, td a {
     font-size: var(--global-font-size-xs) !important;
+    display: flex;
+    margin-left: 0px !important;
+    place-self: center;
 }
 
 th a:active {
@@ -3885,7 +4060,6 @@ th, td {
     padding-inline: 12px;
     text-align: left;
     vertical-align: top;
-    /* border-left: 2px solid red; */
 }
 
 th.sm, td.sm {
@@ -3894,9 +4068,12 @@ th.sm, td.sm {
 
 th .lexcheckbox, td .lexcheckbox {
     margin-top: 3px;
+    width: 1.25em;
+    height: 1.25em;
 }
 
 td {
+    align-content: center;
     border-top: 2px solid;
     border-color: light-dark(#dbd8d8c0, #5c5b5b7a);
 }
@@ -3911,13 +4088,15 @@ thead:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td
 
 .lextable .lextablebuttons {
     display: inline-flex;
-    gap: 8px;
+    gap: 0.8rem;
 }
 
-:root[data-theme="light"] {
-    .lextable table {
-        box-shadow: none;
-    }
+.lextable .lextablebuttons .lexicon {
+    font-size: var(--global-font-size-sm) !important;
+}
+
+:root[data-theme="light"] .lextable table {
+    box-shadow: none;
 }
 
 /* Custom Widgets Widget */
@@ -4040,11 +4219,11 @@ thead:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td
 }
 
 .lexknob.disabled .knobmarker {
-    background-color: var(--global-text-terciary);
+    background-color: var(--global-text-tertiary);
 }
 
 .lexknob.disabled .knobmarker {
-  background-color: var(--global-text-terciary);
+  background-color: var(--global-text-tertiary);
 }
 
 .lexknob.sm .knobmarker {
@@ -4058,38 +4237,35 @@ thead:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td
     margin-top: 8px;
 }
 
-:root[data-theme="light"] {
-
-    .lexknob .knobcircle {
-        background: rgb(182, 182, 182);
-        background: linear-gradient(180deg, rgba(200, 200, 200, 1) 0%, rgba(160, 160, 160, 1) 100%);
-        box-shadow: 0px 0px 8px 2px #a3a3a379;
-    }
+:root[data-theme="light"] .lexknob .knobcircle {
+    background: rgb(182, 182, 182);
+    background: linear-gradient(180deg, rgba(200, 200, 200, 1) 0%, rgba(160, 160, 160, 1) 100%);
+    box-shadow: 0px 0px 8px 2px #a3a3a379;
+}
 
-    /* Arc Indicator */
-    .lexknob .knobcircle::before {
-        border: 2px solid rgba(255, 255, 255, 0.2);
-    }
+/* Arc Indicator */
+:root[data-theme="light"] .lexknob .knobcircle::before {
+    border: 2px solid rgba(255, 255, 255, 0.2);
+}
 
-    /* Tick Marks */
-    .lexknob.show-ticks .knobcircle::after {
-        background: repeating-conic-gradient(transparent 0deg,
-                rgba(50, 50, 50, 0.493) 1deg 3deg,
-                transparent 4deg calc(var(--knob-snap-mark) - 1deg));
-    }
+/* Tick Marks */
+:root[data-theme="light"] .lexknob.show-ticks .knobcircle::after {
+    background: repeating-conic-gradient(transparent 0deg,
+            rgba(50, 50, 50, 0.493) 1deg 3deg,
+            transparent 4deg calc(var(--knob-snap-mark) - 1deg));
+}
 
-    .lexknob .innerknobcircle {
-        background-color: rgb(182, 182, 182);
-    }
+:root[data-theme="light"] .lexknob .innerknobcircle {
+    background-color: rgb(182, 182, 182);
+}
 
-    .lexknob .knobmarker {
-        background-color: var(--global-selected-dark);
-        filter: brightness(1.5);
-    }
+:root[data-theme="light"] .lexknob .knobmarker {
+    background-color: var(--global-selected-dark);
+    filter: brightness(1.5);
+}
 
-    .lexknob.disabled .knobmarker {
-        background-color: var(--global-text-primary);
-    }
+:root[data-theme="light"] .lexknob.disabled .knobmarker {
+    background-color: var(--global-text-primary);
 }
 
 /* Icon swap */
@@ -4185,7 +4361,6 @@ thead:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td
 
 .lextimeline .lextree {
     margin: 0px !important;
-    width: 100%;
 }
 
 .lextimeline .lextree .lextreeitem {
@@ -4210,7 +4385,7 @@ thead:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td
 }
 
 .lextimeline .lexbutton.accept:hover {
-    background-color: var(--global-button-color-hovered);
+    background-color: color-mix(in srgb, var(--global-button-color), #000 7%);
 }
 
 /**/
@@ -4698,7 +4873,7 @@ ul.lexassetscontent {
 }
 
 .lexcodetabinfo {
-    background-color: light-dark(var(--global-color-terciary), var(--global-medium-background));
+    background-color: light-dark(var(--global-color-tertiary), var(--global-medium-background));
     position: absolute;
     z-index: 3;
     bottom: 0px;
@@ -4708,7 +4883,7 @@ ul.lexassetscontent {
 .lexcodegutter {
     width: 48px;
     height: calc(100% - 65px);
-    background-color: light-dark(var(--global-color-terciary), var(--global-medium-background));
+    background-color: light-dark(var(--global-color-tertiary), var(--global-medium-background));
     margin-top: 28px;
     overflow: hidden;
     position: absolute;
@@ -4717,7 +4892,7 @@ ul.lexassetscontent {
 
 .lexcodeeditor .codetabsarea {
     height: calc(100% - 64px) !important;
-    background-color: light-dark(var(--global-color-terciary), var(--global-medium-background));
+    background-color: light-dark(var(--global-color-tertiary), var(--global-medium-background));
     overflow: scroll;
 }
 
@@ -4818,7 +4993,7 @@ ul.lexassetscontent {
 }
 
 .lexcodeeditor pre .line-gutter {
-    color: var(--global-text-terciary);
+    color: var(--global-text-tertiary);
     width: 48px;
     height: var(--code-editor-row-height);
     font-size: var(--code-editor-font-size);
@@ -5016,7 +5191,7 @@ ul.lexassetscontent {
 }
 
 .lexcodeeditor .autocomplete pre:hover {
-    background-color: var(--global-color-terciary);
+    background-color: var(--global-color-tertiary);
     cursor: pointer;
 }
 
@@ -5131,93 +5306,90 @@ ul.lexassetscontent {
 
 .cm-bln.markdown { color: #a1d2f0; }  /* builtin */
 
-:root[data-theme="light"] {
-
-    .lexcodeeditor pre.active-line {
-        background-color: #c5c4c4ab;
-    }
+:root[data-theme="light"] .lexcodeeditor pre.active-line {
+    background-color: #c5c4c4ab;
+}
 
-    .lexcodeeditor.disabled pre.active-line {
-        background: none;
-    }
+:root[data-theme="light"] .lexcodeeditor.disabled pre.active-line {
+    background: none;
+}
 
-    .lexcodescrollbar div {
-        /* thumb */
-        background-color: #8383839d !important;
-    }
+:root[data-theme="light"] .lexcodescrollbar div {
+    /* thumb */
+    background-color: #8383839d !important;
+}
 
-    .lexcodescrollbar div:hover {
-        /* thumb */
-        background-color: #5e5e5ea9 !important;
-    }
+:root[data-theme="light"] .lexcodescrollbar div:hover {
+    /* thumb */
+    background-color: #5e5e5ea9 !important;
+}
 
-    .cm-str { color: #a15e3e; }   /* string */
-    .cm-std { color: #a753c0; }   /* statements & declarations */
-    .cm-kwd { color: #1967d2; }   /* keyword */
-    .cm-com { color: #188038; }   /* comment */
+:root[data-theme="light"] .cm-str { color: #a15e3e; }   /* string */
+:root[data-theme="light"] .cm-std { color: #a753c0; }   /* statements & declarations */
+:root[data-theme="light"] .cm-kwd { color: #1967d2; }   /* keyword */
+:root[data-theme="light"] .cm-com { color: #188038; }   /* comment */
 
-    .cm-typ.javascript { color: #0b9484; }  /* type */
-    .cm-dec.javascript { color: #c5221f; }  /* decimal */
-    .cm-sym.javascript { color: #333333; }  /* symbol */
-    .cm-mtd.javascript { color: #539ac7 }   /* method */
+:root[data-theme="light"] .cm-typ.javascript { color: #0b9484; }  /* type */
+:root[data-theme="light"] .cm-dec.javascript { color: #c5221f; }  /* decimal */
+:root[data-theme="light"] .cm-sym.javascript { color: #333333; }  /* symbol */
+:root[data-theme="light"] .cm-mtd.javascript { color: #539ac7 }   /* method */
 
-    .cm-typ.c { color: #0b9484; }   /* type */
-    .cm-bln.c { color: #333333; }   /* builtin */
-    .cm-dec.c { color: #c5221f; }   /* decimal */
-    .cm-sym.c { color: #333333; }   /* symbol */
-    .cm-mtd.c { color: #539ac7 }    /* method */
-    .cm-ppc.c { color: #626262 }    /* preprocessor */
+:root[data-theme="light"] .cm-typ.c { color: #0b9484; }   /* type */
+:root[data-theme="light"] .cm-bln.c { color: #333333; }   /* builtin */
+:root[data-theme="light"] .cm-dec.c { color: #c5221f; }   /* decimal */
+:root[data-theme="light"] .cm-sym.c { color: #333333; }   /* symbol */
+:root[data-theme="light"] .cm-mtd.c { color: #539ac7 }    /* method */
+:root[data-theme="light"] .cm-ppc.c { color: #626262 }    /* preprocessor */
 
-    .cm-typ.cpp { color: #0b9484; }   /* type */
-    .cm-bln.cpp { color: #333333; }   /* builtin */
-    .cm-dec.cpp { color: #c5221f; }   /* decimal */
-    .cm-sym.cpp { color: #333333; }   /* symbol */
-    .cm-mtd.cpp { color: #539ac7 }    /* method */
-    .cm-ppc.cpp { color: #626262 }    /* preprocessor */
+:root[data-theme="light"] .cm-typ.cpp { color: #0b9484; }   /* type */
+:root[data-theme="light"] .cm-bln.cpp { color: #333333; }   /* builtin */
+:root[data-theme="light"] .cm-dec.cpp { color: #c5221f; }   /* decimal */
+:root[data-theme="light"] .cm-sym.cpp { color: #333333; }   /* symbol */
+:root[data-theme="light"] .cm-mtd.cpp { color: #539ac7 }    /* method */
+:root[data-theme="light"] .cm-ppc.cpp { color: #626262 }    /* preprocessor */
 
-    .cm-sym.cmake { color: #a753c0; }  /* symbol */
+:root[data-theme="light"] .cm-sym.cmake { color: #a753c0; }  /* symbol */
 
-    .cm-kwd.css { color: #c49319; }   /* keyword */
-    .cm-typ.css { color: #539ac7; }   /* type */
-    .cm-bln.css { color: #2194ce; }   /* builtin */
-    .cm-dec.css { color: #c5221f; }   /* decimal */
-    .cm-sym.css { color: #a753c0; }   /* symbol */
+:root[data-theme="light"] .cm-kwd.css { color: #c49319; }   /* keyword */
+:root[data-theme="light"] .cm-typ.css { color: #539ac7; }   /* type */
+:root[data-theme="light"] .cm-bln.css { color: #2194ce; }   /* builtin */
+:root[data-theme="light"] .cm-dec.css { color: #c5221f; }   /* decimal */
+:root[data-theme="light"] .cm-sym.css { color: #a753c0; }   /* symbol */
 
-    .cm-dec.json { color: #c5221f; }  /* decimal */
-    .cm-sym.json { color: #a753c0; }  /* symbol */
+:root[data-theme="light"] .cm-dec.json { color: #c5221f; }  /* decimal */
+:root[data-theme="light"] .cm-sym.json { color: #a753c0; }  /* symbol */
 
-    .cm-typ.glsl { color: #0b9484; }  /* type */
-    .cm-dec.glsl { color: #c5221f; }  /* decimal */
-    .cm-mtd.glsl { color: #539ac7; }  /* method */
-    .cm-sym.glsl { color: #a753c0; }  /* symbol */
+:root[data-theme="light"] .cm-typ.glsl { color: #0b9484; }  /* type */
+:root[data-theme="light"] .cm-dec.glsl { color: #c5221f; }  /* decimal */
+:root[data-theme="light"] .cm-mtd.glsl { color: #539ac7; }  /* method */
+:root[data-theme="light"] .cm-sym.glsl { color: #a753c0; }  /* symbol */
 
-    .cm-typ.wgsl { color: #0b9484; }  /* type */
-    .cm-dec.wgsl { color: #c5221f; }  /* decimal */
-    .cm-mtd.wgsl { color: #539ac7; }  /* method */
-    .cm-sym.wgsl { color: #a753c0; }  /* symbol */
-    .cm-ppc.wgsl { color: #626262; }  /* preprocessor */
+:root[data-theme="light"] .cm-typ.wgsl { color: #0b9484; }  /* type */
+:root[data-theme="light"] .cm-dec.wgsl { color: #c5221f; }  /* decimal */
+:root[data-theme="light"] .cm-mtd.wgsl { color: #539ac7; }  /* method */
+:root[data-theme="light"] .cm-sym.wgsl { color: #a753c0; }  /* symbol */
+:root[data-theme="light"] .cm-ppc.wgsl { color: #626262; }  /* preprocessor */
 
-    .cm-typ.rust { color: #0b9484; }  /* type */
-    .cm-dec.rust { color: #c5221f; }  /* decimal */
-    .cm-sym.rust { color: #333333; }  /* symbol */
-    .cm-mtd.rust { color: #539ac7 }   /* method */
+:root[data-theme="light"] .cm-typ.rust { color: #0b9484; }  /* type */
+:root[data-theme="light"] .cm-dec.rust { color: #c5221f; }  /* decimal */
+:root[data-theme="light"] .cm-sym.rust { color: #333333; }  /* symbol */
+:root[data-theme="light"] .cm-mtd.rust { color: #539ac7 }   /* method */
 
-    .cm-typ.python { color: #0b9484; }  /* type */
-    .cm-dec.python { color: #c5221f; }  /* decimal */
-    .cm-sym.python { color: #333333; }  /* symbol */
-    .cm-mtd.python { color: #539ac7 }   /* method */
+:root[data-theme="light"] .cm-typ.python { color: #0b9484; }  /* type */
+:root[data-theme="light"] .cm-dec.python { color: #c5221f; }  /* decimal */
+:root[data-theme="light"] .cm-sym.python { color: #333333; }  /* symbol */
+:root[data-theme="light"] .cm-mtd.python { color: #539ac7 }   /* method */
 
-    .cm-dec.batch { color: #c5221f; }   /* decimal */
-    .cm-sym.batch { color: #a753c0; }   /* symbol */
+:root[data-theme="light"] .cm-dec.batch { color: #c5221f; }   /* decimal */
+:root[data-theme="light"] .cm-sym.batch { color: #a753c0; }   /* symbol */
 
-    .cm-bln.html { color: #539ac7; }    /* builtin */
-    .cm-sym.html { color: #696969; }    /* symbol */
+:root[data-theme="light"] .cm-bln.html { color: #539ac7; }    /* builtin */
+:root[data-theme="light"] .cm-sym.html { color: #696969; }    /* symbol */
 
-    .cm-bln.xml { color: #a1d2f0; }    /* builtin */
-    .cm-sym.xml { color: #929292; }    /* symbol */
+:root[data-theme="light"] .cm-bln.xml { color: #a1d2f0; }    /* builtin */
+:root[data-theme="light"] .cm-sym.xml { color: #929292; }    /* symbol */
 
-    .cm-bln.markdown { color: #a1d2f0; }  /* builtin */
-}
+:root[data-theme="light"] .cm-bln.markdown { color: #a1d2f0; }  /* builtin */
 
 /* Node Graph */
 
@@ -5228,7 +5400,7 @@ ul.lexassetscontent {
     cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAA4lJREFUWEftl1FIk1EUx/9qOGtNU4wkC1RQEc2hD9P5oigqH1PxIQqhgYI+iHtIE0ZQKoZo6BDniFScsIcgCSEILMPhJBRCh6G+qKSopHy2iVnOudniyDdZY3NTJ/rghcvGuPvO7/zP/557Pz+c8/A75/i4cAAERNPGzTMXyFEBfwAB6+vrqoiIiMcA9gFYzhrEEeAKgKC1tbX6nZ2dh3t7e3UJCQnvAJgBWM8KxBkgWKvV3g8KCnoZFxfHZ1l2fHV1tS4vL+8rgD1OFZ+WxREgAMCN0tLSex0dHR9DQkJ4ra2tkMlkFoPBoGppaWlTqVQGrix/fUXhCEDfQwDcMRqNY9nZ2YKpqSkkJydDoVBYExMTN7a3t5vi4+M1AHZ9VRbnbXgdQOTs7OzbtrY2YV9f32GiUqkU7e3tFpPJNL6ystKckZExyvmDzHri4QxwFUDE2NhYvV6vL5HJZIHOT6ay1NTU2FiW7RoYGFBUVVWtnKYszgAU8KZarS5JSkpqEIlEfFepRUdHo7e3dzclJWVrc3NTERMT8/qkZXEGICOGSSQSYX9//yCfz6et6XYUFxdDrVbTNp1YWlpqT01NHTxuWZwB7Ea8y7LsF4ZhgicnJ90C8Hg8ZGZmQiwWo6GhAQaD4VV4ePgTDoK6qcfh6iw4MOL09PSbzs7O1O7u7v8eEhsbC4lEgtzcXLNYLPa32WyW5eXlaaPR+Hlubm64srJyAsAOAK+2qisAMuItnU73fH5+/lF5efmhEaurq9HY2GhZWFhYWlxcnNRqtd9UKtUsgF8AqEf8BLDF+eHEClDA8J6engcikahJKBReIwnS0tIwMjKyL5fLXyiVSqoLBfrDZWsCQJMyt/cIj/LTAlcKkBFDs7KykoaGhoYDAwPpkIJOp9u1Wq0fcnJyOgFscFlTMGrRdFbQpJ7glfR2OlcAjkbUMQwTWlBQgLKystWoqCgpgGVObsqYgh4roLMs7i4kZMTbMzMzGqVSmdbV1UXt+Gltbe17AD8A/PbVweQO4MCIo6OjcoFAIDWbzZ/S09ObAVDX2+Rk96rGnha5AyAjhmk0msL8/PxnDMOU6fX67wBYzmxeOdxTcHcmpN/JiILCwsLIiooKcVFR0TCX+bavpD/KhHYwHt2QAFA7JqfbHe9NYl6vOepWfHBHBECftL1o+kx6Twp4ncFpF16494LTJnTs/18qcKnAPygqQzAAgQjBAAAAAElFTkSuQmCC) 4 4, auto !important;
 }
 
-.lexgraph .lexdropdown ul {
+.lexgraph .lexselect ul {
     max-height: unset;
 }
 
@@ -5269,6 +5441,7 @@ ul.lexassetscontent {
     left: 0;
     bottom: 0;
     right: 0;
+    stroke: unset;
 }
 
 .lexgraph .box-selection-svg {