【Vivaldi】「アップデートの準備ができました」を非表示にするCSS

2022年4月17日カスタムCSS

Vivaldiのアイコン

この記事では、VivaldiのオリジナルカスタムUI機能を使って、ツールバーの「アップデートの準備ができました」の文字を非表示にするCSSについて書きます。

本記事は、オリジナルカスタムUIが有効になっている前提です。詳しくはこちらを参考にしてみてください。

【Vivaldi】「アップデートの準備ができました」を非表示にするCSS

Windows版Vivaldiには、アップデートがあったら、自動的にインストールするサイレントアップデート機能が搭載されています。設定→一般→更新→「アップデートを自動ダウンロード・インストールする」にチェックすることで有効になります。

アップデートがあった場合に、バッググラウンドでファイルをダウンロードしてくれます。ダウンロードできたら、アドレスバーとChrome拡張機能の間に「アップデートの準備ができました」というボタンが表示されます。クリックするとVivaldiが再起動され、晴れてアップデート完了です。

ファイルをダウンロードするのがめんどくさいズボラな僕にとっては、非常にありがたい便利機能です。しかし、「アップデートの準備ができました」という文言は少々邪魔くさいです。「アイコンだけ表示されればそれでいいや」と思ったので、CSSを使って文章を非表示にしてみます。

本記事は、既にオリジナルカスタムUI機能が有効になっている前提です。まだ有効にしていないという方は、以下の記事を参考にしてみてください。

CSS

以下のCSSになります。

/*「アップデートの準備ができました」非表示*/
button[title="アップデートの準備ができました"] .button-title {
  display: none;
}

上記のCSSを、テキストエディター(Visual Studio Codeや、Windows標準でインストールされているメモ帳アプリなど)でファイルに書き込みます。

Vivaldiを再起動すると、「アップデートの準備ができました」という文字が非表示になります。更新アイコンはこれまで通り表示されます。

Vivaldiの更新があった場合に表示される「アップデートの準備ができました」ボタンをアイコンだけにした画像

クリックでダイアログを表示します。

「アップデートの準備ができました」ダイアログ

アイコン含めて全部非表示にするCSS

アイコン+テキスト両方を非表示にすることも可能です。アップデートするボタンを消すということなので、おすすめはしません。適当する場合は、設定→一般→更新の「アップデートを自動ダウンロード・インストールする」のチェックを外すことをおすすめします。

/*「アップデートの準備ができました」非表示(ボタン含む)*/
button[title="アップデートの準備ができました"] {
  display: none !important;
}

CSSを適用すると、文字だけでなく、更新ボタンも非表示になります。当然クリックもできません。

「アップデートの準備ができました」非表示(ボタン含む)CSSを適用した画像

アップデートする場合は、Vivaldiメニュー→ヘルプ→アップデートを確認で手動アップデートできます。

【おまけ】アイコン変更

更新ボタンのアイコンは変更できます。少々難易度は上がりますが、pathで指定できます。例として、Vivaldiメニューにも使われているVivaldiアイコンのpathに置き換えたCSSを貼っておきます。

/*「アップデートの準備ができました」のボタンをVivaldiアイコン化*/
button[title="アップデートの準備ができました"] span svg path {
  d: path("M 18.6 3.4 C 17.1 2 14.9 2 11 2 S 4.9 2 3.4 3.4 C 2 4.9 2 7.1 2 11 s 0 6.1 1.4 7.6 C 4.9 20 7.1 20 11 20 s 6.1 0 7.6 -1.4 C 20 17.1 20 14.9 20 11 s 0 -6.1 -1.4 -7.6 Z m -2.2 5.2 l -4.2 7.2 c -0.3 0.4 -0.6 0.7 -1.1 0.8 c -0.6 0 -1 -0.2 -1.3 -0.7 c -0.9 -1.5 -1.7 -3 -2.6 -4.5 c -0.5 -0.9 -1.1 -1.8 -1.6 -2.8 c -0.6 -0.9 0 -2 1.1 -2.1 c 0.6 0 1 0.2 1.3 0.7 c 0.4 0.7 0.8 1.3 1.2 2 c 0.3 0.5 0.6 1 0.8 1.5 c 0.4 0.7 1 1.1 1.8 1.1 c 1.2 0.1 2.2 -0.8 2.4 -2 v -0.2 c 0 -0.4 -0.1 -0.7 -0.2 -1 c -0.4 -0.9 0 -1.8 1 -2 c 0.8 -0.2 1.6 0.4 1.7 1.2 c 0 0.2 -0.1 0.5 -0.3 0.8 Z") !important;
  fill: #fe5d55;
  transform: scale(1.1);
}

マジで何の需要があるのかは不明ですが、更新ボタンがVivaldiアイコン化します。いるかこれ…。「fill: #fe5d55;」を変更すると、好きな色にできます。

更新ボタンをVivaldiアイコン化した画像

同じ要領で、ブラウザの閉じる・最大化・最小化ボタンをMac風にするといったことも可能です。

感想

以上、Vivaldiブラウザの「アップデートの準備ができました」のテキストを非表示にするCSSについてでした。

Posted by ナポリタン寿司