(legacy) background on urlbar buttons
-
//EDIT: Won't work in newer Vivaldi versions.
Several of these selectors don't exist anymore.
What it does:
.addressfield .searchengine-icon { background-color: rgba(255, 255, 255, 0.86); height: 23px; width: 23px; margin: 0px; } .button-addressfield.bookmark svg .bookmark-outline, .button-addressfield { border-radius: 0px; fill: var(--colorBg); } /*.ignore-react-onclickoutside*/.button-addressfield.permission-flash, .button-addressfield.permission-location.is-allowing, .button-addressfield.permission-location.is-blocking, .button-addressfield.permission-camera.is-blocking, .button-addressfield.is-allowing, .button-addressfield.permission-popup.is-blocking, .button-addressfield.dragging-cancelled, .button-addressfield.input-dropdown, .button-addressfield.bookmark.docked, .button-addressfield.reader-mode, .button-addressfield.bookmark { background-color: var(--colorFg); /*was Bg*/ border-radius: 0px; opacity: 1; /* was .7*/ } .siteinfo-symbol {background-color: var(--colorFg);} .addressfield-siteinfo-symbol.secure { fill:#389a2a; } .addressfield .addressfield-siteinfo.insecure { fill: rgb(255, 0, 0); } .button-addressfield.bookmark:hover { background-color: var(--colorBg); } .permission-icon { fill: var(--colorBg); } .button-addressfield.is-blocking, .button-addressfield.is-blocking.is-dialog-open { background-color: var(--colorFg); } .button-addressfield.reader-mode:hover { fill: var(--colorFg); } .theme-light .button-addressfield.dragging-cancelled { background-color: rgba(255, 255, 255, 0.4); } .button-addressfield.dragging-cancelled:hover { background-color: rgba(255, 255, 255, 0.8); border-color: transparent; /*filter: saturate(100%);*/ /*background-color: transparent;*/ } .addressfield .addressfield-siteinfo:hover { filter: invert(100%); } .button-addressfield.is-allowing .permission-icon { fill: var(--colorBg); } .button-addressfield.permission-flash.is-blocking.is-dialog-open { color: var(--colorBg); } /*In progress: support for Private Mode*/ .addressfield .private-window-indicator { fill: inherit; /*background-color: var(--colorfgfaded);*/ } .private .toolbar-addressbar .addressfield svg { fill: rgb(121, 121, 121); /*background-color: var(--colorfgfaded);*/ }
//edit: add code for Private Mode (need fixes) and using
var(--color)
for.siteinfo
. -
What I've been running for a very long time is this:
.button-addressfield.bookmark svg .bookmark-animated-fill { fill: var(--colorHighlightBg); }
Changes the color of the active bookmarks button to the highlight color of the theme. Should be standard in Vivaldi imo.
-
I've been using something very similar but toned down for my dark theme
.button-addressfield.bookmark.bookmarked svg .bookmark-outline { fill: var(--colorHighlightBgDark); } .button-addressfield.bookmark svg .bookmark-animated-fill { fill: var(--colorHighlightBgAlpha); }
-
@luetage I did it but did not change the color, continued gray
-
That code only changes the colour of pages that have been bookmarked.
If you want to change the colour of the normal bookmark icon, use this selector
.button-addressfield.bookmark svg .bookmark-outline
-
@sjudenim
But I wanted it to be filled with redI tested several options and none changed the color.
strange -
-
@sjudenim #e2526e
-
Not sure why it isn't working then, there must be some code over riding it. Try adding
!important
.button-addressfield.bookmark svg .bookmark-animated-fill { fill: var(--colorHighlightBg) !important; }
or you can do it manually like this
.button-addressfield.bookmark svg .bookmark-animated-fill { fill: #e2526e !important; }
-
@sjudenim It worked!
-
Updated OP, fixes for:
- padlock (secure/insecure);
- search engine icon;
- reader view button;
- site permissions;
- light themes.
-