diff --git a/css/style.css b/css/style.css index b68e0b8..404f086 100644 --- a/css/style.css +++ b/css/style.css @@ -210,24 +210,31 @@ body::before { display: flex; align-items: center; justify-content: center; - width: 36px; - height: 36px; - border: none; - background: transparent; + width: 38px; + height: 38px; + border: 1px solid var(--border-glass); + background: var(--bg-glass-light); color: var(--text-secondary); - border-radius: var(--radius-sm); + border-radius: var(--radius-md); cursor: pointer; transition: var(--transition); } .icon-btn:hover { background: var(--bg-glass-hover); - color: var(--text-primary); + color: var(--accent-cyan); + border-color: var(--accent-cyan); + box-shadow: 0 0 12px rgba(0, 245, 212, 0.15); + transform: translateY(-1px); +} + +.icon-btn:active { + transform: translateY(0) scale(0.95); } .icon-btn svg { - width: 18px; - height: 18px; + width: 20px; + height: 20px; } .icon-btn.sm { @@ -327,8 +334,8 @@ body::before { .think-toggle input { display: none; } .think-btn { - width: 38px; - height: 38px; + width: 40px; + height: 40px; border-radius: var(--radius-md); background: var(--bg-glass-light); border: 1px solid var(--border-glass); @@ -336,25 +343,27 @@ body::before { align-items: center; justify-content: center; transition: var(--transition); - color: var(--text-muted); + color: var(--text-secondary); } .think-btn svg { - width: 18px; - height: 18px; + width: 20px; + height: 20px; } .think-toggle:not(.unavailable):hover .think-btn { border-color: var(--accent-purple); color: var(--accent-purple); - background: rgba(123, 47, 247, 0.08); + background: rgba(123, 47, 247, 0.1); + box-shadow: 0 0 12px rgba(123, 47, 247, 0.15); + transform: translateY(-1px); } .think-toggle input:checked + .think-btn { - background: rgba(123, 47, 247, 0.15); + background: linear-gradient(135deg, rgba(123, 47, 247, 0.2), rgba(0, 245, 212, 0.1)); border-color: var(--accent-purple); color: var(--accent-purple); - box-shadow: 0 0 10px rgba(123, 47, 247, 0.25); + box-shadow: 0 0 14px rgba(123, 47, 247, 0.3); } .think-toggle.unavailable .think-btn {