5894e18f4f
- Add clear context button positioned on the left side of input area - Create symmetric layout with clear button (left) and send button (right) - Standardize both buttons to 32x32px size for consistent appearance - Apply distinct styling: gray background for clear (red on hover), purple for send - Add smooth transition animations for better user experience - Align buttons vertically centered for improved visual balance The clear conversation button provides quick access to context clearing functionality directly from the input area, matching the design patterns shown in Semi Design documentation and improving overall user workflow.
314 lines
6.3 KiB
CSS
314 lines
6.3 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;
|
|
}
|
|
|
|
/* 图片列表滚动条样式 */
|
|
.image-list-scroll::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
|
|
.image-list-scroll::-webkit-scrollbar-thumb {
|
|
background: var(--semi-color-tertiary-light-default);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.image-list-scroll::-webkit-scrollbar-thumb:hover {
|
|
background: var(--semi-color-tertiary);
|
|
}
|
|
|
|
.image-list-scroll::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
/* 隐藏请求体 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;
|
|
}
|
|
|
|
.semi-chat-inputBox-clearButton.semi-button .semi-icon {
|
|
font-size: 20px !important;
|
|
} |