diff --git a/css/leptonChrome.css b/css/leptonChrome.css index e8bf5476..a0349f67 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -7336,20 +7336,23 @@ display: none; } } - .tabbrowser-tab { - --container-position-x: 9px; - --container-position-y: 11px; + #tabbrowser-tabs { + --uc-container-position-x: 9px; + --uc-container-position-y-default: 11.5px; + --uc-container-position-y: calc(50% + var(--uc-container-position-y-default)); + --uc-titlechanged-container-position-x: 32%, 50%, 70%; } - .tabbrowser-tab:-moz-locale-dir(rtl) { - --container-position-x: -9px; + #tabbrowser-tabs:-moz-locale-dir(rtl) { + --uc-container-position-x: -9px; } - :root[uidensity="compact"] .tabbrowser-tab { - --container-position-y: 10px; + :root[uidensity="compact"] #tabbrowser-tabs { + --uc-container-position-y-default: 10.5px; + --uc-titlechanged-container-position-x: 30%, 50%, 70%; } - :root[uidensity="touch"] .tabbrowser-tab { - --container-position-y: 12px; + :root[uidensity="touch"] #tabbrowser-tabs { + --uc-container-position-y-default: 12.5px; } .tab-content:not([titlechanged])::before { @@ -7358,7 +7361,7 @@ display: block; position: absolute; top: 50%; - transform: translate(var(--container-position-x), var(--container-position-y)); + transform: translate(var(--uc-container-position-x), var(--uc-container-position-y)); /* Shape */ border-bottom: 2px solid var(--identity-icon-color); width: 25%; @@ -7383,7 +7386,7 @@ } /* Pinned Tab */ .tabbrowser-tab[pinned] .tab-content::before { - transform: translateY(var(--container-position-y)); + transform: translateY(var(--uc-container-position-y)); width: 16px; } @@ -7402,26 +7405,14 @@ var(--identity-icon-color) 2px, transparent 2px ); - 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] - > .tab-stack - > .tab-content[attention]:not([selected="true"]), - :root[uidensity="compact"] - .tabbrowser-tab[usercontextid] - > .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%; + background-image: var(--dotted-identity-image), var(--dotted-identity-image), var(--dotted-identity-image) !important; + background-position-x: var(--uc-titlechanged-container-position-x) !important; } .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)); + background-position-y: top var(--uc-container-position-y) !important; } /* Pinned Tab - Titlechanged & soundplaying */ @@ -7431,7 +7422,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); + --uc-titlechanged-container-position-x: calc(32% - 1px), calc(50% - 1px), calc(70% - 1px); } :root[uidensity="compact"] @@ -7442,7 +7433,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); + --uc-titlechanged-container-position-x: calc(30% - 1px), calc(50% - 1px), calc(70% - 1px); } } } diff --git a/src/tab/_container_tab.scss b/src/tab/_container_tab.scss index 26b4f1f7..a52f9d12 100644 --- a/src/tab/_container_tab.scss +++ b/src/tab/_container_tab.scss @@ -4,19 +4,26 @@ } } -.tabbrowser-tab { +#tabbrowser-tabs { $containerPositionX: 9px; - --container-position-x: #{ $containerPositionX }; - --container-position-y: 11px; + --uc-container-position-x: #{ $containerPositionX }; &:-moz-locale-dir(rtl) { - --container-position-x: #{ $containerPositionX * -1 }; + --uc-container-position-x: #{ $containerPositionX * -1 }; } + + --uc-container-position-y-default: 11.5px; + --uc-container-position-y: calc(50% + var(--uc-container-position-y-default)); + + // Pinned Tab - Titlechanged Indicator override + --uc-titlechanged-container-position-x: 32%, 50%, 70%; } -:root[uidensity="compact"] .tabbrowser-tab { - --container-position-y: 10px; +:root[uidensity="compact"] #tabbrowser-tabs { + --uc-container-position-y-default: 10.5px; + + --uc-titlechanged-container-position-x: 30%, 50%, 70%; } -:root[uidensity="touch"] .tabbrowser-tab { - --container-position-y: 12px; +:root[uidensity="touch"] #tabbrowser-tabs { + --uc-container-position-y-default: 12.5px; } .tab-content:not([titlechanged])::before { /* Box Model */ @@ -24,7 +31,7 @@ display: block; position: absolute; top: 50%; - transform: translate(var(--container-position-x), var(--container-position-y)); + transform: translate(var(--uc-container-position-x), var(--uc-container-position-y)); /* Shape */ border-bottom: 2px solid var(--identity-icon-color); @@ -49,7 +56,7 @@ /* Pinned Tab */ .tabbrowser-tab[pinned] .tab-content::before { - transform: translateY(var(--container-position-y)); + transform: translateY(var(--uc-container-position-y)); width: 16px; } @include Option("userChrome.tab.close_button_at_pinned") { @@ -69,25 +76,14 @@ var(--identity-icon-color) 2px, transparent 2px ); - 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] - > .tab-stack - > .tab-content[attention]:not([selected="true"]), -:root[uidensity="compact"] - .tabbrowser-tab[usercontextid] - > .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%; + background-image: var(--dotted-identity-image), var(--dotted-identity-image), var(--dotted-identity-image) !important; + background-position-x: var(--uc-titlechanged-container-position-x) !important; } .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)); + background-position-y: top var(--uc-container-position-y) !important; } /* Pinned Tab - Titlechanged & soundplaying */ @@ -97,7 +93,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); + --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]) @@ -107,5 +103,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); + --uc-titlechanged-container-position-x: calc(30% - 1px), calc(50% - 1px), calc(70% - 1px); }