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/09/23(金) 02:40:31.74

>>126
せめて伝聞形式にすればいいのに
ここまで堂々とバカを晒すってやっぱバカのさせる業

2022/09/23(金) 07:12:44.89

>>127
よく分からん？
タブの高さじゃなくタブバーの高さを変えたいと聞いてる。

2022/09/25(日) 23:08:31.83

esr102にアップデートしたらuserChrome.cssに書いた内容の一部が動いてくれなくなりました
これは記述が古くなったので新しく書き直さなきゃいけないってことなんでしょうか？

ちなみに動いてくれない部分はこちらです

/* タブの色 */

/* 未読み込みタブ・白*/
.tabbrowser-tab[pending] {
font-weight: normal !important;
background: white !important;

/* タブを閉じるボタンをマウスオーバー時のみ表示 */
/.tabbrowser-tab:not([pinned]):hover .tab-close-button.close-icon {display: inline-block !important;}
/#tabbrowser-tabs .tabbrowser-tab .tab-close-button {
/ display: none!important;
/}

2022/09/25(日) 23:49:39.78

>>130
/* タブを閉じるボタンをマウスオーバー時のみ表示 */
#tabbrowser-tabs .tabbrowser-tab:not([pinned]):hover .tab-close-button.close-icon {
display: inline-block !important;
}
#tabbrowser-tabs .tabbrowser-tab .tab-close-button.close-icon {
display: none !important;
}

でどうだろう

「未読み込みタブ・白」は普通に動いたけど、「}」が抜けてるだけだったりしない?

2022/09/26(月) 00:03:45.69

スレチESRガイジに構うなよ
基地外が感染るぞ

2022/09/26(月) 02:34:43.40

>>131
どうもありがとう

/* タブを閉じるボタンをマウスオーバー時のみ表示 */ の方はコピペする部分間違えていました…
正式にはこちらです

/#tabbrowser-tab:not([pinned]):hover .tab-close-button {
/ display: block !important;
/}

ただ、教えて貰った>>131の内容に書き換えてもやはり動いてくれませんでした
問題はuserChrome.cssの記述以外の所なのかな

2022/09/26(月) 02:36:15.14

>>133に貼ったコードの一番手前の”/”は無視してください
>>131で教えて貰った内容に書き換えるためにコメントアウトしたものをそのままコピペしてしまいました

2022/09/26(月) 11:56:27.01

そもそもタブを閉じる記述全体の行頭の「/」は何目的なの？
1行だったら「/」を先頭につければいいよってのはjavascriptのコメントアウトで
CSSは1行でも複数行でも「/*～*/」なんなんだけども
そこを勘違いしていたとしてもそれはそれで全部消してるわけで

2022/09/26(月) 22:01:04.50

>>135
> 1行だったら「/」を先頭につければいいよってのはjavascriptのコメントアウトで
いいえ
1行コメントは「//」ですよ？

2022/09/26(月) 22:21:23.62

ああ、失礼

2022/09/27(火) 04:09:31.27

>>135
すみません、自分自身ド素人で基本広いものを適当にいじって使ってきたレベルで…
過去に自分でコメントアウトのつもりでつけたのか、それとも拾ってきたものに最初から書かれていたのかはよくわかりません

あと、動いていない部分「未読み込みタブ・白」ではなく「未読み込みタブ・白」でした

未読み込みタブ・白
.tabbrowser-tab[unreadTab] {
font-weight: normal !important;
background: white !important;
}

unreadは以前もバージョンアップの時に動かなくなったような記憶があります
あと「タブを閉じるボタンをマウスオーバー時のみ表示」もいじった形跡があるということは同時期に動かなくなっていたかもしれません

2022/09/27(火) 18:35:39.54

右クリックメニューの背景色とマウスホーバー色を以下のように変更していたのですが、
いつの間にか反映されなくなりました。
menupopup{
--menu-background-color: #F4F4F4 !important;
--menuitem-hover-background-color: #C1C3C2 !important;
}

色々と試してみたのですが効果が見られませんでした。
お分かりの方、お教えいただけましたらありがたいです。よろしくお願いいたします。

2022/09/27(火) 23:32:07.61

>>139
menupopup {
--panel-background: #F4F4F4 !important;
}

menu[_moz-menuactive="true"], menuitem[_moz-menuactive="true"] {
background-color: #C1C3C2 !important;
}

**139** (ﾜｯﾁｮｲ d676-tX/F) · 2022/09/28(水) 10:50:56.39

>>140
早速にありがとうございます。
無事、反映されました。心より感謝申し上げます。

2022/10/01(土) 11:51:18.07

下記でタブの高さは変わるのですが、タブの上に空間ができます。
この空間を無くすにはどうすれば良いのでしょうか？
#TabsToolbar { --tab-min-height: 20px; }

2022/10/03(月) 12:39:41.04

>>131
すみません、ちゃんと動いていました
ただ、これまではタブ開きまくってどれだけ小さくなってもマウスオーバーすればタブ幅が広がって閉じるボタンが表示されてたのですが
ESR102になってからはタブ幅が広がってくれなくなったため、マウスオーバーしても変化がわからなかっただけでした
タブの数を減らしてタブ幅に余裕持たせた上で確認したら、これまで通り機能してくれました

未読み込みタブに関しては、unreadTabs.uc.jsが動いてくれなくなってる事が原因ぽいです
新規プロファイルでも症状は変わらないので、これはもう諦めるしかないのかな
どうもお邪魔しました

2022/10/04(火) 11:20:51.85

すいません、タブツリーを使っているのですが、ピン止めされたアイコンのクローズボタンを消すのってどうするんですかね？
タブツリーのCSSは全く同じものを使っているのに、どこが影響しているのか環境によってアイコンの上にクローズボタンが乗っていることがありピン止めが殆ど機能しません
（ピン止めアイコンをクリックしようとすると閉じる）
バージョンはどちらも105.0.1です

2022/10/04(火) 17:53:14.60

ｼｬﾁｰｸなんて初めて見たわ
どこのISPよ

**名無しさん＠お腹いっぱい。** (CA 0H9f-fVk4) · 2022/10/04(火) 19:02:08.16

公務員だろ

2022/10/04(火) 21:42:33.51

>>144
タブツリーのcssは

2022/10/10(月) 20:53:25.14

URLバー、検索バーの背景色を指定しています。
#urlbar:-moz-lwtheme > #urlbar-background, #searchbar:-moz-lwtheme {background-color: seashell !important;}
これでURLバーの検索候補の背景色もseashellになります。
検索バーから↓キーで検索履歴を表示したときの背景色はwhiteでseashellになりません。
検索履歴の背景色もseashellにすることできませんか？

2022/10/17(月) 11:00:11.34

popup.menuのscrollboxの選択色の指定のやりかたを教えてください。

2022/10/18(火) 11:14:49.74

デフォルト状態のステータスパネル
https://i.imgur.com/5EtMYoF.png
ロケーションバー内に移動させたステータスパネル
https://i.imgur.com/32vZ0H8.png

/* ステータスパネルをロケーションバー内へ移動 */
#statuspanel {
position: fixed;
top: 62px;
right: 354px;
max-width: 70.7% !important;
text-align: right;
}

昔あった拡張のStatus-4-Evarの機能を再現したくて、恐らくここで↑このスクリプトを教えてもらったのですが
本日Firefoxを106にアプデしたところ、ある一定のところまでしか移動してくれず、Firefox自体のフレーム内には表示されなくなりました。
新しい方法分かる方おられましたら教えていただけないでしょうか

2022/10/18(火) 11:25:34.94

#statuspanel {
position: fixed !important;
top: 50px !important;
right: 354px !important;
max-width: 70.7% !important;
text-align: right !important;
}

2022/10/18(火) 14:44:28.08

>>151
ありがとうございます。
上部ロケ―ションバーまで移動できました
しかし何故か二か所でチラチラするようになりました
一応leftにして調整してみました

2022/10/20(木) 19:12:05.95

@font-face { src: local(<フォント名>) }でのフォント置き換えって動作してる？

2022/10/20(木) 19:44:29.95

自己解決しました
security.fileuri.strict_origin_policyをオフにしないとローカルファイル読み込めなくなったのか

2022/10/22(土) 21:28:36.93

107.0Beta3にアップデートしたらサイドバー自動開閉のcssが効かなくなったわ

**155** (ﾜｯﾁｮｲ 0276-UuoP) · 2022/10/23(日) 18:46:28.10

#sidebar-boxの設定から
margin-rightとleftの項目を削除したら復活した。

2022/10/24(月) 09:09:53.94

検索バーの履歴を表示したとき、その背景とfont-weightを設定したいです。
最近、老化で視力低下したみたい。

2022/10/24(月) 10:24:27.25

>>157
.search-panel-tree > .autocomplete-richlistitem {
font-weight: bold !important;
}
#PopupSearchAutoComplete .autocomplete-richlistitem:nth-child(2n+1):not([selected]):not(:hover) {
background-color: var(--toolbar-bgcolor) !important; /* 明るいテーマ */
/*background-color: #31255c !important; /* Alpenglow */
/*background-color: #383838 !important; /* ダークモード */
}

2022/10/24(月) 10:54:16.07

>>158
早々のレス、ありがとう。
見やすくなりました。

2022/10/25(火) 13:23:21.89

https://tadaup.jp/loda/1025132024359760.jpg
この青い部分が出なくなる方法を教えて
それが無理ならせめて青い背景色を変えたいです

2022/10/27(木) 16:13:28.69

自己解決
cssの問題じゃなかった
about:confIg → browser.urlbar.maxRichResults → -1
これで出なくなりました

2022/10/27(木) 16:16:00.60

よかったじゃん

2022/10/30(日) 21:27:27.82

age厨に構うなよ
基地外が感染るぞ🚑

2022/10/31(月) 10:44:29.78

2ちゃんの生き残りの老害
「上げるな！ sage進行がマナーだろ！」

2022/10/31(月) 12:12:30.96

キッズwwwwww

2022/10/31(月) 14:42:03.11

>>165
ちゃんとアンカー付けろ！
それがマナーだろうが！
老害ｗ

2022/10/31(月) 18:14:13.49

全角で草生やすジジイの鏡

2022/10/31(月) 18:40:06.98

>>167
誰にも迷惑はかけてないｗ
迷惑しかかけてない老害のお前とは違うｗ

2022/11/01(火) 07:51:32.02

貴様ら中止の分際で生意気だぞ

2022/11/05(土) 23:10:31.17

な、age厨だろ👆

2022/11/19(土) 01:06:05.29

/* Multi-Row Bookmarks Toolbar Firefox */
#PersonalToolbar {
max-height: none !important;
}

#PlacesToolbar > hbox {
display: block;
width: 100vw;
}

#PlacesToolbarItems {
display: flex;
flex-wrap: wrap;
}

Firefoxを107にアップしたところ、ブックマークツールバーを多段に表示するCSS↑が機能せず
ページ全体を覆うようになってしまいました。
修正方法分かる方おられましたら宜しくお願いします。

2022/11/19(土) 11:07:08.36

質問スレから誘導されてきました
今日起動したらサイドバーの幅制限解除が無効になってました
107で何か変更ありましたか？

/* サイドバーの幅の制限を無くす */
#sidebar-box {
overflow-x: hidden !important;
}
#sidebar,
#sidebar-header {
min-width: 0px !important;
max-width: none !important;
overflow-x: hidden !important;
}

2022/11/19(土) 11:19:15.74

>>172
/* サイドバーの幅の制限を無くす */
#sidebar-box {
min-width: 5px !important;
overflow-x: hidden !important;
}
#sidebar {
max-width: none !important;
overflow-x: hidden !important;
}

2022/11/19(土) 11:22:17.39

>>172
よくわからんけどこうかな

#sidebar-box {
min-width: 0px !important;
max-width: none !important;
overflow-x: hidden !important;
}

2022/11/19(土) 11:31:33.27

>>172
108bのブラウザツールボックスでちょっと覗いて見た感じだと
min-widthとmax-widthの記述部分を#sidebar-boxの方に持ってけば機能するかも

**172** (ﾜｯﾁｮｲ e230-stRS) · 2022/11/19(土) 12:38:09.23

ありがとうございます
#sidebar-box の方に全部持っていったら直りました

2022/11/19(土) 14:07:00.28

今回の更新でサイドバー自動開閉効かなくなったんですが原因わかりますか？

2022/11/19(土) 14:07:08.54

/* サイドバー自動開閉 */
#sidebar-box{
position:relative !important;
overflow-x:hidden !important;
margin-left:-5px !important;
right:5px !important;
min-width:5px !important;
max-width:5px !important;
box-shadow:0 0 2px 0 rgba(0,0,0,.35);
transition:all .3s ease 0s !important;
opacity:0 !important;
}
#sidebar-box:hover{
margin-left:-300px !important;
right:300px !important;
min-width:300px !important;
max-width:300px !important;
box-shadow:0 0 5px 0 rgba(0,0,0,.35);
opacity:1 !important;
}
#sidebar-box>#sidebar {
opacity: 0 !important;
}
#sidebar-box:hover>#sidebar {
opacity: 1 !important;
}
#sidebar{
opacity:0 !important;
}
#sidebar:hover{
opacity:1 !important;
}

2022/11/19(土) 14:24:14.01

/* サイドバーを自動開閉するようにする（107対応）*/
:root {
--thin-tab-width: 20px;
--wide-tab-width: 220px;
}
#sidebar-box {
position: relative !important;
overflow-x: hidden !important;
min-width: var(--thin-tab-width) !important;
max-width: var(--thin-tab-width) !important;
box-shadow: 0 0 2px 0 rgba(0,0,0,.35);
z-index: 1 !important;
transition: all .1s ease;
}
#sidebar-box:hover {
min-width: var(--wide-tab-width) !important;
max-width: var(--wide-tab-width) !important;
box-shadow: 0 0 5px 0 rgba(0,0,0,.35);
margin-right: calc((var(--wide-tab-width) - var(--thin-tab-width)) * -1) !important;
}
#sidebar-box>#sidebar {
opacity: 0 !important;
}
#sidebar-box:hover>#sidebar {
opacity: 1 !important;
}
#sidebar-splitter {
}
/* サイドバーのヘッダーを非表示にする */
#sidebar-header {
display: none !important;
}

2022/11/19(土) 14:57:03.17

>>178
#sidebar-boxと#sidebar-box:hover内にそれぞれあるrightを消せばいけるはず

2022/11/19(土) 15:24:00.13

解決しましたありがとうございます！
これがあるからfirefox使い続けてるから本当に良かった・・・

2022/11/19(土) 16:12:56.83

>>179
自分も自動開閉使えなくなって困ってたけどこれで出来るようになりましたありがう

2022/11/19(土) 17:04:37.74

>>179

>>178
のでも良いんだけどカスタマイズしやすい方が良いかなと

:root {
--thin-tab-width: 20px;
--wide-tab-width: 220px;

ここで幅を好みに変えてね
--thin-tab-width: 20px;
カーソルを合わせる左側の所の幅（20で太いと思ったら15とか数字を小さくする）

--wide-tab-width: 220px;
サイドバーの幅（取り敢えずタブと同じぐらいにしてあるので幅は好みに）

2022/11/19(土) 17:16:31.42

/* 検索バーを上に移動 */
.browserContainer > findbar {
-moz-box-ordinal-group: 0;
position: fixed !important;
right: 1em;
border: 1px solid threedshadow !important;
}

今回のバージョンからページ内検索バーが表示されなくなってしまったんですが
どなたか分かる方ご教授願います

2022/11/19(土) 17:34:36.47

>>184
position: fixed　を消す

2022/11/19(土) 17:49:47.26

>>185
動作するようになりました。ありがとうございます！

2022/11/19(土) 18:05:37.66

>>186
right: 1em;　も消していい
border-top: none !important;　を追加すれば検索バー上部の枠線がなくなってすっきりする

2022/11/19(土) 18:27:13.33

好みで

transition: none !important;
margin-left: 15px !important;

2022/11/19(土) 19:03:25.90

>>187
>>188
重ね重ねありがとうございます！

2022/11/19(土) 21:23:17.48

border: 1px solid threedshadow !important; は無くていいはず

2022/11/19(土) 21:29:59.22

>>190
Escが効かない

2022/11/19(土) 21:52:45.59

>>191
ただのラインだし関係なくない？

2022/11/19(土) 21:56:06.32

margin-left: 15pxはいらない勘違い

2022/11/19(土) 22:30:47.87

>>185 >>187
↓の2行、もしかして今回のバージョン前でも無くてよかったの？
position: fixed !important;
right: 1em;

2022/11/19(土) 22:33:49.43

>>192
ごめん、Esc効いてる

2022/11/19(土) 22:55:09.24

>>194
無くても上になってたよ

2022/11/19(土) 23:56:41.05

サイドバー自動開閉はAutohideSidebar2.uc.jsだと感知幅の部分が邪魔にならない

2022/11/20(日) 13:05:05.50

ページ内検索バーの話が出たついでに・・・

/* ページ内検索バーの閉じるボタンを左に移動 */
.findbar-closebutton { -moz-box-ordinal-group: 0; }

/* ページ内検索バーのテキストボックスの横幅を変更 */
.findbar-textbox { width: 20em !important; }

2022/11/20(日) 15:10:54.29

検索バーをChrome風にする
豆腐屋が更新してた

**名無しさん＠お腹いっぱい。** · 2022/11/20(日) 20:27:50.33

ブラウザーツールボックス開くまでは行けたけど肝心の消したい場所をどうやって見つけるんですか？
toolbarだけでも膨大過ぎる

2022/11/20(日) 20:34:16.38

何を消したいの

**名無しさん＠お腹いっぱい。** · 2022/11/20(日) 21:11:55.60

進むの隣のリロードボタンとアドレスバーのリーダービューリロードお気に入りボタンを消したいんです

2022/11/20(日) 21:20:00.88

これでどうですか

#reload-button, #star-button-box, #reader-mode-button {
display: none !important;
}

2022/11/20(日) 21:46:51.19

>>200
左上の矢印ボタンをクリックしてからブラウザーの調べたい部分をクリック
https://i.imgur.com/aMLVX6s.png

2022/11/20(日) 21:58:27.83

ID隠蔽ガイジに構うなよ
基地外が感染るぞ

**名無しさん＠お腹いっぱい。** · 2022/11/21(月) 06:26:22.68

>>203
>>204
機能しましたし使い方も理解できました
ありがとうございました

2022/11/21(月) 09:24:09.97

タブの右横にある｢+｣(新しいタブを開きます)ボタンの背景色を変えたいです

2022/11/21(月) 16:02:44.69

>>207
#tabs-newtab-button { background-color: yellow !important; }

2022/11/21(月) 16:37:19.38

>>208
ありがとうございました

2022/11/24(木) 16:59:00.97

cssのvarが効かないのですが何が原因でしょうか？
firefoxは107です

2022/11/24(木) 17:44:35.62

>>210
ちゃんと :root で定義したか？
https://developer.mozilla.org/ja/docs/Web/CSS/var

2022/11/24(木) 18:48:25.63

>>211
定義しました上にあるサイドバーのcssも試してみたのですがvarの部分を書き変えなければ動きませんでした
プロファイルの問題でしょうか？

2022/11/28(月) 14:15:20.99

>>4
自分もこの現象なったからいまだに99以前のバージョン使ってるわ

2022/11/28(月) 22:24:18.25

107で多段ブックマークツールバーおかしくなったけど
対応してもらえたっぽいかな
ありがとうございます

2022/11/28(月) 22:34:51.87

>>213
新しいのあるんじゃないの

2022/11/29(火) 18:11:43.73

>>215
それらしいワード英語でググったら海外ニキの解説動画やcssファイル置いてあって
最新版でも綺麗にタブをロケバーの下に置くことできた

2022/11/29(火) 23:32:31.84

どうにもお手上げなので分かる人いたら教えてください。
タブを多く表示させるためにタブの幅の最小値を

/* タブ幅の設定最小値デフォルト 76px */
.tabbrowser-tab[fadein]:not([pinned]) {
min-width: 25px !important;
flex-grow: 1;
}

という感じにしてるんですが、ver99.0.1のときは
https://imgur.com/a/13CBHiJ
の上のタブのように閉じるボタンが表示されていたのに
ver107.0に上げたところ下のタブのようにfaviconが優先的に
表示されるようになってしまいました。
もちろんタブを5、6個閉じればxボタンは出現します。
タブの左の境界を優先するか右の境界を優先するかの違いっぽい
ですけどxボタンを表示させるために右を優先したいときはどうすればいいんでしょうか？

2022/11/30(水) 14:34:25.20

タブでホイールクリックしてみるとか

**217** (ﾜｯﾁｮｲ b712-rfgC) · 2022/11/30(水) 22:24:40.70

>>218
ありがとう
ホイールクリックは知らなかった
1個1個コンテキストメニューから消してた

この質問と同じかな
https://support.mozilla.org/mk/questions/1380017
タブ幅の最小値を少し増やすかキーボードでctrl+w、ctrl+F4ってのもあるみたいだけど・・
とりあえずホイールクリックで我慢します

2022/11/30(水) 23:03:36.90

解決策ではないけどどちらかを追加してみるとか

/* アクティブなタブの幅を広く */
.tabbrowser-tab[visuallyselected="true"]:not([pinned]) {
min-width: 58px !important;
max-width: 225px !important;
}

/* アクティブなタブをホバー時に幅を広げる */
.tabbrowser-tab[visuallyselected="true"]:not([pinned]):hover {
min-width: 100px !important;
max-width: 100px !important;
}

2022/11/30(水) 23:07:39.40

ごめん
アクティブなタブをホバー時に幅を広げるは使えないな

**217** (ﾜｯﾁｮｲ b712-rfgC) · 2022/12/01(木) 00:11:51.50

>>220
なるほどと思ったけど、これだとxボタンを連続クリックしてタブを複数消せないんですよね
1個消すごとにタブ幅が変わってしまってxボタンの位置もズレるので

2022/12/01(木) 01:17:49.68

優先とは違うけどカレントタブに×を表示するだけなら
about:configでbrowser.tabs.tabClipWidthをタブ幅より少なくする
いっそ0とか

2022/12/01(木) 20:08:51.41

>>217
自分もアクティブなタブにマウスをホバーさせるとxが表示される…ってのができなくなって困ってた
ちょっとしたことなんだけど、使い勝手は随分悪くなるよね

初めは閉じるボタンを一番左にもってくることで解決してた
でも代わりにfaviconが消えてしまうのが嫌でやっぱり元に戻した

あれこれ悩んで色々調べてた所、TabMixPlusが復活してることを知った
これで全てが解決しました

2022/12/01(木) 20:10:03.67

スマホでかき

**217** (ﾜｯﾁｮｲ ff12-rfgC) · 2022/12/01(木) 22:41:40.57

>>223
タブが狭くなったときは逆に非アクティブタブは×が出なくなって欲しいので
browser.tabs.tabClipWidthはちょっと違うかな
217はホイールクリックで対処で慣れました

2022/12/01(木) 23:48:00.94

自分はマウスオーバーで閉じるボタンが出るようにしてるわ