@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;
}
