Commit 4c6c24856cc326e26b6f7ac91ee6eae9fcc722f7
1 parent
9477448a
Exists in
master
and in
4 other branches
Themes refactored
Showing
15 changed files
with
224 additions
and
46 deletions
Show diff stats
app/assets/images/gitlab_classic.png
2.98 KB
app/assets/images/gitlab_default.png
6.28 KB
app/assets/images/gitlab_modern.png
3.8 KB
app/assets/images/logo_dark.png
app/assets/images/logo_white.png
app/assets/stylesheets/common.scss
| ... | ... | @@ -584,25 +584,6 @@ li.note { |
| 584 | 584 | } |
| 585 | 585 | } |
| 586 | 586 | |
| 587 | -.themes_opts { | |
| 588 | - padding-left:20px; | |
| 589 | - | |
| 590 | - label { | |
| 591 | - width:175px; | |
| 592 | - margin-right:40px; | |
| 593 | - | |
| 594 | - .prev { | |
| 595 | - @extend .thumbnail; | |
| 596 | - height:120px; | |
| 597 | - width:175px; | |
| 598 | - margin-bottom:10px; | |
| 599 | - img { | |
| 600 | - width:180px; | |
| 601 | - } | |
| 602 | - } | |
| 603 | - } | |
| 604 | -} | |
| 605 | - | |
| 606 | 587 | .git_error_tips { |
| 607 | 588 | @extend .span6; |
| 608 | 589 | text-align:left; | ... | ... |
app/assets/stylesheets/main.scss
| ... | ... | @@ -118,14 +118,12 @@ $monospace: 'Menlo', 'Liberation Mono', 'Consolas', 'Courier New', 'andale mono' |
| 118 | 118 | @import "themes/ui_basic.scss"; |
| 119 | 119 | |
| 120 | 120 | /** |
| 121 | - * UI mars theme | |
| 121 | + * UI themes: | |
| 122 | 122 | */ |
| 123 | 123 | @import "themes/ui_mars.scss"; |
| 124 | - | |
| 125 | -/** | |
| 126 | - * UI Modern theme | |
| 127 | - */ | |
| 128 | 124 | @import "themes/ui_modern.scss"; |
| 125 | +@import "themes/ui_gray.scss"; | |
| 126 | +@import "themes/ui_color.scss"; | |
| 129 | 127 | |
| 130 | 128 | /** |
| 131 | 129 | * GitLab bootstrap. |
| ... | ... | @@ -159,6 +157,7 @@ $monospace: 'Menlo', 'Liberation Mono', 'Consolas', 'Courier New', 'andale mono' |
| 159 | 157 | @import "sections/merge_requests.scss"; |
| 160 | 158 | @import "sections/graph.scss"; |
| 161 | 159 | @import "sections/events.scss"; |
| 160 | +@import "sections/themes.scss"; | |
| 162 | 161 | |
| 163 | 162 | /** |
| 164 | 163 | * This scss file redefine chozen selectbox styles for | ... | ... |
app/assets/stylesheets/sections/header.scss
| ... | ... | @@ -39,15 +39,15 @@ header { |
| 39 | 39 | |
| 40 | 40 | h1 { |
| 41 | 41 | width:90px; |
| 42 | - background: url('logo_dark.png') no-repeat 0px -3px; | |
| 42 | + background: url('logo_dark.png') no-repeat 0px 2px; | |
| 43 | 43 | float:left; |
| 44 | - margin-left:5px; | |
| 44 | + margin-left:2px; | |
| 45 | 45 | font-size:30px; |
| 46 | 46 | line-height:48px; |
| 47 | 47 | font-weight:normal; |
| 48 | 48 | color:$style_color; |
| 49 | 49 | text-shadow: 0 1px 1px #FFF; |
| 50 | - padding-left:50px; | |
| 50 | + padding-left:45px; | |
| 51 | 51 | height:40px; |
| 52 | 52 | font-family: 'Korolev', sans-serif; |
| 53 | 53 | } |
| ... | ... | @@ -98,7 +98,7 @@ header { |
| 98 | 98 | background-position: 10px; |
| 99 | 99 | padding-left:25px; |
| 100 | 100 | font-size: 13px; |
| 101 | - @include border-radius(2px); | |
| 101 | + @include border-radius(3px); | |
| 102 | 102 | border:1px solid #c6c6c6; |
| 103 | 103 | box-shadow:none; |
| 104 | 104 | &:focus { |
| ... | ... | @@ -123,7 +123,7 @@ header { |
| 123 | 123 | display: block; |
| 124 | 124 | cursor: pointer; |
| 125 | 125 | img { |
| 126 | - @include border-radius(2px); | |
| 126 | + @include border-radius(3px); | |
| 127 | 127 | right: 5px; |
| 128 | 128 | position: absolute; |
| 129 | 129 | width: 28px; | ... | ... |
| ... | ... | @@ -0,0 +1,53 @@ |
| 1 | +.themes_opts { | |
| 2 | + padding-left:20px; | |
| 3 | + | |
| 4 | + label { | |
| 5 | + width:175px; | |
| 6 | + margin-right:40px; | |
| 7 | + | |
| 8 | + .prev { | |
| 9 | + @extend .thumbnail; | |
| 10 | + height:30px; | |
| 11 | + width:175px; | |
| 12 | + margin-bottom:10px; | |
| 13 | + | |
| 14 | + &.classic { | |
| 15 | + background: #31363e; | |
| 16 | + } | |
| 17 | + | |
| 18 | + &.default { | |
| 19 | + background: #f1f1f1; | |
| 20 | + } | |
| 21 | + | |
| 22 | + &.modern { | |
| 23 | + background: #567; | |
| 24 | + } | |
| 25 | + | |
| 26 | + &.gray { | |
| 27 | + background: #708090; | |
| 28 | + } | |
| 29 | + | |
| 30 | + &.violet { | |
| 31 | + background: #657; | |
| 32 | + } | |
| 33 | + } | |
| 34 | + } | |
| 35 | +} | |
| 36 | + | |
| 37 | +.code_highlight_opts { | |
| 38 | + padding-left:20px; | |
| 39 | + | |
| 40 | + label { | |
| 41 | + width:220px; | |
| 42 | + margin-right:40px; | |
| 43 | + | |
| 44 | + .prev { | |
| 45 | + @extend .thumbnail; | |
| 46 | + height:151px; | |
| 47 | + width:220px; | |
| 48 | + margin-bottom:10px; | |
| 49 | + } | |
| 50 | + } | |
| 51 | +} | |
| 52 | + | |
| 53 | + | ... | ... |
| ... | ... | @@ -0,0 +1,68 @@ |
| 1 | +/** | |
| 2 | + * This file represent some UI that can be changed | |
| 3 | + * during web app restyle or theme select. | |
| 4 | + * | |
| 5 | + * Next items should be placed there | |
| 6 | + * - link colors | |
| 7 | + * - header restyles | |
| 8 | + * | |
| 9 | + */ | |
| 10 | +.ui_color { | |
| 11 | + | |
| 12 | + /* | |
| 13 | + * Application Header | |
| 14 | + * | |
| 15 | + */ | |
| 16 | + header { | |
| 17 | + | |
| 18 | + &.navbar-gitlab { | |
| 19 | + .navbar-inner { | |
| 20 | + background: #657; | |
| 21 | + border-bottom: 1px solid #AAA; | |
| 22 | + | |
| 23 | + .nav > li > a { | |
| 24 | + color: #fff; | |
| 25 | + text-shadow: 0 1px 0 #111; | |
| 26 | + } | |
| 27 | + } | |
| 28 | + } | |
| 29 | + | |
| 30 | + .search { | |
| 31 | + float: right; | |
| 32 | + margin-right: 45px; | |
| 33 | + .search-input { | |
| 34 | + border: 1px solid #aaa; | |
| 35 | + background-color: #D2D5DA; | |
| 36 | + background-color: rgba(255, 255, 255, 0.5); | |
| 37 | + | |
| 38 | + &:focus { | |
| 39 | + background-color: white; | |
| 40 | + } | |
| 41 | + } | |
| 42 | + } | |
| 43 | + .search-input::-webkit-input-placeholder { | |
| 44 | + color: #666; | |
| 45 | + } | |
| 46 | + .app_logo { | |
| 47 | + a { | |
| 48 | + h1 { | |
| 49 | + background: url('logo_white.png') no-repeat 0px 2px; | |
| 50 | + color:#fff; | |
| 51 | + text-shadow: 0 1px 1px #111; | |
| 52 | + } | |
| 53 | + } | |
| 54 | + .separator { | |
| 55 | + display:none; | |
| 56 | + } | |
| 57 | + | |
| 58 | + } | |
| 59 | + .project_name { | |
| 60 | + color:#fff; | |
| 61 | + text-shadow: 0 1px 1px #111; | |
| 62 | + } | |
| 63 | + } | |
| 64 | + /* | |
| 65 | + * End of Application Header | |
| 66 | + * | |
| 67 | + */ | |
| 68 | +} | ... | ... |
| ... | ... | @@ -0,0 +1,68 @@ |
| 1 | +/** | |
| 2 | + * This file represent some UI that can be changed | |
| 3 | + * during web app restyle or theme select. | |
| 4 | + * | |
| 5 | + * Next items should be placed there | |
| 6 | + * - link colors | |
| 7 | + * - header restyles | |
| 8 | + * | |
| 9 | + */ | |
| 10 | +.ui_gray { | |
| 11 | + | |
| 12 | + /* | |
| 13 | + * Application Header | |
| 14 | + * | |
| 15 | + */ | |
| 16 | + header { | |
| 17 | + | |
| 18 | + &.navbar-gitlab { | |
| 19 | + .navbar-inner { | |
| 20 | + background: #708090; | |
| 21 | + border-bottom: 1px solid #AAA; | |
| 22 | + | |
| 23 | + .nav > li > a { | |
| 24 | + color: #fff; | |
| 25 | + text-shadow: 0 1px 0 #111; | |
| 26 | + } | |
| 27 | + } | |
| 28 | + } | |
| 29 | + | |
| 30 | + .search { | |
| 31 | + float: right; | |
| 32 | + margin-right: 45px; | |
| 33 | + .search-input { | |
| 34 | + border: 1px solid #aaa; | |
| 35 | + background-color: #D2D5DA; | |
| 36 | + background-color: rgba(255, 255, 255, 0.5); | |
| 37 | + | |
| 38 | + &:focus { | |
| 39 | + background-color: white; | |
| 40 | + } | |
| 41 | + } | |
| 42 | + } | |
| 43 | + .search-input::-webkit-input-placeholder { | |
| 44 | + color: #666; | |
| 45 | + } | |
| 46 | + .app_logo { | |
| 47 | + a { | |
| 48 | + h1 { | |
| 49 | + background: url('logo_white.png') no-repeat 0px 2px; | |
| 50 | + color:#fff; | |
| 51 | + text-shadow: 0 1px 1px #111; | |
| 52 | + } | |
| 53 | + } | |
| 54 | + .separator { | |
| 55 | + display:none; | |
| 56 | + } | |
| 57 | + | |
| 58 | + } | |
| 59 | + .project_name { | |
| 60 | + color:#fff; | |
| 61 | + text-shadow: 0 1px 1px #111; | |
| 62 | + } | |
| 63 | + } | |
| 64 | + /* | |
| 65 | + * End of Application Header | |
| 66 | + * | |
| 67 | + */ | |
| 68 | +} | ... | ... |
app/assets/stylesheets/themes/ui_mars.scss
app/assets/stylesheets/themes/ui_modern.scss
| ... | ... | @@ -17,11 +17,11 @@ |
| 17 | 17 | |
| 18 | 18 | &.navbar-gitlab { |
| 19 | 19 | .navbar-inner { |
| 20 | - background: #333; | |
| 21 | - border-bottom: 1px solid #111; | |
| 20 | + background: #567; | |
| 21 | + border-bottom: 1px solid #AAA; | |
| 22 | 22 | |
| 23 | 23 | .nav > li > a { |
| 24 | - color: #eee; | |
| 24 | + color: #fff; | |
| 25 | 25 | text-shadow: 0 1px 0 #111; |
| 26 | 26 | } |
| 27 | 27 | } |
| ... | ... | @@ -31,7 +31,7 @@ |
| 31 | 31 | float: right; |
| 32 | 32 | margin-right: 45px; |
| 33 | 33 | .search-input { |
| 34 | - border: 1px solid rgba(0, 0, 0, 0.7); | |
| 34 | + border: 1px solid #aaa; | |
| 35 | 35 | background-color: #D2D5DA; |
| 36 | 36 | background-color: rgba(255, 255, 255, 0.5); |
| 37 | 37 | |
| ... | ... | @@ -46,8 +46,8 @@ |
| 46 | 46 | .app_logo { |
| 47 | 47 | a { |
| 48 | 48 | h1 { |
| 49 | - background: url('logo_white.png') no-repeat 0px -3px; | |
| 50 | - color:#eee; | |
| 49 | + background: url('logo_white.png') no-repeat 0px 2px; | |
| 50 | + color:#fff; | |
| 51 | 51 | text-shadow: 0 1px 1px #111; |
| 52 | 52 | } |
| 53 | 53 | } |
| ... | ... | @@ -57,7 +57,7 @@ |
| 57 | 57 | |
| 58 | 58 | } |
| 59 | 59 | .project_name { |
| 60 | - color:#eee; | |
| 60 | + color:#fff; | |
| 61 | 61 | text-shadow: 0 1px 1px #111; |
| 62 | 62 | } |
| 63 | 63 | } | ... | ... |
app/views/profile/design.html.haml
| ... | ... | @@ -3,28 +3,35 @@ |
| 3 | 3 | %legend Application theme |
| 4 | 4 | .themes_opts |
| 5 | 5 | = label_tag do |
| 6 | - .prev | |
| 7 | - = image_tag "gitlab_default.png" | |
| 6 | + .prev.default | |
| 8 | 7 | = f.radio_button :theme_id, 1 |
| 9 | 8 | Default |
| 10 | 9 | |
| 11 | 10 | = label_tag do |
| 12 | - .prev | |
| 13 | - = image_tag "gitlab_classic.png" | |
| 11 | + .prev.classic | |
| 14 | 12 | = f.radio_button :theme_id, 2 |
| 15 | 13 | Classic |
| 16 | 14 | |
| 17 | 15 | = label_tag do |
| 18 | - .prev | |
| 19 | - = image_tag "gitlab_modern.png" | |
| 16 | + .prev.modern | |
| 20 | 17 | = f.radio_button :theme_id, 3 |
| 21 | 18 | Modern |
| 19 | + | |
| 20 | + = label_tag do | |
| 21 | + .prev.gray | |
| 22 | + = f.radio_button :theme_id, 4 | |
| 23 | + SlateGray | |
| 24 | + | |
| 25 | + = label_tag do | |
| 26 | + .prev.violet | |
| 27 | + = f.radio_button :theme_id, 5 | |
| 28 | + Violet | |
| 22 | 29 | %br |
| 23 | 30 | .clearfix |
| 24 | 31 | |
| 25 | 32 | %fieldset |
| 26 | 33 | %legend Code review |
| 27 | - .themes_opts | |
| 34 | + .code_highlight_opts | |
| 28 | 35 | = label_tag do |
| 29 | 36 | .prev |
| 30 | 37 | = image_tag "white.png" | ... | ... |
lib/gitlab/theme.rb