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.

top 4 comments
sorted by: hot top new old
[-] MrOtherGuy@lemmy.world 1 points 1 year ago

Since :host is unavailable in user style context, doing exactly this is probably impossible. But I wonder what you are actually trying to achieve? Moreover, under which condition does .tools-and-extensions ever have orientation=vertical attribute while sidebar-main is simultaneously expanded?

[-] Godie@lemmy.world 1 points 1 year ago

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.

[-] 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