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/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の検索バーを非表示に出来ませんか？

2021/06/22(火) 17:00:38.79

>>481
#searchform{position:absolute !important}
とかで行けるんちゃう
試してはいない

2021/06/22(火) 21:40:31.38

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

マルチ乙
https://egg.5ch.net/test/read.cgi/software/1622205096/427

2021/06/22(火) 22:08:24.58

質問スレで誰も答えないから移ってきたのでは

2021/06/23(水) 11:38:27.13

-webkit-text-stroke-widthを指定すると
以下の画像のように残像みたいのが出るようになってしまいました
pxを増やすほど顕著になっていきます
原因わかりますでしょうか

89.0.1になってからかもしれません

https://imgur.com/sMmN1RF.jpg

**485** (ﾜｯﾁｮｲ 8a56-wUFk) · 2021/06/23(水) 19:47:50.65

すみません
-webkit-text-stroke-width関係なかったです
フォント関連の設定いじったのが悪かったかと思いprefs.jsを消して再生成させてもかわらず...
スレチになったので失礼しますお騒がせしました

2021/06/23(水) 20:42:38.35

いろんなサイトで確認してしまった
俺っていいヤツ？

2021/06/23(水) 21:03:04.72

>>487
いや悪い方だろうな

2021/06/24(木) 00:32:22.61

ブックマークメニューのフォルダの右に以前は＞マークがあったと思うんですけど
89で消えた？復活させたいんですがcssで可能ですか？

2021/06/24(木) 02:38:06.84

ロケ下?に並べるところにはないが
中の方には有るけどな

2021/06/24(木) 03:39:26.65

>>489
数が増えれば出てくるんじゃないの？

**489** (ﾜｯﾁｮｲ baba-hhAf) · 2021/06/24(木) 08:30:24.56

この＞を表示するようにしたい
フォルダ展開マーカー？名前よくわからんけど
https://i.imgur.com/sW5QztR.jpeg

**489** (ﾜｯﾁｮｲ baba-hhAf) · 2021/06/24(木) 09:53:31.75

ブックマークボタンからは＞が表示されるけど
メニューバーのブックマークでも表示したいです
https://i.imgur.com/1lvDQ3I.jpeg

2021/06/24(木) 10:00:48.01

>>493
cssでいじってるんじゃないの
普通にあるよ

2021/06/24(木) 10:17:12.90

>>493
我が家のもブックマークツールバーのもメニューバーのも「＞」が表示されてる

2021/06/24(木) 10:19:48.81

表示されとるけど

2021/06/24(木) 10:33:43.55

ブックマークツールバーのメニューでほしいのは
コンテキストで明確に弁別できるものは、「ブックマークの削除(E)」とか「フォルダーの削除(M)」のとかの表示でなく
簡潔に、「削除(E)」とか「削除(M)」に簡潔なスタイルに戻してほしい

2021/06/24(木) 10:35:40.14

>>494
確かに以下のcss削除したら＞出てきました

/* ブックマークのフォルダアイコンを指定 */
.bookmark-item[container] {
list-style-image: url("folder-item.png") !important;
-moz-image-region: rect(0px, 32px, 16px, 16px) !important;
}

フォルダアイコンを指定しつつ＞も表示したいです
上記cssの書き方変ですかね？

2021/06/24(木) 10:50:28.69

自己解決しました。右のアイコンのみ変更

/* ブックマークのフォルダアイコンを指定 */
.bookmark-item[container] .menu-iconic-left {
list-style-image: url("folder-item.png") !important;
-moz-image-region: rect(0px, 32px, 16px, 16px) !important;
}

ありがとうございました

2021/06/24(木) 10:51:22.29

>>499
右のアイコン → 左のアイコン

2021/06/24(木) 11:03:56.35

>>499
メニューバーとブックマークツールバーは問題ないけど、
Ctrl+Shift+Hで表示されるフォルダがfolder-item.pngにならないね。

2021/06/24(木) 11:24:46.67

>>501
https://www.userchrome.org/what-is-userchrome-css.html#colorbookmarkfolder
を参考にして
:-moz-any(
#bookmarks-view,
#editBMPanel_folderTree,
#placesList) treechildren::-moz-tree-image(container),
#editBMPanel_folderMenuList > .menulist-label-box > .menulist-icon,
#editBMPanel_folderMenuList menupopup menuitem
を追加すればCtrl+Shift+HのフォルダもOKですね

2021/06/24(木) 12:43:41.10

test

2021/06/24(木) 23:24:48.91

folder-item.pngでフォルダの画像ファイルを指定するファイルって
どこのどのフォルダどこに入れたらいいのかわからない私がいる

2021/06/24(木) 23:28:33.49

と思ったら>>502さんが指定してるサイトの通りにやったらアイコン黄色くなった…自己解決です
>>477、解決方法無いのかなぁ…

2021/06/24(木) 23:35:29.07

>>505
reddit.com/r/FirefoxCSSで以前見たような

cssマスターの人たちがフォルダを見えなくすることはできるが
空白が残るようなこと書いてた気がする

2021/06/25(金) 00:16:46.53

477は各階層タゲってみたけど全部消えるか全部残るかの二択だったんで
.jsの方追わにゃどーにもならんぽくてな

2021/06/25(金) 08:03:50.78

>>506 >>507
どうやら>>477は現状極めて難易度の高い改造のようですね…
誰かが開発してくれる事を祈って待ちます…

2021/06/25(金) 10:15:41.60

bookmarks sidebarのコンテキスト(chrome://browser/content/places/bookmarksSidebar.xhtml)で
document.getElementById("bookmarks-view").place="place:parent="+PlacesUtils.bookmarks.menuGuid;
を実行するuc.jsを作ればいい

2021/06/25(金) 11:44:39.88

>>509
知恵者様が！
具体的にはどうすればいいのでしょう…？
人の改造手順を模倣する事しか出来ないもので…

**481** (ｱｳｱｳｳｰT Sad3-wfqF) · 2021/06/26(土) 14:32:15.95

>>482
変わらないです。