はりをきば

そこにピカマンがいる限り 私はテイッハットウッをやめない

ツールチップの見た目をFirefoxDeveloperEditionに合わせてみる

¯注意
この記事はを最後に更新されていない。
更新日が1年以上前の記事はリンク切れしていたり、情報としては役に立たなくなっている可能性あり。
ˆMixed Contentについて
この記事は投稿日が古い為、記事中の画像は非SSL(http://)で貼られている。(※投稿画像以外は全てSSL)
この件に関して詳しくはこちらを参照。

Auroraが名前を変えてリニューアルした。
プロファイルがデフォで分離し、独自の角張った青と黒が基調のテーマになったが、個人的には通常版よりこっちの方が好き。
リリース版のあのChromeの劣化パクリとしか言えない曲線デザインは反吐が出る。


というわけでよりそれっぽくする為、マウスオーバーした際の各種ツールチップのスタイルもFDEのテーマに合わせてみる。



statuspanel > hbox.statuspanel-inner {
	background: transparent !important;
	-moz-appearance: none !important;
}

statuspanel > hbox.statuspanel-inner > label.statuspanel-label {
	background: linear-gradient(45deg, rgba(23, 27, 31, 0.9), rgba(37, 44, 51, 0.9)) !important;
	border-right: 1px solid rgb(26, 70, 102) !important;
	border-top: 1px solid rgb(26, 70, 102) !important;
	border-top-right-radius: 4px !important;
	color: white !important;
	font-family: Verdana, メイリオ !important;
	font-size: 14px !important;
	line-height: 0 !important;
	margin: 0 !important;
	padding: 4px !important;
}

statuspanel > hbox.statuspanel-inner > label.statuspanel-label[mirror="true"] {
	background: linear-gradient(315deg, rgba(23, 27, 31, 0.9), rgba(37, 44, 51, 0.9)) !important;
	border-left: 1px solid rgb(26, 70, 102) !important;
	border-right: 0 !important;
	border-top-left-radius: 4px !important;
	border-top-right-radius: 0 !important;
}

tooltip {
	background: linear-gradient(rgba(23, 27, 31, 0.9), rgba(37, 44, 51, 1), rgba(23, 27, 31, 0.9)) !important;
	border: 2px solid rgb(26, 70, 102) !important;
	border-radius: 4px !important;
	color: white !important;
	font-family: Verdana, メイリオ !important;
	font-size: 12px !important;
	padding: 4px !important;
	-moz-appearance: none !important;
}

(気づいた人もいるだろうけど、このCSSはこの記事のRGB値を変えただけだったり…)




これをStylishやらuserChrome.cssやらで適用すると以下のようになる。
f:id:Gutyan:20141118222850p:plain
左下、右下のアドレスツールチップ及びtitle属性のツールチップの枠、文字色、背景色をFDEのそれと合わせる。




FDE普通に使いやすいしアニメーションがヌルヌル動くし…
Cyberfoxからメイン乗り換えようかな……



余談

関係ないけど、今日からこのブログも背景画像のほとんどを削除し
FDEに合わせたカラーリングにしてみた。
f:id:Gutyan:20141118224016p:plain