diff --git a/Extension/auto-image-styles.css b/Extension/auto-image-styles.css index 3cb715e..28d7d3c 100644 --- a/Extension/auto-image-styles.css +++ b/Extension/auto-image-styles.css @@ -16,6 +16,8 @@ - https://wplace-autobot.github.io/WPlace-AutoBOT/main/themes/classic-light.css - https://wplace-autobot.github.io/WPlace-AutoBOT/main/themes/acrylic.css - https://wplace-autobot.github.io/WPlace-AutoBOT/main/themes/neon.css + - https://wplace-autobot.github.io/WPlace-AutoBOT/main/themes/neon-cyan.css + - https://wplace-autobot.github.io/WPlace-AutoBOT/main/themes/neon-light.css These are now loaded from local extension files for better performance and offline functionality. */ diff --git a/Extension/background.js b/Extension/background.js index c2dc166..8756d94 100644 --- a/Extension/background.js +++ b/Extension/background.js @@ -278,7 +278,9 @@ async function loadExtensionResources() { 'themes/acrylic.css', 'themes/classic-light.css', 'themes/classic.css', - 'themes/neon.css' + 'themes/neon.css', + 'themes/neon-cyan.css', + 'themes/neon-light.css' ]; for (const themeFile of themeFiles) { diff --git a/Extension/icons/icon256.png b/Extension/icons/icon256.png new file mode 100644 index 0000000..39f3106 Binary files /dev/null and b/Extension/icons/icon256.png differ diff --git a/Extension/icons/icon64.png b/Extension/icons/icon64.png new file mode 100644 index 0000000..39f3106 Binary files /dev/null and b/Extension/icons/icon64.png differ diff --git a/Extension/manifest.json b/Extension/manifest.json index d58b3c9..1d0966e 100644 --- a/Extension/manifest.json +++ b/Extension/manifest.json @@ -7,7 +7,9 @@ "16": "icons/icon16.png", "32": "icons/icon32.png", "48": "icons/icon48.png", - "128": "icons/icon128.png" + "64": "icons/icon64.png", + "128": "icons/icon128.png", + "256": "icons/icon256.png" }, "permissions": [ "cookies", @@ -30,7 +32,9 @@ "16": "icons/icon16.png", "32": "icons/icon32.png", "48": "icons/icon48.png", - "128": "icons/icon128.png" + "64": "icons/icon64.png", + "128": "icons/icon128.png", + "256": "icons/icon256.png" } }, "content_scripts": [ @@ -60,3 +64,5 @@ } ] } + + diff --git a/Extension/scripts/Auto-Image.js b/Extension/scripts/Auto-Image.js index 7cef737..c4cdd71 100644 --- a/Extension/scripts/Auto-Image.js +++ b/Extension/scripts/Auto-Image.js @@ -156,11 +156,11 @@ localStorage.removeItem("lp"); }, }, 'Classic Light': { - primary: '#ffffff', - secondary: '#f8f9fa', - accent: '#e9ecef', - text: '#212529', - highlight: '#6f42c1', + primary: '#E0E0E1', + secondary: '#FBFBFB', + accent: '#F3F3F3', + text: '#203C5D', + highlight: '#203C5D', success: '#28a745', error: '#dc3545', warning: '#ffc107', @@ -200,6 +200,54 @@ localStorage.removeItem("lp"); 'pixel-blink': true, }, }, + 'Neon Retro Cyan': { + primary: '#1959A1', + secondary: '#3C74AF', + accent: '#538CC0', + text: '#81DCF7', + highlight: '#EA9C00', + success: '#39ff14', + error: '#ff073a', + warning: '#ffff00', + neon: '00ffff', + purple: '#bf00ff', + pink: '#ff1493', + fontFamily: "'Press Start 2P', monospace", + borderRadius: '0', + borderStyle: 'solid', + borderWidth: '3px', + boxShadow: '0 0 20px rgba(234 156 0, 0.3), inset 0 0 20px rgba(234 156 0, 0.1)', + backdropFilter: 'none', + animations: { + glow: true, + scanline: true, + 'pixel-blink': true, + }, + }, + 'Neon Retro Light': { + primary: '#E0E0E1', + secondary: '#FBFBFB', + accent: '#F3F3F3', + text: '#203C5D', + highlight: '#203C5D', + success: '#39ff14', + error: '#ff073a', + warning: '#ffff00', + neon: '#203C5D', + purple: '#bf00ff', + pink: '#ff1493', + fontFamily: "'Press Start 2P', monospace", + borderRadius: '0', + borderStyle: 'solid', + borderWidth: '3px', + boxShadow: '0 0 20px rgba(234 156 0, 0.3), inset 0 0 20px rgba(234 156 0, 0.1)', + backdropFilter: 'none', + animations: { + glow: true, + scanline: true, + 'pixel-blink': true, + }, + }, 'Acrylic': { primary: '#00000080', secondary: '#00000040', @@ -258,7 +306,9 @@ localStorage.removeItem("lp"); 'wplace-theme-classic', 'wplace-theme-classic-light', 'wplace-theme-acrylic', - 'wplace-theme-neon' + 'wplace-theme-neon', + 'wplace-theme-neon-cyan', + 'wplace-theme-neon-light' ); let themeClass = 'wplace-theme-classic'; // default @@ -270,6 +320,12 @@ localStorage.removeItem("lp"); } else if (CONFIG.currentTheme === 'Classic Light') { themeClass = 'wplace-theme-classic-light'; themeFileName = 'classic-light'; + } else if (CONFIG.currentTheme === 'Neon Retro Cyan') { + themeClass = 'wplace-theme-neon-cyan'; + themeFileName = 'neon-cyan'; + } else if (CONFIG.currentTheme === 'Neon Retro Light') { + themeClass = 'wplace-theme-neon-light'; + themeFileName = 'neon-light'; } else if (CONFIG.currentTheme === 'Acrylic') { themeClass = 'wplace-theme-acrylic'; themeFileName = 'acrylic'; @@ -3591,6 +3647,10 @@ localStorage.removeItem("lp"); let defaultTheme = 'classic'; // fallback if (CONFIG.currentTheme === 'Neon Retro') { defaultTheme = 'neon'; + } else if (CONFIG.currentTheme === 'Neon Retro Cyan') { + defaultTheme = 'neon-cyan'; + } else if (CONFIG.currentTheme === 'Neon Retro Light') { + defaultTheme = 'neon-light'; } else if (CONFIG.currentTheme === 'Classic Light') { defaultTheme = 'classic-light'; } else if (CONFIG.currentTheme === 'Acrylic') { @@ -4385,14 +4445,14 @@ localStorage.removeItem("lp");
- + 1
- + 1
@@ -8386,3 +8446,5 @@ localStorage.removeItem("lp"); }); }); })(); + + diff --git a/Extension/themes/classic-light.css b/Extension/themes/classic-light.css index b4d78b1..09fd3ae 100644 --- a/Extension/themes/classic-light.css +++ b/Extension/themes/classic-light.css @@ -4,11 +4,11 @@ .wplace-theme-classic-light { /* === CORE COLORS === */ - --wplace-primary: #fff; /* Clean white */ - --wplace-secondary: #f8f9fa; /* Light gray */ - --wplace-accent: #e9ecef; /* Lighter gray */ - --wplace-text: #212529; /* Dark text */ - --wplace-highlight: #6f42c1; /* Purple highlight */ + --wplace-primary: #E0E0E1; /* Quite white */ + --wplace-secondary: #FBFBFB; /* Light white */ + --wplace-accent: #F3F3F3; /* Darker white */ + --wplace-text: #203C5D; /* Dark blue text */ + --wplace-highlight: #203C5D; /* Dark blue highlight */ --wplace-success: #28a745; /* Bootstrap green */ --wplace-error: #dc3545; /* Bootstrap red */ --wplace-warning: #ffc107; /* Bootstrap yellow */ @@ -28,13 +28,13 @@ /* Icon colors */ --wplace-icon-primary: #4facfe; /* Light blue */ --wplace-icon-secondary: #00f2fe; /* Cyan */ - --wplace-icon-palette: #f093fb; /* Pink */ + --wplace-icon-palette: #003BFF; /* Pink */ /* Additional UI colors */ --wplace-danger: #dc3545; /* Bootstrap red */ --wplace-danger-dark: #c82333; /* Darker red */ --wplace-muted-text: rgb(33 37 41 / 70%); - --wplace-highlight-secondary: #d3a4ff; + --wplace-highlight-secondary: #203C5D; /* Text variants */ --wplace-text-secondary: rgb(33 37 41 / 90%); @@ -56,7 +56,7 @@ --wplace-border-ultra-faint: #e0e0e0; /* neutral-200 — very faint */ /* Shadow variants */ - --wplace-shadow-drag: 0 12px 40px rgb(0 0 0 / 20%), 0 0 0 2px rgb(111 66 193 / 30%); + --wplace-shadow-drag: 0 12px 40px rgb(0 0 0 / 20%), 0 0 0 2px rgb(32 60 93 / 30%); --wplace-shadow-notification: 0 4px 12px rgb(0 0 0 / 15%); --wplace-shadow-slider-thumb: 0 3px 6px rgb(0 0 0 / 20%), 0 0 0 2px var(--wplace-icon-primary); --wplace-shadow-slider-hover: 0 4px 8px rgb(0 0 0 / 25%), 0 0 0 3px var(--wplace-icon-primary); @@ -67,7 +67,7 @@ --wplace-pulse-end: rgb(40 167 69 / 0%); /* Slider colors */ - --wplace-slider-thumb-bg: #6f42c1; + --wplace-slider-thumb-bg: #203C5D; --wplace-slider-track-bg: linear-gradient(to right, #4facfe 0%, #00f2fe 100%); } @@ -95,7 +95,7 @@ /* Main container with clean light styling */ .wplace-theme-classic-light #wplace-image-bot-container { - background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%) !important; + background: linear-gradient(135deg, #E0E0E1 0%, #FBFBFB 100%) !important; color: var(--wplace-text) !important; border: 1px solid rgb(0 0 0 / 15%) !important; border-radius: 12px !important; @@ -107,7 +107,7 @@ /* Stats container with proper contrast */ .wplace-theme-classic-light #wplace-stats-container { - background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important; + background: linear-gradient(135deg, #FBFBFB 0%, #F3F3F3 100%) !important; border: 1px solid rgb(0 0 0 / 20%) !important; border-radius: 12px !important; box-shadow: 0 8px 32px rgb(0 0 0 / 15%) !important; @@ -120,7 +120,7 @@ /* Headers with light gradient */ .wplace-theme-classic-light .wplace-header { - background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important; + background: linear-gradient(135deg, #FBFBFB 0%, #F3F3F3 100%) !important; color: var(--wplace-highlight) !important; border-bottom: 1px solid rgb(0 0 0 / 15%) !important; text-shadow: none !important; @@ -128,7 +128,7 @@ /* Stats header styling */ .wplace-theme-classic-light #wplace-stats-container .wplace-header { - background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%) !important; + background: linear-gradient(135deg, #F3F3F3 0%, #E0E0E1 100%) !important; color: var(--wplace-text) !important; border-bottom: 1px solid rgb(0 0 0 / 20%) !important; text-shadow: none !important; @@ -154,7 +154,7 @@ /* Buttons with light styling */ .wplace-theme-classic-light .wplace-btn { - background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important; + background: linear-gradient(135deg, #FBFBFB 0%, #F3F3F3 100%) !important; border: 1px solid rgb(0 0 0 / 20%) !important; border-radius: 12px !important; color: var(--wplace-text) !important; @@ -165,26 +165,26 @@ /* Data management section buttons */ .wplace-theme-classic-light .wplace-data-management .wplace-btn { - background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important; + background: linear-gradient(135deg, #FBFBFB 0%, #F3F3F3 100%) !important; border: 1px solid rgb(0 0 0 / 20%) !important; - color: #212529 !important; + color: #203C5D !important; font-weight: 500 !important; } .wplace-theme-classic-light .wplace-btn:hover:not(:disabled) { - background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%) !important; + background: linear-gradient(135deg, #F3F3F3 0%, #E0E0E1 100%) !important; box-shadow: 0 4px 12px rgb(0 0 0 / 15%) !important; transform: translateY(-1px) !important; } .wplace-theme-classic-light .wplace-data-management .wplace-btn:hover:not(:disabled) { - background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%) !important; + background: linear-gradient(135deg, #F3F3F3 0%, #E0E0E1 100%) !important; box-shadow: 0 4px 12px rgb(0 0 0 / 15%) !important; } /* Settings dialog */ .wplace-theme-classic-light #wplace-settings-container { - background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%) !important; + background: linear-gradient(135deg, #E0E0E1 0%, #FBFBFB 100%) !important; border: 1px solid rgb(0 0 0 / 15%) !important; border-radius: 12px !important; box-shadow: 0 16px 48px rgb(0 0 0 / 20%), 0 0 0 1px rgb(0 0 0 / 8%) !important; @@ -227,7 +227,7 @@ /* Resize dialog */ .wplace-theme-classic-light .resize-container { - background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%) !important; + background: linear-gradient(135deg, #E0E0E1 0%, #FBFBFB 100%) !important; border: 1px solid rgb(0 0 0 / 15%) !important; border-radius: 12px !important; box-shadow: 0 16px 48px rgb(0 0 0 / 20%), 0 0 0 1px rgb(0 0 0 / 8%) !important; @@ -237,7 +237,7 @@ /* Settings header */ .wplace-theme-classic-light .wplace-settings-header { - background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important; + background: linear-gradient(135deg, #FBFBFB 0%, #F3F3F3 100%) !important; border-bottom: 1px solid rgb(0 0 0 / 15%) !important; } @@ -289,14 +289,14 @@ } .wplace-theme-classic-light .wplace-btn-upload { - background: rgb(111 66 193 / 10%) !important; + background: rgb(32 60 93 / 10%) !important; border: 2px dashed var(--wplace-highlight) !important; color: var(--wplace-highlight) !important; } .wplace-theme-classic-light .wplace-btn-upload:hover:not(:disabled) { - background: rgb(111 66 193 / 15%) !important; - box-shadow: 0 4px 12px rgb(111 66 193 / 20%) !important; + background: rgb(32 60 93 / 15%) !important; + box-shadow: 0 4px 12px rgb(32 60 93 / 20%) !important; } /* Progress bars with clean light styling */ @@ -307,7 +307,7 @@ } .wplace-theme-classic-light .wplace-progress-bar { - background: linear-gradient(135deg, #6f42c1 0%, #9370db 100%) !important; + background: linear-gradient(135deg, #203C5D 0%, #203C5D 100%) !important; box-shadow: none !important; } @@ -333,7 +333,7 @@ } .wplace-theme-classic-light .status-default { - background: rgb(111 66 193 / 10%) !important; + background: rgb(32 60 93 / 10%) !important; border-color: var(--wplace-highlight) !important; color: var(--wplace-highlight) !important; text-shadow: none !important; @@ -372,7 +372,7 @@ /* Form controls with light styling */ .wplace-theme-classic-light .wplace-settings-select { - background: #fff !important; + background: #E0E0E1 !important; border: 1px solid rgb(0 0 0 / 20%) !important; border-radius: 8px !important; color: var(--wplace-text) !important; @@ -382,33 +382,33 @@ .wplace-theme-classic-light .wplace-settings-select:focus { border-color: var(--wplace-highlight) !important; - box-shadow: 0 0 0 2px rgb(111 66 193 / 30%) !important; + box-shadow: 0 0 0 2px rgb(32 60 93 / 30%) !important; } /* Dropdown menu options */ .wplace-theme-classic-light .wplace-settings-select option { - background: #fff !important; + background: #E0E0E1 !important; color: var(--wplace-text) !important; } .wplace-theme-classic-light .wplace-settings-option { - background: #fff !important; + background: #E0E0E1 !important; color: var(--wplace-text) !important; } /* Sliders with classic gradient */ .wplace-theme-classic-light .wplace-speed-slider { - background: linear-gradient(to right, #4facfe 0%, #00f2fe 100%) !important; + background: linear-gradient(to right, #4facfe 0%, #32C8FE 100%) !important; border-radius: 4px !important; } .wplace-theme-classic-light .wplace-overlay-opacity-slider { - background: linear-gradient(to right, #4facfe 0%, #00f2fe 100%) !important; + background: linear-gradient(to right, #4facfe 0%, #32C8FE 100%) !important; border-radius: 4px !important; } .wplace-theme-classic-light .wplace-slider { - background: linear-gradient(to right, #4facfe 0%, #00f2fe 100%) !important; + background: linear-gradient(to right, #4facfe 0%, #32C8FE 100%) !important; border-radius: 4px !important; } @@ -425,7 +425,7 @@ } .wplace-theme-classic-light .wplace-speed-value { - background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%) !important; + background: linear-gradient(135deg, #4facfe 0%, #32C8FE 100%) !important; border-radius: 8px !important; color: white !important; font-weight: 600 !important; @@ -446,10 +446,10 @@ .wplace-theme-classic-light .wplace-icon-robot { color: #4facfe; } .wplace-theme-classic-light .wplace-icon-speed { color: #4facfe; } .wplace-theme-classic-light .wplace-icon-bell { color: #ffc107; } -.wplace-theme-classic-light .wplace-icon-palette { color: #f093fb; } +.wplace-theme-classic-light .wplace-icon-palette { color: #003BFF; } .wplace-theme-classic-light .wplace-icon-globe { color: #ffeaa7; } .wplace-theme-classic-light .wplace-icon-paint { color: #4facfe; } -.wplace-theme-classic-light .wplace-icon-eye { color: #6f42c1; } +.wplace-theme-classic-light .wplace-icon-eye { color: #203C5D; } /* Clean light theme animations */ @keyframes light-shimmer { @@ -522,7 +522,7 @@ } .wplace-theme-classic-light .wplace-input-btn-compact { - background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); + background: linear-gradient(135deg, #4facfe 0%, #32C8FE 100%); color: white; border: none; border-radius: 4px; @@ -541,7 +541,7 @@ .wplace-theme-classic-light .wplace-input-btn-compact:hover { transform: translateY(-1px); box-shadow: 0 4px 8px rgba(0,0,0,0.3); - background: linear-gradient(135deg, #00f2fe 0%, #4facfe 100%); + background: linear-gradient(135deg, #32C8FE 0%, #4facfe 100%); } .wplace-theme-classic-light .wplace-input-btn-compact:active { @@ -550,7 +550,7 @@ } .wplace-theme-classic-light .wplace-number-input-compact { - background: #fff; + background: #E0E0E1; border: 1px solid rgb(0 0 0 / 20%); border-radius: 4px; color: var(--wplace-text); @@ -566,7 +566,7 @@ outline: none; border-color: #4facfe; box-shadow: 0 0 0 3px rgba(79, 172, 254, 0.3); - background: #f8f9fa; + background: #FBFBFB; } .wplace-theme-classic-light .wplace-input-label-compact { @@ -607,7 +607,7 @@ } .wplace-theme-classic-light .wplace-color-swatch:hover { - box-shadow: 0 4px 16px rgb(111 66 193 / 30%) !important; + box-shadow: 0 4px 16px rgb(32 60 93 / 30%) !important; transform: translateY(-1px); } @@ -616,3 +616,9 @@ border-radius: 8px !important; border: 1px solid rgb(0 0 0 / 10%) !important; } + + + + + + diff --git a/Extension/themes/classic.css b/Extension/themes/classic.css index cd1fb39..6db93a4 100644 --- a/Extension/themes/classic.css +++ b/Extension/themes/classic.css @@ -6,7 +6,7 @@ --wplace-secondary: linear-gradient(135deg, #111 0%, #2a2a2a 100%); --wplace-accent: #222; --wplace-text: #fff; - --wplace-highlight: #775ce3; + --wplace-highlight: #203C5D; --wplace-success: #0f0; --wplace-error: #f00; --wplace-warning: #fa0; @@ -27,7 +27,7 @@ --wplace-danger: #ff6a6a; --wplace-danger-dark: #ff4757; --wplace-muted-text: #fffB; - --wplace-highlight-secondary: #d3a4ff; + --wplace-highlight-secondary: #203C5D; /* Slider colors */ --wplace-slider-track-bg: linear-gradient(to right, #4facfe 0%, #00f2fe 100%); @@ -360,7 +360,7 @@ --wplace-primary: #fff; --wplace-secondary: #f5f5f5; --wplace-accent: #007acc; - --wplace-text: #333; + --wplace-text: #203C5D; } } @@ -368,7 +368,7 @@ :root .theme-auto, .wplace-theme-classic .theme-auto { --wplace-primary: #1e1e1e; - --wplace-secondary: #2d2d30; + --wplace-secondary: #203C5D; --wplace-accent: var(--wplace-highlight); --wplace-text: #fff; } @@ -746,3 +746,4 @@ border-radius: 12px; box-shadow: 0 0 20px rgb(0 0 0 / 50%); } + diff --git a/Extension/themes/neon-cyan.css b/Extension/themes/neon-cyan.css new file mode 100644 index 0000000..f41140d --- /dev/null +++ b/Extension/themes/neon-cyan.css @@ -0,0 +1,518 @@ +/* WPlace Auto-Image Bot - Neon Cyan Theme */ +/* Retro cyberpunk aesthetic with cyan neon glow effects */ + +.wplace-theme-neon-cyan { + /* Neon theme colors - matching upstream main neon theme */ + --wplace-primary: #1959A1; + --wplace-secondary: #3C74AF; + --wplace-accent: #538CC0; + --wplace-text: #81DCF7; + --wplace-highlight: #EA9C00; + --wplace-success: #39ff14; + --wplace-error: #ff073a; + --wplace-warning: #ff0; + + /* Neon UI properties */ + --wplace-radius: 0; + --wplace-border-style: solid; + --wplace-border-width: 2px; + --wplace-border-color: #81DCF7; + --wplace-shadow: 0 0 20px rgb(234 156 0 / 40%), inset 0 0 20px rgb(234 156 0 / 10%); + --wplace-backdrop: none; + --wplace-font: 'Press Start 2P', monospace, 'Courier New'; + + /* Z-index layers */ + --wplace-z-overlay: 10000; + --wplace-z-alert: 10002; + --wplace-z-settings: 10002; + + /* Feature toggles */ + --wplace-scanline: 1; + --wplace-pixel-blink: 1; + + /* Icon colors - neon variants */ + --wplace-icon-primary: #81DCF7; + --wplace-icon-secondary: #39ff14; + --wplace-icon-palette: #EA9C00; + + /* Additional UI colors - neon variants */ + --wplace-danger: #ff073a; + --wplace-danger-dark: #cc0531; + --wplace-muted-text: #00ff4180; + --wplace-highlight-secondary: #fa0; + + /* Text variants - neon style */ + --wplace-text-secondary: #3C74AF; + --wplace-text-muted: #00ff41; + --wplace-text-dim: #00ff41; + --wplace-text-faded: #00ff41cc; + + /* Background variants - neon style */ + --wplace-bg-input: rgb(234 156 0 / 15%); + --wplace-bg-subtle: rgb(234 156 0 / 8%); + --wplace-bg-faint: rgb(234 156 0 / 5%); + --wplace-bg-ghost: rgb(234 156 0 / 3%); + --wplace-bg-whisper: rgb(234 156 0 / 2%); + + /* Border variants - neon style */ + --wplace-border-subtle: rgb(234 156 0 / 40%); + --wplace-border-faint: rgb(234 156 0 / 25%); + --wplace-border-ghost: rgb(234 156 0 / 15%); + --wplace-border-ultra-faint: rgb(234 156 0 / 8%); + + /* Shadow variants - neon style */ + --wplace-shadow-drag: 0 12px 40px rgb(234 156 0 / 60%), 0 0 0 2px rgb(234 156 0 / 80%), 0 0 20px rgb(234 156 0 / 30%); + --wplace-shadow-notification: 0 4px 12px rgb(234 156 0 / 40%), 0 0 15px rgb(234 156 0 / 20%); + --wplace-shadow-slider-thumb: 0 3px 6px rgb(234 156 0 / 50%), 0 0 0 2px var(--wplace-icon-primary), 0 0 10px rgb(234 156 0 / 30%); + --wplace-shadow-slider-hover: 0 4px 8px rgb(234 156 0 / 60%), 0 0 0 3px var(--wplace-icon-primary), 0 0 15px rgb(234 156 0 / 40%); + + /* Animation colors - neon style */ + --wplace-pulse-start: rgb(234 156 0 / 80%); + --wplace-pulse-mid: rgb(234 156 0 / 0%); + --wplace-pulse-end: rgb(234 156 0 / 0%); + + /* Slider colors - neon style */ + --wplace-slider-thumb-bg: #81DCF7; +} + +/* Neon-specific styling overrides */ +.wplace-theme-neon-cyan #wplace-image-bot-container { + background: var(--wplace-primary) !important; + border: 2px solid var(--wplace-text) !important; + border-radius: 0 !important; + box-shadow: 0 0 20px var(--wplace-text), inset 0 0 20px rgb(234 156 0 / 10%) !important; + font-family: var(--wplace-font) !important; +} + +.wplace-theme-neon-cyan #wplace-stats-container { + background: var(--wplace-primary) !important; + border: 2px solid var(--wplace-text) !important; + border-radius: 0 !important; + box-shadow: 0 0 20px var(--wplace-text), inset 0 0 20px rgb(234 156 0 / 10%) !important; + font-family: var(--wplace-font) !important; + position: fixed !important; + overflow: hidden !important; + z-index: 9998 !important; +} + +.wplace-theme-neon-cyan .wplace-header { + background: var(--wplace-secondary) !important; + border-bottom: 1px solid var(--wplace-text) !important; + color: var(--wplace-text) !important; + text-shadow: 0 0 10px var(--wplace-text) !important; + font-family: var(--wplace-font) !important; +} + +.wplace-theme-neon-cyan .wplace-section { + background: rgb(22 33 62 / 50%) !important; + border: 1px solid var(--wplace-text) !important; + border-radius: 0 !important; +} + +.wplace-theme-neon-cyan .wplace-status-section { + background: rgb(22 33 62 / 50%) !important; + border: 1px solid var(--wplace-text) !important; + border-radius: 0 !important; +} + +.wplace-theme-neon-cyan .wplace-section-title { + color: var(--wplace-text) !important; + text-shadow: 0 0 8px var(--wplace-text) !important; + text-transform: uppercase !important; + font-family: var(--wplace-font) !important; + font-size: 10px !important; +} + +.wplace-theme-neon-cyan .wplace-btn { + background: var(--wplace-secondary) !important; + border: 1px solid var(--wplace-text) !important; + border-radius: 0 !important; + color: var(--wplace-text) !important; + text-shadow: 0 0 5px var(--wplace-text) !important; + font-family: var(--wplace-font) !important; + font-size: 9px !important; + text-transform: uppercase !important; +} + +/* Pixel blinking and neon glow animation for buttons */ +.wplace-theme-neon-cyan .wplace-btn:hover:not(:disabled) { + box-shadow: 0 0 15px var(--wplace-text), inset 0 0 15px rgb(234 156 0 / 10%) !important; + animation: pixel-blink 0.5s infinite, neon-glow 1s ease-in-out infinite alternate !important; +} + +.wplace-theme-neon-cyan .wplace-btn-start { + background: var(--wplace-secondary) !important; + border-color: var(--wplace-success) !important; + color: var(--wplace-success) !important; + text-shadow: 0 0 8px var(--wplace-success) !important; +} + +.wplace-theme-neon-cyan .wplace-btn-stop { + background: var(--wplace-secondary) !important; + border-color: var(--wplace-error) !important; + color: var(--wplace-error) !important; + text-shadow: 0 0 8px var(--wplace-error) !important; +} + +.wplace-theme-neon-cyan .wplace-btn-upload { + background: var(--wplace-secondary) !important; + border: 1px dashed var(--wplace-highlight) !important; + color: var(--wplace-highlight) !important; + text-shadow: 0 0 8px var(--wplace-highlight) !important; +} + +.wplace-theme-neon-cyan .wplace-btn-select { + background: var(--wplace-secondary) !important; + border-color: var(--wplace-highlight) !important; + color: var(--wplace-highlight) !important; + text-shadow: 0 0 8px var(--wplace-highlight) !important; +} + +.wplace-theme-neon-cyan .wplace-btn-file { + background: var(--wplace-secondary) !important; + border-color: var(--wplace-warning) !important; + color: var(--wplace-warning) !important; + text-shadow: 0 0 8px var(--wplace-warning) !important; +} + +.wplace-theme-neon-cyan .wplace-progress { + background: rgb(0 0 0 / 80%) !important; + border: 1px solid var(--wplace-text) !important; + border-radius: 0 !important; +} + +.wplace-theme-neon-cyan .wplace-progress-bar { + background: linear-gradient(90deg, var(--wplace-success) 0%, var(--wplace-text) 100%) !important; + box-shadow: 0 0 10px var(--wplace-success) !important; +} + +.wplace-theme-neon-cyan .wplace-stat-value { + color: var(--wplace-text) !important; + text-shadow: 0 0 5px var(--wplace-text) !important; +} + +.wplace-theme-neon-cyan .status-success { + background: rgb(57 255 20 / 10%) !important; + border-color: var(--wplace-success) !important; + color: var(--wplace-success) !important; + box-shadow: 0 0 15px var(--wplace-success) !important; + text-shadow: 0 0 8px var(--wplace-success) !important; +} + +.wplace-theme-neon-cyan .status-error { + background: rgb(255 7 58 / 10%) !important; + border-color: var(--wplace-error) !important; + color: var(--wplace-error) !important; + box-shadow: 0 0 15px var(--wplace-error) !important; + text-shadow: 0 0 8px var(--wplace-error) !important; +} + +.wplace-theme-neon-cyan .status-default { + background: rgb(234 156 0 / 10%) !important; + border-color: var(--wplace-text) !important; + color: var(--wplace-text) !important; + text-shadow: 0 0 5px var(--wplace-text) !important; +} + +/* Settings dialog neon styling */ +.wplace-theme-neon-cyan #wplace-settings-container { + background: var(--wplace-primary) !important; + border: 2px solid var(--wplace-text) !important; + border-radius: 0 !important; + box-shadow: 0 0 30px var(--wplace-text), inset 0 0 30px rgb(234 156 0 / 10%) !important; + font-family: var(--wplace-font) !important; +} + +.wplace-theme-neon-cyan .wplace-settings-header { + background: var(--wplace-secondary) !important; + border-bottom: 1px solid var(--wplace-text) !important; +} + +.wplace-theme-neon-cyan .wplace-settings-header h3 { + color: var(--wplace-text) !important; + text-shadow: 0 0 10px var(--wplace-text) !important; + font-family: var(--wplace-font) !important; + font-size: 16px !important; + text-transform: uppercase !important; +} + +.wplace-theme-neon-cyan .wplace-settings-close-btn { + background: var(--wplace-secondary) !important; + border: 1px solid var(--wplace-text) !important; + border-radius: 0 !important; + color: var(--wplace-text) !important; +} + +.wplace-theme-neon-cyan .wplace-settings-close-btn:hover { + background: var(--wplace-error) !important; + box-shadow: 0 0 15px var(--wplace-error) !important; +} + +.wplace-theme-neon-cyan .wplace-settings-section-wrapper { + background: rgb(22 33 62 / 30%) !important; + border: 1px solid var(--wplace-text) !important; + border-radius: 0 !important; +} + +.wplace-theme-neon-cyan .wplace-settings-select { + background: var(--wplace-secondary) !important; + border: 1px solid var(--wplace-text) !important; + border-radius: 0 !important; + color: var(--wplace-text) !important; + font-family: var(--wplace-font) !important; + font-size: 11px !important; +} + +.wplace-theme-neon-cyan .wplace-settings-section-label { + color: var(--wplace-text) !important; + text-shadow: 0 0 8px var(--wplace-text) !important; + font-family: var(--wplace-font) !important; + font-size: 12px !important; + text-transform: uppercase !important; +} + +.wplace-theme-neon-cyan .wplace-speed-value { + background: var(--wplace-secondary) !important; + border: 1px solid var(--wplace-text) !important; + border-radius: 0 !important; + color: var(--wplace-text) !important; + text-shadow: 0 0 8px var(--wplace-text) !important; + font-family: var(--wplace-font) !important; + box-shadow: 0 0 10px rgb(234 156 0 / 30%) !important; +} + +.wplace-theme-neon-cyan .wplace-overlay-opacity-value { + background: var(--wplace-secondary) !important; + border: 1px solid var(--wplace-text) !important; + border-radius: 0 !important; + color: var(--wplace-text) !important; + text-shadow: 0 0 5px var(--wplace-text) !important; +} + +/* Neon slider styling */ +.wplace-theme-neon-cyan .wplace-slider, +.wplace-theme-neon-cyan .wplace-speed-slider, +.wplace-theme-neon-cyan .wplace-overlay-opacity-slider { + background: var(--wplace-secondary) !important; + border: 1px solid var(--wplace-text) !important; + border-radius: 0 !important; + box-shadow: 0 0 10px rgb(234 156 0 / 30%) !important; +} + +.wplace-theme-neon-cyan .wplace-slider::-webkit-slider-thumb, +.wplace-theme-neon-cyan .wplace-speed-slider::-webkit-slider-thumb, +.wplace-theme-neon-cyan .wplace-overlay-opacity-slider::-webkit-slider-thumb { + -webkit-appearance: none; + width: 16px; + height: 16px; + border-radius: 0 !important; + background: var(--wplace-slider-thumb-bg) !important; + border: 2px solid var(--wplace-text) !important; + cursor: pointer; + transition: all 0.2s ease; + box-shadow: 0 0 8px rgb(234 156 0 / 50%) !important; +} + +.wplace-theme-neon-cyan .wplace-slider::-webkit-slider-thumb:hover, +.wplace-theme-neon-cyan .wplace-speed-slider::-webkit-slider-thumb:hover, +.wplace-theme-neon-cyan .wplace-overlay-opacity-slider::-webkit-slider-thumb:hover { + transform: scale(1.1); + box-shadow: 0 0 15px var(--wplace-text) !important; +} + +/* Scanline animation for neon theme */ +.wplace-theme-neon-cyan #wplace-image-bot-container::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 2px; + background: linear-gradient(90deg, transparent, var(--wplace-text), transparent); + z-index: 1; + pointer-events: none; + animation: scanline 3s linear infinite; + opacity: 0.7; +} + + +.wplace-theme-neon-cyan #wplace-stats-container::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 2px; + background: linear-gradient(90deg, transparent, var(--wplace-text), transparent); + z-index: 1; + pointer-events: none; + animation: scanline-stats 4s linear infinite; + opacity: 0.7; +} + + +/* Text glow animations */ +@keyframes neon-glow { + 0%, 100% { + text-shadow: 0 0 5px currentcolor, 0 0 10px currentcolor, 0 0 15px currentcolor; + } + + 50% { + text-shadow: 0 0 2px currentcolor, 0 0 5px currentcolor, 0 0 8px currentcolor; + } +} + +@keyframes pixel-blink { + 0%, 50% { + opacity: 1; + } + + 51%, 100% { + opacity: 0.7; + } +} + +@keyframes scanline { + 0% { + transform: translateY(-100%); + } + + 100% { + transform: translateY(400px); + } +} + +@keyframes scanline-stats { + 0% { + transform: translateY(-100%); + } + + 100% { + transform: translateY(300px); + } +} + +/* Dual control layout styling for neon theme */ +.wplace-theme-neon-cyan .wplace-dual-control-compact { + display: flex; + flex-direction: row; + align-items: center; + gap: 8px; + margin: 6px 0; + flex-wrap: wrap; +} + +.wplace-theme-neon-cyan .wplace-slider-container-compact { + display: flex; + align-items: center; + gap: 6px; + flex: 1; + min-width: 160px; +} + +.wplace-theme-neon-cyan .wplace-speed-slider-container-compact { + display: flex; + align-items: center; + gap: 6px; + flex: 1; + min-width: 160px; +} + +.wplace-theme-neon-cyan .wplace-input-group-compact { + display: flex; + align-items: center; + gap: 3px; + flex-shrink: 0; +} + +.wplace-theme-neon-cyan .wplace-input-btn-compact { + background: var(--wplace-secondary) !important; + border: 1px solid var(--wplace-text) !important; + border-radius: 0 !important; + color: var(--wplace-text) !important; + width: 18px; + height: 18px; + cursor: pointer; + font-weight: bold; + font-size: 10px; + display: flex; + align-items: center; + justify-content: center; + transition: all 0.2s ease; + text-shadow: 0 0 5px var(--wplace-text) !important; + font-family: var(--wplace-font) !important; +} + +.wplace-theme-neon-cyan .wplace-input-btn-compact:hover { + box-shadow: 0 0 10px var(--wplace-text) !important; + animation: pixel-blink 0.5s infinite !important; +} + +.wplace-theme-neon-cyan .wplace-number-input-compact { + background: var(--wplace-secondary) !important; + border: 1px solid var(--wplace-text) !important; + border-radius: 0 !important; + color: var(--wplace-text) !important; + padding: 2px 4px; + font-size: 10px; + width: 40px; + text-align: center; + transition: all 0.2s ease; + height: 18px; + font-family: var(--wplace-font) !important; + text-shadow: 0 0 5px var(--wplace-text) !important; +} + +.wplace-theme-neon-cyan .wplace-number-input-compact:focus { + outline: none; + box-shadow: 0 0 10px var(--wplace-text) !important; + background: rgb(234 156 0 / 15%) !important; +} + +.wplace-theme-neon-cyan .wplace-input-label-compact { + color: var(--wplace-text) !important; + font-size: 9px; + margin-left: 3px; + white-space: nowrap; + text-shadow: 0 0 5px var(--wplace-text) !important; + font-family: var(--wplace-font) !important; + text-transform: uppercase; +} + +.wplace-theme-neon-cyan .wplace-batch-size-header { + margin-bottom: 6px; +} + +.wplace-theme-neon-cyan .wplace-batch-size-label { + color: var(--wplace-text) !important; + font-weight: 500; + font-size: 11px; + text-shadow: 0 0 8px var(--wplace-text) !important; + font-family: var(--wplace-font) !important; + text-transform: uppercase; +} + +/* Cooldown control styling for neon theme */ +.wplace-theme-neon-cyan .wplace-cooldown-control { + margin: 8px 0; +} + +.wplace-theme-neon-cyan .wplace-cooldown-control label { + color: var(--wplace-text) !important; + font-weight: 500; + font-size: 11px; + text-shadow: 0 0 8px var(--wplace-text) !important; + font-family: var(--wplace-font) !important; + text-transform: uppercase; + margin-bottom: 6px; + display: block; +} + +/* Resize dialog styling for neon theme */ +.wplace-theme-neon-cyan .resize-container { + background-color: #1959A1 !important; /* Solid neon blue */ + opacity: 1 !important; /* Fully opaque */ + backdrop-filter: none !important; /* Remove blur effects */ + box-shadow: none !important; /* Optional: remove glows */ + font-family: 'Press Start 2P', monospace !important; +} diff --git a/Extension/themes/neon-light.css b/Extension/themes/neon-light.css new file mode 100644 index 0000000..e7c662c --- /dev/null +++ b/Extension/themes/neon-light.css @@ -0,0 +1,519 @@ +/* WPlace Auto-Image Bot - Neon Light Theme */ +/* Retro cyberpunk aesthetic with light neon glow effects */ + +.wplace-theme-neon-light { + /* Neon theme colors - matching upstream main neon theme */ + --wplace-primary: #E0E0E1; + --wplace-secondary: #FBFBFB; + --wplace-accent: #203C5D; + --wplace-text: #203C5D; + --wplace-highlight: #203C5D; + --wplace-success: #39ff14; + --wplace-error: #ff073a; + --wplace-warning: #ff0; + + /* Neon UI properties */ + --wplace-radius: 0; + --wplace-border-style: solid; + --wplace-border-width: 2px; + --wplace-border-color: #203C5D; + --wplace-shadow: 0 0 20px rgb(234 156 0 / 40%), inset 0 0 20px rgb(234 156 0 / 10%); + --wplace-backdrop: none; + --wplace-font: 'Press Start 2P', monospace, 'Courier New'; + + /* Z-index layers */ + --wplace-z-overlay: 10000; + --wplace-z-alert: 10002; + --wplace-z-settings: 10002; + + /* Feature toggles */ + --wplace-scanline: 1; + --wplace-pixel-blink: 1; + + /* Icon colors - neon variants */ + --wplace-icon-primary: #203C5D; + --wplace-icon-secondary: #39ff14; + --wplace-icon-palette: #203C5D; + + /* Additional UI colors - neon variants */ + --wplace-danger: #ff073a; + --wplace-danger-dark: #cc0531; + --wplace-muted-text: #00ff4180; + --wplace-highlight-secondary: #fa0; + + /* Text variants - neon style */ + --wplace-text-secondary: #3C74AF; + --wplace-text-muted: #00ff41; + --wplace-text-dim: #00ff41; + --wplace-text-faded: #00ff41cc; + + /* Background variants - neon style */ + --wplace-bg-input: rgb(234 156 0 / 15%); + --wplace-bg-subtle: rgb(234 156 0 / 8%); + --wplace-bg-faint: rgb(234 156 0 / 5%); + --wplace-bg-ghost: rgb(234 156 0 / 3%); + --wplace-bg-whisper: rgb(234 156 0 / 2%); + + /* Border variants - neon style */ + --wplace-border-subtle: rgb(234 156 0 / 40%); + --wplace-border-faint: rgb(234 156 0 / 25%); + --wplace-border-ghost: rgb(234 156 0 / 15%); + --wplace-border-ultra-faint: rgb(234 156 0 / 8%); + + /* Shadow variants - neon style */ + --wplace-shadow-drag: 0 12px 40px rgb(234 156 0 / 60%), 0 0 0 2px rgb(234 156 0 / 80%), 0 0 20px rgb(234 156 0 / 30%); + --wplace-shadow-notification: 0 4px 12px rgb(234 156 0 / 40%), 0 0 15px rgb(234 156 0 / 20%); + --wplace-shadow-slider-thumb: 0 3px 6px rgb(234 156 0 / 50%), 0 0 0 2px var(--wplace-icon-primary), 0 0 10px rgb(234 156 0 / 30%); + --wplace-shadow-slider-hover: 0 4px 8px rgb(234 156 0 / 60%), 0 0 0 3px var(--wplace-icon-primary), 0 0 15px rgb(234 156 0 / 40%); + + /* Animation colors - neon style */ + --wplace-pulse-start: rgb(234 156 0 / 80%); + --wplace-pulse-mid: rgb(234 156 0 / 0%); + --wplace-pulse-end: rgb(234 156 0 / 0%); + + /* Slider colors - neon style */ + --wplace-slider-thumb-bg: #203C5D; +} + +/* Neon-specific styling overrides */ +.wplace-theme-neon-light #wplace-image-bot-container { + background: var(--wplace-primary) !important; + border: 2px solid var(--wplace-text) !important; + border-radius: 0 !important; + box-shadow: 0 0 20px var(--wplace-text), inset 0 0 20px rgb(234 156 0 / 10%) !important; + font-family: var(--wplace-font) !important; +} + +.wplace-theme-neon-light #wplace-stats-container { + background: var(--wplace-primary) !important; + border: 2px solid var(--wplace-text) !important; + border-radius: 0 !important; + box-shadow: 0 0 20px var(--wplace-text), inset 0 0 20px rgb(234 156 0 / 10%) !important; + font-family: var(--wplace-font) !important; + position: fixed !important; + overflow: hidden !important; + z-index: 9998 !important; +} + +.wplace-theme-neon-light .wplace-header { + background: var(--wplace-secondary) !important; + border-bottom: 1px solid var(--wplace-text) !important; + color: var(--wplace-text) !important; + text-shadow: 0 0 10px var(--wplace-text) !important; + font-family: var(--wplace-font) !important; +} + +.wplace-theme-neon-light .wplace-section { + background: rgb(22 33 62 / 30%) !important; + border: 1px solid var(--wplace-text) !important; + border-radius: 0 !important; +} + +.wplace-theme-neon-light .wplace-status-section { + background: rgb(22 33 62 / 30%) !important; + border: 1px solid var(--wplace-text) !important; + border-radius: 0 !important; +} + +.wplace-theme-neon-light .wplace-section-title { + color: var(--wplace-text) !important; + text-shadow: 0 0 8px var(--wplace-text) !important; + text-transform: uppercase !important; + font-family: var(--wplace-font) !important; + font-size: 10px !important; +} + +.wplace-theme-neon-light .wplace-btn { + background: var(--wplace-secondary) !important; + border: 1px solid var(--wplace-text) !important; + border-radius: 0 !important; + color: var(--wplace-text) !important; + text-shadow: 0 0 5px var(--wplace-text) !important; + font-family: var(--wplace-font) !important; + font-size: 9px !important; + text-transform: uppercase !important; +} + +/* Pixel blinking and neon glow animation for buttons */ +.wplace-theme-neon-light .wplace-btn:hover:not(:disabled) { + box-shadow: 0 0 15px var(--wplace-text), inset 0 0 15px rgb(234 156 0 / 10%) !important; + animation: pixel-blink 0.5s infinite, neon-glow 1s ease-in-out infinite alternate !important; +} + +.wplace-theme-neon-light .wplace-btn-start { + background: var(--wplace-secondary) !important; + border-color: var(--wplace-success) !important; + color: var(--wplace-success) !important; + text-shadow: 0 0 8px var(--wplace-success) !important; +} + +.wplace-theme-neon-light .wplace-btn-stop { + background: var(--wplace-secondary) !important; + border-color: var(--wplace-error) !important; + color: var(--wplace-error) !important; + text-shadow: 0 0 8px var(--wplace-error) !important; +} + +.wplace-theme-neon-light .wplace-btn-upload { + background: var(--wplace-secondary) !important; + border: 1px dashed var(--wplace-highlight) !important; + color: var(--wplace-highlight) !important; + text-shadow: 0 0 8px var(--wplace-highlight) !important; +} + +.wplace-theme-neon-light .wplace-btn-select { + background: var(--wplace-secondary) !important; + border-color: var(--wplace-highlight) !important; + color: var(--wplace-highlight) !important; + text-shadow: 0 0 8px var(--wplace-highlight) !important; +} + +.wplace-theme-neon-light .wplace-btn-file { + background: var(--wplace-secondary) !important; + border-color: var(--wplace-warning) !important; + color: var(--wplace-warning) !important; + text-shadow: 0 0 8px var(--wplace-warning) !important; +} + +.wplace-theme-neon-light .wplace-progress { + background: rgb(0 0 0 / 80%) !important; + border: 1px solid var(--wplace-text) !important; + border-radius: 0 !important; +} + +.wplace-theme-neon-light .wplace-progress-bar { + background: linear-gradient(90deg, var(--wplace-success) 0%, var(--wplace-text) 100%) !important; + box-shadow: 0 0 10px var(--wplace-success) !important; +} + +.wplace-theme-neon-light .wplace-stat-value { + color: var(--wplace-text) !important; + text-shadow: 0 0 5px var(--wplace-text) !important; +} + +.wplace-theme-neon-light .status-success { + background: rgb(57 255 20 / 10%) !important; + border-color: var(--wplace-success) !important; + color: var(--wplace-success) !important; + box-shadow: 0 0 15px var(--wplace-success) !important; + text-shadow: 0 0 8px var(--wplace-success) !important; +} + +.wplace-theme-neon-light .status-error { + background: rgb(255 7 58 / 10%) !important; + border-color: var(--wplace-error) !important; + color: var(--wplace-error) !important; + box-shadow: 0 0 15px var(--wplace-error) !important; + text-shadow: 0 0 8px var(--wplace-error) !important; +} + +.wplace-theme-neon-light .status-default { + background: rgb(234 156 0 / 10%) !important; + border-color: var(--wplace-text) !important; + color: var(--wplace-text) !important; + text-shadow: 0 0 5px var(--wplace-text) !important; +} + +/* Settings dialog neon styling */ +.wplace-theme-neon-light #wplace-settings-container { + background: var(--wplace-primary) !important; + border: 2px solid var(--wplace-text) !important; + border-radius: 0 !important; + box-shadow: 0 0 30px var(--wplace-text), inset 0 0 30px rgb(234 156 0 / 10%) !important; + font-family: var(--wplace-font) !important; +} + +.wplace-theme-neon-light .wplace-settings-header { + background: var(--wplace-secondary) !important; + border-bottom: 1px solid var(--wplace-text) !important; +} + +.wplace-theme-neon-light .wplace-settings-header h3 { + color: var(--wplace-text) !important; + text-shadow: 0 0 10px var(--wplace-text) !important; + font-family: var(--wplace-font) !important; + font-size: 16px !important; + text-transform: uppercase !important; +} + +.wplace-theme-neon-light .wplace-settings-close-btn { + background: var(--wplace-secondary) !important; + border: 1px solid var(--wplace-text) !important; + border-radius: 0 !important; + color: var(--wplace-text) !important; +} + +.wplace-theme-neon-light .wplace-settings-close-btn:hover { + background: var(--wplace-error) !important; + box-shadow: 0 0 15px var(--wplace-error) !important; +} + +.wplace-theme-neon-light .wplace-settings-section-wrapper { + background: rgb(22 33 62 / 10%) !important; + border: 1px solid var(--wplace-text) !important; + border-radius: 0 !important; +} + +.wplace-theme-neon-light .wplace-settings-select { + background: var(--wplace-secondary) !important; + border: 1px solid var(--wplace-text) !important; + border-radius: 0 !important; + color: var(--wplace-text) !important; + font-family: var(--wplace-font) !important; + font-size: 11px !important; +} + +.wplace-theme-neon-light .wplace-settings-section-label { + color: var(--wplace-text) !important; + text-shadow: 0 0 8px var(--wplace-text) !important; + font-family: var(--wplace-font) !important; + font-size: 12px !important; + text-transform: uppercase !important; +} + +.wplace-theme-neon-light .wplace-speed-value { + background: var(--wplace-secondary) !important; + border: 1px solid var(--wplace-text) !important; + border-radius: 0 !important; + color: var(--wplace-text) !important; + text-shadow: 0 0 8px var(--wplace-text) !important; + font-family: var(--wplace-font) !important; + box-shadow: 0 0 10px rgb(234 156 0 / 30%) !important; +} + +.wplace-theme-neon-light .wplace-overlay-opacity-value { + background: var(--wplace-secondary) !important; + border: 1px solid var(--wplace-text) !important; + border-radius: 0 !important; + color: var(--wplace-text) !important; + text-shadow: 0 0 5px var(--wplace-text) !important; +} + +/* Neon slider styling */ +.wplace-theme-neon-light .wplace-slider, +.wplace-theme-neon-light .wplace-speed-slider, +.wplace-theme-neon-light .wplace-overlay-opacity-slider { + background: var(--wplace-secondary) !important; + border: 1px solid var(--wplace-text) !important; + border-radius: 0 !important; + box-shadow: 0 0 10px rgb(234 156 0 / 30%) !important; +} + +.wplace-theme-neon-light .wplace-slider::-webkit-slider-thumb, +.wplace-theme-neon-light .wplace-speed-slider::-webkit-slider-thumb, +.wplace-theme-neon-light .wplace-overlay-opacity-slider::-webkit-slider-thumb { + -webkit-appearance: none; + width: 16px; + height: 16px; + border-radius: 0 !important; + background: var(--wplace-slider-thumb-bg) !important; + border: 2px solid var(--wplace-text) !important; + cursor: pointer; + transition: all 0.2s ease; + box-shadow: 0 0 8px rgb(234 156 0 / 50%) !important; +} + +.wplace-theme-neon-light .wplace-slider::-webkit-slider-thumb:hover, +.wplace-theme-neon-light .wplace-speed-slider::-webkit-slider-thumb:hover, +.wplace-theme-neon-light .wplace-overlay-opacity-slider::-webkit-slider-thumb:hover { + transform: scale(1.1); + box-shadow: 0 0 15px var(--wplace-text) !important; +} + +/* Scanline animation for neon theme */ +.wplace-theme-neon-light #wplace-image-bot-container::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 2px; + background: linear-gradient(90deg, transparent, var(--wplace-text), transparent); + z-index: 1; + pointer-events: none; + animation: scanline 3s linear infinite; + opacity: 0.7; +} + + +.wplace-theme-neon-light #wplace-stats-container::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 2px; + background: linear-gradient(90deg, transparent, var(--wplace-text), transparent); + z-index: 1; + pointer-events: none; + animation: scanline-stats 4s linear infinite; + opacity: 0.7; +} + + +/* Text glow animations */ +@keyframes neon-glow { + 0%, 100% { + text-shadow: 0 0 5px currentcolor, 0 0 10px currentcolor, 0 0 15px currentcolor; + } + + 50% { + text-shadow: 0 0 2px currentcolor, 0 0 5px currentcolor, 0 0 8px currentcolor; + } +} + +@keyframes pixel-blink { + 0%, 50% { + opacity: 1; + } + + 51%, 100% { + opacity: 0.7; + } +} + +@keyframes scanline { + 0% { + transform: translateY(-100%); + } + + 100% { + transform: translateY(400px); + } +} + +@keyframes scanline-stats { + 0% { + transform: translateY(-100%); + } + + 100% { + transform: translateY(300px); + } +} + +/* Dual control layout styling for neon theme */ +.wplace-theme-neon-light .wplace-dual-control-compact { + display: flex; + flex-direction: row; + align-items: center; + gap: 8px; + margin: 6px 0; + flex-wrap: wrap; +} + +.wplace-theme-neon-light .wplace-slider-container-compact { + display: flex; + align-items: center; + gap: 6px; + flex: 1; + min-width: 160px; +} + +.wplace-theme-neon-light .wplace-speed-slider-container-compact { + display: flex; + align-items: center; + gap: 6px; + flex: 1; + min-width: 160px; +} + +.wplace-theme-neon-light .wplace-input-group-compact { + display: flex; + align-items: center; + gap: 3px; + flex-shrink: 0; +} + +.wplace-theme-neon-light .wplace-input-btn-compact { + background: var(--wplace-secondary) !important; + border: 1px solid var(--wplace-text) !important; + border-radius: 0 !important; + color: var(--wplace-text) !important; + width: 18px; + height: 18px; + cursor: pointer; + font-weight: bold; + font-size: 10px; + display: flex; + align-items: center; + justify-content: center; + transition: all 0.2s ease; + text-shadow: 0 0 5px var(--wplace-text) !important; + font-family: var(--wplace-font) !important; +} + +.wplace-theme-neon-light .wplace-input-btn-compact:hover { + box-shadow: 0 0 10px var(--wplace-text) !important; + animation: pixel-blink 0.5s infinite !important; +} + +.wplace-theme-neon-light .wplace-number-input-compact { + background: var(--wplace-secondary) !important; + border: 1px solid var(--wplace-text) !important; + border-radius: 0 !important; + color: var(--wplace-text) !important; + padding: 2px 4px; + font-size: 10px; + width: 40px; + text-align: center; + transition: all 0.2s ease; + height: 18px; + font-family: var(--wplace-font) !important; + text-shadow: 0 0 5px var(--wplace-text) !important; +} + +.wplace-theme-neon-light .wplace-number-input-compact:focus { + outline: none; + box-shadow: 0 0 10px var(--wplace-text) !important; + background: rgb(234 156 0 / 15%) !important; +} + +.wplace-theme-neon-light .wplace-input-label-compact { + color: var(--wplace-text) !important; + font-size: 9px; + margin-left: 3px; + white-space: nowrap; + text-shadow: 0 0 5px var(--wplace-text) !important; + font-family: var(--wplace-font) !important; + text-transform: uppercase; +} + +.wplace-theme-neon-light .wplace-batch-size-header { + margin-bottom: 6px; +} + +.wplace-theme-neon-light .wplace-batch-size-label { + color: var(--wplace-text) !important; + font-weight: 500; + font-size: 11px; + text-shadow: 0 0 8px var(--wplace-text) !important; + font-family: var(--wplace-font) !important; + text-transform: uppercase; +} + +/* Cooldown control styling for neon theme */ +.wplace-theme-neon-light .wplace-cooldown-control { + margin: 8px 0; +} + +.wplace-theme-neon-light .wplace-cooldown-control label { + color: var(--wplace-text) !important; + font-weight: 500; + font-size: 11px; + text-shadow: 0 0 8px var(--wplace-text) !important; + font-family: var(--wplace-font) !important; + text-transform: uppercase; + margin-bottom: 6px; + display: block; +} + +/* Resize dialog styling for neon theme */ +.wplace-theme-neon-light .resize-container { + background-color: #E0E0E1 !important; /* Solid neon white */ + border: 3px solid #203C5D !important; + border-radius: 0 !important; + backdrop-filter: none !important; /* Remove blur effects */ + box-shadow: none !important; /* Optional: remove glows */ + font-family: 'Press Start 2P', monospace !important; +}