Improve usability of scss. (a lot of form style stuff)

1 files changed, 56 insertions, 30 deletions

diff --git a/style.scss b/style.scss
index 627df42..7a86e20 100644
--- a/style.scss
+++ b/style.scss
@@ -1,3 +1,9 @@
+@mixin box-shadow($shadow) {
+	-webkit-box-shadow: $shadow;
+	   -moz-box-shadow: $shadow;
+	        box-shadow: $shadow;
+}
+
 body.loggedin {
 	div.infobar * {
 		margin: 0 1em;
@@ -26,33 +32,60 @@ body {
 		}
 	}
 	div.main {
-		form fieldset li {
-			clear: both;
-			padding: .5em 0;
-			label {
-				width: 25%;
-				float: left;
-			}
-			input, textarea {
-				width: 60%;
-				float: left;
-			}
-			input[type="password"] {
-				width: 30%;
-			}
-			p.form_data {
-				margin-left: 25%;
-			}
-			&.wide {
+		form {
+			fieldset li {
 				clear: both;
 				padding: .5em 0;
 				label {
-					width: 100%;
-					float: none;
+					width: 25%;
+					float: left;
 				}
 				input, textarea {
-					width: 100%;
-					float: none;
+					width: 60%;
+					float: left;
+				}
+				input[type="password"] {
+					width: 30%;
+				}
+				p.form_data {
+					margin-left: 25%;
+				}
+				&.wide {
+					clear: both;
+					padding: .5em 0;
+					label {
+						width: 100%;
+						float: none;
+					}
+					input, textarea {
+						width: 100%;
+						float: none;
+					}
+				}
+			}
+			table {
+				border: solid 1px black;
+				border-collapse: collapse;
+				border-spacing: 0;
+				td, th {
+					border: solid 1px black;
+					padding: 0;
+					.cell_width {
+						display: block;
+						overflow: hidden;
+						height: 0px;
+						@extend input[type="text"];
+					}
+					input {
+						outline: solid 1px black;
+						width: 100%;
+						background: transparent;
+						border: 0;
+						&:focus {
+							outline-color: blue;
+							@include box-shadow(inset 0 0 1pt 1pt rgba(0,0,1,.5));
+						}
+					}
 				}
 			}
 		}
@@ -67,19 +100,12 @@ a {
 }
 input[type="text"], textarea {
 	font-family: monospace;
+	font-size: 12pt;
 }
 iframe {
 	width: 100%;
 	height: 100%;
 }
-table, td {
-	border: solid 1px black;
-}
-table input {
-	border: none;
-	width: 100%;
-	background: transparent;
-}
 .error {
 	font-weight: bold;
 	color: red;