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..4a38448fe 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,23 @@ body.layout-horizontal > .horizontal { font-size: var(--launcher-pane-icon-size) !important; } +#launcher-pane .launcher-button:focus, +#launcher-pane .global-menu button:focus { + outline: none; +} + +#launcher-pane .launcher-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); }