diff --git a/app/assets/images/logo-black.png b/app/assets/images/logo-black.png
deleted file mode 100644
index 49cdc16cacd9a6be58ad79813461554bed5db8e2..0000000000000000000000000000000000000000
Binary files a/app/assets/images/logo-black.png and /dev/null differ
diff --git a/app/assets/images/logo-white.png b/app/assets/images/logo-white.png
index 2299153caba9c4e96ecfbc1c6e60543c79085c38..917bcfcb7e750f8426dd79912ca525dc65183a56 100644
Binary files a/app/assets/images/logo-white.png and b/app/assets/images/logo-white.png differ
diff --git a/app/assets/stylesheets/sections/header.scss b/app/assets/stylesheets/sections/header.scss
index e255cbcada82be3fdb52aeb6a30dacfff6870709..26b4d04106ea7a24e454652bcfb294cc0341d4e8 100644
--- a/app/assets/stylesheets/sections/header.scss
+++ b/app/assets/stylesheets/sections/header.scss
@@ -86,7 +86,7 @@ header {
.container {
width: 100% !important;
- padding-left: 0px;
+ padding: 0px;
}
/**
@@ -100,18 +100,14 @@ header {
a {
float: left;
- padding: 0px;
- margin: 0 6px;
-
- h1 {
- margin: 0;
- background: image-url('logo-black.png') no-repeat center center;
- background-size: 32px;
- float: left;
- height: 46px;
- width: 40px;
- @include header-font;
- text-indent: -9999px;
+ padding: 5px 0;
+ height: 46px;
+ width: 52px;
+ text-align: center;
+
+ img {
+ width: 36px;
+ height: 36px;
}
}
&:hover {
@@ -134,14 +130,13 @@ header {
}
.profile-pic {
- position: relative;
- top: -1px;
- padding-right: 0px !important;
+ padding: 0px !important;
+ width: 46px;
+ height: 46px;
+ margin-left: 5px;
img {
- width: 50px;
- height: 50px;
- margin: -15px;
- margin-left: 5px;
+ width: 46px;
+ height: 46px;
}
}
@@ -174,68 +169,6 @@ header {
@include transition(all 0.15s ease-in 0s);
}
}
-
-
- /*
- * Dark header
- *
- */
- &.header-dark {
- &.navbar-gitlab {
- .navbar-inner {
- background: #708090;
- border-bottom: 1px solid #AAA;
-
- .navbar-toggle { color: #fff; }
-
- .nav > li > a {
- color: #AAA;
-
- &:hover, &:focus, &:active {
- background: none;
- color: #FFF;
- }
- }
- }
- }
-
- .turbolink-spinner {
- color: #FFF;
- }
-
- .search {
- .search-input {
- background-color: #D2D5DA;
- background-color: rgba(255, 255, 255, 0.5);
- border: 1px solid #AAA;
-
- &:focus {
- background-color: white;
- }
- }
- }
- .search-input::-webkit-input-placeholder {
- color: #666;
- }
- .app_logo {
- a {
- h1 {
- background: image-url('logo-white.png') no-repeat center center;
- background-size: 32px;
- color: #fff;
- }
- }
- }
- .title {
- a {
- color: #FFF;
- &:hover {
- text-decoration: underline;
- }
- }
- color: #fff;
- }
- }
}
.search .search-input {
diff --git a/app/assets/stylesheets/themes/dark-theme.scss b/app/assets/stylesheets/themes/dark-theme.scss
new file mode 100644
index 0000000000000000000000000000000000000000..b7b22a8724eb71eb55df740782def2e3f30aee0d
--- /dev/null
+++ b/app/assets/stylesheets/themes/dark-theme.scss
@@ -0,0 +1,63 @@
+@mixin dark-theme($color-light, $color, $color-darker, $color-dark) {
+ header {
+ &.navbar-gitlab {
+ .navbar-inner {
+ background: $color;
+
+ .navbar-toggle {
+ color: #FFF;
+ }
+
+ .app_logo, .navbar-toggle {
+ &:hover {
+ background-color: $color-darker;
+ }
+ }
+
+ .app_logo {
+ background-color: $color-dark;
+ }
+
+ .title {
+ color: #FFF;
+
+ a {
+ color: #FFF;
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+ }
+
+ .search {
+ .search-input {
+ background-color: $color-light;
+ background-color: rgba(255, 255, 255, 0.5);
+ border: 1px solid $color-light;
+
+ &:focus {
+ background-color: white;
+ }
+ }
+ }
+
+ .search-input::-webkit-input-placeholder {
+ color: #666;
+ }
+
+ .nav > li > a {
+ color: $color-light;
+
+ &:hover, &:focus, &:active {
+ background: none;
+ color: #FFF;
+ }
+ }
+
+ .search-input {
+ border-color: $color-light;
+ }
+ }
+ }
+ }
+}
diff --git a/app/assets/stylesheets/themes/ui_basic.scss b/app/assets/stylesheets/themes/ui_basic.scss
index 0dad9917b552d248b6c7a7765c91ee86705ec8ff..097d5c5b73ca41cb830de5f611d0163c1e4d0e42 100644
--- a/app/assets/stylesheets/themes/ui_basic.scss
+++ b/app/assets/stylesheets/themes/ui_basic.scss
@@ -10,8 +10,15 @@
background: #F1F1F1;
border-bottom: 1px solid #DDD;
- .app_logo {
- background-color: #DDD;
+ .title {
+ color: #555;
+
+ a {
+ color: #555;
+ &:hover {
+ text-decoration: underline;
+ }
+ }
}
.nav > li > a {
diff --git a/app/assets/stylesheets/themes/ui_color.scss b/app/assets/stylesheets/themes/ui_color.scss
index 3c441a8e098d0e506dae037e05a5b8f7ce069937..7ac6903b2e422c6a66793614d847053c71c028aa 100644
--- a/app/assets/stylesheets/themes/ui_color.scss
+++ b/app/assets/stylesheets/themes/ui_color.scss
@@ -1,42 +1,6 @@
/**
- * 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
- *
+ * Violet GitLab UI theme
*/
.ui_color {
- /*
- * Application Header
- *
- */
- header {
- @extend .header-dark;
- &.navbar-gitlab {
- .navbar-inner {
- background: #548;
- border-bottom: 1px solid #436;
- .app_logo, .navbar-toggle {
- &:hover {
- background-color: #436;
- }
- }
- .app_logo {
- background-color: #325;
- }
- .nav > li > a {
- color: #98C;
- }
- .search-input {
- border-color: #98C;
- }
- }
- }
- }
-
- .nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
- background: #659;
- }
+ @include dark-theme(#98C, #548, #436, #325);
}
diff --git a/app/assets/stylesheets/themes/ui_gray.scss b/app/assets/stylesheets/themes/ui_gray.scss
index 8df08ccaeec33502856c561105c939c75a484c8e..9257e5f4d401193664c84ce4e9f64c13e055ba4b 100644
--- a/app/assets/stylesheets/themes/ui_gray.scss
+++ b/app/assets/stylesheets/themes/ui_gray.scss
@@ -1,32 +1,6 @@
/**
- * 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
- *
+ * Gray GitLab UI theme
*/
.ui_gray {
- /*
- * Application Header
- *
- */
- header {
- @extend .header-dark;
- &.navbar-gitlab {
- .navbar-inner {
- background: #373737;
- border-bottom: 1px solid #272727;
- .app_logo, .navbar-toggle {
- &:hover {
- background-color: #272727;
- }
- }
- .app_logo {
- background-color: #222;
- }
- }
- }
- }
+ @include dark-theme(#979797, #373737, #272727, #222222);
}
diff --git a/app/assets/stylesheets/themes/ui_mars.scss b/app/assets/stylesheets/themes/ui_mars.scss
index b08cbda6c4f5017a2a5562621c9025c9e384ce5c..4caf5843d9b048f4494eda646fc950ff91b7c981 100644
--- a/app/assets/stylesheets/themes/ui_mars.scss
+++ b/app/assets/stylesheets/themes/ui_mars.scss
@@ -1,38 +1,6 @@
/**
- * 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
- *
+ * Classic GitLab UI theme
*/
.ui_mars {
- /*
- * Application Header
- *
- */
- header {
- @extend .header-dark;
- &.navbar-gitlab {
- .navbar-inner {
- background: #474D57;
- border-bottom: 1px solid #373D47;
- .app_logo, .navbar-toggle {
- &:hover {
- background-color: #373D47;
- }
- }
- .app_logo {
- background-color: #24272D;
- }
- .nav > li > a {
- color: #979DA7;
- }
- .search-input {
- border-color: #979DA7;
- }
- }
- }
- }
+ @include dark-theme(#979DA7, #474D57, #373D47, #24272D);
}
diff --git a/app/assets/stylesheets/themes/ui_modern.scss b/app/assets/stylesheets/themes/ui_modern.scss
index 34f39614ca4cac97b5b58c9fb00a8a82115bb568..70449882317efef7cf129914ba4b3cbad9fa3909 100644
--- a/app/assets/stylesheets/themes/ui_modern.scss
+++ b/app/assets/stylesheets/themes/ui_modern.scss
@@ -1,42 +1,6 @@
/**
- * 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
- *
+ * Modern GitLab UI theme
*/
.ui_modern {
- /*
- * Application Header
- *
- */
- header {
- @extend .header-dark;
- &.navbar-gitlab {
- .navbar-inner {
- background: #019875;
- border-bottom: 1px solid #019875;
- .app_logo, .navbar-toggle {
- &:hover {
- background-color: #018865;
- }
- }
- .app_logo {
- background-color: #017855;
- }
- .nav > li > a {
- color: #ADC;
- }
- .search-input {
- border-color: #8ba;
- }
- }
- }
- }
-
- .nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
- background: #019875;
- }
+ @include dark-theme(#ADC, #019875, #018865, #017855);
}
diff --git a/app/helpers/appearances_helper.rb b/app/helpers/appearances_helper.rb
index 96e5d43a369266aa97c06a29176a928e45162089..bb8d568380796f95c8039d39c983a90a5c5229af 100644
--- a/app/helpers/appearances_helper.rb
+++ b/app/helpers/appearances_helper.rb
@@ -14,4 +14,8 @@ def brand_image
def brand_text
nil
end
+
+ def brand_header_logo
+ image_tag 'logo-white.png'
+ end
end
diff --git a/app/views/layouts/_head_panel.html.haml b/app/views/layouts/_head_panel.html.haml
index d5928d2ed25d24e9faf2ff4f1a06a900f704e0a1..fc8a487ece7e6d3c5201b1cf5bb6a1cd2ee5b5e6 100644
--- a/app/views/layouts/_head_panel.html.haml
+++ b/app/views/layouts/_head_panel.html.haml
@@ -3,7 +3,7 @@
.container
%div.app_logo
= link_to root_path, class: "home has_bottom_tooltip", title: "Dashboard" do
- %h1 GITLAB
+ = brand_header_logo
%h1.title= title
%button.navbar-toggle{"data-target" => ".navbar-collapse", "data-toggle" => "collapse", type: "button"}
diff --git a/app/views/layouts/_public_head_panel.html.haml b/app/views/layouts/_public_head_panel.html.haml
index e912fea2aee702fe7e8dff279814a1c76001c0f5..bd6bb3c720d941fe67a9b0edddab4f7458455cd3 100644
--- a/app/views/layouts/_public_head_panel.html.haml
+++ b/app/views/layouts/_public_head_panel.html.haml
@@ -2,10 +2,8 @@
.navbar-inner
.container
%div.app_logo
- %span.separator
= link_to explore_root_path, class: "home" do
- %h1 GITLAB
- %span.separator
+ = brand_header_logo
%h1.title= title
%button.navbar-toggle{"data-target" => ".navbar-collapse", "data-toggle" => "collapse", type: "button"}
diff --git a/app/views/layouts/admin.html.haml b/app/views/layouts/admin.html.haml
index e8751a6987e8826df7fd6e36fb179964df38b148..ab84e87c300209e2a7d3a42c7c15e9d003d86f6c 100644
--- a/app/views/layouts/admin.html.haml
+++ b/app/views/layouts/admin.html.haml
@@ -1,6 +1,6 @@
!!! 5
%html{ lang: "en"}
= render "layouts/head", title: "Admin area"
- %body{class: "#{app_theme} #{theme_type} admin", :'data-page' => body_data_page}
+ %body{class: "#{app_theme} admin", :'data-page' => body_data_page}
= render "layouts/head_panel", title: link_to("Admin area", admin_root_path)
= render 'layouts/page', sidebar: 'layouts/nav/admin'
diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
index 49123744ffa4d41c54f52087cf6f137f01a56eb5..6bd8ac4adb85e4e9b9e6d8469963c36b0dd20fb0 100644
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -1,6 +1,6 @@
!!! 5
%html{ lang: "en"}
= render "layouts/head", title: "Dashboard"
- %body{class: "#{app_theme} #{theme_type} application", :'data-page' => body_data_page }
+ %body{class: "#{app_theme} application", :'data-page' => body_data_page }
= render "layouts/head_panel", title: link_to("Dashboard", root_path)
= render 'layouts/page', sidebar: 'layouts/nav/dashboard'
diff --git a/app/views/layouts/errors.html.haml b/app/views/layouts/errors.html.haml
index e7d875173e6d503d0446da32a4f1a64fbd832b4c..e51fd4cb8208e4e758d1a3776b55bdd97f922f95 100644
--- a/app/views/layouts/errors.html.haml
+++ b/app/views/layouts/errors.html.haml
@@ -1,7 +1,7 @@
!!! 5
%html{ lang: "en"}
= render "layouts/head", title: "Error"
- %body{class: "#{app_theme} #{theme_type} application"}
+ %body{class: "#{app_theme} application"}
= render "layouts/head_panel", title: "" if current_user
.container.navless-container
= render "layouts/flash"
diff --git a/app/views/layouts/explore.html.haml b/app/views/layouts/explore.html.haml
index 09855b222dc23f07d023765c04190410789e649d..2bd0b8d85c91b0e929ad7258eda7f791bbb82b89 100644
--- a/app/views/layouts/explore.html.haml
+++ b/app/views/layouts/explore.html.haml
@@ -2,7 +2,7 @@
!!! 5
%html{ lang: "en"}
= render "layouts/head", title: page_title
- %body{class: "#{app_theme} #{theme_type} application", :'data-page' => body_data_page}
+ %body{class: "#{app_theme} application", :'data-page' => body_data_page}
= render "layouts/broadcast"
- if current_user
= render "layouts/head_panel", title: link_to(page_title, explore_root_path)
diff --git a/app/views/layouts/group.html.haml b/app/views/layouts/group.html.haml
index fa0ed317ce1ad21c0bd2f923284cdec5ec1136d0..f4a6bee15f68c6e6022179bb4378e7bca15a64af 100644
--- a/app/views/layouts/group.html.haml
+++ b/app/views/layouts/group.html.haml
@@ -1,6 +1,6 @@
!!! 5
%html{ lang: "en"}
= render "layouts/head", title: group_head_title
- %body{class: "#{app_theme} #{theme_type} application", :'data-page' => body_data_page}
+ %body{class: "#{app_theme} application", :'data-page' => body_data_page}
= render "layouts/head_panel", title: link_to(@group.name, group_path(@group))
= render 'layouts/page', sidebar: 'layouts/nav/group'
diff --git a/app/views/layouts/navless.html.haml b/app/views/layouts/navless.html.haml
index a3b55542bf7d1ac38a9e3cf4ac9be431f0c90ecf..4d0278251a67ff87bd1914ceaed35437cd60ed17 100644
--- a/app/views/layouts/navless.html.haml
+++ b/app/views/layouts/navless.html.haml
@@ -1,7 +1,7 @@
!!! 5
%html{ lang: "en"}
= render "layouts/head", title: @title
- %body{class: "#{app_theme} #{theme_type} application", :'data-page' => body_data_page}
+ %body{class: "#{app_theme} application", :'data-page' => body_data_page}
= render "layouts/broadcast"
= render "layouts/head_panel", title: defined?(@title_url) ? link_to(@title, @title_url) : @title
.container.navless-container
diff --git a/app/views/layouts/profile.html.haml b/app/views/layouts/profile.html.haml
index 19d6efed78e2fd9967f75fd73c04335db4f410cc..2b5be7fc37202a5ea3735941d94a44a6f96c055d 100644
--- a/app/views/layouts/profile.html.haml
+++ b/app/views/layouts/profile.html.haml
@@ -1,6 +1,6 @@
!!! 5
%html{ lang: "en"}
= render "layouts/head", title: "Profile"
- %body{class: "#{app_theme} #{theme_type} profile", :'data-page' => body_data_page}
+ %body{class: "#{app_theme} profile", :'data-page' => body_data_page}
= render "layouts/head_panel", title: link_to("Profile", profile_path)
= render 'layouts/page', sidebar: 'layouts/nav/profile'
diff --git a/app/views/layouts/project_settings.html.haml b/app/views/layouts/project_settings.html.haml
index d2c9c2a991c1f37bd32a984d43e81826c6b830da..0a0039dec169e5f5d5d047685ebf29e1d7fbc8a3 100644
--- a/app/views/layouts/project_settings.html.haml
+++ b/app/views/layouts/project_settings.html.haml
@@ -1,7 +1,7 @@
!!! 5
%html{ lang: "en"}
= render "layouts/head", title: @project.name_with_namespace
- %body{class: "#{app_theme} #{theme_type} project", :'data-page' => body_data_page, :'data-project-id' => @project.id }
+ %body{class: "#{app_theme} project", :'data-page' => body_data_page, :'data-project-id' => @project.id }
= render "layouts/head_panel", title: project_title(@project)
= render "layouts/init_auto_complete"
- @project_settings_nav = true
diff --git a/app/views/layouts/projects.html.haml b/app/views/layouts/projects.html.haml
index c44a40c9c122be19474e2f519da950ad9129a916..dde0964f47f4961035bcf2467b24438ee0602404 100644
--- a/app/views/layouts/projects.html.haml
+++ b/app/views/layouts/projects.html.haml
@@ -1,7 +1,7 @@
!!! 5
%html{ lang: "en"}
= render "layouts/head", title: project_head_title
- %body{class: "#{app_theme} #{theme_type} project", :'data-page' => body_data_page, :'data-project-id' => @project.id }
+ %body{class: "#{app_theme} project", :'data-page' => body_data_page, :'data-project-id' => @project.id }
= render "layouts/head_panel", title: project_title(@project)
= render "layouts/init_auto_complete"
= render 'layouts/page', sidebar: 'layouts/nav/project'
diff --git a/app/views/layouts/public_group.html.haml b/app/views/layouts/public_group.html.haml
index 4b69329b8fe54efb98138eb0536de874eb963451..b9b1d03e08ee8a05288b207fcfbad755778f6da4 100644
--- a/app/views/layouts/public_group.html.haml
+++ b/app/views/layouts/public_group.html.haml
@@ -1,6 +1,6 @@
!!! 5
%html{ lang: "en"}
= render "layouts/head", title: group_head_title
- %body{class: "#{app_theme} #{theme_type} application", :'data-page' => body_data_page}
+ %body{class: "#{app_theme} application", :'data-page' => body_data_page}
= render "layouts/public_head_panel", title: link_to(@group.name, group_path(@group))
= render 'layouts/page', sidebar: 'layouts/nav/group'
diff --git a/app/views/layouts/public_projects.html.haml b/app/views/layouts/public_projects.html.haml
index 027e9a5313993cfb8814c377631025142dec4fab..04fa7c84e73c75ccaf700be683062e90fa0ce75e 100644
--- a/app/views/layouts/public_projects.html.haml
+++ b/app/views/layouts/public_projects.html.haml
@@ -1,6 +1,6 @@
!!! 5
%html{ lang: "en"}
= render "layouts/head", title: @project.name_with_namespace
- %body{class: "#{app_theme} #{theme_type} application", :'data-page' => body_data_page}
+ %body{class: "#{app_theme} application", :'data-page' => body_data_page}
= render "layouts/public_head_panel", title: project_title(@project)
= render 'layouts/page', sidebar: 'layouts/nav/project'
diff --git a/app/views/layouts/public_users.html.haml b/app/views/layouts/public_users.html.haml
index 3538a8b1699772413ca46d225885de0e7b81c3c5..71c16bd168418d1a0771abe37c692c26f12178c5 100644
--- a/app/views/layouts/public_users.html.haml
+++ b/app/views/layouts/public_users.html.haml
@@ -1,6 +1,6 @@
!!! 5
%html{ lang: "en"}
= render "layouts/head", title: @title
- %body{class: "#{app_theme} #{theme_type} application", :'data-page' => body_data_page}
+ %body{class: "#{app_theme} application", :'data-page' => body_data_page}
= render "layouts/public_head_panel", title: defined?(@title_url) ? link_to(@title, @title_url) : @title
= render 'layouts/page'
diff --git a/app/views/layouts/search.html.haml b/app/views/layouts/search.html.haml
index 177e2073a0d827419f5f2e4f527476bde27d7257..f9d8db06e10635c0023a48fe20b103b6a851e2d8 100644
--- a/app/views/layouts/search.html.haml
+++ b/app/views/layouts/search.html.haml
@@ -1,7 +1,7 @@
!!! 5
%html{ lang: "en"}
= render "layouts/head", title: "Search"
- %body{class: "#{app_theme} #{theme_type} application", :'data-page' => body_data_page}
+ %body{class: "#{app_theme} application", :'data-page' => body_data_page}
= render "layouts/broadcast"
= render "layouts/head_panel", title: link_to("Search", search_path)
.container.navless-container