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

Clean: Separated to divide_line.scss

Browse source
This commit is contained in:
alstjr7375 2021-12-17 22:15:04 +09:00
parent cdd74fc578
commit b1f6613518
2 changed files with 63 additions and 62 deletions
Download patch file Download diff file Expand all files Collapse all files

62
src/tabbar/_divde_line.scss Normal file
View file

@ -0,0 +1,62 @@
#tabbrowser-arrowscrollbox {
position: absolute;
}
.tab-background::before,
#tabs-newtab-button::before {
/* Box Model */
content: "";
display: block;
position: absolute;
/* Position */
top: 50%;
transform: translateX(-2.5px) translateY(calc(-50% + 1px));
/* Bar shape */
width: 1px;
height: 20px;
/* Bar Color */
opacity: 0;
background-color: var(--toolbarseparator-color);
}
.tabbrowser-tab:not([visuallyselected], [multiselected], :hover, :first-child) .tab-background::before,
#tabs-newtab-button:not(:hover, [open])::before {
opacity: var(--tab-separator-opacity);
}
#navigator-toolbox:not([movingtab])
.tabbrowser-tab:is([visuallyselected], [multiselected], :hover)
+ .tabbrowser-tab
.tab-background::before,
#navigator-toolbox:not([movingtab])
.tabbrowser-tab:is([visuallyselected], [multiselected], :hover)
~ .tabbrowser-tab[afterhovered]
.tab-background::before,
#navigator-toolbox:not([movingtab])
.tabbrowser-tab[last-visible-tab]:is([visuallyselected], [multiselected], :hover)
~ #tabs-newtab-button::before,
#navigator-toolbox:not([movingtab])
.tabbrowser-tab[first-visible-unpinned-tab]:is([visuallyselected], [multiselected], :hover)
.tab-background::before,
#navigator-toolbox:not([movingtab])
#tabbrowser-arrowscrollbox[overflowing]
tab.tabbrowser-tab[first-visible-unpinned-tab]
.tab-background::before {
opacity: 0 !important;
}
/* Animate */
@media (prefers-reduced-motion: no-preference) {
.tab-background::before,
#tabs-newtab-button::before {
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-visible-tab] {
margin-inline-end: 1px !important;
}

63
src/userChrome.scss
View file

@ -50,68 +50,7 @@
@import "tabbar/bottom_rounded_corner";
/** Unselected Tab - Divide line **********************************************/
#tabbrowser-arrowscrollbox {
position: absolute;
}
.tab-background::before,
#tabs-newtab-button::before {
/* Box Model */
content: "";
display: block;
position: absolute;
/* Position */
top: 50%;
transform: translateX(-2.5px) translateY(calc(-50% + 1px));
/* Bar shape */
width: 1px;
height: 20px;
/* Bar Color */
opacity: 0;
background-color: var(--toolbarseparator-color);
}
.tabbrowser-tab:not([visuallyselected], [multiselected], :hover, :first-child) .tab-background::before,
#tabs-newtab-button:not(:hover, [open])::before {
opacity: var(--tab-separator-opacity);
}
#navigator-toolbox:not([movingtab])
.tabbrowser-tab:is([visuallyselected], [multiselected], :hover)
+ .tabbrowser-tab
.tab-background::before,
#navigator-toolbox:not([movingtab])
.tabbrowser-tab:is([visuallyselected], [multiselected], :hover)
~ .tabbrowser-tab[afterhovered]
.tab-background::before,
#navigator-toolbox:not([movingtab])
.tabbrowser-tab[last-visible-tab]:is([visuallyselected], [multiselected], :hover)
~ #tabs-newtab-button::before,
#navigator-toolbox:not([movingtab])
.tabbrowser-tab[first-visible-unpinned-tab]:is([visuallyselected], [multiselected], :hover)
.tab-background::before,
#navigator-toolbox:not([movingtab])
#tabbrowser-arrowscrollbox[overflowing]
tab.tabbrowser-tab[first-visible-unpinned-tab]
.tab-background::before {
opacity: 0 !important;
}
/* Animate */
@media (prefers-reduced-motion: no-preference) {
.tab-background::before,
#tabs-newtab-button::before {
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-visible-tab] {
margin-inline-end: 1px !important;
}
@import "tabbar/divide_line";
/* New tab button - Looks like tab ********************************************/
#tabs-newtab-button {