From 4e2e05542b73c820463c203e3827186e32b3997e Mon Sep 17 00:00:00 2001 From: Cleo Menezes Jr Date: Sat, 9 Dec 2023 00:11:01 -0300 Subject: [PATCH] tabsbar: Revamp needs attention indicator Style closest to libadwaita also adding transition animation --- theme/colors/light.css | 2 +- theme/parts/tabsbar.css | 20 ++++++++++++++++---- 2 files changed, 17 insertions(+), 5 deletions(-) diff --git a/theme/colors/light.css b/theme/colors/light.css index 321e7ea..552ba1d 100644 --- a/theme/colors/light.css +++ b/theme/colors/light.css @@ -123,7 +123,7 @@ --gnome-tabbar-tab-active-background: #ebebeb; /* Hardcoded color */ --gnome-tabbar-tab-active-background-contrast: #c0c0c0; /* 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-turquoise: #00c79a; diff --git a/theme/parts/tabsbar.css b/theme/parts/tabsbar.css index d9efc62..28f3558 100644 --- a/theme/parts/tabsbar.css +++ b/theme/parts/tabsbar.css @@ -450,11 +450,23 @@ tab { } /* Needs attetion tab indicator */ -.tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]), -.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) { - background-image: radial-gradient(var(--gnome-tabbar-tab-needs-attetion), var(--gnome-tabbar-tab-needs-attetion) 10px) !important; +.tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content, +.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged] { + background-size: 0px 0px !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 */