Update styles.py

styles.py

@@ -1,200 +1,457 @@
 """
-样式文件 - 集中管理 CSS 样式
+样式文件 - 集中管理 CSS 样式 (强制深色主题)
 """
 
 POKER_THEME_CSS = """
-
+/* ===== 强制深色主题的核心代码 ===== */
 @media (prefers-color-scheme: light) {
   :root {
     color-scheme: dark !important;
   }
 }
 
-
-:root{
+:root {
   color-scheme: dark !important;
-/* 桌面与通用色，不变 */
---felt:#0e6b3d;         /* 绿色绒面 */
---felt-2:#0b5a34;
---wood:#72451d;         
---wood-2:#5e3717;
---ink:#f3f4f6;          
---muted:#cbd5e1;
+  /* 桌面与通用色，不变 */
+  --felt: #0e6b3d;         /* 绿色绒面 */
+  --felt-2: #0b5a34;
+  --wood: #72451d;         
+  --wood-2: #5e3717;
+  --ink: #f3f4f6;          
+  --muted: #cbd5e1;
 
-/* ===== HERO 渐变预设（左深 → 右浅）===== */
-/* 预设 A：Emerald → Soft Rouge（推荐，赌场绿+柔和红，左侧白字对比最佳） */
---hero-left:#081813;     /* 深黑绿 */
---hero-mid:#0e6b3d;      /* 翡翠绿 */
---hero-right:#ff8a80;    /* 浅柔红 */
+  /* ===== HERO 渐变预设（左深 → 右浅）===== */
+  /* 预设 A：Emerald → Soft Rouge（推荐，赌场绿+柔和红，左侧白字对比最佳） */
+  --hero-left: #081813;     /* 深黑绿 */
+  --hero-mid: #0e6b3d;      /* 翡翠绿 */
+  --hero-right: #ff8a80;    /* 浅柔红 */
 
-/* 预设 B：Rouge Noir（更偏红黑风） */
-/* --hero-left:#0b0b0b;  --hero-mid:#7a0c0c;  --hero-right:#ff6b6b; */
+  /* 预设 B：Rouge Noir（更偏红黑风） */
+  /* --hero-left:#0b0b0b;  --hero-mid:#7a0c0c;  --hero-right:#ff6b6b; */
+
+  /* 预设 C：Emerald Noir（绿黑→薄荷） */
+  /* --hero-left:#071510;  --hero-mid:#075e3a;  --hero-right:#5bd1a8; */
+}
 
-/* 预设 C：Emerald Noir（绿黑→薄荷） */
-/* --hero-left:#071510;  --hero-mid:#075e3a;  --hero-right:#5bd1a8; */
+/* 强制所有元素使用深色模式 */
+* {
+  background-color: transparent !important;
+  color: #f3f4f6 !important;
+}
+
+body, .gradio-container {
+  background: radial-gradient(1200px 800px at 20% -10%, #1b4731 0%, #0b2b1d 35%, #081f16 100%) !important;
+  color-scheme: dark !important;
+  filter: none !important;
+  overflow-x: hidden !important;
 }
 
-body, .gradio-container{
-background: radial-gradient(1200px 800px at 20% -10%, #1b4731 0%, #0b2b1d 35%, #081f16 100%) !important;
+/* 修复HuggingFace默认样式覆盖问题 */
+.gradio-container {
+  background: radial-gradient(1200px 800px at 20% -10%, #1b4731 0%, #0b2b1d 35%, #081f16 100%) !important;
+  color: #f3f4f6 !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 {
+  position: relative;
+  background: linear-gradient(90deg, var(--hero-left) 0%, var(--hero-mid) 48%, var(--hero-right) 100%) !important;
+  color: #fff !important;
+  text-shadow: 0 2px 6px rgba(0, 0, 0, .35) !important;
+  border-radius: 20px !important;
+  padding: 18px 16px !important;
+  box-shadow: 0 10px 28px rgba(0, 0, 0, .25), inset 0 -3px 0 rgba(255, 255, 255, .25) !important;
+  margin-bottom: 10px !important;
 }
 
 /* 花色水印略深一点但更透明，避免抢左侧文字注意力 */
-.hero:after{
-color:#fff;
-content:"♠ ♣ ♥ ♦";
-position:absolute; right:16px; top:10px; font-weight:700; font-size:28px; letter-spacing:6px;
+.hero:after {
+  color: #fff !important;
+  content: "♠ ♣ ♥ ♦" !important;
+  position: absolute !important;
+  right: 16px !important;
+  top: 10px !important;
+  font-weight: 700 !important;
+  font-size: 28px !important;
+  letter-spacing: 6px !important;
 }
 
 /* 左侧设置卡片（半透明） */
-.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 {
+  background: rgba(255, 255, 255, .06) !important;
+  border: 1px solid rgba(255, 255, 255, .12) !important;
+  border-radius: 16px !important;
+  padding: 14px !important;
+  box-shadow: 0 4px 14px rgba(0, 0, 0, .18) !important;
+  backdrop-filter: blur(3px) !important;
+  color: var(--ink) !important;
+}
+.side-card h3 {
+  margin: 0 0 8px 0 !important;
 }
-.side-card h3{ margin:0 0 8px 0; }
 
 /* 扑克桌容器：木框 + 绿色绒面 + 暗纹 */
-.table{
-  position:relative;
-  background: radial-gradient(1200px 800px at 35% 10%, var(--felt) 0%, var(--felt-2) 55%, #083c25 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:
-    radial-gradient(12px 12px at 12% 16%, rgba(255,255,255,.06) 0 40%, transparent 45%),
-    radial-gradient(10px 10px at 78% 24%, rgba(255,255,255,.05) 0 40%, transparent 45%),
-    radial-gradient(12px 12px at 30% 70%, rgba(0,0,0,.10) 0 40%, transparent 45%),
-    radial-gradient(8px 8px at 64% 82%, rgba(0,0,0,.09) 0 40%, transparent 45%);
-  pointer-events:none;
+.table {
+  position: relative !important;
+  background: radial-gradient(1200px 800px at 35% 10%, var(--felt) 0%, var(--felt-2) 55%, #083c25 100%) !important;
+  border-radius: 22px !important;
+  border: 12px solid transparent !important;
+  background-clip: padding-box !important;
+  box-shadow: inset 0 0 50px rgba(0, 0, 0, .35), 0 20px 60px rgba(0, 0, 0, .35) !important;
+}
+.table:before { /* 木质外框 */
+  content: "" !important;
+  position: absolute !important;
+  inset: -14px !important;
+  border-radius: 28px !important;
+  background: linear-gradient(90deg, var(--wood), var(--wood-2)) !important;
+  z-index: -1 !important;
+  box-shadow: 0 8px 28px rgba(0, 0, 0, .45), inset 0 0 8px rgba(255, 255, 255, .1) !important;
+}
+.table:after { /* 低透水印：花色散点 */
+  content: "" !important;
+  position: absolute !important;
+  inset: 0 !important;
+  background-image: radial-gradient(12px 12px at 12% 16%, rgba(255, 255, 255, .06) 0 40%, transparent 45%),
+                   radial-gradient(10px 10px at 78% 24%, rgba(255, 255, 255, .05) 0 40%, transparent 45%),
+                   radial-gradient(12px 12px at 30% 70%, rgba(0, 0, 0, .10) 0 40%, transparent 45%),
+                   radial-gradient(8px 8px at 64% 82%, rgba(0, 0, 0, .09) 0 40%, transparent 45%) !important;
+  pointer-events: none !important;
 }
 
 /* 聊天组件细节：头像更小、气泡更易读 */
-
-.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; }
+.custom-chatbot .message {
+  font-size: 16px !important;
+  line-height: 1.6 !important;
+  color: var(--ink) !important;
+  word-break: break-word !important;
+}
+.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:none; color:#fff; font-weight:700; letter-spacing:.3px;
-  background: radial-gradient(circle at 50% 38%, #ff6b6b 0%, #e53935 60%, #b71c1c 100%);
-  border-radius:999px;
-  box-shadow: 0 8px 0 #7f1010, inset 0 0 0 5px #fff, inset 0 0 0 10px rgba(255,255,255,.35);
-  padding:10px 18px;
-  transition: transform .08s ease, box-shadow .08s ease;
+.gradio-container button.gr-button {
+  border: none !important;
+  color: #fff !important;
+  font-weight: 700 !important;
+  letter-spacing: .3px !important;
+  background: radial-gradient(circle at 50% 38%, #ff6b6b 0%, #e53935 60%, #b71c1c 100%) !important;
+  border-radius: 999px !important;
+  box-shadow: 0 8px 0 #7f1010, inset 0 0 0 5px #fff, inset 0 0 0 10px rgba(255, 255, 255, .35) !important;
+  padding: 10px 18px !important;
+  transition: transform .08s ease, box-shadow .08s ease !important;
+}
+.gradio-container button.gr-button:hover {
+  transform: translateY(-1px) !important;
 }
-.gradio-container button.gr-button:hover{ transform: translateY(-1px); }
-.gradio-container button.gr-button:active{
-  transform: translateY(2px);
-  box-shadow: 0 4px 0 #7f1010, inset 0 0 0 5px #fff, inset 0 0 0 10px rgba(255,255,255,.35);
+.gradio-container button.gr-button:active {
+  transform: translateY(2px) !important;
+  box-shadow: 0 4px 0 #7f1010, inset 0 0 0 5px #fff, inset 0 0 0 10px rgba(255, 255, 255, .35) !important;
 }
 
 /* 输入框在桌面里更融洽 */
-.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;
+.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; }
+.hint {
+  color: var(--muted) !important;
+  font-size: 12px !important;
+}
 
-@media (max-width: 820px){
-  .custom-chatbot .avatar-image{ width:30px !important; height:30px !important; }
+@media (max-width: 820px) {
+  .custom-chatbot .avatar-image {
+    width: 30px !important;
+    height: 30px !important;
+  }
 }
+
 /* === 修复 ChatInterface 内嵌发送/停止按钮在深色主题下不可见的问题 === */
 :where(.gradio-container) button[aria-label="submit"],
-:where(.gradio-container) button[aria-label="stop"]{
+: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;
+  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;          /* 也可以设成 auto，保持圆角小按钮风格 */
+  width: 36px !important;
   cursor: pointer !important;
 }
 
 /* 保证输入框容器能正确容纳右侧内嵌按钮 */
-:where(.gradio-container) .gr-chat-interface .gr-textbox{
-  position: relative;
+:where(.gradio-container) .gr-chat-interface .gr-textbox {
+  position: relative !important;
 }
-:where(.gradio-container) .gr-chat-interface .gr-textbox textarea{
-  padding-right: 48px !important;  /* 给右侧按钮留点空间，避免遮盖 */
+: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;        /* ← 改这里：56/64/72 都可以 */
+.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;
+  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;       /* 与气泡顶部对齐 */
+  align-self: flex-start !important;
 }
 
 /* 头像图片填充容器，不变形 */
 .custom-chatbot .avatar > img,
-.custom-chatbot .avatar-image{
+.custom-chatbot .avatar-image {
   width: 100% !important;
   height: 100% !important;
-  object-fit: cover !important;       /* ▶ 若想完整显示头像不裁剪，改为 contain */
+  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; }
+/* 头像与气泡的间距与对齐 */
+.custom-chatbot .message {
+  gap: 12px !important;
+  align-items: flex-start !important;
+}
+.custom-chatbot .message .message-content {
+  margin-top: 2px !important;
+}
+
+/* ===== 关键修复：覆盖HuggingFace默认样式 ===== */
+/* 按钮样式修复 */
+.button {
+  background: rgba(255, 255, 255, 0.1) !important;
+  border: 1px solid rgba(255, 255, 255, 0.2) !important;
+  color: white !important;
+  transition: all 0.3s ease !important;
+}
 
+.button:hover {
+  background: rgba(255, 255, 255, 0.2) !important;
+  transform: translateY(-2px) !important;
+}
 
-"""
+/* 输入框修复 */
+input, textarea, select {
+  background: rgba(0, 0, 0, 0.2) !important;
+  border: 1px solid rgba(255, 255, 255, 0.15) !important;
+  color: white !important;
+}
+
+/* Gradio组件修复 */
+.gradio-container .prose h1,
+.gradio-container .prose h2,
+.gradio-container .prose h3,
+.gradio-container .prose h4,
+.gradio-container .prose h5,
+.gradio-container .prose p {
+  color: #f3f4f6 !important;
+}
+
+/* 移除可能的滤镜效果（HuggingFace有时会添加） */
+.gradio-container {
+  filter: none !important;
+  -webkit-filter: none !important;
+}
+
+/* 强制所有文本颜色为浅色 */
+* {
+  color: #f3f4f6 !important;
+}
+
+/* 修复可能的背景覆盖问题 */
+body, .gradio-container, .container {
+  background-color: #081f16 !important;
+  background-image: radial-gradient(1200px 800px at 20% -10%, #1b4731 0%, #0b2b1d 35%, #081f16 100%) !important;
+}
+
+/* 确保滚动条也是深色 */
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+::-webkit-scrollbar-track {
+  background: #0b2b1d;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #0e6b3d;
+  border-radius: 5px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #1e8b5d;
+}
+
+/* 修复Gradio默认样式覆盖 */
+.gradio-container .block {
+  background: transparent !important;
+}
+.gradio-container .block-label {
+  color: #f3f4f6 !important;
+}
+.gradio-container .block-title {
+  color: #f3f4f6 !important;
+}
+.gradio-container .block-subtitle {
+  color: #cbd5e1 !important;
+}
 
+/* 修复可能的透明度问题 */
+.gradio-container .block.svelte-1gfkn6j {
+  background: rgba(0, 0, 0, 0.2) !important;
+}
 
+/* 修复可能的边框问题 */
+.gradio-container .block-border {
+  border-color: rgba(255, 255, 255, 0.1) !important;
+}
 
+/* 修复可能的阴影问题 */
+.gradio-container .block-shadow {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
+}
+
+/* 修复可能的悬停效果 */
+.gradio-container .block:hover {
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35) !important;
+}
 
+/* 修复可能的焦点效果 */
+.gradio-container .block:focus-within {
+  box-shadow: 0 0 0 2px #0e6b3d, 0 0 0 4px rgba(14, 107, 61, 0.5) !important;
+}
+
+/* 修复可能的禁用状态 */
+.gradio-container .block:disabled {
+  opacity: 0.6 !important;
+}
+
+/* 修复可能的错误状态 */
+.gradio-container .block-error {
+  border-color: #e53935 !important;
+  box-shadow: 0 0 0 2px rgba(229, 57, 53, 0.3) !important;
+}
+
+/* 修复可能的警告状态 */
+.gradio-container .block-warning {
+  border-color: #ff9800 !important;
+  box-shadow: 0 0 0 2px rgba(255, 152, 0, 0.3) !important;
+}
+
+/* 修复可能的成功状态 */
+.gradio-container .block-success {
+  border-color: #4caf50 !important;
+  box-shadow: 0 0 0 2px rgba(76, 175, 76, 0.3) !important;
+}
+
+/* 修复可能的加载状态 */
+.gradio-container .block-loading {
+  opacity: 0.8 !important;
+}
+
+/* 修复可能的分割线 */
+.gradio-container .block-divider {
+  border-color: rgba(255, 255, 255, 0.1) !important;
+}
+
+/* 修复可能的分隔线 */
+.gradio-container .block-separator {
+  border-color: rgba(255, 255, 255, 0.1) !important;
+}
+
+/* 修复可能的页脚 */
+.gradio-container .block-footer {
+  background: rgba(0, 0, 0, 0.2) !important;
+  color: #f3f4f6 !important;
+}
+
+/* 修复可能的标题 */
+.gradio-container .block-header {
+  background: rgba(0, 0, 0, 0.2) !important;
+  color: #f3f4f6 !important;
+}
+
+/* 修复可能的副标题 */
+.gradio-container .block-subheader {
+  color: #cbd5e1 !important;
+}
+
+/* 修复可能的提示文本 */
+.gradio-container .block-hint {
+  color: #94a3b8 !important;
+}
+
+/* 修复可能的链接 */
+.gradio-container .block-link {
+  color: #60a5fa !important;
+}
+.gradio-container .block-link:hover {
+  color: #3b82f6 !important;
+  text-decoration: underline !important;
+}
+
+/* 修复可能的下拉菜单 */
+.gradio-container .block-dropdown {
+  background: rgba(0, 0, 0, 0.2) !important;
+  border-color: rgba(255, 255, 255, 0.1) !important;
+  color: #f3f4f6 !important;
+}
+.gradio-container .block-dropdown:hover {
+  border-color: rgba(255, 255, 255, 0.3) !important;
+}
+.gradio-container .block-dropdown:focus {
+  border-color: #0e6b3d !important;
+  box-shadow: 0 0 0 2px rgba(14, 107, 61, 0.5) !important;
+}
+
+/* 修复可能的复选框 */
+.gradio-container .block-checkbox {
+  border-color: rgba(255, 255, 255, 0.3) !important;
+  background: rgba(0, 0, 0, 0.2) !important;
+}
+.gradio-container .block-checkbox:checked {
+  background: #0e6b3d !important;
+  border-color: #0e6b3d !important;
+}
+
+/* 修复可能的单选按钮 */
+.gradio-container .block-radio {
+  border-color: rgba(255, 255, 255, 0.3) !important;
+  background: rgba(0, 0, 0, 0.2) !important;
+}
+.gradio-container .block-radio:checked {
+  background: #0e6b3d !important;
+  border-color: #0e6b3d !important;
+}
+
+/* 修复可能的滑块 */
+.gradio-container .block-slider {
+  background: rgba(0, 0, 0, 0.2) !important;
+  border-color: rgba(255, 255, 255, 0.1) !important;
+}
+.gradio-container .block-slider-thumb {
+  background: #0e6b3d !important;
+  border-color: #0e6b3d !important;
+}
+"""