173 lines
8.8 KiB
CSS
173 lines
8.8 KiB
CSS
:root{--bg:#090d1a;--panel:#11182b;--panel2:#19233c;--text:#f5f7ff;--muted:#9aa7c5;--accent:#ffcc4d;--accent2:#7b61ff;--danger:#ff6577;--success:#50d890;--border:rgba(255,255,255,.09)}
|
|
*{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:Inter,"Noto Sans TC","Microsoft JhengHei",sans-serif;color:var(--text);background:radial-gradient(circle at top right,rgba(123,97,255,.20),transparent 34%),radial-gradient(circle at bottom left,rgba(255,204,77,.10),transparent 30%),var(--bg)}a{color:inherit}.login-body{display:grid;place-items:center;padding:24px}.login-card{width:min(440px,100%);padding:36px;background:rgba(17,24,43,.94);border:1px solid var(--border);border-radius:24px;box-shadow:0 24px 80px rgba(0,0,0,.38)}.brand-mark{display:grid;place-items:center;width:58px;height:58px;border-radius:18px;background:linear-gradient(135deg,var(--accent),#ff8a4d);color:#1b1520;font-weight:900;letter-spacing:.08em}h1,h2,h3,p{margin-top:0}.muted,.site-subtitle,.section-heading span{color:var(--muted)}label{display:block;margin:24px 0 8px;font-weight:700}input{width:100%;padding:14px 16px;color:var(--text);background:#0c1222;border:1px solid var(--border);border-radius:12px;outline:none}input:focus{border-color:var(--accent2)}.primary-button,.game-card button{width:100%;margin-top:16px;padding:14px 18px;border:0;border-radius:12px;font-weight:800}.primary-button,.primary-link{color:#17120a;background:var(--accent);cursor:pointer}.primary-link{display:inline-block;padding:12px 16px;border-radius:12px;text-decoration:none;font-weight:800}.security-note{margin:18px 0 0;color:var(--muted);font-size:13px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px clamp(18px,4vw,56px);background:rgba(9,13,26,.88);border-bottom:1px solid var(--border);backdrop-filter:blur(16px);position:sticky;top:0;z-index:10}.site-title{font-weight:900;letter-spacing:.08em}.site-subtitle{margin-top:3px;font-size:13px}.member-area{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}.member-area form{margin:0}.logout-button,.back-link{padding:9px 13px;border:1px solid var(--border);border-radius:10px;color:var(--text);background:transparent;text-decoration:none;cursor:pointer}.status-badge{padding:5px 9px;border-radius:999px;font-size:12px;font-weight:800}.status-badge.normal{color:var(--success);background:rgba(80,216,144,.12)}.status-badge.locked{color:var(--danger);background:rgba(255,101,119,.12)}.page{width:min(1180px,calc(100% - 32px));margin:0 auto;padding:40px 0 72px}.page.narrow{width:min(820px,calc(100% - 32px))}.hero{display:grid;grid-template-columns:1fr auto;align-items:center;gap:24px;min-height:280px;padding:clamp(28px,5vw,60px);margin-bottom:24px;border:1px solid var(--border);border-radius:28px;background:linear-gradient(135deg,rgba(123,97,255,.26),rgba(17,24,43,.94)),var(--panel)}.hero h1{max-width:720px;font-size:clamp(30px,5vw,56px);line-height:1.08}.hero p{max-width:720px;color:var(--muted);font-size:17px}.eyebrow{color:var(--accent);font-size:12px;font-weight:900;letter-spacing:.16em}.service-entry{display:flex;gap:14px;align-items:center;min-width:230px;padding:18px;border:1px solid rgba(255,204,77,.35);border-radius:18px;background:rgba(255,204,77,.10);text-decoration:none}.service-entry small{display:block;margin-top:4px;color:var(--muted)}.service-icon{font-size:34px}.account-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:34px}.metric-card{padding:18px;border:1px solid var(--border);border-radius:16px;background:var(--panel)}.metric-card span{display:block;color:var(--muted);font-size:13px;margin-bottom:8px}.metric-card strong{font-size:20px}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:18px;margin:0 4px 16px}.game-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.game-card{display:grid;grid-template-columns:auto 1fr;gap:16px;padding:22px;border:1px solid var(--border);border-radius:20px;background:var(--panel)}.game-card h3{margin-bottom:6px}.game-card p{margin-bottom:0;color:var(--muted)}.game-icon{font-size:38px}.game-card button{grid-column:1/-1;color:var(--muted);background:var(--panel2);cursor:not-allowed}.floating-service{position:fixed;right:22px;bottom:22px;padding:14px 18px;border-radius:999px;color:#17120a;background:var(--accent);font-weight:900;text-decoration:none;box-shadow:0 16px 36px rgba(0,0,0,.35)}.alert{padding:14px 16px;margin-bottom:18px;border-radius:12px}.alert-error{color:#ffdfe3;background:rgba(255,101,119,.14);border:1px solid rgba(255,101,119,.28)}.alert-warning{color:#fff2c5;background:rgba(255,204,77,.12);border:1px solid rgba(255,204,77,.28)}.support-panel{padding:34px;border:1px solid var(--border);border-radius:24px;background:var(--panel)}.support-avatar{font-size:48px}.empty-state{padding:24px;color:var(--muted);background:var(--panel2);border-radius:14px}.order-list{display:grid;gap:12px}.order-card{display:grid;gap:7px;padding:16px;border:1px solid var(--border);border-radius:14px;background:var(--panel2)}.order-card span{color:var(--muted)}.section-gap{margin-top:30px}@media(max-width:800px){.hero{grid-template-columns:1fr}.game-grid{grid-template-columns:1fr 1fr}.account-grid{grid-template-columns:1fr 1fr}.topbar{align-items:flex-start}}@media(max-width:560px){.game-grid,.account-grid{grid-template-columns:1fr}.topbar{flex-direction:column}.member-area{justify-content:flex-start}.login-card{padding:26px}}
|
|
|
|
|
|
.login-divider {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
margin: 20px 0;
|
|
color: var(--muted);
|
|
}
|
|
.login-divider::before,
|
|
.login-divider::after {
|
|
content: "";
|
|
flex: 1;
|
|
height: 1px;
|
|
background: var(--border);
|
|
}
|
|
.guest-service-button {
|
|
display: block;
|
|
padding: 14px 18px;
|
|
border: 1px solid rgba(255, 204, 77, .35);
|
|
border-radius: 12px;
|
|
color: var(--accent);
|
|
background: rgba(255, 204, 77, .08);
|
|
text-align: center;
|
|
text-decoration: none;
|
|
font-weight: 800;
|
|
}
|
|
.guest-service-note {
|
|
margin-top: 12px;
|
|
color: var(--muted);
|
|
font-size: 13px;
|
|
line-height: 1.6;
|
|
}
|
|
.guest-support-panel {
|
|
text-align: center;
|
|
}
|
|
.guest-badge {
|
|
display: inline-block;
|
|
margin: 6px 0 18px;
|
|
padding: 6px 10px;
|
|
border-radius: 999px;
|
|
color: var(--accent);
|
|
background: rgba(255, 204, 77, .10);
|
|
font-size: 12px;
|
|
font-weight: 800;
|
|
}
|
|
.guest-open-chat {
|
|
max-width: 320px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.guest-page {
|
|
color: #111;
|
|
background: #fff;
|
|
}
|
|
.guest-page .woot-widget-holder,
|
|
.guest-page .woot-widget-holder.woot-elements--right {
|
|
width: 400px !important;
|
|
height: min(82vh, 760px) !important;
|
|
max-height: 82vh !important;
|
|
}
|
|
.guest-page .woot-widget-holder iframe,
|
|
.guest-page .woot-widget-holder .woot-widget-box {
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
min-height: min(82vh, 760px) !important;
|
|
}
|
|
.guest-page .woot-widget-bubble {
|
|
background: #e31c23 !important;
|
|
}
|
|
.guest-page .woot-widget-bubble:hover {
|
|
background: #c4161c !important;
|
|
}
|
|
.guest-page .topbar {
|
|
color: #111;
|
|
background: #fff;
|
|
border-bottom: 1px solid #e6e6e6;
|
|
}
|
|
.guest-page .site-subtitle {
|
|
color: #555;
|
|
}
|
|
.guest-page .back-link {
|
|
color: #111;
|
|
border-color: #d8d8d8;
|
|
background: #fff;
|
|
}
|
|
.guest-page .support-panel {
|
|
color: #111;
|
|
background: #fff;
|
|
border: 1px solid #e6e6e6;
|
|
}
|
|
.guest-page .support-panel p {
|
|
color: #333;
|
|
}
|
|
.guest-page .guest-badge {
|
|
color: #111;
|
|
background: #f3f3f3;
|
|
}
|
|
.guest-page .alert-warning {
|
|
color: #111;
|
|
background: #f7f7f7;
|
|
border: 1px solid #e0e0e0;
|
|
}
|
|
.guest-page .primary-button {
|
|
color: #111;
|
|
background: #ffcc4d;
|
|
}
|
|
|
|
/* 登录页：白底黑字 */
|
|
.login-body {
|
|
color: #111;
|
|
background: #fff;
|
|
}
|
|
.login-body .login-card {
|
|
color: #111;
|
|
background: #fff;
|
|
border: 1px solid #e6e6e6;
|
|
box-shadow: 0 12px 36px rgba(0, 0, 0, .08);
|
|
}
|
|
.login-body .brand-mark {
|
|
color: #111;
|
|
background: #ffcc4d;
|
|
}
|
|
.login-body h1 {
|
|
color: #111;
|
|
}
|
|
.login-body .muted,
|
|
.login-body .guest-service-note,
|
|
.login-body .security-note,
|
|
.login-body .login-divider {
|
|
color: #555;
|
|
}
|
|
.login-body .login-divider::before,
|
|
.login-body .login-divider::after {
|
|
background: #e6e6e6;
|
|
}
|
|
.login-body label {
|
|
color: #111;
|
|
}
|
|
.login-body input {
|
|
color: #111;
|
|
background: #fff;
|
|
border: 1px solid #d8d8d8;
|
|
}
|
|
.login-body input:focus {
|
|
border-color: #ffcc4d;
|
|
}
|
|
.login-body .primary-button {
|
|
color: #111;
|
|
background: #ffcc4d;
|
|
}
|
|
.login-body .guest-service-button {
|
|
color: #111;
|
|
border-color: #d8d8d8;
|
|
background: #f7f7f7;
|
|
}
|
|
.login-body .guest-service-button:hover {
|
|
background: #f0f0f0;
|
|
}
|
|
.login-body .alert-error {
|
|
color: #111;
|
|
background: #fff1f2;
|
|
border: 1px solid #ffc9d0;
|
|
}
|
|
.login-body .alert-warning {
|
|
color: #111;
|
|
background: #f7f7f7;
|
|
border: 1px solid #e0e0e0;
|
|
}
|