border and highlighting on address bar url/search input



  • on standard skin border is blue when box is active - this can be changed via a theme afaik but is there a way to do it in a custom theme/skin

    same area - highlighting of url is also stabbing blue - again can this be changed

    have searched via dev console bus so far not found any way to change these items


  • Moderator

    Current CSS is:

    .addressfield:focus-within, .searchfield:focus-within {
        border-color: var(--colorAccentBgFadedMost);
        box-shadow: 0 0 0 1px var(--colorAccentBgDark), 0 0 0 1px var(--colorAccentBgFadedMost) inset;
    }
    

    You need to change the var(--colorAccentBgFadedMost) into a CSS color code or name.
    F.ex.

    .addressfield:focus-within, .searchfield:focus-within {
        border-color: lightgray !important;
    }
    


  • @Gwen-Dragon said in border and highlighting on address bar url/search input:

    Current CSS is:

    .addressfield:focus-within, .searchfield:focus-within {
        border-color: var(--colorAccentBgFadedMost);
        box-shadow: 0 0 0 1px var(--colorAccentBgDark), 0 0 0 1px var(--colorAccentBgFadedMost) inset;
    }
    

    You need to change the var(--colorAccentBgFadedMost) into a CSS color code or name.
    F.ex.

    .addressfield:focus-within, .searchfield:focus-within {
        border-color: lightgray !important;
    }
    

    thanks

    the border changes colour and there is a original blue is behind it

    messed about and got to this

    .addressfield:focus-within, .searchfield:focus-within {
            border-color: lightgrey !important;
            box-shadow: 0 0 0 1px lightgrey, 0 0 0 1px lightgrey inset !important; 
    }
    

    which gets rid of the blue background but the border is a bit thick - maybe thats how it is but will work on that

    highlight of the url has not changed colour - maybe it cannot be done - will keep looking

    i guess its there somewhere - am slowly leaning how to change things


  • Moderator

    @adacom Ah, in my theme i did not see that the shadow stays in a disturbing way.
    You need to adapt the colors for the shadow.


  • Moderator

    For selection:

    /* Please adapt colours to your own needs */
    .addressfield ::selection, .searchfield ::selection {
        background-color: yellow !important;
        color: blue !important; 
    }
    

    edit Typo in CSS



  • @adacom said in border and highlighting on address bar url/search input:

    @Gwen-Dragon said in border and highlighting on address bar url/search input:

    Current CSS is:

    .addressfield:focus-within, .searchfield:focus-within {
        border-color: var(--colorAccentBgFadedMost);
        box-shadow: 0 0 0 1px var(--colorAccentBgDark), 0 0 0 1px var(--colorAccentBgFadedMost) inset;
    }
    

    You need to change the var(--colorAccentBgFadedMost) into a CSS color code or name.
    F.ex.

    .addressfield:focus-within, .searchfield:focus-within {
        border-color: lightgray !important;
    }
    

    thanks

    the border changes colour and there is a original blue is behind it

    messed about and got to this

    .addressfield:focus-within, .searchfield:focus-within {
            border-color: lightgrey !important;
            box-shadow: 0 0 0 1px lightgrey, 0 0 0 1px lightgrey inset !important; 
    }
    

    which gets rid of the blue background but the border is a bit thick - maybe thats how it is but will work on that

    highlight of the url has not changed colour - maybe it cannot be done - will keep looking

    i guess its there somewhere - am slowly leaning how to change things

    thanks - yes its all about colours

    .addressfield:focus-within, .searchfield:focus-within {
            border-color: lightgrey !important;
            box-shadow: 0 0 0 1px white, 0 0 0 1px white inset !important; 
    }
    


  • @Gwen-Dragon said in border and highlighting on address bar url/search input:

    For selection:

    /* Please adapt colours to your own needs */
    .addressfield ::selection, .searchfield ::selection {
        background-color: yellow !important;
        color: blue !important; 
    }
    

    edit Typo in CSS

    cannot get that to work but it gives me a clue to hopefully try other things - you have 'selection' - i was using active - all to play with!


  • Moderator

    Sorry, i do less modifications on Vivaldi UI, being less experienced, I wanted to give you a hint what could be done.

    Modification is a learning process on CSS and Inspection of browser UI with Developer Tools.

    May be an other person who does more modifications on UI can help you.


  • Moderator

    @adacom said in border and highlighting on address bar url/search input:

    highlight of the url has not changed colour

    Hmm, i understood your post that you wanted to change the selection colors.



  • @adacom

    0_1565457945816_001.png

    To change selected URL and text colour use:

    ::selection {
        background-color: red !important;
        color: yellow;
    }
    

    Change background-color: to your liking (you can also used hex values, ex: #FF0000)

    color: changes the actual highlighted text colour, (you can also use hex values here as well).



  • @raed

    excellent - many thanks


Log in to reply
 

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