お豆腐

サイドバー出しながらでも縦タブしたかったから無理やり立てた

2017/11/24

フルスクリーン時邪魔だから画面端にマウスオーバーで表示されるように。

縦置きタブ(Firefox57から)

:root {
  --verticaltabbar-width:        120px; /* タブバーの横幅 */
  --verticaltab-height:           25px; /* タブの高さ */
  --verticaltabpinned-width:       25%; /* ピン留めタブの横幅 */
}
#main-window:not([inFullscreen]) {
  margin-left: var(--verticaltabbar-width) !important;
}
#TabsToolbar {
  width: var(--verticaltabbar-width) !important;
  position:fixed !important;
  left: 0px !important;
  top: 0px !important;
  bottom: var(--verticaltab-height) !important;
  background: #a9a9a9 !important;
}
#main-window[inFullscreen] #TabsToolbar:not(:hover) {
  width: 1px !important;
  opacity: 0 !important;
  transition: .5s !important;
}
#main-window[inFullscreen] #TabsToolbar:hover {
  width: var(--verticaltabbar-width) !important;
  transition: .2s !important;
}
#main-window[tabsintitlebar] #tabbrowser-tabs,
#main-window[tabsintitlebar] #content-deck {
  -moz-window-dragging: no-drag !important;
}
.tabbrowser-arrowscrollbox {
  -moz-binding: url("chrome://global/content/bindings/scrollbox.xml#arrowscrollbox") !important;
}
.tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
  overflow: visible !important;
  padding: 0 !important;
}
.tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox > .scrollbox-innerbox {
  display: block !important;
}
#tabbrowser-tabs {
  height: 100% !important;
  overflow-x: hidden !important;
}
.tabbrowser-tab:not([pinned]) {
  width:100% !important;
}
.tabbrowser-tab[pinned] {
  width: var(--verticaltabpinned-width) !important;
}
.tab-content[pinned] {
    padding: 0 0 0 7px !important;
}
.tab-content[pinned] .tab-text {
    display: none !important;
}
.tabbrowser-tab {
  -moz-box-align: unset !important;
  min-height: var(--verticaltab-height) !important;
  vertical-align: top !important;
}
.tabs-newtab-button {
  display: none !important;
}
#new-tab-button {
  visibility: visible !important;
  width: 100% !important;
  background: #a9a9a9 !important;
}
#new-tab-button:hover {
  background: var(--toolbarbutton-hover-background) !important;
}
#new-tab-button .toolbarbutton-icon {
  width: 16px !important;
  height: 16px !important;
  margin: 0px !important;
  padding: 0px !important;
  background: none !important;
}

更新履歴

2017-11-28

ホイールでスクロールできるように

2017-11-26

タイトルバーなくてもスクロールできるように

2017-11-24

フルスクリーン

2017-11-18

ピン留めタブと新しいタブを開くボタン

2017/11/16

公開