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/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
変わらないです。

2021/06/26(土) 14:36:36.34

前スレの94です
アドバイスのお陰でうまくできました
お礼しようとすると連投規制→1ヶ月書き込み不可能を数回繰り返ししまいました

userChrome.css・userContent.cssスレ Part10
http://egg.5ch.net/test/read.cgi/software/1571968384/94
ID:gZ8lyWfa0 ID:GFqKvOCu0 さんありがとうございました

https://i.imgur.com/Kp47zSF.png

2021/06/26(土) 23:29:05.71

本スレにあった https://pastebin.com/RnVmAh3H のタブの高さの調節を使って26にしてましたが89.0.2にしたら効かなくなりました。オマカンですかね？

2021/06/26(土) 23:32:36.70

>>513
どちらも効いてる

:root[uidensity=compact] { --tab-min-height: 26px !important; } /*コンパクト*/
:root { --tab-min-height: 29px !important; } /*通常*/

2021/06/27(日) 00:11:11.79

>>514
マジか～オマカンみたいですね。タブの高さ29px未満のための設定はノータッチでよいんですよね？

2021/06/27(日) 08:30:32.07

エラーで書き込めない。

2021/06/27(日) 10:12:24.53

>>515
他のcssと干渉してるとか

2021/06/27(日) 16:46:45.08

513です。もう一度見直してみたら治りました。何が干渉してたかはわかりませんが！後、タブの高さ29px未満のための設定にタブクローズの記載がありますが気持ち✖︎を大きくする事はできませんか？

2021/06/29(火) 11:08:01.44

>>511
俺も482使ったけど消えたぞ
なんか使い方間違えてね？URLの指定方法間違ってたりとか

2021/06/29(火) 11:27:09.26

>>519
URL指定、どこで？
#searchform{position:absolute !important}をuserChrome.cssに追記するだけじゃダメなの？

2021/06/29(火) 13:02:49.50

userChrome.cssとuserContent.cssは別の物だよ

2021/06/30(水) 08:13:46.52

>>520
chromeフォルダにuserContent.cssを作って（userChrome.cssではない）
@-moz-document url-prefix("https://www.google.com/search";), url-prefix("https://www.google.co.jp/search";) {
#searchform{position:absolute !important}
}
を保存

userChrome.cssはブラウザ本体のパーツの編集、userContent.cssは表示されるページの編集に使う
まあ後者はStylusとかアドオン使う方が主流だけど（但しabout:preferencesとかabout:newtabとかはuserContent.cssじゃないと効かない）

**520** (ｱｳｱｳｳｰT Sad3-wfqF) · 2021/06/30(水) 10:56:18.48

>>522
レス、ありがとう。
念のため新規プロファイルで試しました。
Googleログインしただけで何の設定もしていません。
（userContent.cssなしのとき）
・URLバーに検索文字入力
・Google検索結果が表示される（先頭行に検索ボックス表示）
・スクロールすると、すぐちょっと細見の検索ボックスが表示される。
・この検索ボックスはスクロールしても固定です。
（userContent.css設定したとき）
・細見の検索ボックスが現れないだけです。

いずれの検索ボックスも未表示に出来ませんか？

2021/06/30(水) 11:27:22.22

>>523
フローティングを追従させたくないんじゃなくてホントに全部消したいのかｗ
じゃあ「position:absolute」の部分を「display:none」にすればいいな

2021/06/30(水) 11:30:33.53

#searchform,#sfcnt,#top_nav,#appbar{display: none !important;}
の方が余計な空白も検索ボックスの下の部分も全部消えてキレイかも、まあ好きなように調節して

俺ってば親切だわｗ

2021/06/30(水) 13:21:09.88

>>525
余計な空白は消えるけど、Googleの設定（すべて、ニュース、・・・・、設定）も消えるので困る。
>>524
余計な空白ができるけど、Googleの設定は消えない。これでも十分使えるけど、空白何とかなりませんか？

2021/07/01(木) 07:47:25.74

特定のサイトで初期表示されて、すぐ自動的に縦方向に○○pxスクロールするには、どう記述すれば良いのでしょうか？、

2021/07/01(木) 09:39:25.87

>>527
cssじゃ無理
userChrome.js入れてWindow.scrollBy()使えばできる

2021/07/01(木) 11:47:59.01

>>528
れす、ありがとう。
やはり、そうですか。

2021/07/03(土) 13:56:18.63

俺はTampermonkeyでやってるわ

2021/07/03(土) 14:38:04.24

>>530
具体的に教えてよ！

2021/07/10(土) 14:08:06.91

これ動かないんだけど、どこを修正すれば良いの？
https://god-support.blogspot.com/2018/10/google-2018-chrome-stylus.html

2021/07/10(土) 14:42:27.78

Google カレンダーなるものを使ってないので推測だが
多分classが違ってるんじゃね?

2021/07/11(日) 22:01:45.68

>>532
これでどう？
週始まりの曜日を日曜以外にしてたら調整しないとダメだけど

https://pastebin.com/raw/uGZTfBRw

2021/07/11(日) 22:50:36.24

今、stylusを入れて、>>534を試みました
少し、アクセントがついてましになりました

2021/07/12(月) 02:16:57.21

な、age厨だろ👆

2021/07/12(月) 05:37:37.14

>>534
変化ありませんよね。

2021/07/12(月) 06:28:55.76

>>534 >>537
うーん、俺の環境だとちゃんとなるんだけどなあ
https://i.imgur.com/XLOCxlU.png

Webアプリ系は設定で色々変わるからよくわからない…

2021/07/12(月) 07:30:48.36

>>538
Dark Background and Light Text
これをOFFにしたら正常に動きました。

2021/07/12(月) 13:41:11.94

>>538
体育の日を修正しないGoogleさん

2021/07/16(金) 14:55:49.51

92 nightlyでブックマークツールバーの左クリックプルダウンメニューが
コンテキストメニューと同類のものから、ハンバーガーメニューやオーバーフローメニューと同類のものへと実装が変化しました
つまり、コンテキストメニューの背景色やフォントサイズなどのcssでの変更設定は
今のところ92以後のfirefoxのブックマークツールバーの左クリックプルダウンメニューには反映されなくなります

ブックマークツールバーのプルダウンメニュー表示の見た目の調整には、別途、cssが必要になります
厄介なことになりました

firefoxの新規インストールではUI密度も「普通」と「タッチ」しか用意されません
従来環境を使っていると「コンパクト(未サーポート」の選択肢は残りますが

2021/07/17(土) 00:26:51.66

ツリー型タブでテーマをProtonにしてるとき
タブの背景色を
tab-item tab-item-substance {background: #FF0000 !important;}
で指定しようとしたんだけどなんかはみ出る…

2021/07/22(木) 21:45:48.86

メニューバーとコンテキストメニューで、サブメニューがある場合、
右向き三角が表示されますが、この色の変更の仕方をご存じありませんか？
menu .menu-right に当たるところだと思うのですが、よくわかりません

2021/07/22(木) 23:21:24.84

.menu-right {
fill: [色] !important;
}

2021/07/23(金) 16:12:36.92

>>544
変わらないですね
filter: invert(100%) !important; は効くようです
訳分からない

2021/07/23(金) 17:24:12.89

>>545
svgアイコンの色を変えるにはabout:configでこの設定をtrueにする必要があるからかも
svg.context-properties.content.enabled

2021/07/23(金) 17:43:07.10

>>546
trueにしています
そもそもsvgではない何らかの方法？

2021/07/27(火) 21:18:17.19

YouTubeのシアターモードって、
自動再生OFFで開くとサムネイルが上下をカットされてウィンドウの幅いっぱいに拡大されるけど、
これを標準モードのようにプレイヤーサイズで表示することはできませんか？
アドオンやスクリプトも探したのですが見つかりませんでした。

2021/07/27(火) 22:05:24.32

>>548
.ytp-cued-thumbnail-overlay-image {
background-size: contain !important;
}

2021/07/27(火) 22:11:25.46

youtubeを開くと必ずミニプレーヤーになるけど、
シアターモードで開くようにしたいわ。

2021/07/27(火) 22:33:44.85

>>549
わわわわ。うまくいきました。
ありがとうございます。
ずっとなんとかならないかと思っていたので、本当に心より感謝します。

2021/07/27(火) 22:37:52.90

>>550
スクリプトでよければ、YouTube - Always Theater Modeというのがあります。
私が愛用しています。
CSSだったらわからないのでごめんなさい。
https://greasyfork.org/ja/scripts/10523-youtube-always-theater-mode

2021/07/28(水) 01:56:27.93

Ctrl+Fで出るサーチバーの高さが狭くて垂直スクロールバーが出る
すごく見づらいのでcssがんばったけどどうしてもだめだった
なにかお知恵を

2021/07/28(水) 02:11:08.78

findbar{height:4em;}

2021/07/28(水) 08:16:37.21

>>552
どうもありがとう。試してみます。

2021/08/05(木) 06:40:49.67

91ESRに向けて一年ぶりにuserChrome.cssのメンテしたが
相変わらず要素、属性の改廃、移動等の嫌がらせとしか思えないマイナーチェンジばっかだな

切り替えのトリガーにしてた要素、属性に変更があって機能しなくなったから
発想の転換で無駄な機能削いでいったら、だいぶスリムになったわ
早く:has()を実装してほしい

2021/08/06(金) 06:33:10.72

>>556
:has()使えてるけど