userChrome.css・userContent.cssスレ Part12

2022/04/21(木) 23:24:46.59

!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

2022/12/20(火) 19:39:37.57

ブックマークツールバーをマウスオーバーで自動表示する方法教えて!

2022/12/20(火) 23:30:37.49

CSSだけでって無理がある
スクリプトでやれ

2022/12/21(水) 00:11:07.46

pixivトップの画像一覧で、ユーザ名にマウスオーバーするとポップアップでユーザ詳細が出てくるんですけど
邪魔なのでポップアップが出ないようにしたいのですが、要素を調査しようにも消えてしまい捕まえられません
どうやって調べればいいでしょうか

2022/12/21(水) 02:33:41.88

>>253
1. デバッガーを開く
Ctrl+Shift+C, Ctrl+Shift+Z とか

2. デバッガーを開いた状態で対象にマウスオーバーしてポップアップを出させる
デバッガー以外の場所をクリックしてフォーカスを移してしまわないよう注意

3. F8 キーで「停止」

あとはインスペクターを開いて煮るなり焼くなり

2022/12/21(水) 08:52:42.05

>>254
すみません、F8で停止しないようです

１．Ctrl+Shift+Cでデバッガを開く
２．マウスオーバーでポップアップさせる
３．F8押しても停止せずマウスオーバーが離れるとポップアップが消える

2022/12/21(水) 09:42:45.30

停止はできませんでしたがセレクタは確認できたので、それでポップアップを非表示にできました
ありがとうございました

2022/12/21(水) 09:54:13.57

>>255
Ctrl+Shift+Cの後に「デバッガー」タブをクリックしないとF8で止まらない

2022/12/21(水) 11:12:57.51

まあカンマだと一連の動作だとわかりにくいよな
Ctrl+Shift+Cでインスペクター開いてからCtrl+Shift+Zでデバッガーを開く

2022/12/21(水) 11:19:33.92

Aris-12さんのCustomCSSforFxを適用してる環境で
alice0775さんのuserChrome.jsのスクリプトを動くようにしたいんだけど
双方のuserChrome.cssとuserChrome.jsって
共存可能なんでしょうか
そのまま内容をマージしちゃっても大丈夫ですか

2022/12/21(水) 12:17:04.00

>>258
ありがとうございます
F 8で停止してインスペクターでセレクター確認できました

2022/12/21(水) 15:48:37.75

‹‹239
ToolbarAutoHide.uc.jsで解決。
ただし多段表示は問題あり。

2022/12/21(水) 19:00:19.22

>>257-258
補足ありがとう
まさしく「一連の動作」のつもりだったんだけど分かり難かったですね

2022/12/21(水) 19:57:10.73

>>259
そもそもファイル被ってないからマージするものがないでしょ

2022/12/22(木) 00:28:38.62

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

2022/12/22(木) 07:53:11.94

>>264
レス、ありがとう。Ver109でデストしました。
1行の空行が表示され、そこにマウスオーバーでバーが表示されてます。

2022/12/22(木) 08:21:29.88

ごめん、コピペミスでした。
正常動作しました。

2022/12/23(金) 23:49:59.93

var(--urlbar-height)のようなCSS変数？を駆使して、画像の赤ポイントの座標を取得したいんですが、どのようなCSS変数を使えばいいでしょうか？

https://i.imgur.com/kH9w4Au.png
X座標＝「ブックマーク」の左端
Y座標＝メニューバーの高さ＋タブバーの高さ＋URLバーの高さ

を計算して使いたいです

2022/12/24(土) 16:12:56.92

>>267
CSS カスタムプロパティ (変数) の使用
https://developer.mozilla.org/ja/docs/Web/CSS/Using_CSS_custom_properties

2022/12/24(土) 17:33:33.90

>>268
それはユーザ宣言するCSS変数だと思うのですが、
>>247にある --urlbar-height も実はその人が変数宣言したもので、Firefoxにあらかじめ組み込まれているものではない、ということでしょうか
ということは「メニューバーの高さ」といった値もCSSでは取れないんですかね

2022/12/24(土) 18:14:08.19

後者はともかく前者は変数で定義されてるわけがないから
どのみちJavascript側でgetBoundingClientRectするしかないのでは？

2022/12/24(土) 18:25:04.08

>>269
最終的にやりたいことはスクリプトでないと無理
--urlbar-height プロパティについては Firefox が（UIのCSSで参照するため）設定している
https://searchfox.org/mozilla-release/source/browser/components/urlbar/UrlbarInput.sys.mjs#2062

2022/12/24(土) 20:13:13.54

はー、--urlbar-height あたりのプロパティは特別扱いで組み込まれてるんですね…
ありがとうございました

2022/12/24(土) 21:54:06.33

特別扱いというか、Firefox のUIおCSSｓで使うために設定している
ユーザーのために設定してるわけじゃない
我々はそれを勝手に利用してるだけ

2022/12/24(土) 21:55:49.36

なんか変なtypoになった・・・
「UI の CSS で」だよ

2022/12/25(日) 12:18:08.93

108.0.1にバージョンアップしたところurl.バー内のアイコン(☆、その他アドオンアイコン)の表示が大きくなってしまいました
下記のcss.の記述のどこを変更したらよいのか教えて下さると助かります

/* ツールバーアイコンコンパクト化 */
#identity-icon,
.searchbar-search-icon {
width: 14px !important;
height: 14px !important;
}
#nav-bar .toolbarbutton-1 > .toolbarbutton-icon,
#nav-bar .toolbarbutton-1 .toolbarbutton-badge-stack {
padding: 2px !important;
margin: 0px !important;
width: 20px !important;
height: 20px !important;
}
[uidensity="compact"]:root .urlbar-icon {
width: 20px !important;
height: 22px !important;
padding: 2px !important;
}
#star-button-box[animationsenabled] > #star-button[starred][animate] + #star-button-animatable-box {
top: calc(50% - 17px) !important;
margin-inline-start: -6.5px !important;
}

続く

2022/12/25(日) 12:23:32.83

なーにが「続く」だよ

2022/12/25(日) 12:36:37.19

275から続き

/* アイコン小さく */
#nav-bar .toolbarbutton-1 > .toolbarbutton-icon,
#nav-bar .toolbarbutton-1 .toolbarbutton-badge-stack,
#toolbar-menubar .toolbarbutton-1 > .toolbarbutton-icon,
#toolbar-menubar .toolbarbutton-badge-stack,
#TabsToolbar .toolbarbutton-1 > .toolbarbutton-icon,
#TabsToolbar .toolbarbutton-badge-stack {
padding: 2px !important;
margin: 0px !important;
width: 20px !important;
height: 20px !important;
}
/* コンパクト化 */
.urlbar-go-button,
.search-go-button {
max-width: 14px !important;
}
#nav-bar,
toolbar .toolbarbutton-1 {
padding: 0px !important;
}

2022/12/25(日) 13:29:38.51

ブックマークのスターボタンで見てみた
https://i.imgur.com/bEIm9GE.jpg

**275＆277** (ﾜｯﾁｮｲ 8573-dxp0) · 2022/12/26(月) 00:02:44.67

>>278
続く、の件ではイラっとさせて申し訳ない。専ブラ慣れてなくてエラーですぐに書き込めなかったの

275に書いた症状はこんな感じです
1　107.0.1まで　https://imgur.com/a/gTXgDje
2　108.0.1 https://imgur.com/a/ln7SFW5

何か所か表示に変化が出た中でurlバー内のアイコンがバカでかくなるのだけは自力ではどうやっても解決出来ません

278でヒントを頂いたのですが残念ながらお手上げです
275&277の記述も多分4~5年前に親切な方がcssスレに書き込んで下さったものの流用です

よろしくお願いします

2022/12/26(月) 00:27:30.78

>>279
そうやっていつもCSSでいじってるからわからないのだろうけど
それは「バカでかく」なってるんじゃなくて標準のサイズなの
まずそれを理解しよう

そして >>278 でインスペクタの画面貼ってやったよね？
赤線で囲ってやったよね？
それでわからないんだったらCSSでいじるのなんてやめちまえ

2022/12/26(月) 17:14:26.78

https://i.imgur.com/qxorXHC.png
https://i.imgur.com/FQlzmeq.png
こーやって貼ってくんないかな

2022/12/26(月) 21:03:14.13

>>281
ゴミ画像を何度も貼るなよ

同じ様に貼ったよね？
i.imgur.com URL で画像の直接リンクだし
見てほしいところを赤で囲ってる
まさか、png じゃなきゃ嫌だとか、□じゃなく◯で囲めとか
そんなアホなこと言う気じゃないだろうな？

2022/12/26(月) 21:21:10.91

直リンの意味もわからんキッズがネットやるのか

2022/12/26(月) 21:54:40.51

まあ、実際には画像ファイルの形でアップされているわけじゃないから
直リンというのは正確ではないが
画像ファイルへのリンクの形式のURLにしていてそのまま表示できる
という意味だと普通は解釈できると思うけど・・・

2022/12/28(水) 19:38:56.54

キッズなんているわけないじゃん
スマホも専ブラも使えないPCジジイならではって感じ
老害化してることにも気づけず古参ぶって上から目線なのもまたわかりやすい

2022/12/29(木) 05:21:25.98

老害ならではの妄想

2022/12/29(木) 09:21:27.90

言いたいことがあるなら、直接アンカー付けて問題点を指摘すればいい

直リン出来てない人A： >>275,277,279
直リン出来ている人B： >>280,282,284
こーやって貼ってくんないかなの人C： >>281

CのレスはAに対してのものだったが、Bの直後にアンカーなして書かれたため
BはAが書いたものと誤認して話がおかしくなってしまった
コレが真相

2022/12/29(木) 09:30:41.50

>>287
要はお前が一番悪いんだなw

2022/12/29(木) 10:43:29.25

Cが元凶
どうでもいい直リン指摘のために同じゴミ画像を貼り直すという余計なことをしたせい
しかもアンカーなしで
こちらはAに対して情報提供済み
君たちは何もしてない

2022/12/29(木) 11:12:31.30

AとCが同じ画像だとお前でもわかるんだからお前が落ち着いていればそれで済んだのに

2022/12/29(木) 11:33:07.59

>>287
おじいちゃん、教えてあげるね
>>281だとスマホや専ブラなら画像が自動的にサムネ表示されるんだよ
だからぱっと見てどんな画像が張られたかすぐにわかる
>>279だといちいち他のサイトに飛んで画像を見に行かなきゃいけないんだよ

この違いがPCしか知らなく5chも未だにブラウザで開いてるおじいちゃんには理解できなかったんだよね
てかこうやって説明しても、使ったことのないおじいちゃんにはやっぱり理解できないかな？

2022/12/29(木) 11:47:49.93

>>291
ほら、論点や登場人物がわかっていない
Bはサムネ云々など当たり前の常識としてわかっている
>>278 で先にそうやって貼っている
直リンが出来ていないのはAだ
Bはもう用済みの貼る価値のないゴミ画像をURL形式変えて貼るなって言ってるんだよ
それともなにか、>>281 でサムネ化したことによってなにか有益なレスが付いたのかな？
なにもないよね？
じゃあなんで貼った？

2022/12/29(木) 15:32:33.77

年の暮れだというのに最後にレスしたほうが勝ちのマウント合戦か

2022/12/29(木) 15:46:58.22

困ったらすぐジジイ認定
バカは分かりやすいｗ

2022/12/29(木) 18:49:21.46

じゃリアルおじさんが見守っててあげようｗ
食べ物が腐敗しやすい生暖かいくらいな視線でｗｗ

2022/12/29(木) 19:02:56.25

ﾜｯﾁｮｲ c178-fqia は
>>291 のような当たり前のことを得意げに説明して
自分が優位に立ってると思い込んでるのだろう
もしくは、あえてバカを演じて荒らしているか？

2022/12/29(木) 19:30:18.75

>>292
画像貼るならサムネ化されるように張れといってるだけ
わかったの？まだよくわからないの？うんこなの？
ぐずぐずぐだぐだ言い訳書かなくていいからさ、それだけ答えてみよう

2022/12/29(木) 21:08:23.87

>>297
だから相手を間違えているのがまだわからないのかな？
頭が悪くて理解できないないのか、頭が悪いことすら自覚できないのかどっちだね？

サムネ化されるようにURLを記載してなかったのは
(A) >>279 だ
(B) は >>278 で https://i.imgur.com/bEIm9GE.jpg とサムネ化されるURLで記載している
>>283 以降の直リン云々の話の前にだ

2022/12/29(木) 22:59:10.10

>>298
あのね、おじいちゃん
>>279に対して>>281が注文付けてるわけだ
そこにおじいちゃんが>>282で意味不明なマウントとってるわけだ
だからおじいちゃんが笑われてるんだよ？

ワシは前にちゃんとはっとるんじゃーとか必死だけど、そんなこと聞いてないんだよ？
おじいちゃん一人、糞どうでもいい事に拘って糞どうでもいい理屈をウダウダグダグダ並べてるんだよ？うんこなの？

2022/12/29(木) 23:13:34.22

どうやら 294 が言ってる通りらしい
必死におじいちゃん連呼するしかできない生き物か
そう思うとかわいく思えてきた

2023/01/17(火) 00:42:39.60

108からロケーションバーのcookie badgeが表示されなくなって地味に不便
削除されちまったのか？

まだ生きてるようならネ申よ以下手直しﾖﾛ
↓

#identity-permission-box::before {
content: "" !important;
display: block !important;
width: 6px !important;
height: 6px !important;
position: absolute !important;
margin-inline-start: -32px !important;
margin-top: -8px !important;
background: Highlight !important;
border-radius: 100px !important;
}

2023/01/18(水) 01:14:14.29

制限された？

2023/01/18(水) 12:06:25.49

てすてす

2023/01/18(水) 16:40:30.02

youtubeの適当なチャンネル→動画タブをクリックすると動画一覧が出てきます
この表示が今は4列なので5列以上で表示させたいのですがCSSでできませんか？
ブラウザを拡大しても余白が増えるだけで4列のまま変わりませんでした
動画のサムネを小さくすると列が増えるかもと思い下のようにやってみたところ小さくはなりましたが列は増えませんでした
.style-scope ytd-rich-item-renderer {
width: 180px !important;
}

なにか5列以上で表示させる方法があれば教えてください

2023/01/18(水) 18:44:57.19

>>304
サムネ小さくていいなら
ytd-two-column-browse-results-renderer.grid:not(.grid-disabled) {
max-width: 100% !important;
width: 100% !important;
}
ytd-rich-grid-row {
width: 50% !important;
}

2023/01/18(水) 20:23:52.24

>>304
ytd-rich-grid-renderer {
--ytd-rich-grid-items-per-row: 8 !important;
}

2023/01/18(水) 20:25:25.62

訂正
ytd-rich-grid-renderer {
--ytd-rich-grid-items-per-row: 8 !important;
}
ytd-rich-grid-renderer > #contents > ytd-rich-grid-row,
ytd-rich-grid-renderer > #contents > ytd-rich-grid-row > #contents {
display: contents;
}

2023/01/18(水) 21:12:46.78

>>305-307
ありがとうございます
どちらも5列以上にできました

**名無しさん＠お腹いっぱい。** (JPW 0H4a-gtfB) · 2023/01/19(木) 02:37:30.94

てすと

2023/01/19(木) 18:05:20.21

test

**301** (ﾜｯﾁｮｲ b558-w88e) · 2023/01/19(木) 23:59:57.14

なんでスルーするん？
(´・ω・｀)

2023/01/22(日) 05:15:44.11

ただ今制限を設けております。

2023/01/22(日) 12:35:14.09

てすと

2023/01/24(火) 07:43:31.67

余所でやってください。

2023/01/24(火) 12:43:32.74

ブラウザツールボックスで要素選択するときに矢印がブラウザ内だけで
メニューバーやツールバーの要素が表示されないんですけど何か設定しないといけないですか？

**名無しさん＠お腹いっぱい。** (CA 0H4f-qKdf) · 2023/02/08(水) 19:34:55.86

Tampermonkey Script Summary Ver3 (for stockpiling)
https://pastebin.com/6i5JaHRg

2023/02/08(水) 21:14:59.59

>>316
何に使うものですか

2023/02/08(水) 23:03:40.03

見ちゃだめ

2023/02/10(金) 08:49:43.21

5ちゃんの書き込み欄の大きさを指定して固定することはできない？

2023/02/11(土) 11:44:11.33

いや、指定すればいいじゃん

2023/02/11(土) 12:04:15.14

な、age厨だろ

2023/02/12(日) 19:45:42.14

(-ι- ) ｸｯｸｯｸ

2023/02/16(木) 20:40:07.63

Firefox110にしたらピン留めしているタブ（3つ）の一番右のタブにだけうっすらとクローズボタンが出る
アクティブの時は出ないけど一番右のピン留めタブが非アクティブでマウスオーバーすると出るという感じ
どうすれば消えるでしょうか？

2023/02/16(木) 20:43:22.35

すみません。文字数が少ないピン留めタブを一番右に持ってきたら「+」のボタン（新規タブボタン）でした。
実際にクリックしても新規タブは開かないのでいいのですが、ピン留めタブ複数の一番右端だけこうなります。

2023/02/16(木) 21:06:32.31

>>323
どうすればそんなことになりますか？
すべてのカスタマイズをやめてみれば？
つまり新規プロファイル

2023/02/16(木) 21:36:12.06

CSS下手くそマンかよ

2023/02/16(木) 21:48:16.85

>>323
しくじったら最初に戻る
これ基本です
それをせずにあーだこーだ迷走するのはおバカさんのやることです

2023/02/17(金) 16:27:03.25

>>325
>>327
そうも思ったのですが原因が分かりました。userChrome.cssではなかったです。
CSSはこなれているのに他のバカに下手くそ呼ばわりされたので何が原因だったかはすみませんが伏せます。
325さんと327さんだけには治りましたという報告をしたく投稿させていただきました。

2023/02/17(金) 16:57:25.01

>>328
そういうの格好悪いですよ

2023/02/17(金) 18:50:17.64

>>328
自分が困ったときは他の人に助けを求めるけど
同様の状況で困っているかもしれない他の人を
助けようとは思わないということか

2023/02/17(金) 19:38:38.94

>>330
困った人が出てからでよくない

2023/02/17(金) 20:17:58.52

原因がわかった、治った
そんな中身のないのは報告でなくゴミだよ
しかも余計な事書いてるから有害でしか無い

2023/02/18(土) 10:31:50.87

ゴミ同士仲良くしろよ

2023/02/26(日) 20:02:40.70

>>328
な、sage厨だろ

2023/02/27(月) 03:31:11.79

猿マネコピペ厨の雑魚っぷりは異常

2023/03/09(木) 14:38:42.25

ブックマークツールバーのプルダウンメニューのアイテムの行間を狭めたい。88のように。スタイルの定義を教えて。

2023/03/09(木) 14:58:28.52

browser.compactmode.show = true
browser.uidensity = 1

これじゃだめなんですか

2023/03/09(木) 15:15:14.93

>>337
ありがとう。やってみる。

2023/03/09(木) 15:26:56.25

>>337
無理ですた。

あと、仕切り線を太くする方法や外枠線の付け方もスタイルの定義を教えて下さい。

2023/03/09(木) 15:33:23.95

browser.compactmode.show = true だけでもコンパクト表示は有効になる
browser.uidensity = 1 で起動時ブックマークツールバーの表示が数秒（１～３秒）表れない

ですた

2023/03/09(木) 16:47:13.30

>>336
/*** ドロップダウン/コンテキスト/ポップアップメニューの間隔を調整する ***/
menupopup:not(.in-menulist) > menuitem,
menupopup:not(.in-menulist) > menu {
padding-block: 2px !important; /* reduce to 3px, 2px, 1px or 0px as needed */
min-height: unset !important; /* v92.0 - for padding below 4px */
}
:root {
--arrowpanel-menuitem-padding: 4px 8px !important;
}

2023/03/09(木) 18:20:37.28

>>341
:1pxに変更したら、88のようにブックマークツールバーの行間が詰まりました、ありがとうございます。
padding-block: 1px !important; /* reduce to 3px, 2px, 1px or 0px as needed */

2023/03/09(木) 21:42:40.39

メニューバーのプルダウンメニューのアイテムの行間を行間を狭めたい。88のように。スタイルの定義を教えて。
自力で試したが１ミリも動かせない

2023/03/09(木) 22:39:00.41

こうやって勝手に隙間をつめておいて
あとでバージョンアップで表示が壊れて泣きついてくる
そんな未来がありありと見えます

2023/03/09(木) 22:44:28.45

基地外age厨に構うからこうなる

2023/03/23(木) 21:21:15.36

::selection {
background-color: red;
}
が反映されないサイトがあります
例えばBing検索結果のページでは反映されますが
Bingのチャットタブに移ると反映されなくなります

チャットでも反映されるようにするにはどう書けばいいですか？

2023/03/29(水) 22:57:37.56

反映されてないのはshadow-rootの部分だから
基本的にはjs案件になるのかな？

2023/03/30(木) 14:11:54.13

誘導先で忘れた頃に回答

#navigator-toolbox {
border-bottom: none !important;
}

2023/04/04(火) 21:55:49.69

Thunderbirdのメッセージペインのスクロールバーのスライダー？の色は
* {
scrollbar-color: rgb(200, 200, 200) lightgray !important;
}
で変えられましたがスライダーじゃない部分の色を変える方法をご教示ください

2023/04/04(火) 21:59:45.36

lightgray