lexgui 0.5.2 → 0.5.4

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, #040405);
     --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;
@@ -191,6 +182,13 @@ body {
     margin: 0;
     padding: 0;
     font-family: var(--global-font);
+    background-color: var(--global-color-primary);
+}
+
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
 }
 
 :root[data-strictVP="false"] {
@@ -202,7 +200,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,15 +282,6 @@ body.noevents * {
     cursor: move;
 }
 
-.hidden {
-    display: none !important;
-}
-
-.sticky {
-    position: sticky;
-    top: 0;
-}
-
 .hidden-opacity {
     opacity: 0 !important;
     pointer-events: none;
@@ -304,6 +293,13 @@ body.noevents * {
     text-overflow: ellipsis;
 }
 
+/* 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); }
 svg.lg { width: var(--svg-size-lg); height: var(--svg-size-lg); }
@@ -330,7 +326,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,8 +345,11 @@ svg.xxl { width: var(--svg-size-xxl); height: var(--svg-size-xxl); }
     max-width: 256px;
 }
 
-.lexicon {
+.lock {
     margin-left: 4px;
+}
+
+.lexicon {
     cursor: pointer;
     line-height: inherit !important;
     color: var(--global-text-secondary);
@@ -367,7 +368,7 @@ svg.xxl { width: var(--svg-size-xxl); height: var(--svg-size-xxl); }
 }
 
 .lexicon.triggered {
-    background-color: var(--global-button-color);
+    background-color: var(--global-color-secondary);
 }
 
 svg, svg path {
@@ -413,7 +414,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);
@@ -529,7 +530,7 @@ a svg, svg path {
 
 .commandbar .gs-header {
     width: 100%;
-    height: 32px;
+    height: 44px;
     display: flex;
     padding: 6px;
 }
@@ -586,7 +587,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;
 }
 
@@ -616,25 +617,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;
@@ -650,11 +646,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 {
@@ -664,6 +662,7 @@ a svg, svg path {
 }
 
 .lexfooter .credits-and-socials {
+    color: var(--global-text-secondary);
     display: grid;
     align-items: center;
     grid-template-columns: 1fr 1fr;
@@ -711,12 +710,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 {
@@ -747,17 +746,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;
@@ -768,6 +767,7 @@ a svg, svg path {
 }
 
 .lexdialogcontent {
+    width: 100%;
     padding: 15px;
     word-break: break-all;
     color: var(--global-text-primary);
@@ -814,7 +814,6 @@ a svg, svg path {
 
 .lexdialog.prompt textarea {
     color: var(--global-text-secondary);
-    font-weight: normal;
 }
 
 /* Pocket Dialog */
@@ -828,7 +827,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);
 }
@@ -901,13 +900,43 @@ a svg, svg path {
 
 /* Generic */
 
-.lexcontainer {
-    display: flex;
-    flex-direction: row;
+.lexcontainer.wrapper {
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 1400px;
+    border: 0px solid var(--global-color-tertiary);
 }
 
-.lexcontainer.col {
-    flex-direction: column;
+@media (min-width: 1400px) {
+    .lexcontainer.wrapper {
+        border-left-width: 1px;
+        border-right-width: 1px;
+    }
+}
+
+@media (min-width: 1800px) {
+    .lexcontainer.wrapper {
+        max-width: 1536px;
+    }
+}
+
+.lextooltip {
+    position: fixed;
+    background-color: var(--global-text-primary);
+    color: var(--global-color-primary);
+    font-size: var(--global-font-size-sm);
+    padding: 0.2rem;
+    padding-inline: 0.5rem;
+    border-radius: 0.4rem;
+    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+    animation-duration: 400ms;
+	animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+	will-change: transform, opacity;
+    animation-name: slideUpAndFade;
+}
+
+.lextooltip[data-closed] {
+    opacity: 0;
 }
 
 /* Dropdown Menu */
@@ -966,6 +995,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;
@@ -1067,7 +1101,6 @@ a svg, svg path {
 
 .lexsplitbar.vertical {
     cursor: ns-resize;
-    transform: translateY(-3px);
     left: calc(50% - 32px);
 }
 
@@ -1076,14 +1109,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;
 }
@@ -1093,7 +1126,11 @@ a svg, svg path {
 }
 
 .lexbranch {
+    width: 100%;
     border-radius: 6px;
+}
+
+.lexpanel .lexbranch:not(:last-of-type) {
     margin-bottom: 4px !important;
 }
 
@@ -1106,13 +1143,12 @@ a svg, svg path {
 
 .lexbranch.last .lexbranchcontent {
     overflow: hidden;
-    margin-bottom: 6px;
 }
 
 .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;
@@ -1164,7 +1200,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;
@@ -1176,10 +1212,6 @@ a svg, svg path {
     align-content: center;
 }
 
-.lexbranch.first .lexbranchtitle {
-    margin-top: 4px;
-}
-
 .lexbranch.last.closed .lexbranchtitle {
     margin-bottom: 6px;
 }
@@ -1223,11 +1255,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;
 }
@@ -1239,10 +1266,6 @@ a svg, svg path {
     transform: translateX(-1em);
 }
 
-.lexwidget.nobranch {
-    width: calc(100% - 10px);
-}
-
 .lexwidget.auto {
     width: unset !important;
 }
@@ -1269,7 +1292,6 @@ a svg, svg path {
 
 .lexinlinewidgets {
     display: flex;
-    gap: 0.1rem;
 }
 
 .lexwidgetseparator div {
@@ -1304,23 +1326,76 @@ a svg, svg path {
     padding-inline: 0.4rem;
 }
 
+.lexwidget .inputicon {
+    padding: 6px;
+    font-size: var(--global-font-size-xs);
+    align-self: center;
+    text-align: center;
+    margin-left: 4px;
+    position: absolute;
+    z-index: 1;
+}
+
+.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 input.colorinput {
+    border: none;
+    margin-left: -4px;
 }
 
-.lexwidget .lextext {
+.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: border 0.2s linear;
     border: 1px solid transparent;
+    padding: 6px 12px;
+}
+
+.lexwidget .lextext:disabled {
+    background-color: var(--global-color-tertiary);
+    color: var(--global-text-tertiary);
 }
 
 .lexwidget .lextext.formlabel {
@@ -1328,48 +1403,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 .lextext.nobg {
+    background: none;
+    border: 1px solid transparent;
+}
+
 .lexwidget .lextext.dashed {
     background: var(--global-color-primary);
     border: 1px dashed #7a797c4f;
 }
 
-.lexwidget input:not(.lexcheckbox, .lextoggle, .lexrangeslider):hover {
-    background-color: color-mix(in srgb, var(--global-button-color), #000 7%);
-}
-
-.lexwidget .lextext.outline input:hover {
+.lexwidget .lextext.outline:hover, .lexwidget .lextext.nobg:hover {
     background: none;
 }
 
-.lexwidget .lextext input {
-    padding: 5px;
-}
-
-.lexwidget .lextext input:focus {
-    border: 2px solid var(--global-selected);
-}
-
-.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 {
@@ -1377,12 +1440,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;
@@ -1390,54 +1448,40 @@ 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;
 }
 
-.lexwidget textarea:disabled {
-    resize: none;
-}
-
-.lexwidget textarea:focus {
-    border: 2px solid var(--global-selected);
+.lexwidget textarea.outline {
+    background: var(--global-color-primary);
+    border: 1px solid #7a797c4f;
 }
 
-.lexwidget input.colorinput {
-    border: none;
-    margin-left: -4px;
+.lexwidget textarea.nobg {
+    background: none;
+    border: 1px solid transparent;
 }
 
-.lexwidget input:disabled:not(.lextoggle) {
-    outline: none;
-    border: none;
-    color: var(--global-text-tertiary);
+.lexwidget textarea.dashed {
+    background: var(--global-color-primary);
+    border: 1px dashed #7a797c4f;
 }
 
-.lexseparator {
-    border-bottom: 1px solid var(--global-button-color);
-    margin: 5px 0 5px 10px;
+.lexwidget textarea.outline:hover, .lexwidget .lextext.nobg:hover {
+    background: none;
 }
 
-.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;
+.lexwidget textarea:disabled {
+    resize: none;
 }
 
-:root[data-theme="light"] .lexwidget .lextext {
-    border: 1px solid var(--global-color-tertiary);
+.lexwidget textarea:focus {
+    border: 1px solid var(--global-text-quaternary);
 }
 
-:root[data-theme="light"] .lexbranch .lexseparator {
-    border-top: 1px solid #e7e7e7;
-    border-bottom: 1px solid #c1c1c1;
-}
+/* Title Widget */
 
 .lextitle {
     width: fit-content;
@@ -1453,7 +1497,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;
@@ -1463,14 +1507,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);
 }
 
@@ -1481,7 +1525,7 @@ a svg, svg path {
 }
 
 .lextitle.link:hover {
-    color: #049EF4;
+    color: var(--global-color-accent-light);
     transform: scale(1.02);
 }
 
@@ -1489,123 +1533,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; color: var(--global-text-primary) !important; background-color: var(--global-color-primary) !important; border: 1px solid var(--button-color) !important; }
-.lexbutton.dashed { box-shadow: none; color: var(--global-text-primary) !important; background-color: var(--global-color-primary) !important; border: 1px dashed var(--button-color) !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;
-    display: flex;
-    flex-wrap: wrap;
-    place-content: center;
-    pointer-events: none;
-    gap: 0.4rem;
+.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;
 }
-
-.lexbutton svg {
-    pointer-events: none;
+: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;
@@ -1623,9 +1640,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 {
@@ -1633,24 +1650,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 {
@@ -1664,7 +1672,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;
@@ -1701,16 +1709,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;
@@ -1731,14 +1737,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;
@@ -1755,15 +1761,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 {
@@ -1785,11 +1791,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 {
@@ -1797,8 +1804,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 {
@@ -1810,15 +1817,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;
@@ -1844,13 +1846,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;
@@ -1869,7 +1874,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;
 }
 
@@ -1887,7 +1892,7 @@ dialog .lexselect .lexselectoptions {
 }
 
 .lexcheckboxsubmenu {
-    width: calc(100% - 16px);
+    width: 100%;
     padding: 4px;
     padding-inline: 8px;
     color: var(--global-text-secondary);
@@ -1901,11 +1906,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;
@@ -1916,9 +1921,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;
@@ -1932,11 +1936,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 > * {
@@ -1950,7 +1954,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
 }
 
@@ -1999,15 +2003,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 {
@@ -2028,14 +2045,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;
@@ -2043,7 +2059,7 @@ dialog .lexselect .lexselectoptions {
 }
 
 .lextogglesubmenu {
-    width: calc(100% - 16px);
+    width: 100%;
     padding: 6px;
     padding-inline: 8px;
     color: var(--global-text-secondary);
@@ -2061,7 +2077,7 @@ dialog .lexselect .lexselectoptions {
 }
 
 .lexradiogroup span {
-    font-weight: 600;
+    font-weight: 500;
 }
 
 .lexradiogroup .lexradiogroupitem {
@@ -2105,9 +2121,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); }
@@ -2136,7 +2156,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;
 }
 
@@ -2149,6 +2169,7 @@ dialog .lexselect .lexselectoptions {
 
 .lexcolor input[type="color"] {
     cursor: pointer;
+    background: none;
 }
 
 .lexcolor .lexwidget {
@@ -2162,10 +2183,7 @@ dialog .lexselect .lexselectoptions {
 }
 
 .lexvector a {
-    width: 48px;
     font-size: var(--global-font-size-sm);
-    margin-left: 6px;
-    margin-right: 6px;
 }
 
 .lexvector .vecbox {
@@ -2175,7 +2193,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;
 }
 
@@ -2184,11 +2202,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,
@@ -2203,7 +2217,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 {
@@ -2229,11 +2243,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 */
@@ -2266,10 +2280,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;
@@ -2278,20 +2292,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 {
@@ -2304,7 +2319,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;
@@ -2335,7 +2350,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;
 }
@@ -2370,7 +2385,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;
@@ -2390,8 +2405,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); }
@@ -2462,7 +2477,7 @@ input[type=number] {
 /* Size Widget */
 
 .lexwidget .lexsizecross {
-    color: var(--global-selected);
+    color: var(--global-color-accent);
     font-weight: 800;
 }
 
@@ -2485,7 +2500,7 @@ input[type=number] {
 }
 
 .lexwidget .lexpad .lexinnerpad .lexpadthumb {
-    background-color: var(--global-selected);
+    background-color: var(--global-color-accent);
     width: 10%;
     height: 10%;
     border-radius: 2px;
@@ -2493,7 +2508,7 @@ input[type=number] {
 }
 
 .lexwidget .lexpad .lexinnerpad .lexpadthumb.active {
-    background-color: var(--global-selected-light);
+    background-color: var(--global-color-accent-light);
 }
 
 /* Tabs Widget */
@@ -2570,19 +2585,30 @@ input[type=number] {
     min-height: 12px;
     margin: 0 auto;
     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;
+    padding-inline: 8px;
     display: flex;
     align-items: center;
     border-radius: 10px;
-    margin-top: 4px;
+    gap: 0.5rem;
+}
+
+.lexwidget.nobranch .lextree .lextreetools {
+    background: var(--global-color-secondary);
 }
 
 .lextree .lextreetools input {
@@ -2595,17 +2621,12 @@ input[type=number] {
 }
 
 .lextree .lextreetools.notitle {
-    padding-top: 14px;
+    /* padding-top: 14px; */
     border-top-left-radius: 8px;
     border-top-right-radius: 8px;
 }
 
-.lextree .lextreetools a {
-    margin-right: 8px;
-}
-
 .lextree span {
-    /* Tree title */
     padding: 8px;
     display: block;
     border-top-left-radius: 8px;
@@ -2616,11 +2637,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;
@@ -2692,17 +2712,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 {
@@ -2710,7 +2729,7 @@ input[type=number] {
 }
 
 .lextree .lextreeitem .itemicon:hover {
-    color: var(--global-selected);
+    color: var(--global-color-accent);
 }
 
 .lextree .lextreeitem.selected .itemicon:hover {
@@ -2725,7 +2744,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;
@@ -2741,7 +2760,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);
 }
 
@@ -2786,24 +2805,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)*/
@@ -2828,7 +2843,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 
 .lexbadge {
     border-radius: 0.35rem;
-    color: #fff;
+    color: var(--global-text-primary);
     border: 1px solid var(--badge-color, #14171a);
     width: fit-content;
     justify-content: center;
@@ -2841,8 +2856,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); }
@@ -2854,6 +2869,10 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     background-color: #0000;
     background-image: none;
 }
+.lexbadge.no-bg {
+    background: none;
+    border: none;
+}
 /* Sizes */
 .lexbadge.xs { padding-inline: 0.4rem; font-size: var(--global-font-size-xs); }
 .lexbadge.sm { padding-inline: 0.5rem; font-size: var(--global-font-size-sm); }
@@ -2907,8 +2926,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 }
 
 .lexmenubox {
-    position: absolute;
-    padding-right: 8px;
+    position: fixed;
     z-index: 1001;
     background-color: #111111f3;
     border: 1px solid #aaaaaa48;
@@ -3017,7 +3035,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;
 }
 
@@ -3037,9 +3055,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;
 }
@@ -3081,7 +3097,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     user-select: none;
 }
 
-.lexmenubar .lexmenubutton:last-child {
+.lexmenubar .lexmenubutton.main:last-child {
     margin-right: 8px;
 }
 
@@ -3094,7 +3110,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;
 }
 
@@ -3102,10 +3118,9 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 
 .lexcontextmenu {
     z-index: 102;
-    position: absolute;
-    padding-right: 20px;
+    position: fixed;
     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;
 }
@@ -3126,10 +3141,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;
@@ -3149,21 +3163,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;
@@ -3176,20 +3187,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;
 }
 
@@ -3212,12 +3216,12 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 /* Side Bar */
 
 .lexsidebar {
-    width: calc(100% - 20px);
+    width: 100%;
     height: 100%;
     padding: 10px;
     display: flex;
     flex-direction: column;
-    gap: 0.2rem;
+    /* gap: 0.2rem; */
 }
 
 .lexsidebar *::-webkit-scrollbar {
@@ -3231,8 +3235,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;
@@ -3250,18 +3252,19 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 }
 
 .lexsidebar .lexsidebarseparator {
-    background-color: #5251514d;
-    width: 100%;
+    background-color: var(--global-color-tertiary);
+    width: calc(100% + 20px);
     height: 1px;
     margin: 0 auto;
     margin-top: 0.4rem;
     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-bottom: 0.5rem;
+    transition: all 0.2s cubic-bezier(0,0,.2,1);
 }
 
 .lexsidebar .lexsidebargrouptitle {
@@ -3276,8 +3279,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;
 }
 
@@ -3288,20 +3291,22 @@ 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);
-    padding: 6px;
+    width: 100%;
     padding-inline: 8px;
+    padding-block: 6px;
+    margin-block: 0.15rem;
     border-radius: 8px;
     cursor: pointer;
     -webkit-user-select: none;
@@ -3323,14 +3328,15 @@ 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 {
     transform: scale(0.99);
 }
 
-.lexsidebar .lexsidebarentry div {
+.lexsidebar .lexsidebarentry .lexsidebarentrycontent {
+    font-weight: 500;
     display: flex;
     gap: 0.8em;
     margin: 0;
@@ -3338,22 +3344,26 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     opacity: 0.95;
 }
 
-.lexsidebar .lexsidebarentry div i {
+.lexsidebar .lexsidebarentry .lexsidebarentrycontent i {
     min-width: 22px;
     max-width: 22px;
     margin: auto 0;
     text-align: center;
-    margin-left: -2px;
+    font-size: var(--global-font-size-lg);
 }
 
-.lexsidebar .lexsidebarentry div a:not(.lexicon) {
+.lexsidebar .lexsidebarentry .lexsidebarentrycontent a:not(.lexicon) {
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
     align-content: center;
 }
 
-.lexsidebar .lexsidebarentry a.lexicon {
+.lexsidebar .lexsidebarentry .lexsidebarentryicon {
+    margin-left: 2px;
+}
+
+.lexsidebar .lexsidebarentry a.lexicon:not(.lexsidebarentryicon) {
     margin-left: auto;
 }
 
@@ -3368,7 +3378,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;
@@ -3409,7 +3419,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     display: none !important;
 }
 
-.lexsidebar.collapsed .lexsidebarcontent div a {
+.lexsidebar.collapsed .lexsidebarcontent div a:not(.lexsidebarentryicon) {
     display: none;
 }
 
@@ -3419,7 +3429,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     font-weight: 600;
     background-color: var(--global-text-primary);
     color: var(--global-color-primary);
-    font-size: var(--global-font-size);
+    font-size: var(--global-font-size-sm);
     border-radius: 6px;
     text-align: center;
     opacity: 0;
@@ -3432,12 +3442,20 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 
 .lexsidebar.collapsed .lexsidebarentry:hover .lexsidebarentrydesc {
    opacity: 1;
-   transform: translate(0, 0);
+   transform: translate(2px, 0);
+}
+
+.lexsidebar.collapsed .lexsidebarentry:hover {
+    display: flex;
+ }
+
+.lexsidebar .lexsidebarheader {
+    margin-bottom: 0.5rem;
 }
 
 .lexsidebar .lexsidebarfooter, .lexsidebar .lexsidebarheader {
-    width: calc(100% - 16px);
-    height: 36px;
+    width: 100%;
+    height: 48px;
     display: flex;
     border-radius: 8px;
     padding: 8px;
@@ -3456,7 +3474,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 {
@@ -3477,7 +3495,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;
@@ -3600,11 +3618,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%;
 }
@@ -3613,46 +3631,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;
@@ -3661,11 +3639,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;
@@ -3710,7 +3692,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     text-align: center;
     align-items: center;
     padding: 3px;
-    color: var(--global-text-secondary);
+    color: var(--global-text-tertiary);
     cursor: pointer;
     -webkit-user-select: none;
     -moz-user-select: none;
@@ -3720,17 +3702,17 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 }
 
 .lexareatabs .lexareatab.thumb {
-    position: absolute;
-    background: var(--global-selected);
+    background: var(--global-color-accent);
     z-index: 0;
+    height: 22px;
+    position: absolute;
     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;
     gap: 0.1em;
 }
 
@@ -3739,11 +3721,10 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     transition: 0.1s;
     background: none;
     border-radius: 6px;
-    color: var(--global-text-secondary);
 }
 
 .lexareatabs.fit {
-    width: calc(100% - 12px);
+    width: 100%;
     padding-inline: 6px;
 }
 
@@ -3785,14 +3766,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;
 }
@@ -3806,11 +3779,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 * {
@@ -3838,25 +3810,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;
@@ -3871,7 +3843,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 */
@@ -3880,7 +3852,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;
 }
 
@@ -3899,7 +3870,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 }
 
 .lexlayer.selected {
-    --layer-color: var(--global-selected);
+    --layer-color: var(--global-color-accent);
     color: #fff;
 }
 
@@ -3922,7 +3893,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);
@@ -3931,7 +3903,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;
@@ -3958,7 +3929,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 
 .lexlistitem.selected {
     color: #fff;
-    background-color: var(--global-selected);
+    background-color: var(--global-color-accent);
 }
 
 /* Array Widget */
@@ -3967,11 +3938,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 {
@@ -3988,10 +3966,6 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     grid-column: span 2;
 }
 
-.lexarrayitems .small .lexbutton {
-    background: none;
-}
-
 .lexarrayitems .lexwidgetname {
     color: var(--global-text-secondary);
 }
@@ -4002,7 +3976,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;
 }
@@ -4066,7 +4040,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;
@@ -4118,6 +4092,7 @@ th, td {
 
 th {
     --th-color: var(--global-text-secondary);
+    font-weight: 600;
     color: var(--th-color);
     font-size: var(--global-font-size);
     padding-block: 2px;
@@ -4227,10 +4202,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 {
@@ -4255,8 +4226,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;
@@ -4321,7 +4292,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;
@@ -4372,7 +4343,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);
 }
 
@@ -4438,14 +4409,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;
 }
@@ -4463,10 +4426,6 @@ thead:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td
     padding-right: 10px;
 }
 
-.lextimeline .lexbutton:hover {
-    color: var(--global-selected-light);
-}
-
 .lextimeline .lextree {
     margin: 0px !important;
 }
@@ -4488,14 +4447,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;
@@ -4627,7 +4582,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;
@@ -4683,7 +4638,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;
@@ -4716,16 +4671,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 {
@@ -4768,12 +4721,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;
 }
 
@@ -4783,7 +4736,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;
@@ -4794,7 +4747,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;
 }
@@ -4851,7 +4804,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 {
@@ -4930,7 +4883,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;
 }
 
@@ -4965,7 +4918,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;
@@ -5009,7 +4962,7 @@ ul.lexassetscontent {
 }
 
 .lexcodeeditor .codetabsarea.with-vscrollbar {
-    width: calc(100% - 10px) !important;
+    width: 100% !important;
 }
 
 .lexcodeeditor .codetabsarea.with-hscrollbar {
@@ -5220,7 +5173,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;
 }
 
@@ -5237,7 +5190,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);
@@ -5266,7 +5219,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;
 }
@@ -5300,7 +5253,7 @@ ul.lexassetscontent {
 }
 
 .lexcodeeditor .autocomplete pre.selected {
-    background-color: var(--global-selected);
+    background-color: var(--global-color-accent);
 }
 
 .lexcodeeditor .autocomplete pre span {
@@ -5308,7 +5261,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 {
@@ -5550,9 +5503,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;
 }
 
@@ -5621,7 +5574,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);
 }
@@ -5671,8 +5624,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 {
@@ -5682,16 +5637,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;
@@ -5707,7 +5660,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);
@@ -5747,10 +5699,6 @@ ul.lexassetscontent {
     background-color: #56a8d8;
 }
 
-.lexgraphnode .lexgraphnodeio .io__name {
-    margin-top: 2px;
-}
-
 .lexgraphnode .lexgraphnodeio .io__type.output {
     margin-right: unset;
     margin-left: 3px;
@@ -5877,10 +5825,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;
@@ -5924,18 +5868,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;
@@ -5943,7 +5875,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;
 }
@@ -5979,4 +5911,4 @@ ul.lexassetscontent {
   bottom: -5px;
   right: -5px;
   cursor: nwse-resize;
-}
+}