diff --git a/theme/colors/dark.css b/theme/colors/dark.css index a3464df..9f9c954 100644 --- a/theme/colors/dark.css +++ b/theme/colors/dark.css @@ -68,13 +68,11 @@ /* Tabs */ --gnome-tabbar-background: var(--gnome-headerbar-background); --gnome-tabbar-tab-separator-color: rgba(255, 255, 255, .15); - --gnome-tabbar-tab-hover-background: #3f3f3f; /* Hardcoded color */ - --gnome-tabbar-tab-active-background: #444444; /* Hardcoded color */ - --gnome-tabbar-tab-active-background-contrast: #4F4F4F; /* Hardcoded color */ - --gnome-tabbar-tab-active-hover-background: #4b4b4b; /* Hardcoded color */ + --gnome-tabbar-tab-hover-background: rgba(255, 255, 255, .07); + --gnome-tabbar-tab-active-background: rgba(255, 255, 255, .1); + --gnome-tabbar-tab-active-background-contrast: rgba(255, 255, 255, .3); + --gnome-tabbar-tab-active-hover-background: rgba(255, 255, 255, .13); --gnome-inactive-tabbar-background: var(--gnome-inactive-headerbar-background); - --gnome-inactive-tabbar-tab-hover-background: #2c2c2c; /* Hardcoded color */ - --gnome-inactive-tabbar-tab-active-background: #2e2e2e; /* Hardcoded color */ --gnome-tab-button-background: rgba(0, 0, 0, .5); --gnome-tab-button-hover-background: rgba(0, 0, 0, .6); --gnome-tabbar-tab-identity-base-opacity: 0; diff --git a/theme/colors/light.css b/theme/colors/light.css index a562c97..136f9b5 100644 --- a/theme/colors/light.css +++ b/theme/colors/light.css @@ -68,17 +68,15 @@ /* Tabs */ --gnome-tabbar-background: var(--gnome-headerbar-background); --gnome-tabbar-tab-separator-color: var(--gnome-toolbar-border-color); - --gnome-tabbar-tab-hover-background: #dedede; /* Hardcoded color */ - --gnome-tabbar-tab-active-background: #d9d9d9; /* Hardcoded color */ - --gnome-tabbar-tab-active-background-contrast: #c0c0c0; /* Hardcoded color */ - --gnome-tabbar-tab-active-hover-background: #d2d2d2; /* Hardcoded color */ + --gnome-tabbar-tab-hover-background: rgba(0, 0, 0, .056); + --gnome-tabbar-tab-active-background: rgba(0, 0, 0, .08); + --gnome-tabbar-tab-active-background-contrast: rgba(0, 0, 0, .24); + --gnome-tabbar-tab-active-hover-background: rgba(0, 0, 0, .104); --gnome-inactive-tabbar-background: var(--gnome-inactive-headerbar-background); - --gnome-inactive-tabbar-tab-hover-background: #f3f3f3; /* Hardcoded color */ - --gnome-inactive-tabbar-tab-active-background: #f0f0f0; /* Hardcoded color */ --gnome-tab-button-background: rgba(255, 255, 255, .5); --gnome-tab-button-hover-background: rgba(255, 255, 255, .6); --gnome-tabbar-tab-identity-base-opacity: .1; - --gnome-tabbar-tab-needs-attetion: #84AEE2; + --gnome-tabbar-tab-needs-attetion: #84AEE2; } /* Private window colors */ diff --git a/theme/parts/tabsbar.css b/theme/parts/tabsbar.css index 1a3b056..e5a4fb6 100644 --- a/theme/parts/tabsbar.css +++ b/theme/parts/tabsbar.css @@ -327,35 +327,8 @@ tab { } /* Close button overlay */ -.tabbrowser-tab:not([pinned]) .tab-content::before { - border-radius: 0 6px 6px 0; - content: ""; - height: 100%; - opacity: 0; - position: absolute; - right: 0; - top: 0; - transition: all 0.2s ease-out; - width: 55px; -} -.tabbrowser-tab:not([pinned]) .tab-content::before { - background: linear-gradient(to left, var(--gnome-tabbar-tab-close-overlay-bg) 50%, transparent); - z-index: 99; -} -.tabbrowser-tab:not([pinned], :-moz-window-inactive):is([selected="true"], :hover) .tab-content::before { - opacity: 1; -} -.tabbrowser-tab:not([pinned])[selected="true"] .tab-content::before { - --gnome-tabbar-tab-close-overlay-bg: var(--gnome-tabbar-tab-active-background); -} -:root:not(:-moz-window-inactive) .tabbrowser-tab:not([pinned])[selected="true"]:hover .tab-content::before { - --gnome-tabbar-tab-close-overlay-bg: var(--gnome-tabbar-tab-active-hover-background); -} -.tabbrowser-tab:not([pinned]):hover .tab-content::before { - --gnome-tabbar-tab-close-overlay-bg: var(--gnome-tabbar-tab-hover-background); -} -.tabbrowser-tab:not([pinned])[selected="true"]:-moz-window-inactive .tab-content::before { - --gnome-tabbar-tab-close-overlay-bg: var(--gnome-inactive-tabbar-tab-active-background); +.tabbrowser-tab:not([pinned]):is([selected="true"], :hover) { + --tab-label-mask-size: 32px !important; } /* Tab close button etc. positioning */ @@ -371,9 +344,6 @@ tab { .tab-background[selected=true] { background-color: var(--gnome-tabbar-tab-active-background) !important; } -.tab-background[selected=true]:-moz-window-inactive { - background-color: var(--gnome-inactive-tabbar-tab-active-background) !important; -} /* Tab hover */ .tabbrowser-tab:hover > .tab-stack > .tab-background[selected=true] { @@ -388,9 +358,6 @@ tab { background-color: var(--gnome-tabbar-tab-hover-background) !important; border-image: none !important; } -:root:-moz-window-inactive .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]) { - background-color: var(--gnome-inactive-tabbar-tab-hover-background) !important; -} /* Full width tabs */ .tabbrowser-tab:not([style^="max-width"]):not([pinned]), @@ -464,10 +431,6 @@ tab { :root:not(:-moz-window-inactive) .tabbrowser-tab:hover > .tab-stack > .tab-background:not(#hack) { background: var(--gnome-tabbar-tab-active-background-contrast) !important; } - .tabbrowser-tab:not([pinned])[selected="true"] .tab-content::before, - :root:not(:-moz-window-inactive) .tabbrowser-tab:hover .tab-content::before { - --gnome-tabbar-tab-close-overlay-bg: var(--gnome-tabbar-tab-active-background-contrast) !important; - } } /* OPTIONAL: Show the close button on the selected tab only */ @@ -479,7 +442,7 @@ tab { } /* Hide the close button overlay on hover */ .tabbrowser-tab:not([pinned]):hover .tab-content::before { - --gnome-tabbar-tab-close-overlay-bg: unset; + --tab-label-mask-size: 2em !important; } /* Reset the overflow position of the tab label container */ .tabbrowser-tab:not([pinned]):not([selected="true"]):hover .tab-label-container[textoverflow="true"] {