kang
add3d1fc05
Some checks failed
lotteryfront CI / build (push) Has been cancelled
- Added mobile-specific styles to the HallWalletStrip component for better usability on smaller screens. - Adjusted padding, font sizes, and spacing based on device type. - Introduced a new hook `useIsMobile` to determine the device type. feat: sort ticket items by provider code - Updated the sorting logic in `sortTicketGroupItems` to include provider code for better organization of ticket items. feat: display provider information in ticket order details - Added a `providerLabel` function to format provider information. - Updated `TicketOrderDetailScreen` and `TicketOrdersListScreen` to display provider name and code. feat: enhance ticket item types with provider information - Extended `TicketItemListRow` and `TicketItemDetailPayload` types to include optional provider code and name. feat: add API for fetching bet providers - Created a new API endpoint to retrieve bet providers. - Defined types for bet provider data in `bet-provider.ts`. chore: update player spacing constants - Adjusted padding values in `player-spacing.ts` for improved layout consistency.
323 lines
7.7 KiB
CSS
323 lines
7.7 KiB
CSS
@import "tailwindcss";
|
||
@import "tw-animate-css";
|
||
@import "shadcn/tailwind.css";
|
||
|
||
@custom-variant dark (&:is(.dark *));
|
||
|
||
@theme inline {
|
||
--color-background: var(--background);
|
||
--color-foreground: var(--foreground);
|
||
--font-sans: var(--font-geist-sans);
|
||
--font-mono: var(--font-geist-mono);
|
||
--font-heading: var(--font-sans);
|
||
--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);
|
||
--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);
|
||
}
|
||
|
||
:root {
|
||
--player-viewport-max: 480px;
|
||
--player-sidebar-width: 0px;
|
||
--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);
|
||
}
|
||
|
||
.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);
|
||
}
|
||
|
||
@layer base {
|
||
* {
|
||
@apply border-border outline-ring/50;
|
||
}
|
||
html {
|
||
@apply font-sans;
|
||
-webkit-text-size-adjust: 100%;
|
||
}
|
||
body {
|
||
@apply bg-background text-foreground;
|
||
-webkit-tap-highlight-color: transparent;
|
||
-webkit-touch-callout: none;
|
||
}
|
||
html:lang(ne) {
|
||
font-family:
|
||
var(--font-noto-sans-devanagari),
|
||
var(--font-geist-sans),
|
||
system-ui,
|
||
sans-serif;
|
||
}
|
||
button, a, [role="button"] {
|
||
touch-action: manipulation;
|
||
}
|
||
}
|
||
|
||
/* 下注表格横向滚动 */
|
||
.player-table-scroll {
|
||
-webkit-overflow-scrolling: touch;
|
||
scrollbar-width: thin;
|
||
}
|
||
|
||
.player-table-scroll-wrap {
|
||
position: relative;
|
||
}
|
||
|
||
/* 玩家端侧栏：浅色底 + 与后台一致的红色激活态 */
|
||
.player-sidebar {
|
||
--sidebar: #ffffff;
|
||
--sidebar-foreground: #475569;
|
||
--sidebar-primary: #e60012;
|
||
--sidebar-primary-foreground: #ffffff;
|
||
--sidebar-accent: #f1f5f9;
|
||
--sidebar-accent-foreground: #0f172a;
|
||
--sidebar-border: #e4ebf5;
|
||
}
|
||
|
||
/* 玩家端桌面壳：侧栏宽度供遮罩/弹层定位 */
|
||
@media (min-width: 1024px) {
|
||
.player-desktop-shell {
|
||
--player-sidebar-width: 14rem;
|
||
}
|
||
}
|
||
|
||
/* 玩家端 Toast：顶部居中、紧凑尺寸（位置见 components/ui/sonner.tsx） */
|
||
[data-sonner-toaster] {
|
||
--width: min(280px, calc(var(--player-viewport-max, 480px) - 24px));
|
||
}
|
||
|
||
[data-sonner-toast][data-styled="true"] {
|
||
padding: 8px 12px;
|
||
font-size: 12px;
|
||
line-height: 1.35;
|
||
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.1);
|
||
}
|
||
|
||
[data-sonner-toast][data-styled="true"] [data-title] {
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
line-height: 1.35;
|
||
}
|
||
|
||
[data-sonner-toast][data-styled="true"] [data-description] {
|
||
font-size: 11px;
|
||
line-height: 1.35;
|
||
}
|
||
|
||
[data-sonner-toast][data-styled="true"] [data-icon] svg {
|
||
width: 14px;
|
||
height: 14px;
|
||
}
|
||
|
||
/* Jackpot 爆池全屏动画 */
|
||
@keyframes jackpot-backdrop-in {
|
||
from {
|
||
opacity: 0;
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@keyframes jackpot-card-in {
|
||
0% {
|
||
opacity: 0;
|
||
transform: scale(0.72) translateY(24px);
|
||
}
|
||
55% {
|
||
opacity: 1;
|
||
transform: scale(1.04) translateY(-4px);
|
||
}
|
||
100% {
|
||
opacity: 1;
|
||
transform: scale(1) translateY(0);
|
||
}
|
||
}
|
||
|
||
@keyframes jackpot-flash {
|
||
0% {
|
||
opacity: 0.85;
|
||
}
|
||
100% {
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
@keyframes jackpot-shimmer {
|
||
0% {
|
||
background-position: 200% center;
|
||
}
|
||
100% {
|
||
background-position: -200% center;
|
||
}
|
||
}
|
||
|
||
@keyframes jackpot-lightning {
|
||
0%,
|
||
100% {
|
||
filter: drop-shadow(0 0 6px rgba(245, 197, 66, 0.5));
|
||
transform: scale(1);
|
||
}
|
||
40% {
|
||
filter: drop-shadow(0 0 18px rgba(255, 220, 100, 0.95));
|
||
transform: scale(1.12);
|
||
}
|
||
55% {
|
||
filter: drop-shadow(0 0 8px rgba(245, 197, 66, 0.6));
|
||
transform: scale(0.96);
|
||
}
|
||
}
|
||
|
||
@keyframes jackpot-ring-pulse {
|
||
0% {
|
||
transform: scale(0.85);
|
||
opacity: 0.7;
|
||
}
|
||
100% {
|
||
transform: scale(1.35);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
@keyframes jackpot-particle {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translateY(0) scale(0.4);
|
||
}
|
||
15% {
|
||
opacity: 1;
|
||
}
|
||
100% {
|
||
opacity: 0;
|
||
transform: translateY(-120px) scale(1);
|
||
}
|
||
}
|
||
|
||
@keyframes jackpot-digit-pop {
|
||
0% {
|
||
transform: scale(1.35);
|
||
filter: brightness(1.8);
|
||
}
|
||
100% {
|
||
transform: scale(1);
|
||
filter: brightness(1);
|
||
}
|
||
}
|
||
|
||
@keyframes jackpot-amount-glow {
|
||
0%,
|
||
100% {
|
||
text-shadow: 0 0 8px rgba(201, 162, 39, 0.25);
|
||
}
|
||
50% {
|
||
text-shadow: 0 0 16px rgba(201, 162, 39, 0.55);
|
||
}
|
||
}
|
||
|
||
@keyframes jackpot-amount-row-glow {
|
||
0%,
|
||
100% {
|
||
box-shadow: 0 0 0 rgba(245, 197, 66, 0);
|
||
}
|
||
50% {
|
||
box-shadow: 0 0 20px rgba(245, 197, 66, 0.22);
|
||
}
|
||
}
|
||
|
||
@keyframes jackpot-border-spin {
|
||
to {
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|