styling

data/styles.css

@@ -1,53 +1,94 @@
-body {
+form .form-row {
+  display: flex;
+  justify-content: flex-end;
+  padding: .2em;
+}
+form .form-row > label {
+  padding: .5em 1em .5em 0;
+  flex: 1;
+}
+form .form-row > input {
+  flex: 2;
+}
+form .form-row > span {
+  flex: 2;
+}
+form .form-row > input,
+form .form-row > button {
+  padding: .5em;
+}
+form .form-row input[type="checkbox"] {
+  margin-top: 12px;
+}
+@media screen and (min-width: 768px) {
+  form .form-row > input,
+  form .form-row > span {
+    flex: 3;
+  }
+}
+@media screen and (min-width: 992px) {
+  form .form-row > input,
+  form .form-row > span {
+    flex: 4;
+  }
+}
+@media screen and (min-width: 1200px) {
+  form .form-row > input,
+  form .form-row > span {
+    flex: 5;
+  }
+}
+.sui {
   background: #000000;
   color: #0eb8c0;
   margin: 0;
   padding: 0;
 }
-body ul {
+.sui ul {
   padding: 0;
 }
-body ul li {
-  margin: 0 0 16px 0;
+.sui ul li {
+  margin: 0 0 0 0;
 }
-body p {
+.sui p {
   padding: 0;
   margin: 0;
 }
-body .content {
+.sui > .content {
   padding: 32px;
 }
-body .content .heading {
+.sui > .content .heading {
   font-size: 1.2em;
   margin-bottom: 16px;
   display: block;
 }
-body .content .container {
+.sui > .content .container {
   background: #333333;
   padding: 16px;
+  border-radius: 4px;
+  border: solid 1px #555555;
+  margin-bottom: 8px;
 }
-body .content input {
-  height: 24px;
+.sui > .content input[type="text"] {
+  height: 16px;
 }
-.settings .flex-outer li,
-.settings .flex-inner {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
+.sui > .content input[type="checkbox"] {
+  transform: scale(2);
 }
-.settings .flex-outer > li > label,
-.settings .flex-outer li p {
-  flex: 1 0;
+.sui > .content .form-row > button {
+  background: #097479;
+  color: white;
+  border: 0;
 }
-.settings .flex-outer > li > label + *,
-.settings .flex-inner {
-  flex: 1 0;
-}
-.spiro-control label {
-  width: 10%;
-  display: inline-block;
-}
-.spiro-control input[type="range"] {
-  width: 80%;
-  display: inline-block;
+/*
+.spiro-control {    
+    label {
+    	width: 10%;
+    	display: inline-block;
+    }
+    input[type="range"] {        
+    	width: 80%;
+    	display: inline-block;
+    }
 }
+*/