diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css index add61c2..7bcf706 100644 --- a/frontend/src/assets/main.css +++ b/frontend/src/assets/main.css @@ -136,9 +136,6 @@ --gradient-bar-success-vertical: linear-gradient(180deg, var(--color-primary), var(--color-primary-light)); --gradient-bar-neutral-vertical: linear-gradient(180deg, var(--color-sky), var(--color-sky-light)); --gradient-nav-active: linear-gradient(135deg, var(--color-primary-a18), var(--color-primary-light-a12)); - --gradient-btn-primary: linear-gradient(180deg, var(--color-primary-bright) 0%, var(--color-primary) 50%, var(--color-primary-dark) 100%); - --gradient-btn-danger: linear-gradient(180deg, var(--color-danger-light) 0%, var(--color-error) 50%, var(--color-error-dark) 100%); - --gradient-btn-shine: linear-gradient(180deg, var(--color-white-a40) 0%, var(--color-white-a10) 100%); --gradient-stats-green: linear-gradient(90deg, var(--color-primary), var(--color-primary-light)); --gradient-stats-aqua: linear-gradient(90deg, var(--color-aqua), var(--color-aqua-light)); --gradient-stats-orange: linear-gradient(90deg, var(--color-orange), var(--color-yellow)); @@ -212,43 +209,51 @@ input, textarea, select { box-shadow: var(--shadow-glass); } -/* Primary glossy button */ +/* Primary button */ .btn-primary { - background: var(--gradient-btn-primary); - border: 1px solid var(--color-primary-border); + background: var(--color-primary-a18); + border: 1px solid var(--color-primary-a40); border-radius: var(--radius-sm); - color: var(--color-white); + color: var(--color-primary-border); padding: 10px 20px; font-weight: 600; font-size: 14px; - position: relative; - overflow: hidden; + line-height: 1.2; cursor: pointer; - transition: all 0.2s; + transition: + background-color 0.18s ease, + border-color 0.18s ease, + box-shadow 0.18s ease, + transform 0.18s ease; display: inline-flex; align-items: center; + justify-content: center; gap: 6px; -} -.btn-primary::before { - content: ''; - position: absolute; - top: 0; left: 0; right: 0; - height: 50%; - background: var(--gradient-btn-shine); - border-radius: 8px 8px 0 0; - pointer-events: none; + box-shadow: 0 2px 8px var(--color-primary-a08); + backdrop-filter: blur(8px); } .btn-primary:hover { + background: var(--color-primary-a25); + border-color: var(--color-primary-a50); transform: translateY(-1px); - box-shadow: 0 6px 20px var(--color-primary-a40); + box-shadow: 0 8px 18px var(--color-primary-a15); +} +.btn-primary:focus-visible { + box-shadow: 0 0 0 3px var(--color-primary-a20), 0 2px 8px var(--color-primary-a08); } .btn-primary:active { + background: var(--color-primary-a30); transform: translateY(0); + box-shadow: 0 1px 4px var(--color-primary-a12); } .btn-primary:disabled { - opacity: 0.5; + background: var(--color-slate-500-a10); + border-color: var(--color-slate-500-a20); + color: var(--color-text-secondary); + opacity: 0.7; cursor: not-allowed; transform: none; + box-shadow: none; } .btn-sm { @@ -279,22 +284,49 @@ input, textarea, select { /* Danger button */ .btn-danger { - background: var(--gradient-btn-danger); - border: 1px solid var(--color-error-border); + background: var(--color-danger-bg-a90); + border: 1px solid var(--color-danger-light); border-radius: var(--radius-sm); - color: var(--color-white); + color: var(--color-danger-text); padding: 10px 20px; font-weight: 600; font-size: 14px; + line-height: 1.2; cursor: pointer; - transition: all 0.2s; + transition: + background-color 0.18s ease, + border-color 0.18s ease, + box-shadow 0.18s ease, + transform 0.18s ease; display: inline-flex; align-items: center; + justify-content: center; gap: 6px; + box-shadow: 0 2px 8px var(--color-error-a10); + backdrop-filter: blur(8px); } .btn-danger:hover { + background: var(--color-danger-bg-a95); + border-color: var(--color-error-a30); transform: translateY(-1px); - box-shadow: 0 6px 20px var(--color-error-a40); + box-shadow: 0 8px 18px var(--color-error-a12); +} +.btn-danger:focus-visible { + box-shadow: 0 0 0 3px var(--color-error-a20), 0 2px 8px var(--color-error-a10); +} +.btn-danger:active { + background: var(--color-danger-pale); + transform: translateY(0); + box-shadow: 0 1px 4px var(--color-error-a12); +} +.btn-danger:disabled { + background: var(--color-slate-500-a10); + border-color: var(--color-slate-500-a20); + color: var(--color-text-secondary); + opacity: 0.7; + cursor: not-allowed; + transform: none; + box-shadow: none; } /* Ghost button */