From 66047e35696485f929e8724fd820ee7c5ce8a034 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Thu, 22 May 2025 19:02:30 +0300 Subject: [PATCH] style(next)/formatting toolbar: show the focus rectangle only when it is necessary --- apps/client/src/stylesheets/theme-next/notes/text.css | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/apps/client/src/stylesheets/theme-next/notes/text.css b/apps/client/src/stylesheets/theme-next/notes/text.css index a82a9556c..b214cf4f5 100644 --- a/apps/client/src/stylesheets/theme-next/notes/text.css +++ b/apps/client/src/stylesheets/theme-next/notes/text.css @@ -20,7 +20,7 @@ --ck-color-button-on-background: transparent; --ck-color-button-on-hover-background: var(--hover-item-background-color); - --ck-focus-ring: 1px solid transparent; /* TODO: Find a solution to keep it visible in an elegant way */ + --ck-focus-ring: 1px solid transparent; --ck-color-focus-border: var(--input-focus-outline-color); --ck-focus-outer-shadow: none; --ck-focus-disabled-outer-shadow: none; @@ -54,6 +54,11 @@ opacity: .75; } +/* Focus visible */ +.ck.ck-toolbar .ck-button:focus-visible { + --ck-focus-ring: 1px solid var(--input-focus-outline-color); +} + /* * Dropdowns */