FirefoxのuserChrome.cssネタ #5

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

.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なので、多くの場合は違和感が無いような気がする。