/* 登录页 · 多风格切换（热带天堂 / 仪表盘 / 材料设计） * * 由登录页右上角小图标循环切换；class 挂在 上： * login-tropical / login-dashboard / login-material。 */ /* 切换图标基础样式：不依赖任何主题，原版深色登录页下也保持整齐 */ .login-brand-copy { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .login-style-toggle { display: grid; width: 26px; height: 26px; flex: 0 0 auto; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.88); cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.22); transition: transform 0.18s ease, background 0.2s ease; } .login-style-toggle svg { width: 15px; height: 15px; } .login-style-toggle:hover { background: rgba(255, 255, 255, 0.24); } .login-style-toggle:active { transform: scale(0.94); } /* ---------- 热带天堂 ---------- */ html.login-tropical body { background: linear-gradient(165deg, #fffde7 0%, #e0f7fa 100%); color: #174a3c; } html.login-tropical .login-card { border: 0; border-radius: 24px; background: #fff; box-shadow: 0 14px 30px rgba(0, 137, 123, 0.18); } html.login-tropical .login-card h1, html.login-tropical .stack label { color: #174a3c; } html.login-tropical .login-brand-copy .eyebrow { color: #00897b; } html.login-tropical .login-style-toggle { display: grid; width: 27px; height: 27px; place-items: center; border: 0; border-radius: 50%; background: #e0f2f1; color: #00897b; cursor: pointer; } html.login-tropical .stack input[type="email"], html.login-tropical .stack input[type="password"], html.login-tropical .stack input:not([type]) { border: 1px solid rgba(0, 137, 123, 0.28); border-radius: 14px; background: #fff; color: #174a3c; } html.login-tropical .stack input:focus { outline: none; border-color: transparent; box-shadow: 0 0 0 2px rgba(0, 137, 123, 0.45), 0 0 18px rgba(0, 137, 123, 0.18); } html.login-tropical .stack input::placeholder { color: #8bb7ad; } html.login-tropical .login-card .button { border: 0; border-radius: 999px; background: #e0f2f1; color: #00796b; } html.login-tropical .login-card .button-primary { background: linear-gradient(135deg, #00897b, #4caf50); color: #fff; box-shadow: 0 10px 24px rgba(0, 137, 123, 0.32); } html.login-tropical .login-card .button-passkey, html.login-tropical .login-card .button-guest { background: #fff; color: #174a3c; border: 1px solid rgba(0, 137, 123, 0.22); } html.login-tropical .login-card .button-passkey > span { border: 1px solid rgba(0, 137, 123, 0.3); color: #00897b; background: #e0f2f1; } html.login-tropical .login-card .button-guest small, html.login-tropical .login-card .muted, html.login-tropical .login-card .notice, html.login-tropical .login-passkey-divider, html.login-tropical .login-guest-entry > span, html.login-tropical .login-passkey-entry > small, html.login-tropical .login-guest-entry > p, html.login-tropical .login-footnote { color: #5f857a; } html.login-tropical .login-passkey-divider::before, html.login-tropical .login-passkey-divider::after, html.login-tropical .login-guest-entry > span::before, html.login-tropical .login-guest-entry > span::after { background: #d9eae7; } html.login-tropical .guest-visit-count { border: 0; border-radius: 18px; background: #e0f2f1; color: #2c5f52; } html.login-tropical .guest-visit-count > span { color: #00897b; } html.login-tropical .guest-visit-count strong { color: #174a3c; } /* ---------- 仪表盘 ---------- */ html.login-dashboard body { background: #f9fafb; color: #111827; } html.login-dashboard .login-card { border: 0; border-radius: 16px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 12px 28px rgba(0, 0, 0, 0.08); } html.login-dashboard .login-card h1, html.login-dashboard .stack label { color: #111827; } html.login-dashboard .login-brand-copy .eyebrow { color: #6366f1; } html.login-dashboard .login-style-toggle { display: grid; width: 27px; height: 27px; place-items: center; border: 0; border-radius: 9px; background: #eef2ff; color: #6366f1; cursor: pointer; } html.login-dashboard .stack input[type="email"], html.login-dashboard .stack input[type="password"], html.login-dashboard .stack input:not([type]) { border: 1px solid #e5e7eb; border-radius: 12px; background: #f9fafb; color: #111827; } html.login-dashboard .stack input:focus { outline: none; border-color: transparent; box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.4), 0 0 18px rgba(99, 102, 241, 0.16); } html.login-dashboard .stack input::placeholder { color: #9ca3af; } html.login-dashboard .login-card .button { border: 0; border-radius: 999px; background: #f3f4f6; color: #374151; } html.login-dashboard .login-card .button-primary { background: linear-gradient(135deg, #6366f1, #4f46e5); color: #fff; box-shadow: 0 10px 22px rgba(99, 102, 241, 0.32); } html.login-dashboard .login-card .button-passkey, html.login-dashboard .login-card .button-guest { background: #f9fafb; color: #111827; border: 1px solid #e5e7eb; } html.login-dashboard .login-card .button-passkey > span { border: 1px solid rgba(99, 102, 241, 0.32); color: #6366f1; background: #eef2ff; } html.login-dashboard .login-card .button-guest small, html.login-dashboard .login-card .muted, html.login-dashboard .login-card .notice, html.login-dashboard .login-passkey-divider, html.login-dashboard .login-guest-entry > span, html.login-dashboard .login-passkey-entry > small, html.login-dashboard .login-guest-entry > p, html.login-dashboard .login-footnote { color: #6b7280; } html.login-dashboard .login-passkey-divider::before, html.login-dashboard .login-passkey-divider::after, html.login-dashboard .login-guest-entry > span::before, html.login-dashboard .login-guest-entry > span::after { background: #e5e7eb; } html.login-dashboard .guest-visit-count { border: 0; border-radius: 14px; background: #f3f4f6; color: #374151; } html.login-dashboard .guest-visit-count > span { color: #6366f1; } html.login-dashboard .guest-visit-count strong { color: #111827; } /* ---------- 材料设计 ---------- */ html.login-material body { background: #f7f8fa; color: #1b1b1f; } html.login-material .login-card { border: 0; border-radius: 18px; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08), 0 14px 32px rgba(0, 0, 0, 0.1); } html.login-material .login-card h1, html.login-material .stack label { color: #1b1b1f; } html.login-material .login-brand-copy .eyebrow { color: #6200ee; } html.login-material .login-style-toggle { display: grid; width: 27px; height: 27px; place-items: center; border: 0; border-radius: 50%; background: #f3e8ff; color: #6200ee; cursor: pointer; } html.login-material .stack input[type="email"], html.login-material .stack input[type="password"], html.login-material .stack input:not([type]) { border: 0; border-bottom: 2px solid #d7d7dd; border-radius: 8px 8px 0 0; background: #f4f2f8; color: #1b1b1f; } html.login-material .stack input:focus { outline: none; border-bottom-color: #6200ee; background: #efeaf8; box-shadow: 0 2px 0 0 rgba(98, 0, 238, 0.25); } html.login-material .stack input::placeholder { color: #8a8a92; } html.login-material .login-card .button { border: 0; border-radius: 12px; background: #f3e8ff; color: #6200ee; } html.login-material .login-card .button-primary { background: #6200ee; color: #fff; box-shadow: 0 8px 18px rgba(98, 0, 238, 0.3); } html.login-material .login-card .button-passkey, html.login-material .login-card .button-guest { background: #fff; color: #1b1b1f; border: 1px solid #e6e4ee; } html.login-material .login-card .button-passkey > span { border: 1px solid rgba(98, 0, 238, 0.28); color: #6200ee; background: #f3e8ff; } html.login-material .login-card .button-guest small, html.login-material .login-card .muted, html.login-material .login-card .notice, html.login-material .login-passkey-divider, html.login-material .login-guest-entry > span, html.login-material .login-passkey-entry > small, html.login-material .login-guest-entry > p, html.login-material .login-footnote { color: #5f6368; } html.login-material .login-passkey-divider::before, html.login-material .login-passkey-divider::after, html.login-material .login-guest-entry > span::before, html.login-material .login-guest-entry > span::after { background: #e4e2ec; } html.login-material .guest-visit-count { border: 0; border-radius: 14px; background: #f5f0ff; color: #4a4458; } html.login-material .guest-visit-count > span { color: #6200ee; } html.login-material .guest-visit-count strong { color: #1b1b1f; } /* 深色模式 */ @media (prefers-color-scheme: dark) { html.login-tropical body { background: linear-gradient(165deg, #123c34 0%, #0f2f2a 100%); color: #e8f5f2; } html.login-tropical .login-card { background: #17493f; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4); } html.login-tropical .login-card h1, html.login-tropical .stack label { color: #e8f5f2; } html.login-tropical .stack input[type="email"], html.login-tropical .stack input[type="password"], html.login-tropical .stack input:not([type]) { background: #123c34; border-color: rgba(255, 255, 255, 0.18); color: #e8f5f2; } html.login-tropical .login-card .button-passkey, html.login-tropical .login-card .button-guest { background: #123c34; border-color: rgba(255, 255, 255, 0.16); color: #e8f5f2; } html.login-dashboard body { background: #111827; color: #f9fafb; } html.login-dashboard .login-card { background: #1f2937; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45); } html.login-dashboard .login-card h1, html.login-dashboard .stack label { color: #f9fafb; } html.login-dashboard .stack input[type="email"], html.login-dashboard .stack input[type="password"], html.login-dashboard .stack input:not([type]) { background: #111827; border-color: rgba(255, 255, 255, 0.14); color: #f9fafb; } html.login-dashboard .login-card .button-passkey, html.login-dashboard .login-card .button-guest { background: #111827; border-color: rgba(255, 255, 255, 0.12); color: #f9fafb; } html.login-material body { background: #1c1c1e; color: #f2f2f2; } html.login-material .login-card { background: #29292b; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45); } html.login-material .login-card h1, html.login-material .stack label { color: #f2f2f2; } html.login-material .stack input[type="email"], html.login-material .stack input[type="password"], html.login-material .stack input:not([type]) { background: #353538; border-bottom-color: #6b6b70; color: #f2f2f2; } html.login-material .login-card .button-passkey, html.login-material .login-card .button-guest { background: #353538; border-color: rgba(255, 255, 255, 0.12); color: #f2f2f2; } html.login-material .login-card .button-primary { background: #bb86fc; color: #1c1c1e; } } /* 累计访客访问：仅作为普通文字展示，不做按键/卡片样式 */ html.login-neu .guest-visit-count, html.login-tropical .guest-visit-count, html.login-dashboard .guest-visit-count, html.login-material .guest-visit-count, .guest-visit-count { min-height: 0; justify-content: center; gap: 4px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }