vimium の フォーカスを見やすくする

4534 ワード
firefox Chrome vimium Vimperator Chrome テキストリンク

はじめに

このCSSを「CSS for Vimium UI」に貼り付けると
スクショのような色でフォーカスの文字がでるようになります。

デフォルトだと黄色のブロックで出るので、ちょっと目立ちすぎかなと思い
黒っぽい色に変えて、文字の色も見慣れた色に変更しました。

変更する箇所は以下の場所にあります。
vimium > オプション　> Advanced Options > CSS for Viumium UI

css

div > .vimiumHintMarker {
/* linkhint boxes */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#565756),
color-stop(100%,#444444));
border: 1px solid #E4E4E4;
opacity: 1.0;
text-shadow: none !important;
}

div > .vimiumHintMarker span {
/* linkhint text */
text-shadow: -1px -1px 2px black, 1px -1px 2px black, -1px 1px 2px black, 1px 1px 2px black;
color: #33cccc;
font-size: 14px;
font-family: Overpass, "ヒラギノ角ゴ Pro", Avenir, sans-serif;
}

div > .vimiumHintMarker > .matchingCharacter {
color: #FF8700;
}

参考画像

経緯

Firefoxのアップデートで長くお世話になったvimperatorが使えなくなってしまい、
Vim Vixenなど大体プラグインを複数試していましたが、
そもそもfirefoxに止まる必要性を感じなくなったので
chromeに移行しようとしてカスタマイズしました。

次はtreetabの代わりになるプラグインを...!

参考URL