userChrome.css firefox 110.0.1
長いこと手を入れずにuserChrome.cssを使いまわしてきた気がする。firefoxのバージョンを110.0.1にしたら表示が崩れたので新しく作ってみた。ツールバーの高さや、ボタンアイコンの余白を詰めてコンパクトにする。
UI部品のcssセレクタの調べかた
ブラウザーツールボックスを使用する。
- [開発ツール] > [設定] > [詳細設定] を変更する
- [F12] > [F1] > [詳細設定] を変更する
- [ブラウザとアドオンのデバッガーを有効化]をチェックする
- [リモートデバッガーを有効化]をチェックする
- キーボードショートカットから起動する
- [Ctrl+Alt+Shift+I] or [Cmd+Opt+Shift+I]
userChrome.css
@charset "utf-8";
/*
* このファイルは、Mozilla のユーザインタフェース(UI) の外観をカスタマイズ
* するのに使用することができます。
* デフォルト設定の無効化宣言 !important を使用する事を忘れないでください。
*/
/*
* firefox 110.0.1用に作成
*
*/
/*
* @namespace 行は削除しないでください － 正しく機能するために必要です。
*/
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */
/* tool bar ------------------------------------------------------------------------ */
/* ボタンアイコンの余白 */
toolbarbutton {
--toolbar-start-end-padding: 6px !important;
--toolbarbutton-outer-padding: 1px !important;
--toolbarbutton-inner-padding: 2px !important;
--bookmark-block-padding: 2px !important;
}
/* nav bar ------------------------------------------------------------------------ */
#nav-bar {
max-height:26px !important;
}
#nav-bar-customization-target {
margin: 0px 0px 0px 0px !important;
}
/* [≡] のメニューボタンを非表示*/
#PanelUI-menu-button {
visibility: collapse !important;
}
/* スターボタン非表示 */
#star-button-box {
visibility: collapse !important;
}
/* 区切りの空白 */
#urlbar-search-splitter {
min-width: 7px !important;
}
/* urlバー 右側のボタン */
.urlbar-page-action, #urlbar-go-button, .search-go-button {
width: calc(var(--urlbar-min-height) - 2px - 9 * var(--urlbar-container-padding)) !important;
height: calc(var(--urlbar-min-height) - 2px - 3 * var(--urlbar-container-padding)) !important;
}
/* 無理やり位置合わせ */
.urlbar-icon {
margin-left: -3px !important;
}
/* urlバー 左側のボタン */
#tracking-protection-icon-container{
--urlbar-icon-padding: 4px !important;
}
.identity-box-button{
--urlbar-icon-padding: 3px !important;
}
/* menu バー -----------------------------------------------------------*/
#toolbar-menubar {
height:25px !important;
}
#main-menubar > menu {
padding-top: 3px !important;
}
/* tab バー ---------------------------------------------------------------------------- */
#TabsToolbar {
--tab-min-height: 25px !important;
--inline-tab-padding: 4px !important;
--tab-block-margin: 3px !important;
font-family : "Yu Gothic UI";
}
/* 両側のtabボタン 配置、余白 */
.tab-content{
--inline-tab-padding: 4px !important;
}
/* tabラベル文字列の開始位置 */
.tab-label-container {
margin-left: -3px !important;
}
/* popup menu -----------------------------------------------------------*/
/* 項目の行間、余白 */
menupopup > menuitem, menupopup > menu {
padding-block: 0.3em !important;
padding-inline-start: 0.9em !important;
}
