Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
ツリー型タブを美しくするStylish用CSS (一部Mac用かも)
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
/* 余計なUIを非表示に */
window[sizemode="fullscreen"] #navigator-toolbox,
window[sizemode="fullscreen"] #TabsToolbar,
window[chromehidden*="toolbar"] #nav-bar/*小ウィンドウ*/,
spacer.treestyletab-tabbar-toggler{
display:none !important;
}
/* ツリー型タブのMacダークテーマを美しく */
#TabsToolbar{
background:#999 !important;
}
#tabbrowser-tabs tab.tabbrowser-tab label{
color:#000 !important;
}
#tabbrowser-tabs tab.tabbrowser-tab,
#tabbrowser-tabs toolbarbutton.tabs-newtab-button{
background:#eee !important;
}
/* ツリー型タブの境界をなくす */
splitter.treestyletab-splitter{
background:#bbb;
min-width:1px !important;
width:1px !important;
}
/* ツリー型タブのラベルをMacでも左寄せに */
#tabbrowser-tabs[treestyletab-mode="vertical"] tab.tabbrowser-tab label{
text-align:left;
}
/* ツリー型タブの選択タブをもう少し目立たせる */
#tabbrowser-tabs[treestyletab-mode="vertical"] tab.tabbrowser-tab{
padding:0px !important;
border:0px !important;
border-bottom:1px solid #ccc !important;
}
#tabbrowser-tabs[treestyletab-mode="vertical"] tab.tabbrowser-tab .tab-stack{
border-left:0 solid #fc0;
transition-duration: .1s;
}
#tabbrowser-tabs[treestyletab-mode="vertical"] tab.tabbrowser-tab[selected="true"] .tab-stack{
background:#ff9;
border-left:5px solid #fc0;
transition-duration: .1s;
}
#tabbrowser-tabs[treestyletab-mode="vertical"] tab.tabbrowser-tab stack.tab-icon{
margin:-1px 0 0 2px;
}
#tabbrowser-tabs[treestyletab-mode="vertical"] tab.tabbrowser-tab:hover{
background:#ffc !important;
}
#tabbrowser-tabs[treestyletab-mode="vertical"] tab.tabbrowser-tab[treestyletab-drop-position="self"]{
border:2px solid #000 !important;
}
#tabbrowser-tabs[treestyletab-mode="vertical"] tab.tabbrowser-tab[treestyletab-drop-position="before"]{
border-top:2px solid #000 !important;
}
#tabbrowser-tabs[treestyletab-mode="vertical"] tab.tabbrowser-tab[treestyletab-drop-position="after"]{
border-bottom:2px solid #000 !important;
}
/* フラグ[ *]付きのタブを目立たせる */
#tabbrowser-tabs[treestyletab-mode="vertical"] tab.tabbrowser-tab[label$=" *"] .tab-stack{
border-left:5px solid #f90 !important;
}
/* ラベル[----]付きのタブを区切りとして使う */
#tabbrowser-tabs[treestyletab-mode="vertical"] tab.tabbrowser-tab[label="----"]{
opacity:0;
border:none !important;
min-height:10px !important;
}
#tabbrowser-tabs[treestyletab-mode="vertical"] tab.tabbrowser-tab[label="----"] *{
display:none!important;
}
#tabbrowser-tabs[treestyletab-mode="vertical"] tab.tabbrowser-tab[label="----"][selected="true"]{
opacity:.25;
}
/* タブの音量アイコンをマウスオーバーによる閉じるボタンの出現で位置ズレさせない */
#tabbrowser-tabs[treestyletab-mode="vertical"] tab .tab-icon-sound[soundplaying] + .tab-close-button{
display:block !important;
visibility:hidden !important;
}
#tabbrowser-tabs[treestyletab-mode="vertical"] tab:hover .tab-icon-sound[soundplaying] + .tab-close-button{
visibility:visible !important;
}
/* TreeStyleTabのフルスクリーンからの復帰時に壊れるバグ解消 */
window:not([sizemode="fullscreen"]) hbox.treestyletab-tabbar-placeholder{
visibility:visible !important;
}
window[chromehidden*="toolbar"] hbox.treestyletab-tabbar-placeholder{
display:none;
}
/* TreeStyleTabかどうかは不明だが新規タブボタンがスクロール限界を超えると消えてしまうバグを緩和(完全には表示されない...) */
#tabbrowser-tabs toolbarbutton.tabs-newtab-button{
display: -moz-box !important;
visibility: visible !important;
}
/* TreeStyleTabかどうかは不明だが新規タブボタンのアイコンが引き伸ばされるバグを解消 */
#tabbrowser-tabs toolbarbutton.tabs-newtab-button image{
max-width:16px !important;
}
/* TreeStyleTabかどうかは不明だがタブラベルがインラインstyleで消えるバグを回避 */
/* タブがインデントされなくなるのはTreeStyleTabがしかるべき属性を付け損ねるため不可なんだと思う */
#tabbrowser-tabs tab stack.tab-icon,
#tabbrowser-tabs tab label.tab-label,
#tabbrowser-tabs tab image.tab-icon-sound,
#tabbrowser-tabs tab toolbarbutton.tab-close-button.close-icon,
dummy{
position:relative !important;
visibility:visible !important;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment