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/

ブックマークツールバーをマウスオーバーで自動開閉やつを自分好みに弄ってみた

/*ブックマークツールバーをマウスオーバーで開閉する*/
#navigator-toolbox:not(:-moz-lwtheme) { /* Default テーマ */
background-color : hsl(0, 0%, 78%) !important;
}
#navigator-toolbox:-moz-lwtheme {
background-color : var(--chrome-background-color) !important;
background-image : var(--lwt-header-image) !important;
}
#navigator-toolbox {
position : relative !important;
transition : all 0.3s ease 0s !important;
}
#PersonalToolbar:not([customizing="true"]) {
margin-top : -20px !important;
transition : all 0.3s ease 0s !important;
opacity : 0 !important;
}
#navigator-toolbox:hover {
margin-bottom : -20px !important;
transition-delay : 0s !important;
}
#navigator-toolbox:hover > #PersonalToolbar:not([customizing="true"]) {
margin-top : 0 !important;
transition-delay : 0s !important;
opacity : 1 !important;
}

>>142
やはり無理でしたか
結構調べましたが無理っぽいですよね
htmlで<b>してるなら(b)とかで行けると思うのですがそんなサイトはもうめったにないです

CSSでgetComputedStyleみたいなことはムリとしても
そもそもfont-weight: boldになってるなら、セレクターとしてはなんかしら引っ掛けるところがあると思うが

ああダメか、汎用性ねえわ

>>140
まだでしょうか？。
無理じゃないんですよね？。
汚くてもいいので記述お願いします。

なんだこいつ

ずっとスレ荒らしてるチョンだろ
やり口かえて荒らしてるだけだよ
質問者とは別人なのは文の癖で分かる

いや無理じゃないって書いてるんだから、書いて見せればいいだけ

フロートさせて重ねるとかすれば出来そうな気がするが

今少し試して見たけどサイドバーヘッダーの手前に持って来るのよくわからなくて挫折したｗ早っ
css素人な自分では無理だた

つ、釣られたクマー(AAry

ヘッダは隠せなくなるけどできたので要点だけ
・ヘッダを潰してボタンをいい感じに配置
sidebarheader#sidebar-header {min-height: 0px !important; max-height: 0px !important; position: fixed !important;}
sidebarheader#sidebar-header .close-icon {position: absolute !important;}
sidebarheader#sidebar-header toolbarbutton#sidebar-switcher-target {position: relative !important;}
・履歴の[表示▼]をいい感じに配置
・ブックマークやら同期タブやらの時に上部にヘッダ分のスペースを設ける

>>154
そのcssじゃ、まるで駄目駄目だな
無理なら無理ってはっきり謝罪しろよ
無理じゃないけど、なんて思わせぶりなこと書くから、恥をかくことになる

要点だけって言ってんのにこれで全部できると思ったの？
それともそう言えば全部書いてもらえると思ったの？

ID:g8czU6vR0 キチガイ

ようするに


無理ってことね

>>137
@-moz-document url("chrome://browser/content/browser.xul") {
#sidebar[src="chrome://browser/content/history/history-panel.xul"] {
margin-top: -46px !important;
}
#sidebar-header #sidebar-switcher-target,
#sidebar-header #sidebar-close {
position: relative !important; /* クリックに反応するようにする */
}
}
@-moz-document url("chrome://browser/content/history/history-panel.xul") {
#history-panel #sidebar-search-container #search-box {
display: none !important;
}
#history-panel #sidebar-search-container #viewButton {
margin-left: 100px !important;
margin-top: 4px !important;
}
#history-panel tree {
padding-top: 4px !important;
}
}

>>159
おおおおおおお、すっげええええええええ
あなたこそは神ｗｗｗｗｗｗｗｗ


でもサイドバーを閉じるボタンと重なってるよ

とりあえず
>>149
>>150
>>154
>>157
が、まったく役に立たないのはよくわかった
煽るぐらいなら、>>159みたいな役に立つことを書いてみろよ

二人のを参考にしてやっと出来た。使う予定ないけどｗ
まだpositionの概念がよく理解できてないからどこかで学習し直してくる
#history-panel #search-box {
display: none !important;
}
#history-panel #viewButton {
margin-left: 90px !important;
}
#sidebar-box[sidebarcommand="viewHistorySidebar"] #sidebar-header {
margin-bottom: -40px !important;
}
#sidebar-box[sidebarcommand="viewHistorySidebar"] #sidebar-header #sidebar-switcher-target,
#sidebar-box[sidebarcommand="viewHistorySidebar"] #sidebar-header #sidebar-close {
position: relative !important;
}

>>159
>>137です
>>154さん>>159さん
作ってもらえて感謝してます
https://i.imgur.com/ReFneRa.png

margin-left: 100px で左からの位置固定になるわけですが
サイドバーを広げたり狭めたりしたときに「表示」も
サイドバー右に沿いながら可変するにはどうすればいいでしょうか

動作例としては履歴サイドバーの検索を消す前の状態のとき
サイドバーを広げたり狭めたりしたときに「表示」も移動するのと同じようにです

回答者がトリップ付けてない質問者は完全に無視して対応しなければいい

>>163
>>159を元に二箇所変更

#search-box の display: none を visibility: hidden にする
#viewButton の margin-left: 100px を margin-right: 25px にする (×ボタンの分)

その他の余白は環境によって適切な値が異なるだろうから、適宜調整して

とりあえず
ID:yh2IS2d80が何の役にも立たない無能というのはよくわかった

チョンにしてやられたな
マジ情けない

教えてもらえないときは煽れば良いという習慣を付けさせてはダメだ
スルーするべきだった

スルースルーって馬鹿の一つおぼえみたいに言ってるが

>>159みたいな「教えたがり君」もいるってことを忘れるな
がははっは

>>165
遅くなりました
このように変更してみましたがうｐ画像のようになってしまいます
https://i.imgur.com/FMYLEsN.png
#history-panel #sidebar-search-container #search-box {
visibility: hidden !important;
}
#history-panel #sidebar-search-container #viewButton {
margin-right: 25px !important;
margin-top: 8px !important;

あちこちいじってあるためきっと環境のせいなのだと思います
ここまでできただけでも十分です
ありがとうございました（・∀・)つ�I

おい、俺様にも感謝しろよ
俺が煽ったから「教えたがり君」達が湧いてきたんだぜ

>>171
ありがとうございました（・∀・)つ�I

urlfilter.uc.js 0.0.8.3で
つべの動画の始まりに割り込んでくる広告CMを
http*://*.doubleclick.net/*　でブロックしてたんだけど
最近効かなくなっちゃったんだがどう直せばいいかわかる猛者おるか？

ごめんスレ間違えたはw

>>144
このブクマにょきにょきはツールバーも合わせて2行まとめてにょきにょきさせることって出来ますか？

できるよ

>>175
/*ブックマークツールバーをマウスオーバーで開閉する*/
#navigator-toolbox:not(:-moz-lwtheme) { /* Default テーマ */
background-color : hsl(0, 0%, 78%) !important; }
#navigator-toolbox:-moz-lwtheme {
background-color : var(--chrome-background-color) !important;
background-image : var(--lwt-header-image) !important; }
#navigator-toolbox {
position : relative !important;
transition : all 0.3s ease 0s !important; }
#PersonalToolbar:not([customizing="true"]) {
margin-top : -20px !important;
transition : all 0.3s ease 0s !important;
opacity : 0 !important; }
#nav-bar:not([customizing="true"]) {
margin-top : -29px !important;
transition : all 0.3s ease 0s !important;
opacity : 0 !important; }
#navigator-toolbox:hover {
margin-bottom : -49px !important;
transition-delay : 0s !important; }
#navigator-toolbox:hover > #PersonalToolbar:not([customizing="true"]) {
margin-top : 0 !important;
transition-delay : 0s !important;
opacity : 1 !important; }
#navigator-toolbox:hover > #nav-bar:not([customizing="true"]) {
margin-top : 0 !important;
transition-delay : 0s !important;
opacity : 1 !important; }

>>177
ありがとうございました快適にぬるぬるできてます

Thunderbirdの話なんですけど、52.5.2になってから(?)
UI(メインウィンドウ)用のスタイルが動かなくなってしまいました。

ただ、

@-moz-document url("chrome://messenger/content/messenger.xul"){
}

という指定を除去すると何の問題もなく機能します。
ひょっとして@-moz-documentの正しい記法か
メインウィンドウのアドレスが変わったりしたんでしょうか？

url指定なしでも一応弊害は出ていませんが
なるべく具体的に指定できたほうが精神衛生上いいので事情をご存知の方ご教示ください。

下記でURLバーにマウスオーバーでURLバーが広がり、Searchバーが縮まります。
#urlbar,#urlbar-container{
max-width: 350px !important;
min-width: 200px !important;}
#urlbar:hover,#urlbar-container:hover{min-width: 580px !important;}

これを逆にSearchバーへマウスオーバーで広がり、その分URLバーを縮めたい。
urlbarをsearchbarに入れ替えるだけでは、うまくいかない。
どう記述すれば良いのか？

ブックマークメニューのフォルダの上下の間隔を狭くすることは可能でしょうか？

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

誰か、教えて！

>>182
有難うございます。

教えて下さい。
デフォルトの状態からバーの高さに関係すると思われる変更を行ったこと、
�@ ブックマーク・ツールバーの項目をナビバーに移動した。
�A 戻る・進むボタンを Visibility collapse にした。
�B タブバーおよびタブの高さを減らした。
�C アドレスバーと検索バーを両方表示した。
以上の状態のままで(ナビバーの高さは変わらないようにして)
アドレスバーと検索バーの高さを 2〜3 ピクセル低くすることはできるでしょうか？
単純に urlbar と searchbar の height を 26px というように指定したのでは
ダメなのですか？ "おめえ分かってねえなあ" と云われるのを覚悟でお聞きしたく。。

おめえ分かってねえなあ

>>187
ええ、分かってゐません。
貴兄は良くお分かりのやうで、羨ましい

>>180
分かる人いたら教えてやれや！
俺も欲しい。

過去ログ読めば分かるって言われてるのに頑なに読まないから分かってないって言われるんだよ

某県警から先日通報してやった奴に関する問い合わせが来た
すごいよ警察に協力できるなんて感動したわ

>>190
前スレ ＞158
navi-bar-customization-target → height 36px
searchbar-textbox → min-height 23px
urlbar → height 19px
で、好みのレイアウトになりました。
大変有難うございました。

Pale Moonのブラウザでタブとウィンドウを閉じたとき、右クリックで出現する
「全てのタブを復元」
「全てのウィンドウを復元」

の項目を{display:inline}で消去したいのですが、inspectで調べてもidが表示されません。
上記2つのidを教えてください。

>>193
設定とかアドオンでやった方が良くないか？
https://forum.palemoon.org/viewtopic.php?t=13163

onetabの右クリックメニューでいらないやつを消したいのですがどう書けばいいのでしょうか
消したいのはoneTabに全てのタブを送るとこのタブ以外全て〜と左側のタブ〜です

タブバーの左にある余白を狭める方法おしえて

>>196
自己解決しました

>>194
他のメニューはCSSで消去してるからアドオンをインストールする気はありません

>>193
label[＊＊]

ブックマークツールバーにブックマークフォルダを入れているだけど開くと上下の▲▼を消したいんだけど無理かな？

おいらの欲しがっているの未だ?
希望が見えないのう

>>200
ブラウザーツールボックス使えばすぐわかるでしょ
https://developer.mozilla.org/ja/docs/Tools/Browser_Toolbox

>>202
200です。う〜ん中々難しいです。でもありがとう！

項目が多くて絞り切れないな〜。ブックマークフォルダを開けた時によく上下に暴走するから抑制できるアドオンでもあればいいんだけどね

.autorepeatbutton-up,
.autorepeatbutton-down
{
display:none !important;
}

>>205
200です。ありがとうございます。やってみた所うまく動いてないみたいです。なにがダメなんだろう

#BMB_bookmarksPopup これ追加でいけるかな？

WE前のアドオンのUndo Bookmarks Menuみたいに
ブックマークのコンテキストメニューに元に戻す」と「やり直し」を付け加えても上手く行かない
弄れないのかな
ブックマーク弄ってUndoが必要になったら
すべてのブックマークを開いて管理からやり直しをするしかなくなった
めんどい

>>208
Ctrl+Zは？

200です。#personal-bookmarks 追加で無事消えました。
>>205さん、ありがとう！これがあったから助かりました！

>>209
キーボード使うときはキー操作で済ましても
マウス使うときはマウスで完結させて持ち替えを減らしたいものだろ
特にブラウジングはマウス多用するから

Vim Vixen という拡張機能が提供する Hit-a-Hint 風の文字の大きさを
サイトの拡大率を無視して固定したいです。
今現在，userContent.css に以下のように指定していますが，
ページの拡大率によって文字の大きさが変動してしまいます。
.vimvixen-hint {
width: 16px !important;
height: 16px !important;
vertical-align: middle !important;
line-height: 16px !important;
font-size: 90% !important;
-webkit-text-size-adjust: none !important;
}
/* これ以外にも色々設定 (フォントとか) しているのですが恐らく
文字の大きさの変動には関係してこないので省略しました */

font-sizeを％で指定してりゃそうなるでしょ

font-size: calc(16px * 0.9) !important;
にしてみましたが解決を見ませんでした。

viewport系の単位使えばいんでない

>>215
Viewport 単位では一応固定されましたが，ウィンドウの大きさを変更するとそれに追随してしまいます。
私が望むのは Webページの拡大率・ページのフォント設定・Webブラウザの大きさに依らない大きさ文字で表示することなのです。
CSSで指定できるフォントの大きさを調べるとmm指定がちょうどいいと思ったのですが，なぜかWebページを拡大すると文字の大きさも拡大されてしまいました。
ちゃんと
font-size: 4mm !important;
としてあるにも拘らずです。
うーん，仕様なんですかねぇ……。

遅くなりましたが環境は: Firefox 57.0.4 64bit 公式ビルドです。(あんまり関係ないと思いますが……)

定規を虫眼鏡で見て1mmがズレてるとか言うようなもんだろ
それで拡大されないなら同じ絶対単位のpxも拡大されないことになる

拡縮や設定、環境にかかわらず固定ってのはアクセシビリティーの都合上、CSS単独では難しいんでないの

ブックマークなどからサイトを開く時、読み込みが始まるまでの間に表示される真っ白な画面を黒くするにはどうすればよいでしょうか。

Webページの拡大って元々そういうもんじゃね？
CSSその他のローカル設定・下位設定を上回る効力があるからこそ意味があるというか

タブのピン留めの高さを変えることはできますか？

アイコンです

>>212
メディアクエリのmin-resolutionで場合分けしてフォントサイズを指定すればいいんじゃないの

ページ内検索ボックスの幅を広げたい

サイドバーにブックマーク表示してるんですがフォルダアイコンの色を変えるにはどの様に記述すれば良いのでしょうか？お教え下さい。

>>224 前スレぐれ検索してけれ、へばな。
http://egg.5ch.net/test/read.cgi/software/1510394098/13

>>225
おりがとうございます、助かりました。

58.0にしたら
/*　検索バーの右側に履歴を出すボタンを表示　*/
#searchbar .autocomplete-history-dropmarker {
display: -moz-box !important;
-moz-binding: url("chrome://global/content/bindings/autocomplete.xml#history-dropmarker");
}

これが効かなくなってしまった

ハイ次の患者さんどうぞ

>>229
58.0だとクラス指定されてない
あとこれを読んでおくといい
スタイルシートの class と id の違いと使い分け
https://allabout.co.jp/gm/gc/23897/

>>230
ありがとう。勉強になった。
それを読む限りの理解だけれど，Firefox側の考えとしては，
「タブの領域は一つのブラウザの中で一つだけである。
その領域の中に個々のタブが入っている。
だからタブの領域はIDとして，個々のタブはクラスとして指定するように」
ということなのかな？

Web畑の人間じゃないのでCSS哲学はあまり分からないのだけれど，
今回の改変は良い方向だと思ったわ。

>>223
.findbar-textbox {
width: 580px !important;
}
580px とか 58em とか


ページ内検索ボックスを常時表示にしたい

58にしたら#TabsToolbarと#nav-barの間にボーダーが入っちゃたんだけど
border : none !important; とかやっても消えないし
どうやったら消えるんだ

>>233
自己解決
borderじゃなくてbox-shadowのラインだった
#nav-bar { box-shadow : none !important; }
ついでにタブ幅の設定が上手くいかないのも
:root { --tab-min-width : 150px !important; } /* 初期値書き換え */
で強制的に書き換えちゃった

>>233
そもそも58でそんなラインは入らない
完全におま環乙

URLボックスと検索ボックス周りのうっすらな影って消せますか？

すいません
#urlbar, .searchbar-textbox{ box-shadow : none !important; }
で自己解決

firefoxのUIのID名クラス名一覧ってどこ見ればわかりますか？

>>238
一覧よりもブラウザーツールボックス使った方が良いよ
疑似セレクタで挙動が変わったりもするし
バージョンアップで割と変更もあるから

すまん疑似クラスと言いたかった
自分でなんか変だと思ったんだよ

>>239
サンクス
ブラウザーにこんなツールあったんですね
browser.cssを覗けばいいのかな

#TabsToolbar .titlebar-placeholder{ display:none !important; }
にしてたんだけどプライベートブラウジングとかタブ一覧（∨）のiconが右端にいくから調べてたら
タブバーの最期にも同じくプレースホルダーがあったのね
ってことで、クラスに[type="pre-tabs"] 追加で直ったわっしょい

userstyles.orgのスタイルの更新をRSSフィードで知れるようにはできないものかなあ
あと、Dark〜とかBlack〜みたいなサイトを黒くするだけどスタイルの多さには辟易する