309f3b9fe3
Hide y-axis scrollbars to provide a cleaner UI experience while maintaining scroll functionality through mouse wheel and keyboard navigation. Changes include: - Hide scrollbars in CustomRequestEditor TextArea component - Hide scrollbars in chat container and all related chat components - Hide scrollbars in thinking content areas - Add cross-browser compatibility for scrollbar hiding - Maintain scroll functionality while improving visual aesthetics Components affected: - CustomRequestEditor.js: Added custom-request-textarea class - index.css: Updated scrollbar styles for chat, thinking, and editor areas The interface now provides a more streamlined appearance consistent with modern UI design patterns while preserving all interactive capabilities.
291 lines
5.8 KiB
CSS
291 lines
5.8 KiB
CSS
@layer tailwind-base, semi, tailwind-components, tailwind-utils;
|
|
|
|
@layer tailwind-base {
|
|
@tailwind base;
|
|
}
|
|
|
|
@layer tailwind-components {
|
|
@tailwind components;
|
|
}
|
|
|
|
@layer tailwind-utils {
|
|
@tailwind utilities;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
padding-top: 0;
|
|
font-family:
|
|
Lato, 'Helvetica Neue', Arial, Helvetica, 'Microsoft YaHei', sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
scrollbar-width: none;
|
|
color: var(--semi-color-text-0) !important;
|
|
background-color: var(--semi-color-bg-0) !important;
|
|
height: 100vh;
|
|
}
|
|
|
|
#root {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#root>section>header>section>div>div>div>div.semi-navigation-header-list-outer>div.semi-navigation-list-wrapper>ul>div>a>li>span {
|
|
font-weight: 600 !important;
|
|
}
|
|
|
|
@media only screen and (max-width: 767px) {
|
|
|
|
#root>section>header>section>div>div>div>div.semi-navigation-footer>div>a>li {
|
|
padding: 0 0;
|
|
}
|
|
|
|
#root>section>header>section>div>div>div>div.semi-navigation-header-list-outer>div.semi-navigation-list-wrapper>ul>div>a>li {
|
|
padding: 0 5px;
|
|
}
|
|
|
|
#root>section>header>section>div>div>div>div.semi-navigation-footer>div:nth-child(1)>a>li {
|
|
padding: 0 5px;
|
|
}
|
|
|
|
.semi-navigation-horizontal .semi-navigation-header {
|
|
margin-right: 0;
|
|
}
|
|
|
|
/* 确保移动端内容可滚动 */
|
|
.semi-layout-content {
|
|
-webkit-overflow-scrolling: touch !important;
|
|
overscroll-behavior-y: auto !important;
|
|
}
|
|
|
|
/* 修复移动端下拉刷新 */
|
|
body {
|
|
overflow: visible !important;
|
|
overscroll-behavior-y: auto !important;
|
|
position: static !important;
|
|
height: 100% !important;
|
|
}
|
|
|
|
/* 确保内容区域在移动端可以正常滚动 */
|
|
#root {
|
|
overflow: visible !important;
|
|
height: 100% !important;
|
|
}
|
|
|
|
.semi-table-tbody,
|
|
.semi-table-row,
|
|
.semi-table-row-cell {
|
|
display: block !important;
|
|
width: auto !important;
|
|
padding: 2px !important;
|
|
}
|
|
|
|
.semi-table-row-cell {
|
|
border-bottom: 0 !important;
|
|
}
|
|
|
|
.semi-table-tbody>.semi-table-row {
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
|
}
|
|
}
|
|
|
|
.tableShow {
|
|
display: revert;
|
|
}
|
|
|
|
.tableHiddle {
|
|
display: none !important;
|
|
}
|
|
|
|
body::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
code {
|
|
font-family:
|
|
source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
|
|
}
|
|
|
|
.custom-footer {
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
.semi-layout-content::-webkit-scrollbar,
|
|
.semi-sider::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
|
|
.semi-layout-content::-webkit-scrollbar-thumb,
|
|
.semi-sider::-webkit-scrollbar-thumb {
|
|
background: var(--semi-color-tertiary-light-default);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.semi-layout-content::-webkit-scrollbar-thumb:hover,
|
|
.semi-sider::-webkit-scrollbar-thumb:hover {
|
|
background: var(--semi-color-tertiary);
|
|
}
|
|
|
|
.semi-layout-content::-webkit-scrollbar-track,
|
|
.semi-sider::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.semi-chat-inputBox-sendButton,
|
|
.semi-page-item,
|
|
.semi-navigation-item,
|
|
.semi-tag-closable,
|
|
.semi-datepicker-range-input {
|
|
border-radius: 9999px;
|
|
}
|
|
|
|
.semi-tabs-content {
|
|
padding: 0 !important;
|
|
}
|
|
|
|
/* 聊天 */
|
|
.semi-chat {
|
|
padding-top: 0 !important;
|
|
padding-bottom: 0 !important;
|
|
height: 100%;
|
|
max-width: 100% !important;
|
|
width: 100% !important;
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
.semi-chat-chatBox {
|
|
max-width: 100% !important;
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
.semi-chat-chatBox-wrap {
|
|
max-width: 100% !important;
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
.semi-chat-chatBox-content {
|
|
min-width: auto;
|
|
word-break: break-word;
|
|
max-width: 100% !important;
|
|
overflow-wrap: break-word !important;
|
|
}
|
|
|
|
.semi-chat-content {
|
|
max-width: 100% !important;
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
.semi-chat-list {
|
|
max-width: 100% !important;
|
|
overflow-x: hidden !important;
|
|
}
|
|
|
|
/* 隐藏所有聊天相关区域的滚动条 */
|
|
.semi-chat::-webkit-scrollbar,
|
|
.semi-chat-chatBox::-webkit-scrollbar,
|
|
.semi-chat-chatBox-wrap::-webkit-scrollbar,
|
|
.semi-chat-chatBox-content::-webkit-scrollbar,
|
|
.semi-chat-content::-webkit-scrollbar,
|
|
.semi-chat-list::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.semi-chat,
|
|
.semi-chat-chatBox,
|
|
.semi-chat-chatBox-wrap,
|
|
.semi-chat-chatBox-content,
|
|
.semi-chat-content,
|
|
.semi-chat-list {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
.semi-chat-container {
|
|
overflow-x: hidden !important;
|
|
}
|
|
|
|
.semi-chat-container::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.semi-chat-container {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
/* 隐藏模型设置区域的滚动条 */
|
|
.model-settings-scroll::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.model-settings-scroll {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
/* 思考内容区域滚动条样式 */
|
|
.thinking-content-scroll::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.thinking-content-scroll {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
/* 隐藏请求体 JSON TextArea 的滚动条 */
|
|
.custom-request-textarea .semi-input::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.custom-request-textarea .semi-input {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
.custom-request-textarea textarea::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.custom-request-textarea textarea {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
/* 调试面板标签样式 */
|
|
.semi-tabs-content {
|
|
height: calc(100% - 40px) !important;
|
|
flex: 1 !important;
|
|
}
|
|
|
|
.semi-tabs-content .semi-tabs-pane {
|
|
height: 100% !important;
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
.semi-tabs-content .semi-tabs-pane>div {
|
|
height: 100% !important;
|
|
}
|
|
|
|
/* 调试面板特定样式 */
|
|
.debug-panel .semi-tabs {
|
|
height: 100% !important;
|
|
display: flex !important;
|
|
flex-direction: column !important;
|
|
}
|
|
|
|
.debug-panel .semi-tabs-bar {
|
|
flex-shrink: 0 !important;
|
|
}
|
|
|
|
.debug-panel .semi-tabs-content {
|
|
flex: 1 !important;
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
.semi-chat-chatBox-action {
|
|
column-gap: 0 !important;
|
|
} |