Transparent separator line

[macdepolo]

Good day everyone! I just started using Vivaldi, and decided to customise its appearance a bit. I am not a web-developer and have barely any knowledge of CSS. My question is, is it possible to make the separator line (the blue line between the navigator bar and webpage window transparent)? And if so, which CSS variables I would have to modify? I have included a screenshot of what it looks now.

Thank you!

[stardepp]

@macdepolo This .css modification by @nomadic makes the address bar, the search bar, the status bar and the panell transparent:

/* Vivaldi transparent background address bar and search bar - made by Nomadic on the Vivaldi Forums */
#tabs-container,
.toolbar,
.inner,
.mainbar,
.vivaldi-settings .settings-content,
.startpage,
.startpage .manager,
.active.internal.visible.webpageview,
#webview-container,
.color-behind-tabs-on .tab.active .tab-indicator.active,
.toolbar-mainbar .toolbar-extensions,
#panels-container,
footer,
#header,
.SearchField,
.UrlBar-AddressField,
.bookmark-bar,
.bookmark-bar button {
  background: transparent !important;
}

.tab.active,
.UrlBar,
.vivaldi-settings,
.vivaldi-settings .settings-sidebar,
.startpage .manager > div,
.button-toolbar:hover button,
#switch button:hover,
.startpage-navigation {
  background: var(--colorBgAlpha) !important;
  background-color: var(--colorBgAlpha) !important;
}

.private-intro {
  background: var(--colorBgAlphaHeavy);
}

#switch .addwebpanel-wrapper > button.active:after,
#switch > button.active:after {
  content: "";
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: brightness(1.1) blur(5px);
  z-index: -1;
  position: absolute;
  left: 0;
  /* I also needed to add this to get the pseudo element to line up better, but I don't know if it is necessary for everyone /
/ top: -0.1px; */
}

/* Make address and search placeholder text more visible */
input::-webkit-input-placeholder {
  opacity: 1 !important;
}

#quoteContainer {
  background: transparent !important;
  backdrop-filter: unset !important;
}

.startpage .startpage-navigation {
  background-color: transparent !important;
  box-shadow: unset !important;
}

.startpage .startpage-navigation .startpage-navigation-group:last-of-type {
  border-left: unset !important;
}

/* Make privacy statistics transparent as well */
.SpeedDial-Blocked/* Hide AddressField stuff */
.UrlBar-AddressField .permission-popup.is-blocking,
.UrlBar-AddressField .UrlBar-UrlObfuscationWarning,
.UrlBar-AddressField .ContentBlocker-Control, 
.UrlBar-AddressField .ToolbarButton-Button[title^="Translate"] {
	display: none;
}
-Counter {
  background-color: unset;
  backdrop-filter: unset;
  border-radius: unset;
  box-shadow: unset;
}

/* Make active tab background transparent */
.tab-position .tab.active {
  background: transparent !important;
}

Here is an example of what this looks like:

[stardepp]

@macdepolo Welcome to the Vivaldi Forum. You may find the following links interesting:

Vivaldi Help (F1) : https://help.vivaldi.com/

Vivaldi Tips: https://tips.vivaldi.net

Vivaldi Features: https://vivaldi.com/features/

Local Vivaldi Forum: https://forum.vivaldi.net/category/38/local-forum

Vivaldi Code Of Conduct: https://vivaldi.com/privacy/code-of-conduct/

Vivaldi Company: https://vivaldi.com/en/company/

Vivaldi Business Model: https://vivaldi.com/en/blog/vivaldi-business-model/

Vivaldi Bug Report: https://vivaldi.com/en/bugreport/

Vivaldi Ad blocker: https://vivaldi.com/features/ad-blocker/

Vivaldi Email Client: https://vivaldi.com/features/mail/

Vivaldi Search Engines Collection: https://forum.vivaldi.net/topic/46609/guide-vivaldi-search-engines-collection

Vivaldi Privacy: https://vivaldi.com/privacy/browser/

Modding Vivaldi: https://forum.vivaldi.net/topic/10549/modding-vivaldi

Show Me Your Web Panels: https://forum.vivaldi.net/topic/11564/show-me-your-web-panels

Vivaldi Color Schemes: https://forum.vivaldi.net/topic/20106/post-your-color-scheme-at-vivaldi

Vivaldi Themes: https://themes.vivaldi.net

Vivaldi Favorite Extension: https://forum.vivaldi.net/topic/12540/vote-for-your-favorite-extension

Vivaldi Comparison Snapshot Vs. Stable Vivaldi: https://vivaldi.com/en/blog/snapshot-vs-stable/

Vivaldi Status: https://vivaldistatus.com

Vivaldi Download: https://vivaldi.com/download/

Support or donate to Vivaldi: https://vivaldi.com/contribute/

Vivaldi For Android: https://forum.vivaldi.net/category/147/vivaldi-browser-for-android

Vivaldi for iOS (iPhone): https://vivaldi.com/ios/

Vivaldi One Million Ways To make It Yours: https://vivaldi.com/de/onemillion/

[mib3berlin]

@stardepp
Hi, I guess the OP meant the white line in your screen shot under the address bar.

I remember a mod for this but cant find it at moment.

Cheers, mib

[macdepolo]

@stardepp Yes, I meant that line. I actually adapted @nomadic 's code with additional code that makes the line around the address bar transparent as well. Below are screenshots demonstrating the difference between @nomadic 's and mine.
. And out of curiosity, is there a way to actually find out names of the CSS fields for each element of Vivaldi's UI?

[macdepolo]

@stardepp Thank you! As @mib3berlin pointed out, I meant that I want to make the line under the address bar transparent)

[nomadic]

@macdepolo Think this should hide it for you:

/* Hide border under the address bar when placed at the top */
.address-top .mainbar {
  border-bottom: unset;
}

---

is there a way to actually find out names of the CSS fields for each element of Vivaldi's UI?

Yes, you can open a devTools window for the UI which allows you to figure out the selectors.

https://forum.vivaldi.net/topic/16684/inspecting-the-vivaldi-ui-with-devtools

[macdepolo]

@nomadic Thank you so much it actually worked!

Unfortunately, I cannot find a way to access DevTools for Vivaldi browser. (Here is a ).

[Aaron]

@macdepolo
You mean ... this:
Menu->Tools->Dev Tools
or
Ctrl+Shift+I

[macdepolo]

@Aaron Thank you!

[Aaron]

@macdepolo
If you use it frequently and don't like using keyboard shortcuts, we recommend that you create a custom button and place it wherever you feel comfortable

[nomadic]

@Aaron said in Transparent separator line:

Menu->Tools->Dev Tools
or
Ctrl+Shift+I

That will result in the devTools for the current webpage instead of the UI in most cases.

---

@macdepolo In your screenshot, you should click the inspect under the one ending in window.html. There was a recent change where window.html replaced browser.html.

[macdepolo]

@nomadic Thank you so much! I will deep dive into figuring out how to customise it even more:)