Code for legacy vivaldi gradient effect



  • I've taken this old code for "3d" effect and I did to it some edits:
    this variant doesn't box the button, it acts more like a transparent gradient for the whole extensions area and urlbox.

    /*Put the gradient on extensions buttons*/
    .button-toolbar.browserAction-button {
        background-size: 90%; /*As I have smaller buttons*/
        background-image: linear-gradient(hsla(0,0%,100%,.4),hsla(0,0%,100%,.2));
    }
    
    /*Put the gradient on whole addressfield area*/
    .addressfield {
       background-image: linear-gradient(hsla(0,0%,100%,.4),hsla(0,0%,100%,.2));
    }
    
    /* Same effect for tab bar (tested on right)*/
    .tab-header {
    background-image:linear-gradient(hsla(0,0%,100%,.4),hsla(0,0%,100%,.2));
    } 
    
    /* Add gradient to bookmarkbar*/
    .bookmark-bar,
    .bookmark-bar button {
    	background-image:linear-gradient(hsla(0,0%,100%,.3),hsla(0,0%,100%,.2));
    }
    
    /*Gradient on footer (status bar)*/ 
    #footer {
    background-image: linear-gradient(hsla(0,0%,100%,.4),hsla(0,0%,100%,.2)) !important;
    }
    
    /* Gradient on panel buttons */
    .bookmarks, .downloads, .notes, .history, .webbviewbtn.active, .webviewbtn, .addwebpanel, .preferences {
    	background-image:linear-gradient(hsla(0,0%,100%,.4),hsla(0,0%,100%,.2));
    } 
    
    /* And its sub buttons */
    .button-toolbar.add, .button-toolbar.folder, .button-toolbar.delete {
    	background-image:linear-gradient(hsla(0,0%,100%,.2),hsla(0,0%,100%,.1)) !important;
    } 
    .button-toolbar.dlstop, .button-toolbar.dlrestart, .button-toolbar.dlclear {
    	background-image:linear-gradient(hsla(0,0%,100%,.2),hsla(0,0%,100%,.1)) !important;
    } 
    .button-toolbar.note-new, .button-toolbar.note-folder, .button-toolbar.note-delete {
    	background-image:linear-gradient(hsla(0,0%,100%,.2),hsla(0,0%,100%,.1)) !important;
    } 
    

    Variant of these styling - or some cool generator css styler link - is welcome :D



  • If you have hooked images, you need to place gradient there

    eg:

    background-image: url(/hooks/image.svg),
    

    the code for the gradient

     linear-gradient(hsla(0,0%,100%,.4),hsla(0,0%,100%,.2));
    

    so

    background-image: url(/hooks/image.svg), linear-gradient(hsla(0,0%,100%,.4),hsla(0,0%,100%,.2));
    

  • Vivaldi Translator

    Ha, just testing for address bar. Looks more lively. :thumbsup_tone3:

    There's a misplaced comment mark.

    /*Put the gradient on whole addressfield area/* <<<
    


  • @dLeon thanks, fixed the mark :)



  • There are a few more mistakes in the code you pasted. There are 2 semicolons at the end, but no closing bracket. Have you considered using a dedicated text editor with syntax highlighting?



  • @luetage Well, I use notepad++ ... I simply forgot to copy the close-bracket line XD
    The double ;; was in the code and I literally take the error from there.

    Fixed again :D

    A nice color picker to play around with gradients ^^



  • Another bunch of gradients :package:
    Should be "theme safe" :)

    /* Gradient on panel buttons */
    header, .bookmarks, .downloads, .notes, .history, .webbviewbtn.active, .webviewbtn,.addwebpanel, .preferences {
       background-image:linear-gradient(hsla(0,0%,100%,.2),hsla(0,0%,100%,.3));
    }
    
    /* And its sub buttons */
    .button-toolbar.add, .button-toolbar.edit, .button-toolbar.folder, .button-toolbar.delete,
    .button-toolbar.note-new, .button-toolbar.note-folder, .button-toolbar.note-delete,
    .button-toolbar.dlstop, .button-toolbar.dlrestart, .button-toolbar.dlclear,
    .button-toolbar.import, .button-toolbar.updatethumb {
       background-image:linear-gradient(hsla(0,0%,100%,.1),hsla(0,0%,100%,.5)) !important;
    }
    
    /* Panel details*/
    .vivaldi-tree {
       background-image:linear-gradient(hsla(0,0%,100%,.1),hsla(0,0%,100%,.2));
    } 
    .upper-half {
       background-image:linear-gradient(hsla(0,0%,100%,.2),hsla(0,0%,100%,.3));
    }
    .lower-half {
    background-image:linear-gradient(hsla(0,0%,100%,.3),hsla(0,0%,100%,.2));
    } 
    #panels button.fullwidth.alternate:after {
    background-image:linear-gradient(hsla(0,0%,100%,.3),hsla(0,0%,100%,.2));
    } 
    .data.notes-cardwrapper.cardview {
    background-image:linear-gradient(hsla(0,0%,100%,.3),hsla(0,0%,100%,.2));
    } 
    

Log in to reply
 

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