Apple\Apple
05396dae39
Remove the 5-image upload restriction in playground and enhance UI consistency Changes: - Remove 5-image limit constraint from ImageUrlInput component - Update hint text to remove "maximum 5 images" references - Add custom scrollbar styling for image list to match site-wide design - Apply consistent thin scrollbar (6px width) with Semi Design color variables - Maintain hover effects and rounded corners for better UX Breaking Changes: None Files modified: - web/src/components/playground/ImageUrlInput.js - web/src/index.css This change allows users to upload unlimited images in playground mode while maintaining visual consistency across the application's scrollable elements.
310 lines
6.2 KiB
CSS
310 lines
6.2 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;
|
|
} |