diff --git a/css/main.css b/css/main.css index 59e51fa..924dcb3 100644 --- a/css/main.css +++ b/css/main.css @@ -14,6 +14,7 @@ body { background-color: #54545d; } + html { color: #ddd; font-size: 1em; @@ -265,51 +266,72 @@ textarea { } #left-menu { - width: 200px; - max-width: 200px; + width: 212px; height: 99vh; display: inline-block; border: 1px solid black; margin: 0px; padding: 0px; + background-color: #222222; } #inner-left-menu { width: 100%; - height: 99%; - overflow: auto; + height: 99.4%; + overflow-y: scroll; + background-color: #54545d; } +#inner-left-menu::-webkit-scrollbar { + width: 12px; +} +#inner-left-menu::-webkit-scrollbar-track { + /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#575a60+0,292b2d+14,000000+49,292b2d+82,575a60+100 */ + background: rgb(87,90,96); /* Old browsers */ + background: -moz-linear-gradient(left, rgba(87,90,96,1) 0%, rgba(41,43,45,1) 14%, rgba(0,0,0,1) 49%, rgba(41,43,45,1) 82%, rgba(87,90,96,1) 100%); /* FF3.6-15 */ + background: -webkit-linear-gradient(left, rgba(87,90,96,1) 0%,rgba(41,43,45,1) 14%,rgba(0,0,0,1) 49%,rgba(41,43,45,1) 82%,rgba(87,90,96,1) 100%); /* Chrome10-25,Safari5.1-6 */ + background: linear-gradient(to right, rgba(87,90,96,1) 0%,rgba(41,43,45,1) 14%,rgba(0,0,0,1) 49%,rgba(41,43,45,1) 82%,rgba(87,90,96,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#575a60', endColorstr='#575a60',GradientType=1 ); /* IE6-9 */ +} + +#inner-left-menu::-webkit-scrollbar-thumb { + /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+50,000000+50,8e8e8e+50,000000+100&0+0,1+50,0+100 */ + background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(142,142,142,1) 50%, rgba(0,0,0,0) 100%); /* FF3.6-15 */ + background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(142,142,142,1) 50%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */ + background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(142,142,142,1) 50%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 */ + border-radius: 8px; +} + + #top-bar { - height: 80px; + height: 30px; overflow: none; margin: 0px; padding: 0px; - background-color: #222; font-size: 2em; + /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#a7cfdf+0,23538a+100;Blue+3d+%238 */ + /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#4c4c4c+0,595959+12,666666+25,474747+39,2c2c2c+50,000000+51,111111+60,2b2b2b+76,1c1c1c+91,131313+100;Black+Gloss+%231 */ + background: rgb(76,76,76); /* Old browsers */ + background: -moz-linear-gradient(top, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(102,102,102,1) 25%, rgba(71,71,71,1) 39%, rgba(44,44,44,1) 50%, rgba(0,0,0,1) 51%, rgba(17,17,17,1) 60%, rgba(43,43,43,1) 76%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%); /* FF3.6-15 */ + background: -webkit-linear-gradient(top, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); /* Chrome10-25,Safari5.1-6 */ + background: linear-gradient(to bottom, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */ } -#LeftOf-SiteTitle { - display: inline-block; - width: 200px; - height: 100%; - font-size: 0.5em; - margin: 0px; - padding: 5px; -} -#SiteTitle { - display: inline-block; - height: 100%; - width: 50%; - margin: 0px; - padding-top: 2px; -} .TOOLBOX_CATEGORY_HEADER { margin: 0px; padding: 0px; text-align: center; - background-color: #222; + font-size: 0.8em; + /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#8c9b3f+0,6d8e20+50,456000+51,799e24+100 */ + background: rgb(140,155,63); /* Old browsers */ + background: -moz-linear-gradient(top, rgba(140,155,63,1) 0%, rgba(109,142,32,1) 50%, rgba(69,96,0,1) 51%, rgba(121,158,36,1) 100%); /* FF3.6-15 */ + background: -webkit-linear-gradient(top, rgba(140,155,63,1) 0%,rgba(109,142,32,1) 50%,rgba(69,96,0,1) 51%,rgba(121,158,36,1) 100%); /* Chrome10-25,Safari5.1-6 */ + background: linear-gradient(to bottom, rgba(140,155,63,1) 0%,rgba(109,142,32,1) 50%,rgba(69,96,0,1) 51%,rgba(121,158,36,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8c9b3f', endColorstr='#799e24',GradientType=0 ); /* IE6-9 */ + } .TOOLBOX_CATEGORY_HEADER h2 { margin: 0px; @@ -418,8 +440,19 @@ textarea { z-index: 9999999999; } +#left-top-menu { + width: 70%; + float: left; +} + +#SiteTitle { + width: 29%; + font-size: 0.6em; + float: right; +} + #top-menu { - border-bottom: 3px ridge #54545d; + } #top-menu a { diff --git a/index.html b/index.html index bd6ae89..74eb6d1 100644 --- a/index.html +++ b/index.html @@ -34,6 +34,7 @@
+
  • File
    @@ -90,11 +91,8 @@
-
-
-
- MatCat BrowserLogic
+
MatCat BrowserLogic
diff --git a/js/logicengine.js b/js/logicengine.js index 8c4c4ab..9289c93 100644 --- a/js/logicengine.js +++ b/js/logicengine.js @@ -20,15 +20,17 @@ class LogicEngine { Resize(evt) { let leftmenu = document.getElementById("left-menu"); let topbar = document.getElementById("top-bar"); - console.log(topbar); - console.log("Top bar height " + topbar.scrollHeight); - leftmenu.style.height = (window.innerHeight - (topbar.scrollHeight + 2)) + "px"; - this.Canvas.width = window.innerWidth - 205; - this.Canvas.height = window.innerHeight - topbar.scrollHeight; + let lmrect = leftmenu.getBoundingClientRect(); + let tbrect = topbar.getBoundingClientRect(); + leftmenu.style.height = (window.innerHeight - (tbrect.height + 2)) + "px"; + this.Canvas.width = window.innerWidth - (lmrect.width); + this.Canvas.height = window.innerHeight - tbrect.height; this.Mouse = false; let gridPlane = document.getElementById("GridPlane"); - gridPlane.style.top = topbar.scrollHeight + "px"; - this.Canvas.style.top = topbar.scrollHeight + "px"; + gridPlane.style.top = tbrect.height + "px"; + gridPlane.style.left = lmrect.width + "px"; + this.Canvas.style.top = tbrect.height + "px"; + this.Canvas.style.left = lmrect.width + "px"; gridPlane.width = this.Canvas.width; gridPlane.height = this.Canvas.height; let Ctx = gridPlane.getContext("2d");