lexgui 0.1.46 → 0.2.0

package/build/lexgui.css

@@ -7,18 +7,18 @@
 }
 
 :root {
-    /* this has to be set to switch between light or dark */
-    color-scheme: light dark;
+    /* default color scheme */
+    color-scheme: dark;
 
     --global-font: "GoogleSans", sans-serif;
     --global-title-font: "GoogleSans", sans-serif;
-    --global-font-size: 12px;
-    --global-font-size-big: 14px;
-    --global-color-primary: light-dark(#f9f9f9, #1c1c1c);
-    --global-color-secondary: light-dark(#ececec, #2c2c2c);
-    --global-color-terciary: light-dark(#e0e0e0, #444);
-    --global-color-quaternary: light-dark(#c8c8c8, #555);
-    --global-color-quinary: light-dark(#b0b0b0, #666);
+    --global-font-size: 13px;
+    --global-font-size-big: 15px;
+    --global-color-primary: light-dark(#f9f9f9, #141414);
+    --global-color-secondary: light-dark(#ececec, #252525);
+    --global-color-terciary: light-dark(#e0e0e0, #3a3a3a);
+    --global-color-quaternary: light-dark(#c8c8c8, #494949);
+    --global-color-quinary: light-dark(#b0b0b0, #5c5c5c);
     --global-selected: #2d69da;
     --global-selected-light: #0d99ff;
     --global-selected-dark: #304b86;
@@ -28,8 +28,9 @@
     --global-button-color: light-dark(#f9f9f9, #3e3e3e);
     --global-button-color-hovered: light-dark(#ececec, #444);
     --global-text-primary: light-dark(#202124, #f4f4ffe6);
-    --global-text-secondary: light-dark(#2c2d2e, #cacad4ea);
-    --global-text-terciary: light-dark(#474747f5, #727272b9);
+    --global-text-secondary: light-dark(#353636, #bfbfc0ea);
+    --global-text-terciary: light-dark(#5a5a5af5, #929292d8);
+    --global-text-quaternary: light-dark(#6b6a6af5, #585757e1);
     --global-intense-background: light-dark(#fefefe, #121212);
     --global-medium-background: #252525;
     --global-blur-background: light-dark(#f7f7f7d8, #1f1f1fe7);
@@ -90,8 +91,14 @@ body {
     margin: 0;
     padding: 0;
     font-family: var(--global-font);
-    /* font-weight: 400; */
-    /* letter-spacing: -0.01em; */
+}
+
+:root[data-strictVP="false"] {
+    overflow-y: auto;
+}
+
+blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, p, pre {
+    margin: 0;
 }
 
 a:any-link {
@@ -102,6 +109,53 @@ canvas {
     border-radius: 6px;
 }
 
+dialog {
+    transition: display 0.1s allow-discrete, overlay 0.1s allow-discrete;
+    animation: dialogHide 0.1s forwards;
+    &[open] {
+        animation: dialogShow 0.1s forwards;
+    }
+}
+
+dialog::backdrop {
+    background-color: #0000008c;
+    position: absolute;
+    opacity: 1;
+    transition: opacity 0.2s ease-in;
+}
+
+@keyframes dialogShow {
+    from {
+        opacity: 0;
+        transform: translate3d(0, -8px, 0)
+        scale3d(0.92, 0.92, 0.92)
+        rotate(0);
+    }
+
+    to {
+        opacity: 1;
+        transform: translate3d(0, 0, 0)
+        scale3d(1, 1, 1)
+        rotate(0);
+    }
+}
+
+@keyframes dialogHide {
+    from {
+        opacity: 1;
+        transform: translate3d(0, 0, 0)
+        scale3d(1, 1, 1)
+        rotate(0);
+    }
+
+    to {
+        opacity: 0;
+        transform: translate3d(0, -8px, 0)
+        scale3d(0.92, 0.92, 0.92)
+        rotate(0);
+    }
+}
+
 body.nocursor * {
     cursor: none !important;
 }
@@ -147,6 +201,10 @@ body.noevents * {
     position: absolute;
 }
 
+:root[data-strictVP="false"] {
+    bottom: unset;
+}
+
 .leximage {
     text-align: center;
 }
@@ -159,6 +217,7 @@ body.noevents * {
     margin-left: 4px;
     cursor: pointer;
     line-height: inherit !important;
+    color: var(--global-text-secondary);
 }
 
 .lexicon:hover {
@@ -170,7 +229,9 @@ body.noevents * {
     margin-top: 0.01em;
 }
 
-#global-search {
+/* Commandbar */
+
+.commandbar {
     position: absolute;
     background-color: var(--global-blur-background);
     --webkit-backdrop-filter: blur(12px);
@@ -181,7 +242,8 @@ body.noevents * {
     max-width: 740px;
     top: 15%;
     left: calc(50% - min(15%, 740px));
-    display: flex;
+    margin: 0;
+    padding: 0 0 2px 0;
     flex-wrap: wrap;
     z-index: 105;
     -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
@@ -190,14 +252,18 @@ body.noevents * {
     /* this fixes the overflow:hidden in Chrome/Opera */
 }
 
-#global-search .gs-header {
+.commandbar[open] {
+    display: flex;
+}
+
+.commandbar .gs-header {
     width: 100%;
     height: 32px;
     display: flex;
     padding: 6px;
 }
 
-#global-search a {
+.commandbar a {
     color: var(--global-text-secondary);
     padding: 10px;
     background-color: var(--global-color-terciary);
@@ -206,7 +272,7 @@ body.noevents * {
     font-size: 12px;
 }
 
-#global-search input {
+.commandbar input {
     width: 100%;
     flex: 50%;
     background: none;
@@ -222,29 +288,30 @@ body.noevents * {
     font-weight: 600;
 }
 
-#global-search .lexarea {
+.commandbar .lexarea {
     background: none !important;
 }
 
-#global-search .searchitembox {
+.commandbar .searchitembox {
     flex-basis: 100%;
     overflow-y: scroll;
     max-height: calc(512px - 48px);
 }
 
-#global-search .searchitembox::-webkit-scrollbar {
+.commandbar .searchitembox::-webkit-scrollbar {
     display: none;
 }
 
-#global-search .searchitembox .searchitem {
+.commandbar .searchitembox .searchitem {
     padding: 10px;
     padding-left: 50px;
     color: var(--global-text-primary);
-    font-size: 13px;
+    font-size: var(--global-font-size);
+    line-height: 15px;
     cursor: pointer;
 }
 
-#global-search .searchitembox .searchitem a {
+.commandbar .searchitembox .searchitem a {
     padding: 0px;
     margin-left: -28px;
     margin-top: 2px;
@@ -252,7 +319,7 @@ body.noevents * {
     float: left;
 }
 
-#global-search .searchitembox .searchitem i {
+.commandbar .searchitembox .searchitem i {
     width: 12px;
     font-size: 11px;
     margin-right: 4px;
@@ -260,24 +327,24 @@ body.noevents * {
     vertical-align: middle;
 }
 
-#global-search .searchitembox .searchitem img {
+.commandbar .searchitembox .searchitem img {
     width: 12px;
     margin-right: 4px;
     margin-top: -2px;
     vertical-align: middle;
 }
 
-#global-search .searchitembox .searchitem .lang-ext {
+.commandbar .searchitembox .searchitem .lang-ext {
     color: #676e75;
     font-size: var(--global-font-size);
 }
 
-#global-search .searchitembox .searchitem.last {
+.commandbar .searchitembox .searchitem.last {
     border-bottom-left-radius: 6px;
     border-bottom-right-radius: 6px;
 }
 
-#global-search .searchitembox .searchitem.hovered {
+.commandbar .searchitembox .searchitem.hovered {
     background-color: var(--global-selected);
     color: #f5f5f5;
 }
@@ -309,6 +376,11 @@ body.noevents * {
     margin-bottom: 12px;
 }
 
+.lexfooter h2 {
+    margin-block-start: 0.83em;
+    margin-block-end: 0.83em;
+}
+
 .lexfooter ul li {
     margin-bottom: 8px;
     font-size: 14px;
@@ -384,17 +456,23 @@ body.noevents * {
 /* Dialogs and alerts */
 
 .lexdialog {
+    outline: none;
+    border: none;
     background: none;
+    margin: 0;
+    padding: 0;
     position: absolute;
     min-width: 256px;
-    /* overflow: hidden; */
+    min-height: max-content;
+    overflow: hidden;
     box-shadow: 0 2px 8px #101010;
-    border-radius: 6px;
+    border-radius: 8px;
     z-index: 101;
     background-color: var(--global-color-secondary);
 }
 
 .lexdialogtitle {
+    outline: none;
     font-family: var(--global-title-font);
     font-weight: 600;
     font-size: 18px;
@@ -462,7 +540,6 @@ body.noevents * {
 /* Pocket Dialog */
 
 .lexdialog.pocket {
-    margin: 3px;
     background-color: var(--global-color-primary);
 }
 
@@ -527,16 +604,6 @@ body.noevents * {
 /* Pop up dialog */
 .lexpopup {
     background: var(--global-blur-background);
-    opacity: 0;
-    transition: opacity 1s;
-}
-
-.lexpopup.fadein {
-    opacity: 1;
-}
-
-.lexpopup.fadeout {
-    opacity: 0;
 }
 
 :root[data-theme="light"] {
@@ -553,6 +620,17 @@ body.noevents * {
     }
 }
 
+/* Generic */
+
+.lexcontainer {
+    display: flex;
+    flex-direction: row;
+}
+
+.lexcontainer.col {
+    flex-direction: column;
+}
+
 /* Area */
 
 .lexarea {
@@ -760,6 +838,11 @@ body.noevents * {
     padding-right: 4px;
 }
 
+.lexwidget.right {
+    margin-left: auto;
+    margin-right: 8px;
+}
+
 .lexwidget.micro button {
     padding-left: 4px;
     padding-right: 4px;
@@ -926,16 +1009,12 @@ body.noevents * {
     }
 }
 
-.lexfilter input {
-    font-family: var(--global-font);
-}
-
 .lextitle {
     width: fit-content;
     width: -moz-fit-content;
     color: var(--global-text-secondary);
     font-weight: 800;
-    font-size: 13px;
+    font-size: 14px;
     margin: 12px;
     padding: 2px;
     padding-left: 12px;
@@ -985,7 +1064,7 @@ body.noevents * {
     background-color: var(--button-color);
     border-radius: 6px;
     border: 1px solid transparent;
-    margin-top: 2px;
+    /* margin-top: 2px; */
     min-height: 22px !important;
     color: var(--global-text-primary);
     font-weight: 500;
@@ -995,13 +1074,12 @@ body.noevents * {
     cursor: pointer;
     font-family: var(--global-font);
     transition: 0.1s linear;
-    padding: 0.25rem;
+    padding: 0.35rem;
 }
 
 :root[data-theme="light"] {
     .lexbutton {
         --button-color: var(--global-button-color);
-        color: var(--global-text-primary);
         border: 1px solid var(--global-color-terciary) !important;
     }
 
@@ -1020,6 +1098,13 @@ body.noevents * {
 /* 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.left {
+    text-align: left;
+    padding-inline: 12px;
+}
 
 .lexbutton span:has(.lexbadge) {
     display: inline-flex;
@@ -1044,8 +1129,15 @@ body.noevents * {
     font-size: 10px;
 }
 
+.lexbutton.array span {
+    display: inline-flex;
+    margin-left: 8px;
+}
+
 .lexbutton.array a {
     margin-top: 2px;
+    margin-right: 3px;
+    margin-left: auto;
 }
 
 .lexbutton:hover {
@@ -1059,6 +1151,10 @@ body.noevents * {
     transform: scale(0.99);
 }
 
+.lexbutton:disabled {
+    color: var(--global-text-terciary);
+}
+
 .lexbutton.selected {
     background: #3c4145;
     color: #DDD;
@@ -1071,44 +1167,39 @@ body.noevents * {
 
 /* Combo Buttons */
 
-.lexcombobuttons {
+.lexcombobuttons .lexcombobuttonsbox {
     display: flex;
-    justify-content: center;
+    background-color: light-dark(var(--global-color-terciary), var(--global-button-color));
+    width: max-content;
+    justify-self: center;
+    padding: 3px;
+    border-radius: 8px;
+    gap: 0.2em;
 }
 
-.lexcombobuttons.right {
-    justify-content: right;
+.lexcombobuttons.right .lexcombobuttonsbox {
+    justify-self: right;
 }
 
-.lexcombobuttons.left {
-    justify-content: left;
+.lexcombobuttons.left .lexcombobuttonsbox {
+    justify-self: left;
 }
 
 .lexcombobuttons .lexbutton.combo {
-    margin-left: 1px;
-    margin-right: 1px;
-    border-radius: 0px;
     display: flex;
-    padding: 0.65em;
+    padding: 0.7em 1.6em;
     transition: 0.2s;
+    background: none;
 }
 
-.lexcombobuttons .lexbutton.combo:first-child {
-    border-top-left-radius: 4px;
-    border-bottom-left-radius: 4px;
-    margin-left: 0px;
-}
-
-.lexcombobuttons .lexbutton.combo:last-child {
-    border-top-right-radius: 4px;
-    border-bottom-right-radius: 4px;
-    margin-right: 0px;
+.lexcombobuttons .lexbutton.combo:hover {
+    color: var(--global-text-secondary);
 }
 
 .lexcombobuttons .lexbutton.combo.selected {
-    background: light-dark(var(--global-selected-light), var(--global-selected));
+    background-color: var(--global-color-primary);
     outline: none;
-    color: #fff;
+    color: var(--global-text-primary);
 }
 
 .lexcombobuttons .lexbutton.combo:active {
@@ -1116,21 +1207,20 @@ body.noevents * {
     color: #ccc;
 }
 
-.lexcombobuttons .lexbutton.combo a {
-    padding: 2px;
-    /* margin-right: 2px; */
-    padding-top: 0.3em;
-}
-
 .lexcombobuttons .lexbutton.combo span {
     line-height: 18px;
 }
 
+.lexcombobuttons .lexbutton.combo a {
+    font-size: 11px;
+}
+
 /* Dropdown (Combo) */
 
 .lexdropdown {
     display: grid;
     align-content: center;
+    position: relative;
 }
 
 .lexdropdown .lexwidget {
@@ -1139,15 +1229,18 @@ body.noevents * {
 
 .lexdropdown .lexfilter {
     width: calc(100% - 6px) !important;
-    background-color: var(--global-color-primary);
     padding: 2px 3px;
+    background-color: var(--global-color-primary);
+    border-bottom: 1px solid;
+    border-color: color-mix(in srgb, var(--global-text-terciary), #00000000 75%);
 }
 
 .lexdropdown .lexfilter a {
-    transform: translateX(-10px);
+    font-size: 10px;
+    padding-inline: 4px;
 }
 
-.lexdropdown .lexoptions .lexlistitem {
+.lexdropdown ul .lexlistitem {
     font-size: 11px;
 }
 
@@ -1167,32 +1260,40 @@ body.noevents * {
     height: fit-content;
 }
 
-.lexdropdown ul {
-    position: fixed;
-    list-style: none;
+.lexdropdown .lexdropdownoptions {
     background-color: var(--global-color-primary);
     -webkit-backdrop-filter: blur(10px);
     backdrop-filter: blur(10px);
-    padding: 0px;
-    transform: translateY(-4px);
-    z-index: 10;
     margin: 0;
-    margin-top: 5px;
-    width: 100%;
-    box-shadow: 0 0px 12px rgba(0, 0, 0, 0.788);
-    border-bottom-left-radius: 8px;
-    border-bottom-right-radius: 8px;
+    padding: 0;
+    border: none;
+    outline: none;
+    width: fit-content;
     max-height: -webkit-fill-available;
+    position: fixed;
+    z-index: 10000;
+    box-shadow: 0 0px 6px rgba(0, 0, 0, 0.603);
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
     overflow-y: auto;
     overflow-x: hidden;
 }
 
-.lexdropdown ul.place-above {
-    max-height: unset;
+.lexdropdown ul {
+    list-style: none;
+    padding: 0px;
+    z-index: 10;
+    margin: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.lexdropdown .lexdropdownoptions.place-above {
+    /* max-height: unset; */
     border-bottom-left-radius: 0px;
     border-bottom-right-radius: 0px;
-    border-top-left-radius: 8px;
-    border-top-right-radius: 8px;
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
 }
 
 .lexdropdown .lexdropdownitem {
@@ -1204,18 +1305,27 @@ body.noevents * {
     align-content: center;
     display: flow-root;
     padding: 2px 0px;
+    padding-right: 32px;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
 }
 
-.lexdropdown .lexdropdownitem:hover {
+.lexdropdown .lexdropdownitem.empty {
+    cursor: default;
+}
+
+.lexdropdown .lexdropdownitem.empty .option {
+    padding: 12px;
+}
+
+.lexdropdown .lexdropdownitem:not(.empty):hover {
     background-color: var(--global-selected);
     color: var(--global-text-primary);
 }
 
-.lexdropdown .lexdropdownitem:active {
+.lexdropdown .lexdropdownitem:not(.empty):active {
     color: #fff;
 }
 
@@ -1246,7 +1356,7 @@ body.noevents * {
 
     .lexdropdown ul {
         background-color: var(--global-color-primary);
-        box-shadow: 0 0px 8px rgba(175, 175, 175, 0.788);
+        box-shadow: 0 0px 6px rgba(175, 175, 175, 0.788);
     }
 
     .lexdropdown .lexdropdownitem:hover {
@@ -1334,7 +1444,7 @@ body.noevents * {
 /* Toggle Widget */
 
 .lextoggle {
-    --toggle-color: var(--global-button-color);
+    --toggle-color: #1a1a1a;
     border: 1px solid transparent;
     color: #f9f9f9;
     background-color: var(--global-color-quaternary);
@@ -1344,6 +1454,8 @@ body.noevents * {
     appearance: none;
     vertical-align: middle;
     -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
     user-select: none;
     border-radius: 12px;
     padding: 3px;
@@ -1871,7 +1983,7 @@ input[type="range"] {
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
-    font-size: 14px;
+    font-size: var(--global-font-size-big);
     font-weight: 800;
 }
 
@@ -2130,7 +2242,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     display: flex;
     height: 100%;
     color: var(--global-text-primary);
-    font-size: 13px;
+    font-size: 14px;
     font-weight: 500;
 }
 
@@ -2297,9 +2409,10 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     display: flex;
     background-color: var(--global-color-secondary);
     margin-top: 10px;
-    margin-bottom: 8px;
+    margin-bottom: 10px;
     border-radius: 6px;
     padding-inline: 4px;
+    font-size: 16px;
 }
 
 .lexmenubar .lexmenubuttons.center {
@@ -2309,17 +2422,17 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 }
 
 .lexmenubar .lexmenubuttons.right {
-    margin-left: auto;
-    margin-right: 16px;
+    margin-left: unset;
+    margin-right: 12px;
 }
 
 .lexmenubar .lexmenubutton {
-    /* display: flex; */
     justify-content: center;
     padding: 8px;
     padding-top: 0.6em;
     color: var(--global-text-secondary);
     cursor: pointer;
+    line-height: 10px;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
@@ -2739,7 +2852,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 }
 
 .lexareatabs.row {
-    width: 100%;
+    width: calc(100%-9px);
 }
 
 .lexareatabs.row {
@@ -3015,6 +3128,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     cursor: default;
     -webkit-user-select: none;
     -moz-user-select: none;
+    -ms-user-select: none;
     user-select: none;
 }
 
@@ -3051,6 +3165,104 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     color: var(--global-text-secondary);
 }
 
+/* Table Widget */
+
+.lextable table {
+    width: 100%;
+    border: 2px solid;
+    border-color: light-dark(#dbd8d8c0, #5c5b5b7a);
+    border-collapse: separate;
+    /* border-left: 0; */
+    border-radius: 8px;
+    border-spacing: 0px;
+    overflow: hidden;
+    background-color: var(--global-button-color);
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+thead {
+    display: table-header-group;
+    border-color: inherit;
+    border-collapse: separate;
+}
+
+tr {
+    display: table-row;
+    vertical-align: inherit;
+    border-color: inherit;
+}
+
+th {
+    --th-color: light-dark(var(--global-text-quaternary), var(--global-text-primary));
+    color: var(--th-color);
+    font-size: calc(var(--global-font-size) + 1px) !important;
+    cursor: pointer;
+    transition: all 0.1s linear;
+    background-color: color-mix(in srgb, var(--global-button-color), #000 10%);
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+tr:hover {
+    background-color: color-mix(in srgb, var(--global-button-color), #000 7%);
+}
+
+th a {
+    /* color: var(--global-selected-light); */
+    margin-left: 4px;
+    font-size: 10px !important;
+}
+
+th a:active {
+    transform: scale(1.01);
+}
+
+th:hover {
+    color: color-mix(in srgb, var(--th-color), #000 10%);
+}
+
+th, td {
+    padding: 6px;
+    padding-inline: 12px;
+    text-align: left;
+    vertical-align: top;
+    /* border-left: 2px solid red; */
+}
+
+th.sm, td.sm {
+    width: 8%;
+}
+
+th .lexcheckbox, td .lexcheckbox {
+    margin-top: 3px;
+}
+
+td {
+    border-top: 2px solid;
+    border-color: light-dark(#dbd8d8c0, #5c5b5b7a);
+}
+
+thead:first-child tr:first-child th:first-child, tbody:first-child tr:first-child td:first-child {
+    border-radius: 8px 0 0 0;
+}
+
+thead:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td:first-child {
+    border-radius: 0 0 0 8px;
+}
+
+.lextable .lextablebuttons {
+    display: inline-flex;
+    gap: 8px;
+}
+
+:root[data-theme="light"] {
+    .lextable table {
+        box-shadow: none;
+    }
+}
+
 /* Custom Widgets Widget */
 
 .lexcustomitems {
@@ -3230,6 +3442,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     vertical-align: middle;
     -webkit-user-select: none;
     -moz-user-select: none;
+    -ms-user-select: none;
     user-select: none;
     place-content: center;
     display: inline-grid;
@@ -3466,6 +3679,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 /* Asset Browser */
 
 .lexassetbrowser {
+    min-height: 190px;
     height: 100%;
     border-radius: 6px;
     background-color: var(--global-color-primary);
@@ -3521,6 +3735,9 @@ ul.lexassetscontent {
     font-size: var(--global-font-size);
     color: #AAA;
     -webkit-user-drag: element;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
     user-select: none;
     box-sizing: border-box;
     width: 10em;
@@ -3580,6 +3797,7 @@ ul.lexassetscontent {
 .lexassetscontent li:hover + .lexitemdesc {
   opacity: 1;
 }
+
 .lexassetscontent.list li {
     width: calc(100% - 0.5em);
     height: 1.8em;
@@ -3853,7 +4071,7 @@ ul.lexassetscontent {
 
 .lexcodegutter {
     width: 48px;
-    height: calc(100% - 62px);
+    height: calc(100% - 65px);
     background-color: light-dark(var(--global-color-terciary), var(--global-medium-background));
     margin-top: 28px;
     overflow: hidden;
@@ -3862,7 +4080,7 @@ ul.lexassetscontent {
 }
 
 .lexcodeeditor .codetabsarea {
-    height: calc(100% - 72px) !important;
+    height: calc(100% - 64px) !important;
     background-color: light-dark(var(--global-color-terciary), var(--global-medium-background));
     overflow: scroll;
 }
@@ -3879,6 +4097,10 @@ ul.lexassetscontent {
     width: calc(100% - 10px) !important;
 }
 
+.lexcodeeditor .codetabsarea.with-hscrollbar {
+    height: calc(100% - 72px) !important;
+}
+
 .lexcodeeditor .codetabsarea.dragging {
     background-color: var(--global-color-secondary);
 }
@@ -3890,7 +4112,7 @@ ul.lexassetscontent {
     -moz-osx-font-smoothing: grayscale;
     font-feature-settings: "ss04", "ss05";
     font-size: var(--code-editor-font-size);
-    padding-right: 6px;
+    /* padding-right: 6px; */
     position: relative;
 }
 
@@ -3930,16 +4152,16 @@ ul.lexassetscontent {
     background-color: #333437a9;
 }
 
-.lexcodeeditor pre.added {
-    background-color: #40db212f;
+.lexcodeeditor.disabled pre.active-line {
+    background-color: transparent;
 }
 
-.lexcodeeditor pre.removed {
-    background-color: #db21212f;
+.lexcodeeditor pre.added {
+    background-color: #40db212f !important;
 }
 
-.lexcodeeditor.disabled pre.active-line {
-    background: none;
+.lexcodeeditor pre.removed {
+    background-color: #db21212f !important;
 }
 
 .lexcodeeditor.disabled .lexareatab {
@@ -3959,7 +4181,7 @@ ul.lexassetscontent {
     display: inline-block;
 }
 
-pre .line-gutter {
+.lexcodeeditor pre .line-gutter {
     color: var(--global-text-terciary);
     width: 48px;
     height: var(--code-editor-row-height);
@@ -3976,6 +4198,10 @@ pre .line-gutter {
     z-index: 1;
 }
 
+.lexcodeeditor.no-gutter pre .line-gutter {
+    opacity: 0;
+}
+
 .lexcodeeditor .cursors,
 .lexcodeeditor .selections {
     -webkit-text-size-adjust: 100%;
@@ -4283,7 +4509,7 @@ pre .line-gutter {
         /* thumb */
         background-color: #8383839d !important;
     }
-    
+
     .lexcodescrollbar div:hover {
         /* thumb */
         background-color: #5e5e5ea9 !important;
@@ -4794,7 +5020,7 @@ pre .line-gutter {
 /* .lexvideoeditor .lexvideotimebar canvas {
   width: calc(100%);
   height: calc(100% );
-  padding: 5px; 
+  padding: 5px;
 }  */
 
 .resizeable {