diff --git a/app/assets/images/layout/drop-menu-background.png b/app/assets/images/layout/drop-menu-background.png new file mode 100644 index 0000000..4bb9e9b Binary files /dev/null and b/app/assets/images/layout/drop-menu-background.png differ diff --git a/app/assets/images/layout/flash-background.png b/app/assets/images/layout/flash-background.png new file mode 100644 index 0000000..87c365d Binary files /dev/null and b/app/assets/images/layout/flash-background.png differ diff --git a/app/assets/images/layout/flash-error-background.png b/app/assets/images/layout/flash-error-background.png new file mode 100644 index 0000000..c9ec74a Binary files /dev/null and b/app/assets/images/layout/flash-error-background.png differ diff --git a/app/assets/images/layout/flash-error-icon.png b/app/assets/images/layout/flash-error-icon.png new file mode 100644 index 0000000..71bc36e Binary files /dev/null and b/app/assets/images/layout/flash-error-icon.png differ diff --git a/app/assets/images/layout/flash-notice-background.png b/app/assets/images/layout/flash-notice-background.png new file mode 100644 index 0000000..e52af38 Binary files /dev/null and b/app/assets/images/layout/flash-notice-background.png differ diff --git a/app/assets/images/layout/flash-notice-icon.png b/app/assets/images/layout/flash-notice-icon.png new file mode 100644 index 0000000..4c06a4d Binary files /dev/null and b/app/assets/images/layout/flash-notice-icon.png differ diff --git a/app/assets/images/layout/images/body-background_10.png b/app/assets/images/layout/images/body-background_10.png deleted file mode 100644 index e8f4219..0000000 Binary files a/app/assets/images/layout/images/body-background_10.png and /dev/null differ diff --git a/app/assets/images/layout/images/sidebar-shadow_07.png b/app/assets/images/layout/images/sidebar-shadow_07.png deleted file mode 100644 index 27d037b..0000000 Binary files a/app/assets/images/layout/images/sidebar-shadow_07.png and /dev/null differ diff --git a/app/assets/javascripts/application.js.coffee b/app/assets/javascripts/application.js.coffee index 4975319..dd04dd1 100644 --- a/app/assets/javascripts/application.js.coffee +++ b/app/assets/javascripts/application.js.coffee @@ -26,4 +26,5 @@ $ -> $wrapper.removeClass 'disabled' $select.trigger 'DOMSubtreeModified' - \ No newline at end of file + + $('#notification').delay(3000).fadeOut() \ No newline at end of file diff --git a/app/assets/stylesheets/components/_flashes.scss b/app/assets/stylesheets/components/_flashes.scss index 8729f09..846d567 100644 --- a/app/assets/stylesheets/components/_flashes.scss +++ b/app/assets/stylesheets/components/_flashes.scss @@ -62,4 +62,51 @@ div#errors { } } } +} + +/* + Banner flash messages +*/ + +#notification { + position: absolute; + margin: 0 auto; + left: 50%; + top: 0; + + .message { + background: image-url('layout/flash-notice-background.png'); + position: relative; + width: 730px; + height: 60px; + left: -50%; + text-align: center; + font-family: $header-font-family; + font-size: 22px; + color: white; + line-height: 45px; + padding: 0 100px; + z-index: 2; + + &:before { + background: image-url('layout/flash-notice-icon.png'); + content: ''; + display: block; + width: 30px; + height: 30px; + position: absolute; + top: 5px; + left: 60px; + } + + &.warning, + &.error, + &.alert { + background: image-url('layout/flash-error-background.png'); + + &:before { + background: image-url('layout/flash-error-icon.png'); + } + } + } } \ No newline at end of file diff --git a/app/assets/stylesheets/components/_forms.scss b/app/assets/stylesheets/components/_forms.scss index c8d343a..fb91a06 100644 --- a/app/assets/stylesheets/components/_forms.scss +++ b/app/assets/stylesheets/components/_forms.scss @@ -298,6 +298,28 @@ form.square { } } +/* + Dark Forms +*/ + +form.dark { + + input[type=text], + input[type=password] { + font-family: $header-font-family; + border-radius: 10px; + box-shadow: inset 3px 3px 5px 0px transparentize(black, 0.5); + border: 1px solid transparentize(#5a8da3, 0.5); + background: transparentize(black, 0.5); + color: white; + + &:hover, + &:focus { + border: 1px solid transparentize(#5a8da3, 0.5); + } + } +} + form.search { margin-bottom: 10px; diff --git a/app/assets/stylesheets/layout/_body.scss b/app/assets/stylesheets/layout/_body.scss index 3ad32b9..6c9fd00 100644 --- a/app/assets/stylesheets/layout/_body.scss +++ b/app/assets/stylesheets/layout/_body.scss @@ -44,7 +44,7 @@ body#tinymce { #main { @include span-columns(9 of 12); - padding: 20px 25px 20px 15px; + padding: 20px 25px 20px 10px; &.no-body { box-shadow: none; diff --git a/app/assets/stylesheets/layout/_footer.scss b/app/assets/stylesheets/layout/_footer.scss index 62294cb..5d89a77 100644 --- a/app/assets/stylesheets/layout/_footer.scss +++ b/app/assets/stylesheets/layout/_footer.scss @@ -1,4 +1,4 @@ -.footer { +footer.footer { $footer-link-color: #5a5a5a; background: image-url('layout/footer-background.png'); diff --git a/app/assets/stylesheets/layout/_header.scss b/app/assets/stylesheets/layout/_header.scss index 244e4b6..44b6601 100644 --- a/app/assets/stylesheets/layout/_header.scss +++ b/app/assets/stylesheets/layout/_header.scss @@ -6,7 +6,7 @@ header .banner { height: 125px; #logo { - @include span-columns(9 of 12); + @include span-columns(7 of 12); min-height: 180px; position: relative; @@ -20,11 +20,20 @@ header .banner { } #authentication { - @include span-columns(3 of 12); + @include span-columns(5 of 12); padding: 30px 0; + padding-top: 50px; color: white; line-height: 16px; + .fields { + input[type=text], + input[type=password] { + text-align: right; + margin-bottom: 3px; + } + } + .logged { position: relative; } @@ -84,6 +93,7 @@ header .banner { text-align: center; margin: 0 5px; } + } .avatar { @@ -104,5 +114,46 @@ header .banner { height: 75px; width: 75px; } + + .buttons { + @include span-columns(12); + font-family: $header-font-family; + text-align: right; + text-transform: uppercase; + font-size: 12px; + + .login, + .register { + @include span-columns(6); + } + + .login input { + background: none; + border: 0; + font-family: $header-font-family; + color: #73d5f7; + font-size: 14px; + padding: 0; + text-transform: uppercase; + } + + .register a { + float: right; + display: block; + clear: both; + } + } + } + + &.authenticated { + + #logo { + @include span-columns(9 of 12); + } + + #authentication { + @include span-columns(3 of 12); + padding: 30px 0; + } } } diff --git a/app/assets/stylesheets/layout/_navigation.scss b/app/assets/stylesheets/layout/_navigation.scss index 89c9575..88024a2 100644 --- a/app/assets/stylesheets/layout/_navigation.scss +++ b/app/assets/stylesheets/layout/_navigation.scss @@ -25,12 +25,14 @@ ul.navigation { list-style: none; float: right; max-width: $max-width; - max-height: $navigation-height; + max-height: 60px; margin-top: 5px; > li { float: left; border: none; + height: 60px; + position: relative; a { font-weight: 400; @@ -38,8 +40,19 @@ ul.navigation { height: $navigation-height; line-height: $navigation-height; padding: 0 20px; - color: #5f5f5f; text-transform: uppercase; + color: #5f5f5f; + + &:hover, + &.active { + color: #3dcfff; + } + } + + > a { + width: 100%; + float: left; + position: relative; border-top: 1px solid #54585b; &:before, @@ -62,18 +75,11 @@ ul.navigation { @include linear-gradient(#54585b, #15181a); right: -1px; } - } - - > a { - width: 100%; - float: left; - position: relative; - border-top: 1px solid #266d98; &:hover, &.active { @include background-image(radial-gradient(50% -10%, ellipse cover, transparentize(#2abdfb, 0.6), transparent 60%)); - color: #3dcfff; + border-top: 1px solid #266d98; &:before, &:after { @@ -87,13 +93,15 @@ ul.navigation { position: relative; ul { + background: image-url('layout/drop-menu-background.png') top center repeat-y; + width: 130px; position: absolute; box-shadow: $content-shadow; visibility: hidden; pointer-events: none; opacity: 0; z-index: 10; - top: $navigation-height; + top: 60px; left: 0; min-width: 100%; list-style: none; @@ -104,17 +112,20 @@ ul.navigation { &:hover { ul { - display: none; + visibility: visible; opacity: 1; pointer-events: auto; + border-radius: $base-border-radius; li { a { white-space: nowrap; display: block; - color: $navbar-text; padding: 0 20px; + line-height: 40px; + height: 40px; + font-size: 12px; } &:hover a { diff --git a/app/assets/stylesheets/layout/_sidebar.scss b/app/assets/stylesheets/layout/_sidebar.scss index cefda4f..f6e4fd6 100644 --- a/app/assets/stylesheets/layout/_sidebar.scss +++ b/app/assets/stylesheets/layout/_sidebar.scss @@ -86,6 +86,14 @@ } .calendar { + .widget-content-wrapper { + + } + + &:before { + display: none; + } + .entry { margin-bottom: 20px; } diff --git a/app/assets/stylesheets/pages/_matches.scss b/app/assets/stylesheets/pages/_matches.scss index 3655f0d..275d190 100644 --- a/app/assets/stylesheets/pages/_matches.scss +++ b/app/assets/stylesheets/pages/_matches.scss @@ -109,12 +109,12 @@ div#match { } .score-1 { - padding-left: $title-height/6; + padding-left: 10px; left: 0; } .score-2 { - padding-right: $title-height/6; + padding-right: 10px; right: 0; } } diff --git a/app/views/application/_header.html.erb b/app/views/application/_header.html.erb index bc1b209..4a7e75e 100644 --- a/app/views/application/_header.html.erb +++ b/app/views/application/_header.html.erb @@ -1,8 +1,8 @@
-