mirror of
https://github.com/black7375/Firefox-UI-Fix.git
synced 2026-01-22 20:41:48 -08:00
Fix: Tab - Vertical layout #1095
This commit is contained in:
alstjr7375
parent
a6546e6955
commit
8c63b02d3f
4 changed files with 266 additions and 47 deletions
174
css/leptonChrome.css
generated
174
css/leptonChrome.css
generated
|
|
@ -7318,13 +7318,22 @@
|
|||
box-shadow: unset !important;
|
||||
filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.4));
|
||||
}
|
||||
#tabbrowser-tabs:not([noshadowfortests])[expanded][orient="horizontal"]
|
||||
#tabbrowser-tabs:not([noshadowfortests])[orient="vertical"]
|
||||
.tab-background:is([selected], [multiselected])
|
||||
.tab-group-line {
|
||||
height: calc(100% + 5px + var(--tab-block-margin));
|
||||
left: calc(-1 * var(--tab-inner-inline-margin));
|
||||
height: calc(100% + 6px + var(--tab-block-margin));
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
#tabbrowser-tabs:not([noshadowfortests])[expanded][orient="vertical"]
|
||||
.tab-background:is([selected], [multiselected])
|
||||
.tab-group-line {
|
||||
inset-inline-start: calc(-1 * var(--tab-inner-inline-margin)) !important;
|
||||
}
|
||||
#tabbrowser-tabs:not([noshadowfortests]):not([expanded])[orient="vertical"]
|
||||
.tab-background:is([selected], [multiselected])
|
||||
.tab-group-line {
|
||||
inset-inline-start: calc(-1 * var(--tab-inner-inline-margin) + 2px) !important;
|
||||
}
|
||||
#tabbrowser-tabs:not([noshadowfortests]) .tab-background:is([selected], [multiselected]) {
|
||||
box-shadow: unset !important;
|
||||
filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.4));
|
||||
|
|
@ -9093,12 +9102,16 @@
|
|||
}
|
||||
}
|
||||
/* Pinned Tab */
|
||||
.tabbrowser-tab[pinned] .tab-content::before {
|
||||
.tabbrowser-tab[pinned] .tab-content::before,
|
||||
#tabbrowser-tabs[orient="vertical"]:not([expanded]) .tab-content::before {
|
||||
transform: translateY(var(--uc-container-position-y));
|
||||
width: 16px;
|
||||
width: 16px !important;
|
||||
}
|
||||
@media -moz-pref("userChrome.tab.close_button_at_pinned") {
|
||||
.tabbrowser-tab[pinned][visuallyselected]:not([busy]):hover .tab-content::before {
|
||||
.tabbrowser-tab[pinned][visuallyselected]:not([busy]):hover .tab-content::before,
|
||||
#tabbrowser-tabs[orient="vertical"]:not([expanded])
|
||||
.tabbrowser-tab[visuallyselected]:not([busy]):hover
|
||||
.tab-content::before {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -9106,12 +9119,28 @@
|
|||
.tabbrowser-tab:is([image], [pinned])[usercontextid]
|
||||
> .tab-stack
|
||||
> .tab-content[attention]:not([selected])::before,
|
||||
.tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected])::before {
|
||||
#tabbrowser-tabs[orient="vertical"]:not([expanded])
|
||||
.tabbrowser-tab[image][usercontextid]
|
||||
> .tab-stack
|
||||
> .tab-content[attention]:not([selected])::before,
|
||||
.tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected])::before,
|
||||
#tabbrowser-tabs[orient="vertical"]:not([expanded])
|
||||
.tabbrowser-tab[usercontextid]
|
||||
> .tab-stack
|
||||
> .tab-content[titlechanged]:not([selected])::before {
|
||||
opacity: 0;
|
||||
}
|
||||
/* Pinned Tab - Titlechanged Indicator override */
|
||||
.tabbrowser-tab:is([image], [pinned])[usercontextid] > .tab-stack > .tab-content[attention]:not([selected]),
|
||||
.tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]) {
|
||||
#tabbrowser-tabs[orient="vertical"]:not([expanded])
|
||||
.tabbrowser-tab[image][usercontextid]
|
||||
> .tab-stack
|
||||
> .tab-content[attention]:not([selected]),
|
||||
.tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]),
|
||||
#tabbrowser-tabs[orient="vertical"]:not([expanded])
|
||||
.tabbrowser-tab[usercontextid]
|
||||
> .tab-stack
|
||||
> .tab-content[titlechanged]:not([selected]) {
|
||||
/* Original: radial-gradient(circle, var(--attention-icon-color), var(--attention-icon-color) 2px, transparent 2px); */
|
||||
--dotted-identity-image: radial-gradient(
|
||||
circle,
|
||||
|
|
@ -9123,7 +9152,15 @@
|
|||
background-position-x: var(--uc-titlechanged-container-position-x) !important;
|
||||
}
|
||||
.tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected]),
|
||||
.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]) {
|
||||
#tabbrowser-tabs[orient="vertical"]:not([expanded])
|
||||
.tabbrowser-tab[image]
|
||||
> .tab-stack
|
||||
> .tab-content[attention]:not([selected]),
|
||||
.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]),
|
||||
#tabbrowser-tabs[orient="vertical"]:not([expanded])
|
||||
.tabbrowser-tab
|
||||
> .tab-stack
|
||||
> .tab-content[titlechanged]:not([selected]) {
|
||||
/* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */
|
||||
background-position-y: top var(--uc-container-position-y) !important;
|
||||
}
|
||||
|
|
@ -9131,25 +9168,51 @@
|
|||
.tabbrowser-tab:is([image], [pinned])[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
|
||||
> .tab-stack
|
||||
> .tab-content[attention]:not([selected]),
|
||||
#tabbrowser-tabs[orient="vertical"]:not([expanded])
|
||||
.tabbrowser-tab[image][usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
|
||||
> .tab-stack
|
||||
> .tab-content[attention]:not([selected]),
|
||||
.tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
|
||||
> .tab-stack
|
||||
> .tab-content[pinned][titlechanged]:not([selected]) {
|
||||
> .tab-content[pinned][titlechanged]:not([selected]),
|
||||
#tabbrowser-tabs[orient="vertical"]:not([expanded])
|
||||
.tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
|
||||
> .tab-stack
|
||||
> .tab-content[titlechanged]:not([selected]) {
|
||||
--uc-titlechanged-container-position-x: calc(32% - 1px), calc(50% - 1px), calc(70% - 1px);
|
||||
}
|
||||
:root[uidensity="compact"]
|
||||
.tabbrowser-tab:is([image], [pinned])[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
|
||||
> .tab-stack
|
||||
> .tab-content[attention]:not([selected]),
|
||||
:root[uidensity="compact"]
|
||||
#tabbrowser-tabs[orient="vertical"]:not([expanded])
|
||||
.tabbrowser-tab[image][usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
|
||||
> .tab-stack
|
||||
> .tab-content[attention]:not([selected]),
|
||||
:root[uidensity="compact"]
|
||||
.tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
|
||||
> .tab-stack
|
||||
> .tab-content[pinned][titlechanged]:not([selected]) {
|
||||
> .tab-content[pinned][titlechanged]:not([selected]),
|
||||
:root[uidensity="compact"]
|
||||
#tabbrowser-tabs[orient="vertical"]:not([expanded])
|
||||
.tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
|
||||
> .tab-stack
|
||||
> .tab-content[titlechanged]:not([selected]) {
|
||||
--uc-titlechanged-container-position-x: calc(30% - 1px), calc(50% - 1px), calc(70% - 1px);
|
||||
}
|
||||
}
|
||||
@media -moz-pref("userChrome.tab.container.on_top") {
|
||||
.tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected]),
|
||||
.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]) {
|
||||
#tabbrowser-tabs[orient="vertical"]:not([expanded])
|
||||
.tabbrowser-tab[image]
|
||||
> .tab-stack
|
||||
> .tab-content[attention]:not([selected]),
|
||||
.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]),
|
||||
#tabbrowser-tabs[orient="vertical"]:not([expanded])
|
||||
.tabbrowser-tab
|
||||
> .tab-stack
|
||||
> .tab-content[titlechanged]:not([selected]) {
|
||||
/* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */
|
||||
background-position-y: top var(--uc-container-position-y-bottom) !important;
|
||||
}
|
||||
|
|
@ -22543,13 +22606,22 @@
|
|||
box-shadow: unset !important;
|
||||
filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.4));
|
||||
}
|
||||
#tabbrowser-tabs:not([noshadowfortests])[expanded][orient="horizontal"]
|
||||
#tabbrowser-tabs:not([noshadowfortests])[orient="vertical"]
|
||||
.tab-background:is([selected], [multiselected])
|
||||
.tab-group-line {
|
||||
height: calc(100% + 5px + var(--tab-block-margin));
|
||||
left: calc(-1 * var(--tab-inner-inline-margin));
|
||||
height: calc(100% + 6px + var(--tab-block-margin));
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
#tabbrowser-tabs:not([noshadowfortests])[expanded][orient="vertical"]
|
||||
.tab-background:is([selected], [multiselected])
|
||||
.tab-group-line {
|
||||
inset-inline-start: calc(-1 * var(--tab-inner-inline-margin)) !important;
|
||||
}
|
||||
#tabbrowser-tabs:not([noshadowfortests]):not([expanded])[orient="vertical"]
|
||||
.tab-background:is([selected], [multiselected])
|
||||
.tab-group-line {
|
||||
inset-inline-start: calc(-1 * var(--tab-inner-inline-margin) + 2px) !important;
|
||||
}
|
||||
#tabbrowser-tabs:not([noshadowfortests]) .tab-background:is([selected], [multiselected]) {
|
||||
box-shadow: unset !important;
|
||||
filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.4));
|
||||
|
|
@ -24522,24 +24594,44 @@
|
|||
}
|
||||
}
|
||||
@media (-moz-bool-pref: "userChrome.tab.container") and (not (-moz-bool-pref: "userChrome.tabbar.as_titlebar")) {
|
||||
.tabbrowser-tab[pinned] .tab-content::before {
|
||||
.tabbrowser-tab[pinned] .tab-content::before,
|
||||
#tabbrowser-tabs[orient="vertical"]:not([expanded]) .tab-content::before {
|
||||
transform: translateY(var(--uc-container-position-y));
|
||||
width: 16px;
|
||||
width: 16px !important;
|
||||
}
|
||||
}
|
||||
@media (-moz-bool-pref: "userChrome.tab.container") and (not (-moz-bool-pref: "userChrome.tabbar.as_titlebar")) and (-moz-bool-pref: "userChrome.tab.close_button_at_pinned") {
|
||||
.tabbrowser-tab[pinned][visuallyselected]:not([busy]):hover .tab-content::before {
|
||||
.tabbrowser-tab[pinned][visuallyselected]:not([busy]):hover .tab-content::before,
|
||||
#tabbrowser-tabs[orient="vertical"]:not([expanded])
|
||||
.tabbrowser-tab[visuallyselected]:not([busy]):hover
|
||||
.tab-content::before {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@media (-moz-bool-pref: "userChrome.tab.container") and (not (-moz-bool-pref: "userChrome.tabbar.as_titlebar")) and (not (-moz-bool-pref: "userChrome.tab.container.on_top")) {
|
||||
.tabbrowser-tab:is([image], [pinned])[usercontextid] > .tab-stack > .tab-content[attention]:not([selected])::before,
|
||||
.tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected])::before {
|
||||
#tabbrowser-tabs[orient="vertical"]:not([expanded])
|
||||
.tabbrowser-tab[image][usercontextid]
|
||||
> .tab-stack
|
||||
> .tab-content[attention]:not([selected])::before,
|
||||
.tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected])::before,
|
||||
#tabbrowser-tabs[orient="vertical"]:not([expanded])
|
||||
.tabbrowser-tab[usercontextid]
|
||||
> .tab-stack
|
||||
> .tab-content[titlechanged]:not([selected])::before {
|
||||
opacity: 0;
|
||||
}
|
||||
/* Pinned Tab - Titlechanged Indicator override */
|
||||
.tabbrowser-tab:is([image], [pinned])[usercontextid] > .tab-stack > .tab-content[attention]:not([selected]),
|
||||
.tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]) {
|
||||
#tabbrowser-tabs[orient="vertical"]:not([expanded])
|
||||
.tabbrowser-tab[image][usercontextid]
|
||||
> .tab-stack
|
||||
> .tab-content[attention]:not([selected]),
|
||||
.tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]),
|
||||
#tabbrowser-tabs[orient="vertical"]:not([expanded])
|
||||
.tabbrowser-tab[usercontextid]
|
||||
> .tab-stack
|
||||
> .tab-content[titlechanged]:not([selected]) {
|
||||
/* Original: radial-gradient(circle, var(--attention-icon-color), var(--attention-icon-color) 2px, transparent 2px); */
|
||||
--dotted-identity-image: radial-gradient(
|
||||
circle,
|
||||
|
|
@ -24551,7 +24643,15 @@
|
|||
background-position-x: var(--uc-titlechanged-container-position-x) !important;
|
||||
}
|
||||
.tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected]),
|
||||
.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]) {
|
||||
#tabbrowser-tabs[orient="vertical"]:not([expanded])
|
||||
.tabbrowser-tab[image]
|
||||
> .tab-stack
|
||||
> .tab-content[attention]:not([selected]),
|
||||
.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]),
|
||||
#tabbrowser-tabs[orient="vertical"]:not([expanded])
|
||||
.tabbrowser-tab
|
||||
> .tab-stack
|
||||
> .tab-content[titlechanged]:not([selected]) {
|
||||
/* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */
|
||||
background-position-y: top var(--uc-container-position-y) !important;
|
||||
}
|
||||
|
|
@ -24559,25 +24659,51 @@
|
|||
.tabbrowser-tab:is([image], [pinned])[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
|
||||
> .tab-stack
|
||||
> .tab-content[attention]:not([selected]),
|
||||
#tabbrowser-tabs[orient="vertical"]:not([expanded])
|
||||
.tabbrowser-tab[image][usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
|
||||
> .tab-stack
|
||||
> .tab-content[attention]:not([selected]),
|
||||
.tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
|
||||
> .tab-stack
|
||||
> .tab-content[pinned][titlechanged]:not([selected]) {
|
||||
> .tab-content[pinned][titlechanged]:not([selected]),
|
||||
#tabbrowser-tabs[orient="vertical"]:not([expanded])
|
||||
.tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
|
||||
> .tab-stack
|
||||
> .tab-content[titlechanged]:not([selected]) {
|
||||
--uc-titlechanged-container-position-x: calc(32% - 1px), calc(50% - 1px), calc(70% - 1px);
|
||||
}
|
||||
:root[uidensity="compact"]
|
||||
.tabbrowser-tab:is([image], [pinned])[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
|
||||
> .tab-stack
|
||||
> .tab-content[attention]:not([selected]),
|
||||
:root[uidensity="compact"]
|
||||
#tabbrowser-tabs[orient="vertical"]:not([expanded])
|
||||
.tabbrowser-tab[image][usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
|
||||
> .tab-stack
|
||||
> .tab-content[attention]:not([selected]),
|
||||
:root[uidensity="compact"]
|
||||
.tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
|
||||
> .tab-stack
|
||||
> .tab-content[pinned][titlechanged]:not([selected]) {
|
||||
> .tab-content[pinned][titlechanged]:not([selected]),
|
||||
:root[uidensity="compact"]
|
||||
#tabbrowser-tabs[orient="vertical"]:not([expanded])
|
||||
.tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
|
||||
> .tab-stack
|
||||
> .tab-content[titlechanged]:not([selected]) {
|
||||
--uc-titlechanged-container-position-x: calc(30% - 1px), calc(50% - 1px), calc(70% - 1px);
|
||||
}
|
||||
}
|
||||
@media (-moz-bool-pref: "userChrome.tab.container") and (not (-moz-bool-pref: "userChrome.tabbar.as_titlebar")) and (-moz-bool-pref: "userChrome.tab.container.on_top") {
|
||||
.tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected]),
|
||||
.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]) {
|
||||
#tabbrowser-tabs[orient="vertical"]:not([expanded])
|
||||
.tabbrowser-tab[image]
|
||||
> .tab-stack
|
||||
> .tab-content[attention]:not([selected]),
|
||||
.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]),
|
||||
#tabbrowser-tabs[orient="vertical"]:not([expanded])
|
||||
.tabbrowser-tab
|
||||
> .tab-stack
|
||||
> .tab-content[titlechanged]:not([selected]) {
|
||||
/* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */
|
||||
background-position-y: top var(--uc-container-position-y-bottom) !important;
|
||||
}
|
||||
|
|
|
|||
87
css/leptonChromeESR.css
generated
87
css/leptonChromeESR.css
generated
|
|
@ -7755,13 +7755,22 @@
|
|||
box-shadow: unset !important;
|
||||
filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.4));
|
||||
}
|
||||
#tabbrowser-tabs:not([noshadowfortests])[expanded][orient="horizontal"]
|
||||
#tabbrowser-tabs:not([noshadowfortests])[orient="vertical"]
|
||||
.tab-background:is([selected], [multiselected])
|
||||
.tab-group-line {
|
||||
height: calc(100% + 5px + var(--tab-block-margin));
|
||||
left: calc(-1 * var(--tab-inner-inline-margin));
|
||||
height: calc(100% + 6px + var(--tab-block-margin));
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
#tabbrowser-tabs:not([noshadowfortests])[expanded][orient="vertical"]
|
||||
.tab-background:is([selected], [multiselected])
|
||||
.tab-group-line {
|
||||
inset-inline-start: calc(-1 * var(--tab-inner-inline-margin)) !important;
|
||||
}
|
||||
#tabbrowser-tabs:not([noshadowfortests]):not([expanded])[orient="vertical"]
|
||||
.tab-background:is([selected], [multiselected])
|
||||
.tab-group-line {
|
||||
inset-inline-start: calc(-1 * var(--tab-inner-inline-margin) + 2px) !important;
|
||||
}
|
||||
#tabbrowser-tabs:not([noshadowfortests]) .tab-background:is([selected], [multiselected]) {
|
||||
box-shadow: unset !important;
|
||||
filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.4));
|
||||
|
|
@ -9552,12 +9561,16 @@
|
|||
}
|
||||
}
|
||||
/* Pinned Tab */
|
||||
.tabbrowser-tab[pinned] .tab-content::before {
|
||||
.tabbrowser-tab[pinned] .tab-content::before,
|
||||
#tabbrowser-tabs[orient="vertical"]:not([expanded]) .tab-content::before {
|
||||
transform: translateY(var(--uc-container-position-y));
|
||||
width: 16px;
|
||||
width: 16px !important;
|
||||
}
|
||||
@supports -moz-bool-pref("userChrome.tab.close_button_at_pinned") {
|
||||
.tabbrowser-tab[pinned][visuallyselected]:not([busy]):hover .tab-content::before {
|
||||
.tabbrowser-tab[pinned][visuallyselected]:not([busy]):hover .tab-content::before,
|
||||
#tabbrowser-tabs[orient="vertical"]:not([expanded])
|
||||
.tabbrowser-tab[visuallyselected]:not([busy]):hover
|
||||
.tab-content::before {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -9565,12 +9578,28 @@
|
|||
.tabbrowser-tab:is([image], [pinned])[usercontextid]
|
||||
> .tab-stack
|
||||
> .tab-content[attention]:not([selected])::before,
|
||||
.tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected])::before {
|
||||
#tabbrowser-tabs[orient="vertical"]:not([expanded])
|
||||
.tabbrowser-tab[image][usercontextid]
|
||||
> .tab-stack
|
||||
> .tab-content[attention]:not([selected])::before,
|
||||
.tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected])::before,
|
||||
#tabbrowser-tabs[orient="vertical"]:not([expanded])
|
||||
.tabbrowser-tab[usercontextid]
|
||||
> .tab-stack
|
||||
> .tab-content[titlechanged]:not([selected])::before {
|
||||
opacity: 0;
|
||||
}
|
||||
/* Pinned Tab - Titlechanged Indicator override */
|
||||
.tabbrowser-tab:is([image], [pinned])[usercontextid] > .tab-stack > .tab-content[attention]:not([selected]),
|
||||
.tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]) {
|
||||
#tabbrowser-tabs[orient="vertical"]:not([expanded])
|
||||
.tabbrowser-tab[image][usercontextid]
|
||||
> .tab-stack
|
||||
> .tab-content[attention]:not([selected]),
|
||||
.tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]),
|
||||
#tabbrowser-tabs[orient="vertical"]:not([expanded])
|
||||
.tabbrowser-tab[usercontextid]
|
||||
> .tab-stack
|
||||
> .tab-content[titlechanged]:not([selected]) {
|
||||
/* Original: radial-gradient(circle, var(--attention-icon-color), var(--attention-icon-color) 2px, transparent 2px); */
|
||||
--dotted-identity-image: radial-gradient(
|
||||
circle,
|
||||
|
|
@ -9582,7 +9611,15 @@
|
|||
background-position-x: var(--uc-titlechanged-container-position-x) !important;
|
||||
}
|
||||
.tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected]),
|
||||
.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]) {
|
||||
#tabbrowser-tabs[orient="vertical"]:not([expanded])
|
||||
.tabbrowser-tab[image]
|
||||
> .tab-stack
|
||||
> .tab-content[attention]:not([selected]),
|
||||
.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]),
|
||||
#tabbrowser-tabs[orient="vertical"]:not([expanded])
|
||||
.tabbrowser-tab
|
||||
> .tab-stack
|
||||
> .tab-content[titlechanged]:not([selected]) {
|
||||
/* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */
|
||||
background-position-y: top var(--uc-container-position-y) !important;
|
||||
}
|
||||
|
|
@ -9590,25 +9627,51 @@
|
|||
.tabbrowser-tab:is([image], [pinned])[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
|
||||
> .tab-stack
|
||||
> .tab-content[attention]:not([selected]),
|
||||
#tabbrowser-tabs[orient="vertical"]:not([expanded])
|
||||
.tabbrowser-tab[image][usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
|
||||
> .tab-stack
|
||||
> .tab-content[attention]:not([selected]),
|
||||
.tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
|
||||
> .tab-stack
|
||||
> .tab-content[pinned][titlechanged]:not([selected]) {
|
||||
> .tab-content[pinned][titlechanged]:not([selected]),
|
||||
#tabbrowser-tabs[orient="vertical"]:not([expanded])
|
||||
.tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
|
||||
> .tab-stack
|
||||
> .tab-content[titlechanged]:not([selected]) {
|
||||
--uc-titlechanged-container-position-x: calc(32% - 1px), calc(50% - 1px), calc(70% - 1px);
|
||||
}
|
||||
:root[uidensity="compact"]
|
||||
.tabbrowser-tab:is([image], [pinned])[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
|
||||
> .tab-stack
|
||||
> .tab-content[attention]:not([selected]),
|
||||
:root[uidensity="compact"]
|
||||
#tabbrowser-tabs[orient="vertical"]:not([expanded])
|
||||
.tabbrowser-tab[image][usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
|
||||
> .tab-stack
|
||||
> .tab-content[attention]:not([selected]),
|
||||
:root[uidensity="compact"]
|
||||
.tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
|
||||
> .tab-stack
|
||||
> .tab-content[pinned][titlechanged]:not([selected]) {
|
||||
> .tab-content[pinned][titlechanged]:not([selected]),
|
||||
:root[uidensity="compact"]
|
||||
#tabbrowser-tabs[orient="vertical"]:not([expanded])
|
||||
.tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
|
||||
> .tab-stack
|
||||
> .tab-content[titlechanged]:not([selected]) {
|
||||
--uc-titlechanged-container-position-x: calc(30% - 1px), calc(50% - 1px), calc(70% - 1px);
|
||||
}
|
||||
}
|
||||
@supports -moz-bool-pref("userChrome.tab.container.on_top") {
|
||||
.tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected]),
|
||||
.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]) {
|
||||
#tabbrowser-tabs[orient="vertical"]:not([expanded])
|
||||
.tabbrowser-tab[image]
|
||||
> .tab-stack
|
||||
> .tab-content[attention]:not([selected]),
|
||||
.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]),
|
||||
#tabbrowser-tabs[orient="vertical"]:not([expanded])
|
||||
.tabbrowser-tab
|
||||
> .tab-stack
|
||||
> .tab-content[titlechanged]:not([selected]) {
|
||||
/* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */
|
||||
background-position-y: top var(--uc-container-position-y-bottom) !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -68,12 +68,15 @@
|
|||
}
|
||||
|
||||
/* Pinned Tab */
|
||||
.tabbrowser-tab[pinned] .tab-content::before {
|
||||
.tabbrowser-tab[pinned] .tab-content::before,
|
||||
#tabbrowser-tabs[orient="vertical"]:not([expanded]) .tab-content::before {
|
||||
left: unset;
|
||||
transform: translateY(var(--uc-container-position-y));
|
||||
width: 16px;
|
||||
width: 16px !important;
|
||||
}
|
||||
@include Option("userChrome.tab.close_button_at_pinned") {
|
||||
.tabbrowser-tab[pinned][visuallyselected]:not([busy]):hover .tab-content::before {
|
||||
.tabbrowser-tab[pinned][visuallyselected]:not([busy]):hover .tab-content::before,
|
||||
#tabbrowser-tabs[orient="vertical"]:not([expanded]) .tabbrowser-tab[visuallyselected]:not([busy]):hover .tab-content::before {
|
||||
opacity: 0;
|
||||
}
|
||||
// Don't hide at userChrome.tab.close_button_at_pinned.background
|
||||
|
|
@ -81,13 +84,17 @@
|
|||
|
||||
@include NotOption("userChrome.tab.container.on_top") {
|
||||
.tabbrowser-tab:is([image], [pinned])[usercontextid] > .tab-stack > .tab-content[attention]:not([selected])::before,
|
||||
.tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected])::before {
|
||||
#tabbrowser-tabs[orient="vertical"]:not([expanded]) .tabbrowser-tab[image][usercontextid] > .tab-stack > .tab-content[attention]:not([selected])::before,
|
||||
.tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected])::before,
|
||||
#tabbrowser-tabs[orient="vertical"]:not([expanded]) .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[titlechanged]:not([selected])::before {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* Pinned Tab - Titlechanged Indicator override */
|
||||
.tabbrowser-tab:is([image], [pinned])[usercontextid] > .tab-stack > .tab-content[attention]:not([selected]),
|
||||
.tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]) {
|
||||
#tabbrowser-tabs[orient="vertical"]:not([expanded]) .tabbrowser-tab[image][usercontextid] > .tab-stack > .tab-content[attention]:not([selected]),
|
||||
.tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]),
|
||||
#tabbrowser-tabs[orient="vertical"]:not([expanded]) .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[titlechanged]:not([selected]) {
|
||||
/* Original: radial-gradient(circle, var(--attention-icon-color), var(--attention-icon-color) 2px, transparent 2px); */
|
||||
--dotted-identity-image: radial-gradient(
|
||||
circle,
|
||||
|
|
@ -100,7 +107,9 @@
|
|||
}
|
||||
|
||||
.tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected]),
|
||||
.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]) {
|
||||
#tabbrowser-tabs[orient="vertical"]:not([expanded]) .tabbrowser-tab[image] > .tab-stack > .tab-content[attention]:not([selected]),
|
||||
.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]),
|
||||
#tabbrowser-tabs[orient="vertical"]:not([expanded]) .tabbrowser-tab > .tab-stack > .tab-content[titlechanged]:not([selected]) {
|
||||
/* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */
|
||||
background-position-y: top var(--uc-container-position-y) !important;
|
||||
}
|
||||
|
|
@ -109,26 +118,42 @@
|
|||
.tabbrowser-tab:is([image], [pinned])[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
|
||||
> .tab-stack
|
||||
> .tab-content[attention]:not([selected]),
|
||||
#tabbrowser-tabs[orient="vertical"]:not([expanded]) .tabbrowser-tab[image][usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
|
||||
> .tab-stack
|
||||
> .tab-content[attention]:not([selected]),
|
||||
.tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
|
||||
> .tab-stack
|
||||
> .tab-content[pinned][titlechanged]:not([selected]) {
|
||||
> .tab-content[pinned][titlechanged]:not([selected]),
|
||||
#tabbrowser-tabs[orient="vertical"]:not([expanded]) .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
|
||||
> .tab-stack
|
||||
> .tab-content[titlechanged]:not([selected]) {
|
||||
--uc-titlechanged-container-position-x: calc(32% - 1px), calc(50% - 1px), calc(70% - 1px);
|
||||
}
|
||||
:root[uidensity="compact"]
|
||||
.tabbrowser-tab:is([image], [pinned])[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
|
||||
> .tab-stack
|
||||
> .tab-content[attention]:not([selected]),
|
||||
:root[uidensity="compact"]
|
||||
#tabbrowser-tabs[orient="vertical"]:not([expanded]) .tabbrowser-tab[image][usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
|
||||
> .tab-stack
|
||||
> .tab-content[attention]:not([selected]),
|
||||
:root[uidensity="compact"]
|
||||
.tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
|
||||
> .tab-stack
|
||||
> .tab-content[pinned][titlechanged]:not([selected]) {
|
||||
> .tab-content[pinned][titlechanged]:not([selected]),
|
||||
:root[uidensity="compact"]
|
||||
#tabbrowser-tabs[orient="vertical"]:not([expanded]) .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
|
||||
> .tab-stack
|
||||
> .tab-content[titlechanged]:not([selected]) {
|
||||
--uc-titlechanged-container-position-x: calc(30% - 1px), calc(50% - 1px), calc(70% - 1px);
|
||||
}
|
||||
}
|
||||
|
||||
@include Option("userChrome.tab.container.on_top") {
|
||||
.tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected]),
|
||||
.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]) {
|
||||
#tabbrowser-tabs[orient="vertical"]:not([expanded]) .tabbrowser-tab[image] > .tab-stack > .tab-content[attention]:not([selected]),
|
||||
.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]),
|
||||
#tabbrowser-tabs[orient="vertical"]:not([expanded]) .tabbrowser-tab > .tab-stack > .tab-content[titlechanged]:not([selected]) {
|
||||
/* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */
|
||||
background-position-y: top var(--uc-container-position-y-bottom) !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,11 +19,16 @@ $ucTabBackgroundShadowHard: drop-shadow(-1px 0px 0px var(--uc-tab-shadow-color,
|
|||
}
|
||||
|
||||
/* filter create new stacking context */
|
||||
&[expanded][orient="vertical"] .tab-background:is([selected], [multiselected]) .tab-group-line {
|
||||
&[orient="vertical"] .tab-background:is([selected], [multiselected]) .tab-group-line {
|
||||
height: calc(100% + 6px + var(--tab-block-margin)); // 6px: .tab-group-line's inset-block size
|
||||
left: calc(-1 * var(--tab-inner-inline-margin));
|
||||
transform: translateY(-2px); // .tab-group-line 's inset-inline-start size
|
||||
}
|
||||
&[expanded][orient="vertical"] .tab-background:is([selected], [multiselected]) .tab-group-line {
|
||||
inset-inline-start: calc(-1 * var(--tab-inner-inline-margin)) !important;
|
||||
}
|
||||
&:not([expanded])[orient="vertical"] .tab-background:is([selected], [multiselected]) .tab-group-line {
|
||||
inset-inline-start: calc(-1 * var(--tab-inner-inline-margin) + 2px) !important;
|
||||
}
|
||||
}
|
||||
#tabbrowser-tabs:not([noshadowfortests]) .tab-background:is([selected], [multiselected]) {
|
||||
box-shadow: unset !important;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue