Make F2-Quick Commander window transparent



  • Make F2-Quick Commander window transparent

    fa2cf521-1588-434d-bc7b-923b0407b4cf-image.png

    Allow users to see the text of the web page at the bottom of the window.

    I want to enter the keywords I want to search on the Quick Commander window.
    But the Quick Commander window will block the text I want to refer to on the web page.

    It would be great if the Quick Commander window could be set to transparent display so that the user could see the web page below the Quick Commander window.

    I found a concept map, which is a terminal on Deepin.
    The default is transparent display, you can see the text below the terminal, very good design.

    a54bba1f-7425-40c4-9de3-0796ecf30e9c-image.png



  • Now:
    09638c87-977b-4863-9100-b9596f38e4e0-image.png

    What I want like it:
    10fcf04d-b58c-4e07-a9c3-7fab9b2cf595-image.png



  • @poto This is possible using a CSS mod.

    #modal-bg.qc-modal {
        opacity: 0.85;
    }
    

    I tried a bit but can only make the whole QC transparent, including the text which is not what we'd want. Not really sure how to keep the text opaque, my CSS skill is not up to par.



  • @Pathduck & @poto almost this, I think it only needs a little changes.



  • @potmeklecbohdan Thanks, that helped!

    I always try to find the minimal working example:

    .quick-commands, input.quick-command-search-hint {
        background-color: transparent !important;
    }
    
    .quick-commands .quick-command[data-selected] {
        background-color: var(--colorHighlightBgAlpha) !important;
    }
    .qc-modal > div {
        background-color: var(--colorBgAlphaHeavy) !important;
        backdrop-filter: blur(5px);
    }
    

    b0b93ff3-5c9a-4e81-86f3-b9504f3c9d0f-image.png

    The blur might be a bit too much (if the purpose was to see what was behind), but adjustable. And the colour vars can be adjusted as well to user preference.

    But the scrollbars seem to be some React stuff, no idea how to change those... 😕



  • @Pathduck It just seems that ::-webkit-scrollbar cannot be (semi-)transparent. This should help at least a little, but highly decreases a11y & usability.

    .qc-modal ::-webkit-scrollbar {
        width: 3px;
        border: none;
    }
    .qc-modal ::-webkit-scrollbar-thumb {
        border: none;
        background: var(--colorHighlightBg) !important;
    }
    .qc-modal ::-webkit-scrollbar-button {
        display: none;
    }
    


  • @potmeklecbohdan Nice! At least I can make the track and thumb work:

    .qc-modal ::-webkit-scrollbar-track, .qc-modal ::-webkit-scrollbar-thumb {
    	background-color: var(--colorBgAlphaHeavier) !important;
    }
    

    The button seems to be an icon/image so it would need some kind of filter, and opacity doesn't work.
    Or like you did, just hide it with none of course... and the buttons are kind of redundant anyway, why would anyone need to click a button when they can scroll using the mouse or keyboard...

    Then again, I don't really have that much need for it myself - and I'm sure @poto can figure it out from here on out, to their own preference 🙂 👍



  • @Pathduck said in Make F2-Quick Commander window transparent:

    At least I can make the track and thumb work

    Oh yeah! The problem of ::-webkit-scrollbar is probably that it simply doesn’t have any background to set…


Log in to reply
 

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