From 12d9d9cbbb3a330c16e8c81f1222a66a12e61bf4 Mon Sep 17 00:00:00 2001 From: kyuketski Date: Fri, 29 Aug 2025 21:16:54 +0300 Subject: [PATCH] style: update button radius and section layout in UI styles Updated CSS variables for button border-radius across themes and adjusted layout spacing for sections and settings footer. * Introduced `--wplace-btn-radius` for consistent button rounding in all themes. * Reduced margins and padding for `.wplace-section` and `.wplace-status-section` for tighter layout. * Added collapsible section behavior with arrow rotation and hidden controls. * Made settings footer sticky with proper background and padding. * Minor spacing and formatting fixes for better visual alignment. --- auto-image-styles.css | 53 ++++++++++++++++++++++++++++------------ themes/classic-light.css | 1 + themes/classic.css | 4 +-- 3 files changed, 40 insertions(+), 18 deletions(-) diff --git a/auto-image-styles.css b/auto-image-styles.css index 5406b16..2387556 100644 --- a/auto-image-styles.css +++ b/auto-image-styles.css @@ -8,9 +8,9 @@ /* ========================= */ /* Import theme files - classic is default */ -@import url('https://staninna.github.io/WPlace-AutoBOT/decoupled-css/themes/classic.css'); -@import url('https://staninna.github.io/WPlace-AutoBOT/decoupled-css/themes/classic-light.css'); -@import url('https://staninna.github.io/WPlace-AutoBOT/decoupled-css/themes/neon.css'); +@import url('https://skalsech.github.io/WPlace-AutoBOT/my_main/themes/classic.css'); +@import url('https://skalsech.github.io/WPlace-AutoBOT/my_main/themes/classic-light.css'); +@import url('https://skalsech.github.io/WPlace-AutoBOT/my_main/themes/neon.css'); /* Default :root CSS variables for 100% classic theme compliance */ /* These ensure the bot works perfectly even if theme files fail to load */ @@ -28,6 +28,7 @@ /* UI properties */ --wplace-radius: 12px; + --wplace-btn-radius: 16px; --wplace-border-style: solid; --wplace-border-width: 1px; --wplace-border-color: #222222; @@ -48,42 +49,42 @@ --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; - + /* 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 - defaults for classic compatibility */ --wplace-slider-thumb-bg: white; --wplace-slider-track-bg: linear-gradient(to right, var(--wplace-icon-primary) 0%, var(--wplace-icon-secondary) 100%); @@ -217,8 +218,8 @@ #wplace-stats-container { position: fixed; top: 20px; - left: 330px; - width: 280px; + left: 310px; + width: 230px; max-height: calc(100vh - 40px); padding: 0; z-index: 9997; @@ -320,14 +321,14 @@ /* Sections */ .wplace-status-section { - margin-bottom: 12px; + margin-bottom: 6px; padding: 8px; /* Theme-specific styling applied via theme files */ } .wplace-section { - margin-bottom: 12px; - padding: 12px; + margin-bottom: 6px; + padding: 8px; /* Theme-specific styling applied via theme files */ } @@ -336,13 +337,30 @@ font-weight: 600; margin-bottom: 8px; display: flex; + justify-content: space-between; align-items: center; + cursor: pointer; gap: 6px; text-transform: uppercase; letter-spacing: 1px; /* Theme-specific styling applied via theme files */ } +.wplace-section-title i.arrow { + transition: transform 0.3s ease; +} + +.wplace-section.collapsed .wplace-controls, +.wplace-section.collapsed .wplace-cooldown-control { + max-height: 0; + opacity: 0; + pointer-events: none; +} + +.wplace-section.collapsed .wplace-section-title i.arrow { + transform: rotate(-90deg); +} + /* ========================= */ /* Controls and buttons */ /* ========================= */ @@ -1384,8 +1402,11 @@ /* Settings Footer */ .wplace-settings-footer { border-top: 1px solid var(--wplace-border-ghost); - padding-top: 20px; + padding: 20px; margin-top: 10px; + position: sticky; + bottom: 0; + background: var(--wplace-secondary); } .wplace-settings-apply-btn { diff --git a/themes/classic-light.css b/themes/classic-light.css index 2322dcc..daa45db 100644 --- a/themes/classic-light.css +++ b/themes/classic-light.css @@ -14,6 +14,7 @@ /* === UI PROPERTIES === */ --wplace-radius: 8px; + --wplace-btn-radius: 12px; --wplace-border-style: solid; --wplace-border-width: 1px; --wplace-border-color: #415a77; diff --git a/themes/classic.css b/themes/classic.css index 910f449..af84216 100644 --- a/themes/classic.css +++ b/themes/classic.css @@ -12,6 +12,7 @@ --wplace-warning: #ffaa00; --wplace-radius: 12px; + --wplace-btn-radius: 16px; --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; @@ -156,7 +157,7 @@ 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); + border-radius: var(--wplace-btn-radius); font-family: var(--wplace-font); } @@ -352,7 +353,6 @@ :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,