mirror of
https://github.com/black7375/Firefox-UI-Fix.git
synced 2025-12-05 18:20:44 -08:00
165 lines
5.4 KiB
SCSS
165 lines
5.4 KiB
SCSS
//-- Mixin ---------------------------------------------------------------------
|
|
@mixin _dynamicSeparatorShape() {
|
|
/* Box Model */
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
|
|
/* Position */
|
|
top: 50%;
|
|
|
|
/* Bar shape */
|
|
width: 1px;
|
|
height: 20px;
|
|
|
|
/* Bar Color */
|
|
opacity: 0;
|
|
background-color: var(--toolbarseparator-color);
|
|
|
|
@include Option("userChrome.compatibility.dynamic_separator") {
|
|
background-color: var(--tabs-border-color);
|
|
}
|
|
}
|
|
|
|
//------------------------------------------------------------------------------
|
|
|
|
#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;
|
|
}
|
|
}
|
|
|
|
#tabbrowser-arrowscrollbox-periphery {
|
|
position: relative;
|
|
}
|
|
|
|
@include Option("userChrome.tab.newtab_button_like_tab") {
|
|
.tab-stack::before,
|
|
#tabs-newtab-button::before {
|
|
@include _dynamicSeparatorShape;
|
|
|
|
/* More position */
|
|
transform: translateX(var(--tab-separator-position-x)) translateY(var(--tab-separator-position-y));
|
|
}
|
|
#tabs-newtab-button::before {
|
|
left: calc(50% - (8px + var(--toolbarbutton-inner-padding)));
|
|
}
|
|
}
|
|
|
|
@include NotOption("userChrome.tab.newtab_button_like_tab") {
|
|
.tab-stack::before,
|
|
#tabbrowser-arrowscrollbox:not([overflowing])
|
|
.tabbrowser-tab:not([visuallyselected], [multiselected], :hover):last-of-type
|
|
.tab-stack::after {
|
|
@include _dynamicSeparatorShape;
|
|
}
|
|
|
|
.tab-stack::before {
|
|
transform: translateX(var(--tab-separator-position-x)) translateY(var(--tab-separator-position-y)) !important;
|
|
}
|
|
.tabbrowser-tab:last-of-type .tab-stack::after {
|
|
right: 0;
|
|
transform: translateX(var(--end-tab-separator-position-x)) translateY(var(--tab-separator-position-y)) !important;
|
|
}
|
|
}
|
|
|
|
.tabbrowser-tab:not([visuallyselected], [multiselected], :hover, :first-of-type) .tab-stack::before {
|
|
opacity: var(--tab-separator-opacity);
|
|
}
|
|
@include Option("userChrome.tabbar.one_liner") {
|
|
@include NotOption("userChrome.tabbar.one_liner.tabbar_first") {
|
|
@include OneLinerContent {
|
|
.tabbrowser-tab:not([visuallyselected], [multiselected], :hover):first-of-type .tab-stack::before {
|
|
opacity: var(--tab-separator-opacity);
|
|
transform: translateX(var(--start-tab-separator-position-x)) translateY(var(--tab-separator-position-y));
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@include Option("userChrome.tab.newtab_button_like_tab") {
|
|
#tabs-newtab-button:not(:hover, [open])::before {
|
|
opacity: var(--tab-separator-opacity);
|
|
}
|
|
}
|
|
@include NotOption("userChrome.tab.newtab_button_like_tab") {
|
|
#tabbrowser-arrowscrollbox:not([overflowing])
|
|
.tabbrowser-tab:not([visuallyselected], [multiselected], :hover):last-of-type
|
|
.tab-stack::after {
|
|
opacity: var(--tab-separator-opacity);
|
|
}
|
|
}
|
|
|
|
#tabbrowser-tabs[orient="horizontal"] tab-group {
|
|
&:has(.tabbrowser-tab:last-child:is(:hover, [selected])) + .tabbrowser-tab .tab-stack::before,
|
|
&[collapsed] + .tabbrowser-tab .tab-stack::before {
|
|
opacity: 0 !important;
|
|
}
|
|
}
|
|
|
|
#navigator-toolbox:not([movingtab])
|
|
.tabbrowser-tab:is([first-visible-unpinned-tab], :nth-child(1 of :not([pinned], [hidden]))):is([visuallyselected], [multiselected], :hover)
|
|
.tab-stack::before,
|
|
#navigator-toolbox:not([movingtab])
|
|
#tabbrowser-arrowscrollbox[overflowing]
|
|
tab.tabbrowser-tab:is([first-visible-unpinned-tab], :nth-child(1 of :not([pinned], [hidden])))
|
|
.tab-stack::before {
|
|
opacity: 0 !important;
|
|
}
|
|
@include Option("userChrome.tab.newtab_button_like_tab") {
|
|
#navigator-toolbox:not([movingtab])
|
|
.tabbrowser-tab:is([visuallyselected], [multiselected], :hover)
|
|
+ .tabbrowser-tab
|
|
.tab-stack::before,
|
|
#navigator-toolbox:not([movingtab])
|
|
.tabbrowser-tab:last-of-type:is([visuallyselected], [multiselected], :hover)
|
|
~ #tabs-newtab-button::before, /* Legacy - v103 */
|
|
#navigator-toolbox:not([movingtab])
|
|
.tabbrowser-tab:last-of-type:is([visuallyselected], [multiselected], :hover)
|
|
~ #tabbrowser-arrowscrollbox-periphery #tabs-newtab-button::before {
|
|
opacity: 0 !important;
|
|
}
|
|
}
|
|
@include NotOption("userChrome.tab.newtab_button_like_tab") {
|
|
.tabbrowser-tab:is([visuallyselected], [multiselected], :hover)
|
|
+ .tabbrowser-tab:not([visuallyselected])
|
|
.tab-stack::before {
|
|
opacity: 0 !important;
|
|
}
|
|
|
|
:root:not([uidensity="compact"]) #tabs-newtab-button > .toolbarbutton-icon {
|
|
margin-left: 2px;
|
|
}
|
|
:root[uidensity="compact"] #tabs-newtab-button > .toolbarbutton-icon {
|
|
margin-left: 1px;
|
|
}
|
|
}
|
|
|
|
/* Animate */
|
|
@include Animate {
|
|
.tab-stack::before {
|
|
transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */
|
|
}
|
|
@include Option("userChrome.tab.newtab_button_like_tab") {
|
|
#tabs-newtab-button::before {
|
|
transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */
|
|
}
|
|
}
|
|
@include NotOption("userChrome.tab.newtab_button_like_tab") {
|
|
#tabbrowser-arrowscrollbox:not([overflowing])
|
|
.tabbrowser-tab:not([visuallyselected], [multiselected], :hover):last-of-type
|
|
.tab-stack::after {
|
|
transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Latest Tab & New tab margin */
|
|
#tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab:last-of-type {
|
|
margin-inline-end: 1px !important;
|
|
}
|