SmallStyle

_ 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 年ぶりの続編ということで．