feat(#150): 登录页样式 auth.css（深色主题，对齐 cockpit/studio）

2026-08-05 02:07:44 +00:00
parent e6d94c95ba
commit 79afd967a7
1 changed files with 71 additions and 0 deletions
@@ -0,0 +1,71 @@
+/* iAOP 登录页（issue #150 / PRD 8.2）—— 深色主题，对齐 web/cockpit、web/studio 调色 */
+:root {
+  --auth-bg: #0f172a;
+  --auth-surface: #111c33;
+  --auth-surface-2: #0b1526;
+  --auth-border: #1e293b;
+  --auth-fg: #e2e8f0;
+  --auth-fg-muted: #94a3b8;
+  --auth-accent: #0ea5e9;
+  --auth-accent-2: #38bdf8;
+  --auth-danger: #ff3b30;
+  --auth-ok: #22c55e;
+}
+* { box-sizing: border-box; }
+html, body {
+  margin: 0; padding: 0; height: 100%;
+  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
+  background: var(--auth-bg); color: var(--auth-fg);
+}
+body { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
+a { color: var(--auth-accent-2); }
+
+.auth-card {
+  width: 360px; max-width: 92vw;
+  background: var(--auth-surface);
+  border: 1px solid var(--auth-border);
+  border-radius: 10px;
+  padding: 28px 26px 22px;
+  box-shadow: 0 10px 40px rgba(0,0,0,0.45);
+}
+.auth-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
+.auth-logo {
+  width: 30px; height: 30px; border-radius: 7px;
+  background: linear-gradient(135deg, var(--auth-accent), var(--auth-accent-2));
+  display: flex; align-items: center; justify-content: center;
+  font-weight: 700; color: #fff; font-size: 16px;
+}
+.auth-brand h1 { margin: 0; font-size: 17px; color: var(--auth-accent-2); font-weight: 600; }
+.auth-sub { color: var(--auth-fg-muted); font-size: 12px; margin: 4px 0 22px; }
+
+.field { margin-bottom: 16px; }
+.field label { display: block; font-size: 12px; color: var(--auth-fg-muted); margin-bottom: 6px; }
+.field input {
+  width: 100%; padding: 10px 12px;
+  background: var(--auth-surface-2);
+  border: 1px solid var(--auth-border);
+  border-radius: 7px; color: var(--auth-fg); font-size: 14px;
+  outline: none; transition: border-color .15s;
+}
+.field input:focus { border-color: var(--auth-accent); }
+.field input[aria-invalid="true"] { border-color: var(--auth-danger); }
+
+.auth-actions { display: flex; gap: 10px; margin-top: 6px; }
+.btn {
+  flex: 1; padding: 10px 16px; border: none; border-radius: 7px;
+  font-size: 14px; cursor: pointer; font-weight: 500;
+}
+.btn-primary { background: var(--auth-accent); color: #fff; }
+.btn-primary:disabled { opacity: .5; cursor: not-allowed; }
+.btn-ghost { background: transparent; color: var(--auth-fg-muted); border: 1px solid var(--auth-border); flex: 0 0 auto; }
+
+.alert {
+  font-size: 12px; padding: 8px 10px; border-radius: 6px; margin-bottom: 14px;
+  display: none;
+}
+.alert.show { display: block; }
+.alert-error { background: rgba(255,59,48,0.12); color: var(--auth-danger); border: 1px solid rgba(255,59,48,0.3); }
+.alert-ok { background: rgba(34,197,94,0.12); color: var(--auth-ok); border: 1px solid rgba(34,197,94,0.3); }
+
+.auth-foot { margin-top: 18px; font-size: 11px; color: var(--auth-fg-muted); text-align: center; line-height: 1.6; }
+.role-hint { margin-top: 14px; font-size: 11px; color: var(--auth-fg-muted); background: var(--auth-surface-2); border: 1px dashed var(--auth-border); border-radius: 6px; padding: 8px 10px; }