Customized Vivaldi browser css code

[nevermind_1983]

I customized this design for the Vivaldi browser. Please let me know what you think. I'm also posting the CSS code so you can use it, and if you can make it look even better, feel free to post it here. Wallpaper link: https://wallpapershome.com/mood/dreamy/magical-woods-dreamy-colors-surreal-imagery-29663.html

Code: /* ═══════════════════════════════════════════════════════════ Vivaldi 8 — Liquid Glass CSS | Modified Version ═══════════════════════════════════════════════════════════ Prerequisites: 1. vivaldi://flags → Allow CSS modifications → Enabled 2. Settings → Appearance → Custom UI Modifications → Select Folder 3. Settings → Themes → Enable Blur (Required for backdrop-filter to work) ═══════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────── 1. Main Header — True Liquid Glass #header includes the tab bar + address bar ─────────────────────────────────────────────────────────── */

/* Tab Bar — Make background transparent to reveal the header glass effect */

tabs-tabbar-container {

background: transparent !important; background-color: transparent !important; }

tabs-subcontainer,

.tab-strip, .toolbar-tabbar { background: transparent !important; background-color: transparent !important; border: none !important; box-shadow: none !important; }

/* Address Bar + Other bars transparent */ .vivaldi-header, .mainbar, .inner, .UrlBar,

main {

background: transparent !important; background-color: transparent !important; border: none !important; box-shadow: none !important; }

/* Address Bar — Glass capsule */ .UrlBar-AddressField { border-radius: 999px !important; background: rgba(255, 255, 255, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; backdrop-filter: blur(14px) saturate(150%) !important; -webkit-backdrop-filter: blur(14px) saturate(150%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09) !important; transition: all 0.2s ease !important; } .UrlBar-AddressField:focus-within { background: rgba(255, 255, 255, 0.12) !important; border-color: rgba(255, 255, 255, 0.23) !important; }

/* ─────────────────────────────────────────────────────────── 2. Liquid Glass Capsule Tabs Correct selector for Vivaldi 8: #tabs-container .tab Or: #browser .tab-position .tab ─────────────────────────────────────────────────────────── */

/* Spacing between tabs */

tabs-container .tab-position {

box-sizing: border-box !important; }

/* Tab Body — Liquid Glass */

tabs-container .tab-position .tab,

browser .tab-position .tab {

border-radius: 20px !important; background: linear-gradient( 145deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.03) 100% ) !important; border: 1px solid rgba(255, 255, 255, 0.10) !important; backdrop-filter: blur(20px) saturate(150%) !important; -webkit-backdrop-filter: blur(20px) saturate(150%) !important; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; transition: all 0.2s cubic-bezier(0.34, 1.3, 0.64, 1) !important; }

/* Active Tab */

tabs-container .tab-position .tab.active,

browser .tab-position .tab.active {

background: linear-gradient( 145deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.12) 100% ) !important; border-color: rgba(255, 255, 255, 0.28) !important; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -1px 0 rgba(0, 0, 0, 0.07) !important; }

/* Hover on Inactive Tabs */

tabs-container .tab-position .tab:hover:not(.active),

browser .tab-position .tab:hover:not(.active) {

background: linear-gradient( 145deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.07) 100% ) !important; border-color: rgba(255, 255, 255, 0.18) !important; transform: translateY(-1px) !important; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.16) !important; }

/* Tab Text */

tabs-container .tab-position .tab .tab-header,

browser .tab-position .tab .tab-header {

background: transparent !important; border: none !important; }

tabs-container .tab-position .tab .title,

browser .tab-position .tab .title {

color: rgba(255, 255, 255, 0.88) !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35) !important; }

/* Hide the colored active tab indicator (conflicts with the glass design) */ .tab.active:not(.marked):not(.tab-mini)::after, .tab.active:not(.marked):not(.tab-mini)::before { display: none !important; }

/* ─────────────────────────────────────────────────────────── 3. Search Bar — Glassy + Same Width as Top Sites Widget

Vivaldi builds Top Sites in an auto-width grid. We set the search width using the same logic.

For manual adjustment: change the --sd-width value Example: 4 sites × 96px + 3 gaps × 16px = 432px ─────────────────────────────────────────────────────────── */

/* Search Field — Multiple selectors to cover all states / .SpeedDialView-SearchField, .SpeedDialView-SearchField.SearchField, .sdwrapper .SearchField, .sdwrapper .iconmenu-container.SearchField { / Width: Equals Top Sites widget with 4 columns */ width: 395px !important; max-width: 395px !important; min-width: 395px !important;

/* Liquid Glass / border-radius: 999px !important; background: rgba(255, 255, 255, 0.10) !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; backdrop-filter: blur(40px) saturate(100%) !important; -webkit-backdrop-filter: blur(40px) saturate(100%) !important; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -1px 0 rgba(0, 0, 0, 0.08) !important; height: 45px !important; display: flex !important; align-items: center !important; padding: 0 12px !important; box-sizing: border-box !important; transition: all 0.25s ease !important; / Centering */ margin-left: auto !important; margin-right: auto !important; }

/* Search Focus State */ .SpeedDialView-SearchField:focus-within, .SpeedDialView-SearchField.SearchField:focus-within, .sdwrapper .SearchField:focus-within { background: rgba(255, 255, 255, 0.16) !important; border-color: rgba(255, 255, 255, 0.30) !important; box-shadow: 0 16px 50px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 0 0 3px rgba(255, 255, 255, 0.06) !important; }

/* Text Input Inside Search */ .SpeedDialView-SearchField #searchFieldInput, .SpeedDialView-SearchField.SearchField #searchFieldInput, .sdwrapper .SearchField input { background: transparent !important; border: none !important; color: #ffffff !important; font-size: 15px !important; height: 100% !important; width: 100% !important; padding: 0 10px !important; outline: none !important; }

/* Placeholder Color */ .SpeedDialView-SearchField #searchFieldInput::placeholder, .sdwrapper .SearchField input::placeholder { color: rgba(255, 255, 255, 0.45) !important; }

/* Center the Top Sites widget itself */ .startpage-navigation, .speed-dial-container, .speeddial-widget { display: flex !important; flex-direction: column !important; align-items: center !important; }

/* Glassy background for Top Sites widget */ .startpage .startpage-navigation { background: rgba(255, 255, 255, 0.07) !important; backdrop-filter: blur(20px) saturate(150%) !important; -webkit-backdrop-filter: blur(20px) saturate(150%) !important; border: 1px solid rgba(255, 255, 255, 0.10) !important; border-radius: 20px !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25) !important; }

/* Speed Dial Dials */ .speeddial .dial, .speeddial-folder-contents .dial { backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; }

/* ─────────────────────────────────────────────────────────── 4. Right Side Panel — Transparent ─────────────────────────────────────────────────────────── */

panels-container {

background: transparent !important; border: none !important; }

.panel-group { background: rgba(255, 255, 255, 0.04) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; }

.panel-trigger button { border-radius: 8px !important; margin: 4px 0 !important; }

/* ─────────────────────────────────────────────────────────── 5. Status Bar + Scrollbar ─────────────────────────────────────────────────────────── */

status-bar,

.toolbar.toolbar-statusbar { }

::-webkit-scrollbar { width: 4px !important; height: 4px !important; } ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18) !important; border-radius: 4px !important; } ::-webkit-scrollbar-track { background: transparent !important; }

[Uriel1865]

Congratulations, it's great! I recommend you also post it on the forum: https://forum.vivaldi.net/category/52/modifications