userChrome.css・userContent.cssスレ Part8

●前スレ
userChrome.css・userContent.cssスレ Part7
http://egg.5ch.net/test/read.cgi/software/1510394098/

●拡張機能
Stylish
https://addons.mozilla.org/ja/firefox/addon/stylish/
Stylus
https://addons.mozilla.org/ja/firefox/addon/styl-us/
User Style Manager
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
https://greasyfork.org/scripts/35880

●CSS（ユーザースタイルを記入するべきファイル）
userChrome.css（UI） / userContent.css（Web Site）

●関連サイト
userstyles.org
https://userstyles.org/

MDN - CSS
https://developer.mozilla.org/ja/docs/Web/CSS

とほほのスタイルシート入門
http://www.tohoho-web.com/css/

>>650
失礼 出てきました >>651

>>650
お礼を言うのを忘れていました ありがとうございました

お尋ねさせてください。

以前、userstyles.orgかどこかで、AutoPagerizeで継ぎ足されたページの上部に表示されるページ番号（「Page: 2」等）を
Pixivでも表示できるようにするスタイルをインストールしたことがあるのですが、先日誤って消してしまいました。

もう一度インストールし直したいのですが、検索しても見つけられません。
どなたか、スタイルのURLやコード内容をご存知の方がおられましたら教えていただけないでしょうか。

Stylishから以下の内容(chaikaのスレ一覧で一行おきに色をつけるものです)を
userChrome.cssへコピペしたのですが反映されません

#boardTree treechildren:-moz-tree-row(even) { background-color: WhiteSmoke !important; }
#boardTree treechildren:-moz-tree-row(hover, focus) { background-color: -moz-cellhighlight !important; }
#boardTree treechildren:-moz-tree-row(selected) { background-color: highlight !important; }

これ以外のUI変更については反映できましたので、userChrome.cssの編集をミスってるとかではないと思います
なにかStylishとuserChrome.cssとで変更すべき点があるのでしょうか? それともchaika固有の問題と思われるので
そちらのスレに移動すべきでしょうか?

>>655
userContent.css

>>656
うまくいきました、ありがとうございます
Stylishでのnamespaceがttp://www.mozilla.org/keymaster/gatekeeper/there.is.only.xulだったので
すっかりuserChrome.cssだと信じてしまってました

>>627
自分も似たようなことをしているので以下でどうか
61では実現できてる

.bookmark-item:not([container]):not([livemark]):not([query]) > .toolbarbutton-icon,
.bookmark-item:not([container]):not([livemark]):not([query]) > .menu-iconic-left > .menu-iconic-icon,
treechildren::-moz-tree-image,
#backForwardMenu .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon
{
fill: transparent !important;
fill-opacity: 0 !important;
background-image: url("") !important;
}

background-imageはご自身で好きな画像を指定して適宜position、size、repeatで微調整
fillとfill-opacityはどちらかだけでもOKかと

>>632
Stylus の導入と設定方法（Firefox拡張機能）
https://atstudiota.exblog.jp/27113499/
これを参考にして設定を行ったよ。

サイドバーの幅を規定より小さくできるようにしたんだけど61にしたらできなくなりました。
最新の設定教えてくださいませ

>>660
@-moz-document url("chrome://browser/content/browser.xul") {
#sidebar-box,
#sidebar-box > #sidebar {
min-width: 0 !important;
max-width: 480px !important;
overflow-x: hidden !important;
}
}

>>661
ありがとうございます！

>>658
わざわざ教えてくださってどうもありがとうございます
しかしCSSを指定してみたのですが、ちょっとposition、size、repeatで微調整辺りが良くわからなかったで、上手に表示ができないです

よかったら>>429の画像を使ったもう少し詳しい書き方教えてくれませんか？
よろしくお願いいたします

1ピクセルずれるから幅を1増やした

>>663
.bookmark-item:not([container]):not([livemark]):not([query]) > .toolbarbutton-icon, /* ブックマークツールバー上のもの */
.bookmark-item:not([container]):not([livemark]):not([query]) > .menu-iconic-left > .menu-iconic-icon, /* フォルダ内 */
treechildren::-moz-tree-image, /* サイドバー */
#backForwardMenu .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon /* 戻る進むボタン内 */
{
fill-opacity: 0 !important;
fill: none !important;
list-style-image: none !important;
background-image: url("chrome://global/skin/icons/folder-item.png") !important;
background-repeat: no-repeat !important;
background-size: 32px 48px !important;
background-position: 1px 0px !important;
}
バーの高さ・幅など他所の部分もcssでいじってるならそれらに応じて適宜調整が必要になるでしょう

>>665
わざわざ教えてくれて本当にありがとうございました
これで綺麗に表示が出来ました

firefox56.0.2を使用しております
ページ内検索バーを常に表示するようにしたいのですが、↓のコードではできませんでした
#FindToolbar{display: -moz-box !important;}
どのように書き換えればよいのでしょうか？
よろしくおねがいします

未だに56かよ・・・

>>667
Firefox25からタブごとにページ内検索バーが独立したのでcssで常に表示は無理だと思います

>>669
ああ、そうなんですか
わざわざ教えていただきありがとうございます
ずっとさまよい続けるところでした

はやく成仏しろよ

/* Url and search bars （アドレスバーとサーチバーの文字入力欄の背景色）*/
--url-and-searchbar-background-color: rgb(60, 60, 60);
--url-and-searchbar-color: #d0d0d0;
--urlbar-separator-color: #5F6670}

userChrome.cssに上の記述で両バーの内部の色を変更していました
この画像でいう薄い緑黄ピンクの部分です https://i.redd.it/0wobjuul0jyz.png
v61以降この記述が無効になってしまったのですが
修正方法、もしくは別の書き方などありましたら教えて頂けませんか

>>672
やっつけなのでそう遠くない将来また無効になってしまうかも
とりあえず３カ所の色は変えられた
６行目以降は文字を選択反転したときの色を指定するもの
不要であれば削ってください

#urlbar,.searchbar-textbox {
background-color: rgb(60, 60, 60) !important;
color: #d0d0d0 !important;
--urlbar-separator-color: #5f6670 !important;
}
::-moz-selection {
background: rgb(89, 89, 89) !important;
color: #efefef !important;
}

>>673
お陰様で見事元通りに直りました
本当にありがとうございます！

ならいいんだ

userstyles.org潰れた？

見れたけど

ごめん潰れてなかった
間違えて古いFirefoxでアクセスしたら表示されないだけだった

それでもuserstyles.orgいつつぶれるかわからないから
必要なCSS確保しておいた方がいいかな

Stylishも最新版以外落とせなくなったしな

Stylish自体公式から消えた

まだ発展途上で登録数も少ないけど、今後に期待。

https://openusercss.org/

>>681
一瞬復活したがまた消えたかｗ
もう駄目だなｗ

みんなで作った財産を企業に売り飛ばし企業がスパイウェア仕込んで終わり
何度も見たことが有るフリーソフト文化の闇

しぶとくまだあるのかと思ってみたら別物だった
Stylish
https://addons.mozilla.org/ja/firefox/addon/stylish-16479/

簡素化し再出発かと期待したけど全然違った
Simple stylish
https://addons.mozilla.org/ja/firefox/addon/simple-stylish/

https://addons.mozilla.org/ja/firefox/addon/stylish/versions/

https://i.imgur.com/RE7M0bh.jpg
順番を並び替えると真ん中のバーだけ薄くなってしまうのですが修正する方法はありませんか？

URLバーの★ブックマークだけ残したい場合(メニューからブックマークはなしで)どうしたらいいでしょうか？
サイドバーは自動開閉設定にしてるためドロップできず
･･･だけ消したいのですが･･･

すみませんできました
なかったことに･･･

FirefoxのUI(URＬバーやブックマークの検索など）で
::-moz-selection 無効になったよね
62から ::selectionになったみたいだけど有効にならない

Stylish復活
https://addons.mozilla.org/ja/firefox/addon/stylish/

タブツールバーとURL、検索バーの高さを変えることができました
が、URLバーの上下の余白をなくすことはできますか？
高さをなくした分下の余白がなく上の余白が残ったままです

>>691
STEALish!とか書かれてるしｗ

一度やらかしたところは必ずまたやらかす

縦scroll barを自動的に隠すCSSはありませんか？

>>692
#urlbar {
font-size: 13px !important;
min-height: 25px !important;
height: 25px !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.searchbar-textbox {
font-size: 13px !important;
min-height: 25px !important;
height: 25px !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}

>>695
自動的に隠すuserChrome.jsスクリプトならあるんだけど

>>697
同じものかどうかはわかりませんが見つけて入れてみました
完全には隠れないが希望通りです

が、名前がまんまで
もともとのuserChrome.js導入over62.zipと中身を入れ替えました
これだと導入ベースのuc.jsは動かなくなるのでしょうか？000とsaveuc

>>名前がまんまで
>>導入ベースのuc.js
>>000とsaveuc

意味分からないです

>>699
目当てのスクロールjsの名前がuserChrome.js
xmlもuserChrome.xml
両方とも中を見てみましたが内容が全然違っているので？
中身をスクロール用に書き換えました
なので付属の000_xPref.uc.jsとsaveUCJS.uc.jsが使えないかなと

付け足そうとも考えましたがド素人なのでわからず･･･
uc.jsにリネームしてみたが動かず？

>>700
userChrome.js導入over62.zip内のuserChrome.jsとuserChrome.xmlの中を書き換えたらすべて動かなくなるよ
スクロールjsのファイル名がuserChrome.jsならスクロール.uc.jsにリネームすればいいだけ（scrollbars_win10.uc.jsとか）

もしかしてここのページ　https://pastebin.com/VxcWsaex　のuserChrome.js（scrollbars_win10）を利用したのかな
そうならばスクロールバーのちらつきを改良したコードがあるので修正したらいいと思う

11行目
(function () {　から
65行目　
`;　を
ここのページの内容と書き換える（コピペする）
https://www.reddit.com/r/firefox/comments/7f6kc4/floating_scrollbar_finally_possible_in_firefox_57/dqdbx6t/

完全に隠すために書き換え後この部分の3pxを0pxに変更
border-left: 3px solid rgba(80, 80, 80, 0.75);\
border-top: 3px solid rgba(80, 80, 80, 0.75);\

角を丸くしたいときは
:not(select):not(hbox) > scrollbar:hover thumb {\ に
border-radius: 3px!important;\　を追加

メニューのツールにあるWindows 10 Style Scrollbarsで有効無効切り替え

>>701
ページは違えど全く同じものです
githubにあった0.04ものでしたが書き換えたらうまくいきました
完全にscroll barが出てきます(書き換え前は出たり出なかったり)
希望通りです
ありがとうございました
抱きしめてキスしたい

タブバー上の空白部分ミドルクリックで「閉じたタブを復元」に設定しているんですけど
タブを6個ほど開いたらタブバー上に隙間がなくなってクリックする場所がなくなって困ってます
右端に空間を作る事って出来ませんか？

>>703
これ使ってるの？
Firefoxのタブバー上ミドルクリックで閉じたタブを元に戻すだけ.uc.js（middle-click-undo-close-tab.uc.js）
>>「新しいタブを開く」ボタンのミドルクリックでも閉じたタブを復元します。

>>704
「新しいタブを開く」ボタンでも行けました！
ありがとうございます。

タブを多段表示しても、タブの位置を自由に移動できるcssはありませんか？

cssでは無理

>>707
uc.jsなら出来るって事？

な、age厨だろ

よっしゃ

ブックマークバーの行間を狭くする系のcss、入れても狭くならないんですが
Firefox Dev portable版だからダメなんですかね？

>>711
/* サイドバーの行間を狭くする */
treechildren.sidebar-placesTreechildren::-moz-tree-row{
height:1.5em !important;
border-width:1px !important;
}

>>712
ありがとう、でもダメだよそれ入れても狭くならないよ
タブの複数行化とかはちゃんと効いてるからファイルの名前や置き場はあってるはずだけど；；

>>713
これでどう？
treechildren::-moz-tree-row {
height: 1.5em !important;
border-width: 1px !important;
}

>>713
タブの多段表示とかの別の所に、既に入ってるんじゃない？
よく確認してみてﾝ

他の記述と干渉している可能性
CSSはどちらも!importantなら後に記述する方が優先ね

今のFirefoxってUIは一切弄れなくなってるんじゃないの？しらんけど

>>717
アドオンではいじれないけどcssでならいじれるよ

>>713
treechildren.sidebar-placesTreechildren::-moz-tree-row {
min-height: 1.5em !important;
height: 1.5em !important;
border-width: 1px !important;
}

メニューエディター類が壊滅なのは痛い
アドオンとかスクリプトで機能追加しても
インターフェースが糞溜まりではどうしょうもないのう

>>715-716
そう思って試しに他の記述を全部消して>>714のやつだけにしてみてもブックマークペインの行間は一切変化しないんですよ…

>>719
すごい！
それだと狭くなりました！
ありがとうございます〜解決しました＞＜

すいません誘導されてきたのですが、
<div data-test-id="xxxx" >というノードを非表示にしたいのですが、#xxxxや.xxxxの指定ではうまくいきません。
どうしたら良いのでしょうか。

div[data-test-id="xxxx"]じゃないの

うまく効いてくれません

!importantは？

ブックマークツールバーにあるブックマークを開くと上下ある▲▼を消していたんだけど62にしたら効かなくなってしまった。名称変わったのかな？それとも62じゃ無理？神様降臨して〜

ブックマークツールバーのフォルダアイコンを黄色に戻す設定も効かなくなった＼(^o^)／

>>726
俺も
>>727
CSSでは効いてる

>>727
俺も
今気づいたがフォルダアイコンが消えてしまった

folder-item.png取ってきてurl指定して応急処置
必要あるかわからないけどfolder-item.png
https://dotup.org/uploda/dotup.org1635346.png.html

/* Firefox57（Quantum）ブックマークフォルダの色を黄色に戻す */
@-moz-document url(chrome://browser/content/places/bookmarksSidebar.xul),
url(chrome://browser/content/places/historySidebar.xul),
url(chrome://browser/content/browser.xul),
url(chrome://browser/content/places/places.xul) {
treechildren::-moz-tree-image(title, container),
treechildren::-moz-tree-image(title, open),
.bookmark-item[container] {
list-style-image: url("folder-item.png")!important;
-moz-image-region: rect(0px, 32px, 16px, 16px)!important
}
}
/* 「履歴とブックマークの管理」も黄色に戻す */
@-moz-document url(chrome://browser/content/bookmarks/bookmarksPanel.xul),
url(chrome://browser/content/places/historySidebar.xul),
url(chrome://browser/content/browser.xul),
url(chrome://browser/content/places/places.xul) {
treechildren::-moz-tree-image(title, container),
treechildren::-moz-tree-image(title, open),
.bookmark-item[container] {
list-style-image: url("folder-item.png")!important;
-moz-image-region: rect(0px, 32px, 16px, 16px)!important
}
}

出来たよ
ありがとう

ごめん

/* 「履歴とブックマークの管理」も黄色に戻す */ は不要だった

>@-moz-document 対応が空の url-prefix() を除いて打ち切られました
>https://www.fxsitecompat.com/ja/docs/2018/moz-document-support-has-been-dropped-except-for-empty-url-prefix/

>ほとんどの非標準 CSS display 値が廃止されました
>https://www.fxsitecompat.com/ja/docs/2018/most-of-non-standard-css-display-values-have-been-dropped/

chrome://browser/skin/places/unsortedBookmarks.png
これ62でどこいった？

ブックマーク追加のプレビュー邪魔だな

ブックマークツールバー表示させといて↓使ってるわ
Bookmark Tab Here
https://addons.mozilla.org/ja/firefox/addon/bookmark-tab-here/
編集・移動は後回しー

Fx63で ::-moz-tree も廃止っすね

62にあげたら, userChrome.css で下記が効かなくなりました
どこを修正すればよいか教えてたもれ, 賢者様！

/* 未読タブのタイトル文字色を黄色に変更する */
.tabbrowser-tab[unread="true"] {
color: yellow !important;
}

>>731
これやっても戻りません

folder-item.pngをchromeフォルダ入れろよ

>>741
でけたサンキュー

tab周りのcssになんか変更あったのかな

>>739
>>601-602これでどうですかね

>>744
後でちょっと試してみます

>>744
期待通りの挙動です！賢者様！
ありがとうございました！！

タブをたくさん開いたとき一番右に出る>マークを消す方法をご存じでしたらご教示お願いします
名称が分からないのでググれず

左up, 右down
/* タブバーのスクロールボタン非表示 */
.tabbrowser-arrowscrollbox > .scrollbutton-up,
.tabbrowser-arrowscrollbox > .scrollbutton-down {
display: none !important;
}

>>726
これ、分かる方いませんか？

>>749
おそらくautorepeatbuttonでやっていたと思うけど
.scrollbutton-up
.scrollbutton-down
に変わった
ブラウザツールボックスで一発でわかるんだから活用せよ

>>748
スクロールボタン、勉強になりました
ありがとうございます