From d06784958d73159b5e4abafe5114804662114ed7 Mon Sep 17 00:00:00 2001 From: Ryan Schanzenbacher Date: Thu, 9 Jul 2026 22:15:53 -0400 Subject: move ubersicht modules in tree --- .../lib/styles/components/data/notifications.js | 68 ++++++++++++++++++++++ 1 file changed, 68 insertions(+) create mode 100755 users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/notifications.js (limited to 'users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/notifications.js') diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/notifications.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/notifications.js new file mode 100755 index 0000000..a1008c8 --- /dev/null +++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/notifications.js @@ -0,0 +1,68 @@ +// Styles for /lib/components/data/notifications.jsx component +export const notificationsStyles = /* css */ ` +.notifications { + display: flex; + align-items: center; + gap: 5px; + margin-left: 5px; +} +.notification-pill { + display: flex; + align-items: center; + gap: 5px; + padding: 7px 8px; + background-color: var(--red); + border: none; + border-radius: var(--item-radius); + color: var(--white); + font-family: inherit; + font-size: 11px; + cursor: pointer; + transition: background-color 160ms var(--transition-easing), + transform 160ms var(--transition-easing); +} +.notification-pill:hover { + filter: brightness(1.2); + transform: translateY(-1px); +} +.notification-pill:active { + transform: translateY(0); +} +.notification-pill:focus { + outline: none; + box-shadow: var(--focus-ring); +} +.simple-bar--no-color-in-data .notification-pill { + background-color: var(--minor); + color: var(--foreground); +} +.simple-bar--widgets-background-color-as-foreground .notification-pill { + background-color: transparent; + color: var(--red); + border: 1px solid var(--red); +} +.simple-bar--widgets-background-color-as-foreground .notification-pill:hover { + background-color: var(--red); + color: var(--white); +} +.notification-pill__icon { + width: 14px; + height: 14px; + fill: currentColor; + flex-shrink: 0; +} +.notification-pill__badge { + background-color: rgba(0, 0, 0, 0.3); + color: var(--white); + padding: 1px 5px; + border-radius: 6px; + font-size: 10px; + font-weight: 600; + min-width: 8px; + text-align: center; +} +.simple-bar--widgets-background-color-as-foreground .notification-pill__badge { + background-color: var(--red); + color: var(--white); +} +`; -- cgit v1.3