- Using colours of openproject.org

- Removing horizontal lines in main menu
- Adding more themable variables

app/assets/stylesheets/layout/_main_menu.sass

@@ -36,7 +36,9 @@ $menu-item-line-height: 30px
   float: left
   overflow-x: hidden
   left: 0
-  border-right: $main-menu-border-width solid $main-menu-border-color
+  border-right-style: solid
+  @include varprop(border-right-width, main-menu-border-width)
+  @include varprop(border-right-color, header-border-bottom-color)
 
   // min-height is full height minus header and footer.
   min-height: calc(100vh - 55px)
@@ -198,10 +200,8 @@ $arrow-left-width: 40px
         @include varprop(background, main-menu-child-bg-hover-color)
 
 .main-menu--children-menu-header
-  padding: 10px
-  border-bottom: 1px solid
-  border-bottom: $main-menu-border-width solid $main-menu-border-color
-  height: calc(#{$main-menu-item-height} + 20px)
+  padding: 10px 10px 0 10px
+  height: calc(#{$main-menu-item-height} + 10px)
 
 .main-menu--arrow-left-to-project
   display: inline-block

app/assets/stylesheets/layout/work_packages/_query_menu.sass

@@ -49,7 +49,7 @@ $wp-query-menu-search-container-height: 35px
     font-size: $main-menu-font-size
 
   .wp-query-menu--search-container
-    padding-top: 15px
+    padding-top: 10px
     overflow: hidden
     @include varprop(color, main-menu-font-color)
 
@@ -141,7 +141,7 @@ $wp-query-menu-search-container-height: 35px
     @include varprop(color, main-menu-font-color)
     width: 100%
     height: 35px
-    border: 1px solid $main-menu-border-color
+    border: 1px solid rgba(231, 231, 231, 0.15)
     border-radius: 3px
     box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.15)
     background-color: rgba(0, 0, 0, 0.15)

app/views/custom_styles/_inline_css.erb

@@ -46,6 +46,9 @@ See doc/COPYRIGHT.rdoc for more details.
     <% if design_color.variable == "header-border-bottom-color" %>
       --header-border-bottom-width: 1px;
     <% end %>
+    <% if design_color.variable == "main-menu-border-color" %>
+      --main-menu-border-width: 1px;
+    <% end %>
     <% if design_color.variable == "alternative-color" %>
       --button--alt-highlight-background-hover-color: <%= darken_color design_color.hexcode, 0.82 %>;
     <% end %>

lib/open_project/design.rb

@@ -58,14 +58,14 @@ module OpenProject
       'h4-font-color'                                        => "$body-font-color",
       'header-height'                                        => "55px",
       'header-height-mobile'                                 => "55px",
-      'header-bg-color'                                      => "$primary-color",
+      'header-bg-color'                                      => "#06799F",
       'header-home-link-bg'                                  => '#{image-url("logo_openproject_white_big.png") no-repeat 20px 0}',
       'header-border-bottom-color'                           => "$primary-color",
       'header-border-bottom-width'                           => "0",
       'header-item-font-size'                                => "14px",
       'header-item-font-color'                               => "$font-color-on-primary",
       'header-item-font-hover-color'                         => "$font-color-on-primary-dark",
-      'header-item-bg-hover-color'                           => "$primary-color-dark",
+      'header-item-bg-hover-color'                           => "#16D280",
       'header-drop-down-bg-color'                            => "#FFFFFF",
       'header-drop-down-border-color'                        => "#DDDDDD",
       'header-drop-down-item-font-color'                     => "$body-font-color",
@@ -79,15 +79,15 @@ module OpenProject
       'header-search-field-border'                           => "0",
       'main-menu-width'                                      => "230px",
       'main-menu-folded-width'                               => "0px",
-      'main-menu-border-color'                               => "rgba(231, 231, 231, 0.15)",
-      'main-menu-border-width'                               => "1px",
+      'main-menu-border-color'                               => "#EAEAEA",
+      'main-menu-border-width'                               => "0px",
       'main-menu-item-height'                                => "40px",
-      'main-menu-item-border-color'                          => "#EAEAEA",
+      'main-menu-item-border-color'                          => "$primary-color",
       'main-menu-item-border-width'                          => "1px",
       'main-menu-enable-toggle-highlighting'                 => "false",
-      'main-menu-bg-color'                                   => "#3F4C56",
-      'main-menu-bg-selected-background'                     => "#175A8E",
-      'main-menu-bg-hover-background'                        => "$main-menu-bg-selected-background",
+      'main-menu-bg-color'                                   => "#376585",
+      'main-menu-bg-selected-background'                     => "#00A3BF",
+      'main-menu-bg-hover-background'                        => "#16D280",
       'main-menu-font-color'                                 => "#FFFFFF",
       'main-menu-hover-font-color'                           => "$main-menu-font-color",
       'main-menu-resizer-color'                              => "$primary-color",
@@ -274,7 +274,12 @@ module OpenProject
           header-border-bottom-color
           content-link-color
           main-menu-bg-color
-          main-menu-font-color )
+          main-menu-font-color
+          main-menu-bg-selected-background
+          main-menu-selected-font-color
+          main-menu-bg-hover-background
+          main-menu-hover-font-color
+          main-menu-border-color )
     end
   end
 end