userChrome.css・userContent.cssスレ Part12
■ このスレッドは過去ログ倉庫に格納されています
!extend:checked:vvvvv:1000:512
次スレを立てる方は↑を二行重ねて書いてください
●※前スレ
userChrome.css・userContent.cssスレ Part11
https://egg.5ch.net/test/read.cgi/software/1584753386/
●拡張機能
Stylish
https://addons.mozilla.org/ja/firefox/addon/stylish/
Stylus
https://addons.mozilla.org/ja/firefox/addon/styl-us/
User Style Manager (レガシーアドオン・要Classic Add-ons Archive)
https://addons.mozilla.org/ja/firefox/addon/user-style-manager/
●スクリプト
userChromeJS/UserCSSLoader at master ・ Griever/userChromeJS
https://github.com/Griever/userChromeJS/tree/master/UserCSSLoader
UserCSSManager (要userChromeES)
https://greasyfork.org/scripts/35880
●CSS（ユーザースタイルを記入するべきファイル）
userChrome.css（UI） / userContent.css（Web Site）
●関連サイト
Userstyles.org
https://userstyles.org/
CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS
とほほのスタイルシート入門
http://www.tohoho-web.com/css/
VIPQ2_EXTDAT: checked:vvvvv:1000:512:: EXT was configured /* Multi-Row Bookmarks Toolbar Firefox */
#PersonalToolbar {
max-height: none !important;
}
#PlacesToolbar > hbox {
display: block;
width: 100vw;
}
#PlacesToolbarItems {
display: flex;
flex-wrap: wrap;
}
Firefoxを107にアップしたところ、ブックマークツールバーを多段に表示するCSS↑が機能せず
ページ全体を覆うようになってしまいました。
修正方法分かる方おられましたら宜しくお願いします。 質問スレから誘導されてきました
今日起動したらサイドバーの幅制限解除が無効になってました
107で何か変更ありましたか？
/* サイドバーの幅の制限を無くす */
#sidebar-box {
overflow-x: hidden !important;
}
#sidebar,
#sidebar-header {
min-width: 0px !important;
max-width: none !important;
overflow-x: hidden !important;
} >>172
/* サイドバーの幅の制限を無くす */
#sidebar-box {
min-width: 5px !important;
overflow-x: hidden !important;
}
#sidebar {
max-width: none !important;
overflow-x: hidden !important;
} >>172
よくわからんけどこうかな
#sidebar-box {
min-width: 0px !important;
max-width: none !important;
overflow-x: hidden !important;
} >>172
108bのブラウザツールボックスでちょっと覗いて見た感じだと
min-widthとmax-widthの記述部分を#sidebar-boxの方に持ってけば機能するかも ありがとうございます
#sidebar-box の方に全部持っていったら直りました 今回の更新でサイドバー自動開閉効かなくなったんですが原因わかりますか？ /* サイドバー自動開閉 */
#sidebar-box{
position:relative !important;
overflow-x:hidden !important;
margin-left:-5px !important;
right:5px !important;
min-width:5px !important;
max-width:5px !important;
box-shadow:0 0 2px 0 rgba(0,0,0,.35);
transition:all .3s ease 0s !important;
opacity:0 !important;
}
#sidebar-box:hover{
margin-left:-300px !important;
right:300px !important;
min-width:300px !important;
max-width:300px !important;
box-shadow:0 0 5px 0 rgba(0,0,0,.35);
opacity:1 !important;
}
#sidebar-box>#sidebar {
opacity: 0 !important;
}
#sidebar-box:hover>#sidebar {
opacity: 1 !important;
}
#sidebar{
opacity:0 !important;
}
#sidebar:hover{
opacity:1 !important;
} /* サイドバーを自動開閉するようにする （107対応）*/
:root {
--thin-tab-width: 20px;
--wide-tab-width: 220px;
}
#sidebar-box {
position: relative !important;
overflow-x: hidden !important;
min-width: var(--thin-tab-width) !important;
max-width: var(--thin-tab-width) !important;
box-shadow: 0 0 2px 0 rgba(0,0,0,.35);
z-index: 1 !important;
transition: all .1s ease;
}
#sidebar-box:hover {
min-width: var(--wide-tab-width) !important;
max-width: var(--wide-tab-width) !important;
box-shadow: 0 0 5px 0 rgba(0,0,0,.35);
margin-right: calc((var(--wide-tab-width) - var(--thin-tab-width)) * -1) !important;
}
#sidebar-box>#sidebar {
opacity: 0 !important;
}
#sidebar-box:hover>#sidebar {
opacity: 1 !important;
}
#sidebar-splitter {
}
/* サイドバーのヘッダーを非表示にする */
#sidebar-header {
display: none !important;
} >>178
#sidebar-boxと#sidebar-box:hover内にそれぞれあるrightを消せばいけるはず 解決しましたありがとうございます！
これがあるからfirefox使い続けてるから本当に良かった・・・ >>179
自分も自動開閉使えなくなって困ってたけどこれで出来るようになりましたありがう >>179
>>178
のでも良いんだけどカスタマイズしやすい方が良いかなと
:root {
--thin-tab-width: 20px;
--wide-tab-width: 220px;
ここで幅を好みに変えてね
--thin-tab-width: 20px;
カーソルを合わせる左側の所の幅（20で太いと思ったら15とか数字を小さくする）
--wide-tab-width: 220px;
サイドバーの幅（取り敢えずタブと同じぐらいにしてあるので幅は好みに） /* 検索バーを上に移動 */
.browserContainer > findbar {
-moz-box-ordinal-group: 0;
position: fixed !important;
right: 1em;
border: 1px solid threedshadow !important;
}
今回のバージョンからページ内検索バーが表示されなくなってしまったんですが
どなたか分かる方ご教授願います >>184
position: fixed を消す >>185
動作するようになりました。ありがとうございます！ >>186
right: 1em; も消していい
border-top: none !important; を追加すれば検索バー上部の枠線がなくなってすっきりする 好みで
transition: none !important;
margin-left: 15px !important; >>187
>>188
重ね重ねありがとうございます！ border: 1px solid threedshadow !important; は無くていいはず margin-left: 15pxはいらない勘違い >>185 >>187
↓の2行、もしかして今回のバージョン前でも無くてよかったの？
position: fixed !important;
right: 1em; サイドバー自動開閉はAutohideSidebar2.uc.jsだと感知幅の部分が邪魔にならない ページ内検索バーの話が出たついでに・・・
/* ページ内検索バーの閉じるボタンを左に移動 */
.findbar-closebutton { -moz-box-ordinal-group: 0; }
/* ページ内検索バーのテキストボックスの横幅を変更 */
.findbar-textbox { width: 20em !important; } 検索バーをChrome風にする
豆腐屋が更新してた ブラウザーツールボックス開くまでは行けたけど肝心の消したい場所をどうやって見つけるんですか？
toolbarだけでも膨大過ぎる 進むの隣のリロードボタンとアドレスバーのリーダービューリロードお気に入りボタンを消したいんです これでどうですか
#reload-button, #star-button-box, #reader-mode-button {
display: none !important;
} >>200
左上の矢印ボタンをクリックしてからブラウザーの調べたい部分をクリック
https://i.imgur.com/aMLVX6s.png >>203
>>204
機能しましたし使い方も理解できました
ありがとうございました タブの右横にある｢+｣(新しいタブを開きます)ボタンの背景色を変えたいです >>207
#tabs-newtab-button { background-color: yellow !important; } cssのvarが効かないのですが何が原因でしょうか？
firefoxは107です >>211
定義しました上にあるサイドバーのcssも試してみたのですがvarの部分を書き変えなければ動きませんでした
プロファイルの問題でしょうか？ >>4
自分もこの現象なったからいまだに99以前のバージョン使ってるわ 107で多段ブックマークツールバーおかしくなったけど
対応してもらえたっぽいかな
ありがとうございます >>215
それらしいワード英語でググったら海外ニキの解説動画やcssファイル置いてあって
最新版でも綺麗にタブをロケバーの下に置くことできた どうにもお手上げなので分かる人いたら教えてください。
タブを多く表示させるためにタブの幅の最小値を
/* タブ幅の設定 最小値 デフォルト 76px */
.tabbrowser-tab[fadein]:not([pinned]) {
min-width: 25px !important;
flex-grow: 1;
}
という感じにしてるんですが、ver99.0.1のときは
https://imgur.com/a/13CBHiJ
の上のタブのように閉じるボタンが表示されていたのに
ver107.0に上げたところ下のタブのようにfaviconが優先的に
表示されるようになってしまいました。
もちろんタブを5、6個閉じればxボタンは出現します。
タブの左の境界を優先するか右の境界を優先するかの違いっぽい
ですけどxボタンを表示させるために右を優先したいときはどうすればいいんでしょうか？ >>218
ありがとう
ホイールクリックは知らなかった
1個1個コンテキストメニューから消してた
この質問と同じかな
https://support.mozilla.org/mk/questions/1380017
タブ幅の最小値を少し増やすかキーボードでctrl+w、ctrl+F4ってのもあるみたいだけど・・
とりあえずホイールクリックで我慢します 解決策ではないけどどちらかを追加してみるとか
/* アクティブなタブの幅を広く */
.tabbrowser-tab[visuallyselected="true"]:not([pinned]) {
min-width: 58px !important;
max-width: 225px !important;
}
/* アクティブなタブをホバー時に幅を広げる */
.tabbrowser-tab[visuallyselected="true"]:not([pinned]):hover {
min-width: 100px !important;
max-width: 100px !important;
} ごめん
アクティブなタブをホバー時に幅を広げる は使えないな >>220
なるほどと思ったけど、これだとxボタンを連続クリックしてタブを複数消せないんですよね
1個消すごとにタブ幅が変わってしまってxボタンの位置もズレるので 優先とは違うけどカレントタブに×を表示するだけなら
about:configでbrowser.tabs.tabClipWidthをタブ幅より少なくする
いっそ0とか >>217
自分もアクティブなタブにマウスをホバーさせるとxが表示される…ってのができなくなって困ってた
ちょっとしたことなんだけど、使い勝手は随分悪くなるよね
初めは閉じるボタンを一番左にもってくることで解決してた
でも代わりにfaviconが消えてしまうのが嫌でやっぱり元に戻した
あれこれ悩んで色々調べてた所、TabMixPlusが復活してることを知った
これで全てが解決しました >>223
タブが狭くなったときは逆に非アクティブタブは×が出なくなって欲しいので
browser.tabs.tabClipWidthはちょっと違うかな
217はホイールクリックで対処で慣れました 自分はマウスオーバーで閉じるボタンが出るようにしてるわ おくすり出しておきますね
#tabbrowser-tabs[closebuttons] .tabbrowser-tab:hover .tab-close-button:not([selected]) {
display: revert !important;
} 本スレで公開されてたものと思いますが、ver107では正常ですが108ではバーの位置がトップになります。
下3行目transform: translateY(0px);を50pxにするとうまくいくのですが、フォルダ＞フォルダを開くとズレます。
スキルある方、よろしくお願いします。
/*** ブックマークツールバーをマウスオーバーで自動開閉 ***/
#PersonalToolbar:not([customizing="true"]) {
transform: translateY(-500px);
transition: transform 0s ease 300ms !important;
position: absolute !important; z-index: 1;
display: block;
width: 100%;
}
#navigator-toolbox:hover > #PersonalToolbar:not([customizing="true"]) {
transform: translateY(0px);
transition: transform 0s !important;
} >>229
mozillazine.jpに同じ件で質問出てるみたいだけど、これ君？ >>230
はい、すみません私です。
5ちゃんねるで書き込みできない現象が発生しているようなのでレスないと思いmozillazine.jpにも投稿しました。 >>231
https://forums.mozillazine.jp/viewtopic.php?f=2&t=20811
これはひどい
「？」だの「新規プロファイルをつくる意味なんてありませんよ」だの
せっかく説明してくれてるのに意思疎通ができてない
失礼極まりないやつだな AutohideSidebar2.uc.jsを使わせてもらってるのですが
ミスクリックでサイドバーの幅が微妙に変わってもやもやしてます
デフォルトfirefoxにこれを入れた状態のサイドバー幅にするにはどうしたらいいですか？ 今日バージョンアップして>>229と同じことで困っていて見に来たんだけど
こりゃ聞ける雰囲気じゃないな マルチポストするなら あっちでも質問したことを書いておけよ
マジで迷惑だわ誰か助けてくれん？ Firefox_ToolBarButtonsバグってます ブックマークツールバーをマウスオーバーで自動開閉したい。
次で動作するけど、サイトの表示部がズレない方法ないですか？
/*#PersonalToolbar:not(:hover) {
visibility: collapse !important;
background-color:transparent !important;
-moz-transition-duration: .5s !important;
-moztan-rsition-timing-function: ease-in-out !important;
}
#navigator-toolbox:hover > #PersonalToolbar {
visibility: visible !important;
-moz-transition: .5s ease-in-out;
} 108になってタブバーが下になってサイト表示と重なって困ったことになっていたがなんとか直せた
いらなくなったのに消していない記述が悪さをしていたようだった
見よう見まねなので記述を足すばかりでやってきたが今もいらないのが残ってるんだろな URLバーの右にある星を以下で非表示にしてるんですけど、
#star-button-box {
display: none !important;
}
108.0になってから、メニューの「ブックマーク」→「現在のタブをブックマーク」から
ブックマークしようとすると「ブックマークを追加」のポップアップが一瞬で消えてしまうようになりました。
星を非表示のまま、ポップアップを表示したままにできませんか。 >>241
#star-button-box {
position: relative !important;
top: var(--urlbar-height) !important;
} >>241
サンクス、確かに目につかなくはなったけど
ポップアップを表示したままにするのは何かそういうオプションが無いと無理か。
ポップアップにマウスもっていかないと数秒で消えちゃう。 >>243
visibility: collapse !important;
ではどう？ >>244
動きとしては>>241と同じですね。
ポップアップは一瞬で消えちゃいます。 >>243
それの完全な対策はCSSでは恐らく無理だけど、メニューからブックマークしているのならこんなのはどうかな。
/*
URLバー右端のブックマークボタンをウィンドウ右上隅に配置することで隠す。
108 以降は display プロパティ や visibility プロパティで隠すと、
ブックマークしたときのブックマーク編集パネルも表示されなくなってしまう。
右上隅に置くのはブックマーク編集パネルを開いたとき、キー操作やマウ
スオーバーしないままでいると一定時間でパネルが閉じてしまう問題への弥縫策
を兼ねる。この位置はメニューの「ブックマーク」→「現在のタブをブックマー
ク...」をクリックした直後のマウスポインターの下になるので、この経路で表示
させたときは自動的に閉じるのを防げる。
*/
#star-button-box {
position: fixed !important;
top: calc(0px - var(--urlbar-height)) !important;
right: 0px !important;
}
#editBookmarkPanel {
margin-block-start: 0px !important;
} 108にて、SidebarModokiのDLのCSSが効かなくなったようです >>247
ありがとうございます。参考にして以下のようにしてみました。
かなり愚直ですけど…
#star-button-box { /* URLバーの☆は「ブックマーク」下近辺に隠す */
position: fixed !important;
top: 62px !important;
left: 209px !important;
}
#editBookmarkPanel { /* メニューの「ブックマーク」直下に表示 */
margin-top: -73px !important;
margin-right: -286px !important;
}
これならメニューから「現在のタブをブックマーク」で、そのマウス位置にポップアップが表示されるので、オンマウスで数秒経っても消えないですね。 このような感じにしました。
https://i.imgur.com/flCMEvM.png
おそらく107まではこんな感じだったと思うのです。 ブックマークツールバーをマウスオーバーで自動表示する方法教えて! pixivトップの画像一覧で、ユーザ名にマウスオーバーするとポップアップでユーザ詳細が出てくるんですけど
邪魔なのでポップアップが出ないようにしたいのですが、要素を調査しようにも消えてしまい捕まえられません
どうやって調べればいいでしょうか >>253
1. デバッガーを開く
Ctrl+Shift+C, Ctrl+Shift+Z とか
2. デバッガーを開いた状態で対象にマウスオーバーしてポップアップを出させる
デバッガー以外の場所をクリックしてフォーカスを移してしまわないよう注意
3. F8 キーで「停止」
あとはインスペクターを開いて煮るなり焼くなり >>254
すみません、F8で停止しないようです
１．Ctrl+Shift+Cでデバッガを開く
２．マウスオーバーでポップアップさせる
３．F8押しても停止せずマウスオーバーが離れるとポップアップが消える 停止はできませんでしたがセレクタは確認できたので、それでポップアップを非表示にできました
ありがとうございました >>255
Ctrl+Shift+Cの後に「デバッガー」タブをクリックしないとF8で止まらない まあカンマだと一連の動作だとわかりにくいよな
Ctrl+Shift+Cでインスペクター開いてからCtrl+Shift+Zでデバッガーを開く Aris-12さんのCustomCSSforFxを適用してる環境で
alice0775さんのuserChrome.jsのスクリプトを動くようにしたいんだけど
双方のuserChrome.cssとuserChrome.jsって
共存可能なんでしょうか
そのまま内容をマージしちゃっても大丈夫ですか >>258
ありがとうございます
F 8で停止してインスペクターでセレクター確認できました ‹‹239
ToolbarAutoHide.uc.jsで解決。
ただし多段表示は問題あり。 >>257-258
補足ありがとう
まさしく「一連の動作」のつもりだったんだけど分かり難かったですね >>259
そもそもファイル被ってないからマージするものがないでしょ >>251
#PersonalToolbar{
--uc-bm-height: 20px; /* Might need to adjust if the toolbar has other buttons */
--uc-bm-padding: 4px; /* Vertical padding to be applied to bookmarks */
--uc-autohide-toolbar-delay: 600ms; /* The toolbar is hidden after 0.6s */
/* 0deg = "show" ; 90deg = "hide" ; Set the following to control when bookmarks are shown */
--uc-autohide-toolbar-focus-rotation: 0deg; /* urlbar is focused */
--uc-autohide-toolbar-hover-rotation: 0deg; /* cursor is over the toolbar area */
}
:root[uidensity="compact"] #PersonalToolbar{ --uc-bm-padding: 1px }
:root[uidensity="touch"] #PersonalToolbar{ --uc-bm-padding: 7px }
#PersonalToolbar:not([customizing]){
position: relative;
margin-bottom: calc(0px - var(--uc-bm-height) - 2 * var(--uc-bm-padding));
transform: rotateX(90deg);
transform-origin: top;
transition: transform 60ms linear var(--uc-autohide-toolbar-delay) !important;
z-index: 1;
}
#PlacesToolbarItems > .bookmark-item{ padding-block: var(--uc-bm-padding) !important; }
#nav-bar:focus-within + #PersonalToolbar{
transition-delay: 100ms !important;
transform: rotateX(var(--uc-autohide-toolbar-focus-rotation,0));
}
#navigator-toolbox:hover > #PersonalToolbar{
transition-delay: 100ms !important;
transform: rotateX(var(--uc-autohide-toolbar-hover-rotation,0));
}
#navigator-toolbox:hover > #nav-bar:focus-within + #PersonalToolbar {
transform: rotateX(0);
} >>264
レス、ありがとう。Ver109でデストしました。
1行の空行が表示され、そこにマウスオーバーでバーが表示されてます。 var(--urlbar-height)のようなCSS変数？を駆使して、画像の赤ポイントの座標を取得したいんですが、どのようなCSS変数を使えばいいでしょうか？
https://i.imgur.com/kH9w4Au.png
X座標＝「ブックマーク」の左端
Y座標＝メニューバーの高さ＋タブバーの高さ＋URLバーの高さ
を計算して使いたいです >>268
それはユーザ宣言するCSS変数だと思うのですが、
>>247にある --urlbar-height も実はその人が変数宣言したもので、Firefoxにあらかじめ組み込まれているものではない、ということでしょうか
ということは「メニューバーの高さ」といった値もCSSでは取れないんですかね 後者はともかく前者は変数で定義されてるわけがないから
どのみちJavascript側でgetBoundingClientRectするしかないのでは？ ■ このスレッドは過去ログ倉庫に格納されています
