lexgui 0.1.27 → 0.1.29

package/build/lexgui.css

@@ -1,26 +1,33 @@
-@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;500;600;700;800;900&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
 
 :root {
-  --global-font: 'Noto Sans', sans-serif; /*'Rubik', sans-serif; */
+  --global-font: "Figtree", sans-serif;
+  --global-title-font: "Poppins", sans-serif;
+  --global-font-size: 12px;
+  --global-color-primary: #212121;
+  --global-color-secondary: #2e2e2e;
+  --global-color-terciary: #444;
   --global-selected: #3e57e4;
   --global-selected-light: #7b8ae2;
-  --global-selected-dark: #344bccb7;
-  --global-color-primary: #232323;
-  --global-color-secondary: #343434;
-  --global-color-terciary: #444;
+  --global-selected-dark: #2f42ad;
 	--global-branch-darker: #252525;
 	--branch-title-background: #2e3338;
   --branch-title-inactive-background: #42484e;
-  --global-button-color: #4e4e4e;
+  --global-button-color: #3e3e3e;
+  --global-button-color-hovered: #444;
   --global-text: #d4d4dce6;
   --global-text-primary: #f4f4ffe6;
-  --global-text-secondary: #c6c6cfd9;
-  --global-dark-background: #14161a;
-  --global-blur-background: #28292ba9;
+  --global-text-secondary: #cacad4ea;
+  --global-text-terciary: #727272b9;
+  --global-dark-background: #121212;
+  --global-blur-background: #28292bd5;
+  --global-color-transparent: #7b8ae200;
   --transition-time: 1000;
   --code-editor-font-size: 14px;
   --code-editor-row-height: 20px;
+  --graphnode-background: 17, 17, 17;
 } 
 
 /* Some global colors */
@@ -56,7 +63,7 @@ html, body {
   margin: 0;
   padding: 0;
   font-family: var(--global-font);
-  letter-spacing: -0.02em;
+  letter-spacing: -0.01em;
   font-weight: 400;
 }
 
@@ -72,6 +79,10 @@ body.nocursor * {
   cursor: none !important;
 }
 
+body.noevents * {
+  pointer-events: none !important;
+}
+
 .grabbing {
   cursor: move;
 }
@@ -163,7 +174,7 @@ body.nocursor * {
   border: none;
   font-family: var(--global-font);
   line-height: 23px;
-  font-size: 14px;
+  font-size: 13px;
   font-weight: 500;
 }
 
@@ -181,7 +192,7 @@ body.nocursor * {
   padding: 10px;
   padding-left: 50px;
   color: var(--global-text-primary);
-  font-size: 14px;
+  font-size: 13px;
   cursor: pointer;
 }
 
@@ -210,7 +221,7 @@ body.nocursor * {
 
 #global_search .searchitembox .searchitem .lang-ext {
   color: #676e75;
-  font-size: 12px;
+  font-size: var(--global-font-size);
 }
 
 #global_search .searchitembox .searchitem.last {
@@ -237,15 +248,16 @@ body.nocursor * {
 }
 
 .lexdialogtitle {
-  border-top-left-radius: 8px;
-  border-top-right-radius: 8px;
+  font-family: var(--global-title-font);
+  font-weight: 700;
   font-size: 18px;
-  font-weight: bold;
   color: #d9d9e3;
-  text-shadow: 0px 1px 4px #000;
+  text-shadow: 0px 1px 6px #22222283;
   width: calc( 100% - 24px);
   padding: 8px;
   padding-left: 16px;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
   display: flex;
   justify-content: space-between;
   -webkit-user-select: none; /* Safari 3.1+ */
@@ -308,7 +320,7 @@ body.nocursor * {
 }
 
 .lexdialog.pocket.dockable {
-  transition: ease-out left 0.2s, ease-out top 0.2s;
+  transition: ease-out left 0.2s, ease-out top 0.2s, ease-in transform 0.2s;
 }
 
 .lexdialog.pocket .lexdialogtitle {
@@ -446,12 +458,13 @@ body.nocursor * {
 }
 
 .lexbranchtitle {
-  font-size: 14px;
-  font-weight: bold;
+  font-family: var(--global-title-font);
+  font-weight: 700;
+  font-size: 15px;
   color: var(--global-text);
   background-color: var(--global-color-secondary);
+  text-shadow: 0px 1px 6px #1111117c;
   padding: 10px;
-  text-shadow: 0px 1px 2px #000;
   border-top-left-radius: 8px;
   border-top-right-radius: 8px;
   cursor: pointer;
@@ -504,7 +517,7 @@ body.nocursor * {
 }
 
 .lexbranch .branchicon {
-  font-size: 12px;
+  font-size: var(--global-font-size);
 }
 
 .lexbranch.first .lexbranchtitle {
@@ -532,12 +545,16 @@ body.nocursor * {
   display: flex;
   align-items: center;
   padding: 5px;
-  font-size: 13px;
+  font-size: var(--global-font-size);
   color: #DCDCDC;
   line-height: 2;
   overflow: hidden;
 }
 
+.lexwidget * {
+  font-size: var(--global-font-size);
+}
+
 .lexinlinewidgets .lexwidget {
   padding-left: 10px;
   padding-right: 10px;
@@ -614,19 +631,35 @@ body.nocursor * {
   background: none;
   padding: 3px;
   color: var(--global-text-primary);
-  font-size: 13px;
   font-weight: 500;
   outline: none;
-  border: none;
-  border-bottom: 1px solid #bbbbbb47;
+  border-radius: 6px;
+  border: 2px solid var(--global-color-transparent);
+  transition: border-color 0.1s linear;
 }
 
-.lexwidget .lextext, .lexwidget .lexnumber {
-  padding-left: 4px;
+.lexwidget .lextext {
+  border-radius: 6px;
+  position: relative;
+  transition: 0.1s linear;
+}
+
+.lexwidget .lextext:not(:has(div)) {
+  background-color: var(--global-button-color);
+}
+
+.lexwidget .lextext:not(:has(div)):hover {
+  background-color: var(--global-button-color-hovered);
+}
+
+.lexwidget .lextext input {
+  padding: 5px;
 }
 
 .lexwidget .lextext div {
   color: #b2b2b5d6;
+  padding: 2px;
+  padding-left: 6px;
 }
 
 .lexwidget .lextext.lexwarning div {
@@ -640,36 +673,34 @@ body.nocursor * {
 }
 
 .lexwidget .lextext input:focus {
-  border-bottom: 2px solid var(--global-selected);
+  border: 2px solid var(--global-selected);
 }
 
 .lexwidget .inputicon {
-  border-bottom: 1px solid #bbbbbb47;
-  padding: 4px;
-  font-size: 11px;
-  margin-top: 2px;
-}
-
-.lexwidget:has(input:focus) .inputicon {
-  border-bottom: 2px solid var(--global-selected);
+  padding: 6px;
+  font-size: 10px;
+  margin-top: 4px;
 }
 
 .lexwidget textarea {
   word-break: break-word;
   font-family: var(--global-font);
-  font-size: 13px;
   background: none;
-  padding: 3px;
+  padding: 5px;
   color: var(--global-text-primary);
   font-weight: 600;
-  outline:none;
-  border: none;
-  border-bottom: 1px solid #bbbbbb47;
+  outline: none;
+  border-radius: 6px;
+  border: 2px solid var(--global-color-transparent);
+  transition: 0.1s linear;
 }
 
 .lexwidget textarea:disabled {
   resize: none;
-  border-bottom: none;
+}
+
+.lexwidget textarea:focus {
+  border: 2px solid var(--global-selected);
 }
 
 .lexwidget input.colorinput {
@@ -699,7 +730,6 @@ body.nocursor * {
 }
 
 .lexfilter input {
-  font-size: 12px;
   font-family: var(--global-font);
 }
 
@@ -707,8 +737,8 @@ body.nocursor * {
   width: fit-content;
   width: -moz-fit-content;
   color: #ddd;
-  font-weight: 600;
-  font-size: 14px;
+  font-weight: 800;
+  font-size: 13px;
   margin: 12px;
   padding: 2px;
   padding-left: 12px;
@@ -716,7 +746,7 @@ body.nocursor * {
   display: grid;
   align-content: center;
   border-radius: 12px;
-  background-color: var(--global-color-secondary);
+  background-color: var(--global-button-color);
   display: flex;
   -webkit-user-select: none; /* Safari 3.1+ */
   -moz-user-select: none; /* Firefox 2+ */
@@ -731,7 +761,6 @@ body.nocursor * {
 }
 
 .lextitle a {
-  font-size: 12px;
   margin-top: 0.3em;
   margin-right: 0.7em;
   color: var(--global-selected-light);
@@ -765,8 +794,8 @@ body.nocursor * {
   white-space: nowrap;
   overflow: hidden;
   cursor: pointer;
-  font-size: 12px;
   font-family: var(--global-font);
+  transition: 0.1s linear;
 }
 
 .lexbutton.accept {
@@ -792,7 +821,7 @@ body.nocursor * {
 }
 
 .lexbutton:hover {
-  background-color: #ffffff30;
+  background-color: var(--global-button-color-hovered);
   color: var(--global-text-primary);
 }
 
@@ -914,36 +943,24 @@ body.nocursor * {
   position: fixed;
   list-style: none;
 	background-color: var(--global-blur-background);
-  -webkit-backdrop-filter: blur(12px);
-  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
   padding: 4px 0px;
   z-index: 10;
   margin-top: 5px;
   width: 100%;
-  box-shadow: 0 2px 10px black;
+  box-shadow: 0 0px 12px rgba(0, 0, 0, 0.788);
   border-bottom-left-radius: 10px;
   border-bottom-right-radius: 10px;
-  height: -webkit-fill-available;
-  max-height: 400px;
-  /* overflow: scroll; */
-}
-
-.lexdropdown ul::-webkit-scrollbar {
-  display: none;
-}
-
-.lexdropdown ul span{
-  display: block;
-  overflow-y: scroll;
+  max-height: -webkit-fill-available;
+  overflow-y: auto;
   overflow-x: hidden;
-  height: 100%;
 }
 
 .lexdropdown .lexdropdownitem {
   width: 100%;
   cursor: pointer;
   color: rgba(216, 218, 230, 0.826);
-  font-size: 13px;
   height: 20px;
   line-height: 22px;
   align-content: center;
@@ -1020,8 +1037,8 @@ input[type=checkbox]:checked:after {
 }
 
 .lexcheckbox {
-  width: 1.1em;
-  height: 1.1em;
+  width: 1.25em;
+  height: 1.25em;
   display: inline-block;
   background-color: #1f1f1f;
   color: #fff;
@@ -1076,7 +1093,6 @@ input[type=checkbox]:checked:after {
   width: 100%;
   padding: 6px;
   color: var(--global-text-secondary);
-  font-size: 12px;
   margin-top: -1px;
 }
 
@@ -1137,9 +1153,18 @@ input[type=checkbox]:checked:after {
   position: relative;
   width: 100%;
   border-radius: 4px;
-  border: 1px solid #908fa356;
+  border: 2px solid var(--global-color-transparent);
   margin-right: 2px;
-  background: var(--global-color-secondary);
+  background: var(--global-button-color);
+  transition: 0.1s linear;
+}
+
+.lexvector a.fa-lock {
+  min-width: 12px;
+}
+
+.lexvector .vecbox:hover{
+  background: var(--global-button-color-hovered);
 }
 
 .lexwidget .numberbox .drag-icon, .lexwidget .vecbox .drag-icon {
@@ -1153,7 +1178,7 @@ input[type=checkbox]:checked:after {
 }
 
 .lexvector .vecbox:has(input:focus) {
-  outline: 2px solid var(--global-selected);
+  border: 2px solid var(--global-selected);
 }
 
 .lexvector .vecbox span {
@@ -1171,15 +1196,15 @@ input[type=checkbox]:checked:after {
 }
 
 .lexvector .vecbox span.x {
-  background-color:#fb8080;
+  background-color:#eb6767;
 }
 
 .lexvector .vecbox span.y {
-  background-color:#8eef97;
+  background-color:#72e27d;
 }
 
 .lexvector .vecbox span.z {
-  background-color:#8da5f3;
+  background-color:#7490eb;
 }
 
 .lexvector .vecbox span.w {
@@ -1202,7 +1227,6 @@ input[type=number] {
 }
 
 .lexvector .vecbox .vecinput, .numberbox .vecinput {
-  font-size: 12px;
   margin-left: 2px;
   border: none;
   width: 100%;
@@ -1212,30 +1236,24 @@ input[type=number] {
   color: #c1c1dbef;
 }
 
-/* .lexvector .vecbox .vecinput.v2 {
-  width: 66%;
-}
-
-.lexvector .vecbox .vecinput.v3 {
-  width: 50%;
-}
-
-.lexvector .vecbox .vecinput.v4 {
-  width: 33%;
-} */
-
 /* Number Widget */
 
 .lexwidget .numberbox {
   display: grid;
-  border-radius: 4px;
-  border: 1px solid #908fa356;
+  background-color: var(--global-button-color);
+  border: 2px solid var(--global-color-transparent);
+  border-radius: 6px;
   margin-right: 2px;
   position: relative;
+  transition: 0.1s linear;
+}
+
+.lexwidget .numberbox:hover {
+  background-color: var(--global-button-color-hovered);
 }
 
 .lexwidget .numberbox:has(input:focus) {
-  outline: 2px solid var(--global-selected-light);
+  border: 2px solid var(--global-selected);
 }
 
 .lexinputslider {
@@ -1272,11 +1290,13 @@ input[type="range"] {
 .lexinputslider::-webkit-slider-thumb {
   appearance: none;
   -webkit-appearance: none;
-  margin-top: -4px;
-  width: 8px;
-  height: 8px;
+  margin-top: -6px;
+  width: 12px;
+  height: 12px;
+  border: 1px solid #c9c7de;
   border-radius: 6px;
-  background: #c9c7de;
+  background: var(--global-selected-dark);
+  box-shadow: 0px 0px 6px #111;
   cursor: pointer;
 }
 
@@ -1370,7 +1390,7 @@ input[type="range"] {
   margin-bottom: -8px;
   color: var(--global-text-secondary);
   font-weight: 600;
-  font-size: 13px;
+  font-size: var(--global-font-size);
 }
 
 .lextree .lextreetools {
@@ -1384,6 +1404,10 @@ input[type="range"] {
   margin-top: 4px;
 }
 
+.lextree .lextreetools input {
+  font-size: var(--global-font-size);
+}
+
 .lextree .lextreetools.notitle {
   padding-top: 14px;
   border-top-left-radius: 8px;
@@ -1394,7 +1418,7 @@ input[type="range"] {
   margin-right: 8px;
 }
 
-.lextree span {
+.lextree span { /* Tree title */
   padding: 8px;
   display: block;
   border-top-left-radius: 8px;
@@ -1404,24 +1428,24 @@ input[type="range"] {
   -moz-user-select: none; /* Firefox 2+ */
   -ms-user-select: none; /* IE 10+ */
   user-select: none; /* Standard syntax */
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 800;
 }
 
 .lextree ul {
   padding-bottom: 16px;
   padding-inline-start: 0px;
-  font-size: 14px;
 }
 
 .lextree input {
   background: none;
   color: var(--global-text-primary);
-  outline:none;
+  outline: none;
   border: none;
+  font-size: var(--global-font-size);
   font-family: var(--global-font);
   line-height: 23px;
-  font-size: 13px;
+  margin-left: -2px;
 }
 
 .lextree .lextreeitem {
@@ -1429,7 +1453,6 @@ input[type="range"] {
   align-items: center;
   margin-bottom: 3px;
   line-height: 25px;
-  font-size: 13px;
   cursor: pointer;
   outline: none;
   border-radius: 6px;
@@ -1496,10 +1519,6 @@ input[type="range"] {
   vertical-align: 1px;
 }
 
-/* .lextree .lextreeitem.parent a.caret {
-  margin-right: 6px;
-} */
-
 .lextree .lextreeitem .itemicon {
   font-size: 10px !important;
   float: right;
@@ -1584,19 +1603,18 @@ meter::-webkit-meter-even-less-good-value {
   display: flex;
   height: 100%;
   color: var(--global-text);
-  font-size: 14px;
+  font-size: 13px;
   font-weight: 500;
 }
 
 .lexmenubar .lexmenuentry {
-  font-size: 13px;
   min-height: 48px;
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
-  padding-left: 10px;
-  padding-right: 10px;
+  padding-left: 4px;
+  padding-right: 4px;
   cursor: pointer;
   margin-left: 4px;
   -webkit-user-select: none; /* Safari 3.1+ */
@@ -1605,8 +1623,14 @@ meter::-webkit-meter-even-less-good-value {
   user-select: none; /* Standard syntax */
 }
 
-.lexmenubar .lexmenuentry:hover{
+.lexmenubar .lexmenuentry span {
+  padding: 4px 8px;
+  border-radius: 6px;
+}
+
+.lexmenubar .lexmenuentry:hover span, .lexmenubar .lexmenuentry.selected span {
   color: var(--global-text-primary);
+  background-color: var(--global-color-secondary);
 }
 
 .lexmenubar .lexmenuentry:active{
@@ -1618,8 +1642,23 @@ meter::-webkit-meter-even-less-good-value {
   position: absolute;
   padding-right: 14px;
   z-index: 1001;
-  border-bottom-right-radius: 6px;
-  border-bottom-left-radius: 6px;
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.63) !important;
+  background-color: var(--global-blur-background);
+  border: 1px solid #91909036;
+  border-radius: 6px;
+}
+
+.lexcontextmenu:before {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  border-radius: 6px;
+  -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
+  z-index:-1;
 }
 
 .lexcontextmenu:focus {
@@ -1627,9 +1666,8 @@ meter::-webkit-meter-even-less-good-value {
 }
 
 .lexcontextmenu .lexcontextmenuentry {
-  font-size: 12px;
+  font-size: var(--global-font-size);
   width: 100%;
-  background-color: #343434c2;
   color: #d5d7dbee;
   padding: 4px;
   padding-left: 14px;
@@ -1651,21 +1689,14 @@ meter::-webkit-meter-even-less-good-value {
   position: relative;
 }
 
-.lexcontextmenu .lexcontextmenuentry:before {
-  content:"";
-  position:absolute;
-  width: 100%;
-  height: 100%;
-  top:0;
-  left:0;
-  -webkit-backdrop-filter: blur(16px);
-  backdrop-filter: blur(16px);
-  z-index:-1;
+.lexcontextmenu .lexcontextmenuentry:first-child {
+  border-top-right-radius: 5px;
+  border-top-left-radius: 5px;
 }
 
-.lexcontextmenu .lexcontextmenuentry.last {
-  border-bottom-right-radius: 6px;
-  border-bottom-left-radius: 6px;
+.lexcontextmenu .lexcontextmenuentry:last-child {
+  border-bottom-right-radius: 5px;
+  border-bottom-left-radius: 5px;
 }
 
 .lexcontextmenu .lexcontextmenuentrycontainer {
@@ -1695,12 +1726,11 @@ meter::-webkit-meter-even-less-good-value {
 /* submenu specified arrow  */
 .lexcontextmenu .lexcontextmenuentry a.fa-xs {
   float: right;
-  /* margin-top: -8px; */
   margin-right: 8px;
 }
 
 .lexcontextmenu .lexcontextmenuentry:hover {
-  background-color: var(--global-selected);
+  background-color: var(--global-selected-dark);
   color: #f5f5f5;
 }
 
@@ -1728,10 +1758,10 @@ meter::-webkit-meter-even-less-good-value {
 .lexcontextmenu .lexentryshort {
   font-size: 10px;
   float: right;
-  /* margin-top: -12px; */
+  margin-top: 3px;
   font-weight: bold;
-  color: var(--global-text-secondary);
-  margin-right: 8px;
+  color: var(--global-button-color);
+  margin-right: 12px;
 }
 
 .lexcontextmenu .lexcontextmenuentry:hover .lexentryshort {
@@ -1787,15 +1817,15 @@ meter::-webkit-meter-even-less-good-value {
   z-index: 102;
   position: absolute;
   padding-right: 20px;
-  border-radius: 4px;
+  border-radius: 6px;
   box-shadow: 0 0 8px rgba(0, 0, 0, 0.63) !important;
   background-color: var(--global-blur-background);
   border: 1px solid #91909036;
 }
 
 .lexcontextmenubox:before {
-  content:"";
-  position:absolute;
+  content: "";
+  position: absolute;
   width: 100%;
   height: 100%;
   top:0;
@@ -1803,7 +1833,7 @@ meter::-webkit-meter-even-less-good-value {
   -webkit-backdrop-filter: blur(10px);
   backdrop-filter: blur(10px);
   z-index:-1;
-  border-radius: 4px;
+  border-radius: 6px;
 }
 
 .lexcontextmenubox .lexcontextmenuentry {
@@ -1821,17 +1851,17 @@ meter::-webkit-meter-even-less-good-value {
 }
 
 .lexcontextmenubox .lexcontextmenuentry:first-child {
-  border-top-left-radius: 4px;
-  border-top-right-radius: 4px;
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
 }
 
 .lexcontextmenubox .lexcontextmenuentry:last-child {
-  border-bottom-left-radius: 4px;
-  border-bottom-right-radius: 4px;
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
 }
 
 .lexcontextmenubox .lexcontextmenuentry.cmtitle {
-  background: #020205;
+  background: var(--global-dark-background);
   font-weight: bold;
   cursor: default;
 }
@@ -1847,7 +1877,10 @@ meter::-webkit-meter-even-less-good-value {
 .lexcontextmenubox .lexcontextmenuentry .lexentryname {
   margin-right: 10px;
   margin-top: 2px;
-  font-size: 12px;
+  font-size: var(--global-font-size);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .lexcontextmenubox .lexcontextmenuentry .lexentryname.disabled {
@@ -1890,6 +1923,64 @@ meter::-webkit-meter-even-less-good-value {
   color: #979aa0e3;
 }
 
+/* Side Bar */
+
+.lexsidebar {
+  
+}
+
+.lexsidebar .lexsidebarentry {
+  width: 64px;
+  height: 64px;
+  padding-left: 7.5px;
+  margin-top: -6px;
+}
+
+.lexsidebar .lexsidebarentry:first-child {
+  padding-top: 16px;
+}
+
+.lexsidebar .lexsidebarentry button {
+  width: calc(100% - 16px);
+  height: calc(100% - 16px);
+  background-color: var(--global-button-color);
+  color: var(--global-text);
+  font-size: 18px;
+  border-radius: 10px;
+  border: 0px solid var(--global-color-transparent);
+  transition: border 0.1s ease-in-out;
+}
+
+.lexsidebar .lexsidebarentry button:hover {
+  border: 3px solid var(--global-selected);
+  background-color: var(--global-button-color-hovered);
+}
+
+.lexsidebar .lexsidebarentry button:active {
+  font-size: 17px;
+}
+
+.lexsidebar .lexsidebarentry.selected button {
+  background-color: var(--global-button-color-hovered);
+  border: 4px solid var(--global-selected);
+}
+
+.lexsidebar .lexsidebarfooter {
+  position: absolute;
+  bottom: 0;
+}
+
+.lexsidebar .lexsidebarfooter .lexsidebarentry button {
+  width: calc(100% - 16px);
+  height: calc(100% - 16px);
+  background-color: unset;
+  font-size: 14px;
+}
+
+.lexsidebar .lexsidebarfooter .lexsidebarentry button:active {
+  font-size: 13px;
+}
+
 /* Overlay Buttons */
 
 .lexoverlaybuttons {
@@ -1955,7 +2046,7 @@ meter::-webkit-meter-even-less-good-value {
 
 .lexoverlaybuttons .lexbutton {
   padding: 14px 10px;
-  font-size: 12px;
+  font-size: var(--global-font-size);
   border-radius: 6px;
   justify-content: center;
   background-color: #313132a5;
@@ -1966,7 +2057,7 @@ meter::-webkit-meter-even-less-good-value {
 
 .lexoverlaybuttons .lexbutton a {
   line-height: 19px;
-  font-size: 12px;
+  font-size: var(--global-font-size);
 }
 
 .lexoverlaybuttons .lexbutton img {
@@ -2227,7 +2318,7 @@ meter::-webkit-meter-even-less-good-value {
   width: calc( 100% - 8px );
   cursor: pointer;
   color: rgba(216, 218, 230, 0.826);
-  font-size: 12px;
+  font-size: var(--global-font-size);
   border-radius: 4px;
   padding-left: 4px;
   padding-right: 4px;
@@ -2279,14 +2370,10 @@ meter::-webkit-meter-even-less-good-value {
   width: 100%;
   padding: 6px;
   color: var(--global-text-secondary);
-  font-size: 12px;
+  font-size: var(--global-font-size);
   margin-top: -1px;
 }
 
-.lexarrayitems * {
-  font-size: 11px;
-}
-
 .lexarrayitems .small .lexbutton {
   background: none;
 }
@@ -2319,7 +2406,7 @@ meter::-webkit-meter-even-less-good-value {
   justify-content: center;
   color: var(--global-text);
   display: inherit;
-  font-size: 12px;
+  font-size: var(--global-font-size);
 }
 
 .lextags .lextag:hover {
@@ -2338,7 +2425,7 @@ meter::-webkit-meter-even-less-good-value {
   width: 100%;
   padding: 6px;
   color: var(--global-text-secondary);
-  font-size: 12px;
+  font-size: var(--global-font-size);
   margin-top: -1px;
 }
 
@@ -2407,11 +2494,10 @@ meter::-webkit-meter-even-less-good-value {
 }
 
 .lextimeline .lextree ul {
-  /* background-color: var(--global-dark-background); */
   margin: 0;
   padding-bottom: 0px;
   padding-top: 0px;
-  font-size: 12px;
+  font-size: var(--global-font-size);
 }
 
 .lextimeline .lexsplitbar.vertical {
@@ -2420,15 +2506,6 @@ meter::-webkit-meter-even-less-good-value {
   height: unset;
 }
 
-/* .lextimeline.hidden{
-  animation-name: fadeout;
-  animation-duration: 0.5s;
-} */
-
-/* .lexarea:has(.lexmin) {
-  position: relative;
-} */
-
 .lexmin {
   display: inline-block;
   color: var(--global-selected-light);
@@ -2549,7 +2626,7 @@ meter::-webkit-meter-even-less-good-value {
 
 ul.lexassetscontent {
   -webkit-text-size-adjust: 100%;
-  font-size: 12px;
+  font-size: var(--global-font-size);
   color: #AAA;
   box-sizing: border-box;
   overflow: auto;
@@ -2566,7 +2643,7 @@ ul.lexassetscontent {
 
 .lexassetscontent li {
   -webkit-text-size-adjust: 100%;
-  font-size: 12px;
+  font-size: var(--global-font-size);
   color: #AAA;
   -webkit-user-drag: element;
   user-select: none;
@@ -2641,7 +2718,7 @@ ul.lexassetscontent {
   width: 100%;
   bottom: 0px;
   -webkit-text-size-adjust: 100%;
-  font-size: 12px;
+  font-size: var(--global-font-size);
   color: #BBB;
   cursor: pointer;
   text-align: center;
@@ -2697,7 +2774,7 @@ ul.lexassetscontent {
 .lexassetscontent li img {
   -webkit-text-size-adjust: 100%;
   font-family: 'Arial';
-  font-size: 12px;
+  font-size: var(--global-font-size);
   cursor: pointer;
   text-align: center;
   color: white;
@@ -2833,6 +2910,7 @@ ul.lexassetscontent {
   margin-top: 28px;
   overflow: hidden;
   position: absolute;
+  top: 0;
 }
 
 .lexcodeeditor .codetabsarea {
@@ -2841,6 +2919,10 @@ ul.lexassetscontent {
   overflow: scroll;
 }
 
+.lexcodeeditor .codetabsarea.no-code-info {
+  height: calc( 100% - 28px ) !important;
+}
+
 .lexcodeeditor .codetabsarea::-webkit-scrollbar {
   display: none;
 }
@@ -3184,7 +3266,343 @@ pre .line-gutter {
 
 /* Node Graph */
 
-.lexnodegraph canvas {
+.lexgraph {
+  overflow: hidden;
+  position: relative;
+  outline: none;
+  cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAA4lJREFUWEftl1FIk1EUx/9qOGtNU4wkC1RQEc2hD9P5oigqH1PxIQqhgYI+iHtIE0ZQKoZo6BDniFScsIcgCSEILMPhJBRCh6G+qKSopHy2iVnOudniyDdZY3NTJ/rghcvGuPvO7/zP/557Pz+c8/A75/i4cAAERNPGzTMXyFEBfwAB6+vrqoiIiMcA9gFYzhrEEeAKgKC1tbX6nZ2dh3t7e3UJCQnvAJgBWM8KxBkgWKvV3g8KCnoZFxfHZ1l2fHV1tS4vL+8rgD1OFZ+WxREgAMCN0tLSex0dHR9DQkJ4ra2tkMlkFoPBoGppaWlTqVQGrix/fUXhCEDfQwDcMRqNY9nZ2YKpqSkkJydDoVBYExMTN7a3t5vi4+M1AHZ9VRbnbXgdQOTs7OzbtrY2YV9f32GiUqkU7e3tFpPJNL6ystKckZExyvmDzHri4QxwFUDE2NhYvV6vL5HJZIHOT6ay1NTU2FiW7RoYGFBUVVWtnKYszgAU8KZarS5JSkpqEIlEfFepRUdHo7e3dzclJWVrc3NTERMT8/qkZXEGICOGSSQSYX9//yCfz6et6XYUFxdDrVbTNp1YWlpqT01NHTxuWZwB7Ea8y7LsF4ZhgicnJ90C8Hg8ZGZmQiwWo6GhAQaD4VV4ePgTDoK6qcfh6iw4MOL09PSbzs7O1O7u7v8eEhsbC4lEgtzcXLNYLPa32WyW5eXlaaPR+Hlubm64srJyAsAOAK+2qisAMuItnU73fH5+/lF5efmhEaurq9HY2GhZWFhYWlxcnNRqtd9UKtUsgF8AqEf8BLDF+eHEClDA8J6engcikahJKBReIwnS0tIwMjKyL5fLXyiVSqoLBfrDZWsCQJMyt/cIj/LTAlcKkBFDs7KykoaGhoYDAwPpkIJOp9u1Wq0fcnJyOgFscFlTMGrRdFbQpJ7glfR2OlcAjkbUMQwTWlBQgLKystWoqCgpgGVObsqYgh4roLMs7i4kZMTbMzMzGqVSmdbV1UXt+Gltbe17AD8A/PbVweQO4MCIo6OjcoFAIDWbzZ/S09ObAVDX2+Rk96rGnha5AyAjhmk0msL8/PxnDMOU6fX67wBYzmxeOdxTcHcmpN/JiILCwsLIiooKcVFR0TCX+bavpD/KhHYwHt2QAFA7JqfbHe9NYl6vOepWfHBHBECftL1o+kx6Twp4ncFpF16494LTJnTs/18qcKnAPygqQzAAgQjBAAAAAElFTkSuQmCC) 4 4, auto !important;
+}
+
+.lexgraph .lexdropdown ul {
+  max-height: unset;
+}
+
+.lexgraph .lexgraphnodes, .lexgraph .lexgraphlinks {
   width: 100%;
   height: 100%;
-}
+  position: absolute;
+}
+
+.lexgraph .lexgraphlinks {
+  pointer-events: none;
+}
+
+.lexgraph .lexgraphlinks path {
+  stroke-width: 3px;
+  stroke-opacity: 0.9;
+}
+
+.lexgraph .lexgraphlinks path.running {
+  stroke-dasharray: 5px;
+  stroke-linecap: round;
+  stroke-dashoffset: 50;
+  animation: dash 1s linear;
+  animation-iteration-count: infinite;
+}
+
+@keyframes dash {
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+
+.lexgraph svg {
+  position: absolute;
+  overflow: visible;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+
+.lexgraph .box-selection-svg {
+  stroke-width: 3px;
+  stroke: var(--global-selected);
+  border-radius: 8px;
+  fill: var(--global-selected);
+  fill-opacity: 0.2;
+}
+
+.lexgraph .box-selection-svg.removing {
+  stroke-dasharray: 6px;
+  stroke-linecap: round;
+}
+
+.lexgraphnode {
+  position: absolute;
+  -webkit-user-select: none; /* Safari 3.1+ */
+  -moz-user-select: none; /* Firefox 2+ */
+  -ms-user-select: none; /* IE 10+ */
+  user-select: none; /* Standard syntax */
+  cursor: pointer;
+  min-width: 96px;
+  min-height: 32px;
+  border-radius: 10px;
+  
+  /* background-color: rgba(var(--graphnode-background), 0.75); */
+  background: linear-gradient(15deg, #161616da 10%, #080808da);
+  background-color: unset; background-origin: border-box;
+
+  -webkit-backdrop-filter: blur(4px);
+  backdrop-filter: blur(4px);
+  border: 3px solid var(--global-color-transparent);
+  transition: border 0.05s linear;
+  padding: 4px;
+}
+
+.lexgraphnode.math {
+  background: linear-gradient(15deg, #0687d1da 10%, #00ffccda);
+  background-color: unset; background-origin: border-box;
+}
+
+.lexgraphnode.logic {
+  background: linear-gradient(15deg, #FB4D3Dda 10%, #A74482da);
+  background-color: unset; background-origin: border-box;
+}
+
+.lexgraphnode.inputs {
+  background: linear-gradient(15deg, #84e100da 10%, #79a095da);
+  background-color: unset; background-origin: border-box;
+}
+
+.lexgraphnode.variables {
+  background: linear-gradient(15deg, #f1e643da 10%, #e78b8bda);
+  background-color: unset; background-origin: border-box;
+}
+
+.lexgraphnode.events {
+  background: linear-gradient(15deg, #ec49d7da 10%, #8dc0b8da);
+  background-color: unset; background-origin: border-box;
+}
+
+
+.lexgraphnode.selected {
+  border: 3px solid var(--global-selected-dark);
+  border: 3px solid #ffc107;
+  box-shadow: 0 2px 6px 0 rgba(0,0,0,.14);
+}
+
+.lexgraphnode .lexgraphnodeheader, .lexgraphnode .lexgraphnodeproperties {
+  font-family: var(--global-title-font);
+  font-weight: 700;
+  font-size: 13px;
+  color: #d9d9e3;
+  text-shadow: 0px 0px 2px #1b1b1bdc;
+  border-bottom: 1px solid #ffffff46;
+  margin-bottom: 2px;
+  pointer-events: none;
+  text-align: -webkit-center;
+  text-align: center;
+  margin-left: -7px;
+  width: calc(100% + 14px);
+}
+
+.lexgraphnode.selected .lexgraphnodeheader, .lexgraphnode.selected .lexgraphnodeproperties {
+  margin-left: -4px;
+  width: calc(100% + 8px);
+}
+
+.lexgraphnode .lexgraphnodeproperties {
+  pointer-events: all;
+}
+
+.lexgraphnode .lexgraphnodeios {
+  display: flex;
+  pointer-events: none;
+}
+
+.lexgraphnode .lexgraphnodeios .lexgraphnodeinputs {
+  margin-right: 6px;
+}
+
+.lexgraphnode .lexgraphnodeios .lexgraphnodeoutputs {
+  margin-left: 6px;
+}
+
+.lexgraphnode .lexgraphnodeio {
+  font-family: var(--global-title-font);
+  font-weight: 500;
+  font-size: 10px;
+  color: #d9d9e3;
+  text-shadow: 0px 1px 6px #22222283;
+  display: flex;
+  min-height: 18px;
+}
+
+.lexgraphnode .lexgraphnodeio.iooutput {
+  justify-content: right;
+}
+
+.lexgraphnode .lexgraphnodeio .io__type {
+  font-size: 7px;
+  font-weight: 700;
+  line-height: 10px;
+  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;
+  color: var(--global-color-primary);
+  pointer-events: all;
+}
+
+.lexgraphnode .lexgraphnodeio .io__type span {
+  pointer-events: none;
+}
+
+.lexgraphnode .lexgraphnodeio .io__typedesc {
+  position: absolute;
+  margin-left: -30px;
+  font-weight: 600;
+  margin-top: 3px;
+  background-color: #afafaf;
+  color: var(--global-color-primary);
+  font-size: 8px;
+  border-radius: 4px;
+  width: 28px;
+  text-align: center;
+  opacity: 0;
+  transition: opacity ease-in 0.1s;
+}
+
+.lexgraphnode .lexgraphnodeio .io__typedesc.output {
+  margin-right: -30px;
+}
+
+.lexgraphnode .lexgraphnodeio .io__type.vec2,
+.lexgraphnode .lexgraphnodeio .io__typedesc.vec2 { background-color: #ecea4c; }
+.lexgraphnode .lexgraphnodeio .io__type.vec3,
+.lexgraphnode .lexgraphnodeio .io__typedesc.vec3 { background-color: #ee87e5; }
+.lexgraphnode .lexgraphnodeio .io__type.vec4,
+.lexgraphnode .lexgraphnodeio .io__typedesc.vec4 { background-color: #9d56d8; }
+.lexgraphnode .lexgraphnodeio .io__type.string,
+.lexgraphnode .lexgraphnodeio .io__typedesc.string { background-color: #79cc9c; }
+.lexgraphnode .lexgraphnodeio .io__type.mat,
+.lexgraphnode .lexgraphnodeio .io__typedesc.mat { background-color: #56a8d8; }
+
+.lexgraphnode .lexgraphnodeio .io__name {
+  margin-top: 2px;
+}
+
+.lexgraphnode .lexgraphnodeio .io__type.output {
+  margin-right: unset;
+  margin-left: 3px;
+}
+
+.lexgraphnode .lexgraphnodeio:hover .io__typedesc {
+  opacity: 1;
+}
+
+.lexgraphnode .lexgraphnodeio .io__type:hover {
+  filter: brightness(1.2);
+}
+
+.lexgraphnode .lexgraphnodeio[data-active] .io__type:hover {
+  background-color: rgba(255, 58, 58, 0.829);
+}
+
+.lexgraphnode .lexgraphnodeio[data-active] .io__type:hover span {
+  display: none;
+}
+
+.lexgraphnode .lexgraphnodeio[data-active] .io__type:hover::after {
+  content: 'X';
+}
+
+.lexgraphnode .lexgraphnodeio[data-active] .io__type {
+  filter: brightness(1.4);
+}
+
+.lexgraph .lexgraphpropdialog {
+  transform: translateY(-96px);
+}
+
+.lexgraph .lexgraphpropdialog.opened {
+  transform: translateY(0px);
+}
+
+.lexgraph .lexgraphgroups {
+  z-index: 1;
+}
+
+.lexgraphgroup {
+  position: absolute;
+  -webkit-user-select: none; /* Safari 3.1+ */
+  -moz-user-select: none; /* Firefox 2+ */
+  -ms-user-select: none; /* IE 10+ */
+  user-select: none; /* Standard syntax */
+  cursor: pointer;
+  min-width: 96px;
+  min-height: 32px;
+  border-radius: 8px;
+  
+  background: linear-gradient(35deg, #949292 10%, #a7c4bd);
+  background-color: unset; background-origin: border-box;
+
+  -webkit-backdrop-filter: blur(4px);
+  backdrop-filter: blur(4px);
+  border: 1px solid var(--global-text-primary);
+  transition: border 0.05s linear;
+  opacity: 0.5;
+}
+
+.lexgraphgroup .lexgraphgrouptitle {
+  font-size: 14px;
+  margin: 8px;
+  font-weight: 800;
+  color: var(--global-color-primary);
+  font-family: var(--global-title-font);
+  outline: none;
+  border: none;
+  background: none;
+  max-width: 128px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  border-bottom: 1px solid var(--global-color-primary);
+}
+
+.lexgraphgroup .lexgraphgrouptitle:disabled {
+  pointer-events: none;
+  border: none;
+}
+
+.lexgraphgroup .lexgraphgroupresizer {
+  position: absolute;
+  bottom: 2px;
+  right: 2px;
+  width: 12px;
+  height: 12px;
+  border-bottom: 2px solid var(--global-color-primary);
+  border-right: 2px solid var(--global-color-primary);
+  border-bottom-right-radius: 8px;
+}
+
+.lexgraphgroup .lexgraphgroupresizer:hover {
+  border-bottom: 2px solid #4b4b4ba8;
+  border-right: 2px solid #4b4b4ba8;
+}
+
+/* .lexgraphnodeproperties .lexwidget .numberbox, .lexgraphnodeproperties .lexwidget .lextext {
+  margin: unset;
+  background-color: unset;
+}
+
+.lexgraphnodeproperties .lexwidget.nobranch {
+  padding: 0px;
+}
+
+.lexgraphnodeproperties .lexwidget input {
+  font-size: 14px;
+  font-weight: 800;
+  color: var(--global-color-primary); 
+  font-family: var(--global-title-font);
+  max-width: 64px;
+} */