From 8947dc036ffe394376ad98bce9b8c0d990ad45a6 Mon Sep 17 00:00:00 2001
From: kyuketski <qt.ireuo@yandex.com>
Date: Sat, 30 Aug 2025 21:38:50 +0300
Subject: [PATCH] feat(ui): enhance UI components for turnstile and mask mode

- Replace inline styles for turnstile title with a CSS class (`wplace-turnstile-title`).
- Add buttons for clearing ignored pixels (`clearIgnoredBtn`) and inverting masks (`invertMaskBtn`).
- Introduce a helper text (`resize-shortcut-help`) for keyboard shortcuts.

Benefits:
- Improves maintainability by using CSS classes instead of inline styles.
- Provides additional functionality for mask management and user guidance.
---
 Auto-Image.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/Auto-Image.js b/Auto-Image.js
index 88080b8..d52ff78 100644
--- a/Auto-Image.js
+++ b/Auto-Image.js
@@ -1429,8 +1429,7 @@
 
       const title = document.createElement('div');
       title.textContent = Utils.t('turnstileInstructions');
-      title.style.cssText =
-        'font: 600 12px/1.3 "Segoe UI",sans-serif; margin-bottom: 8px; opacity: 0.9;';
+      title.className = 'wplace-turnstile-title';
 
       const host = document.createElement('div');
       host.id = 'turnstile-overlay-host';
@@ -4020,6 +4019,9 @@
               <button id="maskModeToggle" class="wplace-btn wplace-btn-primary resize-mode-btn">Toggle</button>
             </div>
           </div>
+          <button id="clearIgnoredBtn" class="wplace-btn resize-clear-btn" title="Clear all ignored pixels">Clear</button>
+          <button id="invertMaskBtn" class="wplace-btn resize-invert-btn" title="Invert mask">Invert</button>
+          <span class="resize-shortcut-help">Shift = Row • Alt = Column</span>
         </div>
       </div>