(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);
    .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 {
    .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.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

  • @mioni

    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 red 0_1507770736040_1dec49f9-9c2d-4cd6-9bf9-0074521e0a00.png

    I tested several options and none changed the color.

  • @mioni

    So it is the bookmarked icon you are after. @luetage's code should work.

    what is the Hightlight colour you are using in your theme?

  • @sjudenim #e2526e

  • @mioni

    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.

Log in to reply

Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.