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/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

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

2023/06/02(金) 20:00:21.31

三

2023/06/02(金) 21:10:11.00

ハンバーガーボタンを左に移動 */
#PanelUI-button {
order: -1 !important;
margin-left: 1px !important;
margin-right: -12px !important;
}

2023/06/02(金) 21:11:37.73

/* ハンバーガーボタンを左に移動 */
#PanelUI-button {
order: -1 !important;
margin-left: 1px !important;
margin-right: -12px !important;
}

2023/06/02(金) 22:09:22.35

ハンバーガーありがとう

2023/06/02(金) 23:37:34.60

>>439
横からだけどありがたい
ハンバーガーメニューのsvgファイルをFirefoxロゴのsvgに替えて使っていたけど、右のままだったから様にならなくて

2023/06/04(日) 14:06:51.37

見てるサイトをブクマに登録する時にURLバーの右にある星マークをクリックして
「ブックマークを追加」のダイアログボックスを開いてブクマ登録するわけだが

そのダイアログボックスの「保存場所」の候補のファイルが出てくる枠が狭くて使いづらいんで
その枠を広げたいんだけどなんとかならんの？
解決する方法があったらおしえてくれ

あと、この板ってどの程度の間隔で書き込みできるんだ？

2023/06/04(日) 15:16:59.57

な、age厨だろ👆

2023/06/04(日) 15:26:38.50

>>442
#editBMPanel_folderTree {
min-width: 440px !important;
min-height: 300px !important;
}

2023/06/04(日) 16:08:08.74

>>444
サンキュー、まさにそれ

2023/06/10(土) 00:15:33.63

ズーム拡大・フォントサイズ変更・ボールド設定以外の方法で
サイト上の細い文字を太くする方法はありますか？

2023/06/10(土) 07:41:39.51

>>446
fontweight使いたくないならhtmlのstrongとかbタグで囲うしかない
そもそもサイト上のことならstylusとかuserscriptでやることだからそっちで聞いた方がいいよ

2023/06/10(土) 11:33:28.19

-webkit-text-stroke: 1px;

2023/06/10(土) 20:12:59.96

>>447
よろしければURL教えてください

2023/06/11(日) 02:09:27.10

>>449
とりあえずJavaScriptの質問板で聞いてみたら？
何をどうしたいのかよくわからんからもっと具体的に説明した方がいいと思う

2023/06/11(日) 10:20:06.21

普通にfont-familyで好きなフォント指定すればいいじゃん

**名無しさん＠お腹いっぱい。** · 2023/06/11(日) 21:31:36.45

AutohideSidebar2.uc.js動かなくなってない？俺だけ？

2023/06/11(日) 21:51:27.67

>>452
動いてるよ

2023/06/17(土) 01:31:00.93

アプデしたら動かなくなったからまた更新されたら直るのかも…と思ってたけど115.0b6になっても自動開閉起動せず
マジで俺だけなの

2023/07/05(水) 16:09:46.89

俺も115で動かなくなったが直せた
alice0775の103のinstall folderにあるconfig.jsを落として上書きすればいい
ついでに106にあるuserchrome.jsも新しくしておくといい

あめ ◆P0jSlC5fJs (ﾜｯﾁｮｲ ebfe-c6L3) · 2023/07/06(木) 13:29:06.12

>>455
助かった

2023/07/09(日) 02:36:56.11

103と106変えても何一つ効かなくなったわ
もういいや

2023/07/09(日) 02:48:58.77

chromeフォルダに入れる初歩的なミスしてたわ
治った

2023/07/11(火) 02:47:41.70

config.jsとuserchrome.jsはたまにチェックしないとあかんな

2023/07/16(日) 10:08:03.60

>>63 >>411
求めていたものがあった

2023/07/16(日) 14:47:51.24

スレチなんだけど...

2023/07/17(月) 01:24:57.59

>>455
サンキュー助かったわ
唐突に動かなくなるの内部で何弄ってるからなんだろうな

2023/08/02(水) 16:53:18.45

ツールバーの[ブックマークを表示します](☆の下に_みたいなアイコン)の
「ブックマークサイドバーを表示」「ブックマークを検索」「ブックマークを管理」
を非表示にする方法を教えてください。

#BMB_searchBookmarks, #BMB_bookmarksShowAllTop, #BMB_viewBookmarksSidebar {
display: none !important;
}

2023/08/03(木) 13:19:48.52

Thunderbird115のメニューバーとツールバーを旧バージョンの様に逆にできますか？

2023/08/03(木) 13:19:54.19

Thunderbird115のメニューバーとツールバーを旧バージョンの様に逆にできますか？

2023/08/03(木) 22:10:24.56

Firefox 116になってから以下のCSSが効かなくなっているようですが、
修正はできますかね？

/* ピン留めしたタブとしていないタブの間にある隙間を調節 */
.tabbrowser-tab[first-visible-unpinned-tab="true"] {
margin-left: 0px !important;
}

2023/08/04(金) 11:41:33.90

>>466

.tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])) {
margin-left: 0 !important;
}

**466** (ｽﾌﾟﾌﾟT Sd8a-IjPS) · 2023/08/04(金) 21:48:23.60

>>467
ありがとうございます。
うまく行きました。

2023/08/11(金) 00:18:33.06

Youtubeの「もっと見る」を
最初から開いた状態にできますか？

2023/08/11(金) 01:19:39.49

そういやYouTubeのコメントの「続きを読む」が短いコメントにも表示される問題を直す
font.blacklist.underline_offset に Meiryo を追加
が効果なくなった

2023/08/11(金) 03:47:43.09

youtubeの視聴回数を「もっと見る」押さなくても
詳細表示させる方法ありますか？

2023/08/18(金) 01:58:20.90

ツール＞設定と設定タブを開いたときにアクティブなタブの右隣に設定タブを開く方法はありますか？