From 66e349b0859fa096aaf618af997020611b81539b Mon Sep 17 00:00:00 2001
From: Staninna <26458805+Staninna@users.noreply.github.com>
Date: Wed, 27 Aug 2025 01:07:30 +0200
Subject: [PATCH] try new theme

---
 Auto-Image.js           |  21 +++
 auto-image-styles.css   |   1 +
 themes/ocean-depths.css | 388 ++++++++++++++++++++++++++++++++++++++++
 3 files changed, 410 insertions(+)
 create mode 100644 themes/ocean-depths.css

diff --git a/Auto-Image.js b/Auto-Image.js
index d20eba5..36dae3d 100644
--- a/Auto-Image.js
+++ b/Auto-Image.js
@@ -170,6 +170,27 @@
           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 14bf8c1..61e5d63 100644
--- a/auto-image-styles.css
+++ b/auto-image-styles.css
@@ -10,6 +10,7 @@
 /* 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/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/ocean-depths.css b/themes/ocean-depths.css
new file mode 100644
index 0000000..485d5cf
--- /dev/null
+++ b/themes/ocean-depths.css
@@ -0,0 +1,388 @@
+/* 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