Merge pull request #8 from lightsoda/master

Some restyling of settings page, minor fixes for themes.
Chaser324 · Jul 11, 2014 · a5e1160 · a5e1160
2 parents 75161c7 + d340198
commit a5e1160
Show file tree

Hide file tree

Showing 9 changed files with 167 additions and 116 deletions.
diff --git a/css/app.less b/css/app.less
@@ -8,12 +8,15 @@
 
 @import "variables.less";
 
+@import "helpers.less";
 @import "base.less";
 
 body.livebomb-dark {
+	@import "override-dark.less";
     @import "dark.less";
 }
 
 body.livebomb-light {
+	@import "override-light.less";
     @import "light.less";
 }
diff --git a/css/base.less b/css/base.less
@@ -35,12 +35,15 @@ body {
         outline: none;
     }
 
-    #logo {
-        padding-top: 2px;
+    #logo,
+    #lb-logo {
+        max-height: 54px;
+        padding: 5px;
     }
-
     #lb-logo {
-        margin-top: 14px;
+        height: 32px;
+        margin-top: 20px;
+        float: right;
     }
 }
 
@@ -57,6 +60,7 @@ body {
         margin-bottom: 1px;
         border-bottom: 1px;
         height: 36px;
+        border-radius: 0;
 
         &:hover, .active {
             .box-shadow(~'inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05)');
@@ -119,10 +123,8 @@ body {
 
 .lb-schedule-p {
     position:  absolute;
-    bottom: 5px;
-    right: 10px;
+    bottom: 0px;
     left: 10px;
-    margin: 0;
     font-size: 13px;
     font-weight: bold;
 }

diff --git a/css/dark.less b/css/dark.less
@@ -1,28 +1,11 @@
 color: #f5f5f5;
 background-image:url(/images/dark-noise.png);
-text-shadow:1px 0px 3px #333;
+//text-shadow:1px 0px 3px #333;
 
 /***** TAB BUTTONS *****/
 
 #lb-controls {
     box-shadow-bottom: 10px 0 10px -10px black;
-
-    .btn {
-        border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
-        background-color: #777;
-        #gradient.vertical(#444; #222; 0%; 100%);
-        color: #f5f5f5;
-        text-shadow: 2px 2px #000;
-
-        &:hover {
-            #gradient.vertical(#333; #111; 0%; 100%);
-        }
-
-        &.active {
-            background-color: #222;
-            background-image: none;
-        }
-    }
 }
 
 /***** SCHEDULE TAB *****/

diff --git a/css/helpers.less b/css/helpers.less
@@ -0,0 +1,3 @@
+.no-gutter [class*="col-"] {
+    padding: 0;
+}
diff --git a/css/light.less b/css/light.less
@@ -1,32 +1,19 @@
 color: #2b2b2b;
-background-image:url(/images/light-noise.png);
+//background-image:url(/images/light-noise.png);
 text-shadow: 0px 1px 1px #fff;
 
 /***** TAB BUTTONS *****/
 
 #lb-controls {
+    background: black;
     box-shadow-bottom: 10px 0 10px -10px black;
-
-    .btn {
-        border-color: #898989 #898989 hsl(0, 0%, 49%);
-        #gradient.vertical(#bbb; #999; 0%; 100%);
-        text-shadow: 0 1px 1px rgba(255, 255, 255, 0.33);
-
-        &:hover {
-            #gradient.vertical(#aaa; #888; 0%; 100%);
-        }
-
-        &.active {
-            background-color: #999;
-            background-image: none;
-        }
-    }
 }
 
 /***** SCHEDULE TAB *****/
 
 #lb-schedule-header {
-    background-image: url(/images/tweed-light.png);
+    background-image: url(/images/tweed.png);
+    i { color: white; }
 }
 
 #lb-schedule-loading {
@@ -39,6 +26,15 @@ li {
     .box-shadow(inset 50px 0px 140px 23px rgba(200,200,200,0.75));
 }
 
+#lb-schedule-items {
+    ul {
+        h4 {
+            font-weight: bold;
+            text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
+        }
+    }
+}
+
 /***** LIVE TAB *****/
 
 #lb-status-live {

diff --git a/css/override-dark.less b/css/override-dark.less
@@ -0,0 +1,34 @@
+// -------------------------------
+// Variables
+// -------------------------------
+@border-color-base: black;
+@border-color-accent: lighten(@border-color-base, 20%);
+
+@label-font-size: @font-size-small;
+@label-color: @gray-light;
+
+@btn-theme-color: @gray-lighter;
+@btn-theme-bg: @gray-dark;
+@btn-theme-border: @gray-darker;
+
+// -------------------------------
+// Overrides
+// -------------------------------
+
+label {
+	font-weight: normal;
+	font-size: @label-font-size;
+	color: @label-color;
+}
+
+.form-group {
+	margin: 0;
+	border-top: solid 1px @border-color-base;
+	border-bottom: solid 1px @border-color-accent;
+	padding: @padding-large-vertical;
+}
+
+.btn-theme {
+  .button-variant(@btn-theme-color; @btn-theme-bg; @btn-theme-border);
+  #gradient > .vertical(lighten(@btn-theme-bg, 10%), @btn-theme-bg);
+}
diff --git a/css/override-light.less b/css/override-light.less
@@ -0,0 +1,34 @@
+// -------------------------------
+// Variables
+// -------------------------------
+@border-color-base: @gray-lighter;
+@border-color-accent: lighten(@border-color-base, 20%);
+
+@label-font-size: @font-size-small;
+@label-color: @gray-dark;
+
+@btn-theme-color: @gray-darker;
+@btn-theme-bg: @gray-lighter;
+@btn-theme-border: darken(@gray-lighter, 5%);
+
+// -------------------------------
+// Overrides
+// -------------------------------
+
+label {
+	font-weight: normal;
+	font-size: @label-font-size;
+	color: @label-color;
+}
+
+.form-group {
+	margin: 0;
+	border-top: solid 1px @border-color-base;
+	border-bottom: solid 1px @border-color-accent;
+	padding: @padding-large-vertical;
+}
+
+.btn-theme {
+  .button-variant(@btn-theme-color; @btn-theme-bg; @btn-theme-border);
+  #gradient > .vertical(lighten(@btn-theme-bg, 10%), @btn-theme-bg);
+}
diff --git a/css/variables.less b/css/variables.less
@@ -99,9 +99,9 @@
 @line-height-large:         1.33;
 @line-height-small:         1.5;
 
-@border-radius-base:        0px;
-@border-radius-large:       0px;
-@border-radius-small:       0px;
+@border-radius-base:        4px;
+@border-radius-large:       6px;
+@border-radius-small:       3px;
 
 //** Global color for active items (e.g., navs or dropdowns).
 @component-active-color:    #fff;