FirefoxのuserChrome.cssネタ #11

Posted at 2006-10-31T17:57:00+09:00 in Software

Firefox 2のデフォルト・テーマは悪くは無い。けれども画像で作ったタブとか画像で作ったタブとか画像で作ったタブとか画像で作ったタブとか画像で作ったタブとかはなんだかなーと思ってしまう。というわけで以前書いたフラットなタブを実現するuserChrome.cssネタをFirefox 2に対応させたりとか他にもいくつか。

タブをフラットなボタンにする(Firefox 2向け)

.tabbrowser-tabs {
  background-image: none !important;
}

.tabbrowser-tab {
  margin-right: 3px !important;
}

.tabbrowser-tab[selected="true"] {
  font-weight: normal !important;
}

.tabbrowser-tab > .tab-image-left {
  border-top: 1px solid threedshadow !important;
  border-bottom: 1px solid threedhighlight !important;
  border-left: 1px solid threedshadow !important;
  width: 4px !important;
  color: infotext !important;
  background-color: infobackground !important;
  background-image: none !important;
  -moz-border-radius-topleft: 0px !important;
}

.tabbrowser-tab:not([selected="true"]) > .tab-image-left {
  margin: 0px !important;
  border-color: -moz-dialog !important;
  height: 24px !important;
  color: -moz-dialogtext !important;
  background-color: -moz-dialog !important;
  background-image: none !important;
}

.tabbrowser-tab:hover:not([selected="true"]) > .tab-image-left {
  margin: 0px !important;
  border-top: 1px solid threedhighlight !important;
  border-bottom: 1px solid threedshadow !important;
  border-left: 1px solid threedhighlight !important;
  height: 24px !important;
  background-image: none !important;
}

.tabbrowser-tab > .tab-image-middle {
  padding: 0px !important;
  border-top: 1px solid threedshadow !important;
  border-bottom: 1px solid threedhighlight !important;
  color: infotext !important;
  background-color: infobackground !important;
  background-image: none !important;
}

.tabbrowser-tab:not([selected="true"]) > .tab-image-middle {
  margin: 0px !important;
  border-color: -moz-dialog !important;
  height: 24px !important;
  color:  -moz-dialogtext !important;
  background-color: -moz-dialog !important;
  background-image: none !important;
}

.tabbrowser-tab:hover:not([selected="true"]) > .tab-image-middle {
  margin: 0px !important;
  border-top: 1px solid threedhighlight !important;
  border-bottom: 1px solid threedshadow !important;
  height: 24px !important;
  background-image: none !important;
}

.tabbrowser-tab > .tab-image-middle > .tab-icon > .tab-icon-image {
  margin-top: 0px !important;
}

.tabbrowser-tab > .tab-image-middle > .tab-text {
  margin-top: 0px !important;
  border: none !important;
}

.tabbrowser-tab > .tab-image-right {
  border-top: 1px solid threedshadow !important;
  border-bottom: 1px solid threedhighlight !important;
  border-right: 1px solid threedhighlight!important;
  width: 1px !important;
  color: infotext !important;
  background-color: infobackground !important;
  background-image: none !important;
  -moz-border-radius-topright: 0px !important;
}

.tabbrowser-tab:not([selected="true"]) > .tab-image-right {
  margin: 0px !important;
  border-color: -moz-dialog !important;
  height: 24px !important;
  color:  -moz-dialogtext !important;
  background-color: -moz-dialog !important;
  background-image: none !important;
}

.tabbrowser-tab:hover:not([selected="true"]) > .tab-image-right {
  margin: 0px !important;
  border-top: 1px solid threedhighlight !important;
  border-bottom: 1px solid threedshadow !important;
  border-right: 1px solid threedshadow !important;
  height: 24px !important;
  background-image: none !important;
}

.tabs-left,
.tabs-right,
.tabs-bottom {
  display: none !important;
}

長い。ちょっと詰めて無いので無駄なところが多いのかもしれない。

という感じの表示になる。左からアクティブなタブ・カーソルでポイントした非アクティブなタブ・非アクティブなタブのプレビュー。

タブを選択した時に表示される点線を消す

.tabbrowser-tab > .tab-image-middle > .tab-text {
  border: none !important;
}

何気にoutlineからborderになってる。

ロケーション・バーの枠線をへこませる

#urlbar {
  border: 2px solid !important;
  -moz-border-top-colors: threedshadow threeddarkshadow !important;
  -moz-border-right-colors: threedhighlight threedlightshadow !important;
  -moz-border-bottom-colors: threedhighlight threedlightshadow !important;
  -moz-border-left-colors: threedshadow threeddarkshadow !important;
}

なんでもフラットにすりゃー良いってモノではない。逆に何でもネイティブっぽくすりゃー良いってモノでもない。

ロケーション・バーのドロップダウン・ボタンを飛び出させる

.autocomplete-history-dropmarker {
  border: 2px solid !important;
  -moz-border-top-colors: threedlightshadow threedhighlight !important;
  -moz-border-right-colors: threeddarkshadow threedshadow !important;
  -moz-border-bottom-colors: threeddarkshadow threedshadow !important;
  -moz-border-left-colors: threedlightshadow threedhighlight !important;
}

.autocomplete-dropmarker-bkgnd-top,
.autocomplete-dropmarker-bkgnd-mid-top,
.autocomplete-dropmarker-bkgnd-mid-bottom,
.autocomplete-dropmarker-bkgnd-bottom {
  list-style-image: none !important;
  background-image: none !important;
}

上記変更によりURL履歴を出すドロップダウン・ボタンがちょっと微妙な感じになるので、Internet Explorerっぽく修正。

---

デフォルト・テーマはそこそこキレイではあると思うのだけど、デザイン重視なわけでもなく、OSとの融合重視なわけでもない微妙な位置な出来という感想。その微妙さを良いとこ取りと思えるのなら好きになれるテーマだと思う。「Firefox 1.5のデフォルト・テーマの方が良かった！！！」という人はFirefox 2向けのWinstripeが出ているので、これをインストールすれば良さそう。

追記

タブをフラットなボタンにする(Firefox 2向け)を導入した時にどんな感じにタブが表示されるかのプレビュー画像を追加しておいた。