diff options
author | Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com> | 2012-11-21 07:14:05 +0300 |
---|---|---|
committer | Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com> | 2012-11-21 18:19:03 +0200 |
commit | 4c6c24856cc326e26b6f7ac91ee6eae9fcc722f7 (patch) | |
tree | 10b1c9feae3f74b4cbba7f815681b9e8a7dbc8dd | |
parent | 9477448ac0731fc1a79f4dd9432a08e34c5a7eba (diff) | |
download | gitlab-ce-4c6c24856cc326e26b6f7ac91ee6eae9fcc722f7.tar.gz |
Themes refactored
-rw-r--r-- | app/assets/images/gitlab_classic.png | bin | 3054 -> 0 bytes | |||
-rw-r--r-- | app/assets/images/gitlab_default.png | bin | 6435 -> 0 bytes | |||
-rw-r--r-- | app/assets/images/gitlab_modern.png | bin | 3892 -> 0 bytes | |||
-rw-r--r-- | app/assets/images/logo_dark.png | bin | 2858 -> 2589 bytes | |||
-rw-r--r-- | app/assets/images/logo_white.png | bin | 1681 -> 1517 bytes | |||
-rw-r--r-- | app/assets/stylesheets/common.scss | 19 | ||||
-rw-r--r-- | app/assets/stylesheets/main.scss | 9 | ||||
-rw-r--r-- | app/assets/stylesheets/sections/header.scss | 10 | ||||
-rw-r--r-- | app/assets/stylesheets/sections/themes.scss | 53 | ||||
-rw-r--r-- | app/assets/stylesheets/themes/ui_color.scss | 68 | ||||
-rw-r--r-- | app/assets/stylesheets/themes/ui_gray.scss | 68 | ||||
-rw-r--r-- | app/assets/stylesheets/themes/ui_mars.scss | 2 | ||||
-rw-r--r-- | app/assets/stylesheets/themes/ui_modern.scss | 14 | ||||
-rw-r--r-- | app/views/profile/design.html.haml | 21 | ||||
-rw-r--r-- | lib/gitlab/theme.rb | 6 |
15 files changed, 224 insertions, 46 deletions
diff --git a/app/assets/images/gitlab_classic.png b/app/assets/images/gitlab_classic.png Binary files differdeleted file mode 100644 index 4e189e220ab..00000000000 --- a/app/assets/images/gitlab_classic.png +++ /dev/null diff --git a/app/assets/images/gitlab_default.png b/app/assets/images/gitlab_default.png Binary files differdeleted file mode 100644 index 6e9dfb58896..00000000000 --- a/app/assets/images/gitlab_default.png +++ /dev/null diff --git a/app/assets/images/gitlab_modern.png b/app/assets/images/gitlab_modern.png Binary files differdeleted file mode 100644 index b2d73b7a789..00000000000 --- a/app/assets/images/gitlab_modern.png +++ /dev/null diff --git a/app/assets/images/logo_dark.png b/app/assets/images/logo_dark.png Binary files differindex fab64c2d5a9..4a3e3391599 100644 --- a/app/assets/images/logo_dark.png +++ b/app/assets/images/logo_dark.png diff --git a/app/assets/images/logo_white.png b/app/assets/images/logo_white.png Binary files differindex 3f74025449c..366e3f3f3b9 100644 --- a/app/assets/images/logo_white.png +++ b/app/assets/images/logo_white.png diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss index aeaddb0b4cb..e45cb876e7d 100644 --- a/app/assets/stylesheets/common.scss +++ b/app/assets/stylesheets/common.scss @@ -584,25 +584,6 @@ li.note { } } -.themes_opts { - padding-left:20px; - - label { - width:175px; - margin-right:40px; - - .prev { - @extend .thumbnail; - height:120px; - width:175px; - margin-bottom:10px; - img { - width:180px; - } - } - } -} - .git_error_tips { @extend .span6; text-align:left; diff --git a/app/assets/stylesheets/main.scss b/app/assets/stylesheets/main.scss index 099d5043777..7ae32b3a7d9 100644 --- a/app/assets/stylesheets/main.scss +++ b/app/assets/stylesheets/main.scss @@ -118,14 +118,12 @@ $monospace: 'Menlo', 'Liberation Mono', 'Consolas', 'Courier New', 'andale mono' @import "themes/ui_basic.scss"; /** - * UI mars theme + * UI themes: */ @import "themes/ui_mars.scss"; - -/** - * UI Modern theme - */ @import "themes/ui_modern.scss"; +@import "themes/ui_gray.scss"; +@import "themes/ui_color.scss"; /** * GitLab bootstrap. @@ -159,6 +157,7 @@ $monospace: 'Menlo', 'Liberation Mono', 'Consolas', 'Courier New', 'andale mono' @import "sections/merge_requests.scss"; @import "sections/graph.scss"; @import "sections/events.scss"; +@import "sections/themes.scss"; /** * This scss file redefine chozen selectbox styles for diff --git a/app/assets/stylesheets/sections/header.scss b/app/assets/stylesheets/sections/header.scss index 90a57363a1d..32f6d8552e8 100644 --- a/app/assets/stylesheets/sections/header.scss +++ b/app/assets/stylesheets/sections/header.scss @@ -39,15 +39,15 @@ header { h1 { width:90px; - background: url('logo_dark.png') no-repeat 0px -3px; + background: url('logo_dark.png') no-repeat 0px 2px; float:left; - margin-left:5px; + margin-left:2px; font-size:30px; line-height:48px; font-weight:normal; color:$style_color; text-shadow: 0 1px 1px #FFF; - padding-left:50px; + padding-left:45px; height:40px; font-family: 'Korolev', sans-serif; } @@ -98,7 +98,7 @@ header { background-position: 10px; padding-left:25px; font-size: 13px; - @include border-radius(2px); + @include border-radius(3px); border:1px solid #c6c6c6; box-shadow:none; &:focus { @@ -123,7 +123,7 @@ header { display: block; cursor: pointer; img { - @include border-radius(2px); + @include border-radius(3px); right: 5px; position: absolute; width: 28px; diff --git a/app/assets/stylesheets/sections/themes.scss b/app/assets/stylesheets/sections/themes.scss new file mode 100644 index 00000000000..62dd27d0789 --- /dev/null +++ b/app/assets/stylesheets/sections/themes.scss @@ -0,0 +1,53 @@ +.themes_opts { + padding-left:20px; + + label { + width:175px; + margin-right:40px; + + .prev { + @extend .thumbnail; + height:30px; + width:175px; + margin-bottom:10px; + + &.classic { + background: #31363e; + } + + &.default { + background: #f1f1f1; + } + + &.modern { + background: #567; + } + + &.gray { + background: #708090; + } + + &.violet { + background: #657; + } + } + } +} + +.code_highlight_opts { + padding-left:20px; + + label { + width:220px; + margin-right:40px; + + .prev { + @extend .thumbnail; + height:151px; + width:220px; + margin-bottom:10px; + } + } +} + + diff --git a/app/assets/stylesheets/themes/ui_color.scss b/app/assets/stylesheets/themes/ui_color.scss new file mode 100644 index 00000000000..4497892daa7 --- /dev/null +++ b/app/assets/stylesheets/themes/ui_color.scss @@ -0,0 +1,68 @@ +/** + * This file represent some UI that can be changed + * during web app restyle or theme select. + * + * Next items should be placed there + * - link colors + * - header restyles + * + */ +.ui_color { + + /* + * Application Header + * + */ + header { + + &.navbar-gitlab { + .navbar-inner { + background: #657; + border-bottom: 1px solid #AAA; + + .nav > li > a { + color: #fff; + text-shadow: 0 1px 0 #111; + } + } + } + + .search { + float: right; + margin-right: 45px; + .search-input { + border: 1px solid #aaa; + background-color: #D2D5DA; + background-color: rgba(255, 255, 255, 0.5); + + &:focus { + background-color: white; + } + } + } + .search-input::-webkit-input-placeholder { + color: #666; + } + .app_logo { + a { + h1 { + background: url('logo_white.png') no-repeat 0px 2px; + color:#fff; + text-shadow: 0 1px 1px #111; + } + } + .separator { + display:none; + } + + } + .project_name { + color:#fff; + text-shadow: 0 1px 1px #111; + } + } + /* + * End of Application Header + * + */ +} diff --git a/app/assets/stylesheets/themes/ui_gray.scss b/app/assets/stylesheets/themes/ui_gray.scss new file mode 100644 index 00000000000..5ee2b0ddfe3 --- /dev/null +++ b/app/assets/stylesheets/themes/ui_gray.scss @@ -0,0 +1,68 @@ +/** + * This file represent some UI that can be changed + * during web app restyle or theme select. + * + * Next items should be placed there + * - link colors + * - header restyles + * + */ +.ui_gray { + + /* + * Application Header + * + */ + header { + + &.navbar-gitlab { + .navbar-inner { + background: #708090; + border-bottom: 1px solid #AAA; + + .nav > li > a { + color: #fff; + text-shadow: 0 1px 0 #111; + } + } + } + + .search { + float: right; + margin-right: 45px; + .search-input { + border: 1px solid #aaa; + background-color: #D2D5DA; + background-color: rgba(255, 255, 255, 0.5); + + &:focus { + background-color: white; + } + } + } + .search-input::-webkit-input-placeholder { + color: #666; + } + .app_logo { + a { + h1 { + background: url('logo_white.png') no-repeat 0px 2px; + color:#fff; + text-shadow: 0 1px 1px #111; + } + } + .separator { + display:none; + } + + } + .project_name { + color:#fff; + text-shadow: 0 1px 1px #111; + } + } + /* + * End of Application Header + * + */ +} diff --git a/app/assets/stylesheets/themes/ui_mars.scss b/app/assets/stylesheets/themes/ui_mars.scss index 3773e61cce6..a9d2124130d 100644 --- a/app/assets/stylesheets/themes/ui_mars.scss +++ b/app/assets/stylesheets/themes/ui_mars.scss @@ -46,7 +46,7 @@ .app_logo { a { h1 { - background: url('logo_white.png') no-repeat 0px -3px; + background: url('logo_white.png') no-repeat 0px 2px; color:#eee; text-shadow: 0 1px 1px #111; } diff --git a/app/assets/stylesheets/themes/ui_modern.scss b/app/assets/stylesheets/themes/ui_modern.scss index 73445ec60d3..0bb14cdd7d7 100644 --- a/app/assets/stylesheets/themes/ui_modern.scss +++ b/app/assets/stylesheets/themes/ui_modern.scss @@ -17,11 +17,11 @@ &.navbar-gitlab { .navbar-inner { - background: #333; - border-bottom: 1px solid #111; + background: #567; + border-bottom: 1px solid #AAA; .nav > li > a { - color: #eee; + color: #fff; text-shadow: 0 1px 0 #111; } } @@ -31,7 +31,7 @@ float: right; margin-right: 45px; .search-input { - border: 1px solid rgba(0, 0, 0, 0.7); + border: 1px solid #aaa; background-color: #D2D5DA; background-color: rgba(255, 255, 255, 0.5); @@ -46,8 +46,8 @@ .app_logo { a { h1 { - background: url('logo_white.png') no-repeat 0px -3px; - color:#eee; + background: url('logo_white.png') no-repeat 0px 2px; + color:#fff; text-shadow: 0 1px 1px #111; } } @@ -57,7 +57,7 @@ } .project_name { - color:#eee; + color:#fff; text-shadow: 0 1px 1px #111; } } diff --git a/app/views/profile/design.html.haml b/app/views/profile/design.html.haml index 4eace607ec2..5099ea5d60d 100644 --- a/app/views/profile/design.html.haml +++ b/app/views/profile/design.html.haml @@ -3,28 +3,35 @@ %legend Application theme .themes_opts = label_tag do - .prev - = image_tag "gitlab_default.png" + .prev.default = f.radio_button :theme_id, 1 Default = label_tag do - .prev - = image_tag "gitlab_classic.png" + .prev.classic = f.radio_button :theme_id, 2 Classic = label_tag do - .prev - = image_tag "gitlab_modern.png" + .prev.modern = f.radio_button :theme_id, 3 Modern + + = label_tag do + .prev.gray + = f.radio_button :theme_id, 4 + SlateGray + + = label_tag do + .prev.violet + = f.radio_button :theme_id, 5 + Violet %br .clearfix %fieldset %legend Code review - .themes_opts + .code_highlight_opts = label_tag do .prev = image_tag "white.png" diff --git a/lib/gitlab/theme.rb b/lib/gitlab/theme.rb index 6e2be76508a..7f833867e39 100644 --- a/lib/gitlab/theme.rb +++ b/lib/gitlab/theme.rb @@ -1,10 +1,12 @@ module Gitlab class Theme def self.css_class_by_id(id) - themes = { + themes = { 1 => "ui_basic", 2 => "ui_mars", - 3 => "ui_modern" + 3 => "ui_modern", + 4 => "ui_gray", + 5 => "ui_color" } id ||= 1 |