すたすた式
Firefox
いつごろからか、ツリー型タブ・Tree Style Tab（以降TST）のテーマがPhotonのとき、アクティブタブがわかりづらくなっていました。
このままではちょっと使いづらいのでアクティブタブの色を変えてみました。
環境
上のタブ（既存のタブ）は消してあります。
コードはTSTの作者のかたのtreestyletab Wiki · GitHubを参照。
該当CSSはTSTのオプションから適用します。
Ctrl+Shift+aで「拡張機能の管理」を開き、Tree Style Tab - ツリー型タブ右側の3つのドットから[オプション]をクリック。
詳細設定をクリック。
この画面にコードを書き込み・コピペします。
画面が狭い場合は、画面右下をドラッグすると領域が広がります。
広い画面で設定を行いたい場合、オプション画面上部の[この設定画面をより広いスペースで開く]をクリックします。
外観をクリックします。
TSTのテーマがPhotonのとき
アクティブタブの色はCode snippets for custom style rules · piroor/treestyletab Wiki · GitHubを基本に
tab-item.active { background-color: #A05E63; } tab-item.active .label-content { font-weight: bold; }
Firefoxのテーマが「ダーク」のとき、タブの色や位置によっては、すこし段差？のように見える部分があったので以下を追加しました。
tab-item { border-color: #000; }
ホバーしたときはCode snippets for custom style rules · piroor/treestyletab Wiki · GitHubより
tab-item:hover { background: #005B80; }
としてみました。
全体としてはこのようにしました。
tab-item { border-color:#000; } tab-item:hover { background: #005B80; } tab-item.active { background-color: #A05E63; } tab-item.active .label-content { font-weight: bold; }
TSTのテーマがProtonのとき
PhotonのときのCSSを適用したところこのようなデザインになりました。
期待通りのデザインではないのでアクティブタブ全体の色を変えていきます。
Firefoxのテーマが「システムのテーマ」のとき
:root { --non-lwt-selected-tab-background-color-proton: #A05E63; }
または
:root { --toolbar-non-lwt-bgcolor: #A05E63; }
:root { --browser-selected-tab-bg: #A05E63; }
Firefoxのテーマが「Light」や「Dark」のときは
で色が変わりました。
他にも色の変わるセレクターがあると思うので上記セレクターは一例です。
また、ホバーしたときのCSSは
tab-item:not(.active):not(.bundled-active):not(.highlighted):hover { --tab-surface: #33ff33; }
を追加しました。
全体としてはこのようにしてみました。
:root { --browser-selected-tab-bg: #A05E63; } tab-item:not(.active):not(.bundled-active):not(.highlighted):hover { --tab-surface: #005B80; }
サイト内検索に使ってください 🐤
© 2015 すたすた式
Enjoy!👍
QooQ
コメントなし:
コメントを投稿