diff --git a/chrome.manifest b/chrome.manifest index 7a2d502e..f74e4497 100644 --- a/chrome.manifest +++ b/chrome.manifest @@ -18,3 +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 diff --git a/images/metal-selected.xcf b/images/metal-selected.xcf index 097406ac..529a61a2 100644 Binary files a/images/metal-selected.xcf and b/images/metal-selected.xcf differ diff --git a/images/metal.xcf b/images/metal.xcf index b6d4b55c..766e30ad 100644 Binary files a/images/metal.xcf and b/images/metal.xcf differ diff --git a/install.rdf b/install.rdf index d394858b..14648a3b 100644 --- a/install.rdf +++ b/install.rdf @@ -149,7 +149,7 @@ + em:maxVersion="3.5b4pre" /> diff --git a/skin/classic/treestyletab/metal.css b/skin/classic/treestyletab/metal.css index 7f8ebe26..5afd59ce 100644 --- a/skin/classic/treestyletab/metal.css +++ b/skin/classic/treestyletab/metal.css @@ -1,6 +1,22 @@ +@import url("chrome://treestyletab/skin/metal/tab.css"); + @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); +tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] + .tabs-bottom, +tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] + .tabs-left, +tabbrowser[treestyletab-style="metal"][treestyletab-tabbar-position="bottom"] + .tabs-bottom, +tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] + .tab-text-shadow, /* Mac OS X */ +tabbrowser[treestyletab-style="metal"][treestyletab-tabbar-position="bottom"] + .tab-text-shadow /* Mac OS X */ { + display: none !important; +} + + tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] .tabbrowser-tabs * { width: 100% !important; @@ -84,253 +100,3 @@ tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] text-align: center !important; } -tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] - .tabbrowser-tab, -tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] - .tabbrowser-tab:hover, -tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] - .tabbrowser-tab[selected="true"], -tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] - .tabbrowser-tab[selected="true"]:hover { - background: transparent none !important; - border: 2px solid transparent !important; - color: black !important; - height: 30px !important; - margin-top: -2px !important; - margin-right: 0; - margin-bottom: -2px !important; - margin-left: 0; - padding: 0 !important; - -moz-border-top-colors: transparent transparent !important; - -moz-border-right-colors: transparent transparent !important; - -moz-border-bottom-colors: transparent transparent !important; - -moz-border-left-colors: transparent transparent !important; - -moz-border-radius: 0 !important; -} - -tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]:not([treestyletab-appearance-inverted="true"]) - .tabbrowser-tab:not([treestyletab-drop-position]), -tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]:not([treestyletab-appearance-inverted="true"]) - .tabbrowser-tab[selected="true"]:not([treestyletab-drop-position]) { - 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]), -tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] - .tabbrowser-tab[selected="true"]:not([treestyletab-drop-position]) { - 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]) .tab-image-right, -tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]:not([treestyletab-appearance-inverted="true"]) - .tabbrowser-tab[selected="true"]:not([treestyletab-drop-position]) .tab-image-right, -tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] - .tabbrowser-tab:not([treestyletab-drop-position]) .tab-image-left, -tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] - .tabbrowser-tab[selected="true"]:not([treestyletab-drop-position]) .tab-image-left { - width: 10px !important; -} - - -tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] - .tabbrowser-tab .tab-image-middle, -tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] - .tabbrowser-tab:hover .tab-image-middle, -tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] - .tabbrowser-tab .tab-close-button, -tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] - .tabbrowser-tab:hover .tab-close-button { - background: url("metal/tab-active-middle.png") repeat-x top left !important; - margin: 0 !important; -} -:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] - .tabbrowser-tab .tab-image-middle, -:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] - .tabbrowser-tab:hover .tab-image-middle, -:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] - .tabbrowser-tab .tab-close-button, -:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] - .tabbrowser-tab:hover .tab-close-button { - background-image: url("metal/tab-inactive-middle.png") !important; -} - -tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] - .tabbrowser-tab .tab-image-left, -tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] - .tabbrowser-tab:hover .tab-image-left { - background: url("metal/tab-active-left-l.png") no-repeat top left !important; - width: 10px !important; -} -:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] - .tabbrowser-tab .tab-image-left, -:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] - .tabbrowser-tab:hover .tab-image-left { - background-image: url("metal/tab-inactive-left-l.png") !important; -} - -tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] - .tabbrowser-tab .tab-image-right, -tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] - .tabbrowser-tab:hover .tab-image-right { - background: url("metal/tab-active-right-l.png") no-repeat top right !important; - width: 8px !important; -} -:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] - .tabbrowser-tab .tab-image-right, -:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] - .tabbrowser-tab:hover .tab-image-right { - background-image: url("metal/tab-inactive-right-l.png") !important; -} - -tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] - .tabbrowser-tab[selected="true"] .tab-image-middle, -tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] - .tabbrowser-tab[selected="true"]:hover .tab-image-middle, -tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] - .tabbrowser-tab[selected="true"] .tab-close-button, -tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] - .tabbrowser-tab[selected="true"]:hover .tab-close-button, -tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] - .tabbrowser-tab[selected="true"] .tab-image-right, -tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] - .tabbrowser-tab[selected="true"]:hover .tab-image-right { - background: url("metal/tab-active-middle-selected.png") repeat-x top left !important; -} -:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] - .tabbrowser-tab[selected="true"] .tab-image-middle, -:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] - .tabbrowser-tab[selected="true"]:hover .tab-image-middle, -:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] - .tabbrowser-tab[selected="true"] .tab-close-button, -:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] - .tabbrowser-tab[selected="true"]:hover .tab-close-button, -:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] - .tabbrowser-tab[selected="true"] .tab-image-right, -:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] - .tabbrowser-tab[selected="true"]:hover .tab-image-right { - background-image: url("metal/tab-inactive-middle-selected.png") !important; -} - -tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] - .tabbrowser-tab[selected="true"] .tab-image-left, -tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] - .tabbrowser-tab[selected="true"]:hover .tab-image-left { - background: url("metal/tab-active-left-selected-l.png") no-repeat top left !important; -} -:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] - .tabbrowser-tab[selected="true"] .tab-image-left, -:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] - .tabbrowser-tab[selected="true"]:hover .tab-image-left { - background-image: url("metal/tab-inactive-left-selected-l.png") !important; -} - - - - -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 .tab-image-middle, -tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] - .tabbrowser-tab .tab-close-button, -tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] - .tabbrowser-tab:hover .tab-close-button { - background: url("metal/tab-active-middle.png") repeat-x top left !important; -} -: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 .tab-image-middle, -:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] - .tabbrowser-tab .tab-close-button, -:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] - .tabbrowser-tab:hover .tab-close-button { - background-image: url("metal/tab-inactive-middle.png") !important; -} - -tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] - .tabbrowser-tab .tab-image-left, -tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] - .tabbrowser-tab:hover .tab-image-left { - background: url("metal/tab-active-left-r.png") no-repeat top left !important; - width: 8px !important; -} -:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] - .tabbrowser-tab .tab-image-left, -:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] - .tabbrowser-tab:hover .tab-image-left { - background-image: url("metal/tab-inactive-left-r.png") !important; -} - -tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] - .tabbrowser-tab .tab-image-right, -tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] - .tabbrowser-tab:hover .tab-image-right { - background: url("metal/tab-active-right-r.png") no-repeat top right !important; - width: 10px !important; -} -:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] - .tabbrowser-tab .tab-image-right, -:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] - .tabbrowser-tab:hover .tab-image-right { - background-image: url("metal/tab-inactive-right-r.png") !important; -} - -tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] - .tabbrowser-tab[selected="true"] .tab-image-middle, -tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] - .tabbrowser-tab[selected="true"]:hover .tab-image-middle, -tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] - .tabbrowser-tab[selected="true"] .tab-close-button, -tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] - .tabbrowser-tab[selected="true"]:hover .tab-close-button, -tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] - .tabbrowser-tab[selected="true"] .tab-image-left, -tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] - .tabbrowser-tab[selected="true"]:hover .tab-image-left { - background: url("metal/tab-active-middle-selected.png") repeat-x top left !important; -} -:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] - .tabbrowser-tab[selected="true"] .tab-image-middle, -:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] - .tabbrowser-tab[selected="true"]:hover .tab-image-middle, -:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] - .tabbrowser-tab[selected="true"] .tab-close-button, -:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] - .tabbrowser-tab[selected="true"]:hover .tab-close-button, -:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] - .tabbrowser-tab[selected="true"] .tab-image-left, -:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] - .tabbrowser-tab[selected="true"]:hover .tab-image-left { - background-image: url("metal/tab-inactive-middle-selected.png") !important; -} - -tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] - .tabbrowser-tab[selected="true"] .tab-image-right, -tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] - .tabbrowser-tab[selected="true"]:hover .tab-image-right { - background: url("metal/tab-active-right-selected-r.png") no-repeat top right !important; -} -:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] - .tabbrowser-tab[selected="true"] .tab-image-right, -:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] - .tabbrowser-tab[selected="true"]:hover .tab-image-right { - background-image: url("metal/tab-inactive-right-selected-r.png") !important; -} - - - -tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] - .tabs-bottom, -tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] - .tabs-left, -tabbrowser[treestyletab-style="metal"][treestyletab-tabbar-position="bottom"] - .tabs-bottom, -tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] - .tab-text-shadow, /* Mac OS X */ -tabbrowser[treestyletab-style="metal"][treestyletab-tabbar-position="bottom"] - .tab-text-shadow /* Mac OS X */ { - display: none !important; -} diff --git a/skin/classic/treestyletab/metal/fullsize-active-l.png b/skin/classic/treestyletab/metal/fullsize-active-l.png new file mode 100644 index 00000000..c3c63ca1 Binary files /dev/null and b/skin/classic/treestyletab/metal/fullsize-active-l.png differ diff --git a/skin/classic/treestyletab/metal/fullsize-active-r.png b/skin/classic/treestyletab/metal/fullsize-active-r.png new file mode 100644 index 00000000..0aa1019a Binary files /dev/null and b/skin/classic/treestyletab/metal/fullsize-active-r.png differ diff --git a/skin/classic/treestyletab/metal/fullsize-active-selected-l.png b/skin/classic/treestyletab/metal/fullsize-active-selected-l.png new file mode 100644 index 00000000..b31754b9 Binary files /dev/null and b/skin/classic/treestyletab/metal/fullsize-active-selected-l.png differ diff --git a/skin/classic/treestyletab/metal/fullsize-active-selected-r.png b/skin/classic/treestyletab/metal/fullsize-active-selected-r.png new file mode 100644 index 00000000..c135b50f Binary files /dev/null and b/skin/classic/treestyletab/metal/fullsize-active-selected-r.png differ diff --git a/skin/classic/treestyletab/metal/fullsize-inactive-l.png b/skin/classic/treestyletab/metal/fullsize-inactive-l.png new file mode 100644 index 00000000..bace4422 Binary files /dev/null and b/skin/classic/treestyletab/metal/fullsize-inactive-l.png differ diff --git a/skin/classic/treestyletab/metal/fullsize-inactive-r.png b/skin/classic/treestyletab/metal/fullsize-inactive-r.png new file mode 100644 index 00000000..2d382e4e Binary files /dev/null and b/skin/classic/treestyletab/metal/fullsize-inactive-r.png differ diff --git a/skin/classic/treestyletab/metal/fullsize-inactive-selected-l.png b/skin/classic/treestyletab/metal/fullsize-inactive-selected-l.png new file mode 100644 index 00000000..6bf353e9 Binary files /dev/null and b/skin/classic/treestyletab/metal/fullsize-inactive-selected-l.png differ diff --git a/skin/classic/treestyletab/metal/fullsize-inactive-selected-r.png b/skin/classic/treestyletab/metal/fullsize-inactive-selected-r.png new file mode 100644 index 00000000..6a127c97 Binary files /dev/null and b/skin/classic/treestyletab/metal/fullsize-inactive-selected-r.png differ diff --git a/skin/classic/treestyletab/metal/tab-3.5.css b/skin/classic/treestyletab/metal/tab-3.5.css new file mode 100644 index 00000000..a35e04eb --- /dev/null +++ b/skin/classic/treestyletab/metal/tab-3.5.css @@ -0,0 +1,96 @@ +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); + +tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] + .tabbrowser-tab, +tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] + .tabbrowser-tab:hover, +tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] + .tabbrowser-tab[selected="true"], +tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] + .tabbrowser-tab[selected="true"]:hover { + background: none transparent !important; + border: 2px solid transparent !important; + color: black !important; + height: auto !important; + min-height: 10px !important; + margin-top: 0 !important; + margin-right: 0; + margin-bottom: 0 !important; + margin-left: 0; + padding: 0 !important; + -moz-border-top-colors: transparent transparent !important; + -moz-border-right-colors: transparent transparent !important; + -moz-border-bottom-colors: transparent transparent !important; + -moz-border-left-colors: transparent transparent !important; + -moz-border-radius: 0 !important; +} + +tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] + .tabbrowser-tab .tab-image-left, +tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] + .tabbrowser-tab .tab-image-middle, +tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] + .tabbrowser-tab .tab-image-right { + margin-top: -8px !important; + margin-bottom: -8px !important; +} +tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] + .tabbrowser-tab .tab-close-button { + margin-top: -9px !important; + margin-bottom: -7px !important; +} + + +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; +} +:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] + .tabbrowser-tab, +: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; +} + +tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] + .tabbrowser-tab, +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; +} +:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] + .tabbrowser-tab, +: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; +} + + +tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] + .tabbrowser-tab[selected="true"], +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; +} +:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] + .tabbrowser-tab[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; +} + +tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] + .tabbrowser-tab[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; +} +:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] + .tabbrowser-tab[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; +} + diff --git a/skin/classic/treestyletab/metal/tab.css b/skin/classic/treestyletab/metal/tab.css new file mode 100644 index 00000000..44bce422 --- /dev/null +++ b/skin/classic/treestyletab/metal/tab.css @@ -0,0 +1,237 @@ +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); + +tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] + .tabbrowser-tab, +tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] + .tabbrowser-tab:hover, +tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] + .tabbrowser-tab[selected="true"], +tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] + .tabbrowser-tab[selected="true"]:hover { + background: transparent none !important; + border: 2px solid transparent !important; + color: black !important; + height: 30px !important; + margin-top: -2px !important; + margin-right: 0; + margin-bottom: -2px !important; + margin-left: 0; + padding: 0 !important; + -moz-border-top-colors: transparent transparent !important; + -moz-border-right-colors: transparent transparent !important; + -moz-border-bottom-colors: transparent transparent !important; + -moz-border-left-colors: transparent transparent !important; + -moz-border-radius: 0 !important; +} + +tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]:not([treestyletab-appearance-inverted="true"]) + .tabbrowser-tab:not([treestyletab-drop-position]), +tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]:not([treestyletab-appearance-inverted="true"]) + .tabbrowser-tab[selected="true"]:not([treestyletab-drop-position]) { + 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]), +tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] + .tabbrowser-tab[selected="true"]:not([treestyletab-drop-position]) { + 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]) .tab-image-right, +tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]:not([treestyletab-appearance-inverted="true"]) + .tabbrowser-tab[selected="true"]:not([treestyletab-drop-position]) .tab-image-right, +tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] + .tabbrowser-tab:not([treestyletab-drop-position]) .tab-image-left, +tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] + .tabbrowser-tab[selected="true"]:not([treestyletab-drop-position]) .tab-image-left { + width: 10px !important; +} + + +tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] + .tabbrowser-tab .tab-image-middle, +tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] + .tabbrowser-tab:hover .tab-image-middle, +tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] + .tabbrowser-tab .tab-close-button, +tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] + .tabbrowser-tab:hover .tab-close-button { + background: url("tab-active-middle.png") repeat-x top left !important; + margin: 0 !important; +} +:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] + .tabbrowser-tab .tab-image-middle, +:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] + .tabbrowser-tab:hover .tab-image-middle, +:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] + .tabbrowser-tab .tab-close-button, +:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] + .tabbrowser-tab:hover .tab-close-button { + background-image: url("tab-inactive-middle.png") !important; +} + +tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] + .tabbrowser-tab .tab-image-left, +tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] + .tabbrowser-tab:hover .tab-image-left { + background: url("tab-active-left-l.png") no-repeat top left !important; + width: 10px !important; +} +:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] + .tabbrowser-tab .tab-image-left, +:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] + .tabbrowser-tab:hover .tab-image-left { + background-image: url("tab-inactive-left-l.png") !important; +} + +tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] + .tabbrowser-tab .tab-image-right, +tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] + .tabbrowser-tab:hover .tab-image-right { + background: url("tab-active-right-l.png") no-repeat top right !important; + width: 8px !important; +} +:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] + .tabbrowser-tab .tab-image-right, +:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] + .tabbrowser-tab:hover .tab-image-right { + background-image: url("tab-inactive-right-l.png") !important; +} + +tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] + .tabbrowser-tab[selected="true"] .tab-image-middle, +tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] + .tabbrowser-tab[selected="true"]:hover .tab-image-middle, +tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] + .tabbrowser-tab[selected="true"] .tab-close-button, +tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] + .tabbrowser-tab[selected="true"]:hover .tab-close-button, +tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] + .tabbrowser-tab[selected="true"] .tab-image-right, +tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] + .tabbrowser-tab[selected="true"]:hover .tab-image-right { + background: url("tab-active-middle-selected.png") repeat-x top left !important; +} +:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] + .tabbrowser-tab[selected="true"] .tab-image-middle, +:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] + .tabbrowser-tab[selected="true"]:hover .tab-image-middle, +:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] + .tabbrowser-tab[selected="true"] .tab-close-button, +:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] + .tabbrowser-tab[selected="true"]:hover .tab-close-button, +:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] + .tabbrowser-tab[selected="true"] .tab-image-right, +:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] + .tabbrowser-tab[selected="true"]:hover .tab-image-right { + background-image: url("tab-inactive-middle-selected.png") !important; +} + +tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] + .tabbrowser-tab[selected="true"] .tab-image-left, +tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] + .tabbrowser-tab[selected="true"]:hover .tab-image-left { + background: url("tab-active-left-selected-l.png") no-repeat top left !important; +} +:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] + .tabbrowser-tab[selected="true"] .tab-image-left, +:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] + .tabbrowser-tab[selected="true"]:hover .tab-image-left { + background-image: url("tab-inactive-left-selected-l.png") !important; +} + + + + +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 .tab-image-middle, +tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] + .tabbrowser-tab .tab-close-button, +tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] + .tabbrowser-tab:hover .tab-close-button { + background: url("tab-active-middle.png") repeat-x top left !important; +} +: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 .tab-image-middle, +:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] + .tabbrowser-tab .tab-close-button, +:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] + .tabbrowser-tab:hover .tab-close-button { + background-image: url("tab-inactive-middle.png") !important; +} + +tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] + .tabbrowser-tab .tab-image-left, +tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] + .tabbrowser-tab:hover .tab-image-left { + background: url("tab-active-left-r.png") no-repeat top left !important; + width: 8px !important; +} +:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] + .tabbrowser-tab .tab-image-left, +:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] + .tabbrowser-tab:hover .tab-image-left { + background-image: url("tab-inactive-left-r.png") !important; +} + +tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] + .tabbrowser-tab .tab-image-right, +tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] + .tabbrowser-tab:hover .tab-image-right { + background: url("tab-active-right-r.png") no-repeat top right !important; + width: 10px !important; +} +:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] + .tabbrowser-tab .tab-image-right, +:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] + .tabbrowser-tab:hover .tab-image-right { + background-image: url("tab-inactive-right-r.png") !important; +} + +tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] + .tabbrowser-tab[selected="true"] .tab-image-middle, +tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] + .tabbrowser-tab[selected="true"]:hover .tab-image-middle, +tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] + .tabbrowser-tab[selected="true"] .tab-close-button, +tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] + .tabbrowser-tab[selected="true"]:hover .tab-close-button, +tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] + .tabbrowser-tab[selected="true"] .tab-image-left, +tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] + .tabbrowser-tab[selected="true"]:hover .tab-image-left { + background: url("tab-active-middle-selected.png") repeat-x top left !important; +} +:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] + .tabbrowser-tab[selected="true"] .tab-image-middle, +:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] + .tabbrowser-tab[selected="true"]:hover .tab-image-middle, +:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] + .tabbrowser-tab[selected="true"] .tab-close-button, +:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] + .tabbrowser-tab[selected="true"]:hover .tab-close-button, +:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] + .tabbrowser-tab[selected="true"] .tab-image-left, +:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] + .tabbrowser-tab[selected="true"]:hover .tab-image-left { + background-image: url("tab-inactive-middle-selected.png") !important; +} + +tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] + .tabbrowser-tab[selected="true"] .tab-image-right, +tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] + .tabbrowser-tab[selected="true"]:hover .tab-image-right { + background: url("tab-active-right-selected-r.png") no-repeat top right !important; +} +:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] + .tabbrowser-tab[selected="true"] .tab-image-right, +:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"] + .tabbrowser-tab[selected="true"]:hover .tab-image-right { + background-image: url("tab-inactive-right-selected-r.png") !important; +}