mirrors/Firefox-UI-Fix
1
Fork 0
mirror of https://github.com/black7375/Firefox-UI-Fix.git synced 2026-01-02 15:23:59 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix: Tab - Container position to botton at FFv108 #485

Browse source
This commit is contained in:
alstjr7375 2022-10-21 09:14:45 +09:00
parent de33b0fc0b
commit c5c0a2fcd0
2 changed files with 22 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

21
css/leptonChrome.css
View file

@ -7345,8 +7345,9 @@
/* Box Model */
content: "";
display: block;
position: absolute !important;
transform: translate(var(--container-position-x), var(--container-position-y)) !important;
position: absolute;
top: 50%;
transform: translate(var(--container-position-x), var(--container-position-y));
/* Shape */
border-bottom: 2px solid var(--identity-icon-color);
width: 25%;
@ -7365,13 +7366,13 @@
/* Animate */
@media (prefers-reduced-motion: no-preference) {
.tab-content:not([titlechanged])::before {
transition: 0.15s var(--animation-easing-function) !important;
transition: 0.15s var(--animation-easing-function);
transition-property: width, opacity;
}
}
/* Pinned Tab */
.tabbrowser-tab[pinned] .tab-content::before {
transform: translateY(var(--container-position-y)) !important;
transform: translateY(var(--container-position-y));
width: 16px;
}
@ -7390,8 +7391,8 @@
var(--identity-icon-color) 2px,
transparent 2px
);
background-image: var(--dotted-identity-image), var(--dotted-identity-image), var(--dotted-identity-image) !important;
background-position-x: 32%, 50%, 70% !important;
background-image: var(--dotted-identity-image), var(--dotted-identity-image), var(--dotted-identity-image);
background-position-x: 32%, 50%, 70%;
}
:root[uidensity="compact"]
@ -7403,13 +7404,13 @@
> .tab-stack
> .tab-content[pinned][titlechanged]:not([selected="true"]) {
/* Original: radial-gradient(circle, var(--attention-icon-color), var(--attention-icon-color) 2px, transparent 2px); */
background-position-x: 30%, 50%, 70% !important;
background-position-x: 30%, 50%, 70%;
}
.tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]),
.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {
/* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */
background-position-y: top calc(0.5px + 50% + var(--container-position-y)) !important;
background-position-y: top calc(0.5px + 50% + var(--container-position-y));
}
/* Pinned Tab - Titlechanged & soundplaying */
@ -7419,7 +7420,7 @@
.tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
> .tab-stack
> .tab-content[pinned][titlechanged]:not([selected="true"]) {
background-position-x: calc(32% - 1px), calc(50% - 1px), calc(70% - 1px) !important;
background-position-x: calc(32% - 1px), calc(50% - 1px), calc(70% - 1px);
}
:root[uidensity="compact"]
@ -7430,7 +7431,7 @@
.tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
> .tab-stack
> .tab-content[pinned][titlechanged]:not([selected="true"]) {
background-position-x: calc(30% - 1px), calc(50% - 1px), calc(70% - 1px) !important;
background-position-x: calc(30% - 1px), calc(50% - 1px), calc(70% - 1px);
}
}
}

21
src/tab/_container_tab.scss
View file

@ -22,8 +22,9 @@
/* Box Model */
content: "";
display: block;
position: absolute !important;
transform: translate(var(--container-position-x), var(--container-position-y)) !important;
position: absolute;
top: 50%;
transform: translate(var(--container-position-x), var(--container-position-y));
/* Shape */
border-bottom: 2px solid var(--identity-icon-color);
@ -41,14 +42,14 @@
/* Animate */
@include Animate {
.tab-content:not([titlechanged])::before {
transition: 0.15s var(--animation-easing-function) !important;
transition: 0.15s var(--animation-easing-function);
transition-property: width, opacity;
}
}
/* Pinned Tab */
.tabbrowser-tab[pinned] .tab-content::before {
transform: translateY(var(--container-position-y)) !important;
transform: translateY(var(--container-position-y));
width: 16px;
}
@include Option("userChrome.tab.close_button_at_pinned") {
@ -68,8 +69,8 @@
var(--identity-icon-color) 2px,
transparent 2px
);
background-image: var(--dotted-identity-image), var(--dotted-identity-image), var(--dotted-identity-image) !important;
background-position-x: 32%, 50%, 70% !important;
background-image: var(--dotted-identity-image), var(--dotted-identity-image), var(--dotted-identity-image);
background-position-x: 32%, 50%, 70%;
}
:root[uidensity="compact"]
.tabbrowser-tab:is([image], [pinned])[usercontextid]
@ -80,13 +81,13 @@
> .tab-stack
> .tab-content[pinned][titlechanged]:not([selected="true"]) {
/* Original: radial-gradient(circle, var(--attention-icon-color), var(--attention-icon-color) 2px, transparent 2px); */
background-position-x: 30%, 50%, 70% !important;
background-position-x: 30%, 50%, 70%;
}
.tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]),
.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {
/* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */
background-position-y: top calc(0.5px + 50% + var(--container-position-y)) !important;
background-position-y: top calc(0.5px + 50% + var(--container-position-y));
}
/* Pinned Tab - Titlechanged & soundplaying */
@ -96,7 +97,7 @@
.tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
> .tab-stack
> .tab-content[pinned][titlechanged]:not([selected="true"]) {
background-position-x: calc(32% - 1px), calc(50% - 1px), calc(70% - 1px) !important;
background-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])
@ -106,5 +107,5 @@
.tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
> .tab-stack
> .tab-content[pinned][titlechanged]:not([selected="true"]) {
background-position-x: calc(30% - 1px), calc(50% - 1px), calc(70% - 1px) !important;
background-position-x: calc(30% - 1px), calc(50% - 1px), calc(70% - 1px);
}