Firefox Vertical Tabs Custom CSS

One of my biggest pain points for switching from Edge to Firefox was the latter's lack of vertical tabs. Thankfully, Firefox allows you to do pretty much anything you want with it. The below guide will allow you to apply my vertical tabs setup on your own Firefox installation.

Though I intend to maintain these CSS files if/when Mozilla breaks something, I cannot make any guarantees regarding support. These tweaks mainly exist to suit my needs and may not perfectly suit yours. Use at your own risk.

Instructions:

userChrome.css

Open Firefox and navigate to "about:config". Click "Accept the Risk and Continue".
In the search bar, enter "toolkit.legacyUserProfileCustomizations.stylesheets" and toggle the option to true.
Locate your Firefox profile folder (how-to).
Inside your profile folder, create a new folder titled "chrome" (all lowercase).
Download the userChrome.css file and copy it to your chrome folder.

Tree Style Tab

Install Tree Style Tab from the Firefox Add-ons store.
Download treestyletab.css.
Navigate to "about:addons" in Firefox, select "Extensions", and click Tree Style Tab. Open the options tab and expand the "Advanced" section.
At the bottom of this section, click "Load from File" and load treestyletab.css. If prompted to overwrite existing settings, allow it.
Restart Firefox to see changes.

Additional notes:

I've mostly tested these customizations on Windows 10, so I can't guarantee they'll look great on all desktop environments.
If the vertical tabs are ever missing, click the TreeStyleTab extension in your titlebar. You will need to allow the extension to run in private mode if you wish to use it there.
I highly recommend removing the extra padding on the left and right sides of the URL bar and disabling the bookmarks bar.
To revert back to the normal Firefox interface, disable or uninstall Tree Style Tab and delete the userChrome.css file from your Firefox profile.