Give tabs a more classical appearance

5 files changed, 45 insertions, 117 deletions

diff --git a/mail/themes/classic/messenger/icons/tab-active-bkgnd.png b/mail/themes/classic/messenger/icons/tab-active-bkgnd.png
new file mode 100644
index 000000000..0e3290de9
--- /dev/null
+++ b/mail/themes/classic/messenger/icons/tab-active-bkgnd.png
diff --git a/mail/themes/classic/messenger/icons/tab-bkgnd.png b/mail/themes/classic/messenger/icons/tab-bkgnd.png
new file mode 100644
index 000000000..598728e7e
--- /dev/null
+++ b/mail/themes/classic/messenger/icons/tab-bkgnd.png
diff --git a/mail/themes/classic/messenger/icons/tab-hover-bkgnd.apng b/mail/themes/classic/messenger/icons/tab-hover-bkgnd.apng
new file mode 100644
index 000000000..75d2fba75
--- /dev/null
+++ b/mail/themes/classic/messenger/icons/tab-hover-bkgnd.apng
diff --git a/mail/themes/classic/messenger/primaryToolbar.css b/mail/themes/classic/messenger/primaryToolbar.css
index 9605f280c..d52d0c7e3 100644
--- a/mail/themes/classic/messenger/primaryToolbar.css
+++ b/mail/themes/classic/messenger/primaryToolbar.css
@@ -22,6 +22,15 @@
 @media (-moz-os-version: windows-win7) {

   #tabs-toolbar { -moz-appearance: -moz-win-browsertabbar-toolbox; }

 }

+

+@media not all and (-moz-os-version: windows-win7) {

+  #tabs-toolbar {

+    -moz-appearance: none;

+    background-image: linear-gradient(rgba(0, 0, 0, .11), transparent, rgba(0, 0, 0, .06));

+    border-top: 1px solid ThreeDShadow !important;

+    border-bottom: none;

+  }

+}

 %endif

 %endif

 

diff --git a/mail/themes/classic/messenger/tabmail.css b/mail/themes/classic/messenger/tabmail.css
index d419a3328..f194e2dd9 100644
--- a/mail/themes/classic/messenger/tabmail.css
+++ b/mail/themes/classic/messenger/tabmail.css
@@ -39,7 +39,7 @@
  */

 

 .tabmail-arrowscrollbox {

-  margin-bottom: -1px;

+  margin-bottom: 3px;

  }

 

 .tabmail-tabs[overflow="true"] {

@@ -60,105 +60,47 @@
 

 .tabmail-tab {

   -moz-appearance: none;

-  background:

-    -moz-linear-gradient(

-      bottom,

-      rgba(10%, 10%, 10%, .4) 1px,

-      transparent 1px

-    ),

-    -moz-linear-gradient(

-      transparent,

-      hsla(0, 0%, 32%, .2) 80%,

-      hsla(0, 0%, 0%, .2)

-    ),

-    -moz-linear-gradient(

-      -moz-dialog,

-      -moz-dialog

-    );

-  background-origin: border-box;

-  background-position: 1px 2px;

-  background-size: -moz-calc(100% - 2px) -moz-calc(100% - 2px);

-  background-repeat: no-repeat;

-  margin: 0;

-  padding: 1px 0 3px;

-  -moz-border-image: url(icons/tab.png) 4 3 0 / 4px 3px 0 repeat stretch;

-  height: 24px;

-  min-height: 24px;

-  border-radius: 0;

-  border-width: 0;

-  margin-top: 1px;

-%ifndef MOZ_MAIL_LEGACY

-  margin-bottom: 4px;

-%endif

-}

-

-.tabmail-tab:not(:-moz-lwtheme):not([selected="true"]):hover {

-  background-image:

-    -moz-linear-gradient(

-      bottom,

-      rgba(10%, 10%, 10%, .4) 1px,

-      transparent 1px

-    ),

-    -moz-linear-gradient(

-      hsla(0, 0%, 100%, .3) 1px,

-      hsla(0, 0%, 75%, .2) 80%,

-      hsla(0, 0%, 60%, .2)

-    ),

-    -moz-linear-gradient(

-      -moz-dialog,

-      -moz-dialog

-    );

-}

-

-.tabmail-tab[selected="true"]:not(:-moz-lwtheme) {

-  background-image: -moz-linear-gradient(

-                      rgba(255, 255, 255, .7),

-                      rgba(255, 255, 255, .5) 30%

-                    ),

-                    -moz-linear-gradient(

-                      -moz-dialog,

-                      -moz-dialog

-                    );

-  color: -moz-dialogText;

-}

-

-.tabmail-tab:-moz-lwtheme {

-  color: inherit;

-}

-

-.tabmail-tab[selected="true"]:-moz-lwtheme {

-  background-image: -moz-linear-gradient(rgba(255, 255, 255, .7),

-                    rgba(255, 255, 255, .5) 50%);

-}

-

-.tabmail-tab:-moz-lwtheme-brighttext:not([selected="true"]) {

-  background-image: -moz-linear-gradient(hsla(0, 0%, 40%, .6),

-                    hsla(0, 0%, 30%, .6) 80%);

-}

-

-.tabmail-tab:-moz-lwtheme-brighttext:not([selected="true"]):hover {

-  background-image: -moz-linear-gradient(hsla(0, 0%, 60%, .6),

-                    hsla(0, 0%, 45%, .6) 80%);

+  background: url("chrome://messenger/skin/icons/tab-bkgnd.png") repeat-x;

+  margin: 3px 0px 4px;

+  border: 2px solid;

+  border-right-width: 1px;

+  border-bottom: none;

+  border-radius: 2px 2px 0 0;

+  -moz-border-right-colors: rgba(0,0,0,.1);

+  -moz-border-top-colors: ThreeDShadow rgba(255,255,255,.3);

+  -moz-border-left-colors: ThreeDShadow rgba(255,255,255,.3);

+  margin-bottom: 0;

+}

+

+.tabmail-tab:hover,

+.tabmail-tab[selected="true"] {

+  border-radius: 4px 4px 0 0;

+  -moz-border-top-colors: ThreeDShadow transparent;

+  -moz-border-right-colors: ThreeDShadow transparent;

+  -moz-border-left-colors: ThreeDShadow transparent;

+  margin-top: 2px;

 }

 

-.tabmail-tab:-moz-lwtheme-darktext:not([selected="true"]) {

-  background-image: -moz-linear-gradient(hsla(0, 0%, 60%, .5),

-                    hsla(0, 0%, 45%, .5) 80%);

+.tabmail-tab:not([selected]) {

+  padding-bottom: 3px;

 }

 

-.tabmail-tab:-moz-lwtheme-darktext:not([selected="true"]):hover {

-  background-image: -moz-linear-gradient(hsla(0, 0%, 80%, .5),

-                    hsla(0, 0%, 60%, .5) 80%);

+.tabmail-tab:not([selected="true"]):hover {

+  background: url("chrome://messenger/skin/icons/tab-hover-bkgnd.apng") 0px -2px repeat-x;

+  padding-top: 2px;

 }

 

-.tab-content {

-  -moz-padding-start: 3px;

-  -moz-padding-end: 3px;

+.tabmail-tab[selected="true"] {

+  background: -moz-Dialog url("chrome://messenger/skin/icons/tab-active-bkgnd.png") repeat-x;

+  font-weight: bold;

+  padding-top: 1px;

+  padding-left: 4px;

+  padding-right: 4px;

+  min-height: 24px !important;

 }

 

-.tabmail-tab > .tab-image-middle {

-  padding-top: 1px;

-  -moz-padding-start: 1px;

+.tabmail-tab[selected="true"] .tab-text {

+  margin-top: -1px !important;

 }

 

 .tabmail-tab[busy],

@@ -171,30 +113,6 @@
   list-style-image: url("chrome://global/skin/icons/Search-glass.png");

 }

 

-.tabmail-tab[selected="true"] > .tab-image-middle > .tab-text {

-  opacity: 1.0 !important;

-}

-

-.tabmail-arrowscrollbox > .scrollbutton-up:-moz-lwtheme-brighttext,

-.tabmail-arrowscrollbox > .scrollbutton-down:-moz-lwtheme-brighttext,

-.tabs-alltabs-button:-moz-lwtheme-brighttext,

-.tabs-closebutton:-moz-lwtheme-brighttext {

-  background-color: rgba(0,0,0,.5);

-}

-

-.tabmail-arrowscrollbox > .scrollbutton-up:-moz-lwtheme-darktext,

-.tabmail-arrowscrollbox > .scrollbutton-down:-moz-lwtheme-darktext,

-.tabs-alltabs-button:-moz-lwtheme-darktext,

-.tabs-closebutton:-moz-lwtheme-darktext {

-  background-color: rgba(255,255,255,.5);

-}

-

-.tabmail-tabs:-moz-lwtheme {

-  padding-top: 1px;

-  background-color: transparent;

-  background-image: none;

-}

-

 %ifndef MOZ_MAIL_LEGACY

 .tabs-bottom {

   height: 4px !important;

@@ -272,7 +190,9 @@ tabpanels {
 }

 

 .tabmail-tab:not([selected="true"]) > .tab-stack > .tab-content > .tab-close-button:not(:hover):not(:active) {

+%ifndef XP_LINUX

   -moz-image-region: rect(0px, 64px, 16px, 48px);

+%endif

   /* Make this button focusable so clicking on it will not focus the tab while

      it's getting closed */

   -moz-user-focus: normal;

@@ -421,4 +341,3 @@ tabpanels {
   height: 0px;

   min-height: 0px;

 }

-