styling

frontend/styles/main.less

@@ -1,17 +1,23 @@
+@import "form.less";
 
 @color-black: #000000;
 @color-white: #eeeeee;
-@color-main: #0eb8c0;
+@color-main: #097479;
+@color-main-light: #0eb8c0;
 @color-container: #333333;
 
 @default-padding: 16px;
 @default-margin: 16px;
+@default-margin-small: 8px;
+@default-border-radius: 4px;
+@default-border-color: #555555;
 
-@input-height: 24px;
+@input-text-height: 16px;
+@input-checkbox-scale: 2;
 
-body {
+.sui {
     background: @color-black;
-    color: @color-main;
+    color: @color-main-light;
     
     margin: 0;
     padding: 0;
@@ -19,7 +25,7 @@ body {
     ul {
         padding: 0;
         li {        
-            margin: 0 0 @default-margin 0;
+            margin: 0 0 0 0;
         }
     }
     
@@ -28,7 +34,7 @@ body {
         margin: 0;
     }
     
-    .content {
+    > .content {
         padding: @default-padding * 2;
         .heading {
             font-size: 1.2em;
@@ -38,10 +44,22 @@ body {
         .container {
             background: @color-container;
             padding: @default-padding;
+            border-radius: @default-border-radius;
+            border: solid 1px @default-border-color;
+            margin-bottom: @default-margin-small;
         }
-        input {
-            height: @input-height;
+        input[type="text"] {
+            height: @input-text-height;
         }
+        input[type="checkbox"] {
+            transform: scale(@input-checkbox-scale);
+        }
+        .form-row > button {
+           background: @color-main;
+           color: white;
+           border: 0;
+         }
+        
     }
     .sidebar {
         .item {
@@ -51,24 +69,8 @@ body {
 }
 
 .settings {
-    .flex-outer li,
-    .flex-inner {
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-    }
-    
-    .flex-outer > li > label,
-    .flex-outer li p {
-      flex: 1 0;
-    }
-    
-    .flex-outer > li > label + *,
-    .flex-inner {
-      flex: 1 0;
-    }
 }
-
+/*
 .spiro-control {    
     label {
     	width: 10%;
@@ -79,3 +81,4 @@ body {
     	display: inline-block;
     }
 }
+*/