userChrome.css・userContent.cssスレ Part11

2020/03/21(土) 10:16:26.74

!extend:checked:vvvvv:1000:512
次スレを立てる方は↑を二行重ねて書いてください

●※前スレ
userChrome.css・userContent.cssスレ Part10
http://egg.5ch.net/test/read.cgi/software/1571968384/l50

●拡張機能
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

2021/05/25(火) 05:27:02.83

>>380
例えばクラス名に〇〇という単語が入っている場合

[class*="〇〇"]
{display:none}

複数指定する場合は>>131さんみたいにするといいかも

2021/05/25(火) 10:23:58.19

uBO使った方が楽にできそう
StylishやStylusって、uBOの:has()や:has-text()に相当するやつあるっけ？

2021/05/25(火) 16:08:25.78

>>382
対象がテキストの場合はuBlock Originでいいんじゃないかな
CSS詳しくないから分からないけど

2021/05/25(火) 19:54:44.39

>>381
ありがとうございます
こんな感じでclassのところを色々変えてみましたが
思った通りにはなりませんでした
{ .ytd-grid-renderer.style-scope[class*="〇〇"]
{ display:none !important }}

検索して参考にしたサイトもバージョンの違いか
文法が少し違っていてこれで合っているか分かりませんでした

2021/05/25(火) 19:57:02.54

>>382
>>383
ありがとうございます
uBlock Originは元々使っていましたが
hasを知らなかったのでとても参考になりました
おかげで思った通りの動作が出来ました

表示されてる文字での要素は消せるようになりましたが
表示されていないリンク先のドメインで
要素を消す方法もあるのでしょうか？

2021/05/30(日) 12:43:30.03

テーマにCompact Darkを使用しているのですが、Defaultのようにタブの角を丸くするにはどうしたらいいでしょうか?

C (ﾜｯﾁｮｲ 9311-KeM6) · 2021/05/30(日) 14:32:39.10

webサイトを検索すると、ツールバーの一番下にタブバーを表示し、メニューバーは一番上に表示するようなcssが存在する
だが、89で望みの順序で表示されたものでも、メニューバーを非表示にすると、その部分が空白の行に変わるだけで
コンテンツ表示領域は広がらない
protonの仕様では、このようにしかならないのだろうか

2021/05/30(日) 14:42:00.86

怖いな８９
コロナウイルスワクチンみたいに何が起きるかわからない

2021/06/01(火) 12:23:34.50

ブックマークのコンテキストメニュー
フォルダー名を変更（E）
ブックマークを編集（I）
を消したいのですが上手くいきません
IDが分かる方が教えて下さい
宜しくおねがいします

**389** (ﾜｯﾁｮｲ 4973-6ypv) · 2021/06/01(火) 12:27:32.28

文章が変になっていました
?　IDが分かる方が教えて下さい
○　IDが分かる方がいましたら教えて下さい

2021/06/01(火) 12:35:12.21

ブックマークのコンテキストメニューにそういう項目ないですよね

2021/06/01(火) 13:16:14.70

Proton UIの方だな
>>389
idに:が含まれてるのでidセレクタではなく属性セレクタで
[id="placesContext_show_folder:info"],
[id="placesContext_show_bookmark:info"] { display: none; }

**389** (ﾜｯﾁｮｲ 4973-6ypv) · 2021/06/01(火) 15:31:28.34

>>391
申し訳ありません、使っているバージョンを書いてませんでした

>>392
消すことが出来ました
今までidでしか消したことが無かったので
属性セレクタについて勉強してみようと思います
有難うございました

2021/06/02(水) 07:18:20.42

89になったらブックマークツールバーのフォルダの行間えぐいな・・・

2021/06/02(水) 12:31:21.24

>>394
これだけ大幅に変化すると皆が対応迫られるから
俺らみたいな雑魚でも検索するだけでどうとでもなるぞ

2021/06/02(水) 16:02:43.29

https://imgur.com/a/tMcUk93
ブックマークのボタン押したらブックマークを管理って項目が二つ出るんだけど
片方非表示にできないかな？

2021/06/02(水) 16:26:17.91

#BMB_bookmarksShowAllTop {
display: none !important;
}
#BMB_bookmarksShowAll {
display: none !important;
}

2021/06/02(水) 17:11:59.99

タブ右クリメニューのトップに固定されてる新しいタブってけせない？

2021/06/02(水) 17:40:05.26

>>398
#context_openANewTab {display: none !important;}

2021/06/02(水) 20:15:36.12

下記ほとんど効果ない？
/***コンテキストメニューアイテムの行間の高さを変える***/
#contentAreaContextMenu > menuitem {
padding-block: 0.1em !important;
}

2021/06/02(水) 22:57:53.95

本スレに書いてあったProtonのタブの隙間を埋めるやつ

.tab-background {
border-radius: 0 !important;
margin: 0px -2px !important; }

2021/06/02(水) 23:04:04.14

>>401
タブが増えて行って左右にオーバーフローのボタンが出るとタブの高さが変ってしまう

2021/06/03(木) 12:05:29.35

>>402
これで良いかもしれないし駄目かもしれない(タッチUI時の高さ)

#tabbrowser-arrowscrollbox,
.tabbrowser-tab{
max-height: 40px !important;
}

2021/06/03(木) 12:36:28.74

オレンジ色になって目立つハンバーガメニューボタンを白黒というかグレーにするにはどこをいじればいいですか？
ここ以外は何とか調べていい感じにできた＠Firefox89

2021/06/03(木) 13:09:36.84

検索バーの検索エンジンのバネルにマウスを載せた時に出る
背景のような物の色を変えることは出来ないでしょうか？

2021/06/03(木) 13:37:13.50

>>405
例えば背景を白くするなら

.searchbar-engine-one-off-item:not([selected]):hover, .addengine-item:hover {
background-color:#fff !important ;}

2021/06/03(木) 14:04:51.84

IME-Colors-e10s.uc.jsなてのも使えるかも

2021/06/03(木) 14:25:17.71

>>403
ありがとうございます
試してみます

2021/06/03(木) 16:50:32.39

タブと新しいタブを開くボタンの角丸を無くすやつ

:root {
--tab-border-radius: 0px !important ;
}

2021/06/03(木) 17:42:37.82

>>406
有難うございます
見やすい色に変えることができました

2021/06/04(金) 11:32:57.33

ダークテーマでも、ブックマークサイドバーと履歴サイドバーの検索欄の背景が白のままですが、アドレスバーと同色のグレーにできないでしょうか？
よろしくお願いします。

2021/06/04(金) 12:42:13.49

>>411
俺もそれ知りたい
白くなって違和感ありまくり

2021/06/04(金) 14:47:55.49

とりあえず
/* サイドバー検索ボックスの色 */
#bookmarksPanel #search-box, #history-panel #search-box {
-moz-appearance: none !important;
background-color: var(--lwt-toolbar-field-background-color) !important;
border: 1px solid #525252 !important;
/*border: 1px solid #bdbdbd !important; /* システムのテーマ */
color: inherit !important;
}
#bookmarksPanel #search-box:hover, #history-panel #search-box:hover {
border: 1px solid rgba(0, 122, 255, .33) !important;
}
#bookmarksPanel #search-box[focused="true"], #history-panel #search-box[focused="true"] {
border: 1px solid rgba(0, 122, 255, .33) !important;
}

2021/06/04(金) 16:21:41.53

>>413
きたあああああああああ
できましたありがとう。

モジラはなんできちんと統一してださないのよー

2021/06/04(金) 20:52:09.62

URLバーの背景色、下記だと入力フィールドのみで不格好です
#urlbar-input{ color:black !important; background:#f0f0f0 !important;}
下記検索バーのように背景色をURLバー全体にかかるように出来ませんか？
searchbar#searchbar{ color:black !important; background:#f0f0f0 !important;}

2021/06/04(金) 21:31:56.78

新しいタブのサイト名の頭文字を消す方法を教えて下さい、、、

2021/06/04(金) 21:39:08.71

>>416
すみません自己解決した
.top-site-outer .tile .icon-wrapper.letter-fallback::before {font-size: 0 !important;}
これで消えたわ

>>415
#urlbar:-moz-lwtheme > #urlbar-background, #searchbar:-moz-lwtheme {background-color: #f0f0f0 !important;}
俺はこれでやってる

**415** (ｱｳｱｳｳｰT Sa11-p9zx) · 2021/06/04(金) 21:59:20.37

>>417
ありがとう、思うようになった。

2021/06/05(土) 12:50:31.10

検索バーって使用時以外でも常に好きな色にできないかね

2021/06/05(土) 13:00:19.05

UIの色んな所にフォーカスした時の枠線の色と細さ変更
:root:-moz-lwtheme-brighttext {
--focus-outline-width: 1px !important;
--focus-outline-color: #fff !important ;
}

スターアイコンの色変更
#star-button[starred] {
fill:#fff !important
}

2021/06/06(日) 05:57:02.15

これをやりたいのですがよろしくお願いします
https://i.imgur.com/uyTUDnh.png

枠の色は >>420 では出来ませんでした

2021/06/06(日) 08:27:02.24

>>417さんから教わった下記、ロケーションバーと検索バーのの背景色の指定で
ロケーションバー内の一部（例えば拡大・縮小率）の背景色に下記を上書きさせること可能でしょうか？
#urlbar:-moz-lwtheme > #urlbar-background, #searchbar:-moz-lwtheme {background-color: #f0f0f0 !important;}

2021/06/06(日) 15:38:58.36

>>415
これは効くのだけど

>>417
こっちは効かない
なんでやー

カーソルがない時も背景を白くしたいです

2021/06/06(日) 16:13:47.60

>>423
一度>>417以外のCSSをコメントアウトしてみるといいかも

2021/06/06(日) 16:27:26.37

>>423
試してないけど、>>417はライトテーマにしか効かない（システムのテーマだとダメ）ぽいからそれじゃね
テーマ変えるか:-moz-lwthemeを削除するかしてみれば変わるかも

2021/06/06(日) 16:58:52.27

>>424
変わらずでした
>>425
ライトテーマにしたら効きました
:-moz-lwthemeを削除でシステムのテーマでも効きました

ありがとう

2021/06/06(日) 17:08:06.29

右クリックメニューとかの字間の調整ってできませんか？
letter-spacingが効かなくて

2021/06/06(日) 17:26:13.94

>>426
ロケーションバーの背景は均一になってる？
たとえばCtrl+-でバー内に95％と縮小率表示されるよね？
その95％に別の背景がかかってバー内の背景が均一にならないんだけど、426さんはどうですか？

2021/06/06(日) 17:39:26.78

>>421
ごめん>>420はダークテーマ用だった

2021/06/06(日) 17:57:55.65

>>421
お詫びではないけど枠の色変えるやつ
:root {
--toolbar-field-focus-border-color: red !important;
}

**421** (ﾃﾄﾘｽ ca1f-PRuz) · 2021/06/06(日) 18:00:56.56

>>430
どうもありがとうございます、赤くなりました。^^

**431** (ﾃﾄﾘｽ ca1f-PRuz) · 2021/06/06(日) 18:45:38.36

:root {
--focus-outline-width: 0px !important;
--toolbar-field-focus-border-color: lightgray !important;
}
>>420
を加えてみたのですが
右側の検索バーも同じようにするにはどうしたらいいでしょうか
影なしで線を細くしたいんです。後出しですみません。

2021/06/06(日) 21:58:03.18

>>432
こんなんでどうでしょう
適当にやったから何か無駄があるかもしれないけど

:root {
--toolbar-field-focus-border-color: none !important;
}

#urlbar-background,
#searchbar {
border: 0px !important;
}

#searchbar:focus-within {
box-shadow: 0 1px 3px rgba(128,128,142,0.5) !important;
}

なんか書き込み規制されたからもう返信できないかもしれない

**432** (ﾜｯﾁｮｲ ca1f-Ee3U) · 2021/06/06(日) 22:51:15.42

>>433
どうもありがとうございます。
とてもいい感じです、大事に使わさせていただきます。

2021/06/06(日) 23:33:22.14

>>428
試しに黒にしたら数字のところだけ白くなったけどこれのことかな

2021/06/07(月) 07:00:15.13

>>435
○○%の部分の背景とロケーションバー内の背景の濃さが均一ではないですよね？
これを均一にする方法ないかな？

2021/06/07(月) 15:04:53.86

同じ色にしたいってことですよね

2021/06/07(月) 15:32:42.56

>>437
はい、そうです。

2021/06/07(月) 20:42:01.44

#urlbar-zoom-button {
border: 1px solid #009600 !important;
background-color: green !important;
padding-top: 2px !important;}
#urlbar-zoom-button:hover {
background-color: #008c00 !important;}

**436** (ｱｳｱｳｳｰT Sa11-p9zx) · 2021/06/07(月) 21:50:10.34

>>439
これ、わたしへの回答？
私の説明が悪かったのか伝わってなかった気がします。
http://okbtsnr.seesaa.net/article/481851789.html
かなり見にくいと思いますが、一つ目のサンプル画面のロケーションバー内の
左端2つ目と右端３つ目のボタン部の背景が濃くなって不格好になってます。
URLバー内の背景を均一にしたいというです。
なお下記は定義してます。
/*** URLバー、検索バーの背景色 ***/
#urlbar:-moz-lwtheme > #urlbar-background, #searchbar:-moz-lwtheme {background-color: #f5f5e4 !important;}

2021/06/07(月) 22:09:59.50

>>440
背景色を自分で同じにしないと

#identity-box[pageproxystate="valid"].extensionPage > .identity-box-button {
background-color: green !important;
}

2021/06/07(月) 22:28:46.24

>>441
ありがとう、左側の背景は揃いましたが、右側のCtrl＋-で表示される縮小率は揃いませんでした。
このままでも良いです。

2021/06/07(月) 22:30:42.76

これは
#urlbar-zoom-button {
background-color: #f5f5e4 !important;
}

2021/06/07(月) 22:39:47.97

>>443
重ねて、ありがとう。
均一になり、スッキリしました。

2021/06/07(月) 23:47:18.96

ろだに上がってる「FF88までのブックマークフォルダcss.zipなんだが
FF88までのブックマークフォルダ黄色のコードが}の閉じカッコを書き忘れてるんで
気付かずにコピペで使ってると他のコードに影響出るぞ

2021/06/07(月) 23:55:38.06

CSSが反映されない人はコードの記述の「} 閉じカッコ」が抜けてる箇所がないかチェックしてみそ
あぷろだの「F88までのブックマークフォルダcss」をコピペで使ってたら閉じカッコの記述抜けだったので
ウチの環境だとページ内検索バーを右上に配置が機能しなくなってた原因がこれだった

**434** (ﾜｯﾁｮｲ ca1f-Ee3U) · 2021/06/08(火) 02:33:11.16

先日はどうもありがとうございました。
メニューバーのアイコンを密にできました。
firefox89 css で検索していたら偶然 toolbar-menubar という単語が目に入ったので
質問スレのをパックって
#toolbar-menubar toolbarbutton {padding-left: 0px !important; padding-right:0px !important;}
としたところ結構いい感じになりました。
ttps://i.imgur.com/yxKgqNt.png

Mozilla Firefox質問スレッド Part191
ttps://egg.5ch.net/test/read.cgi/software/1622205096/174

/* ツールバーのアイコンの間隔を調整する */
#nav-bar toolbarbutton {padding-left: 0px !important; padding-right:0px !important;}

2021/06/09(水) 19:06:34.04

>>446
こういうの使うとかさ
W3C CSS 検証サービス　
https://jigsaw.w3.org/css-validator/

2021/06/10(木) 13:34:18.39

https://i.imgur.com/6TlIHAe.png
ダークモードなのですがこの青エフェクト変えられますか?
URLバークリックしたとき出るサブテキストの色も変えたいです
全部同じ色ぽいですが全体的にギラつきすぎています
お気に入りの星の色の変え方はわかります
まあ常時見るものでもないしこのぐらいならスルーしてもいいですが･･･

2021/06/10(木) 14:04:31.39

すいません。
Firefoxスレで聞いたらスレ違いだったようで、こちらで質問させてください。

コンテナタブの色付きラインを、上じゃなく以前のように下にできるcssはあるでしょうか？

2021/06/10(木) 15:03:23.87

アクティブタブの色をタイトルバーの色と同じにできないでしょうか？
タイトルバーは何も指定していないので、Windowsの設定になっています
スレ内を探して色を直接指定する方法は分かったのですが、Windows側を変更すると追随しないので
よろしくお願いします

/* アクティブタブの背景色 */
#TabsToolbar .tabbrowser-tab[selected="true"] .tab-background {
background: #797979 !important;
}

2021/06/10(木) 18:57:20.75

background: transparent !important;
とかじゃね知らんけど

2021/06/12(土) 12:52:15.13

>>451
-moz-accent-color
文字色は-moz-accent-color-foregroundにすれば自動的に濃色背景には白、淡色背景には黒になる

**451** (ﾜｯﾁｮｲ bf7e-khlo) · 2021/06/12(土) 19:41:00.28

おお、出来ましたありがとう
タブは大きくなったのに、サウンドアイコンは小さすぎてミュートと見分けがつかなかったり
デザインした人の意図が良く分からんです

2021/06/12(土) 19:56:06.64

>>454
https://egg.5ch.net/test/read.cgi/software/1622939715/79
https://egg.5ch.net/test/read.cgi/software/1622565390/941

2021/06/12(土) 22:39:22.05

アクティブタブの上の線とコンテナタブの下の線共存できるやつ置いときますね
https://i.imgur.com/7fB1tjq.png
https://pastebin.com/nZQXpe8m

2021/06/13(日) 17:04:24.15

タブをホバーしたときのフォントの色の変え方を教えて下さい

2021/06/13(日) 18:02:26.96

>>457
これで出来ると思う

.tabbrowser-tab:hover:not([selected]) .tab-label {
color: blue !important;
}

2021/06/13(日) 18:06:27.57

できますた
textじゃなくてlabelなのか

2021/06/13(日) 18:17:00.74

あれtextでもいけた
なんか書き間違えていたようだ

2021/06/13(日) 20:23:21.91

CSSはつまりCだから直系の上位なら継承されて効くよ

2021/06/13(日) 21:18:24.46

つまりどういうことだってばよ

2021/06/13(日) 23:23:33.80

あ゛?
てめえナルトか?
お前には無理だあきらメロン

2021/06/14(月) 00:20:35.26

>>456のアクティブタブの上の線とコンテナタブの下の線共存を
91に追加したところ、browser.proton.enabled　true　で機能しました
だが、その状態ですと、ハンバーガーメニューのアイテム間の間隔が開いてしまいかったるいです
で、browser.proton.enabled　falseに変えると、間隔は狭まりますが
タブの上のラインが青色になり、黒の指定が効かないようです
いずれ、protonは強制されてしまうでしょうから、ハンバーガメニューは別の方策を求めるしかないでしょうか
ありがとうございました

2021/06/14(月) 00:29:35.17

>>464
ハンバーガメニューのcssあちこちにあるよ
こことか
https://www.userchrome.org/firefox-89-styling-proton-ui.html
https://github.com/black7375/Firefox-UI-Fix

2021/06/14(月) 16:19:58.86

なんとか、91で88と同じようなUIに整えることが出来ました、ありがとう
91、90、89は、フォルダー設定に係わっているファイル以外は、同じ内容のuserChromeのファイル群でいけそうです

**sage** (ﾜｯﾁｮｲ 03f0-1u+4) · 2021/06/16(水) 14:14:34.52

/* バックグラウンドタブの背景色 */
#TabsToolbar .tabbrowser-tab[selected="true"] .tab-background {
background: #D9D9D9 !important;
}
これでタブの色をグレーにしています。ホバーした時に若干色を黒っぽくすることはできませんか？

2021/06/16(水) 14:16:32.81

:hover

2021/06/16(水) 15:09:33.50

ツリー型タブってインスペクターで開けますかね?

2021/06/16(水) 16:41:56.25

色指定の部分を変えて試みて

/*非アクティブタブにマウスオンしたときの背景色 */
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]) {
background-color: #fefefe !important;
}

/*タブをホバーしたときのフォントの色*/
.tabbrowser-tab:hover:not([selected]) .tab-text {
color: black !important;
}

2021/06/16(水) 16:47:28.75

>>469
ページの内容ではなく本体の領域は通常のツールではわからない
https://egg.5ch.net/test/read.cgi/software/1622939715/37
に従って専用ツール起動しれ
ただし本体の右クリでしか出せないようなのはトリガーの問題でこれ使っても無理ぽい

**sage** (ﾜｯﾁｮｲ 03f0-1u+4) · 2021/06/16(水) 17:55:28.67

>>470
できました！ありがとうございます

2021/06/17(木) 12:15:10.01

>>471
その方法でいつもやってるんだけど、ツリー型タブの領域の項目は選択できないみたいなんだよね…

2021/06/17(木) 12:22:53.62

>>473
最初の設定をどうしたのか忘れた(>>471のリンク先の1の通り設定したかもしれない)けど、手元の環境では
about:debuggingを開く
→左上の[このFirefox]
→一覧からツリー型タブの[調査]
→インスペクタが開いたら右上の[iframeを選択]ボタン(わかりにくいけど3ペインに分かれたウィンドウのようなアイコン)
→sidebar.htmlを選択
でインスペクタで開けてるよ

2021/06/17(木) 18:36:38.41

>>474
おおお、できたよ
ありがとうございます。

2021/06/17(木) 19:17:27.54

>>474
横からだけどすげえ知らなかったそんなの
まあ今のとこ特に使いみちはないんだけど…

2021/06/17(木) 21:05:54.47

こんにちは。
ブックマークサイドバーから不要な項目を削除したくて過去のスレを漁っていたのですが、
私とまったく同じ目的で、しかし解決に至らなかった方の書き込みを発見しました。
こちら最新？の環境だとやはり機能しませんでした…。
何か他の記述方法や手段があれば、ぜひお教えいただけると幸いです。
以下コピペ
サイドバーを開いた時に最初から表示されていて削除できない項目、
｢ブックマークツールバー｣と｢他のブックマーク｣を消したいと思い、
とあるサイトに書かれていた内容を導入したんですが、まったく反映されませんでした。
Firefox71.0では使用できないのでしょうか？どなたか教えて頂けると幸いです

menu#BMB_bookmarksToolbar,
menu#BMB_unsortedBookmarks{
display:none !important;
}

2021/06/17(木) 21:43:30.07

>>477
#BMB_bookmarksToolbar,
#BMB_unsortedBookmarks
71.0は分からないけど89では消えてる

2021/06/17(木) 21:51:22.98

↑はブックマークメニューで出てくるやつだから関係ないなか

2021/06/17(木) 22:44:12.44

>>478-479
ご回答ありがとうございます、早速試してみましたがやはりだめでした…

2021/06/22(火) 08:59:03.84

Google検索結果に表示されるTopの検索バーを非表示に出来ませんか？