treestyletab/content/treestyletab/treestyletab.css
2012-01-14 01:15:12 +09:00

547 lines
20 KiB
CSS

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
@namespace html url("http://www.w3.org/1999/xhtml");
/* twisty in tabs */
.treestyletab-twisty,
.tabbrowser-tabs[treestyletab-twisty-style="none"]
.treestyletab-twisty-container,
.tabbrowser-tabs:not([treestyletab-allow-subtree-collapse="true"])
.treestyletab-twisty-container {
display: none;
}
.tabbrowser-tabs[treestyletab-allow-subtree-collapse="true"]
.tabbrowser-tab[treestyletab-children][treestyletab-allow-subtree-collapse="true"]
.treestyletab-twisty {
display: -moz-box;
}
/* collapsed children counter */
.treestyletab-counter-container {
display: none;
}
.tabbrowser-tabs[treestyletab-allow-subtree-collapse="true"]
.tabbrowser-tab[treestyletab-children][treestyletab-subtree-collapsed="true"][treestyletab-allow-subtree-collapse="true"]
.treestyletab-counter-container {
display: -moz-box;
}
/* drop marker */
.tabbrowser-tab:not([treestyletab-drop-position])
.treestyletab-drop-marker {
display: none;
}
/* collapse/expand tree of tabs */
.tabbrowser-tabs[treestyletab-allow-subtree-collapse="true"]
.tabbrowser-tab[treestyletab-collapsed-done="true"] {
visibility: collapse;
}
/* collapse/expand tree of tabs, horizontal stacked tabs */
.tabbrowser-tabs[treestyletab-allow-subtree-collapse="true"][treestyletab-stack-collapsed-tabs="true"]
.tabbrowser-tab {
position: relative;
}
.tabbrowser-tabs[treestyletab-allow-subtree-collapse="true"][treestyletab-stack-collapsed-tabs="true"]
.tabbrowser-tab[treestyletab-collapsed="true"][fadein] {
visibility: visible;
max-width: 20px;
min-width: 20px;
width: 20px;
-moz-box-flex: 0;
mask: url("res/tabEffects.svg#fadein-mask");
}
.tabbrowser-tabs[treestyletab-allow-subtree-collapse="true"][treestyletab-stack-collapsed-tabs="true"]
.tabbrowser-tab[treestyletab-collapsed-done="true"] .tab-image-left > *,
.tabbrowser-tabs[treestyletab-allow-subtree-collapse="true"][treestyletab-stack-collapsed-tabs="true"]
.tabbrowser-tab[treestyletab-collapsed-done="true"] .tab-image-middle > *,
.tabbrowser-tabs[treestyletab-allow-subtree-collapse="true"][treestyletab-stack-collapsed-tabs="true"]
.tabbrowser-tab[treestyletab-collapsed-done="true"] .tab-image-right > *,
.tabbrowser-tabs[treestyletab-allow-subtree-collapse="true"][treestyletab-stack-collapsed-tabs="true"]
.tabbrowser-tab[treestyletab-collapsed-done="true"] .tab-close-button {
visibility: collapse;
}
/* fixed tab bar */
.tabbrowser-strip[treestyletab-tabbar-fixed="true"]+splitter {
visibility: collapse;
}
/* auto hide tab bar */
.tabbrowser-tabs[treestyletab-tabbar-autohide="hidden"],
.tabbrowser-strip[treestyletab-tabbar-autohide="hidden"],
.tabbrowser-strip[treestyletab-tabbar-autohide="hidden"]+splitter,
.tabbrowser-strip[collapsed="true"] + splitter:not([state="collapsed"]),
.treestyletab-tabbar-toggler,
.treestyletab-tabbar-toolbar[treestyletab-tabbar-autohide="hidden"],
.treestyletab-tabbar-toolbar[treestyletab-tabbar-autohide="hidden"] > *,
.treestyletab-tabbar-toolbar .treestyletab-splitter,
#treestyletab-tabbar-resizer-box,
tabbrowser[treestyletab-tabbar-autohide-mode="1"][tabcontainer]
.tabbrowser-strip.treestyletab-tabbar-placeholder,
tabbrowser[treestyletab-tabbar-autohide-mode="1"][tabcontainer]
.tabbrowser-strip.treestyletab-tabbar-placeholder+splitter {
visibility: collapse;
}
tabbrowser[treestyletab-tabbar-autohide-mode="1"][tabcontainer]
.treestyletab-tabbar-toggler,
tabbrowser[treestyletab-tabbar-autohide-mode="1"][treestyletab-tabbar-autohide="hidden"]
.treestyletab-tabbar-toggler,
.treestyletab-tabbar-toolbar[treestyletab-mode="vertical"][treestyletab-tabbar-autohide][treestyletab-tabbar-autohide-state="expanded"]
#treestyletab-tabbar-resizer-box,
.treestyletab-tabbar-toolbar[treestyletab-mode="vertical"][treestyletab-tabbar-autohide][treestyletab-tabbar-autohide-state="expanded"]:not([treestyletab-tabbar-fixed="true"])
.treestyletab-splitter {
visibility: visible;
}
/* put resizer under tabs, and raise up tabs */
.treestyletab-tabbar-toolbar[treestyletab-mode="vertical"][treestyletab-tabbar-autohide]
> *,
.treestyletab-toolbar-inner-box[treestyletab-tabbar-autohide]:not([treestyletab-tabbar-fixed="true"])
> * {
position: relative;
z-index: 2;
}
.treestyletab-tabbar-toolbar[treestyletab-mode="vertical"][treestyletab-tabbar-autohide]
#treestyletab-tabbar-resizer-box {
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
z-index: 1;
line-height: 0 !important; /* to avoid an useless space above the splitter */
font-size: 0 !important; /* to avoid an useless space above the splitter */
}
.tabbrowser-tabs[treestyletab-tabbar-autohide]
.tabs-stack
> *:first-child
> :not(html|canvas),
.tabbrowser-tabs[treestyletab-tabbar-resizing]
.tabs-stack
> *:first-child
> html|canvas {
display: none !important;
}
#treestyletab-autohide-content-area-screen {
/**
* Don't make this panel completely transparent, because
* mousemove event never fire on 100% transparent panel.
*/
background: rgba(0, 0, 0, 0.01);
line-height: 0;
margin: 0;
padding: 0;
-moz-appearance: none;
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
}
/* vertical tab bar */
.tabbrowser-tabs[treestyletab-mode="vertical"]
.tabbrowser-arrowscrollbox > scrollbox {
overflow-x: hidden !important;
overflow-y: auto !important;
}
.tabbrowser-tabs[treestyletab-mode="vertical"]
.tabbrowser-arrowscrollbox
.scrollbox-innerbox {
-moz-box-flex: 1 !important;
-moz-box-pack: start !important;
}
.tabbrowser-tabs[treestyletab-mode="vertical"]
.tabbrowser-tab,
toolbar.treestyletab-tabbar-toolbar[treestyletab-mode="vertical"]
> toolbarbutton,
toolbar.treestyletab-tabbar-toolbar[treestyletab-mode="vertical"]
> .treestyletab-toolbar-inner-box > toolbarbutton,
toolbar.treestyletab-tabbar-toolbar[treestyletab-mode="vertical"]
> toolbaritem,
toolbar.treestyletab-tabbar-toolbar[treestyletab-mode="vertical"]
> .treestyletab-toolbar-inner-box > toolbaritem {
-moz-box-flex: 0 !important;
}
.treestyletab-tabbar-toolbar[treestyletab-mode="vertical"] > toolbarbutton,
.treestyletab-tabbar-toolbar[treestyletab-mode="vertical"] > toolbarpaletteitem > toolbarbutton {
max-width: none !important;
}
/* workaround for https://github.com/piroor/treestyletab/issues/100 */
.treestyletab-tabbar-toolbar[treestyletab-mode="vertical"] .textbox-input-box {
-moz-box-align: stretch;
}
/* leftside vertical tab bar */
tabs.tabbrowser-tabs[treestyletab-tabbar-position="left"][treestyletab-invert-scrollbar="true"]
.tabbrowser-arrowscrollbox
> scrollbox {
direction: rtl;
}
tabs.tabbrowser-tabs[treestyletab-tabbar-position="left"][treestyletab-invert-scrollbar="true"]
.tabbrowser-arrowscrollbox
> scrollbox
> .scrollbox-innerbox {
direction: ltr;
}
/* hide horizontal tab bar UI for vertical tab bar */
.tabbrowser-tabs[treestyletab-mode="vertical"] .tabbrowser-arrowscrollbox > .scrollbutton-up,
.tabbrowser-tabs[treestyletab-mode="vertical"] .tabbrowser-arrowscrollbox > .scrollbutton-down,
.tabbrowser-tabs[treestyletab-mode="vertical"] .tabs-closebutton-box,
.tabbrowser-tabs[treestyletab-mode="vertical"] .tab-drop-indicator-bar {
visibility: collapse !important;
}
/**
* Firefox 4.0 finishes opening and closing processes of tabs by its
* "transitionend" events about max-width property. I think this is very
* dirty and specific implementation but it won't fixed.
* (See: https://bugzilla.mozilla.org/show_bug.cgi?id=585417#c3 )
* So we have to define max-width for both states [fadein] (means "completely
* opened") and :not([fadein]) (means "in opening/removing process".
*/
.tabbrowser-tabs[treestyletab-mode="vertical"]
.tabbrowser-tab:not([pinned]) {
max-width: 65000px !important;
}
.treestyletab-tabbar-toolbar[treestyletab-mode="vertical"]
.tabbrowser-tab:not([pinned]):not([fadein]) {
opacity: 0.5 !important;
}
.tabbrowser-tabs[treestyletab-mode="vertical"]
.tabbrowser-tab:not([pinned])[fadein] {
max-width: 65250px !important;
min-width: 1px !important;
}
.treestyletab-tabbar-toolbar[treestyletab-mode="vertical"][treestyletab-animation-enabled="true"]
.tabbrowser-tab:not([pinned]):not([fadein])[treestyletab-removed="true"] {
max-height: 1px !important;
min-height: 1px !important;
opacity: 0 !important;
/**
* Sometimes "transitionend" event for "max-width" doesn't fire so ghotst
* tabs are left. To do cleanup process forcedly, we have to re-define new
* max-width to fire transitionend event.
*/
max-width: 64000px !important;
}
/* override toolbar binding */
/**
* Don't use :-moz-any() selector to override styles defined by the theme.
* Normal selectors in default theme is stronger than :-moz-any() even if
* it includes #TabsToolbar in its subqueries.
*/
@media all and (-moz-windows-compositor) { /* for winstripe */
#navigator-toolbox[tabsontop="true"]
> .treestyletab-tabbar-toolbar:not(#toolbar-menubar),
#navigator-toolbox[tabsontop="true"]
> .treestyletab-tabbar-toolbar:not(#toolbar-menubar):-moz-lwtheme,
#navigator-toolbox[tabsontop="true"]
> .treestyletab-tabbar-toolbar-ready:not(#toolbar-menubar),
#navigator-toolbox[tabsontop="true"]
> .treestyletab-tabbar-toolbar-ready:not(#toolbar-menubar):-moz-lwtheme,
#navigator-toolbox
> #nav-bar + #customToolbars + #PersonalToolbar[collapsed="true"]
+ .treestyletab-tabbar-toolbar[tabsontop="true"]:last-child,
#navigator-toolbox
> #nav-bar + #customToolbars + #PersonalToolbar[collapsed="true"]
+ .treestyletab-tabbar-toolbar[tabsontop="true"]:not(:last-child),
#navigator-toolbox
> #nav-bar + #customToolbars + #PersonalToolbar[collapsed="true"]
+ .treestyletab-tabbar-toolbar[tabsontop="false"]:last-child,
#navigator-toolbox
> #nav-bar + #customToolbars + #PersonalToolbar[collapsed="true"]
+ .treestyletab-tabbar-toolbar[tabsontop="false"]:not(:last-child),
#navigator-toolbox
> #nav-bar + #customToolbars + #PersonalToolbar[collapsed="true"]
+ .treestyletab-tabbar-toolbar-ready[tabsontop="true"]:last-child,
#navigator-toolbox
> #nav-bar + #customToolbars + #PersonalToolbar[collapsed="true"]
+ .treestyletab-tabbar-toolbar-ready[tabsontop="true"]:not(:last-child),
#navigator-toolbox
> #nav-bar + #customToolbars + #PersonalToolbar[collapsed="true"]
+ .treestyletab-tabbar-toolbar-ready[tabsontop="false"]:last-child,
#navigator-toolbox
> #nav-bar + #customToolbars + #PersonalToolbar[collapsed="true"]
+ .treestyletab-tabbar-toolbar-ready[tabsontop="false"]:not(:last-child),
#navigator-toolbox
> .treestyletab-tabbar-toolbar:not(#toolbar-menubar):-moz-lwtheme,
#navigator-toolbox
> .treestyletab-tabbar-toolbar-ready:not(#toolbar-menubar):-moz-lwtheme,
#navigator-toolbox
> #nav-bar + #customToolbars + #PersonalToolbar[collapsed="true"]
+ #TabsToolbar[tabsontop="true"]:last-child,
#navigator-toolbox
> #nav-bar + #customToolbars + #PersonalToolbar[collapsed="true"]
+ #TabsToolbar[tabsontop="true"]:not(:last-child),
#navigator-toolbox
> #nav-bar + #customToolbars + #PersonalToolbar[collapsed="true"]
+ #TabsToolbar[tabsontop="false"]:last-child,
#navigator-toolbox
> #nav-bar + #customToolbars + #PersonalToolbar[collapsed="true"]
+ #TabsToolbar[tabsontop="false"]:not(:last-child) {
-moz-binding: url(treestyletab.xml#toolbar-drag);
}
}
@media not all and (-moz-windows-compositor) { /* for winstripe */
#TabsToolbar[tabsontop=true]:not(:-moz-lwtheme):-moz-system-metric(windows-default-theme),
#navigator-toolbox[tabsontop=false]
> toolbar.treestyletab-tabbar-toolbar:not(#toolbar-menubar):not(:-moz-lwtheme):-moz-system-metric(windows-default-theme),
#navigator-toolbox[tabsontop=false]
> toolbar.treestyletab-tabbar-toolbar-ready:not(#toolbar-menubar):not(:-moz-lwtheme):-moz-system-metric(windows-default-theme) {
-moz-binding: url(treestyletab.xml#toolbar-drag);
}
}
.treestyletab-tabbar-toolbar,
.treestyletab-tabbar-toolbar-ready,
/* for gnomestripe */
#TabsToolbar.treestyletab-tabbar-toolbar[tabsontop="true"]:not(:-moz-lwtheme):-moz-system-metric(menubar-drag),
#TabsToolbar.treestyletab-tabbar-toolbar-ready[tabsontop="true"]:not(:-moz-lwtheme):-moz-system-metric(menubar-drag),
/* for pinstripe */
toolbar.treestyletab-tabbar-toolbar:not([nowindowdrag="true"]),
toolbar.treestyletab-tabbar-toolbar-ready:not([nowindowdrag="true"]),
/* Hide Caption Titlebar Plus (Smart)
https://addons.mozilla.org/firefox/addon/hide-caption-titlebar-plus-sma/ */
#main-window[dz_adv_scroll_via_tabbar="true"] #TabsToolbar {
-moz-binding: url(treestyletab.xml#toolbar-drag);
}
#navigator-toolbox[tabsontop="false"]
> .treestyletab-tabbar-toolbar,
#navigator-toolbox[tabsontop="false"]
> .treestyletab-tabbar-toolbar-ready,
#navigator-toolbox[tabsontop="false"]
> .treestyletab-tabbar-toolbar:-moz-lwtheme,
#navigator-toolbox[tabsontop="false"]
> .treestyletab-tabbar-toolbar-ready:-moz-lwtheme {
-moz-binding: url(treestyletab.xml#toolbar);
}
.treestyletab-tabbar-toolbar:not([treestyletab-tabbar-position="top"]),
.treestyletab-tabbar-toolbar[treestyletab-tabbar-position="top"]:not([treestyletab-tabbar-fixed="true"]) {
line-height: 0 !important; /* to avoid an useless space above the tab bar */
position: fixed !important;
-moz-appearance: none !important;
}
.treestyletab-tabbar-toolbar:not([treestyletab-tabbar-position="top"])
.tabbrowser-tabs,
.treestyletab-tabbar-toolbar[treestyletab-tabbar-position="top"]:not([treestyletab-tabbar-fixed="true"])
.tabbrowser-tabs {
overflow: hidden !important;
}
.treestyletab-tabbar-toolbar toolbaritem {
overflow: hidden;
}
/* animation effects */
.tabbrowser-tabs[treestyletab-animation-enabled="true"][treestyletab-mode="vertical"]
.tabbrowser-tab:not([treestyletab-collapsed-done="true"]) {
-moz-transition: margin-left 0.2s ease-out,
margin-right 0.2s ease-out,
margin-top 0.15s ease-out,
opacity 0.15s ease-out,
min-height 0.15s ease-out,
max-height 0.15s ease-out,
min-width 0.15s ease-out /* for Firefox itself */,
max-width 0.15s ease-out /* for Firefox itself */;
transition: margin-left 0.2s ease-out,
margin-right 0.2s ease-out,
margin-top 0.15s ease-out,
opacity 0.15s ease-out,
min-height 0.15s ease-out,
max-height 0.15s ease-out,
min-width 0.15s ease-out /* for Firefox itself */,
max-width 0.15s ease-out /* for Firefox itself */;
}
.tabbrowser-tabs[treestyletab-animation-enabled="true"]:not([treestyletab-mode="vertical"]):not([treestyletab-tab-inverted="true"])
.tabbrowser-tab:not([treestyletab-collapsed-done="true"]) {
-moz-transition: margin-left 0.15s ease-out,
opacity 0.15s ease-out,
margin-top 0.2s ease-out,
min-height 0.15s ease-out,
max-height 0.15s ease-out,
min-width 0.15s ease-out /* for Firefox itself */,
max-width 0.15s ease-out /* for Firefox itself */;
transition: margin-left 0.15s ease-out,
opacity 0.15s ease-out,
margin-top 0.2s ease-out,
min-height 0.15s ease-out,
max-height 0.15s ease-out,
min-width 0.15s ease-out /* for Firefox itself */,
max-width 0.15s ease-out /* for Firefox itself */;
}
.tabbrowser-tabs[treestyletab-animation-enabled="true"]:not([treestyletab-mode="vertical"])[treestyletab-tab-inverted="true"]
.tabbrowser-tab:not([treestyletab-collapsed-done="true"]) {
-moz-transition: margin-left 0.15s ease-out,
opacity 0.15s ease-out,
margin-bottom 0.2s ease-out,
min-height 0.15s ease-out,
max-height 0.15s ease-out,
min-width 0.15s ease-out /* for Firefox itself */,
max-width 0.15s ease-out /* for Firefox itself */;
transition: margin-left 0.15s ease-out,
opacity 0.15s ease-out,
margin-bottom 0.2s ease-out,
min-height 0.15s ease-out,
max-height 0.15s ease-out,
min-width 0.15s ease-out /* for Firefox itself */,
max-width 0.15s ease-out /* for Firefox itself */;
}
/* separating of groups */
/* horizontal tab bar */
.tabbrowser-tabs:not([treestyletab-mode="vertical"])
.tabbrowser-tab:not([treestyletab-nest="0"]) + .tabbrowser-tab[treestyletab-nest="0"],
.tabbrowser-tabs:not([treestyletab-mode="vertical"])
.tabbrowser-tab[treestyletab-nest="0"] + .tabbrowser-tab[treestyletab-nest="0"][treestyletab-children] {
margin-left: 0.8em !important;
}
/* vertical tab bar */
.tabbrowser-tabs[treestyletab-mode="vertical"][treestyletab-max-tree-level="0"]
.tabbrowser-tab:not([treestyletab-nest="0"]) + .tabbrowser-tab[treestyletab-nest="0"],
.tabbrowser-tabs[treestyletab-mode="vertical"][treestyletab-max-tree-level="0"]
.tabbrowser-tab[treestyletab-nest="0"] + .tabbrowser-tab[treestyletab-nest="0"][treestyletab-children] {
margin-top: 0.8em !important;
}
/* compatibility for Firefox features */
/* hide all tabs button (by user's preference) */
.tabbrowser-tabs[treestyletab-hide-alltabs-button="true"]
.tabs-alltabs-stack {
visibility: collapse !important;
}
/* pinned tabs */
.tabbrowser-tabs[treestyletab-mode="vertical"] {
-moz-margin-start: 0 !important;
}
.tabbrowser-tabs[treestyletab-mode="vertical"]
.tabbrowser-tab[pinned="true"] {
/* height: 24px; */
line-height: 0;
position: fixed !important;
/* width: 24px; */
z-index: 100;
}
.tabbrowser-tabs[treestyletab-mode="vertical"]
.tabbrowser-tab[pinned="true"]:not(.treestyletab-faviconized)
.tab-label[pinned] {
width: auto;
}
/* print preview */
.tabbrowser-strip[treestyletab-tabbar-fixed="true"]+splitter,
.tabbrowser-strip[treestyletab-print-preview="true"],
.tabbrowser-strip[treestyletab-print-preview="true"]+splitter,
.treestyletab-tabbar-toolbar[treestyletab-print-preview="true"],
tabbrowser[treestyletab-tabbar-autohide-mode="1"][treestyletab-print-preview="true"]
.treestyletab-tabbar-toggler {
visibility: collapse;
}
/* stylized window (opened by window.open() with features) */
window[chromehidden~="toolbar"]
.tabbrowser-strip.treestyletab-tabbar-placeholder,
window[chromehidden~="toolbar"]
.tabbrowser-strip.treestyletab-tabbar-placeholder+splitter,
window[chromehidden~="toolbar"]
.treestyletab-tabbar-toolbar {
visibility: collapse;
}
/* full tooltip */
#treestyletab-full-tree-tooltip[popup-shown="true"] {
-moz-transition: margin-left 0.2s ease-out,
margin-top 0.2s ease-out,
max-height 0.2s ease-out,
max-width 0.2s ease-out;
transition: margin-left 0.2s ease-out,
margin-top 0.2s ease-out,
max-height 0.2s ease-out,
max-width 0.2s ease-out;
}
#treestyletab-full-tree-tooltip > arrowscrollbox {
opacity: 0;
}
#treestyletab-full-tree-tooltip[popup-shown="true"] > arrowscrollbox {
-moz-transition: opacity 0.2s ease-out;
transition: opacity 0.2s ease-out;
opacity: 1;
}
/* addon compatibility */
/* some themes */
image.tab-icon {
display: -moz-stack;
-moz-binding: url(treestyletab.xml#tab-icon);
}
/* Tabbrowser Preferences, and some theme */
.tabbrowser-tabs .tabs-newbutton,
.tabbrowser-tabs[treestyletab-mode="vertical"] .scrollbutton-up,
.tabbrowser-tabs[treestyletab-mode="vertical"] .scrollbutton-down {
max-width: none !important;
}
/* All-in-One Sidebar */
#aiostbx-tableft-toolbox:not([incustomisemode="true"]) > toolbar[currentset="__empty"],
#aiostbx-tableft-toolbox:not([incustomisemode="true"]) > toolbar:not([currentset]),
#aiostbx-tabright-toolbox:not([incustomisemode="true"]) > toolbar[currentset="__empty"],
#aiostbx-tabright-toolbox:not([incustomisemode="true"]) > toolbar:not([currentset]) {
visibility: collapse;
}
/* AutoHide */
#appcontent[ahFull="true"] .tabbrowser-strip[ahHIDE="true"]+splitter {
visibility: collapse;
}
/* ColorfulTabs */
:root:not([treestyletab-tabbar-position="top"]) #ctStack,
:root:not([treestyletab-tabbar-fixed="true"]) #ctStack {
display: none;
}