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/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

2023/04/05(水) 00:30:50.16

スライダーじゃない部分とは？

2023/04/05(水) 07:08:52.37

>>351
スライダーの上下の部分です
スライダーが車とすれば道路部分といえばいいのでしょうか

2023/04/05(水) 09:11:52.67

？？？

2023/04/05(水) 13:25:40.10

>>349
Firefoxはスライダーと背景色しか変えられないからThunderbirdも同じなのではないかな

2023/04/06(木) 01:28:39.50

>>350 が答えのようだが、そこを変えても駄目なら駄目なんじゃないかな

**349** (ﾜﾝﾐﾝｸﾞｸ MMdf-Q6cH) · 2023/04/06(木) 07:12:48.82

ありがとうございます
急に忙しくなってスクショあげたりできずすみません
落ち着いたらまたお聞きするかもしれません

2023/04/06(木) 08:50:38.97

逃げた?

**349** (ﾜﾝﾐﾝｸﾞｸ MM52-d6Gd) · 2023/04/09(日) 19:38:32.27

度々すみません
ようやく落ち着きました
http://or2.mobi/data/img/320425.png
>>349で変えたのは①で
変え方を知りたいのは②の部分の色です

2023/04/09(日) 19:49:51.37

>>358
>>394ので変わりますよ

rgb(200, 200, 200)がレールとボタン lightgrayがスライダー

2023/04/09(日) 19:50:11.93

>>349の

2023/04/09(日) 20:13:07.59

>>359
さっそくありがとうございます
http://or2.mobi/data/img/320426.png

rgbの方は反映しますが　lightgray を他の色にしてみましたがなぜかうまくいきません
どこが間違ってますでしょうか

テーマは標準のLightです

2023/04/09(日) 20:46:12.13

>>361
うちだとこれでいけますけど
何が違うんだろうか

* {
scrollbar-color: green orange !important; /* レールとボタン　スライダー */
}

2023/04/09(日) 20:49:58.25

これも同じです

:root {
scrollbar-color: green orange !important;
}

2023/04/09(日) 21:12:02.27

何度もありがとうございます
http://or2.mobi/data/img/320427.png
やっぱりダメみたいです
:rootの方もです

いつもこのスレ見てますので何かあれば教えてください

ありがとうございました

2023/04/10(月) 01:29:33.61

Thunderbirdはスレチ

2023/04/12(水) 14:24:16.94

#statuspanel {
position: fixed !important;
top: 18px !important;
left: 920px !important;
text-align: left !important;
}

Firefox112にアップしたところ
ここかどこかで見た、ステータスパネルを強引にロケーションバー内に移動させるこのCSSが
上からブラウザの下まで縦方向にその幅分全体で表示されるようになってしまいました
元通りに下にあったステータスパネル分の高さで表示するにはどうしたらいいでしょうか
hightを入れてみて一見ウマくいったかと思ったのですが、細く表示されて見えなくなったりするので
スマートは方法はないかと・・

2023/04/12(水) 15:14:48.34

>>366
display: block !important;

2023/04/12(水) 19:09:39.31

>>367
できましたーありがとうございます。

2023/04/15(土) 22:42:42.00

FirefoxのUIをuserChrome.cssでカスタマイズしていた人たちに報告。
Firefox113からUIレイアウトが「-moz-box」から「display: flex」に変わるから一部動作しなくなるものがあるみたい。
俺はUIパネルを左にしていたのが効かなくなっちゃった。
もちろん解決方法もあるぞ

「-moz-box-ordinal-group: 0」は「order: -1」に
「-moz-box-orient: vertical」は「flex-direction: column」に
「-moz-box-direction: reverse」は「flex-direction: row-reverse」に
「-moz-box-align: center」は「align-content: center 」か「align-items: center」に差し替えると今まで通り

2023/04/15(土) 23:53:17.98

>>369
サンクス

2023/04/17(月) 10:49:45.05

いつからか、下記動かなくなった。
/*** ページ内検索バーを上に移動 ***/
#main-window:not([chromehidden="true"]) > .browserContainer > findbar {
-moz-box-ordinal-group: 0;
border-top: none !important;
}

2023/04/17(月) 11:20:01.04

>>371
findbar {
-moz-box-ordinal-group: 0 !important;
border-top: none !important;
border-bottom: 1px solid ThreeDLightShadow !important;
transition: none !important;
}

2023/04/17(月) 12:44:49.29

>>372
ありがとう。
Ver112ではOKなるも113では動作しません。

2023/04/17(月) 13:01:41.15

>>373
369のじゃないの？

2023/04/17(月) 13:51:42.96

/* Gray icon on inactive tabs */
tab .tab-icon, .tab-icon-image, .tab-throbber {
filter: grayscale(1);
}

#TabsToolbar .tabbrowser-tab[selected] .tab-icon,
#TabsToolbar .tabbrowser-tab[selected] .tab-icon-image,
#TabsToolbar .tabbrowser-tab[selected] .tab-throbber {
filter: grayscale(0);
}

↑アクティブじゃないタブのファビコンを全部グレーアウトして目立たなくするというやつなんですけど
現在でも効く方法分かる方いらっしゃったらお願いします。
ググってみると、アドオンとかもあるんですが、112では動かないみたいなんですよね

2023/04/17(月) 14:18:22.26

>>375
112で動作するよ

!important;付けてみるとか

2023/04/17(月) 15:56:08.42

>>376
動作してますか・・オマカンとすれば何かと干渉してるんだろうけど
!important;付けても、userChrome.cssの中身を>>375のだけにしても、スクリプト全部無効にしても
拡張をあれこれ無効にしても、などと色々試してみたけど自分の環境ではダメみたいです。仕方ないです

2023/04/17(月) 16:35:38.45

>>377
こっちの112でも動作するなあ
しかしこれいいなopacityと組み合わせたらさらに良くなったありがとう

2023/04/17(月) 16:58:59.76

>>377さん動くといいですけどね

マウスオーバー　複数選択　ピン止め加えてみた

.tabbrowser-tab:hover tab .tab-icon, .tabbrowser-tab:hover .tab-icon-image, .tabbrowser-tab:hover .tab-throbber {
filter: grayscale(0) !important;
}
.tabbrowser-tab[multiselected="true"] tab .tab-icon, .tabbrowser-tab[multiselected="true"] .tab-icon-image, .tabbrowser-tab[multiselected="true"] .tab-throbber {
filter: grayscale(40%) !important;
}
.tabbrowser-tab[multiselected="true"]:hover tab .tab-icon, .tabbrowser-tab[multiselected="true"]:hover .tab-icon-image, .tabbrowser-tab[multiselected="true"]:hover .tab-throbber {
filter: grayscale(0) !important;
}
.tabbrowser-tab[pinned] tab .tab-icon, .tabbrowser-tab[pinned] .tab-icon-image, .tabbrowser-tab[pinned] .tab-throbber {
filter: grayscale(50%) !important;
}
.tabbrowser-tab[pinned]:hover tab .tab-icon, .tabbrowser-tab[pinned]:hover .tab-icon-image, .tabbrowser-tab[pinned]:hover .tab-throbber {
filter: grayscale(0) !important;
}

2023/04/17(月) 17:08:12.41

>>379
それは俺も動かないなあ
俺はこう書き変えた

.tab-icon-image {
filter: grayscale(1);
opacity: 0.3;
}
.tabbrowser-tab:hover .tab-icon-image, .tabbrowser-tab[selected] .tab-icon-image {
filter: grayscale(0);
opacity: 1;
}

2023/04/17(月) 19:38:28.98

>>374
いいえ、372です。
369は意味不明です。

2023/04/17(月) 19:41:33.58

>>381
「-moz-box-ordinal-group: 0」を「order: -1」にしないと動かないんじゃないの

2023/04/17(月) 20:42:47.44

>>382
下記は112でOK
/*** ページ内検索バーを上に移動 ***/
findbar {
-moz-box-ordinal-group: 0 !important;
border-top: none !important;
border-bottom: 1px solid ThreeDLightShadow !important;
transition: none !important;
}

113ではダメです。
”-moz-box-ordinal-group: 0”をどう修正するの？

2023/04/17(月) 20:48:59.02

>>383
>>369の通りに変更

2023/04/17(月) 22:02:04.43

>>384
112でも動かなくなる。

2023/04/17(月) 22:16:34.92

113からって書いてあるでしょ

2023/04/17(月) 23:04:32.21

>>380
横からだけと使わせてもらいます

2023/04/20(木) 00:59:18.95

再生中のアイコンの背景をアニメーションさせる

/* 再生中アイコンの背景アニメーション */

.tab-icon-stack[soundplaying="true"]:after, .tab-icon-stack[muted="true"]:after {
content: '';
position: absolute;
width: 20px;
height: 20px;
margin: -2px;
background: rgba(128, 128, 128, 0.5);
border-radius: 50%;
animation: scaling .6s alternate infinite;
z-index: -1;
}

@keyframes scaling {
0% {scale: 0.8;}
100% {scale: 1.2;}
}

2023/04/20(木) 11:39:48.14

>>388
いいですね

2023/04/22(土) 15:53:23.74

>>377
自分も駄目で色々試したら上手く行ったので、参考までに
その部分だけ別ファイルにして@importで読ませるかCSS_Loader使うかしたらちゃんと動作した