CSSで多段タブ

2017/11/16
Firefox57用に直した。タブの入れ替えは出来ません
2012/12/09
Firefox17からD&D時に変な動きをするようになったので zzzz-removeTabMoveAnimation.uc.js が必要です

多段タブ(Firefox57から)

タイトルバーを表示しておかないとスクロール出来ません

:root {
  --multirowtab-height:        25px; /* タブの高さ */
  --multirowtab-width:        225px; /* タブの横幅 */
  --multirowtabbar-height:        3; /* タブバーの高さ(段数) */
}
.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: calc( (var(--multirowtab-height) + 1px ) * var(--multirowtabbar-height) ) !important;
}

#tabbrowser-tabs,
#tabbrowser-tabs > .tabbrowser-arrowscrollbox,
#tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] {
  min-height: var(--multirowtab-height) !important;
}
.tabbrowser-tab:not([pinned]) {
  min-width: var(--multirowtab-width) !important;
}
.tabbrowser-tab {
  -moz-box-align: unset !important;
  min-height: var(--multirowtab-height) !important;
  vertical-align: top !important;
}
.tabs-newtab-button {
  min-width: 0px !important;
  width: 28px !important;
  height: var(--multirowtab-height) !important;
}
.tabs-newtab-button:hover {
  background: var(--toolbarbutton-hover-background) !important;
}
.tabs-newtab-button .toolbarbutton-icon {
  width: 16px !important;
  height: 16px !important;
  margin: 0px !important;
  padding: 0px !important;
  background: 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-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
公開

プロフィール

豆腐

Author:豆腐

最新記事

最新コメント

カテゴリ

月別アーカイブ

FC2カウンター