lexgui 0.5.1 → 0.5.3

package/build/lexgui.css

@@ -1,8 +1,9 @@
 /* clean-css ignore:start */
+@import url("utilities.css");
 @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");
+    font-family: "GeistSans";
+    src: url("https://raw.githubusercontent.com/jxarco/lexgui.js/master/data/GeistSans.ttf");
 }
 /* clean-css ignore:end */
 
@@ -10,8 +11,8 @@
     /* default color scheme */
     color-scheme: dark;
 
-    --global-font: "GoogleSans", sans-serif;
-    --global-title-font: "GoogleSans", sans-serif;
+    --global-font: "GeistSans", sans-serif;
+    --global-title-font: "GeistSans", sans-serif;
     --global-font-size-xs: 0.625rem; /* 10px */
     --global-font-size-sm: 0.75rem; /* 12px */
     --global-font-size: 0.875rem; /* 14px */
@@ -19,24 +20,21 @@
     --global-font-size-xl: 1.125rem; /* 18px */
     --global-font-size-xxl: 1.375rem; /* 22px */
 
-    --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-primary: light-dark(#ffffff, #0b0b0c); /* Near White / Near Black */
+    --global-color-secondary: light-dark(#f4f4f5, #1c1c1d); /* Very Light Gray / Very Dark Gray */
+    --global-color-tertiary: light-dark(#e6e6e8, #2e2e2f); /* Soft Gray / Deep Gray */
+    --global-color-quaternary: light-dark(#cfcfd2, #363637); /* Muted Gray / Medium Dark */
+    --global-color-quinary: light-dark(#b5b5b8, #4e4e4f); /* Gentle Gray / Soft Dark Gray */
+    --global-color-accent: #2d69da;
+    --global-color-accent-light: #0d99ff;
+    --global-color-accent-dark: #304b86;
     --global-color-warning: #ffc107;
     --global-color-error: #f54c4c;
-    --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-intense-background: light-dark(#fefefe, #030304);
     --global-medium-background: #252525;
     --global-blur-background: light-dark(#f7f7f7d8, #1f1f1fe7);
     --global-color-transparent: #00000000;
@@ -155,13 +153,6 @@
     }
 }
 
-/* Some global colors */
-
-.orange { color: orange }
-.gray { color: gray }
-.dodgerblue { color: dodgerblue }
-.lightblue { color: #5aa8f7 }
-
 ::-webkit-scrollbar {
     height: 3px;
     width: 4px;
@@ -193,6 +184,12 @@ body {
     font-family: var(--global-font);
 }
 
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
 :root[data-strictVP="false"] {
     overflow-y: auto;
 }
@@ -202,7 +199,7 @@ blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, p, pre {
 }
 
 a:any-link {
-    color: var(--global-selected-light);
+    color: var(--global-color-accent-light);
 }
 
 canvas {
@@ -284,19 +281,23 @@ body.noevents * {
     cursor: move;
 }
 
-.hidden {
-    display: none !important;
+.hidden-opacity {
+    opacity: 0 !important;
+    pointer-events: none;
 }
 
-.sticky {
-    position: sticky;
-    top: 0;
+.ellipsis-overflow {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
-.hiddenOpacity {
-    opacity: 0 !important;
-    pointer-events: none;
-}
+/* Some global colors */
+
+.orange { color: orange }
+.gray { color: gray }
+.dodgerblue { color: dodgerblue }
+.lightblue { color: #5aa8f7 }
 
 svg.xs { width: var(--svg-size-xs); height: var(--svg-size-xs); }
 svg.sm { width: var(--svg-size-sm); height: var(--svg-size-sm); }
@@ -324,7 +325,9 @@ svg.xxl { width: var(--svg-size-xxl); height: var(--svg-size-xxl); }
     top: 0;
     bottom: 0;
     width: 100%;
-    height: 100%;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
     position: absolute;
     outline: none;
 }
@@ -347,6 +350,8 @@ svg.xxl { width: var(--svg-size-xxl); height: var(--svg-size-xxl); }
     line-height: inherit !important;
     color: var(--global-text-secondary);
     align-content: center;
+    border-radius: 4px;
+    transition: all 0.15s linear;
 }
 
 .lexicon:hover {
@@ -358,6 +363,10 @@ svg.xxl { width: var(--svg-size-xxl); height: var(--svg-size-xxl); }
     transform: scale(0.99);
 }
 
+.lexicon.triggered {
+    background-color: var(--global-color-secondary);
+}
+
 svg, svg path {
     width: 1rem;
     height: 1rem;
@@ -401,7 +410,7 @@ a svg, svg path {
     display: flex;
     flex-direction: row;
     position: relative;
-    width: calc(100% - 1.6rem);
+    width: 100%;
     background-color: var(--global-intense-background);
     border: 1px solid var(--global-color-tertiary);
     box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
@@ -517,7 +526,7 @@ a svg, svg path {
 
 .commandbar .gs-header {
     width: 100%;
-    height: 32px;
+    height: 44px;
     display: flex;
     padding: 6px;
 }
@@ -574,7 +583,7 @@ a svg, svg path {
     padding: 0px;
     margin-left: -28px;
     margin-top: 2px;
-    color: var(--global-selected-light);
+    color: var(--global-color-accent-light);
     float: left;
 }
 
@@ -604,25 +613,20 @@ a svg, svg path {
 }
 
 .commandbar .searchitembox .searchitem.hovered {
-    background-color: var(--global-selected);
+    background-color: var(--global-color-accent);
     color: #f5f5f5;
 }
 
 /* Footer */
 
 .lexfooter {
-    min-height: 96px;
     background-color: var(--global-color-primary);
-    padding: 15px;
+    padding: 0.5rem;
     width: 100%;
     font-size: var(--global-font-size);
     line-height: 1.25rem;
 }
 
-.lexfooter .wrapper {
-    width: calc(100% - 30px);
-}
-
 .lexfooter .columns {
     display: grid;
     text-align: center;
@@ -638,11 +642,13 @@ a svg, svg path {
 .lexfooter h2 {
     margin-block-start: 0.83em;
     margin-block-end: 0.83em;
+    font-weight: 600;
 }
 
 .lexfooter ul li {
     margin-bottom: 8px;
-    font-size: var(--global-font-size-lg);
+    font-size: var(--global-font-size);
+    color: var(--global-text-secondary);
 }
 
 .lexfooter a {
@@ -652,6 +658,7 @@ a svg, svg path {
 }
 
 .lexfooter .credits-and-socials {
+    color: var(--global-text-secondary);
     display: grid;
     align-items: center;
     grid-template-columns: 1fr 1fr;
@@ -699,12 +706,12 @@ a svg, svg path {
 }
 
 .lexfooter a:hover {
-    color: var(--global-selected-light);
+    color: var(--global-color-accent-light);
 }
 
 .lexfooter svg:hover {
-    fill: var(--global-selected-light);
-    stroke: var(--global-selected-light);
+    fill: var(--global-color-accent-light);
+    stroke: var(--global-color-accent-light);
 }
 
 .lexfooter hr {
@@ -735,17 +742,17 @@ a svg, svg path {
 }
 
 .lexdialogtitle {
-    outline: none;
+    width: 100%;
     font-family: var(--global-title-font);
     font-weight: 600;
     font-size: var(--global-font-size-xl);
     color: var(--global-text-secondary);
     text-shadow: 0px 1px 6px #22222283;
-    width: calc(100% - 24px);
     padding: 12px;
     padding-left: 16px;
     border-top-left-radius: 8px;
     border-top-right-radius: 8px;
+    outline: none;
     display: flex;
     justify-content: space-between;
     -webkit-user-select: none;
@@ -756,6 +763,7 @@ a svg, svg path {
 }
 
 .lexdialogcontent {
+    width: 100%;
     padding: 15px;
     word-break: break-all;
     color: var(--global-text-primary);
@@ -802,7 +810,6 @@ a svg, svg path {
 
 .lexdialog.prompt textarea {
     color: var(--global-text-secondary);
-    font-weight: normal;
 }
 
 /* Pocket Dialog */
@@ -816,7 +823,7 @@ a svg, svg path {
 }
 
 .lexdialog.pocket .lexdialogtitle {
-    width: calc(100% - 28px);
+    width: 100%;
     font-size: var(--global-font-size-lg);
     background: var(--global-intense-background);
 }
@@ -954,6 +961,11 @@ a svg, svg path {
     transform: scale(0.99);
 }
 
+.lexdropdownmenuitem .lexcheckbox {
+    width: 1.25em;
+    height: 1.25em;
+}
+
 .lexdropdownmenuitem a {
     margin-left: auto;
     margin-right: 4px;
@@ -1064,14 +1076,14 @@ a svg, svg path {
 }
 
 .lexsplitbar.dragging-split-area {
-    background-color: var(--global-button-color);
+    background-color: red;
 }
 
 /* Branches */
 
 .lexpanel {
     margin: 0;
-    margin-left: 3px;
+    padding: 4px;
     overflow: hidden;
     overflow-y: scroll;
 }
@@ -1081,6 +1093,7 @@ a svg, svg path {
 }
 
 .lexbranch {
+    width: 100%;
     border-radius: 6px;
     margin-bottom: 4px !important;
 }
@@ -1099,8 +1112,8 @@ a svg, svg path {
 
 .lexbranchtitle {
     font-family: var(--global-title-font);
-    font-weight: 600;
     font-size: var(--global-font-size-lg);
+    font-weight: 500;
     color: var(--global-text-primary);
     background-color: var(--global-color-secondary);
     text-shadow: 0px 1px 6px #42424260;
@@ -1152,7 +1165,7 @@ a svg, svg path {
 }
 
 .lexbranchtitle.wtabs span.selected {
-    border-top: 2px solid var(--global-selected-light);
+    border-top: 2px solid var(--global-color-accent-light);
     background-color: var(--global-color-secondary);
     color: var(--global-text-primary);
     text-shadow: 0px 1px 2px #000;
@@ -1211,11 +1224,6 @@ a svg, svg path {
     font-size: var(--global-font-size);
 }
 
-.lexinlinewidgets .lexwidget {
-    padding-left: 10px;
-    padding-right: 10px;
-}
-
 .lexinlinewidgets .lexwidgetname.float-center {
     justify-content: center;
 }
@@ -1227,10 +1235,6 @@ a svg, svg path {
     transform: translateX(-1em);
 }
 
-.lexwidget.nobranch {
-    width: calc(100% - 10px);
-}
-
 .lexwidget.auto {
     width: unset !important;
 }
@@ -1247,11 +1251,6 @@ a svg, svg path {
     margin-right: 8px;
 }
 
-.lexwidget.micro button {
-    padding-left: 4px;
-    padding-right: 4px;
-}
-
 .lexwidget.small {
     width: 5% !important;
 }
@@ -1262,8 +1261,6 @@ a svg, svg path {
 
 .lexinlinewidgets {
     display: flex;
-    gap: 0.1rem;
-    justify-content: space-around;
 }
 
 .lexwidgetseparator div {
@@ -1298,22 +1295,73 @@ a svg, svg path {
     padding-inline: 0.4rem;
 }
 
+.lexwidget .inputicon {
+    padding: 6px;
+    font-size: var(--global-font-size-sm);
+    align-self: center;
+    text-align: center;
+}
+
+.lexseparator {
+    border-top: 1px solid var(--global-color-secondary);
+    border-bottom: 1px solid var(--global-color-tertiary);
+    margin: 5px 0 5px 0px;
+}
+
+.lexbranch .lexseparator {
+    border-top: 1px solid var(--global-color-primary);
+    border-bottom: 1px solid var(--global-color-tertiary);
+    width: -moz-calc(100% - 8px);
+    width: -webkit-calc(100% - 8px);
+    width: calc(100% - 8px);
+    margin: 5px 0 5px 4px;
+}
+
+:root[data-theme="light"] .lexbranch .lexseparator {
+    border-top: 1px solid #e7e7e7;
+    border-bottom: 1px solid #c1c1c1;
+}
+
 .lexwidget input:not(.lexcheckbox, .lextoggle, .lexrangeslider) {
     font-family: var(--global-font);
-    background: none;
-    padding: 3px;
+    padding: 4px;
     color: var(--global-text-primary);
-    font-weight: 500;
+    background-color: var(--global-color-tertiary);
     outline: none;
     border-radius: 6px;
-    border: 2px solid var(--global-color-transparent);
-    transition: background-color 0.2s linear, border-color 0.15s linear;
+    border: 1px solid var(--global-color-transparent);
+    transition-property: color, background-color, border-color;
+    transition-timing-function: ease-out;
+    transition-duration: .15s;
+}
+
+.lexwidget input:not(.lexcheckbox, .lextoggle, .lexrangeslider):hover {
+    background-color: color-mix(in srgb, var(--global-color-tertiary), #000 7%);
 }
 
-.lexwidget .lextext {
+.lexwidget input.colorinput {
+    border: none;
+    margin-left: -4px;
+}
+
+.lexwidget input:disabled:not(.lextoggle) {
+    outline: none;
+    border: none;
+    color: var(--global-text-tertiary);
+}
+
+/* Text Widget */
+
+.lexwidget input.lextext, .lexwidget div.lextext {
     border-radius: 6px;
     position: relative;
-    transition: 0.2s linear;
+    border: 1px solid transparent;
+    padding: 4px 12px !important;
+}
+
+.lexwidget .lextext:disabled {
+    background-color: var(--global-color-tertiary);
+    color: var(--global-text-tertiary);
 }
 
 .lexwidget .lextext.formlabel {
@@ -1321,34 +1369,36 @@ a svg, svg path {
     margin-bottom: -12px;
 }
 
-.lexwidget .lextext:not(:has(div)) {
-    background-color: var(--global-button-color);
+.lexwidget .lextext.outline {
+    background: var(--global-color-primary);
+    border: 1px solid #7a797c4f;
 }
 
-.lexwidget input:not(.lexcheckbox, .lextoggle, .lexrangeslider):hover {
-    background-color: color-mix(in srgb, var(--global-button-color), #000 7%);
+.lexwidget .lextext.nobg {
+    background: none;
+    border: 1px solid transparent;
 }
 
-.lexwidget .lextext input {
-    padding: 5px;
+.lexwidget .lextext.dashed {
+    background: var(--global-color-primary);
+    border: 1px dashed #7a797c4f;
 }
 
-.lexwidget .lextext input:focus {
-    border: 2px solid var(--global-selected);
+.lexwidget .lextext.outline:hover, .lexwidget .lextext.nobg:hover {
+    background: none;
 }
 
-.lexwidget .lextext input:invalid:focus {
-    border: 2px solid var(--global-color-error);
+.lexwidget .lextext:focus {
+    border: 1px solid var(--global-text-quaternary);
 }
 
-.lexwidget .lextext div {
-    color: var(--global-text-secondary);
-    padding-left: 6px;
+.lexwidget .lextext:invalid:focus {
+    border: 1px solid var(--global-color-error);
 }
 
 .lexwidget .lextext.lexwarning div {
     color: var(--global-color-warning);
-    font-weight: 700;
+    font-weight: 600;
 }
 
 .lexwidget .lextext.lexwarning i {
@@ -1356,12 +1406,7 @@ a svg, svg path {
     margin-right: 16px;
 }
 
-.lexwidget .inputicon {
-    padding: 6px;
-    font-size: var(--global-font-size-sm);
-    align-self: center;
-    text-align: center;
-}
+/* TextArea Widget */
 
 .lexwidget textarea {
     word-break: break-word;
@@ -1369,10 +1414,9 @@ a svg, svg path {
     background: none;
     padding: 5px;
     color: var(--global-text-primary);
-    font-weight: 600;
     outline: none;
     border-radius: 6px;
-    border: 2px solid var(--global-color-transparent);
+    border: 1px solid var(--global-color-transparent);
     transition: 0.1s linear;
 }
 
@@ -1381,42 +1425,10 @@ a svg, svg path {
 }
 
 .lexwidget textarea:focus {
-    border: 2px solid var(--global-selected);
+    border: 1px solid var(--global-text-quaternary);
 }
 
-.lexwidget input.colorinput {
-    border: none;
-    margin-left: -4px;
-}
-
-.lexwidget input:disabled:not(.lextoggle) {
-    outline: none;
-    border: none;
-    color: var(--global-text-tertiary);
-}
-
-.lexseparator {
-    border-bottom: 1px solid var(--global-button-color);
-    margin: 5px 0 5px 10px;
-}
-
-.lexbranch .lexseparator {
-    border-top: 1px solid #252525;
-    border-bottom: 1px solid rgb(87, 86, 86);
-    width: -moz-calc(100% - 8px);
-    width: -webkit-calc(100% - 8px);
-    width: calc(100% - 8px);
-    margin: 5px 0 5px 4px;
-}
-
-:root[data-theme="light"] .lexwidget .lextext {
-    border: 1px solid var(--global-color-tertiary) !important;
-}
-
-:root[data-theme="light"] .lexbranch .lexseparator {
-    border-top: 1px solid #e7e7e7;
-    border-bottom: 1px solid #c1c1c1;
-}
+/* Title Widget */
 
 .lextitle {
     width: fit-content;
@@ -1432,7 +1444,7 @@ a svg, svg path {
     display: grid;
     align-content: center;
     border-radius: 12px;
-    background-color: var(--global-button-color);
+    background-color: var(--global-color-tertiary);
     display: flex;
     -webkit-user-select: none;
     -moz-user-select: none;
@@ -1442,14 +1454,14 @@ a svg, svg path {
 
 .lexinlinewidgets .lextitle {
     margin: 8px;
-    height: 20px;
+    height: 24px;
     flex: none;
 }
 
 .lextitle a {
     margin-top: 0.3em;
     margin-right: 0.7em;
-    color: var(--global-selected-light);
+    color: var(--global-color-accent-light);
     font-size: var(--global-font-size-sm);
 }
 
@@ -1460,7 +1472,7 @@ a svg, svg path {
 }
 
 .lextitle.link:hover {
-    color: #049EF4;
+    color: var(--global-color-accent-light);
     transform: scale(1.02);
 }
 
@@ -1468,113 +1480,96 @@ a svg, svg path {
 /* Buttons */
 
 .lexbutton {
-    display: grid;
-    align-content: center;
-    --button-color: var(--global-button-color);
+    --button-color: var(--global-color-tertiary);
+    --border-color: var(--global-color-quinary);
     background-color: var(--button-color);
-    border-radius: 6px;
     border: 1px solid transparent;
+    border-radius: 6px;
     min-height: 22px !important;
+    align-content: center;
     color: var(--global-text-primary);
-    font-weight: 500;
     outline: none;
     white-space: nowrap;
     overflow: hidden;
     cursor: pointer;
     font-family: var(--global-font);
+    font-weight: 500;
+    display: grid;
     transition: 0.1s linear;
     padding: 0.35rem;
 }
 
-:root[data-theme="light"] .lexbutton {
-    --button-color: var(--global-button-color);
-    border: 1px solid var(--global-color-tertiary);
-}
-
-:root[data-theme="light"] .lexbutton.selected {
-    background: #3c4145;
-    color: #DDD;
-}
-
 /* Colors */
-.lexbutton.primary { --button-color: var(--global-selected) !important; color: #f9f9f9 !important; }
-.lexbutton.secondary { --button-color: var(--global-selected-light) !important; color: #f9f9f9 !important;  }
-.lexbutton.accent { --button-color: var(--global-color-accent) !important; color: #f9f9f9 !important;  }
-.lexbutton.contrast { --button-color: var(--global-text-primary) !important; color: var(--global-color-primary) !important;  }
-.lexbutton.warning { --button-color: var(--global-color-warning) !important; color: #793205 !important;  }
-.lexbutton.error { --button-color: var(--global-color-error) !important; color: #52020d !important;  }
+.lexbutton.primary { --button-color: var(--global-color-primary); --border-color: var(--global-color-quaternary); color: var(--global-text-primary); }
+.lexbutton.secondary { --button-color: var(--global-color-secondary); --border-color: var(--global-color-quaternary); color: var(--global-text-primary);  }
+.lexbutton.accent { --button-color: var(--global-color-accent); --border-color: var(--global-color-quaternary); color: #fefefe;  }
+.lexbutton.contrast { --button-color: var(--global-text-primary); --border-color: var(--global-color-quaternary); color: var(--global-color-primary);  }
+.lexbutton.warning { --button-color: var(--global-color-warning); --border-color: #793205; color: var(--border-color);  }
+.lexbutton.error { --button-color: var(--global-color-error); --border-color: #52020d; color: var(--border-color);  }
+
 /* Few Sizes */
-.lexbutton.xs { width: 25% !important; margin: 0 auto; }
-.lexbutton.sm { width: 45% !important; margin: 0 auto; }
-/* Styles */
-.lexbutton.outline { box-shadow: none; --button-color: var(--global-intense-background); border: 1px solid var(--global-color-quaternary) !important; }
+.lexbutton.xs { width: 35%; margin: 0 auto; }
+.lexbutton.sm { width: 65%; margin: 0 auto; }
 
-.lexbutton.left {
-    text-align: left;
-    padding-inline: 12px;
+/* Styles */
+.lexbutton.outline {
+    border-color: var(--border-color);
 }
-
-.lexbutton span {
-    align-items: center;
+.lexbutton.dashed {
+    border-style: dashed;
+    border-color: var(--border-color);
 }
 
-.lexbutton span:has(.lexbadge) {
-    display: inline-flex;
-    flex-wrap: nowrap;
-    justify-content: center;
-    gap: 0.4rem;
+.lexbutton:hover {
+    background-color: color-mix(in srgb, var(--button-color), #000 9%) !important;
 }
-
-.lexbutton.foldback {
-    padding: 11px 10px;
-    padding-bottom: 14px;
-    float: right;
-    align-items: center;
-    margin-right: 4px;
-    margin-top: 2px;
+:root[data-theme="light"] .lexbutton:hover {
+    background-color: color-mix(in srgb, var(--button-color), #fff 18%) !important;
 }
 
-.lexbutton a {
-    margin-left: 0px;
-    font-size: var(--global-font-size-sm);
-    pointer-events: none;
+.lexbutton:active:not(.lexbutton.combo) {
+    background-color: color-mix(in srgb, var(--button-color), #fff 4%) !important;
+}
+:root[data-theme="light"] .lexbutton:active:not(.lexbutton.combo) {
+    background-color: color-mix(in srgb, var(--button-color), #000 4%) !important;
 }
 
-.lexbutton.array span {
-    display: inline-flex;
+.lexbutton:disabled {
+    color: var(--global-text-tertiary);
 }
 
-.lexbutton.array a {
-    margin-top: 2px;
-    margin-right: 3px;
-    margin-left: auto;
+.lexbutton.selected {
+    --button-color: var(--global-color-accent);
+    --border-color: var(--global-color-quaternary);
+    color: #fefefe;
 }
 
-.lexbutton:hover {
-    background-color: color-mix(in srgb, var(--button-color), #000 7%);
-    color: var(--global-text-primary);
+.lexbutton * {
+    pointer-events: none;
 }
 
-.lexbutton:active:not(.lexbutton.combo) {
-    background-color: color-mix(in srgb, var(--button-color), #ffffff 4%);
-    color: var(--global-text-secondary);
-    transform: scale(0.99);
+.lexbutton span {
+    align-items: center;
+    display: flex;
+    place-content: center;
+    pointer-events: none;
+    gap: 0.4rem;
 }
 
-.lexbutton:disabled {
-    color: var(--global-text-tertiary);
+.lexbutton.left span {
+    place-content: start;
 }
 
-.lexbutton.selected {
-    background: #3c4145;
-    color: #DDD;
+.lexbutton.array a {
+    margin-right: 4px;
+    margin-left: auto;
 }
 
 /* Combo Buttons */
 
 .lexcombobuttons .lexcombobuttonsbox {
     display: flex;
-    background-color: light-dark(var(--global-color-tertiary), var(--global-button-color));
+    background-color: var(--global-color-tertiary);
     width: max-content;
     justify-self: center;
     padding: 3px;
@@ -1592,9 +1587,9 @@ a svg, svg path {
 
 .lexcombobuttons .lexbutton.combo {
     display: flex;
-    padding: 0.7em 1.6em;
+    padding: 0.45em 1.25em;
     transition: 0.2s;
-    background: none;
+    --button-color: var(--global-color-tertiary);
 }
 
 .lexcombobuttons .lexbutton.combo:hover {
@@ -1602,24 +1597,15 @@ a svg, svg path {
 }
 
 .lexcombobuttons .lexbutton.combo.selected {
-    background-color: var(--global-color-primary);
-    outline: none;
+    --button-color: var(--global-color-primary);
     color: var(--global-text-primary);
-}
-
-.lexcombobuttons .lexbutton.combo:active {
     outline: none;
-    color: #ccc;
 }
 
 .lexcombobuttons .lexbutton.combo span {
     line-height: 18px;
 }
 
-.lexcombobuttons .lexbutton.combo a {
-    font-size: var(--global-font-size-sm);
-}
-
 /* Select (Combobox) */
 
 .lexselect {
@@ -1633,7 +1619,7 @@ a svg, svg path {
 }
 
 .lexselect .lexfilter {
-    width: calc(100% - 6px) !important;
+    width: 100%;
     padding: 2px 3px;
     background-color: var(--global-color-primary);
     border-bottom: 1px solid;
@@ -1670,16 +1656,14 @@ a svg, svg path {
 
 .lexselect .lexselectoptions {
     background-color: var(--global-color-primary);
-    -webkit-backdrop-filter: blur(10px);
-    backdrop-filter: blur(10px);
     margin: 0;
     padding: 0;
     outline: none;
     width: fit-content;
-    max-height: -webkit-fill-available;
+    /* max-height: -webkit-fill-available; */
     position: fixed;
     z-index: 10000;
-    box-shadow: 0 0px 6px rgba(0, 0, 0, 0.603);
+    box-shadow: 0 0px 4px rgba(0, 0, 0, 0.203);
     border-radius: 6px;
     border: 1px solid #7a797c4f;
     overflow-y: auto;
@@ -1700,14 +1684,14 @@ dialog .lexselect .lexselectoptions {
 }
 
 .lexselect ul .lexselectinnerlist {
-    width: calc(100% - 0.6rem);
+    width: 100%;
     height: calc(100% - 25px);
     padding: 0.3rem;
     display: grid;
 }
 
 .lexselect .lexselectitem {
-    width: calc(100% - 0.7rem);
+    width: 100%;
     cursor: pointer;
     color: var(--global-text-primary);
     min-height: 20px;
@@ -1724,15 +1708,15 @@ dialog .lexselect .lexselectoptions {
 }
 
 .lexselect .lexselectlabel {
-    width: calc(100% - 1.6rem);
-    color: var(--global-text-primary);
-    padding-inline: 0.8rem;
+    width: 100%;
+    color: var(--global-text-secondary);
+    padding-inline: 0.6rem;
     padding-block: 0.2rem;
     min-height: 20px;
     line-height: 22px;
     align-content: center;
     display: flow-root;
-    font-weight: 600;
+    font-weight: 500;
 }
 
 .lexselect .lexselectitem.empty {
@@ -1754,11 +1738,12 @@ dialog .lexselect .lexselectoptions {
 .lexselect .lexselectitem a {
     display: none;
     margin-left: auto;
-    margin-right: 8px;
+    margin-right: 0.25rem;
+    padding-left: 1rem;
 }
 
 .lexselect .lexselectitem.selected {
-    font-weight: 700;
+    font-weight: 600;
 }
 
 .lexselect .lexselectitem.selected a {
@@ -1766,8 +1751,8 @@ dialog .lexselect .lexselectoptions {
 }
 
 .lexselect img {
-    max-height: 64px;
-    margin-top: 8px;
+    max-height: 4rem;
+    margin-top: 0.5rem;
 }
 
 :root[data-theme="light"] .lexselect .lexfilter {
@@ -1779,15 +1764,10 @@ dialog .lexselect .lexselectoptions {
     box-shadow: 0 0px 6px rgba(175, 175, 175, 0.788);
 }
 
-:root[data-theme="light"] .lexselect .lexselectitem:hover {
-    background-color: var(--global-selected-light);
-    color: #fff;
-}
-
 /* Check box */
 
 .lexcheckbox {
-    --checkbox-bg-color: var(--global-selected);
+    --checkbox-bg-color: light-dark(var(--global-text-tertiary), var(--global-color-tertiary));
     --checkbox-fg-color: #fff;
     vertical-align: middle;
     flex-shrink: 0;
@@ -1796,6 +1776,7 @@ dialog .lexselect .lexselectoptions {
     width: 1.5em;
     height: 1.5em;
     padding: 0.12rem;
+    padding-left: 0.13rem;
     display: inline-block;
     background-color: var(--global-color-primary);
     color: var(--checkbox-fg-color);
@@ -1812,13 +1793,16 @@ dialog .lexselect .lexselectoptions {
 }
 
 /* Colors */
-.lexcheckbox.primary { --checkbox-bg-color: var(--global-selected); }
-.lexcheckbox.secondary { --checkbox-bg-color: var(--global-selected-light); }
+.lexcheckbox.primary { --checkbox-bg-color: var(--global-color-primary); }
+:root[data-theme="light"] .lexcheckbox.primary { --checkbox-fg-color: var(--global-text-primary); }
+.lexcheckbox.secondary { --checkbox-bg-color: var(--global-color-secondary); }
+:root[data-theme="light"] .lexcheckbox.secondary { --checkbox-fg-color: var(--global-text-tertiary); }
 .lexcheckbox.accent { --checkbox-bg-color: var(--global-color-accent); }
 .lexcheckbox.contrast { --checkbox-bg-color: var(--global-text-primary); --checkbox-fg-color: var(--global-color-primary); }
 .lexcheckbox.warning { --checkbox-bg-color: var(--global-color-warning); }
 .lexcheckbox.error { --checkbox-bg-color: var(--global-color-error); }
 
+
 .lexcheckbox:before {
     content: "";
     opacity: 0;
@@ -1837,7 +1821,7 @@ dialog .lexselect .lexselectoptions {
 }
 
 .lexcheckbox:checked:before, .lexcheckbox[aria-checked=true]:before {
-    clip-path:polygon(20% 100%,20% 80%,50% 80%,50% 0%,70% 0%,70% 100%);
+    clip-path: polygon(20% 100%,20% 80%,50% 80%,50% 0%,70% 0%,70% 100%);
     opacity: 1;
 }
 
@@ -1859,6 +1843,7 @@ dialog .lexselect .lexselectoptions {
     padding: 4px;
     padding-inline: 8px;
     color: var(--global-text-secondary);
+    grid-column: span 2;
 }
 
 .lexcheckboxsubmenu .lexwidget {
@@ -1868,11 +1853,11 @@ dialog .lexselect .lexselectoptions {
 /* Toggle Widget */
 
 .lextoggle {
-    --toggle-bg-color: #1a1a1a;
-    --toggle-fg-color: #f9f9f9;
+    --toggle-bg-color: var(--global-text-tertiary); /* Color of background CHECKED */
+    --toggle-fg-color: #f4f4f6; /* Color of the thumb */
     border: 1px solid transparent;
     color: var(--toggle-fg-color);
-    background-color: var(--global-color-quaternary);
+    background-color: var(--global-color-quaternary); /* Color of background NO check */
     cursor: pointer;
     -webkit-appearance: none;
     -moz-appearance: none;
@@ -1883,9 +1868,8 @@ dialog .lexselect .lexselectoptions {
     -ms-user-select: none;
     user-select: none;
     border-radius: 12px;
-    padding: 3px;
-    width: 36px;
-    height: 22px;
+    width: 40px;
+    height: 21px;
     flex-shrink: 0;
     grid-template-columns: 0fr 1fr 1fr;
     place-content: center;
@@ -1899,11 +1883,11 @@ dialog .lexselect .lexselectoptions {
 }
 
 /* Colors */
-.lextoggle.primary { --toggle-bg-color: var(--global-selected); }
-.lextoggle.secondary { --toggle-bg-color: var(--global-selected-light);  }
-.lextoggle.accent { --toggle-bg-color: var(--global-color-accent);  }
-.lextoggle.contrast { --toggle-bg-color: var(--global-text-primary); --toggle-fg-color: var(--global-color-primary); }
-.lextoggle.warning { --toggle-bg-color: var(--global-color-warning);  }
+.lextoggle.primary { --toggle-bg-color: var(--global-color-primary);}
+.lextoggle.secondary { --toggle-bg-color: var(--global-color-tertiary); }
+.lextoggle.accent { --toggle-bg-color: var(--global-color-accent); }
+.lextoggle.contrast { --toggle-bg-color: var(--global-text-primary); }
+.lextoggle.warning { --toggle-bg-color: var(--global-color-warning); }
 .lextoggle.error { --toggle-bg-color: var(--global-color-error);  }
 
 .lextoggle > * {
@@ -1917,7 +1901,7 @@ dialog .lexselect .lexselectoptions {
     grid-column: 2/span 1;
     grid-row-start: 1;
     height: 100%;
-    padding: .125rem;
+    padding: 0.125rem;
     transition: opacity .2s,rotate .4s
 }
 
@@ -1966,15 +1950,28 @@ dialog .lexselect .lexselectoptions {
 }
 
 .lextoggle:checked, .lextoggle[aria-checked=true], .lextoggle:has(>input:checked) {
-    border: 1px solid var(--global-color-secondary);
     background-color: var(--toggle-bg-color);
     grid-template-columns: 1fr 1fr 0fr;
 }
 
+.lextoggle.contrast:checked, .lextoggle.contrast[aria-checked=true], .lextoggle.contrast:has(>input:checked) {
+    --toggle-fg-color: var(--global-color-primary);
+}
+
+.lextoggle.outline.primary, .lextoggle.outline.secondary {
+    /* border: 1px solid var(--global-text-tertiary); */
+}
+
 .lextoggle.outline:checked, .lextoggle.outline[aria-checked=true], .lextoggle.outline:has(>input:checked) {
-    color: var(--toggle-bg-color);
     border: 1px solid currentColor;
-    background-color: var(--global-color-primary);
+    color: var(--toggle-bg-color);
+    background-color: var(--global-color-secondary);
+}
+
+.lextoggle.outline.primary:checked, .lextoggle.outline.primary[aria-checked=true], .lextoggle.outline.primary:has(>input:checked),
+.lextoggle.outline.secondary:checked, .lextoggle.outline.secondary[aria-checked=true], .lextoggle.outline.secondary:has(>input:checked) {
+    background-color: var(--global-color-quaternary);
+    border: 1px solid var(--global-text-tertiary);
 }
 
 :is(.lextoggle:checked, .lextoggle[aria-checked=true], .lextoggle:has(>input:checked)):before {
@@ -1995,14 +1992,13 @@ dialog .lexselect .lexselectoptions {
 }
 
 .lextogglecont {
-    font-weight: bold;
     display: flex;
     gap: 0.4rem;
     margin: 0 auto;
 }
 
 .lextogglecont .toggletext {
-    font-weight: bold;
+    font-weight: 500;
     width: 95%;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -2012,8 +2008,10 @@ dialog .lexselect .lexselectoptions {
 .lextogglesubmenu {
     width: 100%;
     padding: 6px;
+    padding-inline: 8px;
     color: var(--global-text-secondary);
     margin-top: -1px;
+    grid-column: span 2;
 }
 
 /* Radio Group Widget */
@@ -2026,7 +2024,7 @@ dialog .lexselect .lexselectoptions {
 }
 
 .lexradiogroup span {
-    font-weight: 600;
+    font-weight: 500;
 }
 
 .lexradiogroup .lexradiogroupitem {
@@ -2070,9 +2068,13 @@ dialog .lexselect .lexselectoptions {
     background-color: var(--global-text-primary);
 }
 
+.lexradiogroup .lexradiogroupitem button.checked:disabled span {
+    background-color: var(--global-color-tertiary) !important;
+}
+
 /* Colors */
-.lexradiogroup.primary .lexradiogroupitem button.checked span { background-color: var(--global-selected); }
-.lexradiogroup.secondary .lexradiogroupitem button.checked span { background-color: var(--global-selected-light); }
+.lexradiogroup.primary .lexradiogroupitem button.checked span { background-color: var(--global-color-accent); }
+.lexradiogroup.secondary .lexradiogroupitem button.checked span { background-color: var(--global-color-accent-light); }
 .lexradiogroup.accent .lexradiogroupitem button.checked span { background-color: var(--global-color-accent); }
 .lexradiogroup.contrast .lexradiogroupitem button.checked span { background-color: var(--global-text-primary); }
 .lexradiogroup.warning .lexradiogroupitem button.checked span { background-color: var(--global-color-warning); }
@@ -2101,7 +2103,7 @@ dialog .lexselect .lexselectoptions {
 }
 
 .lexcolor:has(input:focus) input[type="color"] {
-    outline: 2px solid var(--global-selected);
+    outline: 2px solid var(--global-color-accent);
     border-radius: 4px;
 }
 
@@ -2114,6 +2116,7 @@ dialog .lexselect .lexselectoptions {
 
 .lexcolor input[type="color"] {
     cursor: pointer;
+    background: none;
 }
 
 .lexcolor .lexwidget {
@@ -2127,10 +2130,7 @@ dialog .lexselect .lexselectoptions {
 }
 
 .lexvector a {
-    width: 48px;
     font-size: var(--global-font-size-sm);
-    margin-left: 6px;
-    margin-right: 6px;
 }
 
 .lexvector .vecbox {
@@ -2140,7 +2140,7 @@ dialog .lexselect .lexselectoptions {
     border-radius: 4px;
     border: 2px solid var(--global-color-transparent);
     margin-right: 2px;
-    background: var(--global-button-color);
+    background-color: var(--global-color-tertiary);
     transition: 0.1s linear;
 }
 
@@ -2149,11 +2149,7 @@ dialog .lexselect .lexselectoptions {
 }
 
 .lexvector .vecbox:hover {
-    background-color: color-mix(in srgb, var(--global-button-color), #000 7%);
-}
-
-.lexwidget.nobranch .lexvector .vecbox:hover {
-    background: var(--global-button-color);
+    background-color: color-mix(in srgb, var(--global-color-tertiary), #000 7%);
 }
 
 .lexwidget .numberbox .drag-icon,
@@ -2168,7 +2164,7 @@ dialog .lexselect .lexselectoptions {
 }
 
 .lexvector .vecbox:has(input:focus) {
-    border: 2px solid var(--global-selected);
+    border: 2px solid var(--global-color-accent);
 }
 
 .lexvector .vecbox span {
@@ -2194,11 +2190,11 @@ dialog .lexselect .lexselectoptions {
 }
 
 .lexvector .vecbox span.z {
-    background-color: #7490eb;
+    background-color: #6081db;
 }
 
 .lexvector .vecbox span.w {
-    background-color: #ffffff;
+    background-color: var(--global-text-primary);
 }
 
 /* Chrome, Safari, Edge, Opera */
@@ -2231,10 +2227,10 @@ input[type=number] {
 /* Number Widget */
 
 .lexwidget .numberbox {
+    width: 100%;
     display: grid;
-    width: calc(100% - 4px);
-    background-color: var(--global-button-color);
-    border: 2px solid var(--global-color-transparent);
+    background-color: var(--global-color-tertiary);
+    border: 1px solid var(--global-color-transparent);
     border-radius: 6px;
     margin-right: 2px;
     position: relative;
@@ -2243,20 +2239,21 @@ input[type=number] {
 }
 
 .lexwidget .numberbox:hover {
-    background-color: color-mix(in srgb, var(--global-button-color), #000 7%);
+    background-color: color-mix(in srgb, var(--global-color-tertiary), #000 7%);
 }
 
 .lexwidget .numberbox:has(input:focus) {
-    border: 2px solid var(--global-selected);
+    border: 1px solid var(--global-text-quaternary);
 }
 
 .lexwidget .numberbox span {
     position: absolute;
     pointer-events: none;
+    align-self: center;
 }
 
-.lexnumber .vecinput {
-    width: calc(100% - 12px); /* remove padding, margin, and border */
+.lexwidget .numberbox:has(input[type=range]) span {
+    margin-top: -12px;
 }
 
 .lexinputmeasure {
@@ -2269,7 +2266,7 @@ input[type=number] {
     -moz-appearance: none;
     -webkit-appearance: none;
     border: none !important;
-    width: calc(100% - 12px);
+    width: 100%;
     height: 1px;
     outline: none;
     opacity: 0.7;
@@ -2300,7 +2297,7 @@ input[type=number] {
     height: 12px;
     border: 1px solid #c9c7de;
     border-radius: 6px;
-    background: light-dark(var(--global-selected-light), var(--global-selected));
+    background: light-dark(var(--global-color-accent-light), var(--global-color-accent));
     box-shadow: 0px 0px 6px #505050;
     cursor: pointer;
 }
@@ -2335,7 +2332,7 @@ input[type=number] {
     webkit-appearance: none;
     --radius-selector-max: calc(var(--radius-selector) + var(--radius-selector) + var(--radius-selector));
     border-radius: calc(var(--radius-selector) + min(var(--range-thumb-padding),var(--radius-selector-max)));
-    width: calc(100% - 4px);
+    width: 100%;
     height: var(--range-thumb-size);
     border: none;
     outline: none;
@@ -2355,8 +2352,8 @@ input[type=number] {
 }
 
 /* Colors */
-.lexrangeslider.primary { color: var(--global-selected); }
-.lexrangeslider.secondary { color: var(--global-selected-light); }
+.lexrangeslider.primary { color: var(--global-color-primary); --range-thumb-color: var(--global-text-secondary); }
+.lexrangeslider.secondary { color: var(--global-color-secondary); --range-thumb-color: var(--global-text-secondary); }
 .lexrangeslider.accent { color: var(--global-color-accent); }
 .lexrangeslider.contrast { color: var(--global-text-primary); }
 .lexrangeslider.warning { color: var(--global-color-warning); }
@@ -2427,7 +2424,7 @@ input[type=number] {
 /* Size Widget */
 
 .lexwidget .lexsizecross {
-    color: var(--global-selected);
+    color: var(--global-color-accent);
     font-weight: 800;
 }
 
@@ -2450,13 +2447,16 @@ input[type=number] {
 }
 
 .lexwidget .lexpad .lexinnerpad .lexpadthumb {
-    background-color: var(--global-selected-light);
+    background-color: var(--global-color-accent);
     width: 10%;
     height: 10%;
     border-radius: 2px;
     transform: translate(0px, 0px);
 }
 
+.lexwidget .lexpad .lexinnerpad .lexpadthumb.active {
+    background-color: var(--global-color-accent-light);
+}
 
 /* Tabs Widget */
 
@@ -2531,15 +2531,21 @@ input[type=number] {
     width: 100%;
     min-height: 12px;
     margin: 0 auto;
-    margin-top: 6px;
-    margin-bottom: -8px;
     color: var(--global-text-secondary);
-    font-weight: 600;
+    font-weight: 500;
     font-size: var(--global-font-size);
 }
 
+.lextree .lexnodetree_filter {
+    background: none !important;
+}
+
+.lextree .lexnodetree_filter:hover {
+    background: none;
+}
+
 .lextree .lextreetools {
-    background: var(--global-color-secondary);
+    background: var(--global-color-tertiary);
     padding: 2px;
     padding-left: 6px;
     padding-right: 6px;
@@ -2549,6 +2555,10 @@ input[type=number] {
     margin-top: 4px;
 }
 
+.lexwidget.nobranch .lextree .lextreetools {
+    background: var(--global-color-secondary);
+}
+
 .lextree .lextreetools input {
     font-size: var(--global-font-size);
     padding-left: 8px;
@@ -2559,7 +2569,7 @@ input[type=number] {
 }
 
 .lextree .lextreetools.notitle {
-    padding-top: 14px;
+    /* padding-top: 14px; */
     border-top-left-radius: 8px;
     border-top-right-radius: 8px;
 }
@@ -2569,7 +2579,6 @@ input[type=number] {
 }
 
 .lextree span {
-    /* Tree title */
     padding: 8px;
     display: block;
     border-top-left-radius: 8px;
@@ -2580,11 +2589,10 @@ input[type=number] {
     -ms-user-select: none;
     user-select: none;
     font-size: var(--global-font-size-lg);
-    font-weight: 800;
+    font-weight: 500;
 }
 
 .lextree ul {
-    padding-bottom: 16px;
     padding-inline-start: 0px;
     display: flex;
     flex-direction: column;
@@ -2656,17 +2664,16 @@ input[type=number] {
 
 .lextree .lextreeitem:hover {
     color: var(--global-text-primary);
-    background: var(--global-color-tertiary);
+    background: var(--global-color-secondary);
 }
 
 .lextree .lextreeitem.selected {
     color: var(--global-text-primary);
-    background: light-dark(var(--global-selected-light), var(--global-selected));
+    background: light-dark(var(--global-color-accent-light), var(--global-color-accent));
 }
 
 .lextree .lextreeitem a.hierarchy {
     margin-right: 6px;
-    margin-top: 4px;
 }
 
 .lextree .lextreeitem .lexicon {
@@ -2674,7 +2681,7 @@ input[type=number] {
 }
 
 .lextree .lextreeitem .itemicon:hover {
-    color: var(--global-selected);
+    color: var(--global-color-accent);
 }
 
 .lextree .lextreeitem.selected .itemicon:hover {
@@ -2689,7 +2696,7 @@ input[type=number] {
 
 .lexfileinput::file-selector-button {
     align-content: center;
-    background-color: var(--global-button-color);
+    background-color: var(--global-color-tertiary);
     border-radius: 6px;
     border: none;
     margin-top: 2px;
@@ -2705,7 +2712,7 @@ input[type=number] {
 }
 
 .lexfileinput::file-selector-button:hover {
-    background-color: color-mix(in srgb, var(--global-button-color), #fff 4%);
+    background-color: color-mix(in srgb, var(--global-color-tertiary), #fff 4%);
     color: var(--global-text-primary);
 }
 
@@ -2750,24 +2757,20 @@ input[type=number] {
     cursor: pointer;
 }
 
-/* .lexprogressbar.editable.grabbing {
-    cursor: grabbing;
-} */
-
 /* The gray background in Chrome, etc. */
 .lexprogressbar::-webkit-meter-bar {
     border-radius: 0.25rem;
     height: 12px;
-    background: color-mix(in srgb, var(--global-selected) 20%, transparent);
+    background: color-mix(in srgb, var(--global-color-accent) 20%, transparent);
 }
 
 /* (optimum) */
 meter:-moz-meter-optimum::-moz-meter-bar {
-    background: var(--global-selected);
+    background: var(--global-color-accent);
 }
 
 .lexprogressbar::-webkit-meter-optimum-value {
-    background: var(--global-selected);
+    background: var(--global-color-accent);
 }
 
 /* (high)*/
@@ -2805,8 +2808,8 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 }
 
 /* Colors */
-.lexbadge.primary { --badge-color: var(--global-selected); }
-.lexbadge.secondary { --badge-color: var(--global-selected-light); }
+.lexbadge.primary { --badge-color: var(--global-color-accent); }
+.lexbadge.secondary { --badge-color: var(--global-color-accent-light); }
 .lexbadge.accent { --badge-color: var(--global-color-accent); }
 .lexbadge.contrast { --badge-color: var(--global-text-primary); color: var(--global-color-primary); }
 .lexbadge.warning { --badge-color: var(--global-color-warning); }
@@ -2872,7 +2875,6 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 
 .lexmenubox {
     position: absolute;
-    padding-right: 8px;
     z-index: 1001;
     background-color: #111111f3;
     border: 1px solid #aaaaaa48;
@@ -2981,7 +2983,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 }
 
 .lexmenubox .lexmenuboxentry:not(.disabled):hover {
-    background-color: var(--global-selected);
+    background-color: var(--global-color-accent);
     color: #f5f5f5;
 }
 
@@ -3001,9 +3003,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 
 .lexmenubox .lexseparator {
     margin: 2px 0 2px;
-    width: -moz-calc(100% + 8px);
-    width: -webkit-calc(100% + 8px);
-    width: calc(100% + 8px);
+    width: 100%;
     border-color: var(--global-text-tertiary);
     opacity: 0.25;
 }
@@ -3045,6 +3045,10 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     user-select: none;
 }
 
+.lexmenubar .lexmenubutton.main:last-child {
+    margin-right: 8px;
+}
+
 .lexmenubar .lexmenubutton a {
     margin-left: 0px !important;
 }
@@ -3054,7 +3058,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 }
 
 .lexmenubar .lexmenubutton.disabled a {
-    color: light-dark(var(--global-color-tertiary), var(--global-button-color));
+    color: var(--global-color-quaternary);
     cursor: default;
 }
 
@@ -3063,9 +3067,9 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 .lexcontextmenu {
     z-index: 102;
     position: absolute;
-    padding-right: 20px;
+    /* padding-right: 20px; */
     border-radius: 6px;
-    box-shadow: 0 0 6px rgba(46, 46, 46, 0.596) !important;
+    box-shadow: 0 0 6px rgba(46, 46, 46, 0.2) !important;
     background-color: var(--global-blur-background);
     border: 1px solid #91909036;
 }
@@ -3086,10 +3090,9 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 .lexcontextmenu .lexmenuboxentry {
     width: 100%;
     color: var(--global-text-secondary);
-    padding: 3px;
-    padding-left: 10px;
-    padding-right: 10px;
-    padding-bottom: 4px;
+    padding: 4px;
+    padding-inline: 8px;
+    display: flex;
     cursor: pointer;
     -webkit-user-select: none;
     -moz-user-select: none;
@@ -3109,21 +3112,18 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 
 .lexcontextmenu .lexmenuboxentry.cmtitle {
     background: light-dark(var(--global-color-tertiary), var(--global-intense-background));
-    font-weight: bold;
+    font-weight: 600;
     cursor: default;
 }
 
 .lexcontextmenu .lexmenuboxentry.cmseparator {
-    height: 1px;
     border-bottom: 1px solid var(--global-color-tertiary);
     padding-bottom: 0;
     padding-top: 0;
-    margin-top: -4px;
 }
 
 .lexcontextmenu .lexmenuboxentry .lexentryname {
-    margin-right: 10px;
-    margin-top: 2px;
+    margin-right: 1rem;
     font-size: var(--global-font-size);
     white-space: nowrap;
     overflow: hidden;
@@ -3136,20 +3136,13 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 
 /* normal icons  */
 .lexcontextmenu .lexmenuboxentry a {
-    float: right;
-    margin-right: 0px;
-    margin-top: 10px;
+    align-content: center;
+    margin-left: auto;
     font-size: var(--global-font-size-xs);
 }
 
-/* submenu specified arrow  */
-.lexcontextmenu .lexmenuboxentry a.fa-xs {
-    float: right;
-    margin-top: -9px;
-}
-
 .lexcontextmenu .lexmenuboxentry:hover:not(.cmtitle) {
-    background-color: var(--global-selected);
+    background-color: var(--global-color-accent);
     color: #f5f5f5;
 }
 
@@ -3172,7 +3165,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 /* Side Bar */
 
 .lexsidebar {
-    width: calc(100% - 20px);
+    width: 100%;
     height: 100%;
     padding: 10px;
     display: flex;
@@ -3191,8 +3184,6 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 
 .lexsidebarcontent {
     width: 100%;
-    padding-block-start: 4px;
-    padding-block-end: 4px;
     display: flex;
     flex-direction: column;
     overflow-y: scroll;
@@ -3218,10 +3209,11 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     margin-bottom: 0.4rem;
 }
 
-.lexsidebar .lextext {
+.lexsidebar .lexsidebarfilter {
     transform: translate(0, 0);
     opacity: 1;
-    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);
+    margin-block: 0.5rem;
+    transition: all 0.2s cubic-bezier(0,0,.2,1);
 }
 
 .lexsidebar .lexsidebargrouptitle {
@@ -3236,8 +3228,8 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     transform: translate(0, 0);
     opacity: 1;
     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);
-    height: 44px;
-    max-height: 44px;
+    height: 32px;
+    max-height: 32px;
     align-content: center;
 }
 
@@ -3248,18 +3240,19 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     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);
 }
 
-.lexsidebar.collapsing .lexsidebargrouptitle *, .lexsidebar.collapsing .lextext {
+.lexsidebar.collapsing .lexsidebargrouptitle *, .lexsidebar.collapsing .lexsidebarfilter {
     max-height: 0px;
     transform: translate(0, -24px);
     opacity: 0;
+    margin-block: 0;
 }
 
-.lexsidebar.collapsed .lexsidebargrouptitle *, .lexsidebar.collapsed .lextext {
+.lexsidebar.collapsed .lexsidebargrouptitle * {
     display: none;
 }
 
 .lexsidebar .lexsidebarentry {
-    width: calc(100% - 16px);
+    width: 100%;
     padding: 6px;
     padding-inline: 8px;
     border-radius: 8px;
@@ -3283,7 +3276,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 }
 
 .lexsidebar .lexsidebarentry.selected {
-    background-color: var(--global-selected);
+    background-color: var(--global-color-accent);
 }
 
 .lexsidebar .lexsidebarentry:active {
@@ -3328,7 +3321,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 }
 
 .lexsidebar .lexsidebarsubentrycontainer {
-    width: calc(100% - 48px);
+    width: 100%;
     margin-block-start: 4px;
     margin-block-end: 8px;
     margin-left: 16px;
@@ -3396,8 +3389,8 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 }
 
 .lexsidebar .lexsidebarfooter, .lexsidebar .lexsidebarheader {
-    width: calc(100% - 16px);
-    height: 36px;
+    width: 100%;
+    height: 48px;
     display: flex;
     border-radius: 8px;
     padding: 8px;
@@ -3416,7 +3409,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 }
 
 .lexsidebar.collapsing .lexsidebarheader {
-    background-color: var(--global-selected);
+    background-color: var(--global-color-accent);
 }
 
 .lexsidebar .lexsidebarfooter:active, .lexsidebar .lexsidebarheader:active {
@@ -3437,7 +3430,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 }
 
 .lexsidebar .lexsidebarfooter div.infodefault, .lexsidebar .lexsidebarheader div.infodefault {
-    width: calc(100% - 88px);
+    width: 100%;
     padding-inline: 12px;
     justify-content: center;
     display: flex;
@@ -3560,11 +3553,11 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 }
 
 .lexoverlaybuttons .lexbutton {
+    --button-color: var(--global-color-secondary);
     padding: 6px 6px;
     font-size: var(--global-font-size-lg);
     border-radius: 10px;
     justify-content: center;
-    background: none;
     color: var(--global-text-secondary);
     height: 100%;
 }
@@ -3573,46 +3566,6 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     font-size: var(--global-font-size-lg);
 }
 
-.lexoverlaybuttons .lexbutton a {
-    line-height: 10px;
-    font-size: var(--global-font-size-lg);
-}
-
-.lexoverlaybuttons .lexbutton.array a {
-    font-size: var(--global-font-size-sm);
-    margin-left: 4px;
-}
-
-:root[data-theme="light"] .lexoverlaybuttons .lexbutton img {
-    filter: invert(1);
-}
-
-.lexoverlaybuttons .lexbutton.selected {
-    background-color: light-dark(var(--global-selected-light), var(--global-selected)) !important;
-    color: #fff;
-    outline: none;
-    border-radius: 8px;
-}
-
-.lexoverlaybuttons .lexbutton.selected img,
-.lexoverlaybuttons .lexbutton:hover img {
-    filter: none;
-}
-
-.lexoverlaybuttons .lexbutton:hover {
-    color: var(--global-text-primary);
-    background-color: color-mix(in srgb, var(--global-button-color), #fff 4%);
-}
-
-.lexoverlaybuttons .lexbutton.selected:hover {
-    color: #f4f4ffe6;
-}
-
-.lexoverlaybuttons .lexbutton:active {
-    outline: none !important;
-    color: #d5d5d5;
-}
-
 .lexoverlaybuttons .lexoverlaygroup {
     display: flex;
     flex: none;
@@ -3621,11 +3574,15 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 }
 
 .lexoverlaybuttons .lexoverlaygroup .lexbutton {
-    background: none;
+    --button-color: var(--global-color-tertiary);
     -webkit-backdrop-filter: none;
     backdrop-filter: none;
 }
 
+.lexoverlaybuttons .lexbutton.selected {
+    --button-color: var(--global-color-accent);
+}
+
 .lexoverlaybuttonscontainer.vertical .lexoverlaygroup {
     display: grid;
     margin-right: 0px;
@@ -3681,13 +3638,13 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 
 .lexareatabs .lexareatab.thumb {
     position: absolute;
-    background: light-dark(var(--global-selected-light), var(--global-selected));
+    background: var(--global-color-accent);
     z-index: 0;
     transition: linear transform 0.15s;
 }
 
 .lexareatabs.row {
-    background-color: light-dark(var(--global-color-tertiary), var(--global-button-color));
+    background-color: var(--global-color-tertiary);
     border-radius: 8px;
     padding: 3px;
     margin: 6px;
@@ -3703,7 +3660,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 }
 
 .lexareatabs.fit {
-    width: calc(100% - 12px);
+    width: 100%;
     padding-inline: 6px;
 }
 
@@ -3745,14 +3702,6 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     transition-timing-function: ease-out;
 }
 
-.lexareatabscontainer .lexpanel:not(.lexoverlaybuttons) {
-    margin: 0;
-}
-
-.lexareatabscontainer .lexbranch {
-    margin: 4px 7px !important;
-}
-
 .lexareatabscontent.folded {
     max-height: 0px;
 }
@@ -3766,11 +3715,10 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 /* Avatar Widget */
 
 .lexavatar {
-    width: 32px;
-    height: 32px;
+    width: 48px;
     border-radius: 8px;
-    margin: auto 0;
     align-content: center;
+    aspect-ratio: 1;
 }
 
 .lexavatar * {
@@ -3798,25 +3746,25 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 }
 
 .lexcard:hover a {
-    color: var(--global-selected);
+    color: var(--global-color-accent);
 }
 
 .lexcard:hover img {
-    outline: 3px solid var(--global-selected);
+    outline: 3px solid var(--global-color-accent);
 }
 
 .lexcard span {
     font-size: var(--global-font-size-lg);
     font-family: var(--global-title-font);
-    font-weight: 600;
+    font-weight: 500;
     text-transform: uppercase;
-    width: calc(100% - 16px);
+    width: 100%;
+    height: 32px;
     display: flex;
     background-color: var(--global-blur-background);
     --webkit-backdrop-filter: blur(12px);
     backdrop-filter: blur(12px);
     align-items: center;
-    height: 16px;
     position: absolute;
     top: 0;
     left: 0;
@@ -3831,7 +3779,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 }
 
 .lexcard span a:hover {
-    color: var(--global-selected);
+    color: var(--global-color-accent);
 }
 
 /* Layers Widget */
@@ -3840,7 +3788,6 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     display: grid;
     grid-template-columns: 18px 18px 18px 18px 18px 18px 18px 18px;
     grid-gap: 6px 8px;
-    /* Gap between grid cells */
     justify-content: center;
 }
 
@@ -3855,10 +3802,11 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     cursor: pointer;
     border-radius: 4px;
     font-size: var(--global-font-size-sm);
+    transition: background-color 0.15s linear;
 }
 
 .lexlayer.selected {
-    --layer-color: light-dark(var(--global-selected-light), var(--global-selected));
+    --layer-color: var(--global-color-accent);
     color: #fff;
 }
 
@@ -3881,7 +3829,8 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 }
 
 .lexlistitem {
-    width: calc(100% - 8px);
+    width: 100%;
+    height: 24px;
     cursor: pointer;
     color: var(--global-text-secondary);
     font-size: var(--global-font-size);
@@ -3890,7 +3839,6 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     padding-right: 4px;
     margin-top: 1px;
     margin-bottom: 1px;
-    height: 20px;
     line-height: 22px;
     align-content: center;
     display: flow-root;
@@ -3898,6 +3846,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
+    transition: background-color 0.15s linear;
 }
 
 .lexlistitem a {
@@ -3916,7 +3865,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 
 .lexlistitem.selected {
     color: #fff;
-    background-color: light-dark(var(--global-selected-light), var(--global-selected));
+    background-color: var(--global-color-accent);
 }
 
 /* Array Widget */
@@ -3925,8 +3874,18 @@ 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-tertiary), var(--global-medium-background));
     border-radius: 6px;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: auto auto;
+    transition: background-color 0.2s ease-out;
+}
+
+.lexwidget:has(.lexarrayitems)[data-opened=true],
+.lexwidget:has(.lexcheckboxsubmenu)[data-opened=true],
+.lexwidget:has(.lextogglesubmenu)[data-opened=true],
+.lexwidget:has(.lexcustomcontainer)[data-opened=true] {
+    background-color: light-dark(var(--global-color-tertiary), var(--global-medium-background));
 }
 
 .lexarray .lexwidget {
@@ -3940,10 +3899,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     color: var(--global-text-secondary);
     font-size: var(--global-font-size);
     margin-top: -1px;
-}
-
-.lexarrayitems .small .lexbutton {
-    background: none;
+    grid-column: span 2;
 }
 
 .lexarrayitems .lexwidgetname {
@@ -3956,7 +3912,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-tertiary), var(--global-button-color));
+    background-color: var(--global-color-tertiary);
     border-radius: 8px;
     padding: 4px;
 }
@@ -3991,7 +3947,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 
 .lexcounter {
     display: flex;
-    margin: 0 auto;
+    place-content: center;
 }
 
 .lexcounterbox {
@@ -4020,7 +3976,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 .lextable table {
     width: 100%;
     border: 1px solid;
-    border-color: light-dark(#dbd8d8c0, var(--global-button-color));
+    border-color: var(--global-color-tertiary);
     border-collapse: separate;
     border-radius: 8px;
     border-spacing: 0px;
@@ -4063,10 +4019,19 @@ tr.dragging {
     pointer-events: none;
 }
 
+th, td {
+    padding: 6px;
+    padding-inline: 12px;
+    text-align: left;
+    align-content: center;
+}
+
 th {
     --th-color: var(--global-text-secondary);
+    font-weight: 600;
     color: var(--th-color);
     font-size: var(--global-font-size);
+    padding-block: 2px;
     cursor: pointer;
     transition: all 0.1s linear;
     background-color: var(--global-color-tertiary);
@@ -4080,6 +4045,15 @@ th a {
     pointer-events: none;
 }
 
+th span {
+    border-radius: 6px;
+    padding: 0.4rem;
+}
+
+th span:hover {
+    background-color: var(--global-color-secondary);
+}
+
 th a, td a {
     font-size: var(--global-font-size-xs) !important;
     display: flex;
@@ -4095,13 +4069,6 @@ th:hover {
     color: color-mix(in srgb, var(--th-color), #000 10%);
 }
 
-th, td {
-    padding: 6px;
-    padding-inline: 12px;
-    text-align: left;
-    align-content: center;
-}
-
 th.centered, td.centered {
     text-align: center;
 }
@@ -4119,6 +4086,11 @@ th .lexcheckbox, td .lexcheckbox {
     height: 1.25em;
 }
 
+th a {
+    display: inline-block;
+    transform: translate(6px, 3px);
+}
+
 td {
     justify-items: center;
     border-top: 2px solid;
@@ -4137,11 +4109,12 @@ thead:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td
 
 .lextable .lextablebuttons {
     display: inline-flex;
-    gap: 0.8rem;
+    gap: 0.2rem;
 }
 
 .lextable .lextablebuttons .lexicon {
     font-size: var(--global-font-size-sm) !important;
+    padding: 0.2rem;
 }
 
 :root[data-theme="light"] .lextable table {
@@ -4156,6 +4129,7 @@ thead:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td
     color: var(--global-text-secondary);
     font-size: var(--global-font-size);
     margin-top: -1px;
+    grid-column: span 2;
 }
 
 .lexcustomcontainer span {
@@ -4164,10 +4138,6 @@ thead:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td
     justify-content: space-between;
 }
 
-.lexcustomcontainer .lexbutton span:not(:has(.menu)) {
-    width: 95%;
-}
-
 /* Knob Widget */
 
 .lexknob {
@@ -4192,8 +4162,8 @@ thead:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td
     position: absolute;
     width: 125%;
     height: 125%;
-    top: -15.5%;
-    left: -15.5%;
+    top: -12.5%;
+    left: -12.5%;
     border-radius: 50%;
     border: 2px solid rgba(255, 255, 255, 0.2);
     border-bottom-color: transparent;
@@ -4258,7 +4228,7 @@ thead:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td
 }
 
 .lexknob .knobmarker {
-    background-color: var(--global-selected);
+    background-color: var(--global-color-accent);
     filter: brightness(1.5);
     width: 6px;
     height: 6px;
@@ -4309,7 +4279,7 @@ thead:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td
 }
 
 :root[data-theme="light"] .lexknob .knobmarker {
-    background-color: var(--global-selected-dark);
+    background-color: var(--global-color-accent-dark);
     filter: brightness(1.5);
 }
 
@@ -4375,14 +4345,6 @@ thead:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td
     height: 100%;
 }
 
-.lextimelinepanel {
-    /* overflow: hidden; */
-}
-
-/* .lextimeline .lexarea, .lextimelinepanel {
-  background-color: var(--global-intense-background);
-} */
-
 .lextimeline *::-webkit-scrollbar {
     display: none;
 }
@@ -4394,18 +4356,10 @@ thead:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td
 
 .lextimeline .lexwidget:has(.lexbutton:not(.array)) {
     padding: 1px;
-    /* padding-left: 10px;
-  padding-right: 10px; */
 }
 
 .lextimeline .lexinlinewidgets {
     padding-right: 10px;
-    /* background-color: var(--global-color-secondary); */
-    /* height: 100%; */
-}
-
-.lextimeline .lexbutton:hover {
-    color: var(--global-selected-light);
 }
 
 .lextimeline .lextree {
@@ -4429,14 +4383,10 @@ thead:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td
     height: unset;
 }
 
-.lextimeline .lexbutton.accept:hover {
-    background-color: color-mix(in srgb, var(--global-button-color), #000 7%);
-}
-
 /**/
 .lexmin {
     display: inline-block;
-    color: var(--global-selected-light);
+    color: var(--global-color-accent-light);
     background: var(--global-color-primary);
     border-radius: 8px;
     padding: 4px;
@@ -4568,7 +4518,7 @@ thead:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td
 
 .lexassetbrowser .lexsplitbar.horizontal {
     position: relative;
-    height: calc(100%);
+    height: 100%;
     border-radius: 0px;
     left: 0 !important;
     top: 0;
@@ -4624,7 +4574,7 @@ ul.lexassetscontent {
     margin: 0.5em;
     margin-top: 0.75em;
     padding: 0;
-    box-shadow: 0 0 8px black;
+    box-shadow: 0 0 2px rgba(0, 0, 0, .14);
     overflow: hidden;
     background-color: #555;
     cursor: pointer;
@@ -4657,16 +4607,14 @@ ul.lexassetscontent {
 }
 
 .lexassetscontent.list li {
-    width: calc(100% - 0.5em);
+    width: 100%;
     height: 1.8em;
     border-top: 0px;
-    border-left: 4px solid rgba(0, 0, 0, 0);
-    border-bottom-left-radius: 2px;
-    border-bottom-right-radius: 2px;
+    border-left: 4px solid transparent;
+    border-radius: 4px;
     margin: 0;
     margin-top: 0.4em;
     margin-bottom: 0.4em;
-    box-shadow: 0 0 6px rgba(0, 0, 0, 0.858);
 }
 
 .lexassetscontent .asset-file-preview {
@@ -4709,12 +4657,12 @@ ul.lexassetscontent {
 }
 
 .lexassetscontent li:hover {
-    outline: 2px solid var(--global-selected);
+    outline: 2px solid var(--global-color-accent);
 }
 
 .lexassetscontent li.selected {
     transition: none !important;
-    outline: 2px solid var(--global-selected);
+    outline: 2px solid var(--global-color-accent);
     font-weight: bold;
 }
 
@@ -4724,7 +4672,7 @@ ul.lexassetscontent {
     bottom: 0px;
     -webkit-text-size-adjust: 100%;
     font-size: var(--global-font-size);
-    color: #BBB;
+    color: var(--global-text-primary);
     cursor: pointer;
     text-align: center;
     box-sizing: border-box;
@@ -4735,7 +4683,7 @@ ul.lexassetscontent {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    background-color: rgba(12, 12, 12, 0.8);
+    background-color: var(--global-intense-background);
     transition: all 0.1s;
     z-index: 1;
 }
@@ -4792,7 +4740,7 @@ ul.lexassetscontent {
 .lexassetscontent li.selected .lexassettitle {
     color: #f5f5f5;
     text-shadow: 0 0 3px black;
-    background-color: var(--global-selected);
+    background-color: var(--global-color-accent);
 }
 
 .lexassetscontent li img {
@@ -4871,7 +4819,7 @@ ul.lexassetscontent {
 .codebasearea .lexareatab.selected {
     background-color: var(--global-color-secondary) !important;
     color: var(--global-text-secondary) !important;
-    border-top: 1px solid var(--global-selected);
+    border-top: 1px solid var(--global-color-accent);
     border-bottom: none;
 }
 
@@ -4906,7 +4854,7 @@ ul.lexassetscontent {
 .lexcodeeditor {
     outline: none;
     overflow: hidden;
-    width: calc(100%);
+    width: 100%;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
@@ -4922,7 +4870,7 @@ ul.lexassetscontent {
     position: absolute;
     z-index: 3;
     bottom: 0px;
-    margin-left: 0px;
+    justify-items: end;
 }
 
 .lexcodegutter {
@@ -4950,7 +4898,7 @@ ul.lexassetscontent {
 }
 
 .lexcodeeditor .codetabsarea.with-vscrollbar {
-    width: calc(100% - 10px) !important;
+    width: 100% !important;
 }
 
 .lexcodeeditor .codetabsarea.with-hscrollbar {
@@ -5161,7 +5109,7 @@ ul.lexassetscontent {
     top: 0px;
     width: 100px;
     height: var(--code-editor-row-height);
-    background-color: var(--global-selected);
+    background-color: var(--global-color-accent);
     opacity: 0.4;
 }
 
@@ -5178,7 +5126,7 @@ ul.lexassetscontent {
     top: 26px;
     z-index: 100;
     border-radius: 4px;
-    border: 1px solid var(--global-button-color);
+    border: 1px solid var(--global-color-tertiary);
     box-shadow: 0 0px 4px #101010;
     overflow-y: scroll;
     transform: translateY(-72px);
@@ -5207,7 +5155,7 @@ ul.lexassetscontent {
     visibility: hidden;
     z-index: 100;
     border-radius: 4px;
-    border: 1px solid var(--global-button-color);
+    border: 1px solid var(--global-color-tertiary);
     box-shadow: 0 0px 4px #101010;
     overflow-y: scroll;
 }
@@ -5241,7 +5189,7 @@ ul.lexassetscontent {
 }
 
 .lexcodeeditor .autocomplete pre.selected {
-    background-color: var(--global-selected);
+    background-color: var(--global-color-accent);
 }
 
 .lexcodeeditor .autocomplete pre span {
@@ -5249,7 +5197,7 @@ ul.lexassetscontent {
 }
 
 .lexcodeeditor .autocomplete pre span.word-highlight {
-    color: var(--global-selected-light);
+    color: var(--global-color-accent-light);
 }
 
 .lexcodeeditor .autocomplete pre.selected span.word-highlight {
@@ -5491,9 +5439,9 @@ ul.lexassetscontent {
 
 .lexgraph .box-selection-svg {
     stroke-width: 3px;
-    stroke: var(--global-selected);
+    stroke: var(--global-color-accent);
     border-radius: 8px;
-    fill: var(--global-selected);
+    fill: var(--global-color-accent);
     fill-opacity: 0.2;
 }
 
@@ -5562,7 +5510,7 @@ ul.lexassetscontent {
 }
 
 .lexgraphnode.selected {
-    border: 3px solid var(--global-selected-dark);
+    border: 3px solid var(--global-color-accent-dark);
     border: 3px solid #ffc107;
     box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .14);
 }
@@ -5612,8 +5560,10 @@ ul.lexassetscontent {
     font-size: var(--global-font-size-sm);
     color: #d9d9e3;
     text-shadow: 0px 1px 6px #22222283;
-    display: flex;
     min-height: 18px;
+    display: flex;
+    gap: 0.3rem;
+    align-items: center;
 }
 
 .lexgraphnode .lexgraphnodeio.iooutput {
@@ -5623,16 +5573,14 @@ ul.lexassetscontent {
 .lexgraphnode .lexgraphnodeio .io__type {
     font-size: calc(var(--global-font-size-xs) - 1px);
     font-weight: 700;
-    line-height: 10px;
+    line-height: 1;
     min-width: 11px;
     max-width: 11px;
     min-height: 10px;
     max-height: 10px;
     background-color: #afafaf;
     align-self: center;
-    margin-right: 3px;
     border-radius: 3px;
-    padding-top: 1px;
     text-align: -webkit-center;
     text-align: center;
     border: 1px solid #afafaf6b;
@@ -5648,7 +5596,6 @@ ul.lexassetscontent {
     position: absolute;
     margin-left: -30px;
     font-weight: 600;
-    margin-top: 3px;
     background-color: #afafaf;
     color: var(--global-color-primary);
     font-size: var(--global-font-size-xs);
@@ -5688,10 +5635,6 @@ ul.lexassetscontent {
     background-color: #56a8d8;
 }
 
-.lexgraphnode .lexgraphnodeio .io__name {
-    margin-top: 2px;
-}
-
 .lexgraphnode .lexgraphnodeio .io__type.output {
     margin-right: unset;
     margin-left: 3px;
@@ -5818,10 +5761,6 @@ ul.lexassetscontent {
 }
 
 .lexvideoeditor .lexconstrolsarea {
-    /* background-color: var(--global-intense-background); */
-    /* padding: 5px;
-  margin: 10px; */
-    /* width: calc(100% - 30px)!important; */
     min-height: 88px !important;
     border-radius: 8px;
     display: flex;
@@ -5865,18 +5804,6 @@ ul.lexassetscontent {
     width: calc(100% - 40px) !important;
 }
 
-/* .lexvideoeditor .lexvideotimebar {
-  width: calc(100% - 40px);
-  height: 100%;
-  background-color: var(--global-intense-background);
-} */
-
-/* .lexvideoeditor .lexvideotimebar canvas {
-  width: calc(100%);
-  height: calc(100% );
-  padding: 5px;
-}  */
-
 .resizeable {
   resize: both;
   overflow: auto;
@@ -5884,7 +5811,7 @@ ul.lexassetscontent {
 
 .resize-area {
   position: absolute;
-  border: 2px double var(--global-selected-light);
+  border: 2px double var(--global-color-accent-light);
   cursor: move;
   z-index: 100;
 }
@@ -5920,4 +5847,4 @@ ul.lexassetscontent {
   bottom: -5px;
   right: -5px;
   cursor: nwse-resize;
-}
+}