/*
Pen created by: Varo
Test it and make your own color palette!
Looks awesome right? Check ou my profile to see more pens like that!
I was inspired by Brackets.io

Also tis interactive! Try to close the fake editor!
*/

.body {
margin: 0;
padding: 0;
background: #32353D;
font-family: 'Varela Round', 'Ionicons', sans-serif;
user-select: none;
-webkit-user-select: none;
}
::selection { background: rgba(95,191,249,.4); }
.topbar {
position: fixed;
top: 0px;
left: 0px;
height: 30px;
width: 100%;
background: #32353D;
line-height: 30px;
z-index: 100;
}
.topbar span {
padding: 2px 10px;
margin: 0px 2px;
font-size: 13px;
border-radius: 5px;
cursor: pointer;
}
.menu {
position: fixed;
top: 30px;
left: 0px;
width: 300px;
height: calc( 100% - 32px );
height: -webkit-calc( 100% - 32px );
padding-top: 2px;
background: #32353D;
box-shadow: inset 0 2px 0 rgba(255,255,255,.05), inset 0 1px 0 rgba(0,0,0,.4);
transition: all .2s ease;
-webkit-transition: all .2s ease;
}
.menu a {
display: block;
padding: 10px 10px 10px 40px;
text-decoration: none;
color: rgba(255,255,255,.5);
box-shadow: inset 0 -1px 0 rgba(255,255,255,.05), inset 0 -2px 0 rgba(0,0,0,.1);
transition: all .08s ease;
-webkit-transition: all .08s ease;
}
.menu a:hover {
|
}