userChrome.css・userContent.cssスレ Part15

こういうことできない？→CSSならできるぞ
っていう会話はここに来ないからな
質問スレや拡張機能スレの方がCSS見る機会多いかもね

https://egg.5ch.io/test/read.cgi/software/1650551086/561

154.0でアクティブなタブの色と上部のラインが反映されなくなりました
おねがいします

検索バー(アドレスバーではなく)
履歴や検索候補の行間が広くなってしまったんですが､前のように狭くするCSS教えてください
AIに聞き方が悪かったのかうまく行きませんでした

>>201
セレクタの調べ方を学ぶといい

[selected="true"]　→　[selected]

これでいけたわ

>>201
/* 検索履歴の行間 */
.autocomplete-richlistbox > richlistitem {
height: 20px !important;
min-height: 20px !important;
max-height: 20px !important;
padding: 0 !important;
margin: 0 !important;

display: flex !important;
align-items: center !important;
}

.autocomplete-richlistbox > richlistitem > * {
align-self: center !important;
}

>>204
横からいただきました。

>>204
ありがとう めちゃ感謝！助かります｡>>201

これ効かなくなったけどどうしたらいいんでしょう
/* ページ内検索バーを上に*/
findbar {
order: -1 !important;
margin-top: -1px !important;
transition: none !important;
}

暫定対応

findbar {
position: fixed !important;
left: 0 !important;
right: 0 !important;
margin-top: -1px !important;
border-bottom: 1px solid var(--chrome-content-separator-color) !important;
transition: none !important;
}

こっちがいいかな

.browserContainer {
display: flex !important;
flex-direction: column !important;
}
.browserContainer findbar {
order: -1 !important;
}

これで

.browserContainer {
display: flex !important;
flex-direction: column !important;
}
.browserContainer findbar {
order: -1 !important;
margin-top: -1px !important;
border-bottom: 1px solid var(--chrome-content-separator-color) !important;
}

transition: none !important;　足して

>>208-211
できましたありがとうございます

デブツールを左や右にすると壊れるから

ゼロから学ぶ方法ってある？

AIにCSSをゼロから学ぶのに最適なサイトを教えてとか聞いてみたら？

これ効かなくなった。
/*** ページ内検索バーを上に移動 ***/
findbar {
order: -1 !important;
border-top: none !important;
border-bottom: 1px solid ThreeDLightShadow !important;
transition: none !important;
}

>>210-211 に今回の修正案があるじゃん
あとは >>207 と >>216 の違いを入れれ

>>217
ありがとう

色々やっと直った
shadow DOM化クソめんどくせーな
検索バー周りマジでひどい造りだな

いじってたらなんかできた
/* アクティブタブの背景 */
.tab-background:is([selected], [multiselected]) {
background-color: #FFCCFF !important; /* ピンク */
background-image: none !important;
}
/* アクティブタブの文字色 */
.tabbrowser-tab:is([visuallyselected], [multiselected]) {
font-weight: BOLD !important; /* 太字 */
color: #000000 !important; /* 黒 */
}
/* アクティブタブ上部に線 */
.tabbrowser-tab:is([selected],[multiselected]) .tab-stack .tab-background .tab-context-line {
border-top: 2px solid #FF0000 !important; /* 赤 */
}

>>220
ありがとう

いじってたらなんかできた
/* 検索窓を上部に */
.browserContainer > findbar {
-moz-box-ordinal-group: 0;
position: fixed !important;
left: 1em;
border: 1px solid threedshadow !important;
}

Control Panel for Twitterのツールバーアイコンをクリックすると出る
ポップアップ: 🎚https://addons.mozilla.org/user-media/previews/full/277/277505.png
の短すぎる縦幅を任意の長さに指定できるCSSを存知てたら教えてほしい

どうもこれ、
Firefox本体側でポップアップの最大サイズが800×600pxに規定されてる様で変更できないっぽい。
要るのかこの制限？
　 ❑https://extension.js.org/docs/implementation-guide/popup-sizing

デカすぎる文字サイズは、userContent.cssに
@-moz-document url-prefix(moz-extension:)
{
form>[class="group"],
form>[class="group labelled"]
{font-size:13px!important; line-height:16px}
[class="group labelled"]>section>label>select
{font-size:12px}
}
で対処。 （もっと巧い書き方は在るかも）

Control Panel for Twitterは、組んでるjsが拙いのか設定項目が貫通してくる事が偶にある
ので、そういった項目は予めuBlock Originのマイフィルタの方で塞いでおく
 x.com##[aria-label="おすすめユーザー"]
 x.com##[aria-label="タイムライン: 速報"]
 x.com##[href$="/analytics"]
 　 ※href$="/analytics"はアナリスティック機能ごとﾎﾟｱするフィルタ

v4.24.0で追加された
　Ｘの修正 ＞ プロフィールタブの変更を元に戻す ☑
にもちょっとした不具合が有るから
🔲https://archive.li/5cZDw#selection-371.3-340.51
しといた方がいいかもね

　 𝕏のUIは8月15日以降も無能により腐朽され続けている模様╮(︶﹏︶")╭
　  🎣https://x.com/ohyabu/status/2090573414759383279
　  🗣https://x.com/satokimi05/status/2096107121012261218

コンテキストメニューで該当部分にマウスオーバーすると文字が消えるのはなぜ？。
正常に動作はします。
.menupopup-arrowscrollbox {
color: black !important;
background-color: aliceblue !important;
}

該当部分がわかりません

>>226
コピーとかのメニューの一部のことです。

コンテキストメニューの背景色と文字色をuserChroe.cssで指定出来ませんか？

ユーザー・クロエ？

esr153.3です。
ブックマークメニューで、ファビコンが無い場合のデフォルトアイコン（地球アイコン）を任意のアイコンに差し替える方法を教えてください。

アドオンのublacikistにおける正規表現及びcssについてお聞きします

前に設置する場合は
/(cn|ko|kr|zh).wikipedia.org/
カンマで囲み中央に設置する場合は
/.(cn|kr|namu)./
キーワード指定なら
/(baidu|bilibili)/

問題は下記の様なトップレベルドメインでの一括正規表現が難しいことです
*://*.cn/*
*://*.kr/*
*://*.zh/*
セカンド、サードレベルドメインを指定した
/xxxxx.(cn|kr|zh)/
であるなら通用するものの、汎用性に欠けます
指定したトップレベルドメインに関するあらゆるサイトを除去する場合、そしてそれを一行にまとめる場合、何か良い記述はありませんでしょうか

ublacklist

/* サイドバーのヘッダーを消す */
#sidebar-header {
display: none;
}

これが機能しなくなりました
教えていただけませんか

/* 新サイドバーなどのタイトルヘッダーを非表示にする */
#sidebar-panel-header {
display: none !important;
}

/* 従来のサイドバーヘッダーを非表示にする場合 */
#sidebar-header {
display: none !important;
}

これで消せました

/* サイドバー有効時のコンテンツエリアの角丸とマージンを強制解除 */
#tabbrowser-tabbox,
.browserContainer,
#sidebar-box
{
border-radius: 0px !important;
margin: 0px !important;
padding: 0px !important;
}

>>234>>235
感謝

しかし新UIなんだこれくっそださい
なんでこんな角丸使いたがるんだ？
Googleの真似だろうけど

コンテンツエリアとサイドバーの間に隙間があって上の方の途中までテーマの画像がチラ見えしてる
この隙間を隠すにはどうしたらいいでしょうか
http://www.floral-village.info/up/sakaime.jpg

>>238
対応してない古いテーマのせいでしょ
隙間どころかそれで縦タブにしたらかなり残念なことになるぞ

>>238
よくわからんが userChrome.cssに

:root:not([theme-image-in-toolbox]) body, :root[theme-image-in-toolbox] #navigator-toolbox {
background-repeat: no-repeat round !important;
}

>>240
背景に使われている画像が繰り返し表示される記述のようですね
色の切り替わりが少し目立たなくなりました
ありがとう

メニューの高さを制限してスクロールバーを表示させるようにしていたんですがスクロールバーが表示されなくなりました
どのようにすれば表示できますか？

>>238
Geminiに聞いた答え↓　きれいに消えました

/* Firefox 157 サイドバーとWebコンテンツの間の隙間・余白を完全に消去する 26.10.5*/

/* 1. サイドバー全体のコンテナ、スプリッター（境界線）、コンテンツエリアの余白・枠線をゼロにする */
#sidebar-box,
#sidebar-main,
.sidebar-splitter,
#appcontent,
.browser-sidebar {
margin: 0 !important;
padding: 0 !important;
border: none !important;
box-shadow: none !important;
}

/* 2. 新UI(Nova)で発生するサイドバーと中身の間の隠れたギャップや背景色をリセット */
#sidebar-box {
background-color: transparent !important;
}

.sidebar-splitter {
width: 1px !important; /* 境界線を最小限の1pxにするか、完全に消したい場合は 0 にしてください */
background-color: transparent !important;
}

続く

/* 3. コンテンツエリア（ブラウザ要素）の左側の影と枠線を完全に消去 */
#sidebar-box + sidebar-splitter + #appcontent browser,
#sidebar-box + #sidebar-splitter + #appcontent browser,
.browserSidebarContainer browser {
border-left: none !important;
box-shadow: none !important;
}

/* 4. コンテンツ全体の親コンテナに残る境界線をリセット */
#appcontent, .browserSidebarContainer {
border: none !important;
}

/* 5. スプリッター（境界線）を1pxから完全に「0」にして消し去る場合 */
.sidebar-splitter, #sidebar-splitter {
width: 0 !important;
min-width: 0 !important;
max-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
}

>>220のコードをいただいた
赤ラインを青ラインにしたくてff0000を0000ffにしたけど赤いまま変えられない
何がいけないんだろうか　タブ色もピンクにならない

>>245
自己レス
userchrome.cssに2回記述してました
スレよごし申し訳ありません

おじいちゃん、さっき書いたでしょ

便利になったもんだ
CSSをアップロードして解決してほしいことをAIに聞けばすぐに解決してくれる

ブックマークメニューの中のフォルダが白黒になってしまったのですが、以前のような黄色にするにはどうしたらいいでしょうか？

>>36 さんの書き込みを記述してみたのですが、ブラウジングライブラリの中のフォルダは変わったんですが、ブックマークメニューの方は変わらず…

>>249
使ってないからよくわからないが
スレの流れ的に
>>37は追記したのかな？

>>249
firefox用スクリプトアップローダーにcssをアップしました

>>250
はい、>>36 と >>37 は試したのですが、アイコンを変えることはできませんでした。

>>251
ありがとうございます。
cssの中身をコピペして色々試していたのですが、
.bookmark-item {
fill: #ff0000 !important;
}
この記述のみが効果がありました。これを記述するとフォルダの色を変えることができました。
アイコン自体を変えることはできなかったです。でも色を変えるだけでも大分見やすくなりました。

>>252
cssは167行目までいじらずそのまますべて使わないといけません
chromeフォルダの中にアイコンの入っているiconsフォルダを入れます

>>253
167行目までいじらずそのまま使ったところ、アイコンを変えることができました。
それで、その理由を調べていたのですが、自分の使っているcssには
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";);
という記述があり、これを消したところアイコンが変わることが分かりました。