« 戻った | トップページ | 38回目 »

2021年6月19日 (土)

SVG形式の画像の色の変更

梅雨っぽい雨だった。

お昼頃、上空には雨雲はもうなくなっているはずなのに、しばらくの間は、霧雨のような雨が降っていた。

数時間後には、太陽が少しだけ顔を出した。

 

Firefoxが89になってから、ダウンロード・ボタンの表示のされ方が変わった。

ダウンロード中、進捗状況が円グラフ的に表示されるようになり、終わったら、✔のようになる。

僕の環境では、色が見づらく、ダウンロードしているのか、終わったのかがわかりづらい。

調べてみると、SVG形式の画像が指定されている。

これを編集して、それを指定してもいいけれど、ちょっと面倒。

調べてみたら、今回の場合であれば、SVGの画像の色が変更出来るというのがわかった。

ということで、Firefoxのツールバー上のボタンで、SVG形式の画像の色の変更方法という、ちょっとした小技。

/* ツールバー上のアイコン色の変更 */
.toolbarbutton-icon,
#downloads-indicator-icon,
#downloads-indicator-start-image,
#downloads-indicator-finish-image {
    fill: #fff !important;
}

/* ダウンロード進捗の円 */
#downloads-indicator-progress-outer {
    border: 0px !important;
}
#downloads-indicator-progress-inner {
    background: conic-gradient(var(--toolbarbutton-icon-fill-attention) var(--download-progress-pcent), #fff var(--download-progress-pcent)) !important;
    border-radius: 100% !important;
}

「fill」を使って、色を指定してあげればいいようだ。
上記では、「#fff」を変更のこと。

今回の場合は、「.toolbarbutton-icon」も指定している。
こうすると、「toolbarbutton-icon」クラス全てのものが対象となる。

もし、それが嫌で、「.toolbarbutton-icon」を個別に変更したいなら、親要素を指定してあげればいい。

「#tabs-newtab-button .toolbarbutton-icon」とか「#nav-bar .toolbarbutton-icon」とか。

これで、ダウンロード中もダウンロードが終了しても、アイコンがきちんと見えるようになった。

よかったよかった。

 

「#downloads-indicator-progress-inner」の「background」について補足。

これは、円グラフ(border-radiusで設定)の時計回りに、ダウンロードの進捗状況がわかるようになっている。

上記の書き方に、色指定で「#fff」がある。
例えば、ダウンロードが10%済みだとすると、その10%のところは、指定されている「--toolbarbutton-icon-fill-attention」の色。
残り90%の方が、白色となる。

逆に、進捗の方、この例えで言えば、10%側を白くしたいなら、こうするといい。

background: conic-gradient(#fff var(--download-progress-pcent), #444 var(--download-progress-pcent)) !important;

これは、進捗側が白色、残りの方を「#444」にしている。

適宜、好きな色にするといいでしょう。

|

« 戻った | トップページ | 38回目 »

パソコン・インターネット」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)




« 戻った | トップページ | 38回目 »