Help changing my header?

[Balentay]

Hello! I'd like to emulate how Chrome's Kate Spade theme looks in Vivaldi. I'd like to change the colors of my address bar, bookmarks bar, active tab and the back, forward and refresh buttons.

Address and bookmarks bar I'd like to be #392325, and #493436 when hovered over. Navigation buttons would have a background color of #392325, and #493436 when hovered over as well but have the symbols be white.

I've tried a few codes that I've found online but I can't seem to figure out how to change the symbol colors, nor can I figure out the hover css. Any help would be greatly appreciated!

Here is a screenshot of how my Chrome looks for reference

[Mrxyzl]

@Balentay Hey if you want to change stuff on hover just add the :hover
Example:

.vivaldi:hover 
{border-radius: 30%; 
background: var(--colorAccentBgAlpha) !important; 
transition: .3s ease-out !important;
}

This line change the background of the vivaldi button on hover for 0.3s

[Balentay]

@Mrxyzl Duh why didn't I think about that?

This whole project is becoming more complicated as I poke at it. I thought it'd be simple to change out the bookmark and toolbar colors.

But I also have to figure out how to change the bookmark folders, back, forwards, refresh, extensions, and profile buttons to readable colors while keeping the shield, bookmark icon, new tab button, and the status bar the same colors.

[Mrxyzl]

@Balentay
If you need it , heres my current css which change color of all most everything follow the accent color

/* popup page zoom control */

#browser > footer .page-zoom-controls input[type=range] {position: absolute; background-image: linear-gradient(90deg, #0000 0 calc(22% - 2px), var(--colorBg) 0 22%, #0000 0 calc(40% - 2px), var(--colorBg) 0 40%, #0000 0 calc(58% - 2px), var(--colorBg) 0 58%, #0000 0 calc(77% - 2px), var(--colorBg) 0 77%, #0000 0 100%); box-shadow: 0 0 0 7px var(--colorBg), 0 0 0 8px var(--colorBorder), 0 2px 12px hsl(0deg 0% 0% / 25%); visibility: hidden; opacity:0; transform: translate(-25px, -20px); transition: visibility .6s, opacity .2s ease-out .4s, transform .25s ease-in .36s !important;}
#browser > footer .page-zoom-controls:is(:hover, :focus-within) > input[type=range] {visibility: visible; opacity: 1; transform: translate(-25px, -25px); transition: opacity: .1s ease-out .12s, transform .1s ease .1s !important;}
#browser > footer .page-zoom-controls input[type=range]::before {content: ''; position: absolute; pointer-events: none; border: 6px solid hsl(0deg 0% 0% / 0%); z-index: inherit; filter: drop-shadow(0 1px var(--colorBorder)); bottom: -19px; left: 50%; margin-left: -6px; border-top-color: var(--colorBgLight);}
#browser > footer .page-zoom-controls .zoom-percent {order:-1;} /* move % to left */
#browser > footer .page-zoom-controls .reset-zoom button .button-title {min-width: 1ch; max-width: 1ch;} /* reduced Reset to R button */

/* ###################################################################################################################################### */

/* Secure domain green highlighter  */
.UrlFragment-HostFragment-Subdomain, .UrlFragment-HostFragment-Basedomain, .UrlFragment-HostFragment-TLD {-webkit-text-stroke-width: 0px; text-shadow: none;}
.UrlBar-AddressField > .SiteInfoButton:is(.secure, .certified) + .UrlBar-UrlFieldWrapper :is(.UrlFragment-HostFragment-Basedomain, .UrlFragment-HostFragment-TLD) {color: LightGreen;}

/* warning domain pink highlighter */
.UrlBar-AddressField > .SiteInfoButton.warning + .UrlBar-UrlFieldWrapper :is(.UrlFragment-HostFragment-Basedomain, .UrlFragment-HostFragment-TLD) {color: deeppink;}
}

.UrlFragment-HostFragment-Subdomain:not([data-content="www."]){ 
color:var(--colorImageFg, var(--colorAccentFg)); 
}
.UrlFragment-Wrapper {
	color:var(--colorImageFg, var(--colorAccentFg));
	text-shadow: none;
	opacity:0.8;
}
#main > div.mainbar > div > div.UrlBar-AddressField.button-textonly.below > div.UrlBar-UrlFieldWrapper > div > div.UrlField.UrlField--HasEditText > input {
color:var(--colorImageFg, var(--colorAccentFg));
}
.SiteInfoButton-Favicon, .SiteInfoButton-SearchEngineFavicon, .SiteInfoButton-SecurityBadge {
	color:var(--colorImageFg, var(--colorAccentFg));
}
/* ###################################################################################################################################### */

}
 #tabs-container.top {
	transition: 0.3s;

}


.toolbar-mainbar {
     background: linear-gradient(rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.2)), var(--colorAccentBgDarker);
	 border-radius: var(--radiusHalf)!important;
	 transition: 0.7s ease-out;
	 background: transparent;
	 border: none !important;
}
#main, #browser {
    background: linear-gradient(rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.2)), var(--colorAccentBgDarker)!important;
	transition: 0.7s ease-out; 
}
.mainbar {
	 background: linear-gradient(rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.2)), var(--colorAccentBgDarker)!important;
	border-radius: var(--radiusHalf)!important;
	transition: 0.7s ease-out; 
}
.color-behind-tabs-on#browser.tabs-top #header {
	transition:0.7s ease-out;
}

.toolbar-extensions {
    background-color: linear-gradient(rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.2)), var(--colorAccentBgDarker) !important;
	transition: background-color 0.7s ease-out;
	border-radius: var(--radiusHalf)!important;
}
.toolbar-mainbar .toolbar-extensions {
	background-color: transparent;
}
.toolbar-mainbar .toolbar-extensions:after, .toolbar-mainbar:after {
	 display: none !important;
}

 #header, #main {
    position: unset;
}

 #header {
    height: unset;
	min-height:25px;
	background:linear-gradient(rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.2)), var(--colorAccentBgDarker);
}
#titlebar #pagetitle {
	justify-items: center;
	overflow: hidden;
}
.color-behind-tabs-on#browser:not(.tabs-top) #header {
	color: var(--colorImageFg, var(--colorAccentFg));
}




	
.color-behind-tabs-on#browser:not(.tabs-top) #header {
	background-color: var(--colorAccentBg);
}
 .toolbar-tabbar.sync-and-trash-container {
		top: 0px !important;
}


/* ###################################################################################################################################### */

/* Change toolbar button and extension button color same as tab bar's button */
.toolbar-mainbar > .button-toolbar > button, .toolbar-mainbar .toolbar-extensions > .button-toolbar > button, .BookmarkButton, .toolbar-insideinput.toolbar-insideinput.toolbar-insideinput > .button-toolbar button:not(:hover):not(:active):not(:focus):not(.button-pressed) { 
color: var(--colorImageFg, var(--colorAccentFg));
opacity:0.65;
}

.toolbar-mainbar .toolbar-extensions > .button-toolbar > button {
    filter: opacity(1);
}
.SiteInfoButton.secure svg path, .SiteInfoButton.certified svg path{
    fill: var(--colorImageFg, var(--colorAccentFg));
}
}
.toolbar-insideinput.toolbar-insideinput.toolbar-insideinput > .button-toolbar button.button-pressed, .toolbar-insideinput.toolbar-insideinput.toolbar-insideinput > .toolbar-group > .button-toolbar button.button-pressed {
	background-image: linear-gradient(var(--colorBgAlphaHeavy), var(--colorBgAlpha));
    border-radius: var(--radiusHalf);
	opacity: 0.65;
}
	
#main > div.mainbar > div > div.UrlBar-AddressField.button-textonly.below > div.UrlBar-UrlFieldWrapper > div > div.UrlField.UrlField--HasEditText > input {
color:var(--colorImageFg, var(--colorAccentFg));
}
.SiteInfoButton-Favicon, .SiteInfoButton-SearchEngineFavicon, .SiteInfoButton-SecurityBadge {
	color:var(--colorImageFg, var(--colorAccentFg));
}

/* ###################################################################################################################################### */


/* Colorful Pageload indicator */
.UrlBar-AddressField .pageload:not(.unstarted).progressing .pageload-indicator { /* Progress bar background before load */
	border-radius: 6px !important;  /* Progress bar background before load roundness */
    background: linear-gradient(rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.4)), var(--colorAccentBgAlpha);
	opacity:0.8;
	top: 0px;
	height:24px;
	left: 0px;
}
.UrlBar-AddressField .pageload:not(.unstarted).progressing .pageload-indicator::-webkit-progress-value { /* the progressbar */
        background-color: var(--colorAccentBgAlpha);
		border-radius:5px;
		opacity: 1;

}
.SearchField, .UrlBar-AddressField {
    border-radius: 8px;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.3),rgba(0, 0, 0, 0.3)), var(--colorAccentBgAlpha);
	opacity:1;
	border:  none;
	height:24px;
	top: 0px;
}
 .UrlBar-AddressField .pageload .pageload-ticker {
	 color: var(--colorImageFg, var(--colorAccentFg));
 }
/* Disable page load ticket */


/* background-color: linear-gradient(to right, rgba(0, 0, 0, 0.3),rgba(0, 0, 0, 0.3)), var(--colorAccentBgAlpha); */
/* ###################################################################################################################################### */


/* Stylish toolbar button animation */
.button-toolbar > button:hover {border-radius: 30%; background: var(--colorAccentBgAlpha) !important; transition: .3s ease-out !important;}
.button-toolbar:hover:not(:active) :is(svg, img), .UrlBar .profile-popup > button:hover:not(:active) > img {transform: scale(1.3); transition: transform .15s ease-in-out !important;}
.toolbar-mainbar .toolbar-extensions > .button-toolbar > button:hover {border-radius: 30%; background: transparent; transition: .3s ease-out !important;}
.vivaldi:hover {border-radius: 30%; background: var(--colorAccentBgAlpha) !important; transition: .3s ease-out !important;}
.vivaldi:hover:not(:active) :is(svg, img), .UrlBar .profile-popup > button:hover:not(:active) > img {transform: scale(1.1); transition: transform .15s ease-in-out !important;} 
.icons #switch > button:hover {border-radius: 30%; background: var(--colorAccentBgAlpha) !important; transition: .3s ease-out !important;}
.icons #switch > button:hover:not(:active) :is(svg, img), .UrlBar .profile-popup > button:hover:not(:active) > img {transform: scale(1.3); transition: transform .3s ease-in-out !important;}
.button-toolbar > button {
	border: none;
}
.BookmarkButton {
	border: none;
}
/* ###################################################################################################################################### */

/* Tab stack frame border color fixer */
.tabs-top .tab-position.is-substack .tab:not(.active) .svg-tab-stack{
	padding-bottom: 0px !important;
}
.svg-tab-stack .stack-frame {
    stroke: var(--colorImageFg, var(--colorAccentFg));
	opacity: 0.3;
}
.tabs-subcontainer {
	height:30px;
}
/* Fix round corner 1px line tab bar */
.tab.active:not(.marked):not(.tab-mini):before {
    left: calc(1.1px - var(--radiusHalf));
	 background: linear-gradient(rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.2)), var(--colorAccentBgDarker);
}
.tab.tab-accordion.active:after, .tab.active:not(.marked):not(.tab-mini):not(.tab-in-accordion):after {
    right: calc(1.6px - var(--radiusHalf));
	 background: linear-gradient(rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.2)), var(--colorAccentBgDarker);
}

/* ###################################################################################################################################### */

/* Stylish Animate tab highlight on hover*/
.tab-position .tab:not(.active):hover {
    background: linear-gradient(rgba(0, 0, 0, 0.3),rgba(0, 0, 0, 0.3)), var(--colorAccentBgAlpha);
	border-radius: var(--radiusHalf);
	transform: scale(1.05);
	transition: .2s ease-out !important;
}
#browser .tab-position .tab.active:hover {
	transform: scale(1.05);
	transition: .2s ease-out !important;
}
.tab-position.is-substack > .tab.active {
	margin-bottom: 0px !important;
}
#browser.color-behind-tabs-on .tab-position .tab.active.active {
    background: linear-gradient(rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.2)), var(--colorAccentBgDarker);
    color: var(--colorFg);
	transition: 0.3s ease-out !important;
}

/* ###################################################################################################################################### */

/* Change address bar text selection follow Accent*/

::selection {
  background-color: var(--colorAccentBgAlpha);
  color: var(--colorImageFg, var(--colorAccentFg));
}
/* ###################################################################################################################################### */

/* Change bookmark bar color follow Accent*/
.color-behind-tabs-on .bookmark-bar button {
   background: linear-gradient(rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.2)), var(--colorAccentBgDarker);
}
.color-behind-tabs-on .bookmark-bar {
     background: linear-gradient(rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.2)), var(--colorAccentBgDarker);
     transition: background-color 0.7s ease-out;
}
}
.bookmark-bar .observer {
	background: transparent;
}

.bookmark-bar button:hover {
	border-radius: 5px; background: linear-gradient(rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.2)), var(--colorAccentBg) !important; 
	transition: .3s ease-out !important;
	transform: scale(1.05); transition: transform .2s ease-in-out !important;
	}
.bookmark-bar button {
	border-radius: 0px 0px var(--radiusHalf) var(--radiusHalf);
    border: 1px solid;
    border-color: var(--colorAccentBgDarker);
}
/* ###################################################################################################################################### */

/*Auto hide panel bar 
#panels-container {
position: fixed;
height: 100%;
max-width: 0vw;
opacity: 0;
z-index: 1;
transition: max-width .5s cubic-bezier(0.18, 0.89, 0.32, 1.28), opacity .2s linear .2s;
}
#panels-container:hover {
max-width: 99vw;
opacity: 1;
transition-delay: 0.3s;
}

/*Panel are overlays instead of resizing the page 
#main .inner {
	position: relative;
}
#panels-container {
    position: absolute !important;
    z-index: 15;
    height: 100%;
}
#panels-container.right {
	right: 0;
}
/* 

/* ###################################################################################################################################### */
/*Colorful extension popup*/
.button-popup {
	background-color: var(--colorAccentBgAlphaHeavy);
    backdrop-filter: blur(1.2em) brightness(55%);
    box-shadow: 0 0 0 1px var(--colorAccentBgAlphaHeavy), 0 2px 6px rgba(0, 0, 0, 0.25);
	border-radius: var(--radius);
	top: 50px;
}
.toolbar-mainbar {
	background:transparent;
}
#main { 
	background: linear-gradient(rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.2)), var(--colorAccentBgDarker);
	transition: background-color 0.7s ease-out;
}
.button-popup-below.button-popup-arrow-light:before {
    border-bottom-color: var(--colorAccentBgAlphaHeavy);
}
.button-popup-below:before {
    filter: drop-shadow(0 -1px var(--colorAccentBg));
}

.color-behind-tabs-on .toolbar-mainbar .toolbar-extensions > .button-toolbar > button.button-pressed, .color-behind-tabs-on .toolbar-mainbar > .button-toolbar > button.button-pressed {
	background-image: linear-gradient(var(--colorBgAlphaHeavy), var(--colorBgAlpha));
    border-radius: var(--radiusHalf);
}

/* ###################################################################################################################################### */

/*Auto hide bookmark bar*/

/* Simple Automate Bookmark-bar */

/* top bookmark-bar 
.bookmark-bar-top .bookmark-bar {
	margin-bottom: -28px; z-index: 1; 
	transform: translateY(0);
	transition: transform .3s ease-out;
	transition-delay: 0.5s;
	}
.bookmark-bar-top .bookmark-bar::before {content: ''; position: absolute; height: 20px; width: 100%; top: 100%;}

/* option A: trigger zone below lowest TOP bar 
.bookmark-bar-top .bookmark-bar:not(:focus-within):not(:hover) {
	transform: translateY(-100%);  
	transition: transform .2s ; 
	transition-delay: 1.5s;

	}
/*
animation: dropfade 2s ease-out;
animation-delay: 1s;
} */

	
.bookmark-bar-top .bookmark-bar {
	border:none;
}


/* Beautify adblocker content */


#app .ContentBlocker-Header {
	background: transparent;
    border-bottom-color: transparent;
}
#app .ContentBlocker.button-popup {
    border-radius: var(--radius);
}

button.privacy-btn-icon, #app .ContentBlocker-Field input[type=button], #app .ContentBlocker-Blocked {
    background-image: none;
    backdrop-filter: blur(1.5em) brightness(0.5);
    background-color: transparent;
    border: none;
}

/* Beautify status bar */
:not(.tabs-bottom)#browser > footer {
    background: var(--colorAccentBgdarker);
	box-shadow: inset -1px 0 5 var(--colorBorder);
	backdrop-filter: var(--backgroundBlur);
	transition: 0.7s
}
#browser > footer > .toolbar-statusbar {
	background-color: var(--colorBgAlphaBlur);
}
/* BEautify panel */



#panels-container.overlay .panel-group {
background-color: var(--colorAccentBgAlpha);
}
.panel-group {
	background-color: var(--colorAccentBgAlphaHeavy);
    backdrop-filter: blur(1.2em) brightness(0.55);

}

.toolbar.toolbar-default.toolbar-wrap > input[type=search] {
	background-image: none;
    backdrop-filter: blur(1.5em);
    background-color: transparent;
    border: none;
}
.toolbar.toolbar-default.toolbar-medium.toolbar-wrap > input[type=search] {
	background-color: var(--colorAccentBgAlphaHeavy);
}
.toolbar.toolbar-default.toolbar-wrap > div > div.toolbar-group > div:nth-child(2) > button {
	background-image: none;
    backdrop-filter: blur(1.5em);
    background-color: var(--colorAccentBgAlphaHeavy);
    border: none;
}
.toolbar.toolbar-default.toolbar-wrap > div > div.toolbar-group > div:nth-child(1) > button {
	background-image: none;
    backdrop-filter: blur(1.5em);
    background-color: var(--colorAccentBgAlphaHeavy);
    border: none;
}
.toolbar.toolbar-default.toolbar-wrap > div > div.toolbar-group > div:nth-child(3) > button {
	background-image: none;
    backdrop-filter: blur(1.5em);
    background-color: var(--colorAccentBgAlphaHeavy);
    border: none;
}
.toolbar.toolbar-default.toolbar-wrap > div > div.toolbar-group > div:nth-child(4) > button {
	background-image: none;
    backdrop-filter: blur(1.5em);
    background-color: var(--colorAccentBgAlphaHeavy);
    border: none;
}
.toolbar-default .button-toolbar, .toolbar.toolbar-default.toolbar-wrap > input[type=search] {
	color:var(--colorImageFg, var(--colorAccentFg));
}

.toolbar.toolbar-default.toolbar-wrap > div > div.button-toolbar > button,  {
	background-image: none;
    backdrop-filter: blur(1.5em);
    background-color: transparent;
    border: none;
}

.panel-group .sortselector.sortselector-compact, .download-popout .sortselector.sortselector-compact {
	background-image: none;
    backdrop-filter: blur(1.5em);
    background-color: transparent;
    border: none;
}
.sortselector .sortselector-button:hover:not(:disabled), .sortselector .sortselector-dropdown:hover:not(:disabled), .sortselector .sortselector-button:focus-visible, .sortselector .sortselector-dropdown:focus-visible {
	background: var(--colorAccentBgAlpha) !important; transition: .3s ease-out !important;
	transform: scale(1); transition: transform .15s ease-in-out !important;
	border: none;
	}
.sortselector-button.direction-ascending {
	border-color: var(--colorAccentBgAlpha);
}
.sortselector-dropdown {
	color: var(--colorImageFg, var(--colorAccentFg));
	opacity: 0.75;
}
.panel .tree-row {
	color: var(--colorImageFg, var(--colorAccentFg));
opacity: 0.75;
}

.toolbar.toolbar-default.toolbar-align-top {
	color: var(--colorImageFg, var(--colorAccentFg));
opacity: 0.75;
}
.sortselector.sortselector-compact .sortselector-button {
	fill: var(--colorImageFg, var(--colorAccentFg));
	opacity: 0.75;
}
.panel.downloads .download-editor .data, .popout.downloads-popout .download-editor .data {
	color: var(--colorImageFg, var(--colorAccentFg));
	opacity: 0.75;
}
.panel-timefield > .container {
	color: var(--colorImageFg, var(--colorAccentFg));
opacity: 0.75;
}
.cardview input[type=text].downloads, .cardview input[type=email].downloads, .cardview input[type=tel].downloads, .panel.downloads .panel-timefield .started, .popout.downloads-popout .panel-timefield .started, .panel.downloads .panel-timefield .completed, .popout.downloads-popout .panel-timefield .completed, .panel.downloads .panel-pathfield .speed, .popout.downloads-popout .panel-pathfield .speed, .panel.downloads {
	color: var(--colorImageFg, var(--colorAccentFg));
opacity: 0.75;
}
select:not([multiple]):not([size]), input[type=date] {
	background-color: transparent;
    border: none;
	backdrop-filter: blur(1.2em);
}
select {
	color: var(--colorImageFg, var(--colorAccentFg));
    opacity: 0.75;
}
.panel-pathfield .speed span svg, .popout.downloads-popout .panel-pathfield .speed span svg {
	fill: var(--colorImageFg, var(--colorAccentFg));
opacity: 0.75;
}


.toolbar-default .button-toolbar > button:disabled {
	background-color: var(--colorAccentBgAlphaHeavy);
	border: none;
	color: var(--colorImageFg, var(--colorAccentFg));
    
}
select:not([multiple]):not([size]) option {
    color: var(--colorFg);
    background-color: var(--colorAccentBgAlphaHeavy);
    border: none;
	border-radius: var(--radiusHalf);
	backdrop-filter: blur(1.2em);
	background-image: none;
}
/* Beautify Omni dropdown */

.OmniDropdown {
	background-color: var(--colorAccentBgAlphaHeavy);
    backdrop-filter: blur(1.2em) brightness(0.7);
	animation: dropfade 400ms ease-out;
	transition: 0.4s;
}

.omni-clickable.OmniLinkItem:hover {
    background-image: none;
    backdrop-filter: blur(1.5em);
    background-color: transparent;
    border: none;
	color: var(--colorImageFg, var(--colorAccentFg));
	
}
.OmniLinkItem-Url, .OmniLinkItem-Details, .OmniLinkItem-Favicon, .OmniLinkItem-EraseButton {
	color: var(--colorImageFg, var(--colorAccentFg));
}
	

Currently im working on the panel color (incomplete)

[Balentay]

@Mrxyzl This is honestly really helpful! I would never have figured out half this stuff on my own lol. Your commenting and separating really helped me understand what code did what.

It's nearly perfect I'm just having some problems- I can't figure out how to get the content blocker, lock, or bookmark icon to show up.

And I can't seem to get css to make the tab stacks more visible to work. They're super faded and I have a hard time determining where they are lol

The second tab is a stack, though with the way it is right now you'd hardly tell!

Fixed thanks to this topic c:

/* Secure domain green highlighter  */
.UrlFragment-HostFragment-Subdomain, .UrlFragment-HostFragment-Basedomain, .UrlFragment-HostFragment-TLD {-webkit-text-stroke-width: 0px; text-shadow: none;}
.UrlBar-AddressField > .SiteInfoButton:is(.secure, .certified) + .UrlBar-UrlFieldWrapper :is(.UrlFragment-HostFragment-Basedomain, .UrlFragment-HostFragment-TLD) {color: #bf0000;}

/* warning domain pink highlighter */
.UrlBar-AddressField > .SiteInfoButton.warning + .UrlBar-UrlFieldWrapper :is(.UrlFragment-HostFragment-Basedomain, .UrlFragment-HostFragment-TLD) {color: deeppink;}
}

.UrlFragment-HostFragment-Subdomain:not([data-content="www."]){ 
color:var(--colorImageFg, var(--colorAccentFg)); 
}
.UrlFragment-Wrapper {
	color: #000;
	text-shadow: none;
	opacity:0.8;
}
#main > div.mainbar > div > div.UrlBar-AddressField.button-textonly.below > div.UrlBar-UrlFieldWrapper > div > div.UrlField.UrlField--HasEditText > input {
color:var(--colorImageFg, var(--colorAccentFg));
}
.SiteInfoButton-Favicon, .SiteInfoButton-SearchEngineFavicon, .SiteInfoButton-SecurityBadge {
	color:var(--colorImageFg, var(--colorAccentFg));
}
/* ###################################################################################################################################### */

.toolbar-mainbar {
     background: linear-gradient(rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.2)), var(--colorAccentBgDarker);
	 border-radius: var(--radiusHalf)!important;
	 background: transparent;
	 border: none !important;
}
#main, #browser {
    background: linear-gradient(rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.2)), var(--colorAccentBgDarker)!important;
}
.mainbar {
	 background: #392325!important;
	border-radius: var(--radiusHalf)!important; 
}

.toolbar-extensions {
    background-color: linear-gradient(rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.2)), var(--colorAccentBgDarker) !important;
	border-radius: var(--radiusHalf)!important;
}
.toolbar-mainbar .toolbar-extensions {
	background-color: transparent;
}
.toolbar-mainbar .toolbar-extensions:after, .toolbar-mainbar:after {
	 display: none !important;
}

 #header, #main {
    position: unset;
}

 #header {
    height: unset;
	min-height:25px;
	background:linear-gradient(rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.2)), var(--colorAccentBgDarker);
}
#titlebar #pagetitle {
	justify-items: center;
	overflow: hidden;
}
.color-behind-tabs-on#browser:not(.tabs-top) #header {
	color: var(--colorImageFg, var(--colorAccentFg));
}




	
.color-behind-tabs-on#browser:not(.tabs-top) #header {
	background-color: var(--colorAccentBg);
}
 .toolbar-tabbar.sync-and-trash-container {
		top: 0px !important;
}


/* ###################################################################################################################################### */

/* Change toolbar button and extension button color same as tab bar's button */
.toolbar-mainbar > .button-toolbar > button, .toolbar-mainbar .toolbar-extensions > .button-toolbar > button, .BookmarkButton, .toolbar-insideinput.toolbar-insideinput.toolbar-insideinput > .button-toolbar button:not(:hover):not(:active):not(:focus):not(.button-pressed) { 
color: var(--colorImageFg, var(--colorAccentFg));
}


.SiteInfoButton.secure svg path, .SiteInfoButton.certified svg path{
    fill: var(--colorImageFg, var(--colorAccentFg));
}
}
.toolbar-insideinput.toolbar-insideinput.toolbar-insideinput > .button-toolbar button.button-pressed, .toolbar-insideinput.toolbar-insideinput.toolbar-insideinput > .toolbar-group > .button-toolbar button.button-pressed {
	background-image: linear-gradient(var(--colorBgAlphaHeavy), var(--colorBgAlpha));
    border-radius: var(--radiusHalf);
	opacity: 0.65;
}
	
#main > div.mainbar > div > div.UrlBar-AddressField.button-textonly.below > div.UrlBar-UrlFieldWrapper > div > div.UrlField.UrlField--HasEditText > input {
color:var(--colorImageFg, var(--colorAccentFg));
}
.SiteInfoButton-Favicon, .SiteInfoButton-SearchEngineFavicon, .SiteInfoButton-SecurityBadge {
	color:var(--colorImageFg, var(--colorAccentFg));
}

/* ###################################################################################################################################### */



.UrlBar-AddressField .pageload:not(.unstarted).progressing .pageload-indicator::-webkit-progress-value { /* the progressbar */
        background-color: var(--colorAccentBgAlpha);
		border-radius:5px;
		opacity: 1;

}
.SearchField, .UrlBar-AddressField {
    border-radius: 8px;
    background: #f0f0f0;
	opacity:1;
	border:  none;
	height:24px;
	top: 0px;
}

/* ###################################################################################################################################### */


/* Stylish toolbar button animation */
.button-toolbar > button:hover {border-radius: 30%; background: var(--colorAccentBgAlpha) !important; }
.toolbar-mainbar .toolbar-extensions > .button-toolbar > button:hover {border-radius: 30%; background: transparent;}
.vivaldi:hover {border-radius: 30%; background: var(--colorAccentBgAlpha) !important;} 
.icons #switch > button:hover {border-radius: 30%; background: var(--colorAccentBgAlpha) !important;}
.button-toolbar > button {
	border: none;
}



/* ###################################################################################################################################### */

/* Tab stack frame border color fixer */
.tabs-top .tab-position.is-substack .tab:not(.active) .svg-tab-stack{
	padding-bottom: 0px !important;
}
.svg-tab-stack .stack-frame {
    stroke: var(--colorImageFg, var(--colorAccentFg));
	opacity: 0.3;
}
.tabs-subcontainer {
	height:30px;
}
/* Fix round corner 1px line tab bar */
.tab.active:not(.marked):not(.tab-mini):before {
    left: calc(1.1px - var(--radiusHalf));
	 background: linear-gradient(rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.2)), var(--colorAccentBgDarker);
}


/* ###################################################################################################################################### */

/* Stylish Animate tab highlight on hover*/
.tab-position .tab:not(.active):hover {
    background: linear-gradient(rgba(0, 0, 0, 0.3),rgba(0, 0, 0, 0.3)), var(--colorAccentBgAlpha);
	border-radius: var(--radiusHalf);
}
.tab-position.is-substack > .tab.active {
	margin-bottom: 0px !important;
}
#browser.color-behind-tabs-on .tab-position .tab.active.active {
    background: linear-gradient(rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.2)), var(--colorAccentBgDarker);
    color: #fff;
}

/* ###################################################################################################################################### */

/* Change address bar text selection follow Accent*/

::selection {
  background-color: #bf0000;
  color: #fff;
}
/* ###################################################################################################################################### */

/* Change bookmark bar color follow Accent*/
.color-behind-tabs-on .bookmark-bar button {
   background: #392325;
}
.color-behind-tabs-on .bookmark-bar {
     background: #392325;
}
}
.bookmark-bar .observer {
	background: transparent;
}

.bookmark-bar button:hover {
	border-radius: 50%; background: #493436 !important; 
	}
.bookmark-bar button {
    border: 1px solid;
    border-color: #392325;
}


	
.bookmark-bar-top .bookmark-bar {
	border:none;
}