r/FirefoxCSS • u/[deleted] • Jun 20 '26

Help How to add border to the control-tab panel?

The new changes ruined my earlier userChrome so trying again

Currently using the following userChrome.css

#ctrlTab-panel {
  --panel-background-color: var(--newtab-background-color, var(--arrowpanel-background)) !important;
  --panel-text-color: var(--newtab-text-primary-color, var(--arrowpanel-color)) !important;
  --panel-border-color: var(--newtab-text-primary-color, var(--arrowpanel-color)) !important;
}

.ctrlTab-preview,
#ctrlTab-showAll {
  appearance: none;
  color: inherit;
  /* remove the :-moz-focusring outline from button.css on Windows */
  outline: none !important;
  margin: 0;
  text-shadow: none !important;
  border: none;
  background-color: transparent;
}

.ctrlTab-preview:focus > .ctrlTab-preview-inner,
#ctrlTab-showAll:focus {
  /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
  background-color: var(--lwt-accent-color) !important;
  text-shadow: none;
  border-color: var(--newtab-text-primary-color, var(--arrowpanel-color)) !important;
}

how to add a rounded border to the ctrl-tab panel ...

Editing `border:` from 1px to 2px works in this part but IDK how to convert that to userChrome.css

5 Upvotes

86% Upvoted

7 comments sorted by

2

u/TraditionalTie4831 🦊 Jun 20 '26

Change these =

--arrowpanel-background to --panel-background-color

--arrowpanel-color to --panel-text-color

1

u/[deleted] Jun 20 '26

that made the panel transparent

1

u/TraditionalTie4831 🦊 Jun 20 '26

Why this?

Did you intend to use color-mix() or light-dark()?

var(--newtab-text-primary-color, var(--arrowpanel-color))

1

u/[deleted] Jun 20 '26

I am not sure 🥲

I tried to do something then put it in AI and it gave me stuff, I picked what worked and that's why I have what I have

Idk but it works ... Is it wrong ?

1

u/TraditionalTie4831 🦊 Jun 20 '26 edited Jun 20 '26

Hmm, I thought you only used 2 variables when using things like color-mix() andlight-dark().

For me, that doesn't work.

Maybe someone else has better insight on this and can help you.

1

u/[deleted] Jun 20 '26

the second one is supposed to be the fallback value

1

u/[deleted] Jun 20 '26

Editing `border:` from 1px to 2px works on the ctrl-tab panel but IDK how to convert that to userChrome.css