diff --git a/ags/style/_bar.scss b/ags/style/_bar.scss index 666cf8d..a7ec6fb 100644 --- a/ags/style/_bar.scss +++ b/ags/style/_bar.scss @@ -73,9 +73,17 @@ } } + &.show { + // Smooth showing + & label.id { + opacity: 1; + } + } + & label.id { font-weight: 600; margin-right: 4px; + opacity: 0; } & icon { @@ -235,15 +243,34 @@ & > box { border-radius: 12px; transition: 100ms linear; - padding: 0 8px; + min-width: 28px; + padding: 0 4px; - & > label { + & > icon { + transition: 120ms linear; font-size: 14px; } } &:hover { & > box { background: colors.$bg-primary; + + & > icon { + font-size: 15px; + -gtk-icon-transform: scale(1.12); + } + } + } + &:active { + & > box { + @include mixins.hover-shadow; + + background: colors.$bg-primary; + + & > icon { + font-size: 15px; + -gtk-icon-transform: scale(1); + } } } } diff --git a/ags/style/_control-center.scss b/ags/style/_control-center.scss index 1c19fd0..ddcdadc 100644 --- a/ags/style/_control-center.scss +++ b/ags/style/_control-center.scss @@ -72,12 +72,21 @@ box.history { border-radius: 24px; padding: 20px 14px; + & .notifications { + & .notification { + background: colors.$bg-primary; + } + } + & > .button-row { margin-top: 12px; & button { + padding: 6px; + & label.nf { font-size: 16px; } + & label:not(.nf) { font-size: 12px; font-weight: 600; diff --git a/ags/style/_wal.scss b/ags/style/_wal.scss index e6bc545..ae32603 100644 --- a/ags/style/_wal.scss +++ b/ags/style/_wal.scss @@ -1,26 +1,26 @@ // SCSS Variables // Generated by 'wal' -$wallpaper: "/home/joaov/wallpapers/Balcony Girl.png"; +$wallpaper: "/home/joaov/wallpapers/Gumi Bridge.jpg"; // Special -$background: #191c24; -$foreground: #c5c6c8; -$cursor: #c5c6c8; +$background: #253d36; +$foreground: #c8cecc; +$cursor: #c8cecc; // Colors -$color0: #191c24; -$color1: #6F7587; -$color2: #798C8F; -$color3: #9E9A99; -$color4: #C9B196; -$color5: #D1BAAA; -$color6: #DBC7A5; -$color7: #94969e; -$color8: #616777; -$color9: #7486c3; -$color10: #7dbac7; -$color11: #d2a495; -$color12: #dac4ab; -$color13: #e1cab9; -$color14: #e2d4bc; -$color15: #c5c6c8; +$color0: #253d36; +$color1: #2FA4CE; +$color2: #56B5D4; +$color3: #5FC1CA; +$color4: #63CBDF; +$color5: #B1BBA4; +$color6: #9BD7E1; +$color7: #9ca6a3; +$color8: #6c847e; +$color9: #77b0c5; +$color10: #8ebfcf; +$color11: #8ec9cf; +$color12: #9ccbd4; +$color13: #c5daab; +$color14: #badce1; +$color15: #c8cecc; diff --git a/ags/widget/bar/Apps.ts b/ags/widget/bar/Apps.ts index fe423cc..05cf9ba 100644 --- a/ags/widget/bar/Apps.ts +++ b/ags/widget/bar/Apps.ts @@ -7,11 +7,12 @@ export function Apps(): Gtk.Widget { onClickRelease: () => Windows.getWindow("apps-window")?.show(), className: "apps", child: new Widget.Box({ - child: new Widget.Label({ - className: "nf", + child: new Widget.Icon({ tooltipText: tr("bar.apps.tooltip"), - label: "" - } as Widget.LabelProps) + icon: "applications-other-symbolic", + halign: Gtk.Align.CENTER, + hexpand: true + } as Widget.IconProps) } as Widget.BoxProps) } as Widget.EventBoxProps); } diff --git a/ags/widget/bar/Workspaces.ts b/ags/widget/bar/Workspaces.ts index 8298af7..73e8b54 100644 --- a/ags/widget/bar/Workspaces.ts +++ b/ags/widget/bar/Workspaces.ts @@ -19,8 +19,12 @@ export function Workspaces(): Gtk.Widget { return sortedWorkspaces.map((workspace: AstalHyprland.Workspace) => new Widget.Button({ - className: bind(hyprland, "focusedWorkspace").as( - (focusedWs: AstalHyprland.Workspace) => workspace.id === focusedWs.id ? "focus" : ""), + className: Variable.derive([ + bind(hyprland, "focusedWorkspace"), + showWorkspaceNumbers() + ], (focusedWs, showWsNumbers) => + `${focusedWs.id === workspace.id ? "focus" : ""} ${showWsNumbers ? "show" : ""}` + )(), visible: true, tooltipText: bind(workspace, "lastClient").as((lastClient) => `Workspace ${workspace.id}${ lastClient ? ` - ${ !lastClient.title.toLowerCase().includes(lastClient.class) ? diff --git a/ags/widget/control-center/NotifHistory.ts b/ags/widget/control-center/NotifHistory.ts index 6e1420b..c5924b9 100644 --- a/ags/widget/control-center/NotifHistory.ts +++ b/ags/widget/control-center/NotifHistory.ts @@ -29,7 +29,7 @@ export const NotifHistory: Gtk.Widget = new Widget.Box({ valign: Gtk.Align.START, children: bind(Notifications.getDefault(), "history").as((history: Array) => history.map((notification: HistoryNotification) => NotificationWidget(notification, - () => Notifications.getDefault().removeHistory(notification.id)) + () => Notifications.getDefault().removeHistory(notification.id), true) )) } as Widget.BoxProps) } as Widget.ScrollableProps),