Merge branch 'style-the-page'

2 files changed, 172 insertions, 10 deletions

diff --git a/assets/css/application.css b/assets/css/application.css
index 255ff68..0de3a55 100644
--- a/assets/css/application.css
+++ b/assets/css/application.css
@@ -1,6 +1,124 @@
 /* Application */
 /* General global styles */
 
+
+/* . Layout . */
+body {
+	background: url('../images/background.png') repeat;
+	padding: 0 2.8em;
+	font-family: Helvetica, sans-serif;
+}
+
+
+header {
+	font-family: neoretrodrawregular, znikomitno24regular, seasideresortnfregular, itsadzokes01regular, sans-serif;
+	font-size: 80px;
+	margin: 0.2em 0 0.4em;
+}
+
+
 #samples {
-	margin: 3em 2em;
+	margin: 3em 0;
+}
+
+
+
+/* . Inputs . */
+.url-input {
+	width: 80%;
+	padding: 0.3em 0.4em;
+	font-size: 1.5em;
+}
+
+
+.key { /* http://cssdeck.com/labs/apple-keyboard-via-css3 */
+	display: block;
+	color: #aaa;
+	font: bold 18pt Helvetica, sans-serif;
+	text-decoration: none;
+	text-align: center;
+	width: 44px;
+	height: 41px;
+	margin: 5px;
+	background: #eff0f2;
+	-moz-border-radius: 4px;
+	border-radius: 4px;
+	border-top: 1px solid #f5f5f5;
+	-webkit-box-shadow: 
+		inset 0 0 25px #e8e8e8,
+		0 1px 0 #c3c3c3,
+		0 2px 0 #c9c9c9,
+		0 2px 3px #333;
+	-moz-box-shadow: 
+		inset 0 0 25px #e8e8e8,
+		0 1px 0 #c3c3c3,
+		0 2px 0 #c9c9c9,
+		0 2px 3px #333;
+	box-shadow: 
+		inset 0 0 25px #e8e8e8,
+		0 1px 0 #c3c3c3,
+		0 2px 0 #c9c9c9,
+		0 2px 3px #333;
+	text-shadow: 0px 1px 0px #f5f5f5;
+}
+
+.key-input {
+	border: none;
+}
+
+.key-input:hover {
+	background: #dddee0;
+}
+
+
+
+/* . Buttons . */
+.button {
+	border-width: 1px;
+	border-style: solid;
+	cursor: pointer;
+	padding: 0.05em 0.4em 0.2em;
+	position: relative;
+	top: -0.07em;
+	-webkit-border-radius: 3px;
+	border-radius: 3px;
+	-webkit-box-shadow:  0px 4px 1px 0px rgba(40, 150, 44, 1);
+	box-shadow:  0px 4px 1px 0px rgba(40, 150, 44, 1);
+	-webkit-transition: all 150ms linear;
+	-moz-transition: all 150ms linear;
+	-o-transition: all 150ms linear;
+	-ms-transition: all 150ms linear;
+	transition: all 150ms linear;
+}
+
+.button:active {
+	top: 0;
+	-webkit-box-shadow:  0px 0px 1px 0px rgba(40, 150, 44, 1);
+	box-shadow:  0px 0px 1px 0px rgba(40, 150, 44, 1);
+}
+
+.button:focus {
+	outline: none;
+}
+
+.button.green {
+	background-color: #34bf39;
+	border-color: #2faf34;
+	color: #eee;
+	text-shadow: 0px 1px 2px rgba(0,0,0,0.9);
+}
+
+.button.green:hover {
+	background-color: #39d740;
+	color: #fff;
+}
+
+.button.green:active {
+	background-color: #2ea732;
+	color: #ddd;
+}
+
+.button.green.large {
+	font-size: 2em;
+	line-height: 1;
 }
\ No newline at end of file
diff --git a/assets/css/sample-editor.css b/assets/css/sample-editor.css
index 90ac195..4df9152 100644
--- a/assets/css/sample-editor.css
+++ b/assets/css/sample-editor.css
@@ -3,14 +3,17 @@
 
 .edit-sample > div {
 	display: inline-block;
+	vertical-align: middle;
 }
 
 .progress-bar {
-	border: 1px solid #777;
-	width: 50%;
-	height: 2em;
+	border: 1px solid #b9b9b9;
+	width: 90%;
+	height: 3em;
 	position: relative;
-	background-color: #ddd; /* change to something more pleasant later */
+	background-color: #ddd;
+	-webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.15);
+	box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.15);
 }
 
 .clip-line {
@@ -18,24 +21,65 @@
 	position: relative;
 	z-index: 5;
 	width: 1px;
-	height: 2em;
-	background-color: #222;
+	height: 3em;
+	background-color: #797979;
 }
 
 .drag-handle {
 	width: 2em;
 	height: 1em;
 	position: relative;
-	top: 0.5em;
+	top: 0.7em;
 	left: -1em;
+	padding: 0.3em;
 	cursor: ew-resize;
-	background-color: yellow;
+	color: #414141;
+	background-color: #dfe100;
+	
+	background: #e5e500; /* Old browsers */
+	background: -moz-linear-gradient(top,  #e5e500 0%, #dfe100 100%); /* FF3.6+ */
+	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e5e500), color-stop(100%,#dfe100)); /* Chrome,Safari4+ */
+	background: -webkit-linear-gradient(top,  #e5e500 0%,#dfe100 100%); /* Chrome10+,Safari5.1+ */
+	background: -o-linear-gradient(top,  #e5e500 0%,#dfe100 100%); /* Opera 11.10+ */
+	background: -ms-linear-gradient(top,  #e5e500 0%,#dfe100 100%); /* IE10+ */
+	background: linear-gradient(to bottom,  #e5e500 0%,#dfe100 100%); /* W3C */
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e500', endColorstr='#dfe100',GradientType=0 ); /* IE6-9 */
+}
+
+.start-drag-handle {
+	left: -2.6em;
+	-webkit-border-radius: 3px 0px 0px 3px;
+	border-radius: 3px 0px 0px 3px;
+	-webkit-box-shadow: -2px 1px 1px 0px rgba(0, 0, 0, 0.2);
+	box-shadow: -2px 1px 1px 0px rgba(0, 0, 0, 0.2);
+}
+
+.stop-drag-handle {
+	left: 0.05em;
+	-webkit-border-radius: 0px 3px 3px 0px;
+	border-radius: 0px 3px 3px 0px;
+	-webkit-box-shadow: 2px 1px 1px 0px rgba(0, 0, 0, 0.2);
+	box-shadow: 2px 1px 1px 0px rgba(0, 0, 0, 0.2);
 }
 
 .selected-bar {
 	width: 0;
-	height: 2em;
+	height: 3em;
 	position: absolute;
 	top: 0;
 	background-color: #4087a0;
+	background: #499db7; /* Old browsers */
+	background: -moz-linear-gradient(top,  #499db7 0%, #4087a0 100%); /* FF3.6+ */
+	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#499db7), color-stop(100%,#4087a0)); /* Chrome,Safari4+ */
+	background: -webkit-linear-gradient(top,  #499db7 0%,#4087a0 100%); /* Chrome10+,Safari5.1+ */
+	background: -o-linear-gradient(top,  #499db7 0%,#4087a0 100%); /* Opera 11.10+ */
+	background: -ms-linear-gradient(top,  #499db7 0%,#4087a0 100%); /* IE10+ */
+	background: linear-gradient(to bottom,  #499db7 0%,#4087a0 100%); /* W3C */
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499db7', endColorstr='#4087a0',GradientType=0 ); /* IE6-9 */
+}
+
+
+/* Key input */
+.edit-sample .key-input {
+	margin-top: 0.1em;
 }
\ No newline at end of file