From eb13b34429687100015df8d18062660c85aeacf0 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Wed, 19 Mar 2025 18:02:58 +0200 Subject: [PATCH 1/3] style(next)/launcher bar: use a custom focus rectangle for buttons --- src/public/stylesheets/theme-next-dark.css | 2 ++ src/public/stylesheets/theme-next-light.css | 2 ++ src/public/stylesheets/theme-next/shell.css | 10 ++++++++++ 3 files changed, 14 insertions(+) diff --git a/src/public/stylesheets/theme-next-dark.css b/src/public/stylesheets/theme-next-dark.css index cc76582aa..c7dc1846f 100644 --- a/src/public/stylesheets/theme-next-dark.css +++ b/src/public/stylesheets/theme-next-dark.css @@ -136,6 +136,7 @@ --launcher-pane-vert-button-hover-color: #ffffff; --launcher-pane-vert-button-hover-background: #ffffff1c; --launcher-pane-vert-button-hover-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2); + --launcher-pane-vert-button-focus-outline-color: var(--input-focus-outline-color); --launcher-pane-horiz-border-color: rgb(22, 22, 22); --launcher-pane-horiz-background-color: #282828; @@ -143,6 +144,7 @@ --launcher-pane-horiz-button-hover-color: #ffffff; --launcher-pane-horiz-button-hover-background: #ffffff1c; --launcher-pane-horiz-button-hover-shadow: unset; + --launcher-pane-horiz-button-focus-outline-color: var(--input-focus-outline-color); --protected-session-active-icon-color: #8edd8e; --sync-status-error-pulse-color: #f47871; diff --git a/src/public/stylesheets/theme-next-light.css b/src/public/stylesheets/theme-next-light.css index 67d4437db..7c4eff5be 100644 --- a/src/public/stylesheets/theme-next-light.css +++ b/src/public/stylesheets/theme-next-light.css @@ -130,12 +130,14 @@ --launcher-pane-vert-button-hover-color: black; --launcher-pane-vert-button-hover-background: white; --launcher-pane-vert-button-hover-shadow: 4px 4px 4px rgba(0, 0, 0, 0.075); + --launcher-pane-vert-button-focus-outline-color: var(--input-focus-outline-color); --launcher-pane-horiz-border-color: rgba(0, 0, 0, 0.1); --launcher-pane-horiz-background-color: #fafafa; --launcher-pane-horiz-button-hover-color: black; --launcher-pane-horiz-button-hover-background: var(--icon-button-hover-background); --launcher-pane-horiz-button-hover-shadow: unset; + --launcher-pane-horiz-button-focus-outline-color: var(--input-focus-outline-color); --protected-session-active-icon-color: #16b516; --sync-status-error-pulse-color: #ff5528; diff --git a/src/public/stylesheets/theme-next/shell.css b/src/public/stylesheets/theme-next/shell.css index 52a8d99a5..2484b3fff 100644 --- a/src/public/stylesheets/theme-next/shell.css +++ b/src/public/stylesheets/theme-next/shell.css @@ -151,6 +151,7 @@ body.layout-horizontal > .horizontal { --launcher-pane-button-hover-color: var(--launcher-pane-vert-button-hover-color); --launcher-pane-button-hover-background: var(--launcher-pane-vert-button-hover-background); --launcher-pane-button-hover-shadow: var(--launcher-pane-vert-button-hover-shadow); + --launcher-pane-button-focus-outline-color: var(--launcher-pane-vert-button-focus-outline-color); --launcher-pane-size: var(--launcher-pane-vert-size); --launcher-pane-icon-size: var(--launcher-pane-vert-icon-size); @@ -168,6 +169,7 @@ body.layout-horizontal > .horizontal { --launcher-pane-button-hover-color: var(--launcher-pane-horiz-button-hover-color); --launcher-pane-button-hover-background: var(--launcher-pane-horiz-button-hover-background); --launcher-pane-button-hover-shadow: var(--launcher-pane-horiz-button-hover-shadow); + --launcher-pane-button-focus-outline-color: var(--launcher-pane-horiz-button-focus-outline-color); --launcher-pane-size: var(--launcher-pane-horiz-size); --launcher-pane-icon-size: var(--launcher-pane-horiz-icon-size); @@ -245,6 +247,14 @@ body.layout-horizontal > .horizontal { font-size: var(--launcher-pane-icon-size) !important; } +#launcher-pane .launcher-button:focus { + outline: none; +} + +#launcher-pane .launcher-button:focus-visible { + outline: 2px solid var(--launcher-pane-button-focus-outline-color); +} + #launcher-pane.vertical .spacer { width: var(--launcher-pane-size); } From c93ac0445e0f6029b6d88a55b007732ec60da407 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Wed, 19 Mar 2025 18:10:54 +0200 Subject: [PATCH 2/3] style(next)/launcher bar: use a custom focus rectangle for the global menu button --- src/public/stylesheets/theme-next/shell.css | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/public/stylesheets/theme-next/shell.css b/src/public/stylesheets/theme-next/shell.css index 2484b3fff..eff29a202 100644 --- a/src/public/stylesheets/theme-next/shell.css +++ b/src/public/stylesheets/theme-next/shell.css @@ -247,11 +247,13 @@ body.layout-horizontal > .horizontal { font-size: var(--launcher-pane-icon-size) !important; } -#launcher-pane .launcher-button:focus { +#launcher-pane .launcher-button:focus, +#launcher-pane .global-menu button:focus { outline: none; } -#launcher-pane .launcher-button:focus-visible { +#launcher-pane .launcher-button:focus-visible, +#launcher-pane .global-menu button:focus-visible { outline: 2px solid var(--launcher-pane-button-focus-outline-color); } From f14c101d6dff3b44e30a8f61ad1bdb7420170775 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Wed, 19 Mar 2025 18:26:13 +0200 Subject: [PATCH 3/3] style(next)/launcher bar: fix the focus outline for the global menu on the vertical layout --- src/public/stylesheets/theme-next/shell.css | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/public/stylesheets/theme-next/shell.css b/src/public/stylesheets/theme-next/shell.css index eff29a202..4a38448fe 100644 --- a/src/public/stylesheets/theme-next/shell.css +++ b/src/public/stylesheets/theme-next/shell.css @@ -253,10 +253,17 @@ body.layout-horizontal > .horizontal { } #launcher-pane .launcher-button:focus-visible, -#launcher-pane .global-menu button:focus-visible { +#launcher-pane.horizontal .global-menu button:focus-visible { outline: 2px solid var(--launcher-pane-button-focus-outline-color); } +#launcher-pane.vertical .global-menu button:focus-visible svg { + outline-offset: 4px; + outline: 2px solid var(--launcher-pane-button-focus-outline-color); + border-radius: 4px; + overflow: visible; +} + #launcher-pane.vertical .spacer { width: var(--launcher-pane-size); }