Bug 643262 - Update the appearance of the Contacts sidebar; f=nisses.mail r=bwinton ui-r=andreasn
authorRichard Marti <richard.marti@gmail.com>
Tue, 24 May 2011 22:13:15 +0100
changeset 7819 02c7badcf034002695a20c78898dcc0d0edafd9f
parent 7818 3115956e3f0fc1fe9d085afa278ffbc7a84b338b
child 7820 bda8ab34845bef9320d6eee13133234bc8aa6af0
push id5
push userbugzilla@standard8.plus.com
push dateTue, 24 May 2011 21:37:58 +0000
treeherdercomm-aurora@f314c7f8580f [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbwinton, andreasn
bugs643262
Bug 643262 - Update the appearance of the Contacts sidebar; f=nisses.mail r=bwinton ui-r=andreasn
mail/themes/qute/jar.mn
mail/themes/qute/mail/addrbook/abContactsPanel-aero.css
mail/themes/qute/mail/compose/messengercompose-aero.css
--- a/mail/themes/qute/jar.mn
+++ b/mail/themes/qute/jar.mn
@@ -326,17 +326,17 @@ classic.jar:
   skin/classic/aero/messenger/activity/removeItemIcon.png             (mail/activity/removeItemIcon-aero.png)
   skin/classic/aero/messenger/activity/addItemIcon.png                (mail/activity/addItemIcon-aero.png)
   skin/classic/aero/messenger/activity/moveMailIcon.png               (mail/activity/moveMailIcon-aero.png)
   skin/classic/aero/messenger/activity/copyMailIcon.png               (mail/activity/copyMailIcon-aero.png)
   skin/classic/aero/messenger/activity/deleteMailIcon.png             (mail/activity/deleteMailIcon-aero.png)
   skin/classic/aero/messenger/activity/compactMailIcon.png            (mail/activity/compactMailIcon-aero.png)
   skin/classic/aero/messenger/activity/indexMailIcon.png              (mail/activity/indexMailIcon-aero.png)
   skin/classic/aero/messenger/addressbook/addressbook.css          (mail/addrbook/addressbook-aero.css)
-  skin/classic/aero/messenger/addressbook/abContactsPanel.css      (mail/addrbook/abContactsPanel.css)
+* skin/classic/aero/messenger/addressbook/abContactsPanel.css      (mail/addrbook/abContactsPanel-aero.css)
   skin/classic/aero/messenger/addressbook/cardDialog.css           (mail/addrbook/cardDialog.css)
   skin/classic/aero/messenger/addressbook/abResultsPane.css        (mail/addrbook/abResultsPane.css)
   skin/classic/aero/messenger/addressbook/icons/abcard.png         (mail/addrbook/abcard.png)
   skin/classic/aero/messenger/addressbook/icons/addrbook.png       (mail/addrbook/addrbook-aero.png)
   skin/classic/aero/messenger/addressbook/icons/ablist.png         (mail/addrbook/ablist.png)
   skin/classic/aero/messenger/addressbook/icons/contact-generic.png             (mail/addrbook/contact-generic.png)
   skin/classic/aero/messenger/addressbook/icons/contact-generic-tiny.png        (mail/addrbook/contact-generic-tiny.png)
   skin/classic/aero/messenger/addressbook/icons/addressbook-toolbar.png         (mail/addrbook/addressbook-toolbar-aero.png)
new file mode 100644
--- /dev/null
+++ b/mail/themes/qute/mail/addrbook/abContactsPanel-aero.css
@@ -0,0 +1,105 @@
+/* ***** BEGIN LICENSE BLOCK *****
+ * Version: MPL 1.1/GPL 2.0/LGPL 2.1
+ *
+ * The contents of this file are subject to the Mozilla Public License Version
+ * 1.1 (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ * http://www.mozilla.org/MPL/
+ *
+ * Software distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
+ * for the specific language governing rights and limitations under the
+ * License.
+ *
+ * The Original Code is abContactsPanel-aero.css.
+ *
+ * The Initial Developer of the Original Code is
+ * the Mozilla Foundation.
+ * Portions created by the Initial Developer are Copyright (C) 2011
+ * the Initial Developer. All Rights Reserved.
+ *
+ * Contributor(s):
+ * Richard Marti <richard.marti@gmail.com>
+ *
+ * Alternatively, the contents of this file may be used under the terms of
+ * either the GNU General Public License Version 2 or later (the "GPL"), or
+ * the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
+ * in which case the provisions of the GPL or the LGPL are applicable instead
+ * of those above. If you wish to allow use of your version of this file only
+ * under the terms of either the GPL or the LGPL, and not to allow others to
+ * use your version of this file under the terms of the MPL, indicate your
+ * decision by deleting the provisions above and replace them with the notice
+ * and other provisions required by the GPL or the LGPL. If you do not delete
+ * the provisions above, a recipient may use your version of this file under
+ * the terms of any one of the MPL, the GPL or the LGPL.
+ *
+ * ***** END LICENSE BLOCK ***** */
+
+%include abContactsPanel.css
+
+@media all and (-moz-windows-default-theme) {
+  #abContactsPanel {
+    -moz-appearance: none;
+    background-color: rgb(207, 219, 236);
+  }
+}
+
+@media all and (-moz-windows-compositor) {
+  #abContactsPanel {
+    background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.5) 10px,
+                        rgba(255, 255, 255, 0));
+  }
+}
+
+#abResultsTree {
+  -moz-border-end: none;
+  border-bottom: 1px solid #A9B1B8;
+}
+
+button,
+#addressbookList {
+  -moz-appearance: none;
+  padding: 1px 5px !important;
+  background: rgba(151, 152, 153, .05)
+              -moz-linear-gradient(rgba(251, 252, 253, .95),
+                rgba(246, 247, 248, .47) 49%, rgba(231, 232, 233, .45) 51%,
+                rgba(225,226,229,.3));
+  border-radius: 4.5px;
+  border: 1px solid;
+  border-color: rgba(0,0,0,.12) rgba(0,0,0,.19) rgba(0,0,0,.38);
+  box-shadow: 0 0 0 1px rgba(255, 255, 255, .3) inset,
+              0 0 0 2px rgba(255, 255, 255, .1) inset,
+              0 1px 0 rgba(0, 0, 0, .15);
+  color: black;
+  text-shadow: 0 0 3px white;
+}
+
+button:hover,
+#addressbookList:not([open="true"]):hover {
+  background-color: hsla(190, 60%, 70%, .5);
+  border-color: hsla(190, 50%, 65%, .8) hsla(190, 50%, 50%, .8)
+                hsla(190, 50%, 40%, .8);
+  box-shadow: 0 0 0 1px rgba(255,255,255,.3) inset,
+              0 0 0 2px rgba(255,255,255,.1) inset,
+              0 1px 0 rgba(0,0,0,.1),
+              0 0 5px hsl(190,90%,80%);
+  -moz-transition: background-color .4s ease-in,
+                   border-color .3s ease-in,
+                   box-shadow .3s ease-in;
+}
+
+button:hover:active,
+#addressbookList[open="true"] {
+  background-color: transparent;
+  border-color: rgba(0, 0, 0, .65) rgba(0, 0, 0, .55) rgba(0, 0, 0, .5);
+  box-shadow: 0 0 9px rgba(0, 0, 0, .4) inset,
+              0 0 3px rgba(0, 0, 0, .4) inset,
+              0 1px 0 rgba(255, 255, 255, .4);
+  text-shadow: none;
+}
+
+.menulist-dropmarker {
+  -moz-appearance: none;
+  border:none;
+  background-color: transparent;
+}
--- a/mail/themes/qute/mail/compose/messengercompose-aero.css
+++ b/mail/themes/qute/mail/compose/messengercompose-aero.css
@@ -244,16 +244,20 @@ toolbar[iconsize="small"] .toolbarbutton
 toolbox[labelalign="end"] > toolbar[mode="full"] .toolbarbutton-1 .toolbarbutton-text {
   -moz-padding-start: 2px;
 }
 
 toolbox[labelalign="end"] > toolbar[mode="full"] deck .toolbarbutton-text {
   text-align: start;
 }
 
+#headers-box {
+  border-top-width: 0;
+}
+
 @media all and (-moz-windows-compositor) {
   #msgcomposeWindow {
     -moz-appearance: -moz-win-borderless-glass;
     background: transparent;
   }
 
   #compose-toolbox:not(:-moz-lwtheme),
   #compose-toolbox > #composeToolbar2,
@@ -271,25 +275,51 @@ toolbox[labelalign="end"] > toolbar[mode
   #MsgHeadersToolbar {
     -moz-appearance: none;
     border-radius: 3.5px 3.5px 0 0;
     background-color: rgb(207, 219, 236);
     background-image: -moz-linear-gradient(rgba(255, 255, 255, .5) 10px,
                       rgba(255, 255, 255, 0));
   }
 
+  #sidebar-splitter:not([hidden="true"]) + vbox >
+      #headers-box:-moz-locale-dir(ltr) {
+    border-top-left-radius: 0;
+  }
+
+  #sidebar-splitter:not([hidden="true"]) + vbox >
+      #headers-box:-moz-locale-dir(rtl) {
+    border-top-right-radius: 0;
+  }
+
   #menubar-items:not(:-moz-lwtheme):not(:-moz-window-inactive) {
     background-color: rgba(255, 255, 255, .3);
     border-radius: 4px;
   }
 
   .toolbarbutton-menubutton-button[disabled="true"],
   .toolbarbutton-menubutton-dropmarker[disabled="true"] {
     opacity: 1 !important;
   }
+
+  #msgcomposeWindow[sizemode=normal] #compose-toolbox + hbox {
+    border: 1px solid rgba(10%, 10%, 10%, .4);
+    border-top: none;
+    border-radius: 3.5px 3.5px 0 0;
+    background-clip: padding-box;
+  }
+
+  #msgcomposeWindow[sizemode=normal] statusbar {
+    -moz-appearance: none;
+    margin-top: -1px;
+    border: 1px solid rgba(10%, 10%, 10%, .4);
+    border-top-color: threedshadow;
+    border-radius: 1px 1px 0 0;
+    background-clip: padding-box;
+  }
 }
 
 #button-send {
   list-style-image: url("chrome://messenger/skin/messengercompose/compose-toolbar.png");
   -moz-image-region: rect(0px 18px 18px 0px);
 }
 
 #button-contacts {
@@ -333,23 +363,29 @@ toolbox[labelalign="end"] > toolbar[mode
   list-style-image: url("chrome://messenger/skin/messengercompose/compose-toolbar.png");
   -moz-image-region: rect(0px 180px 18px 162px);
 }
 
 /* ::::: special toolbar colors ::::: */
 
 #appcontent {
   border-top: 1px solid ThreeDShadow;
-  border-left: 1px solid ThreeDShadow;
-  border-right: 1px solid ThreeDHighlight;
 }
 
 #attachmentbucket-sizer {
-  border-top: none;
-  border-bottom: none;
+  position: relative;
+  z-index: 10;
+  min-width: 0;
+  width: 5px;
+  -moz-margin-end: -4px;
+  -moz-border-end-width: 0;
+  -moz-border-start: 2px solid ThreeDShadow;
+  -moz-border-left-colors: none;
+  -moz-border-right-colors: none; /* for rtl -moz-border-start */
+  background-color: transparent;
 }
 
 /* ::::: attachment reminder ::::: */
 
 #attachmentNotificationBox > notification .messageImage {
   width: 18px;
   height: 18px;
   background-image: url(chrome://messenger/skin/messengercompose/compose-toolbar.png);
@@ -372,20 +408,24 @@ toolbox[labelalign="end"] > toolbar[mode
    objects underneath the attachmentList listbox */
 
 .listcell-icon {
   -moz-margin-start: 2px;
   margin-top: 2px;
 }
 
 #compose-toolbar-sizer {
-  border-top-width: 1px;
-  border-left: none;
-  border-right: none;
-  -moz-border-top-colors: ThreeDHighlight;
+  position: relative;
+  z-index: 10;
+  min-height: 0;
+  height: 5px;
+  margin-top: -5px;
+  border-top-width: 0;
+  border-bottom-width: 0;
+  background-color: transparent;
 }
 
 #msgSubject {
   margin-top: 0px;
   margin-bottom: 4px;
 }
 
 /* ::::: addressing widget ::::: */
@@ -708,31 +748,62 @@ toolbarbutton.formatting-button {
 
 #HighlightColorButton[disabled="true"],
 #HighlightColorButton[disabled="true"]:hover,
 #HighlightColorButton[disabled="true"]:hover:active {
   -moz-image-region: rect(260px 64px 272px 48px);
 }
 
 /* ::::: address book sidebar ::::: */
+
+@media all and (-moz-windows-default-theme) {
+  sidebarheader {
+    -moz-appearance: none;
+    background-color: #F8F8F8;
+    border-top: 0;
+    border-bottom: 1px solid #A9B1B8;
+  }
+}
+
+@media all and (-moz-windows-compositor) {
+  sidebarheader:-moz-locale-dir(ltr) {
+    border-top-left-radius: 3.5px;
+  }
+
+  sidebarheader:-moz-locale-dir(rtl) {
+    border-top-right-radius: 3.5px;
+  }
+}
+
 .ab-closebutton {
-  list-style-image: url("chrome://messenger/skin/icons/close-button.png");
-  -moz-image-region: rect(0 16px 16px 0);
+  list-style-image: url("chrome://global/skin/icons/close.png");
+  -moz-image-region: rect(0 64px 16px 48px);
   -moz-appearance: none;
-  border: none !important;
+  border: none;
   padding: 2px;
 }
 
 .ab-closebutton:hover {
   -moz-image-region: rect(0 32px 16px 16px);
 }
 
 .ab-closebutton:hover:active {
   -moz-image-region: rect(0 48px 16px 32px);
 }
 
 .ab-closebutton > .toolbarbutton-icon {
   -moz-margin-end: 0px; /* override toolkit's default value */
 }
 
 #sidebar {
-  background-color: Window;
+  background-color: -moz-Dialog;
 }
+
+#sidebar-splitter {
+  -moz-border-end: none;
+  -moz-border-start: 1px solid #A9B7C9;
+  min-width: 0;
+  width: 5px;
+  background-color: transparent;
+  -moz-margin-end: -5px;
+  position: relative;
+  z-index: 10;
+}