Transparent

[KimHyunJun]

Hello!

don't work since v6.2

.toolbar-mainbar, .UrlBar-AddressField, .UrlBar-SearchField, :not(.tabs-bottom)#browser > footer, .startpage .startpage-navigation, .settings-content, .startpage, .startpage .manager, .speeddial .dial, .active.internal.visible.webpageview, #webview-container {
background: transparent !important;
box-shadow: none !important;

[Streptococcus]

Is there more after what you listed, or did you forget to put an end brace at the end of the code?

[sphera]

I think it would be difficult to attach a picture. There are many places in the browser where there is no background and shadows

[KimHyunJun]

here is the full code, everything was fine before, now there is no transparency on the address bar, search bar, you can see it in the screenshot

.toolbar-mainbar, .UrlBar-AddressField, .UrlBar-SearchField, :not(.tabs-bottom)#browser > footer, .startpage .startpage-navigation, .settings-content, .startpage, .startpage .manager, .speeddial .dial, .active.internal.visible.webpageview, #webview-container {
background: transparent !important;
box-shadow: none !important;
}
.vivaldi-settings, .startpage .manager > div {
background-color: var(--colorBgAlpha) !important;
}
.speeddial {
margin-top: 170px;
}
.dials .dial:hover > .thumbnail-image, button.button-startpage:hover {
transform: scaleX(1.05) scaleY(1.05) !important;
}

[stardepp]

@KimHyunJun Try this .css modification from @nomdic:

/* Vivaldi transparent background address bar and search bar - made by Nomadic on the Vivaldi Forums */

#tabs-container,
.toolbar,
.inner,
#main,
.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 {
  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;
}

/*  Privacy statistics transparent - made by Nomadic  on the Vivaldi Forums */

.SpeedDial-Blocked-Counter {
  background-color: unset;
  backdrop-filter: unset;
  border-radius: unset;
  box-shadow: unset;
}

Works also with Vivaldi 6.2
Here is an example of what it looks like:

[KimHyunJun]

@stardepp this code also don't work

[mib2berlin]

@KimHyunJun
Hi, can you explain a bit more what not work?
Is the first image you posted how it should look?
Don´t work says not much.

Cheers, mib

[KimHyunJun]

@mib2berlin Hi, in the screenshot, highlighted in white where there is no transparency, i.e. the address bar, search bar, extensions, etc.

[nomadic]

This is the updated version of the CSS I gave @stardepp:

/* 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-Counter {
  background-color: unset;
  backdrop-filter: unset;
  border-radius: unset;
  box-shadow: unset;
}

[nomadic]

@KimHyunJun See the above post for the updated CSS I gave @stardepp, but it didn't include anything to make the active tab transparent as well.

You will need to add this to achieve that:

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

[KimHyunJun]

@nomadic Thanks, it works