Center instance login form by fixing broken theme-bar layout.
Move the theme toggle inside body and stack it above the form so flex no longer pushes the card to the right. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
@@ -782,7 +782,8 @@ html[data-theme="light"] .list-window-label {
|
|||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 400px;
|
max-width: 400px;
|
||||||
margin: 0 auto 10px;
|
margin: 0 0 10px;
|
||||||
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ── 交易执行 / 复盘 / 统计(index 内联样式覆盖)── */
|
/* ── 交易执行 / 复盘 / 统计(index 内联样式覆盖)── */
|
||||||
|
|||||||
@@ -2,8 +2,8 @@
|
|||||||
<html lang="zh-CN" data-theme="dark">
|
<html lang="zh-CN" data-theme="dark">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
||||||
<script src="/static/instance_theme.js?v=4"></script>
|
<script src="/static/instance_theme.js?v=4"></script>
|
||||||
|
|
||||||
<meta name="theme-color" content="#0b0d14">
|
<meta name="theme-color" content="#0b0d14">
|
||||||
<meta name="apple-mobile-web-app-title" content="{{ pwa_app_name }}">
|
<meta name="apple-mobile-web-app-title" content="{{ pwa_app_name }}">
|
||||||
<link rel="icon" href="/static/icons/favicon.ico" sizes="32x32">
|
<link rel="icon" href="/static/icons/favicon.ico" sizes="32x32">
|
||||||
@@ -21,11 +21,20 @@
|
|||||||
background: #0a0a10;
|
background: #0a0a10;
|
||||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
height: 100vh;
|
min-height: 100vh;
|
||||||
|
padding: 24px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
.login-theme-bar {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 400px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
margin: 0 0 10px;
|
||||||
|
}
|
||||||
.login-box {
|
.login-box {
|
||||||
background: #12121a;
|
background: #12121a;
|
||||||
padding: 2.5rem;
|
padding: 2.5rem;
|
||||||
@@ -36,7 +45,7 @@
|
|||||||
box-shadow: 0 8px 24px rgba(0,0,0,0.3);
|
box-shadow: 0 8px 24px rgba(0,0,0,0.3);
|
||||||
}
|
}
|
||||||
.login-box h2 {
|
.login-box h2 {
|
||||||
margin-bottom: 2rem;
|
margin-bottom: 0.75rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
background: linear-gradient(90deg, #4cc2ff, #7b42ff);
|
background: linear-gradient(90deg, #4cc2ff, #7b42ff);
|
||||||
@@ -65,7 +74,7 @@
|
|||||||
.form-group input:focus {
|
.form-group input:focus {
|
||||||
border-color: #4cc2ff;
|
border-color: #4cc2ff;
|
||||||
}
|
}
|
||||||
button {
|
.login-box > form > button {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 0.9rem;
|
padding: 0.9rem;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
@@ -77,7 +86,7 @@
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: 0.2s;
|
transition: 0.2s;
|
||||||
}
|
}
|
||||||
button:hover {
|
.login-box > form > button:hover {
|
||||||
opacity: 0.9;
|
opacity: 0.9;
|
||||||
}
|
}
|
||||||
.flash {
|
.flash {
|
||||||
@@ -93,16 +102,16 @@
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 0.82rem;
|
font-size: 0.82rem;
|
||||||
color: #8892b0;
|
color: #8892b0;
|
||||||
margin: -0.5rem 0 1.25rem;
|
margin: 0 0 1.5rem;
|
||||||
}
|
}
|
||||||
.exchange-line strong {
|
.exchange-line strong {
|
||||||
color: #b8f5d0;
|
color: #b8f5d0;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<link rel="stylesheet" href="/static/instance_theme.css?v=4">
|
<link rel="stylesheet" href="/static/instance_theme.css?v=5">
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
|
<body>
|
||||||
<div class="login-theme-bar">
|
<div class="login-theme-bar">
|
||||||
<div class="theme-toggle instance-theme-toggle" role="group" aria-label="界面主题">
|
<div class="theme-toggle instance-theme-toggle" role="group" aria-label="界面主题">
|
||||||
<button type="button" class="theme-toggle-btn is-active" data-theme-value="dark" aria-pressed="true" title="暗色主题">
|
<button type="button" class="theme-toggle-btn is-active" data-theme-value="dark" aria-pressed="true" title="暗色主题">
|
||||||
@@ -117,7 +126,6 @@
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<body>
|
|
||||||
<div class="login-box">
|
<div class="login-box">
|
||||||
<h2>{{ pwa_app_name }}</h2>
|
<h2>{{ pwa_app_name }}</h2>
|
||||||
<p class="exchange-line">登录 · <strong>{{ exchange_display }}</strong></p>
|
<p class="exchange-line">登录 · <strong>{{ exchange_display }}</strong></p>
|
||||||
|
|||||||
Reference in New Issue
Block a user