jarno
/
firefox-gnome-theme
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Tabsbar: Use mask-image and get rid of custom close button overlay 

Update colors to use transparent white/black for tabs bg so no need to
manually calculate the tabs colors

Closes #452
This commit is contained in:
Rafael Mardojai CM 2022-10-11 12:48:28 -05:00
parent 66653c7481
commit cd3a91cd27
No known key found for this signature in database
GPG Key ID: 2B2DAB2A58566C84
3 changed files with 12 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
theme/colors/dark.css
View File

@ -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;

12
theme/colors/light.css
View File

@ -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 */

43
theme/parts/tabsbar.css
View File

@ -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"] {