Trim some margins. Reformat file. Add grippy graphics. Add loading image/text for tabs. Fix border for .sidebar-main-header (had to add \!important to get it to work in mailnews and addressbook). Clean up styles for panel picker menu.

suite/common/sidebar/sidebarOverlay.css

@@ -19,50 +19,83 @@
  * Contributor(s): Stephen Lamm <slamm@netscape.com>
  */ 
 
-splitter#sidebar-splitter {
+#sidebar-splitter {
-	margin-right: 2px;
+    margin-right: 1px;
-	margin-top: 2px;
+    margin-top: 1px;
     padding: 0px;
     border: none;
     background-color: #003366;
 }
 
-splitter#sidebar-splitter #bottomright-cap {
+#sidebar-topright-cap {
     min-height: 8px; 
-	background-image: url("chrome://communicator/skin/sidebar/sidebar-bottomright-cap.gif"); 
-	background-repeat: no-repeat;
-	background-position: 100% 100%;
-}
-
-splitter#sidebar-splitter #topright-cap {
-	min-height: 8px; 
-	background-image: url("chrome://communicator/skin/sidebar/sidebar-topright-cap.gif"); 
     background-repeat: no-repeat;
     background-position: 100% 0%;
+    background-image:
+        url("chrome://communicator/skin/sidebar/sidebar-topright-cap.gif"); 
 }
 
-splitter#sidebar-splitter grippy {
+#sidebar-bottomright-cap {
+    min-height: 8px; 
+    background-repeat: no-repeat;
+    background-position: 100% 100%;
+    background-image:
+        url("chrome://communicator/skin/sidebar/sidebar-bottomright-cap.gif"); 
+}
+
+splitter#sidebar-splitter > grippy {
     margin: 0px;
-	border: 2px solid #003366;
     padding: 0px;
+    border: 2px solid #003366;
     background-color: #6699CC;
-	list-style-image: none;
+    list-style-image:
+       url("chrome://communicator/skin/sidebar/sbgrippy-left.gif"); 
 }
 
-splitter#sidebar-splitter grippy:hover {
+splitter#sidebar-splitter > grippy:hover,
+splitter#sidebar-splitter > grippy:active {
     background-color: #99CCFF;
+    list-style-image:
+       url("chrome://communicator/skin/sidebar/sbgrippy-left-hover.gif"); 
 }
 
-splitter#sidebar-splitter grippy:active {
+splitter#sidebar-splitter[collapsed="true"] > grippy {
-	background-color: #99CCFF;
+    list-style-image:
+       url("chrome://communicator/skin/sidebar/sbgrippy-right.gif"); 
+}
+
+splitter#sidebar-splitter[collapsed="true"] > grippy:hover,
+splitter#sidebar-splitter[collapsed="true"] > grippy:active {
+    list-style-image:
+       url("chrome://communicator/skin/sidebar/sbgrippy-right-hover.gif"); 
+}
+
+image#sidebar-status-grippy {
+    padding: 2px 2px 2px 0px;
+    background-color: #003366;
+    list-style-image:
+       url("chrome://communicator/skin/sidebar/sidebar-open.gif"); 
+}
+image#sidebar-status-grippy:hover {
+    list-style-image:
+       url("chrome://communicator/skin/sidebar/sidebar-open-hover.gif"); 
+}
+image#sidebar-status-grippy[open="true"] {
+    list-style-image:
+       url("chrome://communicator/skin/sidebar/sidebar-close.gif"); 
+}
+image#sidebar-status-grippy[open="true"]:hover {
+    list-style-image:
+       url("chrome://communicator/skin/sidebar/sidebar-close-hover.gif"); 
 }
 
 /**/
 
 box#sidebar-box {
-  margin-top: 2px;
+    margin-top: 1px;
     width: 162px;
     min-height: 1px;
+    min-width: 30px;
     max-width: 400px;
     border: none;
     border-bottom: 8px solid #003366;
@@ -71,6 +104,16 @@ box#sidebar-box {
 box#sidebar-panels {
     min-width: 1px;
     min-height: 1px;
+    margin-top: 1px;
+}
+
+text.loading-image {
+    margin: 5px 0px;
+}
+
+image.loading-image {
+    margin: 5px;
+    list-style-image: url("resource:/res/rdf/loading.gif"); 
 }
 
 iframe.panel-frame {
@@ -83,22 +126,31 @@ iframe.panel-frame {
 .sidebar-main-header {
     color: #CCFFFF;
     background-color: #003366;
-  padding: 0px;
+    border: 0px !important;
-  padding-left: 5px;
+    padding-left: 4px;
-  padding-right: 5px;
+    min-width: 1px;
 }
-
 .sidebar-main-header > text {
     font-weight: bold;
     margin: 2px;
 }
 
-menu#panel-picker:hover {
+menu#sidebar-panel-picker:hover {
     background-color: #336699;
 }
-
+menu#sidebar-panel-picker:hover {
-menu#panel-picker > .menu-right {
+    background-color: #336699;
+}
+menu#sidebar-panel-picker > .menu-right {
     list-style-image: url("chrome://global/skin/toolbar-menu-arrow.gif");
+    padding-right: 2px;
+}
+menu#sidebar-panel-picker > .menu-text {
+    color: #CCFFFF;
+    padding-left: 4px;
+}
+menu#sidebar-panel-picker > .menu-accel {
+    display: none;
 }
 
 sidebarheader[type="box"] {
@@ -111,39 +163,20 @@ sidebarheader[type="splitter"] {
     cursor: n-resize;
 }
 
-box.texttab {
+box.texttab.sidebar-tab {
-	min-width: 10px;
+    background-color: #CCCCCC;
+    padding: 0px;
+    margin: 0px;
 }
-
+box.texttab.sidebar-tab > .remain-space {
-box.texttab > .remain-space {
     width: 30px;
+    min-width: 1px;
 }
-
+box.texttab.sidebar-tab[top-panel="true"],
-box#sidebar-panels > box.texttab:first-child {
+box.texttab.sidebar-tab[first-panel-after-selected="true"] {
     background-color: white;
 }
 
-box#sidebar-panels > box.texttab + box.texttab {
-	background-color: #CCCCCC;
-}
-
-
-box#sidebar-panels-bottom > box.texttab[hidden] + box.texttab {
-	background-color: white;
-}
-
-box#sidebar-panels-bottom > box.texttab[hidden] + box.texttab + box.texttab {
-	background-color: #CCCCCC;
-}
-
-box#sidebar-panels-bottom > box.texttab + box.texttab {
-	background-color: #CCCCCC;
-}
-
-box#title-box { 
-  min-width: 10px;
-}
-
 *[hidden="true"] {
     display: none;
 }
@@ -151,3 +184,4 @@ box#title-box {
 *[collapsed="true"] {
     visibility: collapse;
 }
+