style(next)/options/shortcuts: improve the appearance of the page

This commit is contained in:
Adorian Doran 2025-03-08 19:16:48 +02:00
parent 1e81831ea0
commit 69fab9a6d6
2 changed files with 18 additions and 7 deletions

View File

@ -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;

View File

@ -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 */