diff --git a/theme/colors/dark.css b/theme/colors/dark.css index 9f9c954..89387cc 100644 --- a/theme/colors/dark.css +++ b/theme/colors/dark.css @@ -68,11 +68,13 @@ /* Tabs */ --gnome-tabbar-background: var(--gnome-headerbar-background); --gnome-tabbar-tab-separator-color: rgba(255, 255, 255, .15); - --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-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-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; @@ -91,6 +93,13 @@ /* Header bar */ --gnome-private-headerbar-background: #252F49; --gnome-private-inactive-headerbar-background: var(--gnome-private-toolbar-background); + /* Tabs */ + --gnome-private-tabbar-tab-hover-background: #343e56; /* Hardcoded color */ + --gnome-private-tabbar-tab-active-background: #343e56; /* Hardcoded color */ + --gnome-private-tabbar-tab-active-background-contrast: #495675; /* Hardcoded color */ + --gnome-private-tabbar-tab-active-hover-background: #414a61; /* Hardcoded color */ + --gnome-private-inactive-tabbar-tab-hover-background: #242c3f; /* Hardcoded color */ + --gnome-private-inactive-tabbar-tab-active-background: #272e41; /* Hardcoded color */ /* Text color for Firefox Logo in new private tab */ --gnome-private-wordmark: #FBFBFE; diff --git a/theme/colors/light.css b/theme/colors/light.css index 136f9b5..f1644f4 100644 --- a/theme/colors/light.css +++ b/theme/colors/light.css @@ -68,13 +68,13 @@ /* Tabs */ --gnome-tabbar-background: var(--gnome-headerbar-background); --gnome-tabbar-tab-separator-color: var(--gnome-toolbar-border-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-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-inactive-tabbar-background: var(--gnome-inactive-headerbar-background); - --gnome-tab-button-background: rgba(255, 255, 255, .5); - --gnome-tab-button-hover-background: rgba(255, 255, 255, .6); + --gnome-inactive-tabbar-tab-hover-background: #f3f3f3; /* Hardcoded color */ + --gnome-inactive-tabbar-tab-active-background: #f0f0f0; /* Hardcoded color */ --gnome-tabbar-tab-identity-base-opacity: .1; --gnome-tabbar-tab-needs-attetion: #84AEE2; } @@ -91,6 +91,13 @@ /* Header bar */ --gnome-private-headerbar-background: #D7E3F0; --gnome-private-inactive-headerbar-background: var(--gnome-private-toolbar-background); + /* Tabs */ + --gnome-private-tabbar-tab-hover-background: #cbd7e3; /* Hardcoded color */ + --gnome-private-tabbar-tab-active-background: #c6d1dd; /* Hardcoded color */ + --gnome-private-tabbar-tab-active-background-contrast: #a9b6c4; /* Hardcoded color */ + --gnome-private-tabbar-tab-active-hover-background: #c0cbd7; /* Hardcoded color */ + --gnome-private-inactive-tabbar-tab-hover-background: #e4e9f0; /* Hardcoded color */ + --gnome-private-inactive-tabbar-tab-active-background: #e1e7ed; /* Hardcoded color */ /* Text color for Firefox Logo in new private tab */ --gnome-private-wordmark: #20123A; diff --git a/theme/parts/headerbar-private-window.css b/theme/parts/headerbar-private-window.css index 5fdb327..7f5be4f 100644 --- a/theme/parts/headerbar-private-window.css +++ b/theme/parts/headerbar-private-window.css @@ -7,12 +7,19 @@ --gnome-accent-fg: var(--gnome-private-accent) !important; /* Toolbars */ --gnome-toolbar-background: var(--gnome-private-toolbar-background) !important; - --gnome-inactive-toolbar-background: var(--gnome-private-inactive-toolbar-background) !important; + --gnome-inactive-toolbar-background: var(--gnome-private-inactive-toolbar-background) !important; /* Menus */ --gnome-menu-background: var(--gnome-private-menu-background) !important; /* Change headerbar colors */ --gnome-headerbar-background: var(--gnome-private-headerbar-background) !important; --gnome-inactive-headerbar-background: var(--gnome-private-inactive-headerbar-background) !important; + /* Tabs */ + --gnome-tabbar-tab-hover-background: var(--gnome-private-tabbar-tab-hover-background); + --gnome-tabbar-tab-active-background: var(--gnome-private-tabbar-tab-active-background); + --gnome-tabbar-tab-active-background-contrast: var(--gnome-private-tabbar-tab-active-background-contrast); + --gnome-tabbar-tab-active-hover-background: var(--gnome-private-tabbar-tab-active-hover-background); + --gnome-inactive-tabbar-tab-hover-background: var(--gnome-private-inactive-tabbar-tab-hover-background); + --gnome-inactive-tabbar-tab-active-background: var(--gnome-private-inactive-tabbar-tab-active-background); } /* Add private window headerbar indicator */ diff --git a/theme/parts/tabsbar.css b/theme/parts/tabsbar.css index 344676a..38e3e78 100644 --- a/theme/parts/tabsbar.css +++ b/theme/parts/tabsbar.css @@ -275,9 +275,6 @@ tab { } /* Close tab button */ -:root { - --gnome-fill-icon: red !important; -} .tab-close-button { list-style-image: url("../icons/window-close-symbolic.svg") !important; fill: var(--gnome-toolbar-color) !important; @@ -327,11 +324,38 @@ tab { } /* Close button overlay */ -.tabbrowser-tab:not([pinned]):is([selected="true"], :hover) { - --tab-label-mask-size: 32px !important; +.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]):is([selected="true"], :hover) .tab-label-container:not([textoverflow]) { - mask-image: linear-gradient(to left, transparent calc(var(--tab-label-mask-size) - 20px), black var(--tab-label-mask-size)) !important; +.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]):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); +} +.tabbrowser-tab:not([pinned], :-moz-window-inactive)[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]):hover:-moz-window-inactive .tab-content::before { + --gnome-tabbar-tab-close-overlay-bg: var(--gnome-inactive-tabbar-tab-hover-background); } /* Tab close button etc. positioning */ @@ -347,9 +371,12 @@ 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] { +.tabbrowser-tab:hover > .tab-stack > .tab-background[selected=true]:not(:-moz-window-inactive) { background-color: var(--gnome-tabbar-tab-active-hover-background) !important; } .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]), @@ -361,6 +388,9 @@ 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]), @@ -387,6 +417,12 @@ tab { .tabbrowser-tab[class*="identity-color-"] .tab-label-container { color: var(--identity-tab-color) !important; } +/*.tabbrowser-tab.tabbrowser-tab[class*="identity-color-"] { + background-image: radial-gradient(ellipse closest-side, var(--identity-icon-color) 1%, transparent 95%); + background-repeat: no-repeat; + background-position: center 36px; + background-size: 150% 100%; +}*/ /* Needs attetion tab indicator */ .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]), @@ -434,6 +470,10 @@ 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 */ @@ -445,7 +485,7 @@ tab { } /* Hide the close button overlay on hover */ .tabbrowser-tab:not([pinned]):hover .tab-content::before { - --tab-label-mask-size: 2em !important; + --gnome-tabbar-tab-close-overlay-bg: unset; } /* Reset the overflow position of the tab label container */ .tabbrowser-tab:not([pinned]):not([selected="true"]):hover .tab-label-container[textoverflow="true"] {