Custom code editor palette in pure CSS

Custom code editor palette in pure CSS.markdown

Custom code editor palette in pure CSS

A custom code editor palette in pure CSS!

Forked from Varo's Pen Custom code editor palette in pure CSS.

A Pen by Lanorise Cainion on CodePen.

License.

index.html

<div class="topbar">
	<span>File</span><span>Editing</span><span>Search</span><span>Show</span><span>Navigation</span><span>Development</span><span>Tools</span><span>Help</span>
	<div class="controls">
		<span class="min"><i class="icon ion-chevron-down"></i></span>
		<span class="max"><i class="icon ion-chevron-up"></i></span>
		<span class="close"><i class="icon ion-close-round"></i></span>
	</div>
</div>
<div class="menu">
	<span>Work area</span>
	<a href="#" class="current save css">style<b>.css</b></a>
	<a href="#" class="html">index<b>.html</b></a>
	<a href="#" class="js">javascript<b>.js</b></a>
	<a href="#" class="add"></a>
</div>
<div class="code">
	<n><cm>/*</cm><br></n>
	<n><cmm>Pen created by: <a href="http://codepen.io/Varo/" target="blank">Varo</a></cmm><br></n>
	<n><cmm>Test it and make your own color palette!</cmm><br></n>
	<n><cmm>Looks awesome right? Follow me to see more pens like it!</cmm><br></n>
	<n><cm>*/</cm><br></n>
	<n><br></n>
	<n><c>.body </c><i>{</i><br></n>
		<n><v>margin: <num>0</num>;</v><br></n>
		<n><v>padding: <num>0</num>;</v><br></n>
		<n><v>background: <hex>#32353D</hex>;</v><br></n>
		<n><v>font-family: <cf>'Varela Round'</cf>, <cf>'Ionicons'</cf>, <f>sans-serif</f>;</v><br></n>
		<n><v>user-select: <val>none</val>;</v><br></n>
		<n><v><pr>-webkit-</pr>user-select: <val>none</val>;</v><br></n>
	<n><i>}</i><br></n>
		<n><pr>::selection </pr><i>{</i> <vn>background: <rgba>rgba</rgba><i>(</i><num>95,191,249,.4</num><i>)</i></vn>; <i>}</i><br></n>
	<n><c>.topbar </c><i>{</i><br></n>
		<n><v>position: <val>fixed</val>;</v><br></n>
		<n><v>top: <num>0px</num>;</v><br></n>
		<n><v>left: <num>0px</num>;</v><br></n>
		<n><v>height: <num>30px</num>;</v><br></n>
		<n><v>width: <num>100%</num>;</v><br></n>
		<n><v>background: <hex>#32353D</hex>;</v><br></n>
		<n><v>line-height: <num>30px</num>;</v><br></n>
		<n><v>z-index: <num>100</num>;</v><br></n>
	<n><i>}</i><br></n>
	<n><c>.topbar span </c><i>{</i><br></n>
		<n><v>padding: <num>2px 10px</num>;</v><br></n>
		<n><v>margin: <num>0px 2px</num>;</v><br></n>
		<n><v>font-size: <num>13px</num>;</v><br></n>
		<n><v>border-radius: <num>5px</num>;</v><br></n>
		<n><v>cursor: <val>pointer</val>;</v><br></n>
	<n><i>}</i><br></n>
	<n><c>.menu </c><i>{</i><br></n>
		<n><v>position: <val>fixed</val>;</v><br></n>
		<n><v>top: <num>30px</num>;</v><br></n>
		<n><v>left: <num>0px</num>;</v><br></n>
		<n><v>width: <num>300px</num>;</v><br></n>
		<n><v>height: <calc>calc</calc><i>(</i><num> 100% </num>-<num> 32px </num><i>)</i>;</v><br></n>
		<n><v>height: <calc><pr>-webkit-</pr>calc</calc><i>(</i><num> 100% </num>-<num> 32px </num><i>)</i>;</v><br></n>
		<n><v>padding-top: <num>2px</num>;</v><br></n>
		<n><v>background: <hex>#32353D</hex>;</v><br></n>
		<n><v>box-shadow: <val>inset</val> <num>0 2px 0</num> <rgba>rgba</rgba><i>(</i><num>255,255,255,.05</num><i>)</i>, <val>inset</val> <num>0 1px 0</num> <rgba>rgba</rgba><i>(</i><num>0,0,0,.4</num><i>)</i>;</v><br></n>
		<n><v>transition: <val>all</val> <num>.2s</num> <val>ease</val>;</v><br></n>
		<n><v><pr>-webkit-</pr>transition: <val>all</val> <num>.2s</num> <val>ease</val>;</v><br></n>
	<n><i>}</i><br></n>
	<n><c>.menu a </c><i>{</i><br></n>
		<n><v>display: <val>block</val>;</v><br></n>
		<n><v>padding: <num>10px 10px 10px 40px</num>;</v><br></n>
		<n><v>text-decoration: <val>none</val>;</v><br></n>
		<n><v>color: <rgba>rgba</rgba><i>(</i><num>255,255,255,.5</num><i>)</i>;</v><br></n>
		<n><v>box-shadow: <val>inset</val> <num>0 -1px 0</num> <rgba>rgba</rgba><i>(</i><num>255,255,255,.05</num><i>)</i>, <val>inset</val> <num>0 -2px 0</num> <rgba>rgba</rgba><i>(</i><num>0,0,0,.1</num><i>)</i>;</v><br></n>
		<n><v>transition: <val>all</val> <num>.08s</num> <val>ease</val>;</v><br></n>
		<n><v><pr>-webkit-</pr>transition: <val>all</val> <num>.08s</num> <val>ease</val>;</v><br></n>
	<n><i>}</i><br></n>
	<n><c>.menu a<pr>:hover</pr></c> <i>{</i><br></n>
		<n class="current"><v><cursor>|</cursor></v><br></n>
	<n><i>}</i><br></n>
</div>

style.css

body {
	margin: 0;
	pading: 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;
	color: rgba(255,255,255,.6);
	line-height: 28px;
	z-index: 100;
}
.topbar span {
	padding: 2px 10px;
	margin: 0px 2px;
	font-size: 13px;
	border-radius: 5px;
	cursor: pointer;
}
.topbar span:hover {
	background: rgba(0,0,0,.2);
}
.topbar span:active {
	background: rgba(0,0,0,.3);
	color: rgba(255,255,255,.8);
}
.topbar .controls {
	position: absolute;
	right: 0px;
	top: 0px;
	height: 30px;
	width: 90px;
}
.topbar .controls span {
	position: absolute;
	right: 0px;
	top: 0px;
	height: 30px;
	width: 30px;
	text-align: center;
	line-height: 30px;
	padding: 0;
	margin: 0;
	border-radius: 0;
}
.topbar .controls span i {
	color: rgba(255,255,255,.95);
}
.topbar .controls span:hover {
	background: rgba(0,0,0,.2);
}
.topbar .controls span.min {right: 60px;}
.topbar .controls span.max {right: 30px;}
.topbar .controls span.close {right: 0px;background:#E87460;}
.topbar .controls span.close:active {opacity: .9;}

.menu {
	position: fixed;
	top: 30px;
	left: 0px;
	width: 200px;
	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 span {
	display: block;
	padding: 7px 10px 7px 22px;
	color: #fafafa;
	font-size: 15px;
	box-shadow: inset 0 -1px 0 rgba(255,255,255,.05), inset 0 -2px 0 rgba(0,0,0,.1);
}
.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 {
	color: rgba(255,255,255,.7);
	background: rgba(0,0,0,.08);
}
.menu a b {
	font-weight: normal;
	color: rgba(100,104,106,1);
}
.menu a.current {
	background: rgba(0,0,0,.08);
	color: rgba(255,255,255,.9);
}
.menu a.add {
	text-align: center;
	padding: 0;
	height: 35px;
	margin: 10px 30px;
	border-radius: 100px;
	box-shadow: none;
	background: rgba(0,0,0,.1);
}
.menu a.add:hover {
	color: color: rgba(255,255,255,);
	background: #5FBFF9;
}
.menu a.add::before {
	content: "Add files";
	font-size: 15px;
	line-height: 50px;
	color: rgba(255,255,255,.5);
	text-shadow: none;
	width: 140px;
	height: 35px;
	left: 30px;
	opacity: 0;
	transition: all .15s ease;
	-webkit-transition: all .15s ease;
}
.menu a.add:hover::before {
	color: rgba(255,255,255,1);
	line-height: 37px;
	opacity: 1;
}
.menu a.add::after {
	content: "\f217";
	font-size: 22px;
	line-height: 37px;
	color: rgba(255,255,255,.1);
	text-shadow: none;
	width: 240px;
	height: 35px;
	left: 8px;
	opacity: 1;
	transition: all .15s ease;
	-webkit-transition: all .15s ease;
}
.menu a.add:hover::after {
	color: rgba(255,255,255,1);
	width: 100px;
}
.menu a::before {
	content: "";
	position: absolute;
	left: 15px;
	font-size: 18px;
	text-shadow: 0 0 30px #000;
}
.menu a.css::before {content:"\f4df";color:#30A9DC;}
.menu a.html::before {content:"\f4e3";color:#F1672C;}
.menu a.js::before {content:"\f4e5";color:#F1BF26;}

.menu a::after {
	content: "\f404";
	position: absolute;
	right: 15px;
	font-size: 28px;
	line-height: 23px;
	color: rgba(255,255,255,.3);
	text-shadow: 2px 2px 0 rgba(0,0,0,.3);
	opacity: 0;
}
.menu a:hover::after {
	opacity: 1;
}
.menu a.save::after {
	content: "\f21b";
	right: 14px;
	font-size: 15px;
	color: #5FBFF9;
	text-shadow: none;
	opacity: 1;
}
.menu a.save:hover::after {
	content: "Ctrl + S";
	font-size: 13px;
	text-shadow: 2px 2px 0 rgba(0,0,0,.2);
}

.code {
	position: absolute;
	height: calc( 100% - 70px );
	height: -webkit-calc( 100% - 70px );
	width: calc( 100% - 240px );
	width: -webkit-calc( 100% - 240px );
	top: 30px;
	left: 200px;
	padding: 20px 0px 20px 40px;
	background: #fafafa;
	color: #A0A0A0;
	text-shadow: 2px 2px 0 rgba(0,0,0,.01);
	box-shadow: inset 37px 0 0 rgba(0,0,0,.06);
	user-select: text;
	-webkit-user-select: text;
	outline: none;
	overflow: auto;
	transition: all .2s ease;
	-webkit-transition: all .2s ease;
}
::-webkit-scrollbar {
	min-width: 20px;
	width: 20px;
	max-width: 20px;
    min-height: 20px;
	height: 20px;
	max-height: 20px;
	background-color: #fafafa;
}
::-webkit-scrollbar-thumb {
	background: #cacaca;
    border: solid 7px #fafafa;
    border-radius: 100px;
    backface-visibility: hidden:
}
::-webkit-scrollbar-thumb:hover {
    background: #bababa;
}
::-webkit-scrollbar-thumb:active {
    background: #acacac;
}
::-webkit-scrollbar-button {
	display: none;
    height: 0px;
}
::-webkit-resizer, ::-webkit-scrollbar-corner {
    background: #fafafa;
}
n{
  	counter-increment: step-counter;
  	position : relative;
  	min-height : 1em;
	display: block;
}
n::before {
    content: counter(step-counter);
	user-select: none;
	-webkit-user-select: none;
    color : #888;
    position : absolute;
    left : -40px;
    width : 32px;
	padding-right: 5px;
    text-align : right;
}
n.current::before {background: rgba(0,0,0,.07);}
n.current{background: rgba(0,0,0,.07); box-shadow: -3px 0 0 rgba(0,0,0,.07);}

i {color:#A0A0A0;font-style:normal;}
b {font-weight:normal;}
c {color:#5FBFF9;}
bc, ac, pr, cm {color:#B0B0B0;margin-left:1px;}
cmm {color:#B0B0B0;margin-left:20px;}
v {color:#BD93D8;margin-left:20px;} vn {color:#BD93D8;}
rgba, rgb, calc, hex, f, src, val {color:#F2AE60;}
cf, num, content {color:#7DC687}
.code a {color:#fff;background:#5FBFF9;padding: 0 5px;text-decoration:none;border-radius:5px;transition:all .15s ease;-webkit-transition:all .15s ease;}
.code a:hover {color:#5FBFF9;background:#fff;box-shadow: 0 0 0 1px #5FBFF9;}

cursor {
	font-weight: bold;
	margin-left: 2px;
	color: #666;
	text-shadow: none;
	user-select: none;
	-webkit-user-select: none;
	animation: cursor .7s ease infinite;
	-webkit-animation: cursor .7s ease infinite;
	-moz-animation: cursor .7s ease infinite;
	-o-animation: cursor .7s ease infinite;
}
@keyframes cursor {0%,100%{opacity: 0}50%{opacity: 1}}
@-webkit-keyframes cursor {0%,100%{opacity: 0}50%{opacity: 1}}
@-moz-keyframes cursor {0%,100%{opacity: 0}50%{opacity: 1}}
@-o-keyframes cursor {0%,100%{opacity: 0}50%{opacity: 1}}

styles

<link href="http://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet" />
<link href="http://ionicons.com/css/ionicons.min.css?v=2.0.1" rel="stylesheet" />