/* --- 基础样式 (无变化) --- */ * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background: #f5f5f5; font-size: 10pt; } .container { display: flex; flex-direction: column; height: 100vh; } .header { height: 50px; border-bottom: 1px solid #eee; display: flex; align-items: center; justify-content: space-between; padding: 0 15px; background: #fff; flex-shrink: 0; } .header .header-title { font-size: 1.2em; } .header .language-switcher { margin-left: 10px; } .main { display: flex; flex: 1; overflow: hidden; position: relative; } .sidebar { width: 240px; min-width: 240px; background: #fafafa; border-right: 1px solid #eee; display: flex; /* 确保是 flex 布局 */ flex-direction: column; /* 确保是垂直排列 */ justify-content: space-between; transition: width 0.3s ease, min-width 0.3s ease, padding 0.3s ease; padding: 15px 0; /* 修改为上下内边距，左右为0，方便内部对齐 */ height: 100%; /* 确保侧边栏占满父容器高度 */ } .sidebar.closed { width: 0; min-width: 0; padding: 0; overflow: hidden; border: none; } .sidebar.closed .top, .sidebar.closed .bottom { display: none; } /* ★★★ 新增这个样式块 ★★★ */ .sidebar .top { display: flex; flex-direction: column; flex-grow: 1; /* 让整个 top 区域占据可用空间 */ min-height: 0; /* flex 布局关键修复 */ } .sidebar .top div { margin-bottom: 10px; cursor: pointer; padding: 5px; border-radius: 4px; } .chat { flex: 1; display: flex; flex-direction: column; background: #fff; } .chat-content { flex: 1; padding: 15px; overflow-y: auto; border-bottom: 1px solid #eee; display: flex; flex-direction: column; gap: 15px; } .chat-input-area { padding: 15px; border-top: 1px solid #eee; background: #fefefe; flex-shrink: 0;} .chat-input-controls { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; flex-wrap: wrap; gap: 5px;} .controls-left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;} #uploadBtn, #autoReviewBtn, #proposalBtn, #fullTextBtn, #insightBtn { background: #eee; border: 1px solid #ddd; color: #555; padding: 5px 10px; border-radius: 6px; cursor: pointer; font-size: 13px; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; white-space: nowrap; } #uploadBtn:hover, #autoReviewBtn:hover, #proposalBtn:hover, #fullTextBtn:hover, #insightBtn:hover { background: #e0e0e0; } #uploadBtn:disabled, #autoReviewBtn:disabled, #proposalBtn:disabled, #fullTextBtn:disabled, #insightBtn:disabled { cursor: not-allowed; background: #f5f5f5; color: #aaa; border-color: #eee; } #uploadStatus { font-size: 12px; color: #666; display: inline-flex; align-items: center; gap: 4px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; } #uploadStatus.processing::before { content: ''; display: inline-block; width: 12px; height: 12px; border: 2px solid #ccc; border-top-color: #666; border-radius: 50%; animation: spin 1s linear infinite; margin-right: 5px; flex-shrink: 0;} @keyframes spin { to { transform: rotate(360deg); } } #autoReviewBtn.active, #proposalBtn.active, #fullTextBtn.active, #insightBtn.active { background-color: #cce5ff; color: #004085; border-color: #b8daff; font-weight: bold; } .spinner { display: inline-block; width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 0.75s linear infinite; margin-right: 0.5em; vertical-align: -0.125em; } .chat-input-main { display: flex; align-items: flex-end; } .chat-input-main textarea { flex: 1; min-height: 80px; max-height: 200px; resize: none; border: 1px solid #ddd; border-radius: 10px; padding: 10px 15px; font-size: 14px; line-height: 1.5; background: #fff; } .send-btn { margin-left: 10px; background: #000; color: #fff; border: none; border-radius: 50%; width: 42px; height: 42px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .send-btn:disabled { background: #ccc; cursor: not-allowed;} .send-btn::before { content: "↑"; font-size: 18px; } .toggle-open, .toggle-close { position: fixed; top: 15px; left: 15px; z-index: 9999; cursor: pointer; background: rgba(0, 0, 0, 0.7); color: #fff; width: 32px; height: 32px; border-radius: 50%; display: none; align-items: center; justify-content: center; } body.with-sidebar .toggle-close { display: flex; } body.no-sidebar .toggle-open { display: flex; } .chat-message { max-width: 90%; padding: 12px 16px; border-radius: 12px; line-height: 1.6; word-break: break-word; position: relative; } .chat-message.user { align-self: flex-end; background: #d9ecff; border-radius: 12px 12px 0 12px; } .chat-message.ai { align-self: flex-start; background: #fff; border: 1px solid #e0e0e0; border-radius: 12px 12px 12px 0; font-family: SimSun, NSimSun, "Songti SC", serif; padding: 0; } .chat-message.ai .ai-process-display + .ai-final-content, .chat-message.ai .ai-final-content { padding: 12px 16px; } .chat-message.ai .ai-process-display:not(.process-collapsed) + .ai-final-content { padding-top: 8px; } .chat-message.ai:has(.message-actions-wrapper) { padding-bottom: 45px; } .chat-message.ai:has(.ai-process-display:not(.process-collapsed)):has(.message-actions-wrapper) .ai-final-content { padding-bottom: 12px; } .chat-message.system-info { align-self: center; background: #f0f0f0; color: #555; font-size: 0.9em; max-width: 80%; text-align: center; border-radius: 6px; padding: 8px 12px; margin-top: 5px; margin-bottom: 5px; position: static; } .ai-final-content pre:not(.outline-content):not(.insight-paper-item pre), .chat-message.user pre:not(.outline-content) { background: #f6f6f6; padding: 10px; border-radius: 6px; overflow-x: auto; font-size: 0.9em; margin-top: 5px; margin-bottom: 5px; font-family: monospace; white-space: pre-wrap; word-wrap: break-word;} .ai-final-content code:not(pre code):not(.insight-paper-item code), .chat-message.user code:not(pre code) { background: #eee; padding: 2px 5px; border-radius: 4px; font-family: monospace; font-size: 0.95em; } .ai-final-content pre:not(.outline-content):not(.insight-paper-item pre) code, .chat-message.user pre:not(.outline-content) code { background: none; padding: 0; border-radius: 0; font-size: inherit; font-family: inherit; white-space: pre-wrap;} .ai-final-content table:not(.insight-paper-item table), .chat-message.user table { border-collapse: collapse; margin: 1em 0; width: auto; display: block; overflow-x: auto; } .ai-final-content th:not(.insight-paper-item th), .ai-final-content td:not(.insight-paper-item td), .chat-message.user th, .chat-message.user td { border: 1px solid #ddd; padding: 6px 10px; text-align: left; } .ai-final-content th:not(.insight-paper-item th), .chat-message.user th { background-color: #f2f2f2; } .ai-final-content blockquote:not(.insight-paper-item blockquote), .chat-message.user blockquote { border-left: 3px solid #ccc; margin: 1em 0 1em 5px; padding-left: 10px; color: #666; } .ai-final-content p { margin-bottom: 0.6em; line-height: 1.7; text-align: justify; font-size: 12pt !important; font-family: SimSun, NSimSun, "Songti SC", serif !important; font-weight: normal !important; } .ai-final-content h1, .ai-final-content h2, .ai-final-content h3, .ai-final-content h4, .ai-final-content h5, .ai-final-content h6 { margin-left: 0 !important; padding-left: 0 !important; text-indent: 0 !important; line-height: 1.5; margin-top: 1.8em; margin-bottom: 1em; border-bottom: none !important; list-style-type: none !important; display: block; text-align: left !important; font-family: SimHei, "Hei SC", "Microsoft YaHei", sans-serif !important; font-weight: bold !important; } .ai-final-content h1::before, .ai-final-content h2::before, .ai-final-content h3::before, .ai-final-content h4::before, .ai-final-content h5::before, .ai-final-content h6::before { content: none !important; display: none !important; } .ai-final-content h1 { font-size: 18pt; } .ai-final-content h2 { font-size: 16pt !important; } .ai-final-content h3 { font-size: 15pt !important; } .ai-final-content h4:not(.insight-results-container h4) { font-size: 14pt !important; } .ai-final-content h5:not(.paper-abstract-container h5) { font-size: 12pt !important; font-weight: normal !important; } .ai-final-content ul:not(#insightCommonMethods ul):not(#insightCommonCitations ul), .ai-final-content ol { margin-top: 0.5em; margin-bottom: 0.8em; padding-left: 0; line-height: 1.7; font-size: 12pt !important; font-family: SimSun, NSimSun, "Songti SC", serif !important; } .ai-final-content li:not(#insightCommonMethods li):not(#insightCommonCitations li) { list-style-type: none !important; padding-left: 0; text-indent: 0; margin-bottom: 0.5em; position: relative; margin-left: 2.8em; } .ai-final-content ol { counter-reset: ol-lvl1; } .ai-final-content ol > li::before { counter-increment: ol-lvl1; content: counter(ol-lvl1) ". "; position: absolute; left: -2.8em; width: 2.5em; text-align: right; font-weight: normal; color: #333; display: inline-block; font-size: 12pt; font-family: SimSun, NSimSun, "Songti SC", serif;} .ai-final-content ol ol { counter-reset: ol-lvl2; margin-top: 0.3em; margin-bottom: 0.3em; } .ai-final-content ol ol > li::before { counter-increment: ol-lvl2; content: counter(ol-lvl1) "." counter(ol-lvl2) " "; width: 2.5em; left: -2.8em; text-align: right; font-size: 12pt; font-family: SimSun, NSimSun, "Songti SC", serif;} .ai-final-content ol ol ol { counter-reset: ol-lvl3; margin-top: 0.2em; margin-bottom: 0.2em; } .ai-final-content ol ol ol > li::before { counter-increment: ol-lvl3; content: counter(ol-lvl1) "." counter(ol-lvl2) "." counter(ol-lvl3) " "; width: 2.5em; left: -2.8em; text-align: right; font-size: 12pt; font-family: SimSun, NSimSun, "Songti SC", serif;} .ai-final-content ul:not(#insightCommonMethods ul):not(#insightCommonCitations ul) > li::before { content: "• "; position: absolute; left: -2.8em; width: 2.5em; text-align: center; color: #333; display: inline-block; font-size: 12pt; font-family: SimSun, NSimSun, "Songti SC", serif;} .ai-final-content ul ul:not(#insightCommonMethods ul ul):not(#insightCommonCitations ul ul) { margin-top: 0.3em; margin-bottom: 0.3em; } .ai-final-content ul ul:not(#insightCommonMethods ul ul):not(#insightCommonCitations ul ul) > li::before { content: "◦ "; text-align: center; font-size: 12pt; font-family: SimSun, NSimSun, "Songti SC", serif;} .ai-final-content ul ul ul:not(#insightCommonMethods ul ul ul):not(#insightCommonCitations ul ul ul) { margin-top: 0.2em; margin-bottom: 0.2em; } .ai-final-content ul ul ul:not(#insightCommonMethods ul ul ul):not(#insightCommonCitations ul ul ul) > li::before { content: "▪ "; text-align: center; font-size: 12pt; font-family: SimSun, NSimSun, "Songti SC", serif;} .ai-final-content hr { display: none !important; } .message-actions-wrapper { position: absolute; bottom: 8px; right: 8px; display: flex; flex-direction: row-reverse; gap: 10px; z-index: 15; } .message-actions-wrapper .rewrite-button, .message-actions-wrapper .copy-button { padding: 8px 15px; font-size: 13px; border-radius: 6px; cursor: pointer; border: 1px solid #ccc; background-color: #f0f0f0; color: #333; line-height: 1.2; display: inline-flex; align-items: center; gap: 5px; } .message-actions-wrapper .rewrite-button:hover, .message-actions-wrapper .copy-button:hover { background-color: #e0e0e0; border-color: #bbb; } .message-actions-wrapper .rewrite-button { background: #ffc107; border: 1px solid #dda600; color: #333; } .message-actions-wrapper .rewrite-button:hover { background: #e0a800; } .message-actions-wrapper .copy-button { background-color: #28a745; color: white; border: 1px solid #1e7e34; } .message-actions-wrapper .copy-button:hover { background-color: #218838; border-color: #19692c; color: white; } .message-actions-wrapper .copy-button.copied { background-color: #1e7e34; color: white; border-color: #155724; } .copy-button:not(.message-actions-wrapper .copy-button) { position: absolute; bottom: 8px; right: 8px; z-index: 10; padding: 8px 15px; font-size: 14px; background-color: #e9ecef; color: #495057; border: 1px solid #ced4da; opacity: 0; transition: opacity 0.2s; } .chat-message.ai:hover .copy-button:not(.message-actions-wrapper .copy-button) { opacity: 1; background-color: #dee2e6; } .copy-button.copied:not(.message-actions-wrapper .copy-button) { background-color: #d1e7dd; color: #0f5132; border-color: #badbcc; } .ai-final-content .katex-display { overflow-x: auto; overflow-y: hidden; padding: 5px 0; } .outline-container { font-family: sans-serif; margin-top: 10px; padding: 10px; background-color: #f9f9f9; border: 1px solid #eee; border-radius: 8px; } .outline-container strong { display: block; margin-bottom: 8px; font-size: 0.95em; color: #333; } .outline-content { white-space: pre-wrap !important; font-family: Menlo, Monaco, Consolas, "Courier New", monospace !important; margin-bottom: 10px !important; padding: 8px !important; border: 1px dashed #ddd !important; background-color: #fff !important; list-style-type: none !important; text-indent: 0 !important; margin-left: 0 !important; background-image: none !important; line-height: 1.5; font-size: 10pt !important; } .outline-content::before, .outline-content *::before { content: none !important; display: none !important; } .outline-content p, .outline-content span, .outline-content div { list-style-type: none !important; text-indent: 0 !important; margin-left: 0 !important; padding-left: 0 !important; background-image: none !important; font-family: inherit !important; font-size: inherit !important; } .outline-actions { margin-top: 10px; text-align: right; } .outline-actions button { font-family: sans-serif; margin-left: 8px; padding: 6px 12px; font-size: 0.9em; border-radius: 4px; cursor: pointer; } .outline-actions button#confirmOriginalOutlineBtn { background-color: #007bff; color: white; border: 1px solid #007bff; } .outline-actions button#confirmOriginalOutlineBtn:hover { background-color: #0056b3; } .outline-actions button#editOutlineBtn { background-color: #6c757d; color: white; border: 1px solid #6c757d; } .outline-actions button#editOutlineBtn:hover { background-color: #545b62; } .outline-actions em { font-size: 0.9em; color: #555; } .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4); align-items: center; justify-content: center; } #outlineModal .modal-content { background-color: #fefefe; padding: 25px; border: 1px solid #ccc; border-radius: 8px; width: 70%; max-width: 650px; box-shadow: 0 5px 15px rgba(0,0,0,0.2); text-align: left; } #outlineModal .modal-content textarea { width: 100%; min-height: 200px; white-space: pre-wrap !important; font-family: Menlo, Monaco, Consolas, "Courier New", monospace !important; margin-bottom: 10px !important; padding: 8px !important; border: 1px solid #ccc !important; background-color: #fff !important; line-height: 1.5; font-size: 10pt !important; } #outlineModal h2 { margin-top: 0; margin-bottom: 20px; font-size: 1.5em; color: #333; } #outlineModal .modal-actions { margin-top: 25px; text-align: right; } #outlineModal .modal-actions button { margin-left: 12px; padding: 10px 18px; border-radius: 5px; cursor: pointer; font-size: 1em; font-weight: 500; border: 1px solid; transition: background-color 0.2s ease, border-color 0.2s ease; } #outlineModal .modal-actions .confirm-btn { background-color: #007bff; color: white; border-color: #007bff; } #outlineModal .modal-actions .confirm-btn:hover { background-color: #0056b3; border-color: #0056b3; } #outlineModal .modal-actions .cancel-btn { background-color: #6c757d; color: white; border-color: #6c757d; } #outlineModal .modal-actions .cancel-btn:hover { background-color: #545b62; border-color: #545b62; } .ai-process-display { border-bottom: 1px solid #f0f0f0; margin: 0 16px; padding: 8px 0; } .ai-process-display.process-collapsed .process-steps-container { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; margin-top: 0; overflow: hidden; border-top: none; } .process-header { display: flex; align-items: center; cursor: pointer; user-select: none; } .process-icon { margin-right: 8px; font-size: 1.1em; line-height: 1; } .process-title { font-weight: bold; font-size: 0.9em; color: #555; } .process-toggle-arrow { margin-left: auto; font-size: 0.8em; transition: transform 0.2s ease-out; padding: 0 5px; } .ai-process-display.process-collapsed .process-toggle-arrow { transform: rotate(-90deg); } .process-steps-container { font-size: 0.85em; color: #666; padding-left: 24px; max-height: 150px; overflow-y: auto; border-top: 1px dashed #eee; margin-top: 8px; padding-top: 8px; transition: max-height 0.3s ease-out, opacity 0.3s ease-out, padding 0.3s ease-out, margin 0.3s ease-out; } .process-step { padding: 2px 0; display: flex; align-items: center; line-height: 1.4; } .process-step .spinner { margin-right: 6px; width: 0.8em; height: 0.8em; } .process-step-icon { margin-right: 6px; font-size: 0.9em; } .progress-bar-container { height: 8px; background-color: #e9ecef; border-radius: 4px; margin-top: 5px; overflow: hidden; display: none; } .progress-bar { height: 100%; width: 0%; background-color: #007bff; border-radius: 4px; transition: width 0.3s ease; } .insight-results-container { text-align: left; font-family: SimSun, NSimSun, "Songti SC", serif; } .insight-results-container > h4 { font-size: 1.1em; color: #2c3e50; margin-top: 20px; margin-bottom: 12px; padding-bottom: 6px; border-bottom: 2px solid #3498db; font-family: SimHei, "Hei SC", "Microsoft YaHei", sans-serif; } .insight-results-container > h4 .spinner { width: 0.8em; height: 0.8em; vertical-align: -0.1em; } .insight-paper-item { background-color: #ffffff; border: 1px solid #e0e0e0; border-radius: 8px; margin-bottom: 18px; padding: 15px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); transition: box-shadow 0.2s ease-in-out; } .insight-paper-item:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); } .insight-paper-item details { width: 100%; } .insight-paper-item summary { font-weight: normal; color: #34495e; cursor: pointer; padding: 0; list-style: none; display: block; position: relative; transition: color 0.2s ease; padding-left: 22px; } .insight-paper-item summary:hover .paper-title { color: #3498db; } .insight-paper-item summary::before { content: '▶'; font-size: 0.7em; color: #3498db; position: absolute; left: 0px; top: 8px; transition: transform 0.2s ease-in-out; display: inline-block; } .insight-paper-item details[open] > summary::before { transform: rotate(90deg); top: 8px; } .paper-title-line { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 6px; } .paper-title { font-size: 1.15em; font-weight: bold; color: #2c3e50; line-height: 1.4; margin-right: 10px; font-family: SimHei, "Hei SC", "Microsoft YaHei", sans-serif; } .paper-meta-right { font-size: 0.85em; color: #7f8c8d; text-align: right; white-space: nowrap; line-height: 1.5; padding-top: 2px; } .paper-authors { font-size: 0.9em; color: #555; margin-bottom: 4px; line-height: 1.5; } .paper-venue { font-size: 0.85em; color: #7f8c8d; font-style: italic; margin-bottom: 10px; } .paper-content-wrapper { padding-top: 12px; padding-left: 0px; border-top: 1px solid #f0f0f0; margin-top: 8px; } .paper-abstract-container h5 { font-size: 0.95em; font-weight: bold; color: #333; margin-top: 0; margin-bottom: 6px; font-family: SimHei, "Hei SC", "Microsoft YaHei", sans-serif; } .abstract-text { font-size: 0.95em; line-height: 1.7; color: #444; margin-bottom: 12px; text-align: justify; } .abstract-text p { font-family: SimSun, NSimSun, "Songti SC", serif !important; } .summary-placeholder { font-style: italic; color: #888; font-size: 0.9em; padding: 10px 0; } .summary-placeholder .spinner { width: 0.8em; height: 0.8em; vertical-align: -0.1em; } .paper-links-actions { margin-top: 10px; padding-top: 10px; border-top: 1px dashed #d0d0d0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .action-button-insight { font-size: 0.85em; padding: 6px 12px; border-radius: 5px; text-decoration: none; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; display: inline-flex; align-items: center; gap: 5px; border: 1px solid #bdc3c7; background-color: #f0f2f5; color: #34495e; cursor: pointer; } .action-button-insight:hover { background-color: #e4e7eb; border-color: #a7adba; } .action-button-insight.primary { background-color: #3498db; color: white; border-color: #2980b9; } .action-button-insight.primary:hover { background-color: #2980b9; } .action-button-insight svg { width: 13px; height: 13px; fill: currentColor; } #insightCommonMethods ul, #insightCommonCitations ul { list-style-type: none; padding-left: 5px; font-size: 0.95em; } #insightCommonMethods li, #insightCommonCitations li { margin-bottom: 8px; padding-left: 20px; position: relative; line-height: 1.6; } #insightCommonMethods li::before { content: "🛠️"; position: absolute; left: 0; top: 1px; font-size: 0.9em; } #insightCommonCitations li::before { content: "📚"; position: absolute; left: 0; top: 1px; } /* --- 发送按钮的默认箭头图标 --- */ .send-btn::before { content: "⬆"; font-size: 22px; /* 稍微增大字体 */ line-height: 0.7; /* 进一步减小 line-height */ font-weight: bold; color: #fff; } /* --- 为“停止”按钮状态添加的样式 --- */ .send-btn.stopping { background-color: #000; /* 确保在停止状态下背景也是黑色 */ cursor: pointer; } .send-btn.stopping::before { content: "■"; /* 将图标从箭头变为方块 */ font-size: 16px; line-height: 1; } /* =================================================================== */ /* == 新增UI功能综合样式 (汉堡菜单、收缩侧边栏、聊天记录操作菜单) == */ /* =================================================================== */ /* --- 汉堡菜单按钮样式 --- */ .sidebar-toggle { /* 基础样式 */ background: transparent; border: none; cursor: pointer; /* 尺寸与布局 */ width: 24px; height: 24px; display: flex; flex-direction: column; justify-content: space-around; padding: 0; /* 确保在顶层，可点击 */ z-index: 1001; } .sidebar-toggle span { /* 三条横线的样式 */ display: block; width: 100%; height: 3px; /* 横线的粗细 */ background: #333; /* 横线的颜色 */ border-radius: 3px; transition: all 0.3s ease-in-out; } /* --- “新建对话”按钮的通用样式 --- */ #newChatBtn { display: flex; align-items: center; /* 垂直居中图标和文字 */ gap: 16px; /* 图标和文字之间的间距 */ padding-left: 16px; /* 左边距 */ transition: all 0.2s ease-in-out; } #newChatBtn svg { flex-shrink: 0; /* 防止图标被压缩 */ } /* --- 侧边栏收起 (.closed) 状态下的样式 --- */ .sidebar.closed { width: 70px; /* 关键：设置一个固定的宽度 */ min-width: 70px; /* 关键：最小宽度也要同步 */ padding: 10px 0; /* 关键：调整内边距，移除左右内边距 */ overflow: visible; /* 关键：确保内容不会被意外剪切 */ border-right: 1px solid #eee; /* 如果需要，可以重新显示边框 */ } /* 关键：这条规则确保 .top 区域本身是可见的，而不是被隐藏 */ .sidebar.closed .top { display: block; /* 确保它不被隐藏 */ padding: 0; /* 移除内部的padding */ margin: 0; /* 移除内部的margin */ } /* 再次定义收起后“新建对话”按钮的样式 */ .sidebar.closed #newChatBtn { display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; margin: 0 auto; /* 让按钮在窄侧边栏里居中 */ padding: 0; border-radius: 12px; } /* 隐藏按钮内的文字 */ .sidebar.closed #newChatBtn .btn-text { display: none; } /* 明确隐藏历史记录、设置按钮和底部信息 */ .sidebar.closed .chat-history-container, .sidebar.closed .sidebar-action-button[data-i18n-key="settings"], .sidebar.closed .bottom { display: none; } /* --- 请将以下代码追加到 style.css 文件末尾 --- */ /* ===================================== */ /* == 聊天记录项样式与交互 (优化版) == */ /* ===================================== */ /* 基础样式 (大部分不变) */ .chat-history-item { position: relative; padding: 8px 12px; border-radius: 6px; margin-bottom: 4px; cursor: pointer; border: 1px solid transparent; transition: background-color 0.2s ease, color 0.2s ease; display: flex; justify-content: space-between; align-items: center; overflow: visible; /* 假设您的边距规则是统一的，如果不是，请沿用您之前的 margin 或 padding 规则 */ margin: 0 10px 4px 10px; } .chat-history-item .chat-history-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 关键修改 1: 当前激活项的样式 (使用您期望的蓝色) */ .chat-history-item.active { background-color: #D4E4FC; /* 这是您期望的蓝色背景 */ color: #1e3a8a; /* 使用深蓝色字体以保证对比度 */ font-weight: 500; } /* 关键修改 2: 只有“非激活”的项在悬停时才变成灰色 */ .chat-history-item:not(.active):hover { background-color: #f0f0f0; /* 这是悬停时的灰色背景 */ } /* (可选优化) 当鼠标悬停在已激活的蓝色项目上时，可以让蓝色稍微加深一点，提供反馈 */ .chat-history-item.active:hover { background-color: #c3d7f7; /* 一个比激活色稍深的蓝色 */ } /* 三点菜单按钮 (...) 的样式保持不变 */ .chat-history-menu-btn { visibility: hidden; cursor: pointer; font-weight: bold; font-size: 16px; padding: 0 5px; border-radius: 4px; line-height: 1; color: #555; flex-shrink: 0; margin-left: 8px; } .chat-history-item:hover .chat-history-menu-btn { visibility: visible; } .chat-history-menu-btn:hover { background-color: #d1d5db; } /* 下拉菜单容器样式保持不变 */ .chat-history-menu { display: none; position: absolute; right: 5px; top: 32px; background-color: white; border: 1px solid #d1d5db; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); z-index: 1050; width: 130px; padding: 5px 0; } /* ===================================== */ /* == 自定义模态框通用样式 == */ /* ===================================== */ /* 模态框背景遮罩 */ .modal { display: none; /* 默认隐藏 */ position: fixed; /* 固定定位，覆盖整个页面 */ z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */ align-items: center; justify-content: center; -webkit-backdrop-filter: blur(2px); /* 背景模糊效果 (可选) */ backdrop-filter: blur(2px); } /* 模态框内容区域 */ .modal-content { background-color: #ffffff; padding: 25px 30px; border: 1px solid #e0e0e0; border-radius: 12px; /* 更大的圆角 */ width: 90%; max-width: 480px; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15); text-align: left; animation: modal-fade-in 0.3s ease-out; } /* 模态框标题 */ .modal-content h2 { margin-top: 0; margin-bottom: 20px; font-size: 1.4em; color: #333; font-weight: 600; } /* 模态框中的操作按钮容器 */ .modal-content .modal-actions { margin-top: 25px; text-align: right; display: flex; gap: 12px; /* 按钮间距 */ justify-content: flex-end; } /* 模态框中的按钮通用样式 */ .modal-content .modal-actions button { padding: 10px 20px; border-radius: 8px; cursor: pointer; font-size: 1em; font-weight: 500; border: 1px solid transparent; transition: background-color 0.2s ease, border-color 0.2s ease; } /* 确认按钮样式 */ .modal-content .modal-actions .confirm-btn { background-color: #007bff; color: white; border-color: #007bff; } .modal-content .modal-actions .confirm-btn:hover { background-color: #0056b3; border-color: #0056b3; } /* 取消按钮样式 */ .modal-content .modal-actions .cancel-btn { background-color: #f0f0f0; color: #333; border-color: #dcdcdc; } .modal-content .modal-actions .cancel-btn:hover { background-color: #e0e0e0; border-color: #c0c0c0; } /* 重命名输入框的特定样式 */ #renameChatModal .rename-chat-input { width: 100%; padding: 12px 15px; font-size: 1em; border: 1px solid #ccc; border-radius: 8px; margin-top: 10px; box-sizing: border-box; } #renameChatModal .rename-chat-input:focus { outline: none; border-color: #007bff; box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25); } /* 弹窗进入动画 */ @keyframes modal-fade-in { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } /* 请将以下样式代码追加到 style.css 的模态框样式区域 */ /* 删除确认弹窗中的文本样式 */ #deleteChatConfirmationText { margin-top: 15px; margin-bottom: 10px; font-size: 1.1em; color: #495057; /* 深灰色字体 */ line-height: 1.6; word-break: break-word; /* 防止标题过长时溢出 */ } /* 危险操作按钮的样式 (例如删除) */ .modal-content .modal-actions .confirm-btn-danger { background-color: #dc3545; /* 危险红色 */ color: white; border-color: #dc3545; } .modal-content .modal-actions .confirm-btn-danger:hover { background-color: #c82333; /* 鼠标悬停时颜色加深 */ border-color: #bd2130; } /* --- 针对侧边栏按钮的样式修复 --- */ /* --- 侧边栏字体与对齐最终优化 --- */ /* 1. 统一增大侧边栏各项文字的可读性 */ /* "新建对话", "关于我们", "设置和帮助" 的文字 */ /* --- 侧边栏底部对齐最终优化 --- */ /* 为版权信息文本添加和上方按钮一致的左内边距，以实现完美的垂直对齐 */ .copyright-text { padding-left: 12px; box-sizing: border-box; /* 确保内边距不会增加元素的总宽度 */ } /* 新的容器，用于包裹Logo和标题 */ .header-center { display: flex; align-items: center; /* 垂直居中 */ justify-content: center; /* 水平居中 */ flex-grow: 1; /* 占据中间的可用空间 */ min-width: 0; /* 防止在flex布局中被挤压 */ } /* Logo图片样式 */ .header-logo { height: 36px; /* 控制Logo高度 */ margin-right: 12px; /* Logo和文字之间的间距 */ flex-shrink: 0; /* 防止Logo在空间不足时被压缩 */ } /* 标题文字样式微调 */ .header-title { white-space: nowrap; /* 防止标题换行 */ overflow: hidden; text-overflow: ellipsis; /* 如果空间不足，用省略号显示 */ flex-grow: 0; /* 确保标题不会过分占据空间 */ } /* 确保顶部栏的flex布局正确 */ .header { display: flex; align-items: center; } /* ======================================================= */ /* 侧边栏底部按钮和链接的正确样式 (请添加到CSS文件末尾) */ /* ======================================================= */ /* --- 解决布局挤压问题的核心 --- */ /* 确保侧边栏的 .bottom 部分正常排列，而不是被某个元素撑开 */ .sidebar .bottom { display: flex; flex-direction: column; /* 垂直排列 */ padding-bottom: 10px; /* 底部留出一些空间 */ margin-top: auto; /* 这是关键！将整个底部块推到侧边栏最下方 */ flex-shrink: 0; /* 防止底部区域被压缩 */ } /* --- 普通按钮的样式 (例如设置、关于) --- */ .sidebar-action-button { /* 这个样式您可能已经有了，请确保它和下面的一致 */ display: flex; align-items: center; padding: 10px 15px; margin: 2px 10px; /* 调整垂直间距 */ border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 500; color: #333; text-decoration: none; transition: background-color 0.2s; } .sidebar-action-button:hover { background-color: #f0f0f0; } .sidebar-action-button svg { margin-right: 12px; } /* --- “订阅”按钮的专属高亮样式 --- */ /* 这会将它渲染成一个带背景色的“图标+文字”按钮 */ .sidebar-action-button-pro { display: flex; align-items: center; padding: 10px 15px; margin: 5px 10px 10px 10px; /* 调整外边距，特别是下方 */ border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 500; text-decoration: none; /* 移除 a 标签的下划线 */ background-color: #e0eaff; /* 淡蓝色背景 */ color: #3b82f6; /* 蓝色文字和图标 */ border: 1px solid #cce5ff; transition: all 0.2s ease-in-out; } .sidebar-action-button-pro:hover { background-color: #cce5ff; /* 悬停时更深的蓝色 */ color: #2563eb; transform: translateY(-1px); /* 轻微上浮效果 */ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); } .sidebar-action-button-pro svg { margin-right: 12px; } /* --- 法律信息链接的样式 --- */ .legal-links { text-align: center; margin: 15px 10px 10px 10px; } .legal-links a { font-size: 12px; color: #6b7280; /* gray-500 */ text-decoration: none; transition: color 0.2s ease-in-out; } .legal-links a:hover { color: #1f2937; /* gray-800 */ text-decoration: underline; } .legal-links span { font-size: 12px; color: #9ca3af; /* gray-400 */ margin: 0 5px; } /* --- 版权文本样式 --- */ .copyright-text { font-size: 12px; color: #a0a0a0; text-align: center; padding: 0 10px; } /* ======================================================= */ /* == 侧边栏顶部对齐与间距最终修复 (无冲突) == */ /* ======================================================= */ /* --- 基础布局与边距 --- */ /* 统一设置侧边栏的内边距，这是所有对齐的基础 */ .sidebar { padding: 15px 0; /* 上下15px, 左右0 */ } /* --- “新建对话”按钮的样式 --- */ /* 确保它有明确的左右外边距和左内边距 */ #newChatBtn { margin: 0 10px; /* 关键：设置左右外边距为10px */ padding-left: 15px; /* 关键：设置左内边距为15px */ box-sizing: border-box; } /* --- “历史对话”容器的样式 --- */ /* 解决紧凑问题的核心 */ .chat-history-container { margin-top: 25px; /* 关键：增加顶部外边距，创建足够的呼吸空间 */ flex-grow: 1; /* ★★★ 核心：让这个容器占据所有可用的剩余空间 ★★★ */ overflow-y: auto; /* ★★★ 核心：当内容超出时，显示垂直滚动条 ★★★ */ min-height: 0; /* ★★★ 核心：flex布局中的重要修复，防止溢出 ★★★ */ } /* --- “历史对话”标题的样式 --- */ /* 解决对齐问题的核心 */ .history-title { margin: 0 10px; /* 关键：与上方按钮的左右外边距保持完全一致 */ padding-left: 15px; /* 关键：与上方按钮的左内边距保持完全一致 */ box-sizing: border-box; margin-bottom: 10px; /* 增加标题和下方列表的间距 */ font-size: 14px; font-weight: 500; color: #555; /* 让标题颜色稍微柔和一点 */ } /* --- 历史记录项的样式 --- */ /* 确保历史记录项也遵循统一的边距规则 */ .chat-history-item { margin: 0 10px 4px 10px; /* 上 右 下 左 */ padding-left: 15px; /* 确保内部文字也对齐 */ box-sizing: border-box; } /* --- User Auth Area Styles --- */ .header-right { display: flex; align-items: center; gap: 20px; } .user-auth-container { position: relative; } /* Guest Login Button Styles */ .guest-login-link { display: flex; align-items: center; gap: 8px; text-decoration: none; color: #333; padding: 6px 12px; border-radius: 20px; background-color: #f0f0f0; transition: background-color 0.2s; } .guest-login-link:hover { background-color: #e0e0e0; } .guest-avatar { width: 28px; height: 28px; border-radius: 50%; background-color: #007bff; color: white; display: flex; align-items: center; justify-content: center; } .guest-avatar svg { width: 16px; height: 16px; } /* Logged-in User Profile Styles */ .user-profile-area { position: relative; cursor: pointer; } .user-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid transparent; transition: border-color 0.2s; } .user-profile-area:hover .user-avatar { border-color: #007bff; } .user-menu { position: absolute; top: 120%; right: 0; background-color: white; border-radius: 12px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); width: 240px; padding: 8px; z-index: 100; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.2s, transform 0.2s, visibility 0.2s; } .user-profile-area:hover .user-menu { opacity: 1; visibility: visible; transform: translateY(0); } .user-info { padding: 12px 16px; border-bottom: 1px solid #eee; margin-bottom: 8px; font-weight: 500; color: #333; } .menu-item { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: 8px; cursor: pointer; transition: background-color 0.2s; color: #555; } .menu-item:hover { background-color: #f5f5f5; } .menu-item svg { width: 18px; height: 18px; } /* ===================================== */ /* == 精装修版设置面板样式 (V3) == */ /* ===================================== */ .settings-modal-content--v2 { max-width: 900px; /* 变得更宽 */ width: 90%; height: 540px; /* 适当增高 */ padding: 0; display: flex; overflow: hidden; flex-direction: row; border-radius: 16px; /* 更大的圆角 */ } /* --- 左侧导航栏 --- */ .settings-nav { width: 240px; /* 导航栏也加宽一些 */ flex-shrink: 0; background-color: #f9fafb; /* 使用更柔和的背景色 */ border-right: 1px solid #f0f0f0; padding: 16px; display: flex; flex-direction: column; } .settings-nav-header { padding: 12px 8px; flex-shrink: 0; } .settings-nav-header h2 { margin: 0; font-size: 2.0em; font-weight: 600; } .settings-nav ul { list-style: none; padding: 0; margin-top: 16px; } .settings-nav li { display: flex; align-items: center; gap: 14px; padding: 14px 16px; /* 增加内边距，更舒展 */ border-radius: 10px; cursor: pointer; font-size: 1.2em; /* 增大字体 */ font-weight: 500; color: #374151; margin-bottom: 6px; transition: background-color 0.2s, color 0.2s; } .settings-nav li svg { width: 20px; height: 20px; color: #6b7280; transition: color 0.2s; } .settings-nav li:hover { background-color: #f3f4f6; } .settings-nav li.active { background-color: #e0f2fe; /* 浅蓝色背景 */ color: #1e3a8a; /* 深蓝色文字 */ } .settings-nav li.active svg { color: #1f2937; } /* --- 右侧内容区 --- */ .settings-content { flex-grow: 1; padding: 20px 50px; /* 增加左右内边距 */ position: relative; overflow-y: auto; background-color: #ffffff; } .settings-content .close-btn { position: absolute; top: 20px; right: 25px; } .settings-pane { display: none; } .settings-pane.active { display: block; } .pane-title { font-size: 1.8em; /* 增大标题字号 */ font-weight: 600; margin-top: 10px; margin-bottom: 35px; /* 增加标题和内容的间距 */ color: #111827; } /* --- 卡片化设计 --- */ .settings-card { border: 1px solid #e5e7eb; border-radius: 12px; margin-bottom: 24px; overflow: hidden; /* 确保内部元素不出界 */ } .settings-card .settings-item, .settings-card .settings-item-action, .settings-card .settings-item-link { padding: 20px; /* 统一增加卡片内边距 */ display: flex; justify-content: space-between; align-items: center; } /* 卡片内部分割线 */ .settings-card .settings-item-link:not(:last-child) { border-bottom: 1px solid #f3f4f6; } .item-title { font-weight: 500; color: #111827; font-size: 1.1em; } .item-description { font-size: 0.9em; color: #6b7280; margin-top: 4px; } /* ================================== */ /* == 增大“外观”选项的字体大小 == */ /* ================================== */ /* 增大“主题”这个词的字体 */ .settings-item--column > label { font-size: 1.2em; /* 您可以根据需要调整这个值 */ } /* 增大“浅色”、“深色”、“跟随系统”这几个选项的字体 */ .theme-selector label { font-size: 1.1em; /* 您可以根据需要调整这个值 */ } /* --- 按钮新样式 --- */ .btn-secondary { font-size: 1.1em; font-weight: 500; padding: 8px 18px; /* 调整按钮大小 */ border-radius: 8px; cursor: pointer; border: 1px solid #d1d5db; /* 默认边框 */ background-color: #ffffff; /* 默认透明背景 */ color: #374151; transition: all 0.2s; } .btn-secondary:hover { background-color: #e0f2fe; /* 悬停时浅蓝色背景 */ border-color: #9ca3af; /* 保留边框颜色 */ color: #1e3a8a; /* 悬停时文字颜色加深 */ } /* --- 深色主题适配 (V3) --- */ .dark-theme .settings-modal-content--v2 { background-color: #1f2937; } .dark-theme .settings-nav { background-color: #111827; /* 深色导航背景 */ border-right-color: #374151; } .dark-theme .settings-nav-header h2, .dark-theme .settings-nav li { color: #d1d5db; } .dark-theme .settings-nav li svg { color: #9ca3af; } .dark-theme .settings-nav li:hover { background-color: #1f2937; } .dark-theme .settings-nav li.active { background-color: #1f2937; color: #ffffff; } .dark-theme .settings-nav li.active svg { color: #ffffff; } .dark-theme .settings-content { background-color: #1f2937; } .dark-theme .pane-title, .dark-theme .item-title, .dark-theme .settings-item-link { color: #f9fafb; } .dark-theme .item-description { color: #9ca3af; } .dark-theme .settings-card { border-color: #374151; background-color: #111827; /* 卡片背景色 */ } .dark-theme .settings-card .settings-item-link:not(:last-child) { border-color: #374151; } .dark-theme .btn-secondary { border-color: #4b5563; background-color: #374151; color: #d1d5db; } .dark-theme .btn-secondary:hover { background-color: #4b5563; border-color: #6b7280; } /* ===================================== */ /* == 深色主题 (Dark Theme) == */ /* ===================================== */ body.dark-theme { background-color: #1a1a1a; color: #e0e0e0; } /* --- 1. 顶部 Header --- */ .dark-theme .header { background-color: #252525; color: #e0e0e0; border-bottom-color: #444; } .dark-theme .header-title { color: #e0e0e0; } .dark-theme .sidebar-toggle span { background: #e0e0e0; /* 汉堡菜单按钮颜色 */ } .dark-theme .guest-login-link { background-color: #3a3a3a; color: #e0e0e0; } /* --- 2. 侧边栏 --- */ .dark-theme .sidebar { background-color: #252525; border-right-color: #444; } .dark-theme .sidebar-action-button, .dark-theme .sidebar-action-button:visited { color: #e0e0e0; /* 统一设置按钮文字颜色 */ } .dark-theme .sidebar-action-button:hover { background-color: #3a3a3a; } .dark-theme .sidebar-action-button-pro { background-color: #2c3e50; /* 深色专业版按钮背景 */ color: #a7c7e7; /* 浅蓝色文字 */ border-color: #34495e; } .dark-theme .sidebar-action-button-pro:hover { background-color: #34495e; } .dark-theme .chat-history-item:hover { background-color: #3a3a3a; } .dark-theme .chat-history-item.active { background-color: #4a4a4a; border-color: #666; } .dark-theme .history-title, .dark-theme .copyright-text { color: #aaa; } /* --- 3. 主聊天区 --- */ .dark-theme .chat { background-color: #2c2c2c; border-color: #444; } .dark-theme .chat-message.ai { background-color: #333; border-color: #555; color: #e0e0e0; } .dark-theme .chat-message.ai .ai-final-content p, .dark-theme .chat-message.ai .ai-final-content li { color: #e0e0e0; /* 确保AI回复的文本内容是浅色 */ } .dark-theme .chat-message.user { background-color: #004085; color: #cce5ff; } .dark-theme .chat-input-area { background-color: #252525; border-top-color: #444; } .dark-theme #uploadBtn, .dark-theme #autoReviewBtn, .dark-theme #proposalBtn, .dark-theme #fullTextBtn, .dark-theme #insightBtn { background: #4a4a4a; border-color: #666; color: #e0e0e0; } .dark-theme #uploadStatus { color: #aaa; } .dark-theme .chat-input-main textarea { background-color: #404040; color: #f0f0f0; border-color: #555; } .dark-theme .chat-input-main textarea::placeholder { color: #888; } .dark-theme .send-btn { background: #555; } .dark-theme .send-btn.stopping { background: #555; } .dark-theme .send-btn::before { color: #ccc; } .dark-theme pre:not(.outline-content) { background: #1e1e1e; color: #d4d4d4; } /* --- 4. 弹窗 (Modals) --- */ .dark-theme .modal-content { background-color: #2c2c2c; color: #e0e0e0; border-color: #444; } .dark-theme .settings-modal-header { border-bottom-color: #444; } .dark-theme .btn-secondary { background-color: #444; color: #f0f0f0; border-color: #666; } .dark-theme .theme-selector { background-color: #1a1a1a; border-color: #555; } .dark-theme .theme-selector input[type="radio"]:checked + label { background-color: #555; color: #fff; } .dark-theme .settings-section h3 { color: #ccc; } .dark-theme .settings-item label, .dark-theme .settings-item-action span, .dark-theme .settings-item-link { color: #e0e0e0; } .dark-theme .account-modal-content .modal-header { border-bottom-color: #444; } .dark-theme .account-modal-content .modal-footer { background-color: #252525; border-top-color: #444; } .dark-theme .form-group label { color: #ccc; } .dark-theme .form-group input[type="text"], .dark-theme .form-group input[type="password"] { background-color: #404040; color: #f0f0f0; border-color: #555; } .dark-theme .form-helper-text { color: #aaa; } .dark-theme .btn-primary { background-color: #0056b3; } .dark-theme .btn-primary:hover { background-color: #004494; } /* --- 深色主题补丁：修复提示框和语言选择器 --- */ .dark-theme .chat-message.system-info { background-color: #4a4a4a; /* 深灰色背景 */ color: #e0e0e0; /* 浅色文字 */ } /* ===================================== */ /* == 账户管理弹窗 (修改名称/密码) == */ /* ===================================== */ .account-modal-content { max-width: 420px; padding: 0; position: relative; /* <-- 加上这一行来修复定位问题 */ } .account-modal-content .modal-header, .account-modal-content .modal-footer { padding: 20px 25px; } .account-modal-content .modal-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #eee; } .dark-theme .account-modal-content .modal-header { border-bottom-color: #444; } .account-modal-content .modal-header h2 { margin: 0; font-size: 1.6em; } .account-modal-content .modal-body { padding: 25px 25px 15px 25px; } .account-modal-content .modal-footer { display: flex; justify-content: flex-end; gap: 12px; background-color: #f9f9f9; border-top: 1px solid #eee; /* ↓↓↓ 新增下面这两行 ↓↓↓ */ border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; } .dark-theme .account-modal-content .modal-footer { background-color: #252525; border-top-color: #444; } /* 表单组样式 */ .form-group { margin-bottom: 20px; } .form-group label { display: block; font-weight: 500; color: #333; margin-bottom: 8px; font-size: 0.9em; } .dark-theme .form-group label { color: #ccc; } .form-group input[type="text"], .form-group input[type="password"] { width: 100%; padding: 12px 15px; font-size: 1em; border: 1px solid #ccc; border-radius: 8px; box-sizing: border-box; transition: border-color 0.2s, box-shadow 0.2s; } .dark-theme .form-group input[type="text"], .dark-theme .form-group input[type="password"] { background-color: #404040; color: #f0f0f0; border-color: #555; } .form-group input:focus { outline: none; border-color: #007bff; box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2); } .form-group input:disabled { background-color: #f0f0f0; cursor: not-allowed; } .dark-theme .form-group input:disabled { background-color: #3a3a3a; } .form-helper-text { font-size: 0.8em; color: #666; margin-top: 6px; display: block; } .dark-theme .form-helper-text { color: #aaa; } /* 底部按钮样式 */ .btn-primary { padding: 10px 20px; border-radius: 8px; cursor: pointer; font-size: 1em; font-weight: 500; border: 1px solid transparent; background-color: #007bff; color: white; transition: background-color 0.2s; } .btn-primary:hover { background-color: #0056b3; } .dark-theme .btn-primary { background-color: #0056b3; } .dark-theme .btn-primary:hover { background-color: #004494; } /* ===================================== */ /* == 主题选项分行最终修正 (V5) == */ /* ===================================== */ /* 核心修复： 使用一个高优先级的选择器，强制指定这个特定的设置项 让其内部的