""" 样式文件 - 集中管理 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; } """