On Aug 14th 11 PM ET/Aug 15th 03:00 UTC, due to scheduled Firefox Account server maintenance, users may not be able to sign in or create a new subscription. This is expected to last approximately 30 minutes. Status updates can be found at https://status.vpn.mozilla.org or https://status.relay.firefox.com.

搜尋 Mozilla 技術支援網站

防止技術支援詐騙。我們絕對不會要求您撥打電話或發送簡訊,或是提供個人資訊。請用「回報濫用」功能回報可疑的行為。

Learn More

Firefox proton active tab indicator

  • 7 回覆
  • 1 有這個問題
  • 150 次檢視
  • 最近回覆由 user4084657

more options

I want to modify the current proton interface. Is there any css code which I can use to restore the active tab indicator similar to firefox 88 on the titlebar. The images show how it was in photon and how i want it in proton

I want to modify the current proton interface. Is there any css code which I can use to restore the active tab indicator similar to firefox 88 on the titlebar. The images show how it was in photon and how i want it in proton
附加的畫面擷圖

被選擇的解決方法

Here's one from r/FirefoxCSS that injects a line using the ::before pseudo-element which has a similar behavior to Photon. I have added some explanatory comments and modified the margins:

Note to other readers: This assumes you moved the container/context line to a different position.

/*** Emulate blue tab line from Photon 57-88 UI ***/

/* Set size and position of the bar relative to background */
.tab-background::before {
  content: "";
  display: block;
  height: 3px;
  margin: -1px 6px 0;
}
/* Set color for active tab */
.tabbrowser-tab[selected] .tab-background::before {
  background-color: #0a84ff;
}
/* Set color for other selected tabs */
.tabbrowser-tab[multiselected]:not([selected]) .tab-background::before {
  background-color: color-mix(in srgb, #0a84ff 66%, transparent);
}
/* Set color for hovering on non-active/non-selected tabs */
.tabbrowser-tab:not([selected], [multiselected]):hover .tab-background::before {
  background-color: color-mix(in srgb, currentColor 33%, transparent);
  transform: none;
}
/* [Optional] Animation when hovering non-active/non-selected tabs */
.tabbrowser-tab:not([selected], [multiselected]) .tab-background::before {
  transform: scaleX(.8);
  transition: transform 100ms linear;
}

Source: qaz69wsx comments on How do I put a thin border across the top of the active tab?

從原來的回覆中察看解決方案 👍 0

所有回覆 (7)

more options

In Firefox 91+ it is only possible to override/revert changes coming with the Proton design by using code in userChrome.css.

more options

The colored line at the top of a tab in the Proton UI indicates the container a tab is in (otherwise, the active tab is denoted just by the different appearance from background tabs). Using the unofficial, community supported userChrome.css workaround, you can move that Container line back to the problem to avoid confusion.

more options

I know it indicates the container in which the tab is. I just want to know if there is some code to display the active tab indicator above the tab. I have moved the container tabs to the bottom using css. The first image at the beginning of my question is just a representation of how it could look like.

由 user4084657 於 修改

more options

選擇的解決方法

Here's one from r/FirefoxCSS that injects a line using the ::before pseudo-element which has a similar behavior to Photon. I have added some explanatory comments and modified the margins:

Note to other readers: This assumes you moved the container/context line to a different position.

/*** Emulate blue tab line from Photon 57-88 UI ***/

/* Set size and position of the bar relative to background */
.tab-background::before {
  content: "";
  display: block;
  height: 3px;
  margin: -1px 6px 0;
}
/* Set color for active tab */
.tabbrowser-tab[selected] .tab-background::before {
  background-color: #0a84ff;
}
/* Set color for other selected tabs */
.tabbrowser-tab[multiselected]:not([selected]) .tab-background::before {
  background-color: color-mix(in srgb, #0a84ff 66%, transparent);
}
/* Set color for hovering on non-active/non-selected tabs */
.tabbrowser-tab:not([selected], [multiselected]):hover .tab-background::before {
  background-color: color-mix(in srgb, currentColor 33%, transparent);
  transform: none;
}
/* [Optional] Animation when hovering non-active/non-selected tabs */
.tabbrowser-tab:not([selected], [multiselected]) .tab-background::before {
  transform: scaleX(.8);
  transition: transform 100ms linear;
}

Source: qaz69wsx comments on How do I put a thin border across the top of the active tab?

由 jscher2000 - Support Volunteer 於 修改

more options

.tabbrowser-tab[usercontextid] .tab-context-line {

 margin: 2px 2px 0 !important;
 transform: translateY(var(--tab-min-height));

} .tab-background::before {

 content: "";
 display: block;
 height: 3px;
 margin: -4px 2px 0;

} .tabbrowser-tab[selected] .tab-background::before {

 background-color: #0a84ff;

} .tabbrowser-tab[multiselected]:not([selected]) .tab-background::before {

 background-color: color-mix(in srgb, #0a84ff 66%, transparent);

} .tabbrowser-tab:not([selected], [multiselected]) .tab-background::before {

 transform: scaleX(.8);
 transition: transform 100ms linear;

} .tabbrowser-tab:not([selected], [multiselected]):hover .tab-background::before {

 background-color: color-mix(in srgb, currentColor 33%, transparent);
 transform: none;

}


This works quite well except when I hover on the tab on the left of the active tab the line disappears.

more options

You can use <pre> before and </pre> after code blocks to prevent them from being interpreted as wikitext.

sagnikadhikary15 said

This works quite well except when I hover on the tab on the left of the active tab the line disappears.

Which line disappears? My variation on the code is working as expected for me, but I don't use the kind of tab separators you have.

more options

Oh sorry my problem some of my other css codes messed up this code. It is working perfectly fine now on a fresh install. Thanks.

由 user4084657 於 修改