(help) Responsive one liner CSS modification



  • Can this modification be possible in Vivaldi using custom CSS?

    https://www.reddit.com/r/FirefoxCSS/comments/bg4oqd/responsive_one_liner/

    Thanks


  • Moderator

    @tsugane This should be doable in Vivaldi, and looks like a good idea to experiment with.



  • @tsugane I'm not sure if I can do this only with CSS, but maybe someone can do this


  • Moderator

    I imagine it would go something like this:

    .toolbar-mainbar *{
      // hide everything that isn't a button
    }
    .toolbar-mainbar .addressfield{
      // show this
    }
    .toolbar-mainbar:hover *{
      // show everything when hovering
    }
    
    

    Getting the animation right will prove tricky however.



  • Thank you for the replies! How would the code look like if there was no animation? If it were to be static. Sorry, I don't have any experience in CSS so I can't seem to figure it out.


  • Moderator

    @tsugane It could be as simple as (for a proof-of-concept)

    .toolbar-mainbar > :not(.addressfield) *{
      display: none;
    }
    .toolbar-mainbar:hover *{
      display: inline-block;
    }
    
    

    Though it will need some work to look good.



  • No CSS width/height/size changing animation/transition r possible cuz AFAIK most element inside main bar can't be animated smoothly other than using transform. Here is the code to do that:

    #header:not(:hover) ~ #main .toolbar-addressbar:not(:hover):not(:focus-within) > :not(.addressfield) {max-width:0; visibility:hidden;}
    


  • You can try this, but I don't say it works…

    .tabs-top.address-top:not(.native) .toolbar-addressbar.toolbar-mainbar:not(:hover) > *:not(.addressfield) {
        display: none;
    }
    .tabs-top.address-top:not(.native) .toolbar-addressbar.toolbar-mainbar .addressfield {
        margin-top: 4px;
        margin-bottom: 4px;
    }
    .tabs-top.address-top:not(.native) .toolbar-addressbar.toolbar {
        position: fixed;
        top: 0;
        left: 0;
        width: 50%;
    }
    .tabs-top.address-top:not(.native) #header {
        height: 34px;
        width: 50%;
        position: fixed;
        top: 0;
        right: 0;
        border-bottom: 1px solid var(--colorAccentBgDarker);
    }
    .tabs-top.address-top:not(.native) #titlebar {
        right: 0;
        left: unset;
        height: 100%;
        width: 124px;
        margin-right: 0;
    }
    .tabs-top.address-top:not(.native) .window-buttongroup {
        position: unset !important;
        width: 90px;
        display: inline-flex !important;
    }
    .tabs-top.address-top:not(.native) .window-buttongroup button {
        width: 30px;
        height: 100%;
    }
    .tabs-top.address-top:not(.native) .vivaldi {
        position: unset;
    }
    .tabs-top.address-top:not(.native) #header .window-buttongroup .window-close {
        order: unset;
    }
    .tabs-top.address-top:not(.native) #tabs-container {
        padding-left: 1px !important;
        height: 33px !important;
        width: calc(100% - 124px);
    }
    .tabs-top.address-top:not(.native) #main {
        margin-top: 34px;
    }
    


  • @potmeklecbohdan said in (help) Responsive one liner CSS modification:

    You can try this, but I don't say it works…

    I say it works, but it works better adding this portion of @LonM's code

    .toolbar-mainbar:hover * {
      display: inline-block;
    }
    
    .toolbar.toolbar-extensions:hover *, .toolbar.toolbar-extensions *{
      background: var(--colorAccentBg);
    }
    

    The code is getting there, just needs to make the extensions icons take focus when they are hovered instead of the tab behind them.
    Adding colour to the extensions container makes it easier to see and hover accurately.


Log in to reply
 

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