Coding App [CSS]

dabblet.css

/* Coding App [CSS] */
/* Made with ♥ by Louis Bullock */
/* ---------------------------------------- */



/* BASICS */
/* ---------------------------------------- */

html,body {
height: 100%;
overflow: hidden;
}

body {
font: normal normal 14px/20px "HelveticaNeue", Helvetica Neue, Helvetica sans-serif;
-webkit-font-smoothing: antialiased;
text-shadow: 0 0 1px rgba(0,0,0,0.01);
-webkit-text-stroke: 1px transparent;
text-rendering: optimizeLegibility;
color: #333;
background-image:-webkit-linear-gradient(#CB9655,#9B613A);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

/* ---------------------------------------- */





/* CONTAINERS & COLUMNS */
/* ---------------------------------------- */


.col-1,.col-2, .col-3, .col-4 {
float: left;
display: inline;
position: relative;
}

/* This'll keep the last column from sticking out it's gutter */
.omega {
margin-right: 0;
}

/* Title Columns */
.title .col-1 {
width: 390px;
}

.title .col-2 {
width: 390px;
}

/* ---------------------------------------- */





/* CONTENT */
/* ---------------------------------------- */

/* This'll keep the cursor to the text selection cursor, just like it does in the actual jsFiddle website! */
.content {
cursor: text;
}

/* Labels */
.content h1 {
position: absolute;
height: 18px;
line-height: 18px;
z-index: 100;
color: #666;
background: rgba(247,248,248,0.7);
font-weight: normal;
display: inline-block;
top: 10px;
right: 10px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
padding: 0 4px;
margin: 0 0 10px 10px;
border: 1px solid #aaa;
font-size: 10px;
/* This nifty animation makes the h1 labels fade in when the column divs are hovered on — this makes coding a lil' easier, without having a label covering your work as you code, and when you're not coding in that particular div, the label reappears so you always know which section is which (HTML, CSS JavaScript, Result) */
visibility: visible;
opacity: 1;
}

.content .col-1:hover h1,
.content .col-2:hover h1,
.content .col-3:hover h1,
.content .col-4:hover h1 {
/* When any of the .col divs are hovered on, the h1 label is hidden out of view */
visibility: hidden;
opacity: 0;
}

.content h1:hover {
opacity: 0;
}

/* ---------------------------------------- */





/* COLUMNS*/
/* ---------------------------------------- */

/* Individual Column Styles */
.content .col-1,
.content .col-2,
.content .col-3,
.content .col-4 {
padding: 10px;
overflow-y: auto;
}

/* HTML Column */
.content .html.col-1 {
width: 379px;
height: 211px;
border-bottom: solid 1px #ccc;
border-right: solid 1px #ccc;
padding: 10px 10px 10px 10px;
margin-left: 1px;
}

/* CSS Column */
.content .css.col-2 {
width: 378px;
height: 211px;
margin-right: 1px;
border-bottom: solid 1px #ccc;
}

/* JavaScript Column */
.content .js.col-3 {
width: 379px;
height: 211px;
border-right: solid 1px #ccc;
padding: 10px 10px 10px 10px;
margin-left: 1px;
-webkit-border-radius: 0 0 0 4px;
-moz-border-radius: 0 0 0 4px;
border-radius: 0 0 0 4px;
}

/* Result Column */
.content .result.col-4 {
width: 378px;
height: 211px;
margin-right: 1px;
-webkit-border-radius: 0 0 4px 0;
-moz-border-radius: 0 0 4px 0;
border-radius: 0 0 4px 0;
}

/* Come to think of it, they're not REALLY columns, more like sections... */

/* ---------------------------------------- */





/* WINDOW */
/* ---------------------------------------- */

/* This keeps everything held together :) */

.window {
width: 800px;
height: 500px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: inset 0 0 0 1px rgba(0,0,0,0.7), 0px 1px 1px 1px rgba(0, 0, 0, 0.125), 0px 5px 10px 1px rgba(0, 0, 0, 0.125);
-moz-box-shadow: inset 0 0 0 1px rgba(0,0,0,0.7), 0px 1px 1px 1px rgba(0, 0, 0, 0.125), 0px 5px 10px 1px rgba(0, 0, 0, 0.125);
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.7), 0px 1px 1px 1px rgba(0, 0, 0, 0.125), 0px 5px 10px 1px rgba(0, 0, 0, 0.125);
background-image: -webkit-linear-gradient(#fefefe,#F2F3F4);
background-image: -moz-linear-gradient(#fefefe,#F2F3F4);
background-image: -o-linear-gradient(#fefefe,#F2F3F4);
background-image: -ms-linear-gradient(#fefefe,#F2F3F4);
background-image: linear-gradient(#fefefe,#F2F3F4);
display: block;
position: absolute;
top: 50%;
left: 50%;
margin: -250px 0 0 -400px;
/* Background clip stops the background colour leaking out of the border */
-webkit-background-clip: content-box;
-moz-background-clip: content-box;
background-clip: content-box;
}

/* ---------------------------------------- */





/* TITLE */
/* ---------------------------------------- */

/* This is the fancy lookin' title bar */

.title {
height: 20px;
background-color: #6B82A5;
background-image: -webkit-linear-gradient(rgba(0,0,0,0.0),rgba(0,0,0,0.33));
background-image: -moz-linear-gradient(rgba(0,0,0,0.0),rgba(0,0,0,0.33));
background-image: -o-linear-gradient(rgba(0,0,0,0.0),rgba(0,0,0,0.33));
background-image: -ms-linear-gradient(rgba(0,0,0,0.0),rgba(0,0,0,0.33));
background-image: linear-gradient(rgba(0,0,0,0.0),rgba(0,0,0,0.33));
-webkit-border-radius: 6px 6px 0 0;
-moz-border-radius: 6px 6px 0 0;
border-radius: 6px 6px 0 0;
padding: 8px 10px;
-webkit-box-shadow: inset 0 0 0 1px rgba(0,0,0,0.5), inset 0 2px 0 0 rgba(255, 255, 255, 0.25),inset 2px 0px 0 0 rgba(255, 255, 255, 0.05),inset -2px 0px 0 0 rgba(255, 255, 255, 0.05);
-moz-box-shadow: inset 0 0 0 1px rgba(0,0,0,0.5), inset 0 2px 0 0 rgba(255, 255, 255, 0.25),inset 2px 0px 0 0 rgba(255, 255, 255, 0.05),inset -2px 0px 0 0 rgba(255, 255, 255, 0.05);
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.5), inset 0 2px 0 0 rgba(255, 255, 255, 0.25),inset 2px 0px 0 0 rgba(255, 255, 255, 0.05),inset -2px 0px 0 0 rgba(255, 255, 255, 0.05);
}

/* ---------------------------------------- */





/* BUTTON LISTS */
/* ---------------------------------------- */

ul {
padding: 0;
margin: 0;
list-style: none;
}

li {
float: left;
margin-right: 5px;
}

li.omega {
margin-right: 0;
}

li.right {
float: right;
}

li a.button {
/* This makes the title's buttons have a smaller font size. If you get rid of this bit of code you should have some larger looking buttons, which would be perfect to use in any project. I urge you to use the code! */
font-size: 10px;
}

/* Dropdown Menu */
ul.menu {
display: none;
}

li.wrapper:active ul.menu {
/* When the 'user' list item is clicked, the dropdown menu appears */
display: block;
}

ul.menu:hover {
display: block;
}

li.wrapper {
position: relative;
}

/* Styling for the dropdown menu */
ul.menu {
position: absolute;
width: 75px;
z-index: 100;
top: 0px;
/* This padding is the gap between the 'user' list item and the dropdown menu, it ensures that when your cursor travels from the 'user' list item to the dropdown menu, the dropdown menu stays visible, and won't disappear on :hover */
padding-top: 38px;
}

/* Styling for the dropdown menu list items */
ul.menu li {
padding: 4px 8px;
background: #222;
width: 59px;
font-weight: bold;
font-size: 10px;
line-height: 13px;
-webkit-box-shadow: inset 0 1px 0 0 #111, inset 0px 2px 0px 0px rgba(255,255,255,0.125), 0px 1px 0px 0px #111,	inset 1px 0px 0px 0px #111,	inset -1px 0px 0px 0px #111,	inset 2px 0px 0px 0px rgba(255,255,255,0.125),	inset -2px 0px 0px 0px rgba(255,255,255,0.125);
-moz-box-shadow: inset 0 1px 0 0 #111, inset 0px 2px 0px 0px rgba(255,255,255,0.125), 0px 1px 0px 0px #111,	inset 1px 0px 0px 0px #111,	inset -1px 0px 0px 0px #111,	inset 2px 0px 0px 0px rgba(255,255,255,0.125),	inset -2px 0px 0px 0px rgba(255,255,255,0.125);
box-shadow: inset 0 1px 0 0 #111, inset 0px 2px 0px 0px rgba(255,255,255,0.125), 0px 1px 0px 0px #111,	inset 1px 0px 0px 0px #111,	inset -1px 0px 0px 0px #111,	inset 2px 0px 0px 0px rgba(255,255,255,0.125),	inset -2px 0px 0px 0px rgba(255,255,255,0.125);
cursor: pointer;
}

ul.menu li a:link,ul.menu li a:visited {
color: white;
text-shadow: 0 1px 0 rgba(0,0,0,0.25);
}

ul.menu li:hover {
background: #333;
}

ul.menu li:active {
background: #111;
}

/* Tip: A great way to organise your link states is :link, :visited, :hover, :active. I remember this because of "LoVe HAte" */

/* Sure, I could use :first-child and :last-child, but I'm not comfortable to step out THAT far into the unknown :) */

/* These make the top and bottom of the dropdown menu list items rounded. I could've done this on the ul, but just look at how messy that code is! If you know a better solution, tell me. */

li.first {
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
}

li.last {
-webkit-border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px;
border-radius: 0 0 4px 4px;
}

/* ---------------------------------------- */





/* CODE COLOURS & PRE STYLING */
/* ---------------------------------------- */

/* I could've used prettify.js, but Dabblet isn't primed and ready for that just yet, as far as I know. Besides, doing the syntax highlighting manually with <span>s gives me a bit of extra control. Oh, and it's 'colour' not 'color' :) */

/* CSS Colours */

/* Punctuation */
span.css-pun {
color: #666;
}

/* Value */
span.css-val {
color: #770088;
}

/* Identifier */
span.css-ide {
color: black;
}

/* Comment */
span.css-com,
span.js-com {
color: #A70;
}

/* HTML Colours */

/* Punctuation, Text */
span.html-pun,
span.html-txt {
color:black;
}

/* Tag Name */
span.html-tag {
color:#a0b;
}

/* Attribute Name */
span.html-attname {
color:blue;	
}

/* Attribute */
span.html-att {
color:#281;
}

/* Note: These colours stay true to the original colours used in jsFiddle's syntax highlighting */

/* Some <pre> tag styling :) */
pre {
color: #606161;
overflow: hidden;
height: 144px;
font-size: 12px;
line-height: 15px;
margin: 0;
padding: 10px;
font-family: "Inconsolata", "Monaco", "Consolas", "Andale Mono", Monaco,"Courier New","DejaVu Sans Mono","Bitstream Vera Sans Mono",monospace;
_font-family: "Courier New",monospace;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
}

/* ---------------------------------------- */





/* DEMO STYLES */
/* ---------------------------------------- */

/* These are the styles visibly used in the demo */

.foobar {
color: #f00842;
}

.robots {
color: #208075;
}

/* This here is a normalization of the <p> tags */
p {
margin: 0 0 15px 0;
font-size: 12px;
line-height: 15px;
}

/* ---------------------------------------- */





/* BUTTONS */
/* ---------------------------------------- */

/* Cloud Logo */
/* Many thanks to Dan Eden and his fantastical coding skils for the code I used and tweaked for this cloud logo. Original CSS cloud can be seen here http://dabblet.com/gist/2945570 */

a.cloud:link, a.cloud:visited {
display: block;
font-size: 0.5em;
float: left;
margin: 8px 0 0 0;
background-color: #FCFDFD;
width: 3em;
height: 1em;
-webkit-border-radius: 3em;
-moz-border-radius: 3em;
border-radius: 3em;
position: relative;
-webkit-box-shadow: 0 1px 0 rgba(0,0,0,.5);
-moz-box-shadow: 0 1px 0 rgba(0,0,0,.5);
box-shadow: 0 1px 0 rgba(0,0,0,.5);
}

a.cloud:before, a.cloud:after {
content: '';
position: absolute;
background-color: inherit;
width: 0.875em;
height: 0.875em;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
top: -0.4em;
left: 0.4375em;
}

a.cloud:after {
width: 1.4375em;
height: 1.4375em;
left: auto;
right: 0.4375em;
top: -0.625em;
}

a.cloud:hover {
background: #fff;
}

a.cloud:active {
background: #F7F7F9;
}



/* Base Button styles */
a:link, a:visited, a:hover, a:active {
color: white;
text-decoration: none;
outline: none;
}

a.button {
padding: 5px 8px;
font-size: 13px;
line-height: 20px;
width: 44px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
text-align: center;
display: inline;
}

a.button:link,
a.close:link {
text-shadow: 0 1px 0 rgba(0,0,0,0.5);
font-weight: bold;
}

a.button:link,a.button:visited {
-webkit-box-shadow: inset 0 0 0 1px rgba(0,0,0,0.5), inset 0 2px 0 0 rgba(255, 255, 255, 0.25),inset 2px 0px 0 0 rgba(255, 255, 255, 0.05),inset -2px 0px 0 0 rgba(255, 255, 255, 0.05);
-moz-box-shadow: inset 0 0 0 1px rgba(0,0,0,0.5), inset 0 2px 0 0 rgba(255, 255, 255, 0.25),inset 2px 0px 0 0 rgba(255, 255, 255, 0.05),inset -2px 0px 0 0 rgba(255, 255, 255, 0.05);
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.5), inset 0 2px 0 0 rgba(255, 255, 255, 0.25),inset 2px 0px 0 0 rgba(255, 255, 255, 0.05),inset -2px 0px 0 0 rgba(255, 255, 255, 0.05);
background-color: #6B82A5;
background-image: -webkit-linear-gradient(rgba(0,0,0,0.0),rgba(0,0,0,0.33));
background-image: -moz-linear-gradient(rgba(0,0,0,0.0),rgba(0,0,0,0.33));
background-image: -o-linear-gradient(rgba(0,0,0,0.0),rgba(0,0,0,0.33));
background-image: -ms-linear-gradient(rgba(0,0,0,0.0),rgba(0,0,0,0.33));
background-image: linear-gradient(rgba(0,0,0,0.0),rgba(0,0,0,0.33));
}

a.button:hover {
background-color: #7990B4;
}

a.button:active {
text-shadow: 0 -1px 0 rgba(0,0,0,0.5);
background-color: #536785;
-webkit-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.2),inset 0px 0px 0px 1px rgba(0, 0, 0, 0.5),0 1px 0px 0px rgba(255, 255, 255, 0.3);
-moz-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.2),inset 0px 0px 0px 1px rgba(0, 0, 0, 0.5),0 1px 0px 0px rgba(255, 255, 255, 0.3);
box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.2),inset 0px 0px 0px 1px rgba(0, 0, 0, 0.5),0 1px 0px 0px rgba(255, 255, 255, 0.3);
background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.30),rgba(0, 0, 0, 0.12));
background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.30),rgba(0, 0, 0, 0.12));
background-image: -o-linear-gradient(rgba(0, 0, 0, 0.30),rgba(0, 0, 0, 0.12));
background-image: -ms-linear-gradient(rgba(0, 0, 0, 0.30),rgba(0, 0, 0, 0.12));
background-image: linear-gradient(rgba(0, 0, 0, 0.30),rgba(0, 0, 0, 0.12));
}



/* Close Button */
a.close:link,a.close:visited {
font-size: 14px;
background: rgba(0,0,0,0.25);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
height: 18px;
width: 18px;
float: right;
line-height: 16px;
margin-top: 1px;
text-align: center;
-webkit-box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.25), 0px 1px 0px 0px rgba(255,255,255,0.25);
-moz-box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.25), 0px 1px 0px 0px rgba(255,255,255,0.25);
box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.25), 0px 1px 0px 0px rgba(255,255,255,0.25);
}

a.close:hover {
background: rgba(0,0,0,0.18);
}

a.close:active {
background: rgba(0,0,0,0.3);
}

/* ---------------------------------------- */





/* ANIMATION */
/* ---------------------------------------- */

a:link, ul.menu li, .content h1 {
-webkit-transition: .2s;
-moz-transition: .2s;
-o-transition: .2s;
transition: .2s;
}

a:active {
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
transition: none;
}

/* ---------------------------------------- */





/* MISC */
/* ---------------------------------------- */

/* BG NOISE */
/* This is just some subtle noise I put together. Well actually it's not noise per se, more of a subtle pattern to diffuse the background */

html:after {
background-image: -webkit-linear-gradient(45deg, rgba(0,0,0,0.0125) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.0125) 75%, rgba(0,0,0,0.0125)), -webkit-linear-gradient(45deg, rgba(0,0,0,0.0125) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.0125) 75%, rgba(0,0,0,0.0125));
background-image: -moz-linear-gradient(45deg, rgba(0,0,0,0.0125) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.0125) 75%, rgba(0,0,0,0.0125)), -moz-linear-gradient(45deg, rgba(0,0,0,0.0125) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.0125) 75%, rgba(0,0,0,0.0125));
background-image: -o-linear-gradient(45deg, rgba(0,0,0,0.0125) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.0125) 75%, rgba(0,0,0,0.0125)), -o-linear-gradient(45deg, rgba(0,0,0,0.0125) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.0125) 75%, rgba(0,0,0,0.0125));
background-image: -ms-linear-gradient(45deg, rgba(0,0,0,0.0125) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.0125) 75%, rgba(0,0,0,0.0125)), -ms-linear-gradient(45deg, rgba(0,0,0,0.0125) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.0125) 75%, rgba(0,0,0,0.0125));
background-image: linear-gradient(45deg, rgba(0,0,0,0.0125) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.0125) 75%, rgba(0,0,0,0.0125)), linear-gradient(45deg, rgba(0,0,0,0.0125) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.0125) 75%, rgba(0,0,0,0.0125));
-webkit-background-size: 2px 2px;
-moz-background-size: 2px 2px;
-o-background-size: 2px 2px;
background-size: 2px 2px;
background-position: 0 0, 1px 1px;
display: block;
content: "";
}

/* ---------------------------------------- */

dabblet.html

<body class="noise">
<div class="window">
    <div class="title">
    <div class="col-1">
   		<a href="#" class="cloud" alt="Code Cloud Logo"></a>
    </div>
    
    
<div class="col-2">

        <ul>
	        <li><a href="#" class="button" alt="Run">Run</a></li>
	       	<li><a href="#" class="button" alt="Update">Update</a></li>
	       	<li><a href="#" class="button" alt="Fork">Fork</a></li>
	        <li><a href="#" class="button" alt="Reset">Reset</a></li>
	        <li><a href="#" class="button" alt="Base">Base</a></li>
	        <li><a href="#" class="button" alt="Tidy">Tidy</a></li>
	        
<li class="wrapper">
<a href="#" class="button" alt="User">louisbullock ▾</a>
<ul class="menu">
<li class="first"><a href="#" alt="Dashboard">Dashboard</a></li>
<li><a href="#" alt="Public Fiddles">Public Fiddles</a></li>
<li><a href="#" alt="Change Password">Change Password</a></li>
<li class="last"><a href="#" alt="Logout">Logout</a></li>
</ul>
</li>

        	<li class="omega right"><a href="#" class="close" alt="Close">×</a></li>
        </ul>
        
 </div>
        
        
        
    </div>

    <div class="content">
    <div class="html col-1">
	<h1>HTML</h1>
	<pre>
<span class="html-pun">&lt;</span><span class="html-tag">p</span> <span class="html-attname">class</span><span class="html-pun">=</span><span class="html-att">"foobar"</span><span class="html-pun">&gt;</span><span class="html-txt">Foobar is a placeholder name.</span><span class="html-pun">&lt;/</span><span class="html-tag">p</span><span class="html-pun">&gt;</span>

<span class="html-pun">&lt;</span><span class="html-tag">p</span> <span class="html-attname">class</span><span class="html-pun">=</span><span class="html-att">"robots"</span><span class="html-pun">&gt;</span><span class="html-txt">Teal is the all-time favourite color of robots.</span><span class="html-pun">&lt;/</span><span class="html-tag">p</span><span class="html-pun">&gt;</span>
</pre>	
	</div>
   
    <div class="css col-2">
    <h1>CSS</h1>
    <pre>
<span class="css-com">/* TEXT COLORS */</span>

<span class="css-ide">.foobar</span> <span class="css-pun">{</span>
    <span class="css-ide">color</span><span class="css-pun">:</span><span class="css-val">#f00842</span>;
<span class="css-pun">}</span>

<span class="css-ide">.robots</span> <span class="css-pun">{</span>
    <span class="css-ide">color</span><span class="css-pun">:</span><span class="css-val">#208075</span><span class="css-pun">;</span>
<span class="css-pun">}</span>
</pre>

</div>

<div class="js col-3">
<h1>JavaScript</h1>
<pre>
<span class="js-com">// Made with ♥ by Louis Bullock
// http://louisbullock.com.au</span>
</pre>
</div>

<div class="result col-4">
<h1>Result</h1>
    <p class="foobar">Foobar is a placeholder name.</p>
	<p class="robots">Teal is the all-time favourite color of robots.</p>
</div>

</div>
</div>
​</body>

settings.json

{"view":"separate","fontsize":"80","seethrough":"","prefixfree":"","page":"result"}