• 21 Posts
  • 33 Comments
Joined 2 years ago
cake
Cake day: October 1st, 2023

help-circle






  • Hi, for some reason when the sidebar-main is expanded there are 2 styles for ‘tools-and extensions’, when there are just a few icons they display in vertical, and when there are more than a few they display in horizontal, and I would like to have always the styles for ‘tools-and-extensions’ in horizontal when sidebar is expanded, even if there are just a few of icons. But I can’t apply code when they are in ‘vertical + sidebar expanded’ and don’t affect when the sidebar is collapsed.







  • Thank you so much, so now all the rules needs to be variables, I don’t understand very well but it seems to work:

    /* Normal tabs - Muted icon */
        
        .tab-audio-button[muted] {
            --my-position: absolute !important;
            --my-top: calc(var(--tab-height-personal)/2 - 14px) !important;
            --my-inset-inline-start: 14px !important;
            --my-background-image: url("../icons/paused.svg") !important;
            --my-background-color: transparent !important;
            --my-background-size: 12px !important;
            --my-box-shadow: none !important;
            --my-fill: var(--lwt-tab-text) !important;
            --my-opacity: 0.8 !important;
            --my-clip-path: xywh(1px 1px 86% 86% round 50%) !important;
            
            &:hover {
                --my-background-image: url("chrome://browser/skin/tabbrowser/tab-audio-blocked-small.svg") !important;
                --my-background-size: 8px !important;
                --my-box-shadow: inset 0 0 0 1px var(--contrast-color), inset 0 0 0 2px var(--lwt-tab-text) !important;
                --my-fill: var(--lwt-tab-text) !important;
                --my-opacity: 1 !important;
            }
        }
        
        .button-background {
            position: var(--my-position) !important;
            top: var(--my-top) !important;
            inset-inline-start: var(--my-inset-inline-start) !important;
            background-image: var(--my-background-image) !important;
            background-color: var(--my-background-color) !important;
            background-size: var(--my-background-size) !important;
            box-shadow: var(--my-box-shadow) !important;
            opacity: var(--my-opacity) !important;
            fill: var(--my-fill) !important;
            clip-path: var(--my-clip-path) !important;
        }
    


















  • @MrOtherGuy@lemmy.world I’m gonna need your help again, sorry. I used your code to gradient border around selected tab and works fine but I see a little flash in certain situations that makes me nuts; this is the code:

    .tabbrowser-tab[selected] > .tab-stack::before{
        content: "";
        display: flex;
        min-height: inherit;
        border-radius: var(--tab-border-radius);
        grid-area: 1/1;
        margin-block: var(--tab-block-margin);
      /* Edit gradient colors here */
        background: var(--general-color) !important;
        border-radius: 0px 2px 0px 0px !important;
    }
    

    When I click to select the tab, sometimes the tab is first colored with the border color and then it displays correctly, Here is a SS with the problem, there is a way to delay the colored after the tab is completely charged or some trick?