# わたしの userChrome.css いろいろあって、ChromeからFirefoxに移行した。概ね問題ないがいくつかChromeっぽくしたいところがあったのでuserChrome.cssをいじったら大体満足できた。ついでにその他の部分もいじった。 Chromeを完全再現したいなら [MaterialFox](https://github.com/muckSponge/MaterialFox) かその後継を使うのがいいと思うが、私には合わなかったので詳しく調べてはいない。 ## 環境 - Windows 11 - Firefox 122.0.1 ## userChrome.css のいじり方 userChrome.cssの有効化、カスタマイズのためのインスペクターの出し方については以下を参照 https://www.reddit.com/r/FirefoxCSS/comments/73dvty ## 非アクティブ時の背景色をChromeっぽくする ![image](https://hackmd.io/_uploads/rkXwfK_ja.png) *beforeとafterの合成 下はChrome* ```css :root { --toolbox-non-lwt-bgcolor: rgb(221, 227, 233) !important; } ``` 非アクティブ時に薄くなるのが見づらかったのでChromeっぽい色にした ## ブックマークツールバーの余白を大きくする ![image](https://hackmd.io/_uploads/HyhPeF_o6.png) *beforeとafter* ```css :root { #personal-bookmarks { margin-bottom: 2px; } #PlacesToolbarItems { gap: 2px; } toolbarbutton.bookmark-item:not(.subviewbutton) { padding: 6px !important; } } ``` ## アクティブタブのシャドウを若干マイルドにする ![image](https://hackmd.io/_uploads/rJ3NT_uia.png) *beforeとafter* ```css :root { #tabbrowser-tabs:not([noshadowfortests]) .tab-background:is([selected], [multiselected]) { box-shadow: 0 0 4px rgba(0, 0, 0, 0.25) !important; } } ``` デフォルトは`rgba(0, 0, 0, 0.4)` ## コンテキストメニューの項目非表示 ![image](https://hackmd.io/_uploads/BJwM7t_op.png) *デフォルト* ![image](https://hackmd.io/_uploads/rkl77KOia.png) *テキスト選択時* ![image](https://hackmd.io/_uploads/BJRWmF_sT.png) *画像選択時* ここもいじれるようなので使わないやつを消した。Chromeだと選択した文字列をググろうとして印刷しまくってたので消せて嬉しい ```css :root { /* 画像の URL をメールで送信... */ /* 動画の URL をメールで送信... */ /* 音声の URL をメールで送信... */ #context-sendimage, #context-sendvideo, #context-sendaudio, /* 選択した部分を印刷... */ #context-print-selection, /* スクリーンショットを撮影 */ #context-sep-screenshots, #context-take-screenshot, /* 画像をデスクトップの背景に設定... */ #context-sep-setbackground, #context-setDesktopBackground { display: none; } } ``` <style> img + br + em { display: block; text-align: center; font-style: unset; background: #0000000a; border-radius: 0 0 0.2em 0.2em; padding: 0.2em; } </style>