[Firefox57+]タブの色を変更するCSS

Firefox57以降でタブ周りの色を変更するためのCSSコードです。userChrome.cssが必要なので、導入の方法がわからない場合はこちらを参考にして作成してください。

アクティブタブ上部の線

/* active tabs top line color */
.tab-line[selected=true] {
 background-color: aqua !important;
}

非アクティブタブにマウスオンしたときの上部の線

/* inactive tabs top line color (hover) */
.tabbrowser-tab:hover > .tab-stack > .tab-background > .tab-line:not([selected=true]) {
 background-color: darkblue !important;
}

非アクティブタブにマウスオンしたときの上部の線（Darkテーマ）

/* inactive tabs top line color (dark-theme) */
#TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab:hover > .tab-stack > .tab-background > .tab-line:not([selected=true]) {
 background-color: lime !important;
}

読み込み完了時のタブが光ったような効果

/* tabs shine effect color */
.tab-loading-burst[bursting]::before {
 fill: darkorange !important;
}

接続中のドットアニメーション

/* tabs connecting dot color */
.tab-throbber[busy]::before {
 fill: yellow !important;
}

読み込み中のドットアニメーション

/* tabs loading dot color */
.tab-throbber[progress]::before {
 fill: skyblue !important;
}

ピン留めタブのインジケーター

/* change tabs indicator */
.tabbrowser-tab:-moz-any([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]),
.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {
 background-image: url(拡張子を含むファイル名) !important;
}

これはSVGファイルを作り直さないと変更できないので、下記のコードをメモ帳か何かに貼り付けてカラーコード部分を任意の色に変更し、拡張子を.svgにしてchromeフォルダ内に保存します。保存したファイル名を上記コードの「拡張子を含むファイル名」の部分と置き換えると変更できます。

＜svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"＞
 ＜circle r="6" cy="6" cx="6" fill-opacity=".2" fill="#00C8D7" /＞
 ＜circle r="4" cy="6" cx="6" fill-opacity=".6" fill="#00C8D7"  /＞
 ＜circle r="2" cy="6" cx="6" fill="#00FEFF" /＞
＜/svg＞

アクティブタブの文字色

/* active tabs text color */
.tabbrowser-tab[visuallyselected=true] {
 color: white !important;
}

非アクティブタブの文字色

/* inactive tabs text color */
.tabbrowser-tab:not([visuallyselected=true]) {
 color: black !important;
}

アクティブタブの背景色

background-imageプロパティは変更しないでください。

/* active tabs background color */
.tab-background[selected=true] {
 background-color: blueviolet !important;
 background-image: none !important;
}

非アクティブタブの背景色

/* intactive tabs background color */
.tab-background:not([selected=true]) {
 background-color: chocolate !important;
}

非アクティブタブにマウスオンしたときの背景色

/* inactive tabs background color (hover) */
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]) {
 background-color: hotpink !important;
}