Skip to content

Instantly share code, notes, and snippets.

/Custom code editor palette in pure CSS.markdown

Created October 10, 2015 06:39
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save anonymous/b6e3e1330a15bafe9d08 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save anonymous/b6e3e1330a15bafe9d08 to your computer and use it in GitHub Desktop.
Download ZIP
Custom code editor palette in pure CSS
Raw
Custom code editor palette in pure CSS.markdown
Raw
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>
Raw
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}}
Raw
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" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment