From 9f1c0c89b4011f977eb6d8bdf4e03f7312b87e64 Mon Sep 17 00:00:00 2001
From: Hadi Nategh <hnategh@gmail.com>
Date: Wed, 1 Jun 2016 15:04:05 +0200
Subject: [PATCH] Styling improvement for tabs

---
 pixelegg/css/mobile.css          | 12 ++++++++----
 pixelegg/css/pixelegg.css        | 12 ++++++++----
 pixelegg/less/layout_dialog.less | 12 ++++++++----
 pixelegg/mobile/fw_mobile.css    | 12 ++++++++----
 4 files changed, 32 insertions(+), 16 deletions(-)

diff --git a/pixelegg/css/mobile.css b/pixelegg/css/mobile.css
index 709b4fb6d3..e9d3910ceb 100644
--- a/pixelegg/css/mobile.css
+++ b/pixelegg/css/mobile.css
@@ -3014,7 +3014,6 @@ tr.dialogHeader4 .et2_label {
  */
 .et2_tabheader {
   padding-left: 0em;
-  border-bottom: 3px solid #E6E6E6;
   margin: 0;
   background-image: none;
   background-color: #FFFFFF;
@@ -3028,7 +3027,7 @@ tr.dialogHeader4 .et2_label {
 .et2_tabflag,
 .etemplate_tab > div,
 .etemplate_tab_active > div {
-  margin: 1em 3px -1px 0;
+  margin: 1em 5px -1px 0;
   padding: 4px;
   background-color: white;
   -webkit-user-select: none;
@@ -3041,8 +3040,11 @@ tr.dialogHeader4 .et2_label {
 .et2_tabflag:hover,
 .etemplate_tab > div:hover,
 .etemplate_tab_active > div:hover {
-  background-color: #FFDD73;
+  background-color: #f0f0f0;
   border: none;
+  border-bottom: 3px solid #696969;
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
 }
 td.etemplate_tab_active.th {
   background-color: transparent;
@@ -3064,10 +3066,12 @@ td.etemplate_tab_active.th {
 .tab_body {
   border: none;
   border-bottom: 1px solid #E6E6E6;
+  border-top: 1px solid #E6E6E6;
   padding: 5px;
   background-color: #FFFFFF;
   margin-bottom: 11px;
-  margin-top: 11px;
+  margin-top: 3px;
+  padding-top: 15px;
 }
 .tab_body {
   border-top-width: 1px;
diff --git a/pixelegg/css/pixelegg.css b/pixelegg/css/pixelegg.css
index 1496ad6c58..6f9e2c83ec 100644
--- a/pixelegg/css/pixelegg.css
+++ b/pixelegg/css/pixelegg.css
@@ -3003,7 +3003,6 @@ tr.dialogHeader4 .et2_label {
  */
 .et2_tabheader {
   padding-left: 0em;
-  border-bottom: 3px solid #E6E6E6;
   margin: 0;
   background-image: none;
   background-color: #FFFFFF;
@@ -3017,7 +3016,7 @@ tr.dialogHeader4 .et2_label {
 .et2_tabflag,
 .etemplate_tab > div,
 .etemplate_tab_active > div {
-  margin: 1em 3px -1px 0;
+  margin: 1em 5px -1px 0;
   padding: 4px;
   background-color: white;
   -webkit-user-select: none;
@@ -3030,8 +3029,11 @@ tr.dialogHeader4 .et2_label {
 .et2_tabflag:hover,
 .etemplate_tab > div:hover,
 .etemplate_tab_active > div:hover {
-  background-color: #FFDD73;
+  background-color: #f0f0f0;
   border: none;
+  border-bottom: 3px solid #696969;
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
 }
 td.etemplate_tab_active.th {
   background-color: transparent;
@@ -3053,10 +3055,12 @@ td.etemplate_tab_active.th {
 .tab_body {
   border: none;
   border-bottom: 1px solid #E6E6E6;
+  border-top: 1px solid #E6E6E6;
   padding: 5px;
   background-color: #FFFFFF;
   margin-bottom: 11px;
-  margin-top: 11px;
+  margin-top: 3px;
+  padding-top: 15px;
 }
 .tab_body {
   border-top-width: 1px;
diff --git a/pixelegg/less/layout_dialog.less b/pixelegg/less/layout_dialog.less
index 7e0618e049..d210b6dd1d 100755
--- a/pixelegg/less/layout_dialog.less
+++ b/pixelegg/less/layout_dialog.less
@@ -236,7 +236,6 @@ tr.dialogHeader4{
 
 .et2_tabheader {
     padding-left: 0em;
-    border-bottom: 3px solid @gray_10;
     margin: 0;
     background-image: none;
     background-color: @gray_0;
@@ -246,7 +245,7 @@ tr.dialogHeader4{
 }
 .et2_tabflag {border:none;}
 .et2_tabflag, .etemplate_tab > div, .etemplate_tab_active > div {
-    margin: 1em 3px -1px 0;
+    margin: 1em 5px -1px 0;
     padding: 4px;
     background-color: white;
     -webkit-user-select: none;
@@ -256,8 +255,11 @@ tr.dialogHeader4{
 	border-bottom:3px solid @gray_10;
 	margin-bottom:-3px;
    &:hover {
-        .background_color_egw_lighter;
+        .background_color_10_gray;
 		border:none;
+		border-bottom: 3px solid @gray_60;
+		border-top-left-radius: 5px;
+		border-top-right-radius: 5px;
     }
 }
 td.etemplate_tab_active.th {
@@ -283,10 +285,12 @@ td.etemplate_tab_active.th {
 .et2_tabs, .tab_body {
 	border:none;
     border-bottom:1px solid @gray_10;
+	border-top: 1px solid @gray_10;
     padding: 5px;
     background-color: @gray_0;
     margin-bottom: 11px;
-	margin-top:11px;
+	margin-top:3px;
+	padding-top: 15px;
 }
 
 .tab_body {
diff --git a/pixelegg/mobile/fw_mobile.css b/pixelegg/mobile/fw_mobile.css
index ac09d43502..e568cd3aa2 100644
--- a/pixelegg/mobile/fw_mobile.css
+++ b/pixelegg/mobile/fw_mobile.css
@@ -3025,7 +3025,6 @@ tr.dialogHeader4 .et2_label {
  */
 .et2_tabheader {
   padding-left: 0em;
-  border-bottom: 3px solid #E6E6E6;
   margin: 0;
   background-image: none;
   background-color: #FFFFFF;
@@ -3039,7 +3038,7 @@ tr.dialogHeader4 .et2_label {
 .et2_tabflag,
 .etemplate_tab > div,
 .etemplate_tab_active > div {
-  margin: 1em 3px -1px 0;
+  margin: 1em 5px -1px 0;
   padding: 4px;
   background-color: white;
   -webkit-user-select: none;
@@ -3052,8 +3051,11 @@ tr.dialogHeader4 .et2_label {
 .et2_tabflag:hover,
 .etemplate_tab > div:hover,
 .etemplate_tab_active > div:hover {
-  background-color: #FFDD73;
+  background-color: #f0f0f0;
   border: none;
+  border-bottom: 3px solid #696969;
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
 }
 td.etemplate_tab_active.th {
   background-color: transparent;
@@ -3075,10 +3077,12 @@ td.etemplate_tab_active.th {
 .tab_body {
   border: none;
   border-bottom: 1px solid #E6E6E6;
+  border-top: 1px solid #E6E6E6;
   padding: 5px;
   background-color: #FFFFFF;
   margin-bottom: 11px;
-  margin-top: 11px;
+  margin-top: 3px;
+  padding-top: 15px;
 }
 .tab_body {
   border-top-width: 1px;