diff --git a/userChrome.css b/userChrome.css index abf7736..8f88e5a 100644 --- a/userChrome.css +++ b/userChrome.css @@ -3347,43 +3347,36 @@ menupopup > menu { } /** Unselected Tab - Divide line **********************************************/ -.tabbrowser-tab[first-visible-tab]::before, -.tabbrowser-tab::after, -#tabbrowser-tabs[movingtab] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[visuallyselected]::before { +.tab-background::after { + /* Box Model */ content: ""; display: block; -} -.tabbrowser-tab::before, -.tabbrowser-tab::after { - --tab-divide-line: 1px solid var(--lwt-background-tab-separator-color, currentColor); - border-left: var(--tab-divide-line) !important; - margin-block: 5px 4px !important; - opacity: 0.3 !important; -} -.tabbrowser-tab::before { - margin-inline-start: -1px !important; + position: absolute; + + /* Position */ + top: 50%; + right: 0; + transform: translateY(calc(-50% + 1px)) !important; + + /* Bar shape */ + width: 1px; + height: 100%; + + /* Bar Color */ + opacity: 0.3; + background-color: var(--lwt-background-tab-separator-color, currentColor) !important; } -.tabbrowser-tab[first-visible-tab]::before, -:root[tabsintitlebar]:not([extradragspace]) #toolbar-menubar[autohide="true"] + #TabsToolbar .tabbrowser-tab::after, -.tabbrowser-tab:hover::after, -#tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[beforehovered]::after, -.tabbrowser-tab[multiselected]::after, -#tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[before-multiselected]::after { - margin-top: var(--tabs-top-border-width) !important; - margin-bottom: 0 !important; +.tabbrowser-tab[visuallyselected] .tab-background::after, +.tabbrowser-tab[beforeselected-visible] .tab-background::after { + opacity: 0; } -/* Selected - Hide */ -.tabbrowser-tab[first-visible-tab][visuallyselected]::before, -#tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[beforeselected-visible]::after, -#tabbrowser-tabs[movingtab] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[visuallyselected]::before, -.tabbrowser-tab[visuallyselected]::after { - --tabs-border-color: transparent; - border-color: var(--tabs-border-color) !important; - margin-top: 0 !important; - margin-bottom: 0 !important; - opacity: 1 !important; +/* Animate */ +@media (prefers-reduced-motion: no-preference) { + .tab-background::after { + transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */ + } } /** New tab button - Smaller button *******************************************/