mirror of
https://github.com/tiennm99/WPlace-AutoBOT.git
synced 2026-10-13 08:15:08 +00:00
Merge pull request #96 from skalsech/feat-external-lang
Refactor UI, introduce new coordinate modes, and improve performance
This commit is contained in:
10 files changed
+4972
-3234
No files matched your search
+18
-1
@@ -1 +1,18 @@
|
||||
node_modules
|
||||
# Node modules
|
||||
node_modules/
|
||||
|
||||
# NPM/Yarn lock
|
||||
package-lock.json
|
||||
package.json
|
||||
|
||||
# Prettier
|
||||
.prettierrc.json
|
||||
|
||||
# ESLint
|
||||
eslint.config.cjs
|
||||
|
||||
# Staged changes
|
||||
staged_changes.diff
|
||||
|
||||
# IDE (WebStorm/IntelliJ IDEA)
|
||||
.idea/
|
||||
@@ -1,84 +1,85 @@
|
||||
const cookieDomain = ".backend.wplace.live";
|
||||
|
||||
async function preserveAndResetJ() {
|
||||
let savedValue = null;
|
||||
|
||||
try {
|
||||
const oldJ = await chrome.cookies.get({
|
||||
url: "https://backend.wplace.live/",
|
||||
name: "j"
|
||||
});
|
||||
|
||||
if (oldJ && oldJ.value) {
|
||||
savedValue = oldJ.value;
|
||||
console.log("[bg] Saved j cookie:", savedValue);
|
||||
} else {
|
||||
console.warn("[bg] No 'j' cookie found → will only nuke cf_clearance");
|
||||
}
|
||||
|
||||
setTimeout(async () => {
|
||||
await new Promise((resolve) => {
|
||||
chrome.browsingData.remove(
|
||||
{ origins: ["https://wplace.live"] },
|
||||
{ cookies: true },
|
||||
() => {
|
||||
console.log("[bg] Nuke done (delayed)");
|
||||
resolve();
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
if (savedValue) {
|
||||
setCookie(savedValue);
|
||||
} else {
|
||||
console.log("[bg] No j to restore, leaving nuked");
|
||||
}
|
||||
}, 2000);
|
||||
|
||||
} catch (err) {
|
||||
console.error("[bg] Error in preserveAndResetJ:", err);
|
||||
}
|
||||
}
|
||||
|
||||
chrome.webNavigation.onCompleted.addListener((details) => {
|
||||
if (details.url.includes("wplace.live")) {
|
||||
console.log("[bg] Page load detected → nuking cookies with double pass");
|
||||
preserveAndResetJ();
|
||||
}
|
||||
}, { url: [{ hostContains: "wplace.live" }] });
|
||||
|
||||
function setCookie(value) {
|
||||
const cleaned = value.trim();
|
||||
console.log("[bg] setCookie CALLED with:", cleaned);
|
||||
|
||||
chrome.cookies.set({
|
||||
url: "https://backend.wplace.live/",
|
||||
name: "j",
|
||||
value: cleaned,
|
||||
domain: cookieDomain,
|
||||
path: "/"
|
||||
}, (cookie) => {
|
||||
if (chrome.runtime.lastError) {
|
||||
console.error("[bg] cookie set error:", chrome.runtime.lastError.message);
|
||||
} else {
|
||||
console.log("[bg] cookie set result:", cookie);
|
||||
|
||||
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
|
||||
if (tabs.length > 0) {
|
||||
chrome.tabs.sendMessage(tabs[0].id, {
|
||||
type: "cookieSet",
|
||||
value: cleaned
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
chrome.runtime.onMessage.addListener(async (msg, sender, sendResponse) => {
|
||||
if (msg.type === "setCookie" && msg.value) {
|
||||
await setCookie(msg.value);
|
||||
sendResponse({ status: "ok" });
|
||||
}
|
||||
return true;
|
||||
});
|
||||
const cookieDomain = '.backend.wplace.live';
|
||||
|
||||
async function preserveAndResetJ() {
|
||||
let savedValue = null;
|
||||
|
||||
try {
|
||||
const oldJ = await chrome.cookies.get({
|
||||
url: 'https://backend.wplace.live/',
|
||||
name: 'j',
|
||||
});
|
||||
|
||||
if (oldJ && oldJ.value) {
|
||||
savedValue = oldJ.value;
|
||||
console.log('[bg] Saved j cookie:', savedValue);
|
||||
} else {
|
||||
console.warn("[bg] No 'j' cookie found → will only nuke cf_clearance");
|
||||
}
|
||||
|
||||
setTimeout(async () => {
|
||||
await new Promise((resolve) => {
|
||||
chrome.browsingData.remove({ origins: ['https://wplace.live'] }, { cookies: true }, () => {
|
||||
console.log('[bg] Nuke done (delayed)');
|
||||
resolve();
|
||||
});
|
||||
});
|
||||
|
||||
if (savedValue) {
|
||||
setCookie(savedValue);
|
||||
} else {
|
||||
console.log('[bg] No j to restore, leaving nuked');
|
||||
}
|
||||
}, 2000);
|
||||
} catch (err) {
|
||||
console.error('[bg] Error in preserveAndResetJ:', err);
|
||||
}
|
||||
}
|
||||
|
||||
chrome.webNavigation.onCompleted.addListener(
|
||||
(details) => {
|
||||
if (details.url.includes('wplace.live')) {
|
||||
console.log('[bg] Page load detected → nuking cookies with double pass');
|
||||
preserveAndResetJ();
|
||||
}
|
||||
},
|
||||
{ url: [{ hostContains: 'wplace.live' }] }
|
||||
);
|
||||
|
||||
function setCookie(value) {
|
||||
const cleaned = value.trim();
|
||||
console.log('[bg] setCookie CALLED with:', cleaned);
|
||||
|
||||
chrome.cookies.set(
|
||||
{
|
||||
url: 'https://backend.wplace.live/',
|
||||
name: 'j',
|
||||
value: cleaned,
|
||||
domain: cookieDomain,
|
||||
path: '/',
|
||||
},
|
||||
(cookie) => {
|
||||
if (chrome.runtime.lastError) {
|
||||
console.error('[bg] cookie set error:', chrome.runtime.lastError.message);
|
||||
} else {
|
||||
console.log('[bg] cookie set result:', cookie);
|
||||
|
||||
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
|
||||
if (tabs.length > 0) {
|
||||
chrome.tabs.sendMessage(tabs[0].id, {
|
||||
type: 'cookieSet',
|
||||
value: cleaned,
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
chrome.runtime.onMessage.addListener(async (msg, sender, sendResponse) => {
|
||||
if (msg.type === 'setCookie' && msg.value) {
|
||||
await setCookie(msg.value);
|
||||
sendResponse({ status: 'ok' });
|
||||
}
|
||||
return true;
|
||||
});
|
||||
+32
-26
@@ -1,26 +1,32 @@
|
||||
window.addEventListener('message', (event) => {
|
||||
if (event.source !== window) return;
|
||||
if (event.data.source !== 'my-userscript') return;
|
||||
|
||||
const message = event.data;
|
||||
if (message.type === 'setCookie' && message.value) {
|
||||
chrome.runtime.sendMessage({
|
||||
type: "setCookie",
|
||||
value: message.value
|
||||
}, (response) => {
|
||||
if (response?.status === "ok") {
|
||||
console.log("✅ Forwarded token to background.");
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
chrome.runtime.onMessage.addListener((msg) => {
|
||||
if (msg.type === "cookieSet") {
|
||||
window.postMessage({
|
||||
source: "my-extension",
|
||||
type: "cookieSet",
|
||||
value: msg.value
|
||||
}, "*");
|
||||
}
|
||||
});
|
||||
window.addEventListener('message', (event) => {
|
||||
if (event.source !== window) return;
|
||||
if (event.data.source !== 'my-userscript') return;
|
||||
|
||||
const message = event.data;
|
||||
if (message.type === 'setCookie' && message.value) {
|
||||
chrome.runtime.sendMessage(
|
||||
{
|
||||
type: 'setCookie',
|
||||
value: message.value,
|
||||
},
|
||||
(response) => {
|
||||
if (response?.status === 'ok') {
|
||||
console.log('✅ Forwarded token to background.');
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
chrome.runtime.onMessage.addListener((msg) => {
|
||||
if (msg.type === 'cookieSet') {
|
||||
window.postMessage(
|
||||
{
|
||||
source: 'my-extension',
|
||||
type: 'cookieSet',
|
||||
value: msg.value,
|
||||
},
|
||||
'*'
|
||||
);
|
||||
}
|
||||
});
|
||||
+100
-74
@@ -1,4 +1,5 @@
|
||||
(async () => {
|
||||
// eslint-disable-next-line prettier/prettier
|
||||
; (async () => {
|
||||
const CONFIG = {
|
||||
START_X: 742,
|
||||
START_Y: 1148,
|
||||
@@ -11,8 +12,8 @@
|
||||
text: '#ffffff',
|
||||
highlight: '#775ce3',
|
||||
success: '#00ff00',
|
||||
error: '#ff0000'
|
||||
}
|
||||
error: '#ff0000',
|
||||
},
|
||||
};
|
||||
|
||||
const state = {
|
||||
@@ -25,10 +26,10 @@
|
||||
menuOpen: false,
|
||||
language: 'en',
|
||||
autoRefresh: true,
|
||||
pausedForManual: false
|
||||
pausedForManual: false,
|
||||
};
|
||||
|
||||
const sleep = ms => new Promise(r => setTimeout(r, ms));
|
||||
const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
|
||||
const waitForSelector = async (selector, interval = 200, timeout = 5000) => {
|
||||
const start = Date.now();
|
||||
while (Date.now() - start < timeout) {
|
||||
@@ -58,8 +59,7 @@
|
||||
paintLoop();
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
}
|
||||
} catch (e) {}
|
||||
}
|
||||
return originalFetch(url, options);
|
||||
};
|
||||
@@ -68,7 +68,7 @@
|
||||
try {
|
||||
const res = await fetch(url, {
|
||||
credentials: 'include',
|
||||
...options
|
||||
...options,
|
||||
});
|
||||
return await res.json();
|
||||
} catch (e) {
|
||||
@@ -78,19 +78,23 @@
|
||||
|
||||
const getRandomPosition = () => ({
|
||||
x: Math.floor(Math.random() * CONFIG.PIXELS_PER_LINE),
|
||||
y: Math.floor(Math.random() * CONFIG.PIXELS_PER_LINE)
|
||||
y: Math.floor(Math.random() * CONFIG.PIXELS_PER_LINE),
|
||||
});
|
||||
|
||||
const paintPixel = async (x, y) => {
|
||||
const randomColor = Math.floor(Math.random() * 31) + 1;
|
||||
const url = `https://backend.wplace.live/s0/pixel/${CONFIG.START_X}/${CONFIG.START_Y}`;
|
||||
const payload = JSON.stringify({ coords: [x, y], colors: [randomColor], t: capturedCaptchaToken });
|
||||
const payload = JSON.stringify({
|
||||
coords: [x, y],
|
||||
colors: [randomColor],
|
||||
t: capturedCaptchaToken,
|
||||
});
|
||||
try {
|
||||
const res = await originalFetch(url, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'text/plain;charset=UTF-8' },
|
||||
credentials: 'include',
|
||||
body: payload
|
||||
body: payload,
|
||||
});
|
||||
if (res.status === 403) {
|
||||
console.error('❌ 403 Forbidden. CAPTCHA token might be invalid or expired.');
|
||||
@@ -112,7 +116,7 @@
|
||||
state.charges = {
|
||||
count: Math.floor(data.charges.count),
|
||||
max: Math.floor(data.charges.max),
|
||||
cooldownMs: data.charges.cooldownMs
|
||||
cooldownMs: data.charges.cooldownMs,
|
||||
};
|
||||
if (state.userInfo.level) {
|
||||
state.userInfo.level = Math.floor(state.userInfo.level);
|
||||
@@ -140,9 +144,14 @@
|
||||
const paintLoop = async () => {
|
||||
while (state.running) {
|
||||
const { count, cooldownMs } = state.charges;
|
||||
|
||||
|
||||
if (count < 1) {
|
||||
updateUI(state.language === 'pt' ? `⌛ Sem cargas. Esperando ${Math.ceil(cooldownMs/1000)}s...` : `⌛ No charges. Waiting ${Math.ceil(cooldownMs/1000)}s...`, 'status');
|
||||
updateUI(
|
||||
state.language === 'pt'
|
||||
? `⌛ Sem cargas. Esperando ${Math.ceil(cooldownMs / 1000)}s...`
|
||||
: `⌛ No charges. Waiting ${Math.ceil(cooldownMs / 1000)}s...`,
|
||||
'status'
|
||||
);
|
||||
await sleep(cooldownMs);
|
||||
await getCharge();
|
||||
continue;
|
||||
@@ -176,7 +185,9 @@
|
||||
: '❌ CAPTCHA token expired. Waiting for Paint button...',
|
||||
'error'
|
||||
);
|
||||
const mainPaintBtn = await waitForSelector('button.btn.btn-primary.btn-lg, button.btn-primary.sm\\:btn-xl');
|
||||
const mainPaintBtn = await waitForSelector(
|
||||
'button.btn.btn-primary.btn-lg, button.btn-primary.sm\\:btn-xl'
|
||||
);
|
||||
if (mainPaintBtn) mainPaintBtn.click();
|
||||
await sleep(500);
|
||||
updateUI(
|
||||
@@ -196,10 +207,14 @@
|
||||
const moveEvt = new MouseEvent('mousemove', {
|
||||
clientX: centerX,
|
||||
clientY: centerY,
|
||||
bubbles: true
|
||||
bubbles: true,
|
||||
});
|
||||
canvas.dispatchEvent(moveEvt);
|
||||
const keyDown = new KeyboardEvent('keydown', { key: ' ', code: 'Space', bubbles: true });
|
||||
const keyDown = new KeyboardEvent('keydown', {
|
||||
key: ' ',
|
||||
code: 'Space',
|
||||
bubbles: true,
|
||||
});
|
||||
const keyUp = new KeyboardEvent('keyup', { key: ' ', code: 'Space', bubbles: true });
|
||||
canvas.dispatchEvent(keyDown);
|
||||
canvas.dispatchEvent(keyUp);
|
||||
@@ -242,21 +257,21 @@
|
||||
await sleep(1000);
|
||||
continue;
|
||||
}
|
||||
|
||||
|
||||
if (paintResult?.painted === 1) {
|
||||
state.paintedCount++;
|
||||
state.lastPixel = {
|
||||
state.lastPixel = {
|
||||
x: CONFIG.START_X + randomPos.x,
|
||||
y: CONFIG.START_Y + randomPos.y,
|
||||
time: new Date()
|
||||
time: new Date(),
|
||||
};
|
||||
state.charges.count--;
|
||||
|
||||
|
||||
document.getElementById('paintEffect').style.animation = 'pulse 0.5s';
|
||||
setTimeout(() => {
|
||||
document.getElementById('paintEffect').style.animation = '';
|
||||
}, 500);
|
||||
|
||||
|
||||
updateUI(state.language === 'pt' ? '✅ Pixel pintado!' : '✅ Pixel painted!', 'success');
|
||||
} else {
|
||||
updateUI(state.language === 'pt' ? '❌ Falha ao pintar' : '❌ Failed to paint', 'error');
|
||||
@@ -283,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; }
|
||||
}
|
||||
@@ -300,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 {
|
||||
@@ -417,25 +432,25 @@
|
||||
|
||||
const translations = {
|
||||
pt: {
|
||||
title: "WPlace Auto-Farm",
|
||||
start: "Iniciar",
|
||||
stop: "Parar",
|
||||
ready: "Pronto para começar",
|
||||
user: "Usuário",
|
||||
pixels: "Pixels",
|
||||
charges: "Cargas",
|
||||
level: "Level"
|
||||
title: 'WPlace Auto-Farm',
|
||||
start: 'Iniciar',
|
||||
stop: 'Parar',
|
||||
ready: 'Pronto para começar',
|
||||
user: 'Usuário',
|
||||
pixels: 'Pixels',
|
||||
charges: 'Cargas',
|
||||
level: 'Level',
|
||||
},
|
||||
en: {
|
||||
title: "WPlace Auto-Farm",
|
||||
start: "Start",
|
||||
stop: "Stop",
|
||||
ready: "Ready to start",
|
||||
user: "User",
|
||||
pixels: "Pixels",
|
||||
charges: "Charges",
|
||||
level: "Level"
|
||||
}
|
||||
title: 'WPlace Auto-Farm',
|
||||
start: 'Start',
|
||||
stop: 'Stop',
|
||||
ready: 'Ready to start',
|
||||
user: 'User',
|
||||
pixels: 'Pixels',
|
||||
charges: 'Charges',
|
||||
level: 'Level',
|
||||
},
|
||||
};
|
||||
|
||||
const t = translations[state.language] || translations.en;
|
||||
@@ -480,17 +495,20 @@
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
|
||||
document.body.appendChild(panel);
|
||||
|
||||
|
||||
const header = panel.querySelector('.wplace-header');
|
||||
let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
|
||||
|
||||
let pos1 = 0,
|
||||
pos2 = 0,
|
||||
pos3 = 0,
|
||||
pos4 = 0;
|
||||
|
||||
header.onmousedown = dragMouseDown;
|
||||
|
||||
|
||||
function dragMouseDown(e) {
|
||||
if (e.target.closest('.wplace-header-btn')) return;
|
||||
|
||||
|
||||
e = e || window.event;
|
||||
e.preventDefault();
|
||||
pos3 = e.clientX;
|
||||
@@ -498,7 +516,7 @@
|
||||
document.onmouseup = closeDragElement;
|
||||
document.onmousemove = elementDrag;
|
||||
}
|
||||
|
||||
|
||||
function elementDrag(e) {
|
||||
e = e || window.event;
|
||||
e.preventDefault();
|
||||
@@ -506,35 +524,43 @@
|
||||
pos2 = pos4 - e.clientY;
|
||||
pos3 = e.clientX;
|
||||
pos4 = e.clientY;
|
||||
panel.style.top = (panel.offsetTop - pos2) + "px";
|
||||
panel.style.left = (panel.offsetLeft - pos1) + "px";
|
||||
panel.style.top = panel.offsetTop - pos2 + 'px';
|
||||
panel.style.left = panel.offsetLeft - pos1 + 'px';
|
||||
}
|
||||
|
||||
|
||||
function closeDragElement() {
|
||||
document.onmouseup = null;
|
||||
document.onmousemove = null;
|
||||
}
|
||||
|
||||
|
||||
const toggleBtn = panel.querySelector('#toggleBtn');
|
||||
const minimizeBtn = panel.querySelector('#minimizeBtn');
|
||||
const statusText = panel.querySelector('#statusText');
|
||||
const content = panel.querySelector('.wplace-content');
|
||||
const statsArea = panel.querySelector('#statsArea');
|
||||
|
||||
|
||||
toggleBtn.addEventListener('click', () => {
|
||||
state.running = !state.running;
|
||||
|
||||
|
||||
if (state.running && !capturedCaptchaToken) {
|
||||
updateUI(state.language === 'pt' ? '❌ Token não capturado. Clique em qualquer pixel primeiro.' : '❌ CAPTCHA token not captured. Please click any pixel manually first.', 'error');
|
||||
updateUI(
|
||||
state.language === 'pt'
|
||||
? '❌ Token não capturado. Clique em qualquer pixel primeiro.'
|
||||
: '❌ CAPTCHA token not captured. Please click any pixel manually first.',
|
||||
'error'
|
||||
);
|
||||
state.running = false;
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
if (state.running) {
|
||||
toggleBtn.innerHTML = `<i class="fas fa-stop"></i> <span>${t.stop}</span>`;
|
||||
toggleBtn.classList.remove('wplace-btn-primary');
|
||||
toggleBtn.classList.add('wplace-btn-stop');
|
||||
updateUI(state.language === 'pt' ? '🚀 Pintura iniciada!' : '🚀 Painting started!', 'success');
|
||||
updateUI(
|
||||
state.language === 'pt' ? '🚀 Pintura iniciada!' : '🚀 Painting started!',
|
||||
'success'
|
||||
);
|
||||
paintLoop();
|
||||
} else {
|
||||
toggleBtn.innerHTML = `<i class="fas fa-play"></i> <span>${t.start}</span>`;
|
||||
@@ -544,18 +570,18 @@
|
||||
updateUI(state.language === 'pt' ? '⏹️ Parado' : '⏹️ Stopped', 'default');
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
minimizeBtn.addEventListener('click', () => {
|
||||
state.minimized = !state.minimized;
|
||||
content.style.display = state.minimized ? 'none' : 'block';
|
||||
minimizeBtn.innerHTML = `<i class="fas fa-${state.minimized ? 'expand' : 'minus'}"></i>`;
|
||||
});
|
||||
|
||||
|
||||
const autoRefreshCheckbox = panel.querySelector('#autoRefreshCheckbox');
|
||||
autoRefreshCheckbox.addEventListener('change', () => {
|
||||
state.autoRefresh = autoRefreshCheckbox.checked;
|
||||
});
|
||||
|
||||
|
||||
window.addEventListener('beforeunload', () => {
|
||||
state.menuOpen = false;
|
||||
});
|
||||
@@ -568,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';
|
||||
}
|
||||
};
|
||||
|
||||
@@ -578,22 +604,22 @@
|
||||
if (statsArea) {
|
||||
const t = {
|
||||
pt: {
|
||||
user: "Usuário",
|
||||
pixels: "Pixels",
|
||||
charges: "Cargas",
|
||||
level: "Level"
|
||||
user: 'Usuário',
|
||||
pixels: 'Pixels',
|
||||
charges: 'Cargas',
|
||||
level: 'Level',
|
||||
},
|
||||
en: {
|
||||
user: "User",
|
||||
pixels: "Pixels",
|
||||
charges: "Charges",
|
||||
level: "Level"
|
||||
}
|
||||
user: 'User',
|
||||
pixels: 'Pixels',
|
||||
charges: 'Charges',
|
||||
level: 'Level',
|
||||
},
|
||||
}[state.language] || {
|
||||
user: "User",
|
||||
pixels: "Pixels",
|
||||
charges: "Charges",
|
||||
level: "Level"
|
||||
user: 'User',
|
||||
pixels: 'Pixels',
|
||||
charges: 'Charges',
|
||||
level: 'Level',
|
||||
};
|
||||
|
||||
statsArea.innerHTML = `
|
||||
|
||||
+3904
-2115
File diff suppressed because it is too large.
Load diff
+309
-366
File diff suppressed because it is too large.
Load diff
+22
-11
@@ -1,14 +1,15 @@
|
||||
{
|
||||
"title": "WPlace Auto-Image",
|
||||
"title": "Auto-Image",
|
||||
"toggleOverlay": "Toggle Overlay",
|
||||
"scanColors": "Scan Colors",
|
||||
"uploadImage": "Upload Image",
|
||||
"resizeImage": "Resize Image",
|
||||
"uploadImage": "Upload",
|
||||
"resizeImage": "Resize",
|
||||
"selectPosition": "Select Position",
|
||||
"startPainting": "Start Painting",
|
||||
"stopPainting": "Stop Painting",
|
||||
"startPainting": "Start",
|
||||
"stopPainting": "Stop",
|
||||
"checkingColors": "🔍 Checking available colors...",
|
||||
"noColorsFound": "❌ Open the color palette on the site and try again!",
|
||||
"noColorsFound": "❌ To update the color swatch, open the color palette on the site and try again!",
|
||||
"colorsUpdated": "✅ Available colors increased {oldCount} -> {newCount}, {diffCount} new colors found",
|
||||
"colorsFound": "✅ {count} available colors found. Ready to upload.",
|
||||
"loadingImage": "🖼️ Loading image...",
|
||||
"imageLoaded": "✅ Image loaded with {count} valid pixels",
|
||||
@@ -20,13 +21,18 @@
|
||||
"startPaintingMsg": "🎨 Starting painting...",
|
||||
"paintingProgress": "🧱 Progress: {painted}/{total} pixels...",
|
||||
"noCharges": "⌛ No charges. Waiting {time}...",
|
||||
"paintingStopped": "⏹️ Painting stopped by user",
|
||||
"overlayTilesNotLoaded": "❌ Required map tiles not loaded. Check connection or retry.",
|
||||
"paintingStoppedByUser": "⏹️ Painting stopped by user",
|
||||
"paintingBatchFailed": "❌ Failed to send pixel batch after retries. Painting stopped.",
|
||||
"paintingPixelCheckFailed": "❌ Failed to read pixel at ({x}, {y}). Painting stopped.",
|
||||
"paintingFinalBatchFailed": "⚠️ Final batch of {count} pixels failed after retries.",
|
||||
"paintingComplete": "✅ Painting complete! {count} pixels painted.",
|
||||
"paintingError": "❌ Error during painting",
|
||||
"paintingError": "❌ Unexpected error during painting",
|
||||
"missingRequirements": "❌ Load an image and select a position first",
|
||||
"progress": "Progress",
|
||||
"pixels": "Pixels",
|
||||
"charges": "Charges",
|
||||
"fullChargeIn": "Full Charge In",
|
||||
"estimatedTime": "Estimated time",
|
||||
"initMessage": "Click 'Upload Image' to begin",
|
||||
"waitingInit": "Waiting for initialization...",
|
||||
@@ -71,7 +77,8 @@
|
||||
"waitCharges": "Wait until charges reach",
|
||||
"captchaSolving": "🔑 Generating Turnstile token...",
|
||||
"captchaFailed": "❌ Turnstile token generation failed. Trying fallback method...",
|
||||
"automation": "Automation", "noChargesThreshold": "⌛ Waiting for charges to reach {threshold}. Currently {current}. Next in {time}...",
|
||||
"automation": "Automation",
|
||||
"noChargesThreshold": "⌛ Waiting to reach {threshold} charges. Currently {current}. Estimated time: {time}.",
|
||||
"tokenCapturedSuccess": "Token captured successfully! You can start the bot now.",
|
||||
"notificationsNotSupported": "Notifications are not supported in this browser.",
|
||||
"chargesReadyNotification": "WPlace — Charges Ready",
|
||||
@@ -138,6 +145,10 @@
|
||||
"restore": "Restore",
|
||||
"hideStats": "Hide Stats",
|
||||
"paintOptions": "Paint Options",
|
||||
"paintWhitePixels": "Paint White Pixels",
|
||||
"paintTransparentPixels": "Paint Transparent Pixels"
|
||||
"paintWhitePixels": "Paint White",
|
||||
"paintWhitePixelsDescription": "If enabled, template white pixels will be painted.",
|
||||
"paintTransparentPixels": "Paint Transparent",
|
||||
"paintTransparentPixelsDescription": "If enabled, template transparent pixels will be painted",
|
||||
"paintUnavailablePixels": "Paint Unavailable",
|
||||
"paintUnavailablePixelsDescription": "If enabled, template colors that are unavailable will be painted using the closest available color"
|
||||
}
|
||||
+240
-236
@@ -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 */
|
||||
@@ -14,14 +15,16 @@
|
||||
|
||||
/* === UI PROPERTIES === */
|
||||
--wplace-radius: 8px;
|
||||
--wplace-btn-radius: 12px;
|
||||
--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 */
|
||||
@@ -30,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: #f3f3f3; /* neutral-100 */
|
||||
--wplace-bg-subtle: #f3f3f3; /* neutral-100 — hover */
|
||||
--wplace-bg-faint: #e0e0e0; /* neutral-200 */
|
||||
--wplace-bg-ghost: #d1d1d1; /* neutral-300 */
|
||||
--wplace-bg-whisper: #e0e0e0; /* can be used as whisper on hover */
|
||||
|
||||
/* 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: #d1d1d1; /* neutral-300 */
|
||||
--wplace-border-faint: #e0e0e0; /* neutral-200 */
|
||||
--wplace-border-ghost: #e0e0e0; /* neutral-200 */
|
||||
--wplace-border-ultra-faint: #e0e0e0; /* neutral-200 — very faint */
|
||||
|
||||
/* 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;
|
||||
@@ -71,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;
|
||||
@@ -95,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;
|
||||
@@ -238,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;
|
||||
@@ -419,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;
|
||||
}
|
||||
+171
-229
@@ -1,21 +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-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.1);
|
||||
--wplace-btn-radius: 16px;
|
||||
--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;
|
||||
|
||||
@@ -27,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);
|
||||
@@ -78,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);
|
||||
@@ -89,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);
|
||||
@@ -100,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);
|
||||
@@ -152,357 +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-radius);
|
||||
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);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
: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%);
|
||||
}
|
||||
+91
-92
@@ -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;
|
||||
}
|
||||
Reference in new issue
Block a user