1688 lines
39 KiB
CSS
1688 lines
39 KiB
CSS
/* ==================== TokenDance Design System (shadcn/ui CSS Variables) ==================== */
|
||
/* 这些变量叠加在 Semi Design 之上，供新的 shadcn 风格组件使用 */
|
||
|
||
:root {
|
||
/* shadcn/ui 基础色板 — Slate 中性色调 (220° hue) */
|
||
--background: 0 0% 100%;
|
||
--foreground: 240 10% 3.9%;
|
||
--card: 0 0% 100%;
|
||
--card-foreground: 240 10% 3.9%;
|
||
--popover: 0 0% 100%;
|
||
--popover-foreground: 240 10% 3.9%;
|
||
--primary: 0 0% 9%;
|
||
--primary-foreground: 0 0% 98%;
|
||
--secondary: 220 5% 96%;
|
||
--secondary-foreground: 220 6% 10%;
|
||
--muted: 220 5% 96%;
|
||
--muted-foreground: 220 4% 56%;
|
||
--accent: 220 5% 96%;
|
||
--accent-foreground: 220 6% 10%;
|
||
--destructive: 0 84.2% 60.2%;
|
||
--destructive-foreground: 0 0% 98%;
|
||
--border: 220 13% 91%;
|
||
--input: 220 13% 91%;
|
||
--ring: 0 0% 9%;
|
||
--radius: 0.5rem;
|
||
--link: 0 0% 9%;
|
||
--link-hover: 0 0% 20%;
|
||
--chart-1: 160 60% 45%;
|
||
--chart-2: 217 91% 60%;
|
||
--chart-3: 43 96% 56%;
|
||
--chart-4: 280 65% 60%;
|
||
--chart-5: 340 75% 55%;
|
||
}
|
||
|
||
.dark {
|
||
--background: 240 10% 3.9%;
|
||
--foreground: 0 0% 98%;
|
||
--card: 240 10% 3.9%;
|
||
--card-foreground: 0 0% 98%;
|
||
--popover: 240 10% 3.9%;
|
||
--popover-foreground: 0 0% 98%;
|
||
--primary: 0 0% 98%;
|
||
--primary-foreground: 0 0% 9%;
|
||
--secondary: 220 4% 16%;
|
||
--secondary-foreground: 0 0% 98%;
|
||
--muted: 220 4% 16%;
|
||
--muted-foreground: 220 5% 65%;
|
||
--accent: 220 4% 16%;
|
||
--accent-foreground: 0 0% 98%;
|
||
--destructive: 0 62.8% 30.6%;
|
||
--destructive-foreground: 0 0% 98%;
|
||
--border: 220 4% 16%;
|
||
--input: 220 4% 16%;
|
||
--ring: 222 56% 55%;
|
||
--link: 222 56% 65%;
|
||
--link-hover: 222 56% 55%;
|
||
--chart-1: 160 60% 45%;
|
||
--chart-2: 217 91% 60%;
|
||
--chart-3: 43 96% 56%;
|
||
--chart-4: 280 65% 60%;
|
||
--chart-5: 340 75% 55%;
|
||
}
|
||
|
||
/* 全局基础样式 — 使用新字体族 */
|
||
body {
|
||
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
|
||
color: hsl(var(--foreground));
|
||
background-color: hsl(var(--background));
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
}
|
||
|
||
/* ==================== Tailwind CSS 配置 ==================== */
|
||
|
||
/* ==================== Tailwind CSS 閰嶇疆 ==================== */
|
||
@layer tailwind-base, semi, tailwind-components, tailwind-utils;
|
||
|
||
@layer tailwind-base {
|
||
@tailwind base;
|
||
}
|
||
|
||
@layer tailwind-components {
|
||
@tailwind components;
|
||
}
|
||
|
||
@layer tailwind-utils {
|
||
@tailwind utilities;
|
||
}
|
||
|
||
/* ==================== 鍏ㄥ眬鍩虹鏍峰紡 ==================== */
|
||
:root {
|
||
--sidebar-width: 180px;
|
||
--sidebar-width-collapsed: 60px;
|
||
--sidebar-current-width: var(--sidebar-width);
|
||
}
|
||
|
||
body.sidebar-collapsed {
|
||
--sidebar-current-width: var(--sidebar-width-collapsed);
|
||
}
|
||
|
||
|
||
|
||
/* 妗岄潰绔姝?body 绾靛悜婊氬姩 - 闃叉 VChart tooltip 瑙﹀彂椤甸潰婊氬姩鏉?*/
|
||
@media (min-width: 768px) {
|
||
body {
|
||
overflow-y: hidden;
|
||
}
|
||
}
|
||
|
||
.app-layout {
|
||
height: 100vh;
|
||
height: 100dvh;
|
||
}
|
||
|
||
.app-sider {
|
||
height: calc(100vh - 64px);
|
||
height: calc(100dvh - 64px);
|
||
}
|
||
|
||
/*
|
||
* 鎿嶇粌鍦?/console/playground锛歩OS Safari 鐐瑰嚮鍚庡湴鍧€鏍忔敹璧蜂細浣?100vh 鍙樺ぇ锛屽簳閮ㄥ尯鍩熻銆岄《楂樸€嶃€? * 浣跨敤 svh锛堝皬瑙嗗彛锛変负涓婚珮搴︼紝閬垮厤闅?UI 鍙樺寲璺冲彉锛涙棤 svh 鐨勬祻瑙堝櫒鍥為€€ 100vh銆? */
|
||
.playground-shell-h {
|
||
height: calc(100vh - 66px);
|
||
height: calc(100svh - 66px);
|
||
}
|
||
|
||
/* iOS锛氳緭鍏ユ瀛楀彿灏忎簬 16px 鏃惰仛鐒︿細寮哄埗缂╂斁椤甸潰 */
|
||
@media (max-width: 767px) {
|
||
.playground-shell-h textarea,
|
||
.playground-shell-h input:not([type='checkbox']):not([type='radio']):not(
|
||
[type='hidden']
|
||
) {
|
||
font-size: 16px !important;
|
||
}
|
||
}
|
||
|
||
code {
|
||
font-family:
|
||
source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
|
||
}
|
||
|
||
/* ==================== 甯冨眬鐩稿叧鏍峰紡 ==================== */
|
||
.semi-layout::-webkit-scrollbar,
|
||
.semi-layout-content::-webkit-scrollbar,
|
||
.semi-sider::-webkit-scrollbar {
|
||
display: none;
|
||
width: 0;
|
||
height: 0;
|
||
}
|
||
|
||
.semi-layout,
|
||
.semi-layout-content,
|
||
.semi-sider {
|
||
-ms-overflow-style: none;
|
||
scrollbar-width: none;
|
||
}
|
||
|
||
/* ==================== 瀵艰埅鍜屼晶杈规爮鏍峰紡 ==================== */
|
||
.semi-navigation-item {
|
||
margin-bottom: 4px !important;
|
||
padding: 4px 12px !important;
|
||
}
|
||
|
||
.semi-navigation-sub-title {
|
||
padding: 0 !important;
|
||
}
|
||
|
||
.semi-navigation-item-icon {
|
||
justify-items: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.semi-navigation-item-icon-info {
|
||
margin-right: 0;
|
||
}
|
||
|
||
.sidebar-nav .semi-navigation-item-text {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.semi-navigation-item,
|
||
.semi-navigation-sub-title {
|
||
height: 100% !important;
|
||
}
|
||
|
||
.semi-navigation-item-collapsed {
|
||
height: 44px !important;
|
||
}
|
||
|
||
#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;
|
||
}
|
||
|
||
/* 鑷畾涔変晶杈规爮鏍峰紡 */
|
||
.sidebar-container {
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-height: 0;
|
||
transition: width 0.3s ease;
|
||
background: var(--semi-color-bg-0);
|
||
}
|
||
|
||
.sidebar-nav {
|
||
flex: 1;
|
||
width: 100%;
|
||
background: var(--semi-color-bg-0);
|
||
height: 100%;
|
||
overflow-x: hidden;
|
||
border-right: none;
|
||
overflow-y: auto;
|
||
min-height: 0;
|
||
-webkit-overflow-scrolling: touch;
|
||
scrollbar-width: none;
|
||
-ms-overflow-style: none;
|
||
}
|
||
|
||
.sidebar-nav::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
|
||
/* 渚ц竟鏍忓鑸」鏍峰紡 */
|
||
.sidebar-nav-item {
|
||
border-radius: 6px;
|
||
margin: 3px 8px;
|
||
transition: all 0.15s ease;
|
||
padding: 8px 12px;
|
||
}
|
||
|
||
.sidebar-nav-item:hover {
|
||
background-color: rgba(var(--semi-blue-0), 0.08);
|
||
color: var(--semi-color-primary);
|
||
}
|
||
|
||
.sidebar-nav-item-selected {
|
||
background-color: rgba(var(--semi-blue-0), 0.12);
|
||
color: var(--semi-color-primary);
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* 鍥炬爣瀹瑰櫒鏍峰紡 */
|
||
.sidebar-icon-container {
|
||
width: 22px;
|
||
height: 22px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: 10px;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.sidebar-sub-icon-container {
|
||
width: 18px;
|
||
height: 18px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: 10px;
|
||
margin-left: 1px;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
/* 鍒嗗壊绾挎牱寮?*/
|
||
.sidebar-divider {
|
||
margin: 4px 8px;
|
||
opacity: 0.15;
|
||
}
|
||
|
||
/* 鍒嗙粍鏍囩鏍峰紡 */
|
||
.sidebar-group-label {
|
||
padding: 4px 15px 8px;
|
||
color: var(--semi-color-text-2);
|
||
font-size: 12px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.5px;
|
||
opacity: 0.8;
|
||
}
|
||
|
||
/* 搴曢儴鎶樺彔鎸夐挳 */
|
||
.sidebar-collapse-button {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding: 12px;
|
||
margin-top: auto;
|
||
cursor: pointer;
|
||
background-color: var(--semi-color-bg-0);
|
||
position: sticky;
|
||
bottom: 0;
|
||
z-index: 10;
|
||
box-shadow: 0 -10px 10px -5px var(--semi-color-bg-0);
|
||
backdrop-filter: blur(4px);
|
||
border-top: 1px solid rgba(var(--semi-grey-0), 0.08);
|
||
}
|
||
|
||
.sidebar-collapse-button-inner {
|
||
width: 28px;
|
||
height: 28px;
|
||
border-radius: 9999px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background-color: var(--semi-color-fill-0);
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.sidebar-collapse-icon-container {
|
||
display: inline-block;
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
/* 渚ц竟鏍忓尯鍩熷鍣?*/
|
||
.sidebar-section {
|
||
padding-top: 12px;
|
||
}
|
||
|
||
@media (max-width: 767px) {
|
||
.sidebar-container {
|
||
background: var(--semi-color-bg-1);
|
||
border-right: 1px solid var(--semi-color-border);
|
||
}
|
||
|
||
.sidebar-nav {
|
||
background: var(--semi-color-bg-1);
|
||
}
|
||
|
||
.sidebar-collapse-button {
|
||
background-color: var(--semi-color-bg-1);
|
||
box-shadow: 0 -10px 10px -5px var(--semi-color-bg-1);
|
||
}
|
||
}
|
||
|
||
/* ==================== 鑱婂ぉ鐣岄潰鏍峰紡 ==================== */
|
||
.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;
|
||
}
|
||
|
||
/* playground 鑱婂ぉ姘旀场瀹藉害闄愬埗锛岄伩鍏嶅獟浣撳唴瀹规妸澶栧眰瀹瑰櫒鎾戞弧 */
|
||
.semi-chat .semi-chat-chatBox-content {
|
||
max-width: min(100%, 780px) !important;
|
||
}
|
||
|
||
.semi-chat .semi-chat-chatBox-content-bubble {
|
||
max-width: min(100%, 780px) !important;
|
||
overflow-wrap: anywhere;
|
||
}
|
||
|
||
.semi-chat-content {
|
||
max-width: 100% !important;
|
||
overflow: hidden !important;
|
||
}
|
||
|
||
.semi-chat-list {
|
||
max-width: 100% !important;
|
||
overflow-x: hidden !important;
|
||
}
|
||
|
||
.semi-chat-container {
|
||
overflow-x: hidden !important;
|
||
}
|
||
|
||
.semi-chat-chatBox-action {
|
||
column-gap: 0 !important;
|
||
}
|
||
|
||
.semi-chat-inputBox-clearButton.semi-button .semi-icon {
|
||
font-size: 20px !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,
|
||
.semi-chat-container::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
|
||
.semi-chat,
|
||
.semi-chat-chatBox,
|
||
.semi-chat-chatBox-wrap,
|
||
.semi-chat-chatBox-content,
|
||
.semi-chat-content,
|
||
.semi-chat-list,
|
||
.semi-chat-container {
|
||
-ms-overflow-style: none;
|
||
scrollbar-width: none;
|
||
}
|
||
|
||
/* ==================== 缁勪欢鐗瑰畾鏍峰紡 ==================== */
|
||
/* SelectableButtonGroup */
|
||
.sbg-button .semi-button-content {
|
||
min-width: 0 !important;
|
||
}
|
||
|
||
.sbg-content {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
width: 100%;
|
||
min-width: 0;
|
||
}
|
||
|
||
.sbg-ellipsis {
|
||
flex: 1;
|
||
min-width: 0;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
/* Badge for count/multiplier in filter buttons */
|
||
.sbg-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
min-width: 18px;
|
||
height: 18px;
|
||
padding: 0 6px;
|
||
border-radius: 9px;
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
font-variant-numeric: tabular-nums;
|
||
line-height: 1;
|
||
background-color: var(--semi-color-fill-0);
|
||
color: var(--semi-color-text-2);
|
||
transition:
|
||
background-color 0.15s ease,
|
||
color 0.15s ease;
|
||
}
|
||
|
||
.sbg-badge-active {
|
||
background-color: var(--semi-color-primary-light-active);
|
||
color: var(--semi-color-primary);
|
||
}
|
||
|
||
/* ---- SelectableButtonGroup color variants ---- */
|
||
.sbg-variant-violet {
|
||
--semi-color-primary: #6d28d9;
|
||
--semi-color-primary-light-default: rgba(124, 58, 237, 0.08);
|
||
--semi-color-primary-light-hover: rgba(124, 58, 237, 0.15);
|
||
--semi-color-primary-light-active: rgba(124, 58, 237, 0.22);
|
||
}
|
||
|
||
.sbg-variant-teal {
|
||
--semi-color-primary: #0f766e;
|
||
--semi-color-primary-light-default: rgba(20, 184, 166, 0.08);
|
||
--semi-color-primary-light-hover: rgba(20, 184, 166, 0.15);
|
||
--semi-color-primary-light-active: rgba(20, 184, 166, 0.22);
|
||
}
|
||
|
||
.sbg-variant-amber {
|
||
--semi-color-primary: #b45309;
|
||
--semi-color-primary-light-default: rgba(245, 158, 11, 0.08);
|
||
--semi-color-primary-light-hover: rgba(245, 158, 11, 0.15);
|
||
--semi-color-primary-light-active: rgba(245, 158, 11, 0.22);
|
||
}
|
||
|
||
.sbg-variant-rose {
|
||
--semi-color-primary: #be123c;
|
||
--semi-color-primary-light-default: rgba(244, 63, 94, 0.08);
|
||
--semi-color-primary-light-hover: rgba(244, 63, 94, 0.15);
|
||
--semi-color-primary-light-active: rgba(244, 63, 94, 0.22);
|
||
}
|
||
|
||
.sbg-variant-green {
|
||
--semi-color-primary: #047857;
|
||
--semi-color-primary-light-default: rgba(16, 185, 129, 0.08);
|
||
--semi-color-primary-light-hover: rgba(16, 185, 129, 0.15);
|
||
--semi-color-primary-light-active: rgba(16, 185, 129, 0.22);
|
||
}
|
||
|
||
/* Dark mode: lighter text, slightly stronger backgrounds */
|
||
html.dark .sbg-variant-violet {
|
||
--semi-color-primary: #a78bfa;
|
||
--semi-color-primary-light-default: rgba(139, 92, 246, 0.14);
|
||
--semi-color-primary-light-hover: rgba(139, 92, 246, 0.22);
|
||
--semi-color-primary-light-active: rgba(139, 92, 246, 0.3);
|
||
}
|
||
|
||
html.dark .sbg-variant-teal {
|
||
--semi-color-primary: #2dd4bf;
|
||
--semi-color-primary-light-default: rgba(45, 212, 191, 0.14);
|
||
--semi-color-primary-light-hover: rgba(45, 212, 191, 0.22);
|
||
--semi-color-primary-light-active: rgba(45, 212, 191, 0.3);
|
||
}
|
||
|
||
html.dark .sbg-variant-amber {
|
||
--semi-color-primary: #fbbf24;
|
||
--semi-color-primary-light-default: rgba(251, 191, 36, 0.14);
|
||
--semi-color-primary-light-hover: rgba(251, 191, 36, 0.22);
|
||
--semi-color-primary-light-active: rgba(251, 191, 36, 0.3);
|
||
}
|
||
|
||
html.dark .sbg-variant-rose {
|
||
--semi-color-primary: #fb7185;
|
||
--semi-color-primary-light-default: rgba(251, 113, 133, 0.14);
|
||
--semi-color-primary-light-hover: rgba(251, 113, 133, 0.22);
|
||
--semi-color-primary-light-active: rgba(251, 113, 133, 0.3);
|
||
}
|
||
|
||
html.dark .sbg-variant-green {
|
||
--semi-color-primary: #34d399;
|
||
--semi-color-primary-light-default: rgba(52, 211, 153, 0.14);
|
||
--semi-color-primary-light-hover: rgba(52, 211, 153, 0.22);
|
||
--semi-color-primary-light-active: rgba(52, 211, 153, 0.3);
|
||
}
|
||
|
||
/* Tabs缁勪欢鏍峰紡 */
|
||
.semi-tabs-content {
|
||
padding: 0 !important;
|
||
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;
|
||
}
|
||
|
||
/* 琛ㄦ牸鏍峰紡 */
|
||
.tableShow {
|
||
display: revert;
|
||
}
|
||
|
||
.tableHiddle {
|
||
display: none !important;
|
||
}
|
||
|
||
/* 椤佃剼鏍峰紡 */
|
||
.custom-footer {
|
||
font-size: 1.1em;
|
||
}
|
||
.custom-footer.na-cb6feafeb3990c78 {
|
||
position: relative;
|
||
}
|
||
|
||
/* 鍗＄墖鍐呭瀹瑰櫒閫氱敤鏍峰紡 */
|
||
.card-content-container {
|
||
position: relative;
|
||
}
|
||
|
||
.card-content-fade-indicator {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 30px;
|
||
background: linear-gradient(transparent, var(--semi-color-bg-1));
|
||
pointer-events: none;
|
||
z-index: 1;
|
||
opacity: 0;
|
||
transition: opacity 0.3s ease;
|
||
}
|
||
|
||
/* ==================== 璋冭瘯闈㈡澘鐗瑰畾鏍峰紡 ==================== */
|
||
.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;
|
||
}
|
||
|
||
/* ==================== 婊氬姩鏉℃牱寮忕粺涓€绠＄悊 ==================== */
|
||
/* 閫氱敤闅愯棌婊氬姩鏉″伐鍏风被 */
|
||
.scrollbar-hide {
|
||
-ms-overflow-style: none;
|
||
/* IE and Edge */
|
||
scrollbar-width: none;
|
||
/* Firefox */
|
||
}
|
||
|
||
.scrollbar-hide::-webkit-scrollbar {
|
||
width: 0 !important;
|
||
height: 0 !important;
|
||
display: none !important;
|
||
/* Chrome, Safari, Opera */
|
||
}
|
||
|
||
/* 琛ㄦ牸婊氬姩鏉℃牱寮?*/
|
||
.semi-table-body::-webkit-scrollbar {
|
||
width: 6px;
|
||
height: 6px;
|
||
}
|
||
|
||
.semi-table-body::-webkit-scrollbar-thumb {
|
||
background: rgba(var(--semi-grey-2), 0.3);
|
||
border-radius: 2px;
|
||
}
|
||
|
||
.semi-table-body::-webkit-scrollbar-thumb:hover {
|
||
background: rgba(var(--semi-grey-2), 0.5);
|
||
}
|
||
|
||
.semi-table-body::-webkit-scrollbar-track {
|
||
background: transparent;
|
||
}
|
||
|
||
/* 渚ц竟鎶藉眽婊氬姩鏉℃牱寮?*/
|
||
.semi-sidesheet-body::-webkit-scrollbar {
|
||
width: 6px;
|
||
height: 6px;
|
||
}
|
||
|
||
.semi-sidesheet-body::-webkit-scrollbar-thumb {
|
||
background: rgba(var(--semi-grey-2), 0.3);
|
||
border-radius: 2px;
|
||
}
|
||
|
||
.semi-sidesheet-body::-webkit-scrollbar-thumb:hover {
|
||
background: rgba(var(--semi-grey-2), 0.5);
|
||
}
|
||
|
||
.semi-sidesheet-body::-webkit-scrollbar-track {
|
||
background: transparent;
|
||
}
|
||
|
||
/* 闅愯棌鍐呭鍖哄煙婊氬姩鏉?*/
|
||
.pricing-scroll-hide,
|
||
.model-test-scroll,
|
||
.card-content-scroll,
|
||
.model-settings-scroll,
|
||
.thinking-content-scroll,
|
||
.custom-request-textarea .semi-input,
|
||
.custom-request-textarea textarea,
|
||
.notice-content-scroll {
|
||
-ms-overflow-style: none;
|
||
scrollbar-width: none;
|
||
}
|
||
|
||
.pricing-scroll-hide::-webkit-scrollbar,
|
||
.model-test-scroll::-webkit-scrollbar,
|
||
.card-content-scroll::-webkit-scrollbar,
|
||
.model-settings-scroll::-webkit-scrollbar,
|
||
.thinking-content-scroll::-webkit-scrollbar,
|
||
.custom-request-textarea .semi-input::-webkit-scrollbar,
|
||
.custom-request-textarea textarea::-webkit-scrollbar,
|
||
.notice-content-scroll::-webkit-scrollbar {
|
||
display: 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;
|
||
}
|
||
|
||
/* ==================== 鍚屾鍊嶇巼 - 娓犻亾閫夋嫨鍣?==================== */
|
||
|
||
.components-transfer-source-item,
|
||
.components-transfer-selected-item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 8px;
|
||
}
|
||
|
||
.semi-transfer-left-list,
|
||
.semi-transfer-right-list {
|
||
-ms-overflow-style: none;
|
||
scrollbar-width: none;
|
||
}
|
||
|
||
.semi-transfer-left-list::-webkit-scrollbar,
|
||
.semi-transfer-right-list::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
|
||
.components-transfer-source-item .semi-checkbox,
|
||
.components-transfer-selected-item .semi-checkbox {
|
||
display: flex;
|
||
align-items: center;
|
||
width: 100%;
|
||
}
|
||
|
||
.components-transfer-source-item .semi-avatar,
|
||
.components-transfer-selected-item .semi-avatar {
|
||
margin-right: 12px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.components-transfer-source-item .info,
|
||
.components-transfer-selected-item .info {
|
||
flex: 1;
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
}
|
||
|
||
.components-transfer-source-item .name,
|
||
.components-transfer-selected-item .name {
|
||
font-weight: 500;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.components-transfer-source-item .email,
|
||
.components-transfer-selected-item .email {
|
||
font-size: 12px;
|
||
color: var(--semi-color-text-2);
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.components-transfer-selected-item .semi-icon-close {
|
||
margin-left: 8px;
|
||
cursor: pointer;
|
||
color: var(--semi-color-text-2);
|
||
}
|
||
|
||
.components-transfer-selected-item .semi-icon-close:hover {
|
||
color: var(--semi-color-text-0);
|
||
}
|
||
|
||
/* ==================== 鏈閫氱煡闂厜鏁堟灉 ==================== */
|
||
@keyframes sweep-shine {
|
||
0% {
|
||
background-position: 200% 0;
|
||
}
|
||
|
||
100% {
|
||
background-position: -200% 0;
|
||
}
|
||
}
|
||
|
||
.shine-text {
|
||
background: linear-gradient(
|
||
90deg,
|
||
currentColor 0%,
|
||
currentColor 40%,
|
||
rgba(255, 255, 255, 0.9) 50%,
|
||
currentColor 60%,
|
||
currentColor 100%
|
||
);
|
||
background-size: 200% 100%;
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
animation: sweep-shine 4s linear infinite;
|
||
}
|
||
|
||
.dark .shine-text {
|
||
background: linear-gradient(
|
||
90deg,
|
||
currentColor 0%,
|
||
currentColor 40%,
|
||
#facc15 50%,
|
||
currentColor 60%,
|
||
currentColor 100%
|
||
);
|
||
background-size: 200% 100%;
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
|
||
/* ==================== ScrollList 瀹氬埗鏍峰紡 ==================== */
|
||
.semi-scrolllist,
|
||
.semi-scrolllist * {
|
||
-ms-overflow-style: none;
|
||
/* IE, Edge */
|
||
scrollbar-width: none;
|
||
/* Firefox */
|
||
background: transparent !important;
|
||
}
|
||
|
||
.semi-scrolllist::-webkit-scrollbar,
|
||
.semi-scrolllist *::-webkit-scrollbar {
|
||
width: 0 !important;
|
||
height: 0 !important;
|
||
display: none !important;
|
||
}
|
||
|
||
.semi-scrolllist-body {
|
||
padding: 1px !important;
|
||
}
|
||
|
||
.semi-scrolllist-list-outer {
|
||
padding-right: 0 !important;
|
||
}
|
||
|
||
/* ==================== Banner 鑳屾櫙妯＄硦鐞?==================== */
|
||
.blur-ball {
|
||
position: absolute;
|
||
width: 360px;
|
||
height: 360px;
|
||
border-radius: 50%;
|
||
filter: blur(120px);
|
||
pointer-events: none;
|
||
z-index: -1;
|
||
}
|
||
|
||
.blur-ball-indigo {
|
||
background: #6366f1;
|
||
/* indigo-500 */
|
||
top: 40px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
opacity: 0.5;
|
||
}
|
||
|
||
.blur-ball-teal {
|
||
background: #14b8a6;
|
||
/* teal-400 */
|
||
top: 200px;
|
||
left: 30%;
|
||
opacity: 0.4;
|
||
}
|
||
|
||
/* 娴呰壊涓婚涓嬭妯＄硦鐞冩洿鏌斿拰 */
|
||
html:not(.dark) .blur-ball-indigo {
|
||
opacity: 0.25;
|
||
}
|
||
|
||
html:not(.dark) .blur-ball-teal {
|
||
opacity: 0.2;
|
||
}
|
||
|
||
/* ==================== Home Page Clean Background ==================== */
|
||
.home-banner-bg {
|
||
position: relative;
|
||
background: linear-gradient(180deg, #e8f0fe 0%, #ffffff 50%, #f8f9fa 100%);
|
||
}
|
||
|
||
/* 娴呰壊涓婚 - 娓呮櫚鐨勬笎鍙樻晥鏋?*/
|
||
html:not(.dark) .home-banner-bg {
|
||
background: linear-gradient(180deg, #e8f0fe 0%, #ffffff 50%, #f8f9fa 100%);
|
||
}
|
||
|
||
/* 鏆楄壊涓婚 */
|
||
html.dark .home-banner-bg {
|
||
background: linear-gradient(
|
||
180deg,
|
||
rgba(99, 102, 241, 0.1) 0%,
|
||
transparent 50%,
|
||
rgba(20, 184, 166, 0.08) 100%
|
||
);
|
||
}
|
||
|
||
/* 棣栭〉銆岀敵璇锋垚涓轰唬鐞嗐€嶏細鎵佸钩涓昏壊 + 杞诲井澶栧湀鍏夛紙鏃犲帤鎶曞奖/鍐呴珮鍏夛級 */
|
||
@keyframes home-distributor-cta-glow {
|
||
0%,
|
||
100% {
|
||
box-shadow:
|
||
0 0 0 1px rgba(255, 255, 255, 0.14),
|
||
0 0 14px rgba(99, 102, 241, 0.28);
|
||
}
|
||
50% {
|
||
box-shadow:
|
||
0 0 0 1px rgba(255, 255, 255, 0.18),
|
||
0 0 22px rgba(99, 102, 241, 0.38);
|
||
}
|
||
}
|
||
|
||
.home-distributor-cta-btn {
|
||
font-weight: 600 !important;
|
||
border: none !important;
|
||
background: var(--semi-color-primary) !important;
|
||
color: #fff !important;
|
||
animation: home-distributor-cta-glow 3s ease-in-out infinite;
|
||
transition:
|
||
background-color 0.2s ease,
|
||
box-shadow 0.2s ease;
|
||
}
|
||
|
||
.home-distributor-cta-btn:hover {
|
||
background: var(--semi-color-primary-hover) !important;
|
||
}
|
||
|
||
html.dark .home-distributor-cta-btn {
|
||
animation-name: home-distributor-cta-glow-dark;
|
||
}
|
||
|
||
@keyframes home-distributor-cta-glow-dark {
|
||
0%,
|
||
100% {
|
||
box-shadow:
|
||
0 0 0 1px rgba(255, 255, 255, 0.1),
|
||
0 0 16px rgba(129, 140, 248, 0.32);
|
||
}
|
||
50% {
|
||
box-shadow:
|
||
0 0 0 1px rgba(255, 255, 255, 0.14),
|
||
0 0 24px rgba(167, 139, 250, 0.4);
|
||
}
|
||
}
|
||
|
||
/* 棣栭〉鍒嗛攢鎷涘嫙鏉★細杞婚噺鍏ュ満 + 鎮仠楂樹寒 */
|
||
@keyframes home-distributor-recruit-in {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(10px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
@keyframes home-distributor-recruit-shimmer {
|
||
0%,
|
||
100% {
|
||
opacity: 0.35;
|
||
}
|
||
50% {
|
||
opacity: 0.55;
|
||
}
|
||
}
|
||
|
||
.home-distributor-recruit-card {
|
||
position: relative;
|
||
overflow: hidden;
|
||
isolation: isolate;
|
||
animation: home-distributor-recruit-in 0.65s cubic-bezier(0.22, 1, 0.36, 1)
|
||
both;
|
||
transition:
|
||
border-color 0.35s ease,
|
||
box-shadow 0.35s ease,
|
||
transform 0.35s ease;
|
||
}
|
||
|
||
.home-distributor-recruit-card::before {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
border-radius: inherit;
|
||
pointer-events: none;
|
||
z-index: 0;
|
||
background: linear-gradient(
|
||
120deg,
|
||
var(--semi-color-primary-light-default) 0%,
|
||
transparent 45%,
|
||
var(--semi-color-primary-light-hover) 100%
|
||
);
|
||
animation: home-distributor-recruit-shimmer 5s ease-in-out infinite;
|
||
}
|
||
|
||
.home-distributor-recruit-card:hover {
|
||
border-color: var(--semi-color-primary-light-active);
|
||
box-shadow: 0 12px 40px -16px var(--semi-color-primary-light-hover);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.home-distributor-recruit-card > * {
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
/* 浠ｇ悊鐢宠椤碉細鏍囬鍖鸿儗鏅厜鏂?+ 鏂囨鍏ュ満 */
|
||
@keyframes distributor-apply-blob {
|
||
0%,
|
||
100% {
|
||
transform: translate(0, 0) scale(1);
|
||
}
|
||
33% {
|
||
transform: translate(8%, -6%) scale(1.05);
|
||
}
|
||
66% {
|
||
transform: translate(-6%, 4%) scale(0.96);
|
||
}
|
||
}
|
||
|
||
@keyframes distributor-apply-fade-up {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(12px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
@keyframes distributor-apply-icon-soft {
|
||
0%,
|
||
100% {
|
||
box-shadow:
|
||
0 0 0 1px rgba(255, 255, 255, 0.06),
|
||
0 8px 24px -12px rgba(99, 102, 241, 0.35);
|
||
}
|
||
50% {
|
||
box-shadow:
|
||
0 0 0 1px rgba(255, 255, 255, 0.1),
|
||
0 10px 28px -10px rgba(99, 102, 241, 0.45);
|
||
}
|
||
}
|
||
|
||
.distributor-apply-hero {
|
||
isolation: isolate;
|
||
}
|
||
|
||
/* 浠ｇ悊鐢宠涓诲崱鐗囷細鏁翠綋娓愬彉搴?+ 娣¤竟绾?+ 杞荤珛浣撳厜锛堜笂娌块珮鍏?/ 涓嬫部娴呭奖锛?*/
|
||
.distributor-apply-main-card.semi-card {
|
||
background: linear-gradient(
|
||
152deg,
|
||
var(--semi-color-primary-light-default) 0%,
|
||
var(--semi-color-bg-0) 42%,
|
||
color-mix(in srgb, var(--semi-color-primary) 10%, var(--semi-color-fill-0))
|
||
100%
|
||
);
|
||
border: 1px solid
|
||
color-mix(in srgb, var(--semi-color-border) 32%, var(--semi-color-bg-0));
|
||
box-shadow:
|
||
0 0 0 1px color-mix(in srgb, var(--semi-color-border) 8%, transparent),
|
||
0 1px 0 0 color-mix(in srgb, white 55%, transparent),
|
||
0 2px 6px -1px
|
||
color-mix(in srgb, var(--semi-color-primary) 5%, rgba(15, 23, 42, 0.05)),
|
||
0 10px 28px -6px
|
||
color-mix(in srgb, var(--semi-color-primary) 7%, rgba(15, 23, 42, 0.06));
|
||
}
|
||
|
||
.distributor-apply-main-card .semi-card-body {
|
||
background-color: transparent;
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-height: 0;
|
||
flex: 1 1 auto;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* 鍒嗛攢鐢宠 - 缁嗘粴鍔ㄦ潯锛堜綆瀵规瘮銆佹贰鑹诧級锛氳鏄庡尯鐙珛婊氬姩 鎴?绐勫睆鏁村崱鍗曞垪婊氬姩 */
|
||
.distributor-apply-intro-scroll,
|
||
.distributor-apply-card-stacked-scroll {
|
||
scrollbar-gutter: stable;
|
||
scrollbar-width: thin;
|
||
scrollbar-color: color-mix(
|
||
in srgb,
|
||
var(--semi-color-primary) 18%,
|
||
var(--semi-color-fill-1)
|
||
)
|
||
color-mix(in srgb, var(--semi-color-border) 12%, transparent);
|
||
}
|
||
|
||
.distributor-apply-intro-scroll::-webkit-scrollbar,
|
||
.distributor-apply-card-stacked-scroll::-webkit-scrollbar {
|
||
width: 7px;
|
||
height: 7px;
|
||
}
|
||
|
||
.distributor-apply-intro-scroll::-webkit-scrollbar-track,
|
||
.distributor-apply-card-stacked-scroll::-webkit-scrollbar-track {
|
||
margin: 6px 0 8px;
|
||
background: color-mix(in srgb, var(--semi-color-border) 12%, transparent);
|
||
border-radius: 100px;
|
||
}
|
||
|
||
.distributor-apply-intro-scroll::-webkit-scrollbar-thumb,
|
||
.distributor-apply-card-stacked-scroll::-webkit-scrollbar-thumb {
|
||
background: linear-gradient(
|
||
180deg,
|
||
color-mix(in srgb, var(--semi-color-primary) 16%, var(--semi-color-fill-2))
|
||
0%,
|
||
color-mix(in srgb, var(--semi-color-primary) 22%, var(--semi-color-fill-1))
|
||
100%
|
||
);
|
||
border-radius: 100px;
|
||
border: 2px solid
|
||
color-mix(in srgb, var(--semi-color-bg-0) 92%, var(--semi-color-border));
|
||
background-clip: padding-box;
|
||
}
|
||
|
||
.distributor-apply-intro-scroll::-webkit-scrollbar-thumb:hover,
|
||
.distributor-apply-card-stacked-scroll::-webkit-scrollbar-thumb:hover {
|
||
background: linear-gradient(
|
||
180deg,
|
||
color-mix(in srgb, var(--semi-color-primary) 26%, var(--semi-color-fill-1))
|
||
0%,
|
||
color-mix(in srgb, var(--semi-color-primary) 34%, var(--semi-color-fill-0))
|
||
100%
|
||
);
|
||
background-clip: padding-box;
|
||
}
|
||
|
||
/* 浠ｇ悊鐢宠椤碉細鍥哄畾涓诲尯鍩熴€侀伩鍏嶅灞傛粴鍔紝浠呭崱鐗囧唴閮ㄦ粴鍔?*/
|
||
.distributor-apply-page-root {
|
||
position: fixed;
|
||
z-index: 1;
|
||
top: 64px;
|
||
right: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
display: flex;
|
||
align-items: stretch;
|
||
justify-content: center;
|
||
box-sizing: border-box;
|
||
padding: 12px 16px;
|
||
overflow: hidden;
|
||
pointer-events: auto;
|
||
}
|
||
|
||
@media (min-width: 768px) {
|
||
.distributor-apply-page-root {
|
||
left: var(--sidebar-current-width, 220px);
|
||
padding: 20px 24px;
|
||
}
|
||
}
|
||
|
||
html.dark .distributor-apply-main-card.semi-card {
|
||
background: linear-gradient(
|
||
152deg,
|
||
color-mix(in srgb, var(--semi-color-primary) 24%, var(--semi-color-bg-0)) 0%,
|
||
var(--semi-color-bg-0) 45%,
|
||
color-mix(in srgb, var(--semi-color-primary) 14%, var(--semi-color-bg-1))
|
||
100%
|
||
);
|
||
border: 1px solid
|
||
color-mix(in srgb, var(--semi-color-border) 38%, var(--semi-color-bg-0));
|
||
box-shadow:
|
||
0 0 0 1px color-mix(in srgb, white 6%, transparent),
|
||
0 1px 0 0 color-mix(in srgb, white 8%, transparent),
|
||
0 2px 8px -2px rgba(0, 0, 0, 0.32),
|
||
0 10px 28px -8px
|
||
color-mix(in srgb, var(--semi-color-primary) 10%, rgba(0, 0, 0, 0.25));
|
||
}
|
||
|
||
.distributor-apply-hero-orb {
|
||
position: absolute;
|
||
border-radius: 50%;
|
||
filter: blur(48px);
|
||
pointer-events: none;
|
||
z-index: 0;
|
||
animation: distributor-apply-blob 12s ease-in-out infinite;
|
||
}
|
||
|
||
.distributor-apply-hero-orb--a {
|
||
width: 180px;
|
||
height: 180px;
|
||
top: -60px;
|
||
right: -40px;
|
||
background: radial-gradient(
|
||
circle,
|
||
var(--semi-color-primary-light-active) 0%,
|
||
transparent 70%
|
||
);
|
||
}
|
||
|
||
.distributor-apply-hero-orb--b {
|
||
width: 140px;
|
||
height: 140px;
|
||
bottom: -50px;
|
||
left: -30px;
|
||
background: radial-gradient(
|
||
circle,
|
||
color-mix(in srgb, var(--semi-color-primary) 22%, transparent) 0%,
|
||
transparent 70%
|
||
);
|
||
animation-delay: -4s;
|
||
}
|
||
|
||
.distributor-apply-hero-title {
|
||
animation: distributor-apply-fade-up 0.55s cubic-bezier(0.22, 1, 0.36, 1)
|
||
0.05s both;
|
||
}
|
||
|
||
.distributor-apply-hero-desc {
|
||
animation: distributor-apply-fade-up 0.55s cubic-bezier(0.22, 1, 0.36, 1)
|
||
0.14s both;
|
||
}
|
||
|
||
.distributor-apply-hero-icon {
|
||
border-color: color-mix(
|
||
in srgb,
|
||
var(--semi-color-border) 34%,
|
||
var(--semi-color-bg-0)
|
||
) !important;
|
||
animation:
|
||
distributor-apply-fade-up 0.5s cubic-bezier(0.22, 1, 0.36, 1) both,
|
||
distributor-apply-icon-soft 4s ease-in-out infinite 0.6s;
|
||
}
|
||
|
||
html.dark .distributor-apply-hero .distributor-apply-hero-icon {
|
||
border-color: color-mix(
|
||
in srgb,
|
||
var(--semi-color-border) 45%,
|
||
var(--semi-color-bg-0)
|
||
) !important;
|
||
}
|
||
|
||
/* 宸?涓婏細璇存槑 涓?鍙?涓嬶細琛ㄥ崟 涔嬮棿鍒嗛殧绾匡紙楂樻贩鍏ュ簳鑹诧紝姣旈粯璁?border 鏇存贰锛?*/
|
||
.distributor-apply-panels-divider {
|
||
border-color: color-mix(
|
||
in srgb,
|
||
var(--semi-color-border) 26%,
|
||
var(--semi-color-bg-0)
|
||
) !important;
|
||
}
|
||
|
||
html.dark .distributor-apply-hero-orb--a {
|
||
background: radial-gradient(
|
||
circle,
|
||
rgba(129, 140, 248, 0.28) 0%,
|
||
transparent 70%
|
||
);
|
||
}
|
||
|
||
html.dark .distributor-apply-hero-orb--b {
|
||
background: radial-gradient(
|
||
circle,
|
||
rgba(45, 212, 191, 0.18) 0%,
|
||
transparent 70%
|
||
);
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.home-distributor-recruit-card,
|
||
.home-distributor-recruit-card::before,
|
||
.distributor-apply-hero-orb,
|
||
.distributor-apply-hero-title,
|
||
.distributor-apply-hero-desc,
|
||
.distributor-apply-hero-icon {
|
||
animation: none !important;
|
||
}
|
||
|
||
.home-distributor-recruit-card:hover {
|
||
transform: none;
|
||
}
|
||
}
|
||
|
||
/* ==================== 鍗＄墖椹崱榫欐ā绯婄悆锛堢被灏佽锛?==================== */
|
||
/* 浣跨敤鏂瑰紡锛氱粰瀹瑰櫒鍔犱笂 with-pastel-balls 绫诲嵆鍙紝鏃犻渶鍦?JSX 涓彃鍏ラ澶栬妭鐐?*/
|
||
.with-pastel-balls {
|
||
position: relative;
|
||
overflow: hidden;
|
||
/* 榛樿鍙橀噺锛堟槑浜ā寮忥級 */
|
||
--pb1: #ffd1dc;
|
||
/* 绮?*/
|
||
--pb2: #e5d4ff;
|
||
/* 钖拌。鑽?*/
|
||
--pb3: #d1fff6;
|
||
/* 钖勮嵎 */
|
||
--pb4: #ffe5d9;
|
||
/* 妗?*/
|
||
--pb-opacity: 0.55;
|
||
--pb-blur: 60px;
|
||
}
|
||
|
||
.with-pastel-balls::before {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
pointer-events: none;
|
||
z-index: 0;
|
||
background:
|
||
radial-gradient(circle at -5% -10%, var(--pb1) 0%, transparent 60%),
|
||
radial-gradient(circle at 105% -10%, var(--pb2) 0%, transparent 55%),
|
||
radial-gradient(circle at 5% 110%, var(--pb3) 0%, transparent 55%),
|
||
radial-gradient(circle at 105% 110%, var(--pb4) 0%, transparent 50%);
|
||
filter: blur(var(--pb-blur));
|
||
opacity: var(--pb-opacity);
|
||
transform: translateZ(0);
|
||
}
|
||
|
||
/* 鏆楅粦妯″紡涓嬫洿鏌斿拰鐨勮壊褰╁拰閫忔槑搴?*/
|
||
html.dark .with-pastel-balls {
|
||
/* 浣跨敤涓庢槑浜ā寮忎竴鑷寸殑鈥滃垰鎵嶉偅缁勨€濋┈鍗￠緳鑹诧紝浣嗘暣浣撴洿鏌斿拰 */
|
||
--pb1: #ffd1dc;
|
||
/* 绮?*/
|
||
--pb2: #e5d4ff;
|
||
/* 钖拌。鑽?*/
|
||
--pb3: #d1fff6;
|
||
/* 钖勮嵎 */
|
||
--pb4: #ffe5d9;
|
||
/* 妗?*/
|
||
--pb-opacity: 0.36;
|
||
--pb-blur: 65px;
|
||
}
|
||
|
||
/* 鏆楅粦妯″紡涓嬬敤鏇存煍鍜岀殑娣峰悎妯″紡閬垮厤绐佸厐鐨勯珮浜?*/
|
||
html.dark .with-pastel-balls::before {
|
||
mix-blend-mode: screen;
|
||
}
|
||
|
||
/* ==================== 琛ㄦ牸鍗＄墖婊氬姩璁剧疆 ==================== */
|
||
.table-scroll-card {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: calc(100vh - 110px);
|
||
max-height: calc(100vh - 110px);
|
||
}
|
||
|
||
.table-scroll-card .semi-card-body {
|
||
flex: 1 1 auto;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.table-scroll-card .semi-card-body::-webkit-scrollbar {
|
||
width: 6px;
|
||
}
|
||
|
||
.table-scroll-card .semi-card-body::-webkit-scrollbar-thumb {
|
||
background: rgba(var(--semi-grey-2), 0.3);
|
||
border-radius: 2px;
|
||
}
|
||
|
||
.table-scroll-card .semi-card-body::-webkit-scrollbar-thumb:hover {
|
||
background: rgba(var(--semi-grey-2), 0.5);
|
||
}
|
||
|
||
.table-scroll-card .semi-card-body::-webkit-scrollbar-track {
|
||
background: transparent;
|
||
}
|
||
|
||
@media (max-width: 767px) {
|
||
.table-scroll-card {
|
||
height: calc(100vh - 77px);
|
||
max-height: calc(100vh - 77px);
|
||
}
|
||
}
|
||
|
||
/*
|
||
* 浠ｇ悊绠＄悊椤碉細Tabs 鏍囩鏍忎笌涓嬫柟 Card 鐨勯棿璺濄€? * 鍏ㄥ眬 `.semi-tabs-content { padding: 0 !important; }` 浼氱洊鎺夊瓙鍏冪礌 margin锛屾澶勭敤鏇撮珮浼樺厛绾ц鐩栦笂鍐呰竟璺濄€? */
|
||
.distributor-admin-tabs.semi-tabs .semi-tabs-content {
|
||
padding-top: 0.75rem !important;
|
||
}
|
||
|
||
/* ==================== 妯″瀷瀹氫环椤甸潰甯冨眬 ==================== */
|
||
.pricing-layout {
|
||
height: calc(100vh - 60px);
|
||
overflow: hidden;
|
||
margin-top: 60px;
|
||
}
|
||
|
||
.pricing-sidebar {
|
||
width: clamp(280px, 24vw, 520px) !important;
|
||
min-width: clamp(280px, 24vw, 520px) !important;
|
||
max-width: clamp(280px, 24vw, 520px) !important;
|
||
height: calc(100vh - 60px);
|
||
background-color: var(--semi-color-bg-0);
|
||
overflow: auto;
|
||
}
|
||
|
||
.pricing-content {
|
||
height: calc(100vh - 60px);
|
||
background-color: var(--semi-color-bg-0);
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.pricing-pagination-divider {
|
||
border-color: var(--semi-color-border);
|
||
}
|
||
|
||
.pricing-content-mobile {
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: auto;
|
||
}
|
||
|
||
.pricing-search-header {
|
||
padding: 0.5rem;
|
||
background-color: var(--semi-color-bg-0);
|
||
flex-shrink: 0;
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 5;
|
||
}
|
||
|
||
.pricing-view-container {
|
||
flex: 1;
|
||
overflow: auto;
|
||
}
|
||
|
||
.pricing-view-container-mobile {
|
||
flex: 1;
|
||
overflow: auto;
|
||
min-height: 0;
|
||
}
|
||
|
||
/* ─── Models 新布局 ─── */
|
||
.models-page-layout {
|
||
display: flex;
|
||
max-width: 1440px;
|
||
margin: 0 auto;
|
||
padding: 56px 24px 0;
|
||
gap: 32px;
|
||
height: 100vh;
|
||
overflow: hidden;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.models-sidebar {
|
||
width: 280px;
|
||
flex-shrink: 0;
|
||
overflow-y: auto;
|
||
padding: 0 16px 24px 0;
|
||
border-right: 1px solid var(--border-color, #e5e7eb);
|
||
}
|
||
|
||
.models-sidebar::-webkit-scrollbar {
|
||
width: 4px;
|
||
}
|
||
.models-sidebar::-webkit-scrollbar-thumb {
|
||
background: transparent;
|
||
}
|
||
.models-sidebar:hover::-webkit-scrollbar-thumb {
|
||
background: rgba(0,0,0,0.15);
|
||
border-radius: 2px;
|
||
}
|
||
|
||
.models-content {
|
||
flex: 1;
|
||
min-width: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.models-tabs-bar {
|
||
display: flex;
|
||
gap: 8px;
|
||
padding: 16px 0;
|
||
flex-shrink: 0;
|
||
border-bottom: 1px solid var(--border-color, #e5e7eb);
|
||
}
|
||
|
||
.models-tab-btn {
|
||
padding: 6px 20px;
|
||
border-radius: 20px;
|
||
border: 1px solid var(--border-color, #d1d5db);
|
||
background: transparent;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
color: var(--text-muted, #6b7280);
|
||
transition: all 0.2s;
|
||
white-space: nowrap;
|
||
}
|
||
.models-tab-btn:hover {
|
||
border-color: var(--primary-color, #3b82f6);
|
||
color: var(--primary-color, #3b82f6);
|
||
}
|
||
.models-tab-btn.active {
|
||
background: var(--primary-color, #3b82f6);
|
||
color: white;
|
||
border-color: var(--primary-color, #3b82f6);
|
||
}
|
||
|
||
.models-card-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 16px;
|
||
padding: 16px 0;
|
||
overflow-y: auto;
|
||
flex: 1;
|
||
}
|
||
|
||
.models-card-grid::-webkit-scrollbar {
|
||
width: 6px;
|
||
}
|
||
.models-card-grid::-webkit-scrollbar-thumb {
|
||
background: rgba(0,0,0,0.12);
|
||
border-radius: 3px;
|
||
}
|
||
|
||
/* 筛选面板标题 */
|
||
.models-filter-section {
|
||
margin-bottom: 24px;
|
||
}
|
||
.models-filter-title {
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
color: var(--text-muted, #6b7280);
|
||
margin-bottom: 12px;
|
||
padding-bottom: 8px;
|
||
border-bottom: 1px solid var(--border-color, #e5e7eb);
|
||
}
|
||
|
||
.models-filter-item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 6px 10px;
|
||
border-radius: 8px;
|
||
cursor: pointer;
|
||
transition: all 0.15s;
|
||
font-size: 14px;
|
||
color: var(--text-color, #374151);
|
||
gap: 8px;
|
||
}
|
||
.models-filter-item:hover {
|
||
background: var(--hover-bg, #f3f4f6);
|
||
}
|
||
.models-filter-item.active {
|
||
background: var(--primary-light, #eff6ff);
|
||
color: var(--primary-color, #3b82f6);
|
||
font-weight: 500;
|
||
}
|
||
.models-filter-item .count {
|
||
margin-left: auto;
|
||
font-size: 12px;
|
||
color: var(--text-muted, #9ca3af);
|
||
}
|
||
|
||
/* ==================== semi-ui 缁勪欢鑷畾涔夋牱寮?==================== */
|
||
.semi-card-header,
|
||
.semi-card-body {
|
||
padding: 10px !important;
|
||
}
|
||
|
||
/* ==================== 浣跨敤鏃ュ織: channel affinity tag ==================== */
|
||
.semi-tag.channel-affinity-tag {
|
||
border: 1px solid rgba(var(--semi-cyan-5), 0.35);
|
||
background-color: rgba(var(--semi-cyan-5), 0.15);
|
||
color: rgba(var(--semi-cyan-9), 1);
|
||
cursor: help;
|
||
transition:
|
||
background-color 120ms ease,
|
||
border-color 120ms ease,
|
||
box-shadow 120ms ease;
|
||
}
|
||
|
||
.semi-tag.channel-affinity-tag:hover {
|
||
background-color: rgba(var(--semi-cyan-5), 0.22);
|
||
border-color: rgba(var(--semi-cyan-5), 0.6);
|
||
box-shadow: 0 0 0 2px rgba(var(--semi-cyan-5), 0.18);
|
||
}
|
||
|
||
.semi-tag.channel-affinity-tag:active {
|
||
background-color: rgba(var(--semi-cyan-5), 0.28);
|
||
}
|
||
|
||
.semi-tag.channel-affinity-tag .channel-affinity-tag-content {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.25rem;
|
||
}
|
||
|
||
/* ==================== 鑷畾涔夊渾瑙掓牱寮?==================== */
|
||
.semi-radio,
|
||
.semi-tagInput,
|
||
.semi-input-textarea-wrapper,
|
||
.semi-navigation-sub-title,
|
||
.semi-chat-inputBox-sendButton,
|
||
.semi-page-item,
|
||
.semi-navigation-item,
|
||
.semi-tag-closable,
|
||
.semi-input-wrapper,
|
||
.semi-tabs-tab-button,
|
||
.semi-select,
|
||
.semi-button,
|
||
.semi-datepicker-range-input {
|
||
border-radius: 10px !important;
|
||
}
|
||
|
||
@keyframes slideInLeft {
|
||
from {
|
||
transform: translateX(-100%);
|
||
opacity: 0;
|
||
}
|
||
to {
|
||
transform: translateX(0);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
/* Channel advanced settings side panel animations */
|
||
@keyframes slideInRight {
|
||
from {
|
||
transform: translateX(100%);
|
||
opacity: 0;
|
||
}
|
||
to {
|
||
transform: translateX(0);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
.ec-dbcd0a3c01b55203 {
|
||
forced-color-adjust: auto;
|
||
}
|
||
|
||
|
||
|
||
|
||
/* ==================== TokenDance Home Page Styles ==================== */
|
||
.home-page {
|
||
font-family: "Source Serif 4", "Noto Serif SC", Georgia, serif;
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
}
|
||
|
||
.home-page ::selection {
|
||
background-color: #000;
|
||
color: #fff;
|
||
}
|
||
|
||
@keyframes homeFadeIn {
|
||
0% { opacity: 0; transform: translateY(40px); }
|
||
100% { opacity: 1; transform: translateY(0); }
|
||
}
|
||
|
||
.home-fade-in {
|
||
animation: homeFadeIn 0.6s ease-out both;
|
||
}
|
||
|
||
.home-fade-in-delay-1 {
|
||
animation: homeFadeIn 0.6s ease-out 0.2s both;
|
||
}
|
||
|
||
.home-fade-in-delay-2 {
|
||
animation: homeFadeIn 0.6s ease-out 0.4s both;
|
||
}
|
||
|
||
@keyframes marquee {
|
||
0% { transform: translateX(0); }
|
||
100% { transform: translateX(-50%); }
|
||
}
|
||
|
||
.home-marquee {
|
||
animation: marquee 20s linear infinite;
|
||
display: flex;
|
||
width: fit-content;
|
||
}
|
||
|
||
.font-heading {
|
||
font-family: "Source Serif 4", "Noto Serif SC", Georgia, serif;
|
||
}
|
||
|
||
.font-body {
|
||
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||
}
|