搜尋 Mozilla 技術支援網站

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

Learn More

Firefox proton active tab indicator

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

附加的畫面擷圖

被選擇的解決方法

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.

由 sagnikadhikary15 於 修改

有幫助嗎?

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 於 修改

有幫助嗎?

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.

由 sagnikadhikary15 於 修改

有幫助嗎?

問個問題

如果您還沒有帳號,您必須先 登入您的帳號 來回覆文章。請 開始一個新問題