Accent transitions
-
I created this mod after seeing this feature request: Accent Color from Active Page needs a Gradient Transition Between Tabs
PREVIEW
More
All this mod does is include a transition time while moving between tabs, the default is set to 0.7s, but it can easily be changed to any desired amount of time. This mod can be broken down into multiple parts to accomodate the type of theme that you use:
/* Adds transition to the window accent */ .color-behind-tabs-on#browser.address-off.tabs-off.bookmark-bar-off #header { transition: background-color 0.7s, border-color 0.7s; } #browser.color-behind-tabs-on { transition: background-color 0.7s, border-color 0.7s; } /* Adds transition to address accent */ #browser:not(.tabs-top) #header { transition: background-color 0.7s; } #browser.color-behind-tabs-off:not(.tabs-top) { transition: background-color 0.7s; } .color-behind-tabs-off .toolbar-mainbar { transition: background-color 0.7s; } .color-behind-tabs-off.address-top .toolbar-mainbar:after { transition: background-color 0.7s; } .color-behind-tabs-off.address-bottom .toolbar-mainbar { transition: background-color 0.7s, box-shadow 0.7s; } .color-behind-tabs-off #tabs-container.top, .color-behind-tabs-off #tabs-container.bottom { transition: border-color 0.7s; }
BONUS
This is really just for tabs, nothing to do with the accent color./* Adds transition to the active tab background color */ .tab-position .tab.active { transition: background-color 0.4s; } /* Adds transition to non-active tabs background color */ .tab-position .tab:not(.active) { transition: background-color 0.4s; } /* Adds transition to the tab stack indicators */ .color-behind-tabs-on.stacks-on .tab-strip .tab.active .tab-group-indicator .tab-indicator.active { transition: background-color 0.4s; } .stacks-on .tab-strip .tab.active .tab-group-indicator .tab-indicator.active { transition: background-color 0.4s; } .color-behind-tabs-on.stacks-on .tab-strip .tab .tab-group-indicator .tab-indicator.active, .stacks-on .tab-strip .tab .tab-group-indicator .tab-indicator.active.background-image { transition: background-color 0.4s; } .stacks-on .tab-strip .tab .tab-group-indicator .tab-indicator.active { transition: background-color 0.4s; } .color-behind-tabs-on.stacks-on .tab-strip .tab .tab-group-indicator .tab-indicator { transition: background-color 0.4s; } .color-behind-tabs-on.stacks-on .tab-strip .tab .tab-group-indicator .tab-indicator:hover { transition: background-color 0.4s; } .stacks-on .tab-strip .tab .tab-group-indicator .tab-indicator { transition: background-color 0.4s; } .stacks-on .tab-strip .tab .tab-group-indicator .tab-indicator:hover { transition: background-color 0.4s; }
-
@altcode said in Accent transitions:
Don't know how to display gifs here.
Regular GIFs or APNG are fine. Video gifv format is not supported.
-
@pesala Thank you Pesala. I tried to directly upload a regular GIF to the forum, but that always seemed to fail.
-
@altcode
If you have a resized in the code of the gif you've uploaded (added by Vivaldi forum automatically when the gif is large), just erase that resized and it should work. -
Looks good. As an uploaded gif:
One note is that if there is no window background image set to display, the animation doesn't occur. I suspect this is due to the gradient that is added. in its place. With a background image set, it works fine.
-
@lonm That's strange, would you mind testing this with tabs at the bottom? I can only reproduce this whenever the tabs are set at the top.
@ornorm said in Accent transitions:
@altcode
If you have a resized in the code of the gif you've uploaded (added by Vivaldi forum automatically when the gif is large), just erase that resized and it should work.I don't know how to do that. I used a web tool to convert a video into a gif.
-
@altcode
When you upload your gif to the forum, you should see that kind of code :
When it's uploaded, you get something like :
![0_1540735711119_VivaldiZoom.gif]/assets/uploads/files/1540735462939-vivaldizoom-resized.gif
which gives in the preview pane something like :
What I suggest is to erase resized from the code generated by Vivaldi forum :
![0_1540735711119_VivaldiZoom.gif]/assets/uploads/files/1540735462939-vivaldizoom-.gif
-
@ornorm Ah, I see. Then it did upload. It's fixed now, thank you!
-
@altcode It works fine when tabs are on the bottom. Strange.
-
@altcode This is the kind of feature you don't think you want untill you see it, then you just add it. Nice idea!
-
@masterleo29 It wasn't my idea, it was by @rejzor. Go to the feature request so that one day it may be an official feature!
-
@LonM magnifique
-
I added the transition on the vivaldi button and the entire addressbar properly and bookmarks completely.
The first part is from the original code up.I will work on the sidepanel and the rest of it XD. If there are any issues tell me or try to fix them, that will help a lot
There is a strange thing that fade that happens when hovering over icons... unfortunately i do not know how to fix or bypass that.
/* Adds transition to the window accent */ .color-behind-tabs-on #tabs-container { transition: background-color 1s, border-color 1s; } #tabs-container.top, #tabs-container.bottom { transition: background-color 1s, border-color 1s; } /*Adds transition to the vivaldi icon*/ #titlebar > button { transition: background-color 1s, border-color 1s; } /*Address bar & icons transition*/ #main > div.toolbar-addressbar.toolbar { transition: background-color 1s, border-color 1s; } .toolbar-addressbar .button-toolbar.browserAction-button, .toolbar-mailbar .button-toolbar.browserAction-button { transition: background-color 1s, border-color 1s; } .toolbar .button-toolbar{ transition: background-color 1s, border-color 1s; } .toolbar .button-toolbar:hover{ transition: background 0s; } #main > div.toolbar-addressbar.toolbar > div.addressfield { transition: background-color 1s, border-color 1s; } #main > div.toolbar-addressbar.toolbar > div.addressfield > span { transition: background-color 1s, border-color 1s; } #main > div.toolbar-addressbar.toolbar > div.addressfield > button.button-addressfield.addressfield-siteinfo.secure { transition: background-color 1s, border-color 1s; } #main > div.toolbar-addressbar.toolbar > div.addressfield > button.button-addressfield.addressfield-siteinfo.internal > div > svg { transition: background-color 1s, border-color 1s; } /*Addressbar bottom border*/ .address-top .toolbar-addressbar:after, .address-top .toolbar-mailbar:after { transition: background-color 1s, border-color 1s; } /*Bookmarks transition*/ button.button-addressfield{ transition: background-color 1s, border-color 1s; } .bookmark-bar { transition: border-color 1s; } #main > div.bookmark-bar.icon > div , .bookmark-bar button { transition: background-color 1s, border-color 1s; } .bookmark-bar button:hover { transition: background 0s; }
-
Alright I more or less managed to put the transition almost everywhere, sidebar, status bar, addressbar, buttons, vivaldi icons. I also implemented it into my theme that you can find here Hope you guys like what i did.
/*===================Transition color ready=============*/ /* Adds transition to the window accent */ .color-behind-tabs-on #tabs-container { transition: background-color 1s, border-color 1s; } #tabs-container.top, #tabs-container.bottom { transition: background-color 1s, border-color 1s; } /*Adds transition to the vivaldi icon*/ #titlebar > button { transition: background-color 1s, border-color 1s; } /*Address bar & icons transition*/ #main > div.toolbar-addressbar.toolbar { transition: background-color 1s, border-color 1s; } .toolbar-addressbar .button-toolbar.browserAction-button, .toolbar-mailbar .button-toolbar.browserAction-button { transition: background-color 1s, border-color 1s; } .toolbar .button-toolbar{ transition: background-color 1s, border-color 1s; } .toolbar .button-toolbar:hover{ transition: background 0s; } #main > div.toolbar-addressbar.toolbar > div.addressfield { transition: background-color 1s, border-color 1s; } #main > div.toolbar-addressbar.toolbar > div.addressfield > span { transition: background-color 1s, border-color 1s; } #main > div.toolbar-addressbar.toolbar > div.addressfield > button.button-addressfield.addressfield-siteinfo.secure { transition: background-color 1s, border-color 1s; } #main > div.toolbar-addressbar.toolbar > div.addressfield > button.button-addressfield.addressfield-siteinfo.internal > div > svg { transition: background-color 1s, border-color 1s; } /*Addressbar bottom border*/ .address-top .toolbar-addressbar:after, .address-top .toolbar-mailbar:after { transition: background-color 1s, border-color 1s; } /*Bookmarks transition*/ button.button-addressfield{ transition: background-color 1s, border-color 1s; } .bookmark-bar { transition: border-color 1s; } #main > div.bookmark-bar.icon > div , .bookmark-bar button { transition: background-color 1s, border-color 1s; } .bookmark-bar button:hover { transition: background 0s; } /*Sidepanel Transition*/ .panel, .sortselector, .sortselector-dropdown, .notes-cardwrapper, .downloads-cardwrapper, .download-editor,.addbookmark-cardwrapper .upper-half, .notes-cardwrapper .upper-half, .addbookmark-cardwrapper .lower-half, .notes-cardwrapper .lower-half,.toolbar.icons button + button, .toolbar.text button + button,.toolbar.icons button:first-of-type,#panels-container.left #switch .addwebpanel-wrapper .addwebpanelcallout, .notes-add-area-capture:hover,.notes-toggle-md:hover,.button-toolbar.add:hover,.notes-add-attachment:hover,.notes-editor .note,.panel#downloads input.title, .cardview input[type=text],.manager-editor .fieldset > input[type=text], .manager-editor .fieldset > textarea, .manager-editor .fieldset > select,.panel > header input,.sortselector-button:hover,#browser .sortselector .sortselector-dropdown:hover,.toolbar.icons button + button:hover, .toolbar.text button + button:hover, .toolbar.icons button:first-of-type:hover,.tree-row[data-selected] { transition: background 1s; } .notes-add-area-capture,.notes-add-attachment, .notes-toggle-md,.note-new, .button-toolbar.add, #footer, #panels-container.left, #switch { transition: background 1s; } #footer { transition: background-color 1s, border-color 1s; } #panels-container:after { transition: background-color 1s, border-color 1s; } .sortselector.sortselector-compact{ transition: background-color 1s, border-color 1s; } #panels-container.left #switch { box-shadow: inset 0px 0 var(--colorAccentBg)!important; } #switch button.active { transition: background-color 1s, border-color 1s; } /*Status Bar*/ #footer .zoom-control{ transition: background-color 1s, border-color 1s; } #notes-panel > div > div > div.add-attachments-wrapper > button, #notes-panel > div > div > div.add-attachments-wrapper > label{ transition: background-color 1s, border-color 1s; }
-
The latest snapshots broke the transitions for the address bar. I have thus updated the code in the main post.
I have also simplified it a bit, all of these correspond to a theme that has "Apply Accent Color to Window" disabled as well as any configuration of tab position and/or the address bar.
-
Great mod. I used it on Win10 with tabs on top. Here its working only with Background Image. I made my own simple one. But then i see a bug. The min/max/close/sync/Trash/newtab buttons dont switch from black to white and vice versa when the Titlebar change the color. Titlebar black with black buttons ): Only the vivaldi Logo in the left corner changed his color. I opened a bug report for this but fixed it myself:
/* Color Bugfix for the Buttons min/max/close/trash/sync/newtab */ #header #titlebar .window-buttongroup button { fill: var(--colorAccentFg, var(--colorImageForeground)) !important; } .toolbar-tabbar.sync-and-trash-container { fill: var(--colorAccentFg, var(--colorImageForeground)) !important; } .toolbar-tabbar .newtab > button { fill: var(--colorAccentFg, var(--colorImageForeground)) !important; }
-
Its not working anymore with v2.9 ):
-
@loomes I've put up a new version. It should hopefully work now, so do tell me if something is still wrong.
-
@AltCode
Thank you, its working again :smiling_face_with_open_mouth: -
Apparently something was changed again with version 3.3. Unfortunately, it no longer works properly.