tabsbar: Revamp needs attention indicator

Style closest to libadwaita also adding transition animation
This commit is contained in:
Cleo Menezes Jr 2023-12-09 00:11:01 -03:00 committed by Rafael Mardojai CM
parent b4d1b493d5
commit 4e2e05542b
No known key found for this signature in database
GPG Key ID: 2B2DAB2A58566C84
2 changed files with 17 additions and 5 deletions

View File

@ -123,7 +123,7 @@
--gnome-tabbar-tab-active-background: #ebebeb; /* Hardcoded color */ --gnome-tabbar-tab-active-background: #ebebeb; /* Hardcoded color */
--gnome-tabbar-tab-active-background-contrast: #c0c0c0; /* Hardcoded color */ --gnome-tabbar-tab-active-background-contrast: #c0c0c0; /* Hardcoded color */
--gnome-tabbar-tab-active-hover-background: #e4e4e4; /* Hardcoded color */ --gnome-tabbar-tab-active-hover-background: #e4e4e4; /* Hardcoded color */
--gnome-tabbar-tab-needs-attetion: var(--gnome-accent); --gnome-tabbar-tab-needs-attetion: var(--gnome-palette-blue-2);
--gnome-tabbar-identity-color-blue: var(--gnome-accent); --gnome-tabbar-identity-color-blue: var(--gnome-accent);
--gnome-tabbar-identity-color-turquoise: #00c79a; --gnome-tabbar-identity-color-turquoise: #00c79a;

View File

@ -450,11 +450,23 @@ tab {
} }
/* 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,
.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) { .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged] {
background-image: radial-gradient(var(--gnome-tabbar-tab-needs-attetion), var(--gnome-tabbar-tab-needs-attetion) 10px) !important; background-size: 0px 0px !important;
background-position: center bottom !important; background-position: center bottom !important;
background-size: 14px 2px !important; transition-property: background-size;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected]),
.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]) {
background-image: radial-gradient(var(--gnome-tabbar-tab-needs-attetion), var(--gnome-tabbar-tab-needs-attetion) 10px) !important;
background-size: clamp(20%, 50%, 7rem) 2px !important;
}
.tab-label[attention]:not([selected]) {
font-weight: normal !important;
} }
/* Tab spinner */ /* Tab spinner */