Mars
8a1ba0fd95
- 将原移动端页面重命名为 Mobile*，新增 22 个 Desktop* 视图与 DesktopShell 布局体系 - 路由入口改为 Wrapper 视图，通过 useViewport（≥1024px）自动切换移动/桌面端 - 新增投注单面板、盘口弹层、联赛侧栏、数据表格等桌面组件及独立样式令牌 - 扩展 betSlip store、串关筛选、冠军盘、Toast/悬浮信箱等交互与三语 i18n - 公告/消息 Hub 拆分移动与桌面实现；API 投注/钱包/充值记录支持 pageSize 分页
103 lines
2.4 KiB
CSS
103 lines
2.4 KiB
CSS
/* Hover Cursors and active resets */
|
|
.desktop-shell a,
|
|
.desktop-shell button,
|
|
.desktop-shell select,
|
|
.desktop-shell [role="button"],
|
|
.desktop-shell .clickable {
|
|
cursor: pointer;
|
|
touch-action: auto;
|
|
}
|
|
|
|
/* Scrollbar customizations */
|
|
.desktop-shell ::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
.desktop-shell ::-webkit-scrollbar-track {
|
|
background: rgba(0, 0, 0, 0.1);
|
|
}
|
|
.desktop-shell ::-webkit-scrollbar-thumb {
|
|
background: rgba(255, 255, 255, 0.15);
|
|
border-radius: 3px;
|
|
}
|
|
.desktop-shell ::-webkit-scrollbar-thumb:hover {
|
|
background: var(--primary-light);
|
|
}
|
|
|
|
/* Hover highlights */
|
|
.desktop-shell .hover-bg:hover {
|
|
background-color: var(--bg-hover) !important;
|
|
}
|
|
|
|
.desktop-shell .hover-gold-soft:hover {
|
|
border-color: var(--border-gold) !important;
|
|
box-shadow: var(--glow-gold);
|
|
}
|
|
|
|
.desktop-shell .hover-gold-text:hover {
|
|
color: var(--primary-light) !important;
|
|
}
|
|
|
|
/* Form elements styling */
|
|
.desktop-shell input {
|
|
padding: 10px 12px;
|
|
font-size: 13px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.desktop-shell input:focus {
|
|
border-color: var(--border-gold) !important;
|
|
box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.2) !important;
|
|
}
|
|
|
|
/* Button hover overrides */
|
|
.desktop-shell .btn-gold-outline {
|
|
transition: background-color 0.2s, border-color 0.2s;
|
|
}
|
|
.desktop-shell .btn-gold-outline:hover:not(:disabled) {
|
|
background: rgba(212, 175, 55, 0.08);
|
|
border-color: var(--border-gold);
|
|
}
|
|
.desktop-shell .btn-gold-outline:active {
|
|
transform: none; /* No mobile shrink on PC */
|
|
}
|
|
|
|
.desktop-shell .btn-primary {
|
|
transition: filter 0.2s, transform 0.1s;
|
|
}
|
|
.desktop-shell .btn-primary:hover:not(:disabled) {
|
|
filter: brightness(1.1);
|
|
}
|
|
.desktop-shell .btn-primary:active {
|
|
transform: translateY(1px);
|
|
}
|
|
|
|
/* Skeleton rows animation for high density PC loaders */
|
|
@keyframes desktop-skeleton-glow {
|
|
0% { background-position: -200% 0; }
|
|
100% { background-position: 200% 0; }
|
|
}
|
|
|
|
.desktop-skeleton {
|
|
background: linear-gradient(90deg, #161616 25%, #222222 37%, #161616 63%);
|
|
background-size: 400% 100%;
|
|
animation: desktop-skeleton-glow 1.4s ease infinite;
|
|
}
|
|
|
|
@keyframes bet-locate-pulse {
|
|
0%,
|
|
100% {
|
|
box-shadow: 0 0 0 0 rgba(212, 175, 55, 0);
|
|
}
|
|
50% {
|
|
box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.45);
|
|
}
|
|
}
|
|
|
|
.desktop-shell .bet-locate-flash {
|
|
animation: bet-locate-pulse 0.6s ease 3;
|
|
border-color: var(--border-gold) !important;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|