Firefox Customs

4 readers

2 users here now

Chat with us!

Post your unsupported Firefox customizations here!

From the makers of r/FirefoxCSS

Links

Related

Firefox

Rules

Posts must have flair!
Posts cannot be memes/shitposts. They should be about Firefox customization with CSS.
Please be civil. Bear in mind that many users come here for help and would be turned off by insults and rudeness.
When posting large amount of code use a service dedicated to hosting text snippets, such as pastebin, hastebin, github gist or equivalent. Relatively short snippets can be wrapped in code-block for inline viewing.
Do NOT use url-shorteners or link to compressed downloads (such as zip or rar) when sharing code.

founded 2 years ago

MODERATORS

[email protected]

[solved] How to remove close button when the tab size is smaller (lemmy.world)

submitted 1 month ago* (last edited 1 month ago) by [email protected] to c/[email protected]

3 comments fedilink hide all child comments

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?

you are viewing a single comment's thread
view the rest of the comments

[–] [email protected] 1 points 1 month ago (2 children)

You can actually use css container queries for this. Would go like this:

#tabbrowser-tabs[orient="horizontal"] .tabbrowser-tab[fadein]:not([pinned]){
  container-name: tabtab;
  container-type: inline-size;
}
@container tabtab (width < 50px){
  .tab-close-button{
    display: none
  }
}

[–] [email protected] 1 points 1 month ago (1 children)

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

[–] [email protected] 2 points 1 month ago

Yeah, so I haven't actually come across very many situations where containers or container queries are useful (in the context of Firefox UI) but in this specific case they actually solve the issue perfectly.