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] Apply code when sidebar is expanded (lemmy.world)

submitted 3 months ago* (last edited 3 months ago) by [email protected] to c/[email protected]

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

[–] [email protected] 1 points 3 months ago (3 children)

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?

[–] [email protected] 1 points 3 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.

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

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

[–] [email protected] 1 points 3 months ago

Thank you, I will add it immediately :)