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

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
+19 -34
View File
@@ -128,19 +128,22 @@
.site-header{text-align:center;padding:1.5rem 1rem 1.25rem;border-bottom:1px solid var(--border-header);position:relative}
.site-title{font-size:1.75rem;font-weight:700;color:var(--text-title);margin-bottom:1.65rem;line-height:1.3}
.header-tools{position:absolute;top:1rem;left:1.5rem;display:flex;gap:.5rem;align-items:center}
.theme-toggle{
display:flex;align-items:center;gap:.35rem;
padding:.4rem .75rem;border-radius:8px;
border:1px solid var(--toggle-border);
background:var(--toggle-bg);
color:var(--text-primary);
font-size:.78rem;cursor:pointer;
transition:.2s;
.theme-switch{
display:inline-flex;align-items:center;
border-radius:999px;border:1px solid var(--toggle-border);
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;
white-space:nowrap;
}
.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{border-color:var(--accent);color:var(--accent)}
.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}
.site-nav{display:flex;justify-content:center;gap:.45rem;flex-wrap:wrap}
.site-nav a{
padding:.55rem 1.15rem;border-radius:8px;
@@ -183,14 +186,6 @@
background:linear-gradient(90deg,transparent,var(--accent),var(--accent-2),transparent);
opacity:.55;pointer-events:none;
}
.card-corner{
position:absolute;width:18px;height:18px;pointer-events:none;z-index:0;
border-color:var(--accent);opacity:.35;
}
.card-corner.tl{top:10px;left:10px;border-top:2px solid;border-left:2px solid}
.card-corner.tr{top:10px;right:10px;border-top:2px solid;border-right:2px solid}
.card-corner.bl{bottom:10px;left:10px;border-bottom:2px solid;border-left:2px solid}
.card-corner.br{bottom:10px;right:10px;border-bottom:2px solid;border-right:2px solid}
.card > *{position:relative;z-index:1}
.card h2{
font-size:1.15rem;margin-bottom:1rem;color:var(--text-label);
@@ -432,10 +427,10 @@
<div class="page-wrap">
<header class="site-header">
<div class="header-tools">
<button type="button" id="theme-toggle" class="theme-toggle" data-active="dark" 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="user-bar">{{ session.username or '用户' }}<a href="{{ url_for('logout') }}">退出</a></div>
<h1 class="site-title">国内期货 · 交易监控 + 复盘<span class="site-title-sub">FUTURES MONITOR SYSTEM</span></h1>
@@ -456,16 +451,6 @@
</main>
</div>
<script src="{{ url_for('static', filename='js/symbol.js') }}"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
document.querySelectorAll('.card').forEach(function (card) {
if (card.querySelector('.card-corner')) return;
var html = '<span class="card-corner tl"></span><span class="card-corner tr"></span>' +
'<span class="card-corner bl"></span><span class="card-corner br"></span>';
card.insertAdjacentHTML('afterbegin', html);
});
});
</script>
{% block extra_js %}{% endblock %}
</body>
</html>