dadc2cf329
BREAKING CHANGE: None - UI Improvements: - Add gradient backgrounds to card headers - Enhance visual hierarchy with decorative elements - Improve button styles with rounded corners and icons - Standardize input field sizes and styles - Add consistent border radius to components - Code Optimizations: - Remove unused imports (IconHelpCircle, IconKey, IconPlus) - Remove unused showWarning import - Remove unused loadChannelModels import - Remove unused useRef and useParams hooks - Clean up whitespace and formatting - Style Enhancements: - Convert static colors to gradient backgrounds - Add floating circle decorations for visual interest - Improve text contrast with white text on gradient backgrounds - Add semi-transparent white backgrounds to icons - Standardize card header layouts - Accessibility: - Improve text contrast ratios - Maintain consistent visual hierarchy - Add relative positioning for better overlay handling This refactor focuses on modernizing the UI while maintaining all existing functionality. The changes are purely presentational and do not affect the component's behavior.
279 lines
5.5 KiB
CSS
279 lines
5.5 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;
|
|
}
|
|
|
|
.semi-descriptions-double-small .semi-descriptions-item {
|
|
padding-right: 30px;
|
|
}
|
|
|
|
@media only screen and (max-width: 767px) {
|
|
|
|
/*.semi-navigation-sub-wrap .semi-navigation-sub-title, .semi-navigation-item {*/
|
|
/* padding: 0 0;*/
|
|
/*}*/
|
|
.topnav {
|
|
padding: 0 8px;
|
|
}
|
|
|
|
.topnav .semi-navigation-item {
|
|
margin: 0 1px;
|
|
padding: 0 4px;
|
|
}
|
|
|
|
.topnav .semi-navigation-list-wrapper {
|
|
max-width: calc(55vw - 20px);
|
|
overflow-x: auto;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
#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-footer {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
|
|
.semi-space {
|
|
/*display: block!important;*/
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
row-gap: 3px;
|
|
column-gap: 10px;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
/* 隐藏在移动设备上 */
|
|
.hide-on-mobile {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
/*.semi-layout {*/
|
|
/* height: 100%;*/
|
|
/*}*/
|
|
|
|
.tableShow {
|
|
display: revert;
|
|
}
|
|
|
|
.semi-chat {
|
|
padding-top: 0 !important;
|
|
padding-bottom: 0 !important;
|
|
height: 100%;
|
|
}
|
|
|
|
.semi-chat-chatBox-content {
|
|
min-width: auto;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.tableHiddle {
|
|
display: none !important;
|
|
}
|
|
|
|
body::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
code {
|
|
font-family:
|
|
source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
|
|
}
|
|
|
|
.semi-navigation-item {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* 自定义侧边栏按钮悬停效果 */
|
|
.semi-navigation-item:hover {
|
|
transform: translateX(2px);
|
|
box-shadow: 0 2px 8px rgba(var(--semi-color-primary-rgb), 0.2);
|
|
}
|
|
|
|
/* 自定义侧边栏按钮选中效果 */
|
|
.semi-navigation-item-selected {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.semi-navigation-item-selected::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
height: 100%;
|
|
width: 4px;
|
|
background-color: var(--semi-color-primary);
|
|
animation: slideIn 0.3s ease;
|
|
}
|
|
|
|
@keyframes slideIn {
|
|
from {
|
|
transform: translateY(-100%);
|
|
}
|
|
|
|
to {
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
/*.semi-navigation-vertical {*/
|
|
/* !*flex: 0 0 auto;*!*/
|
|
/* !*display: flex;*!*/
|
|
/* !*flex-direction: column;*!*/
|
|
/* !*width: 100%;*!*/
|
|
/* height: 100%;*/
|
|
/* overflow: hidden;*/
|
|
/*}*/
|
|
|
|
.main-content {
|
|
padding: 4px;
|
|
height: 100%;
|
|
}
|
|
|
|
.small-icon .icon {
|
|
font-size: 1em !important;
|
|
}
|
|
|
|
.custom-footer {
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
/* 顶部栏样式 */
|
|
.topnav {
|
|
padding: 0 16px;
|
|
}
|
|
|
|
.topnav .semi-navigation-item {
|
|
border-radius: 4px;
|
|
margin: 0 2px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.topnav .semi-navigation-item:hover {
|
|
background-color: var(--semi-color-primary-light-default);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 2px 8px rgba(var(--semi-color-primary-rgb), 0.2);
|
|
}
|
|
|
|
.topnav .semi-navigation-item-selected {
|
|
background-color: var(--semi-color-primary-light-default);
|
|
color: var(--semi-color-primary);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* 顶部栏文本样式 */
|
|
.header-bar-text {
|
|
color: var(--semi-color-text-0);
|
|
font-weight: 500;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.header-bar-text:hover {
|
|
color: var(--semi-color-primary);
|
|
}
|
|
|
|
/* 自定义滚动条样式 */
|
|
.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;
|
|
}
|
|
|
|
/* Custom sidebar shadow */
|
|
/*.custom-sidebar-nav {*/
|
|
/* box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08) !important;*/
|
|
/* -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08) !important;*/
|
|
/* -moz-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08) !important;*/
|
|
/* min-height: 100%;*/
|
|
/*}*/
|
|
|
|
.semi-tag-closable,
|
|
.semi-datepicker-range-input {
|
|
border-radius: 9999px;
|
|
}
|