dbfe5701aa
- 在国际化文件中添加钱包流水相关翻译项 - 在用户个人资料页面添加复制邀请链接功能 - 优化桌面端动物组件的视觉效果和动画参数 - 添加虚拟滚动功能到财务记录标签页提升性能 - 为桌面端控制面板添加投注数量调节按钮 - 更新消息模态框为通知列表和详情展示 - 在头部余额显示旁添加充值图标入口
558 lines
15 KiB
CSS
558 lines
15 KiB
CSS
@import "./font.css";
|
|
@import "tailwindcss";
|
|
@import "tw-animate-css";
|
|
@import "shadcn/tailwind.css";
|
|
@import "@fontsource-variable/geist";
|
|
|
|
@custom-variant dark (&:is(.dark *));
|
|
|
|
@theme {
|
|
--font-sans:
|
|
"Inter", "SF Pro Display", "Segoe UI", "Helvetica Neue", sans-serif;
|
|
--font-mono:
|
|
"JetBrains Mono", "SFMono-Regular", "SF Mono", Consolas, monospace;
|
|
--font-countdown: "Countdown", "Inter", "SF Pro Display", sans-serif;
|
|
--color-game-bg: #07111f;
|
|
--color-game-surface: #0d1b2d;
|
|
--color-game-surface-strong: #12253d;
|
|
--color-game-accent: #31d0ff;
|
|
--color-game-accent-soft: #7ce8ff;
|
|
--color-game-gold: #f5c86b;
|
|
--color-game-gold-strong: #ffd66e;
|
|
--color-game-danger: #ff5e7a;
|
|
--color-game-success: #4fdc9b;
|
|
--shadow-game-panel:
|
|
0 20px 60px rgba(2, 6, 23, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
|
|
}
|
|
|
|
:root {
|
|
--design-unit: calc(100vw / 1920);
|
|
--background: oklch(1 0 0);
|
|
--foreground: oklch(0.145 0 0);
|
|
--card: oklch(1 0 0);
|
|
--card-foreground: oklch(0.145 0 0);
|
|
--popover: oklch(1 0 0);
|
|
--popover-foreground: oklch(0.145 0 0);
|
|
--primary: oklch(0.205 0 0);
|
|
--primary-foreground: oklch(0.985 0 0);
|
|
--secondary: oklch(0.97 0 0);
|
|
--secondary-foreground: oklch(0.205 0 0);
|
|
--muted: oklch(0.97 0 0);
|
|
--muted-foreground: oklch(0.556 0 0);
|
|
--accent: oklch(0.97 0 0);
|
|
--accent-foreground: oklch(0.205 0 0);
|
|
--destructive: oklch(0.577 0.245 27.325);
|
|
--border: oklch(0.922 0 0);
|
|
--input: oklch(0.922 0 0);
|
|
--ring: oklch(0.708 0 0);
|
|
--chart-1: oklch(0.87 0 0);
|
|
--chart-2: oklch(0.556 0 0);
|
|
--chart-3: oklch(0.439 0 0);
|
|
--chart-4: oklch(0.371 0 0);
|
|
--chart-5: oklch(0.269 0 0);
|
|
--radius: 0.625rem;
|
|
--sidebar: oklch(0.985 0 0);
|
|
--sidebar-foreground: oklch(0.145 0 0);
|
|
--sidebar-primary: oklch(0.205 0 0);
|
|
--sidebar-primary-foreground: oklch(0.985 0 0);
|
|
--sidebar-accent: oklch(0.97 0 0);
|
|
--sidebar-accent-foreground: oklch(0.205 0 0);
|
|
--sidebar-border: oklch(0.922 0 0);
|
|
--sidebar-ring: oklch(0.708 0 0);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
:root {
|
|
--design-unit: calc(100vw / 375);
|
|
}
|
|
}
|
|
|
|
@utility w-design-* {
|
|
width: calc(var(--design-unit) * --value(integer));
|
|
}
|
|
|
|
@utility h-design-* {
|
|
height: calc(var(--design-unit) * --value(integer));
|
|
}
|
|
|
|
@utility min-w-design-* {
|
|
min-width: calc(var(--design-unit) * --value(integer));
|
|
}
|
|
|
|
@utility text-design-* {
|
|
font-size: calc(var(--design-unit) * --value(integer));
|
|
}
|
|
|
|
@utility gap-design-* {
|
|
gap: calc(var(--design-unit) * --value(integer));
|
|
}
|
|
|
|
@utility pt-design-* {
|
|
padding-top: calc(var(--design-unit) * --value(integer));
|
|
}
|
|
|
|
@utility px-design-* {
|
|
padding-left: calc(var(--design-unit) * --value(integer));
|
|
padding-right: calc(var(--design-unit) * --value(integer));
|
|
}
|
|
|
|
@utility p-design-* {
|
|
padding: calc(var(--design-unit) * --value(integer));
|
|
}
|
|
|
|
@utility mt-design-* {
|
|
margin-top: calc(var(--design-unit) * --value(integer));
|
|
}
|
|
|
|
@utility mb-design-* {
|
|
margin-bottom: calc(var(--design-unit) * --value(integer));
|
|
}
|
|
|
|
@utility ml-design-* {
|
|
margin-left: calc(var(--design-unit) * --value(integer));
|
|
}
|
|
|
|
@utility mr-design-* {
|
|
margin-right: calc(var(--design-unit) * --value(integer));
|
|
}
|
|
|
|
@utility mx-design-* {
|
|
margin-left: calc(var(--design-unit) * --value(integer));
|
|
margin-right: calc(var(--design-unit) * --value(integer));
|
|
}
|
|
|
|
@utility py-design-* {
|
|
padding-top: calc(var(--design-unit) * --value(integer));
|
|
padding-bottom: calc(var(--design-unit) * --value(integer));
|
|
}
|
|
|
|
@utility pl-design-* {
|
|
padding-left: calc(var(--design-unit) * --value(integer));
|
|
}
|
|
|
|
@utility pb-design-* {
|
|
padding-bottom: calc(var(--design-unit) * --value(integer));
|
|
}
|
|
|
|
@utility pr-design-* {
|
|
padding-right: calc(var(--design-unit) * --value(integer));
|
|
}
|
|
|
|
@utility my-design-* {
|
|
margin-top: calc(var(--design-unit) * --value(integer));
|
|
margin-bottom: calc(var(--design-unit) * --value(integer));
|
|
}
|
|
|
|
@utility left-design-* {
|
|
left: calc(var(--design-unit) * --value(integer));
|
|
}
|
|
|
|
@utility top-design-* {
|
|
top: calc(var(--design-unit) * --value(integer));
|
|
}
|
|
|
|
@utility right-design-* {
|
|
right: calc(var(--design-unit) * --value(integer));
|
|
}
|
|
|
|
@layer base {
|
|
html {
|
|
@apply h-full w-full text-design-16 font-sans;
|
|
}
|
|
|
|
body {
|
|
@apply m-0 h-full w-full bg-background text-foreground;
|
|
}
|
|
|
|
#root {
|
|
@apply h-full w-full;
|
|
}
|
|
|
|
* {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
@apply border-border outline-ring/50;
|
|
}
|
|
|
|
*::-webkit-scrollbar {
|
|
width: 0;
|
|
height: 0;
|
|
display: none;
|
|
}
|
|
|
|
body {
|
|
background:
|
|
radial-gradient(circle at top, rgba(49, 208, 255, 0.12), transparent 28%),
|
|
radial-gradient(
|
|
circle at bottom right,
|
|
rgba(245, 200, 107, 0.1),
|
|
transparent 24%
|
|
),
|
|
linear-gradient(180deg, #07111f 0%, #040812 100%);
|
|
color: #f8fafc;
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
.common-neon-inset {
|
|
border: 1px solid rgba(128, 223, 231, 0.65);
|
|
border-radius: 5px;
|
|
padding: calc(var(--design-unit) * 8) calc(var(--design-unit) * 10);
|
|
box-shadow: inset 0 0 8px rgba(128, 223, 231, 0.65);
|
|
color: #d5fbff;
|
|
}
|
|
|
|
.common-neon-inset-glow {
|
|
border: 1px solid rgba(128, 223, 231, 0.65);
|
|
border-radius: 5px;
|
|
padding: calc(var(--design-unit) * 8) calc(var(--design-unit) * 10);
|
|
background:
|
|
linear-gradient(180deg, rgba(18, 44, 58, 0.92), rgba(8, 22, 34, 0.9)),
|
|
radial-gradient(circle at top, rgba(128, 223, 231, 0.16), transparent 62%);
|
|
box-shadow:
|
|
inset 0 0 calc(var(--design-unit) * 8) rgba(128, 223, 231, 0.72),
|
|
inset 0 0 calc(var(--design-unit) * 18) rgba(128, 223, 231, 0.18),
|
|
0 0 calc(var(--design-unit) * 6) rgba(128, 223, 231, 0.35),
|
|
0 0 calc(var(--design-unit) * 18) rgba(128, 223, 231, 0.24);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.common-neon-inset-glow::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 1px;
|
|
border-radius: 4px;
|
|
border-top: 1px solid rgba(214, 249, 252, 0.8);
|
|
opacity: 0.85;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.game-setting-input-shell {
|
|
border: 1px solid rgba(123, 235, 245, 0.38);
|
|
border-radius: calc(var(--design-unit) * 8);
|
|
background: rgba(17, 52, 67, 0.72);
|
|
transition:
|
|
border-color 180ms ease,
|
|
box-shadow 180ms ease,
|
|
background-color 180ms ease;
|
|
}
|
|
|
|
.game-setting-input-shell:focus-within {
|
|
border-color: rgba(136, 245, 255, 0.68);
|
|
box-shadow:
|
|
0 0 0 calc(var(--design-unit) * 1.2) rgba(108, 247, 255, 0.08),
|
|
inset 0 0 calc(var(--design-unit) * 5) rgba(110, 255, 255, 0.06);
|
|
background: rgba(19, 58, 74, 0.82);
|
|
}
|
|
|
|
.game-setting-input {
|
|
border: none;
|
|
background: transparent;
|
|
padding: 0;
|
|
color: #8ad6dd;
|
|
box-shadow: none;
|
|
outline: none;
|
|
caret-color: #d9ffff;
|
|
}
|
|
|
|
.game-setting-input::placeholder {
|
|
color: rgba(138, 214, 221, 0.58);
|
|
}
|
|
|
|
.game-setting-input:focus,
|
|
.game-setting-input:focus-visible {
|
|
border: none;
|
|
box-shadow: none;
|
|
outline: none;
|
|
}
|
|
|
|
.game-panel {
|
|
border: 1px solid rgba(124, 232, 255, 0.12);
|
|
background: linear-gradient(
|
|
180deg,
|
|
rgba(18, 37, 61, 0.88),
|
|
rgba(7, 17, 31, 0.78)
|
|
);
|
|
box-shadow: var(--shadow-game-panel);
|
|
backdrop-filter: blur(18px);
|
|
}
|
|
|
|
.game-chip-glow {
|
|
box-shadow:
|
|
0 0 0 1px rgba(49, 208, 255, 0.16),
|
|
0 16px 36px rgba(49, 208, 255, 0.16);
|
|
}
|
|
|
|
.game-gold-glow {
|
|
box-shadow:
|
|
0 0 0 1px rgba(245, 200, 107, 0.2),
|
|
0 18px 40px rgba(245, 200, 107, 0.14);
|
|
}
|
|
|
|
.desktop-game-history-glow {
|
|
filter: drop-shadow(
|
|
0 0 calc(var(--design-unit) * 4) rgba(49, 208, 255, 0.65)
|
|
)
|
|
drop-shadow(0 0 calc(var(--design-unit) * 14) rgba(49, 208, 255, 0.28));
|
|
}
|
|
|
|
.modal-close-glow {
|
|
filter: drop-shadow(
|
|
0 0 calc(var(--design-unit) * 4) rgba(110, 255, 255, 0.95)
|
|
)
|
|
drop-shadow(0 0 calc(var(--design-unit) * 12) rgba(48, 214, 255, 0.78))
|
|
drop-shadow(0 0 calc(var(--design-unit) * 24) rgba(18, 162, 255, 0.5));
|
|
}
|
|
|
|
.modal-title-glow {
|
|
text-shadow:
|
|
0 0 calc(var(--design-unit) * 2) rgba(224, 255, 255, 0.95),
|
|
0 0 calc(var(--design-unit) * 6) rgba(108, 247, 255, 0.82),
|
|
0 0 calc(var(--design-unit) * 14) rgba(48, 214, 255, 0.58);
|
|
}
|
|
|
|
.modal-title-gold-glow {
|
|
text-shadow:
|
|
0 0 calc(var(--design-unit) * 2) rgba(255, 248, 235, 0.9),
|
|
0 0 calc(var(--design-unit) * 8) rgba(254, 238, 176, 0.64),
|
|
0 0 calc(var(--design-unit) * 16) rgba(254, 238, 176, 0.38);
|
|
}
|
|
|
|
.desktop-control-chip {
|
|
margin-left: calc(var(--design-unit) * -4);
|
|
margin-right: calc(var(--design-unit) * -18);
|
|
}
|
|
|
|
.desktop-control-total {
|
|
margin-left: calc(var(--design-unit) * -26);
|
|
margin-right: calc(var(--design-unit) * -26);
|
|
}
|
|
|
|
.desktop-control-actions {
|
|
margin-left: calc(var(--design-unit) * -16);
|
|
margin-right: 0;
|
|
}
|
|
|
|
.desktop-control-confirm {
|
|
margin-left: calc(var(--design-unit) * -10);
|
|
}
|
|
|
|
.history-scroll-hidden {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
.history-scroll-hidden::-webkit-scrollbar {
|
|
width: 0;
|
|
height: 0;
|
|
display: none;
|
|
}
|
|
|
|
.desktop-title-vertical-marquee {
|
|
display: flex;
|
|
flex-direction: column;
|
|
animation: desktop-title-marquee-y 7s linear infinite;
|
|
will-change: transform;
|
|
}
|
|
|
|
@keyframes desktop-title-marquee-y {
|
|
from {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
to {
|
|
transform: translateY(-50%);
|
|
}
|
|
}
|
|
|
|
@property --gold-angle {
|
|
syntax: "<angle>";
|
|
inherits: false;
|
|
initial-value: 0deg;
|
|
}
|
|
|
|
@keyframes rotating-gold-border {
|
|
to {
|
|
--gold-angle: 360deg;
|
|
}
|
|
}
|
|
|
|
@keyframes gold-border-pulse {
|
|
0%,
|
|
100% {
|
|
opacity: 0.34;
|
|
transform: scale(0.992);
|
|
}
|
|
|
|
50% {
|
|
opacity: 0.54;
|
|
transform: scale(1.008);
|
|
}
|
|
}
|
|
|
|
.gold-reveal-shell {
|
|
--gold-angle: 0deg;
|
|
position: absolute;
|
|
inset: calc(var(--design-unit) * 2.6);
|
|
border-radius: calc(var(--design-unit) * 16);
|
|
overflow: hidden;
|
|
clip-path: inset(0 round calc(var(--design-unit) * 16));
|
|
pointer-events: none;
|
|
}
|
|
|
|
.gold-reveal-shell::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: calc(var(--design-unit) * 16);
|
|
padding: calc(var(--design-unit) * 5.6);
|
|
background: conic-gradient(
|
|
from var(--gold-angle),
|
|
#534217 10%,
|
|
#534217 20%,
|
|
#ffe226 45%,
|
|
#534217 60%,
|
|
#534217 85%,
|
|
#ffe226 95%,
|
|
#534217 100%
|
|
);
|
|
-webkit-mask:
|
|
linear-gradient(#fff 0 0) content-box,
|
|
linear-gradient(#fff 0 0);
|
|
-webkit-mask-composite: xor;
|
|
mask-composite: exclude;
|
|
animation: rotating-gold-border 8s linear infinite;
|
|
}
|
|
|
|
.gold-reveal-shell::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: calc(var(--design-unit) * 1);
|
|
border-radius: calc(var(--design-unit) * 15);
|
|
padding: calc(var(--design-unit) * 4);
|
|
background: conic-gradient(
|
|
from calc(var(--gold-angle) + 180deg),
|
|
rgba(255, 247, 210, 0) 0%,
|
|
rgba(255, 247, 210, 0) 66%,
|
|
rgba(255, 252, 232, 0.14) 71%,
|
|
rgba(255, 254, 244, 0.98) 75%,
|
|
rgba(255, 230, 130, 0.96) 79%,
|
|
rgba(255, 247, 210, 0.18) 84%,
|
|
rgba(255, 247, 210, 0) 90%,
|
|
rgba(255, 247, 210, 0) 100%
|
|
);
|
|
-webkit-mask:
|
|
linear-gradient(#fff 0 0) content-box,
|
|
linear-gradient(#fff 0 0);
|
|
-webkit-mask-composite: xor;
|
|
mask-composite: exclude;
|
|
animation: rotating-gold-border 2.1s linear infinite;
|
|
}
|
|
|
|
.gold-reveal-static-border {
|
|
position: absolute;
|
|
inset: calc(var(--design-unit) * 2.8);
|
|
border-radius: calc(var(--design-unit) * 16);
|
|
border: calc(var(--design-unit) * 7.4) solid rgba(181, 138, 40, 0.98);
|
|
box-shadow:
|
|
inset 0 0 calc(var(--design-unit) * 14) rgba(255, 241, 181, 0.38),
|
|
0 0 calc(var(--design-unit) * 18) rgba(255, 210, 102, 0.32);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.gold-reveal-glow {
|
|
position: absolute;
|
|
inset: calc(var(--design-unit) * 1.4);
|
|
border-radius: calc(var(--design-unit) * 18);
|
|
background: radial-gradient(
|
|
circle at center,
|
|
rgba(255, 226, 92, 0.18) 0%,
|
|
rgba(219, 161, 42, 0.14) 42%,
|
|
rgba(127, 86, 13, 0.08) 62%,
|
|
transparent 82%
|
|
);
|
|
filter: blur(calc(var(--design-unit) * 2.8));
|
|
opacity: 0.36;
|
|
pointer-events: none;
|
|
animation: gold-border-pulse 1.9s ease-in-out infinite;
|
|
}
|
|
}
|
|
|
|
@theme inline {
|
|
--font-heading: var(--font-sans);
|
|
--font-sans: "Geist Variable", sans-serif;
|
|
--color-sidebar-ring: var(--sidebar-ring);
|
|
--color-sidebar-border: var(--sidebar-border);
|
|
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
--color-sidebar-accent: var(--sidebar-accent);
|
|
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
|
--color-sidebar-primary: var(--sidebar-primary);
|
|
--color-sidebar-foreground: var(--sidebar-foreground);
|
|
--color-sidebar: var(--sidebar);
|
|
--color-chart-5: var(--chart-5);
|
|
--color-chart-4: var(--chart-4);
|
|
--color-chart-3: var(--chart-3);
|
|
--color-chart-2: var(--chart-2);
|
|
--color-chart-1: var(--chart-1);
|
|
--color-ring: var(--ring);
|
|
--color-input: var(--input);
|
|
--color-border: var(--border);
|
|
--color-destructive: var(--destructive);
|
|
--color-accent-foreground: var(--accent-foreground);
|
|
--color-accent: var(--accent);
|
|
--color-muted-foreground: var(--muted-foreground);
|
|
--color-muted: var(--muted);
|
|
--color-secondary-foreground: var(--secondary-foreground);
|
|
--color-secondary: var(--secondary);
|
|
--color-primary-foreground: var(--primary-foreground);
|
|
--color-primary: var(--primary);
|
|
--color-popover-foreground: var(--popover-foreground);
|
|
--color-popover: var(--popover);
|
|
--color-card-foreground: var(--card-foreground);
|
|
--color-card: var(--card);
|
|
--color-foreground: var(--foreground);
|
|
--color-background: var(--background);
|
|
--radius-sm: calc(var(--radius) * 0.6);
|
|
--radius-md: calc(var(--radius) * 0.8);
|
|
--radius-lg: var(--radius);
|
|
--radius-xl: calc(var(--radius) * 1.4);
|
|
--radius-2xl: calc(var(--radius) * 1.8);
|
|
--radius-3xl: calc(var(--radius) * 2.2);
|
|
--radius-4xl: calc(var(--radius) * 2.6);
|
|
}
|
|
|
|
.dark {
|
|
--background: oklch(0.145 0 0);
|
|
--foreground: oklch(0.985 0 0);
|
|
--card: oklch(0.205 0 0);
|
|
--card-foreground: oklch(0.985 0 0);
|
|
--popover: oklch(0.205 0 0);
|
|
--popover-foreground: oklch(0.985 0 0);
|
|
--primary: oklch(0.922 0 0);
|
|
--primary-foreground: oklch(0.205 0 0);
|
|
--secondary: oklch(0.269 0 0);
|
|
--secondary-foreground: oklch(0.985 0 0);
|
|
--muted: oklch(0.269 0 0);
|
|
--muted-foreground: oklch(0.708 0 0);
|
|
--accent: oklch(0.269 0 0);
|
|
--accent-foreground: oklch(0.985 0 0);
|
|
--destructive: oklch(0.704 0.191 22.216);
|
|
--border: oklch(1 0 0 / 10%);
|
|
--input: oklch(1 0 0 / 15%);
|
|
--ring: oklch(0.556 0 0);
|
|
--chart-1: oklch(0.87 0 0);
|
|
--chart-2: oklch(0.556 0 0);
|
|
--chart-3: oklch(0.439 0 0);
|
|
--chart-4: oklch(0.371 0 0);
|
|
--chart-5: oklch(0.269 0 0);
|
|
--sidebar: oklch(0.205 0 0);
|
|
--sidebar-foreground: oklch(0.985 0 0);
|
|
--sidebar-primary: oklch(0.488 0.243 264.376);
|
|
--sidebar-primary-foreground: oklch(0.985 0 0);
|
|
--sidebar-accent: oklch(0.269 0 0);
|
|
--sidebar-accent-foreground: oklch(0.985 0 0);
|
|
--sidebar-border: oklch(1 0 0 / 10%);
|
|
--sidebar-ring: oklch(0.556 0 0);
|
|
}
|