Godie

joined 2 years ago
[–] Godie@lemmy.world 2 points 2 days ago (1 children)
.tab-group-label {
        #tabbrowser-tabs[orient="vertical"][expanded] & {
            width: 100% !important;
            text-align: start !important;
        }
    }
 

Test it in Firefox-developer-edition Using just this code:

#tabbrowser-arrowscrollbox[orient="horizontal"] {

    /* Horizontal tab size */        
    &>.tabbrowser-tab[fadein]:not([style^="max-width"]),
    &>tab-group:not([collapsed]) .tabbrowser-tab[fadein]:not([style^="max-width"]) {
        max-width: 200px !important;
    }
}

For some reason, after some steps, the tab with 'sound-muted-blocked' becomes larger when moving other tab, I made a video showing the problem, hope someone can share a better code or a solution, the problem was in the previous developer version but with an update the problem didn't appear anymore, I guess the developers remove some change but with the new developer-version v.142.b2 those changes were added again.

Video showing the problem: https://imgur.com/a/jeR2zN7 don't pay attention when the YouTube page is loading, my pc is a potato.

[–] Godie@lemmy.world 1 points 4 weeks ago

Seems like other code combined with this are incompatible (with a tab with sound) in my particular case, first I have to figure it out what of my other code is in conflict, rare all this situation. With your latest code, the issue persist.

[–] Godie@lemmy.world 1 points 1 month ago (2 children)

decrease the maximum width

Exactly, the default is so large, like a sausage.

[–] Godie@lemmy.world 1 points 1 month ago* (last edited 1 month ago) (4 children)

I don't know why that happens, but the problem persists, I delete that code block and the problem disappear. I'm in Windows 10 with Firefox-developer-edition 141.0b3, maybe other code is doing that? Or in combination with another thing, how to know. Here is a video with the issue: https://imgur.com/a/2ZLIYVp

 

Using Firefox-developer-edition hi, I need help with this new Firefox Feature, seems like the sound tabs get larger when the user is moving any tab. I tried to reach the code, but I can't, I want the 'sound-Tab' to keep the width.

Update: Seems like this code is causing it, maybe there is another way to set a max width?

@media not -moz-pref("sidebar.verticalTabs") {

    #tabbrowser-arrowscrollbox[orient="horizontal"] {

        /* Horizontal tab size for ungrouped tabs */

        &>.tabbrowser-tab[fadein]:not([style^="max-width"]) {
            max-width: 168px !important;
        }

        /* Horizontal tab size for grouped tabs */

        &>tab-group:not([collapsed]) .tabbrowser-tab[fadein]:not([style^="max-width"]) {
            max-width: 168px !important;
        }
   }
}
[–] Godie@lemmy.world 1 points 2 months ago (1 children)

Wow, I don't know how it works but works, I will research 'CSS container', to learn. I appreciate your help. 💙

 

Hi, By default, I set the tab-close-button always visible, to use it like a tab-separator, but I would like to remove the tab-close-button when the tab gets smaller than some specific size. For example, in the image I attached, I would like to remove the close button but when the tab gets a little bigger the close button should appear. I used this code to make the tabs smaller that default:

.tabbrowser-tab {
      &:not([pinned]) {
        #tabbrowser-tabs[orient="horizontal"] &[fadein] {
          --tab-min-width-pref: calc(16px + 2 * 10px + 2px) !important; !important;
          --tab-min-width: var(--tab-min-width-pref) !important;
        }
      }
    }

So, It is possible to remove the close button when the tab size is smaller than 50px or something like that?

[–] Godie@lemmy.world 1 points 3 months ago

Excellent, thank you. 👍

[–] Godie@lemmy.world 1 points 3 months ago (2 children)

I tested it and don't work for me, I said I was in Developer-edition, maybe in release version is different. Here is a video with the issue, the sidebar doesn't expand when it is on the right side: https://imgur.com/a/zqsWpqf

 

I am in Firefox-developer-edition and this code: autohide_tabstoolbar_v2.css don't work properly when sidebar is on right side. Could you please verify it?

[–] Godie@lemmy.world 1 points 4 months ago

Thank you, I will add it immediately :)

[–] Godie@lemmy.world 1 points 4 months ago (2 children)

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.

5
submitted 4 months ago* (last edited 4 months ago) by Godie@lemmy.world to c/FirefoxCSS@fedia.io
 

Using Firefox-Developer-Edition Hi, I would like to know how to apply this code only when sidebar is expanded:

.tools-and-extensions[orientation="vertical"] {
    flex-direction: row !important;
}

I tried to use this before the previous code but didn't work: :root:has(sidebar-main[expanded])

I didn't be able to apply any style conditioning the sidebar expanded or not for any button inside .tools-and-extension, in the original code it seems to use :host but that didn't work, apparently.

[–] Godie@lemmy.world 1 points 4 months ago

I see, thanks for the answer. 🫱🏻‍🫲🏼

 

I would like to apply the next code only when using X11:

/* Remove unwanted margin of menupopup just in linux */
    
    @media (-moz-platform: linux) {
        #appMenu-popup {
            --panel-shadow-margin: 0px !important;
            --panel-padding-block: 0px !important;
        }
    }

this code when using Wayland makes the popup unaligned.

[–] Godie@lemmy.world 1 points 5 months ago

Thanks. 😄👍 💙

 

Hi, I want to change the extensions icons of sidebar-revamp but the image is in the html and I can't get it to work.

[–] Godie@lemmy.world 1 points 5 months ago

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;
    }
 

hi, in Firefox v.136 the sound button seems totally reworked and I can't get a right way to style that button, or maybe my knowledge is insignificant. I tried this way but works only for English language, I guess I should add an entry for each language ans that seems inefficient:

button[aria-label="Mute tab"] .button-background {
        /* my code */
}

In the firefox code they use ::part(button) and that don't works in userChrome.css:

.tab-audio-button {
  #tabbrowser-tabs:is([orient="vertical"][expanded], [orient="horizontal"]) &:not([pinned]):not([crashed]) {
    &[soundplaying]::part(button) {
   }
  }
}

There is a way to solve this or it is impossible?

 

Hi, I want to solve this behavior when scrolling in 'about:addons' page. I put a background-image in body using 'userChrome.css' and in 'userContent.css' I set transparency in some elements backgrounds, but when I scroll the #main element goes behind .sticky-container element, so here is my question: Can I make the #main and .sticky-container elements don't cross, I tried to set a margin, clip-path, etc but I couldn't make any progress to solve it.

 

hi, seem like Firefox removed [tabsintitlebar], I wonder if deleting it is the right way to solve it or that condition was replaced with another and its needed to put that one?
I'm using hide_tabs_toolbar_v2.css

 

hi, with the recent Firefox changes I wonder if this style navbar_tabs_oneliner_menu_buttons_on_right.css could be more simple or still will be necessary the other style of window controls window_control_placeholder_support.css

 

Tested in Firefox developer edition
Hi, I used this two files (window_control_placeholder_support.css + hide_tabs_toolbar.css) for tree-tabs but seems like they will need an update. The window controls only shows when press Alt and the menubar shows behind the urlbar.

view more: next ›