After consideration and some prompting. I was advised to consolidate the community over to https://lemmy.world/c/[email protected]

So as of today, this community will be locked and it's advised to continue activities over on the new community. I'm also stepping down as moderator due to real life obligations that I have to deal with.

publicado de forma cruzada desde: https://lemm.ee/post/57406205

Besides is good that vertical tabs are now natively available on Firefox. I prefer the old sidebar along with my favorite vertical tabs extension. Is there a way to restore it?

Make firefox look like this?

like this: https://i.imgur.com/vu85Vtp.png

Previously I've used the "Decrease toolbar height" section from here, which stopped working correctly a few days ago so I messed around and ended up with:

toolbar#nav-bar {
  height: 26px !important;
}
.urlbar-input-container {
  height: 26px !important;
  margin-top: -4px !important;
  margin-bottom: 0px !important;
}
#urlbar-background {
  height: 20px !important;
  margin-top: -1px !important;
  margin-bottom: 0px !important;
}

But almost every day the urlbar moves up or down from where I set it and I have to change the values above accordingly.

edit: the changes seem to have stopped. I've updated the code with the currently-working values

EDIT: Fixed the dropdown by nuking line 15, still trying to solve the selection highlighting turning green again

My userChrome:

menupopup:not(.in-menulist) > menuitem, 
menupopup:not(.in-menulist) > menu {
  padding-block: 0px !important; /* reduce to 3px, 2px, 1px or 0px as needed */ 
  min-height: unset !important; /* v92.0 - for padding below 4px */
}
:root {
  --arrowpanel-menuitem-padding: 0px 0px !important;
}

/* Make urlbar appear more compact */
#urlbar[breakout]{
  margin-inline-start: 0px !important;
  width: 100% !important;
  left: 0 !important;
  top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important;
}
#urlbar[breakout]:not([open]){ bottom: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important; }
.urlbarView{ margin-inline: 0 !important; width: auto !important; }
.urlbarView-row{ padding: 0 2px !important; }
.urlbarView-row-inner{ padding-inline-start: 4px !important; }
#urlbar-background{ animation: none !important; }
#urlbar-input-container{ padding: 1px !important; height: 100% !important; }
#identity-icon{ margin-block: var(--urlbar-icon-padding) }
.urlbarView > .search-one-offs:not([hidden]){ padding-block: 0px !important; }


#nav-bar:-moz-lwtheme #urlbar ::-moz-selection,
#nav-bar:not(:-moz-lwtheme) #urlbar ::-moz-selection {
        background-color: #3040cf !important; /*it's green again; want to fix this too*/
    color: white !important;
}

/* Set blank page background-color */
/* Uses color from theme_colors if available */

#tabbrowser-tabpanels{
  background-color: var(--uc-light-bkgnd-color,rgb(0,0,0)) !important;
}

Hello friends, I am using custom css' on my Librewolf. Downloaded FF-ULTIMA and it looks cool. I have looked at its all .css files as stranger for css. As far as my view, there is no problem but can these css files cause any security or privacy vulnerability? Like, being injectable or the creator of theme can track us or not? It may seem a funny question but idk much about css language. Just wanted to asking. Am I safe with it?

Personally I'm pretty frustrated with the way it works. I've noticed all of the following , and at least some of these apply to dev tools too. I don't like the way Google controls the internet with Chrome, but at least its dev tools just work.

• Sometimes when I try to use the element picker tool it actually clicks the element instead of selecting it in the toolbox
• I can't change selectors in CSS files in the sidebar, I have to go the style editor (Chrome lets me do this)
• I can't easily copy HTML attributes, if I double click on an attribute, the text is selected but when I press CMD C, it copies the entire tag with all of its attributes.
• A lot of the time CSS properties I write just don't apply and isn't crossed out. Its like it just has a hard time doing that.

This is actually unrelated to the CSS lagging on my device, I also write CSS for Firefox's UI. It's not meant for 3rd party customization and the ability for customization is behind a configuration flag. With that in mind, Firefox's CSS just feels very dirty, like its very tricky to figure out how to best change this or that element because of how many moving parts there are between state changes (like :hover) and how variables interoperate. And in some places to make a single change you have to change multiple variables, like if you want to change the height of the URL bar row.

I've spent many hours on the CSS, and each time I revisit it, I find that I could've wrote this or that better, and I looked for variables that the UI uses, and wonder why I didn't find them the first time. I've been writing CSS on and off for 8 years now, I wonder if I'm just bad it since I've never done web dev full time, or it's actually a lot of work to write good CSS.

I customiced the home page with the usercontent.css but i would also like to add some javascript.

So I applied an updated version of Firefox-UI-fix for Firefox 120, and now my accent on selected tabs is gone.

For context, this is what it looks like now -

The image below is in private window mode, because for some reason it works over there. Focus on the line above the selected tab, with a blue accent line. This is how I want it to be -

Here are my chrome and user.js folders.

elements like the previous tab, next tab, and reload buttons? I've been using SVG images for them and I know you can either do that or embed the SVGs right in with a url(), but I wonder if anyone has found a workaround for using text, with or without psuedo-elements, like using content in a :before() element.

I'm using the Proton theme of TST, and I really want these X buttons to only appear on hover. I know that's possible: It's how the Xs function in the Sidebar theme of TST. However, I don't like the Sidebar theme otherwise.

Does anyone know how to change the TST Proton theme to make the X button only appear on hover?

Thank you!

Theoretically it should be possible to make child elements flow vertically instead of horizontally, by setting these properties on the parent: display: flex; flex-direction: column;. I tried that with a bunch of the tab elements and it didn't work. The problem with addons like TST is that they glitch out sometimes, and you have to wait for the tabs to load, it takes much longer on my M1 Mac once I have 100s of tabs open (don't judge me).

css: