From 4ae7800a3b340b69a82c1fa3ca8d6b47c5e73443 Mon Sep 17 00:00:00 2001
From: YUKI Hiroshi <shimoda@clear-code.com>
Date: Wed, 1 May 2013 19:55:51 +0900
Subject: [PATCH] Stylize pinned tabs more correctly

---
 skin/classic/treestyletab/Linux-base.css      |  9 ++++
 .../treestyletab/sidebar/sidebar-base.css     |  8 ----
 skin/classic/treestyletab/square/base.css     | 13 +++---
 skin/classic/treestyletab/ui.css              | 41 +++++++++++++++++++
 4 files changed, 57 insertions(+), 14 deletions(-)

diff --git a/skin/classic/treestyletab/Linux-base.css b/skin/classic/treestyletab/Linux-base.css
index 4d8a76bf..82a5eafd 100644
--- a/skin/classic/treestyletab/Linux-base.css
+++ b/skin/classic/treestyletab/Linux-base.css
@@ -27,3 +27,12 @@
   #navigator-toolbox:not([tabsontop="true"]) {
 	border-bottom: 1px solid ThreeDShadow;
 }
+
+
+/* pinned tabs on "Default" skin */
+
+.tabbrowser-tabs[treestyletab-mode="vertical"]:not([treestyletab-style])
+  .tab-content[pinned="true"] {
+	padding: 0;
+}
+
diff --git a/skin/classic/treestyletab/sidebar/sidebar-base.css b/skin/classic/treestyletab/sidebar/sidebar-base.css
index 34ed9072..d067c3c8 100644
--- a/skin/classic/treestyletab/sidebar/sidebar-base.css
+++ b/skin/classic/treestyletab/sidebar/sidebar-base.css
@@ -125,10 +125,6 @@ tabbrowser[treestyletab-mode="vertical"]
   .tab-stack {
 	max-height: 24px !important;
 }
-.tabbrowser-tabs[treestyletab-mode="vertical"]
-  .tab-content[pinned] {
-	padding: 2px 2px 3px !important;
-}
 
 .tabbrowser-tabs[treestyletab-mode="vertical"]
   .tabbrowser-tab[selected="true"] {
@@ -423,10 +419,6 @@ tabbrowser[treestyletab-mode="vertical"]
             .tab-background-end[pinned][titlechanged]) {
 	visibility: collapse !important;
 }
-.tabbrowser-tabs[treestyletab-mode="vertical"]
-  .tab-background {
-	margin: 0 !important;
-}
 .tabbrowser-tabs[treestyletab-mode="vertical"]
   .tab-content {
 	margin-left: 0 !important;
diff --git a/skin/classic/treestyletab/square/base.css b/skin/classic/treestyletab/square/base.css
index 2fd2ba10..9b796f83 100644
--- a/skin/classic/treestyletab/square/base.css
+++ b/skin/classic/treestyletab/square/base.css
@@ -104,6 +104,7 @@
 	-moz-border-top-colors: ThreeDShadow transparent !important;
 }
 
+
 /* for Mac OS X */
 .tabbrowser-tabs[treestyletab-mode="vertical"]
   :-moz-any(.tab-content:not([selected="true"]),
@@ -155,10 +156,13 @@
 .tabbrowser-tabs:not([treestyletab-tabbar-position="top"])
   .tabbrowser-tab[selected="true"] {
 	margin: 0 !important;
-	padding: 0 0.2em !important;
 	-moz-border-top-colors: ThreeDHighlight transparent !important;
 	-moz-border-bottom-colors: ThreeDShadow transparent !important;
 }
+.tabbrowser-tabs:not([treestyletab-tabbar-position="top"])
+  .tabbrowser-tab[selected="true"]:not([pinned]) {
+	padding: 0 0.2em !important;
+}
 .tabbrowser-tabs:not([treestyletab-tabbar-position="top"])
   .tabbrowser-tab[selected="true"] {
 	background-color: ThreeDHighlight !important;
@@ -222,12 +226,9 @@
 /* padding */
 
 .tabbrowser-tabs:not([treestyletab-tabbar-position="top"])
-  .tabbrowser-tab[selected="true"],
+  .tabbrowser-tab[selected="true"]:not([pinned]),
 .tabbrowser-tabs:not([treestyletab-tabbar-position="top"])
-  .tabbrowser-tab:not([selected="true"]) {
-	padding: 0 0.2em !important;
-}
-
+  .tabbrowser-tab:not([selected="true"]):not([pinned]),
 .tabbrowser-tabs:not([treestyletab-tabbar-position="top"])
   .tabbrowser-tab
   .tab-content[selected="true"]:not([pinned]),
diff --git a/skin/classic/treestyletab/ui.css b/skin/classic/treestyletab/ui.css
index baba7c5e..a97c7e93 100644
--- a/skin/classic/treestyletab/ui.css
+++ b/skin/classic/treestyletab/ui.css
@@ -299,7 +299,48 @@ tabbrowser[treestyletab-tabbar-position="bottom"]
 .tabbrowser-tabs[treestyletab-mode="vertical"]
   .tabbrowser-tab[pinned="true"] {
 	height: 24px;
+	margin: 0;
 	max-height: 24px;
+	max-width: 24px;
+	padding: 0;
+	width: 24px;
+}
+
+.tabbrowser-tabs[treestyletab-mode="vertical"]
+  .tabbrowser-tab[pinned="true"] .tab-stack {
+	height: 100%;
+	width: 100%;
+}
+
+.tabbrowser-tabs[treestyletab-mode="vertical"]
+  .tabbrowser-tab[pinned="true"] .tab-stack,
+.tabbrowser-tabs[treestyletab-mode="vertical"]
+  .tab-content[pinned="true"] {
+	box-align: center;
+	-moz-box-align: center;
+	box-pack: center;
+	-moz-box-pack: center;
+}
+
+.tabbrowser-tabs[treestyletab-mode="vertical"]
+  .tab-background[pinned="true"] {
+	box-align: stretch;
+	-moz-box-align: stretch;
+	box-pack: justify;
+	-moz-box-pack: justify;
+}
+
+.tabbrowser-tabs[treestyletab-mode="vertical"]
+  .tab-content[pinned="true"] {
+	padding: 0 4px;
+}
+
+.tabbrowser-tabs[treestyletab-mode="vertical"]
+  .tab-content[pinned="true"] > image {
+	height: 16px;
+	margin: 0;
+	padding: 0;
+	width: 16px;
 }
 
 /* disable highlighting of pinned tabs whici is not faviconized */