diff --git a/app/views/layouts/application.mobile.haml b/app/views/layouts/application.mobile.haml index b574203bd9ebf6c9bceb85ca191272f4bc99311b..ca27a0014abbcc642451456ef57d17a229520fe9 100644 --- a/app/views/layouts/application.mobile.haml +++ b/app/views/layouts/application.mobile.haml @@ -50,7 +50,8 @@ = yield %header - = link_to(image_tag('white@2x.png', :height => 20, :width => 127, :id => 'header_title'), multi_stream_path) + = link_to(image_tag('header-logo2x.png', :height => 40, :width => 40, :id => 'header_title'), multi_stream_path) + - if user_signed_in? - if yield(:header_action).present? = yield(:header_action) diff --git a/public/images/hatched-bg-small.jpg b/public/images/hatched-bg-small.jpg new file mode 100644 index 0000000000000000000000000000000000000000..81d7c61597eda69d8770f9fb81bbdaeb26f7c193 Binary files /dev/null and b/public/images/hatched-bg-small.jpg differ diff --git a/public/images/hatched-bg.jpg b/public/images/hatched-bg.jpg new file mode 100644 index 0000000000000000000000000000000000000000..0282e7eb764ab1a5ac36419d6328cabdfda378f4 Binary files /dev/null and b/public/images/hatched-bg.jpg differ diff --git a/public/images/header-bg-long.jpg b/public/images/header-bg-long.jpg new file mode 100644 index 0000000000000000000000000000000000000000..da0492bc7d2276baa906aec3050ec80a5d35e2f3 Binary files /dev/null and b/public/images/header-bg-long.jpg differ diff --git a/public/images/header-logo2x.png b/public/images/header-logo2x.png new file mode 100644 index 0000000000000000000000000000000000000000..c6491b694625385e6db084aa767ce10574eae1ca Binary files /dev/null and b/public/images/header-logo2x.png differ diff --git a/public/stylesheets/sass/mobile.scss b/public/stylesheets/sass/mobile.scss index 5fb8c21650876bcb813189925e675a7c230f44c3..a49eb9bbe6ba1d9e30150a37783f078c466003eb 100644 --- a/public/stylesheets/sass/mobile.scss +++ b/public/stylesheets/sass/mobile.scss @@ -225,7 +225,12 @@ a { } body { - background: #555555; + background: { + image: url('/images/hatched-bg.jpg'); + position: fixed; + /* scale background image down for iOS retina display */ + size: 50%; + } max-width: 100%; margin-top: 55px; } @@ -253,6 +258,8 @@ body { max-width: 100%; } min-height: 34px; .avatar { + @include border-radius(4px); + float: left; height: 35px; width: 35px; @@ -318,13 +325,8 @@ body { } #login_form { - @include border-radius(3px); - @include box-shadow(0, 1px, 5px, rgba(0, 0, 0, 1)); padding: 0; padding-bottom: 10px; - background: { - color: #fff; - } margin: auto 20px; @@ -358,13 +360,15 @@ body { } } -.stream_element { - @include border-radius(3px); - @include box-shadow(0, 1px, 5px, rgba(0, 0, 0, 1)); - background: { - color: #fff; }; - border: { - bottom: 1px solid black; }; +.stream_element, #login_form { + @include border-radius(5px); + @include box-shadow(0, 1px, 2px, rgba(0, 0, 0, 0.2)); + + background-color: #fff; + + border: 1px solid #bbb; + border-top: 1px solid #ddd; + border-bottom: 1px solid #aaa; } .photo_attachments { @@ -388,18 +392,21 @@ body { size: larger; }; } .more-link { - -webkit-box-shadow: inset 0 1px 5px #111, 0 1px 1px #999; + -webkit-box-shadow: inset 0 1px 5px #777, 0 1px 1px rgba(0,0,0,0.4); display: block; text-align: center; padding: 0 10px; margin: 0 10px; - border-radius: 3px; + border-radius: 5px; + background: { - color: #333333; }; + color: rgba(220,220,220,0.8); + } + h1 { - color: #cccccc; + color: #999; padding: 20px; - text-shadow: 0 -2px 0 black; } } + text-shadow: 0 2px 0 #fff; } } .info { color: #ccc; @@ -507,8 +514,12 @@ body { float: right; } header { - @include linear-gradient(#444444, black); - @include box-shadow(0,1px,1px,rgba(0,0,0,0.7)); + @include box-shadow(0,1px,2px,#333); + + background: { + image: url("/images/header-bg-long.jpg"); + } + width: 100%; position: fixed; z-index: 10; @@ -521,7 +532,7 @@ header { border: { bottom: 1px solid #222; } - padding: 12px 5px; + padding: 2px 5px; .right { float: right; } } @@ -545,15 +556,21 @@ footer { } .bottom_bar { - @include border-radius(0, 0, 3px, 3px); + @include border-radius(0, 0, 5px, 5px); + box-shadow: inset 0 2px 5px -3px #999; + display: block; position: relative; padding: 10px; - background: #eeeeee; + background: #eee; + margin: { top: 10px; }; + border: { - top: 1px solid #dddddd; }; + top: 1px solid #ccc; + }; + min-height: 24px; > a,