From 40b8d3ab455f5d1e92e3d73fcba32381d28e4939 Mon Sep 17 00:00:00 2001 From: Staninna <26458805+Staninna@users.noreply.github.com> Date: Wed, 27 Aug 2025 01:13:32 +0200 Subject: [PATCH] classic light theme --- Auto-Image.js | 42 ++--- auto-image-styles.css | 2 +- themes/classic-light.css | 346 ++++++++++++++++++++++++++++++++++ themes/ocean-depths.css | 388 --------------------------------------- 4 files changed, 368 insertions(+), 410 deletions(-) create mode 100644 themes/classic-light.css delete mode 100644 themes/ocean-depths.css diff --git a/Auto-Image.js b/Auto-Image.js index 36dae3d..cedfc19 100644 --- a/Auto-Image.js +++ b/Auto-Image.js @@ -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", } diff --git a/auto-image-styles.css b/auto-image-styles.css index 61e5d63..5220478 100644 --- a/auto-image-styles.css +++ b/auto-image-styles.css @@ -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 */ diff --git a/themes/classic-light.css b/themes/classic-light.css new file mode 100644 index 0000000..9984226 --- /dev/null +++ b/themes/classic-light.css @@ -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; +} \ No newline at end of file diff --git a/themes/ocean-depths.css b/themes/ocean-depths.css deleted file mode 100644 index 485d5cf..0000000 --- a/themes/ocean-depths.css +++ /dev/null @@ -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; -} \ No newline at end of file