diff --git a/src/tabbar/_divde_line.scss b/src/tabbar/_divde_line.scss new file mode 100644 index 0000000..d848137 --- /dev/null +++ b/src/tabbar/_divde_line.scss @@ -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; +} diff --git a/src/userChrome.scss b/src/userChrome.scss index 1cdec96..e244c2a 100644 --- a/src/userChrome.scss +++ b/src/userChrome.scss @@ -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 {