mirror of
https://github.com/tiennm99/WPlace-AutoBOT.git
synced 2026-10-13 20:14:24 +00:00
classic light theme
This commit is contained in:
Staninna committed
1 parent
66e349b085
commit
40b8d3ab45
4 files changed
+368
-410
No files matched your search
+21
-21
@@ -146,6 +146,27 @@
|
||||
pixelBlink: false,
|
||||
},
|
||||
},
|
||||
"Classic Light": {
|
||||
primary: "#ffffff",
|
||||
secondary: "#f8f9fa",
|
||||
accent: "#e9ecef",
|
||||
text: "#212529",
|
||||
highlight: "#6f42c1",
|
||||
success: "#28a745",
|
||||
error: "#dc3545",
|
||||
warning: "#ffc107",
|
||||
fontFamily: "'Segoe UI', Roboto, sans-serif",
|
||||
borderRadius: "12px",
|
||||
borderStyle: "solid",
|
||||
borderWidth: "1px",
|
||||
boxShadow: "0 8px 32px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.08)",
|
||||
backdropFilter: "blur(10px)",
|
||||
animations: {
|
||||
glow: false,
|
||||
scanline: false,
|
||||
pixelBlink: false,
|
||||
},
|
||||
},
|
||||
"Neon Retro": {
|
||||
primary: "#1a1a2e",
|
||||
secondary: "#16213e",
|
||||
@@ -170,27 +191,6 @@
|
||||
pixelBlink: true,
|
||||
},
|
||||
},
|
||||
"Ocean Depths": {
|
||||
primary: "#0d1b2a",
|
||||
secondary: "#1b263b",
|
||||
accent: "#415a77",
|
||||
text: "#e0e1dd",
|
||||
highlight: "#00b4d8",
|
||||
success: "#06ffa5",
|
||||
error: "#ff006e",
|
||||
warning: "#ffbe0b",
|
||||
fontFamily: "'Inter', 'Segoe UI', sans-serif",
|
||||
borderRadius: "8px",
|
||||
borderStyle: "solid",
|
||||
borderWidth: "1px",
|
||||
boxShadow: "0 8px 32px rgba(0, 180, 216, 0.2), 0 0 0 1px rgba(224, 225, 221, 0.1)",
|
||||
backdropFilter: "blur(12px)",
|
||||
animations: {
|
||||
glow: false,
|
||||
scanline: false,
|
||||
pixelBlink: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
currentTheme: "Classic Autobot",
|
||||
}
|
||||
|
||||
@@ -9,8 +9,8 @@
|
||||
|
||||
/* Import theme files - classic is default */
|
||||
@import url('https://staninna.github.io/WPlace-AutoBOT/themes/classic.css');
|
||||
@import url('https://staninna.github.io/WPlace-AutoBOT/themes/classic-light.css');
|
||||
@import url('https://staninna.github.io/WPlace-AutoBOT/themes/neon.css');
|
||||
@import url('https://staninna.github.io/WPlace-AutoBOT/themes/ocean-depths.css');
|
||||
|
||||
/* Default :root CSS variables for 100% classic theme compliance */
|
||||
/* These ensure the bot works perfectly even if theme files fail to load */
|
||||
|
||||
@@ -0,0 +1,346 @@
|
||||
/* 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 */
|
||||
.wplace-theme--classic-light #wplace-stats-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 8px 32px rgba(0, 0, 0, 0.15) !important;
|
||||
font-family: 'Segoe UI', Roboto, sans-serif !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;
|
||||
}
|
||||
|
||||
/* 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-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;
|
||||
}
|
||||
|
||||
/* 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-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%);
|
||||
}
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
@@ -1,388 +0,0 @@
|
||||
/* WPlace Auto-Image Bot - Ocean Depths Theme */
|
||||
/* Deep sea aesthetic with calming blues, subtle waves, and marine colors */
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
|
||||
|
||||
.wplace-theme--ocean-depths {
|
||||
/* === CORE COLORS === */
|
||||
--wplace-primary: #0d1b2a; /* Deep ocean dark blue */
|
||||
--wplace-secondary: #1b263b; /* Mid-ocean blue */
|
||||
--wplace-accent: #415a77; /* Lighter ocean blue */
|
||||
--wplace-text: #e0e1dd; /* Pearl white */
|
||||
--wplace-highlight: #00b4d8; /* Bright cyan */
|
||||
--wplace-success: #06ffa5; /* Sea foam green */
|
||||
--wplace-error: #ff006e; /* Deep coral pink */
|
||||
--wplace-warning: #ffbe0b; /* Golden 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, 180, 216, 0.2), 0 0 0 1px rgba(224, 225, 221, 0.1);
|
||||
--wplace-backdrop: blur(12px);
|
||||
--wplace-font: 'Inter', 'Segoe UI', sans-serif;
|
||||
|
||||
/* === EXTENDED COLOR PALETTE === */
|
||||
/* Icon colors */
|
||||
--wplace-icon-primary: #00b4d8; /* Bright ocean blue */
|
||||
--wplace-icon-secondary: #90e0ef; /* Light cyan */
|
||||
--wplace-icon-palette: #06ffa5; /* Sea foam green */
|
||||
|
||||
/* Additional UI colors */
|
||||
--wplace-danger: #ff006e; /* Deep coral */
|
||||
--wplace-danger-dark: #d90368; /* Darker coral */
|
||||
--wplace-muted-text: rgba(224, 225, 221, 0.7);
|
||||
--wplace-highlight-secondary: #caf0f8;
|
||||
|
||||
/* Text variants */
|
||||
--wplace-text-secondary: rgba(224, 225, 221, 0.9);
|
||||
--wplace-text-muted: rgba(224, 225, 221, 0.7);
|
||||
--wplace-text-dim: rgba(224, 225, 221, 0.6);
|
||||
--wplace-text-faded: rgba(224, 225, 221, 0.8);
|
||||
|
||||
/* Background variants with ocean blues */
|
||||
--wplace-bg-input: rgba(0, 180, 216, 0.15);
|
||||
--wplace-bg-subtle: rgba(65, 90, 119, 0.2);
|
||||
--wplace-bg-faint: rgba(65, 90, 119, 0.12);
|
||||
--wplace-bg-ghost: rgba(65, 90, 119, 0.08);
|
||||
--wplace-bg-whisper: rgba(65, 90, 119, 0.05);
|
||||
|
||||
/* Border variants */
|
||||
--wplace-border-subtle: rgba(144, 224, 239, 0.3);
|
||||
--wplace-border-faint: rgba(144, 224, 239, 0.2);
|
||||
--wplace-border-ghost: rgba(144, 224, 239, 0.15);
|
||||
--wplace-border-ultra-faint: rgba(144, 224, 239, 0.08);
|
||||
|
||||
/* Shadow variants with ocean blues */
|
||||
--wplace-shadow-drag: 0 12px 40px rgba(0, 180, 216, 0.4), 0 0 0 2px rgba(144, 224, 239, 0.3);
|
||||
--wplace-shadow-notification: 0 4px 12px rgba(0, 180, 216, 0.3);
|
||||
--wplace-shadow-slider-thumb: 0 3px 6px rgba(0, 180, 216, 0.4), 0 0 0 2px var(--wplace-icon-primary);
|
||||
--wplace-shadow-slider-hover: 0 4px 8px rgba(0, 180, 216, 0.5), 0 0 0 3px var(--wplace-icon-primary);
|
||||
|
||||
/* Animation colors */
|
||||
--wplace-pulse-start: rgba(6, 255, 165, 0.7);
|
||||
--wplace-pulse-mid: rgba(6, 255, 165, 0);
|
||||
--wplace-pulse-end: rgba(6, 255, 165, 0);
|
||||
|
||||
/* Slider colors */
|
||||
--wplace-slider-thumb-bg: #00b4d8;
|
||||
--wplace-slider-track-bg: linear-gradient(to right, #00b4d8 0%, #90e0ef 100%);
|
||||
}
|
||||
|
||||
/* === COMPONENT STYLING === */
|
||||
|
||||
/* Main container with ocean wave effect */
|
||||
.wplace-theme--ocean-depths #wplace-image-bot-container {
|
||||
background: linear-gradient(135deg, #0d1b2a 0%, #1b263b 100%) !important;
|
||||
color: var(--wplace-text) !important;
|
||||
border: 1px solid rgba(0, 180, 216, 0.3) !important;
|
||||
border-radius: 8px !important;
|
||||
box-shadow: 0 8px 32px rgba(0, 180, 216, 0.2), 0 0 0 1px rgba(224, 225, 221, 0.1) !important;
|
||||
font-family: 'Inter', 'Segoe UI', sans-serif !important;
|
||||
backdrop-filter: blur(12px) !important;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Subtle wave animation overlay */
|
||||
.wplace-theme--ocean-depths #wplace-image-bot-container::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background:
|
||||
radial-gradient(circle at 20% 80%, rgba(0, 180, 216, 0.1) 0%, transparent 50%),
|
||||
radial-gradient(circle at 80% 20%, rgba(144, 224, 239, 0.08) 0%, transparent 50%),
|
||||
radial-gradient(circle at 40% 40%, rgba(6, 255, 165, 0.05) 0%, transparent 50%);
|
||||
border-radius: 8px;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
/* Stats container */
|
||||
.wplace-theme--ocean-depths #wplace-stats-container {
|
||||
background: linear-gradient(135deg, #0d1b2a 0%, #1b263b 100%) !important;
|
||||
border: 1px solid rgba(0, 180, 216, 0.3) !important;
|
||||
border-radius: 8px !important;
|
||||
box-shadow: 0 8px 32px rgba(0, 180, 216, 0.2) !important;
|
||||
font-family: 'Inter', 'Segoe UI', sans-serif !important;
|
||||
}
|
||||
|
||||
/* Settings dialog */
|
||||
.wplace-theme--ocean-depths #wplace-settings-container {
|
||||
background: linear-gradient(135deg, #0d1b2a 0%, #1b263b 100%) !important;
|
||||
border: 1px solid rgba(0, 180, 216, 0.3) !important;
|
||||
border-radius: 8px !important;
|
||||
box-shadow: 0 16px 48px rgba(0, 180, 216, 0.3), 0 0 0 1px rgba(224, 225, 221, 0.1) !important;
|
||||
font-family: 'Inter', 'Segoe UI', sans-serif !important;
|
||||
backdrop-filter: blur(16px) !important;
|
||||
}
|
||||
|
||||
/* Resize dialog */
|
||||
.wplace-theme--ocean-depths .resize-container {
|
||||
background: linear-gradient(135deg, #0d1b2a 0%, #1b263b 100%) !important;
|
||||
border: 1px solid rgba(0, 180, 216, 0.3) !important;
|
||||
border-radius: 8px !important;
|
||||
box-shadow: 0 16px 48px rgba(0, 180, 216, 0.3), 0 0 0 1px rgba(224, 225, 221, 0.1) !important;
|
||||
font-family: 'Inter', 'Segoe UI', sans-serif !important;
|
||||
backdrop-filter: blur(16px) !important;
|
||||
}
|
||||
|
||||
/* Headers with ocean gradient */
|
||||
.wplace-theme--ocean-depths .wplace-header {
|
||||
background: linear-gradient(135deg, #1b263b 0%, #415a77 100%) !important;
|
||||
color: var(--wplace-text) !important;
|
||||
border-bottom: 1px solid rgba(0, 180, 216, 0.3) !important;
|
||||
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
|
||||
}
|
||||
|
||||
/* Settings header */
|
||||
.wplace-theme--ocean-depths .wplace-settings-header {
|
||||
background: linear-gradient(135deg, #1b263b 0%, #415a77 100%) !important;
|
||||
border-bottom: 1px solid rgba(0, 180, 216, 0.3) !important;
|
||||
}
|
||||
|
||||
.wplace-theme--ocean-depths .wplace-settings-title {
|
||||
color: var(--wplace-text) !important;
|
||||
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
|
||||
}
|
||||
|
||||
.wplace-theme--ocean-depths .wplace-settings-close-btn {
|
||||
background: rgba(65, 90, 119, 0.3) !important;
|
||||
border: 1px solid rgba(0, 180, 216, 0.4) !important;
|
||||
border-radius: 6px !important;
|
||||
color: var(--wplace-text) !important;
|
||||
transition: all 0.3s ease !important;
|
||||
}
|
||||
|
||||
.wplace-theme--ocean-depths .wplace-settings-close-btn:hover {
|
||||
background: rgba(255, 0, 110, 0.2) !important;
|
||||
border-color: var(--wplace-error) !important;
|
||||
box-shadow: 0 0 12px rgba(255, 0, 110, 0.3) !important;
|
||||
}
|
||||
|
||||
/* Section titles */
|
||||
.wplace-theme--ocean-depths .wplace-section-title {
|
||||
color: var(--wplace-highlight) !important;
|
||||
text-shadow: 0 0 8px rgba(0, 180, 216, 0.3) !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
/* Buttons with ocean styling */
|
||||
.wplace-theme--ocean-depths .wplace-btn {
|
||||
background: linear-gradient(135deg, #1b263b 0%, #415a77 100%) !important;
|
||||
border: 1px solid rgba(0, 180, 216, 0.4) !important;
|
||||
border-radius: 8px !important;
|
||||
color: var(--wplace-text) !important;
|
||||
font-family: 'Inter', 'Segoe UI', sans-serif !important;
|
||||
font-weight: 500 !important;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
||||
}
|
||||
|
||||
.wplace-theme--ocean-depths .wplace-btn:hover:not(:disabled) {
|
||||
background: linear-gradient(135deg, #415a77 0%, #778da9 100%) !important;
|
||||
box-shadow: 0 8px 24px rgba(0, 180, 216, 0.3), 0 0 0 1px rgba(0, 180, 216, 0.5) !important;
|
||||
transform: translateY(-1px) !important;
|
||||
}
|
||||
|
||||
/* Button variants with ocean colors */
|
||||
.wplace-theme--ocean-depths .wplace-btn-start {
|
||||
background: linear-gradient(135deg, #06ffa5 0%, #00b4d8 100%) !important;
|
||||
color: #0d1b2a !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
.wplace-theme--ocean-depths .wplace-btn-start:hover:not(:disabled) {
|
||||
box-shadow: 0 8px 24px rgba(6, 255, 165, 0.4) !important;
|
||||
}
|
||||
|
||||
.wplace-theme--ocean-depths .wplace-btn-stop {
|
||||
background: linear-gradient(135deg, #ff006e 0%, #d90368 100%) !important;
|
||||
color: white !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
.wplace-theme--ocean-depths .wplace-btn-stop:hover:not(:disabled) {
|
||||
box-shadow: 0 8px 24px rgba(255, 0, 110, 0.4) !important;
|
||||
}
|
||||
|
||||
.wplace-theme--ocean-depths .wplace-btn-upload {
|
||||
background: rgba(65, 90, 119, 0.3) !important;
|
||||
border: 2px dashed var(--wplace-highlight) !important;
|
||||
color: var(--wplace-highlight) !important;
|
||||
}
|
||||
|
||||
.wplace-theme--ocean-depths .wplace-btn-upload:hover:not(:disabled) {
|
||||
background: rgba(0, 180, 216, 0.1) !important;
|
||||
box-shadow: 0 8px 24px rgba(0, 180, 216, 0.2) !important;
|
||||
}
|
||||
|
||||
/* Progress bars with ocean waves */
|
||||
.wplace-theme--ocean-depths .wplace-progress {
|
||||
background: rgba(13, 27, 42, 0.8) !important;
|
||||
border: 1px solid rgba(0, 180, 216, 0.3) !important;
|
||||
border-radius: 8px !important;
|
||||
}
|
||||
|
||||
.wplace-theme--ocean-depths .wplace-progress-bar {
|
||||
background: linear-gradient(90deg, #00b4d8 0%, #06ffa5 50%, #90e0ef 100%) !important;
|
||||
box-shadow: 0 0 12px rgba(0, 180, 216, 0.4) !important;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.wplace-theme--ocean-depths .wplace-progress-bar::after {
|
||||
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent) !important;
|
||||
animation: waveShimmer 2s ease-in-out infinite !important;
|
||||
}
|
||||
|
||||
/* Status indicators with ocean colors */
|
||||
.wplace-theme--ocean-depths .status-success {
|
||||
background: rgba(6, 255, 165, 0.15) !important;
|
||||
border-color: var(--wplace-success) !important;
|
||||
color: var(--wplace-success) !important;
|
||||
box-shadow: 0 0 15px rgba(6, 255, 165, 0.3) !important;
|
||||
text-shadow: 0 0 8px rgba(6, 255, 165, 0.5) !important;
|
||||
}
|
||||
|
||||
.wplace-theme--ocean-depths .status-error {
|
||||
background: rgba(255, 0, 110, 0.15) !important;
|
||||
border-color: var(--wplace-error) !important;
|
||||
color: var(--wplace-error) !important;
|
||||
box-shadow: 0 0 15px rgba(255, 0, 110, 0.3) !important;
|
||||
text-shadow: 0 0 8px rgba(255, 0, 110, 0.5) !important;
|
||||
}
|
||||
|
||||
.wplace-theme--ocean-depths .status-default {
|
||||
background: rgba(0, 180, 216, 0.15) !important;
|
||||
border-color: var(--wplace-highlight) !important;
|
||||
color: var(--wplace-highlight) !important;
|
||||
text-shadow: 0 0 5px rgba(0, 180, 216, 0.3) !important;
|
||||
}
|
||||
|
||||
.wplace-theme--ocean-depths .wplace-stat-value {
|
||||
color: var(--wplace-highlight) !important;
|
||||
text-shadow: 0 0 8px rgba(0, 180, 216, 0.3) !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
/* Sections with subtle ocean depth effect */
|
||||
.wplace-theme--ocean-depths .wplace-section {
|
||||
background: rgba(27, 38, 59, 0.4) !important;
|
||||
border: 1px solid rgba(0, 180, 216, 0.2) !important;
|
||||
border-radius: 8px !important;
|
||||
backdrop-filter: blur(8px) !important;
|
||||
}
|
||||
|
||||
.wplace-theme--ocean-depths .wplace-status-section {
|
||||
background: rgba(27, 38, 59, 0.4) !important;
|
||||
border: 1px solid rgba(0, 180, 216, 0.2) !important;
|
||||
border-radius: 8px !important;
|
||||
}
|
||||
|
||||
.wplace-theme--ocean-depths .wplace-settings-section-wrapper {
|
||||
background: rgba(27, 38, 59, 0.3) !important;
|
||||
border: 1px solid rgba(0, 180, 216, 0.2) !important;
|
||||
border-radius: 8px !important;
|
||||
}
|
||||
|
||||
/* Form controls with ocean styling */
|
||||
.wplace-theme--ocean-depths .wplace-settings-select {
|
||||
background: rgba(27, 38, 59, 0.8) !important;
|
||||
border: 1px solid rgba(0, 180, 216, 0.4) !important;
|
||||
border-radius: 8px !important;
|
||||
color: var(--wplace-text) !important;
|
||||
font-family: 'Inter', 'Segoe UI', sans-serif !important;
|
||||
box-shadow: 0 2px 8px rgba(0, 180, 216, 0.1) !important;
|
||||
}
|
||||
|
||||
.wplace-theme--ocean-depths .wplace-settings-select:focus {
|
||||
border-color: var(--wplace-highlight) !important;
|
||||
box-shadow: 0 0 0 2px rgba(0, 180, 216, 0.3) !important;
|
||||
}
|
||||
|
||||
/* Sliders with ocean wave gradient */
|
||||
.wplace-theme--ocean-depths .wplace-speed-slider {
|
||||
background: linear-gradient(to right, #00b4d8 0%, #90e0ef 100%) !important;
|
||||
border-radius: 8px !important;
|
||||
}
|
||||
|
||||
.wplace-theme--ocean-depths .wplace-overlay-opacity-slider {
|
||||
background: linear-gradient(to right, #00b4d8 0%, #90e0ef 100%) !important;
|
||||
border-radius: 8px !important;
|
||||
}
|
||||
|
||||
.wplace-theme--ocean-depths .wplace-speed-value {
|
||||
background: linear-gradient(135deg, #00b4d8 0%, #06ffa5 100%) !important;
|
||||
border-radius: 8px !important;
|
||||
color: #0d1b2a !important;
|
||||
font-weight: 600 !important;
|
||||
box-shadow: 0 4px 12px rgba(0, 180, 216, 0.3) !important;
|
||||
border: 1px solid rgba(144, 224, 239, 0.3) !important;
|
||||
}
|
||||
|
||||
/* Settings labels with ocean glow */
|
||||
.wplace-theme--ocean-depths .wplace-settings-section-label {
|
||||
color: var(--wplace-highlight) !important;
|
||||
text-shadow: 0 0 8px rgba(0, 180, 216, 0.3) !important;
|
||||
font-family: 'Inter', 'Segoe UI', sans-serif !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
/* Icon colors for ocean theme */
|
||||
.wplace-theme--ocean-depths .wplace-icon-key { color: #00b4d8; }
|
||||
.wplace-theme--ocean-depths .wplace-icon-robot { color: #00b4d8; }
|
||||
.wplace-theme--ocean-depths .wplace-icon-speed { color: #00b4d8; }
|
||||
.wplace-theme--ocean-depths .wplace-icon-bell { color: #ffbe0b; }
|
||||
.wplace-theme--ocean-depths .wplace-icon-palette { color: #06ffa5; }
|
||||
.wplace-theme--ocean-depths .wplace-icon-globe { color: #90e0ef; }
|
||||
.wplace-theme--ocean-depths .wplace-icon-eye { color: #00b4d8; }
|
||||
|
||||
/* Ocean wave animations */
|
||||
@keyframes waveShimmer {
|
||||
0% {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
50% {
|
||||
transform: translateX(200%);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(300%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes oceanPulse {
|
||||
0%, 100% {
|
||||
opacity: 0.6;
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.8;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
/* Hover effects with gentle ocean motion */
|
||||
.wplace-theme--ocean-depths .wplace-btn:hover:not(:disabled) {
|
||||
animation: oceanPulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Color swatches with ocean depth effect */
|
||||
.wplace-theme--ocean-depths .wplace-color-swatch {
|
||||
border: 1px solid rgba(0, 180, 216, 0.3) !important;
|
||||
border-radius: 6px !important;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
|
||||
}
|
||||
|
||||
.wplace-theme--ocean-depths .wplace-color-swatch:hover {
|
||||
box-shadow: 0 4px 16px rgba(0, 180, 216, 0.3) !important;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.wplace-theme--ocean-depths .wplace-stat-colors-grid {
|
||||
background: rgba(13, 27, 42, 0.6) !important;
|
||||
border-radius: 8px !important;
|
||||
border: 1px solid rgba(0, 180, 216, 0.2) !important;
|
||||
}
|
||||
Reference in new issue
Block a user