Page 1 of 1
Changing tab border radius on Linux version of Pale Moon
Posted: 2021-11-28, 18:27
by UCyborg
Tabs on the Linux version have slightly rounded corners. I checked some videos on YouTube to verify it's not just on my end or some distro/DE specific thing.
The problem is that I'm unable to change roundedness in any way, eg. this CSS code...
Code: Select all
#tabbrowser-tabs > tab.tabbrowser-tab {
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
...doesn't do anything. I'd expect the rounded borders to be removed completely. On Windows, they're not rounded and increasing above properties' values makes them rounded.
I also tried border-radius property which i've set to 0px, adding !important, nothing. What am I missing? Are Linux users stuck with the corners as they are?
Re: Changing tab border radius on Linux version of Pale Moon
Posted: 2021-11-28, 18:31
by Goodydino
One thing you did not do was call the settings "!important". If you want to override a setting, you must do that.
Re: Changing tab border radius on Linux version of Pale Moon
Posted: 2021-11-28, 21:43
by UCyborg
I wrote I also tried adding !important and it didn't help. I omitted it in my post as in this case, Browser Toolbox confirms my settings are applied.
Re: Changing tab border radius on Linux version of Pale Moon
Posted: 2021-11-28, 22:51
by Moonchild
I think your selector is wrong.
tab.tabbrowser-tab doesn't exist afaik from memory.
Try setting it on the css classes:
Code: Select all
.tabbrowser-tab,
.tabs-newtab-button {
border-radius: <<whatever you want it to be>> !important;
}
Re: Changing tab border radius on Linux version of Pale Moon
Posted: 2021-11-28, 23:22
by Blacklab
I'm sure
Moonchild is right... his script above works correctly (
'border-radius: 0px' set)... and alters the 'New Tab' button too.
Two other suggestions if
no CSS scripts working
... both from old Reddit posts Re: 'Firefox CSS not working on Linux':
- "Got it working, seemed to be a permissions issue with the chrome folder. Had to give the owner read, write, and execute permissions. The code was fine it was the fact that no one had permissions to (do) anything with it."
- "I solved it! I had to copy everything from userChrome.css, delete the file, and then save it again... Hopefully someone will have the same issue in the future and see this post..."
Curiously, for me,
UCyborg's original script with "!important" added works on Windows 7... and both UCyborg's and Moonchild's scripts work without the added "!important" too!
Before - UCyborg's script (+ !important) disabled - Tabs have slightly rounded corners:
Before - script Disabled.jpg
Code: Select all
#tabbrowser-tabs > tab.tabbrowser-tab {
border-top-left-radius: 0px;
border-top-right-radius: 0px !important
}
After - UCyborg's script (+ !important) enabled - Tabs now have squared-off corners (but New Tab button still has rounded corners):
After - script Enabled.jpg
All scripts input using
Lootyhoof's excellent
Stylem Add-on.
If curious... all 4 script versions copied from Stylem (Note: Script 4. is active... scripts 1, 2, & 3. are all inactived):
Re: Changing tab border radius on Linux version of Pale Moon
Posted: 2021-11-29, 07:40
by UCyborg
I will try Moonchild's suggestion later when I get home. For the context, I'm adapting ColorfulTabs extension for Pale Moon / Basilisk and similar forks. The selector I posted; this is how version 31.2.3 changes the border radius. Works great on Windows on both Pale Moon and Basilisk, but no luck on Linux, at least on Pale Moon, haven't got around setting up Basilisk on Linux yet.
@Blacklab
I don't think I have permission issue, I'm testing with Stylem with all tab altering extensions disabled. When using the #tabbrowser-tabs > tab.tabbrowser-tab selector, I can say display: none and tabs disappear on Linux as well.
Re: Changing tab border radius on Linux version of Pale Moon
Posted: 2021-11-29, 14:32
by Blacklab
@ UCyborg: Can't see any reason why Linux alone would not allow '
border-radius: 0, 0px, 0em' etc. to style squared-off corners.
Thought you might enjoy this CSS-Tricks article on scripting corners (this is the 2011 version from WayBack Machine):
https://web.archive.org/web/20121004132 ... er-radius/
For comparison and/or interest latest 2021 update of same article:
https://css-tricks.com/almanac/properti ... er-radius/
Further useful 'radius related' links at bottom of both articles... e.g. noting -moz- prefix no longer required for border-radius.
Re: Changing tab border radius on Linux version of Pale Moon
Posted: 2021-11-29, 15:49
by New Tobin Paradigm
Don't we already have a fork for ColorfulTabs?
Re: Changing tab border radius on Linux version of Pale Moon
Posted: 2021-11-29, 19:11
by UCyborg
So there is a noticeable difference when setting higher border-radius. It's like there are two borders, the inner invisible one that can only be detected by the background color getting "rounded in" (sorry, I don't know how to put these into words that make sense) and the outer one that appears fixed (but should go along).
Zoom the picture below in and you'll see green color missing near corners and taking round shape inside, that's border-radius in action (I set it to 24px). The outer part, the black outline outside stayed unchanged. So even though tabs are supposed to be square by default, they aren't and making them rounder doesn't appear correctly neither due to unchanging outer border.
Is this a bug or should this be approached differently?
Re: Changing tab border radius on Linux version of Pale Moon
Posted: 2021-11-29, 21:05
by Moonchild
I suggest you have a close look at the source code for the browser, specifically what's in palemoon/themes/linux/browser.css to see how tab styling is constructed. It does not use a standard border, and you'll have to add overrides accordingly if you want to tweak it.
Also keep in mind that any rounded corners on the "inside" of a border will have a slightly smaller radius than the border itself if you want to have a perfect fill.