WIP0.4.0 Visual refinements
This commit is contained in:
MatCat
parent
c906e499b9
commit
a967daa994
79
css/main.css
79
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 {
|
||||
|
||||
@ -34,6 +34,7 @@
|
||||
<script src="js/vendor/modernizr-3.11.2.min.js"></script>
|
||||
<div id="top-bar">
|
||||
<div id="top-menu">
|
||||
<div id="left-top-menu">
|
||||
<ul>
|
||||
<li id="tm_File" class="top-menu-item">File
|
||||
<div id="tm_FileMenu" class="top-menu-div">
|
||||
@ -90,11 +91,8 @@
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<div id ="SiteTitle">
|
||||
MatCat BrowserLogic <span id="version"> </span>
|
||||
</div>
|
||||
<div id="SiteTitle">MatCat BrowserLogic <span id="version"> </span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="left-menu">
|
||||
|
||||
@ -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");
|
||||
|
||||
Loading…
Reference in New Issue
Block a user