lexgui 0.1.16 → 0.1.17

package/build/lexgui.css

@@ -2729,41 +2729,31 @@ ul.lexassetscontent {
 }
 
 .lexcodegutter {
-  width: 32px;
-  height: calc(100% - 70px);
+  width: 48px;
+  height: calc(100% - 62px);
   background-color: var(--global-branch-darker);
-  margin-top: 24px;
-  text-align: center;
+  margin-top: 26px;
   overflow: hidden;
-  -webkit-user-select: none; /* Safari 3.1+ */
-  -moz-user-select: none; /* Firefox 2+ */
-  -ms-user-select: none; /* IE 10+ */
-  user-select: none; /* Standard syntax */
-  font-family: 'Inconsolata', monospace;
-}
-
-.lexcodegutter span {
-  width: 100%;
-  display: block;
-  height: 16px;
-  margin-top: 4px;
-  font-size: 13px;
-  color: #888;
-  text-align-last: auto;
-  line-height: 22px;
+  position: absolute;
 }
 
 .lexcodeeditor .codetabsarea {
+  height: calc( 100% - 60px ) !important;
   background-color: var(--global-branch-darker);
+  overflow: scroll;
+}
+
+.lexcodeeditor .codetabsarea::-webkit-scrollbar {
+  display: none;
 }
 
 .lexcodeeditor .codetabsarea.with-vscrollbar {
   width: calc( 100% - 10px ) !important;
 }
 
-.lexcodeeditor .codetabsarea.with-hscrollbar {
-  height: calc( 100% - 40px ) !important;
-}
+/* .lexcodeeditor .codetabsarea.with-hscrollbar {
+  height: calc( 100% - 72px ) !important;
+} */
 
 .lexcodeeditor .codetabsarea.dragging {
   background-color: var(--global-color-secondary);
@@ -2772,8 +2762,8 @@ ul.lexassetscontent {
 .lexcodeeditor .code {
   cursor: text;
   font-size: 16px;
-  overflow: hidden;
   padding-right: 6px;
+  position: relative;
 }
 
 .codechar {
@@ -2790,7 +2780,6 @@ ul.lexassetscontent {
   -webkit-text-size-adjust: 100%;
   cursor: text;
   box-sizing: border-box;
-  padding: 0 4px;
   border-radius: 0;
   border-width: 0;
   background: transparent;
@@ -2805,9 +2794,12 @@ ul.lexassetscontent {
   position: relative;
   overflow: visible;
   -webkit-tap-highlight-color: transparent;
-  z-index: 0 !important;
-  pointer-events: none;
   height: 16px;
+  pointer-events: none;
+}
+
+.lexcodeeditor pre.active-line {
+  background-color: var(--global-blur-background);
 }
 
 .lexcodeeditor span {
@@ -2822,7 +2814,22 @@ ul.lexassetscontent {
   box-sizing: border-box;
   display: inline-block;
   height: 16px;
-  vertical-align: top;
+}
+
+pre .line-gutter {
+  color: #888;
+  width: 48px;
+  height: 16px;
+  font-size: 14px;
+  line-height: 22px;
+  text-align: center;
+  -webkit-user-select: none; /* Safari 3.1+ */
+  -moz-user-select: none; /* Firefox 2+ */
+  -ms-user-select: none; /* IE 10+ */
+  user-select: none; /* Standard syntax */
+  position: sticky;
+  left: 0;
+  z-index: 1;
 }
 
 .lexcodeeditor .cursors, .lexcodeeditor .selections {
@@ -2864,31 +2871,23 @@ ul.lexassetscontent {
 }
 
 .lexcodescrollbar {
+  width: 10px;
+  height: calc(100% - 62px);
   position: absolute;
-  background-color: var(--global-branch-darker);
-  filter: brightness(0.9);
+  background-color: transparent;
   box-sizing: border-box;
   margin: 0;
   padding: 0;
   margin-top: 26px;
   z-index: 1 !important;
   right: 0px;
-  width: 10px;
-  height: calc(100% - 62px);
 }
 
 .lexcodescrollbar.horizontal {
-  position: absolute;
-  background-color: var(--global-branch-darker);
-  filter: brightness(0.9);
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-  z-index: 1 !important;
+  width: calc( 100% - 58px );
+  height: 10px;
   bottom: 36px;
   right: 10px;
-  width: calc( 100% - 40px );
-  height: 10px;
 }
 
 .lexcodescrollbar.scrollbar-unused {
@@ -2896,7 +2895,7 @@ ul.lexassetscontent {
 }
 
 .lexcodescrollbar div { /* thumb */
-  background-color: #bbbbbb57 !important;
+  background-color: #bbbbbb3d !important;
   box-sizing: border-box;
   margin: 0;
   padding: 0;

package/build/lexgui.js

@@ -12,7 +12,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
     */
 
     var LX = global.LX = {
-        version: "0.1.16",
+        version: "0.1.17",
         ready: false,
         components: [], // specific pre-build components
         signals: {} // events and triggers

package/build/lexgui.module.js

@@ -8,7 +8,7 @@
 */
 
 var LX = {
-    version: "0.1.16",
+    version: "0.1.17",
     ready: false,
     components: [], // specific pre-build components
     signals: {} // events and triggers

package/examples/code_editor.html

@@ -24,7 +24,7 @@
         let area = LX.init();
 
         // split main area
-        var [leftArea, rightArea] = area.split({ sizes:["55%","45%"] });
+        var [leftArea, rightArea] = area.split({ sizes:["40%","60%"] });
 
         // add canvas to leftArea
         var canvas = document.createElement('canvas');

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "lexgui",
-    "version": "0.1.16",
+    "version": "0.1.17",
     "description": "JS library to create web graphical user interfaces",
     "type": "module",
     "main": "./build/lexgui.js",