Design modifications to edit.php

Changed the placement and styling of inputs to align all variables entered for easy viewing & comparing
kfrank · May 9, 2012 · c856fe4 · c856fe4
1 parent 8e6b203
commit c856fe4
Show file tree

Hide file tree

Showing 6 changed files with 9,642 additions and 110 deletions.
diff --git a/_/css/application.css b/_/css/application.css
@@ -1,2 +1,375 @@
-/* This beautiful CSS-File has been crafted with LESS (lesscss.org) and compiled by simpLESS (wearekiss.com/simpless) */
-.clearfix:before,section:before,.clearfix:after,section:after{content:"";display:table}.clearfix:after,section:after{clear:both}body{background:url(../img/dark-bg.png);background-attachment:fixed}.hidden{font:.1em/0 a;color:transparent}.skip{font:1em/1 Helvetica,Arial,sans-serif;color:#000;background:#fff;background:-webkit-linear-gradient( #fff, #dbdbdb);background:-moz-linear-gradient( #fff, #dbdbdb);border-radius:6px;-webkit-box-shadow:#fff 0 -1px 0 inset,rgba(0,0,0,.5) 0 4px 30px;-moz-box-shadow:#fff 0 -1px 0 inset,rgba(0,0,0,.5) 0 4px 30px;box-shadow:#fff 0 -1px 0 inset,rgba(0,0,0,.5) 0 4px 30px;margin:10px 0 0 -100px;z-index:50;padding:15px 0;text-align:center;border-radius:4px;position:absolute;top:-100px;width:200px;left:50%}.skip:focus{top:0}.main>header{background:#383e4d;background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzM4M2U0ZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxZDIwMjgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);background:-moz-linear-gradient(top, #383e4d 0, #1d2028 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%, #383e4d),color-stop(100%, #1d2028));background:-webkit-linear-gradient(top, #383e4d 0, #1d2028 100%);background:-o-linear-gradient(top, #383e4d 0, #1d2028 100%);background:-ms-linear-gradient(top, #383e4d 0, #1d2028 100%);background:linear-gradient(top, #383e4d 0, #1d2028 100%);filter:progid:dximagetransform.microsoft.gradient(startColorstr='#383e4d', endColorstr='#1d2028', GradientType=0);margin:0;border-bottom:1px solid #121212;-webkit-box-shadow:0 3px 10px rgba(0,0,0,.5);-moz-box-shadow:0 3px 10px rgba(0,0,0,.5);box-shadow:0 3px 10px rgba(0,0,0,.5);zoom:1;position:fixed;width:100%}.main>header:before,.main>header:after{content:"";display:table}.main>header:after{clear:both}.main>header>a{float:left;border:2px solid #1d2028;display:inline-block;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;background:rgba(255,250,225,.1) url(../img/collapse.png) no-repeat center;width:38px;height:28px;color:transparent;font:0/0 a;margin:10px;box-shadow:inset 0 1px 1px rgba(255,252,240,.15),0px 1px 1px rgba(255,252,240,.1)}.main>header>a:last-child{float:right;background:rgba(255,250,225,.1) url(../img/new.png) no-repeat center}.main>header>a:hover{background:rgba(255,250,225,.2) url(../img/collapse.png) no-repeat center}.main>header>a:last-child:hover{background:rgba(255,250,225,.2) url(../img/new.png) no-repeat center}.main>header h1{margin:-10px auto 0;text-align:center;width:108px;float:left;margin-left:-54px;left:50%;position:absolute}.main>header h1 a{font:0/0 a;color:transparent;background:url(../img/logo.png) no-repeat center;display:inline-block;width:107px;height:31px}nav{position:fixed;z-index:100;color:#F8F8F8;background:#373d4c;width:20%;left:0;top:0;height:100%;box-shadow:5px 0 10px rgba(0,0,0,.25);border-right:2px solid #1D2028}nav ul{list-style:none;margin:0;padding:0}nav a{padding:17px 25px;display:block;color:#fffae1;text-decoration:none;box-shadow:inset 0 1px 1px rgba(255,255,255,.05);border-bottom:1px solid #2a2e3a;font-weight:200;text-shadow:0 -1px 1px rgba(0,0,0,.5)}nav a:hover{text-decoration:none;color:#fffae1;background:rgba(255,255,255,.15)}#content{margin-top:53px}.main{position:absolute;left:0;overflow:hidden;width:100%}ul.brew-list{list-style:none;margin:0;padding:0}.brew{-webkit-transition:all .1s ease;-moz-transition:all .1s ease;-o-transition:all .1s ease;-ms-transition:all .1s ease;transition:all .1s ease;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;border-right:1px solid rgba(0,0,0,.35);border-bottom:1px solid rgba(0,0,0,.35);padding:20px;display:block;color:#fffae1}.brew:before,.brew:after{content:"";display:table}.brew:after{clear:both}.brew:hover{box-shadow:0 0 10px rgba(0,0,0,.4)}.brew:hover img{border:1px solid #fc7537;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.brew:nth-child(even){-webkit-box-shadow:rgba(0,0,0,.3) 30px 0 30px -30px inset,rgba(0,0,0,.3) -30px 0 30px -30px inset;-moz-box-shadow:rgba(0,0,0,.3) 30px 0 30px -30px inset,rgba(0,0,0,.3) -30px 0 30px -30px inset;box-shadow:rgba(0,0,0,.3) 30px 0 30px -30px inset,rgba(0,0,0,.3) -30px 0 30px -30px inset;background:rgba(0,0,0,.02)}.brew:nth-child(even):hover{box-shadow:inset 0 0 10px rgba(0,0,0,.4)}.brew figure{margin:0;line-height:0;float:left;width:10%;min-width:50px}.brew img{max-width:100%;border-radius:4px}.brew figcaption{margin:0 0 0 20px;float:left}.brew figcaption h2{margin:2% 0 0;font-weight:400}.brew figcaption h3,.brew figcaption p{margin:10px 0 5px;font-weight:100;letter-spacing:.1em}.panel{margin:0 20px 20px;padding:20px;background:#4c556a;border-radius:4px;color:#FFFAE1;font-weight:200}.help-block{font-size:.875em;font-style:italic;margin:.25em 0}.control-group{margin-bottom:1em}section #general,section #grains,section #hops,section #yeast{margin:0 20px}input{padding:4px;border-radius:4px;border:1px solid #000;box-shadow:inset 0 2px 5px rgba(0,0,0,.5),0 1px 2px rgba(0,0,0,.25)}.form-horizontal h2{font-weight:200;font-size:1em;font-style:italic}.pull-right{float:right}.add{background:rgba(255,250,225,.1) url(../img/new.png) no-repeat center;border:2px solid #1d2028;display:inline-block;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;width:38px;height:28px;float:left;margin-left:20px;color:transparent;font:0/0 a;box-shadow:inset 0 1px 1px rgba(255,252,240,.15),0px 1px 1px rgba(255,252,240,.1);cursor:pointer}.add:hover{background:rgba(255,250,225,.2) url(../img/new.png) no-repeat center}.contain{float:left;width:92%}ul.actions{list-style:none;margin-right:20px;text-align:right}ul.actions li{display:inline;margin-left:10px}ul.actions li a{background-color:#4C556A;border-radius:3px;cursor:pointer;display:inline-block;padding:3px 10px}
+.clearfix:before,
+section:before,
+header:before,
+.panel:before,
+.clearfix:after,
+section:after,
+header:after,
+.panel:after {
+  content: "";
+  display: table;
+}
+.clearfix:after,
+section:after,
+header:after,
+.panel:after {
+  clear: both;
+}
+body {
+  background: url(../img/dark-bg.png);
+  background-attachment: fixed;
+}
+.hidden {
+  font: 0.1em/0 a;
+  color: transparent;
+}
+.skip {
+  font: 1em/1 Helvetica, Arial, sans-serif;
+  color: #000;
+  background: white;
+  background: -webkit-linear-gradient(#ffffff, #dbdbdb);
+  background: -moz-linear-gradient(#ffffff, #dbdbdb);
+  border-radius: 6px;
+  -webkit-box-shadow: #ffffff 0px -1px 0px inset, rgba(0, 0, 0, 0.5) 0px 4px 30px;
+  -moz-box-shadow: #ffffff 0px -1px 0px inset, rgba(0, 0, 0, 0.5) 0px 4px 30px;
+  box-shadow: #ffffff 0px -1px 0px inset, rgba(0, 0, 0, 0.5) 0px 4px 30px;
+  margin: 10px 0 0 -100px;
+  z-index: 50;
+  padding: 15px 0;
+  text-align: center;
+  border-radius: 4px;
+  position: absolute;
+  top: -100px;
+  width: 200px;
+  left: 50%;
+}
+.skip:focus {
+  top: 0px;
+}
+.main > header {
+  background: #383e4d;
+  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzM4M2U0ZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxZDIwMjgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
+  background: -moz-linear-gradient(top, #383e4d 0%, #1d2028 100%);
+  /* FF3.6+ */
+
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #383e4d), color-stop(100%, #1d2028));
+  /* Chrome,Safari4+ */
+
+  background: -webkit-linear-gradient(top, #383e4d 0%, #1d2028 100%);
+  /* Chrome10+,Safari5.1+ */
+
+  background: -o-linear-gradient(top, #383e4d 0%, #1d2028 100%);
+  /* Opera 11.10+ */
+
+  background: -ms-linear-gradient(top, #383e4d 0%, #1d2028 100%);
+  /* IE10+ */
+
+  background: linear-gradient(top, #383e4d 0%, #1d2028 100%);
+  /* W3C */
+
+  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#383e4d', endColorstr='#1d2028', GradientType=0);
+  /* IE6-8 */
+
+  margin: 0;
+  border-bottom: 1px solid #121212;
+  -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
+  -moz-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
+  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
+  zoom: 1;
+  position: fixed;
+  width: 100%;
+  height: 52px;
+}
+.main > header:before,
+.main > header:after {
+  content: "";
+  display: table;
+}
+.main > header:after {
+  clear: both;
+}
+.main > header > a {
+  float: left;
+  border: 2px solid #1d2028;
+  display: inline-block;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+  background: rgba(255, 250, 225, 0.1) url(../img/collapse.png) no-repeat center;
+  width: 38px;
+  height: 28px;
+  color: transparent;
+  font: 0/0 a;
+  margin: 10px;
+  box-shadow: inset 0px 1px 1px rgba(255, 252, 240, 0.15), 0px 1px 1px rgba(255, 252, 240, 0.1);
+}
+.main > header > a:last-child {
+  float: right;
+  background: rgba(255, 250, 225, 0.1) url(../img/new.png) no-repeat center;
+}
+.main > header > a:hover {
+  background: rgba(255, 250, 225, 0.2) url(../img/collapse.png) no-repeat center;
+}
+.main > header > a:last-child:hover {
+  background: rgba(255, 250, 225, 0.2) url(../img/new.png) no-repeat center;
+}
+.main > header h1 {
+  margin: -10px auto 0;
+  text-align: center;
+  width: 108px;
+  float: left;
+  margin-left: -54px;
+  left: 50%;
+  position: absolute;
+}
+.main > header h1 a {
+  font: 0/0 a;
+  color: transparent;
+  background: url(../img/logo.png) no-repeat center;
+  display: inline-block;
+  width: 107px;
+  height: 31px;
+}
+nav {
+  position: fixed;
+  z-index: 100;
+  color: #F8F8F8;
+  background: #373d4c;
+  width: 20%;
+  left: 0px;
+  top: 0px;
+  height: 100%;
+  box-shadow: 5px 0 10px rgba(0, 0, 0, 0.25);
+  border-right: 2px solid #1D2028;
+}
+nav ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+nav a {
+  padding: 17px 25px;
+  display: block;
+  color: #fffae1;
+  text-decoration: none;
+  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05);
+  border-bottom: 1px solid #2a2e3a;
+  font-weight: 200;
+  text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.5);
+}
+nav a:hover {
+  text-decoration: none;
+  color: #fffae1;
+  background: rgba(255, 255, 255, 0.15);
+}
+#content {
+  margin-top: 53px;
+}
+.main {
+  position: absolute;
+  left: 0px;
+  overflow: hidden;
+  width: 100%;
+}
+ul.brew-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.brew {
+  -webkit-transition: all 0.1s ease;
+  -moz-transition: all 0.1s ease;
+  -o-transition: all 0.1s ease;
+  -ms-transition: all 0.1s ease;
+  transition: all 0.1s ease;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  box-sizing: border-box;
+  border-right: 1px solid rgba(0, 0, 0, 0.35);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.35);
+  padding: 20px;
+  display: block;
+  color: #fffae1;
+}
+.brew:before,
+.brew:after {
+  content: "";
+  display: table;
+}
+.brew:after {
+  clear: both;
+}
+.brew:hover {
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
+}
+.brew:hover img {
+  border: 1px solid #fc7537;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.brew:nth-child(even) {
+  -webkit-box-shadow: rgba(0, 0, 0, 0.3) 30px 0px 30px -30px inset, rgba(0, 0, 0, 0.3) -30px 0px 30px -30px inset;
+  -moz-box-shadow: rgba(0, 0, 0, 0.3) 30px 0px 30px -30px inset, rgba(0, 0, 0, 0.3) -30px 0px 30px -30px inset;
+  box-shadow: rgba(0, 0, 0, 0.3) 30px 0px 30px -30px inset, rgba(0, 0, 0, 0.3) -30px 0px 30px -30px inset;
+  background: rgba(0, 0, 0, 0.02);
+}
+.brew:nth-child(even):hover {
+  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.4);
+}
+.brew figure {
+  margin: 0;
+  line-height: 0;
+  float: left;
+  width: 10%;
+  min-width: 50px;
+}
+.brew img {
+  max-width: 100%;
+  border-radius: 4px;
+}
+.brew figcaption {
+  margin: 0 0 0 20px;
+  float: left;
+}
+.brew figcaption h2 {
+  margin: 2% 0 0;
+  font-weight: 400;
+}
+.brew figcaption h3,
+.brew figcaption p {
+  margin: 10px 0 5px;
+  font-weight: 100;
+  letter-spacing: 0.1em;
+}
+.panel {
+  margin: 0 20px 20px;
+  padding: 0 10px;
+  background: #4c556a;
+  border-radius: 4px;
+  color: #FFFAE1;
+  font-weight: 200;
+}
+.help-block {
+  font-size: 0.875em;
+  font-style: italic;
+  margin: 0.25em 0;
+}
+.control-group {
+  margin-bottom: 1em;
+}
+section #general,
+section #grains,
+section #hops,
+section #yeast {
+  margin: 0 20px;
+}
+section #general h2,
+section #grains h2,
+section #hops h2,
+section #yeast h2 {
+  margin-left: 20px;
+}
+input,
+select {
+  padding: 6px;
+  border-radius: 4px;
+  background: #363b4c;
+  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(255, 255, 255, 0.05);
+  border: none;
+  font-size: 1em;
+  color: rgba(246, 250, 225, 0.5);
+  -webkit-appearance: none;
+}
+input:focus,
+select:focus {
+  background: #FFFAE1;
+  outline: 0;
+  color: #333;
+  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
+}
+label {
+  color: transparent;
+  font: 0.1em/0 sans-serif;
+}
+.form-horizontal h2 {
+  font-weight: 200;
+  font-size: 1em;
+  font-style: italic;
+}
+.pull-right {
+  float: right;
+}
+.add,
+.remove {
+  background: rgba(255, 250, 225, 0.1) url(../img/new.png) no-repeat center;
+  border: 2px solid #1d2028;
+  display: inline-block;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+  width: 38px;
+  height: 28px;
+  float: left;
+  margin-left: 20px;
+  color: transparent;
+  font: 0/0 a;
+  box-shadow: inset 0px 1px 1px rgba(255, 252, 240, 0.15), 0px 1px 1px rgba(255, 252, 240, 0.1);
+  cursor: pointer;
+}
+.add:hover,
+.remove:hover {
+  background: rgba(255, 250, 225, 0.2) url(../img/new.png) no-repeat center;
+}
+.remove {
+  background: rgba(0, 0, 0, 0.25) url(../img/delete.png) no-repeat center;
+  margin: 20px 0 0;
+  height: 30px;
+}
+.remove:hover {
+  background: rgba(255, 250, 225, 0.2) url(../img/delete.png) no-repeat center;
+}
+.contain {
+  float: left;
+}
+ul.actions {
+  list-style: none;
+  margin-right: 20px;
+  text-align: right;
+}
+ul.actions li {
+  display: inline;
+  margin-left: 10px;
+}
+ul.actions li a {
+  background-color: #4C556A;
+  border-radius: 3px;
+  cursor: pointer;
+  display: inline-block;
+  padding: 3px 10px;
+}
+input.backless {
+  margin: 20px;
+  background: transparent;
+  border: none;
+  border-bottom: 1px dashed #FFFAE1;
+  box-shadow: none;
+  border-radius: 0;
+  font-size: 1.5em;
+  color: #FFFAE1;
+}
+input.backless:focus {
+  background: #4C556A;
+  border-radius: 4px 4px 0 0;
+  outline: 0;
+}
+.control-group {
+  float: left;
+  margin-right: 10px;
+}
+.help-block {
+  margin-left: 5px;
+  color: rgba(255, 250, 225, 0.5);
+}