diff --git a/ags/style/_bar.scss b/ags/style/_bar.scss index 73b7265..914cad2 100644 --- a/ags/style/_bar.scss +++ b/ags/style/_bar.scss @@ -59,19 +59,23 @@ @include mixins.reset-props; padding: 0 4px; - & button { - border-radius: 16px; - transition: 80ms linear; - min-width: 15px; - padding: 0 6px; - background: colors.$bg-tertiary; - margin: 3px 0; + & > eventbox { + & > box { + margin: 3px 0; + border-radius: 16px; + transition: 80ms linear; + min-width: 15px; + padding: 0 6px; + background: colors.$bg-tertiary; - &:not(.focus) { - @include mixins.hover-shadow2; + & label.id { + font-weight: 600; + margin-right: 4px; + opacity: 0; + } } - &.focus { + &.focus > box { background: colors.$fg-primary; min-width: 32px; @@ -81,29 +85,26 @@ } } - &.show { - // Smooth showing - & label.id { - opacity: 1; - } - } - - & label.id { - font-weight: 600; - margin-right: 4px; - opacity: 0; - } - & icon { font-size: 16px; } + + &.show label.id { + opacity: 1; + } + + &:hover > box { + box-shadow: inset 0 0 0 100px rgba($color: colors.$fg-primary, $alpha: .2); + } } &.special-workspaces { - & button { - background: wal.$color4; + & > eventbox { + & box { + background: wal.$color4; + } - &:hover { + &:hover > box { background: functions.toRGB(color.adjust(wal.$color4, $lightness: -6%)); } } diff --git a/ags/style/_center-window.scss b/ags/style/_center-window.scss index 32501eb..c27d1c0 100644 --- a/ags/style/_center-window.scss +++ b/ags/style/_center-window.scss @@ -119,6 +119,10 @@ background: transparent; box-shadow: 0 2px 0 -1px rgba(colors.$bg-secondary, .5); } + + &:focus { + outline: 1px white; + } } } } diff --git a/ags/style/_wal.scss b/ags/style/_wal.scss index 0d7b0c8..5c9c132 100644 --- a/ags/style/_wal.scss +++ b/ags/style/_wal.scss @@ -1,26 +1,26 @@ // SCSS Variables // Generated by 'wal' -$wallpaper: "/home/joaov/wallpapers/Gumi Street Bike.jpg"; +$wallpaper: "/home/joaov/wallpapers/Bocchi The Rock!.png"; // Special -$background: #0d101f; -$foreground: #c2c3c7; -$cursor: #c2c3c7; +$background: #0a0a0c; +$foreground: #c1c1c2; +$cursor: #c1c1c2; // Colors -$color0: #0d101f; -$color1: #425169; -$color2: #4b756e; -$color3: #488389; -$color4: #708078; -$color5: #7a997b; -$color6: #9ba287; -$color7: #90929b; -$color8: #5c6071; -$color9: #586C8C; -$color10: #649D93; -$color11: #60AFB7; -$color12: #96ABA0; -$color13: #A3CCA4; -$color14: #CFD8B4; -$color15: #c2c3c7; +$color0: #0a0a0c; +$color1: #935d6d; +$color2: #967e84; +$color3: #ac8486; +$color4: #bcae7a; +$color5: #a49c9c; +$color6: #bcb79c; +$color7: #8a8a96; +$color8: #565669; +$color9: #C57C92; +$color10: #C9A9B0; +$color11: #E6B1B3; +$color12: #FBE8A3; +$color13: #DBD1D0; +$color14: #FBF5D1; +$color15: #c1c1c2; diff --git a/ags/widget/bar/SpecialWorkspaces.ts b/ags/widget/bar/SpecialWorkspaces.ts index 1083651..312d1b4 100644 --- a/ags/widget/bar/SpecialWorkspaces.ts +++ b/ags/widget/bar/SpecialWorkspaces.ts @@ -12,29 +12,31 @@ export const SpecialWorkspaces: (() => Gtk.Widget) = () => new Widget.EventBox({ spacing: 4, children: bind(AstalHyprland.get_default(), "workspaces").as((workspaces) => workspaces.filter(ws => ws.id < 0).sort((a, b) => a.id - b.id).map((workspace) => - new Widget.Button({ + new Widget.EventBox({ className: bind(AstalHyprland.get_default(), "focusedWorkspace").as(focusWs => `${focusWs.id === workspace.id ? "focus" : ""}`), tooltipText: bind(workspace, "name").as((name) => { name = name.replace(/^special\:/, ""); return name.charAt(0).toUpperCase().concat(name.substring(1, name.length)); }), - child: new Widget.Icon({ - className: "last-app-icon", - visible: Variable.derive([ - bind(workspace, "lastClient"), - bind(AstalHyprland.get_default(), "focusedWorkspace") - ], (lastClient, focusedWorkspace) => focusedWorkspace?.id === workspace.id ? - false : Boolean(lastClient))(), - icon: bind(workspace, "lastClient").as((lastClient) => - lastClient ? - getAppIcon(lastClient.initialClass) || "image-missing" - : "image-missing") - } as Widget.IconProps), - onClicked: () => AstalHyprland.get_default().dispatch( + child: new Widget.Box({ + child: new Widget.Icon({ + className: "last-app-icon", + visible: Variable.derive([ + bind(workspace, "lastClient"), + bind(AstalHyprland.get_default(), "focusedWorkspace") + ], (lastClient, focusedWorkspace) => focusedWorkspace?.id === workspace.id ? + false : Boolean(lastClient))(), + icon: bind(workspace, "lastClient").as((lastClient) => + lastClient ? + getAppIcon(lastClient.initialClass) || "image-missing" + : "image-missing") + } as Widget.IconProps) + } as Widget.BoxProps), + onClickRelease: () => AstalHyprland.get_default().dispatch( "togglespecialworkspace", workspace.name.replace(/^special\:/, "") ) - } as Widget.ButtonProps) + } as Widget.EventBoxProps) ) ) } as Widget.BoxProps) diff --git a/ags/widget/bar/Workspaces.ts b/ags/widget/bar/Workspaces.ts index 532e0ff..0847762 100644 --- a/ags/widget/bar/Workspaces.ts +++ b/ags/widget/bar/Workspaces.ts @@ -23,23 +23,24 @@ export function Workspaces(): Gtk.Widget { (a: AstalHyprland.Workspace, b: AstalHyprland.Workspace) => a.get_id() - b.get_id()); return sortedWorkspaces.map((workspace: AstalHyprland.Workspace) => - new Widget.Button({ + new Widget.EventBox({ className: Variable.derive([ bind(hyprland, "focusedWorkspace"), showWorkspaceNumbers() ], (focusedWs, showWsNumbers) => `${focusedWs.id === workspace.id ? "focus" : ""} ${showWsNumbers ? "show" : ""}` )(), - visible: true, + onClickRelease: () => workspace.focus(), tooltipText: Variable.derive([ bind(workspace, "lastClient"), bind(hyprland, "focusedWorkspace") - ],(lastClient, focusWs) => focusWs.id === workspace.id ? "" : + ], (lastClient, focusWs) => focusWs.id === workspace.id ? "" : `Workspace ${workspace.id}${ lastClient ? ` - ${ - !lastClient.title.toLowerCase().includes(lastClient.class) ? - `${lastClient.get_class()}: ` - : "" - } ${lastClient.title}` : "" }`)(), + !lastClient.title.toLowerCase().includes(lastClient.class) ? + `${lastClient.get_class()}: ` + : "" + } ${lastClient.title}` : "" }` + )(), child: new Widget.Box({ children: bind(workspace, "lastClient").as((lastClient) => [ new Widget.Revealer({ @@ -49,8 +50,7 @@ export function Workspaces(): Gtk.Widget { child: new Widget.Label({ label: bind(workspace, "id").as(String), className: "id", - xalign: 0.5, - hexpand: true, + hexpand: true } as Widget.LabelProps) } as Widget.RevealerProps), new Widget.Icon({ @@ -65,9 +65,8 @@ export function Workspaces(): Gtk.Widget { : undefined } as Widget.IconProps) ]) - } as Widget.BoxProps), - onClicked: () => workspace.focus() - } as Widget.ButtonProps) + } as Widget.BoxProps) + } as Widget.EventBoxProps) ) }) } as Widget.BoxProps)