Firefox 3 のデフォルトテーマを Windows クラシックらしくする
- FirefoxのuserChrome.cssネタ #7 - Hail2u
- FirefoxのuserChrome.cssネタ #11 - Hail2u
- FirefoxのuserChrome.cssネタ #4 - Hail2u
にインスパイヤされました。
今回の改造にあたって加えられた新たなオリジナリティは以下。
- Firefox 3 用に書き換えました。
以下の環境で動作確認しました。
- Windows XP Home Edition SP2
- Mozilla Firefox 3.0.1
タブバーを少し細くしました。
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 { ... }』を削除して下さい。