From caf9b92db5ca2c81150eb559a157b5fb35cf5154 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Wed, 8 Jan 2025 21:35:43 +0200
Subject: [PATCH 01/10] style(next): restyle the help cards

---
 src/public/stylesheets/theme-next/shell.css | 46 +++++++++++++++++++++
 1 file changed, 46 insertions(+)

diff --git a/src/public/stylesheets/theme-next/shell.css b/src/public/stylesheets/theme-next/shell.css
index 4a904ae57..268b6f3a9 100644
--- a/src/public/stylesheets/theme-next/shell.css
+++ b/src/public/stylesheets/theme-next/shell.css
@@ -1559,4 +1559,50 @@ body .calendar-dropdown-widget .calendar-body a:hover {
 .search-result-widget-content .note-path {
     opacity: .75;
     font-weight: normal;
+}
+
+/* Help */
+
+.help-dialog .card {
+    margin: 0;
+    border: none;
+    padding: 8px;
+    background: unset;
+}
+
+.help-dialog .card-body {
+    box-shadow: 2px 2px 2px rgba(0, 0, 0, .10);
+    border-radius: 6px;
+    background: var(--card-background-color);
+}
+
+.help-dialog .card-body h5 {
+    color: #797979;
+    font-size: 20px;
+    font-weight: 600;
+}
+
+.help-dialog .help-cards ul {
+    list-style-type: none;
+    padding: 0;
+}
+
+.help-dialog .help-cards li + li {
+    margin-top: .4em;
+}
+
+.help-dialog .help-cards kbd {
+    box-shadow: 1px 1px 2px rgba(0, 0, 0, .3);
+    margin: 0 4px;
+    border: none;
+    border-radius: 4px;
+    padding: 2px 10px;
+    background: white;
+    color: #3f3f3f;
+    font-weight: 500;
+    letter-spacing: .5pt;
+}
+
+.help-dialog .help-cards kbd:first-child {
+    margin-left: 0;
 }
\ No newline at end of file

From b86cd01169c27d66b6c2708d4a021150c184d07b Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Wed, 8 Jan 2025 21:42:21 +0200
Subject: [PATCH 02/10] style(next): turn "Only in desktop" into a subheading

---
 src/public/app/widgets/dialogs/help.ts      |  3 +--
 src/public/stylesheets/theme-next/shell.css | 14 ++++++++++++--
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/public/app/widgets/dialogs/help.ts b/src/public/app/widgets/dialogs/help.ts
index e3286db65..d31e11029 100644
--- a/src/public/app/widgets/dialogs/help.ts
+++ b/src/public/app/widgets/dialogs/help.ts
@@ -39,8 +39,7 @@ const TPL = `
                             <ul>
                                 <li>${t('help.newTabNoteLink')}</li>
                             </ul>
-
-                            ${t('help.onlyInDesktop')}:
+                            <h6>${t('help.onlyInDesktop')}:</h6>
                             <ul>
                                 <li><kbd data-command="openNewTab">${t('help.notSet')}</kbd> ${t('help.openEmptyTab')}</li>
                                 <li><kbd data-command="closeActiveTab">${t('help.notSet')}</kbd> ${t('help.closeActiveTab')}</li>
diff --git a/src/public/stylesheets/theme-next/shell.css b/src/public/stylesheets/theme-next/shell.css
index 268b6f3a9..d2d9c9ea4 100644
--- a/src/public/stylesheets/theme-next/shell.css
+++ b/src/public/stylesheets/theme-next/shell.css
@@ -1576,12 +1576,22 @@ body .calendar-dropdown-widget .calendar-body a:hover {
     background: var(--card-background-color);
 }
 
-.help-dialog .card-body h5 {
+.help-dialog .card-body h5,
+.help-dialog .card-body h6 {
     color: #797979;
-    font-size: 20px;
     font-weight: 600;
 }
 
+.help-dialog .card-body h5 {
+    font-size: 20px;
+}
+
+.help-dialog .card-body h6 {
+    font-size: 15px;
+    padding-bottom: .5em;
+}
+
+
 .help-dialog .help-cards ul {
     list-style-type: none;
     padding: 0;

From c23890594fb0a8a912bf9c4745837b2ecd352162 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Wed, 8 Jan 2025 22:02:14 +0200
Subject: [PATCH 03/10] translations: replace the <kbd> tag with <code> for
 Markdown examples

---
 src/public/translations/cn/translation.json | 8 ++++----
 src/public/translations/de/translation.json | 8 ++++----
 src/public/translations/en/translation.json | 8 ++++----
 src/public/translations/es/translation.json | 8 ++++----
 src/public/translations/fr/translation.json | 8 ++++----
 src/public/translations/ro/translation.json | 8 ++++----
 src/public/translations/tw/translation.json | 8 ++++----
 7 files changed, 28 insertions(+), 28 deletions(-)

diff --git a/src/public/translations/cn/translation.json b/src/public/translations/cn/translation.json
index 4e732afaa..78280f529 100644
--- a/src/public/translations/cn/translation.json
+++ b/src/public/translations/cn/translation.json
@@ -152,10 +152,10 @@
     "insertDateTime": "在插入点插入当前日期和时间",
     "jumpToTreePane": "跳转到树面板并滚动到活动笔记",
     "markdownAutoformat": "类Markdown自动格式化",
-    "headings": "<kbd>##</kbd>, <kbd>###</kbd>, <kbd>####</kbd>  等，后跟空格，自动转换为标题",
-    "bulletList": "<kbd>*</kbd> 或 <kbd>-</kbd> 后跟空格，自动转换为项目符号列表",
-    "numberedList": "<kbd>1.</kbd> or <kbd>1)</kbd> 后跟空格，自动转换为编号列表",
-    "blockQuote": "一行以 <kbd>></kbd> 开头并后跟空格，自动转换为块引用",
+    "headings": "<code>##</code>, <code>###</code>, <code>####</code>  等，后跟空格，自动转换为标题",
+    "bulletList": "<code>*</code> 或 <code>-</code> 后跟空格，自动转换为项目符号列表",
+    "numberedList": "<code>1.</code> or <code>1)</code> 后跟空格，自动转换为编号列表",
+    "blockQuote": "一行以 <code>></code> 开头并后跟空格，自动转换为块引用",
     "troubleshooting": "故障排除",
     "reloadFrontend": "重新加载Trilium前端",
     "showDevTools": "显示开发者工具",
diff --git a/src/public/translations/de/translation.json b/src/public/translations/de/translation.json
index 9a1d266f9..838cd50f6 100644
--- a/src/public/translations/de/translation.json
+++ b/src/public/translations/de/translation.json
@@ -143,10 +143,10 @@
     "insertDateTime": "Gebe das aktuelle Datum und die aktuelle Uhrzeit an der Einfügemarke ein",
     "jumpToTreePane": "Springe zum Baumbereich und scrolle zur aktiven Notiz",
     "markdownAutoformat": "Markdown-ähnliche Autoformatierung",
-    "headings": "<kbd>##</kbd>, <kbd>###</kbd>, <kbd>####</kbd> usw. gefolgt von Platz für Überschriften",
-    "bulletList": "<kbd>*</kbd> oder <kbd>-</kbd> gefolgt von Leerzeichen für Aufzählungsliste",
-    "numberedList": "<kbd>1.</kbd> oder <kbd>1)</kbd> gefolgt von Leerzeichen für nummerierte Liste",
-    "blockQuote": "Beginne eine Zeile mit <kbd>></kbd> gefolgt von einem Leerzeichen für Blockzitate",
+    "headings": "<code>##</code>, <code>###</code>, <code>####</code> usw. gefolgt von Platz für Überschriften",
+    "bulletList": "<code>*</code> oder <code>-</code> gefolgt von Leerzeichen für Aufzählungsliste",
+    "numberedList": "<code>1.</code> oder <code>1)</code> gefolgt von Leerzeichen für nummerierte Liste",
+    "blockQuote": "Beginne eine Zeile mit <code>></code> gefolgt von einem Leerzeichen für Blockzitate",
     "troubleshooting": "Fehlerbehebung",
     "reloadFrontend": "Trilium-Frontend neuladen",
     "showDevTools": "Entwicklertools anzeigen",
diff --git a/src/public/translations/en/translation.json b/src/public/translations/en/translation.json
index fc5885a8d..2ccc56270 100644
--- a/src/public/translations/en/translation.json
+++ b/src/public/translations/en/translation.json
@@ -153,10 +153,10 @@
     "insertDateTime": "insert current date and time at caret position",
     "jumpToTreePane": "jump away to the tree pane and scroll to active note",
     "markdownAutoformat": "Markdown-like autoformatting",
-    "headings": "<kbd>##</kbd>, <kbd>###</kbd>, <kbd>####</kbd>  etc. followed by space for headings",
-    "bulletList": "<kbd>*</kbd> or <kbd>-</kbd> followed by space for bullet list",
-    "numberedList": "<kbd>1.</kbd> or <kbd>1)</kbd> followed by space for numbered list",
-    "blockQuote": "start a line with <kbd>></kbd> followed by space for block quote",
+    "headings": "<code>##</code>, <code>###</code>, <code>####</code>  etc. followed by space for headings",
+    "bulletList": "<code>*</code> or <code>-</code> followed by space for bullet list",
+    "numberedList": "<code>1.</code> or <code>1)</code> followed by space for numbered list",
+    "blockQuote": "start a line with <code>></code> followed by space for block quote",
     "troubleshooting": "Troubleshooting",
     "reloadFrontend": "reload Trilium frontend",
     "showDevTools": "show developer tools",
diff --git a/src/public/translations/es/translation.json b/src/public/translations/es/translation.json
index ae642a968..9426c9254 100644
--- a/src/public/translations/es/translation.json
+++ b/src/public/translations/es/translation.json
@@ -153,10 +153,10 @@
     "insertDateTime": "insertar la fecha y hora actuales en la posición del cursor",
     "jumpToTreePane": "saltar al panel de árbol y desplazarse hasta la nota activa",
     "markdownAutoformat": "Autoformato tipo Markdown",
-    "headings": "<kbd>##</kbd>, <kbd>###</kbd>, <kbd>####</kbd>  etc. seguido de espacio para encabezados",
-    "bulletList": "<kbd>*</kbd> o <kbd>-</kbd> seguido de espacio para la lista de viñetas",
-    "numberedList": "<kbd>1.</kbd> o <kbd>1)</kbd> seguido de espacio para la lista numerada",
-    "blockQuote": "comience una línea con <kbd>></kbd> seguido de espacio para el bloque de cita",
+    "headings": "<code>##</code>, <code>###</code>, <code>####</code>  etc. seguido de espacio para encabezados",
+    "bulletList": "<code>*</code> o <code>-</code> seguido de espacio para la lista de viñetas",
+    "numberedList": "<code>1.</code> o <code>1)</code> seguido de espacio para la lista numerada",
+    "blockQuote": "comience una línea con <code>></code> seguido de espacio para el bloque de cita",
     "troubleshooting": "Solución de problemas",
     "reloadFrontend": "recargar la interfaz de Trilium",
     "showDevTools": "mostrar herramientas de desarrollador",
diff --git a/src/public/translations/fr/translation.json b/src/public/translations/fr/translation.json
index 04c8f7586..c3a080092 100644
--- a/src/public/translations/fr/translation.json
+++ b/src/public/translations/fr/translation.json
@@ -144,10 +144,10 @@
     "insertDateTime": "insérer la date et l'heure courante à la position du curseur",
     "jumpToTreePane": "passer au volet de l'arborescence et aller jusqu'à la note active",
     "markdownAutoformat": "Formatage automatique (comme Markdown)",
-    "headings": "<kbd>##</kbd>, <kbd>###</kbd>, <kbd>####</kbd>  etc. suivi d'un espace pour les titres",
-    "bulletList": "<kbd>*</kbd> ou <kbd>-</kbd> suivi d'un espace pour la liste à puces",
-    "numberedList": "<kbd>1.</kbd> ou <kbd>1)</kbd> suivi d'un espace pour la liste numérotée",
-    "blockQuote": "commencez une ligne avec <kbd>></kbd> suivi d'un espace pour les guillemets",
+    "headings": "<code>##</code>, <code>###</code>, <code>####</code>  etc. suivi d'un espace pour les titres",
+    "bulletList": "<code>*</code> ou <code>-</code> suivi d'un espace pour la liste à puces",
+    "numberedList": "<code>1.</code> ou <code>1)</code> suivi d'un espace pour la liste numérotée",
+    "blockQuote": "commencez une ligne avec <code>></code> suivi d'un espace pour les guillemets",
     "troubleshooting": "Dépannage",
     "reloadFrontend": "recharger l'interface Trilium",
     "showDevTools": "afficher les outils de développement",
diff --git a/src/public/translations/ro/translation.json b/src/public/translations/ro/translation.json
index e7e5f5520..827299e8d 100644
--- a/src/public/translations/ro/translation.json
+++ b/src/public/translations/ro/translation.json
@@ -599,8 +599,8 @@
   "help": {
     "activateNextTab": "activează următorul tab",
     "activatePreviousTab": "activează tabul anterior",
-    "blockQuote": "începeți un rând cu <kbd>></kbd> urmat de spațiu pentru un bloc de citat",
-    "bulletList": "<kbd>*</kbd> sau <kbd>-</kbd> urmat de spațiu pentru o listă punctată",
+    "blockQuote": "începeți un rând cu <code>></code> urmat de spațiu pentru un bloc de citat",
+    "bulletList": "<code>*</code> sau <code>-</code> urmat de spațiu pentru o listă punctată",
     "close": "Închide",
     "closeActiveTab": "închide tabul activ",
     "collapseExpand": "<kbd>LEFT</kbd>, <kbd>RIGHT</kbd> - minimizează/expandează nodul",
@@ -621,7 +621,7 @@
     "fullDocumentation": "Instrucțiuni (documentația completă se regăsește <a class=\"external\" href=\"https://triliumnext.github.io/Docs/\">online</a>)",
     "goBackForwards": "mergi înapoi/înainte în istoric",
     "goUpDown": "<kbd>UP</kbd>, <kbd>DOWN</kbd> - mergi sus/jos în lista de notițe",
-    "headings": "<kbd>##</kbd>, <kbd>###</kbd>, <kbd>####</kbd>  etc. urmat de spațiu pentru titluri",
+    "headings": "<code>##</code>, <code>###</code>, <code>####</code>  etc. urmat de spațiu pentru titluri",
     "inPageSearch": "caută în interiorul paginii",
     "insertDateTime": "inserează data și timpul curente la poziția cursorului",
     "jumpToParentNote": "<kbd>Backspace</kbd> - sari la pagina părinte",
@@ -634,7 +634,7 @@
     "newTabNoteLink": "<kbd>CTRL+clic</kbd> - (sau clic mijlociu) pe o legătură către o notiță va deschide notița într-un tab nou",
     "notSet": "nesetat",
     "noteNavigation": "Navigarea printre notițe",
-    "numberedList": "<kbd>1.</kbd> sau <kbd>1)</kbd> urmat de spațiu pentru o listă numerotată",
+    "numberedList": "<kbd>1.</code> sau <code>1)</code> urmat de spațiu pentru o listă numerotată",
     "onlyInDesktop": "Doar pentru desktop (aplicația Electron)",
     "openEmptyTab": "deschide un tab nou",
     "other": "Altele",
diff --git a/src/public/translations/tw/translation.json b/src/public/translations/tw/translation.json
index 8c516e3da..f75e418da 100644
--- a/src/public/translations/tw/translation.json
+++ b/src/public/translations/tw/translation.json
@@ -148,10 +148,10 @@
     "insertDateTime": "在插入點插入當前日期和時間",
     "jumpToTreePane": "跳轉到樹面板並滾動到活動筆記",
     "markdownAutoformat": "類Markdown自動格式化",
-    "headings": "<kbd>##</kbd>, <kbd>###</kbd>, <kbd>####</kbd>  等，後跟空格，自動轉換為標題",
-    "bulletList": "<kbd>*</kbd> 或 <kbd>-</kbd> 後跟空格，自動轉換為項目符號列表",
-    "numberedList": "<kbd>1.</kbd> or <kbd>1)</kbd> 後跟空格，自動轉換為編號列表",
-    "blockQuote": "一行以 <kbd>></kbd> 開頭並後跟空格，自動轉換為塊引用",
+    "headings": "<code>##</code>, <code>###</code>, <code>####</code>  等，後跟空格，自動轉換為標題",
+    "bulletList": "<code>*</code> 或 <code>-</code> 後跟空格，自動轉換為項目符號列表",
+    "numberedList": "<code>1.</code> or <code>1)</code> 後跟空格，自動轉換為編號列表",
+    "blockQuote": "一行以 <code>></code> 開頭並後跟空格，自動轉換為塊引用",
     "troubleshooting": "故障排除",
     "reloadFrontend": "重新加載Trilium前端",
     "showDevTools": "顯示開發者工具",

From c00c01dafb4a0e572bb3ee052161e54696ade113 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Wed, 8 Jan 2025 22:04:55 +0200
Subject: [PATCH 04/10] style(next): use distinct formatting for the
 "Markdown-like autoformatting" card

---
 src/public/stylesheets/theme-next/shell.css | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/public/stylesheets/theme-next/shell.css b/src/public/stylesheets/theme-next/shell.css
index d2d9c9ea4..39d182d68 100644
--- a/src/public/stylesheets/theme-next/shell.css
+++ b/src/public/stylesheets/theme-next/shell.css
@@ -1613,6 +1613,12 @@ body .calendar-dropdown-widget .calendar-body a:hover {
     letter-spacing: .5pt;
 }
 
+.help-dialog .help-cards code {
+    border-radius: 4px;
+    background: #d7d5d5;
+    padding: 0 8px;
+}
+
 .help-dialog .help-cards kbd:first-child {
     margin-left: 0;
 }
\ No newline at end of file

From e79c24872b15b9052edf6e94897369ead3c5f7d4 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Wed, 8 Jan 2025 22:30:10 +0200
Subject: [PATCH 05/10] client: add some margins to the help dialog

---
 src/public/app/widgets/dialogs/help.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/public/app/widgets/dialogs/help.ts b/src/public/app/widgets/dialogs/help.ts
index d31e11029..831f35d54 100644
--- a/src/public/app/widgets/dialogs/help.ts
+++ b/src/public/app/widgets/dialogs/help.ts
@@ -4,13 +4,13 @@ import { t } from "../../services/i18n.js";
 
 const TPL = `
 <div class="help-dialog modal" tabindex="-1" role="dialog">
-    <div class="modal-dialog" role="document" style="min-width: 100%; height: 100%; margin: 0;">
+    <div class="modal-dialog" role="document" style="min-width: 90%;">
         <div class="modal-content" style="height: auto;">
             <div class="modal-header">
                 <h5 class="modal-title">${t('help.fullDocumentation')}</h5>
                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="${t('help.close')}"></button>
             </div>
-            <div class="modal-body" style="overflow: auto; height: calc(100vh - 70px);">
+            <div class="modal-body" style="overflow: auto;">
                 <div class="help-cards row row-cols-md-3 g-3">
                     <div class="card">
                         <div class="card-body">

From ad77ff11add384da5715950513b6a61879c01b0a Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Wed, 8 Jan 2025 22:32:12 +0200
Subject: [PATCH 06/10] style(next): add a cheat sheet-vibe to the help dialog

---
 src/public/stylesheets/theme-next/shell.css | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/public/stylesheets/theme-next/shell.css b/src/public/stylesheets/theme-next/shell.css
index 39d182d68..5b5a97f42 100644
--- a/src/public/stylesheets/theme-next/shell.css
+++ b/src/public/stylesheets/theme-next/shell.css
@@ -1563,11 +1563,19 @@ body .calendar-dropdown-widget .calendar-body a:hover {
 
 /* Help */
 
+.help-dialog .help-cards {
+    display: block;
+    columns: 3;
+    column-gap: 20px;
+}
+
 .help-dialog .card {
     margin: 0;
+    width: auto;
     border: none;
-    padding: 8px;
+    padding: 16px 8px;
     background: unset;
+    break-inside: avoid-column;
 }
 
 .help-dialog .card-body {

From 55048e36e772949565837574cda1dc4cd570feab Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Wed, 8 Jan 2025 23:44:57 +0200
Subject: [PATCH 07/10] style(next): add some translucency to the help dialog

---
 src/public/stylesheets/theme-next/shell.css | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/public/stylesheets/theme-next/shell.css b/src/public/stylesheets/theme-next/shell.css
index 5b5a97f42..da400f113 100644
--- a/src/public/stylesheets/theme-next/shell.css
+++ b/src/public/stylesheets/theme-next/shell.css
@@ -1563,6 +1563,11 @@ body .calendar-dropdown-widget .calendar-body a:hover {
 
 /* Help */
 
+.help-dialog .modal-content {
+    --modal-background-color: #fffc;
+    backdrop-filter: blur(10px);
+}
+
 .help-dialog .help-cards {
     display: block;
     columns: 3;

From 4ce2fb701fe4353040643f4f7b75341c797c2755 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Thu, 9 Jan 2025 00:01:02 +0200
Subject: [PATCH 08/10] style(next): refactor

---
 src/public/stylesheets/theme-next/shell.css | 48 ++++++++++++++-------
 1 file changed, 32 insertions(+), 16 deletions(-)

diff --git a/src/public/stylesheets/theme-next/shell.css b/src/public/stylesheets/theme-next/shell.css
index da400f113..05d396747 100644
--- a/src/public/stylesheets/theme-next/shell.css
+++ b/src/public/stylesheets/theme-next/shell.css
@@ -1563,9 +1563,22 @@ body .calendar-dropdown-widget .calendar-body a:hover {
 
 /* Help */
 
+.help-dialog {
+    --help-background-color: #fffc;
+    --help-backdrop-blur: 10px;
+    --help-card-background: var(--card-background-color);
+    --help-card-shadow: 2px 2px 2px rgba(0, 0, 0, .10);
+    --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, .3);
+    --help-code-color: black;
+    --help-code-background: #d7d5d5;
+}
+
 .help-dialog .modal-content {
-    --modal-background-color: #fffc;
-    backdrop-filter: blur(10px);
+    --modal-background-color: var(--help-background-color);
+    backdrop-filter: blur(var(--help-backdrop-blur));
 }
 
 .help-dialog .help-cards {
@@ -1578,20 +1591,20 @@ body .calendar-dropdown-widget .calendar-body a:hover {
     margin: 0;
     width: auto;
     border: none;
-    padding: 16px 8px;
     background: unset;
+    padding: 16px 8px;
     break-inside: avoid-column;
 }
 
 .help-dialog .card-body {
-    box-shadow: 2px 2px 2px rgba(0, 0, 0, .10);
+    box-shadow: var(--help-card-shadow);
     border-radius: 6px;
-    background: var(--card-background-color);
+    background: var(--help-card-background);
 }
 
 .help-dialog .card-body h5,
 .help-dialog .card-body h6 {
-    color: #797979;
+    color: var(--help-card-heading-color);
     font-weight: 600;
 }
 
@@ -1604,7 +1617,7 @@ body .calendar-dropdown-widget .calendar-body a:hover {
     padding-bottom: .5em;
 }
 
-
+/* Help card item */
 .help-dialog .help-cards ul {
     list-style-type: none;
     padding: 0;
@@ -1614,24 +1627,27 @@ body .calendar-dropdown-widget .calendar-body a:hover {
     margin-top: .4em;
 }
 
+/* Keyboard shortcut */
 .help-dialog .help-cards kbd {
-    box-shadow: 1px 1px 2px rgba(0, 0, 0, .3);
+    box-shadow: var(--help-kbd-shortcut-shadow);
     margin: 0 4px;
     border: none;
     border-radius: 4px;
     padding: 2px 10px;
-    background: white;
-    color: #3f3f3f;
+    background: var(--help-kbd-shortcut-background);
+    color: var(--help-kbd-shortcut-color);
     font-weight: 500;
     letter-spacing: .5pt;
 }
 
-.help-dialog .help-cards code {
-    border-radius: 4px;
-    background: #d7d5d5;
-    padding: 0 8px;
-}
-
 .help-dialog .help-cards kbd:first-child {
     margin-left: 0;
+}
+
+/* Inline code - used for Markdown samples */
+.help-dialog .help-cards code {
+    border-radius: 4px;
+    background: var(--help-code-background);
+    padding: 0 8px;
+    color: var(--help-code-color);
 }
\ No newline at end of file

From ffd626d18eeb252ea5ecd6fba1f338b3d1ebd43a Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Thu, 9 Jan 2025 00:12:31 +0200
Subject: [PATCH 09/10] style(next): define the dark mode colors

---
 src/public/stylesheets/theme-next-dark.css  | 10 ++++++++++
 src/public/stylesheets/theme-next-light.css | 10 ++++++++++
 src/public/stylesheets/theme-next/base.css  |  2 ++
 src/public/stylesheets/theme-next/shell.css | 13 -------------
 4 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/src/public/stylesheets/theme-next-dark.css b/src/public/stylesheets/theme-next-dark.css
index 05b481901..bf4ffa43d 100644
--- a/src/public/stylesheets/theme-next-dark.css
+++ b/src/public/stylesheets/theme-next-dark.css
@@ -143,6 +143,16 @@
     --tooltip-background-color: rgba(67, 67, 67, 0.86);
     --tooltip-foreground-color: #ffffffeb;
     --tooltip-shadow-color: rgba(0, 0, 0, 0.4);
+
+    --help-background-color: #00000059;
+    --help-card-background: var(--card-background-color);
+    --help-card-shadow: 2px 2px 2px rgba(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, .7);
+    --help-code-color: inherit;
+    --help-code-background: #565656;
 }
 
 /*
diff --git a/src/public/stylesheets/theme-next-light.css b/src/public/stylesheets/theme-next-light.css
index 8ad0ee213..108b797ed 100644
--- a/src/public/stylesheets/theme-next-light.css
+++ b/src/public/stylesheets/theme-next-light.css
@@ -142,4 +142,14 @@
     --tooltip-background-color: rgba(255, 255, 255, 0.85);
     --tooltip-foreground-color: #000000ba;
     --tooltip-shadow-color: rgba(0, 0, 0, .15);
+
+    --help-background-color: #fffc;
+    --help-card-background: var(--card-background-color);
+    --help-card-shadow: 2px 2px 2px rgba(0, 0, 0, .10);
+    --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, .3);
+    --help-code-color: black;
+    --help-code-background: #d7d5d5;
  }
diff --git a/src/public/stylesheets/theme-next/base.css b/src/public/stylesheets/theme-next/base.css
index 3fc7766ca..b9aa3c619 100644
--- a/src/public/stylesheets/theme-next/base.css
+++ b/src/public/stylesheets/theme-next/base.css
@@ -55,6 +55,8 @@
     --timeline-bullet-vertical-pos: .75em;
     --timeline-connector-size: 4px;
 
+    --help-backdrop-blur: 10px;
+
     /* Theme capabilities */
     --tab-note-icons: true;
 }
\ No newline at end of file
diff --git a/src/public/stylesheets/theme-next/shell.css b/src/public/stylesheets/theme-next/shell.css
index 05d396747..9d41b0a17 100644
--- a/src/public/stylesheets/theme-next/shell.css
+++ b/src/public/stylesheets/theme-next/shell.css
@@ -1563,19 +1563,6 @@ body .calendar-dropdown-widget .calendar-body a:hover {
 
 /* Help */
 
-.help-dialog {
-    --help-background-color: #fffc;
-    --help-backdrop-blur: 10px;
-    --help-card-background: var(--card-background-color);
-    --help-card-shadow: 2px 2px 2px rgba(0, 0, 0, .10);
-    --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, .3);
-    --help-code-color: black;
-    --help-code-background: #d7d5d5;
-}
-
 .help-dialog .modal-content {
     --modal-background-color: var(--help-background-color);
     backdrop-filter: blur(var(--help-backdrop-blur));

From e8fe290d89722bb3288a82688b350bfc5ceeedf1 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Thu, 9 Jan 2025 00:15:59 +0200
Subject: [PATCH 10/10] style(next): tweak color

---
 src/public/stylesheets/theme-next-dark.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/public/stylesheets/theme-next-dark.css b/src/public/stylesheets/theme-next-dark.css
index bf4ffa43d..872af8916 100644
--- a/src/public/stylesheets/theme-next-dark.css
+++ b/src/public/stylesheets/theme-next-dark.css
@@ -144,7 +144,7 @@
     --tooltip-foreground-color: #ffffffeb;
     --tooltip-shadow-color: rgba(0, 0, 0, 0.4);
 
-    --help-background-color: #00000059;
+    --help-background-color: var(--menu-background-color);
     --help-card-background: var(--card-background-color);
     --help-card-shadow: 2px 2px 2px rgba(0, 0, 0, .2);
     --help-card-heading-color: #959595;