移除卡片四角装饰,主题切换改为深色/浅色分段按钮

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-06-15 16:15:35 +08:00
parent a12da042cc
commit 2b383b84ce
5 changed files with 59 additions and 78 deletions
+17 -21
View File
@@ -72,17 +72,21 @@
}
.login-wrap{width:100%;max-width:400px;position:relative;z-index:1}
.theme-row{display:flex;justify-content:flex-end;margin-bottom:.75rem}
.theme-toggle{
padding:.4rem .75rem;border-radius:999px;
.theme-switch{
display:inline-flex;border-radius:999px;
border:1px solid var(--toggle-border);
background:var(--toggle-bg);color:var(--text-primary);
font-size:.78rem;cursor:pointer;
transition:box-shadow .2s;
background:var(--toggle-bg);padding:3px;gap:2px;
}
.theme-switch-btn{
padding:.38rem .75rem;border:none;border-radius:999px;
background:transparent;color:var(--text-muted);
font-size:.75rem;cursor:pointer;transition:.2s;
}
.theme-switch-btn:hover{color:var(--text-primary)}
.theme-switch-btn.active{
background:linear-gradient(135deg,var(--accent),var(--accent-2));
color:#fff;box-shadow:0 0 12px var(--btn-glow);
}
.theme-toggle:hover{box-shadow:0 0 16px var(--nav-hover-glow)}
.theme-toggle .icon-light,.theme-toggle .icon-dark{display:none}
[data-theme="dark"] .theme-toggle .icon-light{display:inline}
[data-theme="light"] .theme-toggle .icon-dark{display:inline}
.login-box{
background:var(--card-bg);
padding:2.5rem 2rem 2rem;border-radius:14px;
@@ -100,12 +104,6 @@
background:linear-gradient(90deg,transparent,var(--accent),var(--accent-2),transparent);
opacity:.75;
}
.login-corner{
position:absolute;width:16px;height:16px;
border-color:var(--accent);opacity:.5;pointer-events:none;
}
.login-corner.tl{top:12px;left:12px;border-top:2px solid;border-left:2px solid}
.login-corner.br{bottom:12px;right:12px;border-bottom:2px solid;border-right:2px solid}
.login-box h2{
margin-bottom:.35rem;text-align:center;font-size:1.45rem;font-weight:700;
letter-spacing:.04em;
@@ -163,14 +161,12 @@
</div>
<div class="login-wrap">
<div class="theme-row">
<button type="button" id="theme-toggle" class="theme-toggle" aria-label="切换主题">
<span class="icon-light"></span>
<span class="icon-dark"></span>
</button>
<div class="theme-switch" role="group" aria-label="主题模式">
<button type="button" class="theme-switch-btn" data-theme-pick="dark"></button>
<button type="button" class="theme-switch-btn" data-theme-pick="light"></button>
</div>
</div>
<div class="login-box">
<span class="login-corner tl"></span>
<span class="login-corner br"></span>
<h2>期货监控系统</h2>
<p class="login-sub">FUTURES MONITOR</p>
{% with messages = get_flashed_messages() %}