FirefoxのuserChrome.cssネタ #5

Posted at 2004-11-11T19:15:00+09:00 in Software

遂に1.0と言いつつ、別に超安定版というわけでも無さそうな気がするFirefoxですが、まぁバージョン番号なんてモノは大きいのが新しいということしか意味しないわけですよ。違うと思うけど。で、僕はテーマは長らくQuteを使っていたわけですが、なんとなくデフォルトに戻してuserChrome.cssでガリゴリいじる方が良さそう(楽しそう)な感じがしたので、そうしてみました。かなり楽しいですが、userChrome.cssが3000行ちょいとか言うおかしなことになってきたのでダイエットしたりしなかったり。

モノのついでにフラットなボタン形式のタブにするためのCSSを書いてみたりしました。

タブをフラットなボタンにする

.tabbrowser-tabs tab {
  margin:0 3px 3px 0 !important;
  padding:3px 4px !important;
  color:-moz-dialogtext !important;
  background-color:-moz-dialog !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 -moz-dialog !important;
}

.tabbrowser-tabs tab:hover {
  border-top:1px solid threedhighlight !important;
  border-right:1px solid threedshadow !important;
  border-bottom:1px solid threedshadow !important;
  border-left:1px solid threedhighlight !important;
}

.tabbrowser-tabs tab[selected=true],
.tabbrowser-tabs tab[selected=true]:hover {
  border-top:1px solid threedshadow !important;
  border-right:1px solid threedhighlight !important;
  border-bottom:1px solid threedhighlight !important;
  border-left:1px solid threedshadow !important;
  color:infotext !important;
  background-color:infobackground !important;
  font-weight:normal !important;
}

.tabbrowser-tabs tab:hover {
  border-top:1px solid threedhighlight !important;
  border-right:1px solid threedshadow !important;
  border-bottom:1px solid threedshadow !important;
  border-left:1px solid threedhighlight !important;
}

.tabbrowser-tabs tab .tab-text {
  margin-top:2px !important;
}

長いとか言わない。Windowsネイティブっぽい感じですが、「ちょっと浅めでファッショナブル！」とか。以下のような感じになります。

上から順に、アクティブなタブ、非アクティブなタブ、非アクティブなタブにオンマウス。アクティブなタブの背景色はinfobackgroundなので、多くの場合は違和感が無いような気がする。

あとはツールバー部分を枠で囲ったり、ブラウザ部分をへこませたりすると、Windowsネイティブな感じが上手く出せる気がします。アイコンなどをbrowseui.dllからパクって来ると完璧。

いじってて感じたことは、デフォルトのテーマは作りこみが甘いような気がするなとかそういう偉そうなことだったりする。微妙に画像で逃げてたりするところが漢らしくない。