mirror of
https://github.com/black7375/Firefox-UI-Fix.git
synced 2025-12-06 02:30:54 -08:00
Merge pull request #1094 from irhdevel/supernova_contextline_fix
This commit is contained in:
MS_Y
GitHub
commit
48455a76b5
4 changed files with 169 additions and 133 deletions
142
css/leptonChrome.css
generated
142
css/leptonChrome.css
generated
|
|
@ -7615,73 +7615,66 @@
|
|||
margin: unset !important;
|
||||
}
|
||||
}
|
||||
/*= Selected Tab - Supernova like contextline ===================================*/
|
||||
@media not -moz-pref("userChrome.tab.photon_like_contextline") {
|
||||
@media -moz-pref("userChrome.tab.supernova_like_contextline") {
|
||||
.tab-context-line {
|
||||
/* context line styles */
|
||||
tabs tab.tabbrowser-tab > .tab-stack > .tab-background > .tab-context-line {
|
||||
display: inline-flex !important;
|
||||
display: -moz-inline-box !important;
|
||||
}
|
||||
tabs tab.tabbrowser-tab > .tab-stack > .tab-background > .tab-context-line::before {
|
||||
content: "";
|
||||
height: 1px !important;
|
||||
border-radius: 9999px !important;
|
||||
transform: translateY(5px);
|
||||
margin-top: -1px !important;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
width: 100%;
|
||||
}
|
||||
/* Override container tab style */
|
||||
/* Override container-tab style */
|
||||
tabs tab.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
|
||||
margin-top: 3px !important;
|
||||
margin-left: 5px !important;
|
||||
margin-right: 5px !important;
|
||||
}
|
||||
tab.tabbrowser-tab[usercontextid]:not([selected="true"], [multiselected])
|
||||
> .tab-stack
|
||||
> .tab-background
|
||||
> .tab-context-line {
|
||||
opacity: 0;
|
||||
transition: all 0.2s cubic-bezier(0, 0.9, 0.15, 1) !important;
|
||||
margin: unset !important;
|
||||
}
|
||||
/* selected tab style */
|
||||
:root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"]),
|
||||
:root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"] .tab-context-line,
|
||||
:root[lwtheme-mozlightdark][lwthemetextcolor="bright"],
|
||||
:root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] .tab-context-line {
|
||||
--tab-line-color: #45a1ff;
|
||||
}
|
||||
.tabbrowser-tab:is([selected], [multiselected]) .tab-context-line {
|
||||
background-color: var(--tab-line-color, #45a1ff) !important;
|
||||
.tabbrowser-tab:is([selected], [multiselected]) .tab-context-line::before {
|
||||
background-color: var(--tab-line-color, var(--lwt-tab-line-color, #45a1ff)) !important;
|
||||
}
|
||||
/* Set the active effect */
|
||||
tabs tab.tabbrowser-tab[usercontextid]:active > .tab-stack > .tab-background > .tab-context-line {
|
||||
margin-left: 6px !important;
|
||||
margin-right: 6px !important;
|
||||
}
|
||||
.tabbrowser-tab:active > .tab-stack > .tab-background > .tab-context-line {
|
||||
background: #217ddb !important;
|
||||
.tabbrowser-tab:active > .tab-stack > .tab-background > .tab-context-line::before {
|
||||
filter: brightness(70%);
|
||||
margin-left: 6px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
/* Set the hover effect */
|
||||
.tabbrowser-tab:hover:not([selected="true"], [multiselected]) > .tab-stack > .tab-background > .tab-context-line {
|
||||
background-color: rgba(0, 0, 0, 0.2) !important;
|
||||
.tabbrowser-tab:hover:not([selected="true"], [multiselected])
|
||||
> .tab-stack
|
||||
> .tab-background
|
||||
> .tab-context-line::before {
|
||||
background-color: rgba(0, 0, 0, 0.4) !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
#TabsToolbar[brighttext]
|
||||
.tabbrowser-tab:hover:not([selected="true"], [multiselected])
|
||||
> .tab-stack
|
||||
> .tab-background
|
||||
> .tab-context-line {
|
||||
background-color: rgba(255, 255, 255, 0.3137254902) !important;
|
||||
> .tab-context-line::before {
|
||||
background-color: rgba(255, 255, 255, 0.4) !important;
|
||||
}
|
||||
/* Animation */
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.tabbrowser-tab:hover:not([selected="true"], [multiselected]) > .tab-stack > .tab-background > .tab-context-line {
|
||||
animation: toWide 0.2s cubic-bezier(0, 0.9, 0.15, 1);
|
||||
}
|
||||
/* Animation for container tab can't have width change... */
|
||||
tab.tabbrowser-tab[usercontextid]:hover:not([selected="true"], [multiselected])
|
||||
.tabbrowser-tab:hover:not([selected="true"], [multiselected])
|
||||
> .tab-stack
|
||||
> .tab-background
|
||||
> .tab-context-line {
|
||||
opacity: 1;
|
||||
> .tab-context-line::before {
|
||||
animation: toWide 0.2s cubic-bezier(0, 0.9, 0.15, 1);
|
||||
}
|
||||
}
|
||||
/* Animation for hover effect */
|
||||
|
|
@ -7724,6 +7717,23 @@
|
|||
> .tab-background {
|
||||
box-shadow: 0 0 1px var(--tabs-border-color), 0 0 4px rgba(128, 128, 142, 0.5) !important; /* Original: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)), 0 0 4px rgba(128,128,142,0.5) */
|
||||
}
|
||||
@media -moz-pref("userChrome.tab.contextline_blue_accent") {
|
||||
#tabbrowser-tabs .tab-context-line {
|
||||
--tab-line-color: #45a1ff !important;
|
||||
}
|
||||
}
|
||||
@media not -moz-pref("userChrome.tab.contextline_blue_accent") {
|
||||
@media (-moz-gtk-csd-available) {
|
||||
:root:is(:not([lwtheme]), :not(:-moz-lwtheme)) #tabbrowser-tabs .tab-context-line {
|
||||
--tab-line-color: AccentColor !important; /* -moz-accent-color */
|
||||
}
|
||||
@media -moz-pref("userChrome.compatibility.accent_color") {
|
||||
:root:is(:not([lwtheme]), :not(:-moz-lwtheme)) #tabbrowser-tabs .tab-context-line {
|
||||
--tab-line-color: Highlight !important; /* -moz-accent-color */
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/*= Unselected Tab - Divide line =============================================*/
|
||||
|
|
@ -22453,60 +22463,57 @@
|
|||
margin: unset !important;
|
||||
}
|
||||
}
|
||||
/*= Selected Tab - Supernova like contextline ===================================*/
|
||||
@media (not (-moz-bool-pref: "userChrome.tab.photon_like_contextline")) and (-moz-bool-pref: "userChrome.tab.supernova_like_contextline") {
|
||||
.tab-context-line {
|
||||
/* context line styles */
|
||||
tabs tab.tabbrowser-tab > .tab-stack > .tab-background > .tab-context-line {
|
||||
display: inline-flex !important;
|
||||
display: -moz-inline-box !important;
|
||||
}
|
||||
tabs tab.tabbrowser-tab > .tab-stack > .tab-background > .tab-context-line::before {
|
||||
content: "";
|
||||
height: 1px !important;
|
||||
border-radius: 9999px !important;
|
||||
transform: translateY(5px);
|
||||
margin-top: -1px !important;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
width: 100%;
|
||||
}
|
||||
/* Override container tab style */
|
||||
/* Override container-tab style */
|
||||
tabs tab.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
|
||||
margin-top: 3px !important;
|
||||
margin-left: 5px !important;
|
||||
margin-right: 5px !important;
|
||||
}
|
||||
tab.tabbrowser-tab[usercontextid]:not([selected="true"], [multiselected])
|
||||
> .tab-stack
|
||||
> .tab-background
|
||||
> .tab-context-line {
|
||||
opacity: 0;
|
||||
transition: all 0.2s cubic-bezier(0, 0.9, 0.15, 1) !important;
|
||||
margin: unset !important;
|
||||
}
|
||||
/* selected tab style */
|
||||
:root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"]),
|
||||
:root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"] .tab-context-line,
|
||||
:root[lwtheme-mozlightdark][lwthemetextcolor="bright"],
|
||||
:root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] .tab-context-line {
|
||||
--tab-line-color: #45a1ff;
|
||||
}
|
||||
.tabbrowser-tab:is([selected], [multiselected]) .tab-context-line {
|
||||
background-color: var(--tab-line-color, #45a1ff) !important;
|
||||
.tabbrowser-tab:is([selected], [multiselected]) .tab-context-line::before {
|
||||
background-color: var(--tab-line-color, var(--lwt-tab-line-color, #45a1ff)) !important;
|
||||
}
|
||||
/* Set the active effect */
|
||||
tabs tab.tabbrowser-tab[usercontextid]:active > .tab-stack > .tab-background > .tab-context-line {
|
||||
margin-left: 6px !important;
|
||||
margin-right: 6px !important;
|
||||
}
|
||||
.tabbrowser-tab:active > .tab-stack > .tab-background > .tab-context-line {
|
||||
background: #217ddb !important;
|
||||
.tabbrowser-tab:active > .tab-stack > .tab-background > .tab-context-line::before {
|
||||
filter: brightness(70%);
|
||||
margin-left: 6px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
/* Set the hover effect */
|
||||
.tabbrowser-tab:hover:not([selected="true"], [multiselected]) > .tab-stack > .tab-background > .tab-context-line {
|
||||
background-color: rgba(0, 0, 0, 0.2) !important;
|
||||
.tabbrowser-tab:hover:not([selected="true"], [multiselected])
|
||||
> .tab-stack
|
||||
> .tab-background
|
||||
> .tab-context-line::before {
|
||||
background-color: rgba(0, 0, 0, 0.4) !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
#TabsToolbar[brighttext]
|
||||
.tabbrowser-tab:hover:not([selected="true"], [multiselected])
|
||||
> .tab-stack
|
||||
> .tab-background
|
||||
> .tab-context-line {
|
||||
background-color: rgba(255, 255, 255, 0.3137254902) !important;
|
||||
> .tab-context-line::before {
|
||||
background-color: rgba(255, 255, 255, 0.4) !important;
|
||||
}
|
||||
/* Animation */
|
||||
/* Animation for hover effect */
|
||||
|
|
@ -22515,15 +22522,11 @@
|
|||
/* Remove side's background color border */
|
||||
}
|
||||
@media (not (-moz-bool-pref: "userChrome.tab.photon_like_contextline")) and (-moz-bool-pref: "userChrome.tab.supernova_like_contextline") and (prefers-reduced-motion: no-preference) {
|
||||
.tabbrowser-tab:hover:not([selected="true"], [multiselected]) > .tab-stack > .tab-background > .tab-context-line {
|
||||
animation: toWide 0.2s cubic-bezier(0, 0.9, 0.15, 1);
|
||||
}
|
||||
/* Animation for container tab can't have width change... */
|
||||
tab.tabbrowser-tab[usercontextid]:hover:not([selected="true"], [multiselected])
|
||||
.tabbrowser-tab:hover:not([selected="true"], [multiselected])
|
||||
> .tab-stack
|
||||
> .tab-background
|
||||
> .tab-context-line {
|
||||
opacity: 1;
|
||||
> .tab-context-line::before {
|
||||
animation: toWide 0.2s cubic-bezier(0, 0.9, 0.15, 1);
|
||||
}
|
||||
}
|
||||
@media (not (-moz-bool-pref: "userChrome.tab.photon_like_contextline")) and (-moz-bool-pref: "userChrome.tab.supernova_like_contextline") {
|
||||
|
|
@ -22572,6 +22575,21 @@
|
|||
box-shadow: 0 0 1px var(--tabs-border-color), 0 0 4px rgba(128, 128, 142, 0.5) !important; /* Original: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)), 0 0 4px rgba(128,128,142,0.5) */
|
||||
}
|
||||
}
|
||||
@media (not (-moz-bool-pref: "userChrome.tab.photon_like_contextline")) and (-moz-bool-pref: "userChrome.tab.supernova_like_contextline") and (-moz-bool-pref: "userChrome.tab.contextline_blue_accent") {
|
||||
#tabbrowser-tabs .tab-context-line {
|
||||
--tab-line-color: #45a1ff !important;
|
||||
}
|
||||
}
|
||||
@media (not (-moz-bool-pref: "userChrome.tab.photon_like_contextline")) and (-moz-bool-pref: "userChrome.tab.supernova_like_contextline") and (not (-moz-bool-pref: "userChrome.tab.contextline_blue_accent")) and (-moz-gtk-csd-available) {
|
||||
:root:is(:not([lwtheme]), :not(:-moz-lwtheme)) #tabbrowser-tabs .tab-context-line {
|
||||
--tab-line-color: AccentColor !important; /* -moz-accent-color */
|
||||
}
|
||||
}
|
||||
@media (not (-moz-bool-pref: "userChrome.tab.photon_like_contextline")) and (-moz-bool-pref: "userChrome.tab.supernova_like_contextline") and (not (-moz-bool-pref: "userChrome.tab.contextline_blue_accent")) and (-moz-gtk-csd-available) and (-moz-bool-pref: "userChrome.compatibility.accent_color") {
|
||||
:root:is(:not([lwtheme]), :not(:-moz-lwtheme)) #tabbrowser-tabs .tab-context-line {
|
||||
--tab-line-color: Highlight !important; /* -moz-accent-color */
|
||||
}
|
||||
}
|
||||
/*= Unselected Tab - Divide line =============================================*/
|
||||
/*= Unselected Tab - Dynamic Separator =======================================*/
|
||||
@media (-moz-bool-pref: "userChrome.tab.dynamic_separator") {
|
||||
|
|
|
|||
72
css/leptonChromeESR.css
generated
72
css/leptonChromeESR.css
generated
|
|
@ -8057,73 +8057,66 @@
|
|||
margin: unset !important;
|
||||
}
|
||||
}
|
||||
/*= Selected Tab - Supernova like contextline ===================================*/
|
||||
@supports not -moz-bool-pref("userChrome.tab.photon_like_contextline") {
|
||||
@supports -moz-bool-pref("userChrome.tab.supernova_like_contextline") {
|
||||
.tab-context-line {
|
||||
/* context line styles */
|
||||
tabs tab.tabbrowser-tab > .tab-stack > .tab-background > .tab-context-line {
|
||||
display: inline-flex !important;
|
||||
display: -moz-inline-box !important;
|
||||
}
|
||||
tabs tab.tabbrowser-tab > .tab-stack > .tab-background > .tab-context-line::before {
|
||||
content: "";
|
||||
height: 1px !important;
|
||||
border-radius: 9999px !important;
|
||||
transform: translateY(5px);
|
||||
margin-top: -1px !important;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
width: 100%;
|
||||
}
|
||||
/* Override container tab style */
|
||||
/* Override container-tab style */
|
||||
tabs tab.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
|
||||
margin-top: 3px !important;
|
||||
margin-left: 5px !important;
|
||||
margin-right: 5px !important;
|
||||
}
|
||||
tab.tabbrowser-tab[usercontextid]:not([selected="true"], [multiselected])
|
||||
> .tab-stack
|
||||
> .tab-background
|
||||
> .tab-context-line {
|
||||
opacity: 0;
|
||||
transition: all 0.2s cubic-bezier(0, 0.9, 0.15, 1) !important;
|
||||
margin: unset !important;
|
||||
}
|
||||
/* selected tab style */
|
||||
:root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"]),
|
||||
:root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"] .tab-context-line,
|
||||
:root[lwtheme-mozlightdark][lwthemetextcolor="bright"],
|
||||
:root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] .tab-context-line {
|
||||
--tab-line-color: #45a1ff;
|
||||
}
|
||||
.tabbrowser-tab:is([selected], [multiselected]) .tab-context-line {
|
||||
background-color: var(--tab-line-color, #45a1ff) !important;
|
||||
.tabbrowser-tab:is([selected], [multiselected]) .tab-context-line::before {
|
||||
background-color: var(--tab-line-color, var(--lwt-tab-line-color, #45a1ff)) !important;
|
||||
}
|
||||
/* Set the active effect */
|
||||
tabs tab.tabbrowser-tab[usercontextid]:active > .tab-stack > .tab-background > .tab-context-line {
|
||||
margin-left: 6px !important;
|
||||
margin-right: 6px !important;
|
||||
}
|
||||
.tabbrowser-tab:active > .tab-stack > .tab-background > .tab-context-line {
|
||||
background: #217ddb !important;
|
||||
.tabbrowser-tab:active > .tab-stack > .tab-background > .tab-context-line::before {
|
||||
filter: brightness(70%);
|
||||
margin-left: 6px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
/* Set the hover effect */
|
||||
.tabbrowser-tab:hover:not([selected="true"], [multiselected]) > .tab-stack > .tab-background > .tab-context-line {
|
||||
background-color: rgba(0, 0, 0, 0.2) !important;
|
||||
.tabbrowser-tab:hover:not([selected="true"], [multiselected])
|
||||
> .tab-stack
|
||||
> .tab-background
|
||||
> .tab-context-line::before {
|
||||
background-color: rgba(0, 0, 0, 0.4) !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
#TabsToolbar[brighttext]
|
||||
.tabbrowser-tab:hover:not([selected="true"], [multiselected])
|
||||
> .tab-stack
|
||||
> .tab-background
|
||||
> .tab-context-line {
|
||||
background-color: rgba(255, 255, 255, 0.3137254902) !important;
|
||||
> .tab-context-line::before {
|
||||
background-color: rgba(255, 255, 255, 0.4) !important;
|
||||
}
|
||||
/* Animation */
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.tabbrowser-tab:hover:not([selected="true"], [multiselected]) > .tab-stack > .tab-background > .tab-context-line {
|
||||
animation: toWide 0.2s cubic-bezier(0, 0.9, 0.15, 1);
|
||||
}
|
||||
/* Animation for container tab can't have width change... */
|
||||
tab.tabbrowser-tab[usercontextid]:hover:not([selected="true"], [multiselected])
|
||||
.tabbrowser-tab:hover:not([selected="true"], [multiselected])
|
||||
> .tab-stack
|
||||
> .tab-background
|
||||
> .tab-context-line {
|
||||
opacity: 1;
|
||||
> .tab-context-line::before {
|
||||
animation: toWide 0.2s cubic-bezier(0, 0.9, 0.15, 1);
|
||||
}
|
||||
}
|
||||
/* Animation for hover effect */
|
||||
|
|
@ -8166,6 +8159,23 @@
|
|||
> .tab-background {
|
||||
box-shadow: 0 0 1px var(--tabs-border-color), 0 0 4px rgba(128, 128, 142, 0.5) !important; /* Original: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)), 0 0 4px rgba(128,128,142,0.5) */
|
||||
}
|
||||
@supports -moz-bool-pref("userChrome.tab.contextline_blue_accent") {
|
||||
#tabbrowser-tabs .tab-context-line {
|
||||
--tab-line-color: #45a1ff !important;
|
||||
}
|
||||
}
|
||||
@supports not -moz-bool-pref("userChrome.tab.contextline_blue_accent") {
|
||||
@media (-moz-gtk-csd-available) {
|
||||
:root:is(:not([lwtheme]), :not(:-moz-lwtheme)) #tabbrowser-tabs .tab-context-line {
|
||||
--tab-line-color: AccentColor !important; /* -moz-accent-color */
|
||||
}
|
||||
@supports -moz-bool-pref("userChrome.compatibility.accent_color") {
|
||||
:root:is(:not([lwtheme]), :not(:-moz-lwtheme)) #tabbrowser-tabs .tab-context-line {
|
||||
--tab-line-color: Highlight !important; /* -moz-accent-color */
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/*= Unselected Tab - Divide line =============================================*/
|
||||
|
|
|
|||
|
|
@ -68,8 +68,26 @@
|
|||
@import "selected_tab/photon_like_contextline";
|
||||
}
|
||||
|
||||
/*= Selected Tab - Supernova like contextline ===================================*/
|
||||
@include NotOption("userChrome.tab.photon_like_contextline") {
|
||||
@include Option("userChrome.tab.supernova_like_contextline") {
|
||||
@import "selected_tab/supernova_like_contextline";
|
||||
|
||||
@include Option("userChrome.tab.contextline_blue_accent") {
|
||||
#tabbrowser-tabs .tab-context-line {
|
||||
--tab-line-color: #45a1ff !important;
|
||||
}
|
||||
}
|
||||
@include NotOption("userChrome.tab.contextline_blue_accent") {
|
||||
@include OS("linux") {
|
||||
@include not_lwtheme {
|
||||
#tabbrowser-tabs .tab-context-line {
|
||||
@include AccentColor("Highlight") {
|
||||
--tab-line-color: #{$accentColor} !important; /* -moz-accent-color */
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,51 +1,45 @@
|
|||
.tab-context-line {
|
||||
/* context line styles */
|
||||
tabs tab.tabbrowser-tab > .tab-stack > .tab-background > .tab-context-line {
|
||||
@include InlineBox(true);
|
||||
height: 1px !important;
|
||||
border-radius: 9999px !important;
|
||||
transform: translateY(5px);
|
||||
margin-top: -1px !important;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
&::before {
|
||||
content: "";
|
||||
height: 1px !important;
|
||||
border-radius: 9999px !important;
|
||||
transform: translateY(5px);
|
||||
margin-top: -1px !important;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Override container tab style */
|
||||
/* Override container-tab style */
|
||||
tabs tab.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
|
||||
margin-top: 3px !important;
|
||||
margin-left: 5px !important;
|
||||
margin-right: 5px !important;
|
||||
}
|
||||
|
||||
tab.tabbrowser-tab[usercontextid]:not([selected="true"], [multiselected])
|
||||
> .tab-stack
|
||||
> .tab-background
|
||||
> .tab-context-line {
|
||||
opacity: 0;
|
||||
transition: all 0.2s cubic-bezier(0, 0.9, 0.15, 1) !important;
|
||||
margin: unset !important;
|
||||
}
|
||||
|
||||
/* selected tab style */
|
||||
#{built-in-light-theme()} .tab-context-line,
|
||||
#{built-in-dark-theme()} .tab-context-line {
|
||||
--tab-line-color: #45a1ff;
|
||||
}
|
||||
.tabbrowser-tab:is([selected], [multiselected]) .tab-context-line {
|
||||
background-color: var(--tab-line-color, #45a1ff) !important;
|
||||
.tabbrowser-tab:is([selected], [multiselected]) .tab-context-line::before {
|
||||
background-color: var(--tab-line-color, var(--lwt-tab-line-color, #45a1ff)) !important;
|
||||
}
|
||||
|
||||
/* Set the active effect */
|
||||
tabs tab.tabbrowser-tab[usercontextid]:active > .tab-stack > .tab-background > .tab-context-line {
|
||||
margin-left: 6px !important;
|
||||
margin-right: 6px !important;
|
||||
}
|
||||
|
||||
.tabbrowser-tab:active > .tab-stack > .tab-background > .tab-context-line {
|
||||
background: #217ddb !important;
|
||||
.tabbrowser-tab:active > .tab-stack > .tab-background > .tab-context-line::before {
|
||||
filter: brightness(70%);
|
||||
margin-left: 6px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
/* Set the hover effect */
|
||||
.tabbrowser-tab:hover:not([selected="true"], [multiselected]) > .tab-stack > .tab-background > .tab-context-line {
|
||||
background-color: rgba(0, 0, 0, 0.2) !important;
|
||||
.tabbrowser-tab:hover:not([selected="true"], [multiselected])
|
||||
> .tab-stack
|
||||
> .tab-background
|
||||
> .tab-context-line::before {
|
||||
background-color: rgba(0, 0, 0, 0.4) !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
|
|
@ -53,22 +47,18 @@ tabs tab.tabbrowser-tab[usercontextid]:active > .tab-stack > .tab-background > .
|
|||
.tabbrowser-tab:hover:not([selected="true"], [multiselected])
|
||||
> .tab-stack
|
||||
> .tab-background
|
||||
> .tab-context-line {
|
||||
background-color: #ffffff50 !important;
|
||||
> .tab-context-line::before {
|
||||
background-color: rgba(255, 255, 255, 0.4) !important;
|
||||
}
|
||||
|
||||
|
||||
/* Animation */
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.tabbrowser-tab:hover:not([selected="true"], [multiselected]) > .tab-stack > .tab-background > .tab-context-line {
|
||||
animation: toWide 0.2s cubic-bezier(0, 0.9, 0.15, 1);
|
||||
}
|
||||
|
||||
/* Animation for container tab can't have width change... */
|
||||
tab.tabbrowser-tab[usercontextid]:hover:not([selected="true"], [multiselected])
|
||||
.tabbrowser-tab:hover:not([selected="true"], [multiselected])
|
||||
> .tab-stack
|
||||
> .tab-background
|
||||
> .tab-context-line {
|
||||
opacity: 1;
|
||||
> .tab-context-line::before {
|
||||
animation: toWide 0.2s cubic-bezier(0, 0.9, 0.15, 1);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue