Tabsbar: Bring back custom tab close overlay
Revert cd3a91cd27
Manually calcualte all the colors for private windows
This commit is contained in:
parent
ca995257e6
commit
5d291fc51c
|
@ -68,11 +68,13 @@
|
||||||
/* Tabs */
|
/* Tabs */
|
||||||
--gnome-tabbar-background: var(--gnome-headerbar-background);
|
--gnome-tabbar-background: var(--gnome-headerbar-background);
|
||||||
--gnome-tabbar-tab-separator-color: rgba(255, 255, 255, .15);
|
--gnome-tabbar-tab-separator-color: rgba(255, 255, 255, .15);
|
||||||
--gnome-tabbar-tab-hover-background: rgba(255, 255, 255, .07);
|
--gnome-tabbar-tab-hover-background: #3f3f3f; /* Hardcoded color */
|
||||||
--gnome-tabbar-tab-active-background: rgba(255, 255, 255, .1);
|
--gnome-tabbar-tab-active-background: #444444; /* Hardcoded color */
|
||||||
--gnome-tabbar-tab-active-background-contrast: rgba(255, 255, 255, .3);
|
--gnome-tabbar-tab-active-background-contrast: #4F4F4F; /* Hardcoded color */
|
||||||
--gnome-tabbar-tab-active-hover-background: rgba(255, 255, 255, .13);
|
--gnome-tabbar-tab-active-hover-background: #4b4b4b; /* Hardcoded color */
|
||||||
--gnome-inactive-tabbar-background: var(--gnome-inactive-headerbar-background);
|
--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-background: rgba(0, 0, 0, .5);
|
||||||
--gnome-tab-button-hover-background: rgba(0, 0, 0, .6);
|
--gnome-tab-button-hover-background: rgba(0, 0, 0, .6);
|
||||||
--gnome-tabbar-tab-identity-base-opacity: 0;
|
--gnome-tabbar-tab-identity-base-opacity: 0;
|
||||||
|
@ -91,6 +93,13 @@
|
||||||
/* Header bar */
|
/* Header bar */
|
||||||
--gnome-private-headerbar-background: #252F49;
|
--gnome-private-headerbar-background: #252F49;
|
||||||
--gnome-private-inactive-headerbar-background: var(--gnome-private-toolbar-background);
|
--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 */
|
/* Text color for Firefox Logo in new private tab */
|
||||||
--gnome-private-wordmark: #FBFBFE;
|
--gnome-private-wordmark: #FBFBFE;
|
||||||
|
|
|
@ -68,13 +68,13 @@
|
||||||
/* Tabs */
|
/* Tabs */
|
||||||
--gnome-tabbar-background: var(--gnome-headerbar-background);
|
--gnome-tabbar-background: var(--gnome-headerbar-background);
|
||||||
--gnome-tabbar-tab-separator-color: var(--gnome-toolbar-border-color);
|
--gnome-tabbar-tab-separator-color: var(--gnome-toolbar-border-color);
|
||||||
--gnome-tabbar-tab-hover-background: rgba(0, 0, 0, .056);
|
--gnome-tabbar-tab-hover-background: #dedede; /* Hardcoded color */
|
||||||
--gnome-tabbar-tab-active-background: rgba(0, 0, 0, .08);
|
--gnome-tabbar-tab-active-background: #d9d9d9; /* Hardcoded color */
|
||||||
--gnome-tabbar-tab-active-background-contrast: rgba(0, 0, 0, .24);
|
--gnome-tabbar-tab-active-background-contrast: #c0c0c0; /* Hardcoded color */
|
||||||
--gnome-tabbar-tab-active-hover-background: rgba(0, 0, 0, .104);
|
--gnome-tabbar-tab-active-hover-background: #d2d2d2; /* Hardcoded color */
|
||||||
--gnome-inactive-tabbar-background: var(--gnome-inactive-headerbar-background);
|
--gnome-inactive-tabbar-background: var(--gnome-inactive-headerbar-background);
|
||||||
--gnome-tab-button-background: rgba(255, 255, 255, .5);
|
--gnome-inactive-tabbar-tab-hover-background: #f3f3f3; /* Hardcoded color */
|
||||||
--gnome-tab-button-hover-background: rgba(255, 255, 255, .6);
|
--gnome-inactive-tabbar-tab-active-background: #f0f0f0; /* Hardcoded color */
|
||||||
--gnome-tabbar-tab-identity-base-opacity: .1;
|
--gnome-tabbar-tab-identity-base-opacity: .1;
|
||||||
--gnome-tabbar-tab-needs-attetion: #84AEE2;
|
--gnome-tabbar-tab-needs-attetion: #84AEE2;
|
||||||
}
|
}
|
||||||
|
@ -91,6 +91,13 @@
|
||||||
/* Header bar */
|
/* Header bar */
|
||||||
--gnome-private-headerbar-background: #D7E3F0;
|
--gnome-private-headerbar-background: #D7E3F0;
|
||||||
--gnome-private-inactive-headerbar-background: var(--gnome-private-toolbar-background);
|
--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 */
|
/* Text color for Firefox Logo in new private tab */
|
||||||
--gnome-private-wordmark: #20123A;
|
--gnome-private-wordmark: #20123A;
|
||||||
|
|
|
@ -7,12 +7,19 @@
|
||||||
--gnome-accent-fg: var(--gnome-private-accent) !important;
|
--gnome-accent-fg: var(--gnome-private-accent) !important;
|
||||||
/* Toolbars */
|
/* Toolbars */
|
||||||
--gnome-toolbar-background: var(--gnome-private-toolbar-background) !important;
|
--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 */
|
/* Menus */
|
||||||
--gnome-menu-background: var(--gnome-private-menu-background) !important;
|
--gnome-menu-background: var(--gnome-private-menu-background) !important;
|
||||||
/* Change headerbar colors */
|
/* Change headerbar colors */
|
||||||
--gnome-headerbar-background: var(--gnome-private-headerbar-background) !important;
|
--gnome-headerbar-background: var(--gnome-private-headerbar-background) !important;
|
||||||
--gnome-inactive-headerbar-background: var(--gnome-private-inactive-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 */
|
/* Add private window headerbar indicator */
|
||||||
|
|
|
@ -275,9 +275,6 @@ tab {
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Close tab button */
|
/* Close tab button */
|
||||||
:root {
|
|
||||||
--gnome-fill-icon: red !important;
|
|
||||||
}
|
|
||||||
.tab-close-button {
|
.tab-close-button {
|
||||||
list-style-image: url("../icons/window-close-symbolic.svg") !important;
|
list-style-image: url("../icons/window-close-symbolic.svg") !important;
|
||||||
fill: var(--gnome-toolbar-color) !important;
|
fill: var(--gnome-toolbar-color) !important;
|
||||||
|
@ -327,11 +324,38 @@ tab {
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Close button overlay */
|
/* Close button overlay */
|
||||||
.tabbrowser-tab:not([pinned]):is([selected="true"], :hover) {
|
.tabbrowser-tab:not([pinned]) .tab-content::before {
|
||||||
--tab-label-mask-size: 32px !important;
|
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]) {
|
.tabbrowser-tab:not([pinned]) .tab-content::before {
|
||||||
mask-image: linear-gradient(to left, transparent calc(var(--tab-label-mask-size) - 20px), black var(--tab-label-mask-size)) !important;
|
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 */
|
/* Tab close button etc. positioning */
|
||||||
|
@ -347,9 +371,12 @@ tab {
|
||||||
.tab-background[selected=true] {
|
.tab-background[selected=true] {
|
||||||
background-color: var(--gnome-tabbar-tab-active-background) !important;
|
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 */
|
/* 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;
|
background-color: var(--gnome-tabbar-tab-active-hover-background) !important;
|
||||||
}
|
}
|
||||||
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]),
|
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]),
|
||||||
|
@ -361,6 +388,9 @@ tab {
|
||||||
background-color: var(--gnome-tabbar-tab-hover-background) !important;
|
background-color: var(--gnome-tabbar-tab-hover-background) !important;
|
||||||
border-image: none !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 */
|
/* Full width tabs */
|
||||||
.tabbrowser-tab:not([style^="max-width"]):not([pinned]),
|
.tabbrowser-tab:not([style^="max-width"]):not([pinned]),
|
||||||
|
@ -387,6 +417,12 @@ tab {
|
||||||
.tabbrowser-tab[class*="identity-color-"] .tab-label-container {
|
.tabbrowser-tab[class*="identity-color-"] .tab-label-container {
|
||||||
color: var(--identity-tab-color) !important;
|
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 */
|
/* Needs attetion tab indicator */
|
||||||
.tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]),
|
.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) {
|
:root:not(:-moz-window-inactive) .tabbrowser-tab:hover > .tab-stack > .tab-background:not(#hack) {
|
||||||
background: var(--gnome-tabbar-tab-active-background-contrast) !important;
|
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 */
|
/* OPTIONAL: Show the close button on the selected tab only */
|
||||||
|
@ -445,7 +485,7 @@ tab {
|
||||||
}
|
}
|
||||||
/* Hide the close button overlay on hover */
|
/* Hide the close button overlay on hover */
|
||||||
.tabbrowser-tab:not([pinned]):hover .tab-content::before {
|
.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 */
|
/* Reset the overflow position of the tab label container */
|
||||||
.tabbrowser-tab:not([pinned]):not([selected="true"]):hover .tab-label-container[textoverflow="true"] {
|
.tabbrowser-tab:not([pinned]):not([selected="true"]):hover .tab-label-container[textoverflow="true"] {
|
||||||
|
|
Loading…
Reference in New Issue