351 lines
7.6 KiB
CSS
351 lines
7.6 KiB
CSS
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
|
||
:root {
|
||
--primary: #D4AF37;
|
||
--primary-dark: #A8841F;
|
||
--primary-light: #F0D875;
|
||
--secondary: #1A1A1A;
|
||
--tertiary: #000000;
|
||
--neutral: #8E8E93;
|
||
--bg-body: #000000;
|
||
--bg-card: rgba(20, 20, 20, 0.65);
|
||
--bg-hover: rgba(34, 34, 34, 0.65);
|
||
--bg-elevated: rgba(42, 42, 42, 0.65);
|
||
--text: #FFFFFF;
|
||
--text-muted: #8E8E93;
|
||
--border: #333333;
|
||
--border-gold: #D4AF37;
|
||
--border-gold-soft: rgba(212, 175, 55, 0.28);
|
||
--border-w: 1px;
|
||
--border-w-thick: 1px;
|
||
--danger: #FF453A;
|
||
--radius: 12px;
|
||
--radius-sm: 8px;
|
||
--shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
|
||
--shadow-gold: 0 2px 12px rgba(212, 175, 55, 0.12);
|
||
--glow-gold: 0 0 8px rgba(212, 175, 55, 0.2);
|
||
--gradient-gold: linear-gradient(
|
||
180deg,
|
||
#FFF4C8 0%,
|
||
#F0D875 18%,
|
||
#D4AF37 50%,
|
||
#B8942B 78%,
|
||
#8B6914 100%
|
||
);
|
||
--gradient-gold-border: linear-gradient(
|
||
180deg,
|
||
#FFF8DC 0%,
|
||
#E8C96A 35%,
|
||
#A8841F 70%,
|
||
#5C4A12 100%
|
||
);
|
||
--gradient-card: linear-gradient(160deg, #1E1A12 0%, #141414 40%, #0A0A0A 100%);
|
||
--player-header-h: 52px;
|
||
--player-bottom-nav-h: 54px;
|
||
--safe-top: env(safe-area-inset-top, 0px);
|
||
--safe-bottom: env(safe-area-inset-bottom, 0px);
|
||
}
|
||
|
||
/** 金色描边按钮（避免大面积实心填充） */
|
||
.btn-gold-outline {
|
||
background: #141414;
|
||
border: 1px solid var(--border-gold-soft);
|
||
color: var(--primary-light);
|
||
font-weight: 800;
|
||
}
|
||
.btn-gold-outline:active:not(:disabled) {
|
||
background: rgba(212, 175, 55, 0.1);
|
||
border-color: var(--border-gold);
|
||
}
|
||
|
||
/** 选中态：浅底 + 金边，非整块金色 */
|
||
.tab-gold-active {
|
||
background: rgba(212, 175, 55, 0.08) !important;
|
||
border-color: var(--border-gold) !important;
|
||
color: var(--primary-light) !important;
|
||
}
|
||
|
||
/* 登录等关键区域：轻量金边（非厚重 PS 描边） */
|
||
.ps-gold-frame {
|
||
position: relative;
|
||
border: 1px solid var(--border-gold-soft) !important;
|
||
border-radius: var(--radius);
|
||
background: rgba(14, 14, 14, 0.92) !important;
|
||
box-shadow: var(--shadow);
|
||
}
|
||
|
||
.ps-gold-frame::before,
|
||
.ps-gold-frame::after {
|
||
display: none;
|
||
}
|
||
|
||
.ps-gold-input {
|
||
background: #0d0d0d !important;
|
||
border: 1px solid var(--border) !important;
|
||
box-shadow: none;
|
||
color: var(--text);
|
||
}
|
||
|
||
.ps-gold-input::placeholder {
|
||
color: rgba(255, 255, 255, 0.35);
|
||
}
|
||
|
||
.ps-gold-input:focus {
|
||
border-color: var(--border-gold-soft) !important;
|
||
box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.12) !important;
|
||
}
|
||
|
||
/* 主按钮：斜面浮雕 + 渐变描边 + 外发光 */
|
||
.btn-primary {
|
||
position: relative;
|
||
isolation: isolate;
|
||
padding: 17px 24px;
|
||
border: none;
|
||
border-radius: var(--radius-sm);
|
||
background: transparent;
|
||
color: #3D2800;
|
||
font-weight: 900;
|
||
font-size: 16px;
|
||
width: 100%;
|
||
letter-spacing: 0.1em;
|
||
text-transform: uppercase;
|
||
text-shadow:
|
||
0 1px 0 rgba(255, 252, 235, 0.95),
|
||
0 -1px 0 rgba(120, 85, 15, 0.35);
|
||
transition: transform 0.12s ease;
|
||
z-index: 0;
|
||
}
|
||
|
||
.btn-primary::before {
|
||
content: '';
|
||
position: absolute;
|
||
inset: -3px;
|
||
border-radius: calc(var(--radius-sm) + 3px);
|
||
background: linear-gradient(
|
||
180deg,
|
||
#FFFCE8 0%,
|
||
#F7E08A 12%,
|
||
#D4AF37 35%,
|
||
#8B6914 55%,
|
||
#5C4A12 72%,
|
||
#E8C040 90%,
|
||
#FFF8DC 100%
|
||
);
|
||
z-index: -2;
|
||
box-shadow:
|
||
0 0 14px rgba(255, 210, 70, 0.55),
|
||
0 0 28px rgba(212, 175, 55, 0.28),
|
||
0 6px 14px rgba(0, 0, 0, 0.55);
|
||
}
|
||
|
||
.btn-primary::after {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 2px;
|
||
border-radius: calc(var(--radius-sm) - 1px);
|
||
background: linear-gradient(
|
||
180deg,
|
||
#FFFBE8 0%,
|
||
#FFE566 6%,
|
||
#F0D050 22%,
|
||
#D4AF37 48%,
|
||
#B8860B 72%,
|
||
#8B6914 100%
|
||
);
|
||
z-index: -1;
|
||
box-shadow:
|
||
inset 0 2px 0 rgba(255, 255, 255, 0.95),
|
||
inset 0 4px 10px rgba(255, 240, 180, 0.45),
|
||
inset 0 -2px 0 rgba(90, 65, 12, 0.85),
|
||
inset 0 -6px 14px rgba(45, 32, 6, 0.5);
|
||
}
|
||
|
||
.btn-primary:active:not(:disabled) {
|
||
transform: translateY(2px) scale(0.985);
|
||
}
|
||
|
||
.btn-primary:active:not(:disabled)::after {
|
||
background: linear-gradient(
|
||
180deg,
|
||
#E8C040 0%,
|
||
#C9962A 40%,
|
||
#8B6914 100%
|
||
);
|
||
box-shadow:
|
||
inset 0 4px 10px rgba(35, 24, 4, 0.65),
|
||
inset 0 1px 0 rgba(255, 255, 255, 0.35);
|
||
}
|
||
|
||
.btn-primary:active:not(:disabled)::before {
|
||
box-shadow:
|
||
0 0 10px rgba(255, 200, 50, 0.35),
|
||
0 2px 6px rgba(0, 0, 0, 0.5);
|
||
}
|
||
|
||
.btn-primary:disabled {
|
||
opacity: 0.5;
|
||
cursor: not-allowed;
|
||
filter: saturate(0.4);
|
||
}
|
||
|
||
html,
|
||
body,
|
||
#app {
|
||
height: 100%;
|
||
min-height: 100%;
|
||
touch-action: manipulation;
|
||
}
|
||
|
||
html {
|
||
-webkit-text-size-adjust: 100%;
|
||
text-size-adjust: 100%;
|
||
height: -webkit-fill-available;
|
||
}
|
||
|
||
body {
|
||
min-height: 100%;
|
||
min-height: -webkit-fill-available;
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||
/* 保留 bg 位图；用 scroll 替代 fixed，减轻移动端滚动重绘（后续可换 WebP/AVIF） */
|
||
background-color: var(--tertiary);
|
||
background-image:
|
||
radial-gradient(ellipse 120% 60% at 50% -10%, rgba(212, 175, 55, 0.14), transparent 55%),
|
||
linear-gradient(rgba(0, 0, 0, 0.88), rgba(0, 0, 0, 0.88)),
|
||
url('./assets/images/bg.webp');
|
||
background-repeat: no-repeat;
|
||
background-position: center center;
|
||
background-size: cover;
|
||
background-attachment: scroll;
|
||
color: var(--text);
|
||
overflow: hidden;
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
|
||
@media (min-width: 1024px) {
|
||
body {
|
||
background-image: url('./assets/images/pcbg.png');
|
||
background-attachment: fixed;
|
||
}
|
||
}
|
||
|
||
#app {
|
||
min-height: 100%;
|
||
min-height: -webkit-fill-available;
|
||
}
|
||
|
||
a { color: inherit; text-decoration: none; }
|
||
|
||
button {
|
||
cursor: pointer;
|
||
border: none;
|
||
font-family: inherit;
|
||
}
|
||
|
||
input {
|
||
font-family: inherit;
|
||
background: #0D0D0D;
|
||
border: 1px solid var(--border);
|
||
color: var(--text);
|
||
padding: 14px 16px;
|
||
border-radius: var(--radius-sm);
|
||
width: 100%;
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
transition: border-color 0.2s, box-shadow 0.2s;
|
||
}
|
||
|
||
input:focus {
|
||
outline: none;
|
||
border-color: var(--border-gold-soft);
|
||
}
|
||
|
||
input:-webkit-autofill,
|
||
input:-webkit-autofill:hover,
|
||
input:-webkit-autofill:focus,
|
||
input:-webkit-autofill:active {
|
||
-webkit-text-fill-color: var(--text);
|
||
caret-color: var(--text);
|
||
box-shadow: 0 0 0 1000px #0a0a0a inset;
|
||
border: 1px solid var(--border);
|
||
transition: background-color 99999s ease-out 0s;
|
||
}
|
||
|
||
.odds-btn {
|
||
background: #161616;
|
||
border: 1px solid var(--border);
|
||
color: var(--text);
|
||
padding: 12px 14px;
|
||
border-radius: var(--radius-sm);
|
||
text-align: center;
|
||
min-width: 78px;
|
||
transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
|
||
}
|
||
|
||
.odds-btn:active { transform: scale(0.96); }
|
||
|
||
.odds-btn.selected {
|
||
border: 1px solid var(--border-gold-soft);
|
||
background: #2d281a;
|
||
box-shadow: none;
|
||
}
|
||
|
||
.odds-btn.selected::before,
|
||
.odds-btn.selected::after {
|
||
display: none;
|
||
}
|
||
|
||
.odds-btn.selected .label,
|
||
.odds-btn.selected .value {
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.odds-btn .label {
|
||
font-size: 11px;
|
||
color: var(--text-muted);
|
||
font-weight: 600;
|
||
letter-spacing: 0.04em;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.odds-btn .value {
|
||
font-size: 18px;
|
||
font-weight: 800;
|
||
color: #ffffff;
|
||
margin-top: 2px;
|
||
}
|
||
|
||
.card {
|
||
background: var(--bg-card);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius);
|
||
padding: 16px;
|
||
margin-bottom: 12px;
|
||
box-shadow: var(--shadow);
|
||
background: rgba(26, 26, 26, 0.92);
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 18px;
|
||
font-weight: 800;
|
||
margin-bottom: 14px;
|
||
padding: 4px 0 4px 12px;
|
||
border-left: 3px solid var(--border-gold);
|
||
color: var(--primary-light);
|
||
letter-spacing: 0.06em;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.state {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-height: 60vh;
|
||
gap: 12px;
|
||
text-align: center;
|
||
color: var(--text-muted);
|
||
font-weight: 600;
|
||
font-size: 14px;
|
||
}
|