tabsbar: Revamp needs attention indicator
Style closest to libadwaita also adding transition animation
This commit is contained in:
parent
b4d1b493d5
commit
4e2e05542b
|
@ -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;
|
||||||
|
|
|
@ -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 */
|
||||||
|
|
Loading…
Reference in New Issue