diff --git a/mateclaw-ui/src/views/Settings/Layout.vue b/mateclaw-ui/src/views/Settings/Layout.vue index adb14331..170364a8 100644 --- a/mateclaw-ui/src/views/Settings/Layout.vue +++ b/mateclaw-ui/src/views/Settings/Layout.vue @@ -25,10 +25,14 @@ - - @@ -278,24 +282,53 @@ function isActive(path: string) { .nav-divider { font-size: 10px; font-weight: 700; color: var(--mc-text-tertiary); text-transform: uppercase; letter-spacing: 0.1em; padding: 12px 8px 4px; margin-top: 2px; } .nav-collapse-btn { + align-self: center; + margin-top: auto; + margin-bottom: 8px; display: flex; align-items: center; justify-content: center; - width: 100%; + width: 32px; height: 32px; - margin-top: auto; - border: none; - border-top: 1px solid var(--mc-border-light); - background: transparent; - color: var(--mc-text-tertiary); + padding: 0; + border: 1px solid rgba(217, 109, 70, 0.22); + border-radius: 50%; + background: var(--mc-primary-bg); + color: var(--mc-primary); cursor: pointer; - transition: all 0.15s; flex-shrink: 0; + box-shadow: + 0 6px 16px rgba(217, 109, 70, 0.18), + 0 2px 4px rgba(217, 109, 70, 0.10), + inset 0 1px 0 rgba(255, 255, 255, 0.6); + transition: + background 0.18s ease, + color 0.18s ease, + border-color 0.18s ease, + box-shadow 0.18s ease, + transform 0.18s cubic-bezier(0.4, 0, 0.2, 1); + position: sticky; + bottom: 8px; } .nav-collapse-btn:hover { - background: var(--mc-bg-muted); - color: var(--mc-text-primary); + background: var(--mc-primary); + color: #fff; + border-color: var(--mc-primary); + box-shadow: + 0 10px 22px rgba(217, 109, 70, 0.34), + 0 3px 6px rgba(217, 109, 70, 0.20); + transform: scale(1.06); +} + +.nav-collapse-btn:active { + transform: scale(0.96); + transition-duration: 0.08s; +} + +.nav-collapse-btn:focus-visible { + outline: 2px solid var(--mc-primary); + outline-offset: 2px; } .settings-content {