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

2023/03/09(木) 14:58:28.52

browser.compactmode.show = true
browser.uidensity = 1

これじゃだめなんですか

2023/03/09(木) 15:15:14.93

>>337
ありがとう。やってみる。

2023/03/09(木) 15:26:56.25

>>337
無理ですた。

あと、仕切り線を太くする方法や外枠線の付け方もスタイルの定義を教えて下さい。

2023/03/09(木) 15:33:23.95

browser.compactmode.show = true だけでもコンパクト表示は有効になる
browser.uidensity = 1 で起動時ブックマークツールバーの表示が数秒（１～３秒）表れない

ですた

2023/03/09(木) 16:47:13.30

>>336
/*** ドロップダウン/コンテキスト/ポップアップメニューの間隔を調整する ***/
menupopup:not(.in-menulist) > menuitem,
menupopup:not(.in-menulist) > menu {
padding-block: 2px !important; /* reduce to 3px, 2px, 1px or 0px as needed */
min-height: unset !important; /* v92.0 - for padding below 4px */
}
:root {
--arrowpanel-menuitem-padding: 4px 8px !important;
}

2023/03/09(木) 18:20:37.28

>>341
:1pxに変更したら、88のようにブックマークツールバーの行間が詰まりました、ありがとうございます。
padding-block: 1px !important; /* reduce to 3px, 2px, 1px or 0px as needed */

2023/03/09(木) 21:42:40.39

メニューバーのプルダウンメニューのアイテムの行間を行間を狭めたい。88のように。スタイルの定義を教えて。
自力で試したが１ミリも動かせない

2023/03/09(木) 22:39:00.41

こうやって勝手に隙間をつめておいて
あとでバージョンアップで表示が壊れて泣きついてくる
そんな未来がありありと見えます

2023/03/09(木) 22:44:28.45

基地外age厨に構うからこうなる

2023/03/23(木) 21:21:15.36

::selection {
background-color: red;
}
が反映されないサイトがあります
例えばBing検索結果のページでは反映されますが
Bingのチャットタブに移ると反映されなくなります

チャットでも反映されるようにするにはどう書けばいいですか？

2023/03/29(水) 22:57:37.56

反映されてないのはshadow-rootの部分だから
基本的にはjs案件になるのかな？

2023/03/30(木) 14:11:54.13

誘導先で忘れた頃に回答

#navigator-toolbox {
border-bottom: none !important;
}

2023/04/04(火) 21:55:49.69

Thunderbirdのメッセージペインのスクロールバーのスライダー？の色は
* {
scrollbar-color: rgb(200, 200, 200) lightgray !important;
}
で変えられましたがスライダーじゃない部分の色を変える方法をご教示ください

2023/04/04(火) 21:59:45.36

lightgray

2023/04/05(水) 00:30:50.16

スライダーじゃない部分とは？

2023/04/05(水) 07:08:52.37

>>351
スライダーの上下の部分です
スライダーが車とすれば道路部分といえばいいのでしょうか

2023/04/05(水) 09:11:52.67

？？？

2023/04/05(水) 13:25:40.10

>>349
Firefoxはスライダーと背景色しか変えられないからThunderbirdも同じなのではないかな

2023/04/06(木) 01:28:39.50

>>350 が答えのようだが、そこを変えても駄目なら駄目なんじゃないかな

**349** (ﾜﾝﾐﾝｸﾞｸ MMdf-Q6cH) · 2023/04/06(木) 07:12:48.82

ありがとうございます
急に忙しくなってスクショあげたりできずすみません
落ち着いたらまたお聞きするかもしれません

2023/04/06(木) 08:50:38.97

逃げた?

**349** (ﾜﾝﾐﾝｸﾞｸ MM52-d6Gd) · 2023/04/09(日) 19:38:32.27

度々すみません
ようやく落ち着きました
http://or2.mobi/data/img/320425.png
>>349で変えたのは①で
変え方を知りたいのは②の部分の色です

2023/04/09(日) 19:49:51.37

>>358
>>394ので変わりますよ

rgb(200, 200, 200)がレールとボタン lightgrayがスライダー

2023/04/09(日) 19:50:11.93

>>349の

2023/04/09(日) 20:13:07.59

>>359
さっそくありがとうございます
http://or2.mobi/data/img/320426.png

rgbの方は反映しますが　lightgray を他の色にしてみましたがなぜかうまくいきません
どこが間違ってますでしょうか

テーマは標準のLightです

2023/04/09(日) 20:46:12.13

>>361
うちだとこれでいけますけど
何が違うんだろうか

* {
scrollbar-color: green orange !important; /* レールとボタン　スライダー */
}

2023/04/09(日) 20:49:58.25

これも同じです

:root {
scrollbar-color: green orange !important;
}

2023/04/09(日) 21:12:02.27

何度もありがとうございます
http://or2.mobi/data/img/320427.png
やっぱりダメみたいです
:rootの方もです

いつもこのスレ見てますので何かあれば教えてください

ありがとうございました

2023/04/10(月) 01:29:33.61

Thunderbirdはスレチ

2023/04/12(水) 14:24:16.94

#statuspanel {
position: fixed !important;
top: 18px !important;
left: 920px !important;
text-align: left !important;
}

Firefox112にアップしたところ
ここかどこかで見た、ステータスパネルを強引にロケーションバー内に移動させるこのCSSが
上からブラウザの下まで縦方向にその幅分全体で表示されるようになってしまいました
元通りに下にあったステータスパネル分の高さで表示するにはどうしたらいいでしょうか
hightを入れてみて一見ウマくいったかと思ったのですが、細く表示されて見えなくなったりするので
スマートは方法はないかと・・

2023/04/12(水) 15:14:48.34

>>366
display: block !important;

2023/04/12(水) 19:09:39.31

>>367
できましたーありがとうございます。

2023/04/15(土) 22:42:42.00

FirefoxのUIをuserChrome.cssでカスタマイズしていた人たちに報告。
Firefox113からUIレイアウトが「-moz-box」から「display: flex」に変わるから一部動作しなくなるものがあるみたい。
俺はUIパネルを左にしていたのが効かなくなっちゃった。
もちろん解決方法もあるぞ

「-moz-box-ordinal-group: 0」は「order: -1」に
「-moz-box-orient: vertical」は「flex-direction: column」に
「-moz-box-direction: reverse」は「flex-direction: row-reverse」に
「-moz-box-align: center」は「align-content: center 」か「align-items: center」に差し替えると今まで通り

2023/04/15(土) 23:53:17.98

>>369
サンクス

2023/04/17(月) 10:49:45.05

いつからか、下記動かなくなった。
/*** ページ内検索バーを上に移動 ***/
#main-window:not([chromehidden="true"]) > .browserContainer > findbar {
-moz-box-ordinal-group: 0;
border-top: none !important;
}

2023/04/17(月) 11:20:01.04

>>371
findbar {
-moz-box-ordinal-group: 0 !important;
border-top: none !important;
border-bottom: 1px solid ThreeDLightShadow !important;
transition: none !important;
}

2023/04/17(月) 12:44:49.29

>>372
ありがとう。
Ver112ではOKなるも113では動作しません。

2023/04/17(月) 13:01:41.15

>>373
369のじゃないの？

2023/04/17(月) 13:51:42.96

/* Gray icon on inactive tabs */
tab .tab-icon, .tab-icon-image, .tab-throbber {
filter: grayscale(1);
}

#TabsToolbar .tabbrowser-tab[selected] .tab-icon,
#TabsToolbar .tabbrowser-tab[selected] .tab-icon-image,
#TabsToolbar .tabbrowser-tab[selected] .tab-throbber {
filter: grayscale(0);
}

↑アクティブじゃないタブのファビコンを全部グレーアウトして目立たなくするというやつなんですけど
現在でも効く方法分かる方いらっしゃったらお願いします。
ググってみると、アドオンとかもあるんですが、112では動かないみたいなんですよね

2023/04/17(月) 14:18:22.26

>>375
112で動作するよ

!important;付けてみるとか

2023/04/17(月) 15:56:08.42

>>376
動作してますか・・オマカンとすれば何かと干渉してるんだろうけど
!important;付けても、userChrome.cssの中身を>>375のだけにしても、スクリプト全部無効にしても
拡張をあれこれ無効にしても、などと色々試してみたけど自分の環境ではダメみたいです。仕方ないです

2023/04/17(月) 16:35:38.45

>>377
こっちの112でも動作するなあ
しかしこれいいなopacityと組み合わせたらさらに良くなったありがとう

2023/04/17(月) 16:58:59.76

>>377さん動くといいですけどね

マウスオーバー　複数選択　ピン止め加えてみた

.tabbrowser-tab:hover tab .tab-icon, .tabbrowser-tab:hover .tab-icon-image, .tabbrowser-tab:hover .tab-throbber {
filter: grayscale(0) !important;
}
.tabbrowser-tab[multiselected="true"] tab .tab-icon, .tabbrowser-tab[multiselected="true"] .tab-icon-image, .tabbrowser-tab[multiselected="true"] .tab-throbber {
filter: grayscale(40%) !important;
}
.tabbrowser-tab[multiselected="true"]:hover tab .tab-icon, .tabbrowser-tab[multiselected="true"]:hover .tab-icon-image, .tabbrowser-tab[multiselected="true"]:hover .tab-throbber {
filter: grayscale(0) !important;
}
.tabbrowser-tab[pinned] tab .tab-icon, .tabbrowser-tab[pinned] .tab-icon-image, .tabbrowser-tab[pinned] .tab-throbber {
filter: grayscale(50%) !important;
}
.tabbrowser-tab[pinned]:hover tab .tab-icon, .tabbrowser-tab[pinned]:hover .tab-icon-image, .tabbrowser-tab[pinned]:hover .tab-throbber {
filter: grayscale(0) !important;
}

2023/04/17(月) 17:08:12.41

>>379
それは俺も動かないなあ
俺はこう書き変えた

.tab-icon-image {
filter: grayscale(1);
opacity: 0.3;
}
.tabbrowser-tab:hover .tab-icon-image, .tabbrowser-tab[selected] .tab-icon-image {
filter: grayscale(0);
opacity: 1;
}

2023/04/17(月) 19:38:28.98

>>374
いいえ、372です。
369は意味不明です。

2023/04/17(月) 19:41:33.58

>>381
「-moz-box-ordinal-group: 0」を「order: -1」にしないと動かないんじゃないの

2023/04/17(月) 20:42:47.44

>>382
下記は112でOK
/*** ページ内検索バーを上に移動 ***/
findbar {
-moz-box-ordinal-group: 0 !important;
border-top: none !important;
border-bottom: 1px solid ThreeDLightShadow !important;
transition: none !important;
}

113ではダメです。
”-moz-box-ordinal-group: 0”をどう修正するの？

2023/04/17(月) 20:48:59.02

>>383
>>369の通りに変更

2023/04/17(月) 22:02:04.43

>>384
112でも動かなくなる。

2023/04/17(月) 22:16:34.92

113からって書いてあるでしょ

2023/04/17(月) 23:04:32.21

>>380
横からだけと使わせてもらいます

2023/04/20(木) 00:59:18.95

再生中のアイコンの背景をアニメーションさせる

/* 再生中アイコンの背景アニメーション */

.tab-icon-stack[soundplaying="true"]:after, .tab-icon-stack[muted="true"]:after {
content: '';
position: absolute;
width: 20px;
height: 20px;
margin: -2px;
background: rgba(128, 128, 128, 0.5);
border-radius: 50%;
animation: scaling .6s alternate infinite;
z-index: -1;
}

@keyframes scaling {
0% {scale: 0.8;}
100% {scale: 1.2;}
}

2023/04/20(木) 11:39:48.14

>>388
いいですね

2023/04/22(土) 15:53:23.74

>>377
自分も駄目で色々試したら上手く行ったので、参考までに
その部分だけ別ファイルにして@importで読ませるかCSS_Loader使うかしたらちゃんと動作した

2023/05/08(月) 23:54:50.90

>>369 さんの情報を参考にしてタブバーを下にできましたありがとうございます

112まで↓

/* タブバーをツールバーの下へ移動 */
#titlebar { -moz-box-ordinal-group: 2; }

113から↓

/* タブバーをツールバーの下へ移動 */
#titlebar { order: 1; }

2023/05/09(火) 23:14:38.26

>>391
共有感謝

2023/05/10(水) 11:29:41.69

113で
タブをダブルクリックでリロード.uc.js
再起動出来なくなった
何方かお願いします

(function(){gBrowser.tabContainer.addEventListener("dblclick", function(e){if(!!e.target.closest('.tabbrowser-tab'))BrowserReload()},false)})()

2023/05/10(水) 11:57:18.75

>>393
ウチは以下のまま113に上げて問題なく動いてる
(function(){
gBrowser.tabContainer.addEventListener('dblclick', function(e) {
if(!!e.target.closest('.tabbrowser-tab')) BrowserReload();
},false)
})();

2023/05/10(水) 18:34:05.01

タブをツールバーの下に配置するだけでいいので、>391の通りuserchrome.cssに

#titlebar { order: 1; }

を1行だけ入れたら、確かにタブは下にはなったが、メニューバーも下になってしまった・・・
タブだけをツールバーの下側にする方法はないんでしょうか

2023/05/10(水) 18:41:20.26

検索して出てきた以下の構文を

#titlebar { order: 1; }
/* メニューを上へ移動 */
#toolbar-menubar { position: fixed; display: inline-flex; }
[sizemode="maximized"]:not([tabsintitlebar="true"]) #toolbar-menubar,
[sizemode="normal"] #toolbar-menubar { top: 8px; }
[sizemode="maximized"] #toolbar-menubar { top: 8px; }
/* ツールバーの上にメニューバーのスペースを確保する */
#navigator-toolbox:not([inFullscreen="true"]) { border-top: solid 32px transparent !important; }

2023/05/10(水) 18:43:11.08

↑間違えて投稿しちゃったすいません
検索して出てきた以下の構文を試してみたら、メニューバーは元通りになったものの
今度はウィンドウコントロールボタン（最小化、最大化、閉じる）が左に寄ってしまったｗｗｗ
上手く行かなくて困ってます

#titlebar { order: 1; }
/* メニューを上へ移動 */
#toolbar-menubar { position: fixed; display: inline-flex; }
[sizemode="maximized"]:not([tabsintitlebar="true"]) #toolbar-menubar,
[sizemode="normal"] #toolbar-menubar { top: 8px; }
[sizemode="maximized"] #toolbar-menubar { top: 8px; }
/* ツールバーの上にメニューバーのスペースを確保する */
#navigator-toolbox:not([inFullscreen="true"]) { border-top: solid 32px transparent !important; }

2023/05/10(水) 19:07:05.94

>>395
自分はこれでうまくいった
https://tofukko.blog.fc2.com/?no=423

2023/05/10(水) 19:18:32.78

>>398
おお上手く行った！マジでTHX！！！

2023/05/10(水) 20:13:18.93

タブ位置は下にできたけどブックマークメニューのスカスカ具合がなおらない。
何かしらあるなぁ。

2023/05/10(水) 20:17:57.49

連投でごめん、なおせました。

2023/05/10(水) 21:47:27.13

>>398
直ったーこれなら当分だいじょぶだね、あんがと
いいかげんchromeに移った方がスマホと同じに使えていいんだけどね

2023/05/10(水) 22:39:59.43

>>394 有り難うございます私の思い違いでした　動いてました

2023/05/10(水) 23:26:01.10

>>398でタブバーは下になったけど、もう少しタブバーの高さが狭い方がいい
どこ弄れば狭く出来るんだろう

2023/05/10(水) 23:52:02.90

ちょっと調べて知ったかぶりで発言するけど、タブの高さを設定している構文がないっぽい
どこかを変更するんじゃなくて構文を追加しないと駄目なんじゃないかな

:root { --tab-min-height : 22px !important; }

と追加してみたら一応出来たみたい（heightの数値は自分で考えて）
見る人が見れば簡単なんだろうけど、何も知らない素人じゃこんなもんよw

2023/05/11(木) 01:39:13.44

>>405
ありがとう
なんとか自分で見つけた

#TabsToolbar {
--tab-min-height: 26px; !important;
}

でいけた

ついでにツールバーもちょっと狭く出来たわ

#nav-bar {
height: 30px !important;
}
#urlbar {
min-height: 26px !important;
}
#searchbar {
min-height: 26px !important;
}

2023/05/11(木) 13:09:40.25

>>398
これでタブの位置は下になるんだけど
タブの形やバーの高さ、ブックマークなどの行間がリセットされちゃってしんどいｗ

2023/05/11(木) 13:36:18.73

>>407
タブバーの高さは>>406の#TabsToolbarで弄れる
ブックマークバーは#PersonalToolbarだからそれでググればなんか出てくるかも

2023/05/11(木) 15:20:16.14

/*** ドロップダウン/コンテキスト/ポップアップメニューの間隔を調整する ***/
menupopup:not(.in-menulist) > menuitem,
menupopup:not(.in-menulist) > menu {
padding-block: 2px !important; /* reduce to 3px, 2px, 1px or 0px as needed */
min-height: unset !important; /* v92.0 - for padding below 4px */
}
:root {
--arrowpanel-menuitem-padding: 4px 8px !important;
}

これ使えてる

2023/05/11(木) 21:45:56.02

>>407
なんでわざわざしんどいことをするのか意味不明
マゾなの？

2023/05/12(金) 09:49:26.49

>>410
初心者なんだからそんないじめないでくれよｗ

-moz-box-ordinal-group　の代わりに　order を使うってのをみて

#titlebar {
order: 2;
-moz-appearance: none !important;
--tabs-navbar-shadow-size: 0px;
}

にしたらタブの位置が下になった
その他はいじらなくても今までのまま
いろいろあげてくれるみなさんのおかげです
ありがとう

2023/05/13(土) 15:03:09.48

Pushbulletの通知のタテ幅を
112以前の長さに戻す方法を教えてください

2023/05/14(日) 22:35:40.46

* {
scrollbar-width: thin !important;
}
/* for about:'pages' */
@-moz-document url-prefix("about:"),
@-moz-document url-prefix("chrome://mozapps/content/extensions/aboutaddons.html") {

window,
page,
html,
.main-content,
scrollbar {
scrollbar-width: thin !important;
}
}

113になってスクロールバーを弄る系のスクリプトが全滅してて、いまだ解決策がないようで
ググってみると、userContentに記入する↑のようなcssがあって、もうこの細いだけのやつでもいいかって感じなんですが
このスクロールバーの両端を丸くラウンドさせる方法ってありますでしょうか？
border-radiusじゃダメで。これも効かなくなったのかな

2023/05/14(日) 22:41:46.79

>>413
cssだけだと以前から丸くできなかったのではないかと思ったが
色を変える細くする非表示にするだけでは

2023/05/14(日) 23:31:44.60

以前はできたよ、ただし指定する対象はscrollbarじゃなくscrollbar thumb
が、例によって例の如く113ではこれも効かない

2023/05/14(日) 23:35:20.84

単に角を丸くしたいだけなら、about:config から widget.non-native-theme.scrollbar.style を1にしてMacOSX風にするのが手っ取り早いかも

2023/05/15(月) 15:23:58.77

>>414-416
やっぱできなくなったんですね・・
で、>>413を入れることもなく、>>416の値を2にすることで細く丸くなってくれたのでこれで満足です。
ありがとうございました！

2023/05/15(月) 20:29:49.30

ユーザーが勝手にカスタマイズするなと言わんばかりの仕様だな

2023/05/15(月) 23:55:57.32

なんかのソフト作った人がそういう社風が嫌でモジラやめたっていってたな

2023/05/16(火) 00:02:16.18

それ、いつの誰の話だかさっぱりわからんな

2023/05/19(金) 01:03:57.15

>>391
これで直った、ありがたい
感謝

2023/05/28(日) 21:13:44.23

アドレスバーと検索バーの細い枠線を常時表示できませんか？

2023/05/28(日) 21:44:28.09

どういうこと？

2023/05/28(日) 21:54:49.56

こういうのかな

#urlbar-input-container, #searchbar {
border: 1px solid var(--panel-separator-color) !important;
/*border: 1px solid ThreeDLightShadow !important;*/
}

2023/05/29(月) 07:21:49.18

>>424
ありがとう、思い通りです。
しかし次のCSSで検索バーはうまくいくのですが、URLバーの丸みが崩れます。
回避策ありませんか？
/*** 検索バー&URLバーに丸み ***/
#searchbar {border-radius: 0.8em !important;}
#urlbar-background{border-radius: 0.8em !important;}

**425** (ｱｳｱｳｳｰT Sa8f-FgTA) · 2023/05/29(月) 07:44:26.70

ごめん、もともとうまく行ってなかったと思う。
検索バー、URLバーが非アクティブでも丸みをつけられませんか？

2023/05/29(月) 08:18:34.08

/*
URLバーと検索バーの照準時の枠線を常に表示させる。
https://searchfox.org/mozilla-central/source/browser/themes/shared/urlbar-searchbar.css#83-93
*/
#urlbar-background,
#searchbar {
outline: var(--focus-outline) !important;
outline-offset: var(--focus-outline-inset) !important;
outline-color: var(--toolbar-field-focus-border-color) !important;
border-color: transparent !important;
/* 角を丸める */
border-radius: 0.8em !important;
}

**425** (ｱｳｱｳｳｰT Sa8f-FgTA) · 2023/05/29(月) 09:14:04.64

>>427
おー、見事ですね。
424案でも検索バー&URLバーに丸みを外すとスッキリしますね。
427案にするか迷うところです。

2023/06/01(木) 00:12:14.84

ツールバーの拡張機能のボタンをクリックした時の順番を
任意の順番に変えるuserChrome.jsってありますか？

一応、ボタンクリックしてツールバーにピン留めし、順番に
戻した順に下には行くようですが、これだといちいちやり直す
必要もあるので。

**429** (ﾜｯﾁｮｲ 7b58-+Kkr) · 2023/06/01(木) 00:14:29.26

すみません。スレチでした。

2023/06/01(木) 08:37:50.44

ところでFirefoxのツールバーの拡張機能アイコンをクリックすると出るメニューの大きさ
これはuserChrome.cssで小さく変えることは可能ですか？

以前はextensions.unifiedExtensions.enabledをFalseで出来たけど
今はそれも出来なくなってしまったので

2023/06/01(木) 11:32:47.08

>>431
https://github.com/datguypiko/Firefox-Mod-Blur/tree/master/EXTRA%20MODS/Compact%20extensions%20menu

2023/06/01(木) 21:20:41.04

>>432
有難うございます。
１のほうを少し自分で変えて適用してみました。
いい感じです。

2023/06/01(木) 23:30:47.03

アプリケーションメニューを左側に移動する方法を教えてください

2023/06/02(金) 00:24:02.87

祈るのです

2023/06/02(金) 10:24:07.42

アプリケーションメニューて何のこと