mirror of
https://github.com/tiennm99/WPlace-AutoBOT.git
synced 2026-10-13 12:14:09 +00:00
Merge pull request #81 from Staninna/decoupled-css
Reapply "Decoupled css part 2"
This commit is contained in:
6 files changed
+4007
-1619
No files matched your search
@@ -0,0 +1,187 @@
|
||||
name: Pages – aggregate all branches
|
||||
|
||||
on:
|
||||
push:
|
||||
branches: ["**"]
|
||||
workflow_dispatch:
|
||||
|
||||
permissions:
|
||||
contents: read
|
||||
pages: write
|
||||
id-token: write
|
||||
|
||||
concurrency:
|
||||
group: pages
|
||||
cancel-in-progress: true
|
||||
|
||||
jobs:
|
||||
aggregate_deploy:
|
||||
runs-on: ubuntu-latest
|
||||
environment:
|
||||
name: github-pages
|
||||
url: ${{ steps.deploy.outputs.page_url }}
|
||||
|
||||
steps:
|
||||
- name: Checkout (shallow)
|
||||
uses: actions/checkout@v4
|
||||
with:
|
||||
fetch-depth: 1
|
||||
|
||||
- name: Configure Pages
|
||||
uses: actions/configure-pages@v5
|
||||
|
||||
- name: Aggregate and build recursive directory pages
|
||||
shell: bash
|
||||
run: |
|
||||
set -euo pipefail
|
||||
|
||||
# jq for JSON escaping (present on runners, but ensure)
|
||||
if ! command -v jq >/dev/null 2>&1; then
|
||||
sudo apt-get update -y
|
||||
sudo apt-get install -y jq
|
||||
fi
|
||||
|
||||
REPO="${GITHUB_REPOSITORY#*/}"
|
||||
SITE_ROOT="/${REPO}/"
|
||||
|
||||
mkdir -p public
|
||||
: > public/.nojekyll
|
||||
|
||||
# Tiny favicon assets to avoid 404s
|
||||
printf "%s" \
|
||||
"<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><text y='14' font-size='14'>🚀</text></svg>" \
|
||||
> public/favicon.svg
|
||||
|
||||
# List remote branches
|
||||
mapfile -t BRANCHES < <(
|
||||
git ls-remote --heads origin | awk '{print $2}' \
|
||||
| sed 's@refs/heads/@@'
|
||||
)
|
||||
|
||||
# Landing page (no globals except window.__branches)
|
||||
cat > public/index.html <<'HTML'
|
||||
<!doctype html>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ctext y='14' font-size='14'%3E🚀%3C/text%3E%3C/svg%3E" />
|
||||
<title>Branches</title>
|
||||
<style>
|
||||
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial;
|
||||
margin:24px;background:#0d1117;color:#e6edf3}
|
||||
a{color:#58a6ff;text-decoration:none}
|
||||
.card{background:#161b22;padding:16px;border-radius:8px;margin:12px 0}
|
||||
input{background:#0b0f14;border:1px solid #30363d;color:#e6edf3;
|
||||
padding:8px 10px;border-radius:6px;width:100%;max-width:420px}
|
||||
</style>
|
||||
<h1>Branches</h1>
|
||||
<input id="q" placeholder="Filter branches..." />
|
||||
<div id="list"></div>
|
||||
<script>window.__branches=window.__branches||[];</script>
|
||||
HTML
|
||||
|
||||
# Emit index.html for a directory
|
||||
gen_index_dir() {
|
||||
local DIR="$1" ROOT="$2" BR="$3"
|
||||
local rel="${DIR#$ROOT}"
|
||||
local title="Branch: ${BR}${rel:-/}"
|
||||
|
||||
{
|
||||
echo "<!doctype html><meta charset='utf-8'/>"
|
||||
echo "<meta name='viewport' content='width=device-width,initial-scale=1'/>"
|
||||
echo "<link rel='icon' href=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ctext y='14' font-size='14'%3E🚀%3C/text%3E%3C/svg%3E\" />"
|
||||
echo "<title>${title}</title>"
|
||||
echo "<style>body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial;margin:24px;background:#0d1117;color:#e6edf3}a{color:#58a6ff;text-decoration:none}table{width:100%;border-collapse:collapse}th,td{padding:8px;border-bottom:1px solid #30363d}tr:hover{background:#161b22}</style>"
|
||||
echo "<h1>${title}</h1>"
|
||||
if [[ "$DIR" != "$ROOT" ]]; then
|
||||
echo "<p><a href='../'>⬆ Up</a> • <a href='${SITE_ROOT}'>All branches</a></p>"
|
||||
else
|
||||
echo "<p><a href='${SITE_ROOT}'>All branches</a></p>"
|
||||
fi
|
||||
echo "<table><thead><tr><th>Name</th><th style='width:120px'>Size</th><th style='width:180px'>Modified</th></tr></thead><tbody>"
|
||||
|
||||
# Subdirectories
|
||||
while IFS= read -r d; do
|
||||
[[ -n "$d" ]] || continue
|
||||
printf "<tr><td>📁 <a href='./%s/'>%s/</a></td><td>—</td><td>—</td></tr>\n" "$d" "$d"
|
||||
done < <(find "$DIR" -mindepth 1 -maxdepth 1 -type d -printf '%f\n' | sort)
|
||||
|
||||
# Files
|
||||
while IFS= read -r f; do
|
||||
[[ -n "$f" ]] || continue
|
||||
size=$(stat -c %s "$DIR/$f" 2>/dev/null || echo 0)
|
||||
size_h=$(numfmt --to=iec --suffix=B "$size" 2>/dev/null || echo "$size")
|
||||
mod=$(date -r "$DIR/$f" "+%Y-%m-%d %H:%M" 2>/dev/null || echo "")
|
||||
printf "<tr><td>📄 <a href='./%s'>%s</a></td><td>%s</td><td>%s</td></tr>\n" "$f" "$f" "$size_h" "$mod"
|
||||
done < <(find "$DIR" -mindepth 1 -maxdepth 1 -type f ! -name 'index.html' -printf '%f\n' | sort)
|
||||
|
||||
echo "</tbody></table>"
|
||||
echo "<p style='opacity:.7'>Generated $(date -u '+%Y-%m-%d %H:%M UTC')</p>"
|
||||
} > "$DIR/index.html"
|
||||
}
|
||||
|
||||
# Build per-branch trees and indexes
|
||||
for BR in "${BRANCHES[@]}"; do
|
||||
SAFE="$(echo "$BR" | tr '/:@ ' '----' | sed 's/[^A-Za-z0-9._-]/-/g')"
|
||||
mkdir -p "public/$SAFE"
|
||||
|
||||
git fetch --depth=1 origin "$BR"
|
||||
git archive --format=tar FETCH_HEAD | tar -x -C "public/$SAFE"
|
||||
|
||||
# Keep only static assets; prune empty dirs
|
||||
rm -rf "public/$SAFE/.git" "public/$SAFE/.github" \
|
||||
"public/$SAFE/node_modules"
|
||||
find "public/$SAFE" -type f ! \
|
||||
\( -name '*.html' -o -name '*.js' -o -name '*.css' -o \
|
||||
-name '*.json' -o -name '*.png' -o -name '*.jpg' -o \
|
||||
-name '*.jpeg' -o -name '*.gif' -o -name '*.svg' \) \
|
||||
-delete
|
||||
find "public/$SAFE" -type d -empty -delete
|
||||
|
||||
ROOT_DIR="public/$SAFE"
|
||||
while IFS= read -r -d '' d; do
|
||||
gen_index_dir "$d" "$ROOT_DIR" "$BR"
|
||||
done < <(find "$ROOT_DIR" -type d -print0)
|
||||
|
||||
# Append to landing page (JSON-escaped)
|
||||
SAFE_JSON=$(printf '%s' "$SAFE" | jq -Rr @json)
|
||||
BR_JSON=$(printf '%s' "$BR" | jq -Rr @json)
|
||||
echo "<script>window.__branches.push({safe:$SAFE_JSON,name:$BR_JSON});</script>" \
|
||||
>> public/index.html
|
||||
done
|
||||
|
||||
# Finish landing page
|
||||
cat >> public/index.html <<'HTML'
|
||||
<script>
|
||||
(() => {
|
||||
const q = document.getElementById('q');
|
||||
const listEl = document.getElementById('list');
|
||||
|
||||
function render(filter = '') {
|
||||
listEl.innerHTML = '';
|
||||
const qv = filter.toLowerCase();
|
||||
for (const b of (window.__branches || []).filter(x =>
|
||||
x.name.toLowerCase().includes(qv)
|
||||
)) {
|
||||
const div = document.createElement('div');
|
||||
div.className = 'card';
|
||||
div.innerHTML = `<strong>${b.name}</strong><div>
|
||||
<a href="./${b.safe}/">Open</a>
|
||||
</div>`;
|
||||
listEl.appendChild(div);
|
||||
}
|
||||
}
|
||||
|
||||
q.addEventListener('input', (e) => render(e.target.value));
|
||||
render();
|
||||
})();
|
||||
</script>
|
||||
HTML
|
||||
|
||||
- name: Upload Pages artifact
|
||||
uses: actions/upload-pages-artifact@v4
|
||||
with:
|
||||
path: public
|
||||
|
||||
- name: Deploy to GitHub Pages
|
||||
id: deploy
|
||||
uses: actions/deploy-pages@v4
|
||||
+316
-1619
File diff suppressed because it is too large.
Load diff
File diff suppressed because it is too large.
Load diff
@@ -0,0 +1,482 @@
|
||||
/* WPlace Auto-Image Bot - Classic Light Theme */
|
||||
/* Clean, bright theme based on classic design with light backgrounds */
|
||||
|
||||
.wplace-theme--classic-light {
|
||||
/* === CORE COLORS === */
|
||||
--wplace-primary: #ffffff; /* Clean white */
|
||||
--wplace-secondary: #f8f9fa; /* Light gray */
|
||||
--wplace-accent: #e9ecef; /* Lighter gray */
|
||||
--wplace-text: #212529; /* Dark text */
|
||||
--wplace-highlight: #6f42c1; /* Purple highlight */
|
||||
--wplace-success: #28a745; /* Bootstrap green */
|
||||
--wplace-error: #dc3545; /* Bootstrap red */
|
||||
--wplace-warning: #ffc107; /* Bootstrap yellow */
|
||||
|
||||
/* === UI PROPERTIES === */
|
||||
--wplace-radius: 8px;
|
||||
--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-backdrop: blur(10px);
|
||||
--wplace-font: 'Segoe UI', Roboto, sans-serif;
|
||||
|
||||
/* === EXTENDED COLOR PALETTE === */
|
||||
/* Icon colors */
|
||||
--wplace-icon-primary: #4facfe; /* Light blue */
|
||||
--wplace-icon-secondary: #00f2fe; /* Cyan */
|
||||
--wplace-icon-palette: #f093fb; /* Pink */
|
||||
|
||||
/* Additional UI colors */
|
||||
--wplace-danger: #dc3545; /* Bootstrap red */
|
||||
--wplace-danger-dark: #c82333; /* Darker red */
|
||||
--wplace-muted-text: rgba(33, 37, 41, 0.7);
|
||||
--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);
|
||||
|
||||
/* 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);
|
||||
|
||||
/* 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);
|
||||
|
||||
/* 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);
|
||||
|
||||
/* 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);
|
||||
|
||||
/* Slider colors */
|
||||
--wplace-slider-thumb-bg: #6f42c1;
|
||||
--wplace-slider-track-bg: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
|
||||
}
|
||||
|
||||
/* === 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;
|
||||
color: var(--wplace-text) !important;
|
||||
border: 1px solid rgba(0, 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;
|
||||
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 {
|
||||
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
|
||||
border: 1px solid rgba(0, 0, 0, 0.2) !important;
|
||||
border-radius: 12px !important;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;
|
||||
font-family: 'Segoe UI', Roboto, sans-serif !important;
|
||||
color: var(--wplace-text) !important;
|
||||
position: fixed !important;
|
||||
overflow: hidden !important;
|
||||
z-index: 9998 !important;
|
||||
}
|
||||
|
||||
/* Stats header styling */
|
||||
.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;
|
||||
text-shadow: none !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
/* Stats title specific styling */
|
||||
.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 {
|
||||
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 {
|
||||
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
|
||||
border: 1px solid rgba(0, 0, 0, 0.2) !important;
|
||||
border-radius: 12px !important;
|
||||
color: var(--wplace-text) !important;
|
||||
font-family: 'Segoe UI', Roboto, sans-serif !important;
|
||||
font-weight: 500 !important;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !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;
|
||||
transform: translateY(-1px) !important;
|
||||
}
|
||||
|
||||
/* Button variants with classic light colors */
|
||||
.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-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-upload {
|
||||
background: rgba(111, 66, 193, 0.1) !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;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
border-radius: 12px !important;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
/* Status indicators with light colors */
|
||||
.wplace-theme--classic-light .status-success {
|
||||
background: rgba(40, 167, 69, 0.1) !important;
|
||||
border-color: var(--wplace-success) !important;
|
||||
color: var(--wplace-success) !important;
|
||||
box-shadow: 0 0 15px rgba(40, 167, 69, 0.2) !important;
|
||||
text-shadow: none !important;
|
||||
}
|
||||
|
||||
.wplace-theme--classic-light .status-error {
|
||||
background: rgba(220, 53, 69, 0.1) !important;
|
||||
border-color: var(--wplace-error) !important;
|
||||
color: var(--wplace-error) !important;
|
||||
box-shadow: 0 0 15px rgba(220, 53, 69, 0.2) !important;
|
||||
text-shadow: none !important;
|
||||
}
|
||||
|
||||
.wplace-theme--classic-light .status-default {
|
||||
background: rgba(111, 66, 193, 0.1) !important;
|
||||
border-color: var(--wplace-highlight) !important;
|
||||
color: var(--wplace-highlight) !important;
|
||||
text-shadow: none !important;
|
||||
}
|
||||
|
||||
.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 {
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
/* Dropdown menu options */
|
||||
.wplace-theme--classic-light .wplace-settings-select option {
|
||||
background: #ffffff !important;
|
||||
color: var(--wplace-text) !important;
|
||||
}
|
||||
|
||||
.wplace-theme--classic-light .wplace-settings-option {
|
||||
background: #ffffff !important;
|
||||
color: var(--wplace-text) !important;
|
||||
}
|
||||
|
||||
/* Sliders with classic gradient */
|
||||
.wplace-theme--classic-light .wplace-speed-slider {
|
||||
background: linear-gradient(to right, #4facfe 0%, #00f2fe 100%) !important;
|
||||
border-radius: 4px !important;
|
||||
}
|
||||
|
||||
.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 {
|
||||
background: linear-gradient(to right, #4facfe 0%, #00f2fe 100%) !important;
|
||||
border-radius: 4px !important;
|
||||
}
|
||||
|
||||
.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);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
/* Settings labels */
|
||||
.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;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
/* 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-eye { color: #6f42c1; }
|
||||
|
||||
/* Clean light theme animations */
|
||||
@keyframes lightShimmer {
|
||||
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;
|
||||
border-radius: 12px !important;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
|
||||
backdrop-filter: blur(10px) !important;
|
||||
border: 1px solid rgba(0, 0, 0, 0.2) !important;
|
||||
color: var(--wplace-text) !important;
|
||||
font-family: 'Segoe UI', Roboto, sans-serif !important;
|
||||
}
|
||||
|
||||
.wplace-theme--classic-light .wplace-turnstile-title {
|
||||
color: var(--wplace-text) !important;
|
||||
}
|
||||
|
||||
.wplace-theme--classic-light .wplace-turnstile-hide-btn {
|
||||
color: var(--wplace-text) !important;
|
||||
border: 1px solid rgba(0, 0, 0, 0.2) !important;
|
||||
border-radius: 6px !important;
|
||||
background: rgba(0, 0, 0, 0.05) !important;
|
||||
}
|
||||
|
||||
.wplace-theme--classic-light .wplace-turnstile-hide-btn:hover {
|
||||
background: rgba(0, 0, 0, 0.1) !important;
|
||||
}
|
||||
|
||||
/* Color swatches with light styling */
|
||||
.wplace-theme--classic-light .wplace-color-swatch {
|
||||
border: 1px solid rgba(0, 0, 0, 0.2) !important;
|
||||
border-radius: 4px !important;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
|
||||
}
|
||||
|
||||
.wplace-theme--classic-light .wplace-color-swatch:hover {
|
||||
box-shadow: 0 4px 16px rgba(111, 66, 193, 0.3) !important;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.wplace-theme--classic-light .wplace-stat-colors-grid {
|
||||
background: rgba(0, 0, 0, 0.05) !important;
|
||||
border-radius: 8px !important;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1) !important;
|
||||
}
|
||||
@@ -0,0 +1,653 @@
|
||||
/* 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-highlight: #775ce3;
|
||||
--wplace-success: #00ff00;
|
||||
--wplace-error: #ff0000;
|
||||
--wplace-warning: #ffaa00;
|
||||
|
||||
--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-backdrop: blur(10px);
|
||||
--wplace-font: 'Segoe UI', Roboto, sans-serif;
|
||||
|
||||
--wplace-scanline: 0;
|
||||
--wplace-pixel-blink: 0;
|
||||
|
||||
/* Icon colors */
|
||||
--wplace-icon-primary: #4facfe;
|
||||
--wplace-icon-secondary: #00f2fe;
|
||||
--wplace-icon-palette: #f093fb;
|
||||
|
||||
/* Additional UI colors */
|
||||
--wplace-danger: #ff6a6a;
|
||||
--wplace-danger-dark: #ff4757;
|
||||
--wplace-muted-text: #ffffffBB;
|
||||
--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 {
|
||||
background: var(--wplace-primary);
|
||||
color: var(--wplace-text);
|
||||
border-radius: var(--wplace-radius);
|
||||
box-shadow: var(--wplace-shadow);
|
||||
font-family: var(--wplace-font);
|
||||
backdrop-filter: var(--wplace-backdrop);
|
||||
border: var(--wplace-border-width) var(--wplace-border-style) var(--wplace-border-color);
|
||||
}
|
||||
|
||||
:root #wplace-stats-container,
|
||||
.wplace-theme--classic #wplace-stats-container {
|
||||
background: var(--wplace-primary);
|
||||
color: var(--wplace-text);
|
||||
border-radius: var(--wplace-radius);
|
||||
box-shadow: var(--wplace-shadow);
|
||||
font-family: var(--wplace-font);
|
||||
backdrop-filter: var(--wplace-backdrop);
|
||||
border: var(--wplace-border-width) var(--wplace-border-style) var(--wplace-border-color);
|
||||
}
|
||||
|
||||
:root #wplace-settings-container,
|
||||
.wplace-theme--classic #wplace-settings-container {
|
||||
background: var(--wplace-primary);
|
||||
color: var(--wplace-text);
|
||||
border-radius: var(--wplace-radius);
|
||||
box-shadow: var(--wplace-shadow);
|
||||
font-family: var(--wplace-font);
|
||||
backdrop-filter: var(--wplace-backdrop);
|
||||
border: var(--wplace-border-width) var(--wplace-border-style) var(--wplace-border-color);
|
||||
}
|
||||
|
||||
:root .wplace-header,
|
||||
.wplace-theme--classic .wplace-header {
|
||||
background: var(--wplace-secondary);
|
||||
color: var(--wplace-highlight);
|
||||
}
|
||||
|
||||
:root .wplace-section-title,
|
||||
.wplace-theme--classic .wplace-section-title {
|
||||
color: var(--wplace-highlight);
|
||||
}
|
||||
|
||||
:root .wplace-stat-value,
|
||||
.wplace-theme--classic .wplace-stat-value {
|
||||
color: var(--wplace-highlight);
|
||||
}
|
||||
|
||||
:root .wplace-status-section,
|
||||
.wplace-theme--classic .wplace-status-section {
|
||||
border-radius: var(--wplace-radius);
|
||||
}
|
||||
|
||||
:root .wplace-section,
|
||||
.wplace-theme--classic .wplace-section {
|
||||
border-radius: var(--wplace-radius);
|
||||
}
|
||||
|
||||
:root .wplace-stats,
|
||||
.wplace-theme--classic .wplace-stats {
|
||||
border-radius: var(--wplace-radius);
|
||||
}
|
||||
|
||||
:root .wplace-status,
|
||||
.wplace-theme--classic .wplace-status {
|
||||
border-radius: var(--wplace-radius);
|
||||
}
|
||||
|
||||
:root .wplace-alert-base,
|
||||
.wplace-theme--classic .wplace-alert-base {
|
||||
border-radius: var(--wplace-radius);
|
||||
}
|
||||
|
||||
:root .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);
|
||||
color: var(--wplace-text);
|
||||
box-shadow: var(--wplace-shadow);
|
||||
backdrop-filter: var(--wplace-backdrop);
|
||||
}
|
||||
|
||||
/* 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);
|
||||
color: var(--wplace-text);
|
||||
border-radius: var(--wplace-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);
|
||||
}
|
||||
|
||||
:root .wplace-btn:disabled,
|
||||
.wplace-theme--classic .wplace-btn:disabled {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
:root .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%);
|
||||
color: var(--wplace-text);
|
||||
}
|
||||
|
||||
:root .wplace-btn-upload,
|
||||
.wplace-theme--classic .wplace-btn-upload {
|
||||
background: linear-gradient(135deg, #111111 0%, #4a4a4a 100%);
|
||||
color: var(--wplace-text);
|
||||
border: 1px dashed var(--wplace-highlight) !important;
|
||||
}
|
||||
|
||||
:root .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 {
|
||||
background: linear-gradient(135deg, var(--wplace-error) 0%, #dc143c 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
:root .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 {
|
||||
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"] {
|
||||
background: var(--wplace-highlight) !important;
|
||||
color: #000000 !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;
|
||||
}
|
||||
|
||||
: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);
|
||||
}
|
||||
|
||||
: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"] {
|
||||
background: var(--wplace-highlight);
|
||||
color: #000000;
|
||||
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);
|
||||
}
|
||||
|
||||
/* Status styling for classic theme */
|
||||
:root .status-default,
|
||||
.wplace-theme--classic .status-default {
|
||||
background: rgba(255,255,255,0.1);
|
||||
border-color: var(--wplace-text);
|
||||
color: var(--wplace-text);
|
||||
}
|
||||
|
||||
:root .status-success,
|
||||
.wplace-theme--classic .status-success {
|
||||
background: rgba(0, 255, 0, 0.1);
|
||||
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);
|
||||
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);
|
||||
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 {
|
||||
color: var(--wplace-text);
|
||||
background: rgba(255,255,255,0.1);
|
||||
border-color: var(--wplace-text);
|
||||
}
|
||||
|
||||
/* Alert styling for classic theme */
|
||||
:root .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);
|
||||
}
|
||||
|
||||
:root .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);
|
||||
}
|
||||
|
||||
:root .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);
|
||||
}
|
||||
|
||||
:root .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);
|
||||
}
|
||||
|
||||
/* 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);
|
||||
border-radius: var(--wplace-radius);
|
||||
}
|
||||
|
||||
:root .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);
|
||||
}
|
||||
|
||||
/* Header and sections styling for classic theme */
|
||||
:root .wplace-header-btn,
|
||||
.wplace-theme--classic .wplace-header-btn {
|
||||
background: rgba(255,255,255,0.1);
|
||||
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;
|
||||
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;
|
||||
border-radius: var(--wplace-radius) !important;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
|
||||
backdrop-filter: var(--wplace-backdrop) !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2) !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-secondary: #f5f5f5;
|
||||
--wplace-accent: #007acc;
|
||||
--wplace-text: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root .theme-auto,
|
||||
.wplace-theme--classic .theme-auto {
|
||||
--wplace-primary: #1e1e1e;
|
||||
--wplace-secondary: #2d2d30;
|
||||
--wplace-accent: var(--wplace-highlight);
|
||||
--wplace-text: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
/* Border and color styling for classic theme */
|
||||
:root .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);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
:root .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);
|
||||
}
|
||||
|
||||
:root .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);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
:root .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) {
|
||||
filter: grayscale(80%);
|
||||
}
|
||||
|
||||
:root .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 {
|
||||
text-shadow: 0 0 3px black;
|
||||
}
|
||||
|
||||
/* Icon colors for classic theme */
|
||||
:root .wplace-icon-key,
|
||||
.wplace-theme--classic .wplace-icon-key {
|
||||
color: #4facfe;
|
||||
}
|
||||
|
||||
:root .wplace-icon-robot,
|
||||
.wplace-theme--classic .wplace-icon-robot {
|
||||
color: #4facfe;
|
||||
}
|
||||
|
||||
:root .wplace-icon-speed,
|
||||
.wplace-theme--classic .wplace-icon-speed {
|
||||
color: #4facfe;
|
||||
}
|
||||
|
||||
:root .wplace-icon-bell,
|
||||
.wplace-theme--classic .wplace-icon-bell {
|
||||
color: #ffd166;
|
||||
}
|
||||
|
||||
:root .wplace-icon-palette,
|
||||
.wplace-theme--classic .wplace-icon-palette {
|
||||
color: #f093fb;
|
||||
}
|
||||
|
||||
:root .wplace-icon-globe,
|
||||
.wplace-theme--classic .wplace-icon-globe {
|
||||
color: #ffeaa7;
|
||||
}
|
||||
|
||||
:root .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 {
|
||||
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 {
|
||||
-webkit-appearance: none;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
background: var(--wplace-slider-thumb-bg);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
:root .wplace-speed-slider,
|
||||
.wplace-theme--classic .wplace-speed-slider {
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
:root .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 {
|
||||
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 {
|
||||
color: var(--wplace-text) !important;
|
||||
}
|
||||
|
||||
:root .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-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;
|
||||
}
|
||||
|
||||
:root .wplace-settings-select,
|
||||
.wplace-theme--classic .wplace-settings-select {
|
||||
background: rgba(255,255,255,0.15);
|
||||
color: white;
|
||||
border: 1px solid rgba(255,255,255,0.2);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 3px 10px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
:root .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);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
:root .resize-overlay,
|
||||
.wplace-theme--classic .resize-overlay {
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
:root .wplace-overlay,
|
||||
.wplace-theme--classic .wplace-overlay {
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
:root .wplace-settings-error,
|
||||
.wplace-theme--classic .wplace-settings-error {
|
||||
background: rgba(255, 0, 0, 0.4) !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);
|
||||
border-radius: var(--wplace-radius);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
}
|
||||
|
||||
:root .wplace-batch-controls,
|
||||
.wplace-theme--classic .wplace-batch-controls {
|
||||
background: rgba(255,255,255,0.1);
|
||||
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;
|
||||
}
|
||||
|
||||
:root .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 {
|
||||
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);
|
||||
}
|
||||
|
||||
/* Additional elements for classic theme */
|
||||
:root .wplace-color-divider,
|
||||
.wplace-theme--classic .wplace-color-divider {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
:root .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);
|
||||
}
|
||||
|
||||
:root .wplace-settings-apply-btn,
|
||||
.wplace-theme--classic .wplace-settings-apply-btn {
|
||||
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
|
||||
color: white;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
/* Resize dialog styling for classic theme */
|
||||
:root .resize-container,
|
||||
.wplace-theme--classic .resize-container {
|
||||
background: #000000;
|
||||
border: 1px solid #ffffff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 0 20px rgba(0,0,0,0.5);
|
||||
}
|
||||
+403
@@ -0,0 +1,403 @@
|
||||
/* WPlace Auto-Image Bot - Neon Theme */
|
||||
/* Retro cyberpunk aesthetic with green neon glow effects */
|
||||
|
||||
.wplace-theme--neon {
|
||||
/* Neon theme colors - matching upstream main neon theme */
|
||||
--wplace-primary: #1a1a2e;
|
||||
--wplace-secondary: #16213e;
|
||||
--wplace-accent: #0f3460;
|
||||
--wplace-text: #00ff41;
|
||||
--wplace-highlight: #ff6b35;
|
||||
--wplace-success: #39ff14;
|
||||
--wplace-error: #ff073a;
|
||||
--wplace-warning: #ffff00;
|
||||
|
||||
/* 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-backdrop: none;
|
||||
--wplace-font: 'Press Start 2P', monospace, 'Courier New';
|
||||
|
||||
/* Z-index layers */
|
||||
--wplace-z-overlay: 10000;
|
||||
--wplace-z-alert: 10002;
|
||||
--wplace-z-settings: 10002;
|
||||
|
||||
/* Feature toggles */
|
||||
--wplace-scanline: 1;
|
||||
--wplace-pixel-blink: 1;
|
||||
|
||||
/* Icon colors - neon variants */
|
||||
--wplace-icon-primary: #00ff41;
|
||||
--wplace-icon-secondary: #39ff14;
|
||||
--wplace-icon-palette: #ff6b35;
|
||||
|
||||
/* Additional UI colors - neon variants */
|
||||
--wplace-danger: #ff073a;
|
||||
--wplace-danger-dark: #cc0531;
|
||||
--wplace-muted-text: #00ff4180;
|
||||
--wplace-highlight-secondary: #ffaa00;
|
||||
|
||||
/* Text variants - neon style */
|
||||
--wplace-text-secondary: #00ff41dd;
|
||||
--wplace-text-muted: #00ff41bb;
|
||||
--wplace-text-dim: #00ff4199;
|
||||
--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);
|
||||
|
||||
/* 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);
|
||||
|
||||
/* 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);
|
||||
|
||||
/* 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);
|
||||
|
||||
/* Slider colors - neon style */
|
||||
--wplace-slider-thumb-bg: #00ff41;
|
||||
}
|
||||
|
||||
/* Neon-specific styling overrides */
|
||||
.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;
|
||||
font-family: var(--wplace-font) !important;
|
||||
}
|
||||
|
||||
.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;
|
||||
font-family: var(--wplace-font) !important;
|
||||
}
|
||||
|
||||
.wplace-theme--neon .wplace-header {
|
||||
background: var(--wplace-secondary) !important;
|
||||
border-bottom: 1px solid var(--wplace-text) !important;
|
||||
color: var(--wplace-text) !important;
|
||||
text-shadow: 0 0 10px var(--wplace-text) !important;
|
||||
font-family: var(--wplace-font) !important;
|
||||
}
|
||||
|
||||
.wplace-theme--neon .wplace-section {
|
||||
background: rgba(22, 33, 62, 0.5) !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;
|
||||
border: 1px solid var(--wplace-text) !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
.wplace-theme--neon .wplace-section-title {
|
||||
color: var(--wplace-text) !important;
|
||||
text-shadow: 0 0 8px var(--wplace-text) !important;
|
||||
text-transform: uppercase !important;
|
||||
font-family: var(--wplace-font) !important;
|
||||
font-size: 10px !important;
|
||||
}
|
||||
|
||||
.wplace-theme--neon .wplace-btn {
|
||||
background: var(--wplace-secondary) !important;
|
||||
border: 1px solid var(--wplace-text) !important;
|
||||
border-radius: 0 !important;
|
||||
color: var(--wplace-text) !important;
|
||||
text-shadow: 0 0 5px var(--wplace-text) !important;
|
||||
font-family: var(--wplace-font) !important;
|
||||
font-size: 9px !important;
|
||||
text-transform: uppercase !important;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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 {
|
||||
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 {
|
||||
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 {
|
||||
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 {
|
||||
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;
|
||||
border: 1px solid var(--wplace-text) !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
.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 {
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
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 {
|
||||
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;
|
||||
font-family: var(--wplace-font) !important;
|
||||
}
|
||||
|
||||
.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 {
|
||||
color: var(--wplace-text) !important;
|
||||
text-shadow: 0 0 10px var(--wplace-text) !important;
|
||||
font-family: var(--wplace-font) !important;
|
||||
font-size: 16px !important;
|
||||
text-transform: uppercase !important;
|
||||
}
|
||||
|
||||
.wplace-theme--neon .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 {
|
||||
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;
|
||||
border: 1px solid var(--wplace-text) !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
.wplace-theme--neon .wplace-settings-select {
|
||||
background: var(--wplace-secondary) !important;
|
||||
border: 1px solid var(--wplace-text) !important;
|
||||
border-radius: 0 !important;
|
||||
color: var(--wplace-text) !important;
|
||||
font-family: var(--wplace-font) !important;
|
||||
font-size: 11px !important;
|
||||
}
|
||||
|
||||
.wplace-theme--neon .wplace-settings-section-label {
|
||||
color: var(--wplace-text) !important;
|
||||
text-shadow: 0 0 8px var(--wplace-text) !important;
|
||||
font-family: var(--wplace-font) !important;
|
||||
font-size: 12px !important;
|
||||
text-transform: uppercase !important;
|
||||
}
|
||||
|
||||
.wplace-theme--neon .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;
|
||||
}
|
||||
|
||||
.wplace-theme--neon .wplace-overlay-opacity-value {
|
||||
background: var(--wplace-secondary) !important;
|
||||
border: 1px solid var(--wplace-text) !important;
|
||||
border-radius: 0 !important;
|
||||
color: var(--wplace-text) !important;
|
||||
text-shadow: 0 0 5px var(--wplace-text) !important;
|
||||
}
|
||||
|
||||
/* Neon slider styling */
|
||||
.wplace-theme--neon .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;
|
||||
}
|
||||
|
||||
.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;
|
||||
border-radius: 0 !important;
|
||||
background: var(--wplace-slider-thumb-bg) !important;
|
||||
border: 2px solid var(--wplace-text) !important;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: 0 0 8px rgba(0, 255, 65, 0.5) !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 {
|
||||
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 {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, transparent, var(--wplace-text), transparent);
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
animation: scanline 3s linear infinite;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.wplace-theme--neon #wplace-stats-container {
|
||||
position: fixed !important;
|
||||
overflow: hidden !important;
|
||||
z-index: 9998 !important;
|
||||
}
|
||||
|
||||
.wplace-theme--neon #wplace-stats-container::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, transparent, var(--wplace-text), transparent);
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
animation: scanlineStats 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 {
|
||||
0%, 100% {
|
||||
text-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;
|
||||
}
|
||||
50% {
|
||||
text-shadow: 0 0 2px currentColor, 0 0 5px currentColor, 0 0 8px currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pixelBlink {
|
||||
0%, 50% {
|
||||
opacity: 1;
|
||||
}
|
||||
51%, 100% {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scanline {
|
||||
0% {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(400px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scanlineStats {
|
||||
0% {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(300px);
|
||||
}
|
||||
}
|
||||
|
||||
/* Resize dialog styling for neon theme */
|
||||
.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;
|
||||
font-family: 'Press Start 2P', monospace !important;
|
||||
}
|
||||
Reference in new issue
Block a user