dekun/crypto_monitor
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Center instance login form by fixing broken theme-bar layout.

Browse Source 
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
2026-07-16 08:49:23 +08:00
parent 19a4a5194d
commit 4a0b0def1d
2 changed files with 22 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/instance/templates/login.html
+20 -12
View File
@@ -2,8 +2,8 @@
<html lang="zh-CN" data-theme="dark">
<head>
<meta charset="UTF-8">
<script src="/static/instance_theme.js?v=4"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<script src="/static/instance_theme.js?v=4"></script>
<meta name="theme-color" content="#0b0d14">
<meta name="apple-mobile-web-app-title" content="{{ pwa_app_name }}">
<link rel="icon" href="/static/icons/favicon.ico" sizes="32x32">
@@ -21,11 +21,20 @@
background: #0a0a10;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
min-height: 100vh;
padding: 24px;
color: #fff;
}
.login-theme-bar {
width: 100%;
max-width: 400px;
display: flex;
justify-content: flex-end;
margin: 0 0 10px;
}
.login-box {
background: #12121a;
padding: 2.5rem;
@@ -36,7 +45,7 @@
box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.login-box h2 {
margin-bottom: 2rem;
margin-bottom: 0.75rem;
text-align: center;
font-size: 1.5rem;
background: linear-gradient(90deg, #4cc2ff, #7b42ff);
@@ -65,7 +74,7 @@
.form-group input:focus {
border-color: #4cc2ff;
}
button {
.login-box > form > button {
width: 100%;
padding: 0.9rem;
border-radius: 10px;
@@ -77,7 +86,7 @@
cursor: pointer;
transition: 0.2s;
}
button:hover {
.login-box > form > button:hover {
opacity: 0.9;
}
.flash {
@@ -93,17 +102,17 @@
text-align: center;
font-size: 0.82rem;
color: #8892b0;
margin: -0.5rem 0 1.25rem;
margin: 0 0 1.5rem;
}
.exchange-line strong {
color: #b8f5d0;
font-weight: 600;
}
</style>
<link rel="stylesheet" href="/static/instance_theme.css?v=4">
<link rel="stylesheet" href="/static/instance_theme.css?v=5">
</head>
<div class="login-theme-bar">
<body>
<div class="login-theme-bar">
<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="暗色主题">
<svg class="theme-icon" viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
@@ -116,8 +125,7 @@
</svg>
</button>
</div>
</div>
<body>
</div>
<div class="login-box">
<h2>{{ pwa_app_name }}</h2>
<p class="exchange-line">登录 · <strong>{{ exchange_display }}</strong></p>