lexgui 0.5.1 → 0.5.2

package/build/components/codeeditor.js

@@ -1536,8 +1536,8 @@ class CodeEditor {
 
             panel.sameLine();
             panel.addLabel( this.code.title, { float: 'right', signal: "@tab-name" });
-            panel.addLabel( "Ln " + 1, { maxWidth: "48px", signal: "@cursor-line" });
-            panel.addLabel( "Col " + 1, { maxWidth: "48px", signal: "@cursor-pos" });
+            panel.addLabel( "Ln " + 1, { xmaxWidth: "48px", signal: "@cursor-line" });
+            panel.addLabel( "Col " + 1, { xmaxWidth: "48px", signal: "@cursor-pos" });
             panel.addButton( null, "Spaces: " + this.tabSpaces, ( value, event ) => {
                 LX.addContextMenu( "Spaces", event, m => {
                     const options = [ 2, 4, 8 ];
@@ -1548,7 +1548,7 @@ class CodeEditor {
                             this._updateDataInfoPanel( "@tab-spaces", "Spaces: " + this.tabSpaces );
                         } );
                 });
-            }, { width: "10%", nameWidth: "15%", signal: "@tab-spaces" });
+            }, { nameWidth: "15%", signal: "@tab-spaces" });
             panel.addButton( "<b>{ }</b>", this.highlight, ( value, event ) => {
                 LX.addContextMenu( "Language", event, m => {
                     for( const lang of Object.keys( this.languages ) )
@@ -1558,7 +1558,7 @@ class CodeEditor {
                         } );
                     }
                 });
-            }, { width: "17.5%", nameWidth: "15%", signal: "@highlight" });
+            }, { nameWidth: "15%", signal: "@highlight" });
             panel.endLine();
 
             return panel;

package/build/components/nodegraph.js

@@ -1965,7 +1965,7 @@ class GraphEditor {
         for( let node of nodesOutsideViewport )
         {
             let dom = this._getNodeDOMElement( node.id );
-            dom.classList.toggle( 'hiddenOpacity', true );
+            dom.classList.toggle( 'hidden-opacity', true );
         }
     }
 
@@ -2397,10 +2397,10 @@ class GraphEditor {
             if( graph_bb.inside( node_bb, false ) )
             {
                 // Show if node in viewport..
-                dom.classList.toggle( 'hiddenOpacity', false );
+                dom.classList.toggle( 'hidden-opacity', false );
 
                 // And hide content if scale is very small..
-                dom.childNodes[ 1 ].classList.toggle( 'hiddenOpacity', this.currentGraph.scale < 0.5 );
+                dom.childNodes[ 1 ].classList.toggle( 'hidden-opacity', this.currentGraph.scale < 0.5 );
 
                 continue;
             }

package/build/components/timeline.js

@@ -255,7 +255,7 @@ class Timeline {
             }, { title: "Settings" })
         }
 
-        header.endLine();
+        header.endLine( "space-around" );
     }
 
     /**

package/build/lexgui.css

@@ -293,11 +293,17 @@ body.noevents * {
     top: 0;
 }
 
-.hiddenOpacity {
+.hidden-opacity {
     opacity: 0 !important;
     pointer-events: none;
 }
 
+.ellipsis-overflow {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
 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); }
@@ -347,6 +353,8 @@ svg.xxl { width: var(--svg-size-xxl); height: var(--svg-size-xxl); }
     line-height: inherit !important;
     color: var(--global-text-secondary);
     align-content: center;
+    border-radius: 4px;
+    transition: all 0.15s linear;
 }
 
 .lexicon:hover {
@@ -358,6 +366,10 @@ svg.xxl { width: var(--svg-size-xxl); height: var(--svg-size-xxl); }
     transform: scale(0.99);
 }
 
+.lexicon.triggered {
+    background-color: var(--global-button-color);
+}
+
 svg, svg path {
     width: 1rem;
     height: 1rem;
@@ -1247,11 +1259,6 @@ a svg, svg path {
     margin-right: 8px;
 }
 
-.lexwidget.micro button {
-    padding-left: 4px;
-    padding-right: 4px;
-}
-
 .lexwidget.small {
     width: 5% !important;
 }
@@ -1263,7 +1270,6 @@ a svg, svg path {
 .lexinlinewidgets {
     display: flex;
     gap: 0.1rem;
-    justify-content: space-around;
 }
 
 .lexwidgetseparator div {
@@ -1313,7 +1319,8 @@ a svg, svg path {
 .lexwidget .lextext {
     border-radius: 6px;
     position: relative;
-    transition: 0.2s linear;
+    transition: border 0.2s linear;
+    border: 1px solid transparent;
 }
 
 .lexwidget .lextext.formlabel {
@@ -1325,10 +1332,24 @@ a svg, svg path {
     background-color: var(--global-button-color);
 }
 
+.lexwidget .lextext.outline {
+    background: var(--global-color-primary);
+    border: 1px solid #7a797c4f;
+}
+
+.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 {
+    background: none;
+}
+
 .lexwidget .lextext input {
     padding: 5px;
 }
@@ -1410,7 +1431,7 @@ a svg, svg path {
 }
 
 :root[data-theme="light"] .lexwidget .lextext {
-    border: 1px solid var(--global-color-tertiary) !important;
+    border: 1px solid var(--global-color-tertiary);
 }
 
 :root[data-theme="light"] .lexbranch .lexseparator {
@@ -1507,7 +1528,8 @@ a svg, svg path {
 .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.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.left {
     text-align: left;
@@ -1516,6 +1538,11 @@ a svg, svg path {
 
 .lexbutton span {
     align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    place-content: center;
+    pointer-events: none;
+    gap: 0.4rem;
 }
 
 .lexbutton span:has(.lexbadge) {
@@ -1540,6 +1567,10 @@ a svg, svg path {
     pointer-events: none;
 }
 
+.lexbutton svg {
+    pointer-events: none;
+}
+
 .lexbutton.array span {
     display: inline-flex;
 }
@@ -1796,6 +1827,7 @@ dialog .lexselect .lexselectoptions {
     width: 1.5em;
     height: 1.5em;
     padding: 0.12rem;
+    padding-left: 0.13rem;
     display: inline-block;
     background-color: var(--global-color-primary);
     color: var(--checkbox-fg-color);
@@ -1855,10 +1887,11 @@ dialog .lexselect .lexselectoptions {
 }
 
 .lexcheckboxsubmenu {
-    width: 100%;
+    width: calc(100% - 16px);
     padding: 4px;
     padding-inline: 8px;
     color: var(--global-text-secondary);
+    grid-column: span 2;
 }
 
 .lexcheckboxsubmenu .lexwidget {
@@ -2010,10 +2043,12 @@ dialog .lexselect .lexselectoptions {
 }
 
 .lextogglesubmenu {
-    width: 100%;
+    width: calc(100% - 16px);
     padding: 6px;
+    padding-inline: 8px;
     color: var(--global-text-secondary);
     margin-top: -1px;
+    grid-column: span 2;
 }
 
 /* Radio Group Widget */
@@ -2450,13 +2485,16 @@ input[type=number] {
 }
 
 .lexwidget .lexpad .lexinnerpad .lexpadthumb {
-    background-color: var(--global-selected-light);
+    background-color: var(--global-selected);
     width: 10%;
     height: 10%;
     border-radius: 2px;
     transform: translate(0px, 0px);
 }
 
+.lexwidget .lexpad .lexinnerpad .lexpadthumb.active {
+    background-color: var(--global-selected-light);
+}
 
 /* Tabs Widget */
 
@@ -2531,8 +2569,6 @@ input[type=number] {
     width: 100%;
     min-height: 12px;
     margin: 0 auto;
-    margin-top: 6px;
-    margin-bottom: -8px;
     color: var(--global-text-secondary);
     font-weight: 600;
     font-size: var(--global-font-size);
@@ -3045,6 +3081,10 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     user-select: none;
 }
 
+.lexmenubar .lexmenubutton:last-child {
+    margin-right: 8px;
+}
+
 .lexmenubar .lexmenubutton a {
     margin-left: 0px !important;
 }
@@ -3681,7 +3721,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 
 .lexareatabs .lexareatab.thumb {
     position: absolute;
-    background: light-dark(var(--global-selected-light), var(--global-selected));
+    background: var(--global-selected);
     z-index: 0;
     transition: linear transform 0.15s;
 }
@@ -3855,10 +3895,11 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     cursor: pointer;
     border-radius: 4px;
     font-size: var(--global-font-size-sm);
+    transition: background-color 0.15s linear;
 }
 
 .lexlayer.selected {
-    --layer-color: light-dark(var(--global-selected-light), var(--global-selected));
+    --layer-color: var(--global-selected);
     color: #fff;
 }
 
@@ -3898,6 +3939,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
+    transition: background-color 0.15s linear;
 }
 
 .lexlistitem a {
@@ -3916,7 +3958,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 
 .lexlistitem.selected {
     color: #fff;
-    background-color: light-dark(var(--global-selected-light), var(--global-selected));
+    background-color: var(--global-selected);
 }
 
 /* Array Widget */
@@ -3927,6 +3969,9 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 .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;
 }
 
 .lexarray .lexwidget {
@@ -3940,6 +3985,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     color: var(--global-text-secondary);
     font-size: var(--global-font-size);
     margin-top: -1px;
+    grid-column: span 2;
 }
 
 .lexarrayitems .small .lexbutton {
@@ -3991,7 +4037,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 
 .lexcounter {
     display: flex;
-    margin: 0 auto;
+    place-content: center;
 }
 
 .lexcounterbox {
@@ -4063,10 +4109,18 @@ tr.dragging {
     pointer-events: none;
 }
 
+th, td {
+    padding: 6px;
+    padding-inline: 12px;
+    text-align: left;
+    align-content: center;
+}
+
 th {
     --th-color: var(--global-text-secondary);
     color: var(--th-color);
     font-size: var(--global-font-size);
+    padding-block: 2px;
     cursor: pointer;
     transition: all 0.1s linear;
     background-color: var(--global-color-tertiary);
@@ -4080,6 +4134,15 @@ th a {
     pointer-events: none;
 }
 
+th span {
+    border-radius: 6px;
+    padding: 0.4rem;
+}
+
+th span:hover {
+    background-color: var(--global-color-secondary);
+}
+
 th a, td a {
     font-size: var(--global-font-size-xs) !important;
     display: flex;
@@ -4095,13 +4158,6 @@ th:hover {
     color: color-mix(in srgb, var(--th-color), #000 10%);
 }
 
-th, td {
-    padding: 6px;
-    padding-inline: 12px;
-    text-align: left;
-    align-content: center;
-}
-
 th.centered, td.centered {
     text-align: center;
 }
@@ -4119,6 +4175,11 @@ th .lexcheckbox, td .lexcheckbox {
     height: 1.25em;
 }
 
+th a {
+    display: inline-block;
+    transform: translate(6px, 3px);
+}
+
 td {
     justify-items: center;
     border-top: 2px solid;
@@ -4137,11 +4198,12 @@ thead:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td
 
 .lextable .lextablebuttons {
     display: inline-flex;
-    gap: 0.8rem;
+    gap: 0.2rem;
 }
 
 .lextable .lextablebuttons .lexicon {
     font-size: var(--global-font-size-sm) !important;
+    padding: 0.2rem;
 }
 
 :root[data-theme="light"] .lextable table {
@@ -4156,6 +4218,7 @@ thead:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td
     color: var(--global-text-secondary);
     font-size: var(--global-font-size);
     margin-top: -1px;
+    grid-column: span 2;
 }
 
 .lexcustomcontainer span {
@@ -4394,14 +4457,10 @@ thead:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td
 
 .lextimeline .lexwidget:has(.lexbutton:not(.array)) {
     padding: 1px;
-    /* padding-left: 10px;
-  padding-right: 10px; */
 }
 
 .lextimeline .lexinlinewidgets {
     padding-right: 10px;
-    /* background-color: var(--global-color-secondary); */
-    /* height: 100%; */
 }
 
 .lextimeline .lexbutton:hover {
@@ -4922,7 +4981,7 @@ ul.lexassetscontent {
     position: absolute;
     z-index: 3;
     bottom: 0px;
-    margin-left: 0px;
+    justify-items: end;
 }
 
 .lexcodegutter {