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/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()使えてるけど

2021/08/06(金) 15:09:15.56

教えて欲しいのですが、
全ての設定ファイルを削除してアプリを起動するとプロファイルフォルダー内に
xxx.default（times.jsonだけしか無い）
zzz.default-release（沢山のファイルが入っている）
と2つのフォルダがありました。
設定ファイルを削除するまでは前者の-releaseの付いてないフォルダだけでした。

userChrome.cssを使う場合zzz.default-release以下にchromeを作らないとだめないようですが、なぜxxx.defaultだけでなくzzz.default-releaseと2つのフォルダが出来てるのでしょうか？

1つにする方法（削除前の状態と同じ）はあるのでしょうか？

2021/08/06(金) 16:29:16.58

タイトルバーの色をWindows10以外の設定で色付けできませんかね？
Firefoxのみ黒色にしたいもんで
https://i.imgur.com/7AsuMH4.png

2021/08/06(金) 21:37:11.38

>>558
1つにするだけなら、about:profilesを開いて、
「これは使用中のプロファイルです。削除できません。」って表示されてない方の削除ボタン押せばいいよ
もしここに1つしかプロファイル表示されなかったらエクスプローラから直接フォルダ削除していいよ
フォルダ名自体を元に戻したいなら、少し上の階層にあるprofiles.iniをいじらないといけないけど説明めんどい
てかuserChrome.css関係ないな

>>559
:is(#TabsToolbar, #toolbar-menubar):not(:-moz-window-inactive) {
color: white !important;
background-color: black !important;
}
アクティブ時以外も黒くしたい場合は:not(:-moz-window-inactive)はずしてね

2021/08/06(金) 21:49:53.42

>>560
レスありがとう。
確認してやってみます。

2021/08/06(金) 22:10:02.38

>>560
タイトルバーのカラー変更試みてましたがダメでした･･･

2021/08/06(金) 23:29:13.32

>>558

>なぜxxx.defaultだけでなくzzz.default-releaseと2つのフォルダが出来てるのでしょうか？

「すべての設定ファイルを削除」したことでそれまでのプロファイルを認識できない状態になり、
新しいプロファイルが自動的に生成されたものと思われます。
新しいプロファイルははデフォルトで default-release という名前が付けられるようになっ
ています。

>1つにする方法（削除前の状態と同じ）はあるのでしょうか？

古いプロファイルの xxx.default を削除すれば zzz.default-release だけのひとつになります。
プロファイルマネージャーからおこなうか、profiles.ini を編集すればよい。

大きなお世話：
「全ての設定ファイルを削除して」とあるが具体的にどのファイルを削除したんだ？
仕様やしくみも理解していないのにむやみにファイルを削除しないことだ。
userChrome.css は関係ない話だ。
質問する場所をよく考えろ。

2021/08/06(金) 23:38:24.60

>>563

「新しいプロファイルははデフォルトで」
を
「新しいプロファイルはデフォルトで」
に訂正します。

2021/08/07(土) 12:11:07.59

>>562
559見たらタイトルバーとタブバー分離してるんか、そりゃFxでやろうとしても無理だわ、よく確認してなくてすまんな
ただウインドウごとにタイトルバーの色変えるフリーソフトがあった気がする…10で動くかは分からないけど…

2021/08/07(土) 12:15:11.30

いや勢いでできないって言っちゃったけど、独立タイトルバーよく扱い分からないから確かなことは言えんわ
まあ普通に考えてOSの範疇だと思うし、実際ブラウザツールボックスからもいじれないから無理な可能性が高いかな

2021/08/07(土) 12:27:34.42

>>563
~/Library/Application Support/Firefox
~/Library/Caches/Firefox
~/Library/Preferences/org.mozilla.firefox.plist
~/Library/Saved¥ Application State/org.mozilla.firefox.savedState
以上が削除したファイルです。

2021/08/07(土) 16:02:47.48

>>566
丁寧にありがとうございます
少し方向性を変えて探ってみます。

2021/08/11(水) 01:50:24.95

>>557
調べたらjsでは使えるみたいだけど
cssエンジンにはまだ実装されてないね

2021/08/11(水) 14:57:10.88

userChrome.css 読まなくなった？

2021/08/11(水) 15:19:18.83

このcss利用しているんだけど
右クリックのアイコンが崩れるというか位置がおかしいのはおま環だろうか･･･
https://github.com/black7375/Firefox-UI-Fix/tree/photon-style
https://i.imgur.com/B1M0RO9.png

2021/08/11(水) 15:32:39.02

>>571
もう割り切ってアイコン捨てた！

2021/08/11(水) 17:13:49.01

せっかくユーザーCSSでタブの標示を調節してあったのに
Faviconの高さ位置がおかしくなってしまった
タブの間もなんだかすきっぱになったし

2021/08/11(水) 17:19:55.63

行間詰める記述プリーズ

2021/08/11(水) 17:24:42.19

行間詰め詰めはこちらを利用させてもらいました
https://github.com/intrnl/firefox-revert-proton

2021/08/11(水) 19:47:44.56

使っている OS によって CSS の表示が異なる事ってありますか？

使っている Firefox は、同じ 91.0 で、OS が Win10 と Win8.1 です
適用している CSS は、以下のものです

/*ブックマークアイテムの高さを変える*/
.bookmark-item,
.bookmark-item > menupopup,
.bookmark-item > menupopup > menuitem {
padding-block: 0.1em !important;
}

Win10 では上記の CSS で丁度良いのですが、Win8.1 で同じように適用しても
アイテムの間隔があまり縮まりません。試しに 0.0em としてみても、Win10で
適用した時と違い、アイテムの間隔に隙間があります

同じ CSS を使ってWin10 と Win8.1 で同じようにする方法があれば教えて下さい
よろしくお願いします

2021/08/11(水) 20:40:32.52

>>576
> 使っている OS によって CSS の表示が異なる事ってありますか？

.titlebar-button 絡みで #navigator-toolbox 周りに
osやテーマの違いでズレが生じたことはあるが
それ以外はどうだろな…

差異が生じるとすればフォント周りか？
単位を"em"じゃなく"px"で試してみて

2021/08/11(水) 20:44:00.09

プルダウンメニューのアイテムの間隔はOSによって違ってますね
悩みの種です
2ではブックマークツールバーのプルダウンメニューが違ったものになるので
コンテキストメニューに対するcssの設定では、ブックマークツールバーのプルダウンメニューが同じようにならないばかりか、
設定の想わぬ副作用が出てきます、なんで実装を方式を変えたのでしょうね
設定の迷妄が更に広がります

2021/08/11(水) 21:00:11.93

>>576
user_pref("browser.display.windows.non_native_menus", 0); // native (Win7/8.1)
user_pref("browser.display.windows.non_native_menus", 1); // non-native (Win10)

2021/08/11(水) 22:25:39.65

選択されてないタブの文字色って変えられませんか？
黒にしたい
何でシロナの

**名無しさん＠お腹いっぱい。** (JP 0H33-dtsT) · 2021/08/11(水) 22:55:27.18

>>580
ピンク色
.tabbrowser-tab:not([visuallyselected=true]) {color: pink !important;}

2021/08/11(水) 23:03:46.40

>>581
すき

2021/08/12(木) 00:14:00.45

ｱｯｰ!!!

**576** (ﾜｯﾁｮｲ b3b0-7vv7) · 2021/08/12(木) 02:11:16.38

>>577-579

レス有難うございます

教えて頂いた方法を試してみましたが、特に変わりはありませんでした
再度色々と試してみた所、>>576 の CSS が機能していないのを確認しました

CSS の記述を変更してFirefoxを再起動しても、表示が変わらず CSS が
機能していない事を確認しました

もちろん toolkit.legacyUserProfileCustomizations.stylesheets はEnableにしています

どこが悪いのか見当がつかず、迷宮入りとなりそうです…

2021/08/12(木) 09:38:09.60

もしどうしてもwin10とwin8.1で同じプロファイル使いたいのなら、
userChrome.jsでUA判定して読み込むCSS分けるって方法はあるけど…そこまでする必要があるかは分からない
てかそもそも8.1の方で効くCSSがある訳でもないのか

2021/08/12(木) 10:27:31.95

Protonにしたら
Youtubeのタブにスピーカーが標示されてうざい
about:configからの設定は反映されないし
いい方法ないですか

2021/08/12(木) 12:58:44.69

>>584
>>579はwin10上と同じメニュー表示しにたかったら
browser.display.windows.non_native_menusを1にするって意味だぞ

OSネイティブ表示のまま高さ変えたいなら
appearance: none !important;
付けれ

2021/08/12(木) 16:22:40.81

誰かしにたいのか

2021/08/12(木) 19:08:27.02

ブックマークツールバーでタブをピン止めすると、右のタブと間に大きな隙間が出来てしまって格好悪い
何とかならかな

2021/08/12(木) 20:14:30.25

双子か？

2021/08/12(木) 21:24:52.07

ブックマークツールバーでタブをピン止めする

わからん

2021/08/12(木) 22:08:14.74

ワロタ、間違えた
タブバーでタブを右クリックしてピン止めした場合の症状です

**576** (ﾜｯﾁｮｲ b3b0-7vv7) · 2021/08/12(木) 22:12:47.77

>>587
補足有難うございます

教えて頂いた事を試してみたところ、CSS への記述のみで問題は解決しませんでした
結果としては browser.display.windows.non_native_menusを1 にして試してみたところ
ブックマークアイテムの高さを CSS で調節する事が可能になりました

OS が違うと設定を変えないといけない場合がある事がわかりました
レスを頂いたみなさん、有難うございました

2021/08/13(金) 12:55:09.33

アドレスバーと検索バーがアクティブ時は背景白色になるけど
非アクティブ時は灰色っぽいのが気に入らないんで非アクティブ時も白にするにはどうしたら良い？

2021/08/13(金) 19:36:03.97

>>594
ならないんだけど以前に何かいじってるとか？

2021/08/13(金) 20:40:26.67

>>594
自分はテーマをLightで使ってて枠の境目が見づらいから虫眼鏡の背景色は残してる
searchbar *|input,textarea {background-color:#FFFFFF!important;}

虫眼鏡の背景も白にするなら
searchbar{background-color:#FFFFFF!important;}

CSS初心者がやってることなので間違いがあるかも
ヒントにでもなれば

2021/08/13(金) 20:41:26.57

OS側でアプリの色の設定がライトでFirefox側のテーマがシステムテーマの場合と
Firefox側のテーマがLightの場合は灰色になるはずだけど

2021/08/13(金) 23:32:12.93

アプリの色設定はライト、FirefoxのテーマはNord Polar Night https://addons.mozilla.org/en-US/firefox/addon/nord-polar-night-theme/ 使ってるけど、
91にしたらURLバーからフォーカスが外れた時も背景色が変わらず白っぽい色のままになったので（検索バーでは起こらない）

toolbar#nav-bar #urlbar:not([focused="true"]) > #urlbar-background,
toolbar#nav-bar #urlbar > #urlbar-input-container {
background: #2E3440 !important;
}

これで色変えた

2021/08/14(土) 07:11:29.81

>>596
検索バーは出来たありがとう
アドレスバーはurlbarで出来るのかと思ったけど出来なかった

2021/08/14(土) 08:59:52.03

>>599
盾、鍵マークまで部分まで
#urlbar-input-container{background-color:#FFFFFF!important;}
盾、鍵マークの背景色は残す
#urlbar-input{background-color:#FFFFFF!important;}

CSS初心者がやってることなので弊害が出るかも

2021/08/14(土) 12:13:56.02

>>600
どっちも上手くいかなかった

2021/08/14(土) 12:52:55.46

>>601
うちでは両方変わってるんだけどな
初心者にはこれ以上は無理だわ

2021/08/14(土) 14:55:41.92

>>602
ありがとう！

2021/08/14(土) 17:55:26.30

Twitterのフォローのボタンを黒から青に戻すやつをお願いします

2021/08/14(土) 22:10:07.47

cssでそれなりに昔のスタイルを温存した環境作れたのだが
browser.proton.enabled true だと
アクティブタブの上辺の線の描画とアクティブタブの背景色の設定がうまく行かない

ブックマークメニューのアイテム名が冗長になり視認性が落ちるのでアイコン復活のcssを使いしたのだが
アクティブタブの上辺の線の描画は、browser.proton.enabled false だとうまく行くのだけど
そうすると復活させたアイコン描画の無効になってしまう

弄繰り回して、アクティブタブの上辺の線の描画とアクティブタブの背景色の設定がうまくいくcssには漕ぎ付けたのだが
ハンバーガーメニューで、アイコンの項目名の間にスペースがなくなって見づらくなった
他にタブをピン止めするとその右に空白が出来て見栄えがよくない

とりあえず、整合性のある見栄えのcssを整えた

それに、アクティブタブの上辺の線の描画のcssを付け加えると
一番左のタブがアクティブになったとき上辺の線が線が見えなくなるという瑕疵がつきまとう、トホホ

2021/08/14(土) 22:35:07.15

>>604
div.css-18t94o4.css-1dbjc4n.r-14lw9ot.r-42olwf.r-sdzlij.r-1phboty.r-rs99b7.r-2yi16.r-1qi8awa.r-1ny4l3l.r-ymttw5.r-o7ynqc.r-6416eg.r-lrvibr{background:#0af !important;}

2021/08/14(土) 23:46:22.63

>>604
https://blog.tsukumijima.net/article/twitter-revert-coloring/

2021/08/15(日) 04:13:31.72

>>607
横からだけどありがとう

2021/08/15(日) 07:56:55.51

>>606,607
ありがとうございます！
元に戻ったー

**名無しさん＠お腹いっぱい。** (JP 0H62-KgZ6) · 2021/08/15(日) 13:12:00.54

非アクティブタブをマウスオーバーして上部に線を出したり
文字色を変えたりタブの色を変えたり出来るようになったんだけど
アクティブタブだと出来ない
どうやればいいんでしょうか？

2021/08/15(日) 14:49:58.51

その辺がうまく行かないな
今は妥協案として、アクティブタブの背景色を非アクティブタブより明るくし
マウスオーバーしたタブはその中間の明るさ背景色にしてマウスオーバー感が出るようにしている

だが、アクティブタブが一番左にあるとタブの上の線が描画されないので困ってる
タブを少しドラッグすると上辺の線が見えるのだが
また、アクティブタブの背景色も変えたいのだが、それも従来設定では効かなくなった