- Replace `wplace-random-batch-input` and `wplace-block-size-input` classes with `wplace-settings-number-input`.
- Update CSS to consolidate styles under `wplace-settings-number-input`.
- Refactor theme variables for background and border colors to use explicit hex values, fixing visibility issue in light theme.
- Remove redundant `.wplace-block-size-input` styles.
Benefits:
- Number inputs are now correctly visible in all themes, including light.
- Reduces duplication in CSS by consolidating input styles.
- Improves consistency across input elements in the UI.
- Enhances clarity of theme variable usage with explicit naming.
Note:
- Ensure all components previously using `wplace-random-batch-input` or `wplace-block-size-input` are tested for visual consistency.
- 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.
- Replace CamelCase animation names with kebab-case (e.g., `slideIn` → `slide-in`).
- Update theme class names to remove double hyphens (e.g., `wp-place-theme--classic` → `wp-place-theme-classic`).
- Standardize color syntax to use modern `rgb()` format with percentage-based alpha values.
- Replace long-form hex colors with shorthand where applicable (e.g., `#ffffff` → `#fff`).
- Simplify redundant or theme-specific styles and consolidate them into single rules.
- Modularize theme-specific styling comments and ensure consistent naming conventions.
- Refactor media queries, gradients, and keyframe animations for improved readability and performance.
- Add missing button hover styles and subtle text shadow for improved contrast.
- Introduce pixel-blinking animation and neon glow effects for the neon theme.
- Optimize slider, shadow, and text variants for consistency and maintainability.
Benefits:
- Improves consistency and readability across CSS and JavaScript files.
- Enhances maintainability by modularizing theme-specific styles and adopting modern syntax.
- Reduces redundancy and file size by eliminating unused or repetitive rules.
- Aligns with modern CSS standards for better compatibility and performance.
Note:
- Ensure all theme files are updated in the `feat-external-lang` branch to avoid broken imports.
- Verify browser compatibility for `rgb` with alpha values and RGB hex alpha syntax if targeting older environments.
- Test for unintended visual changes due to removed CSS variables or consolidated rules.
- Replace old notification toggle structure with a new settings toggle structure for pixel filters.
- Add detailed descriptions for each pixel filter option (white, transparent, unavailable).
- Standardize the styling of toggle titles and descriptions using theme-based colors.
- Introduce a flexbox layout for pixel filter controls to improve spacing and alignment.
- Update language file keys and values for clarity and consistency.
- Add console logs and user alerts for toggle state changes to enhance feedback.
- Ensure toggle states are synchronized with the application state on initialization.
Benefits:
- Improves usability by providing clear descriptions for each option.
- Enhances visual consistency with theme-based styling.
- Simplifies maintenance with a unified toggle structure.
Note:
- Ensure all themes define `text` and `highlight` properties to avoid fallback styling issues.
- Move coordinate generation defaults (mode, direction, snake pattern, block size) and theme settings to CONFIG object.
- Replace hardcoded values with references to CONFIG for consistency across coordinate mode, direction, snake pattern, block width, and height.
- Add `paintUnavailablePixels` toggle to replace `strictSkipUnavailable` functionality and introduce a new "Paint Unavailable" toggle in the UI.
- Refactor `updateCoordinateUI` function to accept parameters explicitly, move it to `Utils`, and dynamically toggle UI controls based on mode.
- Standardize checkbox and slider styles by replacing inline ternary operators and `.wplace-blue-marble-checkbox` with cleaner logic and reusable `.wplace-settings-checkbox`.
- Introduce new CSS class `.wplace-pixel-filter-controls` for pixel filter UI.
- Update migration and theme selection logic to use CONFIG defaults and `CONFIG.THEMES` for backward compatibility.
- Remove redundant inline conditional checks for default values in settings initialization.
Benefits:
- Improves maintainability by centralizing configuration settings and default values in CONFIG.
- Reduces duplication of hardcoded values and UI update logic across the codebase.
- Enhances flexibility for future UI updates, theme changes, and clarity of painting logic.
- Aligns checkbox styling with reusable classes for consistency.
Note:
- Ensure CONFIG is properly initialized and all themes define required CONFIG properties to avoid runtime errors.
- Replace inline styles with reusable CSS classes for better maintainability.
- Standardize toggle, select, and input components under consistent naming conventions (`wplace-settings-*`).
- Extract icon styling into dedicated CSS rules for consistency.
- Introduce grid layout for block size controls to improve responsiveness.
- Remove redundant styles and consolidate common patterns into shared classes.
Benefits:
- Improves code readability and reduces duplication.
- Enhances theming support by centralizing style definitions.
- Simplifies future updates to the settings UI structure.
Note:
- Ensure all theme variables (`--wplace-*`) are correctly defined in the respective theme files.
Updated CSS variables for button border-radius across themes and adjusted layout spacing for sections and settings footer.
* Introduced `--wplace-btn-radius` for consistent button rounding in all themes.
* Reduced margins and padding for `.wplace-section` and `.wplace-status-section` for tighter layout.
* Added collapsible section behavior with arrow rotation and hidden controls.
* Made settings footer sticky with proper background and padding.
* Minor spacing and formatting fixes for better visual alignment.
MiraclePatrickLumowa