mirrors/Firefox-UI-Fix
1
Fork 0
mirror of https://github.com/black7375/Firefox-UI-Fix.git synced 2025-12-28 21:30:59 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge branch 'dev'

Browse source
This commit is contained in:
alstjr7375 2022-09-06 10:05:28 +09:00
commit 88f602df8a
11 changed files with 162 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

88
css/leptonChrome.css
View file

@ -3192,6 +3192,10 @@
--uc-title-post-spacer: 25px;
/* Original: 40px */
}
:root:-moz-locale-dir(rtl) {
--uc-title-pre-spacer: 25px;
--uc-title-post-spacer: 30px;
}
@supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") {
.titlebar-spacer[type="pre-tabs"] {
@ -6329,6 +6333,18 @@
/*= Unselected Tab - Divide line =============================================*/
/*= Unselected Tab - Dynamic Separator =======================================*/
@supports -moz-bool-pref("userChrome.tab.dynamic_separtor") {
#tabbrowser-arrowscrollbox {
--start-tab-separator-position-x: -1.5px;
--end-tab-separator-position-x: 1.5px;
--tab-separator-position-x: -2.5px;
--tab-separator-position-y: calc(-50% + 1px);
}
#tabbrowser-arrowscrollbox:-moz-locale-dir(rtl) {
--start-tab-separator-position-x: 1.5px;
--end-tab-separator-position-x: -1.5px;
--tab-separator-position-x: 2.5px;
}
@supports -moz-bool-pref("userChrome.tab.newtab_button_like_tab") {
#tabbrowser-arrowscrollbox {
position: absolute;
@ -6349,7 +6365,7 @@
opacity: 0;
background-color: var(--toolbarseparator-color);
/* More position */
transform: translateX(-2.5px) translateY(calc(-50% + 1px));
transform: translateX(var(--tab-separator-position-x)) translateY(var(--tab-separator-position-y));
}
@supports -moz-bool-pref("userChrome.compatibility.dynamic_separator") {
.tab-background::before,
@ -6386,12 +6402,12 @@
}
.tab-background::before {
transform: translateX(-2.5px) translateY(calc(-50% + 1px)) !important;
transform: translateX(var(--tab-separator-position-x)) translateY(var(--tab-separator-position-y)) !important;
}
.tabbrowser-tab[last-visible-tab] .tab-background::after {
right: 0;
transform: translateX(1.5px) translateY(calc(-50% + 1px)) !important;
transform: translateX(var(--end-tab-separator-position-x)) translateY(var(--tab-separator-position-y)) !important;
}
}
.tabbrowser-tab:not([visuallyselected], [multiselected], :hover, :first-child) .tab-background::before {
@ -6403,14 +6419,14 @@
@supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") {
.tabbrowser-tab:not([visuallyselected], [multiselected], :hover):first-child .tab-background::before {
opacity: var(--tab-separator-opacity);
transform: translateX(-1.5px) translateY(calc(-50% + 1px));
transform: translateX(var(--start-tab-separator-position-x)) translateY(var(--tab-separator-position-y));
}
}
@supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") {
@media screen and (min-width: 1100px) {
.tabbrowser-tab:not([visuallyselected], [multiselected], :hover):first-child .tab-background::before {
opacity: var(--tab-separator-opacity);
transform: translateX(-1.5px) translateY(calc(-50% + 1px));
transform: translateX(var(--start-tab-separator-position-x)) translateY(var(--tab-separator-position-y));
}
}
}
@ -6908,13 +6924,20 @@
}
/* Makes the speaker icon to always appear if the tab is playing (not only on hover) */
.tabbrowser-tab {
--uc-sound-tab-icon-position-x: -0.5px;
}
.tabbrowser-tab:-moz-locale-dir(rtl) {
--uc-sound-tab-icon-position-x: 0.5px;
}
.tab-icon-overlay:not([crashed]),
.tab-icon-overlay[pinned][crashed][selected] {
/* Position */
top: 0 !important;
inset-inline-end: -9px !important;
z-index: 1 !important;
transform: translateX(-0.5px) translateY(-6px);
transform: translateX(var(--uc-sound-tab-icon-position-x)) translateY(-6px);
/* Shape */
padding: 1.5px !important;
border-radius: 10px !important;
@ -6934,14 +6957,24 @@
/* Label */
@supports not -moz-bool-pref("userChrome.hidden.tab_icon") {
.tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) .tab-label {
transform: translateX(4px);
--uc-sound-tab-label-position-x: 4px;
transform: translateX(var(--uc-sound-tab-label-position-x));
}
.tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked])
.tab-label:-moz-locale-dir(rtl) {
--uc-sound-tab-label-position-x: -4px;
}
}
@supports -moz-bool-pref("userChrome.hidden.tab_icon") {
@supports not -moz-bool-pref("userChrome.hidden.tab_icon.always") {
.tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked])
.tab-label {
transform: translateX(4px);
--uc-sound-tab-label-position-x: 4px;
transform: translateX(var(--uc-sound-tab-label-position-x));
}
.tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked])
.tab-label:-moz-locale-dir(rtl) {
--uc-sound-tab-label-position-x: -4px;
}
}
}
@ -6958,9 +6991,17 @@
}
/* None exist favicon - Size bigger */
@supports not -moz-bool-pref("userChrome.tab.always_show_tab_icon") {
.tabbrowser-tab {
--uc-sound-tab-no-icon-position-x: -0.5px;
--uc-sound-tab-no-icon-label-position-x: 3px;
}
.tabbrowser-tab:-moz-locale-dir(rtl) {
--uc-sound-tab-no-icon-position-x: 0.5px;
--uc-sound-tab-no-icon-label-position-x: -3px;
}
@supports not -moz-bool-pref("userChrome.hidden.tab_icon") {
.tabbrowser-tab:not([image]) .tab-icon-overlay:not([pinned], [sharing], [crashed]) {
transform: translateX(-0.5px) translateY(-1px);
transform: translateX(var(--uc-sound-tab-no-icon-position-x)) translateY(-1px);
inset-inline-end: 0 !important;
margin-inline-end: 0 !important;
padding: 0 !important;
@ -6971,13 +7012,13 @@
}
.tabbrowser-tab:not([image]):not([image]):not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked])
.tab-label {
transform: translateX(3px);
transform: translateX(var(--uc-sound-tab-no-icon-label-position-x));
}
}
@supports -moz-bool-pref("userChrome.hidden.tab_icon") {
@supports not -moz-bool-pref("userChrome.hidden.tab_icon.always") {
.tabbrowser-tab .tab-icon-overlay:not([pinned], [sharing], [crashed]) {
transform: translateX(-0.5px) translateY(-1px);
transform: translateX(var(--uc-sound-tab-no-icon-position-x)) translateY(-1px);
inset-inline-end: 0 !important;
margin-inline-end: 0 !important;
padding: 0 !important;
@ -6988,7 +7029,7 @@
}
.tabbrowser-tab:not([image]):not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked])
.tab-label {
transform: translateX(3px);
transform: translateX(var(--uc-sound-tab-no-icon-label-position-x));
}
}
}
@ -7001,7 +7042,7 @@
/* Busy - Overlay Position */
.tabbrowser-tab:not([pinned])[busy] .tab-icon-overlay:is([soundplaying], [muted], [activemedia-blocked]) {
transform: translateX(-0.5px) translateY(-6px);
transform: translateX(var(--uc-sound-tab-icon-position-x)) translateY(-6px);
}
.tabbrowser-tab:not([image]) .tab-icon-overlay:not([pinned], [sharing], [crashed])[busy] {
@ -7082,8 +7123,12 @@
}
}
.tabbrowser-tab {
--container-position-x: 9px;
--container-position-y: 11px;
}
.tabbrowser-tab:-moz-locale-dir(rtl) {
--container-position-x: -9px;
}
:root[uidensity="compact"] .tabbrowser-tab {
--container-position-y: 10px;
@ -7098,7 +7143,7 @@
content: "";
display: block;
position: absolute !important;
transform: translate(9px, var(--container-position-y)) !important;
transform: translate(var(--container-position-x), var(--container-position-y)) !important;
/* Shape */
border-bottom: 2px solid var(--identity-icon-color);
width: 25%;
@ -9106,9 +9151,13 @@
/* Padding */
:root {
--uc-menu-background-position: left;
--context-menu-background-padding-default: 5px;
--context-menu-background-padding: var(--context-menu-background-padding-default);
}
:root:-moz-locale-dir(rtl) {
--uc-menu-background-position: right;
}
:not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menuitem:not(.menuitem-iconic),
:not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menu:not(.menu-iconic),
@ -9130,19 +9179,20 @@
.openintabs-menuitem,
#blockedPopupDontShowMessage,
#BMB_viewBookmarksToolbar {
background-position: left var(--context-menu-background-padding) center !important;
background-position: var(--uc-menu-background-position) var(--context-menu-background-padding) center !important;
padding-inline-start: var(--context-menu-background-padding) !important;
}
/* Menubar */
@supports -moz-bool-pref("userChrome.icon.global_menubar") {
#main-menubar > menu {
background-position: left var(--context-menu-background-padding-default) center !important;
background-position: var(--uc-menu-background-position) var(--context-menu-background-padding-default) center !important;
padding-inline-start: calc(16px + var(--context-menu-background-padding-default)) !important;
padding-inline-end: 3px;
}
#main-menubar > menu:first-child {
background-position: left calc(3px + var(--context-menu-background-padding-default)) center !important;
background-position: var(--uc-menu-background-position) calc(3px + var(--context-menu-background-padding-default))
center !important;
padding-inline-start: calc(19px + var(--context-menu-background-padding-default)) !important;
}
#main-menubar > menu > menupopup {
@ -9311,7 +9361,7 @@
#PersonalToolbar menupopup[placespopup="true"] menuitem:not(.menuitem-iconic, [disabled="true"]),
#PersonalToolbar menupopup[placespopup="true"] menu:not(.menu-iconic) {
margin-inline: var(--arrowpanel-menuitem-padding-inline) !important;
background-position: left calc(var(--arrowpanel-menuicon-padding)) center !important;
background-position: var(--uc-menu-background-position) calc(var(--arrowpanel-menuicon-padding)) center !important;
}
menupopup:is(#BMB_bookmarksPopup) menuitem:not(.menuitem-iconic, [disabled="true"]),
@ -9335,7 +9385,7 @@
#PersonalToolbar menupopup[placespopup="true"] menu:not(.menu-iconic) {
margin-inline: var(--arrowpanel-menuitem-padding-inline) !important;
padding-inline-start: calc(var(--arrowpanel-menuicon-padding) + var(--context-menu-text-padding)) !important;
background-position: left calc(var(--arrowpanel-menuicon-padding)) center !important;
background-position: var(--uc-menu-background-position) calc(var(--arrowpanel-menuicon-padding)) center !important;
}
}
/* Linux */

20
css/leptonContent.css
View file

@ -279,15 +279,19 @@
}
.context-menu-list .context-menu-item button span {
padding-inline-start: 24px;
/* 16p + (4px * 2) */
/* Color */
-moz-context-properties: fill, fill-opacity !important;
fill: currentColor !important;
/* Layout */
background-size: 16px;
background-repeat: no-repeat;
background-size: 16px !important;
background-repeat: no-repeat !important;
background-image: var(--menuitem-image);
background-position: left 4px center;
padding-inline-start: 24px;
/* 16p + (4px * 2) */
background-position: var(--uc-menu-background-position, left) 4px center;
}
.context-menu-list .context-menu-item button span:dir(rtl) {
--uc-menu-background-position: right;
}
.context-menu-item span[data-l10n-id="newtab-menu-pin"] {
@ -3037,9 +3041,13 @@
/* Padding */
:root {
--uc-menu-background-position: left;
--context-menu-background-padding-default: 5px;
--context-menu-background-padding: var(--context-menu-background-padding-default);
}
:root:-moz-locale-dir(rtl) {
--uc-menu-background-position: right;
}
menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu)
menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]),
@ -3048,7 +3056,7 @@
menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup)
> menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]),
menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu:not(.menu-iconic, .in-menulist, [checked="true"]) {
background-position: left var(--context-menu-background-padding) center !important;
background-position: var(--uc-menu-background-position) var(--context-menu-background-padding) center !important;
padding-inline-start: var(--context-menu-background-padding) !important;
}

17
docs/Restrictions.md
View file

@ -6,7 +6,8 @@
* [Cross Platform](#cross-platform)
* [Firefox Version](#firefox-version)
* [Side Effect](#side-effect)
* [`-moz-accent-color` Related](#-moz-accent-color-related)
* [RTL](#rtl)
* [`-moz-accent-color`](#-moz-accent-color)
- [Internals](#internals)
* [CSS Loading Order](#css-loading-order)
* [DOM structure cannot be modified](#dom-structure-cannot-be-modified)
@ -59,10 +60,6 @@ This project is using SCSS to make a [reusable compatible mixins](../src/utils).
- `-moz-os-version` -> `-moz-platform` [#331](https://github.com/black7375/Firefox-UI-Fix/issues/331)
- Breaking change with `-moz-accent-color`/`-moz-accent-color-foreground` -> `AccentColor`/`AccentColorText` [#433](https://github.com/black7375/Firefox-UI-Fix/issues/433)
### `-moz-accent-color`
I don't know the exact reason, but it can be a problem if it is not applied to [CSS Variable](https://developer.mozilla.org/en-US/docs/Web/CSS/var). [#437](https://github.com/black7375/Firefox-UI-Fix/issues/437)
### Side Effect
Only CSS modifications can cause bugs that are hard to think of in the general web, such as the [context menu not appearing](https://github.com/black7375/Firefox-UI-Fix/issues/114).
@ -77,6 +74,16 @@ Info: `#nav-bar` is [`toolbar`](https://udn.realityripple.com/docs/Archive/Mozil
Another `display: flex`'s side effect examples. [#368](https://github.com/black7375/Firefox-UI-Fix/issues/368) [#372](https://github.com/black7375/Firefox-UI-Fix/issues/372)
### RTL
It can be detected using [`:-moz-locale-dir(rtl)`](https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-locale-dir(rtl)) on the interface(chrome) and [`:dir(rtl)`](https://developer.mozilla.org/en-US/docs/Web/CSS/:dir) on the content.
[`margin-inline`](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline) and [`padding-inline`](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline) works as desired, but [`background-position-x`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-position-x) and [`translateX()`](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translateX) should use the opposite values.
### `-moz-accent-color`
I don't know the exact reason, but it can be a problem if it is not applied to [CSS Variable](https://developer.mozilla.org/en-US/docs/Web/CSS/var). [#437](https://github.com/black7375/Firefox-UI-Fix/issues/437)
## Internals
### CSS Loading Order
User CSS(`userChrome.css`, `userContent.css`) is usually loaded first.

17
src/icons/layout/_activity_stream.scss
View file

@ -1,16 +1,15 @@
@import "./menu_common";
.context-menu-list .context-menu-item button {
padding-inline-start: 0 !important;
}
.context-menu-list .context-menu-item button span {
@include _layout_icon_menus;
padding-inline-start: 24px; /* 16p + (4px * 2) */
-moz-context-properties: fill, fill-opacity !important;
fill: currentColor !important;
/* Layout */
background-size: 16px;
background-repeat: no-repeat;
background-image: var(--menuitem-image);
background-position: left 4px center;
background-position: var(--uc-menu-background-position, left) 4px center;
&:dir(rtl) {
--uc-menu-background-position: right;
}
}

4
src/icons/layout/_bookmark_menu.scss
View file

@ -66,7 +66,7 @@ $_bookmarkToolbarMenus: selector.nest(
}
@include _layoutBookmarkMenu() {
margin-inline: var(--arrowpanel-menuitem-padding-inline) !important;
background-position: left calc(var(--arrowpanel-menuicon-padding)) center !important;
background-position: var(--uc-menu-background-position) calc(var(--arrowpanel-menuicon-padding)) center !important;
}
@include _layoutBookmarkPopup() {
padding-inline-start: calc(var(--arrowpanel-menuicon-padding) + var(--context-menu-text-padding) + 2px) !important;
@ -82,7 +82,7 @@ $_bookmarkToolbarMenus: selector.nest(
@include _layoutBookmarkMenu() {
margin-inline: var(--arrowpanel-menuitem-padding-inline) !important;
padding-inline-start: calc(var(--arrowpanel-menuicon-padding) + var(--context-menu-text-padding)) !important;
background-position: left calc(var(--arrowpanel-menuicon-padding)) center !important;
background-position: var(--uc-menu-background-position) calc(var(--arrowpanel-menuicon-padding)) center !important;
}
}

4
src/icons/layout/_menu.scss
View file

@ -56,12 +56,12 @@ $_layoutCommonMenus: (
/* Menubar */
@include Option("userChrome.icon.global_menubar") {
#{$_globalMenus} {
background-position: left var(--context-menu-background-padding-default) center !important;
background-position: var(--uc-menu-background-position) var(--context-menu-background-padding-default) center !important;
padding-inline-start: calc(16px + var(--context-menu-background-padding-default)) !important;
padding-inline-end: 3px;
&:first-child {
background-position: left calc(3px + var(--context-menu-background-padding-default)) center !important;
background-position: var(--uc-menu-background-position) calc(3px + var(--context-menu-background-padding-default)) center !important;
padding-inline-start: calc(19px + var(--context-menu-background-padding-default)) !important;
}
> menupopup {

6
src/icons/layout/_menu_common.scss
View file

@ -62,12 +62,16 @@ $_initialMenus: selector.append(
// Padding
@mixin _layout_root_padding() {
:root {
--uc-menu-background-position: left;
--context-menu-background-padding-default: 5px;
--context-menu-background-padding: var(--context-menu-background-padding-default);
&:-moz-locale-dir(rtl) {
--uc-menu-background-position: right;
}
}
}
@mixin _layout_init_padding() {
background-position: left var(--context-menu-background-padding) center !important;
background-position: var(--uc-menu-background-position) var(--context-menu-background-padding) center !important;
padding-inline-start: var(--context-menu-background-padding) !important;
}

4
src/padding/_tabbar_width.scss
View file

@ -2,6 +2,10 @@
:root {
--uc-title-pre-spacer: 30px; /* Original: 40px */
--uc-title-post-spacer: 25px; /* Original: 40px */
&:-moz-locale-dir(rtl) {
--uc-title-pre-spacer: 25px;
--uc-title-post-spacer: 30px;
}
}
@include WindowControl_Left {
.titlebar-spacer[type="pre-tabs"] {

7
src/tab/_container_tab.scss
View file

@ -5,7 +5,12 @@
}
.tabbrowser-tab {
$containerPositionX: 9px;
--container-position-x: #{ $containerPositionX };
--container-position-y: 11px;
&:-moz-locale-dir(rtl) {
--container-position-x: #{ $containerPositionX * -1 };
}
}
:root[uidensity="compact"] .tabbrowser-tab {
--container-position-y: 10px;
@ -18,7 +23,7 @@
content: "";
display: block;
position: absolute !important;
transform: translate(9px, var(--container-position-y)) !important;
transform: translate(var(--container-position-x), var(--container-position-y)) !important;
/* Shape */
border-bottom: 2px solid var(--identity-icon-color);

30
src/tab/sound_tab/_show_with_favicons.scss
View file

@ -31,13 +31,19 @@
}
/* Makes the speaker icon to always appear if the tab is playing (not only on hover) */
.tabbrowser-tab {
--uc-sound-tab-icon-position-x: -0.5px;
&:-moz-locale-dir(rtl) {
--uc-sound-tab-icon-position-x: 0.5px;
}
}
.tab-icon-overlay:not([crashed]),
.tab-icon-overlay[pinned][crashed][selected] {
/* Position */
top: 0 !important;
inset-inline-end: -9px !important;
z-index: 1 !important;
transform: translateX(-0.5px) translateY(-6px);
transform: translateX(var(--uc-sound-tab-icon-position-x)) translateY(-6px);
/* Shape */
padding: 1.5px !important;
@ -57,7 +63,13 @@
/* Label */
@include _hidden_tabIcon_soundTabLabel {
.tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) .tab-label {
transform: translateX(4px);
$soundTabLabelPositionX: 4px;
--uc-sound-tab-label-position-x: #{ $soundTabLabelPositionX };
transform: translateX(var(--uc-sound-tab-label-position-x));
&:-moz-locale-dir(rtl) {
--uc-sound-tab-label-position-x: #{ $soundTabLabelPositionX * -1 };
}
}
}
@ -76,9 +88,15 @@
/* None exist favicon - Size bigger */
@include NotOption("userChrome.tab.always_show_tab_icon") {
.tabbrowser-tab {
--uc-sound-tab-no-icon-position-x: -0.5px;
--uc-sound-tab-no-icon-label-position-x: 3px;
&:-moz-locale-dir(rtl) {
--uc-sound-tab-no-icon-position-x: 0.5px;
--uc-sound-tab-no-icon-label-position-x: -3px;
}
@include _hidden_tabIcon_soundTabIcon {
.tab-icon-overlay:not([pinned], [sharing], [crashed]) {
transform: translateX(-0.5px) translateY(-1px);
transform: translateX(var(--uc-sound-tab-no-icon-position-x)) translateY(-1px);
inset-inline-end: 0 !important;
margin-inline-end: 0 !important;
padding: 0 !important;
@ -87,8 +105,8 @@
opacity: 0 !important; /* Favicon hidden */
}
&:not([image]):not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked])
.tab-label {
transform: translateX(3px);
.tab-label {
transform: translateX(var(--uc-sound-tab-no-icon-label-position-x));
}
}
}
@ -102,7 +120,7 @@
/* Busy - Overlay Position */
.tabbrowser-tab:not([pinned])[busy] .tab-icon-overlay:is([soundplaying], [muted], [activemedia-blocked]) {
transform: translateX(-0.5px) translateY(-6px);
transform: translateX(var(--uc-sound-tab-icon-position-x)) translateY(-6px);
}
.tabbrowser-tab:not([image]) .tab-icon-overlay:not([pinned], [sharing], [crashed])[busy] {
inset-inline-end: -9px !important;

20
src/tab/unselected_tab/_dynamic_separator.scss
View file

@ -23,6 +23,18 @@
//------------------------------------------------------------------------------
#tabbrowser-arrowscrollbox {
--start-tab-separator-position-x: -1.5px;
--end-tab-separator-position-x: 1.5px;
--tab-separator-position-x: -2.5px;
--tab-separator-position-y: calc(-50% + 1px);
&:-moz-locale-dir(rtl) {
--start-tab-separator-position-x: 1.5px;
--end-tab-separator-position-x: -1.5px;
--tab-separator-position-x: 2.5px;
}
}
@include Option("userChrome.tab.newtab_button_like_tab") {
#tabbrowser-arrowscrollbox {
position: absolute;
@ -33,7 +45,7 @@
@include _dynamicSeparatorShape;
/* More position */
transform: translateX(-2.5px) translateY(calc(-50% + 1px));
transform: translateX(var(--tab-separator-position-x)) translateY(var(--tab-separator-position-y));
}
}
@ -46,11 +58,11 @@
}
.tab-background::before {
transform: translateX(-2.5px) translateY(calc(-50% + 1px)) !important;
transform: translateX(var(--tab-separator-position-x)) translateY(var(--tab-separator-position-y)) !important;
}
.tabbrowser-tab[last-visible-tab] .tab-background::after {
right: 0;
transform: translateX(1.5px) translateY(calc(-50% + 1px)) !important;
transform: translateX(var(--end-tab-separator-position-x)) translateY(var(--tab-separator-position-y)) !important;
}
}
@ -62,7 +74,7 @@
@include OneLinerContent {
.tabbrowser-tab:not([visuallyselected], [multiselected], :hover):first-child .tab-background::before {
opacity: var(--tab-separator-opacity);
transform: translateX(-1.5px) translateY(calc(-50% + 1px));
transform: translateX(var(--start-tab-separator-position-x)) translateY(var(--tab-separator-position-y));
}
}
}