lexgui 0.1.26 → 0.1.28

package/build/lexgui.css

@@ -1,23 +1,29 @@
-@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;
@@ -56,7 +62,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 +78,10 @@ body.nocursor * {
   cursor: none !important;
 }
 
+body.noevents * {
+  pointer-events: none !important;
+}
+
 .grabbing {
   cursor: move;
 }
@@ -163,7 +173,7 @@ body.nocursor * {
   border: none;
   font-family: var(--global-font);
   line-height: 23px;
-  font-size: 14px;
+  font-size: 13px;
   font-weight: 500;
 }
 
@@ -181,7 +191,7 @@ body.nocursor * {
   padding: 10px;
   padding-left: 50px;
   color: var(--global-text-primary);
-  font-size: 14px;
+  font-size: 13px;
   cursor: pointer;
 }
 
@@ -210,7 +220,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 +247,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+ */
@@ -446,12 +457,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 +516,7 @@ body.nocursor * {
 }
 
 .lexbranch .branchicon {
-  font-size: 12px;
+  font-size: var(--global-font-size);
 }
 
 .lexbranch.first .lexbranchtitle {
@@ -532,12 +544,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,17 +630,21 @@ 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 input {
+  padding: 5px;
+}
+
 .lexwidget .lextext div {
   color: #b2b2b5d6;
 }
@@ -640,36 +660,34 @@ body.nocursor * {
 }
 
 .lexwidget .lextext input:focus {
-  border-bottom: 2px solid var(--global-selected);
+  border-color: 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);
-}
-
 .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 +717,6 @@ body.nocursor * {
 }
 
 .lexfilter input {
-  font-size: 12px;
   font-family: var(--global-font);
 }
 
@@ -707,8 +724,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 +733,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 +748,6 @@ body.nocursor * {
 }
 
 .lextitle a {
-  font-size: 12px;
   margin-top: 0.3em;
   margin-right: 0.7em;
   color: var(--global-selected-light);
@@ -765,8 +781,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 +808,7 @@ body.nocursor * {
 }
 
 .lexbutton:hover {
-  background-color: #ffffff30;
+  background-color: var(--global-button-color-hovered);
   color: var(--global-text-primary);
 }
 
@@ -914,36 +930,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 +1024,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 +1080,6 @@ input[type=checkbox]:checked:after {
   width: 100%;
   padding: 6px;
   color: var(--global-text-secondary);
-  font-size: 12px;
   margin-top: -1px;
 }
 
@@ -1137,9 +1140,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 +1165,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 +1183,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 +1214,6 @@ input[type=number] {
 }
 
 .lexvector .vecbox .vecinput, .numberbox .vecinput {
-  font-size: 12px;
   margin-left: 2px;
   border: none;
   width: 100%;
@@ -1212,30 +1223,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 +1277,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 +1377,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 +1391,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 +1405,7 @@ input[type="range"] {
   margin-right: 8px;
 }
 
-.lextree span {
+.lextree span { /* Tree title */
   padding: 8px;
   display: block;
   border-top-left-radius: 8px;
@@ -1404,24 +1415,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 +1440,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 +1506,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 +1590,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 +1610,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 +1629,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 +1653,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 +1676,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 +1713,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 +1745,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,7 +1804,7 @@ 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;
@@ -1803,7 +1820,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 +1838,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 +1864,7 @@ 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);
 }
 
 .lexcontextmenubox .lexcontextmenuentry .lexentryname.disabled {
@@ -1890,6 +1907,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 +2030,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 +2041,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 +2302,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 +2354,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 +2390,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 +2409,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 +2478,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 +2490,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 +2610,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 +2627,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 +2702,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 +2758,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 +2894,7 @@ ul.lexassetscontent {
   margin-top: 28px;
   overflow: hidden;
   position: absolute;
+  top: 0;
 }
 
 .lexcodeeditor .codetabsarea {
@@ -3184,7 +3246,113 @@ pre .line-gutter {
 
 /* Node Graph */
 
-.lexnodegraph canvas {
+.lexgraph {
+  overflow: hidden;
+}
+
+.lexgraph .lexgraphnodes {
   width: 100%;
   height: 100%;
+  position: relative;
+}
+
+.lexgraph .background-svg {
+  position: absolute;
+}
+
+.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: #111;
+  border: 2px solid var(--global-color-transparent);
+  transition: border 0.05s linear;
+  padding: 4px;
+}
+
+.lexgraphnode.selected {
+  border: 2px solid var(--global-selected);
+  box-shadow: 0 2px 6px 0 rgba(0,0,0,.14);
+}
+
+.lexgraphnode .lexgraphnodeheader {
+  font-family: var(--global-title-font);
+  font-weight: 700;
+  font-size: 13px;
+  color: #d9d9e3;
+  text-shadow: 0px 1px 4px #2222228f;
+  border-bottom: 1px solid var(--global-blur-background);
+  margin-bottom: 2px;
+  pointer-events: none;
+}
+
+.lexgraphnode .lexgraphnodeios {
+  display: flex;
+  pointer-events: none;
+}
+
+.lexgraphnode .lexgraphnodeios .lexgraphnodeinputs {
+  margin-right: 12px;
+}
+
+.lexgraphnode .lexgraphnodeios .lexgraphnodeoutputs {
+  margin-left: 12px;
+}
+
+.lexgraphnode .lexgraphnodeio {
+  font-family: var(--global-title-font);
+  font-weight: 500;
+  font-size: 11px;
+  color: #d9d9e3;
+  text-shadow: 0px 1px 6px #22222283;
+  display: flex;
+  min-height: 18px;
+}
+
+.lexgraphnode .lexgraphnodeio.output {
+  justify-content: right;
+}
+
+.lexgraphnode .lexgraphnodeio .io__type {
+  font-size: 7px;
+  font-weight: 700;
+  line-height: 11px;
+  min-width: 12px;
+  min-height: 12px;
+  background-color: #afafaf;
+  align-self: center;
+  margin-right: 3px;
+  border-radius: 3px;
+  text-align: -webkit-center;
+  text-align: center;
+  border: 1px solid var(--global-text-terciary);
+  color: var(--global-color-primary);
+  pointer-events: all !important;
+}
+
+.lexgraphnode .lexgraphnodeio .io__type.vec2 { background-color: #63a9ee; }
+.lexgraphnode .lexgraphnodeio .io__type.vec3 { background-color: #e75d4e; }
+.lexgraphnode .lexgraphnodeio .io__type.bool { background-color: #cc8ce5; }
+
+.lexgraphnode .lexgraphnodeio .io__type.output {
+  margin-right: unset;
+  margin-left: 3px;
+}
+
+.lexgraphnode .lexgraphnodeio .io__type:hover {
+  filter: opacity(0.75);
+}
+
+.lexgraphnode .lexgraphnodeio .io__type.active {
+  background-color: var(--global-text-primary);
+}
+
+.lexgraphnode .lexgraphnodeio .io__name {
+  margin-top: 1px;
 }