Firefox CSS
Pushing the limits of the Firefox Browser through the use of CSS.
#join #firefoxcss:mozilla.org
Post your Firefox UI customizations here!
Rules (enforced)
-
Posts must have flair!
-
Follow Lemmy.World rules
-
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.
Guidelines (not enforced)
Consider adding the following info to help people try your tweaks:
-
Screenshots should have code in comments.
-
Include Firefox version
-
When asking for help you should share your custom style to help others understand what you are doing. This is increasingly important the more custom rules you have.
-
List any other addons that may be changing the UI
-
If a custom wallpaper is used, include a link to the original.
-
If someone's comment solves you problem, reply to the comment to let them know, and change your post flair to solved.
Wiki
Find Helpful Knowledge and answers to common issues in /c/FirefoxCSS wiki.
Links
Lemmy Communities
Websites
view the rest of the comments
It's not super tricky to just make tabs flow vertically. This can bee done pretty easily
But behavior is where things start to fall apart. For starters, tabs can't be dragged to reorder them (well they can, it just doesn't work). And you can't do any kind of tree like layout so it's just a flat vertical list.
If Vertical tabs is your thing, extensions just do it much better.
Oh shit, where did u find that photo? Could I see the CSS so I could try to figure it out?
Sure, I'll link it to you later when I get home. It's really just a handful of lines of CSS.
But I suppose the main issue why you haven't got flex-direction to work is because the scrollbox has
orient="horizontal"attribute and elements matching that are styled to have flex-direction horizontal in agent stylesheet with important tag. You cannot override that with userChrome. Practically this means that you cannot use standard flexbox display model for that scrollbox. Instead, I useddisplay: -webkit-boxwith its equivalent properties to make it verticalSo, like here is a bit more useful version. It's no more "just a handful of lines" because I needed to add a few workarounds for some obvious issues. And it surely is still not great - probably the most annoying issue is that if it ever happens that Firefox thinks that the tabs would overflow then you will irrecoverably lose the ability to scroll the those vertical tabs using mouse wheel - until you restart Firefox. And also as I already mentioned you can't reorder tabs. And probably a whole bunch of other issues as well.