rework nav-tab design

app/assets/javascripts/app/controllers/_application_controller_generic.coffee

@@ -363,6 +363,7 @@ class App.ControllerTabs extends App.Controller
     super
 
   render: ->
+    @el.addClass 'main--tabs'
 
     @html App.view('generic/tabs')(
       header: @header

app/assets/javascripts/app/views/channel/chat.jst.eco

@@ -1,9 +1,3 @@
-<div class="page-header">
-  <div class="page-header-title">
-    <h1><%- @T('Chat Widget') %></h1>
-  </div>
-</div>
-<div class="page-content">
 <p><%- @T('You can create chat widgets for your webpages to allow visitors to chat with you.') %></p>
 
 <% if _.isEmpty(@chats): %>
@@ -192,5 +186,3 @@ $(function() {
 </form>
 
 <div class="js-settings"></div>
-
-</div>

app/assets/javascripts/app/views/generic/tabs.jst.eco

@@ -2,6 +2,13 @@
   <div class="page-header-title">
     <h1><%- @T( @header ) %> <small><%- @T( @subHeader ) %></small></h1>
   </div>
+  <% if @addTab: %>
+  <div class="page-header-meta">
+    <div class="btn btn--success btn--quad">
+      <%- @Icon('plus') %>
+    </div>
+  </div>
+  <% end %>
 </div>
 <div class="page-content">
   <div class="page-tabs">
@@ -10,11 +17,6 @@
         <li><a href="#<%= tab.target %>" role="tab" data-toggle="tab"><%- @T( tab.name ) %></a></li>
       <% end %>
     </ul>
-    <% if @addTab: %>
-    <div class="btn btn--success btn--quad">
-      <%- @Icon('plus') %>
-    </div>
-    <% end %>
   </div>
   <div class="tab-content"></div>
 </div>

app/assets/stylesheets/bootstrap.css

@@ -2491,7 +2491,6 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
 .nav > li > a:hover,
 .nav > li > a:focus {
   text-decoration: none;
-  background-color: #eee;
 }
 .nav > li.disabled > a {
   color: #777;
@@ -2518,75 +2517,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
 .nav > li > a > img {
   max-width: none;
 }
-.nav-tabs {
-  border-bottom: 1px solid #ddd;
-}
-.nav-tabs > li {
-  float: left;
-  margin-bottom: -1px;
-}
-.nav-tabs > li > a {
-  margin-right: 2px;
-  line-height: 1.42857143;
-  border: 1px solid transparent;
-  border-radius: 4px 4px 0 0;
-}
-.nav-tabs > li > a:hover {
-  border-color: #eee #eee #ddd;
-}
-.nav-tabs > li.active > a,
-.nav-tabs > li.active > a:hover,
-.nav-tabs > li.active > a:focus {
-  color: #555;
-  cursor: default;
-  background-color: #fff;
-  border: 1px solid #ddd;
-  border-bottom-color: transparent;
-}
-.nav-tabs.nav-justified {
-  width: 100%;
-  border-bottom: 0;
-}
-.nav-tabs.nav-justified > li {
-  float: none;
-}
-.nav-tabs.nav-justified > li > a {
-  margin-bottom: 5px;
-  text-align: center;
-}
-.nav-tabs.nav-justified > .dropdown .dropdown-menu {
-  top: auto;
-  left: auto;
-}
-@media (min-width: 768px) {
-  .nav-tabs.nav-justified > li {
-    display: table-cell;
-    width: 1%;
-  }
-  .nav-tabs.nav-justified > li > a {
-    margin-bottom: 0;
-  }
-}
-.nav-tabs.nav-justified > li > a {
-  margin-right: 0;
-  border-radius: 4px;
-}
-.nav-tabs.nav-justified > .active > a,
-.nav-tabs.nav-justified > .active > a:hover,
-.nav-tabs.nav-justified > .active > a:focus {
-  border: 1px solid #ddd;
-}
-@media (min-width: 768px) {
-  .nav-tabs.nav-justified > li > a {
-    border-bottom: 1px solid #ddd;
-    border-radius: 4px 4px 0 0;
-  }
-  .nav-tabs.nav-justified > .active > a,
-  .nav-tabs.nav-justified > .active > a:hover,
-  .nav-tabs.nav-justified > .active > a:focus {
-    border-bottom-color: #fff;
-  }
-}
+
 .nav-pills > li {
   float: left;
 }

app/assets/stylesheets/zammad.scss

@@ -1831,9 +1831,30 @@ kbd {
   color: initial;
 }
 
+.main--tabs .page-header {
+  background: hsl(200,12%,90%);
+  padding: 20px;
+  overflow: hidden;
+  margin: 0;
+}
+
+.main--tabs .page-content {
+  padding: 20px;
+}
+
 .page-tabs {
   display: flex;
-  margin: 28px 0 50px;
+  margin: -20px -20px 50px;
+  padding: 0 20px;
+  background: hsl(200,12%,90%);
+  border-bottom: 1px solid hsl(200,12%,87%);
+  
+  .nav-tabs li.active {
+    background: hsl(210,17%,98%);
+    border-bottom-color: hsl(210,17%,98%);
+    margin-bottom: -1px;
+    padding-bottom: 1px;
+  }
   
   .btn {
     margin-left: auto;
@@ -3351,6 +3372,7 @@ footer {
   position: relative;
 }
 
+.main--tabs,
 .main.no-padding {
   padding: 0;
 }
@@ -5629,46 +5651,21 @@ footer {
 }
 
 .nav-tabs {
-  border-bottom: none; 
+  display: flex;
+  margin-left: 1px;
 }
 
 .nav-tabs li {
   margin: 0;
+  border-radius: 3px 3px 0 0;
+  border: 1px solid hsl(200,12%,87%);
+  border-bottom-color: transparent;
+  background: hsl(197,14%,93%);
+  margin-left: -1px;
 }
 
-.nav-tabs > li > a,
-.nav-tabs > li > a:hover,
-.nav-tabs > li > a:focus {
-  background: white;
-  border-radius: 0;
-  border: 1px solid hsl(0,0%,90%);
-  color: hsl(0,0%,70%);
-  height: 40px;
-  margin: 0;
-}
-
-.nav-tabs > li:not(:last-child):not(:only-child) > a {
-  border-right: none;
-}
-
-.nav-tabs > li:first-child > a {
-  border-radius: 5px 0 0 5px;
-}
-
-.nav-tabs > li:last-child > a {
-  border-radius: 0 5px 5px 0;
-}
-
-.nav-tabs > li:only-child > a {
-  border-radius: 5px;
-}
-
-.nav-tabs > li.active > a,
-.nav-tabs > li.active > a:hover,
-.nav-tabs > li.active > a:focus {
-  background: hsl(206,7%,28%);
-  color: white;
-  border-color: hsl(0,0%,90%);
+.nav-tabs li.active {
+  position: relative;
 }
 
 .tab-content {