Поиск в Поддержке

Избегайте мошенников, выдающих себя за службу поддержки. Мы никогда не попросим вас позвонить, отправить текстовое сообщение или поделиться личной информацией. Сообщайте о подозрительной активности, используя функцию «Пожаловаться».

Learn More

Firefox proton active tab indicator

  • 7 ответов
  • 1 имеет эту проблему
  • 26 просмотров
  • Последний ответ от sagnikadhikary15

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

Полезно?

Задать вопрос

Для ответа на сообщения вы должны войти в свою учётную запись. Пожалуйста, задайте новый вопрос, если у вас ещё нет учётной записи.