userChrome.css firefox 110

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;
}

CSS

リンク

• Firefox userChrome.cssのコードまとめ | バグ取りの日々