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.
This commit is contained in:
kyuketski committed 2025-09-01 14:09:50 +03:00
1 parent 41d7fa8b5f
commit 12d9d9cbbb
3 files changed
+40 -18

No files matched your search

+37 -16
View File
@@ -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 {
+1
View File
@@ -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;
+2 -2
View File
@@ -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,