VivaldiのUI周りのフォントサイズ等を変更してみた

Webブラウザである「Vivaldi」において、タブ部分のフォントが小さかったり、ブックマークバーのフォントサイズが小さかったり、ブックマークバーのフォルダ表示部分が途中で途切れていたりしたので、変更しようと思い設定画面を見ましたが、全然見当たらず、調べていたら、スタイルシートのファイルを変更することで可能だとわかりました。

今回は、スタイルシートをいじることによりVivaldiの設定が変更できる方法についてです。

タブに表示させるフォントサイズの変更

「C:\Users\（アカウント名）\AppData\Local\Vivaldi\Application\（バージョン）\resources\vivaldi\style\common.css」をテキストエディタで開く。
「.tab-position .tab」を検索する。
「font-size」の部分を設定したいサイズに書き換える。
ファイルを保存する。

下記は、フォントサイズを16pxに変更したコードである。なお、見やすくするため改行を入れているが本来のファイルでは改行は入っていないので注意。

.tab-position .tab{
    display:flex;
    flex:1 1 100%;
    flex-flow:column;
    overflow:hidden;
    font-size:16px;  //こちらを変更する。
    -webkit-user-select:none;
    -webkit-user-drag:element;
    background-color:var(--colorBgLight);
    color:var(--colorFg);
    fill:var(--colorFg)
}

ブックマークバーに表示させるフォントサイズの変更

「C:\Users\（アカウント名）\AppData\Local\Vivaldi\Application\（バージョン）\resources\vivaldi\style\common.css」をテキストエディタで開く。
「.bookmark-bar」を検索する。
「font-size」の部分を設定したいサイズに書き換える。
ファイルを保存する。

下記は、フォントサイズを14pxに変更したコードである。なお、見やすくするため改行を入れているが本来のファイルでは改行は入っていないので注意。

.bookmark-bar{
    display:flex;
    flex:0 0 auto;
    overflow:visible;
    height:28px;
    font-size:14px;  //こちらを変更する。
    border:0 solid var(--colorAccentBgDarker);
    background-color:var(--colorAccentBgDark);
    color:var(--colorAccentFg);
    fill:var(--colorAccentFgFaded)
}

ブックマークバーに表示させるフォルダテキスト部分の幅の変更

「C:\Users\（アカウント名）\AppData\Local\Vivaldi\Application\（バージョン）\resources\vivaldi\style\common.css」をテキストエディタで開く。
「.bookmark-bar button」を検索する。
「max-width」の部分を設定したいサイズに書き換える。
ファイルを保存する。

下記は、幅のサイズを150pxに変更したコードである。なお、見やすくするため改行を入れているが本来のファイルでは改行は入っていないので注意。

.bookmark-bar button{
    display:inline-flex;
    align-items:center;
    flex:0 0 auto;
    max-width:150px;  //こちらを変更する。
    padding:0 6px;
    margin-left:0;
    margin-right:0;
    border:0;
    background-color:var(--colorAccentBgDark);
    color:var(--colorAccentFg);
    fill:var(--colorAccentFg);
    position:relative
}