2006-01-10
_ userChrome.css いじり
Stylish を使いながら tab 周りをできるだけすっきりさせるようにいろいろ調整.今日はとりあえず tab をフラットな感じにして,高さもできるだけおさえる感じに.最近はメニューやツールバーを Office XP のようなフラットな外観にする FlatStyle (日本語版)という拡張をインストールしているので,これに合わせた感じにしてみました.
/* アクティブなタブの文字も太字にしない */ tab[selected="true"] { font-weight:normal !important; } /* フラットスタイル */ .tabbrowser-tabs tab { margin: 0 1px 2px 0 !important; padding: 0 0 1px 1px !important; color: black !important; background-color: transparent !important; -moz-appearance:none !important; -moz-border-top-colors: none !important; -moz-border-right-colors: none !important; -moz-border-bottom-colors: none !important; -moz-border-left-colors: none !important; -moz-border-radious-topleft:none !important; -moz-border-radious-topright:none !important; -moz-border-radious-bottomleft:none !important; -moz-border-radious-bottomright:none !important; border: 1px solid transparent !important; } .tabbrowser-tabs tab:hover { border: 1px solid Highlight !important; border: solid ThreeDShadow 1px !important; } .tabbrowser-tabs tab[selected=true] { border: 1px solid Highlight !important; background: Highlight url('white-70.png') !important; } /* タブにフォーカスが当たっときの点線を消す */ tab:focus > .tab-middle { outline-width: 0 !important; } /* タブのテキストを少し下にする */ tab .tab-text { margin-top: 0 !important; padding-top: 1px !important; }
white-xx.png なんかは FlatStyle の中にあるのを借用(というかコード周りもほとんどぱくってますが…).とりあえずこの辺で完成ということで,あまり頻繁に変更するものではないものは,今までどおり userChrome.css で定義することにしよう.まぁ,この辺はひとそれぞれ管理の仕方があるだろうけど.
以前にも Office XP 風にする userChrome.css を書いたのですが,これはメニュー周りを中心にしたものだったので,1 年ぶりの続編ということで.