From 69fab9a6d6e06bb259b349da6e3ed0e975ad0f86 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Sat, 8 Mar 2025 19:16:48 +0200
Subject: [PATCH] style(next)/options/shortcuts: improve the appearance of the
 page

---
 .../widgets/type_widgets/options/shortcuts.ts |  2 +-
 .../stylesheets/theme-next/settings.css       | 23 ++++++++++++++-----
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/public/app/widgets/type_widgets/options/shortcuts.ts b/src/public/app/widgets/type_widgets/options/shortcuts.ts
index 2ca7a8893..6a34acf1c 100644
--- a/src/public/app/widgets/type_widgets/options/shortcuts.ts
+++ b/src/public/app/widgets/type_widgets/options/shortcuts.ts
@@ -7,7 +7,7 @@ import type { KeyboardShortcut } from "../../../../../services/keyboard_actions_
 import type { OptionNames } from "../../../../../services/options_interface.js";
 
 const TPL = `
-<div class="options-section shortcuts-options-section">
+<div class="options-section shortcuts-options-section tn-no-card">
     <style>
         .shortcuts-options-section {
             display: flex;
diff --git a/src/public/stylesheets/theme-next/settings.css b/src/public/stylesheets/theme-next/settings.css
index 0d240f047..31342c597 100644
--- a/src/public/stylesheets/theme-next/settings.css
+++ b/src/public/stylesheets/theme-next/settings.css
@@ -10,7 +10,7 @@
 }
 /* Create a gap at the top of the option pages */
 .note-detail-content-widget-content.options>*:first-child {
-    margin-top: 1em;
+    margin-top: var(--options-first-item-top-margin, 1em);
 }
 
 /* Create a gap at the bottom of option pages */
@@ -24,7 +24,7 @@
     height: 0;
 }
 
-.options-section {
+.options-section:not(.tn-no-card) {
     margin: auto;
     min-width: var(--options-card-min-width);
     max-width: var(--options-card-max-width);
@@ -42,7 +42,7 @@
     padding-bottom: var(--default-padding);
 }
 
-.options-section h4 {
+.options-section:not(.tn-no-card) h4 {
     font-size: var(--options-title-font-size);
     font-weight: bold;
     color: var(--launcher-pane-text-color);
@@ -51,14 +51,14 @@
     margin-left: calc(-1 * var(--options-card-padding));
 }
 
-.options-section h5 {
+.options-section:not(.tn-no-card) h5 {
     font-size: var(--options-title-font-size);
     font-weight: bold;
     margin-top: 1em !important;
     margin-bottom: unset !important;
 }
 
-.options-section h5:first-of-type {
+.options-section:not(.tn-no-card) h5:first-of-type {
     margin-top: unset !important;
 }
 
@@ -111,9 +111,20 @@
 
 /* Shortcuts */
 
-.shortcuts-options-section {
+.note-detail-content-widget-content:has(.shortcuts-options-section) {
     /* Allow the card to extend on the full width of the parent */
     --options-card-max-width: 100%;
+
+    /* Remove top padding for the options page */
+    --options-title-offset: 0px;
+    --options-title-font-size: 0px;
+
+    /* Remove the top margin of the first item */
+    --options-first-item-top-margin: 0;
+}
+
+.shortcuts-options-section h4 {
+    display: none;
 }
 
 /* Group heading */