style: 統一後台品牌視覺
This commit is contained in:
@@ -23,8 +23,8 @@ button, input, select, textarea { font: inherit; }
|
||||
button, .button { min-height: 42px; }
|
||||
|
||||
.admin-topbar { position: sticky; z-index: 20; top: 0; min-height: 68px; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; color: var(--color-text-inverse); background: var(--color-bg); border-bottom: 1px solid rgba(255, 204, 0, .3); }
|
||||
.admin-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 900; letter-spacing: .06em; }
|
||||
.admin-brand i { color: var(--color-brand); }
|
||||
.admin-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
|
||||
.admin-brand__logo { display: block; width: clamp(190px, 20vw, 250px); max-height: 46px; height: auto; object-fit: contain; }
|
||||
.admin-brand small { padding-left: 10px; color: var(--color-brand-light); border-left: 1px solid rgba(255, 255, 255, .25); font-weight: 500; }
|
||||
.admin-topbar__actions { display: flex; align-items: center; gap: 18px; font-size: .9rem; }
|
||||
.admin-topbar__actions a { color: var(--color-brand-light); text-decoration: none; }
|
||||
@@ -109,11 +109,14 @@ tbody tr:hover { background: rgba(255, 204, 0, .06); }
|
||||
.inline-form label { display: flex; flex-direction: column; gap: 6px; color: var(--color-text-muted); font-size: .82rem; font-weight: 700; }
|
||||
|
||||
.auth-page { display: grid; place-items: center; padding: 24px; color: var(--color-text-inverse); background: var(--color-bg); background-image: radial-gradient(circle at 20% 10%, rgba(255, 204, 0, .16), transparent 32%), radial-gradient(circle at 80% 90%, rgba(252, 238, 167, .1), transparent 34%); }
|
||||
.auth-card { width: min(460px, 100%); padding: clamp(28px, 6vw, 48px); border: 1px solid rgba(255, 204, 0, .35); border-radius: 20px; background: var(--color-bg-raised); box-shadow: 0 26px 80px rgba(0, 0, 0, .45); }
|
||||
.auth-card { position: relative; width: min(500px, 100%); padding: clamp(28px, 6vw, 48px); overflow: hidden; border: 1px solid rgba(255, 204, 0, .35); border-radius: 20px; background: var(--color-bg-raised); box-shadow: 0 26px 80px rgba(0, 0, 0, .45); }
|
||||
.auth-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, transparent, var(--color-brand), transparent); }
|
||||
.auth-brand { display: flex; flex-direction: column; align-items: center; gap: 9px; width: 100%; margin: 0 auto 24px; color: var(--color-brand-light); text-decoration: none; }
|
||||
.auth-brand img { display: block; width: min(340px, 92%); height: auto; object-fit: contain; }
|
||||
.auth-brand span { font-size: .68rem; font-weight: 800; letter-spacing: .2em; text-align: center; }
|
||||
.auth-card h1 { margin: 7px 0 10px; color: var(--color-text-inverse); text-align: center; }
|
||||
.auth-card > p { color: var(--color-brand-light); text-align: center; }
|
||||
.auth-card .eyebrow { color: var(--color-brand); }
|
||||
.auth-gem { color: var(--color-brand); font-size: 2.5rem; text-align: center; }
|
||||
.auth-card form { display: flex; flex-direction: column; gap: 17px; margin-top: 28px; }
|
||||
.auth-card label { display: flex; flex-direction: column; gap: 7px; color: var(--color-text-inverse); font-size: .9rem; }
|
||||
.auth-card input { color: var(--color-text-inverse); background: var(--color-bg); border-color: rgba(255, 204, 0, .36); }
|
||||
@@ -128,6 +131,7 @@ tbody tr:hover { background: rgba(255, 204, 0, .06); }
|
||||
@media (max-width: 760px) {
|
||||
.admin-topbar { padding-inline: 16px; }
|
||||
.admin-brand small, .admin-topbar__actions span { display: none; }
|
||||
.admin-brand__logo { width: min(190px, 48vw); }
|
||||
.admin-shell { display: block; }
|
||||
.admin-sidebar { position: fixed; z-index: 30; inset: 68px auto 0 0; width: min(290px, 86vw); transform: translateX(-105%); transition: transform .2s ease; overflow-y: auto; }
|
||||
.admin-sidebar.is-open { transform: translateX(0); }
|
||||
|
||||
+4
-1
@@ -206,7 +206,10 @@ function render_header(string $title, string $active = ''): void
|
||||
</head>
|
||||
<body>
|
||||
<header class="admin-topbar">
|
||||
<a class="admin-brand" href="index.php"><i class="bi bi-gem"></i><span>水晶男孩推廣部</span><small>Admin</small></a>
|
||||
<a class="admin-brand" href="index.php" aria-label="水晶男孩推廣部後台首頁">
|
||||
<img class="admin-brand__logo" src="../assets/images/logov.svg" alt="SECHSKIES 水晶男孩推廣部">
|
||||
<small>Admin</small>
|
||||
</a>
|
||||
<div class="admin-topbar__actions"><span><?= h($_SESSION['admin_name'] ?? '') ?></span><a href="../index.html" target="_blank" rel="noopener">查看前臺</a><a href="logout.php">登出</a></div>
|
||||
</header>
|
||||
<div class="admin-shell">
|
||||
|
||||
+1
-1
@@ -24,5 +24,5 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
|
||||
}
|
||||
?>
|
||||
<!doctype html><html lang="zh-Hant"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>管理登入｜水晶男孩推廣部</title><link rel="stylesheet" href="assets/admin.css"></head>
|
||||
<body class="auth-page"><main class="auth-card"><div class="auth-gem">◆</div><p class="eyebrow">SECHSKIES ARCHIVE</p><h1>推廣部管理登入</h1><p>把散落的記憶，好好收進同一片黃色海洋。</p><?php if (isset($_GET['setup'])): ?><div class="notice notice--success">管理者建立完成，請登入。</div><?php endif; ?><?php if ($error): ?><div class="notice notice--error"><?= h($error) ?></div><?php endif; ?>
|
||||
<body class="auth-page"><main class="auth-card"><a class="auth-brand" href="../index.html" aria-label="返回水晶男孩推廣部前台"><img src="../assets/images/logov.svg" alt="SECHSKIES 水晶男孩推廣部"><span>CONTENT MANAGEMENT SYSTEM</span></a><p class="eyebrow">SECHSKIES ARCHIVE</p><h1>推廣部管理登入</h1><p>把散落的記憶，好好收進同一片黃色海洋。</p><?php if (isset($_GET['setup'])): ?><div class="notice notice--success">管理者建立完成，請登入。</div><?php endif; ?><?php if ($error): ?><div class="notice notice--error"><?= h($error) ?></div><?php endif; ?>
|
||||
<form method="post"><input type="hidden" name="csrf" value="<?= h(csrf_token()) ?>"><label>管理者帳號<input name="username" required autocomplete="username" autofocus></label><label>密碼<input name="password" type="password" required autocomplete="current-password"></label><button class="button button--primary" type="submit">登入後臺</button><a class="text-link" href="setup.php">第一次使用？初始化系統</a></form></main></body></html>
|
||||
|
||||
+1
-1
@@ -32,5 +32,5 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && $error === '') {
|
||||
}
|
||||
?>
|
||||
<!doctype html><html lang="zh-Hant"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>初始化後臺</title><link rel="stylesheet" href="assets/admin.css"></head>
|
||||
<body class="auth-page"><main class="auth-card"><p class="eyebrow">FIRST-TIME SETUP</p><h1>建立第一位管理者</h1><p>水晶男孩推廣部內容管理系統</p><?php if ($error): ?><div class="notice notice--error"><?= h($error) ?></div><?php endif; ?>
|
||||
<body class="auth-page"><main class="auth-card"><a class="auth-brand" href="../index.html" aria-label="返回水晶男孩推廣部前台"><img src="../assets/images/logov.svg" alt="SECHSKIES 水晶男孩推廣部"><span>CONTENT MANAGEMENT SYSTEM</span></a><p class="eyebrow">FIRST-TIME SETUP</p><h1>建立第一位管理者</h1><p>水晶男孩推廣部內容管理系統</p><?php if ($error): ?><div class="notice notice--error"><?= h($error) ?></div><?php endif; ?>
|
||||
<form method="post"><input type="hidden" name="csrf" value="<?= h(csrf_token()) ?>"><label>登入帳號<input name="username" required autocomplete="username"></label><label>顯示名稱<input name="display_name" required></label><label>電子信箱<input name="email" type="email"></label><label>登入密碼<input name="password" type="password" required minlength="10" autocomplete="new-password"></label><button class="button button--primary" type="submit">建立管理者</button></form></main></body></html>
|
||||
|
||||
Reference in New Issue
Block a user