VivaldiのカスタムCSS

vivaldi_extend.css

/* タブの高さを32pxに設定 */
/* #tabs-tabbar-container {
    height: 32px !important;
} */

/* 選択したテキストの色 */
#browser:not(.mac) .UrlBar-UrlField.pseudo-selected:first-line {
    color: var(--colorFg);
    background-color: #3daee9cc;
  }

/*【ヘッダー】背景の透明化*/
#browser #header {
    background: transparent !important;
}

/*【アドレスバー】透明化 境界線を削除 */
.UrlBar-AddressField, .UrlBar-SearchField, .UrlBar-AddressField:focus, .UrlBar-SearchField:focus {
    border: none !important;
    outline: none !important;
    background-color: transparent !important;
}

/* アドレスバーにホバーしたときに境界線を表示 */
.UrlBar-AddressField:hover, .UrlBar-SearchField:hover {
    transition: .2s;
    border: solid 1px #3daee9 !important;
    /* outline: none !important; */
}

/* ページロードの色を変更 */
.UrlBar-AddressField .pageload .pageload-indicator {
    background-color: var(--colorHighlightBg);
}

.toolbar-mainbar .toolbar-extensions, /*表示している拡張機能*/
.toolbar-extensions>div /*「ボタンを隠す」で非表示にしている拡張機能*/ 
{
    background-color: transparent !important;
}

/* 謎のボーダーを透明化 */
.toolbar-extensions:before, .toolbar-mainbar:before {
    background-color: transparent !important;
}

/*【ブックマークバー】背景を透明化*/
.bookmark-bar {
    background-color: var(--colorBgAlphaBlur) !important;
    backdrop-filter: var(--backgroundBlur) !important;
    border: none;
}

.color-behind-tabs-off .bookmark-bar button, .color-behind-tabs-on .bookmark-bar, .color-behind-tabs-on .bookmark-bar button,.bookmark-bar .observer {
    background-color: transparent;
}


/*【ブックマークバー】アイコンフォーカス時のデザイン変更*/
.color-behind-tabs-off .bookmark-bar button:focus, .color-behind-tabs-off .bookmark-bar button:hover {
  background-color: #3daee9c1; /*好きな色に変更可能*/
  border-radius: var(--radius); /*角丸具合*/
}

/* セパレーターをきれいに */
.color-behind-tabs-off .bookmark-bar button .separator {
    border-right: 1px solid var(--colorFg);
    height: 66.7%;
}
  

/*【ツールバー】境界線を削除*/
/*ブックマークバー*/
.address-top .toolbar-mainbar:after,
/*拡張機能*/
.color-behind-tabs-off.address-top .mainbar > .toolbar-mainbar .toolbar-extensions:after,
.color-behind-tabs-off.address-top .mainbar > .toolbar-mainbar:after {
    background-color: transparent !important;
    height: unset;
}

/*【ツールバー】背景の透明化*/
.toolbar-mainbar /*アドレスバー以外のツールバー*/
{
    background-color: var(--colorBgAlphaBlur) !important;
    backdrop-filter: var(--backgroundBlur) !important;
}

#panel_switch {
    background: none;
    backdrop-filter: var(--backgroundBlur) !important;
}


/*【パネル】背景の透明化*/
/* #panels-container {
    background: transparent;
} */
  
  /*【パネル】オーバーレイにしている時のパネルの背景透明化*/
/* .panel-group {
    background: transparent !important;
    backdrop-filter: var(--backgroundBlur) !important;
} */
  
  /*【パネル】影の削除*/
#panels-container.right:not(.overlay) .panel-group, #panels-container.right.icons .panel-group, #panels-container.right.icons.overlay {
    box-shadow: none;
}
  /* パネルの境界線を削除 */
#panels-container.left #panel_switch {
    box-shadow: none !important;
}

/*【パネル】翻訳パネルの入力、出力部分の背景透明化*/
.panel .TranslatePanel-SrcText, .panel .TranslatePanel-TranslatedText {
  background: transparent;
  border: none;
  box-shadow: none;
}

/*ページ内検索（Ctrl＋F）*/
.find-in-page-wrapper {
    order: 2; /* 下配置 */
}

/* タブの背景色を変更 */
#browser .tab-position .tab.active {
    background-color: var(--colorBgAlphaBlur);
    backdrop-filter: var(--backgroundBlur);
}

/* 未読タブの色変更 */
.tab-position .tab.unread {
    background-image: linear-gradient(-135deg, var(--colorHighlightBg) 5px, transparent 5px);
    background-position: top right;
    background-repeat: no-repeat;
}

/* 縦に表示 */
.SpeedDialView-Head {
    display: flex;
    flex-direction: column;
}

.sdwrapper .iconmenu-container.SearchField {
    background-color: var(--colorBgAlphaBlur);
}

/* ブロックカウンター */
.on-speeddial, .SpeedDial-Blocked-Counter {
    flex: 1 0;
    min-width: 320px;
    max-width: 100%;
}

/*ナビゲーションバーを下部に移動、透明化*/
.startpage .startpage-navigation {
    order: 1;
    box-shadow: none;
    background-color: var(--colorBgAlphaBlur);
    backdrop-filter: var(--backgroundBlur);
    min-height: 20px;
  }
  
/*ナビゲーションバーの余分な枠線非表示*/
  .startpage .startpage-navigation .startpage-navigation-group:last-of-type {
    border-left: none;
}

/*スピードダイヤルのホバー時アニメーション*/
.startpage .dial {
    /* background-color: transparent; */
    box-shadow: none;
    transition: .3s;
}

.speeddial .dial > .thumbnail-title.hidden {
    background: var(--colorBgAlphaBlur);
}


/*【ステータスバー】背景の透明化&角丸化*/
#webview-container~.StatusInfo .StatusInfo-Content {
    border: none;
    border-radius: var(--radius);
    background: var(--colorBgAlphaBlur);
    backdrop-filter: var(--backgroundBlur);
}

/*【アドレスバー】ドロップダウンリストの透明化*/
/*【クイックコマンド】背景の透明化*/
#modal-bg>div, .OmniDropdown {
    border: none;
    background: var(--colorBgAlphaBlur) !important;
    backdrop-filter: var(--backgroundBlur);
}

/*下部のコマンド欄*/
.quick-command-container .quick-commands {
    border: none;
    background: transparent !important;
    backdrop-filter: var(--backgroundBlur);
}

/* ボタンのグラデを無効 */
.toolbar-default .button-toolbar > button:enabled, 
input[type=button]:not(.circular), input[type=submit], input[type=color], .FormButton {
    background-image: none;
    background-color: var(--colorBg);
}

.button-toolbar > button {
    border: none;
}

/* チェックボックスのグラデを無効化 */
.theme-dark input[type=radio], .theme-dark input[type=checkbox] {
    background-image: none;
}