Vivaldi - custom.css

[wiiija]

Hi all,

I wasn't really sure where to best post this. I have made a post over at the Vivaldi forums but it's a graveyard there, figured somebody here may be able to help with what I want to do, if they use vivaldi and a custom.css themselves.

This is the current custom.css I call in to modify the browser:

Spoiler

/**[Remove V button from top left]**/

.vivaldi {
display:none !important;
}



/**[Tabs to left side]**/

.win #tabs-container.top, .linux #tabs-container.top {
padding-left: 0px !important;
}



/**[Inactive tab text opacity]**/

.isblurred .tab-position .tab .title {
opacity: .8;
}



/**[Loading colour in address bar]**/

.addressfield .pageload-indicator {
background-color: #607d8b !important;
}



/**[Remove favicons from tabs]**/

.tab-strip .favicon {
display: none;
}



/**[Hide audio icon in tab]**/

#tabs-container .tab .tab-audio {
opacity: 0;
}



/**[Remove trash icon]**/

.trash {
display: none !important;
}



/**[Hide home button]**/

.home {
display: none !important;
}



/**[Auto hide address bar]**/

.toolbar-addressbar {
visibility: hidden;
position: fixed;
width: 100%;
opacity: 0;
z-index: 2;
transition: opacity .2s linear .1s, visibility 0s linear 1s;
}



/**[Reveal on hover]**/

#header:hover ~ #main .toolbar-addressbar, .toolbar-addressbar:hover {
visibility: visible;
opacity: 1;
transition-delay: 0s;
}



/**[Toolbar button hover colour]**/

.button-toolbar.back:hover, .button-toolbar.forward:hover, .button-toolbar.next:hover, .button-toolbar.rewind:hover, .button-toolbar.reload:hover, .button-toolbar.home:hover, #tabs-container .trash {
-webkit-filter: sepia(0%) hue-rotate(0deg) saturate(0) brightness(70%) opacity(10%) !important;
}



/**[Toolbar button colour]**/

.button-toolbar.back, .button-toolbar.forward, .button-toolbar.next, .button-toolbar.rewind, .button-toolbar.reload, .button-toolbar.home, #tabs-container .trash {
-webkit-filter: sepia(0%) hue-rotate(0deg) saturate(0) brightness(70%) opacity(60%) !important;
}



/**[Active tab invisible text]**/

.tab-position .tab.active .tab-header .title {
opacity: 0;
}



/**[Completely remove siteinfo icon]**/

.addressfield .addressfield-siteinfo.certified, .addressfield .addressfield-siteinfo.secure, .addressfield .addressfield-siteinfo {
display: none !important;
}



/**[Completely remove address bar drop-down]**/

.addressfield .input-dropdown {
display: none !important;
}



/**[Hide add bookmark icon, still functions just invis]**/

.add-bookmark-container>button.button-addressfield {
opacity: 0;
}



/**[Remove progress ticker]**/

.addressfield .pageload .pageload-ticker {
display: none !important;
}

Couple of screens, I'm using auto hide address bar at the moment while it's ok it annoys me having to hover and is very occasionally not instantly reactive:

Hidden
On hover

What I'm trying to do is take it one step further and have everything in one bar, in a specific order from left:

Nav buttons
Address bar,
Extensions (I'm only using 1 visible - popup bookmarks),
Tabs,
New tab button,
Min/max/close buttons.

The address bar doesn't need to be huge and I never have more than 3 tabs open so fit wise it wont be a prob.

I know it's possible as there are similar on the Vivaldi forum but I've been inspecting, pulling relevant parts out and trying to shift bits about but I can't seem to get it right, I break everything! If anybody uses a custom.css in Vivaldi themselves could you provide any help? it would be greatly appreciated.

Thanks,
Sean

 

[wiiija]

I managed to get it done in the end, took me a few hours though and the code is nasty, I'll fix it tomorrow (wasn't specific enough with certain parts so it's messed up some random buttons in bookmarks page etc, and the min/max/close buttons disappear if you drop out of maximised lol

**FIXED**

tadaa