fix(ui): enable theme variable and fix select styling

- Activate CSS variable settings for theming in `Auto-Image.js`.
- Update dropdown class from `wplace-selector` to `wplace-settings-select`.
- Remove inline styles from the "Apply Settings" button.
- Delete obsolete `.wplace-selector` CSS rules from `auto-image-styles.css`.

Benefits:
- Ensures consistent theming across components.
- Simplifies styling management.
- Improves maintainability by removing inline styles.

Note:
- Update dependent components to use the new `wplace-settings-select` class.
This commit is contained in:
kyuketski committed 2025-09-01 14:11:26 +03:00
1 parent d408460903
commit 582e38d93a
2 files changed
+20 -35

No files matched your search

+20 -23
View File
@@ -242,22 +242,22 @@
} catch {}
};
// setVar('--wplace-primary', theme.primary);
// setVar('--wplace-secondary', theme.secondary);
// setVar('--wplace-accent', theme.accent);
// setVar('--wplace-text', theme.text);
// setVar('--wplace-highlight', theme.highlight);
// setVar('--wplace-success', theme.success);
// setVar('--wplace-error', theme.error);
// setVar('--wplace-warning', theme.warning);
//
// // Typography + look
// setVar('--wplace-font', theme.fontFamily || "'Segoe UI', Roboto, sans-serif");
// setVar('--wplace-radius', '' + (theme.borderRadius || '12px'));
// setVar('--wplace-border-style', '' + (theme.borderStyle || 'solid'));
// setVar('--wplace-border-width', '' + (theme.borderWidth || '1px'));
// setVar('--wplace-backdrop', '' + (theme.backdropFilter || 'blur(10px)'));
// setVar('--wplace-border-color', 'rgba(255,255,255,0.1)');
setVar('--wplace-primary', theme.primary);
setVar('--wplace-secondary', theme.secondary);
setVar('--wplace-accent', theme.accent);
setVar('--wplace-text', theme.text);
setVar('--wplace-highlight', theme.highlight);
setVar('--wplace-success', theme.success);
setVar('--wplace-error', theme.error);
setVar('--wplace-warning', theme.warning);
// Typography + look
setVar('--wplace-font', theme.fontFamily || "'Segoe UI', Roboto, sans-serif");
setVar('--wplace-radius', '' + (theme.borderRadius || '12px'));
setVar('--wplace-border-style', '' + (theme.borderStyle || 'solid'));
setVar('--wplace-border-width', '' + (theme.borderWidth || '1px'));
setVar('--wplace-backdrop', '' + (theme.backdropFilter || 'blur(10px)'));
setVar('--wplace-border-color', 'rgba(255,255,255,0.1)');
}
const saveThemePreference = () => {
@@ -3706,7 +3706,7 @@
<i class="fas fa-dice wplace-icon-dice"></i>
Batch Mode
</label>
<select id="batchModeSelect" class="wplace-selector">
<select id="batchModeSelect" class="wplace-settings-select">
<option value="normal" class="wplace-settings-option">📦 Normal (Fixed Size)</option>
<option value="random" class="wplace-settings-option">🎲 Random (Range)</option>
</select>
@@ -3769,7 +3769,7 @@
<i class="fas fa-th wplace-icon-table"></i>
Generation Mode
</label>
<select id="coordinateModeSelect" class="wplace-selector">
<select id="coordinateModeSelect" class="wplace-settings-select">
<option value="rows" class="wplace-settings-option">📏 Rows (Horizontal Lines)</option>
<option value="columns" class="wplace-settings-option">📐 Columns (Vertical Lines)</option>
<option value="circle-out" class="wplace-settings-option">⭕ Circle Out (Center → Edges)</option>
@@ -3785,7 +3785,7 @@
<i class="fas fa-compass wplace-icon-compass"></i>
Starting Direction
</label>
<select id="coordinateDirectionSelect" class="wplace-selector">
<select id="coordinateDirectionSelect" class="wplace-settings-select">
<option value="top-left" class="wplace-settings-option">↖️ Top-Left</option>
<option value="top-right" class="wplace-settings-option">↗️ Top-Right</option>
<option value="bottom-left" class="wplace-settings-option">↙️ Bottom-Left</option>
@@ -3923,10 +3923,7 @@
</div>
<div class="wplace-settings-footer">
<button id="applySettingsBtn" class="wplace-settings-apply-btn" style="
width: 100%;
${CONFIG.CSS_CLASSES.BUTTON_PRIMARY}
">
<button id="applySettingsBtn" class="wplace-settings-apply-btn">
<i class="fas fa-check"></i> ${Utils.t('applySettings')}
</button>
</div>
-12
View File
@@ -1923,15 +1923,3 @@
color: var(--wplace-icon-palette);
margin-right: 6px;
}
.wplace-selector {
width: 100%;
padding: 10px 12px;
background: var(--wplace-bg-input);
color: var(--wplace-text);
border: 1px solid var(--wplace-border-subtle);
border-radius: 8px;
font-size: 13px;
outline: none;
cursor: pointer;
}