Tìm kiếm hỗ trợ

Tránh các lừa đảo về hỗ trợ. Chúng tôi sẽ không bao giờ yêu cầu bạn gọi hoặc nhắn tin đến số điện thoại hoặc chia sẻ thông tin cá nhân. Vui lòng báo cáo hoạt động đáng ngờ bằng cách sử dụng tùy chọn "Báo cáo lạm dụng".

Learn More

Firefox proton active tab indicator

  • 7 trả lời
  • 1 gặp vấn đề này
  • 15 lượt xem
  • Trả lời mới nhất được viết bởi 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

Đính kèm ảnh chụp màn hình

Giải pháp được chọn

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?

Đọc câu trả lời này trong ngữ cảnh 👍 0

Tất cả các câu trả lời (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.

Hữu ích?

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.

Hữu ích?

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.

Được chỉnh sửa bởi sagnikadhikary15 vào

Hữu ích?

more options

Giải pháp được chọn

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?

Được chỉnh sửa bởi jscher2000 vào

Hữu ích?

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.

Hữu ích?

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.

Hữu ích?

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.

Được chỉnh sửa bởi sagnikadhikary15 vào

Hữu ích?

Đặt một câu hỏi

Bạn phải đăng nhập vào tài khoản của bạn để trả lời bài viết. Vui lòng bắt đầu một câu hỏi mới, nếu bạn chưa có tài khoản.