フレキシブルなMetalテーマ

git-svn-id: http://www.cozmixng.org/repos/piro/treestyletab/trunk@3874 599a83e7-65a4-db11-8015-0010dcdd6dc2
This commit is contained in:
piro 2009-03-24 17:20:09 +00:00
parent 0efbedf2c6
commit 8b6f89175c
4 changed files with 165 additions and 39 deletions

View File

@ -18,4 +18,4 @@ locale treestyletab ru-RU jar:chrome/treestyletab.jar!/locale/ru-RU/treestyletab
skin treestyletab classic/1.0 jar:chrome/treestyletab.jar!/skin/classic/treestyletab/
style chrome://browser/content/browser.xul chrome://treestyletab/skin/treestyletab-3.1.css appversion>=3.1b3pre
#override chrome://treestyletab/skin/metal/tab.css chrome://treestyletab/skin/metal/tab-3.5.css appversion>=3.5b4pre
override chrome://treestyletab/skin/metal/tab.css chrome://treestyletab/skin/metal/tab-3.5.css appversion>=3.5b4pre

View File

@ -1,5 +1,3 @@
@import url("chrome://treestyletab/skin/metal/tab.css");
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
@ -17,11 +15,6 @@ tabbrowser[treestyletab-style="metal"][treestyletab-tabbar-position="bottom"]
}
tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
.tabbrowser-tabs * {
width: 100% !important;
}
tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
.tabs-stack {
background:#797979 url("metal/shadow-active-l.png") repeat-y top right !important;
@ -87,10 +80,26 @@ tabbrowser[treestyletab-style="metal"][treestyletab-twisty-style][treestyletab-m
position: relative;
margin: 0 6px 0 -6px;
}
tabbrowser[treestyletab-style="metal"][treestyletab-twisty-style="retro"][treestyletab-mode="vertical"]
.treestyletab-twisty-container {
margin: 0;
}
tabbrowser[treestyletab-style="metal"][treestyletab-twisty-style="retro"][treestyletab-mode="vertical"]:not([treestyletab-appearance-inverted="true"])
.tabbrowser-tab .tab-icon {
margin-left: -6px !important;
}
tabbrowser[treestyletab-style="metal"][treestyletab-twisty-style][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
.treestyletab-twisty-container {
margin: 0 -12px 0 12px;
}
tabbrowser[treestyletab-style="metal"][treestyletab-twisty-style="retro"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
.treestyletab-twisty-container {
margin: 0 -6px 0 6px;
}
tabbrowser[treestyletab-style="metal"][treestyletab-twisty-style="retro"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
.tabbrowser-tab .tab-icon {
margin-right: -6px !important;
}
tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]

View File

@ -12,10 +12,11 @@ tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
border: 2px solid transparent !important;
color: black !important;
height: auto !important;
max-height: none !important;
min-height: 10px !important;
margin-top: 0 !important;
margin-top: -2px !important;
margin-right: 0;
margin-bottom: 0 !important;
margin-bottom: -2px !important;
margin-left: 0;
padding: 0 !important;
-moz-border-top-colors: transparent transparent !important;
@ -26,71 +27,186 @@ tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
}
tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
.tabbrowser-tab .tab-image-left,
.tab-image-left,
tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
.tabbrowser-tab .tab-image-middle,
.tab-image-middle,
tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
.tabbrowser-tab .tab-image-right {
.tab-close-button,
tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
.tab-image-right {
margin: 0 !important;
}
tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
.tab-image-middle > .tab-icon,
tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
.tab-image-middle > .tab-text,
tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
.tab-image-middle > * {
margin-top: -8px !important;
margin-bottom: -8px !important;
}
tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
.tabbrowser-tab .tab-close-button {
.tab-close-button > * {
margin-top: -9px !important;
margin-bottom: -7px !important;
}
tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]:not([treestyletab-appearance-inverted="true"])
.tabbrowser-tab:not([treestyletab-drop-position="self"]) {
border-right: 0 none !important;
-moz-border-right-colors: none !important;
}
tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
.tabbrowser-tab:not([treestyletab-drop-position="self"]) {
border-left: 0 none !important;
-moz-border-left-colors: none !important;
}
tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]:not([treestyletab-appearance-inverted="true"])
.tabbrowser-tab:not([treestyletab-drop-position="self"]) .tab-image-right,
tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
.tabbrowser-tab:not([treestyletab-drop-position="self"]) .tab-image-left {
padding-right: 2px !important;
}
/* background, left */
tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
.tabbrowser-tab,
tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
.tabbrowser-tab:hover {
-moz-border-image: url("fullsize-active-l.png") 10 10 10 10 / 10px !important;
.tab-image-left {
-moz-border-image: url("fullsize-active-l.png") 10 / 10px 0 10px 10px;
}
:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
.tabbrowser-tab,
.tab-image-left {
-moz-border-image: url("fullsize-inactive-l.png") 10 / 10px 0 10px 10px;
}
tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
.tab-image-middle,
tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
.tab-close-button {
-moz-border-image: url("fullsize-active-l.png") 10 / 10px 0 10px 0;
}
:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
.tabbrowser-tab:hover {
-moz-border-image: url("fullsize-inactive-l.png") 10 10 10 10 / 10px !important;
.tab-image-middle,
:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
.tab-close-button {
-moz-border-image: url("fullsize-inactive-l.png") 10 / 10px 0 10px 0;
}
tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
.tab-image-right {
-moz-border-image: url("fullsize-active-l.png") 10 / 10px 10px 10px 0;
}
:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
.tab-image-right {
-moz-border-image: url("fullsize-inactive-l.png") 10 / 10px 10px 10px 0;
}
/* background, right */
tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
.tab-image-left {
-moz-border-image: url("fullsize-active-r.png") 10 / 10px 0 10px 10px;
}
:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
.tab-image-left {
-moz-border-image: url("fullsize-inactive-r.png") 10 / 10px 0 10px 10px;
}
tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
.tabbrowser-tab,
.tab-image-middle,
tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
.tabbrowser-tab:hover {
-moz-border-image: url("fullsize-active-r.png") 10 10 10 10 / 10px !important;
.tab-close-button {
-moz-border-image: url("fullsize-active-r.png") 10 / 10px 0 10px 0;
}
:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
.tabbrowser-tab,
.tab-image-middle,
:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
.tabbrowser-tab:hover {
-moz-border-image: url("fullsize-inactive-r.png") 10 10 10 10 / 10px !important;
.tab-close-button {
-moz-border-image: url("fullsize-inactive-r.png") 10 / 10px 0 10px 0;
}
tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
.tab-image-right {
-moz-border-image: url("fullsize-active-r.png") 10 / 10px 10px 10px 0;
}
:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
.tab-image-right {
-moz-border-image: url("fullsize-inactive-r.png") 10 / 10px 10px 10px 0;
}
/* foreground, left */
tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
.tabbrowser-tab[selected="true"],
.tab-image-left[selected="true"] {
-moz-border-image: url("fullsize-active-selected-l.png") 10 / 10px 0 10px 10px;
}
:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
.tab-image-left[selected="true"] {
-moz-border-image: url("fullsize-inactive-selected-l.png") 10 / 10px 0 10px 10px;
}
tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
.tabbrowser-tab[selected="true"]:hover {
-moz-border-image: url("fullsize-active-selected-l.png") 10 10 10 10 / 10px !important;
.tab-image-middle[selected="true"],
tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
[selected="true"] .tab-close-button {
-moz-border-image: url("fullsize-active-selected-l.png") 10 / 10px 0 10px 0;
}
:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
.tabbrowser-tab[selected="true"],
.tab-image-middle[selected="true"],
:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
.tabbrowser-tab[selected="true"]:hover {
-moz-border-image: url("fullsize-inactive-selected-l.png") 10 10 10 10 / 10px !important;
[selected="true"] .tab-close-button {
-moz-border-image: url("fullsize-inactive-selected-l.png") 10 / 10px 0 10px 0;
}
tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
.tab-image-right[selected="true"] {
-moz-border-image: url("fullsize-active-selected-l.png") 10 / 10px 10px 10px 0;
}
:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
.tab-image-right[selected="true"] {
-moz-border-image: url("fullsize-inactive-selected-l.png") 10 / 10px 10px 10px 0;
}
/* foreground, right */
tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
.tab-image-left[selected="true"] {
-moz-border-image: url("fullsize-active-selected-r.png") 10 / 10px 0 10px 10px;
}
:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
.tab-image-left[selected="true"] {
-moz-border-image: url("fullsize-inactive-selected-r.png") 10 / 10px 0 10px 10px;
}
tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
.tabbrowser-tab[selected="true"],
.tab-image-middle[selected="true"],
tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
.tabbrowser-tab[selected="true"]:hover {
-moz-border-image: url("fullsize-active-selected-r.png") 10 10 10 10 / 10px !important;
[selected="true"] .tab-close-button {
-moz-border-image: url("fullsize-active-selected-r.png") 10 / 10px 0 10px 0;
}
:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
.tabbrowser-tab[selected="true"],
.tab-image-middle[selected="true"],
:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
.tabbrowser-tab[selected="true"]:hover {
-moz-border-image: url("fullsize-inactive-selected-r.png") 10 10 10 10 / 10px !important;
[selected="true"] .tab-close-button {
-moz-border-image: url("fullsize-inactive-selected-r.png") 10 / 10px 0 10px 0;
}
tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
.tab-image-right[selected="true"] {
-moz-border-image: url("fullsize-active-selected-r.png") 10 / 10px 10px 10px 0;
}
:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
.tab-image-right[selected="true"] {
-moz-border-image: url("fullsize-inactive-selected-r.png") 10 / 10px 10px 10px 0;
}

View File

@ -1,5 +1,6 @@
@import url("chrome://treestyletab/skin/square.css");
@import url("chrome://treestyletab/skin/metal.css");
@import url("chrome://treestyletab/skin/metal/tab.css");
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");