diff --git a/src/public/app/widgets/type_widgets/content_widget.js b/src/public/app/widgets/type_widgets/content_widget.js index 65b683eea..50ce451cc 100644 --- a/src/public/app/widgets/type_widgets/content_widget.js +++ b/src/public/app/widgets/type_widgets/content_widget.js @@ -121,6 +121,7 @@ export default class ContentWidgetTypeWidget extends TypeWidget { this.children = []; const contentWidgets = CONTENT_WIDGETS[note.noteId]; + this.$content.toggleClass("options", note.noteId.startsWith("_options")); if (contentWidgets) { for (const clazz of contentWidgets) { diff --git a/src/public/stylesheets/theme-next.css b/src/public/stylesheets/theme-next.css index 1c775d72a..72c402fa1 100644 --- a/src/public/stylesheets/theme-next.css +++ b/src/public/stylesheets/theme-next.css @@ -929,34 +929,36 @@ html .note-detail-editable-text :not(figure, .include-note):first-child { /* * Settings */ -.options-section { - --card-padding: 17px; - --title-font-size: 1rem; - --title-offset: 13px; +:root { + --options-card-padding: 17px; + --options-title-font-size: 1rem; + --options-title-offset: 13px; +} +.options-section { border-radius: 12px; border: 1px solid var(--card-border-color) !important; box-shadow: var(--card-box-shadow); background: var(--card-background-color); - padding: var(--card-padding); - margin-bottom: calc(var(--title-offset) + 26px) !important; + padding: var(--options-card-padding); + margin-bottom: calc(var(--options-title-offset) + 26px) !important; } -.options-section:first-of-type { - margin-top: calc(var(--title-offset) + var(--title-font-size)); +.note-detail-content-widget-content.options { + padding-top: calc(15px + var(--options-title-offset) + var(--options-title-font-size)); } .options-section h4 { - font-size: var(--title-font-size); + font-size: var(--options-title-font-size); font-weight: bold; color: var(--launcher-pane-text-color); - margin-top: calc(-1 * var(--card-padding) - var(--title-font-size) - var(--title-offset)) !important; - margin-bottom: calc(var(--title-offset) + var(--card-padding)) !important; - margin-left: calc(-1 * var(--card-padding)); + margin-top: calc(-1 * var(--options-card-padding) - var(--options-title-font-size) - var(--options-title-offset)) !important; + margin-bottom: calc(var(--options-title-offset) + var(--options-card-padding)) !important; + margin-left: calc(-1 * var(--options-card-padding)); } .options-section h5 { - font-size: var(--title-font-size); + font-size: var(--options-title-font-size); font-weight: bold; margin-top: 1em !important; margin-bottom: unset !important; @@ -967,8 +969,8 @@ html .note-detail-editable-text :not(figure, .include-note):first-child { } .options-section hr { - margin-left: calc(var(--card-padding) * -1); - margin-right: calc(var(--card-padding) * -1); + margin-left: calc(var(--options-card-padding) * -1); + margin-right: calc(var(--options-card-padding) * -1); } .options-section .existing-anonymized-databases,