Spaces:
Sleeping
Sleeping
| """ | |
| 样式文件 - 集中管理 CSS 样式 (强制深色主题) | |
| """ | |
| MAHJONG_THEME_CSS = """ | |
| html, body{ background-color:#0b1220 !important; color-scheme: dark !important; } | |
| /* ===== 仅添加强制深色主题的关键代码 ===== */ | |
| :root { | |
| color-scheme: dark !important; | |
| } | |
| @media (prefers-color-scheme: light) { | |
| :root { | |
| color-scheme: dark !important; | |
| } | |
| } | |
| /* 修复HuggingFace可能添加的滤镜效果 */ | |
| .gradio-container { | |
| filter: none !important; | |
| -webkit-filter: none !important; | |
| } | |
| /* ===== Mahjong 主题配色 ===== */ | |
| :root{ | |
| --felt:#0f5132; /* 青 jade */ | |
| --felt-2:#09301d; | |
| --felt-light:#1c7d4f; | |
| --wood:#5e4430; | |
| --wood-2:#3f2f21; | |
| --paper:#f8f3e7; | |
| --ink:#f3f4f6; | |
| --muted:#cbd5e1; | |
| --accent: #ffcc4d; | |
| /* HERO 渐变（青→竹→朱） */ | |
| --hero-left:#041b16; | |
| --hero-mid:#0c6244; | |
| --hero-right:#b7452f; | |
| } | |
| body, .gradio-container{ | |
| background: radial-gradient(1200px 800px at 15% -20%, #143828 0%, #0a1f18 45%, #050c0a 100%) !important; | |
| } | |
| /* 顶部 HERO：左深右浅的线性渐变，白字清晰 */ | |
| .hero{ | |
| position:relative; | |
| background: linear-gradient(90deg, var(--hero-left) 0%, var(--hero-mid) 48%, var(--hero-right) 100%); | |
| color:#fff; /* 固定白字 */ | |
| text-shadow: 0 2px 6px rgba(0,0,0,.35); | |
| border-radius:20px; | |
| padding:18px 16px; | |
| box-shadow: 0 10px 28px rgba(0,0,0,.25), inset 0 -3px 0 rgba(255,255,255,.25); | |
| margin-bottom: 10px; | |
| } | |
| /* Hero 右上角麻将牌组 */ | |
| .hero-icons{ | |
| position:absolute; | |
| top:12px; | |
| right:18px; | |
| display:flex; | |
| gap:8px; | |
| } | |
| .hero-icons .hero-photo{ | |
| width:40px; | |
| height:50px; | |
| border-radius:8px; | |
| background: linear-gradient(180deg, #fdf9f0 0%, #efe4cf 55%, #d9c4a3 100%); | |
| box-shadow: 0 4px 0 rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.8); | |
| border:1px solid rgba(0,0,0,.28); | |
| background-color:#fdf9f0; | |
| background-size:cover; | |
| background-position:center; | |
| background-repeat:no-repeat; | |
| } | |
| /* 左侧设置卡片（半透明） */ | |
| .side-card{ | |
| background: rgba(255,255,255,.06); | |
| border: 1px solid rgba(255,255,255,.12); | |
| border-radius:16px; padding:14px; | |
| box-shadow: 0 4px 14px rgba(0,0,0,.18); | |
| backdrop-filter: blur(3px); | |
| color:var(--ink); | |
| } | |
| .side-card h3{ margin:0 0 8px 0; } | |
| /* 麻将桌容器：木框 + 翡翠台呢 + 竹纹 */ | |
| .table{ | |
| position:relative; | |
| background: | |
| radial-gradient(900px 600px at 35% 10%, rgba(255,255,255,.08) 0%, transparent 60%), | |
| radial-gradient(1200px 800px at 35% 10%, var(--felt) 0%, var(--felt-2) 60%, #041912 100%); | |
| border-radius:22px; | |
| border: 12px solid transparent; | |
| background-clip: padding-box; | |
| box-shadow: | |
| inset 0 0 50px rgba(0,0,0,.35), | |
| 0 20px 60px rgba(0,0,0,.35); | |
| } | |
| .table:before{ /* 木质外框 */ | |
| content:""; | |
| position:absolute; inset:-14px; | |
| border-radius:28px; | |
| background: linear-gradient(90deg, var(--wood), var(--wood-2)); | |
| z-index:-1; | |
| box-shadow: 0 8px 28px rgba(0,0,0,.45), inset 0 0 8px rgba(255,255,255,.1); | |
| } | |
| .table:after{ /* 低透竹纹 */ | |
| content:""; | |
| position:absolute; inset:0; | |
| background-image: linear-gradient(120deg, rgba(255,255,255,.05) 15%, transparent 30%), | |
| linear-gradient(300deg, rgba(0,0,0,.12) 20%, transparent 40%); | |
| background-size: 140px 140px; | |
| pointer-events:none; | |
| } | |
| /* 聊天组件细节：头像更小、气泡更易读 */ | |
| .custom-chatbot .message{ font-size:16px; line-height:1.6; color:var(--ink); word-break:break-word; } | |
| .custom-chatbot .message.user{ background: rgba(255,255,255,.08) !important; } | |
| .custom-chatbot .message.bot{ background: rgba(0,0,0,.20) !important; } | |
| /* 按钮：麻将牌风格 */ | |
| .gradio-container button.gr-button{ | |
| border:2px solid rgba(255,255,255,.35); | |
| color:#193c2a; | |
| font-weight:700; | |
| letter-spacing:.3px; | |
| background: linear-gradient(180deg, var(--paper) 0%, #efe6d2 60%, #dccdb0 100%); | |
| border-radius:18px; | |
| box-shadow: 0 6px 0 rgba(0,0,0,.35), inset 0 0 0 2px rgba(255,255,255,.6); | |
| padding:10px 20px; | |
| transition: transform .08s ease, box-shadow .08s ease; | |
| } | |
| .gradio-container button.gr-button:hover{ transform: translateY(-1px); } | |
| .gradio-container button.gr-button:active{ | |
| transform: translateY(2px); | |
| box-shadow: 0 3px 0 rgba(0,0,0,.45), inset 0 0 0 2px rgba(255,255,255,.6); | |
| } | |
| /* 输入框在桌面里更融洽 */ | |
| .table .gr-textbox textarea{ | |
| background: rgba(0,0,0,.20) !important; color:#e5e7eb !important; | |
| border-radius:12px !important; | |
| border:1px solid rgba(255,255,255,.18) !important; | |
| } | |
| /* 小提示文字颜色 */ | |
| .hint{ color:var(--muted); font-size:12px; } | |
| @media (max-width: 820px){ | |
| .custom-chatbot .avatar, | |
| .custom-chatbot .message .avatar{ | |
| width: 62px !important; | |
| height: 62px !important; | |
| } | |
| .custom-chatbot .avatar-image{ width:58px !important; height:58px !important; } | |
| } | |
| /* === 修复 ChatInterface 内嵌发送/停止按钮在深色主题下不可见的问题 === */ | |
| :where(.gradio-container) button[aria-label="submit"], | |
| :where(.gradio-container) button[aria-label="stop"]{ | |
| display: inline-flex !important; | |
| align-items: center; | |
| justify-content: center; | |
| opacity: 1 !important; | |
| visibility: visible !important; | |
| pointer-events: auto !important; | |
| border: 1px solid rgba(255,255,255,.22) !important; | |
| background: rgba(255,255,255,.09) !important; | |
| color: #fff !important; | |
| border-radius: 10px !important; | |
| height: 36px !important; | |
| width: 36px !important; | |
| cursor: pointer !important; | |
| } | |
| /* 保证输入框容器能正确容纳右侧内嵌按钮 */ | |
| :where(.gradio-container) .gr-chat-interface .gr-textbox{ | |
| position: relative; | |
| } | |
| :where(.gradio-container) .gr-chat-interface .gr-textbox textarea{ | |
| padding-right: 48px !important; | |
| } | |
| /* === Chatbot 头像尺寸 & 对齐（稳定版）=== */ | |
| /* 放大 Chatbot 头像（统一设置） */ | |
| .custom-chatbot .avatar, | |
| .custom-chatbot .message .avatar{ | |
| width: 88px !important; | |
| height: 88px !important; | |
| min-width: 88px !important; | |
| min-height: 88px !important; | |
| border-radius: 9999px !important; | |
| overflow: hidden !important; | |
| border: 2px solid #ffffffcc !important; | |
| box-shadow: 0 2px 6px rgba(0,0,0,.25) !important; | |
| flex-shrink: 0 !important; | |
| align-self: flex-start !important; | |
| } | |
| /* 控制头像尺寸（命中 gradio v4/5 的 DOM 结构） */ | |
| .custom-chatbot .avatar-image { | |
| width: 82px !important; | |
| height: 82px !important; | |
| border-radius: 50% !important; /* 保持圆形 */ | |
| object-fit: cover !important; | |
| } | |
| /* 可选：调整气泡和头像的间距 */ | |
| .custom-chatbot .message { | |
| gap: 12px !important; /* 改成更大/更小 */ | |
| } | |
| /* 头像图片填充容器，不变形 */ | |
| .custom-chatbot .avatar > img, | |
| .custom-chatbot .avatar-image{ | |
| width: 100% !important; | |
| height: 100% !important; | |
| object-fit: cover !important; | |
| object-position: 50% 50% !important; | |
| display: block !important; | |
| border: 0 !important; | |
| background: transparent !important; | |
| } | |
| /* 头像与气泡的间距与对齐（可选） */ | |
| .custom-chatbot .message{ gap: 12px !important; align-items: flex-start !important; } | |
| .custom-chatbot .message .message-content{ margin-top: 2px !important; } | |
| """ |