userChrome.css・userContent.cssスレ Part12
■ このスレッドは過去ログ倉庫に格納されています
!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 ┌─────┐
│ いちもつ ♪│
└∩───∩┘
ヽ(`･ω･´)ﾉ Firefox99に更新したら ー □ ×が隠れてしまいます 分かる方お願いします
https://imgur.com/a/Yo97LVQ
/*タブをメニューバーの下*/
/* Firefox Quantum userChrome.css tweaks ************************************************/
/* Github: https://github.com/aris-t2/customcssforfx ************************************/
/****************************************************************************************/
@import "./tabs_below_navigation_toolbar.css";
/* move titlebar and its content (menubar, tabs toolbar) below navigation/bookmarks toolbar */
#titlebar {
-moz-box-ordinal-group: 100 !important;
} つづき
/* move menubars / tab toolbars caption buttons to windows top right position */
#main-window[tabsintitlebar]:not([inDOMFullscreen="true"]) .titlebar-buttonbox-container {
position: fixed !important;
right: 0 !important;
visibility: visible !important;
display: block !important;
}
#toolbar-menubar toolbaritem > toolbarbutton .toolbarbutton-icon,
#TabsToolbar-customization-target > toolbarpaletteitem toolbarbutton .toolbarbutton-icon,
#TabsToolbar-customization-target > toolbarbutton .toolbarbutton-icon {
padding: unset !important;
height: unset !important;
width: unset !important; 100にしたらメニューバーを出した時に青くなるのだけど
99の時のような感じに戻すことはできませんか？ >>8
/* メニュー背景の青い色を元のグレーに戻す */
#main-menubar > menu[_moz-menuactive="true"] {
background-color: hsla(0,0%,0%,.12) !important;
} >>9
ありがとうございます
希望通りの色に戻すことができました >>4の /*タブをメニューバーの下*/
タブバーにアイコンを置くとタブの高さがそのアイコンのサイズに引っ張られて大変なことになる、凄まじいね >>10
よくこういう時に「戻った」「直った」という人いるけど
実際には修正ではなくて、カスタマイズなんだという意識はちゃんと持っておくべき
そうでないとトラブった際に話が合わなくなるから https://www.youtube.com/feed/history
上記のサイトで
・履歴タイプ
・再生履歴
・コミュニティ
などのエリア（サイドバー）が広すぎて、動画フィードが狭くなってしまいます
サイドバーを狭くし、動画フィードエリアを広くするには何と記述すればいいでしょうか 検索履歴を表示した時すぐに検索しないようにする
CSSあれば教えてほしいです >>16
そういうのはcssでは無理
検索バーのならjsであったと思う YouTubeのプレイヤーでサムネイルを表示する時、高解像度のmaxresdefault.jpgではなく、
高解像度のサムネイルがあるのに低解像度のhqdefault.jpgなどで表示される動画があります。
これをなんとかmaxresdefault.jpgで表示する方法はありませんか？
一応自分でも
.ytp-cued-thumbnail-overlay-image {
background-image: url("https://i.ytimg.com/vi/<;VIDEO ID>/maxresdefault.jpg") !important;
}
みたいなCSSを作ってみましたが、うまく行きません。
<VIDEO ID>の部分をその動画のIDで可変して読み込めればいいと思うのですが。 仕様変更されたYouTubeのUIを元に戻したいです >>21
YouTubeのUIを元に戻す方法はわかります。
>>20の解決方法はありませんか？
CSS以外のスクリプトやアドオンを使う方法でも構いません。 >>23
ありがとうございます
>>20の解決方法は分からないです
申し訳ないです。。 >>24
いえいえ、お役に立てたようでよかったです。
>>20の解決方法が他の人からもレスがないということは、たぶん無理なのかなと思います。
自分でもいろいろググってみましたから。
それならそれで仕方ないですわ。 スクリプトじゃなく、CSSでも同じようなものがあるんじゃないかと探したら、ありました。
Disable new YT description
https://userstyles.world/style/4067/disable-new-yt-description
こちらの方が軽くていいかもしれません。
ただ、タイトルのフォントが太字だったので、
.ytd-video-primary-info-renderer.style-scope.title {
font-size: 18px !important;
font-weight: normal !important;
}
というCSSを追加したら以前と同じになりました。 以下のようにしても、タブが増えるとオーバーフローのスクロールアロー（こういうの＜＞）がタブバーの両端に表示されるのですが
消す方法はないでしょうか
alltabs-buttonはこれで消えます
.tabbrowser-tab[fadein]:not([pinned]) {
min-width:0px !important;
max-width:150px !important;
}
#tabbrowser-tabs .scrollbutton-up,
#tabbrowser-tabs .scrollbutton-downk,
#alltabs-button {
display: none !important;
} >>27
消えた
toolbarbutton#scrollbutton-up, toolbarbutton#scrollbutton-down {display:none !important;} >>31
ありがとうございます
出たり消えたりでタブが微妙に動いて気持ち悪かったので >>31
ブックマークたくさんあると, ブックマークフォルダを開いてマウスオーバーするだけで一気にスクロールしまくるし, スクロールボタンも消えるやん Firefoxのブックマークツールバーのフォルダボタンを押すと出てくる
メニューの幅が小さくて変えたいです
.bookmark-item[type="menu"] {
width: 500px !important;
}
この辺だと思うのですが、ブックマークアイテムが広がるだけでした menu.bookmark-item, menuitem.bookmark-item {
min-width: 0;
max-width: 32em;
}
menupopup > menu, menupopup > menuitem, menupopup > menucaption {
max-width: 42em;
}
となってるから max-width を大きくすればいい
ブックマークツールバーからのポップアップでは32emで制限され
これを無効にすると42emの制限（その他のポップアップ）となる >>35
サンクスです
うちのuserChrome.cssに追加したところうまく動きませんでした
menu.bookmark-item, menuitem.bookmark-item {
min-width: 0;
width: 32em !important;
}
menupopup > menu, menupopup > menuitem, menupopup > menucaption {
width: 42em !important;
}
こんな感じで、幅を決めてしまえばなぜかうまく調整できましたがよくわかりません すんません>>34ですけど>>35うまく動きました
ブックマークツールバーのアイコンのテキストを消すために
.bookmark-item{
width: 20px !important;
}
これが悪さしてたみたいですありがとうございました
アイコンの名前はコレで消しました
.bookmark-item:not([type="menu"]) .toolbarbutton-text {
display: none !important;
} すいません質問させてください
タブの右クリックメニューから「共有」を非表示にするため、以下をuserChrome.cssに登録したんですが
#tabContextMenu > .share-tab-url-item {
display: none !important;
}
Firefox release版100.0.2だと消えてくれたんですが、ESR 91.9.1とWaterfoxG4 4.1.2（ESR91がベースですよね）では消えてくれません
他に記入する文字があるのか、それともバージョン91だとやり方自体が違うんでしょうか？ すいません自己解決しました
#context_shareTabURL,
で、「共有」を消せました。失礼しました Firefoxのブックマークツールバーのフォルダをクリックして出てくるメニューの背景に
色を付けたいのですけど
#PersonalToolbar .bookmark-item menupopup {
background-color: yellow !important;
}
これだと黄色の額縁のようにメニュー周辺しか色が付きません
#PersonalToolbar .bookmark-item menuitem {
background-color: red !important;
}
これだとマウスオーバーの時にいろが変わりません
何かいい方法を教えてください >>40
#PlacesToolbar {
--arrowpanel-background: green !important;
--arrowpanel-color: yellow !important;
} >>41
ありがとう完璧に動きました
こういったセレクタやプロパティなどはどうやって調べるのでしょうか
FireFoxのブラウザーツールボックスでそれっぽいセレクタを手あたり次第
userCrome.cssに書き込んでもあまりうまくはいきませんでした >>42
ブラウザーツールボックス右上の「…」メニューで「ポップアップを自動で隠さない」にチェックを入れ、対象メニューを開く
ツールボックス左上の矢印アイコンをクリックし、対象メニューをクリック
インスペクターの右サイドバー「ルール」タブの「スタイルを絞り込み」に background と入れる
左のツリーで対象付近の要素を一つ一つ選択しながら
右バーに background: ... または background-color: ... が出てこないか見る
menuitem なんかは backgrond-color: transparent; になっているがこれは透過色
この祖先のどこかで実際の色が設定されているはず…
ツリー上で祖先に向かって要素をたどっていくと、#PlacesToolbar menupopup に
background: var(--arrowpanel-background);
が設定されていることが分かった
https://i.imgur.com/lo3vvy7.png
名前が -- で始まり var(...) の形で使われているのはカスタムプロパティ
CSS カスタムプロパティ (変数) の使用 - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/Using_CSS_custom_properties
背景色を設定するなら文字色も忘れずに
同じようにして color を探し、値を設定(>>41)しておしまい >>43
さんくす、丁寧にありがとうございます
ブラウザーツールボックスはこうやって使うんですね
左上の矢印アイコンクリックして左ペインのインスペクターしかみてませんでした
>>41のgreenも確認できました
これは設定できる箇所が大幅に増えそうな予感、ありがとうございました >>43
こんな感じにブラウザーツールボックスの使い方を解説してくれるとありがたいんだけど
ネット上には全くないんですよね 触れば分かるからな
分からないのは触ろうとしないから 101.0 にしてしまいました。
すると，最大化したときにタブバーの上に3mmほどの不要な部分が表示されるようになってしまいました。
最大化しないときは，その不要な部分は表示されません。
何をどういじれば直るか教えてください。 >>47
もし、userChrome.cssに
:root[tabsintitlebar][sizemode="normal"] #titlebar { appearance: none !important; }
という行があるなら、
:root[tabsintitlebar] #titlebar { appearance: none !important; }
に置き換え
今まで非最大時のみに働いてた設定が最大時にも働くようになった模様 >>48
レス，ありがとうございます。
しかし，userChrome.css
:root[tabsintitlebar][sizemode="normal"] #titlebar { appearance: none !important; }
はないです。
tabsintitlebar で検索をかけてもヒットしません。
う～む。 多段タブで，３段までとし，４段以上にするとスクロールするようにしています。
101.0にしてから，
最大化しないと，タブバーの上には何もないのですが，
https://imgur.com/HK4BUeD
最大化すると，タブバーの上に余白ができます。
https://imgur.com/rPlRyvl
この余白をなくすためには，userChrome.css などで何を変更すればよいか教えてください。 画像を表示したときに背景白、左寄せにしたいのだけど
100.0.2まで効いていたのが101.0から効かなくなって
101.0.1でも変わりありません
100.0.2
https://i.imgur.com/3MJ0NR7.png
101.0.1
https://i.imgur.com/VBI8KqV.png
画像の縦の長さ分しか効かなくなってしまいました
修正箇所を教えてください すみません忘れてました
@-moz-document regexp("^(https?|ftp)(:\/\/[-_.!~*\'()a-zA-Z0-9;\/?:\@&=+\$,%#]+)\.(jpg|gif|png)$") {
@media not print {
body { background: #FFFFFF !important; }
img {position: relative !important; margin: .5em !important; }
}} このスレだったか、以前URLバーの鍵アイコンを緑にするCSSを拾ったのですが、
盾アイコンがトラッカーなどをブロック中に赤くするCSSはないでしょうかね？
鍵アイコンを緑にするCSSです。
#identity-box[pageproxystate="valid"].verifiedDomain #identity-icon,
#identity-box[pageproxystate="valid"].mixedActiveBlocked #identity-icon {
fill-opacity: 1 !important;
fill: #12BC00 !important;
} >>60
うまく行きました。
ありがとうございます。 -moz-accent-color、-moz-accent-color-foregroundがそれぞれAccentColor、AccentColorTextに置き換わるので使ってる人は気をつけて
https://bugzilla.mozilla.org/show_bug.cgi?id=1775247
今のところ103で実装予定（Nightly実装済） Firefox 102.0
テーマ Google Chrome Darkを使用
いままではこれでタブの上に青い線をCSS
.tab-background[multiselected],
.tab-background[selected="true"] {
background: linear-gradient(to bottom, #0A84FF 1px, var(--toolbar-bgcolor) 0%, var(--toolbar-bgcolor) 100%) !important;
}
menupopup > menuitem,
menupopup > menu {
padding-block: 0.25em !important;
}
で出してたのですが､102.0にしたら消えてしまいました｡
デフォのダークやシステムのテーマでは出てるんですけど
その他のテーマでまたタブの上部に青い線出せたらお教え下さい｡ 上の
menupopup > menuitem,
menupopup > menu {
padding-block: 0.25em !important;
}
は余計な行文でした。 テーマがタブの枠色を指定しているとそっちが優先されているぽいです。 >>65
Firefoxに最初から入ってるテーマだったら青い線出るよ >>65
outline: none !important;
を追加 >>67
出来ました！
ありがとうございます。
マジ感謝です。
これで四角タブの上に青線出せました。
>>66
デフォのダーク システム ライトでは青線出せるのは存てましたが無事67さんのお陰で解決出来ました。 「アプリケーションメニューを開きます」を押したとき
メニューが右寄に表示される様に調整したいけど
どうすれば良いか教えてください >>60 を参考にしてて、トラッキング防止の盾アイコンを紫色に戻すやつが上手く動かないのですが
どうすればいいでしょうか？
#urlbar-input-container[pageproxystate="valid"] #tracking-protection-icon-box:not([hasException])[active] > #tracking-protection-icon {
fill-opacity: 1 !important;
fill: #7542E5 !important;
}
今のシンプルなアイコンを紫色にしたいです。こんな感じに
https://prismic-io.s3.amazonaws.com/helpcenter/9c3bedbb-5893-4611-bd3b-627b933ee2f9_firefox_tracking_off.jpg >>70
赤色を紫にするだけなら>>60の
fill: red !important; を fill: #7542E5 !important; に >>71
すみません
そもそも>>60自体が効かないんです >>73
他のは効いています
すいませんどうやらクロスサイトトラッキングが検出されたときにのみ色が変わる様でした
なので動いてること確認できましたありがとうございました googleの検索結果に番号を付けるCSSなんですが、いつの間にか動かなくなっていました
あると便利なので修正箇所分かる方いたら教えてください
よろしくお願いします
@-moz-document url-prefix("http://www.google.co.jp/search";),
url-prefix("http://www.google.com/search";),
url-prefix("https://www.google.co.jp/search";),
url-prefix("https://www.google.com/search";){
/* カウンタを生成 */
div#res{
counter-reset: head !important;
}
/*.g > .r:before{ */
div.rc h3::before {
counter-increment: head !important;
content: "#" counter(head) !important;
font-size: 18px !important;
font-weight: bold !important;
margin-right: 5px !important;
padding: 0px 4px !important;
background: white url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAeCAMAAAAiq38CAAAAA3NCSVQICAjb4U/gAAAAYFBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADu7u7v7+/w8PDx8fHy8vLz8/P09PT19fX29vb39/f4+Pj5+fn6+vr7+/v8/Pz9/f3+/v7///9uR0UGAAAAQUlEQVQYlXXGtwGAMAAEsZ8ATHIk7L+lK5+/QZX0QdYX3ge64W1Qq4PqbIE3QwneCF346QnvAe3wbpgNCtAK74IOWSsakaslG2kAAAAASUVORK5CYII=") left top !important;
color: #bbb !important;
border: 1px solid #bfbfbf !important;
-moz-border-radius: 3px !important;
}
} >>77
div.rc ってどこのこと？
rc なんてクラスついた要素ないと思うんだけど >>79
今まで使っていたcssをコピペしたので、詳しい事はわかりません、ごめんなさい
>>80
紹介ありがとうございます
ただ、サイトの途中に書いてある
/* Google */
div.r h3::before {
counter-increment: result;
content: counter(result) ". ";
}
に変更してみたのですが、こちらでは動かなかったのですが、自分のミスですかね？ >>82
そっちは見るなよ
その上にこうあるだろ
#search h3::before { }
ていうかドメイン限定してるから #search もいらない
ちゃんと自分で検索ページを F12 押して調べなさい そのブログ記事 2021年4月8日更新 だぞ
当時は知らんが div.rc も div.r もないから >>83,85
お二人ともレスどうもありがとう
やっぱり効かないんですね
番号のつけ方的にそっちのほうが好みなんですが、無理なんですかね？ >>86
効くとか効かないとかじゃなくて
少しは自分でウェブ開発ツールのインスペクタで確認しろよ
そうすりゃ汎用性はないけどなんとかする道はある
だけどそういうのは検索ページの仕様変更ですぐ使えなくなる
それを自分で調べる覚悟がなければ無理 >>86
「検索結果のナンバリング」で検索されたし >>89
それで出てくる上位は古かったり間違ってたり・・・
自分でやりたいようにやらないと意味ない >>90 の画像は2つに分かれていて
上の方は、検索結果の内容は div#search の中に入っていることを示したもの
下の方は、階層になっている例として
「Firefox 高速プライベートブラウザー - Google Play のアプリ」
「Android 版 Firefox Beta - Google Play のアプリ」
の箇所を示した
ここから法則を導き出して頑張ってくれ オッ、なんかこの時間帯親切なネ申がいるみたいなんで俺も質問
右クリメニュー等の背景に透過png画像(狐ロゴ)を表示させてたんだけど(.menupopup-arrowscrollbox)
内部仕様が変わってメニュー全体が透過されるようになっちゃった
なのでもう一階層下に(.scrollbox-clip)指定し直してみた
すると表示自体は一応元通りにはなったんだが、なぜかタブバーにも画像が現れてしまう
どうしたらいいのか分からん教えろ下さい<m(__)m> >>90
遅ればせながら、わざわざ画像まで作って説明してくれてありがとう
自分で解決出来れば一番良いので、この機会に勉強してみます アドレスバーでhttpのサイトのURLを赤く表示するCSSを見つけました。
#identity-box[pageproxystate="valid"].notSecure ~ .urlbar-input-box{ color: red }
で、逆にhttpsのサイトのURLを緑で表示することもできるんじゃないかと思うのですが、
どう書けばいいでしょうか？
素人考えで色をgreenにして、notSecureの部分をSecureにすればいいのではないかと思ったのですが、
ダメでした。 自己解決しました。
ふと思い当たって、notSecureを外せばいいのではないかと試したらうまく行きました。
#identity-box[pageproxystate="valid"] ~ .urlbar-input-box{ color: green } おい、もはやお前らだけが頼りなんだが？
マジで頼むが？ >>97
素人考え
:not(#TabsToolbar) >98㌧
駄目だった…w
他にも
tabbrowser-tabs
toolbar-items
TabsToolbar-customization-target
とか試したけど消えず
つかそもそも上位のIDが指定出来りゃ苦労は無いのに
shadow-rootとかいうわけわからんIDだから困る
引き続き気長にネ申を待つ shadow-rootってことはshadowDOM
その下の要素を指定してスタイルを適用するには::partを使う必要がある
だけどuserChrome.cssは::partを使えないから、userChrome.jsのスレで質問し直しの方がいい .menupopup-arrowscrollbox { background-image: url("hoge.png") !important; }
で特に問題ないように見えるが
もしかして background: url("hage.png") !important; してた？ >101
か、解決した…www
つーかそこなの？？？？？？？？
89.0あたりで仕様が変わってからずーっと
あーでもないこーでもないやってたんだが
盲点にも程があるw
101氏をはじめレス下さった皆様本当にありがとうございました<m(__)m> >>62
ありがとう
-moz-accent-color-foreground → AccentColorText
メニューバーの文字色が黒になってしまったものを白に戻せました タブが一つの時はタブバーを非表示にするやつなんですが、
ver.103に上げると画像の通りnewtab-buttonが残るようになってしまいました。
修正方法を教えてください。
https://i.imgur.com/6X0cggh.png
/* Hide New Tab Button immediately next to solo tab */
#tabbrowser-tabs tab[first-visible-tab="true"][last-visible-tab="true"] {
visibility: collapse;
}
#tabbrowser-tabs tab[first-visible-tab="true"][last-visible-tab="true"] + toolbarbutton {
visibility: collapse;
} cssが切れてたので以下で全文です。
これがver.103でnewtab-buttonが残ってしまいます。
教えてくださいませ。お願いします。
/* Hide New Tab Button immediately next to solo tab */
#tabbrowser-tabs tab[first-visible-tab="true"][last-visible-tab="true"] {
visibility: collapse;
}
#tabbrowser-tabs tab[first-visible-tab="true"][last-visible-tab="true"] + toolbarbutton {
visibility: collapse;
}
#tabbrowser-tabs .tabs-newtab-button {
visibility: collapse;
}
#tabbrowser-tabs, #tabbrowser-tabs > .tabbrowser-arrowscrollbox, #tabbrowser-arrowscrollbox {
min-height: 0 !important;
} >>105
toolbarbutton を * に変える >>106
おお！ありがとうございます！期待通りになりました。
いろいろ調べていて、以下にするとシンプルに書けました。
tab:only-of-type, tab:only-of-type + * {
display: none !important;
}
#tabbrowser-tabs, #tabbrowser-arrowscrollbox {
min-height: 0 !important;
} 目的 全サイト見にくいゴシック体・サンセリフ体を表示しない 丸ゴシック体で表示する プロポーショナルメトリクス字詰め
Firefoxフォント設定
「ウェブページが優先したフォントを優先する」チェックはずす
googleサイト→Stylus指定のフォントになる
英語圏サイト（tx16wxなど）→セリフ体
「ウェブページが優先したフォントを優先する」チェックいれる
googleサイト→ゴシック体
英語圏サイト（tx16wxなど）→Stylus指定のフォントになる
ド素人です
和文も欧文もその他言語文字も指定したいんですが、丸ゴシック体になりません
教えてくださると嬉しいです
body {
font-family : "ヒラギノ丸ゴ ProN", "UD新丸ゴ", "UDじゅん", "Helvetica Rounded" !Important ;
font-size : 1em ;
font-weight : 500 ;
-webkit-text-stroke : 0.1px ;
-webkit-text-stroke-width: 0.1px
!important;
-font-feature-settings: 'palt' 1;
}
div,dd,dt,dl,p,em,li,textarea,form,input {
font-size : 1em ;
font-weight : 500 ;
-webkit-text-stroke : 0.1px ;
} >>108
こんな感じでチマチマやる
@font-face {
font-family: "見にくいゴシック体";
src: local("ヒラギノ丸ゴ ProN");
} /* ウインドウアクティブ時のタイトルバーの背景色をOSのテーマ色に変更（以前の規定テーマと同じ） */
:is(#TabsToolbar, #toolbar-menubar):not(:-moz-window-inactive) {
color: -moz-accent-color-foreground;
background-color: -moz-accent-color;
}
最新版（103.0）にしたらこれが効かなくなったんだけどどうしたらいいだろう すいません、Firefoxでブックマークツールバーを常時表示にして、ブックマークをアイコンだけにして大量の
ブックマークアイコンを並べてるのですが、これの余白を更に詰めてより大量のアイコンを並べる事って可能ですかね？
ググってもブックマークメニューの行間（縦）を詰める情報だけ出てきて横に詰める方法が分かりません
この辺はとくに変わりませんでした
↓
#toolbar-menubar toolbarbutton {
padding-left: 1px !important;
padding-right: 1px !important;
} >>113
#PlacesToolbarItems > .bookmark-item {
padding-left: 1px !important;
padding-right: 1px !important;
} >>113
あ！！！出来ました！！！！
長年悩んでいたのですが貴方は神です！ すいません神は>>114です
>>113はただのマヌケなので jsのスレで書いた後こっちの方が適切かと思ったらそういうレスも頂いたのでこちらに移動して来ました
Youtubeで動画と上の検索窓の間の部分消したくてF12で内容見てみたのですが、そこは上の検索窓と一緒になってて（該当部分の文にカーソル合わせると一緒に緑色になる）間の部分だけの指定が見付かりませんでした
検索のある列はytd-searchbox…の指定で細くは出来たのですが、その下部分が不要なのでどうにか消したいです
ヒントでも良いのでアドバイスお願いします >>117
動画上側の1cm程度のスペースを無くしたいという解釈でおk?
だとすると
div id="columns"
div id="primary" #主エリア
div id="secondary" #チャット/動画リスト
の冒頭だから多分この辺の上側の境界/詰め/余白を調べれば良いよな
ytd-watch-flexy:not([theater]):not([fullscreen]) #primary.ytd-watch-flexy,
ytd-watch-flexy:not([theater]):not([fullscreen]) #secondary.ytd-watch-flexy {
padding-top: var(--ytd-margin-6x);
} >>118
遅くなりましたがレスありがとうございます
はい、その部分です
それでいじってみます
どうもありがとうございました 拡張機能スレに書いたけどこっちの方がいいんかな
Stylusを1.5.26にしたら、userstyles.orgからインストールも更新も一切できなくなった
1.5.25に戻すと普通にできる アドレスバーにペーストしたときのみ背景の色が上に数ピクセルずれるんですが分かる方いますか？
カーソル置いただけでは問題ないのですが。
済みませんがどなたかお助けください。
http://iup.2ch-library.com/i/i022196422415874211242.png 106.0b1 で #firefox-view-button の隣にあるセパレータみたいな棒を消す方法はありませんか >>123
#firefox-view-button + #tabbrowser-tabs {
border-inline-start: none !important;
} タブの高さは
#TabsToolbar { --tab-min-height: 24px; }で調整できますが、
タブバーの高さ調整どう記述すれば良いのでしょうか？ >>126
少しは頭使えよ
min-てーのは最小値を設定/変更するのに書くもんだ
それよりも小さく指定されていたものならそれに従って大きくなる
逆の時は何の効果も無い
逆の時も含めて実際に指定したいならそれのないもん指定する必要がある
ということはわかるよな? >>126
せめて伝聞形式にすればいいのに
ここまで堂々とバカを晒すってやっぱバカのさせる業 >>127
よく分からん？
タブの高さじゃなくタブバーの高さを変えたいと聞いてる。 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;
/} >>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;
}
でどうだろう
「未読み込みタブ ・白」は普通に動いたけど、「}」が抜けてるだけだったりしない? >>131
どうもありがとう
/* タブを閉じるボタンをマウスオーバー時のみ表示 */ の方はコピペする部分間違えていました…
正式にはこちらです
/#tabbrowser-tab:not([pinned]):hover .tab-close-button {
/ display: block !important;
/}
ただ、教えて貰った>>131の内容に書き換えてもやはり動いてくれませんでした
問題はuserChrome.cssの記述以外の所なのかな >>133に貼ったコードの一番手前の”/”は無視してください
>>131で教えて貰った内容に書き換えるためにコメントアウトしたものをそのままコピペしてしまいました そもそもタブを閉じる記述全体の行頭の「/」は何目的なの？
1行だったら「/」を先頭につければいいよってのはjavascriptのコメントアウトで
CSSは1行でも複数行でも「/*～*/」なんなんだけども
そこを勘違いしていたとしてもそれはそれで全部消してるわけで >>135
> 1行だったら「/」を先頭につければいいよってのはjavascriptのコメントアウトで
いいえ
1行コメントは「//」ですよ？ >>135
すみません、自分自身ド素人で基本広いものを適当にいじって使ってきたレベルで…
過去に自分でコメントアウトのつもりでつけたのか、それとも拾ってきたものに最初から書かれていたのかはよくわかりません
あと、動いていない部分「未読み込みタブ ・白」ではなく「未読み込みタブ ・白」でした
未読み込みタブ ・白
.tabbrowser-tab[unreadTab] {
font-weight: normal !important;
background: white !important;
}
unreadは以前もバージョンアップの時に動かなくなったような記憶があります
あと「タブを閉じるボタンをマウスオーバー時のみ表示 」もいじった形跡があるということは同時期に動かなくなっていたかもしれません 右クリックメニューの背景色とマウスホーバー色を以下のように変更していたのですが、
いつの間にか反映されなくなりました。
menupopup{
--menu-background-color: #F4F4F4 !important;
--menuitem-hover-background-color: #C1C3C2 !important;
}
色々と試してみたのですが効果が見られませんでした。
お分かりの方、お教えいただけましたらありがたいです。よろしくお願いいたします。 >>139
menupopup {
--panel-background: #F4F4F4 !important;
}
menu[_moz-menuactive="true"], menuitem[_moz-menuactive="true"] {
background-color: #C1C3C2 !important;
} >>140
早速にありがとうございます。
無事、反映されました。心より感謝申し上げます。 下記でタブの高さは変わるのですが、タブの上に空間ができます。
この空間を無くすにはどうすれば良いのでしょうか？
#TabsToolbar { --tab-min-height: 20px; } >>131
すみません、ちゃんと動いていました
ただ、これまではタブ開きまくってどれだけ小さくなってもマウスオーバーすればタブ幅が広がって閉じるボタンが表示されてたのですが
ESR102になってからはタブ幅が広がってくれなくなったため、マウスオーバーしても変化がわからなかっただけでした
タブの数を減らしてタブ幅に余裕持たせた上で確認したら、これまで通り機能してくれました
未読み込みタブに関しては、unreadTabs.uc.jsが動いてくれなくなってる事が原因ぽいです
新規プロファイルでも症状は変わらないので、これはもう諦めるしかないのかな
どうもお邪魔しました すいません、タブツリーを使っているのですが、ピン止めされたアイコンのクローズボタンを消すのってどうするんですかね？
タブツリーのCSSは全く同じものを使っているのに、どこが影響しているのか環境によってアイコンの上にクローズボタンが乗っていることがありピン止めが殆ど機能しません
（ピン止めアイコンをクリックしようとすると閉じる）
バージョンはどちらも105.0.1です URLバー、検索バーの背景色を指定しています。
#urlbar:-moz-lwtheme > #urlbar-background, #searchbar:-moz-lwtheme {background-color: seashell !important;}
これでURLバーの検索候補の背景色もseashellになります。
検索バーから↓キーで検索履歴を表示したときの背景色はwhiteでseashellになりません。
検索履歴の背景色もseashellにすることできませんか？ popup.menuのscrollboxの選択色の指定のやりかたを教えてください。 デフォルト状態のステータスパネル
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自体のフレーム内には表示されなくなりました。
新しい方法分かる方おられましたら教えていただけないでしょうか #statuspanel {
position: fixed !important;
top: 50px !important;
right: 354px !important;
max-width: 70.7% !important;
text-align: right !important;
} >>151
ありがとうございます。
上部ロケ―ションバーまで移動できました
しかし何故か二か所でチラチラするようになりました
一応leftにして調整してみました @font-face { src: local(<フォント名>) }でのフォント置き換えって動作してる？ 自己解決しました
security.fileuri.strict_origin_policyをオフにしないとローカルファイル読み込めなくなったのか 107.0Beta3にアップデートしたらサイドバー自動開閉のcssが効かなくなったわ #sidebar-boxの設定から
margin-rightとleftの項目を削除したら復活した。 検索バーの履歴を表示したとき、その背景とfont-weightを設定したいです。
最近、老化で視力低下したみたい。 >>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; /* ダークモード */
} >>158
早々のレス、ありがとう。
見やすくなりました。 自己解決
cssの問題じゃなかった
about:confIg → browser.urlbar.maxRichResults → -1
これで出なくなりました 2ちゃんの生き残りの老害
「上げるな！ sage進行がマナーだろ！」 >>165
ちゃんとアンカー付けろ！
それがマナーだろうが！
老害ｗ >>167
誰にも迷惑はかけてないｗ
迷惑しかかけてない老害のお前とは違うｗ /* 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↑が機能せず
ページ全体を覆うようになってしまいました。
修正方法分かる方おられましたら宜しくお願いします。 質問スレから誘導されてきました
今日起動したらサイドバーの幅制限解除が無効になってました
107で何か変更ありましたか？
/* サイドバーの幅の制限を無くす */
#sidebar-box {
overflow-x: hidden !important;
}
#sidebar,
#sidebar-header {
min-width: 0px !important;
max-width: none !important;
overflow-x: hidden !important;
} >>172
/* サイドバーの幅の制限を無くす */
#sidebar-box {
min-width: 5px !important;
overflow-x: hidden !important;
}
#sidebar {
max-width: none !important;
overflow-x: hidden !important;
} >>172
よくわからんけどこうかな
#sidebar-box {
min-width: 0px !important;
max-width: none !important;
overflow-x: hidden !important;
} >>172
108bのブラウザツールボックスでちょっと覗いて見た感じだと
min-widthとmax-widthの記述部分を#sidebar-boxの方に持ってけば機能するかも ありがとうございます
#sidebar-box の方に全部持っていったら直りました 今回の更新でサイドバー自動開閉効かなくなったんですが原因わかりますか？ /* サイドバー自動開閉 */
#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;
} /* サイドバーを自動開閉するようにする （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;
} >>178
#sidebar-boxと#sidebar-box:hover内にそれぞれあるrightを消せばいけるはず 解決しましたありがとうございます！
これがあるからfirefox使い続けてるから本当に良かった・・・ >>179
自分も自動開閉使えなくなって困ってたけどこれで出来るようになりましたありがう >>179
>>178
のでも良いんだけどカスタマイズしやすい方が良いかなと
:root {
--thin-tab-width: 20px;
--wide-tab-width: 220px;
ここで幅を好みに変えてね
--thin-tab-width: 20px;
カーソルを合わせる左側の所の幅（20で太いと思ったら15とか数字を小さくする）
--wide-tab-width: 220px;
サイドバーの幅（取り敢えずタブと同じぐらいにしてあるので幅は好みに） /* 検索バーを上に移動 */
.browserContainer > findbar {
-moz-box-ordinal-group: 0;
position: fixed !important;
right: 1em;
border: 1px solid threedshadow !important;
}
今回のバージョンからページ内検索バーが表示されなくなってしまったんですが
どなたか分かる方ご教授願います >>184
position: fixed を消す >>185
動作するようになりました。ありがとうございます！ >>186
right: 1em; も消していい
border-top: none !important; を追加すれば検索バー上部の枠線がなくなってすっきりする 好みで
transition: none !important;
margin-left: 15px !important; >>187
>>188
重ね重ねありがとうございます！ border: 1px solid threedshadow !important; は無くていいはず margin-left: 15pxはいらない勘違い >>185 >>187
↓の2行、もしかして今回のバージョン前でも無くてよかったの？
position: fixed !important;
right: 1em; サイドバー自動開閉はAutohideSidebar2.uc.jsだと感知幅の部分が邪魔にならない ページ内検索バーの話が出たついでに・・・
/* ページ内検索バーの閉じるボタンを左に移動 */
.findbar-closebutton { -moz-box-ordinal-group: 0; }
/* ページ内検索バーのテキストボックスの横幅を変更 */
.findbar-textbox { width: 20em !important; } 検索バーをChrome風にする
豆腐屋が更新してた ブラウザーツールボックス開くまでは行けたけど肝心の消したい場所をどうやって見つけるんですか？
toolbarだけでも膨大過ぎる 進むの隣のリロードボタンとアドレスバーのリーダービューリロードお気に入りボタンを消したいんです これでどうですか
#reload-button, #star-button-box, #reader-mode-button {
display: none !important;
} >>200
左上の矢印ボタンをクリックしてからブラウザーの調べたい部分をクリック
https://i.imgur.com/aMLVX6s.png >>203
>>204
機能しましたし使い方も理解できました
ありがとうございました タブの右横にある｢+｣(新しいタブを開きます)ボタンの背景色を変えたいです >>207
#tabs-newtab-button { background-color: yellow !important; } cssのvarが効かないのですが何が原因でしょうか？
firefoxは107です >>211
定義しました上にあるサイドバーのcssも試してみたのですがvarの部分を書き変えなければ動きませんでした
プロファイルの問題でしょうか？ >>4
自分もこの現象なったからいまだに99以前のバージョン使ってるわ 107で多段ブックマークツールバーおかしくなったけど
対応してもらえたっぽいかな
ありがとうございます >>215
それらしいワード英語でググったら海外ニキの解説動画やcssファイル置いてあって
最新版でも綺麗にタブをロケバーの下に置くことできた どうにもお手上げなので分かる人いたら教えてください。
タブを多く表示させるためにタブの幅の最小値を
/* タブ幅の設定 最小値 デフォルト 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ボタンを表示させるために右を優先したいときはどうすればいいんでしょうか？ >>218
ありがとう
ホイールクリックは知らなかった
1個1個コンテキストメニューから消してた
この質問と同じかな
https://support.mozilla.org/mk/questions/1380017
タブ幅の最小値を少し増やすかキーボードでctrl+w、ctrl+F4ってのもあるみたいだけど・・
とりあえずホイールクリックで我慢します 解決策ではないけどどちらかを追加してみるとか
/* アクティブなタブの幅を広く */
.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;
} ごめん
アクティブなタブをホバー時に幅を広げる は使えないな >>220
なるほどと思ったけど、これだとxボタンを連続クリックしてタブを複数消せないんですよね
1個消すごとにタブ幅が変わってしまってxボタンの位置もズレるので 優先とは違うけどカレントタブに×を表示するだけなら
about:configでbrowser.tabs.tabClipWidthをタブ幅より少なくする
いっそ0とか >>217
自分もアクティブなタブにマウスをホバーさせるとxが表示される…ってのができなくなって困ってた
ちょっとしたことなんだけど、使い勝手は随分悪くなるよね
初めは閉じるボタンを一番左にもってくることで解決してた
でも代わりにfaviconが消えてしまうのが嫌でやっぱり元に戻した
あれこれ悩んで色々調べてた所、TabMixPlusが復活してることを知った
これで全てが解決しました >>223
タブが狭くなったときは逆に非アクティブタブは×が出なくなって欲しいので
browser.tabs.tabClipWidthはちょっと違うかな
217はホイールクリックで対処で慣れました 自分はマウスオーバーで閉じるボタンが出るようにしてるわ おくすり出しておきますね
#tabbrowser-tabs[closebuttons] .tabbrowser-tab:hover .tab-close-button:not([selected]) {
display: revert !important;
} 本スレで公開されてたものと思いますが、ver107では正常ですが108ではバーの位置がトップになります。
下3行目transform: translateY(0px);を50pxにするとうまくいくのですが、フォルダ＞フォルダを開くとズレます。
スキルある方、よろしくお願いします。
/*** ブックマークツールバーをマウスオーバーで自動開閉 ***/
#PersonalToolbar:not([customizing="true"]) {
transform: translateY(-500px);
transition: transform 0s ease 300ms !important;
position: absolute !important; z-index: 1;
display: block;
width: 100%;
}
#navigator-toolbox:hover > #PersonalToolbar:not([customizing="true"]) {
transform: translateY(0px);
transition: transform 0s !important;
} >>229
mozillazine.jpに同じ件で質問出てるみたいだけど、これ君？ >>230
はい、すみません私です。
5ちゃんねるで書き込みできない現象が発生しているようなのでレスないと思いmozillazine.jpにも投稿しました。 >>231
https://forums.mozillazine.jp/viewtopic.php?f=2&t=20811
これはひどい
「？」だの「新規プロファイルをつくる意味なんてありませんよ」だの
せっかく説明してくれてるのに意思疎通ができてない
失礼極まりないやつだな AutohideSidebar2.uc.jsを使わせてもらってるのですが
ミスクリックでサイドバーの幅が微妙に変わってもやもやしてます
デフォルトfirefoxにこれを入れた状態のサイドバー幅にするにはどうしたらいいですか？ 今日バージョンアップして>>229と同じことで困っていて見に来たんだけど
こりゃ聞ける雰囲気じゃないな マルチポストするなら あっちでも質問したことを書いておけよ
マジで迷惑だわ誰か助けてくれん？ Firefox_ToolBarButtonsバグってます ブックマークツールバーをマウスオーバーで自動開閉したい。
次で動作するけど、サイトの表示部がズレない方法ないですか？
/*#PersonalToolbar:not(:hover) {
visibility: collapse !important;
background-color:transparent !important;
-moz-transition-duration: .5s !important;
-moztan-rsition-timing-function: ease-in-out !important;
}
#navigator-toolbox:hover > #PersonalToolbar {
visibility: visible !important;
-moz-transition: .5s ease-in-out;
} 108になってタブバーが下になってサイト表示と重なって困ったことになっていたがなんとか直せた
いらなくなったのに消していない記述が悪さをしていたようだった
見よう見まねなので記述を足すばかりでやってきたが今もいらないのが残ってるんだろな URLバーの右にある星を以下で非表示にしてるんですけど、
#star-button-box {
display: none !important;
}
108.0になってから、メニューの「ブックマーク」→「現在のタブをブックマーク」から
ブックマークしようとすると「ブックマークを追加」のポップアップが一瞬で消えてしまうようになりました。
星を非表示のまま、ポップアップを表示したままにできませんか。 >>241
#star-button-box {
position: relative !important;
top: var(--urlbar-height) !important;
} >>241
サンクス、確かに目につかなくはなったけど
ポップアップを表示したままにするのは何かそういうオプションが無いと無理か。
ポップアップにマウスもっていかないと数秒で消えちゃう。 >>243
visibility: collapse !important;
ではどう？ >>244
動きとしては>>241と同じですね。
ポップアップは一瞬で消えちゃいます。 >>243
それの完全な対策はCSSでは恐らく無理だけど、メニューからブックマークしているのならこんなのはどうかな。
/*
URLバー右端のブックマークボタンをウィンドウ右上隅に配置することで隠す。
108 以降は display プロパティ や visibility プロパティで隠すと、
ブックマークしたときのブックマーク編集パネルも表示されなくなってしまう。
右上隅に置くのはブックマーク編集パネルを開いたとき、キー操作やマウ
スオーバーしないままでいると一定時間でパネルが閉じてしまう問題への弥縫策
を兼ねる。この位置はメニューの「ブックマーク」→「現在のタブをブックマー
ク...」をクリックした直後のマウスポインターの下になるので、この経路で表示
させたときは自動的に閉じるのを防げる。
*/
#star-button-box {
position: fixed !important;
top: calc(0px - var(--urlbar-height)) !important;
right: 0px !important;
}
#editBookmarkPanel {
margin-block-start: 0px !important;
} 108にて、SidebarModokiのDLのCSSが効かなくなったようです >>247
ありがとうございます。参考にして以下のようにしてみました。
かなり愚直ですけど…
#star-button-box { /* URLバーの☆は「ブックマーク」下近辺に隠す */
position: fixed !important;
top: 62px !important;
left: 209px !important;
}
#editBookmarkPanel { /* メニューの「ブックマーク」直下に表示 */
margin-top: -73px !important;
margin-right: -286px !important;
}
これならメニューから「現在のタブをブックマーク」で、そのマウス位置にポップアップが表示されるので、オンマウスで数秒経っても消えないですね。 このような感じにしました。
https://i.imgur.com/flCMEvM.png
おそらく107まではこんな感じだったと思うのです。 ブックマークツールバーをマウスオーバーで自動表示する方法教えて! pixivトップの画像一覧で、ユーザ名にマウスオーバーするとポップアップでユーザ詳細が出てくるんですけど
邪魔なのでポップアップが出ないようにしたいのですが、要素を調査しようにも消えてしまい捕まえられません
どうやって調べればいいでしょうか >>253
1. デバッガーを開く
Ctrl+Shift+C, Ctrl+Shift+Z とか
2. デバッガーを開いた状態で対象にマウスオーバーしてポップアップを出させる
デバッガー以外の場所をクリックしてフォーカスを移してしまわないよう注意
3. F8 キーで「停止」
あとはインスペクターを開いて煮るなり焼くなり >>254
すみません、F8で停止しないようです
１．Ctrl+Shift+Cでデバッガを開く
２．マウスオーバーでポップアップさせる
３．F8押しても停止せずマウスオーバーが離れるとポップアップが消える 停止はできませんでしたがセレクタは確認できたので、それでポップアップを非表示にできました
ありがとうございました >>255
Ctrl+Shift+Cの後に「デバッガー」タブをクリックしないとF8で止まらない まあカンマだと一連の動作だとわかりにくいよな
Ctrl+Shift+Cでインスペクター開いてからCtrl+Shift+Zでデバッガーを開く Aris-12さんのCustomCSSforFxを適用してる環境で
alice0775さんのuserChrome.jsのスクリプトを動くようにしたいんだけど
双方のuserChrome.cssとuserChrome.jsって
共存可能なんでしょうか
そのまま内容をマージしちゃっても大丈夫ですか >>258
ありがとうございます
F 8で停止してインスペクターでセレクター確認できました ‹‹239
ToolbarAutoHide.uc.jsで解決。
ただし多段表示は問題あり。 >>257-258
補足ありがとう
まさしく「一連の動作」のつもりだったんだけど分かり難かったですね >>259
そもそもファイル被ってないからマージするものがないでしょ >>251
#PersonalToolbar{
--uc-bm-height: 20px; /* Might need to adjust if the toolbar has other buttons */
--uc-bm-padding: 4px; /* Vertical padding to be applied to bookmarks */
--uc-autohide-toolbar-delay: 600ms; /* The toolbar is hidden after 0.6s */
/* 0deg = "show" ; 90deg = "hide" ; Set the following to control when bookmarks are shown */
--uc-autohide-toolbar-focus-rotation: 0deg; /* urlbar is focused */
--uc-autohide-toolbar-hover-rotation: 0deg; /* cursor is over the toolbar area */
}
:root[uidensity="compact"] #PersonalToolbar{ --uc-bm-padding: 1px }
:root[uidensity="touch"] #PersonalToolbar{ --uc-bm-padding: 7px }
#PersonalToolbar:not([customizing]){
position: relative;
margin-bottom: calc(0px - var(--uc-bm-height) - 2 * var(--uc-bm-padding));
transform: rotateX(90deg);
transform-origin: top;
transition: transform 60ms linear var(--uc-autohide-toolbar-delay) !important;
z-index: 1;
}
#PlacesToolbarItems > .bookmark-item{ padding-block: var(--uc-bm-padding) !important; }
#nav-bar:focus-within + #PersonalToolbar{
transition-delay: 100ms !important;
transform: rotateX(var(--uc-autohide-toolbar-focus-rotation,0));
}
#navigator-toolbox:hover > #PersonalToolbar{
transition-delay: 100ms !important;
transform: rotateX(var(--uc-autohide-toolbar-hover-rotation,0));
}
#navigator-toolbox:hover > #nav-bar:focus-within + #PersonalToolbar {
transform: rotateX(0);
} >>264
レス、ありがとう。Ver109でデストしました。
1行の空行が表示され、そこにマウスオーバーでバーが表示されてます。 var(--urlbar-height)のようなCSS変数？を駆使して、画像の赤ポイントの座標を取得したいんですが、どのようなCSS変数を使えばいいでしょうか？
https://i.imgur.com/kH9w4Au.png
X座標＝「ブックマーク」の左端
Y座標＝メニューバーの高さ＋タブバーの高さ＋URLバーの高さ
を計算して使いたいです >>268
それはユーザ宣言するCSS変数だと思うのですが、
>>247にある --urlbar-height も実はその人が変数宣言したもので、Firefoxにあらかじめ組み込まれているものではない、ということでしょうか
ということは「メニューバーの高さ」といった値もCSSでは取れないんですかね 後者はともかく前者は変数で定義されてるわけがないから
どのみちJavascript側でgetBoundingClientRectするしかないのでは？ はー、--urlbar-height あたりのプロパティは特別扱いで組み込まれてるんですね…
ありがとうございました 特別扱いというか、Firefox のUIおCSSｓで使うために設定している
ユーザーのために設定してるわけじゃない
我々はそれを勝手に利用してるだけ なんか変なtypoになった・・・
「UI の CSS で」だよ 108.0.1にバージョンアップしたところurl.バー内のアイコン(☆、その他アドオンアイコン)の表示が大きくなってしまいました
下記のcss.の記述のどこを変更したらよいのか教えて下さると助かります
/* ツールバーアイコン コンパクト化 */
#identity-icon,
.searchbar-search-icon {
width: 14px !important;
height: 14px !important;
}
#nav-bar .toolbarbutton-1 > .toolbarbutton-icon,
#nav-bar .toolbarbutton-1 .toolbarbutton-badge-stack {
padding: 2px !important;
margin: 0px !important;
width: 20px !important;
height: 20px !important;
}
[uidensity="compact"]:root .urlbar-icon {
width: 20px !important;
height: 22px !important;
padding: 2px !important;
}
#star-button-box[animationsenabled] > #star-button[starred][animate] + #star-button-animatable-box {
top: calc(50% - 17px) !important;
margin-inline-start: -6.5px !important;
}
続く 275から続き
/* アイコン小さく */
#nav-bar .toolbarbutton-1 > .toolbarbutton-icon,
#nav-bar .toolbarbutton-1 .toolbarbutton-badge-stack,
#toolbar-menubar .toolbarbutton-1 > .toolbarbutton-icon,
#toolbar-menubar .toolbarbutton-badge-stack,
#TabsToolbar .toolbarbutton-1 > .toolbarbutton-icon,
#TabsToolbar .toolbarbutton-badge-stack {
padding: 2px !important;
margin: 0px !important;
width: 20px !important;
height: 20px !important;
}
/* コンパクト化 */
.urlbar-go-button,
.search-go-button {
max-width: 14px !important;
}
#nav-bar,
toolbar .toolbarbutton-1 {
padding: 0px !important;
} >>278
続く、の件ではイラっとさせて申し訳ない。専ブラ慣れてなくてエラーですぐに書き込めなかったの
275に書いた症状はこんな感じです
1 107.0.1まで https://imgur.com/a/gTXgDje
2 108.0.1 https://imgur.com/a/ln7SFW5
何か所か表示に変化が出た中でurlバー内のアイコンがバカでかくなるのだけは自力ではどうやっても解決出来ません
278でヒントを頂いたのですが残念ながらお手上げです
275&277の記述も多分4~5年前に親切な方がcssスレに書き込んで下さったものの流用です
よろしくお願いします >>279
そうやっていつもCSSでいじってるからわからないのだろうけど
それは「バカでかく」なってるんじゃなくて標準のサイズなの
まずそれを理解しよう
そして >>278 でインスペクタの画面貼ってやったよね？
赤線で囲ってやったよね？
それでわからないんだったらCSSでいじるのなんてやめちまえ >>281
ゴミ画像を何度も貼るなよ
同じ様に貼ったよね？
i.imgur.com URL で画像の直接リンクだし
見てほしいところを赤で囲ってる
まさか、png じゃなきゃ嫌だとか、□じゃなく◯で囲めとか
そんなアホなこと言う気じゃないだろうな？ まあ、実際には画像ファイルの形でアップされているわけじゃないから
直リンというのは正確ではないが
画像ファイルへのリンクの形式のURLにしていてそのまま表示できる
という意味だと普通は解釈できると思うけど・・・ キッズなんているわけないじゃん
スマホも専ブラも使えないPCジジイならではって感じ
老害化してることにも気づけず古参ぶって上から目線なのもまたわかりやすい 言いたいことがあるなら、直接アンカー付けて問題点を指摘すればいい
直リン出来てない人A： >>275,277,279
直リン出来ている人B： >>280,282,284
こーやって貼ってくんないかなの人C： >>281
CのレスはAに対してのものだったが、Bの直後にアンカーなして書かれたため
BはAが書いたものと誤認して話がおかしくなってしまった
コレが真相 Cが元凶
どうでもいい直リン指摘のために同じゴミ画像を貼り直すという余計なことをしたせい
しかもアンカーなしで
こちらはAに対して情報提供済み
君たちは何もしてない AとCが同じ画像だとお前でもわかるんだからお前が落ち着いていればそれで済んだのに >>287
おじいちゃん、教えてあげるね
>>281だとスマホや専ブラなら画像が自動的にサムネ表示されるんだよ
だからぱっと見てどんな画像が張られたかすぐにわかる
>>279だといちいち他のサイトに飛んで画像を見に行かなきゃいけないんだよ
この違いがPCしか知らなく5chも未だにブラウザで開いてるおじいちゃんには理解できなかったんだよね
てかこうやって説明しても、使ったことのないおじいちゃんにはやっぱり理解できないかな？ >>291
ほら、論点や登場人物がわかっていない
Bはサムネ云々など当たり前の常識としてわかっている
>>278 で先にそうやって貼っている
直リンが出来ていないのはAだ
Bはもう用済みの貼る価値のないゴミ画像をURL形式変えて貼るなって言ってるんだよ
それともなにか、>>281 でサムネ化したことによってなにか有益なレスが付いたのかな？
なにもないよね？
じゃあなんで貼った？ 年の暮れだというのに最後にレスしたほうが勝ちのマウント合戦か じゃリアルおじさんが見守っててあげようｗ
食べ物が腐敗しやすい生暖かいくらいな視線でｗｗ ﾜｯﾁｮｲ c178-fqia は
>>291 のような当たり前のことを得意げに説明して
自分が優位に立ってると思い込んでるのだろう
もしくは、あえてバカを演じて荒らしているか？ >>292
画像貼るならサムネ化されるように張れといってるだけ
わかったの？まだよくわからないの？うんこなの？
ぐずぐずぐだぐだ言い訳書かなくていいからさ、それだけ答えてみよう >>297
だから相手を間違えているのがまだわからないのかな？
頭が悪くて理解できないないのか、頭が悪いことすら自覚できないのかどっちだね？
サムネ化されるようにURLを記載してなかったのは
(A) >>279 だ
(B) は >>278 で https://i.imgur.com/bEIm9GE.jpg とサムネ化されるURLで記載している
>>283 以降の直リン云々の話の前にだ >>298
あのね、おじいちゃん
>>279に対して>>281が注文付けてるわけだ
そこにおじいちゃんが>>282で意味不明なマウントとってるわけだ
だからおじいちゃんが笑われてるんだよ？
ワシは前にちゃんとはっとるんじゃーとか必死だけど、そんなこと聞いてないんだよ？
おじいちゃん一人、糞どうでもいい事に拘って糞どうでもいい理屈をウダウダグダグダ並べてるんだよ？うんこなの？ どうやら 294 が言ってる通りらしい
必死におじいちゃん連呼するしかできない生き物か
そう思うとかわいく思えてきた 108からロケーションバーのcookie badgeが表示されなくなって地味に不便
削除されちまったのか？
まだ生きてるようならネ申よ以下手直しﾖﾛ
↓
#identity-permission-box::before {
content: "" !important;
display: block !important;
width: 6px !important;
height: 6px !important;
position: absolute !important;
margin-inline-start: -32px !important;
margin-top: -8px !important;
background: Highlight !important;
border-radius: 100px !important;
} youtubeの適当なチャンネル→動画タブをクリックすると動画一覧が出てきます
この表示が今は4列なので5列以上で表示させたいのですがCSSでできませんか？
ブラウザを拡大しても余白が増えるだけで4列のまま変わりませんでした
動画のサムネを小さくすると列が増えるかもと思い下のようにやってみたところ小さくはなりましたが列は増えませんでした
.style-scope ytd-rich-item-renderer {
width: 180px !important;
}
なにか5列以上で表示させる方法があれば教えてください >>304
サムネ小さくていいなら
ytd-two-column-browse-results-renderer.grid:not(.grid-disabled) {
max-width: 100% !important;
width: 100% !important;
}
ytd-rich-grid-row {
width: 50% !important;
} >>304
ytd-rich-grid-renderer {
--ytd-rich-grid-items-per-row: 8 !important;
} 訂正
ytd-rich-grid-renderer {
--ytd-rich-grid-items-per-row: 8 !important;
}
ytd-rich-grid-renderer > #contents > ytd-rich-grid-row,
ytd-rich-grid-renderer > #contents > ytd-rich-grid-row > #contents {
display: contents;
} >>305-307
ありがとうございます
どちらも5列以上にできました ブラウザツールボックスで要素選択するときに矢印がブラウザ内だけで
メニューバーやツールバーの要素が表示されないんですけど何か設定しないといけないですか？ Tampermonkey Script Summary Ver3 (for stockpiling)
https://pastebin.com/6i5JaHRg 5ちゃんの書き込み欄の大きさを指定して固定することはできない？ Firefox110にしたらピン留めしているタブ（3つ）の一番右のタブにだけうっすらとクローズボタンが出る
アクティブの時は出ないけど一番右のピン留めタブが非アクティブでマウスオーバーすると出るという感じ
どうすれば消えるでしょうか？ すみません。文字数が少ないピン留めタブを一番右に持ってきたら「+」のボタン（新規タブボタン）でした。
実際にクリックしても新規タブは開かないのでいいのですが、ピン留めタブ複数の一番右端だけこうなります。 >>323
どうすればそんなことになりますか？
すべてのカスタマイズをやめてみれば？
つまり新規プロファイル >>323
しくじったら最初に戻る
これ基本です
それをせずにあーだこーだ迷走するのはおバカさんのやることです >>325
>>327
そうも思ったのですが原因が分かりました。userChrome.cssではなかったです。
CSSはこなれているのに他のバカに下手くそ呼ばわりされたので何が原因だったかはすみませんが伏せます。
325さんと327さんだけには治りましたという報告をしたく投稿させていただきました。 >>328
自分が困ったときは他の人に助けを求めるけど
同様の状況で困っているかもしれない他の人を
助けようとは思わないということか 原因がわかった、治った
そんな中身のないのは報告でなくゴミだよ
しかも余計な事書いてるから有害でしか無い ブックマークツールバーのプルダウンメニューのアイテムの行間を狭めたい。88のように。スタイルの定義を教えて。 browser.compactmode.show = true
browser.uidensity = 1
これじゃだめなんですか >>337
無理ですた。
あと、仕切り線を太くする方法や 外枠線の付け方もスタイルの定義を教えて下さい。 browser.compactmode.show = true だけでもコンパクト表示は有効になる
browser.uidensity = 1 で起動時 ブックマークツールバーの表示が数秒（１～３秒）表れない
ですた >>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;
} >>341
:1pxに変更したら、88のようにブックマークツールバーの行間が詰まりました、ありがとうございます。
padding-block: 1px !important; /* reduce to 3px, 2px, 1px or 0px as needed */ メニューバーのプルダウンメニューのアイテムの行間を行間を狭めたい。88のように。スタイルの定義を教えて。
自力で試したが１ミリも動かせない こうやって勝手に隙間をつめておいて
あとでバージョンアップで表示が壊れて泣きついてくる
そんな未来がありありと見えます ::selection {
background-color: red;
}
が反映されないサイトがあります
例えばBing検索結果のページでは反映されますが
Bingのチャットタブに移ると反映されなくなります
チャットでも反映されるようにするにはどう書けばいいですか？ 反映されてないのはshadow-rootの部分だから
基本的にはjs案件になるのかな？ 誘導先で忘れた頃に回答
#navigator-toolbox {
border-bottom: none !important;
} Thunderbirdのメッセージペインのスクロールバーのスライダー？の色は
* {
scrollbar-color: rgb(200, 200, 200) lightgray !important;
}
で変えられましたがスライダーじゃない部分の色を変える方法をご教示ください >>351
スライダーの上下の部分です
スライダーが車とすれば道路部分といえばいいのでしょうか >>349
Firefoxはスライダーと背景色しか変えられないからThunderbirdも同じなのではないかな >>350 が答えのようだが、そこを変えても駄目なら駄目なんじゃないかな ありがとうございます
急に忙しくなってスクショあげたりできずすみません
落ち着いたらまたお聞きするかもしれません 度々すみません
ようやく落ち着きました
http://or2.mobi/data/img/320425.png
>>349で変えたのは①で
変え方を知りたいのは②の部分の色です >>358
>>394ので変わりますよ
rgb(200, 200, 200)がレールとボタン lightgrayがスライダー >>359
さっそくありがとうございます
http://or2.mobi/data/img/320426.png
rgbの方は反映しますが lightgray を他の色にしてみましたがなぜかうまくいきません
どこが間違ってますでしょうか
テーマは標準のLightです >>361
うちだとこれでいけますけど
何が違うんだろうか
* {
scrollbar-color: green orange !important; /* レールとボタン スライダー */
} これも同じです
:root {
scrollbar-color: green orange !important;
} 何度もありがとうございます
http://or2.mobi/data/img/320427.png
やっぱりダメみたいです
:rootの方もです
いつもこのスレ見てますので何かあれば教えてください
ありがとうございました #statuspanel {
position: fixed !important;
top: 18px !important;
left: 920px !important;
text-align: left !important;
}
Firefox112にアップしたところ
ここかどこかで見た、ステータスパネルを強引にロケーションバー内に移動させるこのCSSが
上からブラウザの下まで縦方向にその幅分全体で表示されるようになってしまいました
元通りに下にあったステータスパネル分の高さで表示するにはどうしたらいいでしょうか
hightを入れてみて一見ウマくいったかと思ったのですが、細く表示されて見えなくなったりするので
スマートは方法はないかと・・ >>366
display: block !important; 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」に差し替えると今まで通り いつからか、下記動かなくなった。
/*** ページ内検索バーを上に移動 ***/
#main-window:not([chromehidden="true"]) > .browserContainer > findbar {
-moz-box-ordinal-group: 0;
border-top: none !important;
} >>371
findbar {
-moz-box-ordinal-group: 0 !important;
border-top: none !important;
border-bottom: 1px solid ThreeDLightShadow !important;
transition: none !important;
} >>372
ありがとう。
Ver112ではOKなるも113では動作しません。 /* 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では動かないみたいなんですよね >>375
112で動作するよ
!important;付けてみるとか >>376
動作してますか・・オマカンとすれば何かと干渉してるんだろうけど
!important;付けても、userChrome.cssの中身を>>375のだけにしても、スクリプト全部無効にしても
拡張をあれこれ無効にしても、などと色々試してみたけど自分の環境ではダメみたいです。仕方ないです >>377
こっちの112でも動作するなあ
しかしこれいいなopacityと組み合わせたらさらに良くなったありがとう >>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;
} >>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;
} >>374
いいえ、372です。
369は意味不明です。 >>381
「-moz-box-ordinal-group: 0」を「order: -1」にしないと動かないんじゃないの >>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”をどう修正するの？ 再生中のアイコンの背景をアニメーションさせる
/* 再生中アイコンの背景アニメーション */
.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;}
} >>377
自分も駄目で色々試したら上手く行ったので、参考までに
その部分だけ別ファイルにして@importで読ませるかCSS_Loader使うかしたらちゃんと動作した >>369 さんの情報を参考にしてタブバーを下にできました ありがとうございます
112まで↓
/* タブバーをツールバーの下へ移動 */
#titlebar { -moz-box-ordinal-group: 2; }
113から↓
/* タブバーをツールバーの下へ移動 */
#titlebar { order: 1; } 113で
タブをダブルクリックでリロード.uc.js
再起動出来なくなった
何方かお願いします
(function(){gBrowser.tabContainer.addEventListener("dblclick", function(e){if(!!e.target.closest('.tabbrowser-tab'))BrowserReload()},false)})() >>393
ウチは以下のまま113に上げて問題なく動いてる
(function(){
gBrowser.tabContainer.addEventListener('dblclick', function(e) {
if(!!e.target.closest('.tabbrowser-tab')) BrowserReload();
},false)
})(); タブをツールバーの下に配置するだけでいいので、>391の通りuserchrome.cssに
#titlebar { order: 1; }
を1行だけ入れたら、確かにタブは下にはなったが、メニューバーも下になってしまった・・・
タブだけをツールバーの下側にする方法はないんでしょうか 検索して出てきた以下の構文を
#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; } ↑間違えて投稿しちゃったすいません
検索して出てきた以下の構文を試してみたら、メニューバーは元通りになったものの
今度はウィンドウコントロールボタン（最小化、最大化、閉じる）が左に寄ってしまったｗｗｗ
上手く行かなくて困ってます
#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; } タブ位置は下にできたけどブックマークメニューのスカスカ具合がなおらない。
何かしらあるなぁ。 >>398
直ったーこれなら当分だいじょぶだね、あんがと
いいかげんchromeに移った方がスマホと同じに使えていいんだけどね >>394 有り難うございます私の思い違いでした 動いてました >>398でタブバーは下になったけど、もう少しタブバーの高さが狭い方がいい
どこ弄れば狭く出来るんだろう ちょっと調べて知ったかぶりで発言するけど、タブの高さを設定している構文がないっぽい
どこかを変更するんじゃなくて構文を追加しないと駄目なんじゃないかな
:root { --tab-min-height : 22px !important; }
と追加してみたら一応出来たみたい（heightの数値は自分で考えて）
見る人が見れば簡単なんだろうけど、何も知らない素人じゃこんなもんよw >>405
ありがとう
なんとか自分で見つけた
#TabsToolbar {
--tab-min-height: 26px; !important;
}
でいけた
ついでにツールバーもちょっと狭く出来たわ
#nav-bar {
height: 30px !important;
}
#urlbar {
min-height: 26px !important;
}
#searchbar {
min-height: 26px !important;
} >>398
これでタブの位置は下になるんだけど
タブの形やバーの高さ、ブックマークなどの行間がリセットされちゃってしんどいｗ >>407
タブバーの高さは>>406の#TabsToolbarで弄れる
ブックマークバーは#PersonalToolbarだからそれでググればなんか出てくるかも /*** ドロップダウン/コンテキスト/ポップアップ メニューの間隔を調整する ***/
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;
}
これ使えてる >>407
なんでわざわざしんどいことをするのか意味不明
マゾなの？ >>410
初心者なんだからそんないじめないでくれよｗ
-moz-box-ordinal-group の代わりに order を使うってのをみて
#titlebar {
order: 2;
-moz-appearance: none !important;
--tabs-navbar-shadow-size: 0px;
}
にしたらタブの位置が下になった
その他はいじらなくても今までのまま
いろいろあげてくれるみなさんのおかげです
ありがとう Pushbulletの通知のタテ幅を
112以前の長さに戻す方法を教えてください * {
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じゃダメで。これも効かなくなったのかな >>413
cssだけだと以前から丸くできなかったのではないかと思ったが
色を変える細くする非表示にするだけでは 以前はできたよ、ただし指定する対象はscrollbarじゃなくscrollbar thumb
が、例によって例の如く113ではこれも効かない 単に角を丸くしたいだけなら、about:config から widget.non-native-theme.scrollbar.style を1にしてMacOSX風にするのが手っ取り早いかも >>414-416
やっぱできなくなったんですね・・
で、>>413を入れることもなく、>>416の値を2にすることで細く丸くなってくれたのでこれで満足です。
ありがとうございました！ ユーザーが勝手にカスタマイズするなと言わんばかりの仕様だな なんかのソフト作った人がそういう社風が嫌でモジラやめたっていってたな アドレスバーと検索バーの細い枠線を常時表示できませんか？ こういうのかな
#urlbar-input-container, #searchbar {
border: 1px solid var(--panel-separator-color) !important;
/*border: 1px solid ThreeDLightShadow !important;*/
} >>424
ありがとう、思い通りです。
しかし次のCSSで検索バーはうまくいくのですが、URLバーの丸みが崩れます。
回避策ありませんか？
/*** 検索バー&URLバーに丸み ***/
#searchbar {border-radius: 0.8em !important;}
#urlbar-background{border-radius: 0.8em !important;} ごめん、もともとうまく行ってなかったと思う。
検索バー、URLバーが非アクティブでも丸みをつけられませんか？ /*
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;
} >>427
おー、見事ですね。
424案でも検索バー&URLバーに丸みを外すとスッキリしますね。
427案にするか迷うところです。 ツールバーの拡張機能のボタンをクリックした時の順番を
任意の順番に変えるuserChrome.jsってありますか？
一応、ボタンクリックしてツールバーにピン留めし、順番に
戻した順に下には行くようですが、これだといちいちやり直す
必要もあるので。 ところでFirefoxのツールバーの拡張機能アイコンをクリックすると出るメニューの大きさ
これはuserChrome.cssで小さく変えることは可能ですか？
以前はextensions.unifiedExtensions.enabledをFalseで出来たけど
今はそれも出来なくなってしまったので >>432
有難うございます。
１のほうを少し自分で変えて適用してみました。
いい感じです。 アプリケーションメニューを左側に移動する方法を教えてください ハンバーガーボタンを左に移動 */
#PanelUI-button {
order: -1 !important;
margin-left: 1px !important;
margin-right: -12px !important;
} /* ハンバーガーボタンを左に移動 */
#PanelUI-button {
order: -1 !important;
margin-left: 1px !important;
margin-right: -12px !important;
} >>439
横からだけどありがたい
ハンバーガーメニューのsvgファイルをFirefoxロゴのsvgに替えて使っていたけど、右のままだったから様にならなくて 見てるサイトをブクマに登録する時にURLバーの右にある星マークをクリックして
「ブックマークを追加」のダイアログボックスを開いてブクマ登録するわけだが
そのダイアログボックスの「保存場所」の候補のファイルが出てくる枠が狭くて使いづらいんで
その枠を広げたいんだけどなんとかならんの？
解決する方法があったらおしえてくれ
あと、この板ってどの程度の間隔で書き込みできるんだ？ >>442
#editBMPanel_folderTree {
min-width: 440px !important;
min-height: 300px !important;
} ズーム拡大・フォントサイズ変更・ボールド設定以外の方法で
サイト上の細い文字を太くする方法はありますか？ >>446
fontweight使いたくないならhtmlのstrongとかbタグで囲うしかない
そもそもサイト上のことならstylusとかuserscriptでやることだからそっちで聞いた方がいいよ -webkit-text-stroke: 1px; >>449
とりあえずJavaScriptの質問板で聞いてみたら？
何をどうしたいのかよくわからんからもっと具体的に説明した方がいいと思う 普通にfont-familyで好きなフォント指定すればいいじゃん AutohideSidebar2.uc.js動かなくなってない？俺だけ？ アプデしたら動かなくなったからまた更新されたら直るのかも…と思ってたけど115.0b6になっても自動開閉起動せず
マジで俺だけなの 俺も115で動かなくなったが直せた
alice0775の103のinstall folderにあるconfig.jsを落として上書きすればいい
ついでに106にあるuserchrome.jsも新しくしておくといい 103と106変えても何一つ効かなくなったわ
もういいや chromeフォルダに入れる初歩的なミスしてたわ
治った config.jsとuserchrome.jsはたまにチェックしないとあかんな >>455
サンキュー助かったわ
唐突に動かなくなるの内部で何弄ってるからなんだろうな ツールバーの[ブックマークを表示します](☆の下に_みたいなアイコン)の
「ブックマークサイドバーを表示」「ブックマークを検索」「ブックマークを管理」
を非表示にする方法を教えてください。
#BMB_searchBookmarks, #BMB_bookmarksShowAllTop, #BMB_viewBookmarksSidebar {
display: none !important;
} Thunderbird115のメニューバーとツールバーを旧バージョンの様に逆にできますか？ Thunderbird115のメニューバーとツールバーを旧バージョンの様に逆にできますか？ Firefox 116になってから以下のCSSが効かなくなっているようですが、
修正はできますかね？
/* ピン留めしたタブとしていないタブの間にある隙間を調節 */
.tabbrowser-tab[first-visible-unpinned-tab="true"] {
margin-left: 0px !important;
} >>466
.tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])) {
margin-left: 0 !important;
} >>467
ありがとうございます。
うまく行きました。 Youtubeの「もっと見る」を
最初から開いた状態にできますか？ そういやYouTubeのコメントの「続きを読む」が短いコメントにも表示される問題を直す
font.blacklist.underline_offset に Meiryo を追加
が効果なくなった youtubeの視聴回数を「もっと見る」押さなくても
詳細表示させる方法ありますか？ ツール＞設定と設定タブを開いたときにアクティブなタブの右隣に設定タブを開く方法はありますか？ >Thunderbird115のメニューバーとツールバーを旧バージョンの様に逆にできますか？
同じように思っている方がいて、検索でたどり着きました。↓
https://support.mozilla.org/en-US/questions/1418752
参考まで Thunderbirdをここに書くとスレチと言われるんだよ
んでThunderbirdスレに書くと誰も反応しない だから？
>>365 のアホは無視すればいいだけ
userChrome.css と userContent.css の仕組みは一緒なんだからさ
それくらい判断できないの？ テンプレにStylishとか書いてるからcssならなんでもいいのか？ cssはcss専用のスレ住人じゃないと対応が難しいそうですね・・・
.tab-background {
border-radius: 4px 4px 0px 0px !important;margin-block: -1px !important;
}
でアクティブタブの形状を付箋のようにしていました
最初は-1の値を調整することで更新による変更も再調整可能でしたが、長いこと前から更新でツールバーとタブの境界線が復活しています
116.03でも通用するアクティブタブ形状の付箋化・記述例はないものでしょうか？m(vv)m css専用のスレ住人なんてものは存在しない
だいたいどこのスレも見てる
適した場所があるだけ >>483
タブを下段に表示してるならこれでできる
.tabbrowser-tab[selected="true"] {
--tab-border-radius: 4px 4px 0 0 !important;
margin-bottom: -4px !important;
}
これをいれると線が消えてフラットになる
#navigator-toolbox{
border-bottom: none !important;
} >>483
アドバイス有難うございます、いずれも未達成でした 調整で知ったのですが、私の現行コードも厳密には効いている様子で、タブの枠である真っ黒な線をツールバーのグレー枠に変更している
つまりタブ由来の黒枠の下側をきっちり消去しているっぽいんです、これは盲点でした その上で度重なる更新によりツールバーのグレー線が「タブ枠より優先されて表示された」結果が、現在のようです アクティブタブのタブに隣接するツールバー枠で、border-topが無くなれば旧ブラウザのような付箋のように上手くなるんですが 駄目だ意味不明なNGワード禁止と出てろくに書き込めませんorz
お礼や現状の報告などを書こうにも、小出しなら通ったのに・・・
まだ書くべき報告がありますがこれ以上は厳しいので割愛します
皆さん連投すみませんでした せっかく比較画像を用意したのにリンクが書き込めません！
何なのこのスレ仕様・・・ゴミすぎるわ >>491
https をカットするとかやり方あるんじゃない？
なんども書き込むと規制されちゃうよ めっちゃ試しましたが拡張子辺りもNGな様子で、駄目でした
全てNGワードで、普通の文章も先のように一行ずつ投稿すると書き込めましたし
そりゃこのスレが荒れたり昔のようにまともなコードの話が無くなるはずだわと痛感していますorz
変な自治オナニー行為か何かで板またはスレの投稿条件を絞りまくっているのでしょうかねえ
そういうの2ch時代からもそうですが、実に愚かで馬鹿らしいですわ（苦笑） ■ 質問テンプレ
【質問】
アップデートで117に切り替わったところ、メニューバーがタブに埋もれるようになりました
トラブルシューティングモードでは通常に表示できているため、既存ｃｓｓと何かがコンフリクトしてるのかもしれません。
改めてメニューバーの表示を「タブの上に」1列つくりたいのですが、cssで対応できるでしょうか・・・？
【バージョン】 117.0
【UserAgent】 Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/117.0 すみません、多分質問を間違えました！
タブのブラウザ上の位置はどの変数でいじるのかを聞くべきでした申し訳ありあません。 dblclick-tab-pinned.uc.js
// @name dblclick Tab Pinned
// @description タブのダブルクリックでピン留めトグル
// @version 1.0.1
修正できますか？働かなくなった >>497
そら全部がコメント行やし 実行したところで何もせんわ スクリプトのヘッダーコメントだけでは特定できんよ入手元URL示せ
そしてなによりスレチだ ワイは117ダブクリピン留トグル編集無しで普通に効いてるわ メルカリの検索結果サムネイルにマウスオーバーすると表示されるハートを非表示にしたいです
以下ではうまくいかないようです。良い方法があれば教えてください
@-moz-document domain("mercari.com") {
div.sc-e8382dd3-1 {
display: none !important;
}
} >>505
ログインしないと出てこないかな
それなら自分は無理 AutoCloseBookMarkFoldeが使えなくなったら凄く不便になった。
別にVivaldiを使っているけど、こっちは自動で閉じないけど右クリックで全フォルダを閉じるって出来るから、使い勝手が逆転してしまった。 >>503
@-moz-document domain("mercari.com") {
.icon-container {
display: none !important;
}
} >>509
ありがとうございます
でもなぜか消えないです >>510
よく見たら>>503と書いてることは一緒だね
Stylusでは消えたからcssじゃなく何か別の原因があるんだろう >>511
メルカリページが変な読み込み方をしているようで、userContent.cssでは効かなかったため
ユーザスクリプト.jsで非表示にしました。
ありがとうございました（Stylusも使ってみようかなぁ…） Firefox内部ページあるいは全ページに適用したい場合以外にuserContent.cssがStylusに勝るメリットはほぼないような（再起動しなくていいし）
まあStylishの件もあったし極力第三者のアドオン入れたくないってのはあるのか
要素非表示したいだけなら広告ブロッカーでjp.mercari.com##.icon-containerを指定するのでもいいな >>513
これまでuserContent.css変更してリロードで反映されてたと思ったんですが、
確かに再起動したら >>509 でいけました
お騒がせしました
そうですね、アドオンはできるだけ少なくしたいです サイドバーのブックマークで、フォルダをマウスオーバーした時に表示されるツールチップ
の横幅を変更したいです。できたら、通常のブックマークの方も。 >>516
#bhTooltip > .places-tooltip-box {
width: 300px !important;
}
300のところを好きな幅にする
履歴のツールチップ幅も変わるけど現状cssだけでは対応できないっぽい >>516
/* サイドバーの幅の制限を無くす */
#sidebar-box {
min-width: 5px !important;
overflow-x: hidden !important;
}
#sidebar {
max-width: none !important;
overflow-x: hidden !important;
} すべての右クリックメニューの背景色と文字の色を指定したいです
出来ますか？ >>520
ありがとう出来ました
意図しない部分の変更も別途指定しできますた。 >>517
横からだが助かった
横幅を100にしたついでに
背景色が真っ黒で鬱陶しくて仕方なかったのをグレーにできた UIのフォントサイズを変更したいのですが検索バーの 検索 のフォントサイズだけ何を書いても変わりません
どなたかわかりませんでしょうか 検索バーの 検索 のフォントサイズ
どこなのか不明 ttps://qiita.com/tomoki1207/items/001af8e01a392cfc22fd
ここを参考にマウスオーバーでラベルを表示出来るようにしていたんだけどアップデートでesr115になったら出来なくなりました
良い方法があれば教えてください >>529
Group Speed Dial利用してないなら下記
/*#nav-bar {
background-color:transparent !important;
}
#PersonalToolbar {
position: absolute;
top: 63px;
left: 0;
width: 100%;
height: 33px;
z-index: 9999;
visibility: collapse !important;
-moz-transition-duration: .15s !important;
-moz-transition-timing-function: ease-in-out !important;
}
#navigator-toolbox:hover > #PersonalToolbar {
visibility: visible !important;
-moz-transition: .15s ease-in-out; いまは下記を利用
#PersonalToolbar{
--uc-bm-height: 20px;
--uc-bm-padding: 4px;
--uc-autohide-toolbar-delay: 300ms;
--uc-autohide-toolbar-focus-rotation: 0deg;
--uc-autohide-toolbar-hover-rotation: 0deg;
}
:root[uidensity="compact"] #PersonalToolbar{ --uc-bm-padding: 1px }
:root[uidensity="touch"] #PersonalToolbar{ --uc-bm-padding: 7px }
#PersonalToolbar:not([customizing]){
position: relative;
margin-bottom: calc(0px - var(--uc-bm-height) - 3.5 * var(--uc-bm-padding));
transform: rotateX(90deg);
transform-origin: top;
transition: transform 160ms linear var(--uc-autohide-toolbar-delay) !important;
z-index: 1;
}
#PlacesToolbarItems > .bookmark-item{ padding-block: var(--uc-bm-padding) !important; }
#nav-bar:focus-within + #PersonalToolbar{
transition-delay: 300ms !important;
transform: rotateX(var(--uc-autohide-toolbar-focus-rotation,0));
}
#navigator-toolbox:hover > #PersonalToolbar{
transition-delay: 300ms !important;
transform: rotateX(var(--uc-autohide-toolbar-hover-rotation,0));
}
#navigator-toolbox:hover > #nav-bar:focus-within + #PersonalToolbar {
transform: rotateX(0);
} 表示したとき、下ねズレても良いなら
/*#nav-bar {
background-color:transparent !important;
}
#PersonalToolbar:not(:hover) {
visibility: collapse !important;
background-color:transparent !important;
-moz-transition-duration: .15s !important;
-mozt-ransition-timing-function: ease-in-out !important;
}
#navigator-toolbox:hover > #PersonalToolbar {
visibility: visible !important;
-moz-transition: .15s ease-in-out;
} >>527
/* URLバー,検索バー */
#urlbar-input-container,
#searchbar,#urlbar,
#navigator-toolbox .searchbar-textbox
{
background-color: #252525!important;
color: #ffffff!important;
font-size: 11px !important;
border-radius: 5px;
Outline: none !important;
} /* 検索バー・URLバー・サイドバーのグレイテキストを非表示 */
#searchbar *|input::placeholder,
#urlbar *|input::placeholder,
#sidebar-search-container *|input::placeholder,
.findbar-textbox *|input::placeholder {
color: transparent !important;
} メールの背景色をストライプにして、選択行のフォントをサイズアップする事まではできたんですが、
選択行の背景色を変える事ができません。開発ツールで見たところ、選択行の background-color が
取り消し線＋グレーアウトで無効化されているようです。うまく背景色も変える方法はありませんか？
/* 今現在、こんな感じです、、、orz */
#threadTree tr:nth-of-type(even) {
background-color: #c8c8ff !important;
}
#threadTree tr:nth-of-type(odd) {
background-color: #e0e0ff !important;
}
[is="tree-view-table-body"]:focus tr[is="thread-row"].selected, [is="tree-view-table-body"]:focus-within tr[is="thread-row"].selected, [is="tree-view-table-body"] tr[is="thread-row"].selected:focus-within {
font-weight: bold;
font-size: 16px;
color: #000000 !important;
background-color: #ff0000 !important;
} メールの背景色をストライプにして、選択行のフォントをサイズアップする事まではできたんですが、
選択行の背景色を変える事ができません。開発ツールで見たところ、選択行の background-color が
取り消し線＋グレーアウトで無効化されているようです。うまく背景色も変える方法はありませんか？
/* 今現在、こんな感じです、、、orz */
#threadTree tr:nth-of-type(even) {
background-color: #c8c8ff !important;
}
#threadTree tr:nth-of-type(odd) {
background-color: #e0e0ff !important;
}
[is="tree-view-table-body"]:focus tr[is="thread-row"].selected, [is="tree-view-table-body"]:focus-within tr[is="thread-row"].selected, [is="tree-view-table-body"] tr[is="thread-row"].selected:focus-within {
font-weight: bold;
font-size: 16px;
color: #000000 !important;
background-color: #ff0000 !important;
} メールの背景色をストライプにして、選択行のフォントをサイズアップする事まではできたんですが、
選択行の背景色を変える事ができません。開発ツールで見たところ、選択行の background-color が
取り消し線＋グレーアウトで無効化されているようです。うまく背景色も変える方法はありませんか？
/* 今現在、こんな感じです、、、orz */
#threadTree tr:nth-of-type(even) {
background-color: #c8c8ff !important;
}
#threadTree tr:nth-of-type(odd) {
background-color: #e0e0ff !important;
}
[is="tree-view-table-body"]:focus tr[is="thread-row"].selected, [is="tree-view-table-body"]:focus-within tr[is="thread-row"].selected, [is="tree-view-table-body"] tr[is="thread-row"].selected:focus-within {
font-weight: bold;
font-size: 16px;
color: #000000 !important;
background-color: #ff0000 !important;
} >>535
最後の
background-color: #ff0000 !important;
の行頭だけ全角の空白になっているけどそれのせいでは? スレッドツリーって要素名出てるじゃん。
試しに537の適用してみたら空色系のストライプになるのな。
が、俺じゃ537のやりたい事は解決できんかったわ。 #threadTree tr:nth-of-type(even) {
background-color: #c8c8ff !important;
}
#threadTree tr:nth-of-type(odd) {
background-color: #e0e0ff !important;
}
の!important外したら良いんじゃ無いか？ はーい。○○（なんか名前）ちゃん。至急、1階理科室に来てねー♪」（校内放送風） 536です。542で提示された方法で上手くいきました。感謝！ 536です。542で提示された方法で上手くいきました。感謝！ 久しぶりにfirefox入れたらタブとタブの境目がなくなって難儀してます
/* タブ間のセパレータ表示 */
#tabbrowser-arrowscrollbox .tabbrowser-tab {
border-right: 1px solid color-mix(in srgb, -moz-accent-color-foreground 30%, transparent) !important;
padding-inline: 0px !important;
}
前に使ってたcssはこれっぽかったんですが、今は使えないみたいなのでよければ教えてくれるとうれしいです Firefox 103以降
以下の変更があるので注意
-moz-accent-color-foreground は AccentColorText に変更
-moz-accent-color は AccentColor に変更 >>547
あ、なるほど。ありがとうございます。そりゃだめなわけだ 書き直しですね・・・ 皆この馬鹿みたいに無駄で長いコンテキストメニュー使ってんの？
やっぱChromeに戻るわ 119.0にしたら
/* タブの上部のライン */
.tab-background[multiselected],
.tab-background[selected="true"] {
background: linear-gradient(to bottom, #0A84FF 2px, var(--toolbar-bgcolor) 0px) !important;
outline: none !important;
}
が効かなくなってしまった。もうアクティブタブのラインって無理ですか？ 119.0にしたら
/* タブの上部のライン */
.tab-background[multiselected],
.tab-background[selected="true"] {
background: linear-gradient(to bottom, #0A84FF 2px, var(--toolbar-bgcolor) 0px) !important;
outline: none !important;
}
が効かなくなってしまった。もうアクティブタブのラインって無理ですか？ >>550
.tab-background[selected] >>551
これって118.0.2の新規プロファイルで試してみたんですがタブの見た目に変化はありませんでした
どのような感じになるのか画像をお願いできませんでしょうか
もし有用そうなら私も使用しようかなと思いまして http://egg.5ch.net/test/read.cgi/software/1622565390/238
/* 選択中のタブの色をツールバーと同一化 */
.tab-background[selected="true"] {
color: var(--toolbar-color) !important;
background-color: var(--toolbar-bgcolor) !important;
}
119.0で効かなくなりました
修正箇所ありましたら教えてください >>552
>>551のどの部分を置き換えるのでしょうか
新規のuserChrome.cssに>>551だけ書いて
.tab-background[multiselected],
.tab-background[selected="true"]
それぞれどちらかを.tab-background[selected]に置き換えても変化なし
2行とも消して.tab-background[selected]だけ書いても変化なしでした
118.0.2では>>551,557で反映されていました >>557
selected="true"を selected ええ…今迄のCSSそのまま使えるんなら、.tab-context-lineまで馬鹿正直に指定し直したのは無駄だったんか
/* 選択タブ上部のラインを強調 */
.tabbrowser-tab:is([multiselected],[selected="true"]):not(:-moz-lwtheme) .tab-stack .tab-background {
background: rgb(255,255,255) !important;
}
.tabbrowser-tab:is([multiselected],[selected="true"]) .tab-stack .tab-background .tab-context-line {
border-top: 2px solid rgb(64,128,251) !important;
}
/* 非選択タブ上部の枠線 */
.tabbrowser-tab:not([multiselected],[selected="true"]) .tab-stack .tab-background {
background: linear-gradient(to bottom, rgba(100, 100, 100, 1.0) 1px, rgba(77, 77, 77, .20) 0%, rgba(77, 77, 77, .20) 100%) !important;
} タブバーの背景色をメニューバーから引き継ぎたいんですが、
--toolbar-bgcolorみたいなのありますか？
#tabbrowser-tabs {
background-color: var(--menubar-bgcolor) !important;
} >>552
横からだけどありがとう｡
同じくタブ上部のラインの色が効かなくてここに来ました｡
無事解決した｡ >>552
横からだけどありがとう｡
同じくタブ上部のラインの色が効かなくてここに来ました｡
無事解決した｡ >>563
上の方ではメニューバーの色を指定してるんですが（rootでは指定していません）、この色が--menubar-bgcolorに反映されません
そもそも--menubar-bgcolorなんてものは無くて、適切な文字列があるのでしょうか？
/* メニューバーの背景色 */
#toolbar-menubar, menubar#main-menubar > menu {
background-color: #E3E4E6 !important;
}
/* タブバーの背景色 */
#tabbrowser-tabs {
background-color: var(--menubar-bgcolor) !important; /* 反映されない？ */
} あー、もしかして--toolbar-bgcolor変数なんてものもなくて
cssの上の方で--toolbar-bgcolorをユーザ定義してるってことですかね
でも--toolbar-bgcolorはユーザ定義してないですがちゃんと色入ってますね >>567
--toolbar-bgcolorは:rootでブラウザが定義してる
スタイル当てたらそれらしい変数に勝手に割り当ててくれるなんて機能はない
値を使いまわしたいなら:rootでなくてもいいから共通の親で自分でcss変数定義すればいい >>568
やっぱり--toolbar-bgcolorはブラウザ定義なんですね
そういうブラウザ定義のリストってどこかにありませんか？ このへんじゃね?
chrome://browser/skin/browser-shared.css >>552
>>560
ありがとう
でもできなかったです
>>561
こちらでタブ上部ラインとタブの色をツールバーと同一化
できましたありがとう ブックマークアイテムを右クリックするとコンテキストメニューが出るけど
選択したブックマークアイテムの背景色が選択されてない状態に戻ってしまいます
選択したブックマークアイテムの背景色を残したままコンテキストメニューを開いて選択できるような挙動にするには
どのようなcssになりますか？お願いします /* サイドバーの背景色 */
#historyTree,
#bookmarks-view treechildren,
#bookmarksPanel/* 検索ボックスの周囲の色 */ {
background-color: #3C444B!important;
border: solid 1px #3C444B !important;
}
/* クリック中選択状態のボーダーを消す */
treechildren::-moz-tree-row(current, focus) {
border: 1px dotted #F3D982 !important;
outline: none !important;
}
/* クリック中選択状態のアイテム */
#bookmarksPanel treechildren::-moz-tree-row(selected,current,focus) {
background-color: #6a788a !important;
border: solid 1px #495361 !important;
} /* 非アクティブ状態で選択状態のテキスト */
#bookmarksPanel treechildren::-moz-tree-cell-text(selected) {
color: #ffffff !important;
background-color: #6a788a !important;
}
/* 背景色 */
#bookmarksPanel treechildren::-moz-tree-row(selected) {
background-color: #6a788a !important;
border: solid 1px #495361 !important;
}
/* アクティブ状態で、選択状態のテキスト */
about:stylish-edit?id=15#bookmarksPanel treechildren::-moz-tree-cell-text(selected,focus) {
color: #ffffff !important;/*白抜き文字*/
background-color: #6a788a !important;
} /* セパレーター */
#bookmarksPanel treechildren::-moz-tree-separator {
border: 1px dotted #c7c7c7 !important;
margin-bottom: 1px !important;
margin-right: 10px !important;
} サイドバー開いて､サイドバーのブックマーク欄の空白部分をクリックした時に出るこの水色の点線枠消したいのですが､
お教え下さい｡
https://i.imgur.com/4vEL74M.png >>574
こうですか？うまく緑になりませんがどこか違うんでしょうね…
#bookmarksMenu menupopup > menuitem treechildren::-moz-tree-row(selected)
{ background-color: green !important; } ツイキャスの配信開始時に出るクリックしないと消えないダイアログ？を出ないようにする方法ありますか？ >>577
/* 選択中の点線を消す */
:root {
--default-focusring-width : 0px !important;
}
上記消えない場合か不都合があれば↓で。
/* 選択中の点線を消す */
treechildren::-moz-tree-row(current, focus) {
border: 1px dotted #F3D982 !important; /* 周囲と同じ色を指定する */
outline: none !important;
} >>580
ありがとうございます！
上のCSSで無事消せました！
感謝です｡ .tabbrowser-tab[selected] > .tab-stack > .tab-background{
できたわ 描画速度としてはCSSセレクタは子セレクタ（>でつなげる）よりも、小孫セレクタ（スペースでつなげる）の方が速いらしいって聞いて
子セレクタで書いてたやつをほとんど小孫セレクタに書き換えたわ、体感的には分からんけど
ブラウザで取得できるCSSセレクタも小孫セレクタだしな タブが１つの時はタブバーを非表示にしたいんですが、以下ではうまくいきませんでした
どのようなセレクタが適切でしょうか？教えて頂ければ幸いです
tab:only-of-type:has(#TabsToolbar)
{
display: none !important;
} >>586
逆
#TabsToolbar:has(tab:only-of-type) {
display: none !important;
} >>587
ありがとうございます、でもhas使いこなせず結局うまくいかなかったので
以下を参考にしてタブバー隠せました
https://support.mozilla.org/en-US/questions/1394300
tab:only-of-type, tab:only-of-type + #tabbrowser-arrowscrollbox-periphery
{ display: none !important; } つべの投稿が何日前とかじゃなく投稿日で見えるようにするやつ
前は後者だけだったのだがhoverするまでの位置が安定しなかった
背景はダーク用な
/* 次のの直前:最初からサイズ0なのだが次のの位置決定に悪さする対策 */
tp-yt-paper-tooltip.style-scope.ytd-watch-info-text
{left: 0px !important; top: 0px !important;}
/* 有効になったときに動くと鬱陶しいので元の位置も変えておく */
div#description div#tooltip.style-scope.tp-yt-paper-tooltip,
div#description div#tooltip.style-scope.tp-yt-paper-tooltip.hidden
{display:block !important; width:621px; height:13px;
position:absolute; top:-3px; left:-5px;
background:#282828; font-size:13px !important;} 119、visuallyselected使えなくなってる？ アドレスバーの候補表示設定を全てチェックを外すとポップアップで候補が表示されなくなりますが
URLをクリックすると青い枠が表示されます
目障りなので青い枠を表示させないようにするcssを教えてください
以下はだめでした
#urlbar:-moz-focusring {
outline: none !important;
} 以下が効かなくなったのですが修正方法を教えてください
img:-moz-loading{visibility:hidden!important;} ブラウザツールボックス内のコンテキストメニューの縦幅サイズが大きいのですが
ここはuserChrome.cssでのカスタムはムリでしょうか？
以下は効きませんでした
menuitem, menu
{ padding: 2px 5px 2px 5px !important; } >>594
ブラウザツールボックス用のcssはchrome_debugger_profile\chromeの中に置く >>592のやつですが以下で青色が出ないようにはできました
ただ、枠外のボーダーかシャドウがまだ出てしまうので、それも出ないようにしたいです
（つまりURLバーをクリックしても見た目が変わらないようにしたい）
現状以下です、よろしくお願いします
/* アドレスバーにフォーカスしても見た目を変えない */
#urlbar {
--toolbar-field-focus-border-color: var(--toolbar-field-border-color) !important;
--toolbar-field-focus-background-color: var(--toolbar-field-background-color) !important;
box-shadow: 0px !important;
border: 0px !important;
} >>597
#urlbar-background {
outline: none !important;
box-shadow: none !important;
} UIのポップアップメニューのマウスオーバー色は変えたいけど
コンテンツ内のプルダウンメニューのマウスオーバー色はデフォルトにしたいです
以下ではblueにはなりませんでしたが、デフォルトのマウスオーバー色にもなりませんでした
ご教示のほどお願いします
/* ポップアップメニューアイテムのマウスオーバー色 */
menuitem:hover {
background-color: blue !important;
}
/* コンテンツ内プルダウンメニューアイテムのマウスオーバー色 */
.ContentSelectDropdown-item-0:hover {
background-color: initial !important;
} >>600
menupopup:not(#ContentSelectDropdownPopup) :is(menu, menuitem):not([disabled])[_moz-menuactive] {
background-color: blue !important;
} >>601
menuitem:not(.ContentSelectDropdown-item-0):hover
で除外できました。ありがとうございます。
後方でinitial等で初期値を上書きできればと思ったんですが、うまくいかないものですね。 >>560
557じゃないけどありがとうございます :where(.aaa, .bbb)
がなんとなく調子悪いので
:is(.aaa, .bbb)
を使ってる
:whereって複数選択できないのかな？ :whereは詳細度上がらないから有無を言わさずルール上書きしたい場合に向かない Chromeだったらアドオンでいくつかあるのだけど、Firefoxには見当たらないので、
YouTubeのコントロールバーをプレイヤーの下に表示するCSSを作りました。
標準プレイヤーのみの対応ですが、よければ使ってください。
/* 標準プレイヤーの高さをコントロールバーの分増やす */
ytd-watch-flexy:not([theater]) #player-container-inner {
height: 51px !important
}
/* プレイヤーバックの色変更 */
ytd-watch-flexy:not([theater]) #movie_player {
background-color: #000000 !important
}
なお、コントロールバーは一定時間経てば消えますが、
常時表示したい場合は、次のスクリプトをインストールしてください。
YouTube Permanent ProgressBar
https://greasyfork.org/ja/scripts/426283-youtube-permanent-progressbar
このCSS、シネマモードでも使えるようにしたいのですが、どうもうまく行きません。
もしいい方法があれば、助言お願いします。 Firefoxのポップアップの背景色だけ有効にしたいでのですが
どのようにすれば良いですか
/* ポップアップ */
.menupopup-arrowscrollbox{
background-color: Pink !important;
} Pinkじゃなくてとりあえずredで試してみたら？
俺は以下で変えられてる
/* ポップアップメニューの背景色 */
.menupopup-arrowscrollbox {
background-color: #F2F2F2 !important;
} FirefoxのUI以外はどのように除外すればよいのでしょう？
一部のサイトで色が変わってしまいます >>607
:root {
--controller-height: 51px;
}
#full-bleed-container {
margin-bottom: var(--controller-height) !important;
}
ytd-watch-flexy[theater] {
z-index: 0 !important;
}
ytd-watch-flexy[theater] .html5-video-player {
overflow: visible !important;
}
ytd-watch-flexy[theater] .ytp-chrome-bottom {
margin-bottom: calc(var(--controller-height) * -1) !important;
}
ytd-watch-flexy[theater] #player-container::after {
content: '';
position: absolute;
width: 100%;
height: var(--controller-height);
margin-bottom: calc(var(--controller-height) * -1);
background: #000;
z-index: -1;
}
--controller-heightでコントローラー位置を調節できる >>611
横着したら普通の方のデザインが崩れてたので訂正
:root {
--controller-height: 51px;
}
ytd-watch-flexy[theater] #full-bleed-container {
margin-bottom: var(--controller-height) !important;
}
ytd-watch-flexy[theater] {
z-index: 0 !important;
}
ytd-watch-flexy[theater] .html5-video-player {
overflow: visible !important;
}
ytd-watch-flexy[theater] .ytp-chrome-bottom {
margin-bottom: calc(var(--controller-height) * -1) !important;
}
ytd-watch-flexy[theater] #player-container::after {
content: '';
position: absolute;
width: 100%;
height: var(--controller-height);
margin-bottom: calc(var(--controller-height) * -1);
background: #000;
z-index: -1;
}
ついでにツールチップの位置を下げるやつ
.ytp-tooltip {
margin-top: var(--controller-height) !important;
} >>612
うまく行きました。
本当にありがとうございます。
このCSSを見ると、自分のスキルではまだまだ無理だと実感しましたw
個人的に、コントロールバーを下にずらしたので、
バーを覆っていた影が気になるため、非表示にしました。
/* プレイヤー下部の影の非表示 */
ytd-watch-flexy .ytp-gradient-bottom {
display: none !important
} >>593
削除されてました
1850342 - Remove :-moz-loading, and avoid exposing :-moz-broken pseudo-class to content.
ttps://bugzilla.mozilla.org/show_bug.cgi?id=1850342 ここにある
https://www.userchrome.org/firefox-89-styling-proton-ui.html
↓のように、アクティブタブの上部に青線、だけほしいので書式お願いします。
Container/Active Tab color line:
+Blue Line on active tab /* タブの上部のライン */
.tab-background[multiselected],
.tab-background[selected] {
background: linear-gradient(to bottom, #0A84FF 2px, var(--toolbar-bgcolor) 0px) !important;
outline: none !important;
} >>615
ありがとうございます。試したのですが出来ないみたいですので
とりあえずは、そこのCSS based on above options:
での書式で行きます。 /* アクティブタブの上に青い線 */
.tab-background:is([selected], [multiselected]) {
border-top: 1px solid Blue !important;
} /* アクティブタブの文字色 */
label.tab-text.tab-label[selected="true"]{font-weight: bold !important;}
これが119で動かないんだけどどこを修正すれば動きますか？ /* アクティブタブの背景色 */
.tab-background:is([selected], [multiselected])
/* アクティブタブの文字色 */
.tabbrowser-tab:is([visuallyselected], [multiselected])
/* 非アクティブタブの背景色 */
.tab-background:not([selected], [multiselected])
/* 非アクティブタブの文字色 */
.tabbrowser-tab:not([visuallyselected], [multiselected])
/* アクティブにマウスオンしたときの背景色 */
.tabbrowser-tab:hover > .tab-stack > .tab-background:is([selected], [multiselected])
/* アクティブにマウスオンしたときの文字色 */
.tabbrowser-tab:hover > .tab-stack >:is([selected], [multiselected])
/* 非アクティブにマウスオンしたときの背景色 */
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected], [multiselected])
/* 非アクティブにマウスオンしたときの文字色 */
.tabbrowser-tab:hover > .tab-stack >:not([selected], [multiselected]) firefoxでstylus更新したらCSS効かなくなったんだけどなんで？ >>623
バージョンは？
1.5.37 はバグありで取り下げられた 現バージョンでの音が出ているタブの色を変える方法が判明したら教えていただけますか >>625
.tabbrowser-tab:is([soundplaying], [muted]) .tab-background {
background-color: #f00 !important;
} 俺はアイコンで音のオンオフするから全部乗せにてるわ
普通に見やすい
/* サウンドタブをアニメーション化 (赤) */
/* ミュートアイコンに色を付ける (黒) */
/* サウンドタブのファビコンを復活 */
/* サウンドタブの背景色+半透明化 */ Firefox 120で結構変更入ったっぽい？
まあESR使ってるからあんまり関係ないけど ■ このスレッドは過去ログ倉庫に格納されています
