From c2754ea937696c3b73262657d1c0aed54c59aba4 Mon Sep 17 00:00:00 2001 From: Will Miao Date: Tue, 24 Feb 2026 23:28:42 +0800 Subject: [PATCH] feat(ui): improve settings layout with inline help tooltips - Remove bottom margin from setting items and last-child override - Add flex layout to setting-info for inline label and info icon alignment - Replace label opacity with rgba color for better tooltip visibility - Add info-icon styling with hover tooltips using data-tooltip attribute - Move help text from separate divs to inline tooltips on labels and section headers - Improve tooltip positioning with edge case handling for left-aligned icons --- .../css/components/modal/settings-modal.css | 78 ++++- .../components/modals/settings_modal.html | 309 +++++++++--------- 2 files changed, 218 insertions(+), 169 deletions(-) diff --git a/static/css/components/modal/settings-modal.css b/static/css/components/modal/settings-modal.css index 3f67659f..8fcd756d 100644 --- a/static/css/components/modal/settings-modal.css +++ b/static/css/components/modal/settings-modal.css @@ -631,15 +631,10 @@ .setting-item { display: flex; flex-direction: column; /* Changed to column for help text placement */ - margin-bottom: var(--space-3); /* Increased to provide more spacing between items */ padding: var(--space-2); border-radius: var(--border-radius-xs); } -.setting-item:last-child { - margin-bottom: 0; -} - .setting-item:hover { background: rgba(0, 0, 0, 0.02); } @@ -663,14 +658,16 @@ margin-bottom: 0; width: 35%; /* Increased from 30% to prevent wrapping */ flex-shrink: 0; /* Prevent shrinking */ + display: flex; /* Allow label and info-icon to be on same line */ + align-items: center; } .setting-info label { - display: block; font-weight: 400; margin-bottom: 0; white-space: nowrap; /* Prevent label wrapping */ - opacity: 0.85; + /* Use text color with alpha instead of opacity to avoid affecting tooltip */ + color: rgba(from var(--text-color) r g b / 0.85); } .setting-control { @@ -1148,3 +1145,70 @@ input:checked + .toggle-slider:before { margin-top: var(--space-2); } } + +/* Info icon styling for settings labels - Minimal style */ +.info-icon { + color: var(--text-color); + margin-left: 6px; + font-size: 0.85em; + vertical-align: text-bottom; + cursor: help; + opacity: 0.4; + transition: opacity 0.2s ease; +} + +.info-icon:hover { + opacity: 0.7; +} + +/* Tooltip using data-tooltip attribute */ +.info-icon[data-tooltip] { + position: relative; +} + +.info-icon[data-tooltip]::after { + content: attr(data-tooltip); + position: absolute; + bottom: calc(100% + 8px); + left: 50%; + transform: translateX(-50%); + background: rgba(0, 0, 0, 0.9); + color: white; + padding: 8px 12px; + border-radius: 6px; + font-size: 14px; + font-weight: normal; + font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; + white-space: normal; + max-width: 220px; + width: max-content; + opacity: 0; + visibility: hidden; + transition: opacity 0.2s ease, visibility 0.2s ease; + pointer-events: none; + z-index: 10000; + line-height: 1.4; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); + text-transform: none; +} + +.info-icon[data-tooltip]:hover::after { + opacity: 1; + visibility: visible; +} + +/* Fix tooltip overflow on left edge - when icon is near left side of modal */ +.settings-subsection-header .info-icon[data-tooltip]::after { + left: 0; + transform: translateX(0); +} + +.settings-subsection-header .info-icon[data-tooltip]::before { + left: 12px; +} + +/* Dark theme adjustments for tooltip - Fully opaque */ +[data-theme="dark"] .info-icon[data-tooltip]::after { + background: rgba(40, 40, 40, 0.95); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); +} diff --git a/templates/components/modals/settings_modal.html b/templates/components/modals/settings_modal.html index b0d2f8c1..b959e89a 100644 --- a/templates/components/modals/settings_modal.html +++ b/templates/components/modals/settings_modal.html @@ -58,6 +58,7 @@
+
@@ -73,9 +74,6 @@
-
- {{ t('settings.civitaiApiKeyHelp') }} -
@@ -87,7 +85,10 @@
- +
-
- {{ t('settings.storage.locationHelp') }} -
-

{{ t('common.language.select') }}

+

+ {{ t('common.language.select') }} + +

-
-
- -
-
- -
-
-
- {{ t('common.language.select_help') }} +
+
@@ -145,7 +138,10 @@
- +
-
- {{ t('settings.contentFiltering.blurNsfwContentHelp') }} -
- +
-
- {{ t('settings.contentFiltering.showOnlySfwHelp') }} -
@@ -187,7 +180,10 @@
- +
-
- {{ t('settings.videoSettings.autoplayOnHoverHelp') }} -
@@ -211,7 +204,10 @@
- +
-
- {{ t('settings.layoutSettings.showFolderSidebarHelp') }} -
- +
-
- {{ t('settings.layoutSettings.displayDensityHelp') }} -
    +
    • {{ t('settings.layoutSettings.displayDensityOptions.default') }}: {{ t('settings.layoutSettings.displayDensityDetails.default') }}
    • {{ t('settings.layoutSettings.displayDensityOptions.medium') }}: {{ t('settings.layoutSettings.displayDensityDetails.medium') }}
    • {{ t('settings.layoutSettings.displayDensityOptions.compact') }}: {{ t('settings.layoutSettings.displayDensityDetails.compact') }}
      • @@ -253,7 +247,10 @@
      - +
      -
      - {{ t('settings.layoutSettings.modelNameDisplayHelp') }} -
      - +
      -
      - {{ t('settings.layoutSettings.cardInfoDisplayHelp') }} -
      - +
      -
      - {{ t('settings.layoutSettings.modelCardFooterActionHelp') }} -
@@ -313,7 +307,10 @@
- +
-
- {{ t('settings.folderSettings.activeLibraryHelp') }} -
- +
-
- {{ t('settings.folderSettings.defaultLoraRootHelp') }} -
- +
-
- {{ t('settings.folderSettings.defaultCheckpointRootHelp') }} -
- +
-
- {{ t('settings.folderSettings.defaultUnetRootHelp') }} -
- +
-
- {{ t('settings.folderSettings.defaultEmbeddingRootHelp') }} -
-

{{ t('settings.downloadPathTemplates.title') }}

+

+ {{ t('settings.downloadPathTemplates.title') }} + +

- {{ t('settings.downloadPathTemplates.help') }}
{{ t('settings.downloadPathTemplates.availablePlaceholders') }} {base_model} @@ -491,7 +487,10 @@
- +
-
- {{ t('settings.downloadPathTemplates.baseModelPathMappingsHelp') }} -
@@ -513,13 +509,15 @@
- +
-
{{ t('settings.priorityTags.description') }}
@@ -557,7 +555,10 @@
- +
-
- {{ t('settings.updateFlagStrategy.help') }} -
- +
-
- {{ t('settings.hideEarlyAccessUpdates.help') }} -
@@ -607,15 +605,15 @@
-
- {{ t('settings.exampleImages.downloadLocationHelp') }} -
- +
-
- {{ t('settings.exampleImages.autoDownloadHelp') }} -
- +
-
- {{ t('settings.exampleImages.optimizeImagesHelp') }} -
@@ -655,17 +650,12 @@
-

{{ t('settings.autoOrganizeExclusions.label') }}

+

+ {{ t('settings.autoOrganizeExclusions.label') }} + +

-
-
- -
-
-
- {{ t('settings.autoOrganizeExclusions.description') }} -
@@ -674,17 +664,12 @@
-

{{ t('settings.metadataRefreshSkipPaths.label') }}

+

+ {{ t('settings.metadataRefreshSkipPaths.label') }} + +

-
-
- -
-
-
- {{ t('settings.metadataRefreshSkipPaths.description') }} -
@@ -701,7 +686,10 @@
- +
-
- {{ t('settings.metadataArchive.enableArchiveDbHelp') }} -
@@ -725,7 +710,10 @@
- +
-
- {{ t('settings.metadataArchive.managementHelp') }} -
@@ -750,7 +735,10 @@
- +
-
- {{ t('settings.misc.includeTriggerWordsHelp') }} -
@@ -777,7 +762,10 @@
- +
-
- {{ t('settings.proxySettings.enableProxyHelp') }} -