移除卡片四角装饰,主题切换改为深色/浅色分段按钮
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
+19
-34
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user