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