tiennm99/WPlace-AutoBOT
1
0 Fork 0
mirror of https://github.com/tiennm99/WPlace-AutoBOT.git synced 2026-10-13 18:15:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

style(theme): standardize and optimize CSS styling across themes

Browse Source 
- 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.
This commit is contained in:
kyuketski committed 2025-09-01 14:11:26 +03:00
1 parent cbb6f63b9d
commit d408460903
6 files changed
+724 -885
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

Auto-Farm.js
+3 -3
View File
@@ -298,7 +298,7 @@
70% { box-shadow: 0 0 0 10px rgba(0, 255, 0, 0); }
100% { box-shadow: 0 0 0 0 rgba(0, 255, 0, 0); }
}
@keyframes slideIn {
@keyframes slide-in {
from { transform: translateY(20px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
@@ -315,7 +315,7 @@
z-index: 9999;
font-family: 'Segoe UI', Roboto, sans-serif;
color: ${CONFIG.THEME.text};
animation: slideIn 0.4s ease-out;
animation: slide-in 0.4s ease-out;
overflow: hidden;
}
.wplace-header {
@@ -594,7 +594,7 @@
statusText.className = `wplace-status status-${type}`;
statusText.style.animation = 'none';
void statusText.offsetWidth;
statusText.style.animation = 'slideIn 0.3s ease-out';
statusText.style.animation = 'slide-in 0.3s ease-out';
}
};
Auto-Image.js
+17 -17
View File
@@ -142,7 +142,7 @@
animations: {
glow: false,
scanline: false,
pixelBlink: false,
'pixel-blink': false,
},
},
'Classic Light': {
@@ -163,7 +163,7 @@
animations: {
glow: false,
scanline: false,
pixelBlink: false,
'pixel-blink': false,
},
},
'Neon Retro': {
@@ -187,7 +187,7 @@
animations: {
glow: true,
scanline: true,
pixelBlink: true,
'pixel-blink': true,
},
},
},
@@ -220,16 +220,16 @@
const theme = getCurrentTheme();
// Toggle theme class on documentElement so CSS vars cascade to our UI
document.documentElement.classList.remove(
'wplace-theme--classic',
'wplace-theme--classic-light',
'wplace-theme--neon'
'wplace-theme-classic',
'wplace-theme-classic-light',
'wplace-theme-neon'
);
let themeClass = 'wplace-theme--classic'; // default
let themeClass = 'wplace-theme-classic'; // default
if (CONFIG.currentTheme === 'Neon Retro') {
themeClass = 'wplace-theme--neon';
themeClass = 'wplace-theme-neon';
} else if (CONFIG.currentTheme === 'Classic Light') {
themeClass = 'wplace-theme--classic-light';
themeClass = 'wplace-theme-classic-light';
}
document.documentElement.classList.add(themeClass);
@@ -1859,7 +1859,7 @@
document.body.appendChild(alertDiv);
setTimeout(() => {
alertDiv.style.animation = 'slideDown 0.3s ease-out reverse';
alertDiv.style.animation = 'slide-down 0.3s ease-out reverse';
setTimeout(() => {
document.body.removeChild(alertDiv);
}, 300);
@@ -3514,7 +3514,7 @@
};
backdrop-filter: ${theme.backdropFilter || 'blur(10px)'};
overflow: hidden;
animation: settingsSlideIn 0.4s ease-out;
animation: settings-slide-in 0.4s ease-out;
${
theme.animations?.glow
? `
@@ -3937,7 +3937,7 @@
to { transform: rotate(360deg); }
}
@keyframes settingsSlideIn {
@keyframes settings-slide-in {
from {
opacity: 0;
transform: translate(-50%, -50%) scale(0.9);
@@ -3948,7 +3948,7 @@
}
}
@keyframes settingsFadeOut {
@keyframes settings-fade-out {
from {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
@@ -4414,7 +4414,7 @@
settingsBtn.addEventListener('click', () => {
const isVisible = settingsContainer.classList.contains('show');
if (isVisible) {
settingsContainer.style.animation = 'settingsFadeOut 0.3s ease-out forwards';
settingsContainer.style.animation = 'settings-fade-out 0.3s ease-out forwards';
settingsContainer.classList.remove('show');
setTimeout(() => {
settingsContainer.style.animation = '';
@@ -4424,12 +4424,12 @@
settingsContainer.style.left = '50%';
settingsContainer.style.transform = 'translate(-50%, -50%)';
settingsContainer.classList.add('show');
settingsContainer.style.animation = 'settingsSlideIn 0.4s ease-out';
settingsContainer.style.animation = 'settings-slide-in 0.4s ease-out';
}
});
closeSettingsBtn.addEventListener('click', () => {
settingsContainer.style.animation = 'settingsFadeOut 0.3s ease-out forwards';
settingsContainer.style.animation = 'settings-fade-out 0.3s ease-out forwards';
settingsContainer.classList.remove('show');
setTimeout(() => {
settingsContainer.style.animation = '';
@@ -4984,7 +4984,7 @@
// Trigger animation only when silent = false
statusText.style.animation = 'none';
void statusText.offsetWidth; // trick to restart the animation
statusText.style.animation = 'slideIn 0.3s ease-out';
statusText.style.animation = 'slide-in 0.3s ease-out';
}
};
auto-image-styles.css
+207 -312
View File
File diff suppressed because it is too large. Load diff
themes/classic-light.css
+237 -234
View File
@@ -1,9 +1,10 @@
/* WPlace Auto-Image Bot - Classic Light Theme */
/* Clean, bright theme based on classic design with light backgrounds */
.wplace-theme--classic-light {
.wplace-theme-classic-light {
/* === CORE COLORS === */
--wplace-primary: #ffffff; /* Clean white */
--wplace-primary: #fff; /* Clean white */
--wplace-secondary: #f8f9fa; /* Light gray */
--wplace-accent: #e9ecef; /* Lighter gray */
--wplace-text: #212529; /* Dark text */
@@ -18,11 +19,12 @@
--wplace-border-style: solid;
--wplace-border-width: 1px;
--wplace-border-color: #415a77;
--wplace-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.08);
--wplace-shadow: 0 8px 32px rgb(0 0 0 / 15%), 0 0 0 1px rgb(0 0 0 / 8%);
--wplace-backdrop: blur(10px);
--wplace-font: 'Segoe UI', Roboto, sans-serif;
--wplace-font: 'Segoe UI', roboto, sans-serif;
/* === EXTENDED COLOR PALETTE === */
/* Icon colors */
--wplace-icon-primary: #4facfe; /* Light blue */
--wplace-icon-secondary: #00f2fe; /* Cyan */
@@ -31,38 +33,38 @@
/* Additional UI colors */
--wplace-danger: #dc3545; /* Bootstrap red */
--wplace-danger-dark: #c82333; /* Darker red */
--wplace-muted-text: rgba(33, 37, 41, 0.7);
--wplace-muted-text: rgb(33 37 41 / 70%);
--wplace-highlight-secondary: #d3a4ff;
/* Text variants */
--wplace-text-secondary: rgba(33, 37, 41, 0.9);
--wplace-text-muted: rgba(33, 37, 41, 0.7);
--wplace-text-dim: rgba(33, 37, 41, 0.6);
--wplace-text-faded: rgba(33, 37, 41, 0.8);
--wplace-text-secondary: rgb(33 37 41 / 90%);
--wplace-text-muted: rgb(33 37 41 / 70%);
--wplace-text-dim: rgb(33 37 41 / 60%);
--wplace-text-faded: rgb(33 37 41 / 80%);
/* Background variants */
--wplace-bg-input: rgba(0, 0, 0, 0.08);
--wplace-bg-subtle: rgba(0, 0, 0, 0.05);
--wplace-bg-faint: rgba(0, 0, 0, 0.03);
--wplace-bg-ghost: rgba(0, 0, 0, 0.02);
--wplace-bg-whisper: rgba(0, 0, 0, 0.01);
--wplace-bg-input: rgb(0 0 0 / 8%);
--wplace-bg-subtle: rgb(0 0 0 / 5%);
--wplace-bg-faint: rgb(0 0 0 / 3%);
--wplace-bg-ghost: rgb(0 0 0 / 2%);
--wplace-bg-whisper: rgb(0 0 0 / 1%);
/* Border variants */
--wplace-border-subtle: rgba(0, 0, 0, 0.2);
--wplace-border-faint: rgba(0, 0, 0, 0.15);
--wplace-border-ghost: rgba(0, 0, 0, 0.1);
--wplace-border-ultra-faint: rgba(0, 0, 0, 0.05);
--wplace-border-subtle: rgb(0 0 0 / 20%);
--wplace-border-faint: rgb(0 0 0 / 15%);
--wplace-border-ghost: rgb(0 0 0 / 10%);
--wplace-border-ultra-faint: rgb(0 0 0 / 5%);
/* Shadow variants */
--wplace-shadow-drag: 0 12px 40px rgba(0, 0, 0, 0.2), 0 0 0 2px rgba(111, 66, 193, 0.3);
--wplace-shadow-notification: 0 4px 12px rgba(0, 0, 0, 0.15);
--wplace-shadow-slider-thumb: 0 3px 6px rgba(0, 0, 0, 0.2), 0 0 0 2px var(--wplace-icon-primary);
--wplace-shadow-slider-hover: 0 4px 8px rgba(0, 0, 0, 0.25), 0 0 0 3px var(--wplace-icon-primary);
--wplace-shadow-drag: 0 12px 40px rgb(0 0 0 / 20%), 0 0 0 2px rgb(111 66 193 / 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);
/* Animation colors */
--wplace-pulse-start: rgba(40, 167, 69, 0.7);
--wplace-pulse-mid: rgba(40, 167, 69, 0);
--wplace-pulse-end: rgba(40, 167, 69, 0);
--wplace-pulse-start: rgb(40 167 69 / 70%);
--wplace-pulse-mid: rgb(40 167 69 / 0%);
--wplace-pulse-end: rgb(40 167 69 / 0%);
/* Slider colors */
--wplace-slider-thumb-bg: #6f42c1;
@@ -72,23 +74,23 @@
/* === COMPONENT STYLING === */
/* Main container with clean light styling */
.wplace-theme--classic-light #wplace-image-bot-container {
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%) !important;
.wplace-theme-classic-light #wplace-image-bot-container {
background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%) !important;
color: var(--wplace-text) !important;
border: 1px solid rgba(0, 0, 0, 0.15) !important;
border: 1px solid rgb(0 0 0 / 15%) !important;
border-radius: 12px !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.08) !important;
box-shadow: 0 8px 32px rgb(0 0 0 / 15%), 0 0 0 1px rgb(0 0 0 / 8%) !important;
font-family: 'Segoe UI', Roboto, sans-serif !important;
backdrop-filter: blur(10px) !important;
}
/* Stats container with proper contrast */
.wplace-theme--classic-light #wplace-stats-container {
.wplace-theme-classic-light #wplace-stats-container {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
border: 1px solid rgba(0, 0, 0, 0.2) !important;
border: 1px solid rgb(0 0 0 / 20%) !important;
border-radius: 12px !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;
box-shadow: 0 8px 32px rgb(0 0 0 / 15%) !important;
font-family: 'Segoe UI', Roboto, sans-serif !important;
color: var(--wplace-text) !important;
position: fixed !important;
@@ -96,142 +98,44 @@
z-index: 9998 !important;
}
/* Headers with light gradient */
.wplace-theme-classic-light .wplace-header {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
color: var(--wplace-highlight) !important;
border-bottom: 1px solid rgb(0 0 0 / 15%) !important;
text-shadow: none !important;
}
/* Stats header styling */
.wplace-theme--classic-light #wplace-stats-container .wplace-header {
.wplace-theme-classic-light #wplace-stats-container .wplace-header {
background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%) !important;
color: var(--wplace-text) !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.2) !important;
border-bottom: 1px solid rgb(0 0 0 / 20%) !important;
text-shadow: none !important;
font-weight: 600 !important;
}
/* Stats title specific styling */
.wplace-theme--classic-light #wplace-stats-container .wplace-header .wplace-stats-title {
.wplace-theme-classic-light #wplace-stats-container .wplace-header .wplace-stats-title {
color: var(--wplace-text) !important;
text-shadow: none !important;
}
/* Comprehensive text and element styling for light theme - scoped to bot containers only */
.wplace-theme--classic-light .wplace-status,
.wplace-theme--classic-light .wplace-stats,
.wplace-theme--classic-light .wplace-section,
.wplace-theme--classic-light .wplace-controls,
.wplace-theme--classic-light .wplace-data-management,
.wplace-theme--classic-light .wplace-cooldown-settings {
.wplace-theme-classic-light .wplace-status,
.wplace-theme-classic-light .wplace-stats,
.wplace-theme-classic-light .wplace-section,
.wplace-theme-classic-light .wplace-controls,
.wplace-theme-classic-light .wplace-data-management,
.wplace-theme-classic-light .wplace-cooldown-settings {
color: var(--wplace-text) !important;
}
/* Data management section buttons */
.wplace-theme--classic-light .wplace-data-management .wplace-btn {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
border: 1px solid rgba(0, 0, 0, 0.2) !important;
color: #212529 !important;
font-weight: 500 !important;
}
.wplace-theme--classic-light .wplace-data-management .wplace-btn:hover:not(:disabled) {
background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%) !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}
/* Settings dialog */
.wplace-theme--classic-light #wplace-settings-container {
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%) !important;
border: 1px solid rgba(0, 0, 0, 0.15) !important;
border-radius: 12px !important;
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.08) !important;
font-family: 'Segoe UI', Roboto, sans-serif !important;
backdrop-filter: blur(10px) !important;
color: var(--wplace-text) !important;
}
/* Settings dialog text elements */
.wplace-theme--classic-light #wplace-settings-container * {
color: var(--wplace-text) !important;
}
.wplace-theme--classic-light #wplace-settings-container .wplace-settings-section-wrapper * {
color: var(--wplace-text) !important;
}
/* Color palette text labels */
.wplace-theme--classic-light .wplace-stat-colors-grid * {
color: var(--wplace-text) !important;
font-weight: 500 !important;
}
.wplace-theme--classic-light .wplace-color-label {
color: var(--wplace-text) !important;
font-weight: 500 !important;
text-shadow: none !important;
}
.wplace-theme--classic-light .wplace-color-name {
color: var(--wplace-text) !important;
font-weight: 500 !important;
}
.wplace-theme--classic-light .wplace-color-item-name {
color: #000000 !important;
font-weight: 600 !important;
text-shadow: none !important;
}
/* Resize dialog */
.wplace-theme--classic-light .resize-container {
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%) !important;
border: 1px solid rgba(0, 0, 0, 0.15) !important;
border-radius: 12px !important;
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.08) !important;
font-family: 'Segoe UI', Roboto, sans-serif !important;
backdrop-filter: blur(10px) !important;
}
/* Headers with light gradient */
.wplace-theme--classic-light .wplace-header {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
color: var(--wplace-highlight) !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.15) !important;
text-shadow: none !important;
}
/* Settings header */
.wplace-theme--classic-light .wplace-settings-header {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.15) !important;
}
.wplace-theme--classic-light .wplace-settings-title {
color: var(--wplace-text) !important;
text-shadow: none !important;
}
.wplace-theme--classic-light .wplace-settings-close-btn {
background: rgba(0, 0, 0, 0.05) !important;
border: 1px solid rgba(0, 0, 0, 0.2) !important;
border-radius: 50% !important;
color: var(--wplace-text) !important;
transition: all 0.3s ease !important;
}
.wplace-theme--classic-light .wplace-settings-close-btn:hover {
background: rgba(220, 53, 69, 0.1) !important;
border-color: var(--wplace-error) !important;
box-shadow: 0 0 12px rgba(220, 53, 69, 0.3) !important;
}
/* Section titles */
.wplace-theme--classic-light .wplace-section-title {
color: var(--wplace-highlight) !important;
text-shadow: none !important;
font-weight: 600 !important;
}
/* Buttons with light styling */
.wplace-theme--classic-light .wplace-btn {
.wplace-theme-classic-light .wplace-btn {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
border: 1px solid rgba(0, 0, 0, 0.2) !important;
border: 1px solid rgb(0 0 0 / 20%) !important;
border-radius: 12px !important;
color: var(--wplace-text) !important;
font-family: 'Segoe UI', Roboto, sans-serif !important;
@@ -239,180 +143,278 @@
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.wplace-theme--classic-light .wplace-btn:hover:not(:disabled) {
/* Data management section buttons */
.wplace-theme-classic-light .wplace-data-management .wplace-btn {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
border: 1px solid rgb(0 0 0 / 20%) !important;
color: #212529 !important;
font-weight: 500 !important;
}
.wplace-theme-classic-light .wplace-btn:hover:not(:disabled) {
background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%) !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !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;
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;
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;
font-family: 'Segoe UI', Roboto, sans-serif !important;
backdrop-filter: blur(10px) !important;
color: var(--wplace-text) !important;
}
/* Settings dialog text elements */
.wplace-theme-classic-light .wplace-stat-colors-grid * {
color: var(--wplace-text) !important;
font-weight: 500 !important;
}
.wplace-theme-classic-light #wplace-settings-container * {
color: var(--wplace-text) !important;
}
.wplace-theme-classic-light #wplace-settings-container .wplace-settings-section-wrapper * {
color: var(--wplace-text) !important;
}
/* Color palette text labels */
.wplace-theme-classic-light .wplace-color-label {
color: var(--wplace-text) !important;
font-weight: 500 !important;
text-shadow: none !important;
}
.wplace-theme-classic-light .wplace-color-name {
color: var(--wplace-text) !important;
font-weight: 500 !important;
}
.wplace-theme-classic-light .wplace-color-item-name {
color: #000 !important;
font-weight: 600 !important;
text-shadow: none !important;
}
/* Resize dialog */
.wplace-theme-classic-light .resize-container {
background: linear-gradient(135deg, #fff 0%, #f8f9fa 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;
font-family: 'Segoe UI', Roboto, sans-serif !important;
backdrop-filter: blur(10px) !important;
}
/* Settings header */
.wplace-theme-classic-light .wplace-settings-header {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
border-bottom: 1px solid rgb(0 0 0 / 15%) !important;
}
.wplace-theme-classic-light .wplace-settings-title {
color: var(--wplace-text) !important;
text-shadow: none !important;
}
.wplace-theme-classic-light .wplace-settings-close-btn {
background: rgb(0 0 0 / 5%) !important;
border: 1px solid rgb(0 0 0 / 20%) !important;
border-radius: 50% !important;
color: var(--wplace-text) !important;
transition: all 0.3s ease !important;
}
.wplace-theme-classic-light .wplace-settings-close-btn:hover {
background: rgb(220 53 69 / 10%) !important;
border-color: var(--wplace-error) !important;
box-shadow: 0 0 12px rgb(220 53 69 / 30%) !important;
}
/* Section titles */
.wplace-theme-classic-light .wplace-section-title {
color: var(--wplace-highlight) !important;
text-shadow: none !important;
font-weight: 600 !important;
}
/* Button variants with classic light colors */
.wplace-theme--classic-light .wplace-btn-start {
.wplace-theme-classic-light .wplace-btn-start {
background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
color: white !important;
font-weight: 600 !important;
}
.wplace-theme--classic-light .wplace-btn-start:hover:not(:disabled) {
box-shadow: 0 4px 12px rgba(40, 167, 69, 0.4) !important;
.wplace-theme-classic-light .wplace-btn-start:hover:not(:disabled) {
box-shadow: 0 4px 12px rgb(40 167 69 / 40%) !important;
}
.wplace-theme--classic-light .wplace-btn-stop {
.wplace-theme-classic-light .wplace-btn-stop {
background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
color: white !important;
font-weight: 600 !important;
}
.wplace-theme--classic-light .wplace-btn-stop:hover:not(:disabled) {
box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4) !important;
.wplace-theme-classic-light .wplace-btn-stop:hover:not(:disabled) {
box-shadow: 0 4px 12px rgb(220 53 69 / 40%) !important;
}
.wplace-theme--classic-light .wplace-btn-upload {
background: rgba(111, 66, 193, 0.1) !important;
.wplace-theme-classic-light .wplace-btn-upload {
background: rgb(111 66 193 / 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: rgba(111, 66, 193, 0.15) !important;
box-shadow: 0 4px 12px rgba(111, 66, 193, 0.2) !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;
}
/* Progress bars with clean light styling */
.wplace-theme--classic-light .wplace-progress {
background: rgba(0, 0, 0, 0.1) !important;
border: 1px solid rgba(0, 0, 0, 0.15) !important;
.wplace-theme-classic-light .wplace-progress {
background: rgb(0 0 0 / 10%) !important;
border: 1px solid rgb(0 0 0 / 15%) !important;
border-radius: 12px !important;
}
.wplace-theme--classic-light .wplace-progress-bar {
.wplace-theme-classic-light .wplace-progress-bar {
background: linear-gradient(135deg, #6f42c1 0%, #9370db 100%) !important;
box-shadow: none !important;
}
.wplace-theme--classic-light .wplace-progress-bar::after {
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent) !important;
.wplace-theme-classic-light .wplace-progress-bar::after {
background: linear-gradient(90deg, transparent, rgb(255 255 255 / 30%), transparent) !important;
}
/* Status indicators with light colors */
.wplace-theme--classic-light .status-success {
background: rgba(40, 167, 69, 0.1) !important;
.wplace-theme-classic-light .status-success {
background: rgb(40 167 69 / 10%) !important;
border-color: var(--wplace-success) !important;
color: var(--wplace-success) !important;
box-shadow: 0 0 15px rgba(40, 167, 69, 0.2) !important;
box-shadow: 0 0 15px rgb(40 167 69 / 20%) !important;
text-shadow: none !important;
}
.wplace-theme--classic-light .status-error {
background: rgba(220, 53, 69, 0.1) !important;
.wplace-theme-classic-light .status-error {
background: rgb(220 53 69 / 10%) !important;
border-color: var(--wplace-error) !important;
color: var(--wplace-error) !important;
box-shadow: 0 0 15px rgba(220, 53, 69, 0.2) !important;
box-shadow: 0 0 15px rgb(220 53 69 / 20%) !important;
text-shadow: none !important;
}
.wplace-theme--classic-light .status-default {
background: rgba(111, 66, 193, 0.1) !important;
.wplace-theme-classic-light .status-default {
background: rgb(111 66 193 / 10%) !important;
border-color: var(--wplace-highlight) !important;
color: var(--wplace-highlight) !important;
text-shadow: none !important;
}
.wplace-theme--classic-light .wplace-stat-label {
.wplace-theme-classic-light .wplace-stat-label {
color: var(--wplace-text) !important;
text-shadow: none !important;
font-weight: 500 !important;
}
.wplace-theme--classic-light .wplace-stat-value {
.wplace-theme-classic-light .wplace-stat-value {
color: var(--wplace-highlight) !important;
text-shadow: none !important;
font-weight: 600 !important;
}
/* Sections with light styling */
.wplace-theme--classic-light .wplace-section {
background: rgba(0, 0, 0, 0.03) !important;
border: 1px solid rgba(0, 0, 0, 0.1) !important;
.wplace-theme-classic-light .wplace-section {
background: rgb(0 0 0 / 3%) !important;
border: 1px solid rgb(0 0 0 / 10%) !important;
border-radius: 12px !important;
}
.wplace-theme--classic-light .wplace-status-section {
background: rgba(0, 0, 0, 0.03) !important;
border: 1px solid rgba(0, 0, 0, 0.1) !important;
.wplace-theme-classic-light .wplace-status-section {
background: rgb(0 0 0 / 3%) !important;
border: 1px solid rgb(0 0 0 / 10%) !important;
border-radius: 12px !important;
}
.wplace-theme--classic-light .wplace-settings-section-wrapper {
background: rgba(0, 0, 0, 0.03) !important;
border: 1px solid rgba(0, 0, 0, 0.1) !important;
.wplace-theme-classic-light .wplace-settings-section-wrapper {
background: rgb(0 0 0 / 3%) !important;
border: 1px solid rgb(0 0 0 / 10%) !important;
border-radius: 12px !important;
}
/* Form controls with light styling */
.wplace-theme--classic-light .wplace-settings-select {
background: #ffffff !important;
border: 1px solid rgba(0, 0, 0, 0.2) !important;
.wplace-theme-classic-light .wplace-settings-select {
background: #fff !important;
border: 1px solid rgb(0 0 0 / 20%) !important;
border-radius: 8px !important;
color: var(--wplace-text) !important;
font-family: 'Segoe UI', Roboto, sans-serif !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
box-shadow: 0 2px 8px rgb(0 0 0 / 10%) !important;
}
.wplace-theme--classic-light .wplace-settings-select:focus {
.wplace-theme-classic-light .wplace-settings-select:focus {
border-color: var(--wplace-highlight) !important;
box-shadow: 0 0 0 2px rgba(111, 66, 193, 0.3) !important;
box-shadow: 0 0 0 2px rgb(111 66 193 / 30%) !important;
}
/* Dropdown menu options */
.wplace-theme--classic-light .wplace-settings-select option {
background: #ffffff !important;
.wplace-theme-classic-light .wplace-settings-select option {
background: #fff !important;
color: var(--wplace-text) !important;
}
.wplace-theme--classic-light .wplace-settings-option {
background: #ffffff !important;
.wplace-theme-classic-light .wplace-settings-option {
background: #fff !important;
color: var(--wplace-text) !important;
}
/* Sliders with classic gradient */
.wplace-theme--classic-light .wplace-speed-slider {
.wplace-theme-classic-light .wplace-speed-slider {
background: linear-gradient(to right, #4facfe 0%, #00f2fe 100%) !important;
border-radius: 4px !important;
}
.wplace-theme--classic-light .wplace-overlay-opacity-slider {
.wplace-theme-classic-light .wplace-overlay-opacity-slider {
background: linear-gradient(to right, #4facfe 0%, #00f2fe 100%) !important;
border-radius: 4px !important;
}
.wplace-theme--classic-light .wplace-slider {
.wplace-theme-classic-light .wplace-slider {
background: linear-gradient(to right, #4facfe 0%, #00f2fe 100%) !important;
border-radius: 4px !important;
}
.wplace-theme--classic-light .wplace-slider::-webkit-slider-thumb {
.wplace-theme-classic-light .wplace-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--wplace-slider-thumb-bg);
border: 1px solid rgba(0, 0, 0, 0.2);
border: 1px solid rgb(0 0 0 / 20%);
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
}
.wplace-theme--classic-light .wplace-speed-value {
.wplace-theme-classic-light .wplace-speed-value {
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%) !important;
border-radius: 8px !important;
color: white !important;
font-weight: 600 !important;
box-shadow: 0 3px 10px rgba(79, 172, 254, 0.3) !important;
border: 1px solid rgba(0, 0, 0, 0.1) !important;
box-shadow: 0 3px 10px rgb(79 172 254 / 30%) !important;
border: 1px solid rgb(0 0 0 / 10%) !important;
}
/* Settings labels */
.wplace-theme--classic-light .wplace-settings-section-label {
.wplace-theme-classic-light .wplace-settings-section-label {
color: var(--wplace-highlight) !important;
text-shadow: none !important;
font-family: 'Segoe UI', Roboto, sans-serif !important;
@@ -420,65 +422,66 @@
}
/* Icon colors for classic light theme */
.wplace-theme--classic-light .wplace-icon-key { color: #4facfe; }
.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-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-key { color: #4facfe; }
.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-globe { color: #ffeaa7; }
.wplace-theme-classic-light .wplace-icon-paint { color: #4facfe; }
.wplace-theme-classic-light .wplace-icon-eye { color: #6f42c1; }
/* Clean light theme animations */
@keyframes lightShimmer {
@keyframes light-shimmer {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(200%);
}
}
/* Turnstile/CF checkbox overlay - CRITICAL FIX */
.wplace-theme--classic-light .wplace-turnstile-overlay {
background: rgba(255, 255, 255, 0.98) !important;
.wplace-theme-classic-light .wplace-turnstile-overlay {
background: rgb(255 255 255 / 98%) !important;
border-radius: 12px !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
box-shadow: 0 8px 32px rgb(0 0 0 / 30%) !important;
backdrop-filter: blur(10px) !important;
border: 1px solid rgba(0, 0, 0, 0.2) !important;
border: 1px solid rgb(0 0 0 / 20%) !important;
color: var(--wplace-text) !important;
font-family: 'Segoe UI', Roboto, sans-serif !important;
}
.wplace-theme--classic-light .wplace-turnstile-title {
.wplace-theme-classic-light .wplace-turnstile-title {
color: var(--wplace-text) !important;
}
.wplace-theme--classic-light .wplace-turnstile-hide-btn {
.wplace-theme-classic-light .wplace-turnstile-hide-btn {
color: var(--wplace-text) !important;
border: 1px solid rgba(0, 0, 0, 0.2) !important;
border: 1px solid rgb(0 0 0 / 20%) !important;
border-radius: 6px !important;
background: rgba(0, 0, 0, 0.05) !important;
background: rgb(0 0 0 / 5%) !important;
}
.wplace-theme--classic-light .wplace-turnstile-hide-btn:hover {
background: rgba(0, 0, 0, 0.1) !important;
.wplace-theme-classic-light .wplace-turnstile-hide-btn:hover {
background: rgb(0 0 0 / 10%) !important;
}
/* Color swatches with light styling */
.wplace-theme--classic-light .wplace-color-swatch {
border: 1px solid rgba(0, 0, 0, 0.2) !important;
.wplace-theme-classic-light .wplace-color-swatch {
border: 1px solid rgb(0 0 0 / 20%) !important;
border-radius: 4px !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
box-shadow: 0 2px 8px rgb(0 0 0 / 10%) !important;
}
.wplace-theme--classic-light .wplace-color-swatch:hover {
box-shadow: 0 4px 16px rgba(111, 66, 193, 0.3) !important;
.wplace-theme-classic-light .wplace-color-swatch:hover {
box-shadow: 0 4px 16px rgb(111 66 193 / 30%) !important;
transform: translateY(-1px);
}
.wplace-theme--classic-light .wplace-stat-colors-grid {
background: rgba(0, 0, 0, 0.05) !important;
.wplace-theme-classic-light .wplace-stat-colors-grid {
background: rgb(0 0 0 / 5%) !important;
border-radius: 8px !important;
border: 1px solid rgba(0, 0, 0, 0.1) !important;
border: 1px solid rgb(0 0 0 / 10%) !important;
}
themes/classic.css
+169 -227
View File
@@ -1,22 +1,20 @@
/* WPlace Auto-Image Bot - Classic Theme */
/* Clean, modern UI with gradients and subtle effects */
.wplace-theme--classic {
--wplace-primary: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
--wplace-secondary: linear-gradient(135deg, #111111 0%, #2a2a2a 100%);
--wplace-accent: #222222;
--wplace-text: #ffffff;
.wplace-theme-classic {
--wplace-primary: linear-gradient(135deg, #000 0%, #1a1a1a 100%);
--wplace-secondary: linear-gradient(135deg, #111 0%, #2a2a2a 100%);
--wplace-accent: #222;
--wplace-text: #fff;
--wplace-highlight: #775ce3;
--wplace-success: #00ff00;
--wplace-error: #ff0000;
--wplace-warning: #ffaa00;
--wplace-success: #0f0;
--wplace-error: #f00;
--wplace-warning: #fa0;
--wplace-radius: 12px;
--wplace-btn-radius: 16px;
--wplace-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.1);
--wplace-shadow: 0 8px 32px rgb(0 0 0 / 60%), 0 0 0 1px rgb(255 255 255 / 10%);
--wplace-backdrop: blur(10px);
--wplace-font: 'Segoe UI', Roboto, sans-serif;
--wplace-font: 'Segoe UI', roboto, sans-serif;
--wplace-scanline: 0;
--wplace-pixel-blink: 0;
@@ -28,47 +26,16 @@
/* Additional UI colors */
--wplace-danger: #ff6a6a;
--wplace-danger-dark: #ff4757;
--wplace-muted-text: #ffffffBB;
--wplace-muted-text: #fffB;
--wplace-highlight-secondary: #d3a4ff;
/* Text variants */
--wplace-text-secondary: rgba(255,255,255,0.9);
--wplace-text-muted: rgba(255,255,255,0.7);
--wplace-text-dim: rgba(255,255,255,0.6);
--wplace-text-faded: rgba(255,255,255,0.8);
/* Background variants */
--wplace-bg-input: rgba(255,255,255,0.15);
--wplace-bg-subtle: rgba(255,255,255,0.1);
--wplace-bg-faint: rgba(255,255,255,0.08);
--wplace-bg-ghost: rgba(255,255,255,0.06);
--wplace-bg-whisper: rgba(255,255,255,0.05);
/* Border variants */
--wplace-border-subtle: rgba(255,255,255,0.2);
--wplace-border-faint: rgba(255,255,255,0.15);
--wplace-border-ghost: rgba(255,255,255,0.1);
--wplace-border-ultra-faint: rgba(255,255,255,0.05);
/* Shadow variants */
--wplace-shadow-drag: 0 12px 40px rgba(0, 0, 0, 0.8), 0 0 0 2px rgba(255, 255, 255, 0.2);
--wplace-shadow-notification: 0 4px 12px rgba(0, 0, 0, 0.3);
--wplace-shadow-slider-thumb: 0 3px 6px rgba(0,0,0,0.3), 0 0 0 2px var(--wplace-icon-primary);
--wplace-shadow-slider-hover: 0 4px 8px rgba(0,0,0,0.4), 0 0 0 3px var(--wplace-icon-primary);
/* Animation colors */
--wplace-pulse-start: rgba(0, 255, 0, 0.7);
--wplace-pulse-mid: rgba(0, 255, 0, 0);
--wplace-pulse-end: rgba(0, 255, 0, 0);
/* Slider colors */
--wplace-slider-thumb-bg: white;
--wplace-slider-track-bg: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
}
/* Classic theme container styling */
:root #wplace-image-bot-container,
.wplace-theme--classic #wplace-image-bot-container {
.wplace-theme-classic #wplace-image-bot-container {
background: var(--wplace-primary);
color: var(--wplace-text);
border-radius: var(--wplace-radius);
@@ -79,7 +46,7 @@
}
:root #wplace-stats-container,
.wplace-theme--classic #wplace-stats-container {
.wplace-theme-classic #wplace-stats-container {
background: var(--wplace-primary);
color: var(--wplace-text);
border-radius: var(--wplace-radius);
@@ -90,7 +57,7 @@
}
:root #wplace-settings-container,
.wplace-theme--classic #wplace-settings-container {
.wplace-theme-classic #wplace-settings-container {
background: var(--wplace-primary);
color: var(--wplace-text);
border-radius: var(--wplace-radius);
@@ -101,48 +68,55 @@
}
:root .wplace-header,
.wplace-theme--classic .wplace-header {
.wplace-theme-classic .wplace-header {
background: var(--wplace-secondary);
color: var(--wplace-highlight);
text-shadow: 0 1px 2px rgb(0 0 0 / 50%);
}
:root .wplace-section-title,
.wplace-theme--classic .wplace-section-title {
.wplace-theme-classic .wplace-section-title {
color: var(--wplace-highlight);
}
:root .wplace-stat-value,
.wplace-theme--classic .wplace-stat-value {
.wplace-theme-classic .wplace-stat-value {
color: var(--wplace-highlight);
}
:root .wplace-status-section,
.wplace-theme--classic .wplace-status-section {
.wplace-theme-classic .wplace-status-section {
border-radius: var(--wplace-radius);
background: rgb(255 255 255 / 3%);
border: 1px solid rgb(255 255 255 / 10%);
}
:root .wplace-section,
.wplace-theme--classic .wplace-section {
.wplace-theme-classic .wplace-section {
border-radius: var(--wplace-radius);
background: rgb(255 255 255 / 3%);
}
:root .wplace-stats,
.wplace-theme--classic .wplace-stats {
.wplace-theme-classic .wplace-stats {
border-radius: var(--wplace-radius);
background: rgb(255 255 255 / 3%);
border: 1px solid rgb(255 255 255 / 10%);
}
:root .wplace-status,
.wplace-theme--classic .wplace-status {
.wplace-theme-classic .wplace-status {
border-radius: var(--wplace-radius);
}
:root .wplace-alert-base,
.wplace-theme--classic .wplace-alert-base {
.wplace-theme-classic .wplace-alert-base {
border-radius: var(--wplace-radius);
font-family: var(--wplace-font);
}
:root .wplace-settings-container-base,
.wplace-theme--classic .wplace-settings-container-base {
.wplace-theme-classic .wplace-settings-container-base {
font-family: var(--wplace-font);
border-radius: var(--wplace-radius);
background: var(--wplace-primary);
@@ -153,356 +127,334 @@
/* Button styling for classic theme */
:root .wplace-btn,
.wplace-theme--classic .wplace-btn {
background: linear-gradient(135deg, #222222 0%, #4a4a4a 100%);
border: 1px solid rgba(255,255,255,0.1);
.wplace-theme-classic .wplace-btn {
background: linear-gradient(135deg, #222 0%, #4a4a4a 100%);
border: 1px solid rgb(255 255 255 / 10%);
color: var(--wplace-text);
border-radius: var(--wplace-btn-radius);
font-family: var(--wplace-font);
}
:root .wplace-btn::before,
.wplace-theme--classic .wplace-btn::before {
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
}
:root .wplace-btn:hover:not(:disabled),
.wplace-theme--classic .wplace-btn:hover:not(:disabled) {
box-shadow: 0 4px 12px rgba(0,0,0,0.4);
.wplace-theme-classic .wplace-btn::before {
background: linear-gradient(90deg, transparent, rgb(255 255 255 / 10%), transparent);
}
:root .wplace-btn:disabled,
.wplace-theme--classic .wplace-btn:disabled {
.wplace-theme-classic .wplace-btn:disabled {
box-shadow: none !important;
}
:root .wplace-btn:hover:not(:disabled),
.wplace-theme-classic .wplace-btn:hover:not(:disabled) {
box-shadow: 0 4px 12px rgb(0 0 0 / 40%);
}
:root .wplace-btn-overlay.active,
.wplace-theme--classic .wplace-btn-overlay.active {
.wplace-theme-classic .wplace-btn-overlay.active {
background: linear-gradient(135deg, #29b6f6 0%, #8e2de2 100%);
box-shadow: 0 0 15px #8e2de2;
}
/* Button variants - exact upstream main colors */
:root .wplace-btn-primary,
.wplace-theme--classic .wplace-btn-primary {
background: linear-gradient(135deg, #222222 0%, #6a5acd 100%);
.wplace-theme-classic .wplace-btn-primary {
background: linear-gradient(135deg, #222 0%, #6a5acd 100%);
color: var(--wplace-text);
}
:root .wplace-btn-upload,
.wplace-theme--classic .wplace-btn-upload {
background: linear-gradient(135deg, #111111 0%, #4a4a4a 100%);
.wplace-theme-classic .wplace-btn-upload {
background: linear-gradient(135deg, #111 0%, #4a4a4a 100%);
color: var(--wplace-text);
border: 1px dashed var(--wplace-highlight) !important;
}
:root .wplace-btn-start,
.wplace-theme--classic .wplace-btn-start {
.wplace-theme-classic .wplace-btn-start {
background: linear-gradient(135deg, var(--wplace-success) 0%, #228b22 100%);
color: white;
}
:root .wplace-btn-stop,
.wplace-theme--classic .wplace-btn-stop {
.wplace-theme-classic .wplace-btn-stop {
background: linear-gradient(135deg, var(--wplace-error) 0%, #dc143c 100%);
color: white;
}
:root .wplace-btn-select,
.wplace-theme--classic .wplace-btn-select {
.wplace-theme-classic .wplace-btn-select {
background: linear-gradient(135deg, var(--wplace-highlight) 0%, #9370db 100%);
color: white;
}
:root .wplace-btn-file,
.wplace-theme--classic .wplace-btn-file {
.wplace-theme-classic .wplace-btn-file {
background: linear-gradient(135deg, #ff8c00 0%, #ff7f50 100%);
color: white;
}
:root .wplace-btn.active,
:root .wplace-btn[aria-pressed="true"],
.wplace-theme--classic .wplace-btn.active,
.wplace-theme--classic .wplace-btn[aria-pressed="true"] {
.wplace-theme-classic .wplace-btn.active,
.wplace-theme-classic .wplace-btn[aria-pressed="true"] {
background: var(--wplace-highlight) !important;
color: #000000 !important;
color: #000 !important;
border-color: var(--wplace-text) !important;
box-shadow: 0 0 8px rgba(0,0,0,0.25) inset, 0 0 6px rgba(0,0,0,0.2) !important;
box-shadow: 0 0 8px rgb(0 0 0 / 25%) inset, 0 0 6px rgb(0 0 0 / 20%) !important;
}
:root .wplace-btn.active i,
:root .wplace-btn[aria-pressed="true"] i,
.wplace-theme--classic .wplace-btn.active i,
.wplace-theme--classic .wplace-btn[aria-pressed="true"] i {
filter: drop-shadow(0 0 3px #000000);
.wplace-theme-classic .wplace-btn.active i,
.wplace-theme-classic .wplace-btn[aria-pressed="true"] i {
filter: drop-shadow(0 0 3px #000);
}
:root .mask-mode-group .wplace-btn.active,
:root .mask-mode-group .wplace-btn[aria-pressed="true"],
.wplace-theme--classic .mask-mode-group .wplace-btn.active,
.wplace-theme--classic .mask-mode-group .wplace-btn[aria-pressed="true"] {
.wplace-theme-classic .mask-mode-group .wplace-btn.active,
.wplace-theme-classic .mask-mode-group .wplace-btn[aria-pressed="true"] {
background: var(--wplace-highlight);
color: #000000;
color: #000;
border-color: var(--wplace-text);
box-shadow: 0 0 8px rgba(0,0,0,0.25) inset, 0 0 6px rgba(0,0,0,0.2);
box-shadow: 0 0 8px rgb(0 0 0 / 25%) inset, 0 0 6px rgb(0 0 0 / 20%);
}
/* Status styling for classic theme */
:root .status-default,
.wplace-theme--classic .status-default {
background: rgba(255,255,255,0.1);
.wplace-theme-classic .status-default {
background: rgb(255 255 255 / 10%);
border-color: var(--wplace-text);
color: var(--wplace-text);
}
:root .status-success,
.wplace-theme--classic .status-success {
background: rgba(0, 255, 0, 0.1);
.wplace-theme-classic .status-success {
background: rgb(0 255 0 / 10%);
border-color: var(--wplace-success);
color: var(--wplace-success);
box-shadow: 0 0 15px var(--wplace-success);
}
:root .status-error,
.wplace-theme--classic .status-error {
background: rgba(255, 0, 0, 0.1);
.wplace-theme-classic .status-error {
background: rgb(255 0 0 / 10%);
border-color: var(--wplace-error);
color: var(--wplace-error);
box-shadow: 0 0 15px var(--wplace-error);
}
:root .status-warning,
.wplace-theme--classic .status-warning {
background: rgba(255, 165, 0, 0.1);
.wplace-theme-classic .status-warning {
background: rgb(255 165 0 / 10%);
border-color: var(--wplace-warning);
color: var(--wplace-warning);
box-shadow: 0 0 15px var(--wplace-warning);
}
:root .wplace-status.status-default,
.wplace-theme--classic .wplace-status.status-default {
.wplace-theme-classic .wplace-status.status-default {
color: var(--wplace-text);
background: rgba(255,255,255,0.1);
background: rgb(255 255 255 / 10%);
border-color: var(--wplace-text);
}
/* Alert styling for classic theme */
:root .wplace-alert-info,
.wplace-theme--classic .wplace-alert-info {
.wplace-theme-classic .wplace-alert-info {
background: linear-gradient(135deg, #3498db, #2980b9);
box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
box-shadow: 0 4px 12px rgb(52 152 219 / 30%);
}
:root .wplace-alert-success,
.wplace-theme--classic .wplace-alert-success {
.wplace-theme-classic .wplace-alert-success {
background: linear-gradient(135deg, #27ae60, #229954);
box-shadow: 0 4px 12px rgba(39, 174, 96, 0.3);
box-shadow: 0 4px 12px rgb(39 174 96 / 30%);
}
:root .wplace-alert-warning,
.wplace-theme--classic .wplace-alert-warning {
.wplace-theme-classic .wplace-alert-warning {
background: linear-gradient(135deg, #f39c12, #e67e22);
box-shadow: 0 4px 12px rgba(243, 156, 18, 0.3);
box-shadow: 0 4px 12px rgb(243 156 18 / 30%);
}
:root .wplace-alert-error,
.wplace-theme--classic .wplace-alert-error {
.wplace-theme-classic .wplace-alert-error {
background: linear-gradient(135deg, #e74c3c, #c0392b);
box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);
box-shadow: 0 4px 12px rgb(231 76 60 / 30%);
}
/* Progress bar styling for classic theme */
:root .wplace-progress,
.wplace-theme--classic .wplace-progress {
background: rgba(0,0,0,0.3);
border: 1px solid rgba(255,255,255,0.1);
.wplace-theme-classic .wplace-progress {
background: rgb(0 0 0 / 30%);
border: 1px solid rgb(255 255 255 / 10%);
border-radius: var(--wplace-radius);
}
:root .wplace-progress-bar,
.wplace-theme--classic .wplace-progress-bar {
.wplace-theme-classic .wplace-progress-bar {
background: linear-gradient(135deg, var(--wplace-highlight) 0%, #9370db 100%);
}
:root .wplace-progress-bar::after,
.wplace-theme--classic .wplace-progress-bar::after {
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
.wplace-theme-classic .wplace-progress-bar::after {
background: linear-gradient(90deg, transparent, rgb(255 255 255 / 30%), transparent);
}
/* Header and sections styling for classic theme */
:root .wplace-header-btn,
.wplace-theme--classic .wplace-header-btn {
background: rgba(255,255,255,0.1);
.wplace-theme-classic .wplace-header-btn {
background: rgb(255 255 255 / 10%);
color: var(--wplace-highlight);
border-radius: 4px;
font-family: var(--wplace-font);
}
:root .wplace-header-btn:hover,
.wplace-theme--classic .wplace-header-btn:hover {
background: #222222;
.wplace-theme-classic .wplace-header-btn:hover {
background: #222;
color: var(--wplace-text);
}
:root .wplace-status-section,
.wplace-theme--classic .wplace-status-section {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.1);
}
:root .wplace-section,
.wplace-theme--classic .wplace-section {
background: rgba(255, 255, 255, 0.03);
}
:root .wplace-stats,
.wplace-theme--classic .wplace-stats {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.1);
}
/* Font and typography for classic theme */
:root .wplace-turnstile-overlay,
.wplace-theme--classic .wplace-turnstile-overlay {
background: rgba(0, 0, 0, 0.9) !important;
.wplace-theme-classic .wplace-turnstile-overlay {
background: rgb(0 0 0 / 90%) !important;
border-radius: var(--wplace-radius) !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
box-shadow: 0 8px 32px rgb(0 0 0 / 40%) !important;
backdrop-filter: var(--wplace-backdrop) !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
border: 1px solid rgb(255 255 255 / 20%) !important;
color: var(--wplace-text) !important;
font-family: var(--wplace-font) !important;
}
:root .wplace-alert-base,
.wplace-theme--classic .wplace-alert-base {
font-family: var(--wplace-font);
}
/* Auto light/dark support for classic theme */
@media (prefers-color-scheme: light) {
:root .theme-auto,
.wplace-theme--classic .theme-auto {
--wplace-primary: #ffffff;
.wplace-theme-classic .theme-auto {
--wplace-primary: #fff;
--wplace-secondary: #f5f5f5;
--wplace-accent: #007acc;
--wplace-text: #333333;
--wplace-text: #333;
}
}
@media (prefers-color-scheme: dark) {
:root .theme-auto,
.wplace-theme--classic .theme-auto {
.wplace-theme-classic .theme-auto {
--wplace-primary: #1e1e1e;
--wplace-secondary: #2d2d30;
--wplace-accent: var(--wplace-highlight);
--wplace-text: #ffffff;
--wplace-text: #fff;
}
}
/* Border and color styling for classic theme */
:root .wplace-color-item-name,
.wplace-theme--classic .wplace-color-item-name {
.wplace-theme-classic .wplace-color-item-name {
color: #ccc;
}
:root .wplace-color-swatch,
.wplace-theme--classic .wplace-color-swatch {
border: 1px solid rgba(255, 255, 255, 0.2);
.wplace-theme-classic .wplace-color-swatch {
border: 1px solid rgb(255 255 255 / 20%);
border-radius: 4px;
}
:root .wplace-stat-color-swatch,
.wplace-theme--classic .wplace-stat-color-swatch {
.wplace-theme-classic .wplace-stat-color-swatch {
border-radius: 3px;
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
border: 1px solid rgb(255 255 255 / 10%);
box-shadow: inset 0 0 2px rgb(0 0 0 / 50%);
}
:root .resize-tools button,
.wplace-theme--classic .resize-tools button {
.wplace-theme-classic .resize-tools button {
border-radius: 6px;
border: 1px solid rgba(255, 255, 255, 0.2);
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgb(255 255 255 / 20%);
background: rgb(255 255 255 / 6%);
color: #fff;
}
:root .resize-slider,
.wplace-theme--classic .resize-slider {
.wplace-theme-classic .resize-slider {
background: #ccc;
border-radius: var(--wplace-radius);
}
/* Text effects and filters for classic theme */
:root .wplace-header,
.wplace-theme--classic .wplace-header {
text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
:root .wplace-color-swatch:not(.active),
.wplace-theme--classic .wplace-color-swatch:not(.active) {
.wplace-theme-classic .wplace-color-swatch:not(.active) {
filter: grayscale(80%);
}
:root .wplace-color-swatch.unavailable,
.wplace-theme-classic .wplace-color-swatch.unavailable {
border-color: #666;
}
:root .wplace-color-swatch.unavailable:not(.active),
.wplace-theme--classic .wplace-color-swatch.unavailable:not(.active) {
.wplace-theme-classic .wplace-color-swatch.unavailable:not(.active) {
filter: grayscale(90%);
}
:root .wplace-color-swatch.active::after,
.wplace-theme--classic .wplace-color-swatch.active::after {
.wplace-theme-classic .wplace-color-swatch.active::after {
text-shadow: 0 0 3px black;
}
/* Icon colors for classic theme */
:root .wplace-icon-key,
.wplace-theme--classic .wplace-icon-key {
.wplace-theme-classic .wplace-icon-key {
color: #4facfe;
}
:root .wplace-icon-robot,
.wplace-theme--classic .wplace-icon-robot {
.wplace-theme-classic .wplace-icon-robot {
color: #4facfe;
}
:root .wplace-icon-speed,
.wplace-theme--classic .wplace-icon-speed {
.wplace-theme-classic .wplace-icon-speed {
color: #4facfe;
}
:root .wplace-icon-bell,
.wplace-theme--classic .wplace-icon-bell {
.wplace-theme-classic .wplace-icon-bell {
color: #ffd166;
}
:root .wplace-icon-palette,
.wplace-theme--classic .wplace-icon-palette {
.wplace-theme-classic .wplace-icon-palette {
color: #f093fb;
}
:root .wplace-icon-globe,
.wplace-theme--classic .wplace-icon-globe {
.wplace-theme-classic .wplace-icon-globe {
color: #ffeaa7;
}
:root .wplace-icon-paint,
.wplace-theme--classic .wplace-icon-paint {
.wplace-theme-classic .wplace-icon-paint {
color: #4facfe;
}
:root .wplace-icon-eye,
.wplace-theme--classic .wplace-icon-eye {
.wplace-theme-classic .wplace-icon-eye {
color: var(--wplace-highlight);
}
/* Form controls and sliders for classic theme */
:root .wplace-slider,
.wplace-theme--classic .wplace-slider {
.wplace-theme-classic .wplace-slider {
background: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
border-radius: 4px;
}
:root .wplace-slider::-webkit-slider-thumb,
.wplace-theme--classic .wplace-slider::-webkit-slider-thumb {
.wplace-theme-classic .wplace-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 16px;
height: 16px;
@@ -514,135 +466,125 @@
}
:root .wplace-speed-slider,
.wplace-theme--classic .wplace-speed-slider {
border-radius: 3px;
.wplace-theme-classic .wplace-speed-slider {
background: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
border-radius: 4px;
}
:root .wplace-speed-slider::-webkit-slider-thumb,
.wplace-theme--classic .wplace-speed-slider::-webkit-slider-thumb {
.wplace-theme-classic .wplace-speed-slider::-webkit-slider-thumb {
border-radius: 50%;
border: 2px solid;
}
:root .wplace-speed-slider::-moz-range-thumb,
.wplace-theme--classic .wplace-speed-slider::-moz-range-thumb {
.wplace-theme-classic .wplace-speed-slider::-moz-range-thumb {
border-radius: 50%;
border: 2px solid;
}
:root .wplace-color-swatch.unavailable,
.wplace-theme--classic .wplace-color-swatch.unavailable {
border-color: #666;
}
:root .wplace-turnstile-title,
.wplace-theme--classic .wplace-turnstile-title {
.wplace-theme-classic .wplace-turnstile-title {
color: var(--wplace-text) !important;
}
:root .wplace-turnstile-hide-btn,
.wplace-theme--classic .wplace-turnstile-hide-btn {
.wplace-theme-classic .wplace-turnstile-hide-btn {
color: var(--wplace-text) !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
border: 1px solid rgb(255 255 255 / 20%) !important;
border-radius: 6px !important;
}
:root .wplace-turnstile-hide-btn:hover,
.wplace-theme--classic .wplace-turnstile-hide-btn:hover {
background: rgba(255, 255, 255, 0.1) !important;
.wplace-theme-classic .wplace-turnstile-hide-btn:hover {
background: rgb(255 255 255 / 10%) !important;
}
:root .wplace-settings-select,
.wplace-theme--classic .wplace-settings-select {
background: rgba(255,255,255,0.15);
.wplace-theme-classic .wplace-settings-select {
background: rgb(255 255 255 / 15%);
color: white;
border: 1px solid rgba(255,255,255,0.2);
border: 1px solid rgb(255 255 255 / 20%);
border-radius: 8px;
box-shadow: 0 3px 10px rgba(0,0,0,0.1);
box-shadow: 0 3px 10px rgb(0 0 0 / 10%);
}
:root .wplace-settings-option,
.wplace-theme--classic .wplace-settings-option {
.wplace-theme-classic .wplace-settings-option {
background: #2d3748;
color: white;
}
:root .wplace-stat-colors-grid,
.wplace-theme--classic .wplace-stat-colors-grid {
background: rgba(0, 0, 0, 0.2);
.wplace-theme-classic .wplace-stat-colors-grid {
background: rgb(0 0 0 / 20%);
border-radius: 4px;
}
:root .resize-overlay,
.wplace-theme--classic .resize-overlay {
background: rgba(0, 0, 0, 0.8);
.wplace-theme-classic .resize-overlay {
background: rgb(0 0 0 / 80%);
}
:root .wplace-overlay,
.wplace-theme--classic .wplace-overlay {
background: rgba(0, 0, 0, 0.8);
.wplace-theme-classic .wplace-overlay {
background: rgb(0 0 0 / 80%);
}
:root .wplace-settings-error,
.wplace-theme--classic .wplace-settings-error {
background: rgba(255, 0, 0, 0.4) !important;
.wplace-theme-classic .wplace-settings-error {
background: rgb(255 0 0 / 40%) !important;
}
/* Settings sections and batch controls for classic theme */
:root .wplace-settings-section-wrapper,
.wplace-theme--classic .wplace-settings-section-wrapper {
background: rgba(255,255,255,0.1);
.wplace-theme-classic .wplace-settings-section-wrapper {
background: rgb(255 255 255 / 10%);
border-radius: var(--wplace-radius);
border: 1px solid rgba(255,255,255,0.1);
border: 1px solid rgb(255 255 255 / 10%);
}
:root .wplace-batch-controls,
.wplace-theme--classic .wplace-batch-controls {
background: rgba(255,255,255,0.1);
.wplace-theme-classic .wplace-batch-controls {
background: rgb(255 255 255 / 10%);
border-radius: var(--wplace-radius);
border: 1px solid rgba(255,255,255,0.1);
}
:root .wplace-speed-slider,
.wplace-theme--classic .wplace-speed-slider {
background: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
border-radius: 4px;
border: 1px solid rgb(255 255 255 / 10%);
}
:root .wplace-overlay-opacity-slider,
.wplace-theme--classic .wplace-overlay-opacity-slider {
.wplace-theme-classic .wplace-overlay-opacity-slider {
background: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
border-radius: 4px;
}
:root .wplace-speed-value,
.wplace-theme--classic .wplace-speed-value {
.wplace-theme-classic .wplace-speed-value {
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
border-radius: 8px;
color: white;
box-shadow: 0 3px 10px rgba(79, 172, 254, 0.3);
border: 1px solid rgba(255,255,255,0.2);
box-shadow: 0 3px 10px rgb(79 172 254 / 30%);
border: 1px solid rgb(255 255 255 / 20%);
}
/* Additional elements for classic theme */
:root .wplace-color-divider,
.wplace-theme--classic .wplace-color-divider {
background: rgba(255, 255, 255, 0.1);
.wplace-theme-classic .wplace-color-divider {
background: rgb(255 255 255 / 10%);
}
:root .wplace-settings-select option,
.wplace-theme--classic .wplace-settings-select option {
.wplace-theme-classic .wplace-settings-select option {
background: #2d3748;
color: white;
}
:root .wplace-settings-description,
.wplace-theme--classic .wplace-settings-description {
color: rgba(255,255,255,0.7);
.wplace-theme-classic .wplace-settings-description {
color: rgb(255 255 255 / 70%);
}
:root .wplace-settings-apply-btn,
.wplace-theme--classic .wplace-settings-apply-btn {
.wplace-theme-classic .wplace-settings-apply-btn {
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
color: white;
border-radius: 8px;
@@ -650,9 +592,9 @@
/* Resize dialog styling for classic theme */
:root .resize-container,
.wplace-theme--classic .resize-container {
background: #000000;
border: 1px solid #ffffff;
.wplace-theme-classic .resize-container {
background: #000;
border: 1px solid #fff;
border-radius: 12px;
box-shadow: 0 0 20px rgba(0,0,0,0.5);
box-shadow: 0 0 20px rgb(0 0 0 / 50%);
}
themes/neon.css
+91 -92
View File
@@ -1,7 +1,7 @@
/* WPlace Auto-Image Bot - Neon Theme */
/* Retro cyberpunk aesthetic with green neon glow effects */
.wplace-theme--neon {
.wplace-theme-neon {
/* Neon theme colors - matching upstream main neon theme */
--wplace-primary: #1a1a2e;
--wplace-secondary: #16213e;
@@ -10,14 +10,14 @@
--wplace-highlight: #ff6b35;
--wplace-success: #39ff14;
--wplace-error: #ff073a;
--wplace-warning: #ffff00;
--wplace-warning: #ff0;
/* Neon UI properties */
--wplace-radius: 0;
--wplace-border-style: solid;
--wplace-border-width: 2px;
--wplace-border-color: #00ff41;
--wplace-shadow: 0 0 20px rgba(0, 255, 65, 0.3), inset 0 0 20px rgba(0, 255, 65, 0.1);
--wplace-shadow: 0 0 20px rgb(0 255 65 / 30%), inset 0 0 20px rgb(0 255 65 / 10%);
--wplace-backdrop: none;
--wplace-font: 'Press Start 2P', monospace, 'Courier New';
@@ -39,7 +39,7 @@
--wplace-danger: #ff073a;
--wplace-danger-dark: #cc0531;
--wplace-muted-text: #00ff4180;
--wplace-highlight-secondary: #ffaa00;
--wplace-highlight-secondary: #fa0;
/* Text variants - neon style */
--wplace-text-secondary: #00ff41dd;
@@ -48,51 +48,54 @@
--wplace-text-faded: #00ff41cc;
/* Background variants - neon style */
--wplace-bg-input: rgba(0, 255, 65, 0.15);
--wplace-bg-subtle: rgba(0, 255, 65, 0.08);
--wplace-bg-faint: rgba(0, 255, 65, 0.05);
--wplace-bg-ghost: rgba(0, 255, 65, 0.03);
--wplace-bg-whisper: rgba(0, 255, 65, 0.02);
--wplace-bg-input: rgb(0 255 65 / 15%);
--wplace-bg-subtle: rgb(0 255 65 / 8%);
--wplace-bg-faint: rgb(0 255 65 / 5%);
--wplace-bg-ghost: rgb(0 255 65 / 3%);
--wplace-bg-whisper: rgb(0 255 65 / 2%);
/* Border variants - neon style */
--wplace-border-subtle: rgba(0, 255, 65, 0.4);
--wplace-border-faint: rgba(0, 255, 65, 0.25);
--wplace-border-ghost: rgba(0, 255, 65, 0.15);
--wplace-border-ultra-faint: rgba(0, 255, 65, 0.08);
--wplace-border-subtle: rgb(0 255 65 / 40%);
--wplace-border-faint: rgb(0 255 65 / 25%);
--wplace-border-ghost: rgb(0 255 65 / 15%);
--wplace-border-ultra-faint: rgb(0 255 65 / 8%);
/* Shadow variants - neon style */
--wplace-shadow-drag: 0 12px 40px rgba(0, 255, 65, 0.6), 0 0 0 2px rgba(0, 255, 65, 0.8), 0 0 20px rgba(0, 255, 65, 0.3);
--wplace-shadow-notification: 0 4px 12px rgba(0, 255, 65, 0.4), 0 0 15px rgba(0, 255, 65, 0.2);
--wplace-shadow-slider-thumb: 0 3px 6px rgba(0, 255, 65, 0.5), 0 0 0 2px var(--wplace-icon-primary), 0 0 10px rgba(0, 255, 65, 0.3);
--wplace-shadow-slider-hover: 0 4px 8px rgba(0, 255, 65, 0.6), 0 0 0 3px var(--wplace-icon-primary), 0 0 15px rgba(0, 255, 65, 0.4);
--wplace-shadow-drag: 0 12px 40px rgb(0 255 65 / 60%), 0 0 0 2px rgb(0 255 65 / 80%), 0 0 20px rgb(0 255 65 / 30%);
--wplace-shadow-notification: 0 4px 12px rgb(0 255 65 / 40%), 0 0 15px rgb(0 255 65 / 20%);
--wplace-shadow-slider-thumb: 0 3px 6px rgb(0 255 65 / 50%), 0 0 0 2px var(--wplace-icon-primary), 0 0 10px rgb(0 255 65 / 30%);
--wplace-shadow-slider-hover: 0 4px 8px rgb(0 255 65 / 60%), 0 0 0 3px var(--wplace-icon-primary), 0 0 15px rgb(0 255 65 / 40%);
/* Animation colors - neon style */
--wplace-pulse-start: rgba(0, 255, 65, 0.8);
--wplace-pulse-mid: rgba(0, 255, 65, 0);
--wplace-pulse-end: rgba(0, 255, 65, 0);
--wplace-pulse-start: rgb(0 255 65 / 80%);
--wplace-pulse-mid: rgb(0 255 65 / 0%);
--wplace-pulse-end: rgb(0 255 65 / 0%);
/* Slider colors - neon style */
--wplace-slider-thumb-bg: #00ff41;
}
/* Neon-specific styling overrides */
.wplace-theme--neon #wplace-image-bot-container {
.wplace-theme-neon #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 rgba(0, 255, 65, 0.1) !important;
box-shadow: 0 0 20px var(--wplace-text), inset 0 0 20px rgb(0 255 65 / 10%) !important;
font-family: var(--wplace-font) !important;
}
.wplace-theme--neon #wplace-stats-container {
.wplace-theme-neon #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 rgba(0, 255, 65, 0.1) !important;
box-shadow: 0 0 20px var(--wplace-text), inset 0 0 20px rgb(0 255 65 / 10%) !important;
font-family: var(--wplace-font) !important;
position: fixed !important;
overflow: hidden !important;
z-index: 9998 !important;
}
.wplace-theme--neon .wplace-header {
.wplace-theme-neon .wplace-header {
background: var(--wplace-secondary) !important;
border-bottom: 1px solid var(--wplace-text) !important;
color: var(--wplace-text) !important;
@@ -100,19 +103,19 @@
font-family: var(--wplace-font) !important;
}
.wplace-theme--neon .wplace-section {
background: rgba(22, 33, 62, 0.5) !important;
.wplace-theme-neon .wplace-section {
background: rgb(22 33 62 / 50%) !important;
border: 1px solid var(--wplace-text) !important;
border-radius: 0 !important;
}
.wplace-theme--neon .wplace-status-section {
background: rgba(22, 33, 62, 0.5) !important;
.wplace-theme-neon .wplace-status-section {
background: rgb(22 33 62 / 50%) !important;
border: 1px solid var(--wplace-text) !important;
border-radius: 0 !important;
}
.wplace-theme--neon .wplace-section-title {
.wplace-theme-neon .wplace-section-title {
color: var(--wplace-text) !important;
text-shadow: 0 0 8px var(--wplace-text) !important;
text-transform: uppercase !important;
@@ -120,7 +123,7 @@
font-size: 10px !important;
}
.wplace-theme--neon .wplace-btn {
.wplace-theme-neon .wplace-btn {
background: var(--wplace-secondary) !important;
border: 1px solid var(--wplace-text) !important;
border-radius: 0 !important;
@@ -131,100 +134,101 @@
text-transform: uppercase !important;
}
.wplace-theme--neon .wplace-btn:hover:not(:disabled) {
box-shadow: 0 0 15px var(--wplace-text), inset 0 0 15px rgba(0, 255, 65, 0.1) !important;
animation: neonGlow 1s ease-in-out infinite alternate !important;
/* Pixel blinking and neon glow animation for buttons */
.wplace-theme-neon .wplace-btn:hover:not(:disabled) {
box-shadow: 0 0 15px var(--wplace-text), inset 0 0 15px rgb(0 255 65 / 10%) !important;
animation: pixel-blink 0.5s infinite, neon-glow 1s ease-in-out infinite alternate !important;
}
.wplace-theme--neon .wplace-btn-start {
.wplace-theme-neon .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 .wplace-btn-stop {
.wplace-theme-neon .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 .wplace-btn-upload {
.wplace-theme-neon .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 .wplace-btn-select {
.wplace-theme-neon .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 .wplace-btn-file {
.wplace-theme-neon .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 .wplace-progress {
background: rgba(0, 0, 0, 0.8) !important;
.wplace-theme-neon .wplace-progress {
background: rgb(0 0 0 / 80%) !important;
border: 1px solid var(--wplace-text) !important;
border-radius: 0 !important;
}
.wplace-theme--neon .wplace-progress-bar {
.wplace-theme-neon .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 .wplace-stat-value {
.wplace-theme-neon .wplace-stat-value {
color: var(--wplace-text) !important;
text-shadow: 0 0 5px var(--wplace-text) !important;
}
.wplace-theme--neon .status-success {
background: rgba(57, 255, 20, 0.1) !important;
.wplace-theme-neon .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 .status-error {
background: rgba(255, 7, 58, 0.1) !important;
.wplace-theme-neon .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 .status-default {
background: rgba(0, 255, 65, 0.1) !important;
.wplace-theme-neon .status-default {
background: rgb(0 255 65 / 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 #wplace-settings-container {
.wplace-theme-neon #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 rgba(0, 255, 65, 0.1) !important;
box-shadow: 0 0 30px var(--wplace-text), inset 0 0 30px rgb(0 255 65 / 10%) !important;
font-family: var(--wplace-font) !important;
}
.wplace-theme--neon .wplace-settings-header {
.wplace-theme-neon .wplace-settings-header {
background: var(--wplace-secondary) !important;
border-bottom: 1px solid var(--wplace-text) !important;
}
.wplace-theme--neon .wplace-settings-header h3 {
.wplace-theme-neon .wplace-settings-header h3 {
color: var(--wplace-text) !important;
text-shadow: 0 0 10px var(--wplace-text) !important;
font-family: var(--wplace-font) !important;
@@ -232,25 +236,25 @@
text-transform: uppercase !important;
}
.wplace-theme--neon .wplace-settings-close-btn {
.wplace-theme-neon .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 .wplace-settings-close-btn:hover {
.wplace-theme-neon .wplace-settings-close-btn:hover {
background: var(--wplace-error) !important;
box-shadow: 0 0 15px var(--wplace-error) !important;
}
.wplace-theme--neon .wplace-settings-section-wrapper {
background: rgba(22, 33, 62, 0.3) !important;
.wplace-theme-neon .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 .wplace-settings-select {
.wplace-theme-neon .wplace-settings-select {
background: var(--wplace-secondary) !important;
border: 1px solid var(--wplace-text) !important;
border-radius: 0 !important;
@@ -259,7 +263,7 @@
font-size: 11px !important;
}
.wplace-theme--neon .wplace-settings-section-label {
.wplace-theme-neon .wplace-settings-section-label {
color: var(--wplace-text) !important;
text-shadow: 0 0 8px var(--wplace-text) !important;
font-family: var(--wplace-font) !important;
@@ -267,17 +271,17 @@
text-transform: uppercase !important;
}
.wplace-theme--neon .wplace-speed-value {
.wplace-theme-neon .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 rgba(0, 255, 65, 0.3) !important;
box-shadow: 0 0 10px rgb(0 255 65 / 30%) !important;
}
.wplace-theme--neon .wplace-overlay-opacity-value {
.wplace-theme-neon .wplace-overlay-opacity-value {
background: var(--wplace-secondary) !important;
border: 1px solid var(--wplace-text) !important;
border-radius: 0 !important;
@@ -286,18 +290,18 @@
}
/* Neon slider styling */
.wplace-theme--neon .wplace-slider,
.wplace-theme--neon .wplace-speed-slider,
.wplace-theme--neon .wplace-overlay-opacity-slider {
.wplace-theme-neon .wplace-slider,
.wplace-theme-neon .wplace-speed-slider,
.wplace-theme-neon .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 rgba(0, 255, 65, 0.3) !important;
box-shadow: 0 0 10px rgb(0 255 65 / 30%) !important;
}
.wplace-theme--neon .wplace-slider::-webkit-slider-thumb,
.wplace-theme--neon .wplace-speed-slider::-webkit-slider-thumb,
.wplace-theme--neon .wplace-overlay-opacity-slider::-webkit-slider-thumb {
.wplace-theme-neon .wplace-slider::-webkit-slider-thumb,
.wplace-theme-neon .wplace-speed-slider::-webkit-slider-thumb,
.wplace-theme-neon .wplace-overlay-opacity-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 16px;
height: 16px;
@@ -306,18 +310,18 @@
border: 2px solid var(--wplace-text) !important;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 0 8px rgba(0, 255, 65, 0.5) !important;
box-shadow: 0 0 8px rgb(0 255 65 / 50%) !important;
}
.wplace-theme--neon .wplace-slider::-webkit-slider-thumb:hover,
.wplace-theme--neon .wplace-speed-slider::-webkit-slider-thumb:hover,
.wplace-theme--neon .wplace-overlay-opacity-slider::-webkit-slider-thumb:hover {
.wplace-theme-neon .wplace-slider::-webkit-slider-thumb:hover,
.wplace-theme-neon .wplace-speed-slider::-webkit-slider-thumb:hover,
.wplace-theme-neon .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 #wplace-image-bot-container::before {
.wplace-theme-neon #wplace-image-bot-container::before {
content: '';
position: absolute;
top: 0;
@@ -331,13 +335,8 @@
opacity: 0.7;
}
.wplace-theme--neon #wplace-stats-container {
position: fixed !important;
overflow: hidden !important;
z-index: 9998 !important;
}
.wplace-theme--neon #wplace-stats-container::before {
.wplace-theme-neon #wplace-stats-container::before {
content: '';
position: absolute;
top: 0;
@@ -347,29 +346,27 @@
background: linear-gradient(90deg, transparent, var(--wplace-text), transparent);
z-index: 1;
pointer-events: none;
animation: scanlineStats 4s linear infinite;
animation: scanline-stats 4s linear infinite;
opacity: 0.7;
}
/* Pixel blinking animation for buttons */
.wplace-theme--neon .wplace-btn:hover:not(:disabled) {
animation: pixelBlink 0.5s infinite, neonGlow 1s ease-in-out infinite alternate;
}
/* Text glow animations */
@keyframes neonGlow {
@keyframes neon-glow {
0%, 100% {
text-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;
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;
text-shadow: 0 0 2px currentcolor, 0 0 5px currentcolor, 0 0 8px currentcolor;
}
}
@keyframes pixelBlink {
@keyframes pixel-blink {
0%, 50% {
opacity: 1;
}
51%, 100% {
opacity: 0.7;
}
@@ -379,25 +376,27 @@
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(400px);
}
}
@keyframes scanlineStats {
@keyframes scanline-stats {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(300px);
}
}
/* Resize dialog styling for neon theme */
.wplace-theme--neon .resize-container {
.wplace-theme-neon .resize-container {
background: #1a1a2e !important;
border: 3px solid #00ff41 !important;
border-radius: 0 !important;
box-shadow: 0 0 30px rgba(0, 255, 65, 0.5) !important;
box-shadow: 0 0 30px rgb(0 255 65 / 50%) !important;
font-family: 'Press Start 2P', monospace !important;
}