Firefox 3 のデフォルトテーマを Windows クラシックらしくする

インスパイヤされました。

今回の改造にあたって加えられた新たなオリジナリティは以下。

  • Firefox 3 用に書き換えました。

以下の環境で動作確認しました。

タブバーを少し細くしました。
Firefox のデフォルトテーマを Windows クラシックらしくするユーザスタイルです。
このスタイルを適用すると、UI に以下の変更が加えられます。

  • ツールバーやサイドバー、タブバーなどを枠線で囲みます。
  • タブとタブのスクロールボタン、『タブの一覧表示』ボタンをフラットにします。
  • ブラウザ部分をへこませます。

スタイル適用前のスクリーンショットは以下。

スタイル適用後のスクリーンショットは以下。

スタイル適用後のタブバーのスクリーンショットは以下。

左から、『アクティブなタブ』、『ポインティングデバイスで指示中の非アクティブなタブ』、『非アクティブなタブ』です。

スタイル適用後のタブがフォーカスを得たときのスクリーンショットは以下。

コード

userChrome.css に記述するか、Stylish で適用して下さい。

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

/* ツールバー・サイドバー・タブバーを枠線で囲む
 * * hail2u.net - Weblog - FirefoxのuserChrome.cssネタ #7
 *   <http://hail2u.net/blog/software/firefox_userchrome_css_tricks_7.html>
 * から朴りました。
 */
#navigator-toolbox {
	padding-bottom: 0 !important;
	border-width: 1px !important;
	border-color: ThreeDShadow ThreeDHighlight ThreeDHighlight ThreeDShadow !important;
	border-style: solid !important;
	-moz-appearance: none !important;
}
#navigator-toolbox > toolbar {
	border-width: 1px !important;
	border-color: ThreeDHighlight ThreeDShadow ThreeDShadow ThreeDHighlight !important;
	border-style: solid !important;
	-moz-appearance: none !important;
}
#sidebar-box {
	border-width: 1px 2px 2px !important;
	border-top-color: ThreeDShadow !important;
	border-style: solid !important;
	-moz-border-right-colors: ThreeDHighlight ThreeDShadow !important;
	-moz-border-bottom-colors: ThreeDHighlight ThreeDShadow !important;
	-moz-border-left-colors: ThreeDShadow ThreeDHighlight !important;
}
#sidebar-box > sidebarheader {
	border-bottom-width: 2px !important;
	border-bottom-style: solid !important;
	-moz-appearance: none !important;
	-moz-border-bottom-colors: ThreeDHighlight ThreeDShadow !important;
}
#sidebar-splitter {
	border-right-style: none !important;
	border-left-style: none !important;
	min-width: 4px !important;
}
.tabbrowser-tabs {
	border-width: 0 2px 2px !important;
	border-style: solid !important;
	-moz-appearance: none !important;
	-moz-border-right-colors: ThreeDHighlight ThreeDShadow !important;
	-moz-border-bottom-colors: ThreeDHighlight ThreeDShadow !important;
	-moz-border-left-colors: ThreeDShadow ThreeDHighlight !important;
}
#main-window > #browser > #appcontent > #content > tabbox > .plain > notificationbox notification > .notification-inner.outset {
	border-width: 2px !important;
	-moz-border-top-colors: ThreeDShadow ThreeDHighlight !important;
	-moz-border-right-colors: ThreeDHighlight ThreeDShadow !important;
	-moz-border-bottom-colors: ThreeDHighlight ThreeDShadow !important;
	-moz-border-left-colors: ThreeDShadow ThreeDHighlight !important;
}

/* タブをフラットなボタンにする
 * * hail2u.net - Weblog - FirefoxのuserChrome.cssネタ #11
 *   <http://hail2u.net/blog/software/firefox-userchrome-css-tricks-11.html>
 * から朴りました。
 */
.tabbrowser-tabs {
	background-image: none !important;
}
.tabs-bottom {
	background-image: none !important;
	border-style: none !important;
}
.tabs-container:not([overflow="true"]) {
	-moz-padding-start: 0 !important;
}
.tabbrowser-arrowscrollbox > .scrollbutton-up,
.tabbrowser-arrowscrollbox > .scrollbutton-down,
.tabs-alltabs-button {
	background-image: none !important;
	margin: 0 !important;
	border: 1px transparent solid !important;
	-moz-border-top-colors: none !important;
	-moz-border-right-colors: none !important;
	-moz-border-left-colors: none !important;
}
.tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled="true"]):hover,
.tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled="true"]):hover,
.tabs-alltabs-button:hover {
	padding: 0 !important;
	border-color: ThreeDHighlight ThreeDShadow ThreeDShadow ThreeDHighlight !important;
}
.tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled="true"]):active:hover,
.tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled="true"]):active:hover,
.tabs-alltabs-button[open="true"],
.tabs-alltabs-button[open="true"]:hover {
	border-color: ThreeDShadow ThreeDHighlight ThreeDHighlight ThreeDShadow !important;
}
.tabbrowser-arrowscrollbox > .scrollbutton-up {
	-moz-border-radius-topright: 0 !important;
	-moz-margin-end: 1px !important;
}
.tabbrowser-arrowscrollbox > .scrollbutton-up[chromedir="rtl"] {
	-moz-border-radius-topleft: 0 !important;
}
.tabbrowser-arrowscrollbox > .scrollbutton-down,
.tabs-alltabs-button {
	-moz-border-radius-topleft: 0 !important;
	-moz-margin-start: 1px !important;
}
.tabbrowser-arrowscrollbox > .scrollbutton-down[chromedir="rtl"],
.tabs-container > stack[chromedir="rtl"] > .tabs-alltabs-button {
	-moz-border-radius-topright: 0 !important;
}
.tabs-alltabs-box-animate {
	background-image: none !important;
	margin: 0 !important;
	border-width: 1px !important;
	border-color: ThreeDHighlight ThreeDShadow ThreeDShadow ThreeDHighlight !important;
	border-style: solid !important;
	width: auto !important;
	-moz-margin-start: 1px !important;
}
.tabbrowser-tab {
	background-image: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 1px transparent solid !important;
	min-width: 22px !important;
	-moz-border-top-colors: none !important;
	-moz-border-right-colors: none !important;
	-moz-border-left-colors: none !important;
	-moz-border-radius-topright: 0 !important;
	-moz-border-radius-topleft: 0 !important;
}
.tabbrowser-tab:hover,
.tabbrowser-tab[selected="true"] {
	border-color: ThreeDShadow ThreeDHighlight ThreeDHighlight ThreeDShadow !important;
}
.tabbrowser-tab[selected="true"] {
	background-image: url("chrome://global/skin/toolbar/Lighten.png") !important;
	background-repeat: repeat !important;
}
.tabbrowser-tab[selected="true"]:focus {
	outline: 1px -moz-DialogText dotted !important;
	outline-offset: -2px !important;
}
.tabbrowser-tab:not([selected="true"]):hover {
	border-color: ThreeDHighlight ThreeDShadow ThreeDShadow ThreeDHighlight !important;
}
.tab-icon-image {
	margin: 2px !important;
	opacity: 0.4 !important;
}
.tabbrowser-tab:hover > .tab-icon-image,
.tabbrowser-tab[selected="true"] > .tab-icon-image {
	opacity: 1.0 !important;
}
.tab-text {
	color: GrayText !important;
	border-style: none !important;
}
.tabbrowser-tab:hover > .tab-text,
.tabbrowser-tab[selected="true"] > .tab-text {
	color: -moz-DialogText !important;
}
.tabbrowser-tab[selected="true"] > .tab-text {
	font-weight: normal !important;
}
.tab-close-button {
	margin: -7px 0 0 !important;
	opacity: 0.8 !important;
	-moz-margin-start: -14px !important;
}
.tab-close-button > .toolbarbutton-icon {
	margin-top: 0 !important;
}
.tabs-container > .tabs-closebutton {
	background-image: none !important;
	margin: 0 !important;
	border-style: none !important;
	-moz-border-radius-topleft: 0 !important;
	-moz-margin-start: 1px !important;
}
.tabs-container > .tabs-closebutton[chromedir="rtl"] {
	border-style: none !important;
	-moz-border-radius-topright: 0 !important;
}

/* ブラウザ部分をへこませる
 * * hail2u.net - Weblog - FirefoxのuserChrome.cssネタ #4
 *   <http://hail2u.net/blog/software/firefox_userchrome_css_tricks_4.html>
 * から朴りました。
 */
#main-window > #browser > #appcontent > #content > tabbox > .plain > notificationbox > browser {
	border-width: 2px !important;
	border-style: 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;
}

『タブを閉じる』ボタンは、設定名 browser.tabs.closeButtons に 2 をセットすることで非表示に出来ます。
詳しくは、about:config と user.js による Firefox のカスタマイズ - えむもじら #タブクローズボタンの設定 を参照してください。

『タブの一覧表示』ボタンを非表示にするには、以下を追加してください。

/* タブの一覧表示ボタンを消す */
.tabs-alltabs-box, .tabs-alltabs-box-animate, .tabs-alltabs-button {
	display: none !important;
}

タブがフォーカスを得たときの点線が鬱陶しい方は、『.tabbrowser-tab[selected="true"]:focus { ... }』を削除して下さい。