Firefox userChrome.css: ブックマークツールバーを垂直化 2 - for Firefox 91 ESR
Firefox userChrome.css: ブックマークツールバーを垂直化を Firefox 91 ESR に対応。
ロケーションバー等をタブバー左に配置するためにナビゲーションバーを使用するため
垂直ツールバーとしてブックマークツールバーを使用。
Firefox 91 ESR での使用を推奨。
ブックマークツールバーの表示有効化必須。
Arch Linux で作成した為、各 OS 環境に合った値の微調整が必要。
垂直ツールバー化は UI 密度がコンパクト・モードにのみ適用。
Firefox 91 ESR ではコンパクト・モードが公式サポートから外れているため
about:config から "browser.compactmode.show" を true にする必要が有る。
ウィンドウ幅が最小時とフルスクリーン時には通常表示に戻る仕様。
ブラウザの使用上、起動時のメニューバーの有無でナビゲーションバーの高さが決定される。
カスタマイズから他の UI 密度に切り替えるか、再起動するまで固定される。
メニューボタンの異動は全 UI 密度に適用。
通常、フルスクリーン時にはブックマークツールバーが表示されないが
ブックマークツールバーにアドオンボタンを配置する前提のため、
全 UI 密度でブックマークツールバーが表示されるようにした。
userChrome.css
/*
:root:not([chromehidden~="toolbar"]) 各種ツールバー使用可能ウィンドウ
:root[sizemode="maximized"] 最大表示
:root[sizemode="normal"] 縮小表示
:root:not([width="foo"]) ウィンドウ非最小幅
:root:not([customizing]) 非カスタマイズモード
:root:not[uidensity] UI密度-通常
:root[uidensity="touch"] UI密度-タッチ
:root[uidensity="compact"] UI密度-コンパクト
:root:not([inFullscreen]) 非フルスクリーンモード
:root:not([inDOMFullscreen]) 非メディアプレイヤフルスクリーンモード
:root[tabsintitlebar] タイトルバー非表示
*/
/******** 全UI密度用設定 ********/
/*メニューボタン移動*/
:root:not([customizing]) #nav-bar {
--toolbar-start-end-padding: 3px !important;
}
:root:not([customizing]) #PanelUI-button {
-moz-box-ordinal-group: 0 !important;
}
:root:not([customizing]) :is(#PanelUI-button, #PanelUI-menu-button) {
-moz-box-ordinal-group: 0 !important;
}
/*フルスクリーンモード下でのブックマークツールバー有効化*/
:root:not([customizing])[inFullscreen]:not([inDOMFullscreen]) #PersonalToolbar {
visibility: visible !important;
}
/******** 以下、コンパクトモード用設定 ********/
/*ウィンドウ縮小時のロケーションバーの最小幅*/
:root:not([customizing])[uidensity="compact"] #urlbar-container {
min-width: 34px !important;
}
/****==== VerticalToolbar用設定 ====****/
/**== ロケーションバー・タブバー水平配置用設定 ==**/
/*== #navigator-toolbox ==*/
/*ボックス内のアイテムを水平配置*/
:root:not([chromehidden~="toolbar"]):is([sizemode="maximized"], [sizemode="normal"]:not([width="450"])):not([customizing])[uidensity="compact"]:not([inFullscreen]) #navigator-toolbox {
-moz-box-orient: horizontal !important;
}
/*== #navigator-toolbox ==*/
/*== #navigator-toolbox > #titlebar ==*/
/*タブバーの設定*/
:root:not([chromehidden~="toolbar"]):is([sizemode="maximized"], [sizemode="normal"]:not([width="450"])):not([customizing])[uidensity="compact"]:not([inFullscreen]) #titlebar {
-moz-box-flex: 1 !important;
width: min(240px, 688px) !important;
z-index: 1 !important;
}
:root:not([chromehidden~="toolbar"]):is([sizemode="maximized"], [sizemode="normal"]:not([width="450"])):not([customizing])[uidensity="compact"]:not([inFullscreen]) #TabsToolbar .titlebar-spacer[type="pre-tabs"] {
width: 20px !important;
}
/*== #navigator-toolbox > #titlebar ==*/
/*== #navigator-toolbox > #nav-bar ==*/
/*ロケーションバーの設定*/
:root:not([chromehidden~="toolbar"]):is([sizemode="maximized"], [sizemode="normal"]:not([width="450"])):not([customizing])[uidensity="compact"]:not([inFullscreen]) #nav-bar {
-moz-box-flex: 1 !important;
-moz-box-ordinal-group: 0 !important;
margin-right: 3px !important;
width: min(207px, 646px) !important;
z-index: 2 !important;
}
/*== #navigator-toolbox > #nav-bar ==*/
/**== ブックマークツールバー垂直配置用設定 ==**/
/*== #navigator-toolbox > #PersonalToolbar ==*/
/*ブックマークツールバーの設定*/
:root:not([chromehidden~="toolbar"]):is([sizemode="maximized"], [sizemode="normal"]:not([width="450"])):not([customizing])[uidensity="compact"]:not([inFullscreen]) #PersonalToolbar {
border-right: 1px solid var(--chrome-content-separator-color) !important;
display: flex !important;
flex-direction: column !important;
left: 0px !important; /*左配置: left, 右配置: right*/
min-height: calc(100% - 38px) !important;
padding: 8px 3px 3px 2px !important;
position: fixed !important;
top: 38px !important;
width: 30px !important;
z-index: 0 !important;
}
/*ツールバーボタンの余白設定*/
:root:not([chromehidden~="toolbar"]):is([sizemode="maximized"], [sizemode="normal"]:not([width="450"])):not([customizing])[uidensity="compact"]:not([inFullscreen]) #PersonalToolbar > toolbarbutton {
margin: 1px 0 !important;
padding: 4px !important;
}
/*スペーサーの高さ設定*/
:root:not([chromehidden~="toolbar"]):is([sizemode="maximized"], [sizemode="normal"]:not([width="450"])):not([customizing])[uidensity="compact"]:not([inFullscreen]) #PersonalToolbar > toolbarspring {
height: 1080px !important;
min-height: 0 !important;
}
/*コンバインドボタン設定*/
:root:not([chromehidden~="toolbar"]):is([sizemode="maximized"], [sizemode="normal"]:not([width="450"])):not([customizing])[uidensity="compact"]:not([inFullscreen]) #PersonalToolbar > .toolbaritem-combined-buttons {
-moz-box-orient: vertical !important;
margin: 1px 0 !important;
}
:root:not([chromehidden~="toolbar"]):is([sizemode="maximized"], [sizemode="normal"]:not([width="450"])):not([customizing])[uidensity="compact"]:not([inFullscreen]) #PersonalToolbar > .toolbaritem-combined-buttons > toolbarbutton {
margin: 0 !important;
padding: 4px !important;
}
:root:not([chromehidden~="toolbar"]):is([sizemode="maximized"], [sizemode="normal"]:not([width="450"])):not([customizing])[uidensity="compact"]:not([inFullscreen]) #PersonalToolbar > .toolbaritem-combined-buttons > .toolbarbutton-combined-buttons-dropmarker {
max-height: 14px !important;
padding: 0 4px !important;
}
:root:not([chromehidden~="toolbar"]):is([sizemode="maximized"], [sizemode="normal"]:not([width="450"])):not([customizing])[uidensity="compact"]:not([inFullscreen]) #PersonalToolbar > .toolbaritem-combined-buttons > .toolbarbutton-combined-buttons-dropmarker > image {
min-height: 14px !important;
}
:root:not([chromehidden~="toolbar"]):is([sizemode="maximized"], [sizemode="normal"]:not([width="450"])):not([customizing])[uidensity="compact"]:not([inFullscreen]) #PersonalToolbar > .toolbaritem-combined-buttons > separator {
height: 1px !important;
}
:root:not([chromehidden~="toolbar"]):is([sizemode="maximized"], [sizemode="normal"]:not([width="450"])):not([customizing])[uidensity="compact"]:not([inFullscreen]) #PersonalToolbar > .toolbaritem-combined-buttons:not(:hover) > separator {
background-size: 22px 1px !important;
margin: 0 1px !important;
width: 22px !important;
}
/* ズームボタン設定 */
:root:not([chromehidden~="toolbar"]):is([sizemode="maximized"], [sizemode="normal"]:not([width="450"])):not([customizing])[uidensity="compact"]:not([inFullscreen]) #PersonalToolbar > #zoom-controls {
display: flex !important;
flex-direction: column-reverse !important;
}
/*== #navigator-toolbox > #PersonalToolbar ==*/
/*== #browser ==*/
/*ブックマークツールバー表示領域の確保*/
/*左配置: margin-left, 右配置: margin-right*/
:root:not([chromehidden~="toolbar"]):is([sizemode="maximized"], [sizemode="normal"]:not([width="450"])):not([customizing])[uidensity="compact"]:not([inFullscreen]) #browser {
margin-left: 30px !important;
}
/*== #browser ==*/