From b95b7460eacb6e83d8564f1c1ddcdb10bd40af22 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Fri, 24 Apr 2026 18:50:33 +0300 Subject: [PATCH] feat(ckeditor): improve the style of keyboard shortcuts --- .../client/src/stylesheets/theme-next-dark.css | 6 +++--- .../src/stylesheets/theme-next-light.css | 4 ++-- .../src/stylesheets/theme-next/dialogs.css | 18 +++++++++++++----- 3 files changed, 18 insertions(+), 10 deletions(-) diff --git a/apps/client/src/stylesheets/theme-next-dark.css b/apps/client/src/stylesheets/theme-next-dark.css index 1705dc2b76..75957d0d02 100644 --- a/apps/client/src/stylesheets/theme-next-dark.css +++ b/apps/client/src/stylesheets/theme-next-dark.css @@ -278,9 +278,9 @@ --help-card-background: var(--card-background-color); --help-card-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2); --help-card-heading-color: #959595; - --help-kbd-shortcut-color: white; - --help-kbd-shortcut-background: #676767; - --help-kbd-shortcut-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); + --help-kbd-shortcut-color: #e0e0e0; + --help-kbd-shortcut-background: #4a4a4a; + --help-kbd-shortcut-border: #3a3a3a; --help-code-color: inherit; --help-code-background: #565656; diff --git a/apps/client/src/stylesheets/theme-next-light.css b/apps/client/src/stylesheets/theme-next-light.css index 05211e4e02..7999482044 100644 --- a/apps/client/src/stylesheets/theme-next-light.css +++ b/apps/client/src/stylesheets/theme-next-light.css @@ -278,8 +278,8 @@ --help-card-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1); --help-card-heading-color: #797979; --help-kbd-shortcut-color: #3f3f3f; - --help-kbd-shortcut-background: white; - --help-kbd-shortcut-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); + --help-kbd-shortcut-background: #f5f5f5; + --help-kbd-shortcut-border: #c9c9c9; --help-code-color: black; --help-code-background: #d7d5d5; diff --git a/apps/client/src/stylesheets/theme-next/dialogs.css b/apps/client/src/stylesheets/theme-next/dialogs.css index 94b6ff21a1..9e21b6e844 100644 --- a/apps/client/src/stylesheets/theme-next/dialogs.css +++ b/apps/client/src/stylesheets/theme-next/dialogs.css @@ -373,15 +373,23 @@ div.tn-tool-dialog { /* Keyboard shortcut */ .help-dialog .help-cards kbd, .ck-content kbd { - box-shadow: var(--help-kbd-shortcut-shadow); + display: inline-block; margin: 0 4px; - border: none; - border-radius: 4px; - padding: 2px 10px; + border: 1px solid var(--help-kbd-shortcut-border); + border-radius: 5px; + padding: 2px 8px; background: var(--help-kbd-shortcut-background); + box-shadow: + 0 2px 0 var(--help-kbd-shortcut-border), + inset 0 -1px 0 var(--help-kbd-shortcut-border); color: var(--help-kbd-shortcut-color); - font-weight: 500; + font-family: var(--main-font-family) !important; + font-size: 0.75em; + font-weight: normal; + line-height: 1.4; letter-spacing: 0.5pt; + vertical-align: middle; + white-space: nowrap; } .help-dialog .help-cards kbd:first-child {