lexgui 0.5.4 → 0.5.6

package/build/components/codeeditor.js

@@ -491,9 +491,9 @@ class CodeEditor {
 
                 searchPanel.sameLine( 4 );
                 searchPanel.addText( null, "", null, { placeholder: "Find" } );
-                searchPanel.addButton( null, "up", () => this.search( null, true ), { className: 'micro', icon: "fa fa-arrow-up" } );
-                searchPanel.addButton( null, "down", () => this.search(), { className: 'micro', icon: "fa fa-arrow-down" } );
-                searchPanel.addButton( null, "x", this.hideSearchBox.bind( this ), { className: 'micro', icon: "fa fa-xmark" } );
+                searchPanel.addButton( null, "up", () => this.search( null, true ), { icon: "fa fa-arrow-up" } );
+                searchPanel.addButton( null, "down", () => this.search(), { icon: "fa fa-arrow-down" } );
+                searchPanel.addButton( null, "x", this.hideSearchBox.bind( this ), { icon: "fa fa-xmark" } );
 
                 box.querySelector( 'input' ).addEventListener( 'keyup', e => {
                     if( e.key == 'Escape' ) this.hideSearchBox();
@@ -530,7 +530,7 @@ class CodeEditor {
         // Add code-sizer
         {
             this.codeSizer = document.createElement( 'div' );
-            this.codeSizer.className = "code-sizer";
+            this.codeSizer.className = "code-sizer pseudoparent-tabs";
 
             // Append all childs
             while( this.codeScroller.firstChild )
@@ -1535,9 +1535,9 @@ class CodeEditor {
             let panel = new LX.Panel({ className: "lexcodetabinfo", width: "calc(100%)", height: "auto" });
 
             panel.sameLine();
-            panel.addLabel( this.code.title, { float: 'right', signal: "@tab-name" });
-            panel.addLabel( "Ln " + 1, { xmaxWidth: "48px", signal: "@cursor-line" });
-            panel.addLabel( "Col " + 1, { xmaxWidth: "48px", signal: "@cursor-pos" });
+            panel.addLabel( this.code.title, { fit: true, signal: "@tab-name" });
+            panel.addLabel( "Ln " + 1, { fit: true, signal: "@cursor-line" });
+            panel.addLabel( "Col " + 1, { fit: true, signal: "@cursor-pos" });
             panel.addButton( null, "Spaces: " + this.tabSpaces, ( value, event ) => {
                 LX.addContextMenu( "Spaces", event, m => {
                     const options = [ 2, 4, 8 ];
@@ -1619,7 +1619,7 @@ class CodeEditor {
         this.processFocus(false);
 
         LX.addContextMenu( null, e, m => {
-            m.add( "Create", this.addTab.bind( this, "unnamed.js", true ) );
+            m.add( "Create", this.addTab.bind( this, "unnamed.js", true, "", { language: "JavaScript" } ) );
             m.add( "Load", this.loadTabFromFile.bind( this, "unnamed.js", true ) );
         });
     }
@@ -1731,7 +1731,8 @@ class CodeEditor {
             title: code.title,
             icon: tabIcon,
             onSelect: this._onSelectTab.bind( this, isNewTabButton ),
-            onContextMenu: this._onContextMenuTab.bind( this, isNewTabButton )
+            onContextMenu: this._onContextMenuTab.bind( this, isNewTabButton ),
+            allowDelete: true
         } );
 
         // Move into the sizer..
@@ -1805,7 +1806,8 @@ class CodeEditor {
             title: code.title,
             icon: tabIcon,
             onSelect: this._onSelectTab.bind( this, isNewTabButton ),
-            onContextMenu: this._onContextMenuTab.bind( this, isNewTabButton )
+            onContextMenu: this._onContextMenuTab.bind( this, isNewTabButton ),
+            allowDelete: true
         });
 
         // Move into the sizer..
@@ -3911,14 +3913,15 @@ class CodeEditor {
     }
 
     _measureChar( char = "a", use_floating = false, get_bb = false ) {
-
-        var line = document.createElement( "pre" );
-        var text = document.createElement( "span" );
+        const parentContainer = LX.makeContainer( null, "lexcodeeditor", "", document.body );
+        const container = LX.makeContainer( null, "code", "", parentContainer );
+        const line = document.createElement( "pre" );
+        container.appendChild( line );
+        const text = document.createElement( "span" );
         line.appendChild( text );
         text.innerText = char;
-        this.code.appendChild( line );
         var rect = text.getBoundingClientRect();
-        LX.UTILS.deleteElement( line );
+        LX.UTILS.deleteElement( parentContainer );
         const bb = [ use_floating ? rect.width : Math.floor( rect.width ), use_floating ? rect.height : Math.floor( rect.height ) ];
         return get_bb ? bb : bb[ 0 ];
     }
@@ -4489,8 +4492,8 @@ CodeEditor.keywords = {
                   'arguments', 'extends', 'instanceof', 'Infinity'],
     'C': ['int', 'float', 'double', 'long', 'short', 'char', 'const', 'void', 'true', 'false', 'auto', 'struct', 'typedef', 'signed', 'volatile', 'unsigned', 'static', 'extern', 'enum', 'register',
         'union'],
-    'C++': ['int', 'float', 'double', 'bool', 'long', 'short', 'char', 'wchar_t', 'const', 'static_cast', 'dynamic_cast', 'new', 'delete', 'void', 'true', 'false', 'auto', 'struct', 'typedef', 'nullptr',
-            'NULL', 'signed', 'unsigned', 'namespace', 'enum', 'extern', 'union', 'sizeof', 'static'],
+    'C++': ['int', 'float', 'double', 'bool', 'long', 'short', 'char', 'wchar_t', 'const', 'static_cast', 'dynamic_cast', 'new', 'delete', 'void', 'true', 'false', 'auto', 'class', 'struct', 'typedef', 'nullptr',
+            'NULL', 'signed', 'unsigned', 'namespace', 'enum', 'extern', 'union', 'sizeof', 'static', 'private', 'public'],
     'CMake': ['cmake_minimum_required', 'set', 'not', 'if', 'endif', 'exists', 'string', 'strequal', 'add_definitions', 'macro', 'endmacro', 'file', 'list', 'source_group', 'add_executable',
         'target_include_directories', 'set_target_properties', 'set_property', 'add_compile_options', 'add_link_options', 'include_directories', 'add_library', 'target_link_libraries',
         'target_link_options', 'add_subdirectory', 'add_compile_definitions', 'project', 'cache'],

package/build/lexgui.css

@@ -31,9 +31,9 @@
     --global-color-warning: #ffc107;
     --global-color-error: #f54c4c;
     --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-text-secondary: light-dark(#232324, #d1d1d3);
+    --global-text-tertiary: light-dark(#4e4e4f, #aaaaaa);
+    --global-text-quaternary: light-dark(#6a6a6b, #807f7f);
     --global-intense-background: light-dark(#fefefe, #040405);
     --global-medium-background: #252525;
     --global-blur-background: light-dark(#f7f7f7d8, #1f1f1fe7);
@@ -333,7 +333,7 @@ svg.xxl { width: var(--svg-size-xxl); height: var(--svg-size-xxl); }
     outline: none;
 }
 
-:root[data-strictVP="false"] {
+:root[data-strictVP="false"] #lexroot {
     bottom: unset;
 }
 
@@ -356,6 +356,7 @@ svg.xxl { width: var(--svg-size-xxl); height: var(--svg-size-xxl); }
     align-content: center;
     border-radius: 4px;
     transition: all 0.15s linear;
+    place-self: center;
 }
 
 .lexicon:hover {
@@ -1360,7 +1361,8 @@ a svg, svg path {
     font-family: var(--global-font);
     padding: 4px;
     color: var(--global-text-primary);
-    background-color: var(--global-color-tertiary);
+    --background-color: var(--global-color-tertiary);
+    background-color: var(--background-color);
     outline: none;
     border-radius: 6px;
     border: 1px solid var(--global-color-transparent);
@@ -1370,7 +1372,7 @@ a svg, svg path {
 }
 
 .lexwidget input:not(.lexcheckbox, .lextoggle, .lexrangeslider):hover {
-    background-color: color-mix(in srgb, var(--global-color-tertiary), #000 7%);
+    background-color: color-mix(in srgb, var(--background-color), #000 5%);
 }
 
 .lexwidget input.colorinput {
@@ -1387,6 +1389,7 @@ a svg, svg path {
 /* Text Widget */
 
 .lexwidget input.lextext, .lexwidget div.lextext {
+    width: 100%;
     border-radius: 6px;
     position: relative;
     border: 1px solid transparent;
@@ -1443,6 +1446,7 @@ a svg, svg path {
 /* TextArea Widget */
 
 .lexwidget textarea {
+    width: 100%;
     word-break: break-word;
     font-family: var(--global-font);
     background: none;
@@ -1481,6 +1485,118 @@ a svg, svg path {
     border: 1px solid var(--global-text-quaternary);
 }
 
+/* Input Color Widget */
+
+.lexcolor {
+    display: flex;
+    align-items: center;
+}
+
+.lexcolor > div:first-child {
+    background: repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%) 50% / 12px 12px;
+}
+
+.lexcolor .lexcolorsample {
+    width: 9px;
+    height: 18px;
+    cursor: pointer;
+    background-color: currentColor;
+}
+
+.lexcolor .colorinfo {
+    color: var(--global-text-primary);
+    min-width: 56px;
+    margin-left: 8px;
+    font-weight: 600;
+}
+
+.lexcolor .lexwidget {
+    padding: 0px;
+}
+
+.lexcolorpicker {
+    background-color: var(--global-color-primary);
+    font-size: var(--global-font-size);
+    position: fixed;
+    left: 0px;
+    top: 0px;
+    width: 256px;
+    z-index: 150;
+    display: flex;
+    flex-direction: column;
+    padding: 0.2rem;
+    border-radius: 0.5rem;
+    border: 1px solid #7a797c4f;
+    padding: 0.5rem;
+    gap: 0.5rem;
+    animation-duration: 400ms;
+	animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+	will-change: transform, opacity;
+    outline: none;
+}
+
+.lexcolorpicker[data-side="top"] { animation-name: slideDownAndFade }
+.lexcolorpicker[data-side="right"] { animation-name: slideLeftAndFade }
+.lexcolorpicker[data-side="bottom"] { animation-name: slideUpAndFade }
+.lexcolorpicker[data-side="left"] { animation-name: slideRightAndFade }
+
+.lexcolorpicker input.lextext {
+    padding-inline: 0 !important;
+    color: var(--global-text-secondary) !important;
+    cursor: pointer;
+}
+
+.lexcolormarker {
+    width: 1rem;
+    height: 1rem;
+    border-radius: 0.5rem;
+    background-color: transparent;
+    position: absolute;
+    border: 3px solid #fff;
+    pointer-events: none;
+}
+
+.lexcolorpickerbg {
+    width: 100%;
+    aspect-ratio: 1;
+    border-radius: 0.3rem;
+    background-image: linear-gradient(0deg, #000000 0, transparent), linear-gradient(90deg, #ffffff 0, #fff0);
+    position: relative;
+    cursor: pointer;
+}
+
+.lexhuetracker {
+    width: 100%;
+    height: 1rem;
+    border-radius: 0.5rem;
+    background-image: linear-gradient(-90deg, red, #f0f 17%, #00f 33%, #0ff, #0f0 67%, #ff0 83%, red);
+    position: relative;
+    cursor: pointer;
+}
+
+.lexalphatracker {
+    width: 100%;
+    height: 1rem;
+    border-radius: 0.5rem;
+    /* color: rgba(0, 0, 0, 1); */
+    background: linear-gradient(90deg, rgba(0, 0, 0, 0), currentColor), repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%) 50% / 12px 12px;
+    background-color: white; /* fallback */
+    position: relative;
+    cursor: pointer;
+}
+
+.lexcolorpicker * {
+    font-size: var(--global-font-size-sm);
+}
+
+.lexcolorpicker .lextext {
+    letter-spacing: 0.02rem;
+}
+
+.lexcolorpicker .lexwidget {
+    padding: 2px !important;
+}
+
 /* Title Widget */
 
 .lextitle {
@@ -1530,7 +1646,7 @@ a svg, svg path {
 }
 
 
-/* Buttons */
+/* Button Widget */
 
 .lexbutton {
     --button-color: var(--global-color-tertiary);
@@ -1558,7 +1674,7 @@ a svg, svg path {
 .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);  }
+.lexbutton.error { --button-color: var(--global-color-error); --border-color: #310108; color: var(--border-color);  }
 
 /* Few Sizes */
 .lexbutton.xs { width: 35%; margin: 0 auto; }
@@ -1577,18 +1693,18 @@ a svg, svg path {
     background-color: color-mix(in srgb, var(--button-color), #000 9%) !important;
 }
 :root[data-theme="light"] .lexbutton:hover {
-    background-color: color-mix(in srgb, var(--button-color), #fff 18%) !important;
+    background-color: color-mix(in srgb, var(--button-color), #fff 9%) !important;
 }
 
 .lexbutton:active:not(.lexbutton.combo) {
-    background-color: color-mix(in srgb, var(--button-color), #fff 4%) !important;
+    background-color: color-mix(in srgb, var(--button-color), #fff 4%);
 }
 :root[data-theme="light"] .lexbutton:active:not(.lexbutton.combo) {
-    background-color: color-mix(in srgb, var(--button-color), #000 4%) !important;
+    background-color: color-mix(in srgb, var(--button-color), #000 4%);
 }
 
-.lexbutton:disabled {
-    color: var(--global-text-tertiary);
+.lexbutton:disabled, .lexbutton:disabled a {
+    color: var(--global-text-quaternary);
 }
 
 .lexbutton.selected {
@@ -2133,49 +2249,6 @@ dialog .lexselect .lexselectoptions {
 .lexradiogroup.warning .lexradiogroupitem button.checked span { background-color: var(--global-color-warning); }
 .lexradiogroup.error .lexradiogroupitem button.checked span { background-color: var(--global-color-error); }
 
-/* Input Color Widget */
-
-.lexcolor {
-    display: flex;
-    align-items: center;
-}
-
-.lexcolor input {
-    width: 96px;
-}
-
-.lexcolor input[type="color"]::-webkit-color-swatch-wrapper {
-    padding: 2px;
-    border-radius: 4px;
-
-}
-
-.lexcolor input[type="color"]::-webkit-color-swatch {
-    border-radius: 4px;
-    border: none;
-}
-
-.lexcolor:has(input:focus) input[type="color"] {
-    outline: 2px solid var(--global-color-accent);
-    border-radius: 4px;
-}
-
-.lexcolor .colorinfo {
-    color: var(--global-text-primary);
-    min-width: 56px;
-    margin-left: 8px;
-    font-weight: 600;
-}
-
-.lexcolor input[type="color"] {
-    cursor: pointer;
-    background: none;
-}
-
-.lexcolor .lexwidget {
-    padding: 0px;
-}
-
 /* Vector Widgets */
 
 .lexvector {
@@ -2209,7 +2282,7 @@ dialog .lexselect .lexselectoptions {
 .lexwidget .vecbox .drag-icon {
     position: absolute;
     width: 2px;
-    right: 0.25em;
+    right: 1em;
     top: 25%;
     font-size: var(--global-font-size-sm);
     color: var(--global-text-secondary);
@@ -2350,8 +2423,7 @@ input[type=number] {
     height: 12px;
     border: 1px solid #c9c7de;
     border-radius: 6px;
-    background: light-dark(var(--global-color-accent-light), var(--global-color-accent));
-    box-shadow: 0px 0px 6px #505050;
+    background: var(--global-color-accent);
     cursor: pointer;
 }
 
@@ -2488,6 +2560,18 @@ input[type=number] {
     user-select: none;
 }
 
+/* Size Widget */
+
+.lexotpslot.active {
+    border: 1px solid var(--global-text-primary);
+    transition: border-color 0.1s ease-in;
+}
+
+.lexotpslot.disabled {
+    color: var(--global-text-tertiary);
+    cursor: not-allowed;
+}
+
 /* Pad Widget */
 
 .lexwidget .lexpad {
@@ -2621,7 +2705,6 @@ input[type=number] {
 }
 
 .lextree .lextreetools.notitle {
-    /* padding-top: 14px; */
     border-top-left-radius: 8px;
     border-top-right-radius: 8px;
 }
@@ -2673,9 +2756,13 @@ input[type=number] {
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
+    transition-property: color, background-color, border-color;
+    transition-timing-function: ease-out;
+    transition-duration: .15s;
 }
 
 .lextree .lextreeitem input {
+    color: var(--global-color-primary);
     padding: 0;
     border: none;
 }
@@ -2716,8 +2803,12 @@ input[type=number] {
 }
 
 .lextree .lextreeitem.selected {
-    color: var(--global-text-primary);
-    background: light-dark(var(--global-color-accent-light), var(--global-color-accent));
+    color: #f4f4f5;
+    background: var(--global-color-accent);
+}
+
+.lextree .lextreeitem.selected a.lexicon {
+    color: #f4f4f5;
 }
 
 .lextree .lextreeitem a.hierarchy {
@@ -2728,18 +2819,6 @@ input[type=number] {
     font-size: var(--global-font-size-sm);
 }
 
-.lextree .lextreeitem .itemicon:hover {
-    color: var(--global-color-accent);
-}
-
-.lextree .lextreeitem.selected .itemicon:hover {
-    color: var(--global-text-secondary);
-}
-
-.lextree .lextreeitem .itemicon:active {
-    margin-top: 7px;
-}
-
 /* File Input */
 
 .lexfileinput::file-selector-button {
@@ -2843,7 +2922,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 
 .lexbadge {
     border-radius: 0.35rem;
-    color: var(--global-text-primary);
+    color: #f4f4f5;
     border: 1px solid var(--badge-color, #14171a);
     width: fit-content;
     justify-content: center;
@@ -2856,12 +2935,12 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 }
 
 /* Colors */
-.lexbadge.primary { --badge-color: var(--global-color-accent); }
-.lexbadge.secondary { --badge-color: var(--global-color-accent-light); }
+.lexbadge.primary { --badge-color: var(--global-color-primary); color: var(--global-text-primary); }
+.lexbadge.secondary { --badge-color: var(--global-color-secondary); color: var(--global-text-primary); }
 .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); }
-.lexbadge.error { --badge-color: var(--global-color-error); }
+.lexbadge.warning { --badge-color: var(--global-color-warning); color: #793205; }
+.lexbadge.error { --badge-color: var(--global-color-error); color: #310108; }
 /* Styles */
 .lexbadge.outline {
     color: var(--badge-color, var(--global-text-primary));
@@ -3085,6 +3164,18 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     margin-right: 12px;
 }
 
+.lexmenubar .lexbutton {
+    padding-inline: 0.15rem;
+}
+
+.lexmenubar .lexbutton:hover, :root[data-theme="light"] .lexmenubar .lexbutton:hover {
+    background-color: transparent !important;
+}
+
+.lexmenubar .lexbutton:active, :root[data-theme="light"] .lexmenubar .lexbutton:active {
+    background-color: transparent !important;
+}
+
 .lexmenubar .lexmenubutton {
     color: var(--global-text-secondary);
     padding-inline: 0.45em;
@@ -3221,7 +3312,6 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     padding: 10px;
     display: flex;
     flex-direction: column;
-    /* gap: 0.2rem; */
 }
 
 .lexsidebar *::-webkit-scrollbar {
@@ -3419,32 +3509,10 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     display: none !important;
 }
 
-.lexsidebar.collapsed .lexsidebarcontent div a:not(.lexsidebarentryicon) {
+.lexsidebar.collapsed .lexsidebarentrycontent div, .lexsidebar.collapsed .lexsidebarcontent div a:not(.lexsidebarentryicon) {
     display: none;
 }
 
-.lexsidebar .lexsidebarentry .lexsidebarentrydesc {
-    position: absolute;
-    margin-left: 32px;
-    font-weight: 600;
-    background-color: var(--global-text-primary);
-    color: var(--global-color-primary);
-    font-size: var(--global-font-size-sm);
-    border-radius: 6px;
-    text-align: center;
-    opacity: 0;
-    transform: translate(-12px, 0);
-    z-index: 102;
-    padding: 4px 8px;
-    transition: opacity ease-in 0.15s, transform ease-in 0.15s;
-    pointer-events: none;
-}
-
-.lexsidebar.collapsed .lexsidebarentry:hover .lexsidebarentrydesc {
-   opacity: 1;
-   transform: translate(2px, 0);
-}
-
 .lexsidebar.collapsed .lexsidebarentry:hover {
     display: flex;
  }
@@ -4354,22 +4422,28 @@ thead:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td
 /* Icon swap */
 
 .swap {
-    cursor: pointer;
     vertical-align: middle;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
-    place-content: center;
+    place-self: center;
     display: inline-grid;
     position: relative;
+    pointer-events: none;
 }
 
 .swap input {
+    pointer-events: auto;
+    cursor: pointer;
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     border: none;
+    width: 100%;
+    height: 100%;
+    transform: translate(-0.2rem, -0.2rem);
+    background: none !important;
 }
 
 .swap > * {
@@ -4640,7 +4714,7 @@ ul.lexassetscontent {
     padding: 0;
     box-shadow: 0 0 2px rgba(0, 0, 0, .14);
     overflow: hidden;
-    background-color: #555;
+    background-color: var(--global-color-quaternary);
     cursor: pointer;
     text-align: center;
     border-top-left-radius: 2px;
@@ -4694,6 +4768,7 @@ ul.lexassetscontent {
     font-size: 4rem;
     text-anchor: middle;
     font-family: 'Ubuntu', sans-serif;
+    color: var(--global-text-tertiary);
 }
 
 .lexassetscontent li.image {
@@ -4797,10 +4872,6 @@ ul.lexassetscontent {
     top: 3px;
 }
 
-.lexassetscontent li:hover span {
-    color: #f5f5f5;
-}
-
 .lexassetscontent li.selected .lexassettitle {
     color: #f5f5f5;
     text-shadow: 0 0 3px black;
@@ -4847,7 +4918,6 @@ ul.lexassetscontent {
 
 /* Code Editor */
 .codebasearea {
-
     display: flex;
     position: relative;
     overflow: inherit;
@@ -4935,20 +5005,25 @@ ul.lexassetscontent {
     z-index: 3;
     bottom: 0px;
     justify-items: end;
+    padding-inline: 1rem;
+}
+
+.lexcodetabinfo .lexinlinewidgets {
+    justify-content: end;
 }
 
 .lexcodegutter {
     width: 48px;
     height: calc(100% - 65px);
     background-color: light-dark(var(--global-color-tertiary), var(--global-medium-background));
-    margin-top: 28px;
+    margin-top: 31px;
     overflow: hidden;
     position: absolute;
     top: 0;
 }
 
 .lexcodeeditor .codetabsarea {
-    height: calc(100% - 64px) !important;
+    height: calc(100% - 80px) !important;
     background-color: light-dark(var(--global-color-tertiary), var(--global-medium-background));
     overflow: scroll;
 }
@@ -4980,7 +5055,6 @@ ul.lexassetscontent {
     -moz-osx-font-smoothing: grayscale;
     font-feature-settings: "ss04", "ss05";
     font-size: var(--code-editor-font-size);
-    /* padding-right: 6px; */
     position: relative;
 }
 
@@ -5117,7 +5191,7 @@ ul.lexassetscontent {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
-    margin-top: 26px;
+    margin-top: 31px;
     z-index: 1 !important;
     right: 0px;
     pointer-events: none;
@@ -5184,7 +5258,7 @@ ul.lexassetscontent {
 
 .lexcodeeditor .searchbox {
     background-color: var(--global-color-secondary);
-    width: 256px;
+    /* width: 256px; */
     position: absolute;
     right: 6px;
     top: 26px;
@@ -5193,8 +5267,9 @@ ul.lexassetscontent {
     border: 1px solid var(--global-color-tertiary);
     box-shadow: 0 0px 4px #101010;
     overflow-y: scroll;
-    transform: translateY(-72px);
-    transition: transform 0.2s ease-in;
+    transform: translateY(-96px);
+    opacity: 0;
+    transition: transform 0.2s ease-in, opacity 0.2s ease-in;
 }
 
 .lexcodeeditor .searchbox.gotoline {
@@ -5203,6 +5278,7 @@ ul.lexassetscontent {
 
 .lexcodeeditor .searchbox.opened {
     transform: translateY(0px);
+    opacity: 1;
 }
 
 .lexcodeeditor .searchbox .lexpanel span {
@@ -5276,6 +5352,10 @@ ul.lexassetscontent {
     border: 2px solid var(--global-color-primary);
 }
 
+.lexcodesnippet .lexareatabs.row {
+    border-radius: 0;
+}
+
 .lexcodesnippet .lexwindowbuttons {
     width: 100px;
     padding-inline: 16px;