5
[solved] Apply code when sidebar is expanded (lemmy.world)
submitted 1 year ago* (last edited 1 year ago) by Godie@lemmy.world to c/FirefoxCSS@fedia.io
4 comments fedilink hide all child comments

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.

you are viewing a single comment's thread
view the rest of the comments
[-] MrOtherGuy@lemmy.world 2 points 1 year ago

I see. In that case you can achieve what you want - however, it really isn't enough to just apply different flex-direction because all the buttons also have different styling. So you'll end up with something like this:

sidebar-main{
  --uc-flex-direction: column;
}
sidebar-main[expanded]{
  --uc-flex-direction: row;
  --uc-buttonbox-padding-inline: var(--space-medium);
  --uc-sidebar-button-outer-padding: 0;
}
.tools-and-extensions{
  flex-direction: var(--uc-flex-direction) !important;
  justify-content: start !important;
  padding-inline-start: var(--uc-buttonbox-padding-inline,0) !important;
}
.tools-and-extensions > moz-button{
  width: unset !important;
  --button-outer-padding-inline: var(--uc-sidebar-button-outer-padding,var(--space-medium)) !important;
  --button-outer-padding-block-start: var(--space-xxsmall) !important;
}
button > .button-background{
  width: var(--button-size-icon) !important;
}
[-] Godie@lemmy.world 1 points 1 year ago

Thank you, I will add it immediately :)

this post was submitted on 29 Mar 2025
5 points (100.0% liked)

Firefox Customs

0 readers
1 users here now

Chat with us!

Post your unsupported Firefox customizations here!

From the makers of r/FirefoxCSS

Links

Related

Rules

  1. Posts must have flair!
  2. Posts cannot be memes/shitposts. They should be about Firefox customization with CSS.
  3. Please be civil. Bear in mind that many users come here for help and would be turned off by insults and rudeness.
  4. 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.
  5. Do NOT use url-shorteners or link to compressed downloads (such as zip or rar) when sharing code.

founded 3 years ago
MODERATORS
yoasif@fedia.io
MrOtherGuy@lemmy.world