すたすた式
Firefox Windows10
以前の設定が使えなくなっていたので再設定しました。
また今回、セレクターの見つけ方を忘れたため作業時間がかかりました。
次回以降のためにセレクターの見つけ方もメモしておきます。
下記をuserChrome.cssファイルに書くと、左下に表示されるURLなどが右下に移動します。（userChrome.cssファイルの作り方はこちらを参考にしてください）
#statuspanel:not([hidden]) { left: initial !important; right: 0; }
上記を少しカスタマイズしました。
文字を右寄りにするtext-align: right; !important;
text-align: right; !important;
最大幅を指定max-width: 30% !important;
max-width: 30% !important;
スクロールバーに文字がかぶらないように間隔をあけるmargin-right: 1em;
margin-right: 1em;
/* 左下に出るURLなどのポップアップを右下に移動、最大幅を指定 */ #statuspanel:not([hidden]) { left: initial !important; right: 0; text-align: right; !important; max-width: 30% !important; margin-right: 1em; }
また、枠線を消したり、背景色を変更しました。
#statuspanel-label { border-style: none !important; background-color: rgba(255, 255, 255, .5) !important; }
右上のハンバーガーメニュー「☰」をクリック
「その他ツール」をクリック
「ブラウザーツールボックス」をクリック
新しいウインドウが開いて、リモートデバッグの接続要求のダイアログがでるので「OK」をクリック
「親プロセスのブラウザツールボックス」の「スタイルエディター」から見つけるのがやや面倒なので、まず「インスペクター」をクリック。
すぐ下の「HTMLを検索」の欄に#statuspanelと入力してEnter
#statuspanel
右のペインのbrowser.css:1037をクリック。（数字は違う場合があるかもしれません）
browser.css:1037
該当のCSSファイル（browser.css）の1037行目の位置で「スタイルエディター」に移動します。
変更したいセレクターは1000行目にありました。
#statuspanel:not([hidden]) { display: block; max-width: calc(100% - 5px); pointer-events: none; /* Take a bit more space vertically for the mouse tracker to hit us more * easily */ padding-top: 2em; position: absolute; bottom: 0; left: 0; }
userChrome.css→browser.cssの順番で読み込まれます。（browser.cssの値をuserChrome.cssが上書きするものと勘違いしていました。）
userChrome.css
browser.css
セレクターが重複しているときはuserChrome.cssの値に!importantをつけないと上手く動きません。
!important
補足：#statuspanel-labelは異なるbrowser.cssの407行目にありました。
#statuspanel-label
#statuspanel-label { margin: 0; padding: 2px 4px; background-color: -moz-dialog; border: 1px none ThreeDLightShadow; border-top-style: solid; color: -moz-dialogText; text-shadow: none; }
URLなどを「消す」場合はこちらにありました。
How to disable url loading notification in bottom left | Firefox-stipefoarum | Mozilla Support
サイト内検索に使ってください 🐤
© 2015 すたすた式
Enjoy!👍
QooQ
コメントなし:
コメントを投稿