CSSで多段タブ
- 2017/11/16
- Firefox57用に直した。タブの入れ替えは出来ません
- 2012/12/09
- Firefox17からD&D時に変な動きをするようになったので zzzz-removeTabMoveAnimation.uc.js が必要です
多段タブ(Firefox57から)
:root { --multirowtab-height: 25px; /* タブの高さ */ --multirowtab-min-width: 100px; /* タブの最小横幅 */ --multirowtab-max-width: 225px; /* タブの最大横幅 */ --multirowtabbar-height: 3; /* タブバーの高さ(段数) */ } .tabbrowser-arrowscrollbox { -moz-binding: url("chrome://global/content/bindings/scrollbox.xml#arrowscrollbox") !important; } .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox { display: block !important; overflow: visible !important; } .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox > .scrollbox-innerbox { display: flex !important; flex-wrap: wrap !important; overflow-y: auto !important; overflow-x: hidden !important; /*段数制限いらない人はこれを消す*/ max-height: calc(var(--multirowtab-height) * var(--multirowtabbar-height)) !important; } #tabbrowser-tabs, #tabbrowser-tabs > .tabbrowser-arrowscrollbox, #tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned], .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox, .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox > .scrollbox-innerbox { min-height: var(--multirowtab-height) !important; } #main-window[tabsintitlebar] #tabbrowser-tabs { -moz-window-dragging: no-drag !important; } .tabbrowser-tab:not([pinned]) { flex-grow: 1 !important; min-width: var(--multirowtab-min-width) !important; max-width: var(--multirowtab-max-width) !important; } .tabbrowser-tab { min-height: var(--multirowtab-height) !important; vertical-align: top !important; display: -webkit-box !important; } .tab-stack { width: 100% !important; min-height: unset !important; } [uidensity="touch"]:root .tab-close-button { padding: 0 calc(9px - 2px) !important; } .tab-label-container[pinned] { visibility: collapse !important; } #new-tab-button, .tabs-newtab-button { min-width: 0px !important; width: 28px !important; margin-bottom: -1px !important; height: var(--multirowtab-height) !important; } #new-tab-button .toolbarbutton-icon, .tabs-newtab-button .toolbarbutton-icon { width: 16px !important; height: 16px !important; margin: 0px !important; padding: 0px !important; background: none !important; } #new-tab-button:hover, .tabs-newtab-button:hover, #TabsToolbar > toolbarbutton:hover, #TabsToolbar > .panel-wide-item > toolbarbutton:hover { background: var(--toolbarbutton-hover-background) !important; } #new-tab-button:active, .tabs-newtab-button:active, #TabsToolbar > toolbarbutton:active, #TabsToolbar > .panel-wide-item > toolbarbutton:active { background: var(--toolbarbutton-active-background) !important; } #TabsToolbar > toolbarbutton:not(.bookmark-item):not(#new-tab-button) > .toolbarbutton-icon, #TabsToolbar > toolbarbutton > .toolbarbutton-badge-stack, #TabsToolbar > .panel-wide-item .toolbarbutton-icon { padding: 0px var(--toolbarbutton-inner-padding) !important; background: none !important; } #TabsToolbar .toolbarbutton-text { padding-top: 0 !important; min-height: unset !important; background: none !important; } #tabbrowser-tabs .scrollbutton-up, #tabbrowser-tabs .scrollbutton-down, #tabbrowser-tabs .autorepeatbutton-up, #tabbrowser-tabs .autorepeatbutton-down, .arrowscrollbox-overflow-start-indicator, .arrowscrollbox-overflow-end-indicator, .tabbrowser-tab:not([fadein]){ display: none !important; }
多段タブ(Firefox56まで)
CSS を有効にした後一度再起動してください
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul); .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox { display: block !important; overflow: visible !important; padding: 0 !important; } .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox > .scrollbox-innerbox { display: block !important; overflow-y: auto !important; overflow-x: hidden !important; max-height: 93px !important; /*タブバーの高さ*/ } .scrollbutton-up, .scrollbutton-down { display: none !important; } .tabbrowser-tab:not([pinned]) { min-width: 250px !important; /*タブの横幅*/ } .tabs-newtab-button { vertical-align: top !important; height: 31px !important; }
更新履歴
- 2017-12-08
- UI密度とアイコン類
- 2017-11-28
- 可変幅とホイールでスクロールできるように
- 2017-11-26
- タイトルバーなくてもスクロールできるように
- 2017-11-19
- タブが一段の時隙間空いてた
- 2017-11-17
- 新しいタブを開くボタンが変だった
- 2017-11-16
- Firefox57
- 2015-04-07
- 2014-04-07
- 2012-12-09
- 2012-09-11
- 2012-09-04
- 2011-12-18
- 2011-11-29
- 公開