Some firefox custom themes cannot adapt to Rounded browser corners and cannot cleearly display in the top-right

[Arcticn]

Description

First of all, thanks for your amazing work! Loves it so much!

Example themes to reproduce:

• one example
• another one

The problems are:

1. Some firefox custom themes cannot adapt to Rounded browser corners. Is it possible to automatically fill this blank?

• like this, cannot correctly fill the color at four corners

2. Those themes also cannot display well in the top-right due to dark background. In native Firefox, this area was highlighted in those themes
   • Origin firefox would display this:

• edge ver display this, makes it unable to see:

Configuration

• Firefox Version: 128.0
• OS: Windows 11
• Tweaks enabled:
  • uc.tweak.force-tab-colour
  • uc.tweak.rounded-corners
  • uc.tweak.show-tab-close-button-on-hover
  • uc.tweak.smaller-context-menu-text

[Robotino04]

I have a solution for the initial problem with the rounded corners:

diff --git a/chrome/global/browser.css b/chrome/global/browser.css
index 22bbd1a..f3a4f89 100644
--- a/chrome/global/browser.css
+++ b/chrome/global/browser.css
@@ -112,6 +112,9 @@
     background-color: var(--tabpanel-background-color) !important;
     position: relative !important;

+    clip-path: inset(0% 0% 0% 0% round calc(var(--uc-tweak-rounded-corners-radius) - 1px));
+    overflow: hidden;
+
     /* Use pseudo element overlay to simulate rounded corners, similar to the
      * tab corners, fixes bug with backdrop-filter. */
     &::after {

But this doesn't make the themes appear there instead, it'll just make it transparent. A somewhat hacky way to deal with this is the following:

diff --git a/chrome/global/browser.css b/chrome/global/browser.css
index 7ac9b64..22bbd1a 100644
--- a/chrome/global/browser.css
+++ b/chrome/global/browser.css
@@ -82,6 +82,7 @@
   /* Remove separator between toolbars and the browser window. */
   #navigator-toolbox {
     border-bottom: none !important;
+    height: 100%;
   }

   /* Disable rounded corners in fullscreen, only if the toolbar is hidden. */
@@ -95,6 +96,14 @@
   /*
     MARK: Rc Browser
   */
+  #browser {
+    position: absolute;
+    /* 70px is hardcoded to my setup, may be different for other OS/FF version/etc */
+    height: calc(100% - 70px);
+    width: 100%;
+    bottom: 0;
+  }
+
   #tabbrowser-tabbox .browserStack {
     margin-inline: var(--uc-tweak-rounded-corners-padding) !important;
     margin-block-end: var(--uc-tweak-rounded-corners-padding) !important;

This basically stretches the toolbox container to fill the entire window and places the browser on top of it. This isn't a proper solution because the height of the toolbar has to be known and hardcoded though.

Also this will probably break any theme that uses relative positions and won't look great for themes that use images (like your first one), because the images just end somewhere.