CSSで縦置きタブ
サイドバー出しながらでも縦タブしたかったから無理やり立てた
- 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
- 公開