Accent transitions
-
@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.
-
@loomes Could you specify where the accent color is applied and your tab position? It seems to be working fine for me.
-
Yes you have right, i have tested a bit. I think its a Vivaldi Bug. On many Websites the Accent Color is not Loaded when i initialy open the Website. When i click a link on these Websites also the Accent Color is Loading. On this forum site this also happen.
Its a Bug: https://forum.vivaldi.net/topic/50419/accent-color-from-active-page-not-working-on-vers-3-3-2022-36