diff --git a/css/app.less b/css/app.less index 431ef44..4668886 100644 --- 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 index 31b69d9..5c1249c 100644 --- 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 index 6b772a1..a3b0389 100644 --- 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 new file mode 100644 index 0000000..aefa42f --- /dev/null +++ b/css/helpers.less @@ -0,0 +1,3 @@ +.no-gutter [class*="col-"] { + padding: 0; +} \ No newline at end of file diff --git a/css/light.less b/css/light.less index d68fe6d..cebbb5a 100644 --- 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 new file mode 100644 index 0000000..aabdfab --- /dev/null +++ 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 new file mode 100644 index 0000000..ddd5bb7 --- /dev/null +++ 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 index b7b16a3..a0af6b8 100644 --- 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; diff --git a/popup.html b/popup.html index 1fed3b4..6b3be05 100644 --- a/popup.html +++ b/popup.html @@ -10,7 +10,7 @@