Changing tab border radius on Linux version of Pale Moon

Add-ons for Pale Moon and other UXP Applications
General discussion, compatibility, contributed extensions, themes, plugins, and more.

Moderators: Lootyhoof, FranklinDM

User avatar
UCyborg
Moonbather
Moonbather
Posts: 72
Joined: 2019-01-10, 09:37

Changing tab border radius on Linux version of Pale Moon

Unread post by UCyborg » 2021-11-28, 18:27

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?
Last edited by UCyborg on 2021-11-28, 21:44, edited 1 time in total.

Goodydino
Astronaut
Astronaut
Posts: 686
Joined: 2017-10-10, 21:20

Re: Changing tab border radius on Linux version of Pale Moon

Unread post by Goodydino » 2021-11-28, 18:31

One thing you did not do was call the settings "!important". If you want to override a setting, you must do that.

User avatar
UCyborg
Moonbather
Moonbather
Posts: 72
Joined: 2019-01-10, 09:37

Re: Changing tab border radius on Linux version of Pale Moon

Unread post by UCyborg » 2021-11-28, 21:43

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.

User avatar
Moonchild
Pale Moon guru
Pale Moon guru
Posts: 31287
Joined: 2011-08-28, 17:27
Location: Tranås, SE
Contact:

Re: Changing tab border radius on Linux version of Pale Moon

Unread post by Moonchild » 2021-11-28, 22:51

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;
}
"Remember, only you can prevent Earth's destruction by spelling Pale Moon with a space." -- Athenian200
Image

Blacklab
Keeps coming back
Keeps coming back
Posts: 806
Joined: 2012-06-08, 12:14
Location: Scotland UK (Maybe)

Re: Changing tab border radius on Linux version of Pale Moon

Unread post by Blacklab » 2021-11-28, 23:22

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! :think:

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. :thumbup:
If curious... all 4 script versions copied from Stylem (Note: Script 4. is active... scripts 1, 2, & 3. are all inactived):

Code: Select all


/* --- Script Name: Changing tab border radius on Linux version of Pale Moon --- */
/* --- From: https://forum.palemoon.org/viewtopic.php?f=46&t=27624&p=221969#p221969 --- */

/* --- 1. UCyborg's original script --- */
/*
#tabbrowser-tabs > tab.tabbrowser-tab {
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}
*/

/* --- 2. UCyborg's original script with "!important" added --- */
/*
#tabbrowser-tabs > tab.tabbrowser-tab {
  border-top-left-radius: 0px;
  border-top-right-radius: 0px !important 
}
*/

/* --- 3. Moonchold's script as posted ('border-radius: 0px' set) --- */
/*
.tabbrowser-tab,
.tabs-newtab-button {
  border-radius: 0px !important;
}
*/

/* --- 4. Moonchild's script without "!important" ('border-radius: 0px;' set) --- */

.tabbrowser-tab,
.tabs-newtab-button {
  border-radius: 0px;
}


User avatar
UCyborg
Moonbather
Moonbather
Posts: 72
Joined: 2019-01-10, 09:37

Re: Changing tab border radius on Linux version of Pale Moon

Unread post by UCyborg » 2021-11-29, 07:40

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.

Blacklab
Keeps coming back
Keeps coming back
Posts: 806
Joined: 2012-06-08, 12:14
Location: Scotland UK (Maybe)

Re: Changing tab border radius on Linux version of Pale Moon

Unread post by Blacklab » 2021-11-29, 14:32

@ 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.

User avatar
New Tobin Paradigm
Knows the dark side
Knows the dark side
Posts: 10670
Joined: 2012-10-09, 19:37
Location: Sector 001

Re: Changing tab border radius on Linux version of Pale Moon

Unread post by New Tobin Paradigm » 2021-11-29, 15:49

Don't we already have a fork for ColorfulTabs?
He tasks me. He tasks me and I shall have him.
I'll chase him round the moons of Nibia and round the Antares maelstrom and round perdition's flames before I give him up.. Prepare to alter course.

Image
binaryoutcast.compaypal.me/mattatobinthereisonlyxul.org

User avatar
UCyborg
Moonbather
Moonbather
Posts: 72
Joined: 2019-01-10, 09:37

Re: Changing tab border radius on Linux version of Pale Moon

Unread post by UCyborg » 2021-11-29, 19:11

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.

Image

Is this a bug or should this be approached differently?

User avatar
Moonchild
Pale Moon guru
Pale Moon guru
Posts: 31287
Joined: 2011-08-28, 17:27
Location: Tranås, SE
Contact:

Re: Changing tab border radius on Linux version of Pale Moon

Unread post by Moonchild » 2021-11-29, 21:05

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.
"Remember, only you can prevent Earth's destruction by spelling Pale Moon with a space." -- Athenian200
Image

Post Reply