Repository: hamster1963/HomeDash Branch: main Commit: abb6f8e8b9bf Files: 54 Total size: 710.4 KB Directory structure: gitextract_1c6wmyk2/ ├── .eslintrc.cjs ├── .github/ │ ├── dependabot.yml │ └── workflows/ │ ├── DeployTo_ghrc_ali.yml │ └── autoMerge.yml ├── .gitignore ├── .idea/ │ ├── .gitignore │ ├── hamster-home.iml │ ├── inspectionProfiles/ │ │ └── Project_Default.xml │ ├── modules.xml │ └── vcs.xml ├── Dockerfile ├── LICENSE ├── README.md ├── app/ │ ├── home/ │ │ ├── globals.css │ │ ├── layout.tsx │ │ ├── main/ │ │ │ ├── components/ │ │ │ │ ├── NewDescription.tsx │ │ │ │ ├── infoCard.tsx │ │ │ │ ├── networkChart.tsx │ │ │ │ ├── networkSummary.tsx │ │ │ │ ├── proxySummary.tsx │ │ │ │ └── serverList.tsx │ │ │ ├── dashboard.tsx │ │ │ └── page.tsx │ │ ├── semi.css │ │ ├── service/ │ │ │ ├── components/ │ │ │ │ ├── homeSummary.tsx │ │ │ │ ├── paySummary.tsx │ │ │ │ ├── serviceList.tsx │ │ │ │ └── serviceSummary.tsx │ │ │ ├── page.tsx │ │ │ └── service.tsx │ │ ├── style.css │ │ ├── surge/ │ │ │ ├── components/ │ │ │ │ └── surgeCard.tsx │ │ │ ├── page.tsx │ │ │ ├── surge.tsx │ │ │ ├── surgeStatus.tsx │ │ │ └── surgeTraffic.tsx │ │ ├── utils/ │ │ │ ├── fixedButton.tsx │ │ │ ├── functions.tsx │ │ │ ├── leftSide.tsx │ │ │ ├── sseContext.tsx │ │ │ └── sseFetch.tsx │ │ └── xui/ │ │ ├── components/ │ │ │ ├── xuiDetail.tsx │ │ │ └── xuiTable.tsx │ │ ├── page.tsx │ │ └── xui.tsx │ ├── layout.tsx │ └── providers.tsx ├── env.d.ts ├── git-cliff/ │ └── cliff.toml ├── next.config.js ├── package.json ├── tsconfig.json ├── turbo.json └── vercel.json ================================================ FILE CONTENTS ================================================ ================================================ FILE: .eslintrc.cjs ================================================ // eslint-disable-next-line @typescript-eslint/no-var-requires const path = require('path') /** @type {import("eslint").Linter.Config} */ const config = { overrides: [ { extends: [ 'plugin:@typescript-eslint/recommended-requiring-type-checking', ], files: ['*.ts', '*.tsx'], parserOptions: { project: path.join(__dirname, 'tsconfig.json'), }, rules: { '@typescript-eslint/no-misused-promises': 'off', '@typescript-eslint/no-unsafe-call': 'off', '@typescript-eslint/no-unsafe-member-access': 'off', '@typescript-eslint/no-unsafe-assignment': 'off', '@typescript-eslint/no-explicit-any': 'off', '@typescript-eslint/no-unsafe-argument': 'off', }, }, ], parser: '@typescript-eslint/parser', parserOptions: { project: path.join(__dirname, 'tsconfig.json'), }, ignorePatterns: ['**/*.md'], plugins: [ 'turbo', '@typescript-eslint', 'simple-import-sort', 'unused-imports', ], extends: ['next/core-web-vitals', 'plugin:@typescript-eslint/recommended'], rules: { '@typescript-eslint/consistent-type-imports': [ 'warn', { prefer: 'type-imports', fixStyle: 'inline-type-imports', }, ], '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }], 'simple-import-sort/imports': 'error', 'simple-import-sort/exports': 'warn', 'unused-imports/no-unused-imports': 'error', }, } module.exports = config ================================================ FILE: .github/dependabot.yml ================================================ # To get started with Dependabot version updates, you'll need to specify which # package ecosystems to update and where the package manifests are located. # Please see the documentation for all configuration options: # https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates version: 2 updates: - package-ecosystem: "npm" # See documentation for possible values directory: "/" # Location of package manifests schedule: interval: "daily" - package-ecosystem: "github-actions" # GitHub Actions directory: "/" schedule: interval: "daily" ================================================ FILE: .github/workflows/DeployTo_ghrc_ali.yml ================================================ name: Build and push Docker image on: push: tags: - 'v*' jobs: changelog: name: Generate Changelog runs-on: ubuntu-latest outputs: release_body: ${{ steps.git-cliff.outputs.content }} steps: - name: Checkout uses: actions/checkout@v4 with: fetch-depth: 0 - name: Generate a changelog uses: orhun/git-cliff-action@v3 id: git-cliff with: config: git-cliff/cliff.toml args: -vv --latest --strip 'footer' env: OUTPUT: CHANGES.md - name: Release uses: softprops/action-gh-release@v1 if: startsWith(github.ref, 'refs/tags/') with: body: ${{ steps.git-cliff.outputs.content }} token: ${{ secrets.GITHUB_TOKEN }} env: GITHUB_REPOSITORY: ${{ github.repository }} build-and-push: runs-on: ubuntu-latest needs: changelog steps: - name: Checkout code uses: actions/checkout@v4 - name: Login to GitHub Container Registry uses: docker/login-action@v3 with: registry: ghcr.io username: ${{ github.repository_owner }} password: ${{ secrets.GITHUB_TOKEN }} - name: Login to AliYun Container Registry uses: docker/login-action@v3 with: registry: registry.cn-guangzhou.aliyuncs.com username: ${{ secrets.ALI_USERNAME }} password: ${{ secrets.ALI_TOKEN }} - name: Extract metadata (tags, labels) for Docker id: meta uses: docker/metadata-action@v5 with: images: | ghcr.io/${{ github.repository }} registry.cn-guangzhou.aliyuncs.com/hamster-home/homedash tags: | type=raw,value=latest type=ref,event=tag - name: Print environment variables run: | echo "${{env.GIT_COMMIT_LOG}}" echo "${{env.BUILD_TIME}}" echo "${{env.CURRENT_VERSION}}" - name: Build and push Docker image uses: docker/build-push-action@v5 with: context: . push: true tags: ${{ steps.meta.outputs.tags }} labels: ${{ steps.meta.outputs.labels }} build-args: | GIT_TAG=${{env.CURRENT_VERSION}} GIT_COMMIT_LOG=${{env.GIT_COMMIT_LOG}} BUILD_TIME=${{env.BUILD_TIME}} PROD_ENV=${{secrets.PROD_ENV}} ================================================ FILE: .github/workflows/autoMerge.yml ================================================ name: Dependabot auto-merge on: pull_request permissions: contents: write pull-requests: write jobs: dependabot: runs-on: ubuntu-latest if: ${{ github.actor == 'dependabot[bot]' }} steps: - name: Dependabot metadata id: metadata uses: dependabot/fetch-metadata@v2 with: github-token: "${{ secrets.GITHUB_TOKEN }}" - name: Enable auto-merge for Dependabot PRs if: ${{contains(steps.metadata.outputs.dependency-names, 'my-dependency') && steps.metadata.outputs.update-type == 'version-update:semver-patch'}} run: gh pr merge --auto --merge "$PR_URL" env: PR_URL: ${{github.event.pull_request.html_url}} GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}} ================================================ FILE: .gitignore ================================================ # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies /node_modules /.pnp .pnp.js # testing /coverage # next.js /.next/ /out/ # production /build # misc .DS_Store *.pem # debug npm-debug.log* yarn-debug.log* yarn-error.log* # local env files .env*.local .env # vercel .vercel # typescript *.tsbuildinfo next-env.d.ts # turbo .turbo ================================================ FILE: .idea/.gitignore ================================================ # 默认忽略的文件 /shelf/ /workspace.xml # 基于编辑器的 HTTP 客户端请求 /httpRequests/ # GitHub Copilot persisted chat sessions /copilot/chatSessions ================================================ FILE: .idea/hamster-home.iml ================================================ ================================================ FILE: .idea/inspectionProfiles/Project_Default.xml ================================================ ================================================ FILE: .idea/modules.xml ================================================ ================================================ FILE: .idea/vcs.xml ================================================ ================================================ FILE: Dockerfile ================================================ FROM node:18-alpine AS base FROM base AS deps RUN apk add --no-cache libc6-compat WORKDIR /app COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./ RUN \ if [ -f yarn.lock ]; then yarn --frozen-lockfile; \ elif [ -f package-lock.json ]; then npm ci; \ elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i --frozen-lockfile; \ else echo "Lockfile not found." && exit 1; \ fi FROM base AS builder WORKDIR /app COPY --from=deps /app/node_modules ./node_modules COPY . . ARG PROD_ENV="" # Appends to .env.production RUN printf "$PROD_ENV" >> .env.production RUN yarn build FROM base AS runner WORKDIR /app ENV NODE_ENV production ENV NEXT_TELEMETRY_DISABLED 1 RUN addgroup --system --gid 1001 nodejs RUN adduser --system --uid 1001 nextjs COPY --from=builder /app/public ./public COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./ COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static USER nextjs EXPOSE 3000 ENV PORT 3000 ENV HOSTNAME "0.0.0.0" CMD ["node", "server.js"] ================================================ FILE: LICENSE ================================================ MIT License Copyright (c) 2023 仓鼠 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ================================================ FILE: README.md ================================================
项目因技术栈选择问题已归档，重构中...
新重构 HomeDash 地址: https://dash.buycoffee.top ![screen-shot-new](/.github/new-home.png)

HomeDash

HomeDash 是一个基于 Next.js 和 Semi-design 的仪表盘
Demo地址: https://home.buycoffee.top ![screen-shot-one](/.github/CleanShot1.png) ![screen-shot-two](/.github/CleanShot2.png)
## 一键部署前端 [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fhamster1963%2FHomeDash%3Ftab%3Dreadme-ov-file&env=NEXT_PUBLIC_GO_API_BASE_URL&envDescription=%E5%A1%AB%E5%85%A5%E5%90%8E%E7%AB%AF%20API%20%E5%9C%B0%E5%9D%80) * 在环境变量中填入后端 API 地址 ### 文档完善中... ## 后端仓库 [HomeDash-Backend](https://github.com/hamster1963/HomeDash-Backend) ## 本地开发 ### 配置文件填入后端地址 ```bash cp .env.example .env.local ``` ### 安装依赖 ```bash pnpm install ``` ### 运行前端 ```bash pnpm dev ``` ## 同时也兼容了黑色模式！ ![screen-shot-three](/.github/CleanShot3-new.png) ![screen-shot-four](/.github/CleanShot4-new.png) ================================================ FILE: app/home/globals.css ================================================ /* http://meyerweb.com/eric/tools/css/reset/ v5.0.1 | 20191019 License: none (public domain) */ @import '@/app/home/semi.css'; @import "@/app/home/style.css"; html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, main, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; vertical-align: baseline; /* Disable tap highlights on iOS */ -webkit-tap-highlight-color: transparent; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section { display: block; } /* HTML5 hidden-attribute fix for newer browsers */ *[hidden] { display: none; } body { line-height: 1; color: var(--semi-color-text-0); background-color: var( --semi-color-bg-0); } menu, ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: none; } table { border-collapse: collapse; border-spacing: 0; } ================================================ FILE: app/home/layout.tsx ================================================ "use client"; import "./globals.css"; import { Layout } from "@douyinfe/semi-ui"; import React, { useEffect, useState } from "react"; import FixedButton from "@/app/home/utils/fixedButton"; import LeftSide from "@/app/home/utils/leftSide"; import { useSSEContext } from "@/app/home/utils/sseContext"; export default function DashboardLayout({ children, }: { children: React.ReactNode; }) { const { Sider, Content } = Layout; // 从 SSEContext 中获取侧边栏状态及其 setter 函数 const { isNavCollapsed } = useSSEContext(); // 避免页面初始化时侧边栏闪烁的问题 const [mounted, setMounted] = useState(false); useEffect(() => { setMounted(true); }, []); if (!mounted) { return null; } return ( {children} ); } ================================================ FILE: app/home/main/components/NewDescription.tsx ================================================ import { Typography } from "@douyinfe/semi-ui"; import React from "react"; type NewDescriptionProps = { keyString: string; value: React.ReactNode; style?: React.CSSProperties; }; export default function NewDescription({ keyString, value, style, }: NewDescriptionProps) { const { Text, Title } = Typography; return (
{keyString} {value}
); } ================================================ FILE: app/home/main/components/infoCard.tsx ================================================ import { IconBolt, IconBrackets, IconCalendarClock, IconConnectionPoint2, IconGithubLogo, IconGlobeStroke, IconUser, } from "@douyinfe/semi-icons"; import { Card, Progress, Typography } from "@douyinfe/semi-ui"; import React from "react"; import { z } from "zod"; import { SSEDataFetch } from "@/app/home/utils/sseFetch"; type InfoCardProps = { backgroundColor: string; backgroundFillColor: string; icon: React.ReactNode; title: string; moreIcon: React.ReactNode; moreInfo: string; value: number; unit: string; name: string; total: number; }; export function InfoCard(props: InfoCardProps) { const { Title } = Typography; // 计算进度百分比 const progressPercent = props.value !== 0 ? Math.round((props.value / props.total) * 100) : 0; // 使用线性渐变设置背景色 // 可以根据需要更改颜色 const backgroundColor = `linear-gradient(90deg, ${props.backgroundFillColor} ${progressPercent}%, ${props.backgroundColor} ${progressPercent}%)`; return (
{props.icon} {props.title}
{props.moreInfo}
{props.moreIcon}
{props.value.toFixed(2)} {props.unit}
{props.name}
{props.value.toFixed(2)}/{props.total}
); } const CoffeeInfoSchema = z.object({ usedBound: z.string(), remainBound: z.string(), planBound: z.string(), resetDay: z.string(), }); const XuiInfoSchema = z.object({ user_count: z.number(), up_total: z.number(), down_total: z.number(), }); const GitHubInfoSchema = z.object({ included_minutes: z.number(), next_bill_day: z.number(), total_minutes_used: z.number(), }); const BoceCountSchema = z.object({ boce_count: z.number(), }); export default function InfoCardList() { const coffeeGetData = SSEDataFetch( process.env.NEXT_PUBLIC_GO_API_BASE_URL + "/GetNetworkDataSSE", ); const coffeeValidation = CoffeeInfoSchema.safeParse( coffeeGetData?.coffeeInfo, ); const xuiGetData = SSEDataFetch( process.env.NEXT_PUBLIC_GO_API_BASE_URL + "/GetXuiDataSSE", ); const xuiValidation = XuiInfoSchema.safeParse(xuiGetData?.xuiData); const githubGetData = SSEDataFetch( process.env.NEXT_PUBLIC_GO_API_BASE_URL + "/GetGitHubActionDataSSE", ); const githubValidation = GitHubInfoSchema.safeParse( githubGetData?.GitHubActionData, ); const boceCountData = SSEDataFetch( process.env.NEXT_PUBLIC_GO_API_BASE_URL + "/GetBoceCountSSE", ); const boceCountValidation = BoceCountSchema.safeParse(boceCountData); return ( <> } title={"代理服务"} moreIcon={} value={ coffeeValidation.success ? Number(coffeeValidation.data.usedBound) : 0 } unit={"GB"} name={"CoffeeCloud"} total={ coffeeValidation.success ? Number(coffeeValidation.data.planBound) : 0 } moreInfo={ "重置: " + (coffeeValidation.success ? coffeeValidation.data.resetDay : 0) + "天" } /> } title={"x-ui 面板"} moreIcon={} value={ xuiValidation.success ? xuiValidation.data.down_total + xuiValidation.data.up_total : 0 } unit={"GB"} name={"已用流量"} total={xuiValidation.success ? 1000 : 0} moreInfo={ "用户数: " + (xuiValidation.success ? xuiValidation.data.user_count : 0) } /> } title={"Actions"} moreIcon={} value={ githubValidation.success ? githubValidation.data.total_minutes_used : 0 } unit={"Minute"} name={"已用构建时间"} total={ githubValidation.success ? githubValidation.data.included_minutes : 0 } moreInfo={ "重置: " + (githubValidation.success ? githubValidation.data.next_bill_day : 0) + "天" } /> } title={"拨测总数"} moreIcon={} value={ boceCountValidation.success ? boceCountValidation.data.boce_count : 0 } unit={"Count"} name={"任务数"} total={boceCountValidation.success ? 10000 : 0} moreInfo={"拨测服务"} /> ); } ================================================ FILE: app/home/main/components/networkChart.tsx ================================================ import React from "react"; import { Area, AreaChart, ResponsiveContainer, YAxis } from "recharts"; type NetworkChartProps = { data: any; keyString: string; colorToken: string; }; export default function NetworkChart({ data, keyString, colorToken, }: NetworkChartProps) { const backgroundColor = `rgba(var(--semi-${colorToken}-0), 1)`; const strokeColor = `rgba(var(--semi-${colorToken}-5), 1)`; const fill = `url(#${colorToken})`; return (
{/**/}
); } ================================================ FILE: app/home/main/components/networkSummary.tsx ================================================ import { Skeleton } from "@douyinfe/semi-ui"; import React, { useEffect } from "react"; import { z } from "zod"; import NetworkChart from "@/app/home/main/components/networkChart"; import NewDescription from "@/app/home/main/components/NewDescription"; import { useSSEContext } from "@/app/home/utils/sseContext"; import { SSEDataFetch } from "@/app/home/utils/sseFetch"; const NetworkInfoSchema = z.object({ deviceCount: z.number(), rxSpeedMbps: z.number(), txSpeedMbps: z.number(), }) const AdGuardInfoSchema = z.object({ AvgProcessingTime: z.number(), NumBlockedFiltering: z.number(), NumDnsQueries: z.number(), }); export default function NetworkSummary() { const networkGetData = SSEDataFetch( process.env.NEXT_PUBLIC_GO_API_BASE_URL + "/GetNetworkDataSSE", ); const networkValidation = NetworkInfoSchema.safeParse( networkGetData?.homeNetwork, ); const adguardGetData = SSEDataFetch( process.env.NEXT_PUBLIC_GO_API_BASE_URL + "/GetAdGuardInfoSSE", ); const adguardValidation = AdGuardInfoSchema.safeParse( adguardGetData?.adGuardInfo, ); const { setSSEConnect, HomeNetworkSpeedList, setHomeNetworkSpeedList } = useSSEContext(); useEffect(() => { if (networkValidation.success) { // 获取当前的速度列表 const currentList = [...HomeNetworkSpeedList]; // 添加新的速度数据到列表中 currentList.push({ speed: Number( networkValidation.data.rxSpeedMbps + networkValidation.data.txSpeedMbps, ), }); // 如果长度大于10，删除第一个元素 if (currentList.length > 10) { currentList.shift(); } // 更新速度列表 setHomeNetworkSpeedList(currentList); } // eslint-disable-next-line react-hooks/exhaustive-deps }, [networkGetData]); useEffect(() => { if (networkValidation.success) { setSSEConnect(true); } else { setSSEConnect(false); } // eslint-disable-next-line react-hooks/exhaustive-deps }, [networkGetData]); const placeholder = (
); return ( <>
) } /> ) } /> ) } />
) } /> ) } /> ) } />
); } ================================================ FILE: app/home/main/components/proxySummary.tsx ================================================ import { Skeleton, Typography } from "@douyinfe/semi-ui"; import React, { useEffect } from "react"; import { z } from "zod"; import NetworkChart from "@/app/home/main/components/networkChart"; import NewDescription from "@/app/home/main/components/NewDescription"; import { useSSEContext } from "@/app/home/utils/sseContext"; import { SSEDataFetch } from "@/app/home/utils/sseFetch"; const proxyInfoSchema = z.object({ rxSpeedMbps: z.number(), txSpeedMbps: z.number(), }); const nodeInfoSchema = z.object({ nodeName: z.string(), nodeLatency: z.string(), }); export default function ProxySummary() { const { Title } = Typography; const proxyGetData = SSEDataFetch( process.env.NEXT_PUBLIC_GO_API_BASE_URL + "/GetNetworkDataSSE", ); const proxyValidation = proxyInfoSchema.safeParse(proxyGetData?.proxyNetwork); const nodeValidation = nodeInfoSchema.safeParse(proxyGetData?.nodeInfo); const { ProxyNetworkSpeedList, setProxyNetworkSpeedList } = useSSEContext(); useEffect(() => { if (proxyValidation.success) { // 获取当前的速度列表 const currentList = [...ProxyNetworkSpeedList]; // 添加新的速度数据到列表中 currentList.push({ speed: Number( proxyValidation.data.rxSpeedMbps + proxyValidation.data.txSpeedMbps, ), }); // 如果长度大于10，删除第一个元素 if (currentList.length > 10) { currentList.shift(); } // 更新速度列表 setProxyNetworkSpeedList(currentList); } // eslint-disable-next-line react-hooks/exhaustive-deps }, [proxyGetData]); const placeholder = (
); return ( <>
{nodeValidation.data.nodeName.slice(1, -1)} ) : ( ) } /> ) } /> ) } /> ) } />
); } ================================================ FILE: app/home/main/components/serverList.tsx ================================================ import { Progress, Skeleton } from "@douyinfe/semi-ui"; import React from "react"; import NewDescription from "@/app/home/main/components/NewDescription"; import { SSEDataFetch } from "@/app/home/utils/sseFetch"; type ServerCardProps = { id: number; name: string; status: string; cpu: number; memory: number; disk: number; uptime: number; up: number; down: number; }; const placeholder = (
); export function ServerCard(props: ServerCardProps) { return ( <>
{props.status}
} /> 80 ? "rgba(var(--semi-red-5), 1)" : props.cpu > 50 ? "rgba(var(--semi-orange-5), 1)" : "rgba(var(--semi-green-5), 1)" } percent={props.cpu} type="circle" size="small" /> {props.cpu}%
) : ( ) } /> 80 ? "rgba(var(--semi-red-5), 1)" : props.memory > 50 ? "rgba(var(--semi-orange-5), 1)" : "rgba(var(--semi-green-5), 1)" } percent={props.memory} type="circle" size="small" /> {props.memory}% ) : ( ) } /> 80 ? "rgba(var(--semi-red-5), 1)" : props.disk > 50 ? "rgba(var(--semi-orange-5), 1)" : "rgba(var(--semi-green-5), 1)" } percent={props.disk} type="circle" size="small" /> {props.disk}% ) : ( ) } /> ) } /> ) } /> ) } /> ); } export default function Server() { const serverGetData = SSEDataFetch( process.env.NEXT_PUBLIC_GO_API_BASE_URL + "/GetNetworkDataSSE", ); return (
{serverGetData ? ( serverGetData?.serverInfo.map((server: ServerCardProps) => ( )) ) : ( )}
); } ================================================ FILE: app/home/main/dashboard.tsx ================================================ "use client"; import { IconGithubLogo, IconTickCircle, IconUploadError, } from "@douyinfe/semi-icons"; import { Tag, Typography } from "@douyinfe/semi-ui"; import { useTheme } from "next-themes"; import React from "react"; import InfoCardList from "@/app/home/main/components/infoCard"; import NetworkSummary from "@/app/home/main/components/networkSummary"; import ProxySummary from "@/app/home/main/components/proxySummary"; import Server from "@/app/home/main/components/serverList"; import { useSSEContext } from "@/app/home/utils/sseContext"; export default function MainContent() { const { Title, Text } = Typography; const { SSEConnect } = useSSEContext(); const { resolvedTheme } = useTheme(); return ( <> <div style={{ display: "flex", flexWrap: "wrap", justifyContent: "flex-start", alignItems: "baseline", }} > 👋 你好, 欢迎来到 HomeDash {SSEConnect ? ( <Tag type={"light"} color="green" prefixIcon={<IconTickCircle />} size="large" shape="circle" style={{ marginLeft: "5px", pointerEvents: "none", }} > SSE 已连接 </Tag> ) : ( <Tag type={"light"} color="red" prefixIcon={<IconUploadError />} size="large" shape="circle" style={{ marginLeft: "5px", pointerEvents: "none", }} > SSE 未连接 </Tag> )} <Tag color="grey" prefixIcon={<IconGithubLogo />} size="large" shape="circle" onClick={() => { window.open("https://github.com/hamster1963/HomeDash"); }} style={{ marginLeft: "5px", cursor: "pointer", }} > GitHub </Tag> </div>
家庭网络 {"AdGuardHome"}
科学上网
{"kuromi"} & {"coffee"}
系统状态 ); } ================================================ FILE: app/home/main/page.tsx ================================================ import MainContent from "@/app/home/main/dashboard"; export const metadata = { title: "概览 | HomeDash", }; export default function DashboardPage() { return ; } ================================================ FILE: app/home/semi.css ================================================ /* shadow */ /* sizing */ /* spacing */ body, body .semi-always-light { --semi-amber-0: 254,251,235; --semi-amber-1: 252,245,206; --semi-amber-2: 249,232,158; --semi-amber-3: 246,216,111; --semi-amber-4: 243,198,65; --semi-amber-5: 240,177,20; --semi-amber-6: 200,138,15; --semi-amber-7: 160,102,10; --semi-amber-8: 120,70,6; --semi-amber-9: 80,43,3; --semi-black: 0,0,0; --semi-blue-0: 234,245,255; --semi-blue-1: 203,231,254; --semi-blue-2: 152,205,253; --semi-blue-3: 101,178,252; --semi-blue-4: 50,149,251; --semi-blue-5: 0,100,250; --semi-blue-6: 0,98,214; --semi-blue-7: 0,79,179; --semi-blue-8: 0,61,143; --semi-blue-9: 0,44,107; --semi-cyan-0: 229,247,248; --semi-cyan-1: 194,239,240; --semi-cyan-2: 138,221,226; --semi-cyan-3: 88,203,211; --semi-cyan-4: 44,184,197; --semi-cyan-5: 5,164,182; --semi-cyan-6: 3,134,152; --semi-cyan-7: 1,105,121; --semi-cyan-8: 0,77,91; --semi-cyan-9: 0,50,61; --semi-green-0: 236,247,236; --semi-green-1: 208,240,209; --semi-green-2: 164,224,167; --semi-green-3: 125,209,130; --semi-green-4: 90,194,98; --semi-green-5: 59,179,70; --semi-green-6: 48,149,59; --semi-green-7: 37,119,47; --semi-green-8: 27,89,36; --semi-green-9: 17,60,24; --semi-grey-0: 249,249,249; --semi-grey-1: 230,232,234; --semi-grey-2: 198,202,205; --semi-grey-3: 167,171,176; --semi-grey-4: 136,141,146; --semi-grey-5: 107,112,117; --semi-grey-6: 85,91,97; --semi-grey-7: 65,70,76; --semi-grey-8: 46,50,56; --semi-grey-9: 28,31,35; --semi-indigo-0: 236,239,248; --semi-indigo-1: 209,216,240; --semi-indigo-2: 167,179,225; --semi-indigo-3: 128,144,211; --semi-indigo-4: 94,111,196; --semi-indigo-5: 63,81,181; --semi-indigo-6: 51,66,161; --semi-indigo-7: 40,52,140; --semi-indigo-8: 31,40,120; --semi-indigo-9: 23,29,99; --semi-light-blue-0: 233,247,253; --semi-light-blue-1: 201,236,252; --semi-light-blue-2: 149,216,248; --semi-light-blue-3: 98,195,245; --semi-light-blue-4: 48,172,241; --semi-light-blue-5: 0,149,238; --semi-light-blue-6: 0,123,202; --semi-light-blue-7: 0,99,167; --semi-light-blue-8: 0,75,131; --semi-light-blue-9: 0,53,95; --semi-light-green-0: 243,248,236; --semi-light-green-1: 227,240,208; --semi-light-green-2: 200,226,165; --semi-light-green-3: 173,211,126; --semi-light-green-4: 147,197,91; --semi-light-green-5: 123,182,60; --semi-light-green-6: 100,152,48; --semi-light-green-7: 78,121,38; --semi-light-green-8: 57,91,27; --semi-light-green-9: 37,61,18; --semi-lime-0: 242,250,230; --semi-lime-1: 227,246,197; --semi-lime-2: 203,237,142; --semi-lime-3: 183,227,91; --semi-lime-4: 167,218,44; --semi-lime-5: 155,209,0; --semi-lime-6: 126,174,0; --semi-lime-7: 99,139,0; --semi-lime-8: 72,104,0; --semi-lime-9: 47,70,0; --semi-orange-0: 255,248,234; --semi-orange-1: 254,238,204; --semi-orange-2: 254,217,152; --semi-orange-3: 253,193,101; --semi-orange-4: 253,166,51; --semi-orange-5: 252,136,0; --semi-orange-6: 210,103,0; --semi-orange-7: 168,74,0; --semi-orange-8: 126,49,0; --semi-orange-9: 84,29,0; --semi-pink-0: 253,236,239; --semi-pink-1: 251,207,216; --semi-pink-2: 246,160,181; --semi-pink-3: 242,115,150; --semi-pink-4: 237,72,123; --semi-pink-5: 233,30,99; --semi-pink-6: 197,19,86; --semi-pink-7: 162,11,72; --semi-pink-8: 126,5,58; --semi-pink-9: 90,1,43; --semi-purple-0: 247,233,247; --semi-purple-1: 239,202,240; --semi-purple-2: 221,155,224; --semi-purple-3: 201,111,209; --semi-purple-4: 180,73,194; --semi-purple-5: 158,40,179; --semi-purple-6: 135,30,158; --semi-purple-7: 113,22,138; --semi-purple-8: 92,15,117; --semi-purple-9: 73,10,97; --semi-red-0: 254,242,237; --semi-red-1: 254,221,210; --semi-red-2: 253,183,165; --semi-red-3: 251,144,120; --semi-red-4: 250,102,76; --semi-red-5: 249,57,32; --semi-red-6: 213,37,21; --semi-red-7: 178,20,12; --semi-red-8: 142,8,5; --semi-red-9: 106,1,3; --semi-teal-0: 228,247,244; --semi-teal-1: 192,240,232; --semi-teal-2: 135,224,211; --semi-teal-3: 84,209,193; --semi-teal-4: 39,194,176; --semi-teal-5: 0,179,161; --semi-teal-6: 0,149,137; --semi-teal-7: 0,119,111; --semi-teal-8: 0,89,85; --semi-teal-9: 0,60,58; --semi-violet-0: 243,237,249; --semi-violet-1: 226,209,244; --semi-violet-2: 196,167,233; --semi-violet-3: 166,127,221; --semi-violet-4: 136,91,210; --semi-violet-5: 106,58,199; --semi-violet-6: 87,47,179; --semi-violet-7: 70,37,158; --semi-violet-8: 54,28,138; --semi-violet-9: 40,20,117; --semi-white: 255,255,255; --semi-yellow-0: 255,253,234; --semi-yellow-1: 254,251,203; --semi-yellow-2: 253,243,152; --semi-yellow-3: 252,232,101; --semi-yellow-4: 251,218,50; --semi-yellow-5: 250,200,0; --semi-yellow-6: 208,170,0; --semi-yellow-7: 167,139,0; --semi-yellow-8: 125,106,0; --semi-yellow-9: 83,72,0; } html[theme-mode=dark] body, body .semi-always-dark { --semi-red-0: 108,9,11; --semi-red-1: 144,17,16; --semi-red-2: 180,32,25; --semi-red-3: 215,51,36; --semi-red-4: 251,73,50; --semi-red-5: 252,114,90; --semi-red-6: 253,153,131; --semi-red-7: 253,190,172; --semi-red-8: 254,224,213; --semi-red-9: 255,243,239; --semi-pink-0: 92,7,48; --semi-pink-1: 128,14,65; --semi-pink-2: 164,23,81; --semi-pink-3: 199,34,97; --semi-pink-4: 235,47,113; --semi-pink-5: 239,86,134; --semi-pink-6: 243,126,159; --semi-pink-7: 247,168,188; --semi-pink-8: 251,211,220; --semi-pink-9: 253,238,241; --semi-purple-0: 74,16,97; --semi-purple-1: 94,23,118; --semi-purple-2: 115,31,138; --semi-purple-3: 137,40,159; --semi-purple-4: 160,51,179; --semi-purple-5: 181,83,194; --semi-purple-6: 202,120,209; --semi-purple-7: 221,160,225; --semi-purple-8: 239,206,240; --semi-purple-9: 247,235,247; --semi-violet-0: 64,27,119; --semi-violet-1: 76,36,140; --semi-violet-2: 88,46,160; --semi-violet-3: 100,57,181; --semi-violet-4: 114,70,201; --semi-violet-5: 136,101,212; --semi-violet-6: 162,136,223; --semi-violet-7: 190,173,233; --semi-violet-8: 221,212,244; --semi-violet-9: 241,238,250; --semi-indigo-0: 23,30,101; --semi-indigo-1: 32,41,122; --semi-indigo-2: 41,54,142; --semi-indigo-3: 52,68,163; --semi-indigo-4: 64,83,183; --semi-indigo-5: 95,113,197; --semi-indigo-6: 129,145,212; --semi-indigo-7: 167,180,226; --semi-indigo-8: 209,216,241; --semi-indigo-9: 237,239,248; --semi-blue-0: 5,49,112; --semi-blue-1: 10,70,148; --semi-blue-2: 19,92,184; --semi-blue-3: 29,117,219; --semi-blue-4: 41,144,255; --semi-blue-5: 84,169,255; --semi-blue-6: 127,193,255; --semi-blue-7: 169,215,255; --semi-blue-8: 212,236,255; --semi-blue-9: 239,248,255; --semi-light-blue-0: 0,55,97; --semi-light-blue-1: 0,77,133; --semi-light-blue-2: 3,102,169; --semi-light-blue-3: 10,129,204; --semi-light-blue-4: 19,159,240; --semi-light-blue-5: 64,180,243; --semi-light-blue-6: 110,200,246; --semi-light-blue-7: 157,220,249; --semi-light-blue-8: 206,238,252; --semi-light-blue-9: 235,248,254; --semi-cyan-0: 4,52,61; --semi-cyan-1: 7,79,92; --semi-cyan-2: 10,108,123; --semi-cyan-3: 14,137,153; --semi-cyan-4: 19,168,184; --semi-cyan-5: 56,187,198; --semi-cyan-6: 98,205,212; --semi-cyan-7: 145,223,227; --semi-cyan-8: 198,239,241; --semi-cyan-9: 231,247,248; --semi-teal-0: 2,60,57; --semi-teal-1: 4,90,85; --semi-teal-2: 7,119,111; --semi-teal-3: 10,149,136; --semi-teal-4: 14,179,161; --semi-teal-5: 51,194,176; --semi-teal-6: 94,209,193; --semi-teal-7: 142,225,211; --semi-teal-8: 196,240,232; --semi-teal-9: 230,247,244; --semi-green-0: 18,60,25; --semi-green-1: 28,90,37; --semi-green-2: 39,119,49; --semi-green-3: 50,149,61; --semi-green-4: 62,179,73; --semi-green-5: 93,194,100; --semi-green-6: 127,209,132; --semi-green-7: 166,225,168; --semi-green-8: 208,240,209; --semi-green-9: 236,247,236; --semi-light-green-0: 38,61,19; --semi-light-green-1: 59,92,29; --semi-light-green-2: 81,123,40; --semi-light-green-3: 103,153,52; --semi-light-green-4: 127,184,64; --semi-light-green-5: 151,198,95; --semi-light-green-6: 176,212,129; --semi-light-green-7: 201,227,167; --semi-light-green-8: 228,241,209; --semi-light-green-9: 243,248,237; --semi-lime-0: 49,70,3; --semi-lime-1: 75,105,5; --semi-lime-2: 103,141,9; --semi-lime-3: 132,176,12; --semi-lime-4: 162,211,17; --semi-lime-5: 174,220,58; --semi-lime-6: 189,229,102; --semi-lime-7: 207,237,150; --semi-lime-8: 229,246,201; --semi-lime-9: 243,251,233; --semi-yellow-0: 84,73,3; --semi-yellow-1: 126,108,6; --semi-yellow-2: 168,142,10; --semi-yellow-3: 210,175,15; --semi-yellow-4: 252,206,20; --semi-yellow-5: 253,222,67; --semi-yellow-6: 253,235,113; --semi-yellow-7: 254,245,160; --semi-yellow-8: 254,251,208; --semi-yellow-9: 255,254,236; --semi-amber-0: 81,46,9; --semi-amber-1: 121,75,15; --semi-amber-2: 161,107,22; --semi-amber-3: 202,143,30; --semi-amber-4: 242,183,38; --semi-amber-5: 245,202,80; --semi-amber-6: 247,219,122; --semi-amber-7: 250,234,166; --semi-amber-8: 252,246,210; --semi-amber-9: 254,251,237; --semi-orange-0: 85,31,3; --semi-orange-1: 128,53,6; --semi-orange-2: 170,80,10; --semi-orange-3: 213,111,15; --semi-orange-4: 255,146,20; --semi-orange-5: 255,174,67; --semi-orange-6: 255,199,114; --semi-orange-7: 255,221,161; --semi-orange-8: 255,239,208; --semi-orange-9: 255,249,237; --semi-grey-0: 28,31,35; --semi-grey-1: 46,50,56; --semi-grey-2: 65,70,76; --semi-grey-3: 85,91,97; --semi-grey-4: 107,112,117; --semi-grey-5: 136,141,146; --semi-grey-6: 167,171,176; --semi-grey-7: 198,202,205; --semi-grey-8: 230,232,234; --semi-grey-9: 249,249,249; --semi-white: 255, 255, 255; --semi-black: 0, 0, 0; } body, html[theme-mode=dark] .semi-always-light { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; --semi-color-white: rgba(var(--semi-white), 1); --semi-color-black: rgba(var(--semi-black), 1); --semi-color-primary: rgba(var(--semi-blue-5), 1); --semi-color-primary-hover: rgba(var(--semi-blue-6), 1); --semi-color-primary-active: rgba(var(--semi-blue-7), 1); --semi-color-primary-disabled: rgba(var(--semi-blue-2), 1); --semi-color-primary-light-default: rgba(var(--semi-blue-0), 1); --semi-color-primary-light-hover: rgba(var(--semi-blue-1), 1); --semi-color-primary-light-active: rgba(var(--semi-blue-2), 1); --semi-color-secondary: rgba(var(--semi-light-blue-5), 1); --semi-color-secondary-hover: rgba(var(--semi-light-blue-6), 1); --semi-color-secondary-active: rgba(var(--semi-light-blue-7), 1); --semi-color-secondary-disabled: rgba(var(--semi-light-blue-2), 1); --semi-color-secondary-light-default: rgba(var(--semi-light-blue-0), 1); --semi-color-secondary-light-hover: rgba(var(--semi-light-blue-1), 1); --semi-color-secondary-light-active: rgba(var(--semi-light-blue-2), 1); --semi-color-tertiary: rgba(var(--semi-grey-5), 1); --semi-color-tertiary-hover: rgba(var(--semi-grey-6), 1); --semi-color-tertiary-active: rgba(var(--semi-grey-7), 1); --semi-color-tertiary-light-default: rgba(var(--semi-grey-0), 1); --semi-color-tertiary-light-hover: rgba(var(--semi-grey-1), 1); --semi-color-tertiary-light-active: rgba(var(--semi-grey-2), 1); --semi-color-default: rgba(var(--semi-grey-0), 1); --semi-color-default-hover: rgba(var(--semi-grey-1), 1); --semi-color-default-active: rgba(var(--semi-grey-2), 1); --semi-color-info: rgba(var(--semi-blue-5), 1); --semi-color-info-hover: rgba(var(--semi-blue-6), 1); --semi-color-info-active: rgba(var(--semi-blue-7), 1); --semi-color-info-disabled: rgba(var(--semi-blue-2), 1); --semi-color-info-light-default: rgba(var(--semi-blue-0), 1); --semi-color-info-light-hover: rgba(var(--semi-blue-1), 1); --semi-color-info-light-active: rgba(var(--semi-blue-2), 1); --semi-color-success: rgba(var(--semi-green-5), 1); --semi-color-success-hover: rgba(var(--semi-green-6), 1); --semi-color-success-active: rgba(var(--semi-green-7), 1); --semi-color-success-disabled: rgba(var(--semi-green-2), 1); --semi-color-success-light-default: rgba(var(--semi-green-0), 1); --semi-color-success-light-hover: rgba(var(--semi-green-1), 1); --semi-color-success-light-active: rgba(var(--semi-green-2), 1); --semi-color-danger: rgba(var(--semi-red-5), 1); --semi-color-danger-hover: rgba(var(--semi-red-6), 1); --semi-color-danger-active: rgba(var(--semi-red-7), 1); --semi-color-danger-light-default: rgba(var(--semi-red-0), 1); --semi-color-danger-light-hover: rgba(var(--semi-red-1), 1); --semi-color-danger-light-active: rgba(var(--semi-red-2), 1); --semi-color-warning: rgba(var(--semi-orange-5), 1); --semi-color-warning-hover: rgba(var(--semi-orange-6), 1); --semi-color-warning-active: rgba(var(--semi-orange-7), 1); --semi-color-warning-light-default: rgba(var(--semi-orange-0), 1); --semi-color-warning-light-hover: rgba(var(--semi-orange-1), 1); --semi-color-warning-light-active: rgba(var(--semi-orange-2), 1); --semi-color-focus-border: rgba(var(--semi-blue-5), 1); --semi-color-disabled-text: rgba(var(--semi-grey-9), .35); --semi-color-disabled-border: rgba(var(--semi-grey-1), 1); --semi-color-disabled-bg: rgba(var(--semi-grey-1), 1); --semi-color-disabled-fill: rgba(var(--semi-grey-8), .04); --semi-color-shadow: rgba(var(--semi-black), .04); --semi-color-link: rgba(var(--semi-blue-5), 1); --semi-color-link-hover: rgba(var(--semi-blue-6), 1); --semi-color-link-active: rgba(var(--semi-blue-7), 1); --semi-color-link-visited: rgba(var(--semi-blue-5), 1); --semi-color-border: rgba(var(--semi-grey-9), .08); --semi-color-nav-bg: rgba(var(--semi-white), 1); --semi-color-overlay-bg: rgba(22, 22, 26, .6); --semi-color-fill-0: rgba(var(--semi-grey-8), .05); --semi-color-fill-1: rgba(var(--semi-grey-8), .09); --semi-color-fill-2: rgba(var(--semi-grey-8), .13); --semi-color-bg-0: rgba(var(--semi-white), 1); --semi-color-bg-1: rgba(var(--semi-white), 1); --semi-color-bg-2: rgba(var(--semi-white), 1); --semi-color-bg-3: rgba(var(--semi-white), 1); --semi-color-bg-4: rgba(var(--semi-white), 1); --semi-color-text-0: rgba(var(--semi-grey-9), 1); --semi-color-text-1: rgba(var(--semi-grey-9), .8); --semi-color-text-2: rgba(var(--semi-grey-9), .62); --semi-color-text-3: rgba(var(--semi-grey-9), .35); --semi-shadow-elevated: 0 0 1px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .1); --semi-border-radius-extra-small: 3px; --semi-border-radius-small: 3px; --semi-border-radius-medium: 6px; --semi-border-radius-large: 12px; --semi-border-radius-circle: 50%; --semi-border-radius-full: 9999px; --semi-color-highlight-bg: rgba(var(--semi-yellow-4), 1); --semi-color-highlight: rgba(var(--semi-black), 1); } html[theme-mode=dark] body, body .semi-always-dark { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; --semi-color-white: rgba(228, 231, 245, 1); --semi-color-black: rgba(var(--semi-black), 1); --semi-color-primary: rgba(var(--semi-blue-5), 1); --semi-color-primary-hover: rgba(var(--semi-blue-6), 1); --semi-color-primary-active: rgba(var(--semi-blue-7), 1); --semi-color-primary-disabled: rgba(var(--semi-blue-2), 1); --semi-color-primary-light-default: rgba(var(--semi-blue-5), .2); --semi-color-primary-light-hover: rgba(var(--semi-blue-5), .3); --semi-color-primary-light-active: rgba(var(--semi-blue-5), .4); --semi-color-secondary: rgba(var(--semi-light-blue-5), 1); --semi-color-secondary-hover: rgba(var(--semi-light-blue-6), 1); --semi-color-secondary-active: rgba(var(--semi-light-blue-7), 1); --semi-color-secondary-disabled: rgba(var(--semi-light-blue-2), 1); --semi-color-secondary-light-default: rgba(var(--semi-light-blue-5), .2); --semi-color-secondary-light-hover: rgba(var(--semi-light-blue-5), .3); --semi-color-secondary-light-active: rgba(var(--semi-light-blue-5), .4); --semi-color-tertiary: rgba(var(--semi-grey-5), 1); --semi-color-tertiary-hover: rgba(var(--semi-grey-6), 1); --semi-color-tertiary-active: rgba(var(--semi-grey-7), 1); --semi-color-tertiary-light-default: rgba(var(--semi-grey-5), .2); --semi-color-tertiary-light-hover: rgba(var(--semi-grey-5), .3); --semi-color-tertiary-light-active: rgba(var(--semi-grey-5), .4); --semi-color-default: rgba(var(--semi-grey-0), 1); --semi-color-default-hover: rgba(var(--semi-grey-1), 1); --semi-color-default-active: rgba(var(--semi-grey-2), 1); --semi-color-info: rgba(var(--semi-blue-5), 1); --semi-color-info-hover: rgba(var(--semi-blue-6), 1); --semi-color-info-active: rgba(var(--semi-blue-7), 1); --semi-color-info-disabled: rgba(var(--semi-blue-2), 1); --semi-color-info-light-default: rgba(var(--semi-blue-5), .2); --semi-color-info-light-hover: rgba(var(--semi-blue-5), .3); --semi-color-info-light-active: rgba(var(--semi-blue-5), .4); --semi-color-success: rgba(var(--semi-green-5), 1); --semi-color-success-hover: rgba(var(--semi-green-6), 1); --semi-color-success-active: rgba(var(--semi-green-7), 1); --semi-color-success-disabled: rgba(var(--semi-green-2), 1); --semi-color-success-light-default: rgba(var(--semi-green-5), .2); --semi-color-success-light-hover: rgba(var(--semi-green-5), .3); --semi-color-success-light-active: rgba(var(--semi-green-5), .4); --semi-color-danger: rgba(var(--semi-red-5), 1); --semi-color-danger-hover: rgba(var(--semi-red-6), 1); --semi-color-danger-active: rgba(var(--semi-red-7), 1); --semi-color-danger-light-default: rgba(var(--semi-red-5), .2); --semi-color-danger-light-hover: rgba(var(--semi-red-5), .3); --semi-color-danger-light-active: rgba(var(--semi-red-5), .4); --semi-color-warning: rgba(var(--semi-orange-5), 1); --semi-color-warning-hover: rgba(var(--semi-orange-6), 1); --semi-color-warning-active: rgba(var(--semi-orange-7), 1); --semi-color-warning-light-default: rgba(var(--semi-orange-5), .2); --semi-color-warning-light-hover: rgba(var(--semi-orange-5), .3); --semi-color-warning-light-active: rgba(var(--semi-orange-5), .4); --semi-color-focus-border: rgba(var(--semi-blue-5), 1); --semi-color-disabled-text: rgba(var(--semi-grey-9), .35); --semi-color-disabled-border: rgba(var(--semi-grey-1), 1); --semi-color-disabled-bg: rgba(var(--semi-grey-1), 1); --semi-color-disabled-fill: rgba(var(--semi-grey-8), .04); --semi-color-link: rgba(var(--semi-blue-5), 1); --semi-color-link-hover: rgba(var(--semi-blue-6), 1); --semi-color-link-active: rgba(var(--semi-blue-7), 1); --semi-color-link-visited: rgba(var(--semi-blue-5), 1); --semi-color-nav-bg: rgba(35, 36, 41, 1); --semi-shadow-elevated: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 4px 14px rgba(0, 0, 0, .25); --semi-color-overlay-bg: rgba(22, 22, 26, .6); --semi-color-fill-0: rgba(var(--semi-white), .12); --semi-color-fill-1: rgba(var(--semi-white), .16); --semi-color-fill-2: rgba(var(--semi-white), .20); --semi-color-border: rgba(var(--semi-white), .08); --semi-color-shadow: rgba(var(--semi-black), .04); --semi-color-bg-0: rgba(22, 22, 26, 1); --semi-color-bg-1: rgba(35, 36, 41, 1); --semi-color-bg-2: rgba(53, 54, 60, 1); --semi-color-bg-3: rgba(67, 68, 74, 1); --semi-color-bg-4: rgba(79, 81, 89, 1); --semi-color-text-0: rgba(var(--semi-grey-9), 1); --semi-color-text-1: rgba(var(--semi-grey-9), .8); --semi-color-text-2: rgba(var(--semi-grey-9), .6); --semi-color-text-3: rgba(var(--semi-grey-9), .35); --semi-border-radius-extra-small: 3px; --semi-border-radius-small: 3px; --semi-border-radius-medium: 6px; --semi-border-radius-large: 12px; --semi-border-radius-circle: 50%; --semi-border-radius-full: 9999px; --semi-color-highlight-bg: rgba(var(--semi-yellow-2), 1); --semi-color-highlight: rgba(var(--semi-white), 1); } body { --semi-transition_duration-slowest:0ms; --semi-transition_duration-slower:0ms; --semi-transition_duration-slow:0ms; --semi-transition_duration-normal:0ms; --semi-transition_duration-fast:0ms; --semi-transition_duration-faster:0ms; --semi-transition_duration-fastest:0ms; --semi-transition_duration-none:0ms; --semi-transition_function-linear:linear; --semi-transition_function-ease:ease; --semi-transition_function-easeIn:ease-in; --semi-transition_function-easeOut:ease-out; --semi-transition_function-easeInIOut:ease-in-out; --semi-transition_delay-none: 0ms; --semi-transition_delay-slowest:0ms; --semi-transition_delay-slower:0ms; --semi-transition_delay-slow:0ms; --semi-transition_delay-normal:0ms; --semi-transition_delay-fast:0ms; --semi-transition_delay-faster:0ms; --semi-transition_delay-fastest:0ms; --semi-transform_scale-none:scale(1,1); --semi-transform_scale-small:scale(1,1); --semi-transform_scale-medium:scale(1,1); --semi-transform_scale-large:scale(1,1); --semi-transform-rotate-none:rotate(0deg); --semi-transform_rotate-clockwise90deg:rotate(90deg); --semi-transform_rotate-clockwise180deg:rotate(180deg); --semi-transform_rotate-clockwise270deg:rotate(270deg); --semi-transform_rotate-clockwise360deg:rotate(360deg); --semi-transform_rotate-anticlockwise90deg:rotate(-90deg); --semi-transform_rotate-anticlockwise180deg:rotate(-180deg); --semi-transform_rotate-anticlockwise270deg:rotate(-270deg); --semi-transform_rotate-anticlockwise360deg:rotate(-360deg); } .semi-portal { position: absolute; top: 0; left: 0; width: 100%; z-index: 1; } .semi-portal-inner { position: absolute; background-color: transparent; min-width: max-content; } .semi-anchor { font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; overflow-y: auto; overflow-x: hidden; position: relative; } .semi-anchor-size-small { font-size: 12px; line-height: 16px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; } .semi-anchor-slide { position: absolute; left: 0; top: 0; height: 100%; } .semi-anchor-slide-muted { display: none; } .semi-anchor-slide-bar { display: none; position: absolute; top: 0; width: 2px; border-radius: 1px; } .semi-anchor-slide-bar-active { display: inline-block; } .semi-anchor-slide-bar-default { height: 28px; } .semi-anchor-slide-bar-small { height: 24px; } .semi-anchor-slide-bar-primary { background-color: var(--semi-color-primary); } .semi-anchor-slide-bar-tertiary { background-color: var(--semi-color-tertiary); } .semi-anchor-slide::before { position: absolute; display: block; width: 2px; height: 100%; background-color: var(--semi-color-border); border-radius: 1px; content: " "; } .semi-anchor-link-title { cursor: pointer; color: var(--semi-color-text-2); padding-top: 4px; padding-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: 3px; transition: color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); transform: scale(var(--semi-transform_scale-none)); } .semi-anchor-link-title:hover { color: var(--semi-color-tertiary-hover); } .semi-anchor-link-title-active { color: var(--semi-color-text-0); } .semi-anchor-link-title:focus-visible { outline: 2px solid var(--semi-color-primary-light-active); outline-offset: -2px; } .semi-anchor-link-title-disabled { color: var(--semi-color-disabled-text); cursor: not-allowed; } .semi-anchor-link-title-disabled:hover { color: var(--semi-color-disabled-text); } .semi-anchor-link-tooltip { cursor: pointer; color: var(--semi-color-text-2) !important; } .semi-anchor-link-tooltip-small { font-size: 12px; line-height: 16px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; } .semi-anchor-link-tooltip:hover { color: var(--semi-color-tertiary-hover) !important; } .semi-anchor-link-tooltip-active { color: var(--semi-color-text-0) !important; } .semi-anchor-link-tooltip-disabled { color: var(--semi-color-disabled-text) !important; cursor: not-allowed; } .semi-anchor-link-tooltip-disabled:hover { color: var(--semi-color-disabled-text) !important; } .semi-rtl .semi-anchor, .semi-portal-rtl .semi-anchor { direction: rtl; } .semi-rtl .semi-anchor-slide, .semi-portal-rtl .semi-anchor-slide { right: 0; left: auto; } .semi-rtl .semi-anchor-link, .semi-portal-rtl .semi-anchor-link { padding-left: auto; } .semi-autoComplete-option { font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; word-break: break-all; padding-left: 12px; padding-right: 12px; padding-top: 8px; padding-bottom: 8px; color: var(--semi-color-text-0); border-radius: 0px; position: relative; display: flex; flex-wrap: nowrap; align-items: center; cursor: pointer; box-sizing: border-box; transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); } .semi-autoComplete-option-icon { width: 12px; color: transparent; visibility: hidden; margin-right: 8px; display: flex; justify-content: center; align-content: center; } .semi-autoComplete-option-text { display: flex; flex-wrap: wrap; white-space: pre; } .semi-autoComplete-option-keyword { color: var(--semi-color-primary); background-color: inherit; font-weight: 600; } .semi-autoComplete-option:active { background-color: var(--semi-color-fill-1); } .semi-autoComplete-option-empty { cursor: not-allowed; color: var(--semi-color-disabled-text); justify-content: center; } .semi-autoComplete-option-empty:hover { background-color: inherit; } .semi-autoComplete-option-empty:active { background-color: inherit; } .semi-autoComplete-option-disabled { color: var(--semi-color-disabled-text); cursor: not-allowed; } .semi-autoComplete-option-disabled:hover { background-color: var(--semi-color-fill-0); } .semi-autoComplete-option-selected { font-weight: 600; } .semi-autoComplete-option-selected .semi-autoComplete-option-icon { visibility: visible; color: var(--semi-color-text-2); } .semi-autoComplete-option-focused { background-color: var(--semi-color-fill-0); } .semi-autoComplete-option:first-of-type { margin-top: 4px; } .semi-autoComplete-option:last-of-type { margin-bottom: 4px; } .semi-autocomplete { cursor: text; display: inline-flex; vertical-align: middle; box-sizing: border-box; } .semi-autocomplete-option-list { overflow-x: hidden; overflow-y: auto; } .semi-autocomplete-option-list-chosen .semi-autocomplete-option-icon { display: flex; } .semi-autocomplete-loading-wrapper { padding-top: 8px; padding-bottom: 8px; cursor: not-allowed; height: 20px; } .semi-autocomplete-loading-wrapper .semi-spin { width: 100%; } .semi-rtl .semi-autocomplete, .semi-portal-rtl .semi-autocomplete { direction: rtl; } .semi-avatar { position: relative; display: inline-flex; overflow: hidden; align-items: center; justify-content: center; white-space: nowrap; text-align: center; vertical-align: middle; } .semi-avatar:focus-visible { outline: 2px solid var(--semi-color-primary-light-active); } .semi-avatar-focus { outline: 2px solid var(--semi-color-primary-light-active); } .semi-avatar-no-focus-visible:focus-visible { outline: none; } .semi-avatar .semi-avatar-label { display: flex; align-items: center; font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 600; } .semi-avatar-content { user-select: none; } .semi-avatar-extra-extra-small { width: 20px; height: 20px; border-radius: 3px; } .semi-avatar-extra-extra-small .semi-avatar-content { transform-origin: center; transform: scale(0.8); } .semi-avatar-extra-extra-small .semi-avatar-label { font-size: 10px; line-height: 15px; } .semi-avatar-extra-small { width: 24px; height: 24px; border-radius: 3px; } .semi-avatar-extra-small .semi-avatar-content { transform-origin: center; transform: scale(0.8); } .semi-avatar-extra-small .semi-avatar-label { font-size: 10px; line-height: 15px; } .semi-avatar-small { width: 32px; height: 32px; border-radius: 3px; } .semi-avatar-small .semi-avatar-label { font-size: 12px; line-height: 16px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; } .semi-avatar-default { width: 40px; height: 40px; border-radius: 3px; } .semi-avatar-default .semi-avatar-label { font-size: 18px; line-height: 24px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; } .semi-avatar-medium { width: 48px; height: 48px; border-radius: 3px; } .semi-avatar-medium .semi-avatar-label { font-size: 20px; line-height: 28px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; } .semi-avatar-large { width: 72px; height: 72px; border-radius: 6px; } .semi-avatar-large .semi-avatar-label { font-size: 32px; line-height: 44px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; } .semi-avatar-extra-large { width: 128px; height: 128px; border-radius: 12px; } .semi-avatar-extra-large .semi-avatar-label { font-size: 64px; line-height: 77px; } .semi-avatar-circle { border-radius: var(--semi-border-radius-circle); } .semi-avatar-image { background-color: transparent; } .semi-avatar > img { display: block; width: 100%; height: 100%; object-fit: cover; } .semi-avatar-hover { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .semi-avatar:hover { cursor: pointer; } .semi-avatar-group { display: inline-block; } .semi-avatar-group .semi-avatar { box-sizing: border-box; } .semi-avatar-group .semi-avatar:first-child { margin-left: 0; } .semi-avatar-group .semi-avatar-extra-large { border: 3px var(--semi-color-bg-1) solid; margin-left: -32px; } .semi-avatar-group .semi-avatar-large { border: 3px var(--semi-color-bg-1) solid; margin-left: -18px; } .semi-avatar-group .semi-avatar-medium { border: 2px var(--semi-color-bg-1) solid; margin-left: -12px; } .semi-avatar-group .semi-avatar-default { border: 2px var(--semi-color-bg-1) solid; margin-left: -12px; } .semi-avatar-group .semi-avatar-small { border: 2px var(--semi-color-bg-1) solid; margin-left: -12px; } .semi-avatar-group .semi-avatar-extra-small { border: 1px var(--semi-color-bg-1) solid; margin-left: -10px; } .semi-avatar-group .semi-avatar-extra-extra-small { border: 1px var(--semi-color-bg-1) solid; margin-left: -4px; } .semi-avatar-group .semi-avatar-item-start-0 { z-index: 100; } .semi-avatar-group .semi-avatar-item-end-0 { z-index: 80; } .semi-avatar-group .semi-avatar-item-start-1 { z-index: 99; } .semi-avatar-group .semi-avatar-item-end-1 { z-index: 81; } .semi-avatar-group .semi-avatar-item-start-2 { z-index: 98; } .semi-avatar-group .semi-avatar-item-end-2 { z-index: 82; } .semi-avatar-group .semi-avatar-item-start-3 { z-index: 97; } .semi-avatar-group .semi-avatar-item-end-3 { z-index: 83; } .semi-avatar-group .semi-avatar-item-start-4 { z-index: 96; } .semi-avatar-group .semi-avatar-item-end-4 { z-index: 84; } .semi-avatar-group .semi-avatar-item-start-5 { z-index: 95; } .semi-avatar-group .semi-avatar-item-end-5 { z-index: 85; } .semi-avatar-group .semi-avatar-item-start-6 { z-index: 94; } .semi-avatar-group .semi-avatar-item-end-6 { z-index: 86; } .semi-avatar-group .semi-avatar-item-start-7 { z-index: 93; } .semi-avatar-group .semi-avatar-item-end-7 { z-index: 87; } .semi-avatar-group .semi-avatar-item-start-8 { z-index: 92; } .semi-avatar-group .semi-avatar-item-end-8 { z-index: 88; } .semi-avatar-group .semi-avatar-item-start-9 { z-index: 91; } .semi-avatar-group .semi-avatar-item-end-9 { z-index: 89; } .semi-avatar-group .semi-avatar-item-start-10 { z-index: 90; } .semi-avatar-group .semi-avatar-item-end-10 { z-index: 90; } .semi-avatar-group .semi-avatar-item-start-11 { z-index: 89; } .semi-avatar-group .semi-avatar-item-end-11 { z-index: 91; } .semi-avatar-group .semi-avatar-item-start-12 { z-index: 88; } .semi-avatar-group .semi-avatar-item-end-12 { z-index: 92; } .semi-avatar-group .semi-avatar-item-start-13 { z-index: 87; } .semi-avatar-group .semi-avatar-item-end-13 { z-index: 93; } .semi-avatar-group .semi-avatar-item-start-14 { z-index: 86; } .semi-avatar-group .semi-avatar-item-end-14 { z-index: 94; } .semi-avatar-group .semi-avatar-item-start-15 { z-index: 85; } .semi-avatar-group .semi-avatar-item-end-15 { z-index: 95; } .semi-avatar-group .semi-avatar-item-start-16 { z-index: 84; } .semi-avatar-group .semi-avatar-item-end-16 { z-index: 96; } .semi-avatar-group .semi-avatar-item-start-17 { z-index: 83; } .semi-avatar-group .semi-avatar-item-end-17 { z-index: 97; } .semi-avatar-group .semi-avatar-item-start-18 { z-index: 82; } .semi-avatar-group .semi-avatar-item-end-18 { z-index: 98; } .semi-avatar-group .semi-avatar-item-start-19 { z-index: 81; } .semi-avatar-group .semi-avatar-item-end-19 { z-index: 99; } .semi-avatar-group .semi-avatar-item-start-20 { z-index: 80; } .semi-avatar-group .semi-avatar-item-end-20 { z-index: 100; } .semi-avatar-group .semi-avatar-item-more { background-color: rgba(var(--semi-grey-5), 1); } .semi-avatar-amber { background-color: rgba(var(--semi-amber-3), 1); color: rgba(var(--semi-white), 1); } .semi-avatar-blue { background-color: rgba(var(--semi-blue-3), 1); color: rgba(var(--semi-white), 1); } .semi-avatar-cyan { background-color: rgba(var(--semi-cyan-3), 1); color: rgba(var(--semi-white), 1); } .semi-avatar-green { background-color: rgba(var(--semi-green-3), 1); color: rgba(var(--semi-white), 1); } .semi-avatar-grey { background-color: rgba(var(--semi-grey-3), 1); color: rgba(var(--semi-white), 1); } .semi-avatar-indigo { background-color: rgba(var(--semi-indigo-3), 1); color: rgba(var(--semi-white), 1); } .semi-avatar-light-blue { background-color: rgba(var(--semi-light-blue-3), 1); color: rgba(var(--semi-white), 1); } .semi-avatar-light-green { background-color: rgba(var(--semi-light-green-3), 1); color: rgba(var(--semi-white), 1); } .semi-avatar-lime { background-color: rgba(var(--semi-lime-3), 1); color: rgba(var(--semi-white), 1); } .semi-avatar-orange { background-color: rgba(var(--semi-orange-3), 1); color: rgba(var(--semi-white), 1); } .semi-avatar-pink { background-color: rgba(var(--semi-pink-3), 1); color: rgba(var(--semi-white), 1); } .semi-avatar-purple { background-color: rgba(var(--semi-purple-3), 1); color: rgba(var(--semi-white), 1); } .semi-avatar-red { background-color: rgba(var(--semi-red-3), 1); color: rgba(var(--semi-white), 1); } .semi-avatar-teal { background-color: rgba(var(--semi-teal-3), 1); color: rgba(var(--semi-white), 1); } .semi-avatar-violet { background-color: rgba(var(--semi-violet-3), 1); color: rgba(var(--semi-white), 1); } .semi-avatar-yellow { background-color: rgba(var(--semi-yellow-3), 1); color: rgba(var(--semi-white), 1); } .semi-rtl .semi-avatar, .semi-portal-rtl .semi-avatar { direction: rtl; } .semi-rtl .semi-avatar-extra-extra-small .semi-avatar-content, .semi-portal-rtl .semi-avatar-extra-extra-small .semi-avatar-content { transform: scale(0.8); } .semi-rtl .semi-avatar-extra-small .semi-avatar-content, .semi-portal-rtl .semi-avatar-extra-small .semi-avatar-content { transform: scale(0.8); } .semi-rtl .semi-avatar-hover, .semi-portal-rtl .semi-avatar-hover { left: auto; right: 0; } .semi-rtl .semi-avatar-group, .semi-portal-rtl .semi-avatar-group { direction: rtl; } .semi-rtl .semi-avatar-group .semi-avatar:first-child, .semi-portal-rtl .semi-avatar-group .semi-avatar:first-child { margin-left: auto; margin-right: 0; } .semi-rtl .semi-avatar-group .semi-avatar-extra-large, .semi-portal-rtl .semi-avatar-group .semi-avatar-extra-large { margin-left: auto; margin-right: -32px; } .semi-rtl .semi-avatar-group .semi-avatar-large, .semi-portal-rtl .semi-avatar-group .semi-avatar-large { margin-left: auto; margin-right: -18px; } .semi-rtl .semi-avatar-group .semi-avatar-medium, .semi-rtl .semi-avatar-group .semi-avatar-small, .semi-portal-rtl .semi-avatar-group .semi-avatar-medium, .semi-portal-rtl .semi-avatar-group .semi-avatar-small { margin-left: auto; margin-right: -12px; } .semi-rtl .semi-avatar-group .semi-avatar-extra-small, .semi-portal-rtl .semi-avatar-group .semi-avatar-extra-small { margin-left: auto; margin-right: -10px; } .semi-rtl .semi-avatar-group .semi-avatar-extra-extra-small, .semi-portal-rtl .semi-avatar-group .semi-avatar-extra-extra-small { margin-left: auto; margin-right: -4px; } .semi-backtop { position: fixed; box-sizing: border-box; right: 100px; bottom: 50px; z-index: 10; cursor: pointer; text-align: center; overflow: hidden; } .semi-rtl .semi-backtop, .semi-portal-rtl .semi-backtop { direction: rtl; right: auto; left: 100px; } .semi-badge { position: relative; display: inline-block; } .semi-badge-dot { box-sizing: border-box; width: 8px; height: 8px; border-radius: var(--semi-border-radius-circle); background-color: var(--semi-color-bg-1); border: 1px var(--semi-color-bg-1) solid; z-index: 1; } .semi-badge-count { box-sizing: border-box; height: 18px; min-width: 18px; border-radius: 9px; padding: 0px 4px; background-color: var(--semi-color-bg-1); border: 1px var(--semi-color-bg-1) solid; z-index: 1; text-align: center; font-size: 12px; line-height: 16px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 14px; color: var(--semi-color-bg-2); } .semi-badge-rightTop { position: absolute; top: 0; right: 0; transform: translate(50%, -50%); transform-origin: 100% 0%; } .semi-badge-rightBottom { position: absolute; right: 0; bottom: 0; transform: translate(50%, 50%); transform-origin: 100% 0%; } .semi-badge-leftTop { position: absolute; top: 0; left: 0; transform: translate(-50%, -50%); transform-origin: 100% 0%; } .semi-badge-leftBottom { position: absolute; bottom: 0; left: 0; transform: translate(-50%, 50%); transform-origin: 100% 0%; } .semi-badge-custom { display: flex; } .semi-badge-block { position: static; display: inline-block; } .semi-badge-light::before { content: ""; display: block; width: 100%; height: 100%; border-radius: inherit; position: absolute; top: 0; left: 0; background-color: var(--semi-color-bg-2); z-index: -1; } .semi-badge-light::after { content: ""; display: block; width: 100%; height: 100%; border-radius: inherit; position: absolute; top: 0; left: 0; background-color: inherit; z-index: -1; } .semi-badge-primary.semi-badge-solid { background-color: var(--semi-color-primary); } .semi-badge-primary.semi-badge-light { background-color: var(--semi-color-primary-light-default); color: var(--semi-color-primary); } .semi-badge-primary.semi-badge-inverted { color: var(--semi-color-primary); } .semi-badge-secondary.semi-badge-solid { background-color: var(--semi-color-secondary); } .semi-badge-secondary.semi-badge-light { background-color: var(--semi-color-secondary-light-default); color: var(--semi-color-secondary); } .semi-badge-secondary.semi-badge-inverted { color: var(--semi-color-secondary); } .semi-badge-tertiary.semi-badge-solid { background-color: var(--semi-color-tertiary); } .semi-badge-tertiary.semi-badge-light { background-color: var(--semi-color-tertiary-light-default); color: var(--semi-color-tertiary); } .semi-badge-tertiary.semi-badge-inverted { color: var(--semi-color-tertiary); } .semi-badge-danger.semi-badge-solid { background-color: var(--semi-color-danger); } .semi-badge-danger.semi-badge-light { background-color: var(--semi-color-danger-light-default); color: var(--semi-color-danger); } .semi-badge-danger.semi-badge-inverted { color: var(--semi-color-danger); } .semi-badge-warning.semi-badge-solid { background-color: var(--semi-color-warning); } .semi-badge-warning.semi-badge-light { background-color: var(--semi-color-warning-light-default); color: var(--semi-color-warning); } .semi-badge-warning.semi-badge-inverted { color: var(--semi-color-warning); } .semi-badge-success.semi-badge-solid { background-color: var(--semi-color-success); } .semi-badge-success.semi-badge-light { background-color: var(--semi-color-success-light-default); color: var(--semi-color-success); } .semi-badge-success.semi-badge-inverted { color: var(--semi-color-success); } .semi-rtl .semi-badge, .semi-portal-rtl .semi-badge { direction: rtl; } .semi-banner { padding: 12px 12px; } .semi-banner-content-wrapper { display: flex; flex-direction: row; } .semi-banner-description { margin: 0; } .semi-banner .semi-banner-content-wrapper .semi-banner-content { display: flex; flex: 1; align-items: top; } .semi-banner-in-container { border-radius: var(--semi-border-radius-small); } .semi-banner-in-container .semi-banner-content-wrapper .semi-banner-content-body { flex: 1; } .semi-banner-in-container .semi-banner-content-wrapper .semi-banner-content-body .semi-banner-title + .semi-banner-description { margin-top: 2px; } .semi-banner-full .semi-banner-content-wrapper .semi-banner-content { justify-content: center; } .semi-banner-full .semi-banner-content-wrapper .semi-banner-icon, .semi-banner-full .semi-banner-content-wrapper .semi-banner-content-body { display: flex; align-items: center; } .semi-banner-close { margin-left: 12px; height: 24px; width: 24px; } .semi-banner-extra { margin-top: 8px; } .semi-banner-icon { display: flex; margin-right: 12px; } .semi-banner-info { background-color: var(--semi-color-info-light-default); color: var(--semi-color-info); } .semi-banner-info.semi-banner-bordered { border: 1px solid var(--semi-color-info); } .semi-banner-warning { background-color: var(--semi-color-warning-light-default); color: var(--semi-color-warning); } .semi-banner-warning.semi-banner-bordered { border: 1px solid var(--semi-color-warning); } .semi-banner-success { background-color: var(--semi-color-success-light-default); color: var(--semi-color-success); } .semi-banner-success.semi-banner-bordered { border: 1px solid var(--semi-color-success); } .semi-banner-danger { background-color: var(--semi-color-danger-light-default); color: var(--semi-color-danger); } .semi-banner-danger.semi-banner-bordered { border: 1px solid var(--semi-color-danger); } .semi-rtl .semi-banner, .semi-portal-rtl .semi-banner { direction: rtl; } .semi-rtl .semi-banner-close, .semi-portal-rtl .semi-banner-close { margin-left: 0; margin-right: 12px; height: 24px; width: 24px; } .semi-rtl .semi-banner-icon, .semi-portal-rtl .semi-banner-icon { margin-right: 0; margin-left: 12px; } .semi-light-scrollbar::-webkit-scrollbar, .semi-light-scrollbar *::-webkit-scrollbar { width: 8px; height: 8px; } .semi-light-scrollbar::-webkit-scrollbar-track, .semi-light-scrollbar *::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0); } .semi-light-scrollbar::-webkit-scrollbar-corner, .semi-light-scrollbar *::-webkit-scrollbar-corner { background-color: rgba(0, 0, 0, 0); } .semi-light-scrollbar::-webkit-scrollbar-thumb, .semi-light-scrollbar *::-webkit-scrollbar-thumb { border-radius: 6px; background: transparent; transition: all 1s; } .semi-light-scrollbar:hover::-webkit-scrollbar-thumb, .semi-light-scrollbar *:hover::-webkit-scrollbar-thumb { background: var(--semi-color-fill-2); } .semi-light-scrollbar::-webkit-scrollbar-thumb:hover, .semi-light-scrollbar *::-webkit-scrollbar-thumb:hover { background: var(--semi-color-fill-1); } .semi-breadcrumb { overflow: hidden; } .semi-breadcrumb-wrapper { display: flex; flex-wrap: wrap; } .semi-breadcrumb-wrapper-loose { font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; } .semi-breadcrumb-wrapper-compact { font-size: 12px; line-height: 16px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 12px; } .semi-breadcrumb-item-wrap { display: inline-flex; align-items: center; margin: 4px 0px; margin-right: 4px; } .semi-breadcrumb-item { display: inline; margin-right: 4px; color: var(--semi-color-text-2); font-weight: 400; } .semi-breadcrumb-item .semi-typography { color: inherit; } .semi-breadcrumb-item-title-inline { display: inline-flex; } .semi-breadcrumb-item-active { color: var(--semi-color-text-0); font-weight: 600; } .semi-breadcrumb-item-active:hover, .semi-breadcrumb-item-active:active { border: none; margin-bottom: 0px; color: var(--semi-color-text-0); cursor: default; } .semi-breadcrumb-item-icon { margin-bottom: -1px; } .semi-breadcrumb-item-more svg { vertical-align: middle; } .semi-breadcrumb-item-link { display: inline-flex; align-items: center; column-gap: 4px; text-decoration: inherit; transition: color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); transform: scale(var(--semi-transform_scale-none)); } .semi-breadcrumb-item-link:hover { color: var(--semi-color-link); cursor: pointer; } .semi-breadcrumb-item-link:active { color: var(--semi-color-link-hover); cursor: pointer; } .semi-breadcrumb-collapse { display: inline-flex; flex-shrink: 0; } .semi-breadcrumb-separator { display: flex; color: var(--semi-color-text-2); } .semi-breadcrumb-restItem { color: var(--semi-color-text-2); margin-right: 8px; } .semi-rtl .semi-breadcrumb-wrapper, .semi-portal-rtl .semi-breadcrumb-wrapper { direction: rtl; } .semi-rtl .semi-breadcrumb-item-wrap, .semi-portal-rtl .semi-breadcrumb-item-wrap { margin-right: 0; margin-left: 4px; } .semi-rtl .semi-breadcrumb-item, .semi-portal-rtl .semi-breadcrumb-item { margin-right: 0; margin-left: 4px; } .semi-rtl .semi-breadcrumb-restItem, .semi-portal-rtl .semi-breadcrumb-restItem { margin-right: 0; margin-left: 8px; } .semi-rtl .semi-breadcrumb-item-icon + .semi-breadcrumb-item-title, .semi-portal-rtl .semi-breadcrumb-item-icon + .semi-breadcrumb-item-title { margin-left: 0; margin-right: 4px; display: inline-block; } .semi-button-split { display: inline-block; } .semi-button-split .semi-button { border-radius: 0; margin-right: 1px; } .semi-button-split .semi-button-first { border-top-left-radius: var(--semi-border-radius-small); border-bottom-left-radius: var(--semi-border-radius-small); } .semi-button-split .semi-button-last { border-top-right-radius: var(--semi-border-radius-small); border-bottom-right-radius: var(--semi-border-radius-small); margin-right: unset; } .semi-button-split:hover .semi-button-borderless:active { background-color: var(--semi-color-fill-1); } .semi-button { box-shadow: none; font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; height: 32px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; user-select: none; border: 0 transparent solid; border-radius: var(--semi-border-radius-small); padding-left: 12px; padding-right: 12px; padding-top: 6px; padding-bottom: 6px; font-weight: 600; outline: none; vertical-align: middle; white-space: nowrap; } .semi-button.semi-button-primary:focus-visible, .semi-button.semi-button-secondary:focus-visible, .semi-button.semi-button-tertiary:focus-visible, .semi-button.semi-button-warning:focus-visible, .semi-button.semi-button-danger:focus-visible { outline: 2px solid var(--semi-color-primary-light-active); } .semi-button-danger { background-color: var(--semi-color-danger); color: rgba(var(--semi-white), 1); transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); transform: scale(var(--semi-transform_scale-none)); } .semi-button-danger:hover { background-color: var(--semi-color-danger-hover); } .semi-button-danger:active { background-color: var(--semi-color-danger-active); } .semi-button-danger.semi-button-light, .semi-button-danger.semi-button-borderless { color: var(--semi-color-danger); } .semi-button-danger:not(.semi-button-borderless):not(.semi-button-light):focus-visible { outline: 2px solid var(--semi-color-danger-light-active); } .semi-button-warning { background-color: var(--semi-color-warning); color: rgba(var(--semi-white), 1); transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); transform: scale(var(--semi-transform_scale-none)); } .semi-button-warning:hover { background-color: var(--semi-color-warning-hover); } .semi-button-warning:active { background-color: var(--semi-color-warning-active); } .semi-button-warning.semi-button-light, .semi-button-warning.semi-button-borderless { color: var(--semi-color-warning); } .semi-button-warning:not(.semi-button-borderless):not(.semi-button-light):focus-visible { outline: 2px solid var(--semi-color-warning-light-active); } .semi-button-tertiary { background-color: var(--semi-color-tertiary); color: rgba(var(--semi-white), 1); transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); transform: scale(var(--semi-transform_scale-none)); } .semi-button-tertiary:hover { background-color: var(--semi-color-tertiary-hover); } .semi-button-tertiary:active { background-color: var(--semi-color-tertiary-active); } .semi-button-tertiary.semi-button-light, .semi-button-tertiary.semi-button-borderless { color: var(--semi-color-text-1); } .semi-button-primary { background-color: var(--semi-color-primary); color: rgba(var(--semi-white), 1); transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); transform: scale(var(--semi-transform_scale-none)); } .semi-button-primary:not(.semi-button-borderless):not(.semi-button-light):hover { background-color: var(--semi-color-primary-hover); } .semi-button-primary:not(.semi-button-borderless):not(.semi-button-light):active { background-color: var(--semi-color-primary-active); } .semi-button-primary.semi-button-light, .semi-button-primary.semi-button-borderless { color: var(--semi-color-primary); } .semi-button-secondary { background-color: var(--semi-color-secondary); outline-color: var(--semi-color-secondary); color: rgba(var(--semi-white), 1); transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); transform: scale(var(--semi-transform_scale-none)); } .semi-button-secondary:hover { background-color: var(--semi-color-secondary-hover); } .semi-button-secondary:active { background-color: var(--semi-color-secondary-active); } .semi-button-secondary.semi-button-light, .semi-button-secondary.semi-button-borderless { color: var(--semi-color-secondary); } .semi-button-disabled { color: var(--semi-color-disabled-text); background-color: var(--semi-color-disabled-bg); cursor: not-allowed; } .semi-button-disabled:not(.semi-button-borderless):not(.semi-button-light):hover { color: var(--semi-color-disabled-text); background-color: var(--semi-color-disabled-bg); } .semi-button-disabled.semi-button-light, .semi-button-disabled.semi-button-borderless { color: var(--semi-color-disabled-text); } .semi-button-borderless { background-color: transparent; border: 0 transparent solid; transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); transform: scale(var(--semi-transform_scale-none)); } .semi-button-borderless:not(.semi-button-disabled):hover { background-color: var(--semi-color-fill-0); border: 0 transparent solid; } .semi-button-borderless:not(.semi-button-disabled):active { background-color: var(--semi-color-fill-1); border: 0 transparent solid; } .semi-button-light { background-color: var(--semi-color-fill-0); border: 0 transparent solid; transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); transform: scale(var(--semi-transform_scale-none)); } .semi-button-light:not(.semi-button-disabled):hover { background-color: var(--semi-color-fill-1); border: 0 transparent solid; } .semi-button-light:not(.semi-button-disabled):active { background-color: var(--semi-color-fill-2); border: 0 transparent solid; } .semi-button-size-small { height: 24px; padding-top: 2px; padding-bottom: 2px; padding-left: 12px; padding-right: 12px; } .semi-button-size-large { height: 40px; padding-top: 10px; padding-bottom: 10px; padding-left: 16px; padding-right: 16px; } .semi-button-block { width: 100%; } .semi-button-group { display: flex; flex-wrap: wrap; } .semi-button-group > .semi-button { margin: 0; padding-left: 0; padding-right: 0; border-radius: 0; } .semi-button-group > .semi-button .semi-button-content { padding-left: 12px; padding-right: 12px; } .semi-button-group > .semi-button-size-large .semi-button-content { padding-left: 16px; padding-right: 16px; } .semi-button-group > .semi-button-size-small .semi-button-content { padding-left: 12px; padding-right: 12px; } .semi-button-group > .semi-button.semi-button-with-icon-only { padding-left: 0; padding-right: 0; } .semi-button-group > .semi-button.semi-button-with-icon-only .semi-button-content { padding-left: 8px; padding-right: 8px; } .semi-button-group > .semi-button.semi-button-with-icon-only.semi-button-size-small .semi-button-content { padding-left: 4px; padding-right: 4px; } .semi-button-group > .semi-button.semi-button-with-icon-only.semi-button-size-large .semi-button-content { padding-left: 12px; padding-right: 12px; } .semi-button-group > .semi-button:first-child { border-top-left-radius: var(--semi-border-radius-small); border-bottom-left-radius: var(--semi-border-radius-small); } .semi-button-group > .semi-button:last-child { border-top-right-radius: var(--semi-border-radius-small); border-bottom-right-radius: var(--semi-border-radius-small); } .semi-button-group-line { display: inline-flex; align-items: center; background-color: var(--semi-color-border); } .semi-button-group-line-primary { background-color: var(--semi-color-primary); } .semi-button-group-line-secondary { background-color: var(--semi-color-secondary); } .semi-button-group-line-tertiary { background-color: var(--semi-color-tertiary); } .semi-button-group-line-warning { background-color: var(--semi-color-warning); } .semi-button-group-line-danger { background-color: var(--semi-color-danger); } .semi-button-group-line-disabled { background-color: var(--semi-color-disabled-bg); } .semi-button-group-line-light { background-color: var(--semi-color-fill-0); } .semi-button-group-line-borderless { background-color: transparent; } .semi-button-group-line::before { display: block; content: ""; width: 1px; height: 20px; background-color: var(--semi-color-border); } .semi-rtl .semi-button, .semi-portal-rtl .semi-button { direction: rtl; padding-left: 12px; padding-right: 12px; } .semi-rtl .semi-button-size-small, .semi-portal-rtl .semi-button-size-small { padding-left: 12px; padding-right: 12px; } .semi-rtl .semi-button-size-large, .semi-portal-rtl .semi-button-size-large { padding-left: 16px; padding-right: 16px; } .semi-rtl .semi-button-group, .semi-portal-rtl .semi-button-group { direction: rtl; } .semi-rtl .semi-button-group > .semi-button, .semi-portal-rtl .semi-button-group > .semi-button { padding-left: 0; padding-right: 0; } .semi-rtl .semi-button-group > .semi-button .semi-button-content, .semi-portal-rtl .semi-button-group > .semi-button .semi-button-content { padding-left: 12px; padding-right: 12px; } .semi-rtl .semi-button-group > .semi-button-size-large .semi-button-content, .semi-portal-rtl .semi-button-group > .semi-button-size-large .semi-button-content { padding-left: 16px; padding-right: 16px; } .semi-rtl .semi-button-group > .semi-button-size-small .semi-button-content, .semi-portal-rtl .semi-button-group > .semi-button-size-small .semi-button-content { padding-left: 12px; padding-right: 12px; } .semi-rtl .semi-button-group > .semi-button.semi-button-with-icon-only, .semi-portal-rtl .semi-button-group > .semi-button.semi-button-with-icon-only { padding-left: 0; padding-right: 0; } .semi-rtl .semi-button-group > .semi-button.semi-button-with-icon-only .semi-button-content, .semi-portal-rtl .semi-button-group > .semi-button.semi-button-with-icon-only .semi-button-content { padding-left: 8px; padding-right: 8px; } .semi-rtl .semi-button-group > .semi-button.semi-button-with-icon-only.semi-button-size-small .semi-button-content, .semi-portal-rtl .semi-button-group > .semi-button.semi-button-with-icon-only.semi-button-size-small .semi-button-content { padding-left: 4px; padding-right: 4px; } .semi-rtl .semi-button-group > .semi-button.semi-button-with-icon-only.semi-button-size-large .semi-button-content, .semi-portal-rtl .semi-button-group > .semi-button.semi-button-with-icon-only.semi-button-size-large .semi-button-content { padding-left: 12px; padding-right: 12px; } .semi-rtl .semi-button-group > .semi-button:first-child, .semi-portal-rtl .semi-button-group > .semi-button:first-child { border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: var(--semi-border-radius-small); border-bottom-right-radius: var(--semi-border-radius-small); } .semi-rtl .semi-button-group > .semi-button:not(:last-child) .semi-button-content, .semi-portal-rtl .semi-button-group > .semi-button:not(:last-child) .semi-button-content { border-left: 1px var(--semi-color-border) solid; border-right: 0; } .semi-rtl .semi-button-group > .semi-button:last-child, .semi-portal-rtl .semi-button-group > .semi-button:last-child { border-top-right-radius: 0; border-bottom-right-radius: 0; border-top-left-radius: var(--semi-border-radius-small); border-bottom-left-radius: var(--semi-border-radius-small); } .semi-rtl .semi-button.semi-button-with-icon-only, .semi-portal-rtl .semi-button.semi-button-with-icon-only { padding-left: 8px; padding-right: 8px; } .semi-rtl .semi-button.semi-button-with-icon-only.semi-button-size-small, .semi-portal-rtl .semi-button.semi-button-with-icon-only.semi-button-size-small { padding-left: 4px; padding-right: 4px; } .semi-rtl .semi-button.semi-button-with-icon-only.semi-button-size-large, .semi-portal-rtl .semi-button.semi-button-with-icon-only.semi-button-size-large { padding-left: 12px; padding-right: 12px; } .semi-rtl .semi-button-content-left, .semi-portal-rtl .semi-button-content-left { margin-left: 8px; margin-right: 0; } .semi-rtl .semi-button-content-right, .semi-portal-rtl .semi-button-content-right { margin-right: 8px; margin-left: 0; } .semi-calendar-day ul, .semi-calendar-day li, .semi-calendar-week ul, .semi-calendar-week li, .semi-calendar-month ul, .semi-calendar-month li { padding: 0; margin: 0; list-style: none; } .semi-calendar-day-sticky-top, .semi-calendar-week-sticky-top, .semi-calendar-month-sticky-top { position: sticky; position: -webkit-sticky; top: 0; left: 0; right: 0; background-color: var(--semi-color-bg-2); z-index: 20; } .semi-calendar-day .semi-calendar-weekend, .semi-calendar-week .semi-calendar-weekend, .semi-calendar-month .semi-calendar-weekend { background-color: var(--semi-color-fill-0); } .semi-calendar-day .semi-calendar-event-items, .semi-calendar-week .semi-calendar-event-items, .semi-calendar-month .semi-calendar-event-items { pointer-events: none; } .semi-calendar-day .semi-calendar-event-items > *, .semi-calendar-week .semi-calendar-event-items > *, .semi-calendar-month .semi-calendar-event-items > * { pointer-events: auto; } .semi-calendar-day .semi-calendar-event-items .semi-calendar-event-day, .semi-calendar-week .semi-calendar-event-items .semi-calendar-event-day, .semi-calendar-month .semi-calendar-event-items .semi-calendar-event-day { position: absolute; left: 0; right: 0; z-index: 5; overflow: hidden; } .semi-calendar-day .semi-calendar-custom-container, .semi-calendar-week .semi-calendar-custom-container, .semi-calendar-month .semi-calendar-custom-container { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .semi-calendar-day, .semi-calendar-week { overflow: auto; } .semi-calendar-day-sticky-left, .semi-calendar-week-sticky-left { position: sticky; position: -webkit-sticky; left: 0; background-color: var(--semi-color-bg-2); z-index: 10; } .semi-calendar-day .semi-calendar-tag, .semi-calendar-week .semi-calendar-tag { font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; min-width: 70px; color: var(--semi-color-text-2); } .semi-calendar-day-scroll, .semi-calendar-week-scroll { display: flex; flex: 1 1 auto; position: relative; } .semi-calendar-day .semi-calendar-grid, .semi-calendar-week .semi-calendar-grid { display: flex; align-items: flex-start; flex: 1 1 auto; position: relative; } .semi-calendar-day .semi-calendar-grid-skeleton, .semi-calendar-week .semi-calendar-grid-skeleton { position: relative; box-sizing: border-box; } .semi-calendar-day .semi-calendar-grid-skeleton li, .semi-calendar-week .semi-calendar-grid-skeleton li { height: 30px; } .semi-calendar-day .semi-calendar-grid-skeleton li:last-child, .semi-calendar-day .semi-calendar-grid-skeleton li:nth-last-child(2), .semi-calendar-week .semi-calendar-grid-skeleton li:last-child, .semi-calendar-week .semi-calendar-grid-skeleton li:nth-last-child(2) { height: 0; } .semi-calendar-day .semi-calendar-grid-skeleton-row-line::after, .semi-calendar-week .semi-calendar-grid-skeleton-row-line::after { content: ""; border-bottom: 1px solid var(--semi-color-border); position: absolute; left: 0; right: 0; z-index: 3; pointer-events: none; } .semi-calendar-day .semi-calendar-grid-skeleton-row-line:first-child::after, .semi-calendar-week .semi-calendar-grid-skeleton-row-line:first-child::after { border: 0; } .semi-calendar-day .semi-calendar-grid-content, .semi-calendar-week .semi-calendar-grid-content { flex: 1 0 auto; min-width: 130px; height: 100%; } .semi-calendar-day .semi-calendar-grid-curr-circle, .semi-calendar-week .semi-calendar-grid-curr-circle { background: var(--semi-color-danger); border-radius: var(--semi-border-radius-circle); content: ""; position: absolute; height: 8px; width: 8px; margin-top: -4px; z-index: 8; } .semi-calendar-day .semi-calendar-grid-curr-line, .semi-calendar-week .semi-calendar-grid-curr-line { position: absolute; left: 0; right: 0; z-index: 8; border-top: 1px solid var(--semi-color-danger); pointer-events: none; } .semi-calendar-day .semi-calendar-all-day, .semi-calendar-week .semi-calendar-all-day { display: flex; flex: 1 1 auto; border-bottom: 1px solid var(--semi-color-border); } .semi-calendar-day .semi-calendar-all-day .semi-calendar-tag, .semi-calendar-week .semi-calendar-all-day .semi-calendar-tag { text-align: right; padding-right: 8px; } .semi-calendar-day .semi-calendar-all-day .semi-calendar-tag span, .semi-calendar-week .semi-calendar-all-day .semi-calendar-tag span { line-height: 26px; } .semi-calendar-day .semi-calendar-all-day-content, .semi-calendar-week .semi-calendar-all-day-content { display: flex; flex: 1 0 auto; height: 100%; min-height: 26px; min-width: 130px; } .semi-calendar-day .semi-calendar-all-day .semi-calendar-event-items, .semi-calendar-week .semi-calendar-all-day .semi-calendar-event-items { width: 100%; } .semi-calendar-day .semi-calendar-time, .semi-calendar-week .semi-calendar-time { height: auto; display: flex; flex: none; align-items: flex-start; padding-right: 8px; } .semi-calendar-day .semi-calendar-time-item, .semi-calendar-week .semi-calendar-time-item { position: relative; height: 60px; text-align: right; } .semi-calendar-day .semi-calendar-time-item span, .semi-calendar-week .semi-calendar-time-item span { font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; display: block; position: relative; top: -10px; color: var(--semi-color-text-2); } .semi-calendar-day .semi-calendar-time .semi-calendar-time-items, .semi-calendar-week .semi-calendar-time .semi-calendar-time-items { position: relative; min-width: 70px; background-color: var(--semi-color-bg-2); box-sizing: border-box; margin-left: auto; } .semi-calendar-week .semi-calendar-today .semi-calendar-today-date, .semi-calendar-month .semi-calendar-today .semi-calendar-today-date { width: 24px; height: 24px; line-height: 24px; text-align: center; border-radius: var(--semi-border-radius-circle); background-color: var(--semi-color-primary); color: var(--semi-color-bg-1); } .semi-calendar-day-scroll-wrapper { height: calc(100% - 28px); } .semi-calendar-week { position: relative; display: grid; } .semi-calendar-week-scroll-wrapper { height: calc(100% - 55px); } .semi-calendar-week .semi-calendar-grid-skeleton-row-line::after { left: 0; } .semi-calendar-week .semi-calendar-grid-skeleton li { border-right: 1px solid var(--semi-color-border); } .semi-calendar-week .semi-calendar-grid:last-child .semi-calendar-grid-content li { border-right: 0; } .semi-calendar-week-header, .semi-calendar-week-grid-row { display: flex; align-items: flex-start; font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; color: var(--semi-color-text-2); } .semi-calendar-week-header { flex: 1 1 auto; border-bottom: 1px solid var(--semi-color-border); } .semi-calendar-week-grid { display: flex; flex: 1 0 auto; } .semi-calendar-week-grid-row { display: flex; flex: 1 0 auto; } .semi-calendar-week-grid-row li { display: flex; flex: 1 1 0; border-right: 1px solid transparent; height: auto; box-sizing: border-box; justify-content: center; align-items: center; } .semi-calendar-week-grid-row li > span { display: flex; align-items: center; justify-content: center; line-height: 26px; } .semi-calendar-week-grid-row li > span:last-child { padding: 0 4px; } .semi-calendar-week .semi-calendar-all-day { font-size: 26px; } .semi-calendar-week .semi-calendar-all-day-content { padding-left: 0; position: relative; } .semi-calendar-week .semi-calendar-all-day-content .semi-calendar-all-day-skeleton { display: flex; flex: 1 1 auto; } .semi-calendar-week .semi-calendar-all-day-content .semi-calendar-all-day-skeleton li { flex: 1 1 auto; min-width: 130px; box-sizing: border-box; border-right: 1px solid var(--semi-color-border); } .semi-calendar-week .semi-calendar-all-day-content .semi-calendar-all-day-skeleton li:last-child { border-right: 1px solid transparent; } .semi-calendar-week .semi-calendar-all-day .semi-calendar-event-items { position: absolute; } .semi-calendar-week .semi-calendar-all-day .semi-calendar-event-items .semi-calendar-event-allday { position: absolute; } .semi-calendar-week .semi-calendar-all-day .semi-calendar-event-items .semi-calendar-event-allday > * { font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; } .semi-calendar-week .semi-calendar-week-tag { text-align: right; line-height: 26px; } .semi-calendar-week .semi-calendar-week-tag:first-child { padding-right: 8px; } .semi-calendar-month { display: flex; flex-direction: column; height: 100%; overflow: hidden; font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; } .semi-calendar-month-grid-wrapper { height: calc(100% - 27px); } .semi-calendar-month-week, .semi-calendar-month-skeleton { height: 100%; } .semi-calendar-month-header { display: flex; flex: 1 1 auto; align-items: flex-start; color: var(--semi-color-text-2); } .semi-calendar-month-grid { flex: 1 1 auto; box-sizing: border-box; } .semi-calendar-month-grid li { line-height: 26px; } .semi-calendar-month-grid-row, .semi-calendar-month-skeleton { display: flex; box-sizing: border-box; } .semi-calendar-month-grid-row li, .semi-calendar-month-skeleton li { flex: 1; white-space: nowrap; text-align: right; padding-right: 8px; box-sizing: border-box; border-bottom: 1px solid var(--semi-color-border); color: var(--semi-color-text-2); } .semi-calendar-month-grid-row li span, .semi-calendar-month-skeleton li span { display: inline-block; text-align: right; } .semi-calendar-month-skeleton { position: absolute; overflow: hidden; left: 0; right: 0; } .semi-calendar-month-skeleton li { position: relative; overflow: hidden; border-right: 1px solid var(--semi-color-border); height: 100%; padding-top: 4px; } .semi-calendar-month-skeleton li span { font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; } .semi-calendar-month-skeleton li:last-child { border-right: none; } .semi-calendar-month-skeleton .semi-calendar-month-same { color: var(--semi-color-text-0); } .semi-calendar-month-skeleton .semi-calendar-month-event-card-wrapper { font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; display: block; position: absolute; right: 8px; padding-top: 2px; user-select: none; } .semi-calendar-month-skeleton .semi-calendar-month-event-card-wrapper:hover { cursor: pointer; } .semi-calendar-month .semi-calendar-event-items { position: absolute; top: 31px; right: 0; bottom: 20px; left: 0; overflow: hidden; } .semi-calendar-month-grid-col { display: flex; flex-direction: column; flex: 1; height: 100%; } .semi-calendar-month-weekrow { flex: 1 1 auto; position: relative; } .semi-calendar-month-weekrow .semi-calendar-event-items .semi-calendar-event-month { position: absolute; font-size: 24px; height: 1em; overflow: hidden; } .semi-calendar-month-weekrow .semi-calendar-event-items .semi-calendar-event-month > * { font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; } .semi-calendar-month-date { position: absolute; right: 4px; z-index: 3; } .semi-calendar-month-event-card { width: 220px; } .semi-calendar-month-event-card ul, .semi-calendar-month-event-card li { padding: 0; margin: 0; list-style: none; } .semi-calendar-month-event-card-close { margin-right: -4px; } .semi-calendar-month-event-card-content { padding: 12px 0; } .semi-calendar-month-event-card-header { display: flex; flex-direction: row; margin: 12px 20px; } .semi-calendar-month-event-card-header-info { display: flex; flex: 1; flex-direction: column; align-items: center; } .semi-calendar-month-event-card-header-info-weekday { color: var(--semi-color-text-2); } .semi-calendar-month-event-card-header-info-date { font-size: 20px; line-height: 28px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; margin-top: 4px; } .semi-calendar-month-event-card-body { padding: 0 16px; } .semi-calendar-month-event-card-body li { height: 24px; } .semi-rtl .semi-calendar-day, .semi-rtl .semi-calendar-week, .semi-rtl .semi-calendar-month, .semi-portal-rtl .semi-calendar-day, .semi-portal-rtl .semi-calendar-week, .semi-portal-rtl .semi-calendar-month { direction: rtl; } .semi-rtl .semi-calendar-day-sticky-left, .semi-rtl .semi-calendar-week-sticky-left, .semi-portal-rtl .semi-calendar-day-sticky-left, .semi-portal-rtl .semi-calendar-week-sticky-left { left: auto; right: 0; } .semi-rtl .semi-calendar-day .semi-calendar-all-day .semi-calendar-tag, .semi-rtl .semi-calendar-week .semi-calendar-all-day .semi-calendar-tag, .semi-portal-rtl .semi-calendar-day .semi-calendar-all-day .semi-calendar-tag, .semi-portal-rtl .semi-calendar-week .semi-calendar-all-day .semi-calendar-tag { text-align: left; padding-right: 0; padding-left: 8px; } .semi-rtl .semi-calendar-day .semi-calendar-time, .semi-rtl .semi-calendar-week .semi-calendar-time, .semi-portal-rtl .semi-calendar-day .semi-calendar-time, .semi-portal-rtl .semi-calendar-week .semi-calendar-time { padding-right: 0; padding-left: 8px; } .semi-rtl .semi-calendar-day .semi-calendar-time-item, .semi-rtl .semi-calendar-week .semi-calendar-time-item, .semi-portal-rtl .semi-calendar-day .semi-calendar-time-item, .semi-portal-rtl .semi-calendar-week .semi-calendar-time-item { text-align: left; } .semi-rtl .semi-calendar-day .semi-calendar-time .semi-calendar-time-items, .semi-rtl .semi-calendar-week .semi-calendar-time .semi-calendar-time-items, .semi-portal-rtl .semi-calendar-day .semi-calendar-time .semi-calendar-time-items, .semi-portal-rtl .semi-calendar-week .semi-calendar-time .semi-calendar-time-items { margin-left: 0; margin-right: auto; } .semi-rtl .semi-calendar-week .semi-calendar-grid-skeleton-row-line::after, .semi-portal-rtl .semi-calendar-week .semi-calendar-grid-skeleton-row-line::after { left: 0; right: 0; } .semi-rtl .semi-calendar-week .semi-calendar-grid-skeleton li, .semi-portal-rtl .semi-calendar-week .semi-calendar-grid-skeleton li { border-right: 0; border-left: 1px solid var(--semi-color-border); } .semi-rtl .semi-calendar-week .semi-calendar-grid:last-child .semi-calendar-grid-content li, .semi-portal-rtl .semi-calendar-week .semi-calendar-grid:last-child .semi-calendar-grid-content li { border-left: 0; } .semi-rtl .semi-calendar-week .semi-calendar-all-day-content, .semi-portal-rtl .semi-calendar-week .semi-calendar-all-day-content { padding-left: auto; padding-right: 0; } .semi-rtl .semi-calendar-week .semi-calendar-all-day-content .semi-calendar-all-day-skeleton li, .semi-portal-rtl .semi-calendar-week .semi-calendar-all-day-content .semi-calendar-all-day-skeleton li { border-right: 0; border-left: 1px solid var(--semi-color-border); } .semi-rtl .semi-calendar-week .semi-calendar-all-day-content .semi-calendar-all-day-skeleton li:last-child, .semi-portal-rtl .semi-calendar-week .semi-calendar-all-day-content .semi-calendar-all-day-skeleton li:last-child { border-left: 1px solid transparent; } .semi-rtl .semi-calendar-week .semi-rtl .semi-calendar-week-tag, .semi-rtl .semi-calendar-week .semi-portal-rtl .semi-calendar-week-tag, .semi-portal-rtl .semi-calendar-week .semi-rtl .semi-calendar-week-tag, .semi-portal-rtl .semi-calendar-week .semi-portal-rtl .semi-calendar-week-tag { text-align: left; } .semi-rtl .semi-calendar-week .semi-rtl .semi-calendar-week-tag:first-child, .semi-rtl .semi-calendar-week .semi-portal-rtl .semi-calendar-week-tag:first-child, .semi-portal-rtl .semi-calendar-week .semi-rtl .semi-calendar-week-tag:first-child, .semi-portal-rtl .semi-calendar-week .semi-portal-rtl .semi-calendar-week-tag:first-child { padding-right: auto; padding-left: 8px; } .semi-rtl .semi-calendar-month-grid-row li, .semi-rtl .semi-calendar-month-skeleton li, .semi-portal-rtl .semi-calendar-month-grid-row li, .semi-portal-rtl .semi-calendar-month-skeleton li { text-align: left; padding-right: auto; padding-left: 8px; } .semi-rtl .semi-calendar-month-grid-row li span, .semi-rtl .semi-calendar-month-skeleton li span, .semi-portal-rtl .semi-calendar-month-grid-row li span, .semi-portal-rtl .semi-calendar-month-skeleton li span { text-align: left; } .semi-rtl .semi-calendar-month-skeleton li, .semi-portal-rtl .semi-calendar-month-skeleton li { border-right: 0; border-left: 1px solid var(--semi-color-border); } .semi-rtl .semi-calendar-month-skeleton li:last-child, .semi-portal-rtl .semi-calendar-month-skeleton li:last-child { border-left: none; } .semi-rtl .semi-calendar-month-skeleton .semi-calendar-month-event-card-wrapper, .semi-portal-rtl .semi-calendar-month-skeleton .semi-calendar-month-event-card-wrapper { right: auto; left: 8px; } .semi-rtl .semi-calendar-month-date, .semi-portal-rtl .semi-calendar-month-date { right: auto; left: 4px; } .semi-rtl .semi-calendar-month-event-card-close, .semi-portal-rtl .semi-calendar-month-event-card-close { margin-right: 0; margin-left: -4px; } .semi-card { box-sizing: border-box; margin: 0; padding: 0; border-radius: var(--semi-border-radius-medium); overflow: hidden; background-color: var(--semi-color-bg-0); font-size: 14px; font-style: normal; font-weight: 400; line-height: 20px; letter-spacing: 0em; } .semi-card-shadows { cursor: pointer; transition: box-shadow 300ms; } .semi-card-shadows-hover:hover { box-shadow: var(--semi-shadow-elevated); z-index: 1; } .semi-card-shadows-always { box-shadow: var(--semi-shadow-elevated); } .semi-card-bordered { border: 1px solid var(--semi-color-border); } .semi-card-header { padding: 20px; } .semi-card-header-bordered { border-bottom: 1px solid var(--semi-color-border); } .semi-card-header-wrapper { display: flex; align-items: flex-start; flex-direction: row-reverse; justify-content: space-between; } .semi-card-header-wrapper-spacing { margin-right: 20px; } .semi-card-header-wrapper-title { width: 100%; overflow: hidden; } .semi-card-header-wrapper-extra { flex-shrink: 0; font-size: 16px; font-style: normal; font-weight: 700; letter-spacing: 0em; color: var(--semi-color-text-0); } .semi-card-cover > * { display: block; width: 100%; } .semi-card-body { padding: 20px; font-size: 14px; font-style: normal; font-weight: 400; line-height: 20px; letter-spacing: 0em; color: var(--semi-color-text-1); } .semi-card-body-actions { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--semi-color-border); } .semi-card-footer { padding: 20px; } .semi-card-footer-bordered { border-top: 1px solid var(--semi-color-border); } .semi-card-meta { display: flex; align-items: center; justify-content: flex-start; } .semi-card-meta-avatar { margin-right: 12px; } .semi-card-meta-wrapper-title { font-size: 16px; font-style: normal; font-weight: 700; line-height: 22px; letter-spacing: 0em; color: var(--semi-color-text-0); } .semi-card-meta-wrapper-description { font-size: 14px; font-style: normal; font-weight: 400; line-height: 20px; letter-spacing: 0em; color: var(--semi-color-text-2); } .semi-card-group-grid .semi-card { border-radius: 0; } .semi-card-group-grid .semi-card { margin-left: -1px; margin-top: -1px; } .semi-rtl .semi-card, .semi-portal-rtl .semi-card { direction: rtl; } .semi-rtl .semi-card-header-wrapper, .semi-portal-rtl .semi-card-header-wrapper { align-items: flex-end; } .semi-rtl .semi-card-header-wrapper-title, .semi-portal-rtl .semi-card-header-wrapper-title { display: flex; align-items: flex-end; } .semi-rtl .semi-card-header-wrapper-spacing, .semi-portal-rtl .semi-card-header-wrapper-spacing { margin-left: 20px; margin-right: 0; } .semi-rtl .semi-card-meta-avatar, .semi-portal-rtl .semi-card-meta-avatar { margin-left: 12px; margin-right: 0; } .semi-rtl .semi-card-group, .semi-portal-rtl .semi-card-group { direction: rtl; } .semi-rtl .semi-card-group-grid .semi-card, .semi-portal-rtl .semi-card-group-grid .semi-card { margin-left: 0; margin-top: 0; margin-right: -1px; margin-bottom: -1px; } .semi-carousel { position: relative; overflow: hidden; } .semi-carousel-content { width: 100%; height: 100%; overflow: hidden; position: relative; } .semi-carousel-content-item { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; } .semi-carousel-content-item-current { z-index: 1; } .semi-carousel-content-fade > * { opacity: 0; } .semi-carousel-content-fade .semi-carousel-content-item-current { opacity: 1; } .semi-carousel-content-slide > *:not(.semi-carousel-content-item-current) { visibility: hidden; } .semi-carousel-content-slide .semi-carousel-content-item-slide-out { display: block; animation: semi-carousel-content-item-keyframe-slide-out; animation-fill-mode: forwards; } .semi-carousel-content-slide .semi-carousel-content-item-slide-in { display: block; animation: semi-carousel-content-item-keyframe-slide-in; animation-fill-mode: forwards; } .semi-carousel-content-reverse .semi-carousel-content-item-slide-out { animation: semi-carousel-content-item-keyframe-slide-out-reverse; animation-fill-mode: forwards; } .semi-carousel-content-reverse .semi-carousel-content-item-slide-in { animation: semi-carousel-content-item-keyframe-slide-in-reverse; animation-fill-mode: forwards; } .semi-carousel-indicator { display: flex; align-items: flex-end; z-index: 2; } .semi-carousel-indicator-left { position: absolute; left: 32px; bottom: 32px; } .semi-carousel-indicator-center { position: absolute; left: 50%; bottom: 32px; transform: translate(-50%); } .semi-carousel-indicator-right { position: absolute; right: 32px; bottom: 32px; } .semi-carousel-indicator-dot .semi-carousel-indicator-item { border-radius: 50%; cursor: pointer; } .semi-carousel-indicator-dot .semi-carousel-indicator-item:not(:last-child) { margin-right: 8px; } .semi-carousel-indicator-dot .semi-carousel-indicator-item-small { width: 8px; height: 8px; } .semi-carousel-indicator-dot .semi-carousel-indicator-item-medium { width: 12px; height: 12px; } .semi-carousel-indicator-dot .semi-carousel-indicator-item-primary { background-color: rgba(var(--semi-blue-6), 0.4); transition: background-color var(--semi-transition_delay-none) var(--semi-transition_function-easeOut) var(--semi-transition_delay-none); } .semi-carousel-indicator-dot .semi-carousel-indicator-item-primary.semi-carousel-indicator-item-active { background: rgba(var(--semi-blue-6), 1); } .semi-carousel-indicator-dot .semi-carousel-indicator-item-primary:hover { background-color: rgba(var(--semi-blue-6), 0.7); } .semi-carousel-indicator-dot .semi-carousel-indicator-item-primary:active { background: rgba(var(--semi-blue-6), 1); } .semi-carousel-indicator-dot .semi-carousel-indicator-item-light { background-color: rgba(var(--semi-white), 0.4); transition: background-color var(--semi-transition_delay-none) var(--semi-transition_function-easeOut) var(--semi-transition_delay-none); } .semi-carousel-indicator-dot .semi-carousel-indicator-item-light.semi-carousel-indicator-item-active { background: rgba(var(--semi-white), 1); } .semi-carousel-indicator-dot .semi-carousel-indicator-item-light:hover { background-color: rgba(var(--semi-white), 0.7); } .semi-carousel-indicator-dot .semi-carousel-indicator-item-light:active { background: rgba(var(--semi-white), 1); } .semi-carousel-indicator-dot .semi-carousel-indicator-item-dark { background-color: rgba(var(--semi-black), 0.5); transition: background-color var(--semi-transition_delay-none) var(--semi-transition_function-easeOut) var(--semi-transition_delay-none); } .semi-carousel-indicator-dot .semi-carousel-indicator-item-dark.semi-carousel-indicator-item-active { background-color: rgba(var(--semi-black), 1); } .semi-carousel-indicator-dot .semi-carousel-indicator-item-dark:hover { background-color: rgba(var(--semi-black), 0.7); } .semi-carousel-indicator-dot .semi-carousel-indicator-item-dark:active { background: rgba(var(--semi-black), 1); } .semi-carousel-indicator-line { width: 240px; } .semi-carousel-indicator-line .semi-carousel-indicator-item { flex: 1; cursor: pointer; } .semi-carousel-indicator-line .semi-carousel-indicator-item:not(:last-child) { margin-right: 4px; } .semi-carousel-indicator-line .semi-carousel-indicator-item-small { height: 4px; } .semi-carousel-indicator-line .semi-carousel-indicator-item-medium { height: 6px; } .semi-carousel-indicator-line .semi-carousel-indicator-item-primary { background-color: rgba(var(--semi-blue-6), 0.4); } .semi-carousel-indicator-line .semi-carousel-indicator-item-primary.semi-carousel-indicator-item-active { background: rgba(var(--semi-blue-6), 1); } .semi-carousel-indicator-line .semi-carousel-indicator-item-primary:hover { background-color: rgba(var(--semi-blue-6), 0.7); } .semi-carousel-indicator-line .semi-carousel-indicator-item-primary:active { background: rgba(var(--semi-blue-6), 1); } .semi-carousel-indicator-line .semi-carousel-indicator-item-light { background-color: rgba(var(--semi-white), 0.4); } .semi-carousel-indicator-line .semi-carousel-indicator-item-light.semi-carousel-indicator-item-active { background: rgba(var(--semi-white), 1); } .semi-carousel-indicator-line .semi-carousel-indicator-item-light:hover { background-color: rgba(var(--semi-white), 0.7); } .semi-carousel-indicator-line .semi-carousel-indicator-item-light:active { background: rgba(var(--semi-white), 1); } .semi-carousel-indicator-line .semi-carousel-indicator-item-dark { background-color: rgba(var(--semi-black), 0.5); } .semi-carousel-indicator-line .semi-carousel-indicator-item-dark.semi-carousel-indicator-item-active { background: rgba(var(--semi-black), 1); } .semi-carousel-indicator-line .semi-carousel-indicator-item-dark:hover { background-color: rgba(var(--semi-black), 0.7); } .semi-carousel-indicator-line .semi-carousel-indicator-item-dark:active { background: rgba(var(--semi-black), 1); } .semi-carousel-indicator-columnar .semi-carousel-indicator-item { cursor: pointer; } .semi-carousel-indicator-columnar .semi-carousel-indicator-item:not(:last-child) { margin-right: 4px; } .semi-carousel-indicator-columnar .semi-carousel-indicator-item-small { width: 4px; height: 12px; } .semi-carousel-indicator-columnar .semi-carousel-indicator-item-small.semi-carousel-indicator-item-active { height: 20px; } .semi-carousel-indicator-columnar .semi-carousel-indicator-item-medium { width: 6px; height: 20px; } .semi-carousel-indicator-columnar .semi-carousel-indicator-item-medium.semi-carousel-indicator-item-active { height: 28px; } .semi-carousel-indicator-columnar .semi-carousel-indicator-item-primary { background-color: rgba(var(--semi-blue-6), 0.4); } .semi-carousel-indicator-columnar .semi-carousel-indicator-item-primary.semi-carousel-indicator-item-active { background: rgba(var(--semi-blue-6), 1); } .semi-carousel-indicator-columnar .semi-carousel-indicator-item-primary:hover { background-color: rgba(var(--semi-blue-6), 0.7); } .semi-carousel-indicator-columnar .semi-carousel-indicator-item-primary:active { background: rgba(var(--semi-blue-6), 1); } .semi-carousel-indicator-columnar .semi-carousel-indicator-item-light { background-color: rgba(var(--semi-white), 0.4); } .semi-carousel-indicator-columnar .semi-carousel-indicator-item-light.semi-carousel-indicator-item-active { background: rgba(var(--semi-white), 1); } .semi-carousel-indicator-columnar .semi-carousel-indicator-item-light:hover { background-color: rgba(var(--semi-white), 0.7); } .semi-carousel-indicator-columnar .semi-carousel-indicator-item-light:active { background: rgba(var(--semi-white), 1); } .semi-carousel-indicator-columnar .semi-carousel-indicator-item-dark { background-color: rgba(var(--semi-black), 0.5); } .semi-carousel-indicator-columnar .semi-carousel-indicator-item-dark.semi-carousel-indicator-item-active { background: rgba(var(--semi-black), 1); } .semi-carousel-indicator-columnar .semi-carousel-indicator-item-dark:hover { background-color: rgba(var(--semi-black), 0.7); } .semi-carousel-indicator-columnar .semi-carousel-indicator-item-dark:active { background: rgba(var(--semi-black), 1); } .semi-carousel-arrow { display: flex; font-size: 32px; cursor: pointer; } .semi-carousel-arrow-prev { position: absolute; top: 50%; left: 20px; transform: translateY(-50%); z-index: 2; } .semi-carousel-arrow-next { position: absolute; top: 50%; right: 20px; transform: translateY(-50%); z-index: 2; } .semi-carousel-arrow-light { color: rgba(var(--semi-white), 0.4); transition: color var(--semi-transition_delay-none) var(--semi-transition_function-easeOut) var(--semi-transition_delay-none); } .semi-carousel-arrow-light:hover { color: rgba(var(--semi-white), 1); } .semi-carousel-arrow-primary { color: rgba(var(--semi-blue-6), 0.4); transition: color var(--semi-transition_delay-none) var(--semi-transition_function-easeOut) var(--semi-transition_delay-none); } .semi-carousel-arrow-primary:hover { color: rgba(var(--semi-blue-6), 1); } .semi-carousel-arrow-dark { color: rgba(var(--semi-black), 0.5); transition: color var(--semi-transition_delay-none) var(--semi-transition_function-easeOut) var(--semi-transition_delay-none); } .semi-carousel-arrow-dark:hover { color: rgba(var(--semi-black), 1); } .semi-carousel-arrow-hover div { z-index: 2; opacity: 0; } .semi-carousel:hover .semi-carousel-arrow-hover div { opacity: 1; } @keyframes semi-carousel-content-item-keyframe-slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } } @keyframes semi-carousel-content-item-keyframe-slide-out { from { transform: translateX(0); } to { transform: translateX(-100%); } } @keyframes semi-carousel-content-item-keyframe-slide-in-reverse { from { transform: translateX(-100%); } to { transform: translateX(0); } } @keyframes semi-carousel-content-item-keyframe-slide-out-reverse { from { transform: translateX(0); } to { transform: translateX(100%); } } .semi-rtl .semi-carousel, .semi-portal-rtl .semi-carousel { direction: rtl; } .semi-rtl .semi-carousel-indicator, .semi-portal-rtl .semi-carousel-indicator { display: flex; } .semi-rtl .semi-carousel-indicator-dot .semi-carousel-indicator-item:not(:last-child), .semi-portal-rtl .semi-carousel-indicator-dot .semi-carousel-indicator-item:not(:last-child) { margin-right: 0; margin-left: 8px; } .semi-rtl .semi-carousel-indicator-columnar .semi-carousel-indicator-item:not(:last-child), .semi-portal-rtl .semi-carousel-indicator-columnar .semi-carousel-indicator-item:not(:last-child) { margin-right: 0; margin-left: 4px; } .semi-rtl .semi-carousel-arrow, .semi-portal-rtl .semi-carousel-arrow { flex-direction: row-reverse; } .semi-rtl .semi-carousel-arrow-prev, .semi-portal-rtl .semi-carousel-arrow-prev { left: auto; right: 20px; transform: scaleX(-1) translateY(-50%); z-index: 2; } .semi-rtl .semi-carousel-arrow-next, .semi-portal-rtl .semi-carousel-arrow-next { left: 20px; transform: scaleX(-1) translateY(-50%); right: auto; z-index: 2; } .semi-cascader { box-sizing: border-box; border-radius: var(--semi-border-radius-small); border: 1px solid transparent; min-width: 80px; min-height: 32px; height: auto; line-height: 32px; font-weight: 400; background-color: var(--semi-color-fill-0); display: inline-flex; align-items: center; vertical-align: middle; position: relative; cursor: pointer; } .semi-cascader:hover { background-color: var(--semi-color-fill-1); border: 1px transparent solid; } .semi-cascader:focus:not(.semi-cascader-disabled) { border: 1px solid var(--semi-color-focus-border); background-color: var(--semi-color-fill-0); outline: 0; } .semi-cascader:active { background-color: var(--semi-color-fill-2); } .semi-cascader-small { min-height: 24px; line-height: 24px; } .semi-cascader-large { min-height: 40px; line-height: 40px; } .semi-cascader-large .semi-cascader-selection { font-size: 16px; line-height: 22px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; } .semi-cascader-focus { border: 1px solid var(--semi-color-focus-border); outline: 0; } .semi-cascader-focus:hover { background-color: var(--semi-color-fill-0); border: 1px solid var(--semi-color-focus-border); } .semi-cascader-focus:active { background-color: var(--semi-color-fill-2); } .semi-cascader-warning { background-color: var(--semi-color-warning-light-default); border-color: var(--semi-color-warning-light-default); } .semi-cascader-warning:hover { background-color: var(--semi-color-warning-light-hover); border-color: var(--semi-color-warning-light-hover); } .semi-cascader-warning.semi-cascader-focus { background-color: var(--semi-color-warning-light-default); border-color: var(--semi-color-warning); } .semi-cascader-warning:active { background-color: var(--semi-color-warning-light-active); border-color: var(--semi-color-warning-light-active); } .semi-cascader-error { background-color: var(--semi-color-danger-light-default); border-color: var(--semi-color-danger-light-default); } .semi-cascader-error:hover { background-color: var(--semi-color-danger-light-hover); border-color: var(--semi-color-danger-light-hover); } .semi-cascader-error.semi-cascader-focus { background-color: var(--semi-color-danger-light-default); border-color: var(--semi-color-danger); } .semi-cascader-error:active { background-color: var(--semi-color-danger-light-active); border-color: var(--semi-color-danger-light-active); } .semi-cascader-selection { font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; height: 100%; display: inline-flex; align-items: center; flex-wrap: wrap; flex-grow: 1; overflow: hidden; padding-left: 12px; padding-right: 12px; cursor: pointer; color: var(--semi-color-text-0); } .semi-cascader-selection-multiple { padding-left: 4px; padding-right: 4px; } .semi-cascader-selection-placeholder { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--semi-color-text-2); } .semi-cascader-selection-tag { margin: 1px 2px 1px 0; } .semi-cascader-selection-tag:first-child { margin-left: 0; } .semi-cascader-selection-tag-disabled.semi-tag { color: var(--semi-color-disabled-text); background-color: transparent; cursor: not-allowed; } .semi-cascader-selection-tag-disabled.semi-tag .semi-tag-close { color: var(--semi-color-disabled-text); cursor: not-allowed; pointer-events: none; } .semi-cascader-selection-n { cursor: pointer; font-size: 12px; margin-right: 4px; color: var(--semi-color-text-0); padding-left: 8px; padding-right: 8px; } .semi-cascader-selection-n-disabled { cursor: not-allowed; color: var(--semi-color-disabled-text); } .semi-cascader-selection span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .semi-cascader-selection .semi-cascader-tagInput-wrapper { border: hidden; background: transparent; margin-left: -4px; } .semi-cascader-selection .semi-tagInput { min-height: 30px; } .semi-cascader-selection .semi-tagInput-small { min-height: 22px; } .semi-cascader-selection .semi-tagInput-large { min-height: 38px; } .semi-cascader-selection .semi-tagInput .semi-input-wrapper { margin-left: 4px; } .semi-cascader-selection .semi-tagInput .semi-input-wrapper .semi-input { padding-left: 0; } .semi-cascader-selection .semi-tagInput .semi-input-wrapper-default { margin-top: 1px; margin-bottom: 1px; } .semi-cascader-selection .semi-tagInput .semi-input-wrapper-large { margin-top: 1px; margin-bottom: 1px; } .semi-cascader-selection-text-inactive { color: var(--semi-color-text-2); } .semi-cascader-selection-text-hide { display: none; } .semi-cascader-arrow, .semi-cascader-clearbtn { display: inline-flex; align-items: center; height: 100%; justify-content: center; width: 16px; color: var(--semi-color-text-2); margin-right: 12px; } .semi-cascader-clearbtn:hover { color: var(--semi-color-primary-hover); } .semi-cascader-clearbtn:active { color: var(--semi-color-primary-active); } .semi-cascader-prefix, .semi-cascader-suffix { display: inline; display: flex; justify-content: center; align-items: center; } .semi-cascader-prefix-text, .semi-cascader-suffix-text { margin: 0 12px; } .semi-cascader-prefix-icon, .semi-cascader-suffix-icon { color: var(--semi-color-text-2); margin: 0 8px; } .semi-cascader-inset-label { display: inline; margin-right: 12px; font-weight: 600; font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; color: var(--semi-color-text-2); flex-shrink: 0; white-space: nowrap; } .semi-cascader.semi-cascader-with-prefix { display: inline-flex; align-items: center; } .semi-cascader.semi-cascader-with-prefix .semi-cascader-selection { padding-left: 0; } .semi-cascader.semi-cascader-with-suffix .semi-cascader-selection { padding-right: 0; } .semi-cascader-disabled { cursor: not-allowed; user-select: none; background-color: var(--semi-color-disabled-fill); } .semi-cascader-disabled .semi-cascader-selection { cursor: not-allowed; } .semi-cascader-disabled:hover { background-color: var(--semi-color-disabled-fill); } .semi-cascader-disabled .semi-cascader-selection, .semi-cascader-disabled .semi-cascader-selection-placeholder, .semi-cascader-disabled .semi-cascader-prefix, .semi-cascader-disabled .semi-cascader-suffix { color: var(--semi-color-disabled-text); cursor: not-allowed; } .semi-cascader-disabled .semi-cascader-arrow { color: var(--semi-color-disabled-text); } .semi-cascader-popover .semi-cascader-search-wrapper { padding: 8px 12px; border-bottom: 1px solid var(--semi-color-fill-0); } .semi-cascader-popover .semi-cascader-option-empty { font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; min-width: 150px; color: var(--semi-color-disabled-text); margin: 0; padding: 8px 12px; user-select: none; text-align: center; cursor: not-allowed; } .semi-cascader-single.semi-cascader-filterable { display: inline-flex; } .semi-cascader-single.semi-cascader-filterable .semi-cascader-selection .semi-cascader-search-wrapper { width: 100%; height: 30px; display: flex; align-items: center; position: relative; } .semi-cascader-single.semi-cascader-filterable .semi-cascader-selection .semi-cascader-search-wrapper-small { height: 22px; } .semi-cascader-single.semi-cascader-filterable .semi-cascader-selection .semi-cascader-search-wrapper-large { height: 38px; } .semi-cascader-single.semi-cascader-filterable .semi-cascader-selection .semi-cascader-search-wrapper .semi-input-wrapper { position: absolute; top: 0; left: 0; border: none; background-color: transparent; height: 100%; width: 100%; border: none; background-color: transparent; } .semi-cascader-single.semi-cascader-filterable .semi-cascader-selection .semi-cascader-search-wrapper .semi-input-wrapper-focus { border: none; } .semi-cascader-single.semi-cascader-filterable .semi-cascader-selection .semi-cascader-search-wrapper .semi-input { padding-left: 0; padding-right: 0; } .semi-cascader-option-lists { display: flex; overflow: hidden; padding: 0; margin: 0; height: 180px; } .semi-cascader-option-lists-empty { height: auto; } .semi-cascader-option-lists ul, .semi-cascader-option-lists li { list-style-type: none; padding: 0; margin: 0; } .semi-cascader-option-lists ul > li { padding-top: 8px; padding-bottom: 8px; padding-left: 12px; padding-right: 16px; } .semi-cascader-option-lists .semi-cascader-option-list { box-sizing: border-box; display: inline-block; min-width: 150px; height: 100%; margin: 0; padding: 4px 0px; overflow: auto; list-style: none; border-left: 1px solid var(--semi-color-fill-0); } .semi-cascader-option-lists .semi-cascader-option-list:first-child { border-left: none; } .semi-cascader-option-lists .semi-cascader-option { display: flex; align-items: center; justify-content: space-between; cursor: pointer; transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; min-width: min-content; word-break: break-all; color: var(--semi-color-text-0); position: relative; } .semi-cascader-option-lists .semi-cascader-option:hover { background-color: var(--semi-color-fill-0); } .semi-cascader-option-lists .semi-cascader-option:active { background-color: var(--semi-color-fill-1); } .semi-cascader-option-lists .semi-cascader-option-icon { display: inline-flex; flex-shrink: 0; width: 16px; color: var(--semi-color-text-2); } .semi-cascader-option-lists .semi-cascader-option-icon-active, .semi-cascader-option-lists .semi-cascader-option-icon-empty { margin-right: 8px; } .semi-cascader-option-lists .semi-cascader-option-icon-left { margin-left: 8px; } .semi-cascader-option-lists .semi-cascader-option-spin-icon { width: 16px; height: 16px; line-height: 0; } .semi-cascader-option-lists .semi-cascader-option-spin-icon svg { width: 16px; height: 16px; } .semi-cascader-option-lists .semi-cascader-option-label { display: flex; align-items: center; white-space: pre; } .semi-cascader-option-lists .semi-cascader-option-label-checkbox { margin-right: 8px; } .semi-cascader-option-lists .semi-cascader-option-hidden { display: none; } .semi-cascader-option-lists .semi-cascader-option-active { background-color: var(--semi-color-primary-light-default); } .semi-cascader-option-lists .semi-cascader-option-active:hover { background-color: var(--semi-color-primary-light-default); } .semi-cascader-option-lists .semi-cascader-option-select, .semi-cascader-option-lists .semi-cascader-option-label-highlight { font-weight: 600; color: var(--semi-color-primary); } .semi-cascader-option-lists .semi-cascader-option-disabled { cursor: not-allowed; } .semi-cascader-option-lists .semi-cascader-option-disabled:hover { background-color: transparent; } .semi-cascader-option-lists .semi-cascader-option-disabled:active { background-color: transparent; } .semi-cascader-option-lists .semi-cascader-option-disabled .semi-cascader-option-label { color: var(--semi-color-disabled-text); } .semi-cascader-option-lists .semi-cascader-option-flatten { padding-right: 64px; } .semi-cascader-borderless:not(:focus-within):not(:hover) { background-color: transparent; border-color: transparent; } .semi-cascader-borderless:not(:focus-within):not(:hover) .semi-cascader-arrow { opacity: 0; } .semi-cascader-borderless:focus-within:not(:active) { background-color: transparent; } .semi-cascader-borderless.semi-cascader-error:not(:focus-within) { border-color: var(--semi-color-danger); } .semi-cascader-borderless.semi-cascader-warning:not(:focus-within) { border-color: var(--semi-color-warning); } .semi-cascader-borderless.semi-cascader-error:focus-within { border-color: var(--semi-color-danger); } .semi-cascader-borderless.semi-cascader-warning:focus-within { border-color: var(--semi-color-warning); } .semi-rtl .semi-cascader, .semi-portal-rtl .semi-cascader { direction: rtl; } .semi-rtl .semi-cascader-arrow, .semi-rtl .semi-cascader-clearbtn, .semi-portal-rtl .semi-cascader-arrow, .semi-portal-rtl .semi-cascader-clearbtn { margin-right: 0; margin-left: 12px; } .semi-rtl .semi-cascader-inset-label, .semi-portal-rtl .semi-cascader-inset-label { margin-right: 12px; margin-left: 12px; } .semi-rtl .semi-cascader.semi-cascader-with-prefix .semi-cascader-selection, .semi-portal-rtl .semi-cascader.semi-cascader-with-prefix .semi-cascader-selection { padding-left: auto; padding-right: 0; } .semi-rtl .semi-cascader.semi-cascader-with-suffix .semi-cascader-selection, .semi-portal-rtl .semi-cascader.semi-cascader-with-suffix .semi-cascader-selection { padding-right: auto; padding-left: 0; } .semi-rtl .semi-cascader-selection-multiple, .semi-portal-rtl .semi-cascader-selection-multiple { padding-right: 4px; padding-left: 4px; } .semi-rtl .semi-cascader-selection-tag:first-child, .semi-portal-rtl .semi-cascader-selection-tag:first-child { margin-right: 0; } .semi-rtl .semi-cascader-selection-n, .semi-portal-rtl .semi-cascader-selection-n { margin-right: 0; margin-left: 4px; } .semi-rtl .semi-cascader-selection .semi-cascader-tagInput-wrapper, .semi-portal-rtl .semi-cascader-selection .semi-cascader-tagInput-wrapper { margin-left: 0; margin-right: -4px; } .semi-rtl .semi-cascader-selection .semi-tagInput .semi-input-wrapper, .semi-portal-rtl .semi-cascader-selection .semi-tagInput .semi-input-wrapper { margin-left: 0; margin-right: 4px; } .semi-rtl .semi-cascader-selection .semi-tagInput .semi-input-wrapper .semi-input, .semi-portal-rtl .semi-cascader-selection .semi-tagInput .semi-input-wrapper .semi-input { padding-right: 0; } .semi-cascader-option-label-checkbox { margin-right: 0; margin-left: 8px; } .semi-cascader-option-lists-rtl { direction: rtl; } .semi-cascader-option-lists .semi-cascader-option-lists-rtl ul > li { padding-right: 12px; padding-left: auto; } .semi-cascader-option-lists .semi-cascader-option-lists-rtl .semi-cascader-option-list { border-left: 0; border-right: 1px solid var(--semi-color-fill-0); } .semi-cascader-option-lists .semi-cascader-option-lists-rtl .semi-cascader-option-list:first-child { border-right: none; } .semi-cascader-option-lists .semi-cascader-option-lists-rtl .semi-cascader-option-icon-active, .semi-cascader-option-lists .semi-cascader-option-lists-rtl .semi-cascader-option-icon-empty { margin-right: 0; margin-left: 8px; } .semi-cascader-option-lists .semi-cascader-option-lists-rtl .semi-cascader-option-flatten { padding-right: 0; padding-left: 64px; } .semi-cascader-option-lists .semi-cascader-option-lists-rtl .semi-cascader-option .semi-icon-chevron_right { transform: scaleX(-1); } .semi-checkbox { box-sizing: border-box; position: relative; display: flex; align-items: flex-start; font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; cursor: pointer; transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); transform: scale(var(--semi-transform_scale-none)); column-gap: 8px; } .semi-checkbox input[type=checkbox] { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 0; opacity: 0; } .semi-checkbox-content { flex: 1; display: flex; flex-direction: column; row-gap: 4px; } .semi-checkbox-addon { display: flex; flex: 1; align-items: center; color: var(--semi-color-text-0); line-height: 20px; user-select: none; } .semi-checkbox:hover .semi-checkbox-inner-display { background: var(--semi-color-fill-0); box-shadow: inset 0 0 0 1px var(--semi-color-focus-border); } .semi-checkbox:hover .semi-checkbox-inner-checked .semi-checkbox-inner-display { background: var(--semi-color-primary-hover); box-shadow: none; } .semi-checkbox:active .semi-checkbox-inner-display { background: var(--semi-color-fill-1); } .semi-checkbox:active .semi-checkbox-inner-checked .semi-checkbox-inner-display { background: var(--semi-color-primary-active); box-shadow: none; } .semi-checkbox.semi-checkbox-disabled:hover .semi-checkbox-inner-display, .semi-checkbox.semi-checkbox-disabled:active .semi-checkbox-inner-display { background: var(--semi-color-disabled-fill); box-shadow: inset 0 0 0 1px var(--semi-color-border); } .semi-checkbox.semi-checkbox-disabled:hover .semi-checkbox-inner-checked .semi-checkbox-inner-display, .semi-checkbox.semi-checkbox-disabled:active .semi-checkbox-inner-checked .semi-checkbox-inner-display { background: var(--semi-color-primary-disabled); box-shadow: none; } .semi-checkbox-inner { position: relative; display: flex; align-items: center; width: 16px; height: 20px; user-select: none; cursor: pointer; } .semi-checkbox-inner-display { box-sizing: border-box; position: relative; width: 16px; height: 16px; margin: 0; background: transparent; transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); box-shadow: inset 0 0 0 1px var(--semi-color-text-3); border-radius: var(--semi-border-radius-extra-small); } .semi-checkbox-inner-display .semi-icon { font-size: 16px; } .semi-checkbox-inner-checked .semi-checkbox-inner-display { background: var(--semi-color-primary); color: var(--semi-color-white); box-shadow: inset 0 0 0 1px var(--semi-color-primary); border-radius: var(--semi-border-radius-extra-small); } .semi-checkbox-inner-checked > .semi-checkbox-addon { color: var(--semi-color-text-0); } .semi-checkbox:hover .semi-checkbox-inner-display { background: var(--semi-color-fill-0); } .semi-checkbox:hover.semi-checkbox-indeterminate .semi-checkbox-inner-display { background: var(--semi-color-primary-hover); box-shadow: none; color: var(--semi-color-white); } .semi-checkbox:hover .semi-checkbox-inner-checked .semi-checkbox-inner-display { background: var(--semi-color-primary-hover); border-color: var(--semi-color-primary-hover); color: var(--semi-color-white); } .semi-checkbox:hover.semi-checkbox-cardType.semi-checkbox-unChecked.semi-checkbox-cardType_unDisabled .semi-checkbox-inner-display { background: var(--semi-color-white); } .semi-checkbox:active .semi-checkbox-inner-display { background: var(--semi-color-fill-1); } .semi-checkbox:active.semi-checkbox-indeterminate .semi-checkbox-inner-display { background: var(--semi-color-primary-active); border-color: var(--semi-color-primary-active); color: var(--semi-color-white); box-shadow: none; } .semi-checkbox:active .semi-checkbox-inner-checked .semi-checkbox-inner-display { background: var(--semi-color-primary-active); border-color: var(--semi-color-primary-active); color: var(--semi-color-white); } .semi-checkbox:active.semi-checkbox-cardType.semi-checkbox-unChecked.semi-checkbox-cardType_unDisabled .semi-checkbox-inner-display { background: var(--semi-color-white); } .semi-checkbox-cardType { flex-wrap: nowrap; align-items: flex-start; border-radius: 3px; padding: 12px 16px; background: transparent; border: 1px solid transparent; } .semi-checkbox-cardType .semi-checkbox-inner { position: relative; flex-shrink: 0; } .semi-checkbox-cardType .semi-checkbox-inner-display { background: var(--semi-color-white); } .semi-checkbox-cardType .semi-checkbox-inner-pureCardType { opacity: 0; width: 0; } .semi-checkbox-cardType .semi-checkbox-addon { font-weight: 600; font-size: 14px; line-height: 20px; color: var(--semi-color-text-0); } .semi-checkbox-cardType .semi-checkbox-extra { font-weight: normal; font-size: 14px; line-height: 20px; color: var(--semi-color-text-2); } .semi-checkbox-cardType .semi-checkbox-extra.semi-checkbox-cardType_extra_noChildren { margin-top: 0; } .semi-checkbox-cardType:hover { background: var(--semi-color-fill-0); } .semi-checkbox-cardType:active { background: var(--semi-color-fill-1); } .semi-checkbox-cardType_checked { background: var(--semi-color-primary-light-default); border: 1px solid var(--semi-color-primary); } .semi-checkbox-cardType_checked:hover { background: var(--semi-color-primary-light-default); border-color: var(--semi-color-primary-hover); } .semi-checkbox-cardType_checked:hover .semi-checkbox-inner-checked .semi-checkbox-inner-display { box-shadow: none; } .semi-checkbox-cardType_checked:active { background: var(--semi-color-primary-light-default); border-color: var(--semi-color-primary-active); } .semi-checkbox-cardType_disabled:active { background: transparent; } .semi-checkbox-cardType_disabled:hover { background: transparent; } .semi-checkbox-cardType_checked_disabled.semi-checkbox-cardType { background: var(--semi-color-primary-light-default); border: 1px solid var(--semi-color-primary-disabled); } .semi-checkbox-cardType_checked_disabled.semi-checkbox-cardType:hover .semi-checkbox-inner-checked .semi-checkbox-inner-display { box-shadow: none; } .semi-checkbox-indeterminate .semi-checkbox-inner-display, .semi-checkbox-checked .semi-checkbox-inner-display { background: var(--semi-color-primary); color: var(--semi-color-white); box-shadow: inset 0 0 0 1px var(--semi-color-primary); border-radius: var(--semi-border-radius-extra-small); } .semi-checkbox-indeterminate .semi-checkbox-inner-display:hover, .semi-checkbox-checked .semi-checkbox-inner-display:hover { background: var(--semi-color-primary-hover); border-color: var(--semi-color-primary-hover); color: var(--semi-color-white); } .semi-checkbox-indeterminate .semi-checkbox-inner-display:active, .semi-checkbox-checked .semi-checkbox-inner-display:active { background: var(--semi-color-primary-active); border-color: var(--semi-color-primary-active); color: var(--semi-color-white); } .semi-checkbox-indeterminate .semi-checkbox-inner-addon, .semi-checkbox-checked .semi-checkbox-inner-addon { color: var(--semi-color-text-0); } .semi-checkbox-disabled { cursor: not-allowed; } .semi-checkbox-disabled .semi-checkbox-inner { cursor: not-allowed; } .semi-checkbox-disabled .semi-checkbox-inner-display { color: var(--semi-color-white); background: var(--semi-color-disabled-fill); box-shadow: inset 0 0 0 1px var(--semi-color-border); } .semi-checkbox-disabled .semi-checkbox-inner-display:hover { color: var(--semi-color-white); background: transparent; } .semi-checkbox-disabled .semi-checkbox-inner-checked { color: var(--semi-color-white); } .semi-checkbox-disabled .semi-checkbox-inner-checked .semi-checkbox-inner-display { opacity: 0.75; background: var(--semi-color-primary-disabled); box-shadow: inset 0 0 0 1px var(--semi-color-primary-disabled); } .semi-checkbox-disabled .semi-checkbox-inner-checked .semi-checkbox-inner-display:hover { color: var(--semi-color-white); background: var(--semi-color-primary-disabled); } .semi-checkbox-disabled .semi-checkbox-addon { color: var(--semi-color-disabled-text); } .semi-checkbox-disabled .semi-checkbox-extra { color: var(--semi-color-disabled-text); } .semi-checkbox.semi-checkbox-disabled.semi-checkbox-indeterminate .semi-checkbox-inner-display { opacity: 0.75; background: var(--semi-color-primary-disabled); box-shadow: inset 0 0 0 1px var(--semi-color-primary-disabled); color: var(--semi-color-white); } .semi-checkbox-extra { flex-shrink: 0; flex-grow: 1; flex-basis: 100%; box-sizing: border-box; color: var(--semi-color-text-2); } .semi-checkbox-focus { outline: 2px solid var(--semi-color-primary-light-active); } .semi-checkbox-focus-border { box-shadow: inset 0 0 0 1px var(--semi-color-focus-border); } .semi-checkboxGroup { font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 14px; } .semi-checkboxGroup .semi-checkbox.semi-checkbox-vertical { margin-bottom: 16px; } .semi-checkboxGroup-horizontal { display: flex; flex-wrap: wrap; gap: 16px; } .semi-checkboxGroup-horizontal .semi-checkbox { display: inline-flex; } .semi-checkboxGroup-vertical { display: flex; flex-direction: column; row-gap: 12px; } .semi-checkboxGroup-vertical-cardType { row-gap: 16px; } .semi-checkboxGroup-vertical-pureCardType .semi-checkbox { column-gap: 0; } .semi-rtl .semi-checkbox, .semi-portal-rtl .semi-checkbox { direction: rtl; } .semi-rtl .semi-checkbox input[type=checkbox], .semi-portal-rtl .semi-checkbox input[type=checkbox] { left: auto; right: 0; } .semi-rtl .semi-checkboxGroup, .semi-portal-rtl .semi-checkboxGroup { direction: rtl; } .semi-collapse-item { border-bottom: 1px solid var(--semi-color-border); } .semi-collapse-header { display: flex; align-items: center; justify-content: space-between; margin: 4px 8px; padding: 8px; border-radius: var(--semi-border-radius-small); outline: none; cursor: pointer; color: var(--semi-color-text-0); font-weight: 600; font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; } .semi-collapse-header-right { display: flex; align-items: center; } .semi-collapse-header-right span { display: flex; padding-right: 8px; } .semi-collapse-header-right span:last-child { padding-right: 0; } .semi-collapse-header-icon { width: 16px; height: 16px; color: var(--semi-color-text-2); } .semi-collapse-header-iconLeft { justify-content: flex-start; } .semi-collapse-header-iconLeft .semi-collapse-header-icon { margin-right: 8px; } .semi-collapse-header-iconDisabled { color: var(--semi-color-disabled-text); } .semi-collapse-header:hover { background-color: var(--semi-color-fill-0); } .semi-collapse-header:active { background-color: var(--semi-color-fill-1); } .semi-collapse-header-disabled { color: var(--semi-color-disabled-text); } .semi-collapse-header-disabled:hover { background-color: transparent; } .semi-collapse-content { padding: 4px 16px 8px 16px; color: var(--semi-color-text-1); font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; } .semi-collapse-content p { margin: 0; } .semi-rtl .semi-collapse, .semi-portal-rtl .semi-collapse { direction: rtl; } .semi-rtl .semi-collapse-header-right span, .semi-portal-rtl .semi-collapse-header-right span { display: flex; padding-right: 0; padding-left: 8px; } .semi-rtl .semi-collapse-header-right span:last-child, .semi-portal-rtl .semi-collapse-header-right span:last-child { padding-right: 0; padding-left: 0; } .semi-collapsible-transition { transition: height 250ms cubic-bezier(0.25, 0.1, 0.25, 1) var(--semi-transition_delay-none), opacity 250ms var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); } .semi-datepicker { box-sizing: border-box; display: inline-block; } .semi-datepicker .semi-scrolllist-body .semi-scrolllist-item { -ms-overflow-style: none; /* Internet Explorer 10+ */ scrollbar-width: none; /* Firefox */ } .semi-datepicker .semi-scrolllist-body .semi-scrolllist-item::-webkit-scrollbar { display: none; width: 0; height: 0; } .semi-datepicker .semi-scrolllist-body .semi-scrolllist-list-outer { -ms-overflow-style: none; /* Internet Explorer 10+ */ scrollbar-width: none; /* Firefox */ } .semi-datepicker .semi-scrolllist-body .semi-scrolllist-list-outer::-webkit-scrollbar { display: none; width: 0; height: 0; } .semi-datepicker-month-grid { user-select: none; display: flex; } .semi-datepicker-month-grid-left, .semi-datepicker-month-grid-right { position: relative; padding: 0; display: inline-flex; flex-direction: column; justify-content: flex-start; } .semi-datepicker-month-grid[x-type=date] .semi-datepicker-yam, .semi-datepicker-month-grid[x-type=dateRange] .semi-datepicker-yam { height: 100%; } .semi-datepicker-month-grid[x-type=dateTime] .semi-datepicker-yam, .semi-datepicker-month-grid[x-type=dateTimeRange] .semi-datepicker-yam { height: calc(100% - 54px); } .semi-datepicker-month-grid .semi-datepicker-yam-showing { min-height: 378px; min-width: 284px; } .semi-datepicker-month-grid[x-type=date] .semi-datepicker-yam-showing { min-height: 325px; } .semi-datepicker-month-grid[x-insetinput=true] .semi-datepicker-month-grid-left[x-open-type=year], .semi-datepicker-month-grid[x-insetinput=true] .semi-datepicker-month-grid-right[x-open-type=year] { min-height: 317px; } .semi-datepicker-month-grid[x-insetinput=true] .semi-datepicker-month-grid-left[x-open-type=time], .semi-datepicker-month-grid[x-insetinput=true] .semi-datepicker-month-grid-right[x-open-type=time] { min-height: 317px; } .semi-datepicker-month-grid[x-insetinput=true] .semi-datepicker-navigation { padding-top: 8px; padding-bottom: 8px; } .semi-datepicker-month-grid[x-insetinput=true] .semi-datepicker-tpk { min-height: 100%; } .semi-datepicker-month-grid[x-insetinput=true][x-type=dateTime] .semi-datepicker-yam, .semi-datepicker-month-grid[x-insetinput=true][x-type=dateTimeRange] .semi-datepicker-yam { height: 100%; } .semi-datepicker-month-grid[x-preset-position=left][x-insetinput=false] .semi-datepicker-month, .semi-datepicker-month-grid[x-preset-position=right][x-insetinput=false] .semi-datepicker-month { height: 253px; } .semi-datepicker-month-grid .semi-datepicker-yearmonth-header { background: var(--semi-color-bg-3); padding: 12px 16px; border-bottom: 1px solid var(--semi-color-border); border-radius: var(--semi-border-radius-medium) var(--semi-border-radius-medium) 0 0; display: flex; align-items: center; } .semi-datepicker-month-grid .semi-scrolllist { background: var(--semi-color-bg-3); position: relative; box-shadow: none; height: auto; width: 100%; height: 100%; overflow: hidden; flex: 1; } .semi-datepicker-month-grid .semi-scrolllist-header, .semi-datepicker-month-grid .semi-scrolllist-body { box-sizing: border-box; width: 100%; } .semi-datepicker-month-grid .semi-scrolllist-header { border-bottom: 1px solid var(--semi-color-border); padding: 16px; } .semi-datepicker-month-grid .semi-scrolllist-body { height: 100%; overflow: hidden; padding: 0; flex: 1; } .semi-datepicker-month-grid .semi-scrolllist-line { display: none; } .semi-datepicker-month-grid .semi-scrolllist-header-title { padding: 0; font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; min-height: 24px; line-height: 24px; } .semi-datepicker-month-grid[x-panel-yearandmonth-open-type=left] .semi-datepicker-weeks, .semi-datepicker-month-grid[x-panel-yearandmonth-open-type=right] .semi-datepicker-weeks { min-height: 216px; } .semi-datepicker-panel-yam { max-width: 484px; } .semi-datepicker-panel-yam[x-type=monthRange] { max-width: 584px; } .semi-datepicker-panel-yam .semi-datepicker-yearmonth-body { display: flex; } .semi-datepicker-panel-yam .semi-datepicker-yearmonth-body .semi-scrolllist:nth-child(2) { border-left: 1px solid var(--semi-color-border); } .semi-datepicker-panel-yam .semi-scrolllist { box-shadow: none; height: 266px; } .semi-datepicker-panel-yam .semi-scrolllist-list-outer > ul > li { min-width: 64px; } .semi-datepicker-panel-yam .semi-scrolllist-item > ul > li { min-width: 82px; } .semi-datepicker-panel-yam .semi-scrolllist-body { padding: 0; overflow: hidden; } .semi-datepicker-panel-yam .semi-scrolllist-body .semi-scrolllist-item-wheel:not(#neverExistElement) { border: none; } .semi-datepicker-footer { padding-top: 10px; padding-right: 8px; padding-bottom: 10px; text-align: right; background-color: var(--semi-color-fill-0); } .semi-datepicker-footer .semi-button:first-of-type { margin-right: 12px; } .semi-datepicker-footer .semi-button:nth-of-type(2) { margin-right: 8px; } .semi-datepicker-yam { position: absolute; top: 0; width: 100%; display: flex; flex-direction: column; box-sizing: border-box; } .semi-datepicker-tpk { position: absolute; top: 0; height: calc(100% - 54px); width: 100%; display: flex; flex-direction: column; } .semi-datepicker-tpk .semi-datepicker-time { height: 100%; } .semi-datepicker-navigation { display: flex; align-items: center; box-sizing: content-box; height: 32px; padding: 12px 16px; } .semi-datepicker-navigation-left, .semi-datepicker-navigation-right { width: 32px; height: 32px; display: flex; justify-content: center; align-items: center; } .semi-datepicker-navigation .semi-button { color: var(--semi-color-text-2); min-width: 32px; } .semi-datepicker-navigation-month { font-size: 16px; line-height: 22px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; flex-grow: 1; text-align: center; font-weight: 600; color: var(--semi-color-text-0); } .semi-datepicker-navigation-month .semi-button { color: var(--semi-color-text-0); } .semi-datepicker-month { width: 252px; box-sizing: content-box; padding: 16px; padding-top: 0; } .semi-datepicker-weekday { font-size: 12px; line-height: 16px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 600; color: var(--semi-color-text-2); border-bottom: 1px solid var(--semi-color-border); } .semi-datepicker-weekday-item { width: 36px; height: 36px; line-height: 36px; text-align: center; display: inline-block; } .semi-datepicker-weeks { color: var(--semi-color-text-0); } .semi-datepicker-week { display: flex; align-items: center; } .semi-datepicker-day { box-sizing: border-box; display: inline-block; width: 36px; height: 36px; display: flex; justify-content: center; align-items: center; cursor: pointer; } .semi-datepicker-day-main { display: flex; justify-content: center; align-items: center; width: 32px; height: 32px; margin: 0 auto; box-sizing: border-box; border-radius: var(--semi-border-radius-small); } .semi-datepicker-day-main:hover { background-color: var(--semi-color-fill-0); } .semi-datepicker-day-main:active { background-color: var(--semi-color-fill-1); } .semi-datepicker-day-today .semi-datepicker-day-main { color: var(--semi-color-primary); background-color: var(--semi-color-fill-0); font-weight: 600; } .semi-datepicker-day-today.semi-datepicker-day-disabled .semi-datepicker-day-main { color: var(--semi-color-primary-disabled); } .semi-datepicker-day-inrange .semi-datepicker-day-main, .semi-datepicker-day-inhover .semi-datepicker-day-main, .semi-datepicker-day-inoffsetrange .semi-datepicker-day-main, .semi-datepicker-day-hoverday .semi-datepicker-day-main, .semi-datepicker-day-selectedrange-hover .semi-datepicker-day-main, .semi-datepicker-day-hoverday-around-singleselected .semi-datepicker-day-main { border-radius: 0; margin-left: 0; margin-right: 0; width: 36px; } .semi-datepicker-day-selected .semi-datepicker-day-main { border-radius: var(--semi-border-radius-small); } .semi-datepicker-day-selected-start.semi-datepicker-day-selected-end .semi-datepicker-day-main, .semi-datepicker-day-offsetrange-start.semi-datepicker-day-offsetrange-end .semi-datepicker-day-main { border-radius: var(--semi-border-radius-small); } .semi-datepicker-day-offsetrange-start .semi-datepicker-day-main { border-radius: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small); } .semi-datepicker-day-offsetrange-end .semi-datepicker-day-main { border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0; } .semi-datepicker-day-hoverday-beforerange .semi-datepicker-day-main { border-radius: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small); } .semi-datepicker-day-hoverday-afterrange .semi-datepicker-day-main { border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0; } .semi-datepicker-day-selected-start .semi-datepicker-day-main, .semi-datepicker-day-offsetrange-start .semi-datepicker-day-main { width: 34px; margin-left: 2px; margin-right: 0; border-radius: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small); } .semi-datepicker-day-selected-end .semi-datepicker-day-main, .semi-datepicker-day-offsetrange-end .semi-datepicker-day-main { width: 34px; margin-right: 2px; margin-left: 0; border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0; } .semi-datepicker-day-hoverday-inrange .semi-datepicker-day-main { border-radius: 0; } .semi-datepicker-day-inoffsetrange .semi-datepicker-day-main, .semi-datepicker-day-offsetrange-start .semi-datepicker-day-main, .semi-datepicker-day-offsetrange-end .semi-datepicker-day-main { background-color: var(--semi-color-fill-0); } .semi-datepicker-day-hoverday .semi-datepicker-day-main, .semi-datepicker-day-hoverday-offset .semi-datepicker-day-main { background-color: var(--semi-color-fill-1); } .semi-datepicker-day-inrange .semi-datepicker-day-main, .semi-datepicker-day-inhover .semi-datepicker-day-main { background-color: var(--semi-color-primary-light-default); } .semi-datepicker-day-hoverday-inrange .semi-datepicker-day-main, .semi-datepicker-day-hoverday-beforerange .semi-datepicker-day-main, .semi-datepicker-day-hoverday-afterrange .semi-datepicker-day-main { background-color: var(--semi-color-primary-light-active); } .semi-datepicker-day-hoverday-around-singleselected .semi-datepicker-day-main { background-color: var(--semi-color-primary-light-active); } .semi-datepicker-day-selected .semi-datepicker-day-main, .semi-datepicker-day-selected-start .semi-datepicker-day-main, .semi-datepicker-day-selected-end .semi-datepicker-day-main { background-color: var(--semi-color-primary); color: var(--semi-color-white); } .semi-datepicker-day-selected .semi-datepicker-day-main:hover, .semi-datepicker-day-selected-start .semi-datepicker-day-main:hover, .semi-datepicker-day-selected-end .semi-datepicker-day-main:hover { background-color: var(--semi-color-primary); } .semi-datepicker-day-selectedrange-hover .semi-datepicker-day-main { background-color: var(--semi-color-primary-light-hover); } .semi-datepicker-day-selected-start-afterhover .semi-datepicker-day-main, .semi-datepicker-day-selected-end-beforehover .semi-datepicker-day-main { border: 1px solid var(--semi-color-primary-active); } .semi-datepicker-day-disabled { cursor: not-allowed; color: var(--semi-color-disabled-text); } .semi-datepicker-day-disabled .semi-datepicker-day-main:hover { background-color: transparent; } .semi-datepicker-day-disabled .semi-datepicker-day-main:active { background-color: transparent; } .semi-datepicker-day-disabled.semi-datepicker-day-selected .semi-datepicker-day-main, .semi-datepicker-day-disabled.semi-datepicker-day-selected-start .semi-datepicker-day-main, .semi-datepicker-day-disabled.semi-datepicker-day-selected-end .semi-datepicker-day-main, .semi-datepicker-day-disabled.semi-datepicker-day-inhover .semi-datepicker-day-main, .semi-datepicker-day-disabled.semi-datepicker-day-inrange .semi-datepicker-day-main, .semi-datepicker-day-disabled.semi-datepicker-day-inoffsetrange .semi-datepicker-day-main, .semi-datepicker-day-disabled.semi-datepicker-day-hoverday .semi-datepicker-day-main, .semi-datepicker-day-disabled.semi-datepicker-day-hoverday-offset .semi-datepicker-day-main, .semi-datepicker-day-disabled.semi-datepicker-day-offsetrange-start .semi-datepicker-day-main, .semi-datepicker-day-disabled.semi-datepicker-day-offsetrange-end .semi-datepicker-day-main, .semi-datepicker-day-disabled.semi-datepicker-day-selectedrange-hover .semi-datepicker-day-main { background-color: var(--semi-color-disabled-fill); color: var(--semi-color-disabled-text); } .semi-datepicker-switch { text-align: center; display: flex; border-top: 1px solid var(--semi-color-border); margin-top: auto; } .semi-datepicker-switch-date, .semi-datepicker-switch-time { width: 50%; cursor: pointer; padding-top: 16px; padding-bottom: 16px; display: flex; justify-content: center; align-items: center; color: var(--semi-color-text-2); } .semi-datepicker-switch-date:not(.semi-datepicker-switch-time-disabled):hover, .semi-datepicker-switch-time:not(.semi-datepicker-switch-time-disabled):hover { background-color: var(--semi-color-fill-0); } .semi-datepicker-switch-date-active, .semi-datepicker-switch-time-active { color: var(--semi-color-text-0); font-weight: 600; cursor: auto; } .semi-datepicker-switch-date-active:hover, .semi-datepicker-switch-time-active:hover { background-color: inherit; } .semi-datepicker-switch-date-disabled, .semi-datepicker-switch-time-disabled { cursor: not-allowed; } .semi-datepicker-switch-text { padding-left: 8px; } .semi-datepicker-time .semi-jumperlist { box-shadow: none; border-radius: 0; } .semi-datepicker-quick-control { box-sizing: border-box; background-color: transparent; } .semi-datepicker-quick-control-header { padding: 18px 12px 0; font-weight: 600; } .semi-datepicker-quick-control-left { border-right: 1px solid var(--semi-color-border); } .semi-datepicker-quick-control-right { border-left: 1px solid var(--semi-color-border); } .semi-datepicker-quick-control-top { border-bottom: 1px solid var(--semi-color-border); } .semi-datepicker-quick-control-bottom { border-top: 1px solid var(--semi-color-border); } .semi-datepicker-quick-control-left-content-wrapper, .semi-datepicker-quick-control-right-content-wrapper { max-width: 200px; margin-top: 14px; overflow-y: auto; } .semi-datepicker-quick-control-top-content-wrapper, .semi-datepicker-quick-control-bottom-content-wrapper { overflow-y: auto; max-height: 100px; } .semi-datepicker-quick-control-left-content, .semi-datepicker-quick-control-right-content { box-sizing: border-box; display: grid; align-content: flex-start; grid-gap: 8px; grid-template-columns: repeat(2, minmax(76.5px, 84px)); padding: 0 12px 12px; } .semi-datepicker-quick-control-left-content-item, .semi-datepicker-quick-control-right-content-item { max-width: 84px; } .semi-datepicker-quick-control-left-content-item-ellipsis, .semi-datepicker-quick-control-right-content-item-ellipsis { width: 68px; color: var(--semi-color-primary); } .semi-datepicker-quick-control-top-content, .semi-datepicker-quick-control-bottom-content { display: grid; grid-gap: 8px; grid-template-columns: repeat(3, minmax(70.924px, 75.924px)); align-content: flex-start; padding: 8px 20px; } .semi-datepicker-quick-control-top-content-item, .semi-datepicker-quick-control-bottom-content-item { max-width: 75.924px; } .semi-datepicker-quick-control-top-content-item-ellipsis, .semi-datepicker-quick-control-bottom-content-item-ellipsis { width: 59.924px; color: var(--semi-color-primary); } .semi-datepicker-quick-control-top-range-content, .semi-datepicker-quick-control-bottom-range-content { box-sizing: border-box; display: grid; align-content: flex-start; grid-template-columns: repeat(5, minmax(96.2px, 99.2px)); grid-gap: 8px; padding: 8px 20px; } .semi-datepicker-quick-control-top-range-content-item, .semi-datepicker-quick-control-bottom-range-content-item { max-width: 99.2px; } .semi-datepicker-quick-control-top-range-content-item-ellipsis, .semi-datepicker-quick-control-bottom-range-content-item-ellipsis { width: 83.2px; color: var(--semi-color-primary); } .semi-datepicker-quick-control-top-month-content, .semi-datepicker-quick-control-bottom-month-content { box-sizing: border-box; display: grid; grid-template-columns: repeat(2, minmax(51px, 58.5px)); grid-gap: 8px; align-content: flex-start; padding: 8px 20px; } .semi-datepicker-quick-control-top-month-content-item, .semi-datepicker-quick-control-bottom-month-content-item { max-width: 58.5px; } .semi-datepicker-quick-control-top-month-content-item-ellipsis, .semi-datepicker-quick-control-bottom-month-content-item-ellipsis { max-width: 42.5px; color: var(--semi-color-primary); } .semi-datepicker-quick-control-month { max-width: 284px; } .semi-datepicker-quick-control-month[x-insetinput=true] .semi-datepicker-quick-control-right-content-wrapper, .semi-datepicker-quick-control-month[x-insetinput=true] .semi-datepicker-quick-control-left-content-wrapper { max-height: 258px; } .semi-datepicker-quick-control-month .semi-datepicker-quick-control-right-content-wrapper, .semi-datepicker-quick-control-month .semi-datepicker-quick-control-left-content-wrapper { max-height: 214px; } .semi-datepicker-quick-control-date { max-width: 284px; } .semi-datepicker-quick-control-date[x-insetinput=true] .semi-datepicker-quick-control-right-content-wrapper, .semi-datepicker-quick-control-date[x-insetinput=true] .semi-datepicker-quick-control-left-content-wrapper { max-height: 309px; } .semi-datepicker-quick-control-date .semi-datepicker-quick-control-right-content-wrapper, .semi-datepicker-quick-control-date .semi-datepicker-quick-control-left-content-wrapper { max-height: 273px; } .semi-datepicker-quick-control-dateTime { max-width: 284px; } .semi-datepicker-quick-control-dateTime[x-insetinput=true] .semi-datepicker-quick-control-right-content-wrapper, .semi-datepicker-quick-control-dateTime[x-insetinput=true] .semi-datepicker-quick-control-left-content-wrapper { max-height: 309px; } .semi-datepicker-quick-control-dateTime .semi-datepicker-quick-control-right-content-wrapper, .semi-datepicker-quick-control-dateTime .semi-datepicker-quick-control-left-content-wrapper { max-height: 326px; } .semi-datepicker-quick-control-dateRange { max-width: 568px; } .semi-datepicker-quick-control-dateRange[x-insetinput=true] .semi-datepicker-quick-control-right-content-wrapper, .semi-datepicker-quick-control-dateRange[x-insetinput=true] .semi-datepicker-quick-control-left-content-wrapper { max-height: 309px; } .semi-datepicker-quick-control-dateRange .semi-datepicker-quick-control-right-content-wrapper, .semi-datepicker-quick-control-dateRange .semi-datepicker-quick-control-left-content-wrapper { max-height: 273px; } .semi-datepicker-quick-control-dateTimeRange { max-width: 568px; } .semi-datepicker-quick-control-dateTimeRange[x-insetinput=true] .semi-datepicker-quick-control-right-content-wrapper, .semi-datepicker-quick-control-dateTimeRange[x-insetinput=true] .semi-datepicker-quick-control-left-content-wrapper { max-height: 309px; } .semi-datepicker-quick-control-dateTimeRange .semi-datepicker-quick-control-right-content-wrapper, .semi-datepicker-quick-control-dateTimeRange .semi-datepicker-quick-control-left-content-wrapper { max-height: 326px; } .semi-datepicker-topSlot { border-bottom: 1px solid var(--semi-color-border); } .semi-datepicker-bottomSlot { border-top: 1px solid var(--semi-color-border); } .semi-datepicker .semi-popover-trigger { width: 100%; } .semi-datepicker .semi-popover-trigger .semi-input-wrapper { font-size: 13px; } .semi-datepicker .semi-popover-trigger .semi-input-suffix { color: var(--semi-color-primary); } .semi-datepicker .semi-datepicker-input-readonly { cursor: pointer; } .semi-datepicker-inset-input-wrapper { display: flex; flex-wrap: nowrap; justify-content: space-between; box-sizing: border-box; column-gap: 8px; padding: 12px 16px; padding-bottom: 0; width: 284px; } .semi-datepicker-inset-input-wrapper[x-type=dateRange], .semi-datepicker-inset-input-wrapper[x-type=dateTimeRange] { width: 568px; } .semi-datepicker-inset-input-wrapper[x-type=month] { width: 165px; } .semi-datepicker-inset-input-wrapper[x-type=monthRange] { width: 331px; } .semi-datepicker-inset-input-wrapper .semi-input-wrapper { flex: 1; flex-shrink: 0; } .semi-datepicker-inset-input-separator { flex-grow: 0; flex-shrink: 0; height: 32px; line-height: 32px; padding: 0 4px; color: var(--semi-color-text-3); } .semi-datepicker-range-input { display: flex; align-items: center; box-sizing: border-box; border-radius: var(--semi-border-radius-small); height: 32px; color: var(--semi-color-text-2); background-color: var(--semi-color-fill-0); border: 0px solid transparent; } .semi-datepicker-range-input:hover { border-color: transparent; } .semi-datepicker-range-input:active { border-color: transparent; } .semi-datepicker-range-input .semi-datepicker-monthRange-input { background-color: transparent; } .semi-datepicker-range-input-wrapper { box-sizing: border-box; background-color: transparent; padding: 0 8px; height: 100%; width: 100%; border: 1px solid transparent; border-radius: var(--semi-border-radius-small); display: flex; align-items: center; } .semi-datepicker-range-input-wrapper .semi-input-wrapper { background-color: transparent; border: none; } .semi-datepicker-range-input-wrapper-focus { border-color: transparent; background-color: var(--semi-color-fill-1); border-radius: var(--semi-border-radius-small); transition: background-color 0.16s ease-in-out; } .semi-datepicker-range-input-wrapper-focus ~ .semi-datepicker-range-input-clearbtn { display: flex; } .semi-datepicker-range-input-wrapper-focus ~ .semi-datepicker-range-input-clearbtn ~ .semi-datepicker-range-input-suffix { display: none; } .semi-datepicker-range-input-wrapper .semi-input { padding: 2px 4px; } .semi-datepicker-range-input-wrapper-icon { flex-shrink: 0; } .semi-datepicker-range-input-wrapper:hover { background-color: var(--semi-color-fill-1); } .semi-datepicker-range-input-wrapper-start { border-top-right-radius: 0; border-bottom-right-radius: 0; } .semi-datepicker-range-input-wrapper-start-with-prefix { border-radius: 0; } .semi-datepicker-range-input-wrapper-end { border-radius: 0; } .semi-datepicker-range-input-wrapper-active { border-color: var(--semi-color-focus-border); background-color: var(--semi-color-fill-1); } .semi-datepicker-range-input-separator { display: flex; align-items: center; } .semi-datepicker-range-input-separator-active { color: var(--semi-color-text-0); } .semi-datepicker-range-input-small { height: 24px; } .semi-datepicker-range-input-large { height: 40px; } .semi-datepicker-range-input-large .semi-input-default { font-size: 16px; } .semi-datepicker-range-input:hover .semi-datepicker-range-input-clearbtn { display: flex; cursor: pointer; } .semi-datepicker-range-input:hover .semi-datepicker-range-input-clearbtn ~ .semi-datepicker-range-input-suffix { display: none; } .semi-datepicker-range-input:hover .semi-datepicker-range-input-clearbtn:hover { color: var(--semi-color-primary-hover); } .semi-datepicker-range-input-disabled { cursor: not-allowed; color: var(--semi-color-disabled-text); background-color: var(--semi-color-disabled-fill); } .semi-datepicker-range-input-disabled .semi-datepicker-range-input-wrapper:hover { background-color: transparent; } .semi-datepicker-range-input-disabled:hover { background-color: var(--semi-color-disabled-fill); } .semi-datepicker-range-input-disabled .semi-datepicker-range-input-prefix, .semi-datepicker-range-input-disabled .semi-datepicker-range-input-suffix, .semi-datepicker-range-input-disabled .semi-datepicker-range-input-clearbtn { color: var(--semi-color-disabled-text); } .semi-datepicker-range-input-warning { background-color: var(--semi-color-warning-light-default); } .semi-datepicker-range-input-warning .semi-datepicker-range-input-wrapper:hover { background-color: var(--semi-color-warning-light-hover); } .semi-datepicker-range-input-warning .semi-datepicker-range-input-wrapper-active { border-color: var(--semi-color-warning); background-color: var(--semi-color-warning-light-hover); } .semi-datepicker-range-input-error { background-color: var(--semi-color-danger-light-default); } .semi-datepicker-range-input-error .semi-datepicker-range-input-wrapper:hover { background-color: var(--semi-color-danger-light-hover); } .semi-datepicker-range-input-error .semi-datepicker-range-input-wrapper-active { border-color: var(--semi-color-danger); background-color: var(--semi-color-danger-light-hover); } .semi-datepicker-range-input .semi-datepicker-range-input-clearbtn { display: none; } .semi-datepicker-range-input-prefix, .semi-datepicker-range-input-suffix, .semi-datepicker-range-input-clearbtn { display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; white-space: nowrap; color: var(--semi-color-text-2); } .semi-datepicker-range-input-prefix { padding-left: 12px; padding-right: 8px; } .semi-datepicker-range-input-suffix { padding-left: 8px; padding-right: 12px; } .semi-datepicker-range-input-suffix-hidden { display: none; } .semi-datepicker-range-input-clearbtn { padding-left: 8px; padding-right: 12px; } /* * 小尺寸 DatePicker */ .semi-datepicker-compact { font-size: 12px; line-height: 16px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 20px; } .semi-datepicker-compact .semi-datepicker-month-grid[x-type=dateTime] .semi-datepicker-yam, .semi-datepicker-compact .semi-datepicker-month-grid[x-type=dateTimeRange] .semi-datepicker-yam { height: calc(100% - 32px); } .semi-datepicker-compact .semi-datepicker-month-grid[x-type=dateRange] .semi-datepicker-month-grid-left, .semi-datepicker-compact .semi-datepicker-month-grid[x-type=dateTimeRange] .semi-datepicker-month-grid-left { border-right: 1px solid var(--semi-color-border); } .semi-datepicker-compact .semi-datepicker-month-grid .semi-datepicker-yam-showing { min-height: 288px; min-width: 216px; } .semi-datepicker-compact .semi-datepicker-month-grid[x-type=date] .semi-datepicker-yam-showing { min-height: 256px; } .semi-datepicker-compact .semi-datepicker-month-grid[x-preset-position=left][x-insetinput=false] .semi-datepicker-month, .semi-datepicker-compact .semi-datepicker-month-grid[x-preset-position=right][x-insetinput=false] .semi-datepicker-month { height: 220px; } .semi-datepicker-compact .semi-datepicker-month-grid .semi-datepicker-yearmonth-header { box-sizing: border-box; height: 48px; padding: 12px; } .semi-datepicker-compact .semi-datepicker-month-grid .semi-datepicker-yearmonth-body { display: flex; } .semi-datepicker-compact .semi-datepicker-month-grid .semi-datepicker-yearmonth-body .semi-scrolllist:nth-child(2) { border: 1px solid var(--semi-color-border); } .semi-datepicker-compact .semi-datepicker-month-grid .semi-scrolllist { font-size: 12px; line-height: 16px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 20px; } .semi-datepicker-compact .semi-datepicker-month-grid .semi-scrolllist-header { display: none; } .semi-datepicker-compact .semi-datepicker-month-grid .semi-scrolllist-list-outer > ul > li { height: 32px; } .semi-datepicker-compact .semi-datepicker-month-grid .semi-scrolllist-item-wheel { border-right: 0; } .semi-datepicker-compact .semi-datepicker-month-grid .semi-scrolllist-item-wheel .semi-scrolllist-selector { height: 32px; } .semi-datepicker-compact .semi-datepicker-month-grid .semi-scrolllist-item-wheel .semi-scrolllist-shade-pre { margin-top: -17px; } .semi-datepicker-compact .semi-datepicker-month-grid .semi-scrolllist-item-wheel .semi-scrolllist-shade-post { margin-top: 17px; } .semi-datepicker-compact .semi-datepicker-month-grid[x-panel-yearandmonth-open-type=left] .semi-datepicker-weeks, .semi-datepicker-compact .semi-datepicker-month-grid[x-panel-yearandmonth-open-type=right] .semi-datepicker-weeks { min-height: 168px; } .semi-datepicker-compact .semi-datepicker-month-grid[x-insetinput=true] .semi-datepicker-month-grid-left[x-open-type=year], .semi-datepicker-compact .semi-datepicker-month-grid[x-insetinput=true] .semi-datepicker-month-grid-right[x-open-type=year] { min-height: 256px; } .semi-datepicker-compact .semi-datepicker-month-grid[x-insetinput=true] .semi-datepicker-month-grid-left[x-open-type=time], .semi-datepicker-compact .semi-datepicker-month-grid[x-insetinput=true] .semi-datepicker-month-grid-right[x-open-type=time] { min-height: 256px; } .semi-datepicker-compact .semi-datepicker-month-grid[x-insetinput=true] .semi-datepicker-yam-showing { min-height: 256px; } .semi-datepicker-compact .semi-datepicker-month-grid[x-insetinput=true] .semi-datepicker-tpk { min-height: 100%; } .semi-datepicker-compact .semi-datepicker-month-grid[x-insetinput=true][x-type=dateTime] .semi-datepicker-yam, .semi-datepicker-compact .semi-datepicker-month-grid[x-insetinput=true][x-type=dateTimeRange] .semi-datepicker-yam { height: 100%; } .semi-datepicker-compact.semi-datepicker-panel-yam .semi-scrolllist { font-size: 12px; line-height: 16px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 20px; } .semi-datepicker-compact .semi-datepicker-tpk { height: calc(100% - 32px); } .semi-datepicker-compact .semi-datepicker-navigation { height: 24px; padding: 12px; padding-bottom: 0; } .semi-datepicker-compact .semi-datepicker-navigation-left, .semi-datepicker-compact .semi-datepicker-navigation-right { width: 24px; height: 24px; } .semi-datepicker-compact .semi-datepicker-navigation .semi-button { min-width: 24px; min-height: 24px; } .semi-datepicker-compact .semi-datepicker-navigation-month .semi-button { font-size: 12px; line-height: 16px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 20px; } .semi-datepicker-compact .semi-datepicker-month { width: 216px; padding: 0; } .semi-datepicker-compact .semi-datepicker-weeks { padding: 10px; padding-top: 6px; } .semi-datepicker-compact .semi-datepicker-weekday { box-sizing: border-box; height: 36px; padding-left: 10px; padding-right: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--semi-color-border); } .semi-datepicker-compact .semi-datepicker-weekday-item { width: 28px; height: 28px; line-height: 28px; } .semi-datepicker-compact .semi-datepicker-day { width: 28px; height: 28px; } .semi-datepicker-compact .semi-datepicker-day-main { width: 24px; height: 24px; } .semi-datepicker-compact .semi-datepicker-day-inrange .semi-datepicker-day-main, .semi-datepicker-compact .semi-datepicker-day-inhover .semi-datepicker-day-main, .semi-datepicker-compact .semi-datepicker-day-inoffsetrange .semi-datepicker-day-main, .semi-datepicker-compact .semi-datepicker-day-hoverday .semi-datepicker-day-main, .semi-datepicker-compact .semi-datepicker-day-selectedrange-hover .semi-datepicker-day-main { width: 28px; } .semi-datepicker-compact .semi-datepicker-day-selected-start.semi-datepicker-day-selected-end .semi-datepicker-day-main, .semi-datepicker-compact .semi-datepicker-day-offsetrange-start.semi-datepicker-day-offsetrange-end .semi-datepicker-day-main { border-radius: 4px; } .semi-datepicker-compact .semi-datepicker-day-offsetrange-start .semi-datepicker-day-main { border-radius: 4px 0 0 4px; } .semi-datepicker-compact .semi-datepicker-day-offsetrange-end .semi-datepicker-day-main { border-radius: 0 4px 4px 0; } .semi-datepicker-compact .semi-datepicker-day-hoverday-beforerange .semi-datepicker-day-main { border-radius: 4px 0 0 4px; } .semi-datepicker-compact .semi-datepicker-day-hoverday-afterrange .semi-datepicker-day-main { border-radius: 0 4px 4px 0; } .semi-datepicker-compact .semi-datepicker-day-selected-start .semi-datepicker-day-main, .semi-datepicker-compact .semi-datepicker-day-offsetrange-start .semi-datepicker-day-main { width: 34px; margin-left: 2px; margin-right: 0; border-radius: 4px 0 0 4px; } .semi-datepicker-compact .semi-datepicker-day-selected-end .semi-datepicker-day-main, .semi-datepicker-compact .semi-datepicker-day-offsetrange-end .semi-datepicker-day-main { width: 34px; margin-right: 2px; margin-left: 0; border-radius: 0 4px 4px 0; } .semi-datepicker-compact .semi-datepicker-switch { box-sizing: border-box; height: 32px; } .semi-datepicker-compact .semi-datepicker-switch-date, .semi-datepicker-compact .semi-datepicker-switch-time { padding-top: 6px; padding-bottom: 6px; } .semi-datepicker-compact .semi-datepicker-switch-date { border-right: 1px solid var(--semi-color-border); } .semi-datepicker-compact .semi-datepicker-switch-text { padding-left: 0; } .semi-datepicker-compact .semi-datepicker-quick-control-header { padding: 16px 12px 0; font-weight: 600; } .semi-datepicker-compact .semi-datepicker-quick-control-left-content-wrapper, .semi-datepicker-compact .semi-datepicker-quick-control-right-content-wrapper { margin-top: 12px; } .semi-datepicker-compact .semi-datepicker-quick-control-left-content, .semi-datepicker-compact .semi-datepicker-quick-control-right-content { box-sizing: border-box; display: grid; align-content: flex-start; grid-gap: 8px; grid-template-columns: repeat(2, minmax(76.5px, 84px)); padding: 0 12px 12px; } .semi-datepicker-compact .semi-datepicker-quick-control-left-content-item, .semi-datepicker-compact .semi-datepicker-quick-control-right-content-item { max-width: 84px; } .semi-datepicker-compact .semi-datepicker-quick-control-left-content-item-ellipsis, .semi-datepicker-compact .semi-datepicker-quick-control-right-content-item-ellipsis { width: 68px; font-size: 12px; color: var(--semi-color-primary); } .semi-datepicker-compact .semi-datepicker-quick-control-top-content, .semi-datepicker-compact .semi-datepicker-quick-control-bottom-content { box-sizing: border-box; display: grid; grid-gap: 8px; grid-template-columns: repeat(3, minmax(54.94px, 59.94px)); align-content: flex-start; padding: 8px 10px; } .semi-datepicker-compact .semi-datepicker-quick-control-top-content-item, .semi-datepicker-compact .semi-datepicker-quick-control-bottom-content-item { max-width: 59.94px; } .semi-datepicker-compact .semi-datepicker-quick-control-top-content-item-ellipsis, .semi-datepicker-compact .semi-datepicker-quick-control-bottom-content-item-ellipsis { width: 43.94px; font-size: 12px; color: var(--semi-color-primary); } .semi-datepicker-compact .semi-datepicker-quick-control-top-range-content, .semi-datepicker-compact .semi-datepicker-quick-control-bottom-range-content { display: grid; grid-template-columns: repeat(5, minmax(73px, 76px)); grid-gap: 8px; align-content: flex-start; padding: 8px 10px; } .semi-datepicker-compact .semi-datepicker-quick-control-top-range-content-item, .semi-datepicker-compact .semi-datepicker-quick-control-bottom-range-content-item { max-width: 76px; } .semi-datepicker-compact .semi-datepicker-quick-control-top-range-content-item-ellipsis, .semi-datepicker-compact .semi-datepicker-quick-control-bottom-range-content-item-ellipsis { width: 60px; font-size: 12px; color: var(--semi-color-primary); } .semi-datepicker-compact .semi-datepicker-quick-control-top-month-content, .semi-datepicker-compact .semi-datepicker-quick-control-bottom-month-content { display: grid; grid-template-columns: repeat(2, minmax(61px, 68.5px)); grid-gap: 8px; align-content: flex-start; padding: 8px 10px; } .semi-datepicker-compact .semi-datepicker-quick-control-top-month-content-item, .semi-datepicker-compact .semi-datepicker-quick-control-bottom-month-content-item { max-width: 68.5px; } .semi-datepicker-compact .semi-datepicker-quick-control-top-month-content-item-ellipsis, .semi-datepicker-compact .semi-datepicker-quick-control-bottom-month-content-item-ellipsis { max-width: 52.5px; font-size: 12px; color: var(--semi-color-primary); } .semi-datepicker-compact .semi-datepicker-quick-control-month { max-width: 216px; } .semi-datepicker-compact .semi-datepicker-quick-control-month[x-insetinput=true] .semi-datepicker-quick-control-right-content-wrapper, .semi-datepicker-compact .semi-datepicker-quick-control-month[x-insetinput=true] .semi-datepicker-quick-control-left-content-wrapper { max-height: 254px; } .semi-datepicker-compact .semi-datepicker-quick-control-month .semi-datepicker-quick-control-right-content-wrapper, .semi-datepicker-compact .semi-datepicker-quick-control-month .semi-datepicker-quick-control-left-content-wrapper { max-height: 218px; } .semi-datepicker-compact .semi-datepicker-quick-control-date { max-width: 216px; } .semi-datepicker-compact .semi-datepicker-quick-control-date[x-insetinput=true] .semi-datepicker-quick-control-right-content-wrapper, .semi-datepicker-compact .semi-datepicker-quick-control-date[x-insetinput=true] .semi-datepicker-quick-control-left-content-wrapper { max-height: 248px; } .semi-datepicker-compact .semi-datepicker-quick-control-date .semi-datepicker-quick-control-right-content-wrapper, .semi-datepicker-compact .semi-datepicker-quick-control-date .semi-datepicker-quick-control-left-content-wrapper { max-height: 208px; } .semi-datepicker-compact .semi-datepicker-quick-control-dateTime { max-width: 216px; } .semi-datepicker-compact .semi-datepicker-quick-control-dateTime[x-insetinput=true] .semi-datepicker-quick-control-right-content-wrapper, .semi-datepicker-compact .semi-datepicker-quick-control-dateTime[x-insetinput=true] .semi-datepicker-quick-control-left-content-wrapper { max-height: 248px; } .semi-datepicker-compact .semi-datepicker-quick-control-dateTime .semi-datepicker-quick-control-right-content-wrapper, .semi-datepicker-compact .semi-datepicker-quick-control-dateTime .semi-datepicker-quick-control-left-content-wrapper { max-height: 240px; } .semi-datepicker-compact .semi-datepicker-quick-control-dateRange { max-width: 432px; } .semi-datepicker-compact .semi-datepicker-quick-control-dateRange[x-insetinput=true] .semi-datepicker-quick-control-right-content-wrapper, .semi-datepicker-compact .semi-datepicker-quick-control-dateRange[x-insetinput=true] .semi-datepicker-quick-control-left-content-wrapper { max-height: 248px; } .semi-datepicker-compact .semi-datepicker-quick-control-dateRange .semi-datepicker-quick-control-right-content-wrapper, .semi-datepicker-compact .semi-datepicker-quick-control-dateRange .semi-datepicker-quick-control-left-content-wrapper { max-height: 208px; } .semi-datepicker-compact .semi-datepicker-quick-control-dateTimeRange { max-width: 432px; } .semi-datepicker-compact .semi-datepicker-quick-control-dateTimeRange[x-insetinput=true] .semi-datepicker-quick-control-right-content-wrapper, .semi-datepicker-compact .semi-datepicker-quick-control-dateTimeRange[x-insetinput=true] .semi-datepicker-quick-control-left-content-wrapper { max-height: 248px; } .semi-datepicker-compact .semi-datepicker-quick-control-dateTimeRange .semi-datepicker-quick-control-right-content-wrapper, .semi-datepicker-compact .semi-datepicker-quick-control-dateTimeRange .semi-datepicker-quick-control-left-content-wrapper { max-height: 240px; } .semi-datepicker-compact .semi-datepicker-footer { padding-top: 10px; padding-right: 8px; padding-bottom: 10px; } .semi-datepicker-compact .semi-datepicker-inset-input-wrapper { column-gap: 4px; padding: 8px 8px; padding-bottom: 0; width: 216px; } .semi-datepicker-compact .semi-datepicker-inset-input-wrapper[x-type=dateRange], .semi-datepicker-compact .semi-datepicker-inset-input-wrapper[x-type=dateTimeRange] { width: 432px; padding-top: 0; } .semi-datepicker-compact .semi-datepicker-inset-input-wrapper[x-type=dateRange] .semi-input-wrapper, .semi-datepicker-compact .semi-datepicker-inset-input-wrapper[x-type=dateTimeRange] .semi-input-wrapper { margin-top: 8px; } .semi-datepicker-compact .semi-datepicker-inset-input-wrapper[x-type=month] { width: 195px; } .semi-datepicker-compact .semi-datepicker-inset-input-wrapper .semi-input-wrapper { height: 28px; box-sizing: border-box; } .semi-datepicker-compact .semi-datepicker-inset-input-wrapper .semi-input-wrapper .semi-input { font-size: 12px; line-height: 26px; height: 26px; vertical-align: top; } .semi-datepicker-compact .semi-datepicker-inset-input-separator { border-left: 1px solid var(--semi-color-border); transform: translateX(50%); height: auto; } .semi-popover-wrapper[x-placement^=top] .semi-datepicker .semi-datepicker-weeks, .semi-popover-wrapper[x-placement=leftTop] .semi-datepicker .semi-datepicker-weeks, .semi-popover-wrapper[x-placement=rightTop] .semi-datepicker .semi-datepicker-weeks, .semi-popover-wrapper[x-placement*=BottomOver] .semi-datepicker .semi-datepicker-weeks { min-height: 216px; } .semi-popover-wrapper[x-placement^=top] .semi-datepicker-compact .semi-datepicker-weeks, .semi-popover-wrapper[x-placement=leftTop] .semi-datepicker-compact .semi-datepicker-weeks, .semi-popover-wrapper[x-placement=rightTop] .semi-datepicker-compact .semi-datepicker-weeks, .semi-popover-wrapper[x-placement*=BottomOver] .semi-datepicker-compact .semi-datepicker-weeks { min-height: 168px; } .semi-datepicker-borderless:not(:focus-within):not(:hover) { background-color: transparent; border-color: transparent; } .semi-datepicker-borderless:not(:focus-within):not(:hover) .semi-input-suffix, .semi-datepicker-borderless:not(:focus-within):not(:hover) .semi-datepicker-range-input-suffix { opacity: 0; } .semi-datepicker-borderless:focus-within:not(:active) { background-color: transparent; } .semi-datepicker-borderless.semi-datepicker-range-input-error .semi-datepicker-range-input-wrapper-active { border-color: transparent; } .semi-datepicker-borderless.semi-datepicker-range-input-error:hover { background-color: var(--semi-color-danger-light-default); } .semi-datepicker-borderless.semi-datepicker-range-input-error:focus-within { background-color: var(--semi-color-danger-light-default); } .semi-datepicker-borderless.semi-datepicker-range-input-error:not(:focus-within) { border-width: 1px; border-color: var(--semi-color-danger); } .semi-datepicker-borderless.semi-datepicker-range-input-error:focus-within { border-width: 1px; border-color: var(--semi-color-danger); } .semi-datepicker-borderless.semi-datepicker-range-input-warning .semi-datepicker-range-input-wrapper-active { border-color: transparent; } .semi-datepicker-borderless.semi-datepicker-range-input-warning:hover { background-color: var(--semi-color-warning-light-default); } .semi-datepicker-borderless.semi-datepicker-range-input-warning:focus-within { background-color: var(--semi-color-warning-light-default); } .semi-datepicker-borderless.semi-datepicker-range-input-warning:not(:focus-within) { border-width: 1px; border-color: var(--semi-color-warning); } .semi-datepicker-borderless.semi-datepicker-range-input-warning:focus-within { border-width: 1px; border-color: var(--semi-color-warning); } .semi-rtl, .semi-portal-rtl { /* * 小尺寸 DatePicker */ } .semi-rtl .semi-datepicker, .semi-portal-rtl .semi-datepicker { direction: rtl; } .semi-rtl .semi-datepicker-footer, .semi-portal-rtl .semi-datepicker-footer { padding-right: 0; padding-left: 8px; text-align: left; } .semi-rtl .semi-datepicker-footer .semi-button:first-of-type, .semi-portal-rtl .semi-datepicker-footer .semi-button:first-of-type { margin-left: 0; margin-right: 0; } .semi-rtl .semi-datepicker-footer .semi-button:nth-of-type(2), .semi-portal-rtl .semi-datepicker-footer .semi-button:nth-of-type(2) { margin-right: 12px; margin-left: 0; } .semi-rtl .semi-datepicker-day-offsetrange-start .semi-datepicker-day-main, .semi-portal-rtl .semi-datepicker-day-offsetrange-start .semi-datepicker-day-main { border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0; } .semi-rtl .semi-datepicker-day-offsetrange-end .semi-datepicker-day-main, .semi-portal-rtl .semi-datepicker-day-offsetrange-end .semi-datepicker-day-main { border-radius: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small); } .semi-rtl .semi-datepicker-day-selected-start .semi-datepicker-day-main, .semi-rtl .semi-datepicker-day-hoverday-before-selectedrange .semi-datepicker-day-main, .semi-rtl .semi-datepicker-day-offsetrange-start .semi-datepicker-day-main, .semi-portal-rtl .semi-datepicker-day-selected-start .semi-datepicker-day-main, .semi-portal-rtl .semi-datepicker-day-hoverday-before-selectedrange .semi-datepicker-day-main, .semi-portal-rtl .semi-datepicker-day-offsetrange-start .semi-datepicker-day-main { margin-right: 2px; margin-left: auto; border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0; } .semi-rtl .semi-datepicker-day-selected-end .semi-datepicker-day-main, .semi-rtl .semi-datepicker-day-hoverday-after-selectedrange .semi-datepicker-day-main, .semi-rtl .semi-datepicker-day-offsetrange-end .semi-datepicker-day-main, .semi-portal-rtl .semi-datepicker-day-selected-end .semi-datepicker-day-main, .semi-portal-rtl .semi-datepicker-day-hoverday-after-selectedrange .semi-datepicker-day-main, .semi-portal-rtl .semi-datepicker-day-offsetrange-end .semi-datepicker-day-main { margin-left: 2px; margin-right: auto; border-radius: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small); } .semi-rtl .semi-datepicker-switch-text, .semi-portal-rtl .semi-datepicker-switch-text { padding-left: 0; padding-right: 8px; } .semi-rtl .semi-datepicker-navigation .semi-icon-chevron_left, .semi-rtl .semi-datepicker-navigation .semi-icon-chevron_right, .semi-rtl .semi-datepicker-navigation .semi-icon-double_chevron_left, .semi-rtl .semi-datepicker-navigation .semi-icon-double_chevron_right, .semi-rtl .semi-datepicker-yam .semi-icon-chevron_left, .semi-rtl .semi-datepicker-yam .semi-icon-chevron_right, .semi-rtl .semi-datepicker-yam .semi-icon-double_chevron_left, .semi-rtl .semi-datepicker-yam .semi-icon-double_chevron_right, .semi-portal-rtl .semi-datepicker-navigation .semi-icon-chevron_left, .semi-portal-rtl .semi-datepicker-navigation .semi-icon-chevron_right, .semi-portal-rtl .semi-datepicker-navigation .semi-icon-double_chevron_left, .semi-portal-rtl .semi-datepicker-navigation .semi-icon-double_chevron_right, .semi-portal-rtl .semi-datepicker-yam .semi-icon-chevron_left, .semi-portal-rtl .semi-datepicker-yam .semi-icon-chevron_right, .semi-portal-rtl .semi-datepicker-yam .semi-icon-double_chevron_left, .semi-portal-rtl .semi-datepicker-yam .semi-icon-double_chevron_right { transform: scaleX(-1); } .semi-rtl .semi-datepicker-range-input-prefix, .semi-portal-rtl .semi-datepicker-range-input-prefix { padding-left: 8px; padding-right: 12px; } .semi-rtl .semi-datepicker-range-input-suffix, .semi-portal-rtl .semi-datepicker-range-input-suffix { padding-left: 12px; padding-right: 8px; } .semi-rtl .semi-datepicker-range-input-suffix-hidden, .semi-portal-rtl .semi-datepicker-range-input-suffix-hidden { display: none; } .semi-rtl .semi-datepicker-range-input-clearbtn, .semi-portal-rtl .semi-datepicker-range-input-clearbtn { padding-left: 12px; padding-right: 8px; } .semi-rtl .semi-datepicker-compact .semi-datepicker-month-grid[x-type=dateRange] .semi-datepicker-month-grid-left, .semi-rtl .semi-datepicker-compact .semi-datepicker-month-grid[x-type=dateTimeRange] .semi-datepicker-month-grid-left, .semi-portal-rtl .semi-datepicker-compact .semi-datepicker-month-grid[x-type=dateRange] .semi-datepicker-month-grid-left, .semi-portal-rtl .semi-datepicker-compact .semi-datepicker-month-grid[x-type=dateTimeRange] .semi-datepicker-month-grid-left { border-left: 1px solid var(--semi-color-border); border-right: 0; } .semi-rtl .semi-datepicker-compact .semi-datepicker-month-grid .semi-scrolllist-item-wheel, .semi-portal-rtl .semi-datepicker-compact .semi-datepicker-month-grid .semi-scrolllist-item-wheel { border-left: 0; border-right: 0; } .semi-rtl .semi-datepicker-compact .semi-datepicker-day-offsetrange-start .semi-datepicker-day-main, .semi-portal-rtl .semi-datepicker-compact .semi-datepicker-day-offsetrange-start .semi-datepicker-day-main { border-radius: 0 4px 4px 0; } .semi-rtl .semi-datepicker-compact .semi-datepicker-day-offsetrange-end .semi-datepicker-day-main, .semi-portal-rtl .semi-datepicker-compact .semi-datepicker-day-offsetrange-end .semi-datepicker-day-main { border-radius: 4px 0 0 4px; } .semi-rtl .semi-datepicker-compact .semi-datepicker-day-selected-start .semi-datepicker-day-main, .semi-portal-rtl .semi-datepicker-compact .semi-datepicker-day-selected-start .semi-datepicker-day-main { margin-left: 0; margin-right: 2px; border-radius: 0 4px 4px 0; } .semi-rtl .semi-datepicker-compact .semi-datepicker-day-selected-end .semi-datepicker-day-main, .semi-portal-rtl .semi-datepicker-compact .semi-datepicker-day-selected-end .semi-datepicker-day-main { margin-right: 0; margin-left: 2px; border-radius: 4px 0 0 4px; } .semi-rtl .semi-datepicker-compact .semi-datepicker-switch-date, .semi-portal-rtl .semi-datepicker-compact .semi-datepicker-switch-date { border-left: 1px solid var(--semi-color-border); border-right: 0; } .semi-rtl .semi-datepicker-compact .semi-datepicker-switch-text, .semi-portal-rtl .semi-datepicker-compact .semi-datepicker-switch-text { padding-left: auto; padding-right: 0; } .semi-rtl .semi-datepicker-compact .semi-datepicker-footer, .semi-portal-rtl .semi-datepicker-compact .semi-datepicker-footer { padding-left: 8px; padding-right: auto; } .semi-rtl .semi-datepicker-compact .semi-datepicker-inset-input-separator, .semi-portal-rtl .semi-datepicker-compact .semi-datepicker-inset-input-separator { border-right: 1px solid var(--semi-color-border); border-left: 0; transform: translateX(-50%); } .semi-descriptions { line-height: 20px; } .semi-descriptions table, .semi-descriptions tr, .semi-descriptions th, .semi-descriptions td { margin: 0; padding: 0; border: 0; } .semi-descriptions th { padding-right: 24px; } .semi-descriptions .semi-descriptions-item { margin: 0; padding-bottom: 12px; text-align: left; vertical-align: top; } .semi-descriptions-key { font-weight: normal; font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; min-height: 14px; white-space: nowrap; color: var(--semi-color-text-2); } .semi-descriptions-value { font-weight: normal; font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; color: var(--semi-color-text-0); } .semi-descriptions-center .semi-descriptions-item-th { text-align: right; } .semi-descriptions-center .semi-descriptions-item-td { text-align: left; } .semi-descriptions-left .semi-descriptions-item-th, .semi-descriptions-left .semi-descriptions-item-td { text-align: left; } .semi-descriptions-justify .semi-descriptions-item-th { text-align: left; } .semi-descriptions-justify .semi-descriptions-item-td { text-align: right; } .semi-descriptions-plain .semi-descriptions-key, .semi-descriptions-plain .semi-descriptions-value { display: inline-block; } .semi-descriptions-plain .semi-descriptions-value { padding-left: 8px; } .semi-descriptions-plain .semi-descriptions-value .semi-tag { vertical-align: middle; } .semi-descriptions-double tbody { display: flex; flex-wrap: wrap; } .semi-descriptions-double tr { display: inline-flex; flex-direction: column; } .semi-descriptions-double .semi-descriptions-item { padding: 0; flex: 1; } .semi-descriptions-double .semi-descriptions-value { font-weight: 600; } .semi-descriptions-double-small .semi-descriptions-item { padding-right: 48px; } .semi-descriptions-double-small .semi-descriptions-key { font-size: 12px; line-height: 16px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; padding-bottom: 0; font-size: 12px; } .semi-descriptions-double-small .semi-descriptions-value { font-size: 16px; line-height: 22px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; } .semi-descriptions-double-medium .semi-descriptions-item { padding-right: 60px; } .semi-descriptions-double-medium .semi-descriptions-key { padding-bottom: 4px; font-size: 14px; } .semi-descriptions-double-medium .semi-descriptions-value { font-size: 20px; line-height: 28px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 20px; } .semi-descriptions-double-large .semi-descriptions-item { padding-right: 80px; } .semi-descriptions-double-large .semi-descriptions-key { padding-bottom: 4px; font-size: 14px; } .semi-descriptions-double-large .semi-descriptions-value { font-size: 28px; line-height: 40px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 28px; } .semi-rtl .semi-descriptions, .semi-portal-rtl .semi-descriptions { direction: rtl; } .semi-rtl .semi-descriptions th, .semi-portal-rtl .semi-descriptions th { direction: rtl; padding-right: 0; padding-left: 24px; } .semi-rtl .semi-descriptions .semi-descriptions-item, .semi-portal-rtl .semi-descriptions .semi-descriptions-item { text-align: right; } .semi-rtl .semi-descriptions-center .semi-descriptions-item-th, .semi-portal-rtl .semi-descriptions-center .semi-descriptions-item-th { text-align: left; } .semi-rtl .semi-descriptions-center .semi-descriptions-item-td, .semi-portal-rtl .semi-descriptions-center .semi-descriptions-item-td { text-align: right; } .semi-rtl .semi-descriptions-left .semi-descriptions-item-th, .semi-rtl .semi-descriptions-left .semi-descriptions-item-td, .semi-portal-rtl .semi-descriptions-left .semi-descriptions-item-th, .semi-portal-rtl .semi-descriptions-left .semi-descriptions-item-td { text-align: left; } .semi-rtl .semi-descriptions-justify .semi-descriptions-item-th, .semi-portal-rtl .semi-descriptions-justify .semi-descriptions-item-th { text-align: right; } .semi-rtl .semi-descriptions-justify .semi-descriptions-item-td, .semi-portal-rtl .semi-descriptions-justify .semi-descriptions-item-td { text-align: left; } .semi-rtl .semi-descriptions-plain .semi-descriptions-key, .semi-rtl .semi-descriptions-plain .semi-descriptions-value, .semi-portal-rtl .semi-descriptions-plain .semi-descriptions-key, .semi-portal-rtl .semi-descriptions-plain .semi-descriptions-value { display: inline-block; } .semi-rtl .semi-descriptions-plain .semi-descriptions-value, .semi-portal-rtl .semi-descriptions-plain .semi-descriptions-value { padding-left: 0; padding-right: 8px; } .semi-rtl .semi-descriptions-plain .semi-descriptions-value .semi-tag, .semi-portal-rtl .semi-descriptions-plain .semi-descriptions-value .semi-tag { vertical-align: middle; } .semi-rtl .semi-descriptions-double, .semi-portal-rtl .semi-descriptions-double { direction: rtl; } .semi-rtl .semi-descriptions-double .semi-descriptions-item, .semi-portal-rtl .semi-descriptions-double .semi-descriptions-item { text-align: right; } .semi-rtl .semi-descriptions-double-small .semi-descriptions-item, .semi-portal-rtl .semi-descriptions-double-small .semi-descriptions-item { padding-right: 0; padding-left: 48px; } .semi-rtl .semi-descriptions-double-medium .semi-descriptions-item, .semi-portal-rtl .semi-descriptions-double-medium .semi-descriptions-item { padding-right: 0; padding-left: 60px; } .semi-rtl .semi-descriptions-double-large .semi-descriptions-item, .semi-portal-rtl .semi-descriptions-double-large .semi-descriptions-item { padding-right: 0; padding-left: 80px; } .semi-divider { margin: 1px 0px 1px 0px; border-bottom: 1px solid var(--semi-color-border); color: var(--semi-color-text-0); box-sizing: border-box; } .semi-divider-dashed { border-bottom-style: dashed; } .semi-divider-horizontal { width: 100%; display: flex; } .semi-divider-vertical { border-bottom: 0; display: inline-block; margin: 0px 1px 0px 1px; border-left: 1px solid var(--semi-color-border); height: 20px; vertical-align: middle; } .semi-divider-with-text { display: flex; border-bottom: 0; white-space: nowrap; align-items: center; } .semi-divider-with-text .semi-divider_inner-text { font-weight: 600; padding: 0px 8px 0px 8px; display: inline-block; } .semi-divider-with-text::before, .semi-divider-with-text::after { content: ""; width: 50%; border-bottom: 1px solid var(--semi-color-border); } .semi-divider-with-text-left::before { width: 40px; } .semi-divider-with-text-left::after { flex: 1; } .semi-divider-with-text-right::before { flex: 1; } .semi-divider-with-text-right::after { width: 40px; } .semi-divider-dashed::before, .semi-divider-dashed::after { border-bottom: 1px dashed var(--semi-color-border); } .semi-divider-vertical.semi-divider-dashed { border-left: 1px dashed var(--semi-color-border); } .semi-dropdown { font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; } .semi-dropdown-wrapper { box-shadow: var(--semi-shadow-elevated); position: relative; z-index: 1050; border-radius: var(--semi-border-radius-medium); background: var(--semi-color-bg-3); opacity: 0; } .semi-dropdown-wrapper-show { opacity: 1; } .semi-dropdown-trigger { display: inline-block; } .semi-dropdown-menu { list-style: none; padding: 4px 0; margin: 0; } .semi-dropdown-title { color: var(--semi-color-text-2); padding-top: 8px; padding-bottom: 4px; padding-left: 16px; padding-right: 16px; font-size: 12px; line-height: 16px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; cursor: default; } .semi-dropdown-title-withTick { padding-left: 31px; } .semi-dropdown-item { padding: 8px 16px; color: var(--semi-color-text-0); max-width: 280px; display: flex; align-items: center; transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeOut) 0ms; } .semi-dropdown-item-hover { background-color: var(--semi-color-fill-0); } .semi-dropdown-item:not(.semi-dropdown-item-active):hover { background-color: var(--semi-color-fill-0); cursor: pointer; } .semi-dropdown-item:not(.semi-dropdown-item-active):active { background-color: var(--semi-color-fill-1); } .semi-dropdown-item:focus-visible { background-color: var(--semi-color-fill-0); outline: 0; } .semi-dropdown-item-icon { display: inline-flex; align-items: center; margin-right: 8px; } .semi-dropdown-item-danger { color: var(--semi-color-danger); } .semi-dropdown-item-secondary { color: var(--semi-color-secondary); } .semi-dropdown-item-warning { color: var(--semi-color-warning); } .semi-dropdown-item-tertiary { color: var(--semi-color-tertiary); } .semi-dropdown-item-primary { color: var(--semi-color-primary); } .semi-dropdown-item-withTick { padding-left: 12px; } .semi-dropdown-item > .semi-icon { flex-shrink: 0; margin-right: 9px; font-size: 12px; } .semi-dropdown-item-active { font-weight: 600; } .semi-dropdown-item.semi-dropdown-item-disabled { color: var(--semi-color-disabled-text); cursor: not-allowed; } .semi-dropdown-item.semi-dropdown-item-disabled:hover, .semi-dropdown-item.semi-dropdown-item-disabled:active { cursor: not-allowed; background-color: transparent; } .semi-dropdown-divider { display: block; height: 1px; width: 100%; min-width: 100%; clear: both; background: var(--semi-color-border); margin: 4px 0; } .semi-rtl .semi-dropdown-wrapper, .semi-portal-rtl .semi-dropdown-wrapper { direction: rtl; } .semi-rtl .semi-dropdown-title-withTick, .semi-portal-rtl .semi-dropdown-title-withTick { padding-left: 0; padding-right: 31px; } .semi-rtl .semi-dropdown-item-withTick, .semi-portal-rtl .semi-dropdown-item-withTick { padding-left: auto; padding-right: 12px; } .semi-rtl .semi-dropdown-item > .semi-icon, .semi-portal-rtl .semi-dropdown-item > .semi-icon { margin-right: 0; margin-left: 9px; } .semi-empty { display: flex; } .semi-empty-image { display: flex; justify-content: center; user-select: none; -webkit-user-drag: none; pointer-events: none; } .semi-empty-vertical { align-items: center; flex-direction: column; } .semi-empty-vertical .semi-empty-content { margin-top: 24px; } .semi-empty-vertical .semi-empty-title, .semi-empty-vertical .semi-empty-description { text-align: center; } .semi-empty-horizontal .semi-empty-content { margin-left: 32px; } .semi-empty-title.semi-typography { display: block; font-weight: 600; } .semi-empty-title + .semi-empty-description { margin-top: 16px; } .semi-empty-description { color: var(--semi-color-text-1); } .semi-empty-footer { margin-top: 24px; } .semi-rtl .semi-empty, .semi-portal-rtl .semi-empty { direction: rtl; } .semi-rtl .semi-empty-horizontal .semi-empty-content, .semi-portal-rtl .semi-empty-horizontal .semi-empty-content { margin-left: auto; margin-right: 32px; } .semi-form .semi-form-field { box-sizing: border-box; } .semi-form-horizontal { display: flex; flex-wrap: wrap; } .semi-form-horizontal .semi-form-field { margin-left: 0; padding-right: 16px; } .semi-form-horizontal .semi-form-field:last-child { margin-right: 16px; } .semi-form-horizontal .semi-form-field-group { padding-right: 16px; } .semi-form-horizontal .semi-row { display: block; } .semi-form-vertical .semi-form-field { margin: 0; padding-top: 12px; padding-bottom: 12px; overflow: hidden; } .semi-form-vertical .semi-form-field .semi-form-col-right { display: flex; justify-content: flex-end; } .semi-form-vertical .semi-form-field .semi-form-col-left { display: flex; justify-content: flex-start; } .semi-form-vertical .semi-form-field-group .semi-form-col-right { display: flex; justify-content: flex-end; } .semi-form-vertical .semi-form-field-group .semi-form-col-left { display: flex; justify-content: flex-start; } .semi-form-field-label { box-sizing: border-box; font-weight: 600; color: var(--semi-color-text-0); margin-bottom: 4px; margin-top: 0px; padding-right: 16px; display: inline-block; vertical-align: middle; font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; flex-shrink: 0; } .semi-form-field-label-disabled { color: var(--semi-color-disabled-text); } .semi-form-field-label-with-extra .semi-form-field-label-text { display: inline-block; } .semi-form-field-label-with-extra .semi-form-field-label-extra { display: flex; align-items: center; margin-left: 4px; } .semi-form-field-label-required .semi-form-field-label-text::after { content: "*"; margin-left: 4px; color: var(--semi-color-danger); font-weight: 600; } .semi-form-field-label-required-disabled { color: var(--semi-color-danger); } .semi-form-field-label-optional-text { color: var(--semi-color-tertiary); } .semi-form-field-label-left { text-align: left; } .semi-form-field-label-right { text-align: right; } .semi-form-field-error-message, .semi-form-field-help-text { font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; display: flex; align-items: center; margin-top: 4px; } .semi-form-field-error-message .semi-icon-alert_triangle, .semi-form-field-help-text .semi-icon-alert_triangle { color: var(--semi-color-warning); } .semi-form-field-error-message { color: var(--semi-color-danger); } .semi-form-field[x-label-pos=top] .semi-form-field-label { display: block; } .semi-form-field[x-label-pos=top] .semi-checkboxGroup, .semi-form-field[x-label-pos=top] .semi-radioGroup { padding-top: 4px; padding-bottom: 4px; } .semi-form-field[x-label-pos=top] .semi-form-field-label-with-extra { display: flex; align-items: center; } .semi-form-field[x-label-pos=left] { display: flex; } .semi-form-field[x-label-pos=left] .semi-form-field-label { margin-bottom: 0; margin-right: 0; padding-top: 6px; padding-bottom: 6px; } .semi-form-field[x-label-pos=left] .semi-form-field-label-with-extra { display: flex; align-items: center; } .semi-form-field[x-label-pos=left] .semi-checkboxGroup, .semi-form-field[x-label-pos=left] .semi-radioGroup { padding-top: 6px; padding-bottom: 6px; } .semi-form-field[x-label-pos=left] .semi-radioGroup-buttonRadio { padding-top: 0; padding-bottom: 0; } .semi-form-field[x-label-pos=left] .semi-switch, .semi-form-field[x-label-pos=left] .semi-rating { vertical-align: middle; margin-top: 4px; margin-bottom: 4px; } .semi-form-field[x-extra-pos=middle] .semi-form-field-extra { margin-top: 4px; margin-bottom: 4px; } .semi-form-field[x-extra-pos=bottom] .semi-form-field-extra { margin-top: 4px; } .semi-form-field-main { width: 100%; } .semi-form-field-validate-status-icon { margin-right: 4px; flex-shrink: 0; align-self: flex-start; position: relative; top: 2px; } .semi-form-field-extra { color: var(--semi-color-tertiary); } .semi-form-field-extra-string { color: var(--semi-color-tertiary); font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; } .semi-form-vertical .semi-form-field-group { margin-top: 0; margin-bottom: 0; padding-top: 12px; padding-bottom: 12px; overflow: hidden; } .semi-form-vertical .semi-form-field-group .semi-form-field { margin-top: 0; margin-bottom: 0; } .semi-form-field-group[x-label-pos=left] { display: flex; } .semi-form-field-group[x-label-pos=left] .semi-form-field-label { margin-bottom: 0; margin-right: 0; padding-top: 6px; padding-bottom: 6px; } .semi-form-section { width: 100%; margin-top: 28px; } .semi-form-section-text { margin-block-start: 0; margin-block-end: 0; font-size: 18px; line-height: 24px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 600; width: 100%; padding-bottom: 8px; padding-top: 0px; border-bottom: 1px solid var(--semi-color-border); margin-bottom: 4px; margin-top: 0px; color: var(--semi-color-text-0); } .semi-form-section:nth-of-type(1) { margin-top: 0; } .semi-rtl .semi-form, .semi-portal-rtl .semi-form { direction: rtl; } .semi-rtl .semi-form-horizontal .semi-form-field, .semi-portal-rtl .semi-form-horizontal .semi-form-field { margin-left: 0; margin-right: 0; padding-right: 0; padding-left: 16px; } .semi-rtl .semi-form-horizontal .semi-form-field:last-child, .semi-portal-rtl .semi-form-horizontal .semi-form-field:last-child { margin-left: 16px; } .semi-rtl .semi-form-horizontal .semi-form-field-group, .semi-portal-rtl .semi-form-horizontal .semi-form-field-group { padding-right: 0; padding-left: 16px; } .semi-rtl .semi-form-field-label, .semi-portal-rtl .semi-form-field-label { padding-right: 0; padding-left: 16px; } .semi-rtl .semi-form-field-label-with-extra .semi-form-field-label-extra, .semi-portal-rtl .semi-form-field-label-with-extra .semi-form-field-label-extra { margin-left: 0; margin-right: 4px; } .semi-rtl .semi-form-field-label-required .semi-form-field-label-text::after, .semi-portal-rtl .semi-form-field-label-required .semi-form-field-label-text::after { content: "*"; margin-left: 0; margin-right: 4px; } .semi-rtl .semi-form-field-label-left, .semi-portal-rtl .semi-form-field-label-left { text-align: right; } .semi-rtl .semi-form-field-label-right, .semi-portal-rtl .semi-form-field-label-right { text-align: left; } .semi-rtl .semi-form-field, .semi-portal-rtl .semi-form-field { direction: rtl; } .semi-rtl .semi-form-field[x-label-pos=left] .semi-form-field-label, .semi-portal-rtl .semi-form-field[x-label-pos=left] .semi-form-field-label { margin-right: 0; margin-left: 0; } .semi-rtl .semi-form-field-validate-status-icon, .semi-portal-rtl .semi-form-field-validate-status-icon { margin-right: 0; margin-left: 4px; } .semi-rtl .semi-form-section, .semi-portal-rtl .semi-form-section { direction: rtl; } .semi-row { position: relative; height: auto; margin-right: 0; margin-left: 0; zoom: 1; display: block; box-sizing: border-box; } .semi-row::before, .semi-row::after { display: table; content: ""; } .semi-row::after { clear: both; } .semi-row-flex { display: flex; flex-flow: row wrap; } .semi-row-flex::before, .semi-row-flex::after { display: flex; } .semi-col-0, .semi-col-xs-0, .semi-col-sm-0, .semi-col-md-0, .semi-col-lg-0, .semi-col-xl-0, .semi-col-xxl-0 { display: none; } .semi-row-flex-start { justify-content: flex-start; } .semi-row-flex-center { justify-content: center; } .semi-row-flex-end { justify-content: flex-end; } .semi-row-flex-space-between { justify-content: space-between; } .semi-row-flex-space-around { justify-content: space-around; } .semi-row-flex-top { align-items: flex-start; } .semi-row-flex-middle { align-items: center; } .semi-row-flex-bottom { align-items: flex-end; } .semi-col { position: relative; } .semi-col-1, .semi-col-xs-1, .semi-col-sm-1, .semi-col-md-1, .semi-col-lg-1 { position: relative; min-height: 1px; padding-right: 0; padding-left: 0; } .semi-col-2, .semi-col-xs-2, .semi-col-sm-2, .semi-col-md-2, .semi-col-lg-2 { position: relative; min-height: 1px; padding-right: 0; padding-left: 0; } .semi-col-3, .semi-col-xs-3, .semi-col-sm-3, .semi-col-md-3, .semi-col-lg-3 { position: relative; min-height: 1px; padding-right: 0; padding-left: 0; } .semi-col-4, .semi-col-xs-4, .semi-col-sm-4, .semi-col-md-4, .semi-col-lg-4 { position: relative; min-height: 1px; padding-right: 0; padding-left: 0; } .semi-col-5, .semi-col-xs-5, .semi-col-sm-5, .semi-col-md-5, .semi-col-lg-5 { position: relative; min-height: 1px; padding-right: 0; padding-left: 0; } .semi-col-6, .semi-col-xs-6, .semi-col-sm-6, .semi-col-md-6, .semi-col-lg-6 { position: relative; min-height: 1px; padding-right: 0; padding-left: 0; } .semi-col-7, .semi-col-xs-7, .semi-col-sm-7, .semi-col-md-7, .semi-col-lg-7 { position: relative; min-height: 1px; padding-right: 0; padding-left: 0; } .semi-col-8, .semi-col-xs-8, .semi-col-sm-8, .semi-col-md-8, .semi-col-lg-8 { position: relative; min-height: 1px; padding-right: 0; padding-left: 0; } .semi-col-9, .semi-col-xs-9, .semi-col-sm-9, .semi-col-md-9, .semi-col-lg-9 { position: relative; min-height: 1px; padding-right: 0; padding-left: 0; } .semi-col-10, .semi-col-xs-10, .semi-col-sm-10, .semi-col-md-10, .semi-col-lg-10 { position: relative; min-height: 1px; padding-right: 0; padding-left: 0; } .semi-col-11, .semi-col-xs-11, .semi-col-sm-11, .semi-col-md-11, .semi-col-lg-11 { position: relative; min-height: 1px; padding-right: 0; padding-left: 0; } .semi-col-12, .semi-col-xs-12, .semi-col-sm-12, .semi-col-md-12, .semi-col-lg-12 { position: relative; min-height: 1px; padding-right: 0; padding-left: 0; } .semi-col-13, .semi-col-xs-13, .semi-col-sm-13, .semi-col-md-13, .semi-col-lg-13 { position: relative; min-height: 1px; padding-right: 0; padding-left: 0; } .semi-col-14, .semi-col-xs-14, .semi-col-sm-14, .semi-col-md-14, .semi-col-lg-14 { position: relative; min-height: 1px; padding-right: 0; padding-left: 0; } .semi-col-15, .semi-col-xs-15, .semi-col-sm-15, .semi-col-md-15, .semi-col-lg-15 { position: relative; min-height: 1px; padding-right: 0; padding-left: 0; } .semi-col-16, .semi-col-xs-16, .semi-col-sm-16, .semi-col-md-16, .semi-col-lg-16 { position: relative; min-height: 1px; padding-right: 0; padding-left: 0; } .semi-col-17, .semi-col-xs-17, .semi-col-sm-17, .semi-col-md-17, .semi-col-lg-17 { position: relative; min-height: 1px; padding-right: 0; padding-left: 0; } .semi-col-18, .semi-col-xs-18, .semi-col-sm-18, .semi-col-md-18, .semi-col-lg-18 { position: relative; min-height: 1px; padding-right: 0; padding-left: 0; } .semi-col-19, .semi-col-xs-19, .semi-col-sm-19, .semi-col-md-19, .semi-col-lg-19 { position: relative; min-height: 1px; padding-right: 0; padding-left: 0; } .semi-col-20, .semi-col-xs-20, .semi-col-sm-20, .semi-col-md-20, .semi-col-lg-20 { position: relative; min-height: 1px; padding-right: 0; padding-left: 0; } .semi-col-21, .semi-col-xs-21, .semi-col-sm-21, .semi-col-md-21, .semi-col-lg-21 { position: relative; min-height: 1px; padding-right: 0; padding-left: 0; } .semi-col-22, .semi-col-xs-22, .semi-col-sm-22, .semi-col-md-22, .semi-col-lg-22 { position: relative; min-height: 1px; padding-right: 0; padding-left: 0; } .semi-col-23, .semi-col-xs-23, .semi-col-sm-23, .semi-col-md-23, .semi-col-lg-23 { position: relative; min-height: 1px; padding-right: 0; padding-left: 0; } .semi-col-24, .semi-col-xs-24, .semi-col-sm-24, .semi-col-md-24, .semi-col-lg-24 { position: relative; min-height: 1px; padding-right: 0; padding-left: 0; } .semi-col-1 { flex: 0 0 auto; float: left; } .semi-col-2 { flex: 0 0 auto; float: left; } .semi-col-3 { flex: 0 0 auto; float: left; } .semi-col-4 { flex: 0 0 auto; float: left; } .semi-col-5 { flex: 0 0 auto; float: left; } .semi-col-6 { flex: 0 0 auto; float: left; } .semi-col-7 { flex: 0 0 auto; float: left; } .semi-col-8 { flex: 0 0 auto; float: left; } .semi-col-9 { flex: 0 0 auto; float: left; } .semi-col-10 { flex: 0 0 auto; float: left; } .semi-col-11 { flex: 0 0 auto; float: left; } .semi-col-12 { flex: 0 0 auto; float: left; } .semi-col-13 { flex: 0 0 auto; float: left; } .semi-col-14 { flex: 0 0 auto; float: left; } .semi-col-15 { flex: 0 0 auto; float: left; } .semi-col-16 { flex: 0 0 auto; float: left; } .semi-col-17 { flex: 0 0 auto; float: left; } .semi-col-18 { flex: 0 0 auto; float: left; } .semi-col-19 { flex: 0 0 auto; float: left; } .semi-col-20 { flex: 0 0 auto; float: left; } .semi-col-21 { flex: 0 0 auto; float: left; } .semi-col-22 { flex: 0 0 auto; float: left; } .semi-col-23 { flex: 0 0 auto; float: left; } .semi-col-24 { flex: 0 0 auto; float: left; } .semi-col-1 { display: block; box-sizing: border-box; width: 4.1666666667%; } .semi-col-push-1 { left: 4.1666666667%; } .semi-col-pull-1 { right: 4.1666666667%; } .semi-col-offset-1 { margin-left: 4.1666666667%; } .semi-col-order-1 { order: 1; } .semi-col-2 { display: block; box-sizing: border-box; width: 8.3333333333%; } .semi-col-push-2 { left: 8.3333333333%; } .semi-col-pull-2 { right: 8.3333333333%; } .semi-col-offset-2 { margin-left: 8.3333333333%; } .semi-col-order-2 { order: 2; } .semi-col-3 { display: block; box-sizing: border-box; width: 12.5%; } .semi-col-push-3 { left: 12.5%; } .semi-col-pull-3 { right: 12.5%; } .semi-col-offset-3 { margin-left: 12.5%; } .semi-col-order-3 { order: 3; } .semi-col-4 { display: block; box-sizing: border-box; width: 16.6666666667%; } .semi-col-push-4 { left: 16.6666666667%; } .semi-col-pull-4 { right: 16.6666666667%; } .semi-col-offset-4 { margin-left: 16.6666666667%; } .semi-col-order-4 { order: 4; } .semi-col-5 { display: block; box-sizing: border-box; width: 20.8333333333%; } .semi-col-push-5 { left: 20.8333333333%; } .semi-col-pull-5 { right: 20.8333333333%; } .semi-col-offset-5 { margin-left: 20.8333333333%; } .semi-col-order-5 { order: 5; } .semi-col-6 { display: block; box-sizing: border-box; width: 25%; } .semi-col-push-6 { left: 25%; } .semi-col-pull-6 { right: 25%; } .semi-col-offset-6 { margin-left: 25%; } .semi-col-order-6 { order: 6; } .semi-col-7 { display: block; box-sizing: border-box; width: 29.1666666667%; } .semi-col-push-7 { left: 29.1666666667%; } .semi-col-pull-7 { right: 29.1666666667%; } .semi-col-offset-7 { margin-left: 29.1666666667%; } .semi-col-order-7 { order: 7; } .semi-col-8 { display: block; box-sizing: border-box; width: 33.3333333333%; } .semi-col-push-8 { left: 33.3333333333%; } .semi-col-pull-8 { right: 33.3333333333%; } .semi-col-offset-8 { margin-left: 33.3333333333%; } .semi-col-order-8 { order: 8; } .semi-col-9 { display: block; box-sizing: border-box; width: 37.5%; } .semi-col-push-9 { left: 37.5%; } .semi-col-pull-9 { right: 37.5%; } .semi-col-offset-9 { margin-left: 37.5%; } .semi-col-order-9 { order: 9; } .semi-col-10 { display: block; box-sizing: border-box; width: 41.6666666667%; } .semi-col-push-10 { left: 41.6666666667%; } .semi-col-pull-10 { right: 41.6666666667%; } .semi-col-offset-10 { margin-left: 41.6666666667%; } .semi-col-order-10 { order: 10; } .semi-col-11 { display: block; box-sizing: border-box; width: 45.8333333333%; } .semi-col-push-11 { left: 45.8333333333%; } .semi-col-pull-11 { right: 45.8333333333%; } .semi-col-offset-11 { margin-left: 45.8333333333%; } .semi-col-order-11 { order: 11; } .semi-col-12 { display: block; box-sizing: border-box; width: 50%; } .semi-col-push-12 { left: 50%; } .semi-col-pull-12 { right: 50%; } .semi-col-offset-12 { margin-left: 50%; } .semi-col-order-12 { order: 12; } .semi-col-13 { display: block; box-sizing: border-box; width: 54.1666666667%; } .semi-col-push-13 { left: 54.1666666667%; } .semi-col-pull-13 { right: 54.1666666667%; } .semi-col-offset-13 { margin-left: 54.1666666667%; } .semi-col-order-13 { order: 13; } .semi-col-14 { display: block; box-sizing: border-box; width: 58.3333333333%; } .semi-col-push-14 { left: 58.3333333333%; } .semi-col-pull-14 { right: 58.3333333333%; } .semi-col-offset-14 { margin-left: 58.3333333333%; } .semi-col-order-14 { order: 14; } .semi-col-15 { display: block; box-sizing: border-box; width: 62.5%; } .semi-col-push-15 { left: 62.5%; } .semi-col-pull-15 { right: 62.5%; } .semi-col-offset-15 { margin-left: 62.5%; } .semi-col-order-15 { order: 15; } .semi-col-16 { display: block; box-sizing: border-box; width: 66.6666666667%; } .semi-col-push-16 { left: 66.6666666667%; } .semi-col-pull-16 { right: 66.6666666667%; } .semi-col-offset-16 { margin-left: 66.6666666667%; } .semi-col-order-16 { order: 16; } .semi-col-17 { display: block; box-sizing: border-box; width: 70.8333333333%; } .semi-col-push-17 { left: 70.8333333333%; } .semi-col-pull-17 { right: 70.8333333333%; } .semi-col-offset-17 { margin-left: 70.8333333333%; } .semi-col-order-17 { order: 17; } .semi-col-18 { display: block; box-sizing: border-box; width: 75%; } .semi-col-push-18 { left: 75%; } .semi-col-pull-18 { right: 75%; } .semi-col-offset-18 { margin-left: 75%; } .semi-col-order-18 { order: 18; } .semi-col-19 { display: block; box-sizing: border-box; width: 79.1666666667%; } .semi-col-push-19 { left: 79.1666666667%; } .semi-col-pull-19 { right: 79.1666666667%; } .semi-col-offset-19 { margin-left: 79.1666666667%; } .semi-col-order-19 { order: 19; } .semi-col-20 { display: block; box-sizing: border-box; width: 83.3333333333%; } .semi-col-push-20 { left: 83.3333333333%; } .semi-col-pull-20 { right: 83.3333333333%; } .semi-col-offset-20 { margin-left: 83.3333333333%; } .semi-col-order-20 { order: 20; } .semi-col-21 { display: block; box-sizing: border-box; width: 87.5%; } .semi-col-push-21 { left: 87.5%; } .semi-col-pull-21 { right: 87.5%; } .semi-col-offset-21 { margin-left: 87.5%; } .semi-col-order-21 { order: 21; } .semi-col-22 { display: block; box-sizing: border-box; width: 91.6666666667%; } .semi-col-push-22 { left: 91.6666666667%; } .semi-col-pull-22 { right: 91.6666666667%; } .semi-col-offset-22 { margin-left: 91.6666666667%; } .semi-col-order-22 { order: 22; } .semi-col-23 { display: block; box-sizing: border-box; width: 95.8333333333%; } .semi-col-push-23 { left: 95.8333333333%; } .semi-col-pull-23 { right: 95.8333333333%; } .semi-col-offset-23 { margin-left: 95.8333333333%; } .semi-col-order-23 { order: 23; } .semi-col-24 { display: block; box-sizing: border-box; width: 100%; } .semi-col-push-24 { left: 100%; } .semi-col-pull-24 { right: 100%; } .semi-col-offset-24 { margin-left: 100%; } .semi-col-order-24 { order: 24; } .semi-rtl .semi-col-1 { float: right; } .semi-rtl .semi-col-2 { float: right; } .semi-rtl .semi-col-3 { float: right; } .semi-rtl .semi-col-4 { float: right; } .semi-rtl .semi-col-5 { float: right; } .semi-rtl .semi-col-6 { float: right; } .semi-rtl .semi-col-7 { float: right; } .semi-rtl .semi-col-8 { float: right; } .semi-rtl .semi-col-9 { float: right; } .semi-rtl .semi-col-10 { float: right; } .semi-rtl .semi-col-11 { float: right; } .semi-rtl .semi-col-12 { float: right; } .semi-rtl .semi-col-13 { float: right; } .semi-rtl .semi-col-14 { float: right; } .semi-rtl .semi-col-15 { float: right; } .semi-rtl .semi-col-16 { float: right; } .semi-rtl .semi-col-17 { float: right; } .semi-rtl .semi-col-18 { float: right; } .semi-rtl .semi-col-19 { float: right; } .semi-rtl .semi-col-20 { float: right; } .semi-rtl .semi-col-21 { float: right; } .semi-rtl .semi-col-22 { float: right; } .semi-rtl .semi-col-23 { float: right; } .semi-rtl .semi-col-24 { float: right; } .semi-rtl .semi-col-offset-1 { margin-left: auto; margin-right: 4.1666666667%; } .semi-rtl .semi-col-offset-2 { margin-left: auto; margin-right: 8.3333333333%; } .semi-rtl .semi-col-offset-3 { margin-left: auto; margin-right: 12.5%; } .semi-rtl .semi-col-offset-4 { margin-left: auto; margin-right: 16.6666666667%; } .semi-rtl .semi-col-offset-5 { margin-left: auto; margin-right: 20.8333333333%; } .semi-rtl .semi-col-offset-6 { margin-left: auto; margin-right: 25%; } .semi-rtl .semi-col-offset-7 { margin-left: auto; margin-right: 29.1666666667%; } .semi-rtl .semi-col-offset-8 { margin-left: auto; margin-right: 33.3333333333%; } .semi-rtl .semi-col-offset-9 { margin-left: auto; margin-right: 37.5%; } .semi-rtl .semi-col-offset-10 { margin-left: auto; margin-right: 41.6666666667%; } .semi-rtl .semi-col-offset-11 { margin-left: auto; margin-right: 45.8333333333%; } .semi-rtl .semi-col-offset-12 { margin-left: auto; margin-right: 50%; } .semi-rtl .semi-col-offset-13 { margin-left: auto; margin-right: 54.1666666667%; } .semi-rtl .semi-col-offset-14 { margin-left: auto; margin-right: 58.3333333333%; } .semi-rtl .semi-col-offset-15 { margin-left: auto; margin-right: 62.5%; } .semi-rtl .semi-col-offset-16 { margin-left: auto; margin-right: 66.6666666667%; } .semi-rtl .semi-col-offset-17 { margin-left: auto; margin-right: 70.8333333333%; } .semi-rtl .semi-col-offset-18 { margin-left: auto; margin-right: 75%; } .semi-rtl .semi-col-offset-19 { margin-left: auto; margin-right: 79.1666666667%; } .semi-rtl .semi-col-offset-20 { margin-left: auto; margin-right: 83.3333333333%; } .semi-rtl .semi-col-offset-21 { margin-left: auto; margin-right: 87.5%; } .semi-rtl .semi-col-offset-22 { margin-left: auto; margin-right: 91.6666666667%; } .semi-rtl .semi-col-offset-23 { margin-left: auto; margin-right: 95.8333333333%; } .semi-rtl .semi-col-offset-24 { margin-left: auto; margin-right: 100%; } .semi-col-xs-1 { flex: 0 0 auto; float: left; } .semi-col-xs-2 { flex: 0 0 auto; float: left; } .semi-col-xs-3 { flex: 0 0 auto; float: left; } .semi-col-xs-4 { flex: 0 0 auto; float: left; } .semi-col-xs-5 { flex: 0 0 auto; float: left; } .semi-col-xs-6 { flex: 0 0 auto; float: left; } .semi-col-xs-7 { flex: 0 0 auto; float: left; } .semi-col-xs-8 { flex: 0 0 auto; float: left; } .semi-col-xs-9 { flex: 0 0 auto; float: left; } .semi-col-xs-10 { flex: 0 0 auto; float: left; } .semi-col-xs-11 { flex: 0 0 auto; float: left; } .semi-col-xs-12 { flex: 0 0 auto; float: left; } .semi-col-xs-13 { flex: 0 0 auto; float: left; } .semi-col-xs-14 { flex: 0 0 auto; float: left; } .semi-col-xs-15 { flex: 0 0 auto; float: left; } .semi-col-xs-16 { flex: 0 0 auto; float: left; } .semi-col-xs-17 { flex: 0 0 auto; float: left; } .semi-col-xs-18 { flex: 0 0 auto; float: left; } .semi-col-xs-19 { flex: 0 0 auto; float: left; } .semi-col-xs-20 { flex: 0 0 auto; float: left; } .semi-col-xs-21 { flex: 0 0 auto; float: left; } .semi-col-xs-22 { flex: 0 0 auto; float: left; } .semi-col-xs-23 { flex: 0 0 auto; float: left; } .semi-col-xs-24 { flex: 0 0 auto; float: left; } .semi-col-xs-1 { display: block; box-sizing: border-box; width: 4.1666666667%; } .semi-col-xs-push-1 { left: 4.1666666667%; } .semi-col-xs-pull-1 { right: 4.1666666667%; } .semi-col-xs-offset-1 { margin-left: 4.1666666667%; } .semi-col-xs-order-1 { order: 1; } .semi-col-xs-2 { display: block; box-sizing: border-box; width: 8.3333333333%; } .semi-col-xs-push-2 { left: 8.3333333333%; } .semi-col-xs-pull-2 { right: 8.3333333333%; } .semi-col-xs-offset-2 { margin-left: 8.3333333333%; } .semi-col-xs-order-2 { order: 2; } .semi-col-xs-3 { display: block; box-sizing: border-box; width: 12.5%; } .semi-col-xs-push-3 { left: 12.5%; } .semi-col-xs-pull-3 { right: 12.5%; } .semi-col-xs-offset-3 { margin-left: 12.5%; } .semi-col-xs-order-3 { order: 3; } .semi-col-xs-4 { display: block; box-sizing: border-box; width: 16.6666666667%; } .semi-col-xs-push-4 { left: 16.6666666667%; } .semi-col-xs-pull-4 { right: 16.6666666667%; } .semi-col-xs-offset-4 { margin-left: 16.6666666667%; } .semi-col-xs-order-4 { order: 4; } .semi-col-xs-5 { display: block; box-sizing: border-box; width: 20.8333333333%; } .semi-col-xs-push-5 { left: 20.8333333333%; } .semi-col-xs-pull-5 { right: 20.8333333333%; } .semi-col-xs-offset-5 { margin-left: 20.8333333333%; } .semi-col-xs-order-5 { order: 5; } .semi-col-xs-6 { display: block; box-sizing: border-box; width: 25%; } .semi-col-xs-push-6 { left: 25%; } .semi-col-xs-pull-6 { right: 25%; } .semi-col-xs-offset-6 { margin-left: 25%; } .semi-col-xs-order-6 { order: 6; } .semi-col-xs-7 { display: block; box-sizing: border-box; width: 29.1666666667%; } .semi-col-xs-push-7 { left: 29.1666666667%; } .semi-col-xs-pull-7 { right: 29.1666666667%; } .semi-col-xs-offset-7 { margin-left: 29.1666666667%; } .semi-col-xs-order-7 { order: 7; } .semi-col-xs-8 { display: block; box-sizing: border-box; width: 33.3333333333%; } .semi-col-xs-push-8 { left: 33.3333333333%; } .semi-col-xs-pull-8 { right: 33.3333333333%; } .semi-col-xs-offset-8 { margin-left: 33.3333333333%; } .semi-col-xs-order-8 { order: 8; } .semi-col-xs-9 { display: block; box-sizing: border-box; width: 37.5%; } .semi-col-xs-push-9 { left: 37.5%; } .semi-col-xs-pull-9 { right: 37.5%; } .semi-col-xs-offset-9 { margin-left: 37.5%; } .semi-col-xs-order-9 { order: 9; } .semi-col-xs-10 { display: block; box-sizing: border-box; width: 41.6666666667%; } .semi-col-xs-push-10 { left: 41.6666666667%; } .semi-col-xs-pull-10 { right: 41.6666666667%; } .semi-col-xs-offset-10 { margin-left: 41.6666666667%; } .semi-col-xs-order-10 { order: 10; } .semi-col-xs-11 { display: block; box-sizing: border-box; width: 45.8333333333%; } .semi-col-xs-push-11 { left: 45.8333333333%; } .semi-col-xs-pull-11 { right: 45.8333333333%; } .semi-col-xs-offset-11 { margin-left: 45.8333333333%; } .semi-col-xs-order-11 { order: 11; } .semi-col-xs-12 { display: block; box-sizing: border-box; width: 50%; } .semi-col-xs-push-12 { left: 50%; } .semi-col-xs-pull-12 { right: 50%; } .semi-col-xs-offset-12 { margin-left: 50%; } .semi-col-xs-order-12 { order: 12; } .semi-col-xs-13 { display: block; box-sizing: border-box; width: 54.1666666667%; } .semi-col-xs-push-13 { left: 54.1666666667%; } .semi-col-xs-pull-13 { right: 54.1666666667%; } .semi-col-xs-offset-13 { margin-left: 54.1666666667%; } .semi-col-xs-order-13 { order: 13; } .semi-col-xs-14 { display: block; box-sizing: border-box; width: 58.3333333333%; } .semi-col-xs-push-14 { left: 58.3333333333%; } .semi-col-xs-pull-14 { right: 58.3333333333%; } .semi-col-xs-offset-14 { margin-left: 58.3333333333%; } .semi-col-xs-order-14 { order: 14; } .semi-col-xs-15 { display: block; box-sizing: border-box; width: 62.5%; } .semi-col-xs-push-15 { left: 62.5%; } .semi-col-xs-pull-15 { right: 62.5%; } .semi-col-xs-offset-15 { margin-left: 62.5%; } .semi-col-xs-order-15 { order: 15; } .semi-col-xs-16 { display: block; box-sizing: border-box; width: 66.6666666667%; } .semi-col-xs-push-16 { left: 66.6666666667%; } .semi-col-xs-pull-16 { right: 66.6666666667%; } .semi-col-xs-offset-16 { margin-left: 66.6666666667%; } .semi-col-xs-order-16 { order: 16; } .semi-col-xs-17 { display: block; box-sizing: border-box; width: 70.8333333333%; } .semi-col-xs-push-17 { left: 70.8333333333%; } .semi-col-xs-pull-17 { right: 70.8333333333%; } .semi-col-xs-offset-17 { margin-left: 70.8333333333%; } .semi-col-xs-order-17 { order: 17; } .semi-col-xs-18 { display: block; box-sizing: border-box; width: 75%; } .semi-col-xs-push-18 { left: 75%; } .semi-col-xs-pull-18 { right: 75%; } .semi-col-xs-offset-18 { margin-left: 75%; } .semi-col-xs-order-18 { order: 18; } .semi-col-xs-19 { display: block; box-sizing: border-box; width: 79.1666666667%; } .semi-col-xs-push-19 { left: 79.1666666667%; } .semi-col-xs-pull-19 { right: 79.1666666667%; } .semi-col-xs-offset-19 { margin-left: 79.1666666667%; } .semi-col-xs-order-19 { order: 19; } .semi-col-xs-20 { display: block; box-sizing: border-box; width: 83.3333333333%; } .semi-col-xs-push-20 { left: 83.3333333333%; } .semi-col-xs-pull-20 { right: 83.3333333333%; } .semi-col-xs-offset-20 { margin-left: 83.3333333333%; } .semi-col-xs-order-20 { order: 20; } .semi-col-xs-21 { display: block; box-sizing: border-box; width: 87.5%; } .semi-col-xs-push-21 { left: 87.5%; } .semi-col-xs-pull-21 { right: 87.5%; } .semi-col-xs-offset-21 { margin-left: 87.5%; } .semi-col-xs-order-21 { order: 21; } .semi-col-xs-22 { display: block; box-sizing: border-box; width: 91.6666666667%; } .semi-col-xs-push-22 { left: 91.6666666667%; } .semi-col-xs-pull-22 { right: 91.6666666667%; } .semi-col-xs-offset-22 { margin-left: 91.6666666667%; } .semi-col-xs-order-22 { order: 22; } .semi-col-xs-23 { display: block; box-sizing: border-box; width: 95.8333333333%; } .semi-col-xs-push-23 { left: 95.8333333333%; } .semi-col-xs-pull-23 { right: 95.8333333333%; } .semi-col-xs-offset-23 { margin-left: 95.8333333333%; } .semi-col-xs-order-23 { order: 23; } .semi-col-xs-24 { display: block; box-sizing: border-box; width: 100%; } .semi-col-xs-push-24 { left: 100%; } .semi-col-xs-pull-24 { right: 100%; } .semi-col-xs-offset-24 { margin-left: 100%; } .semi-col-xs-order-24 { order: 24; } .semi-rtl .semi-col-xs-1 { float: right; } .semi-rtl .semi-col-xs-2 { float: right; } .semi-rtl .semi-col-xs-3 { float: right; } .semi-rtl .semi-col-xs-4 { float: right; } .semi-rtl .semi-col-xs-5 { float: right; } .semi-rtl .semi-col-xs-6 { float: right; } .semi-rtl .semi-col-xs-7 { float: right; } .semi-rtl .semi-col-xs-8 { float: right; } .semi-rtl .semi-col-xs-9 { float: right; } .semi-rtl .semi-col-xs-10 { float: right; } .semi-rtl .semi-col-xs-11 { float: right; } .semi-rtl .semi-col-xs-12 { float: right; } .semi-rtl .semi-col-xs-13 { float: right; } .semi-rtl .semi-col-xs-14 { float: right; } .semi-rtl .semi-col-xs-15 { float: right; } .semi-rtl .semi-col-xs-16 { float: right; } .semi-rtl .semi-col-xs-17 { float: right; } .semi-rtl .semi-col-xs-18 { float: right; } .semi-rtl .semi-col-xs-19 { float: right; } .semi-rtl .semi-col-xs-20 { float: right; } .semi-rtl .semi-col-xs-21 { float: right; } .semi-rtl .semi-col-xs-22 { float: right; } .semi-rtl .semi-col-xs-23 { float: right; } .semi-rtl .semi-col-xs-24 { float: right; } .semi-rtl .semi-col-xs-offset-1 { margin-left: auto; margin-right: 4.1666666667%; } .semi-rtl .semi-col-xs-offset-2 { margin-left: auto; margin-right: 8.3333333333%; } .semi-rtl .semi-col-xs-offset-3 { margin-left: auto; margin-right: 12.5%; } .semi-rtl .semi-col-xs-offset-4 { margin-left: auto; margin-right: 16.6666666667%; } .semi-rtl .semi-col-xs-offset-5 { margin-left: auto; margin-right: 20.8333333333%; } .semi-rtl .semi-col-xs-offset-6 { margin-left: auto; margin-right: 25%; } .semi-rtl .semi-col-xs-offset-7 { margin-left: auto; margin-right: 29.1666666667%; } .semi-rtl .semi-col-xs-offset-8 { margin-left: auto; margin-right: 33.3333333333%; } .semi-rtl .semi-col-xs-offset-9 { margin-left: auto; margin-right: 37.5%; } .semi-rtl .semi-col-xs-offset-10 { margin-left: auto; margin-right: 41.6666666667%; } .semi-rtl .semi-col-xs-offset-11 { margin-left: auto; margin-right: 45.8333333333%; } .semi-rtl .semi-col-xs-offset-12 { margin-left: auto; margin-right: 50%; } .semi-rtl .semi-col-xs-offset-13 { margin-left: auto; margin-right: 54.1666666667%; } .semi-rtl .semi-col-xs-offset-14 { margin-left: auto; margin-right: 58.3333333333%; } .semi-rtl .semi-col-xs-offset-15 { margin-left: auto; margin-right: 62.5%; } .semi-rtl .semi-col-xs-offset-16 { margin-left: auto; margin-right: 66.6666666667%; } .semi-rtl .semi-col-xs-offset-17 { margin-left: auto; margin-right: 70.8333333333%; } .semi-rtl .semi-col-xs-offset-18 { margin-left: auto; margin-right: 75%; } .semi-rtl .semi-col-xs-offset-19 { margin-left: auto; margin-right: 79.1666666667%; } .semi-rtl .semi-col-xs-offset-20 { margin-left: auto; margin-right: 83.3333333333%; } .semi-rtl .semi-col-xs-offset-21 { margin-left: auto; margin-right: 87.5%; } .semi-rtl .semi-col-xs-offset-22 { margin-left: auto; margin-right: 91.6666666667%; } .semi-rtl .semi-col-xs-offset-23 { margin-left: auto; margin-right: 95.8333333333%; } .semi-rtl .semi-col-xs-offset-24 { margin-left: auto; margin-right: 100%; } @media (min-width: 576px) { .semi-col-sm-1 { flex: 0 0 auto; float: left; } .semi-col-sm-2 { flex: 0 0 auto; float: left; } .semi-col-sm-3 { flex: 0 0 auto; float: left; } .semi-col-sm-4 { flex: 0 0 auto; float: left; } .semi-col-sm-5 { flex: 0 0 auto; float: left; } .semi-col-sm-6 { flex: 0 0 auto; float: left; } .semi-col-sm-7 { flex: 0 0 auto; float: left; } .semi-col-sm-8 { flex: 0 0 auto; float: left; } .semi-col-sm-9 { flex: 0 0 auto; float: left; } .semi-col-sm-10 { flex: 0 0 auto; float: left; } .semi-col-sm-11 { flex: 0 0 auto; float: left; } .semi-col-sm-12 { flex: 0 0 auto; float: left; } .semi-col-sm-13 { flex: 0 0 auto; float: left; } .semi-col-sm-14 { flex: 0 0 auto; float: left; } .semi-col-sm-15 { flex: 0 0 auto; float: left; } .semi-col-sm-16 { flex: 0 0 auto; float: left; } .semi-col-sm-17 { flex: 0 0 auto; float: left; } .semi-col-sm-18 { flex: 0 0 auto; float: left; } .semi-col-sm-19 { flex: 0 0 auto; float: left; } .semi-col-sm-20 { flex: 0 0 auto; float: left; } .semi-col-sm-21 { flex: 0 0 auto; float: left; } .semi-col-sm-22 { flex: 0 0 auto; float: left; } .semi-col-sm-23 { flex: 0 0 auto; float: left; } .semi-col-sm-24 { flex: 0 0 auto; float: left; } .semi-col-sm-1 { display: block; box-sizing: border-box; width: 4.1666666667%; } .semi-col-sm-push-1 { left: 4.1666666667%; } .semi-col-sm-pull-1 { right: 4.1666666667%; } .semi-col-sm-offset-1 { margin-left: 4.1666666667%; } .semi-col-sm-order-1 { order: 1; } .semi-col-sm-2 { display: block; box-sizing: border-box; width: 8.3333333333%; } .semi-col-sm-push-2 { left: 8.3333333333%; } .semi-col-sm-pull-2 { right: 8.3333333333%; } .semi-col-sm-offset-2 { margin-left: 8.3333333333%; } .semi-col-sm-order-2 { order: 2; } .semi-col-sm-3 { display: block; box-sizing: border-box; width: 12.5%; } .semi-col-sm-push-3 { left: 12.5%; } .semi-col-sm-pull-3 { right: 12.5%; } .semi-col-sm-offset-3 { margin-left: 12.5%; } .semi-col-sm-order-3 { order: 3; } .semi-col-sm-4 { display: block; box-sizing: border-box; width: 16.6666666667%; } .semi-col-sm-push-4 { left: 16.6666666667%; } .semi-col-sm-pull-4 { right: 16.6666666667%; } .semi-col-sm-offset-4 { margin-left: 16.6666666667%; } .semi-col-sm-order-4 { order: 4; } .semi-col-sm-5 { display: block; box-sizing: border-box; width: 20.8333333333%; } .semi-col-sm-push-5 { left: 20.8333333333%; } .semi-col-sm-pull-5 { right: 20.8333333333%; } .semi-col-sm-offset-5 { margin-left: 20.8333333333%; } .semi-col-sm-order-5 { order: 5; } .semi-col-sm-6 { display: block; box-sizing: border-box; width: 25%; } .semi-col-sm-push-6 { left: 25%; } .semi-col-sm-pull-6 { right: 25%; } .semi-col-sm-offset-6 { margin-left: 25%; } .semi-col-sm-order-6 { order: 6; } .semi-col-sm-7 { display: block; box-sizing: border-box; width: 29.1666666667%; } .semi-col-sm-push-7 { left: 29.1666666667%; } .semi-col-sm-pull-7 { right: 29.1666666667%; } .semi-col-sm-offset-7 { margin-left: 29.1666666667%; } .semi-col-sm-order-7 { order: 7; } .semi-col-sm-8 { display: block; box-sizing: border-box; width: 33.3333333333%; } .semi-col-sm-push-8 { left: 33.3333333333%; } .semi-col-sm-pull-8 { right: 33.3333333333%; } .semi-col-sm-offset-8 { margin-left: 33.3333333333%; } .semi-col-sm-order-8 { order: 8; } .semi-col-sm-9 { display: block; box-sizing: border-box; width: 37.5%; } .semi-col-sm-push-9 { left: 37.5%; } .semi-col-sm-pull-9 { right: 37.5%; } .semi-col-sm-offset-9 { margin-left: 37.5%; } .semi-col-sm-order-9 { order: 9; } .semi-col-sm-10 { display: block; box-sizing: border-box; width: 41.6666666667%; } .semi-col-sm-push-10 { left: 41.6666666667%; } .semi-col-sm-pull-10 { right: 41.6666666667%; } .semi-col-sm-offset-10 { margin-left: 41.6666666667%; } .semi-col-sm-order-10 { order: 10; } .semi-col-sm-11 { display: block; box-sizing: border-box; width: 45.8333333333%; } .semi-col-sm-push-11 { left: 45.8333333333%; } .semi-col-sm-pull-11 { right: 45.8333333333%; } .semi-col-sm-offset-11 { margin-left: 45.8333333333%; } .semi-col-sm-order-11 { order: 11; } .semi-col-sm-12 { display: block; box-sizing: border-box; width: 50%; } .semi-col-sm-push-12 { left: 50%; } .semi-col-sm-pull-12 { right: 50%; } .semi-col-sm-offset-12 { margin-left: 50%; } .semi-col-sm-order-12 { order: 12; } .semi-col-sm-13 { display: block; box-sizing: border-box; width: 54.1666666667%; } .semi-col-sm-push-13 { left: 54.1666666667%; } .semi-col-sm-pull-13 { right: 54.1666666667%; } .semi-col-sm-offset-13 { margin-left: 54.1666666667%; } .semi-col-sm-order-13 { order: 13; } .semi-col-sm-14 { display: block; box-sizing: border-box; width: 58.3333333333%; } .semi-col-sm-push-14 { left: 58.3333333333%; } .semi-col-sm-pull-14 { right: 58.3333333333%; } .semi-col-sm-offset-14 { margin-left: 58.3333333333%; } .semi-col-sm-order-14 { order: 14; } .semi-col-sm-15 { display: block; box-sizing: border-box; width: 62.5%; } .semi-col-sm-push-15 { left: 62.5%; } .semi-col-sm-pull-15 { right: 62.5%; } .semi-col-sm-offset-15 { margin-left: 62.5%; } .semi-col-sm-order-15 { order: 15; } .semi-col-sm-16 { display: block; box-sizing: border-box; width: 66.6666666667%; } .semi-col-sm-push-16 { left: 66.6666666667%; } .semi-col-sm-pull-16 { right: 66.6666666667%; } .semi-col-sm-offset-16 { margin-left: 66.6666666667%; } .semi-col-sm-order-16 { order: 16; } .semi-col-sm-17 { display: block; box-sizing: border-box; width: 70.8333333333%; } .semi-col-sm-push-17 { left: 70.8333333333%; } .semi-col-sm-pull-17 { right: 70.8333333333%; } .semi-col-sm-offset-17 { margin-left: 70.8333333333%; } .semi-col-sm-order-17 { order: 17; } .semi-col-sm-18 { display: block; box-sizing: border-box; width: 75%; } .semi-col-sm-push-18 { left: 75%; } .semi-col-sm-pull-18 { right: 75%; } .semi-col-sm-offset-18 { margin-left: 75%; } .semi-col-sm-order-18 { order: 18; } .semi-col-sm-19 { display: block; box-sizing: border-box; width: 79.1666666667%; } .semi-col-sm-push-19 { left: 79.1666666667%; } .semi-col-sm-pull-19 { right: 79.1666666667%; } .semi-col-sm-offset-19 { margin-left: 79.1666666667%; } .semi-col-sm-order-19 { order: 19; } .semi-col-sm-20 { display: block; box-sizing: border-box; width: 83.3333333333%; } .semi-col-sm-push-20 { left: 83.3333333333%; } .semi-col-sm-pull-20 { right: 83.3333333333%; } .semi-col-sm-offset-20 { margin-left: 83.3333333333%; } .semi-col-sm-order-20 { order: 20; } .semi-col-sm-21 { display: block; box-sizing: border-box; width: 87.5%; } .semi-col-sm-push-21 { left: 87.5%; } .semi-col-sm-pull-21 { right: 87.5%; } .semi-col-sm-offset-21 { margin-left: 87.5%; } .semi-col-sm-order-21 { order: 21; } .semi-col-sm-22 { display: block; box-sizing: border-box; width: 91.6666666667%; } .semi-col-sm-push-22 { left: 91.6666666667%; } .semi-col-sm-pull-22 { right: 91.6666666667%; } .semi-col-sm-offset-22 { margin-left: 91.6666666667%; } .semi-col-sm-order-22 { order: 22; } .semi-col-sm-23 { display: block; box-sizing: border-box; width: 95.8333333333%; } .semi-col-sm-push-23 { left: 95.8333333333%; } .semi-col-sm-pull-23 { right: 95.8333333333%; } .semi-col-sm-offset-23 { margin-left: 95.8333333333%; } .semi-col-sm-order-23 { order: 23; } .semi-col-sm-24 { display: block; box-sizing: border-box; width: 100%; } .semi-col-sm-push-24 { left: 100%; } .semi-col-sm-pull-24 { right: 100%; } .semi-col-sm-offset-24 { margin-left: 100%; } .semi-col-sm-order-24 { order: 24; } .semi-rtl .semi-col-sm-1 { float: right; } .semi-rtl .semi-col-sm-2 { float: right; } .semi-rtl .semi-col-sm-3 { float: right; } .semi-rtl .semi-col-sm-4 { float: right; } .semi-rtl .semi-col-sm-5 { float: right; } .semi-rtl .semi-col-sm-6 { float: right; } .semi-rtl .semi-col-sm-7 { float: right; } .semi-rtl .semi-col-sm-8 { float: right; } .semi-rtl .semi-col-sm-9 { float: right; } .semi-rtl .semi-col-sm-10 { float: right; } .semi-rtl .semi-col-sm-11 { float: right; } .semi-rtl .semi-col-sm-12 { float: right; } .semi-rtl .semi-col-sm-13 { float: right; } .semi-rtl .semi-col-sm-14 { float: right; } .semi-rtl .semi-col-sm-15 { float: right; } .semi-rtl .semi-col-sm-16 { float: right; } .semi-rtl .semi-col-sm-17 { float: right; } .semi-rtl .semi-col-sm-18 { float: right; } .semi-rtl .semi-col-sm-19 { float: right; } .semi-rtl .semi-col-sm-20 { float: right; } .semi-rtl .semi-col-sm-21 { float: right; } .semi-rtl .semi-col-sm-22 { float: right; } .semi-rtl .semi-col-sm-23 { float: right; } .semi-rtl .semi-col-sm-24 { float: right; } .semi-rtl .semi-col-sm-offset-1 { margin-left: auto; margin-right: 4.1666666667%; } .semi-rtl .semi-col-sm-offset-2 { margin-left: auto; margin-right: 8.3333333333%; } .semi-rtl .semi-col-sm-offset-3 { margin-left: auto; margin-right: 12.5%; } .semi-rtl .semi-col-sm-offset-4 { margin-left: auto; margin-right: 16.6666666667%; } .semi-rtl .semi-col-sm-offset-5 { margin-left: auto; margin-right: 20.8333333333%; } .semi-rtl .semi-col-sm-offset-6 { margin-left: auto; margin-right: 25%; } .semi-rtl .semi-col-sm-offset-7 { margin-left: auto; margin-right: 29.1666666667%; } .semi-rtl .semi-col-sm-offset-8 { margin-left: auto; margin-right: 33.3333333333%; } .semi-rtl .semi-col-sm-offset-9 { margin-left: auto; margin-right: 37.5%; } .semi-rtl .semi-col-sm-offset-10 { margin-left: auto; margin-right: 41.6666666667%; } .semi-rtl .semi-col-sm-offset-11 { margin-left: auto; margin-right: 45.8333333333%; } .semi-rtl .semi-col-sm-offset-12 { margin-left: auto; margin-right: 50%; } .semi-rtl .semi-col-sm-offset-13 { margin-left: auto; margin-right: 54.1666666667%; } .semi-rtl .semi-col-sm-offset-14 { margin-left: auto; margin-right: 58.3333333333%; } .semi-rtl .semi-col-sm-offset-15 { margin-left: auto; margin-right: 62.5%; } .semi-rtl .semi-col-sm-offset-16 { margin-left: auto; margin-right: 66.6666666667%; } .semi-rtl .semi-col-sm-offset-17 { margin-left: auto; margin-right: 70.8333333333%; } .semi-rtl .semi-col-sm-offset-18 { margin-left: auto; margin-right: 75%; } .semi-rtl .semi-col-sm-offset-19 { margin-left: auto; margin-right: 79.1666666667%; } .semi-rtl .semi-col-sm-offset-20 { margin-left: auto; margin-right: 83.3333333333%; } .semi-rtl .semi-col-sm-offset-21 { margin-left: auto; margin-right: 87.5%; } .semi-rtl .semi-col-sm-offset-22 { margin-left: auto; margin-right: 91.6666666667%; } .semi-rtl .semi-col-sm-offset-23 { margin-left: auto; margin-right: 95.8333333333%; } .semi-rtl .semi-col-sm-offset-24 { margin-left: auto; margin-right: 100%; } } @media (min-width: 768px) { .semi-col-md-1 { flex: 0 0 auto; float: left; } .semi-col-md-2 { flex: 0 0 auto; float: left; } .semi-col-md-3 { flex: 0 0 auto; float: left; } .semi-col-md-4 { flex: 0 0 auto; float: left; } .semi-col-md-5 { flex: 0 0 auto; float: left; } .semi-col-md-6 { flex: 0 0 auto; float: left; } .semi-col-md-7 { flex: 0 0 auto; float: left; } .semi-col-md-8 { flex: 0 0 auto; float: left; } .semi-col-md-9 { flex: 0 0 auto; float: left; } .semi-col-md-10 { flex: 0 0 auto; float: left; } .semi-col-md-11 { flex: 0 0 auto; float: left; } .semi-col-md-12 { flex: 0 0 auto; float: left; } .semi-col-md-13 { flex: 0 0 auto; float: left; } .semi-col-md-14 { flex: 0 0 auto; float: left; } .semi-col-md-15 { flex: 0 0 auto; float: left; } .semi-col-md-16 { flex: 0 0 auto; float: left; } .semi-col-md-17 { flex: 0 0 auto; float: left; } .semi-col-md-18 { flex: 0 0 auto; float: left; } .semi-col-md-19 { flex: 0 0 auto; float: left; } .semi-col-md-20 { flex: 0 0 auto; float: left; } .semi-col-md-21 { flex: 0 0 auto; float: left; } .semi-col-md-22 { flex: 0 0 auto; float: left; } .semi-col-md-23 { flex: 0 0 auto; float: left; } .semi-col-md-24 { flex: 0 0 auto; float: left; } .semi-col-md-1 { display: block; box-sizing: border-box; width: 4.1666666667%; } .semi-col-md-push-1 { left: 4.1666666667%; } .semi-col-md-pull-1 { right: 4.1666666667%; } .semi-col-md-offset-1 { margin-left: 4.1666666667%; } .semi-col-md-order-1 { order: 1; } .semi-col-md-2 { display: block; box-sizing: border-box; width: 8.3333333333%; } .semi-col-md-push-2 { left: 8.3333333333%; } .semi-col-md-pull-2 { right: 8.3333333333%; } .semi-col-md-offset-2 { margin-left: 8.3333333333%; } .semi-col-md-order-2 { order: 2; } .semi-col-md-3 { display: block; box-sizing: border-box; width: 12.5%; } .semi-col-md-push-3 { left: 12.5%; } .semi-col-md-pull-3 { right: 12.5%; } .semi-col-md-offset-3 { margin-left: 12.5%; } .semi-col-md-order-3 { order: 3; } .semi-col-md-4 { display: block; box-sizing: border-box; width: 16.6666666667%; } .semi-col-md-push-4 { left: 16.6666666667%; } .semi-col-md-pull-4 { right: 16.6666666667%; } .semi-col-md-offset-4 { margin-left: 16.6666666667%; } .semi-col-md-order-4 { order: 4; } .semi-col-md-5 { display: block; box-sizing: border-box; width: 20.8333333333%; } .semi-col-md-push-5 { left: 20.8333333333%; } .semi-col-md-pull-5 { right: 20.8333333333%; } .semi-col-md-offset-5 { margin-left: 20.8333333333%; } .semi-col-md-order-5 { order: 5; } .semi-col-md-6 { display: block; box-sizing: border-box; width: 25%; } .semi-col-md-push-6 { left: 25%; } .semi-col-md-pull-6 { right: 25%; } .semi-col-md-offset-6 { margin-left: 25%; } .semi-col-md-order-6 { order: 6; } .semi-col-md-7 { display: block; box-sizing: border-box; width: 29.1666666667%; } .semi-col-md-push-7 { left: 29.1666666667%; } .semi-col-md-pull-7 { right: 29.1666666667%; } .semi-col-md-offset-7 { margin-left: 29.1666666667%; } .semi-col-md-order-7 { order: 7; } .semi-col-md-8 { display: block; box-sizing: border-box; width: 33.3333333333%; } .semi-col-md-push-8 { left: 33.3333333333%; } .semi-col-md-pull-8 { right: 33.3333333333%; } .semi-col-md-offset-8 { margin-left: 33.3333333333%; } .semi-col-md-order-8 { order: 8; } .semi-col-md-9 { display: block; box-sizing: border-box; width: 37.5%; } .semi-col-md-push-9 { left: 37.5%; } .semi-col-md-pull-9 { right: 37.5%; } .semi-col-md-offset-9 { margin-left: 37.5%; } .semi-col-md-order-9 { order: 9; } .semi-col-md-10 { display: block; box-sizing: border-box; width: 41.6666666667%; } .semi-col-md-push-10 { left: 41.6666666667%; } .semi-col-md-pull-10 { right: 41.6666666667%; } .semi-col-md-offset-10 { margin-left: 41.6666666667%; } .semi-col-md-order-10 { order: 10; } .semi-col-md-11 { display: block; box-sizing: border-box; width: 45.8333333333%; } .semi-col-md-push-11 { left: 45.8333333333%; } .semi-col-md-pull-11 { right: 45.8333333333%; } .semi-col-md-offset-11 { margin-left: 45.8333333333%; } .semi-col-md-order-11 { order: 11; } .semi-col-md-12 { display: block; box-sizing: border-box; width: 50%; } .semi-col-md-push-12 { left: 50%; } .semi-col-md-pull-12 { right: 50%; } .semi-col-md-offset-12 { margin-left: 50%; } .semi-col-md-order-12 { order: 12; } .semi-col-md-13 { display: block; box-sizing: border-box; width: 54.1666666667%; } .semi-col-md-push-13 { left: 54.1666666667%; } .semi-col-md-pull-13 { right: 54.1666666667%; } .semi-col-md-offset-13 { margin-left: 54.1666666667%; } .semi-col-md-order-13 { order: 13; } .semi-col-md-14 { display: block; box-sizing: border-box; width: 58.3333333333%; } .semi-col-md-push-14 { left: 58.3333333333%; } .semi-col-md-pull-14 { right: 58.3333333333%; } .semi-col-md-offset-14 { margin-left: 58.3333333333%; } .semi-col-md-order-14 { order: 14; } .semi-col-md-15 { display: block; box-sizing: border-box; width: 62.5%; } .semi-col-md-push-15 { left: 62.5%; } .semi-col-md-pull-15 { right: 62.5%; } .semi-col-md-offset-15 { margin-left: 62.5%; } .semi-col-md-order-15 { order: 15; } .semi-col-md-16 { display: block; box-sizing: border-box; width: 66.6666666667%; } .semi-col-md-push-16 { left: 66.6666666667%; } .semi-col-md-pull-16 { right: 66.6666666667%; } .semi-col-md-offset-16 { margin-left: 66.6666666667%; } .semi-col-md-order-16 { order: 16; } .semi-col-md-17 { display: block; box-sizing: border-box; width: 70.8333333333%; } .semi-col-md-push-17 { left: 70.8333333333%; } .semi-col-md-pull-17 { right: 70.8333333333%; } .semi-col-md-offset-17 { margin-left: 70.8333333333%; } .semi-col-md-order-17 { order: 17; } .semi-col-md-18 { display: block; box-sizing: border-box; width: 75%; } .semi-col-md-push-18 { left: 75%; } .semi-col-md-pull-18 { right: 75%; } .semi-col-md-offset-18 { margin-left: 75%; } .semi-col-md-order-18 { order: 18; } .semi-col-md-19 { display: block; box-sizing: border-box; width: 79.1666666667%; } .semi-col-md-push-19 { left: 79.1666666667%; } .semi-col-md-pull-19 { right: 79.1666666667%; } .semi-col-md-offset-19 { margin-left: 79.1666666667%; } .semi-col-md-order-19 { order: 19; } .semi-col-md-20 { display: block; box-sizing: border-box; width: 83.3333333333%; } .semi-col-md-push-20 { left: 83.3333333333%; } .semi-col-md-pull-20 { right: 83.3333333333%; } .semi-col-md-offset-20 { margin-left: 83.3333333333%; } .semi-col-md-order-20 { order: 20; } .semi-col-md-21 { display: block; box-sizing: border-box; width: 87.5%; } .semi-col-md-push-21 { left: 87.5%; } .semi-col-md-pull-21 { right: 87.5%; } .semi-col-md-offset-21 { margin-left: 87.5%; } .semi-col-md-order-21 { order: 21; } .semi-col-md-22 { display: block; box-sizing: border-box; width: 91.6666666667%; } .semi-col-md-push-22 { left: 91.6666666667%; } .semi-col-md-pull-22 { right: 91.6666666667%; } .semi-col-md-offset-22 { margin-left: 91.6666666667%; } .semi-col-md-order-22 { order: 22; } .semi-col-md-23 { display: block; box-sizing: border-box; width: 95.8333333333%; } .semi-col-md-push-23 { left: 95.8333333333%; } .semi-col-md-pull-23 { right: 95.8333333333%; } .semi-col-md-offset-23 { margin-left: 95.8333333333%; } .semi-col-md-order-23 { order: 23; } .semi-col-md-24 { display: block; box-sizing: border-box; width: 100%; } .semi-col-md-push-24 { left: 100%; } .semi-col-md-pull-24 { right: 100%; } .semi-col-md-offset-24 { margin-left: 100%; } .semi-col-md-order-24 { order: 24; } .semi-rtl .semi-col-md-1 { float: right; } .semi-rtl .semi-col-md-2 { float: right; } .semi-rtl .semi-col-md-3 { float: right; } .semi-rtl .semi-col-md-4 { float: right; } .semi-rtl .semi-col-md-5 { float: right; } .semi-rtl .semi-col-md-6 { float: right; } .semi-rtl .semi-col-md-7 { float: right; } .semi-rtl .semi-col-md-8 { float: right; } .semi-rtl .semi-col-md-9 { float: right; } .semi-rtl .semi-col-md-10 { float: right; } .semi-rtl .semi-col-md-11 { float: right; } .semi-rtl .semi-col-md-12 { float: right; } .semi-rtl .semi-col-md-13 { float: right; } .semi-rtl .semi-col-md-14 { float: right; } .semi-rtl .semi-col-md-15 { float: right; } .semi-rtl .semi-col-md-16 { float: right; } .semi-rtl .semi-col-md-17 { float: right; } .semi-rtl .semi-col-md-18 { float: right; } .semi-rtl .semi-col-md-19 { float: right; } .semi-rtl .semi-col-md-20 { float: right; } .semi-rtl .semi-col-md-21 { float: right; } .semi-rtl .semi-col-md-22 { float: right; } .semi-rtl .semi-col-md-23 { float: right; } .semi-rtl .semi-col-md-24 { float: right; } .semi-rtl .semi-col-md-offset-1 { margin-left: auto; margin-right: 4.1666666667%; } .semi-rtl .semi-col-md-offset-2 { margin-left: auto; margin-right: 8.3333333333%; } .semi-rtl .semi-col-md-offset-3 { margin-left: auto; margin-right: 12.5%; } .semi-rtl .semi-col-md-offset-4 { margin-left: auto; margin-right: 16.6666666667%; } .semi-rtl .semi-col-md-offset-5 { margin-left: auto; margin-right: 20.8333333333%; } .semi-rtl .semi-col-md-offset-6 { margin-left: auto; margin-right: 25%; } .semi-rtl .semi-col-md-offset-7 { margin-left: auto; margin-right: 29.1666666667%; } .semi-rtl .semi-col-md-offset-8 { margin-left: auto; margin-right: 33.3333333333%; } .semi-rtl .semi-col-md-offset-9 { margin-left: auto; margin-right: 37.5%; } .semi-rtl .semi-col-md-offset-10 { margin-left: auto; margin-right: 41.6666666667%; } .semi-rtl .semi-col-md-offset-11 { margin-left: auto; margin-right: 45.8333333333%; } .semi-rtl .semi-col-md-offset-12 { margin-left: auto; margin-right: 50%; } .semi-rtl .semi-col-md-offset-13 { margin-left: auto; margin-right: 54.1666666667%; } .semi-rtl .semi-col-md-offset-14 { margin-left: auto; margin-right: 58.3333333333%; } .semi-rtl .semi-col-md-offset-15 { margin-left: auto; margin-right: 62.5%; } .semi-rtl .semi-col-md-offset-16 { margin-left: auto; margin-right: 66.6666666667%; } .semi-rtl .semi-col-md-offset-17 { margin-left: auto; margin-right: 70.8333333333%; } .semi-rtl .semi-col-md-offset-18 { margin-left: auto; margin-right: 75%; } .semi-rtl .semi-col-md-offset-19 { margin-left: auto; margin-right: 79.1666666667%; } .semi-rtl .semi-col-md-offset-20 { margin-left: auto; margin-right: 83.3333333333%; } .semi-rtl .semi-col-md-offset-21 { margin-left: auto; margin-right: 87.5%; } .semi-rtl .semi-col-md-offset-22 { margin-left: auto; margin-right: 91.6666666667%; } .semi-rtl .semi-col-md-offset-23 { margin-left: auto; margin-right: 95.8333333333%; } .semi-rtl .semi-col-md-offset-24 { margin-left: auto; margin-right: 100%; } } @media (min-width: 992px) { .semi-col-lg-1 { flex: 0 0 auto; float: left; } .semi-col-lg-2 { flex: 0 0 auto; float: left; } .semi-col-lg-3 { flex: 0 0 auto; float: left; } .semi-col-lg-4 { flex: 0 0 auto; float: left; } .semi-col-lg-5 { flex: 0 0 auto; float: left; } .semi-col-lg-6 { flex: 0 0 auto; float: left; } .semi-col-lg-7 { flex: 0 0 auto; float: left; } .semi-col-lg-8 { flex: 0 0 auto; float: left; } .semi-col-lg-9 { flex: 0 0 auto; float: left; } .semi-col-lg-10 { flex: 0 0 auto; float: left; } .semi-col-lg-11 { flex: 0 0 auto; float: left; } .semi-col-lg-12 { flex: 0 0 auto; float: left; } .semi-col-lg-13 { flex: 0 0 auto; float: left; } .semi-col-lg-14 { flex: 0 0 auto; float: left; } .semi-col-lg-15 { flex: 0 0 auto; float: left; } .semi-col-lg-16 { flex: 0 0 auto; float: left; } .semi-col-lg-17 { flex: 0 0 auto; float: left; } .semi-col-lg-18 { flex: 0 0 auto; float: left; } .semi-col-lg-19 { flex: 0 0 auto; float: left; } .semi-col-lg-20 { flex: 0 0 auto; float: left; } .semi-col-lg-21 { flex: 0 0 auto; float: left; } .semi-col-lg-22 { flex: 0 0 auto; float: left; } .semi-col-lg-23 { flex: 0 0 auto; float: left; } .semi-col-lg-24 { flex: 0 0 auto; float: left; } .semi-col-lg-1 { display: block; box-sizing: border-box; width: 4.1666666667%; } .semi-col-lg-push-1 { left: 4.1666666667%; } .semi-col-lg-pull-1 { right: 4.1666666667%; } .semi-col-lg-offset-1 { margin-left: 4.1666666667%; } .semi-col-lg-order-1 { order: 1; } .semi-col-lg-2 { display: block; box-sizing: border-box; width: 8.3333333333%; } .semi-col-lg-push-2 { left: 8.3333333333%; } .semi-col-lg-pull-2 { right: 8.3333333333%; } .semi-col-lg-offset-2 { margin-left: 8.3333333333%; } .semi-col-lg-order-2 { order: 2; } .semi-col-lg-3 { display: block; box-sizing: border-box; width: 12.5%; } .semi-col-lg-push-3 { left: 12.5%; } .semi-col-lg-pull-3 { right: 12.5%; } .semi-col-lg-offset-3 { margin-left: 12.5%; } .semi-col-lg-order-3 { order: 3; } .semi-col-lg-4 { display: block; box-sizing: border-box; width: 16.6666666667%; } .semi-col-lg-push-4 { left: 16.6666666667%; } .semi-col-lg-pull-4 { right: 16.6666666667%; } .semi-col-lg-offset-4 { margin-left: 16.6666666667%; } .semi-col-lg-order-4 { order: 4; } .semi-col-lg-5 { display: block; box-sizing: border-box; width: 20.8333333333%; } .semi-col-lg-push-5 { left: 20.8333333333%; } .semi-col-lg-pull-5 { right: 20.8333333333%; } .semi-col-lg-offset-5 { margin-left: 20.8333333333%; } .semi-col-lg-order-5 { order: 5; } .semi-col-lg-6 { display: block; box-sizing: border-box; width: 25%; } .semi-col-lg-push-6 { left: 25%; } .semi-col-lg-pull-6 { right: 25%; } .semi-col-lg-offset-6 { margin-left: 25%; } .semi-col-lg-order-6 { order: 6; } .semi-col-lg-7 { display: block; box-sizing: border-box; width: 29.1666666667%; } .semi-col-lg-push-7 { left: 29.1666666667%; } .semi-col-lg-pull-7 { right: 29.1666666667%; } .semi-col-lg-offset-7 { margin-left: 29.1666666667%; } .semi-col-lg-order-7 { order: 7; } .semi-col-lg-8 { display: block; box-sizing: border-box; width: 33.3333333333%; } .semi-col-lg-push-8 { left: 33.3333333333%; } .semi-col-lg-pull-8 { right: 33.3333333333%; } .semi-col-lg-offset-8 { margin-left: 33.3333333333%; } .semi-col-lg-order-8 { order: 8; } .semi-col-lg-9 { display: block; box-sizing: border-box; width: 37.5%; } .semi-col-lg-push-9 { left: 37.5%; } .semi-col-lg-pull-9 { right: 37.5%; } .semi-col-lg-offset-9 { margin-left: 37.5%; } .semi-col-lg-order-9 { order: 9; } .semi-col-lg-10 { display: block; box-sizing: border-box; width: 41.6666666667%; } .semi-col-lg-push-10 { left: 41.6666666667%; } .semi-col-lg-pull-10 { right: 41.6666666667%; } .semi-col-lg-offset-10 { margin-left: 41.6666666667%; } .semi-col-lg-order-10 { order: 10; } .semi-col-lg-11 { display: block; box-sizing: border-box; width: 45.8333333333%; } .semi-col-lg-push-11 { left: 45.8333333333%; } .semi-col-lg-pull-11 { right: 45.8333333333%; } .semi-col-lg-offset-11 { margin-left: 45.8333333333%; } .semi-col-lg-order-11 { order: 11; } .semi-col-lg-12 { display: block; box-sizing: border-box; width: 50%; } .semi-col-lg-push-12 { left: 50%; } .semi-col-lg-pull-12 { right: 50%; } .semi-col-lg-offset-12 { margin-left: 50%; } .semi-col-lg-order-12 { order: 12; } .semi-col-lg-13 { display: block; box-sizing: border-box; width: 54.1666666667%; } .semi-col-lg-push-13 { left: 54.1666666667%; } .semi-col-lg-pull-13 { right: 54.1666666667%; } .semi-col-lg-offset-13 { margin-left: 54.1666666667%; } .semi-col-lg-order-13 { order: 13; } .semi-col-lg-14 { display: block; box-sizing: border-box; width: 58.3333333333%; } .semi-col-lg-push-14 { left: 58.3333333333%; } .semi-col-lg-pull-14 { right: 58.3333333333%; } .semi-col-lg-offset-14 { margin-left: 58.3333333333%; } .semi-col-lg-order-14 { order: 14; } .semi-col-lg-15 { display: block; box-sizing: border-box; width: 62.5%; } .semi-col-lg-push-15 { left: 62.5%; } .semi-col-lg-pull-15 { right: 62.5%; } .semi-col-lg-offset-15 { margin-left: 62.5%; } .semi-col-lg-order-15 { order: 15; } .semi-col-lg-16 { display: block; box-sizing: border-box; width: 66.6666666667%; } .semi-col-lg-push-16 { left: 66.6666666667%; } .semi-col-lg-pull-16 { right: 66.6666666667%; } .semi-col-lg-offset-16 { margin-left: 66.6666666667%; } .semi-col-lg-order-16 { order: 16; } .semi-col-lg-17 { display: block; box-sizing: border-box; width: 70.8333333333%; } .semi-col-lg-push-17 { left: 70.8333333333%; } .semi-col-lg-pull-17 { right: 70.8333333333%; } .semi-col-lg-offset-17 { margin-left: 70.8333333333%; } .semi-col-lg-order-17 { order: 17; } .semi-col-lg-18 { display: block; box-sizing: border-box; width: 75%; } .semi-col-lg-push-18 { left: 75%; } .semi-col-lg-pull-18 { right: 75%; } .semi-col-lg-offset-18 { margin-left: 75%; } .semi-col-lg-order-18 { order: 18; } .semi-col-lg-19 { display: block; box-sizing: border-box; width: 79.1666666667%; } .semi-col-lg-push-19 { left: 79.1666666667%; } .semi-col-lg-pull-19 { right: 79.1666666667%; } .semi-col-lg-offset-19 { margin-left: 79.1666666667%; } .semi-col-lg-order-19 { order: 19; } .semi-col-lg-20 { display: block; box-sizing: border-box; width: 83.3333333333%; } .semi-col-lg-push-20 { left: 83.3333333333%; } .semi-col-lg-pull-20 { right: 83.3333333333%; } .semi-col-lg-offset-20 { margin-left: 83.3333333333%; } .semi-col-lg-order-20 { order: 20; } .semi-col-lg-21 { display: block; box-sizing: border-box; width: 87.5%; } .semi-col-lg-push-21 { left: 87.5%; } .semi-col-lg-pull-21 { right: 87.5%; } .semi-col-lg-offset-21 { margin-left: 87.5%; } .semi-col-lg-order-21 { order: 21; } .semi-col-lg-22 { display: block; box-sizing: border-box; width: 91.6666666667%; } .semi-col-lg-push-22 { left: 91.6666666667%; } .semi-col-lg-pull-22 { right: 91.6666666667%; } .semi-col-lg-offset-22 { margin-left: 91.6666666667%; } .semi-col-lg-order-22 { order: 22; } .semi-col-lg-23 { display: block; box-sizing: border-box; width: 95.8333333333%; } .semi-col-lg-push-23 { left: 95.8333333333%; } .semi-col-lg-pull-23 { right: 95.8333333333%; } .semi-col-lg-offset-23 { margin-left: 95.8333333333%; } .semi-col-lg-order-23 { order: 23; } .semi-col-lg-24 { display: block; box-sizing: border-box; width: 100%; } .semi-col-lg-push-24 { left: 100%; } .semi-col-lg-pull-24 { right: 100%; } .semi-col-lg-offset-24 { margin-left: 100%; } .semi-col-lg-order-24 { order: 24; } .semi-rtl .semi-col-lg-1 { float: right; } .semi-rtl .semi-col-lg-2 { float: right; } .semi-rtl .semi-col-lg-3 { float: right; } .semi-rtl .semi-col-lg-4 { float: right; } .semi-rtl .semi-col-lg-5 { float: right; } .semi-rtl .semi-col-lg-6 { float: right; } .semi-rtl .semi-col-lg-7 { float: right; } .semi-rtl .semi-col-lg-8 { float: right; } .semi-rtl .semi-col-lg-9 { float: right; } .semi-rtl .semi-col-lg-10 { float: right; } .semi-rtl .semi-col-lg-11 { float: right; } .semi-rtl .semi-col-lg-12 { float: right; } .semi-rtl .semi-col-lg-13 { float: right; } .semi-rtl .semi-col-lg-14 { float: right; } .semi-rtl .semi-col-lg-15 { float: right; } .semi-rtl .semi-col-lg-16 { float: right; } .semi-rtl .semi-col-lg-17 { float: right; } .semi-rtl .semi-col-lg-18 { float: right; } .semi-rtl .semi-col-lg-19 { float: right; } .semi-rtl .semi-col-lg-20 { float: right; } .semi-rtl .semi-col-lg-21 { float: right; } .semi-rtl .semi-col-lg-22 { float: right; } .semi-rtl .semi-col-lg-23 { float: right; } .semi-rtl .semi-col-lg-24 { float: right; } .semi-rtl .semi-col-lg-offset-1 { margin-left: auto; margin-right: 4.1666666667%; } .semi-rtl .semi-col-lg-offset-2 { margin-left: auto; margin-right: 8.3333333333%; } .semi-rtl .semi-col-lg-offset-3 { margin-left: auto; margin-right: 12.5%; } .semi-rtl .semi-col-lg-offset-4 { margin-left: auto; margin-right: 16.6666666667%; } .semi-rtl .semi-col-lg-offset-5 { margin-left: auto; margin-right: 20.8333333333%; } .semi-rtl .semi-col-lg-offset-6 { margin-left: auto; margin-right: 25%; } .semi-rtl .semi-col-lg-offset-7 { margin-left: auto; margin-right: 29.1666666667%; } .semi-rtl .semi-col-lg-offset-8 { margin-left: auto; margin-right: 33.3333333333%; } .semi-rtl .semi-col-lg-offset-9 { margin-left: auto; margin-right: 37.5%; } .semi-rtl .semi-col-lg-offset-10 { margin-left: auto; margin-right: 41.6666666667%; } .semi-rtl .semi-col-lg-offset-11 { margin-left: auto; margin-right: 45.8333333333%; } .semi-rtl .semi-col-lg-offset-12 { margin-left: auto; margin-right: 50%; } .semi-rtl .semi-col-lg-offset-13 { margin-left: auto; margin-right: 54.1666666667%; } .semi-rtl .semi-col-lg-offset-14 { margin-left: auto; margin-right: 58.3333333333%; } .semi-rtl .semi-col-lg-offset-15 { margin-left: auto; margin-right: 62.5%; } .semi-rtl .semi-col-lg-offset-16 { margin-left: auto; margin-right: 66.6666666667%; } .semi-rtl .semi-col-lg-offset-17 { margin-left: auto; margin-right: 70.8333333333%; } .semi-rtl .semi-col-lg-offset-18 { margin-left: auto; margin-right: 75%; } .semi-rtl .semi-col-lg-offset-19 { margin-left: auto; margin-right: 79.1666666667%; } .semi-rtl .semi-col-lg-offset-20 { margin-left: auto; margin-right: 83.3333333333%; } .semi-rtl .semi-col-lg-offset-21 { margin-left: auto; margin-right: 87.5%; } .semi-rtl .semi-col-lg-offset-22 { margin-left: auto; margin-right: 91.6666666667%; } .semi-rtl .semi-col-lg-offset-23 { margin-left: auto; margin-right: 95.8333333333%; } .semi-rtl .semi-col-lg-offset-24 { margin-left: auto; margin-right: 100%; } } @media (min-width: 1200px) { .semi-col-xl-1 { flex: 0 0 auto; float: left; } .semi-col-xl-2 { flex: 0 0 auto; float: left; } .semi-col-xl-3 { flex: 0 0 auto; float: left; } .semi-col-xl-4 { flex: 0 0 auto; float: left; } .semi-col-xl-5 { flex: 0 0 auto; float: left; } .semi-col-xl-6 { flex: 0 0 auto; float: left; } .semi-col-xl-7 { flex: 0 0 auto; float: left; } .semi-col-xl-8 { flex: 0 0 auto; float: left; } .semi-col-xl-9 { flex: 0 0 auto; float: left; } .semi-col-xl-10 { flex: 0 0 auto; float: left; } .semi-col-xl-11 { flex: 0 0 auto; float: left; } .semi-col-xl-12 { flex: 0 0 auto; float: left; } .semi-col-xl-13 { flex: 0 0 auto; float: left; } .semi-col-xl-14 { flex: 0 0 auto; float: left; } .semi-col-xl-15 { flex: 0 0 auto; float: left; } .semi-col-xl-16 { flex: 0 0 auto; float: left; } .semi-col-xl-17 { flex: 0 0 auto; float: left; } .semi-col-xl-18 { flex: 0 0 auto; float: left; } .semi-col-xl-19 { flex: 0 0 auto; float: left; } .semi-col-xl-20 { flex: 0 0 auto; float: left; } .semi-col-xl-21 { flex: 0 0 auto; float: left; } .semi-col-xl-22 { flex: 0 0 auto; float: left; } .semi-col-xl-23 { flex: 0 0 auto; float: left; } .semi-col-xl-24 { flex: 0 0 auto; float: left; } .semi-col-xl-1 { display: block; box-sizing: border-box; width: 4.1666666667%; } .semi-col-xl-push-1 { left: 4.1666666667%; } .semi-col-xl-pull-1 { right: 4.1666666667%; } .semi-col-xl-offset-1 { margin-left: 4.1666666667%; } .semi-col-xl-order-1 { order: 1; } .semi-col-xl-2 { display: block; box-sizing: border-box; width: 8.3333333333%; } .semi-col-xl-push-2 { left: 8.3333333333%; } .semi-col-xl-pull-2 { right: 8.3333333333%; } .semi-col-xl-offset-2 { margin-left: 8.3333333333%; } .semi-col-xl-order-2 { order: 2; } .semi-col-xl-3 { display: block; box-sizing: border-box; width: 12.5%; } .semi-col-xl-push-3 { left: 12.5%; } .semi-col-xl-pull-3 { right: 12.5%; } .semi-col-xl-offset-3 { margin-left: 12.5%; } .semi-col-xl-order-3 { order: 3; } .semi-col-xl-4 { display: block; box-sizing: border-box; width: 16.6666666667%; } .semi-col-xl-push-4 { left: 16.6666666667%; } .semi-col-xl-pull-4 { right: 16.6666666667%; } .semi-col-xl-offset-4 { margin-left: 16.6666666667%; } .semi-col-xl-order-4 { order: 4; } .semi-col-xl-5 { display: block; box-sizing: border-box; width: 20.8333333333%; } .semi-col-xl-push-5 { left: 20.8333333333%; } .semi-col-xl-pull-5 { right: 20.8333333333%; } .semi-col-xl-offset-5 { margin-left: 20.8333333333%; } .semi-col-xl-order-5 { order: 5; } .semi-col-xl-6 { display: block; box-sizing: border-box; width: 25%; } .semi-col-xl-push-6 { left: 25%; } .semi-col-xl-pull-6 { right: 25%; } .semi-col-xl-offset-6 { margin-left: 25%; } .semi-col-xl-order-6 { order: 6; } .semi-col-xl-7 { display: block; box-sizing: border-box; width: 29.1666666667%; } .semi-col-xl-push-7 { left: 29.1666666667%; } .semi-col-xl-pull-7 { right: 29.1666666667%; } .semi-col-xl-offset-7 { margin-left: 29.1666666667%; } .semi-col-xl-order-7 { order: 7; } .semi-col-xl-8 { display: block; box-sizing: border-box; width: 33.3333333333%; } .semi-col-xl-push-8 { left: 33.3333333333%; } .semi-col-xl-pull-8 { right: 33.3333333333%; } .semi-col-xl-offset-8 { margin-left: 33.3333333333%; } .semi-col-xl-order-8 { order: 8; } .semi-col-xl-9 { display: block; box-sizing: border-box; width: 37.5%; } .semi-col-xl-push-9 { left: 37.5%; } .semi-col-xl-pull-9 { right: 37.5%; } .semi-col-xl-offset-9 { margin-left: 37.5%; } .semi-col-xl-order-9 { order: 9; } .semi-col-xl-10 { display: block; box-sizing: border-box; width: 41.6666666667%; } .semi-col-xl-push-10 { left: 41.6666666667%; } .semi-col-xl-pull-10 { right: 41.6666666667%; } .semi-col-xl-offset-10 { margin-left: 41.6666666667%; } .semi-col-xl-order-10 { order: 10; } .semi-col-xl-11 { display: block; box-sizing: border-box; width: 45.8333333333%; } .semi-col-xl-push-11 { left: 45.8333333333%; } .semi-col-xl-pull-11 { right: 45.8333333333%; } .semi-col-xl-offset-11 { margin-left: 45.8333333333%; } .semi-col-xl-order-11 { order: 11; } .semi-col-xl-12 { display: block; box-sizing: border-box; width: 50%; } .semi-col-xl-push-12 { left: 50%; } .semi-col-xl-pull-12 { right: 50%; } .semi-col-xl-offset-12 { margin-left: 50%; } .semi-col-xl-order-12 { order: 12; } .semi-col-xl-13 { display: block; box-sizing: border-box; width: 54.1666666667%; } .semi-col-xl-push-13 { left: 54.1666666667%; } .semi-col-xl-pull-13 { right: 54.1666666667%; } .semi-col-xl-offset-13 { margin-left: 54.1666666667%; } .semi-col-xl-order-13 { order: 13; } .semi-col-xl-14 { display: block; box-sizing: border-box; width: 58.3333333333%; } .semi-col-xl-push-14 { left: 58.3333333333%; } .semi-col-xl-pull-14 { right: 58.3333333333%; } .semi-col-xl-offset-14 { margin-left: 58.3333333333%; } .semi-col-xl-order-14 { order: 14; } .semi-col-xl-15 { display: block; box-sizing: border-box; width: 62.5%; } .semi-col-xl-push-15 { left: 62.5%; } .semi-col-xl-pull-15 { right: 62.5%; } .semi-col-xl-offset-15 { margin-left: 62.5%; } .semi-col-xl-order-15 { order: 15; } .semi-col-xl-16 { display: block; box-sizing: border-box; width: 66.6666666667%; } .semi-col-xl-push-16 { left: 66.6666666667%; } .semi-col-xl-pull-16 { right: 66.6666666667%; } .semi-col-xl-offset-16 { margin-left: 66.6666666667%; } .semi-col-xl-order-16 { order: 16; } .semi-col-xl-17 { display: block; box-sizing: border-box; width: 70.8333333333%; } .semi-col-xl-push-17 { left: 70.8333333333%; } .semi-col-xl-pull-17 { right: 70.8333333333%; } .semi-col-xl-offset-17 { margin-left: 70.8333333333%; } .semi-col-xl-order-17 { order: 17; } .semi-col-xl-18 { display: block; box-sizing: border-box; width: 75%; } .semi-col-xl-push-18 { left: 75%; } .semi-col-xl-pull-18 { right: 75%; } .semi-col-xl-offset-18 { margin-left: 75%; } .semi-col-xl-order-18 { order: 18; } .semi-col-xl-19 { display: block; box-sizing: border-box; width: 79.1666666667%; } .semi-col-xl-push-19 { left: 79.1666666667%; } .semi-col-xl-pull-19 { right: 79.1666666667%; } .semi-col-xl-offset-19 { margin-left: 79.1666666667%; } .semi-col-xl-order-19 { order: 19; } .semi-col-xl-20 { display: block; box-sizing: border-box; width: 83.3333333333%; } .semi-col-xl-push-20 { left: 83.3333333333%; } .semi-col-xl-pull-20 { right: 83.3333333333%; } .semi-col-xl-offset-20 { margin-left: 83.3333333333%; } .semi-col-xl-order-20 { order: 20; } .semi-col-xl-21 { display: block; box-sizing: border-box; width: 87.5%; } .semi-col-xl-push-21 { left: 87.5%; } .semi-col-xl-pull-21 { right: 87.5%; } .semi-col-xl-offset-21 { margin-left: 87.5%; } .semi-col-xl-order-21 { order: 21; } .semi-col-xl-22 { display: block; box-sizing: border-box; width: 91.6666666667%; } .semi-col-xl-push-22 { left: 91.6666666667%; } .semi-col-xl-pull-22 { right: 91.6666666667%; } .semi-col-xl-offset-22 { margin-left: 91.6666666667%; } .semi-col-xl-order-22 { order: 22; } .semi-col-xl-23 { display: block; box-sizing: border-box; width: 95.8333333333%; } .semi-col-xl-push-23 { left: 95.8333333333%; } .semi-col-xl-pull-23 { right: 95.8333333333%; } .semi-col-xl-offset-23 { margin-left: 95.8333333333%; } .semi-col-xl-order-23 { order: 23; } .semi-col-xl-24 { display: block; box-sizing: border-box; width: 100%; } .semi-col-xl-push-24 { left: 100%; } .semi-col-xl-pull-24 { right: 100%; } .semi-col-xl-offset-24 { margin-left: 100%; } .semi-col-xl-order-24 { order: 24; } .semi-rtl .semi-col-xl-1 { float: right; } .semi-rtl .semi-col-xl-2 { float: right; } .semi-rtl .semi-col-xl-3 { float: right; } .semi-rtl .semi-col-xl-4 { float: right; } .semi-rtl .semi-col-xl-5 { float: right; } .semi-rtl .semi-col-xl-6 { float: right; } .semi-rtl .semi-col-xl-7 { float: right; } .semi-rtl .semi-col-xl-8 { float: right; } .semi-rtl .semi-col-xl-9 { float: right; } .semi-rtl .semi-col-xl-10 { float: right; } .semi-rtl .semi-col-xl-11 { float: right; } .semi-rtl .semi-col-xl-12 { float: right; } .semi-rtl .semi-col-xl-13 { float: right; } .semi-rtl .semi-col-xl-14 { float: right; } .semi-rtl .semi-col-xl-15 { float: right; } .semi-rtl .semi-col-xl-16 { float: right; } .semi-rtl .semi-col-xl-17 { float: right; } .semi-rtl .semi-col-xl-18 { float: right; } .semi-rtl .semi-col-xl-19 { float: right; } .semi-rtl .semi-col-xl-20 { float: right; } .semi-rtl .semi-col-xl-21 { float: right; } .semi-rtl .semi-col-xl-22 { float: right; } .semi-rtl .semi-col-xl-23 { float: right; } .semi-rtl .semi-col-xl-24 { float: right; } .semi-rtl .semi-col-xl-offset-1 { margin-left: auto; margin-right: 4.1666666667%; } .semi-rtl .semi-col-xl-offset-2 { margin-left: auto; margin-right: 8.3333333333%; } .semi-rtl .semi-col-xl-offset-3 { margin-left: auto; margin-right: 12.5%; } .semi-rtl .semi-col-xl-offset-4 { margin-left: auto; margin-right: 16.6666666667%; } .semi-rtl .semi-col-xl-offset-5 { margin-left: auto; margin-right: 20.8333333333%; } .semi-rtl .semi-col-xl-offset-6 { margin-left: auto; margin-right: 25%; } .semi-rtl .semi-col-xl-offset-7 { margin-left: auto; margin-right: 29.1666666667%; } .semi-rtl .semi-col-xl-offset-8 { margin-left: auto; margin-right: 33.3333333333%; } .semi-rtl .semi-col-xl-offset-9 { margin-left: auto; margin-right: 37.5%; } .semi-rtl .semi-col-xl-offset-10 { margin-left: auto; margin-right: 41.6666666667%; } .semi-rtl .semi-col-xl-offset-11 { margin-left: auto; margin-right: 45.8333333333%; } .semi-rtl .semi-col-xl-offset-12 { margin-left: auto; margin-right: 50%; } .semi-rtl .semi-col-xl-offset-13 { margin-left: auto; margin-right: 54.1666666667%; } .semi-rtl .semi-col-xl-offset-14 { margin-left: auto; margin-right: 58.3333333333%; } .semi-rtl .semi-col-xl-offset-15 { margin-left: auto; margin-right: 62.5%; } .semi-rtl .semi-col-xl-offset-16 { margin-left: auto; margin-right: 66.6666666667%; } .semi-rtl .semi-col-xl-offset-17 { margin-left: auto; margin-right: 70.8333333333%; } .semi-rtl .semi-col-xl-offset-18 { margin-left: auto; margin-right: 75%; } .semi-rtl .semi-col-xl-offset-19 { margin-left: auto; margin-right: 79.1666666667%; } .semi-rtl .semi-col-xl-offset-20 { margin-left: auto; margin-right: 83.3333333333%; } .semi-rtl .semi-col-xl-offset-21 { margin-left: auto; margin-right: 87.5%; } .semi-rtl .semi-col-xl-offset-22 { margin-left: auto; margin-right: 91.6666666667%; } .semi-rtl .semi-col-xl-offset-23 { margin-left: auto; margin-right: 95.8333333333%; } .semi-rtl .semi-col-xl-offset-24 { margin-left: auto; margin-right: 100%; } } @media (min-width: 1600px) { .semi-col-xxl-1 { flex: 0 0 auto; float: left; } .semi-col-xxl-2 { flex: 0 0 auto; float: left; } .semi-col-xxl-3 { flex: 0 0 auto; float: left; } .semi-col-xxl-4 { flex: 0 0 auto; float: left; } .semi-col-xxl-5 { flex: 0 0 auto; float: left; } .semi-col-xxl-6 { flex: 0 0 auto; float: left; } .semi-col-xxl-7 { flex: 0 0 auto; float: left; } .semi-col-xxl-8 { flex: 0 0 auto; float: left; } .semi-col-xxl-9 { flex: 0 0 auto; float: left; } .semi-col-xxl-10 { flex: 0 0 auto; float: left; } .semi-col-xxl-11 { flex: 0 0 auto; float: left; } .semi-col-xxl-12 { flex: 0 0 auto; float: left; } .semi-col-xxl-13 { flex: 0 0 auto; float: left; } .semi-col-xxl-14 { flex: 0 0 auto; float: left; } .semi-col-xxl-15 { flex: 0 0 auto; float: left; } .semi-col-xxl-16 { flex: 0 0 auto; float: left; } .semi-col-xxl-17 { flex: 0 0 auto; float: left; } .semi-col-xxl-18 { flex: 0 0 auto; float: left; } .semi-col-xxl-19 { flex: 0 0 auto; float: left; } .semi-col-xxl-20 { flex: 0 0 auto; float: left; } .semi-col-xxl-21 { flex: 0 0 auto; float: left; } .semi-col-xxl-22 { flex: 0 0 auto; float: left; } .semi-col-xxl-23 { flex: 0 0 auto; float: left; } .semi-col-xxl-24 { flex: 0 0 auto; float: left; } .semi-col-xxl-1 { display: block; box-sizing: border-box; width: 4.1666666667%; } .semi-col-xxl-push-1 { left: 4.1666666667%; } .semi-col-xxl-pull-1 { right: 4.1666666667%; } .semi-col-xxl-offset-1 { margin-left: 4.1666666667%; } .semi-col-xxl-order-1 { order: 1; } .semi-col-xxl-2 { display: block; box-sizing: border-box; width: 8.3333333333%; } .semi-col-xxl-push-2 { left: 8.3333333333%; } .semi-col-xxl-pull-2 { right: 8.3333333333%; } .semi-col-xxl-offset-2 { margin-left: 8.3333333333%; } .semi-col-xxl-order-2 { order: 2; } .semi-col-xxl-3 { display: block; box-sizing: border-box; width: 12.5%; } .semi-col-xxl-push-3 { left: 12.5%; } .semi-col-xxl-pull-3 { right: 12.5%; } .semi-col-xxl-offset-3 { margin-left: 12.5%; } .semi-col-xxl-order-3 { order: 3; } .semi-col-xxl-4 { display: block; box-sizing: border-box; width: 16.6666666667%; } .semi-col-xxl-push-4 { left: 16.6666666667%; } .semi-col-xxl-pull-4 { right: 16.6666666667%; } .semi-col-xxl-offset-4 { margin-left: 16.6666666667%; } .semi-col-xxl-order-4 { order: 4; } .semi-col-xxl-5 { display: block; box-sizing: border-box; width: 20.8333333333%; } .semi-col-xxl-push-5 { left: 20.8333333333%; } .semi-col-xxl-pull-5 { right: 20.8333333333%; } .semi-col-xxl-offset-5 { margin-left: 20.8333333333%; } .semi-col-xxl-order-5 { order: 5; } .semi-col-xxl-6 { display: block; box-sizing: border-box; width: 25%; } .semi-col-xxl-push-6 { left: 25%; } .semi-col-xxl-pull-6 { right: 25%; } .semi-col-xxl-offset-6 { margin-left: 25%; } .semi-col-xxl-order-6 { order: 6; } .semi-col-xxl-7 { display: block; box-sizing: border-box; width: 29.1666666667%; } .semi-col-xxl-push-7 { left: 29.1666666667%; } .semi-col-xxl-pull-7 { right: 29.1666666667%; } .semi-col-xxl-offset-7 { margin-left: 29.1666666667%; } .semi-col-xxl-order-7 { order: 7; } .semi-col-xxl-8 { display: block; box-sizing: border-box; width: 33.3333333333%; } .semi-col-xxl-push-8 { left: 33.3333333333%; } .semi-col-xxl-pull-8 { right: 33.3333333333%; } .semi-col-xxl-offset-8 { margin-left: 33.3333333333%; } .semi-col-xxl-order-8 { order: 8; } .semi-col-xxl-9 { display: block; box-sizing: border-box; width: 37.5%; } .semi-col-xxl-push-9 { left: 37.5%; } .semi-col-xxl-pull-9 { right: 37.5%; } .semi-col-xxl-offset-9 { margin-left: 37.5%; } .semi-col-xxl-order-9 { order: 9; } .semi-col-xxl-10 { display: block; box-sizing: border-box; width: 41.6666666667%; } .semi-col-xxl-push-10 { left: 41.6666666667%; } .semi-col-xxl-pull-10 { right: 41.6666666667%; } .semi-col-xxl-offset-10 { margin-left: 41.6666666667%; } .semi-col-xxl-order-10 { order: 10; } .semi-col-xxl-11 { display: block; box-sizing: border-box; width: 45.8333333333%; } .semi-col-xxl-push-11 { left: 45.8333333333%; } .semi-col-xxl-pull-11 { right: 45.8333333333%; } .semi-col-xxl-offset-11 { margin-left: 45.8333333333%; } .semi-col-xxl-order-11 { order: 11; } .semi-col-xxl-12 { display: block; box-sizing: border-box; width: 50%; } .semi-col-xxl-push-12 { left: 50%; } .semi-col-xxl-pull-12 { right: 50%; } .semi-col-xxl-offset-12 { margin-left: 50%; } .semi-col-xxl-order-12 { order: 12; } .semi-col-xxl-13 { display: block; box-sizing: border-box; width: 54.1666666667%; } .semi-col-xxl-push-13 { left: 54.1666666667%; } .semi-col-xxl-pull-13 { right: 54.1666666667%; } .semi-col-xxl-offset-13 { margin-left: 54.1666666667%; } .semi-col-xxl-order-13 { order: 13; } .semi-col-xxl-14 { display: block; box-sizing: border-box; width: 58.3333333333%; } .semi-col-xxl-push-14 { left: 58.3333333333%; } .semi-col-xxl-pull-14 { right: 58.3333333333%; } .semi-col-xxl-offset-14 { margin-left: 58.3333333333%; } .semi-col-xxl-order-14 { order: 14; } .semi-col-xxl-15 { display: block; box-sizing: border-box; width: 62.5%; } .semi-col-xxl-push-15 { left: 62.5%; } .semi-col-xxl-pull-15 { right: 62.5%; } .semi-col-xxl-offset-15 { margin-left: 62.5%; } .semi-col-xxl-order-15 { order: 15; } .semi-col-xxl-16 { display: block; box-sizing: border-box; width: 66.6666666667%; } .semi-col-xxl-push-16 { left: 66.6666666667%; } .semi-col-xxl-pull-16 { right: 66.6666666667%; } .semi-col-xxl-offset-16 { margin-left: 66.6666666667%; } .semi-col-xxl-order-16 { order: 16; } .semi-col-xxl-17 { display: block; box-sizing: border-box; width: 70.8333333333%; } .semi-col-xxl-push-17 { left: 70.8333333333%; } .semi-col-xxl-pull-17 { right: 70.8333333333%; } .semi-col-xxl-offset-17 { margin-left: 70.8333333333%; } .semi-col-xxl-order-17 { order: 17; } .semi-col-xxl-18 { display: block; box-sizing: border-box; width: 75%; } .semi-col-xxl-push-18 { left: 75%; } .semi-col-xxl-pull-18 { right: 75%; } .semi-col-xxl-offset-18 { margin-left: 75%; } .semi-col-xxl-order-18 { order: 18; } .semi-col-xxl-19 { display: block; box-sizing: border-box; width: 79.1666666667%; } .semi-col-xxl-push-19 { left: 79.1666666667%; } .semi-col-xxl-pull-19 { right: 79.1666666667%; } .semi-col-xxl-offset-19 { margin-left: 79.1666666667%; } .semi-col-xxl-order-19 { order: 19; } .semi-col-xxl-20 { display: block; box-sizing: border-box; width: 83.3333333333%; } .semi-col-xxl-push-20 { left: 83.3333333333%; } .semi-col-xxl-pull-20 { right: 83.3333333333%; } .semi-col-xxl-offset-20 { margin-left: 83.3333333333%; } .semi-col-xxl-order-20 { order: 20; } .semi-col-xxl-21 { display: block; box-sizing: border-box; width: 87.5%; } .semi-col-xxl-push-21 { left: 87.5%; } .semi-col-xxl-pull-21 { right: 87.5%; } .semi-col-xxl-offset-21 { margin-left: 87.5%; } .semi-col-xxl-order-21 { order: 21; } .semi-col-xxl-22 { display: block; box-sizing: border-box; width: 91.6666666667%; } .semi-col-xxl-push-22 { left: 91.6666666667%; } .semi-col-xxl-pull-22 { right: 91.6666666667%; } .semi-col-xxl-offset-22 { margin-left: 91.6666666667%; } .semi-col-xxl-order-22 { order: 22; } .semi-col-xxl-23 { display: block; box-sizing: border-box; width: 95.8333333333%; } .semi-col-xxl-push-23 { left: 95.8333333333%; } .semi-col-xxl-pull-23 { right: 95.8333333333%; } .semi-col-xxl-offset-23 { margin-left: 95.8333333333%; } .semi-col-xxl-order-23 { order: 23; } .semi-col-xxl-24 { display: block; box-sizing: border-box; width: 100%; } .semi-col-xxl-push-24 { left: 100%; } .semi-col-xxl-pull-24 { right: 100%; } .semi-col-xxl-offset-24 { margin-left: 100%; } .semi-col-xxl-order-24 { order: 24; } .semi-rtl .semi-col-xxl-1 { float: right; } .semi-rtl .semi-col-xxl-2 { float: right; } .semi-rtl .semi-col-xxl-3 { float: right; } .semi-rtl .semi-col-xxl-4 { float: right; } .semi-rtl .semi-col-xxl-5 { float: right; } .semi-rtl .semi-col-xxl-6 { float: right; } .semi-rtl .semi-col-xxl-7 { float: right; } .semi-rtl .semi-col-xxl-8 { float: right; } .semi-rtl .semi-col-xxl-9 { float: right; } .semi-rtl .semi-col-xxl-10 { float: right; } .semi-rtl .semi-col-xxl-11 { float: right; } .semi-rtl .semi-col-xxl-12 { float: right; } .semi-rtl .semi-col-xxl-13 { float: right; } .semi-rtl .semi-col-xxl-14 { float: right; } .semi-rtl .semi-col-xxl-15 { float: right; } .semi-rtl .semi-col-xxl-16 { float: right; } .semi-rtl .semi-col-xxl-17 { float: right; } .semi-rtl .semi-col-xxl-18 { float: right; } .semi-rtl .semi-col-xxl-19 { float: right; } .semi-rtl .semi-col-xxl-20 { float: right; } .semi-rtl .semi-col-xxl-21 { float: right; } .semi-rtl .semi-col-xxl-22 { float: right; } .semi-rtl .semi-col-xxl-23 { float: right; } .semi-rtl .semi-col-xxl-24 { float: right; } .semi-rtl .semi-col-xxl-offset-1 { margin-left: auto; margin-right: 4.1666666667%; } .semi-rtl .semi-col-xxl-offset-2 { margin-left: auto; margin-right: 8.3333333333%; } .semi-rtl .semi-col-xxl-offset-3 { margin-left: auto; margin-right: 12.5%; } .semi-rtl .semi-col-xxl-offset-4 { margin-left: auto; margin-right: 16.6666666667%; } .semi-rtl .semi-col-xxl-offset-5 { margin-left: auto; margin-right: 20.8333333333%; } .semi-rtl .semi-col-xxl-offset-6 { margin-left: auto; margin-right: 25%; } .semi-rtl .semi-col-xxl-offset-7 { margin-left: auto; margin-right: 29.1666666667%; } .semi-rtl .semi-col-xxl-offset-8 { margin-left: auto; margin-right: 33.3333333333%; } .semi-rtl .semi-col-xxl-offset-9 { margin-left: auto; margin-right: 37.5%; } .semi-rtl .semi-col-xxl-offset-10 { margin-left: auto; margin-right: 41.6666666667%; } .semi-rtl .semi-col-xxl-offset-11 { margin-left: auto; margin-right: 45.8333333333%; } .semi-rtl .semi-col-xxl-offset-12 { margin-left: auto; margin-right: 50%; } .semi-rtl .semi-col-xxl-offset-13 { margin-left: auto; margin-right: 54.1666666667%; } .semi-rtl .semi-col-xxl-offset-14 { margin-left: auto; margin-right: 58.3333333333%; } .semi-rtl .semi-col-xxl-offset-15 { margin-left: auto; margin-right: 62.5%; } .semi-rtl .semi-col-xxl-offset-16 { margin-left: auto; margin-right: 66.6666666667%; } .semi-rtl .semi-col-xxl-offset-17 { margin-left: auto; margin-right: 70.8333333333%; } .semi-rtl .semi-col-xxl-offset-18 { margin-left: auto; margin-right: 75%; } .semi-rtl .semi-col-xxl-offset-19 { margin-left: auto; margin-right: 79.1666666667%; } .semi-rtl .semi-col-xxl-offset-20 { margin-left: auto; margin-right: 83.3333333333%; } .semi-rtl .semi-col-xxl-offset-21 { margin-left: auto; margin-right: 87.5%; } .semi-rtl .semi-col-xxl-offset-22 { margin-left: auto; margin-right: 91.6666666667%; } .semi-rtl .semi-col-xxl-offset-23 { margin-left: auto; margin-right: 95.8333333333%; } .semi-rtl .semi-col-xxl-offset-24 { margin-left: auto; margin-right: 100%; } } .semi-rtl .semi-row, .semi-rtl .semi-row-flex, .semi-portal-rtl .semi-row, .semi-portal-rtl .semi-row-flex { direction: rtl; } .semi-highlight-tag { color: var(--semi-color-highlight); background-color: var(--semi-color-highlight-bg); font-weight: 600; } .semi-image { border-radius: var(--semi-border-radius-small); position: relative; display: inline-block; overflow: hidden; } .semi-image-img { vertical-align: top; border-radius: inherit; user-select: none; } .semi-image-img-preview { cursor: zoom-in; } .semi-image-img-error { opacity: 0; } .semi-image-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .semi-image-status { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; border-radius: var(--semi-border-radius-small); background-color: var(--semi-color-fill-0); color: var(--semi-color-disabled-text); } .semi-image-preview { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1070; background-color: var(--semi-color-overlay-bg); transition: opacity 500ms; overflow: hidden; } .semi-image-preview-popup { position: absolute; } .semi-image-preview .semi-image-preview-hide { opacity: 0; } .semi-image-preview-icon { display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; border-radius: 50%; position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0, 0, 0, 0.75); cursor: pointer; color: var(--semi-color-white); } .semi-image-preview-prev { left: 24px; } .semi-image-preview-next { right: 24px; } .semi-image-preview-header { position: absolute; top: 0; left: 0; right: 0; font-weight: normal; font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; color: var(--semi-color-white); height: 60px; display: flex; justify-content: space-between; align-items: center; padding: 0 24px; z-index: 1; } .semi-image-preview-header-title { flex: 1; } .semi-image-preview-header-close { display: flex; justify-content: center; align-items: center; cursor: pointer; width: 30px; height: 30px; border-radius: 50%; } .semi-image-preview-header-close:hover { background-color: rgba(0, 0, 0, 0.75); } .semi-image-preview-footer { display: flex; align-items: center; } .semi-image-preview-footer-content { padding: 0 16px; background: rgba(0, 0, 0, 0.75); border-radius: var(--semi-border-radius-medium); height: 48px; } .semi-image-preview-footer-wrapper { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); } .semi-image-preview-footer-page { user-select: none; color: var(--semi-color-white); font-size: 16px; line-height: 22px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; margin: 0 12px; } .semi-image-preview-footer .semi-icon { color: var(--semi-color-white); cursor: pointer; } .semi-image-preview-footer-gap { margin-left: 16px; } .semi-image-preview-footer .semi-slider { width: 132px; padding: 0 16px; } .semi-image-preview-footer .semi-slider .semi-slider-rail { color: var(--semi-color-white); height: 2px; } .semi-image-preview-footer .semi-slider .semi-slider-track { height: 2px; } .semi-image-preview-footer .semi-slider .semi-slider-handle { width: 16px; height: 16px; margin-top: 8px; box-sizing: border-box; } .semi-image-preview-footer .semi-divider { background: rgba(255, 255, 255, 0.5); margin: 0 16px; } .semi-image-preview-footer .semi-image-preview-footer-disabled { color: rgba(249, 249, 249, 0.35); cursor: default; pointer-events: none; } .semi-image-preview-image { position: relative; height: 100%; } .semi-image-preview-image-img { position: absolute; transform: scale3d(1, 1, 1) var(--semi-transform-rotate-none); transition: transform 300ms 0s; z-index: 0; user-select: none; } .semi-image-preview-image-spin { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .semi-image-preview-image-spin .semi-spin-wrapper { color: #ccc; } @keyframes spinner { to { transform: var(--semi-transform_rotate-clockwise360deg); } } img[src=""], img:not([src]) { opacity: 0; } .semi-rtl .semi-image-preview, .semi-portal-rtl .semi-image-preview { direction: rtl; } .semi-rtl .semi-image-preview-group, .semi-portal-rtl .semi-image-preview-group { direction: rtl; } .semi-rtl .semi-image-preview-prev, .semi-portal-rtl .semi-image-preview-prev { right: 24px; left: auto; transform: var(--semi-transform_rotate-clockwise180deg); } .semi-rtl .semi-image-preview-next, .semi-portal-rtl .semi-image-preview-next { left: 24px; right: auto; transform: var(--semi-transform_rotate-clockwise180deg); } .semi-rtl .semi-image-preview-footer-page, .semi-portal-rtl .semi-image-preview-footer-page { display: flex; direction: rtl; } .semi-rtl .semi-image-preview-footer-gap, .semi-portal-rtl .semi-image-preview-footer-gap { margin-right: 16px; margin-left: 0; } .semi-rtl .semi-image-preview-footer .semi-icon-chevron_left, .semi-portal-rtl .semi-image-preview-footer .semi-icon-chevron_left { transform: var(--semi-transform_rotate-clockwise180deg); } .semi-rtl .semi-image-preview-footer .semi-icon-chevron_right, .semi-portal-rtl .semi-image-preview-footer .semi-icon-chevron_right { transform: var(--semi-transform_rotate-clockwise180deg); } @keyframes semi-input-active { from { transform: scale(1); } to { transform: scale(0.97); } } @keyframes semi-input-inactive { from { transform: scale(0.97); } to { transform: scale(1); } } .semi-input { transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); transform: scale(var(--semi-transform_scale-none)); } .semi-input-wrapper { display: inline-block; position: relative; vertical-align: middle; box-shadow: none; font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; background-color: var(--semi-color-fill-0); border: 1px transparent solid; border-radius: var(--semi-border-radius-small); width: 100%; outline: none; cursor: text; box-sizing: border-box; color: var(--semi-color-text-0); transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); transform: scale(var(--semi-transform_scale-none)); } .semi-input-wrapper-default { height: 32px; font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 30px; } .semi-input-wrapper-small { height: 24px; font-size: 16px; line-height: 22px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 22px; } .semi-input-wrapper-large { height: 40px; font-size: 16px; line-height: 22px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 38px; } .semi-input-wrapper:hover { background-color: var(--semi-color-fill-1); border-color: transparent; } .semi-input-wrapper-focus { background-color: var(--semi-color-fill-0); border: var(--semi-color-focus-border) solid 1px; } .semi-input-wrapper-focus:hover { background-color: var(--semi-color-fill-0); border-color: var(--semi-color-focus-border); } .semi-input-wrapper-focus:active { background-color: var(--semi-color-fill-2); border-color: var(--semi-color-focus-border); } .semi-input-wrapper.semi-input-readonly { cursor: default; } .semi-input-wrapper-error { background-color: var(--semi-color-danger-light-default); border-color: var(--semi-color-danger-light-default); } .semi-input-wrapper-error:hover { background-color: var(--semi-color-danger-light-hover); border-color: var(--semi-color-danger-light-hover); } .semi-input-wrapper-error.semi-input-wrapper-focus { background-color: var(--semi-color-danger-light-default); border-color: var(--semi-color-danger); } .semi-input-wrapper-error:active { background-color: var(--semi-color-danger-light-active); border-color: var(--semi-color-danger); } .semi-input-wrapper-warning { background-color: var(--semi-color-warning-light-default); border-color: var(--semi-color-warning-light-default); } .semi-input-wrapper-warning:hover { background-color: var(--semi-color-warning-light-hover); border-color: var(--semi-color-warning-light-hover); } .semi-input-wrapper-warning.semi-input-wrapper-focus { background-color: var(--semi-color-warning-light-default); border-color: var(--semi-color-warning); } .semi-input-wrapper-warning:active { background-color: var(--semi-color-warning-light-active); border-color: var(--semi-color-warning); } .semi-input-wrapper__with-prefix { display: inline-flex; align-items: center; } .semi-input-wrapper__with-prefix .semi-input { padding-left: 0; } .semi-input-wrapper__with-suffix { display: inline-flex; align-items: center; } .semi-input-wrapper__with-suffix .semi-input { padding-right: 0; } .semi-input-wrapper-clearable, .semi-input-wrapper-modebtn { display: inline-flex; align-items: center; } .semi-input-wrapper-hidden { border: none; } .semi-input-wrapper .semi-icon { color: var(--semi-color-text-2); } .semi-input-wrapper .semi-input-clearbtn, .semi-input-wrapper .semi-input-modebtn { color: var(--semi-color-primary-hover); } .semi-input-wrapper .semi-input-clearbtn > svg, .semi-input-wrapper .semi-input-modebtn > svg { pointer-events: none; } .semi-input-wrapper .semi-input-clearbtn:hover, .semi-input-wrapper .semi-input-modebtn:hover { cursor: pointer; } .semi-input-wrapper .semi-input-clearbtn:hover .semi-icon, .semi-input-wrapper .semi-input-modebtn:hover .semi-icon { color: var(--semi-color-primary-hover); } .semi-input-wrapper .semi-input-clearbtn:focus-visible, .semi-input-wrapper .semi-input-modebtn:focus-visible { border-radius: var(--semi-border-radius-small); outline: 2px solid var(--semi-color-primary-light-active); outline-offset: -1px; } .semi-input-wrapper__with-suffix-icon.semi-input-wrapper-clearable:not(.semi-input-wrapper__with-suffix-hidden) .semi-input-clearbtn { min-width: 24px; justify-content: flex-end; } .semi-input-wrapper-modebtn.semi-input-wrapper-clearable .semi-input-clearbtn { min-width: 16px; justify-content: center; } .semi-input-wrapper.semi-input-wrapper__with-append-only .semi-input { border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0; } .semi-input-wrapper.semi-input-wrapper__with-append-only .semi-input:not(:last-child) { border-right-style: none; border-radius: 0; } .semi-input-wrapper.semi-input-wrapper__with-prepend-only .semi-input { border-radius: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small); } .semi-input-wrapper.semi-input-wrapper__with-prepend-only .semi-input:not(:last-child) { border-right-style: none; border-radius: 0; } .semi-input-wrapper.semi-input-wrapper__with-prepend, .semi-input-wrapper.semi-input-wrapper__with-append { display: inline-flex; align-items: center; background-color: transparent; } .semi-input-wrapper.semi-input-wrapper__with-prepend:hover, .semi-input-wrapper.semi-input-wrapper__with-append:hover { background-color: transparent; } .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-focus, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-focus { border: 1px transparent solid; background-color: transparent; } .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input { background-color: var(--semi-color-fill-0); border: 1px transparent solid; } .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:hover, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:hover { background-color: var(--semi-color-fill-1); } .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:hover + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:hover ~ .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:hover + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:hover ~ .semi-input-modebtn { background-color: var(--semi-color-fill-1); } .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:focus, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:focus { border: 1px var(--semi-color-focus-border) solid; background-color: var(--semi-color-fill-0); } .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:focus.semi-input-sibling-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:focus.semi-input-sibling-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:focus.semi-input-sibling-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:focus.semi-input-sibling-modebtn { border-right-style: none; } .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:focus.semi-input-sibling-modebtn + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:focus.semi-input-sibling-modebtn + .semi-input-clearbtn { border-right-style: none; } .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:focus + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:focus ~ .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:focus + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:focus ~ .semi-input-modebtn { box-sizing: border-box; background-color: var(--semi-color-fill-0); } .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:focus + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:focus + .semi-input-clearbtn { border: 1px var(--semi-color-focus-border) solid; border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0; border-left-style: none; } .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:focus + .semi-input-clearbtn:not(:last-child), .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:focus + .semi-input-clearbtn:not(:last-child) { border-radius: 0; } .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:focus ~ .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:focus ~ .semi-input-modebtn { border: 1px var(--semi-color-focus-border) solid; border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0; border-left-style: none; } .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:focus ~ .semi-input-modebtn:not(:last-child), .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:focus ~ .semi-input-modebtn:not(:last-child) { border-radius: 0; } .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:active, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:active { background-color: var(--semi-color-fill-2); } .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:active + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:active ~ .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:active + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:active ~ .semi-input-modebtn { background-color: var(--semi-color-fill-2); } .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-clearbtn:hover, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-modebtn:hover, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-clearbtn:hover, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-modebtn:hover { background-color: var(--semi-color-fill-0); } .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-clearbtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-modebtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-clearbtn:hover:last-child, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-modebtn:hover:last-child, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-clearbtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-modebtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-clearbtn:hover:last-child, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-modebtn:hover:last-child { border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0; } .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error { border-color: transparent; } .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input { background-color: var(--semi-color-danger-light-default); border-color: var(--semi-color-danger-light-default); } .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input:hover, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input:hover { background-color: var(--semi-color-danger-light-hover); border-color: var(--semi-color-danger-light-hover); } .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input:hover + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input:hover + .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input:hover + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input:hover + .semi-input-modebtn { background-color: var(--semi-color-danger-light-hover); } .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input:focus, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input:focus { background-color: var(--semi-color-danger-light-default); border-color: var(--semi-color-danger); } .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input:focus + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input:focus + .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input:focus + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input:focus + .semi-input-modebtn { background-color: var(--semi-color-danger-light-default); border-color: var(--semi-color-danger); } .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input:active, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input:active { background-color: var(--semi-color-danger-light-active); } .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input:active + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input:active + .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input:active + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input:active + .semi-input-modebtn { background-color: var(--semi-color-danger-light-active); border-color: var(--semi-color-danger); } .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input-clearbtn:hover, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input-modebtn:hover, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input-clearbtn:hover, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input-modebtn:hover { background-color: var(--semi-color-danger-light-default); } .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input-clearbtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input-modebtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input-clearbtn:hover:last-child, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input-modebtn:hover:last-child, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input-clearbtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input-modebtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input-clearbtn:hover:last-child, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input-modebtn:hover:last-child { border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0; } .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning { border-color: transparent; } .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input { background-color: var(--semi-color-warning-light-default); border-color: var(--semi-color-warning-light-default); } .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input:hover, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input:hover { background-color: var(--semi-color-warning-light-hover); border-color: var(--semi-color-warning-light-hover); } .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input:hover + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input:hover + .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input:hover + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input:hover + .semi-input-modebtn { background-color: var(--semi-color-warning-light-hover); } .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input:focus, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input:focus { background-color: var(--semi-color-warning-light-default); border-color: var(--semi-color-warning); } .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input:focus + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input:focus + .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input:focus + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input:focus + .semi-input-modebtn { background-color: var(--semi-color-warning-light-default); border-color: var(--semi-color-warning); } .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input:active, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input:active { background-color: var(--semi-color-warning-light-active); } .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input:active + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input:active + .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input:active + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input:active + .semi-input-modebtn { background-color: var(--semi-color-warning-light-active); border-color: var(--semi-color-warning); } .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input-clearbtn:hover, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input-modebtn:hover, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input-clearbtn:hover, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input-modebtn:hover { background-color: var(--semi-color-warning-light-default); } .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input-clearbtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input-modebtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input-clearbtn:hover:last-child, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input-modebtn:hover:last-child, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input-clearbtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input-modebtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input-clearbtn:hover:last-child, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input-modebtn:hover:last-child { border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0; } .semi-input-wrapper-disabled { cursor: not-allowed; color: var(--semi-color-disabled-text); background-color: var(--semi-color-disabled-fill); -webkit-text-fill-color: var(--semi-color-disabled-text); } .semi-input-wrapper-disabled:hover { background-color: var(--semi-color-disabled-fill); } .semi-input-wrapper-disabled .semi-input-append, .semi-input-wrapper-disabled .semi-input-prepend, .semi-input-wrapper-disabled .semi-input-suffix, .semi-input-wrapper-disabled .semi-input-prefix, .semi-input-wrapper-disabled .semi-icon { color: var(--semi-color-disabled-text); } .semi-input { border: none; outline: none; width: 100%; color: inherit; padding-left: 12px; padding-right: 12px; background-color: transparent; box-sizing: border-box; } .semi-input[type=password]::-ms-reveal, .semi-input[type=password]::-ms-clear { display: none; } .semi-input[type=search]::-webkit-search-cancel-button { display: none; } .semi-input::placeholder { color: var(--semi-color-text-2); } .semi-input-large { height: 38px; font-size: 16px; line-height: 22px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 38px; } .semi-input-small { height: 22px; font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 22px; } .semi-input-default { height: 30px; font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 30px; } .semi-input-disabled { cursor: not-allowed; color: inherit; } .semi-input-inset-label { margin-right: 12px; font-weight: 600; font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; color: var(--semi-color-text-2); flex-shrink: 0; white-space: nowrap; } .semi-input-prefix, .semi-input-suffix { display: flex; justify-content: center; align-items: center; } .semi-input-prefix-text, .semi-input-suffix-text { margin: 0 12px; color: var(--semi-color-text-2); font-weight: 600; white-space: nowrap; } .semi-input-prefix-icon, .semi-input-suffix-icon { color: var(--semi-color-text-2); margin: 0 8px; } .semi-input-suffix { display: flex; justify-content: center; align-items: center; } .semi-input-clearbtn, .semi-input-modebtn { display: flex; align-items: center; height: 100%; justify-content: center; min-width: 32px; } .semi-input-clearbtn + .semi-input-suffix + .semi-input-suffix-text { margin-left: 0; } .semi-input-clearbtn + .semi-input-suffix + .semi-input-suffix-icon { margin-left: 0; } .semi-input-suffix-hidden { display: none; } .semi-input-prepend, .semi-input-append { height: 100%; display: flex; align-items: center; background-color: var(--semi-color-fill-0); color: var(--semi-color-text-2); font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; flex-shrink: 0; } .semi-input-prepend-icon, .semi-input-prepend-text, .semi-input-append-icon, .semi-input-append-text { padding: 0 12px; } .semi-input-append { border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0; border-left: 1px transparent solid; } .semi-input-prepend { border-radius: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small); border-right: 1px transparent solid; } .semi-input-disabled::placeholder { color: var(--semi-color-disabled-text); } .semi-input-group { display: inline-flex; align-items: center; align-content: center; flex-wrap: wrap; } .semi-input-group .semi-select, .semi-input-group .semi-tagInput, .semi-input-group .semi-cascader, .semi-input-group .semi-tree-select, .semi-input-group > .semi-input-wrapper { border-radius: 0; } .semi-input-group .semi-select:first-child, .semi-input-group .semi-tagInput:first-child, .semi-input-group .semi-cascader:first-child, .semi-input-group .semi-tree-select:first-child, .semi-input-group > .semi-input-wrapper:first-child { border-radius: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small); } .semi-input-group .semi-select:last-child, .semi-input-group .semi-tagInput:last-child, .semi-input-group .semi-cascader:last-child, .semi-input-group .semi-tree-select:last-child, .semi-input-group > .semi-input-wrapper:last-child { border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0; } .semi-input-group .semi-select:not(:last-child), .semi-input-group .semi-tagInput:not(:last-child), .semi-input-group .semi-cascader:not(:last-child), .semi-input-group .semi-tree-select:not(:last-child), .semi-input-group > .semi-input-wrapper:not(:last-child) { position: relative; } .semi-input-group .semi-select:not(:last-child)::after, .semi-input-group .semi-tagInput:not(:last-child)::after, .semi-input-group .semi-cascader:not(:last-child)::after, .semi-input-group .semi-tree-select:not(:last-child)::after, .semi-input-group > .semi-input-wrapper:not(:last-child)::after { content: ""; background-color: var(--semi-color-border); width: 1px; position: absolute; right: -1px; top: 1px; bottom: 1px; } .semi-input-group .semi-select { overflow-y: visible; } .semi-input-group .semi-input-number, .semi-input-group .semi-datepicker, .semi-input-group .semi-timepicker, .semi-input-group .semi-autocomplete { border-radius: 0; } .semi-input-group .semi-input-number .semi-datepicker-range-input, .semi-input-group .semi-datepicker .semi-datepicker-range-input, .semi-input-group .semi-timepicker .semi-datepicker-range-input, .semi-input-group .semi-autocomplete .semi-datepicker-range-input { border-radius: 0; } .semi-input-group .semi-input-number:first-child .semi-input-wrapper, .semi-input-group .semi-input-number:first-child .semi-datepicker-range-input, .semi-input-group .semi-datepicker:first-child .semi-input-wrapper, .semi-input-group .semi-datepicker:first-child .semi-datepicker-range-input, .semi-input-group .semi-timepicker:first-child .semi-input-wrapper, .semi-input-group .semi-timepicker:first-child .semi-datepicker-range-input, .semi-input-group .semi-autocomplete:first-child .semi-input-wrapper, .semi-input-group .semi-autocomplete:first-child .semi-datepicker-range-input { border-radius: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small); } .semi-input-group .semi-input-number:last-child .semi-input-wrapper, .semi-input-group .semi-input-number:last-child .semi-datepicker-range-input, .semi-input-group .semi-datepicker:last-child .semi-input-wrapper, .semi-input-group .semi-datepicker:last-child .semi-datepicker-range-input, .semi-input-group .semi-timepicker:last-child .semi-input-wrapper, .semi-input-group .semi-timepicker:last-child .semi-datepicker-range-input, .semi-input-group .semi-autocomplete:last-child .semi-input-wrapper, .semi-input-group .semi-autocomplete:last-child .semi-datepicker-range-input { border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0; } .semi-input-group .semi-input-number:not(:last-child), .semi-input-group .semi-datepicker:not(:last-child), .semi-input-group .semi-timepicker:not(:last-child), .semi-input-group .semi-autocomplete:not(:last-child) { position: relative; } .semi-input-group .semi-input-number:not(:last-child)::after, .semi-input-group .semi-datepicker:not(:last-child)::after, .semi-input-group .semi-timepicker:not(:last-child)::after, .semi-input-group .semi-autocomplete:not(:last-child)::after { content: ""; background-color: var(--semi-color-border); width: 1px; position: absolute; right: -1px; top: 1px; bottom: 1px; } .semi-input-group-wrapper-with-top-label { margin-top: 16px; margin-bottom: 16px; } .semi-input-group-wrapper-with-top-label .semi-input-group { display: flex; } .semi-input-group-wrapper-with-top-label .semi-input-group .semi-form-field { margin-top: 0; margin-bottom: 0; } .semi-input-borderless:not(:focus-within):not(:hover) { background-color: transparent; border-color: transparent; } .semi-input-borderless:focus-within:not(:active) { background-color: transparent; } .semi-input-borderless.semi-input-wrapper-error:not(:focus-within) { border-color: var(--semi-color-danger); } .semi-input-borderless.semi-input-wrapper-warning:not(:focus-within) { border-color: var(--semi-color-warning); } .semi-rtl .semi-input-wrapper, .semi-portal-rtl .semi-input-wrapper { direction: rtl; } .semi-rtl .semi-input-wrapper__with-prefix .semi-input, .semi-portal-rtl .semi-input-wrapper__with-prefix .semi-input { padding-left: auto; padding-right: 0; } .semi-rtl .semi-input-wrapper__with-suffix .semi-input, .semi-portal-rtl .semi-input-wrapper__with-suffix .semi-input { padding-right: auto; padding-left: 0; } .semi-rtl .semi-input, .semi-portal-rtl .semi-input { padding-left: 12px; padding-right: 12px; } .semi-rtl .semi-input-inset-label, .semi-portal-rtl .semi-input-inset-label { margin-right: auto; margin-left: 12px; } .semi-rtl .semi-input-clearbtn + .semi-rtl .semi-input-suffix + .semi-input-suffix-text, .semi-rtl .semi-input-clearbtn + .semi-portal-rtl .semi-input-suffix + .semi-input-suffix-text, .semi-portal-rtl .semi-input-clearbtn + .semi-rtl .semi-input-suffix + .semi-input-suffix-text, .semi-portal-rtl .semi-input-clearbtn + .semi-portal-rtl .semi-input-suffix + .semi-input-suffix-text { margin-left: auto; margin-right: 0; } .semi-rtl .semi-input-clearbtn + .semi-rtl .semi-input-suffix + .semi-input-suffix-icon, .semi-rtl .semi-input-clearbtn + .semi-portal-rtl .semi-input-suffix + .semi-input-suffix-icon, .semi-portal-rtl .semi-input-clearbtn + .semi-rtl .semi-input-suffix + .semi-input-suffix-icon, .semi-portal-rtl .semi-input-clearbtn + .semi-portal-rtl .semi-input-suffix + .semi-input-suffix-icon { margin-left: auto; margin-right: 0; } .semi-rtl .semi-input-append, .semi-portal-rtl .semi-input-append { border-left: 0; border-right: 1px transparent solid; } .semi-rtl .semi-input-prepend, .semi-portal-rtl .semi-input-prepend { border-right: 0; border-left: 1px transparent solid; } .semi-rtl .semi-input-group .semi-select:not(:last-child)::after, .semi-rtl .semi-input-group .semi-cascader:not(:last-child)::after, .semi-rtl .semi-input-group .semi-tree-select:not(:last-child)::after, .semi-rtl .semi-input-group > .semi-input-wrapper:not(:last-child)::after, .semi-portal-rtl .semi-input-group .semi-select:not(:last-child)::after, .semi-portal-rtl .semi-input-group .semi-cascader:not(:last-child)::after, .semi-portal-rtl .semi-input-group .semi-tree-select:not(:last-child)::after, .semi-portal-rtl .semi-input-group > .semi-input-wrapper:not(:last-child)::after { right: auto; left: -1px; } .semi-rtl .semi-input-group .semi-input-number:not(:last-child)::after, .semi-portal-rtl .semi-input-group .semi-input-number:not(:last-child)::after { right: auto; left: -1px; } .semi-rtl .semi-input-textarea-wrapper, .semi-portal-rtl .semi-input-textarea-wrapper { direction: rtl; } .semi-rtl .semi-input-textarea-counter, .semi-portal-rtl .semi-input-textarea-counter { text-align: left; } .semi-rtl .semi-input-textarea-showClear, .semi-portal-rtl .semi-input-textarea-showClear { padding-right: 0; padding-left: 36px; } .semi-input-number { display: inline-flex; align-items: center; box-sizing: border-box; transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); transform: scale(var(--semi-transform_scale-none)); } .semi-input-number-suffix-btns { display: inline-flex; flex-direction: column; margin-left: 4px; border: 1px solid var(--semi-color-border); border-radius: var(--semi-border-radius-small); background-color: var(--semi-color-bg-2); box-sizing: border-box; } .semi-input-number-suffix-btns > .semi-input-number-button { height: 50%; width: 14px; padding: 0; margin: 0; display: inline-flex; align-items: center; justify-content: center; user-select: none; border-radius: 0; color: var(--semi-color-text-2); } .semi-input-number-suffix-btns > .semi-input-number-button-up:not(.semi-input-number-button-up-not-allowed):hover, .semi-input-number-suffix-btns > .semi-input-number-button-down:not(.semi-input-number-button-down-not-allowed):hover { cursor: pointer; background-color: var(--semi-color-fill-0); } .semi-input-number-suffix-btns > .semi-input-number-button-up:not(.semi-input-number-button-up-not-allowed):active, .semi-input-number-suffix-btns > .semi-input-number-button-down:not(.semi-input-number-button-down-not-allowed):active { cursor: pointer; background-color: var(--semi-color-fill-1); } .semi-input-number-suffix-btns > .semi-input-number-button-up.semi-input-number-button-up-disabled, .semi-input-number-suffix-btns > .semi-input-number-button-down.semi-input-number-button-down-disabled { background-color: var(--semi-color-disabled-fill); color: var(--semi-color-disabled-text); } .semi-input-number-suffix-btns > .semi-input-number-button-up.semi-input-number-button-up-not-allowed, .semi-input-number-suffix-btns > .semi-input-number-button-down.semi-input-number-button-down-not-allowed { cursor: not-allowed; } .semi-input-number-suffix-btns-inner-hover { border-color: var(--semi-color-fill-2); } .semi-input-number-suffix-btns-inner { margin-left: 8px; } .semi-input-number .semi-input-clearbtn + .semi-input-suffix { margin-left: -4px; } .semi-input-number .semi-input-clearbtn + .semi-input-suffix .semi-input-number-suffix-btns-inner { margin-left: 0; } .semi-input-number-size-default .semi-input-number-suffix-btns { height: 32px; } .semi-input-number-size-default .semi-input-number-suffix-btns-inner { height: 30px; } .semi-input-number-size-large .semi-input-number-suffix-btns { height: 40px; } .semi-input-number-size-large .semi-input-number-suffix-btns-inner { height: 38px; } .semi-input-number-size-small .semi-input-number-suffix-btns { height: 24px; } .semi-input-number-size-small .semi-input-number-suffix-btns-inner { height: 22px; } .semi-input-number:not(:focus-within):not(:hover) .semi-input-borderless + .semi-input-number-suffix-btns { opacity: 0; } .semi-rtl .semi-input-number, .semi-portal-rtl .semi-input-number { direction: rtl; } .semi-rtl .semi-input-number-suffix-btns, .semi-portal-rtl .semi-input-number-suffix-btns { margin-left: auto; margin-right: 4px; } .semi-rtl .semi-input-number-suffix-btns-inner, .semi-portal-rtl .semi-input-number-suffix-btns-inner { margin-left: auto; margin-right: 8px; } .semi-rtl .semi-input-number .semi-input-clearbtn + .semi-input-suffix, .semi-portal-rtl .semi-input-number .semi-input-clearbtn + .semi-input-suffix { margin-left: auto; margin-right: -4px; } .semi-rtl .semi-input-number .semi-input-clearbtn + .semi-input-suffix .semi-input-number-suffix-btns-inner, .semi-portal-rtl .semi-input-number .semi-input-clearbtn + .semi-input-suffix .semi-input-number-suffix-btns-inner { margin-left: auto; margin-right: 0; } .semi-layout { display: flex; flex: auto; flex-direction: column; min-height: auto; } .semi-layout, .semi-layout-header, .semi-layout-footer, .semi-layout-content, .semi-layout-sider, .semi-layout-sider-children { box-sizing: border-box; } .semi-layout-header, .semi-layout-footer { flex: 0 0 auto; } .semi-layout-content { flex: auto; min-height: auto; } .semi-layout-sider { position: relative; min-width: auto; } .semi-layout-sider-children { height: 100%; margin-top: -0.1px; padding-top: 0.1px; } .semi-layout-has-sider { flex-direction: row; } .semi-layout-has-sider > .semi-layout, .semi-layout-has-sider > .semi-layout-content { overflow-x: hidden; } .semi-rtl .semi-layout, .semi-portal-rtl .semi-layout { direction: rtl; } .semi-list { font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; } .semi-list-items { margin: 0; padding: 0; list-style: none; } .semi-list-header, .semi-list-footer { padding: 12px 24px; } .semi-list-empty { padding: 12px 0px; color: var(--semi-color-text-2); width: 100%; text-align: center; } .semi-list-item { display: flex; flex-wrap: wrap; align-items: center; box-sizing: border-box; padding: 12px 24px; margin: 0; list-style: none; } .semi-list-item-body { flex: 1; display: flex; } .semi-list-item-body-header { margin-right: 20px; } .semi-list-item-body-flex-start { align-items: flex-start; } .semi-list-item-body-flex-end { align-items: flex-end; } .semi-list-item-body-center { align-items: center; } .semi-list-item-body-stretch { align-items: stretch; } .semi-list-item-body-baseline { align-items: baseline; } .semi-list-item-extra { flex: 0 0 auto; margin-left: 40px; } .semi-list-split .semi-list-item { border-bottom: 1px solid var(--semi-color-border); } .semi-list-split .semi-list-item:last-child { border-bottom: none; } .semi-list-split .semi-list-header { border-bottom: 1px solid var(--semi-color-border); } .semi-list-split .semi-list-footer { border-top: 1px solid var(--semi-color-border); } .semi-list-small .semi-list-item, .semi-list-small .semi-list-header, .semi-list-small .semi-list-footer { padding: 8px 16px; } .semi-list-large .semi-list-item, .semi-list-large .semi-list-header, .semi-list-large .semi-list-footer { padding: 16px 24px; } .semi-list.semi-list-grid .semi-list-item { padding: 0; } .semi-list.semi-list-bordered { border: 1px solid var(--semi-color-border); } .semi-list.semi-list-flex .semi-list-items { display: flex; } .semi-list.semi-list-flex.semi-list-split .semi-list-item { border-bottom: none; border-right: 1px solid var(--semi-color-border); } .semi-list.semi-list-flex.semi-list-split .semi-list-item:last-child { border-right: none; } .semi-rtl .semi-list, .semi-portal-rtl .semi-list { direction: rtl; } .semi-rtl .semi-list-item, .semi-portal-rtl .semi-list-item { direction: rtl; } .semi-rtl .semi-list-item-body-header, .semi-portal-rtl .semi-list-item-body-header { margin-right: auto; margin-left: 20px; } .semi-rtl .semi-list-item-extra, .semi-portal-rtl .semi-list-item-extra { flex: 0 0 auto; margin-left: 0; margin-right: 40px; } .semi-rtl .semi-list.semi-list-flex.semi-list-split .semi-list-item, .semi-portal-rtl .semi-list.semi-list-flex.semi-list-split .semi-list-item { border-bottom: none; border-right: 0; border-left: 1px solid var(--semi-color-border); } .semi-rtl .semi-list.semi-list-flex.semi-list-split .semi-list-item:last-child, .semi-portal-rtl .semi-list.semi-list-flex.semi-list-split .semi-list-item:last-child { border-left: none; } .semi-modal { font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; position: relative; margin: 80px auto; color: var(--semi-color-text-0); } .semi-modal-mask { position: fixed; top: 0; right: 0; left: 0; bottom: 0; background-color: var(--semi-color-overlay-bg); height: 100%; z-index: 1000; } .semi-modal-mask-hidden { display: none; } .semi-modal-icon-wrapper { display: inline-flex; margin-right: 12px; width: 24px; } .semi-modal-wrap { position: fixed; overflow: auto; top: 0; right: 0; bottom: 0; left: 0; z-index: 1000; -webkit-overflow-scrolling: touch; outline: 0; } .semi-modal-wrap-center { display: flex; align-items: center; } .semi-modal-title { display: inline-flex; align-items: flex-start; justify-content: flex-start; width: 100%; margin: 0; } .semi-modal-content { position: relative; display: flex; height: 100%; width: 100%; box-sizing: border-box; flex-direction: column; background-color: var(--semi-color-bg-2); border: 1px solid var(--semi-color-border); border-radius: var(--semi-border-radius-large); padding: 0 24px; background-clip: padding-box; overflow: hidden; box-shadow: var(--semi-shadow-elevated); } .semi-modal-content-fullScreen { border-radius: 0; border: none; top: 0px; } .semi-modal-header { display: flex; align-items: flex-start; margin: 24px 0; padding: 0 0; font-size: 14px; font-weight: 600; background-color: transparent; color: var(--semi-color-text-0); border-bottom: 0 solid transparent; } .semi-modal-body-wrapper { display: flex; align-items: flex-start; margin: 24px 0; } .semi-modal-body { flex: 1 1 auto; margin: 0; padding: 0; } .semi-modal-withIcon { margin-left: 36px; } .semi-modal-footer { margin: 24px 0; padding: 0 0; text-align: right; border-radius: 0 0 5px 5px; border-top: 0 solid transparent; background-color: transparent; } .semi-modal-footer .semi-button { margin-left: 12px; margin-right: 0; } .semi-modal-confirm .semi-modal-header { margin-bottom: 8px; } .semi-modal-confirm-icon-wrapper { display: inline-flex; margin-right: 12px; width: 24px; } .semi-modal-confirm-icon { display: inline-flex; color: var(--semi-color-primary); } .semi-modal-info-icon { color: var(--semi-color-info); } .semi-modal-success-icon { color: var(--semi-color-success); } .semi-modal-error-icon { color: var(--semi-color-danger); } .semi-modal-warning-icon { color: var(--semi-color-warning); } .semi-modal-small { width: 448px; } .semi-modal-medium { width: 684px; } .semi-modal-large { width: 920px; } .semi-modal-full-width { width: calc(100vw - 64px); } .semi-modal-centered { margin: 0 auto; } .semi-modal-popup .semi-modal-mask, .semi-modal-popup .semi-modal-wrap { position: absolute; overflow: hidden; } .semi-modal-fixed .semi-modal-mask, .semi-modal-fixed .semi-modal-wrap { position: fixed; overflow: hidden; } .semi-modal-displayNone { display: none; } .semi-modal-content-animate-show { animation: 120ms semi-modal-content-keyframe-show cubic-bezier(0.215, 0.61, 0.355, 1) 0ms forwards; animation-fill-mode: forwards; } .semi-modal-content-animate-hide { animation: 120ms semi-modal-content-keyframe-hide cubic-bezier(0.215, 0.61, 0.355, 1) 0ms forwards; animation-fill-mode: forwards; } .semi-modal-mask-animate-show { animation: 90ms semi-modal-mask-keyframe-show cubic-bezier(0.215, 0.61, 0.355, 1) 0ms forwards; animation-fill-mode: forwards; } .semi-modal-mask-animate-hide { animation: 90ms semi-modal-mask-keyframe-hide cubic-bezier(0.215, 0.61, 0.355, 1) 0ms forwards; animation-fill-mode: forwards; } @keyframes semi-modal-content-keyframe-show { 0% { opacity: 0; transform: scale(0.7); } 100% { opacity: 1; transform: scale(1); } } @keyframes semi-modal-content-keyframe-hide { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0.7); } } @keyframes semi-modal-mask-keyframe-show { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes semi-modal-mask-keyframe-hide { 0% { opacity: 1; } 100% { opacity: 0; } } .semi-modal-rtl { direction: rtl; } .semi-modal-rtl .semi-modal-icon-wrapper, .semi-modal-confirm-rtl .semi-modal-icon-wrapper { margin-right: 0; margin-left: 12px; } .semi-modal-rtl .semi-modal-withIcon, .semi-modal-confirm-rtl .semi-modal-withIcon { margin-left: 0; margin-right: 36px; } .semi-modal-rtl .semi-modal-footer, .semi-modal-confirm-rtl .semi-modal-footer { text-align: left; } .semi-modal-rtl .semi-modal-footer .semi-button, .semi-modal-confirm-rtl .semi-modal-footer .semi-button { margin-left: 0; margin-right: 12px; } .semi-modal-confirm-rtl { direction: rtl; } .semi-modal-confirm .semi-modal-confirm-rtl .semi-button { margin-left: 0; margin-right: 12px; } .semi-navigation { box-sizing: border-box; display: inline-flex; width: 240px; outline: none; overflow: hidden; margin: 0; padding-left: 8px; padding-right: 8px; user-select: none; transition: padding-left 100ms ease-out, width 200ms cubic-bezier(0.62, 0.05, 0.36, 0.95); border-right: 1px solid var(--semi-color-border); background-color: var(--semi-color-nav-bg); } .semi-navigation-inner { width: 100%; height: 100%; display: flex; justify-content: space-between; } .semi-navigation-list { margin: 0; padding: 0; list-style: none; } .semi-navigation-list > .semi-navigation-item-normal { height: 36px; } .semi-navigation-list > .semi-navigation-item { font-weight: 600; } .semi-navigation-list > .semi-navigation-item > .semi-navigation-sub-title { font-weight: 600; } .semi-navigation-collapsed { width: 60px; padding-left: 8px; padding-right: 8px; transition: padding-left 100ms ease-out, width 200ms cubic-bezier(0.62, 0.05, 0.36, 0.95); } .semi-navigation-collapsed .semi-navigation-item-text { transition: opacity 0.2s cubic-bezier(0.5, -0.1, 1, 0.4); opacity: 0; } .semi-navigation-collapsed .semi-navigation-item-icon:last-child { transition: opacity 0.2s cubic-bezier(0.5, -0.1, 1, 0.4); opacity: 0; } .semi-navigation-sub-wrap .semi-navigation-sub-title, .semi-navigation-item { cursor: pointer; display: flex; border-radius: var(--semi-border-radius-small); padding: 8px 12px; box-sizing: border-box; margin-top: 0; margin-bottom: 8px; font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: var(--semi-color-text-0); width: 100%; transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); } .semi-navigation-sub-wrap .semi-navigation-sub-title-text, .semi-navigation-item-text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; transition: opacity 0.2s cubic-bezier(0.5, -0.1, 1, 0.4); opacity: 1; } .semi-navigation-sub-wrap .semi-navigation-sub-title-indent, .semi-navigation-item-indent { width: 32px; } .semi-navigation-sub-wrap .semi-navigation-sub-title:focus-visible, .semi-navigation-item:focus-visible { outline: 2px solid var(--semi-color-primary-light-active); outline-offset: -2px; } .semi-navigation-header-link, .semi-navigation-item-link { display: flex; width: 100%; color: inherit; text-decoration: none; align-items: center; justify-content: flex-start; } .semi-navigation-item-has-link { padding: 0; } .semi-navigation-item-has-link .semi-navigation-item-link { padding: 8px 12px; } .semi-navigation-item-sub { padding: 0; } .semi-navigation-sub-wrap > .semi-navigation-item-inner { width: 100%; } .semi-navigation-sub-wrap .semi-navigation-sub-title > .semi-navigation-item-inner { display: flex; } .semi-navigation-item-inner { display: flex; align-items: center; width: 100%; flex: 0 0 auto; } .semi-navigation-item-title { opacity: 1; transition: opacity 100ms 100s ease-out; } .semi-navigation .semi-navigation-sub-title { margin-bottom: 0; } .semi-navigation-item-icon-info { display: inline-flex; color: var(--semi-color-text-2); margin-right: 12px; min-width: 20px; margin-left: 0; } .semi-navigation-item-icon-toggle-left { display: inline-flex; color: var(--semi-color-text-2); margin-right: 12px; min-width: 20px; } .semi-navigation-item-icon-toggle-right { display: inline-flex; color: var(--semi-color-text-2); margin-left: auto; transition: opacity 0.2s cubic-bezier(0.5, -0.1, 1, 0.4); opacity: 1; } .semi-navigation-item-selected { background-color: var(--semi-color-primary-light-default); color: var(--semi-color-text-0); } .semi-navigation-item-selected .semi-navigation-item-icon:first-child { color: var(--semi-color-primary); } .semi-navigation-item-selected.semi-navigation-item-disabled { background-color: transparent; color: var(--semi-color-primary-disabled); cursor: not-allowed; } .semi-navigation-item-selected.semi-navigation-item-disabled .semi-navigation-item-icon:first-child { color: var(--semi-color-primary-disabled); } .semi-navigation-item-disabled { background-color: transparent; color: var(--semi-color-disabled-text); cursor: not-allowed; } .semi-navigation-item-disabled .semi-navigation-item-icon, .semi-navigation-item-disabled .semi-navigation-item-icon:first-child { color: var(--semi-color-disabled-text); } .semi-navigation-inner > .semi-navigation-item { color: var(--semi-color-text-0); } .semi-navigation-item-normal:hover:not(.semi-navigation-item-selected) { background-color: var(--semi-color-fill-0); color: var(--semi-color-text-0); } .semi-navigation-item-normal:hover:not(.semi-navigation-item-selected) .semi-navigation-item-icon:first-child { color: var(--semi-color-text-2); } .semi-navigation-item-normal:hover.semi-navigation-item-selected { color: var(--semi-color-text-0); background-color: var(--semi-color-fill-0); } .semi-navigation-item-normal:hover.semi-navigation-item-selected .semi-navigation-item-icon:first-child { color: var(--semi-color-primary); } .semi-navigation-item-normal:hover.semi-navigation-item-disabled { background-color: transparent; color: var(--semi-color-disabled-text); cursor: not-allowed; } .semi-navigation-item-normal:hover.semi-navigation-item-disabled .semi-navigation-item-icon, .semi-navigation-item-normal:hover.semi-navigation-item-disabled .semi-navigation-item-icon:first-child { color: var(--semi-color-disabled-text); } .semi-navigation-item-normal:hover.semi-navigation-item-selected.semi-navigation-item-disabled { background-color: transparent; color: var(--semi-color-primary-disabled); cursor: not-allowed; } .semi-navigation-item-normal:hover.semi-navigation-item-selected.semi-navigation-item-disabled .semi-navigation-item-icon:first-child { color: var(--semi-color-primary-disabled); } .semi-navigation-item-normal:active:not(.semi-navigation-item-selected), .semi-navigation-inner > .semi-navigation-item-normal:active:not(.semi-navigation-item-selected) { background-color: var(--semi-color-fill-1); color: var(--semi-color-text-0); } .semi-navigation-item-normal:active:not(.semi-navigation-item-selected) .semi-navigation-item-icon:first-child, .semi-navigation-inner > .semi-navigation-item-normal:active:not(.semi-navigation-item-selected) .semi-navigation-item-icon:first-child { color: var(--semi-color-text-2); } .semi-navigation-item-normal:active.semi-navigation-item-selected, .semi-navigation-inner > .semi-navigation-item-normal:active.semi-navigation-item-selected { color: var(--semi-color-text-0); background-color: var(--semi-color-fill-1); } .semi-navigation-item-normal:active.semi-navigation-item-selected .semi-navigation-item-icon:first-child, .semi-navigation-inner > .semi-navigation-item-normal:active.semi-navigation-item-selected .semi-navigation-item-icon:first-child { color: var(--semi-color-primary); } .semi-navigation-item-normal:active.semi-navigation-item-disabled, .semi-navigation-inner > .semi-navigation-item-normal:active.semi-navigation-item-disabled { background-color: transparent; color: var(--semi-color-disabled-text); cursor: not-allowed; } .semi-navigation-item-normal:active.semi-navigation-item-disabled .semi-navigation-item-icon, .semi-navigation-item-normal:active.semi-navigation-item-disabled .semi-navigation-item-icon:first-child, .semi-navigation-inner > .semi-navigation-item-normal:active.semi-navigation-item-disabled .semi-navigation-item-icon, .semi-navigation-inner > .semi-navigation-item-normal:active.semi-navigation-item-disabled .semi-navigation-item-icon:first-child { color: var(--semi-color-disabled-text); } .semi-navigation-sub-wrap .semi-navigation-item-inner { display: block; } .semi-navigation-sub-wrap { display: block; padding: 0; margin-top: 0; height: inherit; } .semi-navigation-sub-wrap .semi-navigation-sub-title { display: flex; justify-content: flex-start; height: 36px; align-items: center; } .semi-navigation-sub { font-weight: 400; font-size: 14px; list-style: none; outline: none; padding: 0; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .semi-navigation-sub .semi-navigation-item { color: var(--semi-color-text-0); background-color: transparent; height: 36px; font-weight: 400; width: 100%; } .semi-navigation-sub .semi-navigation-item:first-child { margin-top: 8px; } .semi-navigation-sub .semi-navigation-item > .semi-navigation-sub .semi-navigation-item-text:first-child { margin-left: 44px; } .semi-navigation-sub .semi-navigation-item:hover:not(.semi-navigation-sub-wrap):not(.semi-navigation-item-selected):not(.semi-navigation-item-disabled) { background-color: var(--semi-color-fill-0); color: var(--semi-color-text-0); } .semi-navigation-sub .semi-navigation-item:hover:not(.semi-navigation-sub-wrap):not(.semi-navigation-item-selected):not(.semi-navigation-item-disabled) .semi-navigation-item-icon:first-child { color: var(--semi-color-text-2); } .semi-navigation-sub .semi-navigation-item:hover.semi-navigation-item-disabled { background-color: transparent; color: var(--semi-color-disabled-text); cursor: not-allowed; } .semi-navigation-sub .semi-navigation-item:hover.semi-navigation-item-disabled .semi-navigation-item-icon, .semi-navigation-sub .semi-navigation-item:hover.semi-navigation-item-disabled .semi-navigation-item-icon:first-child { color: var(--semi-color-disabled-text); } .semi-navigation-sub .semi-navigation-item:hover.semi-navigation-item-selected { background-color: var(--semi-color-primary-light-default); color: var(--semi-color-text-0); } .semi-navigation-sub .semi-navigation-item:hover.semi-navigation-item-selected .semi-navigation-item-icon:first-child { color: var(--semi-color-primary); } .semi-navigation-sub .semi-navigation-item:active:not(.semi-navigation-sub-wrap):not(.semi-navigation-item-selected):not(.semi-navigation-item-disabled) { background-color: var(--semi-color-fill-1); color: var(--semi-color-text-0); } .semi-navigation-sub .semi-navigation-item:active:not(.semi-navigation-sub-wrap):not(.semi-navigation-item-selected):not(.semi-navigation-item-disabled) .semi-navigation-item-icon:first-child { color: var(--semi-color-text-2); } .semi-navigation-sub .semi-navigation-item:active.semi-navigation-item-disabled { background-color: transparent; color: var(--semi-color-disabled-text); cursor: not-allowed; } .semi-navigation-sub .semi-navigation-item:active.semi-navigation-item-disabled .semi-navigation-item-icon, .semi-navigation-sub .semi-navigation-item:active.semi-navigation-item-disabled .semi-navigation-item-icon:first-child { color: var(--semi-color-disabled-text); } .semi-navigation-sub .semi-navigation-item:active.semi-navigation-item-selected { background-color: var(--semi-color-primary-light-default); color: var(--semi-color-text-0); } .semi-navigation-sub .semi-navigation-item:active.semi-navigation-item-selected .semi-navigation-item-icon:first-child { color: var(--semi-color-primary); } .semi-navigation-sub .semi-navigation-item-selected { background-color: var(--semi-color-primary-light-default); color: var(--semi-color-text-0); } .semi-navigation-sub .semi-navigation-item-selected .semi-navigation-item-icon:first-child { color: var(--semi-color-primary); } .semi-navigation-sub .semi-navigation-item-selected.semi-navigation-item-disabled { cursor: not-allowed; background-color: var(--semi-color-primary-light-default); color: var(--semi-color-disabled-text); } .semi-navigation-sub .semi-navigation-item-disabled { background-color: transparent; color: var(--semi-color-disabled-text); cursor: not-allowed; } .semi-navigation-sub .semi-navigation-item-disabled .semi-navigation-item-icon, .semi-navigation-sub .semi-navigation-item-disabled .semi-navigation-item-icon:first-child { color: var(--semi-color-disabled-text); } .semi-navigation-sub .semi-navigation-sub-wrap { height: inherit; } .semi-navigation-icon-rotate-0 { transition: transform 200ms ease-in-out; transform: rotate(0); } .semi-navigation-icon-rotate-180 { transition: transform 200ms ease-in-out; transform: rotate(-180deg); } /* Header、Footer-Common */ .semi-navigation-header { display: inline-flex; align-items: center; box-sizing: border-box; } .semi-navigation-header-logo { margin-left: 0; margin-right: 8px; display: inline-flex; } .semi-navigation-header-logo > .semi-icon, .semi-navigation-header-logo > img { width: 36px; height: 36px; object-fit: scale-down; } .semi-navigation-header-text { font-size: 18px; line-height: 24px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 600; display: inline-flex; color: var(--semi-color-text-0); white-space: nowrap; text-overflow: ellipsis; transition: opacity 0.2s cubic-bezier(0.5, -0.1, 1, 0.4); opacity: 1; } .semi-navigation-footer { box-sizing: border-box; padding: 16px 24px; display: inline-flex; align-items: center; } .semi-navigation-footer .semi-navigation-collapse-btn { text-overflow: ellipsis; white-space: nowrap; } .semi-navigation-collapsed .semi-navigation-header { justify-content: center; } .semi-navigation-collapsed .semi-navigation-header .semi-navigation-header-logo { margin-right: 0; width: 100%; } .semi-navigation-collapsed .semi-navigation-header .semi-navigation-header-logo > .semi-icon, .semi-navigation-collapsed .semi-navigation-header .semi-navigation-header-logo > img { width: 36px; max-width: 100%; max-height: 100%; } .semi-navigation-collapsed .semi-navigation-header .semi-navigation-header-text { transition: opacity 0.2s cubic-bezier(0.5, -0.1, 1, 0.4); opacity: 0; } .semi-navigation-vertical .semi-navigation-list > .semi-navigation-item-selected:not(.semi-navigation-item-disabled).semi-navigation-item-normal:hover .semi-navigation-item-icon:first-child { color: var(--semi-color-primary); } .semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title { color: var(--semi-color-text-0); background-color: transparent; } .semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title-selected { font-weight: 600; background-color: var(--semi-color-primary-light-default); color: var(--semi-color-text-0); background-color: transparent; } .semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title-selected .semi-navigation-item-icon:first-child { color: var(--semi-color-primary); } .semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title-selected.semi-navigation-sub-title-disabled { background-color: transparent; color: var(--semi-color-primary-disabled); cursor: not-allowed; } .semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title-selected.semi-navigation-sub-title-disabled .semi-navigation-item-icon:first-child { color: var(--semi-color-primary-disabled); } .semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title-disabled { font-weight: 600; background-color: transparent; color: var(--semi-color-disabled-text); cursor: not-allowed; } .semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title-disabled .semi-navigation-item-icon, .semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title-disabled .semi-navigation-item-icon:first-child { color: var(--semi-color-disabled-text); } .semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title:hover:not(.semi-navigation-sub-title-selected) { background-color: var(--semi-color-fill-0); color: var(--semi-color-text-0); } .semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title:hover:not(.semi-navigation-sub-title-selected) .semi-navigation-item-icon:first-child { color: var(--semi-color-text-2); } .semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title:hover.semi-navigation-sub-title-selected { color: var(--semi-color-text-0); background-color: var(--semi-color-fill-0); } .semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title:hover.semi-navigation-sub-title-selected .semi-navigation-item-icon:first-child { color: var(--semi-color-primary); } .semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title:active:not(.semi-navigation-sub-title-selected) { background-color: var(--semi-color-fill-1); color: var(--semi-color-text-0); } .semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title:active:not(.semi-navigation-sub-title-selected) .semi-navigation-item-icon:first-child { color: var(--semi-color-text-2); } .semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title:active.semi-navigation-sub-title-selected { color: var(--semi-color-text-0); background-color: var(--semi-color-fill-1); } .semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title:active.semi-navigation-sub-title-selected .semi-navigation-item-icon:first-child { color: var(--semi-color-primary); } .semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title:hover.semi-navigation-sub-title-disabled:not(.semi-navigation-sub-title-selected), .semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title:active.semi-navigation-sub-title-disabled:not(.semi-navigation-sub-title-selected) { background-color: transparent; color: var(--semi-color-disabled-text); cursor: not-allowed; } .semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title:hover.semi-navigation-sub-title-disabled:not(.semi-navigation-sub-title-selected) .semi-navigation-item-icon, .semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title:hover.semi-navigation-sub-title-disabled:not(.semi-navigation-sub-title-selected) .semi-navigation-item-icon:first-child, .semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title:active.semi-navigation-sub-title-disabled:not(.semi-navigation-sub-title-selected) .semi-navigation-item-icon, .semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title:active.semi-navigation-sub-title-disabled:not(.semi-navigation-sub-title-selected) .semi-navigation-item-icon:first-child { color: var(--semi-color-disabled-text); } .semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title:hover.semi-navigation-sub-title-disabled.semi-navigation-sub-title-selected, .semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title:active.semi-navigation-sub-title-disabled.semi-navigation-sub-title-selected { background-color: transparent; color: var(--semi-color-primary-disabled); cursor: not-allowed; } .semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title:hover.semi-navigation-sub-title-disabled.semi-navigation-sub-title-selected .semi-navigation-item-icon:first-child, .semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title:active.semi-navigation-sub-title-disabled.semi-navigation-sub-title-selected .semi-navigation-item-icon:first-child { color: var(--semi-color-primary-disabled); } .semi-navigation-vertical .semi-navigation-item:last-of-type { margin-bottom: 0; } .semi-navigation-vertical .semi-navigation-inner { flex-direction: column; } .semi-navigation-vertical .semi-navigation-header-list-outer { height: 100%; } .semi-navigation-vertical .semi-navigation-list-wrapper { padding-top: 12px; overflow-y: auto; overflow-x: hidden; } .semi-navigation-vertical .semi-navigation-header { padding-top: 32px; padding-bottom: 36px; padding-left: 5.5px; padding-right: 8px; width: 100%; } .semi-navigation-vertical .semi-navigation-header-collapsed { padding-left: 5.5px; padding-right: 0; transition: padding-left 100ms ease-out, width 200ms cubic-bezier(0.62, 0.05, 0.36, 0.95); } .semi-navigation-vertical .semi-navigation-footer { color: var(--semi-color-text-2); padding-left: 8px; padding-right: 8px; } .semi-navigation-vertical .semi-navigation-footer .semi-navigation-collapse-btn .semi-button-content-right { margin-left: 12px; opacity: 1; transition: opacity 0.2s cubic-bezier(0.5, -0.1, 1, 0.4); } .semi-navigation-vertical .semi-navigation-footer .semi-navigation-collapse-btn > .semi-button { padding-left: 8px; padding-right: 8px; } .semi-navigation-vertical .semi-navigation-footer-collapsed { justify-content: center; } .semi-navigation-vertical .semi-navigation-footer-collapsed .semi-navigation-collapse-btn { width: 100%; } .semi-navigation-vertical .semi-navigation-footer-collapsed .semi-navigation-collapse-btn .semi-button-content-right { opacity: 0; transition: opacity 0.2s cubic-bezier(0.5, -0.1, 1, 0.4); } .semi-navigation-horizontal { width: 100%; height: 60px; border-right: none; border-bottom: 1px solid var(--semi-color-border); padding-left: 24px; padding-right: 24px; } .semi-navigation-horizontal .semi-navigation-inner { flex-direction: row; } .semi-navigation-horizontal .semi-navigation-header-list-outer { display: inline-flex; align-items: center; } .semi-navigation-horizontal .semi-navigation-header-list-outer-collapsed { align-items: baseline; } .semi-navigation-horizontal .semi-navigation-header { width: inherit; margin-right: 24px; } .semi-navigation-horizontal .semi-navigation-list { display: inline-flex; align-items: center; } .semi-navigation-horizontal .semi-navigation-list .semi-navigation-item { margin-bottom: 0; color: var(--semi-color-text-2); background-color: transparent; } .semi-navigation-horizontal .semi-navigation-list .semi-navigation-item .semi-navigation-item-icon:first-child { color: var(--semi-color-text-2); } .semi-navigation-horizontal .semi-navigation-list .semi-navigation-item-selected { color: var(--semi-color-text-0); background-color: transparent; } .semi-navigation-horizontal .semi-navigation-list .semi-navigation-item-selected .semi-navigation-item-icon:first-child { color: var(--semi-color-text-0); } .semi-navigation-horizontal .semi-navigation-list .semi-navigation-item-disabled { color: var(--semi-color-disabled-text); background-color: transparent; cursor: not-allowed; } .semi-navigation-horizontal .semi-navigation-list .semi-navigation-item-disabled .semi-navigation-item-icon, .semi-navigation-horizontal .semi-navigation-list .semi-navigation-item-disabled .semi-navigation-item-icon:first-child { color: var(--semi-color-disabled-text); } .semi-navigation-horizontal .semi-navigation-list .semi-navigation-item-normal:hover:not(.semi-navigation-item-selected) { color: var(--semi-color-text-1); background-color: transparent; } .semi-navigation-horizontal .semi-navigation-list .semi-navigation-item-normal:hover:not(.semi-navigation-item-selected) .semi-navigation-item-icon:first-child { color: var(--semi-color-text-1); } .semi-navigation-horizontal .semi-navigation-list .semi-navigation-item-normal:hover:not(.semi-navigation-item-selected) .semi-navigation-item-text { color: var(--semi-color-text-1); background-color: transparent; } .semi-navigation-horizontal .semi-navigation-list .semi-navigation-item-normal:active:not(.semi-navigation-item-selected) { color: var(--semi-color-text-0); background-color: transparent; } .semi-navigation-horizontal .semi-navigation-list .semi-navigation-item-normal:active:not(.semi-navigation-item-selected) .semi-navigation-item-icon:first-child { color: var(--semi-color-text-0); } .semi-navigation-horizontal .semi-navigation-list .semi-navigation-item-normal:hover.semi-navigation-item-disabled, .semi-navigation-horizontal .semi-navigation-list .semi-navigation-item-normal:active.semi-navigation-item-disabled { color: var(--semi-color-disabled-text); background-color: transparent; cursor: not-allowed; } .semi-navigation-horizontal .semi-navigation-list .semi-navigation-item-normal:hover.semi-navigation-item-disabled .semi-navigation-item-icon, .semi-navigation-horizontal .semi-navigation-list .semi-navigation-item-normal:hover.semi-navigation-item-disabled .semi-navigation-item-icon:first-child, .semi-navigation-horizontal .semi-navigation-list .semi-navigation-item-normal:active.semi-navigation-item-disabled .semi-navigation-item-icon, .semi-navigation-horizontal .semi-navigation-list .semi-navigation-item-normal:active.semi-navigation-item-disabled .semi-navigation-item-icon:first-child { color: var(--semi-color-disabled-text); } .semi-navigation-horizontal .semi-navigation-list .semi-navigation-item-normal:hover.semi-navigation-item-disabled .semi-navigation-item-text, .semi-navigation-horizontal .semi-navigation-list .semi-navigation-item-normal:active.semi-navigation-item-disabled .semi-navigation-item-text { color: var(--semi-color-disabled-text); background-color: transparent; } .semi-navigation-horizontal .semi-navigation-list .semi-navigation-item:not(:last-of-type) { margin-right: 8px; } .semi-navigation-horizontal .semi-navigation-list .semi-navigation-sub-title .semi-navigation-item-text { color: var(--semi-color-text-2); background-color: transparent; } .semi-navigation-horizontal .semi-navigation-list .semi-navigation-sub-title-selected .semi-navigation-item-icon:first-child, .semi-navigation-horizontal .semi-navigation-list .semi-navigation-sub-title-selected .semi-navigation-item-text { color: var(--semi-color-text-0); background-color: transparent; } .semi-navigation-horizontal .semi-navigation-list .semi-navigation-sub-title-disabled { cursor: not-allowed; } .semi-navigation-horizontal .semi-navigation-list .semi-navigation-sub-title-disabled .semi-navigation-item-icon:first-child, .semi-navigation-horizontal .semi-navigation-list .semi-navigation-sub-title-disabled .semi-navigation-item-text { color: var(--semi-color-disabled-text); background-color: transparent; } .semi-navigation-horizontal .semi-navigation-item-inner { width: auto; } .semi-navigation-horizontal .semi-navigation-item-icon:last-child { margin-left: 8px; } .semi-navigation-horizontal .semi-navigation-item-icon:first-child { margin-right: 8px; } .semi-navigation-horizontal .semi-navigation-item { width: auto; } .semi-navigation-horizontal .semi-navigation-item-collapsed { word-wrap: none; text-overflow: ellipsis; } .semi-navigation-horizontal .semi-navigation-footer { border-top: none; padding-right: 0; } .semi-navigation-horizontal .semi-navigation-footer-collapsed { justify-content: center; flex-direction: row; align-items: center; } .semi-navigation-popover .semi-navigation-sub-title { width: 100%; } .semi-navigation-popover .semi-navigation-item-selected { font-weight: normal; } .semi-dropdown-item .semi-navigation-sub-title { box-sizing: border-box; padding: 8px 12px; width: 100%; } .semi-dropdown-item.semi-navigation-item { margin-top: 0; margin-bottom: 0; min-width: 150px; } .semi-dropdown-menu .semi-navigation-item-sub { padding: 0; } .semi-rtl .semi-navigation, .semi-portal-rtl .semi-navigation { direction: rtl; border-right: 0; border-left: 1px solid var(--semi-color-border); transition: padding-right 100ms ease-out, width 200ms cubic-bezier(0.62, 0.05, 0.36, 0.95); } .semi-rtl .semi-navigation-collapsed, .semi-portal-rtl .semi-navigation-collapsed { transition: padding-right 100ms ease-out, width 200ms cubic-bezier(0.62, 0.05, 0.36, 0.95); } .semi-rtl .semi-navigation-item-icon:first-child, .semi-portal-rtl .semi-navigation-item-icon:first-child { margin-right: 0; margin-left: 12px; } .semi-rtl .semi-navigation-item-icon:last-child, .semi-portal-rtl .semi-navigation-item-icon:last-child { margin-left: 0; margin-right: auto; } .semi-rtl .semi-navigation-sub .semi-navigation-item > .semi-rtl .semi-navigation-sub .semi-navigation-item-text:first-child, .semi-rtl .semi-navigation-sub .semi-navigation-item > .semi-portal-rtl .semi-navigation-sub .semi-navigation-item-text:first-child, .semi-portal-rtl .semi-navigation-sub .semi-navigation-item > .semi-rtl .semi-navigation-sub .semi-navigation-item-text:first-child, .semi-portal-rtl .semi-navigation-sub .semi-navigation-item > .semi-portal-rtl .semi-navigation-sub .semi-navigation-item-text:first-child { margin-left: auto; margin-right: 44px; } .semi-rtl .semi-navigation-sub .semi-navigation-item > .semi-navigation-item-icon:first-child, .semi-portal-rtl .semi-navigation-sub .semi-navigation-item > .semi-navigation-item-icon:first-child { margin-right: 12px; } .semi-rtl .semi-navigation-header, .semi-portal-rtl .semi-navigation-header { display: inline-flex; align-items: center; box-sizing: border-box; } .semi-rtl .semi-navigation-header-logo, .semi-portal-rtl .semi-navigation-header-logo { margin-left: 8px; margin-right: 0; display: inline-flex; } .semi-rtl .semi-navigation-collapsed, .semi-portal-rtl .semi-navigation-collapsed { direction: rtl; } .semi-rtl .semi-navigation-collapsed .semi-navigation-header .semi-navigation-header-logo, .semi-portal-rtl .semi-navigation-collapsed .semi-navigation-header .semi-navigation-header-logo { margin-right: auto; margin-left: 0; } .semi-rtl .semi-navigation-vertical, .semi-portal-rtl .semi-navigation-vertical { direction: rtl; } .semi-rtl .semi-navigation-vertical .semi-navigation-header, .semi-portal-rtl .semi-navigation-vertical .semi-navigation-header { padding-right: 5.5px; padding-left: 8px; } .semi-rtl .semi-navigation-vertical .semi-navigation-header-collapsed, .semi-portal-rtl .semi-navigation-vertical .semi-navigation-header-collapsed { padding-right: 5.5px; padding-left: 0; transition: padding-right 100ms ease-out, width 200ms cubic-bezier(0.62, 0.05, 0.36, 0.95); } .semi-rtl .semi-navigation-vertical .semi-navigation-footer .semi-navigation-collapse-btn .semi-button-content-right, .semi-portal-rtl .semi-navigation-vertical .semi-navigation-footer .semi-navigation-collapse-btn .semi-button-content-right { margin-left: auto; margin-right: 12px; transition: opacity 0.2s cubic-bezier(0.5, -0.1, 1, 0.4); } .semi-rtl .semi-navigation-horizontal, .semi-portal-rtl .semi-navigation-horizontal { direction: rtl; border-right: auto; border-left: none; padding-left: 24px; padding-right: 24px; } .semi-rtl .semi-navigation-horizontal .semi-navigation-header, .semi-portal-rtl .semi-navigation-horizontal .semi-navigation-header { margin-right: auto; margin-left: 24px; } .semi-rtl .semi-navigation-horizontal .semi-navigation-list .semi-navigation-item:not(:last-of-type), .semi-portal-rtl .semi-navigation-horizontal .semi-navigation-list .semi-navigation-item:not(:last-of-type) { margin-right: auto; margin-left: 8px; } .semi-rtl .semi-navigation-horizontal .semi-navigation-item-icon:last-child, .semi-portal-rtl .semi-navigation-horizontal .semi-navigation-item-icon:last-child { margin-left: auto; margin-right: 8px; } .semi-rtl .semi-navigation-horizontal .semi-navigation-item-icon:first-child, .semi-portal-rtl .semi-navigation-horizontal .semi-navigation-item-icon:first-child { margin-right: auto; margin-left: 8px; } .semi-rtl .semi-navigation-horizontal .semi-navigation-footer, .semi-portal-rtl .semi-navigation-horizontal .semi-navigation-footer { padding-right: auto; padding-left: 0; } .semi-notification-wrapper { position: fixed; } .semi-notification-list { position: fixed; box-sizing: border-box; margin: 0; padding: 0; z-index: 1010; pointer-events: none; } .semi-notification-list[placement=topRight] { right: 0; top: 0; } .semi-notification-list[placement=top] { top: 0; left: 50%; transform: translateX(-50%); } .semi-notification-list[placement=topLeft] { left: 0; top: 0; } .semi-notification-list[placement=bottom] { bottom: 0; left: 50%; transform: translateX(-50%); } .semi-notification-list[placement=bottomRight] { bottom: 0; right: 0; } .semi-notification-list[placement=bottomLeft] { bottom: 0; left: 0; } .semi-notification-notice { box-shadow: var(--semi-shadow-elevated); border-radius: var(--semi-border-radius-medium); padding-top: 16px; padding-right: 12px; padding-bottom: 16px; padding-left: 20px; margin: 20px; width: auto; min-width: 320px; background-color: var(--semi-color-bg-3); position: relative; display: flex; pointer-events: auto; } .semi-notification-notice-icon { width: 24px; font-size: 16px; line-height: 22px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; display: flex; align-items: flex-start; justify-content: flex-start; height: 100%; margin-right: 12px; } .semi-notification-notice-info { color: var(--semi-color-info); } .semi-notification-notice-warning { color: var(--semi-color-warning); } .semi-notification-notice-error { color: var(--semi-color-danger); } .semi-notification-notice-success { color: var(--semi-color-success); } .semi-notification-notice-light.semi-notification-notice-warning { background-image: linear-gradient(0deg, var(--semi-color-warning-light-default), var(--semi-color-warning-light-default)); background-color: var(--semi-color-bg-0); border: 1px solid var(--semi-color-warning); } .semi-notification-notice-light.semi-notification-notice-success { background-image: linear-gradient(0deg, var(--semi-color-success-light-default), var(--semi-color-success-light-default)); background-color: var(--semi-color-bg-0); border: 1px solid var(--semi-color-success); } .semi-notification-notice-light.semi-notification-notice-info, .semi-notification-notice-light.semi-notification-notice-default { background-image: linear-gradient(0deg, var(--semi-color-info-light-default), var(--semi-color-info-light-default)); background-color: var(--semi-color-bg-0); border: 1px solid var(--semi-color-info); } .semi-notification-notice-light.semi-notification-notice-error { background-image: linear-gradient(0deg, var(--semi-color-danger-light-default), var(--semi-color-danger-light-default)); background-color: var(--semi-color-bg-0); border: 1px solid var(--semi-color-danger); } .semi-notification-notice-title { font-size: 16px; line-height: 22px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 600; color: var(--semi-color-text-0); margin-bottom: 4px; word-wrap: break-word; overflow-wrap: break-word; } .semi-notification-notice-inner { display: flex; width: 100%; min-width: 0; } .semi-notification-notice-content-wrapper { flex: 1 1 auto; margin-right: 8px; min-width: 0; } .semi-notification-notice-content { font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: var(--semi-color-text-1); word-wrap: break-word; overflow-wrap: break-word; } .semi-notification-notice-icon-close { height: 24px; } .semi-notification-notice-icon-close .semi-icon-close { color: var(--semi-color-text-2); } .semi-notification-notice-controls { display: flex; font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; cursor: pointer; } .semi-notification-notice-detail { text-align: center; flex-grow: 1; } .semi-notification-notice-later { text-align: center; flex-grow: 1; } @keyframes semi-notification-slideShow_top { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: translateY(0); } } @keyframes semi-notification-slideHide_top { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-100%); } } @keyframes semi-notification-slideShow_topLeft { from { opacity: 0; transform: translateX(-100%); } to { opacity: 1; transform: translateX(0); } } @keyframes semi-notification-slideHide_topLeft { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(-100%); } } @keyframes semi-notification-slideShow_topRight { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } } @keyframes semi-notification-slideHide_topRight { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(100%); } } @keyframes semi-notification-slideShow_bottom { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: translateY(0); } } @keyframes semi-notification-slideHide_bottom { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(100%); } } @keyframes semi-notification-slideShow_bottomLeft { from { opacity: 0; transform: translateX(-100%); } to { opacity: 1; transform: translateX(0); } } @keyframes semi-notification-slideHide_bottomLeft { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(-100%); } } @keyframes semi-notification-slideShow_bottomRight { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } } @keyframes semi-notification-slideHide_bottomRight { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(100%); } } .semi-notification-notice-animation-show_top { animation: semi-notification-slideShow_top 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms; animation-fill-mode: forwards; } .semi-notification-notice-animation-hide_top { animation: semi-notification-slideHide_top 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms; animation-fill-mode: forwards; } .semi-notification-notice-animation-show_topLeft { animation: semi-notification-slideShow_topLeft 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms; animation-fill-mode: forwards; } .semi-notification-notice-animation-hide_topLeft { animation: semi-notification-slideHide_topLeft 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms; animation-fill-mode: forwards; } .semi-notification-notice-animation-show_topRight { animation: semi-notification-slideShow_topRight 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms; animation-fill-mode: forwards; } .semi-notification-notice-animation-hide_topRight { animation: semi-notification-slideHide_topRight 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms; animation-fill-mode: forwards; } .semi-notification-notice-animation-show_bottom { animation: semi-notification-slideShow_bottom 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms; animation-fill-mode: forwards; } .semi-notification-notice-animation-hide_bottom { animation: semi-notification-slideHide_bottom 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms; animation-fill-mode: forwards; } .semi-notification-notice-animation-show_bottomLeft { animation: semi-notification-slideShow_bottomLeft 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms; animation-fill-mode: forwards; } .semi-notification-notice-animation-hide_bottomLeft { animation: semi-notification-slideHide_bottomLeft 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms; animation-fill-mode: forwards; } .semi-notification-notice-animation-show_bottomRight { animation: semi-notification-slideShow_bottomRight 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms; animation-fill-mode: forwards; } .semi-notification-notice-animation-hide_bottomRight { animation: semi-notification-slideHide_bottomRight 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms; animation-fill-mode: forwards; } .semi-notification-notice.semi-notification-notice-rtl { padding-right: 20px; padding-left: 12px; } .semi-notification-notice-rtl { direction: rtl; } .semi-notification-notice-rtl .semi-notification-notice-icon { margin-right: 12px; } .semi-notification-notice-rtl .semi-notification-notice-content-wrapper { margin-right: 8px; } .semi-overflow-list { display: flex; flex-wrap: nowrap; min-width: 0; } .semi-overflow-list-spacer { flex-shrink: 1; width: 1px; } .semi-overflow-list-scroll-wrapper { display: flex; flex: 1; flex-wrap: nowrap; overflow-x: scroll; } .semi-rtl .semi-overflow-list, .semi-portal-rtl .semi-overflow-list { direction: rtl; } .semi-page { display: flex; list-style: none; padding: 0; align-items: center; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; margin-block-start: 0; margin-block-end: 0; } .semi-page-small { font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: var(--semi-color-text-2); padding: 0 0; } .semi-page-disabled { cursor: not-allowed; } .semi-page-disabled .semi-page-total { color: var(--semi-color-disabled-text); } .semi-page-item { font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; min-width: 32px; border: 0px solid transparent; cursor: pointer; user-select: none; height: 32px; margin-left: 4px; margin-right: 4px; font-weight: 400; color: var(--semi-color-text-0); border-radius: var(--semi-border-radius-small); text-align: center; line-height: 32px; display: flex; align-items: center; justify-content: center; transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); transform: scale(var(--semi-transform_scale-none)); } .semi-page-item:hover { border-color: transparent; background-color: var(--semi-color-fill-0); color: var(--semi-color-text-0); } .semi-page-item-rest-opening { background-color: var(--semi-color-fill-0); color: var(--semi-color-text-0); } .semi-page-item:active { border-color: transparent; background-color: var(--semi-color-fill-1); color: var(--semi-color-text-0); } .semi-page-item-active { border-color: transparent; color: var(--semi-color-primary); font-weight: 600; background-color: var(--semi-color-primary-light-default); } .semi-page-item-active:hover { border-color: transparent; color: var(--semi-color-primary); background-color: var(--semi-color-primary-light-default); } .semi-page-item-disabled { border-color: transparent; color: var(--semi-color-disabled-text); background-color: transparent; cursor: not-allowed; } .semi-page-item-disabled:hover { background-color: transparent; } .semi-page-item-small { min-width: 44px; margin: 0; } .semi-page-item-all-disabled { border-color: transparent; color: var(--semi-color-disabled-text); background-color: transparent; cursor: not-allowed; } .semi-page-item-all-disabled:hover { background-color: transparent; color: var(--semi-color-disabled-text); } .semi-page-item-all-disabled-active { background-color: var(--semi-color-disabled-fill); font-weight: 600; } .semi-page-item-all-disabled-active:hover { background-color: var(--semi-color-disabled-fill); } .semi-page-total { font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; color: var(--semi-color-text-2); } .semi-page-prev, .semi-page-next { color: var(--semi-color-tertiary); cursor: pointer; } .semi-page-prev.semi-page-item-disabled, .semi-page-next.semi-page-item-disabled { color: var(--semi-color-disabled-text); cursor: not-allowed; } .semi-page-quickjump { margin-left: 24px; font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; display: flex; justify-content: center; align-items: center; flex-shrink: 0; color: var(--semi-color-text-0); } .semi-page-quickjump-input-number { max-width: 50px; margin-left: 4px; margin-right: 4px; } .semi-page-quickjump-disabled { color: var(--semi-color-disabled-text); } .semi-page .semi-select { user-select: none; } .semi-select-dropdown { user-select: none; } .semi-page-rest-list { padding-top: 4px; padding-bottom: 4px; } .semi-page-rest-list > div { position: relative; } .semi-page-rest-item { height: 32px; line-height: 32px; display: flex; justify-content: center; box-sizing: border-box; cursor: pointer; } .semi-page-rest-item:hover { background-color: var(--semi-color-fill-0); } .semi-page-rest-item:active { background-color: var(--semi-color-fill-1); } .semi-rtl .semi-page, .semi-portal-rtl .semi-page { direction: rtl; } .semi-rtl .semi-page-item, .semi-portal-rtl .semi-page-item { margin-right: 4px; margin-left: 4px; } .semi-rtl .semi-page-prev, .semi-rtl .semi-page-next, .semi-portal-rtl .semi-page-prev, .semi-portal-rtl .semi-page-next { transform: scaleX(-1); } .semi-popconfirm { box-sizing: border-box; max-width: 400px; } .semi-popconfirm-inner { display: flex; flex-direction: column; padding: 24px 24px 24px 20px; position: relative; } .semi-popconfirm-header { display: flex; justify-content: flex-start; } .semi-popconfirm-header-title { font-size: 16px; line-height: 22px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 600; margin-bottom: 8px; color: var(--semi-color-text-0); } .semi-popconfirm-header-icon { width: 24px; height: 24px; margin-right: 12px; } .semi-popconfirm-header .semi-icon-alert_triangle { color: var(--semi-color-warning); } .semi-popconfirm-header-body { display: inline-flex; flex-grow: 1; flex-direction: column; } .semi-popconfirm-body { color: var(--semi-color-text-2); } .semi-popconfirm-body-withIcon { margin-left: 36px; } .semi-popconfirm-body > p { margin: 0; padding: 0; } .semi-popconfirm-footer { margin-top: 25px; display: flex; justify-content: flex-end; } .semi-popconfirm-footer > .semi-button:first-child:not(:last-child) { margin-right: 8px; } .semi-popconfirm-popover { border-radius: var(--semi-border-radius-medium); } .semi-popover-with-arrow .semi-popconfirm-inner { padding: 12px 12px 12px 8px; } .semi-popconfirm-rtl { direction: rtl; } .semi-popconfirm-rtl .semi-popconfirm-inner { padding: 24px 20px 24px 24px; } .semi-popconfirm-rtl .semi-popconfirm-header { margin-right: 0; } .semi-popconfirm-rtl .semi-popconfirm-header-icon { margin-right: 0; margin-left: 12px; } .semi-popconfirm-rtl .semi-popconfirm-footer { justify-content: flex-end; } .semi-popconfirm-rtl .semi-popconfirm-footer > .semi-button:first-child:not(:last-child) { margin-right: 0; margin-left: 8px; } .semi-popover-with-arrow.semi-popconfirm-rtl { direction: rtl; } .semi-popover-with-arrow.semi-popconfirm-rtl .semi-popconfirm-inner { padding: 12px 8px 12px 12px; } @keyframes semi-popover-zoomIn { from { opacity: 0; transform: scale(0.8, 0.8); } 50% { opacity: 1; } } @keyframes semi-popover-zoomOut { from { opacity: 1; } 60% { opacity: 0; transform: scale(0.8, 0.8); } to { opacity: 0; } } .semi-popover-wrapper { position: relative; background-color: var(--semi-color-bg-3); box-shadow: var(--semi-shadow-elevated); z-index: 1030; border-radius: var(--semi-border-radius-medium); font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; opacity: 0; } .semi-popover-wrapper-show { opacity: 1; } .semi-popover-trigger { display: inline-block; width: auto; height: auto; } .semi-popover-title { padding: 8px; border-bottom: 1px solid var(--semi-color-border); } .semi-popover-confirm { position: absolute; } .semi-popover-with-arrow { padding: 12px; box-sizing: border-box; } .semi-popover-animation-show { animation: semi-popover-zoomIn 100ms cubic-bezier(0.215, 0.61, 0.355, 1); animation-fill-mode: forwards; } .semi-popover-animation-hide { animation: semi-popover-zoomOut 100ms cubic-bezier(0.215, 0.61, 0.355, 1); animation-fill-mode: forwards; } .semi-popover-wrapper .semi-popover-icon-arrow { height: 8px; width: 24px; position: absolute; color: unset; } .semi-popover-wrapper[x-placement=top] .semi-popover-icon-arrow { left: 50%; transform: translateX(-50%); bottom: -7px; } .semi-popover-wrapper[x-placement=top].semi-popover-with-arrow, .semi-popover-wrapper[x-placement=top] .semi-popover-with-arrow { min-width: 36px; } .semi-popover-wrapper[x-placement=topLeft] .semi-popover-icon-arrow { bottom: -7px; left: 6px; } .semi-popover-wrapper[x-placement=topLeft].semi-popover-with-arrow, .semi-popover-wrapper[x-placement=topLeft] .semi-popover-with-arrow { min-width: 36px; } .semi-popover-wrapper[x-placement=topRight] .semi-popover-icon-arrow { bottom: -7px; right: 6px; } .semi-popover-wrapper[x-placement=topRight].semi-popover-with-arrow, .semi-popover-wrapper[x-placement=topRight] .semi-popover-with-arrow { min-width: 36px; } .semi-popover-wrapper[x-placement=leftTop] .semi-popover-icon-arrow { width: 8px; height: 24px; right: -7px; top: 6px; } .semi-popover-wrapper[x-placement=leftTop].semi-popover-with-arrow, .semi-popover-wrapper[x-placement=leftTop] .semi-popover-with-arrow { min-height: 36px; } .semi-popover-wrapper[x-placement=left] .semi-popover-icon-arrow { width: 8px; height: 24px; right: -7px; top: 50%; transform: translateY(-50%); } .semi-popover-wrapper[x-placement=left].semi-popover-with-arrow, .semi-popover-wrapper[x-placement=left] .semi-popover-with-arrow { min-height: 36px; } .semi-popover-wrapper[x-placement=leftBottom] .semi-popover-icon-arrow { width: 8px; height: 24px; right: -7px; bottom: 6px; } .semi-popover-wrapper[x-placement=leftBottom].semi-popover-with-arrow, .semi-popover-wrapper[x-placement=leftBottom] .semi-popover-with-arrow { min-height: 36px; } .semi-popover-wrapper[x-placement=rightTop] .semi-popover-icon-arrow { width: 8px; height: 24px; left: -7px; top: 6px; transform: rotate(180deg); } .semi-popover-wrapper[x-placement=rightTop].semi-popover-with-arrow, .semi-popover-wrapper[x-placement=rightTop] .semi-popover-with-arrow { min-height: 36px; } .semi-popover-wrapper[x-placement=right] .semi-popover-icon-arrow { width: 8px; height: 24px; left: -7px; top: 50%; transform: translateY(-50%) rotate(180deg); } .semi-popover-wrapper[x-placement=right].semi-popover-with-arrow, .semi-popover-wrapper[x-placement=right] .semi-popover-with-arrow { min-height: 36px; } .semi-popover-wrapper[x-placement=rightBottom] .semi-popover-icon-arrow { width: 8px; height: 24px; left: -7px; bottom: 6px; transform: rotate(180deg); } .semi-popover-wrapper[x-placement=rightBottom].semi-popover-with-arrow, .semi-popover-wrapper[x-placement=rightBottom] .semi-popover-with-arrow { min-height: 36px; } .semi-popover-wrapper[x-placement=bottomLeft] .semi-popover-icon-arrow { top: -7px; left: 6px; transform: rotate(180deg); } .semi-popover-wrapper[x-placement=bottomLeft].semi-popover-with-arrow, .semi-popover-wrapper[x-placement=bottomLeft] .semi-popover-with-arrow { min-width: 36px; } .semi-popover-wrapper[x-placement=bottom] .semi-popover-icon-arrow { top: -7px; left: 50%; transform: translateX(-50%) rotate(180deg); } .semi-popover-wrapper[x-placement=bottom].semi-popover-with-arrow, .semi-popover-wrapper[x-placement=bottom] .semi-popover-with-arrow { min-width: 36px; } .semi-popover-wrapper[x-placement=bottomRight] .semi-popover-icon-arrow { right: 6px; top: -7px; transform: rotate(180deg); } .semi-popover-wrapper[x-placement=bottomRight].semi-popover-with-arrow, .semi-popover-wrapper[x-placement=bottomRight] .semi-popover-with-arrow { min-width: 36px; } .semi-popover.semi-popover-rtl { direction: rtl; } .semi-progress { display: flex; align-items: center; } .semi-progress-track { background-color: var(--semi-color-fill-0); border-radius: var(--semi-border-radius-small); } .semi-progress-horizontal { height: 4px; margin-top: 4px; margin-bottom: 4px; } .semi-progress-horizontal.semi-progress-large { height: 6px; } .semi-progress-horizontal .semi-progress-track { height: 100%; width: 100%; } .semi-progress-horizontal .semi-progress-track-inner { height: 100%; background-color: var(--semi-color-success); border-radius: var(--semi-border-radius-small); transition: width 0.3s; transition-timing-function: cubic-bezier(0.62, 0.05, 0.36, 0.95); } .semi-progress-horizontal .semi-progress-line-text { min-width: 45px; font-weight: 600; margin-left: 16px; color: var(--semi-color-text-0); } .semi-progress-vertical { width: 4px; display: inline-flex; height: 100%; margin-left: 4px; margin-right: 4px; flex-direction: column; } .semi-progress-vertical.semi-progress-large { width: 6px; } .semi-progress-vertical .semi-progress-track { height: 100%; width: 100%; } .semi-progress-vertical .semi-progress-track-inner { background-color: var(--semi-color-success); border-radius: var(--semi-border-radius-small); width: 100%; transition: height 0.3s; transition-timing-function: cubic-bezier(0.62, 0.05, 0.36, 0.95); } .semi-progress-vertical .semi-progress-line-text { font-weight: 600; margin-top: 8px; } .semi-progress-circle { position: relative; display: inline-block; } .semi-progress-circle-ring { display: block; } .semi-progress-circle-ring-inner { transition: stroke-dashoffset 0.3s; transition-timing-function: cubic-bezier(0.62, 0.05, 0.36, 0.95); transform: rotate(-90deg); transform-origin: 50% 50%; } .semi-progress-circle-text { position: absolute; top: 50%; left: 50%; width: 100%; text-align: center; transform: translate(-50%, -50%); user-select: none; color: var(--semi-color-mode-minor-text); } .semi-rtl .semi-progress, .semi-portal-rtl .semi-progress { direction: rtl; } .semi-rtl .semi-progress-horizontal .semi-progress-line-text, .semi-portal-rtl .semi-progress-horizontal .semi-progress-line-text { margin-left: 0; margin-right: 16px; } .semi-rtl .semi-progress-circle-ring-inner, .semi-portal-rtl .semi-progress-circle-ring-inner { transform: rotate(-90deg); transform-origin: 50% 50%; } .semi-rtl .semi-progress-circle-text, .semi-portal-rtl .semi-progress-circle-text { left: auto; right: 50%; transform: translate(50%, -50%); } .semi-radio { box-sizing: border-box; font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; display: inline-flex; column-gap: 8px; transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); min-height: 20px; min-width: 16px; cursor: pointer; vertical-align: bottom; text-align: left; } .semi-radio.semi-radio-vertical { display: block; } .semi-radio input[type=checkbox], .semi-radio input[type=radio] { position: absolute; left: 0; top: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .semi-radio:hover .semi-radio-inner-display { background: var(--semi-color-fill-0); border: solid 1px var(--semi-color-focus-border); } .semi-radio:hover.semi-radio-cardRadioGroup .semi-radio-inner-display { background: var(--semi-color-white); } .semi-radio:hover .semi-radio-inner-checked .semi-radio-inner-display { background: var(--semi-color-primary-hover); border-color: var(--semi-color-primary-hover); } .semi-radio:active .semi-radio-inner-display { background: var(--semi-color-fill-1); } .semi-radio:active.semi-radio-cardRadioGroup .semi-radio-inner-display { background: var(--semi-color-white); } .semi-radio:active .semi-radio-inner-checked .semi-radio-inner-display { background: var(--semi-color-primary-active); border-color: var(--semi-color-primary-active); } .semi-radio-buttonRadioComponent { padding: 4px; background: var(--semi-color-fill-0); border-radius: var(--semi-border-radius-small); } .semi-radio-buttonRadioGroup { position: relative; padding: 4px; border-radius: var(--semi-border-radius-small); line-height: 16px; } .semi-radio-buttonRadioGroup:not(:last-child) { padding-right: 0; } .semi-radio-buttonRadioGroup-small { padding: 2px 4px; line-height: 16px; } .semi-radio-buttonRadioGroup-large { padding: 4px; line-height: 20px; } .semi-radio-cardRadioGroup { flex-wrap: nowrap; border-radius: var(--semi-border-radius-small); padding: 12px 16px; background: transparent; border: 1px solid transparent; transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); } .semi-radio-cardRadioGroup .semi-radio-inner { flex-shrink: 0; } .semi-radio-cardRadioGroup .semi-radio-inner-display { background: var(--semi-color-white); } .semi-radio-cardRadioGroup .semi-radio-addon { font-weight: 600; font-size: 14px; line-height: 20px; color: var(--semi-color-text-0); } .semi-radio-cardRadioGroup .semi-radio-extra { font-weight: normal; font-size: 14px; line-height: 20px; color: var(--semi-color-text-2); padding-left: 0; } .semi-radio-cardRadioGroup:active { background: var(--semi-color-fill-1); } .semi-radio-cardRadioGroup_checked { background: var(--semi-color-primary-light-default); border: 1px solid var(--semi-color-primary); } .semi-radio-cardRadioGroup_checked:hover { border: 1px solid var(--semi-color-primary-hover); } .semi-radio-cardRadioGroup_checked:hover .semi-radio-inner-checked .semi-radio-inner-display { border-color: var(--semi-color-primary-hover); } .semi-radio-cardRadioGroup_checked:active { background: var(--semi-color-primary-light-default); border: 1px solid var(--semi-color-primary-active); } .semi-radio-cardRadioGroup_checked:active .semi-radio-inner-checked .semi-radio-inner-display { border-color: var(--semi-color-primary-active); } .semi-radio-cardRadioGroup_checked:active .semi-radio-inner-checked:hover .semi-radio-inner-display { background: var(--semi-color-primary-active); } .semi-radio-cardRadioGroup_hover { background: var(--semi-color-fill-0); } .semi-radio-cardRadioGroup_disabled:active { background: transparent; } .semi-radio-cardRadioGroup_checked_disabled.semi-radio-cardRadioGroup { background: var(--semi-color-primary-light-default); border: 1px solid var(--semi-color-primary-disabled); } .semi-radio-cardRadioGroup_checked_disabled.semi-radio-cardRadioGroup .semi-radio-inner-checked .semi-radio-inner-display { border-color: var(--semi-color-primary-disabled); } .semi-radio-cardRadioGroup_checked_disabled.semi-radio-cardRadioGroup:hover .semi-radio-inner-checked .semi-radio-inner-display { border-color: var(--semi-color-primary-disabled); } .semi-radio.semi-radio-disabled:hover .semi-radio-inner-display, .semi-radio.semi-radio-disabled:active .semi-radio-inner-display { background: var(--semi-color-disabled-fill); border: solid 1px var(--semi-color-border); } .semi-radio.semi-radio-disabled:hover .semi-radio-inner-checked .semi-radio-inner-display, .semi-radio.semi-radio-disabled:active .semi-radio-inner-checked .semi-radio-inner-display { background: var(--semi-color-primary-disabled); border-color: var(--semi-color-primary-disabled); } .semi-radio-inner { display: inline-flex; margin-top: 2px; position: relative; width: 16px; height: 16px; vertical-align: sub; user-select: none; } .semi-radio-inner-display { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 16px; height: 16px; border: solid 1px var(--semi-color-text-3); border-radius: 16px; background: transparent; transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); } .semi-radio-inner-display .semi-icon { width: 100%; height: 100%; font-size: 14px; } .semi-radio-content { display: flex; flex-direction: column; row-gap: 4px; } .semi-radio:hover .semi-radio-inner-display { background: var(--semi-color-fill-0); } .semi-radio:active .semi-radio-inner-display { background: var(--semi-color-fill-1); } .semi-radio-addon { user-select: none; color: var(--semi-color-text-0); display: inline-flex; align-items: center; } .semi-radio-addon-buttonRadio { text-align: center; border-radius: var(--semi-border-radius-small); font-weight: 600; color: var(--semi-color-text-1); font-size: 12px; padding: 4px 16px; transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); } .semi-radio-addon-buttonRadio-hover { font-weight: 600; background: var(--semi-color-fill-1); } .semi-radio-addon-buttonRadio-checked { font-weight: 600; background: var(--semi-color-bg-3); color: var(--semi-color-primary); } .semi-radio-addon-buttonRadio-disabled { cursor: not-allowed; color: var(--semi-color-disabled-text); } .semi-radio-addon-buttonRadio-small { font-size: 12px; padding: 2px 16px; } .semi-radio-addon-buttonRadio-large { font-size: 14px; padding: 6px 24px; } .semi-radio .semi-radio-inner-checked:hover .semi-radio-inner-display { background: var(--semi-color-primary-hover); } .semi-radio .semi-radio-inner-checked:active .semi-radio-inner-display { background: var(--semi-color-primary-active); } .semi-radio .semi-radio-inner-checked .semi-radio-inner-display { border: solid 1px var(--semi-color-primary); background: var(--semi-color-primary); color: rgba(var(--semi-white), 1); border-radius: 16px; } .semi-radio .semi-radio-inner-checked > .semi-radio-addon { color: var(--semi-color-text-0); } .semi-radio .semi-radio-inner-buttonRadio, .semi-radio .semi-radio-inner-pureCardRadio { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; opacity: 0; } .semi-radio-disabled, .semi-radio-disabled:hover { cursor: not-allowed; } .semi-radio-disabled .semi-radio-inner { cursor: not-allowed; } .semi-radio-disabled .semi-radio-inner-display { opacity: 0.75; background: var(--semi-color-disabled-fill); border-color: var(--semi-color-border); } .semi-radio-disabled .semi-radio-inner-display:hover { background: transparent; } .semi-radio-disabled .semi-radio-inner-checked .semi-radio-inner-display { background: var(--semi-color-primary-disabled); border-color: var(--semi-color-primary-disabled); } .semi-radio-disabled .semi-radio-inner-checked .semi-radio-inner-display:hover { background: var(--semi-color-primary-disabled); border-color: var(--semi-color-primary-disabled); } .semi-radio-disabled .semi-radio-addon { color: var(--semi-color-disabled-text); } .semi-radio-disabled .semi-radio-extra { color: var(--semi-color-disabled-text); } .semi-radio-extra { color: var(--semi-color-text-2); box-sizing: border-box; } .semi-radio-focus { outline: 2px solid var(--semi-color-primary-light-active); } .semi-radio-focus-border { border: solid 1px var(--semi-color-focus-border); } .semi-radioGroup { font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; } .semi-radioGroup-vertical { display: flex; flex-direction: column; row-gap: 12px; } .semi-radioGroup-vertical-default .semi-radio { display: flex; } .semi-radioGroup-vertical-card .semi-radio { display: flex; } .semi-radioGroup-horizontal { display: inline-flex; flex-wrap: wrap; vertical-align: bottom; gap: 16px; } .semi-radioGroup-buttonRadio { display: inline-block; background: var(--semi-color-fill-0); border-radius: var(--semi-border-radius-small); vertical-align: middle; } .semi-rtl .semi-radio, .semi-portal-rtl .semi-radio { direction: rtl; } .semi-rtl .semi-radio input[type=checkbox], .semi-rtl .semi-radio input[type=radio], .semi-portal-rtl .semi-radio input[type=checkbox], .semi-portal-rtl .semi-radio input[type=radio] { left: auto; right: 0; } .semi-rtl .semi-radio-buttonRadioGroup:not(:last-child), .semi-portal-rtl .semi-radio-buttonRadioGroup:not(:last-child) { padding-left: 0; } .semi-rtl .semi-radioGroup, .semi-portal-rtl .semi-radioGroup { direction: rtl; } .semi-rating { display: inline-block; margin: 0px; padding: 0px; color: rgba(var(--semi-yellow-5), 1); list-style: none; outline: none; border-radius: 3px; } .semi-rating-focus { outline: 2px solid var(--semi-color-primary-light-active); } .semi-rating-no-focus { outline: none; } .semi-rating-disabled .semi-rating-star { cursor: default; } .semi-rating-disabled .semi-rating-star:hover { transform: scale(1); } .semi-rating-star { position: relative; display: inline-block; margin: 0; padding: 0; color: inherit; cursor: pointer; transition: all 0.5s; transform: scale(var(--semi-transform_scale-none)); } .semi-rating-star:not(:last-child) { margin-right: 6px; } .semi-rating-star > div:hover, .semi-rating-star > div:focus { transform: scale(1.1); } .semi-rating-star > div.semi-rating-star-disabled { transform: none; } .semi-rating-star-small { width: 16px; height: 16px; font-size: 16px; } .semi-rating-star-default { width: 24px; height: 24px; font-size: 24px; } .semi-rating-star-wrapper { position: relative; overflow: hidden; border-radius: 3px; width: 100%; height: 100%; } .semi-rating-star-first, .semi-rating-star-second { transition: color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); color: var(--semi-color-fill-0); user-select: none; } .semi-rating-star-first { position: absolute; top: 0; left: 0; width: 50%; height: 100%; overflow: hidden; opacity: 0; } .semi-rating-star-half .semi-rating-star-first, .semi-rating-star-half .semi-rating-star-second { opacity: 1; } .semi-rating-star-half .semi-rating-star-first, .semi-rating-star-full .semi-rating-star-second { color: inherit; } .semi-rtl .semi-rating, .semi-portal-rtl .semi-rating { direction: rtl; } .semi-rtl .semi-rating-star:not(:last-child), .semi-portal-rtl .semi-rating-star:not(:last-child) { margin-right: 0; margin-left: 6px; } .semi-rtl .semi-rating-star-first, .semi-portal-rtl .semi-rating-star-first { left: auto; right: 0; } .semi-scrolllist { width: 100%; height: 100%; background: var(--semi-color-bg-3); box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 4px 14px rgba(0, 0, 0, 0.1); border-radius: var(--semi-border-radius-medium); font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; user-select: none; display: flex; flex-direction: column; } .semi-scrolllist-header { text-align: center; padding: 0 16px; } .semi-scrolllist-header-title { padding: 16px 0; font-weight: 600; color: var(--semi-color-text-0); font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; } .semi-scrolllist-body { display: flex; height: 300px; padding: 0 16px; overflow: hidden; } .semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-list-outer-nocycle > ul:before, .semi-scrolllist-body .semi-scrolllist-item > ul:before { content: ""; display: block; width: 100%; height: 132px; } .semi-scrolllist-body .semi-scrolllist-item { position: relative; flex: 1; overflow-x: hidden; overflow-y: auto; } .semi-scrolllist-body .semi-scrolllist-item:not(:last-child) { border-right: 1px solid var(--semi-color-border); } .semi-scrolllist-body .semi-scrolllist-item > ul, .semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-list-outer > ul { box-sizing: border-box; width: 100%; margin: 0; padding: 0; padding-bottom: 132px; list-style: none; } .semi-scrolllist-body .semi-scrolllist-item > ul > li, .semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-list-outer > ul > li { list-style: none; height: 36px; box-sizing: border-box; color: var(--semi-color-text-0); text-align: center; display: flex; align-items: center; justify-content: center; cursor: pointer; background-color: transparent; transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeOut) 0ms; } .semi-scrolllist-body .semi-scrolllist-item > ul > li.semi-scrolllist-item-sel, .semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-list-outer > ul > li.semi-scrolllist-item-sel { background: var(--semi-color-primary-light-default); color: var(--semi-color-text-0); } .semi-scrolllist-body .semi-scrolllist-item > ul > li.semi-scrolllist-item-sel > svg, .semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-list-outer > ul > li.semi-scrolllist-item-sel > svg { color: var(--semi-color-text-2); width: 16px; height: 16px; margin-right: 12px; } .semi-scrolllist-body .semi-scrolllist-item > ul > li:not(.disabled):not(.semi-scrolllist-item-disabled):not(.semi-scrolllist-item-sel):not(.semi-scrolllist-item-selected), .semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-list-outer > ul > li:not(.disabled):not(.semi-scrolllist-item-disabled):not(.semi-scrolllist-item-sel):not(.semi-scrolllist-item-selected) { cursor: pointer; } .semi-scrolllist-body .semi-scrolllist-item > ul > li:not(.disabled):not(.semi-scrolllist-item-disabled):not(.semi-scrolllist-item-sel):not(.semi-scrolllist-item-selected):hover, .semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-list-outer > ul > li:not(.disabled):not(.semi-scrolllist-item-disabled):not(.semi-scrolllist-item-sel):not(.semi-scrolllist-item-selected):hover { background-color: var(--semi-color-fill-1); } .semi-scrolllist-body .semi-scrolllist-item > ul > li:not(.disabled):not(.semi-scrolllist-item-disabled):not(.semi-scrolllist-item-sel):not(.semi-scrolllist-item-selected):active, .semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-list-outer > ul > li:not(.disabled):not(.semi-scrolllist-item-disabled):not(.semi-scrolllist-item-sel):not(.semi-scrolllist-item-selected):active { background-color: var(--semi-color-fill-2); } .semi-scrolllist-body .semi-scrolllist-item > ul > li.semi-scrolllist-item-disabled, .semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-list-outer > ul > li.semi-scrolllist-item-disabled { color: var(--semi-color-disabled-text); cursor: not-allowed; } .semi-scrolllist-body .semi-scrolllist-item-wheel { position: relative; flex: 1; overflow: hidden; } .semi-scrolllist-body .semi-scrolllist-item-wheel:not(:last-child) { border-right: 1px solid var(--semi-color-border); } .semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-item-selected { font-weight: 600; color: var(--semi-color-primary) !important; } .semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-list-outer { overflow-x: hidden; overflow-y: auto; height: 100%; width: 100%; padding-right: 18px; } .semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-shade { width: 100%; height: 50%; pointer-events: none; position: absolute; } .semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-shade-pre { top: 0; margin-top: -19px; background: var(--semi-color-bg-3); opacity: 0.5; } .semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-shade-post { top: 50%; margin-top: 19px; background: var(--semi-color-bg-3); opacity: 0.5; } .semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-selector { pointer-events: none; position: absolute; top: 50%; border-top: 1px solid var(--semi-color-border); border-bottom: 1px solid var(--semi-color-border); height: 36px; width: 100%; transform: translateY(-50%); } .semi-scrolllist .semi-scrolllist-footer { border-top: 1px solid var(--semi-color-border); padding: 10px; } .semi-scrolllist .semi-scrolllist-line { background: var(--semi-color-border); height: 1px; } .semi-rtl .semi-scrolllist, .semi-portal-rtl .semi-scrolllist { direction: rtl; } .semi-rtl .semi-scrolllist-body .semi-scrolllist-item:not(:last-child), .semi-portal-rtl .semi-scrolllist-body .semi-scrolllist-item:not(:last-child) { border-right: 0; border-left: 1px solid var(--semi-color-border); } .semi-rtl .semi-scrolllist-body .semi-scrolllist-item > ul > li.semi-scrolllist-item-sel > svg, .semi-rtl .semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-list-outer > ul > li.semi-scrolllist-item-sel > svg, .semi-portal-rtl .semi-scrolllist-body .semi-scrolllist-item > ul > li.semi-scrolllist-item-sel > svg, .semi-portal-rtl .semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-list-outer > ul > li.semi-scrolllist-item-sel > svg { margin-right: 0; margin-left: 12px; } .semi-rtl .semi-scrolllist-body .semi-scrolllist-item-wheel:not(:last-child), .semi-portal-rtl .semi-scrolllist-body .semi-scrolllist-item-wheel:not(:last-child) { border-right: 0; border-left: 1px solid var(--semi-color-border); } .semi-rtl .semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-list-outer, .semi-portal-rtl .semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-list-outer { padding-right: 0; padding-left: 18px; } .semi-select-option { font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; word-break: break-all; padding-left: 12px; padding-right: 12px; padding-top: 8px; padding-bottom: 8px; color: var(--semi-color-text-0); border-radius: 0px; position: relative; display: flex; flex-wrap: nowrap; align-items: center; cursor: pointer; box-sizing: border-box; transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); } .semi-select-option-icon { width: 12px; color: transparent; margin-right: 8px; display: flex; justify-content: center; align-content: center; } .semi-select-option-text { display: flex; flex-wrap: wrap; white-space: pre; } .semi-select-option-keyword { color: var(--semi-color-primary); background-color: inherit; font-weight: 600; } .semi-select-option:active { background-color: var(--semi-color-fill-1); } .semi-select-option-empty { cursor: not-allowed; color: var(--semi-color-disabled-text); justify-content: center; } .semi-select-option-empty:hover { background-color: inherit; } .semi-select-option-empty:active { background-color: inherit; } .semi-select-option-disabled { color: var(--semi-color-disabled-text); cursor: not-allowed; } .semi-select-option-disabled:hover { background-color: var(--semi-color-fill-0); } .semi-select-option-selected { font-weight: 600; } .semi-select-option-selected .semi-select-option-icon { color: var(--semi-color-text-2); } .semi-select-option-focused { background-color: var(--semi-color-fill-0); } .semi-select { box-sizing: border-box; border-radius: var(--semi-border-radius-small); border: 1px solid transparent; height: 32px; font-weight: 400; background-color: var(--semi-color-fill-0); display: inline-flex; vertical-align: middle; position: relative; outline: none; cursor: pointer; transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); transform: scale(var(--semi-transform_scale-none)); max-height: 300px; overflow-y: auto; } .semi-select:hover { background-color: var(--semi-color-fill-1); border: 1px solid transparent; } .semi-select:focus { border: 1px solid var(--semi-color-focus-border); background-color: var(--semi-color-fill-0); outline: 0; } .semi-select:active { background-color: var(--semi-color-fill-2); } .semi-select-small { height: 24px; line-height: 24px; } .semi-select-large { min-height: 40px; line-height: 40px; } .semi-select-large .semi-select-selection { font-size: 16px; line-height: 22px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; } .semi-select-open, .semi-select-focus { border: 1px solid var(--semi-color-focus-border); outline: 0; } .semi-select-open:hover, .semi-select-focus:hover { background-color: var(--semi-color-fill-0); border: 1px solid var(--semi-color-focus-border); } .semi-select-open:active, .semi-select-focus:active { background-color: var(--semi-color-fill-2); border: 1px solid var(--semi-color-focus-border); } .semi-select-warning { background-color: var(--semi-color-warning-light-default); border-color: var(--semi-color-warning-light-default); } .semi-select-warning:hover { background-color: var(--semi-color-warning-light-hover); border-color: var(--semi-color-warning-light-hover); } .semi-select-warning:focus { background-color: var(--semi-color-warning-light-default); border-color: var(--semi-color-warning); } .semi-select-warning:active { background-color: var(--semi-color-warning-light-active); border-color: var(--semi-color-warning-light-active); } .semi-select-error { background-color: var(--semi-color-danger-light-default); border-color: var(--semi-color-danger-light-default); } .semi-select-error:hover { background-color: var(--semi-color-danger-light-hover); border-color: var(--semi-color-danger-light-hover); } .semi-select-error:focus { background-color: var(--semi-color-danger-light-default); border-color: var(--semi-color-danger); } .semi-select-error:active { background-color: var(--semi-color-danger-light-active); border-color: var(--semi-color-danger-light-active); } .semi-select-disabled { cursor: not-allowed; background-color: var(--semi-color-disabled-fill); } .semi-select-disabled:hover { background-color: var(--semi-color-disabled-fill); } .semi-select-disabled:focus { border: 1px solid transparent; } .semi-select-disabled .semi-select-selection, .semi-select-disabled .semi-select-selection-placeholder { color: var(--semi-color-disabled-text); cursor: not-allowed; } .semi-select-disabled .semi-select-arrow, .semi-select-disabled .semi-select-prefix, .semi-select-disabled .semi-select-suffix { color: var(--semi-color-disabled-text); } .semi-select-disabled .semi-tag { color: var(--semi-color-disabled-text); background-color: transparent; } .semi-select-selection { font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; height: 100%; display: flex; align-items: center; flex-grow: 1; overflow: hidden; margin-left: 12px; cursor: pointer; color: var(--semi-color-text-0); } .semi-select-selection-text { width: 100%; overflow: hidden; text-overflow: ellipsis; } .semi-select-selection-text-inactive { display: flex; opacity: 0.4; } .semi-select-selection-text-hide { display: none; } .semi-select-selection-placeholder { color: var(--semi-color-text-2); } .semi-select-selection .semi-tag { margin-top: 1px; margin-right: 4px; margin-bottom: 1px; } .semi-select-selection .semi-tag:nth-of-type(1) { margin-left: 0; } .semi-select-selection .semi-tag-group { height: inherit; } .semi-select-selection .semi-tag-group .semi-tag { margin-top: 1px; margin-right: 4px; margin-bottom: 1px; } .semi-select-content-wrapper { white-space: nowrap; overflow: hidden; display: flex; align-items: center; height: 100%; } .semi-select-content-wrapper-collapse { display: inline-flex; flex-shrink: 0; width: 100%; } .semi-select-content-wrapper-collapse .semi-overflow-list-overflow { max-width: 100%; min-width: 50px; } .semi-select-content-wrapper-collapse > .semi-select-content-wrapper-collapse-tag { background-color: transparent; } .semi-select-content-wrapper-collapse > .semi-select-content-wrapper-collapse-N { background-color: transparent; padding: 4px; color: var(--semi-color-text-0); font-size: 12px; } .semi-select-multiple { height: auto; } .semi-select-multiple .semi-select-selection { margin-left: 4px; } .semi-select-multiple .semi-select-content-wrapper { width: 100%; min-height: 30px; flex-wrap: wrap; } .semi-select-multiple .semi-select-content-wrapper-empty { margin-left: 8px; } .semi-select-multiple .semi-select-content-wrapper .semi-tag-group { display: flex; align-items: center; } .semi-select-multiple .semi-select-content-wrapper-one-line { flex-wrap: nowrap; } .semi-select-multiple .semi-select-content-wrapper-one-line .semi-tag-group { flex-wrap: nowrap; justify-content: flex-start; overflow: hidden; flex-shrink: 0; } .semi-select-multiple .semi-select-inline-label-wrapper { flex-shrink: 0; } .semi-select-multiple.semi-select-large .semi-select-content-wrapper { min-height: 38px; } .semi-select-multiple.semi-select-small .semi-select-content-wrapper { min-height: 22px; } .semi-select-arrow { display: flex; align-items: center; justify-content: center; width: 32px; color: var(--semi-color-text-2); flex-shrink: 0; transform: rotate(var(--semi-transform-rotate-none)); } .semi-select-arrow-empty { display: flex; width: 12px; } .semi-select-prefix, .semi-select-suffix { display: flex; justify-content: center; align-items: center; } .semi-select-prefix-text, .semi-select-suffix-text { margin: 0px 12px; } .semi-select-prefix-icon, .semi-select-suffix-icon { color: var(--semi-color-text-2); margin: 0px 8px; } .semi-select-suffix { display: flex; justify-content: center; align-items: center; } .semi-select-clear { display: flex; justify-content: center; align-items: center; width: 32px; color: var(--semi-color-text-2); flex-shrink: 0; } .semi-select-clear:hover { color: var(--semi-color-primary); } .semi-select-inset-label-wrapper { display: inline; } .semi-select-inset-label { margin-right: 12px; font-weight: 600; font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; color: var(--semi-color-text-2); flex-shrink: 0; white-space: nowrap; } .semi-select-create-tips { color: var(--semi-color-text-2); margin-right: 4px; } .semi-select-with-prefix .semi-select-selection { margin-left: 0; } .semi-select-single.semi-select-filterable .semi-select-content-wrapper { flex-grow: 1; height: 100%; overflow: hidden; position: relative; } .semi-select-single.semi-select-filterable .semi-input-wrapper { position: absolute; top: 0; left: 0; height: 100%; width: 100%; border: none; background-color: transparent; } .semi-select-single.semi-select-filterable .semi-input-wrapper-focus { border: none; } .semi-select-single.semi-select-filterable .semi-input { padding-left: 0; padding-right: 0; height: 100%; } .semi-select-multiple.semi-select-filterable .semi-select-content-wrapper { flex-grow: 1; height: 100%; overflow: hidden; position: relative; } .semi-select-multiple.semi-select-filterable .semi-select-content-wrapper-empty .semi-input-wrapper { position: absolute; top: 0; left: 0; height: 100%; width: 100%; } .semi-select-multiple.semi-select-filterable .semi-input-wrapper { height: 100%; width: 100%; border: none; background-color: transparent; } .semi-select-multiple.semi-select-filterable .semi-input-wrapper-focus { border: none; } .semi-select-multiple.semi-select-filterable .semi-input { padding-left: 0; padding-right: 0; } .semi-select-option-list-wrapper { padding-top: 4px; padding-bottom: 4px; padding-left: 0px; padding-right: 0px; } .semi-select-option-list { overflow-x: hidden; overflow-y: auto; } .semi-select-option-list-chosen .semi-select-option-icon { display: flex; } .semi-select-group { color: var(--semi-color-text-2); padding-top: 12px; margin-top: 4px; padding-bottom: 4px; padding-left: 32px; padding-right: 16px; font-size: 12px; line-height: 16px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; cursor: default; } .semi-select-group:not(:nth-of-type(1)) { border-top: 1px solid var(--semi-color-border); } .semi-select-loading-wrapper { padding-left: 16px; padding-right: 16px; padding-top: 8px; padding-bottom: 8px; cursor: not-allowed; height: 20px; box-sizing: content-box; } .semi-select-borderless:not(:focus-within):not(:hover) { background-color: transparent; border-color: transparent; } .semi-select-borderless:not(:focus-within):not(:hover) .semi-select-arrow { opacity: 0; } .semi-select-borderless:focus-within:not(:active) { background-color: transparent; } .semi-select-borderless.semi-select-error:not(:focus-within) { border-color: var(--semi-color-danger); } .semi-select-borderless.semi-select-warning:not(:focus-within) { border-color: var(--semi-color-warning); } .semi-select-borderless.semi-select-error:focus-within { border-color: var(--semi-color-danger); } .semi-select-borderless.semi-select-warning:focus-within { border-color: var(--semi-color-warning); } .semi-rtl .semi-select, .semi-portal-rtl .semi-select { direction: rtl; } .semi-rtl .semi-select-selection, .semi-portal-rtl .semi-select-selection { margin-left: 0; margin-right: 12px; } .semi-rtl .semi-select-selection .semi-tag:nth-of-type(1), .semi-portal-rtl .semi-select-selection .semi-tag:nth-of-type(1) { margin-right: 0; } .semi-rtl .semi-select-selection .semi-tag-group .semi-tag, .semi-portal-rtl .semi-select-selection .semi-tag-group .semi-tag { margin-left: 4px; margin-right: 0; } .semi-rtl .semi-select-multiple .semi-select-selection, .semi-portal-rtl .semi-select-multiple .semi-select-selection { margin-left: 0; margin-right: 4px; } .semi-rtl .semi-select-multiple .semi-select-content-wrapper-empty, .semi-portal-rtl .semi-select-multiple .semi-select-content-wrapper-empty { margin-left: 0; margin-right: 8px; } .semi-rtl .semi-select-inset-label, .semi-portal-rtl .semi-select-inset-label { margin-left: 12px; } .semi-rtl .semi-select-create-tips, .semi-portal-rtl .semi-select-create-tips { margin-right: 0; margin-left: 4px; } .semi-rtl .semi-select-with-prefix .semi-select-selection, .semi-portal-rtl .semi-select-with-prefix .semi-select-selection { margin-left: auto; margin-right: 0; } .semi-rtl .semi-select-single.semi-select-filterable .semi-input-wrapper, .semi-portal-rtl .semi-select-single.semi-select-filterable .semi-input-wrapper { left: auto; right: 0; } .semi-rtl .semi-select-multiple.semi-select-filterable .semi-select-content-wrapper-empty .semi-input-wrapper, .semi-portal-rtl .semi-select-multiple.semi-select-filterable .semi-select-content-wrapper-empty .semi-input-wrapper { left: auto; right: 0; } .semi-rtl .semi-select-group, .semi-portal-rtl .semi-select-group { padding-left: 32px; padding-right: 16px; } .semi-rtl .semi-select-option-icon, .semi-portal-rtl .semi-select-option-icon { margin-right: 0; margin-left: 8px; } .semi-sidesheet { font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; position: fixed; margin: 0; top: 0; left: 0; height: 100%; } .semi-sidesheet-inner:focus, .semi-sidesheet-content:focus { outline: none; } .semi-sidesheet-inner-wrap { position: absolute; } .semi-sidesheet-left, .semi-sidesheet-right { top: 0; width: 0%; height: 100%; } .semi-sidesheet-left .semi-sidesheet-inner-wrap, .semi-sidesheet-right .semi-sidesheet-inner-wrap { height: 100%; } .semi-sidesheet-left.semi-sidesheet, .semi-sidesheet-right.semi-sidesheet { width: 100%; } .semi-sidesheet-right { right: 0; } .semi-sidesheet-right .semi-sidesheet-inner-wrap { right: 0; } .semi-sidesheet-top, .semi-sidesheet-bottom { left: 0; width: 100%; height: 0%; } .semi-sidesheet-top .semi-sidesheet-inner-wrap, .semi-sidesheet-bottom .semi-sidesheet-inner-wrap { width: 100%; } .semi-sidesheet-top.semi-sidesheet, .semi-sidesheet-bottom.semi-sidesheet { height: 100%; } .semi-sidesheet-top { top: 0; } .semi-sidesheet-bottom { bottom: 0; } .semi-sidesheet-bottom .semi-sidesheet-inner-wrap { bottom: 0; } .semi-sidesheet-title { flex: 1 0 auto; margin: 0; font-size: 18px; line-height: 24px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 600; font-size: 18px; color: var(--semi-color-text-0); text-align: left; } .semi-sidesheet-inner { z-index: 1; overflow: auto; background-color: var(--semi-color-bg-2); border: 0; } .semi-sidesheet-header { display: flex; align-items: flex-start; padding: 24px; padding-bottom: 20px; border-bottom: 0px solid var(--semi-color-border); } .semi-sidesheet-body { padding: 0 24px; flex: 1; overflow: auto; } .semi-sidesheet-size-small { width: 448px; } .semi-sidesheet-size-medium { width: 684px; } .semi-sidesheet-size-large { width: 920px; } .semi-sidesheet-size-small.semi-sidesheet { width: 448px; } .semi-sidesheet-size-medium.semi-sidesheet { width: 684px; } .semi-sidesheet-size-large.semi-sidesheet { width: 920px; } .semi-sidesheet-content { height: 100%; display: flex; flex-direction: column; box-sizing: border-box; overflow: hidden; } .semi-sidesheet-mask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--semi-color-overlay-bg); opacity: 1; } .semi-sidesheet-mask-hidden { opacity: 0; display: none; } .semi-sidesheet-footer { padding: 24px; } @keyframes semi-sidesheet-slideShow_top { from { transform: translateY(-100%); } to { transform: translateY(0); } } @keyframes semi-sidesheet-slideHide_top { from { transform: translateY(0); } to { transform: translateY(-100%); } } @keyframes semi-sidesheet-slideShow_bottom { from { transform: translateY(100%); } to { transform: translateY(0); } } @keyframes semi-sidesheet-slideHide_bottom { from { transform: translateY(0); } to { transform: translateY(100%); } } @keyframes semi-sidesheet-slideShow_left { from { transform: translateX(-100%); } to { transform: translateX(0); } } @keyframes semi-sidesheet-slideHide_left { from { transform: translateX(0); } to { transform: translateX(-100%); } } @keyframes semi-sidesheet-slideShow_right { from { transform: translateX(100%); } to { transform: translateX(0); } } @keyframes semi-sidesheet-slideHide_right { from { transform: translateX(0); } to { transform: translateX(100%); } } @keyframes semi-sidesheet-opacityShow { from { opacity: 0; } to { opacity: 1; } } @keyframes semi-sidesheet-opacityHide { from { opacity: 1; } to { opacity: 0; } } .semi-sidesheet-animation-content_show_top { animation: semi-sidesheet-slideShow_top 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms; animation-fill-mode: forwards; } .semi-sidesheet-animation-content_hide_top { animation: semi-sidesheet-slideHide_top 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms; animation-fill-mode: forwards; } .semi-sidesheet-animation-content_show_bottom { animation: semi-sidesheet-slideShow_bottom 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms; animation-fill-mode: forwards; } .semi-sidesheet-animation-content_hide_bottom { animation: semi-sidesheet-slideHide_bottom 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms; animation-fill-mode: forwards; } .semi-sidesheet-animation-content_show_left { animation: semi-sidesheet-slideShow_left 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms; animation-fill-mode: forwards; } .semi-sidesheet-animation-content_hide_left { animation: semi-sidesheet-slideHide_left 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms; animation-fill-mode: forwards; } .semi-sidesheet-animation-content_show_right { animation: semi-sidesheet-slideShow_right 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms; animation-fill-mode: forwards; } .semi-sidesheet-animation-content_hide_right { animation: semi-sidesheet-slideHide_right 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms; animation-fill-mode: forwards; } .semi-sidesheet-animation-mask_show { animation: semi-sidesheet-opacityShow 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms; animation-fill-mode: forwards; } .semi-sidesheet-animation-mask_hide { animation: semi-sidesheet-opacityHide 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms; animation-fill-mode: forwards; } .semi-sidesheet-fixed .semi-sidesheet-inner { box-shadow: var(--semi-shadow-elevated); } .semi-sidesheet-fixed.semi-sidesheet-left { left: 0; } .semi-sidesheet-fixed.semi-sidesheet-left .semi-sidesheet-inner { left: 0; } .semi-sidesheet-fixed.semi-sidesheet-right { left: auto; } .semi-sidesheet-fixed.semi-sidesheet-right .semi-sidesheet-inner { right: 0; } .semi-sidesheet-fixed.semi-sidesheet-top, .semi-sidesheet-fixed.semi-sidesheet-bottom { height: auto; } .semi-sidesheet-fixed.semi-sidesheet-bottom { top: auto; } .semi-sidesheet-fixed.semi-sidesheet-bottom .semi-sidesheet-inner { bottom: 0; } .semi-sidesheet.semi-sidesheet-popup { position: absolute; } .semi-sidesheet-hidden { display: none; } .semi-sidesheet-rtl .semi-sidesheet-inner { direction: rtl; } .semi-sidesheet-rtl .semi-sidesheet-title { text-align: right; } .semi-skeleton-avatar, .semi-skeleton-image, .semi-skeleton-title, .semi-skeleton-button { background: var(--semi-color-fill-0); border-radius: var(--semi-border-radius-small); } .semi-skeleton-avatar-circle { border-radius: 50%; } .semi-skeleton-avatar-extra-extra-small { width: 20px; height: 20px; } .semi-skeleton-avatar-extra-small { width: 24px; height: 24px; } .semi-skeleton-avatar-medium { width: 48px; height: 48px; } .semi-skeleton-avatar-small { width: 32px; height: 32px; } .semi-skeleton-avatar-large { width: 72px; height: 72px; } .semi-skeleton-avatar-extra-large { width: 128px; height: 128px; } .semi-skeleton-paragraph { margin: 0; padding: 0; list-style-type: none; } .semi-skeleton-paragraph li { background: var(--semi-color-fill-0); border-radius: var(--semi-border-radius-small); width: 100%; height: 16px; margin-bottom: 10px; } .semi-skeleton-paragraph li:last-child { width: 60%; margin-bottom: 0; } .semi-skeleton-paragraph li:first-child { width: 100%; } .semi-skeleton-title { width: 100%; height: 24px; } .semi-skeleton-button { width: 115px; height: 32px; } .semi-skeleton-image { width: 100%; height: 100%; } .semi-skeleton-active .semi-skeleton-avatar, .semi-skeleton-active .semi-skeleton-image, .semi-skeleton-active .semi-skeleton-title, .semi-skeleton-active .semi-skeleton-button, .semi-skeleton-active .semi-skeleton-paragraph li { background: linear-gradient(90deg, var(--semi-color-fill-0) 25%, var(--semi-color-fill-1) 44%, var(--semi-color-fill-0) 88%); background-size: 400% 100%; animation: 1400ms skeleton-loading ease infinite; animation-fill-mode: forwards; } @keyframes skeleton-loading { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } .semi-rtl .semi-skeleton, .semi-portal-rtl .semi-skeleton { direction: rtl; } .semi-slider { padding: 0px 13px; margin: 0px; } .semi-slider-wrapper { box-sizing: border-box; position: relative; height: 32px; width: 100%; display: inline-block; vertical-align: bottom; } .semi-slider-rail { box-sizing: border-box; margin: 0px; padding: 0px; color: rgba(0, 0, 0, 0.65); font-size: 14px; font-variant: tabular-nums; line-height: 1.5; list-style: none; font-feature-settings: "tnum"; position: absolute; height: 4px; cursor: pointer; touch-action: none; background-color: var(--semi-color-fill-0); width: 100%; border-radius: var(--semi-border-radius-small); top: 14px; } .semi-slider-handle { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.3); box-sizing: border-box; touch-action: none; position: absolute; width: 24px; height: 24px; margin-top: 4px; background-color: var(--semi-color-white); border: none; border-radius: 50%; cursor: pointer; transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); transform: var(--semi-transform_scale-small) translateX(-50%) translateY(0px); } .semi-slider-handle:focus-visible { outline: 2px solid var(--semi-color-primary-light-active); } .semi-slider-handle:hover { background-color: var(--semi-color-white); } .semi-slider-handle-clicked { border: solid 1px var(--semi-color-focus-border); cursor: grabbing; } .semi-slider-track { height: 4px; background: var(--semi-color-primary); border-radius: var(--semi-border-radius-small); position: absolute; cursor: pointer; top: 14px; } .semi-slider-tooltip { position: absolute; top: -40px; } .semi-slider-dots { width: 100%; background: transparent; } .semi-slider-dot { position: absolute; top: 14px; width: 4px; height: 4px; background-color: var(--semi-color-white); border-radius: 50%; cursor: pointer; transform: translateX(0px); } .semi-slider-dot-active { background-color: var(--semi-color-white); } .semi-slider-marks { position: absolute; top: 23px; left: 0px; width: 100%; font-size: 14px; } .semi-slider-mark { position: absolute; display: inline-block; color: var(--semi-color-text-2); text-align: center; cursor: pointer; transform: translate(-50%, 0); } .semi-slider-marks-reverse { position: absolute; top: 23px; left: 0px; width: 100%; font-size: 14px; } .semi-slider-mark-reverse { position: absolute; display: inline-block; color: var(--semi-color-text-2); text-align: center; cursor: pointer; transform: translate(-50%, 0) rotate(-180deg); } .semi-slider-boundary { position: relative; font-size: 12px; color: var(--semi-color-text-0); visibility: hidden; top: 30px; } .semi-slider-boundary span { position: absolute; display: inline-block; } .semi-slider-boundary-min { left: 0px; } .semi-slider-boundary-max { right: 0px; } .semi-slider-boundary-show { visibility: visible; } .semi-slider-vertical-wrapper { width: 4px; height: 100%; } .semi-slider-vertical-wrapper .semi-slider-track { width: 4px; } .semi-slider-vertical-wrapper .semi-slider-marks { height: 100%; margin-top: -30px; margin-left: 29px; } .semi-slider-vertical-wrapper .semi-slider-marks-reverse { height: 100%; margin-top: -30px; margin-left: -26px; } .semi-slider-vertical-wrapper .semi-slider-rail { width: 4px; height: 100%; top: 0px; } .semi-slider-vertical-wrapper .semi-slider-handle { margin-top: 0px; margin-left: -10px; transform: var(--semi-transform_scale-small) translateY(-50%) translateX(0px); } .semi-slider-vertical-wrapper .semi-slider-dot { transform: translateY(0px); } .semi-slider-disabled { cursor: not-allowed; } .semi-slider-disabled .semi-slider-handle { cursor: not-allowed; box-shadow: none; border: 1px var(--semi-color-border) solid; } .semi-slider-disabled .semi-slider-handle:hover { background-color: var(--semi-color-white); } .semi-slider-disabled .semi-slider-rail { cursor: not-allowed; } .semi-slider-disabled .semi-slider-track { cursor: not-allowed; background-color: var(--semi-color-primary-disabled); } .semi-slider-disabled .semi-slider-dot { cursor: not-allowed; background-color: var(--semi-color-white); border-color: var(--semi-color-white); box-shadow: none; } .semi-slider-handle-tooltip { text-align: center; } .semi-slider-reverse { transform: rotate(180deg); } .semi-space { display: inline-flex; } .semi-space-vertical { flex-direction: column; } .semi-space-horizontal { flex-direction: row; } .semi-space-align-center { align-items: center; } .semi-space-align-end { align-items: flex-end; } .semi-space-align-start { align-items: flex-start; } .semi-space-align-baseline { align-items: baseline; } .semi-space-wrap { flex-wrap: wrap; } .semi-space-tight-horizontal { column-gap: 8px; } .semi-space-tight-vertical { row-gap: 8px; } .semi-space-medium-horizontal { column-gap: 16px; } .semi-space-medium-vertical { row-gap: 16px; } .semi-space-loose-horizontal { column-gap: 24px; } .semi-space-loose-vertical { row-gap: 24px; } .semi-rtl .semi-space, .semi-portal-rtl .semi-space { direction: rtl; } .semi-spin { position: relative; display: inline-block; width: 20px; height: 20px; } @keyframes semi-animation-rotate { from { transform: rotate(0); } to { transform: rotate(360deg); } } .semi-spin-wrapper { text-align: center; position: absolute; width: 100%; transform: translateY(-50%); top: 50%; color: var(--semi-color-primary); } .semi-spin-wrapper > svg { animation: 600ms linear infinite semi-animation-rotate; animation-fill-mode: forwards; vertical-align: top; width: 20px; height: 20px; } .semi-spin-animate { display: inline-flex; animation: 1600ms linear infinite semi-animation-rotate; animation-fill-mode: forwards; } .semi-spin-children { opacity: 0.5; user-select: none; } .semi-spin-block { display: block; } .semi-spin-block::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .semi-spin-block .semi-spin-wrapper { display: block; } .semi-spin-block.semi-spin { height: auto; width: auto; } .semi-spin-hidden::after { content: none; } .semi-spin-hidden > .semi-spin-children { opacity: 1; user-select: auto; } .semi-spin-small { width: 14px; height: 14px; } .semi-spin-small > .semi-spin-wrapper svg { width: 14px; height: 14px; } .semi-spin-middle { width: 20px; height: 20px; } .semi-spin-middle > .semi-spin-wrapper svg { width: 20px; height: 20px; } .semi-spin-large { width: 32px; height: 32px; } .semi-spin-large > .semi-spin-wrapper svg { width: 32px; height: 32px; } .semi-spin-container { overflow: hidden; } .semi-rtl .semi-spin, .semi-portal-rtl .semi-spin { direction: rtl; } .semi-rtl .semi-spin-container, .semi-portal-rtl .semi-spin-container { direction: rtl; } .semi-steps .semi-col { flex: 1; } .semi-steps-vertical .semi-row-flex { flex-direction: column; } .semi-steps .semi-steps-item { box-sizing: border-box; display: flex; height: 72px; position: relative; overflow: hidden; margin-right: 16px; border: 1px solid transparent; border-radius: var(--semi-border-radius-medium); padding: 12px 16px; transition: color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); transform: scale(var(--semi-transform_scale-small)); transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); } .semi-steps .semi-steps-item .semi-steps-item-title { position: relative; font-size: 18px; line-height: 24px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 600; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--semi-color-text-0); transition: color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); } .semi-steps .semi-steps-item .semi-steps-item-description { font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; color: var(--semi-color-text-2); width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .semi-steps .semi-steps-item-process { background-color: var(--semi-color-primary-light-default); } .semi-steps .semi-steps-item-process .semi-steps-item-left:not(.semi-steps-item-icon) { background: var(--semi-color-primary); } .semi-steps .semi-steps-item-process .semi-steps-item-title, .semi-steps .semi-steps-item-process .semi-steps-item-icon { color: var(--semi-color-primary); } .semi-steps .semi-steps-item-wait .semi-steps-item-left:not(.semi-steps-item-icon) { background: var(--semi-color-text-2); } .semi-steps .semi-steps-item-wait .semi-steps-item-icon { color: var(--semi-color-text-2); } .semi-steps .semi-steps-item-finish .semi-icon, .semi-steps .semi-steps-item-finish .semi-steps-item-title { color: var(--semi-color-success); } .semi-steps .semi-steps-item-finish-hover:hover { background-color: var(--semi-color-fill-0); } .semi-steps .semi-steps-item-finish-hover:hover .semi-icon, .semi-steps .semi-steps-item-finish-hover:hover .semi-steps-item-title { color: var(--semi-color-success-hover); } .semi-steps .semi-steps-item-finish-active:active { background-color: var(--semi-color-fill-1); } .semi-steps .semi-steps-item-finish-active:active .semi-icon, .semi-steps .semi-steps-item-finish-active:active .semi-steps-item-title { color: var(--semi-color-success-active); } .semi-steps .semi-steps-item-error .semi-icon, .semi-steps .semi-steps-item-error .semi-steps-item-title { color: var(--semi-color-danger); } .semi-steps .semi-steps-item-error-hover:hover { background: var(--semi-color-fill-0); } .semi-steps .semi-steps-item-error-hover:hover .semi-icon, .semi-steps .semi-steps-item-error-hover:hover .semi-steps-item-title { color: var(--semi-color-danger-hover); } .semi-steps .semi-steps-item-error-active:active { background-color: var(--semi-color-fill-1); } .semi-steps .semi-steps-item-error-active:active .semi-icon, .semi-steps .semi-steps-item-error-active:active .semi-steps-item-title { color: var(--semi-color-danger-active); } .semi-steps .semi-steps-item-warning .semi-steps-item-title, .semi-steps .semi-steps-item-warning .semi-icon { color: var(--semi-color-warning); } .semi-steps .semi-steps-item-warning-hover:hover { background: var(--semi-color-fill-0); } .semi-steps .semi-steps-item-warning-hover:hover .semi-steps-item-title, .semi-steps .semi-steps-item-warning-hover:hover .semi-icon { color: var(--semi-color-warning-hover); } .semi-steps .semi-steps-item-warning-active:active { background-color: var(--semi-color-fill-1); } .semi-steps .semi-steps-item-warning-active:active .semi-steps-item-title, .semi-steps .semi-steps-item-warning-active:active .semi-icon { color: var(--semi-color-warning-active); } .semi-steps .semi-steps-item-clickable { cursor: pointer; } .semi-steps .semi-steps-item-left { width: 24px; height: 24px; line-height: 32px; text-align: center; border-radius: 32px; display: flex; align-items: center; justify-content: center; font-size: 20px; line-height: 28px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 600; flex-grow: 0; } .semi-steps .semi-steps-item-left.semi-steps-item-plain { color: rgba(var(--semi-white), 1); } .semi-steps .semi-steps-item-left-process { background: var(--semi-color-primary-light-default); } .semi-steps .semi-steps-item-content { margin-left: 16px; flex: 1; overflow: hidden; } .semi-steps-basic.semi-steps-horizontal { display: flex; flex-flow: row nowrap; } .semi-steps-basic.semi-steps-horizontal.semi-steps-hasline .semi-steps-item-title::after { content: ""; position: absolute; top: 50%; left: 100%; display: block; width: 9999px; height: 1px; background: var(--semi-color-fill-2); } .semi-steps-basic.semi-steps-horizontal .semi-steps-item { padding-left: 16px; } .semi-steps-basic.semi-steps-horizontal .semi-steps-item:first-child { padding-left: 0; } .semi-steps-basic.semi-steps-horizontal .semi-steps-item:last-child { flex: none; } .semi-steps-basic.semi-steps-horizontal .semi-steps-item:last-child .semi-steps-item-title { max-width: 100%; padding-right: 0; } .semi-steps-basic.semi-steps-horizontal .semi-steps-item:last-child .semi-steps-item-title::after { display: none; } .semi-steps-basic.semi-steps-horizontal .semi-steps-item-done .semi-steps-item-container .semi-steps-item-title::after { background: var(--semi-color-primary); } .semi-steps-basic.semi-steps-horizontal .semi-steps-item .semi-steps-item-content { flex: 1; } .semi-steps-basic.semi-steps-horizontal .semi-steps-item .semi-steps-item-description { font-size: 12px; line-height: 16px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; color: var(--semi-color-text-2); width: 100%; max-width: 268px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .semi-steps-basic.semi-steps-horizontal .semi-steps-item .semi-steps-item-title { max-width: 80%; } .semi-steps-basic.semi-steps-horizontal .semi-steps-item .semi-steps-item-title .semi-steps-item-title-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); } .semi-steps-basic.semi-steps-vertical { display: flex; flex-flow: column nowrap; } .semi-steps-basic.semi-steps-vertical.semi-steps-small .semi-steps-item .semi-steps-item-content { min-height: 40px; } .semi-steps-basic.semi-steps-vertical.semi-steps-hasline .semi-steps-item-icon::after { content: ""; position: absolute; top: 100%; left: 50%; display: block; width: 1px; height: 9999px; background: var(--semi-color-fill-2); } .semi-steps-basic.semi-steps-vertical .semi-steps-item { padding-top: 9px; } .semi-steps-basic.semi-steps-vertical .semi-steps-item:first-child { padding-top: 0; } .semi-steps-basic.semi-steps-vertical .semi-steps-item:last-child .semi-steps-item-icon::after { display: none; } .semi-steps-basic.semi-steps-vertical .semi-steps-item-done .semi-steps-item-icon::after { background: var(--semi-color-primary); } .semi-steps-basic.semi-steps-vertical .semi-steps-item .semi-steps-item-content { min-height: 42px; padding-bottom: 22px; } .semi-steps-basic.semi-steps-vertical .semi-steps-item .semi-steps-item-icon { display: inline-flex; position: relative; padding-bottom: 9px; } .semi-steps-basic.semi-steps-vertical .semi-steps-item .semi-steps-item-description { font-size: 12px; line-height: 16px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; color: var(--semi-color-text-2); width: 100%; } .semi-steps-basic.semi-steps-vertical .semi-steps-item .semi-steps-item-title { max-width: 100%; } .semi-steps-basic.semi-steps-vertical .semi-steps-item .semi-steps-item-title .semi-steps-item-title-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .semi-steps-basic .semi-steps-item { box-sizing: border-box; position: relative; display: inline-block; vertical-align: top; overflow: hidden; flex: 1; transition: color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); transform: scale(var(--semi-transform_scale-small)); } .semi-steps-basic .semi-steps-item-clickable { cursor: pointer; } .semi-steps-basic .semi-steps-item-hover:hover .semi-steps-item-title { color: var(--semi-color-focus-border); } .semi-steps-basic .semi-steps-item-hover:hover .semi-steps-item-description { color: var(--semi-color-focus-border); } .semi-steps-basic .semi-steps-item .semi-steps-item-container { display: flex; align-items: flex-start; } .semi-steps-basic .semi-steps-item .semi-steps-item-left { display: flex; justify-content: center; align-items: center; margin-right: 8px; } .semi-steps-basic .semi-steps-item .semi-steps-item-left .semi-steps-item-icon { display: flex; height: 24px; align-items: center; } .semi-steps-basic .semi-steps-item .semi-steps-item-left .semi-steps-item-number-icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; font-size: 16px; line-height: 22px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 600; background: var(--semi-color-primary); border-radius: var(--semi-border-radius-circle); color: var(--semi-color-white); transition: color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); } .semi-steps-basic .semi-steps-item .semi-steps-item-title { position: relative; display: inline-block; font-size: 16px; line-height: 22px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 24px; font-weight: 600; color: var(--semi-color-text-0); vertical-align: top; padding-right: 16px; padding-bottom: 4px; transition: color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); } .semi-steps-basic .semi-steps-item-finish .semi-steps-item-left .semi-steps-item-icon { color: var(--semi-color-primary); } .semi-steps-basic .semi-steps-item-finish .semi-steps-item-left .semi-steps-item-icon .semi-steps-item-number-icon { color: var(--semi-color-white); } .semi-steps-basic .semi-steps-item-wait .semi-steps-item-title { color: var(--semi-color-text-2); } .semi-steps-basic .semi-steps-item-wait .semi-steps-item-left .semi-steps-item-icon { color: var(--semi-color-text-2); } .semi-steps-basic .semi-steps-item-wait .semi-steps-item-left .semi-steps-item-icon .semi-steps-item-number-icon { background: var(--semi-color-fill-0); color: var(--semi-color-text-2); } .semi-steps-basic .semi-steps-item-wait-hover:hover .semi-steps-item-left .semi-steps-item-icon .semi-steps-item-number-icon { background: var(--semi-color-secondary-light-default); color: var(--semi-color-focus-border); } .semi-steps-basic .semi-steps-item-process .semi-steps-item-left .semi-steps-item-icon { color: var(--semi-color-primary); } .semi-steps-basic .semi-steps-item-process .semi-steps-item-left .semi-steps-item-icon .semi-steps-item-number-icon { color: var(--semi-color-white); } .semi-steps-basic .semi-steps-item-error .semi-steps-item-left .semi-steps-item-icon { color: var(--semi-color-danger); } .semi-steps-basic .semi-steps-item-error .semi-steps-item-left .semi-steps-item-icon .semi-steps-item-number-icon { color: var(--semi-color-primary); } .semi-steps-basic .semi-steps-item-warning .semi-steps-item-left .semi-steps-item-icon { color: var(--semi-color-warning); } .semi-steps-basic .semi-steps-item-warning .semi-steps-item-left .semi-steps-item-icon .semi-steps-item-number-icon { color: var(--semi-color-white); } .semi-steps-basic.semi-steps-small .semi-steps-item .semi-steps-item-title { font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; } .semi-steps-basic.semi-steps-small .semi-steps-item .semi-steps-item-left .semi-steps-item-icon { height: 20px; } .semi-steps-basic.semi-steps-small .semi-steps-item .semi-steps-item-left .semi-steps-item-icon .semi-steps-item-number-icon { font-size: 12px; line-height: 16px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; width: 20px; height: 20px; } .semi-steps-nav { display: inline-flex; flex-flow: row nowrap; } .semi-steps-nav .semi-steps-item { box-sizing: border-box; } .semi-steps-nav .semi-steps-item:last-child { flex: none; } .semi-steps-nav .semi-steps-item:last-child .semi-steps-item-content { width: auto; } .semi-steps-nav .semi-steps-item .semi-steps-item-container { display: flex; align-items: center; color: var(--semi-color-text-2); } .semi-steps-nav .semi-steps-item .semi-steps-item-container .semi-steps-item-icon { display: inline-flex; flex: 1; justify-content: center; color: var(--semi-grey-3); min-width: 60px; } .semi-steps-nav .semi-steps-item .semi-steps-item-content { flex: 1; display: inline-block; } .semi-steps-nav .semi-steps-item .semi-steps-item-title { font-size: 16px; line-height: 22px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; max-width: 17em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; } .semi-steps-nav .semi-steps-item-active .semi-steps-item-title { color: var(--semi-color-text-0); font-weight: 600; } .semi-steps-nav.semi-steps-small .semi-steps-item .semi-steps-item-title { font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; } .semi-rtl .semi-steps, .semi-portal-rtl .semi-steps { direction: rtl; } .semi-rtl .semi-steps-item, .semi-portal-rtl .semi-steps-item { margin-right: auto; margin-left: 16px; } .semi-rtl .semi-steps-item-content, .semi-portal-rtl .semi-steps-item-content { margin-left: auto; margin-right: 16px; } .semi-rtl .semi-steps-basic, .semi-portal-rtl .semi-steps-basic { direction: rtl; } .semi-rtl .semi-steps-basic.semi-steps-horizontal .semi-steps-item .semi-steps-item-title, .semi-portal-rtl .semi-steps-basic.semi-steps-horizontal .semi-steps-item .semi-steps-item-title { padding-left: 16px; } .semi-rtl .semi-steps-basic.semi-steps-horizontal .semi-steps-item .semi-steps-item-title::after, .semi-portal-rtl .semi-steps-basic.semi-steps-horizontal .semi-steps-item .semi-steps-item-title::after { right: 100%; } .semi-rtl .semi-steps-basic.semi-steps-vertical .semi-steps-item, .semi-portal-rtl .semi-steps-basic.semi-steps-vertical .semi-steps-item { margin: 0; } .semi-rtl .semi-steps-nav, .semi-portal-rtl .semi-steps-nav { direction: rtl; } .semi-switch { box-sizing: border-box; display: inline-block; border-radius: 12px; border: 1px transparent solid; position: relative; cursor: pointer; background-color: var(--semi-color-fill-0); transition: background-color 200ms var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); width: 40px; height: 24px; } .semi-switch:hover { background-color: var(--semi-color-fill-1); } .semi-switch:active { border: 1px var(--semi-color-fill-2) solid; } .semi-switch:active .semi-switch-knob { width: 24px; } .semi-switch-focus { outline: 2px solid var(--semi-color-primary-light-active); } .semi-switch-checked { background-color: var(--semi-color-success); } .semi-switch-checked:hover { background-color: var(--semi-color-success-hover); } .semi-switch-checked .semi-switch-knob { transform: translateX(18px); } .semi-switch-checked:active .semi-switch-knob { transform: translateX(12px); } .semi-switch-active { background-color: var(--semi-color-success-active); } .semi-switch-disabled { cursor: not-allowed; background-color: transparent; border: 1px var(--semi-color-border) solid; } .semi-switch-disabled:hover { background-color: transparent; } .semi-switch-disabled:active { background-color: transparent; } .semi-switch-disabled:active .semi-switch-knob { width: 18px; } .semi-switch-disabled .semi-switch-knob { cursor: not-allowed; box-shadow: none; border: 1px var(--semi-color-border) solid; } .semi-switch-disabled .semi-switch-native-control { pointer-events: none; cursor: not-allowed; } .semi-switch-disabled.semi-switch-checked { border-color: transparent; background-color: var(--semi-color-success-disabled); } .semi-switch-disabled.semi-switch-checked:active .semi-switch-knob { transform: translateX(18px); } .semi-switch-disabled.semi-switch-checked .semi-switch-knob { box-shadow: none; border: none; } .semi-switch-knob { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.3); cursor: pointer; border-radius: 9px; background-color: rgba(var(--semi-white), 1); box-sizing: border-box; position: absolute; left: 0px; right: auto; transition: transform 200ms ease-in-out, width 200ms ease-in-out; width: 18px; height: 18px; top: 2px; transform: translateX(2px); } .semi-switch-native-control { width: 100%; height: 100%; opacity: 0; cursor: inherit; pointer-events: auto; margin: 0; position: absolute; top: 0; left: 0; } .semi-switch-native-control[type=checkbox] { width: inherit; height: inherit; } .semi-switch-checked-text, .semi-switch-unchecked-text { position: absolute; font-size: 12px; height: 100%; width: 20px; display: flex; justify-content: center; align-items: center; } .semi-switch-checked-text { color: var(--semi-color-white); } .semi-switch-unchecked-text { color: var(--semi-color-text-2); right: 0; } .semi-switch-loading { display: inline-flex; align-items: center; background-color: var(--semi-color-fill-1); } .semi-switch-loading-spin .semi-spin-wrapper { display: inline-flex; align-items: center; color: var(--semi-color-white); } .semi-switch-loading .semi-switch-loading-spin { transform: translateX(2px); } .semi-switch-loading .semi-switch-loading-spin > .semi-spin-wrapper > svg { width: 18px; height: 18px; } .semi-switch-loading.semi-switch-checked { background-color: var(--semi-color-success-hover); } .semi-switch-loading.semi-switch-checked .semi-switch-loading-spin { transform: translateX(16px); } .semi-switch-loading.semi-switch-small .semi-switch-loading-spin { transform: translateX(2px); } .semi-switch-loading.semi-switch-small .semi-switch-loading-spin > .semi-spin-wrapper > svg { width: 10px; height: 10px; } .semi-switch-loading.semi-switch-small.semi-switch-checked .semi-switch-loading-spin { transform: translateX(10px); } .semi-switch-loading.semi-switch-large .semi-switch-loading-spin { transform: translateX(2px); } .semi-switch-loading.semi-switch-large .semi-switch-loading-spin > .semi-spin-wrapper > svg { width: 28px; height: 28px; } .semi-switch-loading.semi-switch-large.semi-switch-checked .semi-switch-loading-spin { transform: translateX(22px); } .semi-switch-disabled.semi-switch-checked { background-color: var(--semi-color-success-disabled); } .semi-switch-large { width: 54px; height: 32px; border-radius: 16px; } .semi-switch-large .semi-switch-knob { width: 24px; height: 24px; top: 3px; border-radius: 12px; transform: translateX(3px); } .semi-switch-large.semi-switch-checked .semi-switch-knob { transform: translateX(26px); } .semi-switch-large.semi-switch-checked:active .semi-switch-knob { transform: translateX(16px); } .semi-switch-large:active .semi-switch-knob { width: 34px; } .semi-switch-large .semi-switch-checked-text, .semi-switch-large .semi-switch-unchecked-text { width: 26px; font-size: 14px; } .semi-switch-small { width: 26px; height: 16px; border-radius: 8px; } .semi-switch-small .semi-switch-knob { width: 12px; height: 12px; top: 1px; border-radius: 6px; transform: translateX(1px); } .semi-switch-small.semi-switch-checked .semi-switch-knob { transform: translateX(11px); } .semi-switch-small.semi-switch-checked:active .semi-switch-knob { transform: translateX(9px); } .semi-switch-small:active .semi-switch-knob { width: 14px; } .semi-form .semi-switch-native-control { width: 100%; height: 100%; } .semi-rtl .semi-switch, .semi-portal-rtl .semi-switch { direction: rtl; } .semi-rtl .semi-switch-checked .semi-switch-knob, .semi-portal-rtl .semi-switch-checked .semi-switch-knob { transform: translateX(-18px); } .semi-rtl .semi-switch-checked:active .semi-switch-knob, .semi-portal-rtl .semi-switch-checked:active .semi-switch-knob { transform: translateX(-12px); } .semi-rtl .semi-switch-knob, .semi-portal-rtl .semi-switch-knob { right: 0; left: auto; transform: translateX(-2px); } .semi-rtl .semi-switch-native-control, .semi-portal-rtl .semi-switch-native-control { right: 0; } .semi-rtl .semi-switch-unchecked-text, .semi-portal-rtl .semi-switch-unchecked-text { left: 0; } .semi-rtl .semi-switch-loading .semi-switch-loading-spin, .semi-portal-rtl .semi-switch-loading .semi-switch-loading-spin { transform: translateX(-2px); } .semi-rtl .semi-switch-loading.semi-switch-checked .semi-switch-loading-spin, .semi-portal-rtl .semi-switch-loading.semi-switch-checked .semi-switch-loading-spin { transform: translateX(-16px); } .semi-rtl .semi-switch-loading.semi-switch-small .semi-switch-loading-spin, .semi-portal-rtl .semi-switch-loading.semi-switch-small .semi-switch-loading-spin { transform: translateX(-2px); } .semi-rtl .semi-switch-loading.semi-switch-small.semi-switch-checked .semi-switch-loading-spin, .semi-portal-rtl .semi-switch-loading.semi-switch-small.semi-switch-checked .semi-switch-loading-spin { transform: translateX(-10px); } .semi-rtl .semi-switch-loading.semi-switch-large .semi-switch-loading-spin, .semi-portal-rtl .semi-switch-loading.semi-switch-large .semi-switch-loading-spin { transform: translateX(-2px); } .semi-rtl .semi-switch-loading.semi-switch-large.semi-switch-checked .semi-switch-loading-spin, .semi-portal-rtl .semi-switch-loading.semi-switch-large.semi-switch-checked .semi-switch-loading-spin { transform: translateX(-22px); } .semi-rtl .semi-switch-large .semi-switch-knob, .semi-portal-rtl .semi-switch-large .semi-switch-knob { transform: translateX(-3px); } .semi-rtl .semi-switch-large.semi-switch-checked .semi-switch-knob, .semi-portal-rtl .semi-switch-large.semi-switch-checked .semi-switch-knob { transform: translateX(-26px); } .semi-rtl .semi-switch-large.semi-switch-checked:active .semi-switch-knob, .semi-portal-rtl .semi-switch-large.semi-switch-checked:active .semi-switch-knob { transform: translateX(-16px); } .semi-rtl .semi-switch-small .semi-switch-knob, .semi-portal-rtl .semi-switch-small .semi-switch-knob { transform: translateX(-1px); } .semi-rtl .semi-switch-small.semi-switch-checked .semi-switch-knob, .semi-portal-rtl .semi-switch-small.semi-switch-checked .semi-switch-knob { transform: translateX(-11px); } .semi-rtl .semi-switch-small.semi-switch-checked:active .semi-switch-knob, .semi-portal-rtl .semi-switch-small.semi-switch-checked:active .semi-switch-knob { transform: translateX(-9px); } .semi-table-panel-operation { background-color: var(--semi-color-primary); padding-left: 16px; padding-right: 16px; padding-top: 8px; padding-bottom: 8px; display: flex; justify-content: space-between; color: var(--semi-color-text-2); } .semi-table-panel-operation-right, .semi-table-panel-operation-left { display: flex; justify-content: space-between; } .semi-table-panel-operation-selected { color: var(--semi-color-primary-light-active); } .semi-table-pagination-info { font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } .semi-table-pagination-outer { display: flex; justify-content: space-between; align-items: center; } .semi-table { width: 100%; text-align: left; border-collapse: separate; border-spacing: 0; font-size: inherit; display: table; } .semi-table-wrapper { zoom: 1; position: relative; clear: both; box-sizing: border-box; margin: 0; padding: 0; font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; color: var(--semi-color-text-0); width: 100%; } .semi-table-wrapper[data-column-fixed=true] { z-index: 1; } .semi-table-wrapper-ltr { direction: ltr; } .semi-table-wrapper-ltr .semi-spin { direction: ltr; } .semi-table-middle .semi-table-tbody > .semi-table-row > .semi-table-row-cell { padding-top: 12px; padding-bottom: 12px; } .semi-table-small .semi-table-tbody > .semi-table-row > .semi-table-row-cell { padding-top: 8px; padding-bottom: 8px; } .semi-table-title { position: relative; padding-top: 16px; padding-bottom: 16px; padding-left: 0; padding-right: 0; } .semi-table-container { position: relative; } .semi-table-header { overflow: hidden; scrollbar-base-color: transparent; } .semi-table-header::-webkit-scrollbar { background-color: transparent; border-bottom: 2px solid var(--semi-color-border); } .semi-table-header-sticky { position: sticky; z-index: 102; } .semi-table-header-sticky .semi-table-thead > .semi-table-row > .semi-table-row-head { background-color: var(--semi-color-bg-1); } .semi-table-align-center .semi-table-operate-wrapper { justify-content: center; } .semi-table-align-right .semi-table-operate-wrapper { justify-content: flex-end; } .semi-table-operate-wrapper { display: flex; justify-content: flex-start; } .semi-table-body { overflow: auto; width: 100%; box-sizing: border-box; } .semi-table-colgroup { display: table-column-group; } .semi-table-colgroup .semi-table-col { display: table-column; } .semi-table-colgroup .semi-table-column-expand, .semi-table-colgroup .semi-table-column-selection { width: 48px; } .semi-table-thead > .semi-table-row > .semi-table-row-head { background-color: var(--semi-color-bg-1); color: var(--semi-color-text-2); font-weight: 600; text-align: left; border-bottom: 2px solid var(--semi-color-border); padding-left: 16px; padding-right: 16px; padding-top: 8px; padding-bottom: 8px; vertical-align: middle; overflow-wrap: break-word; position: relative; } .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-left, .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-right { z-index: 101; position: sticky; background-color: var(--semi-color-bg-1); } .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-left::before, .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-right::before { background-color: var(--semi-color-bg-1); content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: block; z-index: -1; } .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-left-last { border-right: 1px solid var(--semi-color-border); box-shadow: 3px 0 0 0 var(--semi-color-shadow); } .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-left-last.resizing { border-right: 2px solid var(--semi-color-primary); } .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-left-last.resizing .react-resizable-handle:hover { background-color: unset; } .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-right-first { border-left: 1px solid var(--semi-color-border); box-shadow: -3px 0 0 0 var(--semi-color-shadow); } .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-right-first.resizing { border-right: 2px solid var(--semi-color-primary); } .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-right-first.resizing .react-resizable-handle:hover { background-color: unset; } .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-right-first[x-type=column-scrollbar] { box-shadow: none; border-left: transparent; } .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-column-selection { text-align: center; } .semi-table-thead > .semi-table-row > .semi-table-row-head[colspan]:not([colspan="1"]) { text-align: center; } .semi-table-thead > .semi-table-row > .semi-table-row-head .semi-table-header-column { display: inline-flex; align-items: center; } .semi-table-thead > .semi-table-row > .semi-table-row-head-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .semi-table-thead > .semi-table-row > .semi-table-row-head-ellipsis .semi-table-row-head-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .semi-table-thead > .semi-table-row .react-resizable { position: relative; background-clip: padding-box; } .semi-table-thead > .semi-table-row .resizing { border-right: 2px solid var(--semi-color-primary); } .semi-table-thead > .semi-table-row .resizing .react-resizable-handle:hover { background-color: unset; } .semi-table-thead > .semi-table-row .react-resizable-handle { position: absolute; width: 9px; height: calc(100% - 4px * 2); background-color: var(--semi-color-border); bottom: 4px; right: -1px; cursor: col-resize; z-index: 0; } .semi-table-thead > .semi-table-row .react-resizable-handle:hover { background-color: var(--semi-color-primary); } .semi-table-tbody { display: table-row-group; } .semi-table-tbody > .semi-table-row { display: table-row; background-color: var(--semi-color-bg-1); } .semi-table-tbody > .semi-table-row:hover > .semi-table-row-cell { background-image: linear-gradient(0deg, var(--semi-color-fill-0), var(--semi-color-fill-0)); background-color: var(--semi-color-bg-0); } .semi-table-tbody > .semi-table-row:hover > .semi-table-row-cell.semi-table-cell-fixed-left, .semi-table-tbody > .semi-table-row:hover > .semi-table-row-cell.semi-table-cell-fixed-right { background-image: linear-gradient(0deg, var(--semi-color-bg-1), var(--semi-color-bg-1)); } .semi-table-tbody > .semi-table-row:hover > .semi-table-row-cell.semi-table-cell-fixed-left::before, .semi-table-tbody > .semi-table-row:hover > .semi-table-row-cell.semi-table-cell-fixed-right::before { background-color: var(--semi-color-fill-0); content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: block; z-index: -1; } .semi-table-tbody > .semi-table-row > .semi-table-row-cell { display: table-cell; overflow-wrap: break-word; border-left: none; border-right: none; border-bottom: 1px solid var(--semi-color-border); padding: 16px; box-sizing: border-box; position: relative; vertical-align: middle; } .semi-table-tbody > .semi-table-row > .semi-table-row-cell.resizing { border-right: 2px solid var(--semi-color-primary); } .semi-table-tbody > .semi-table-row > .semi-table-row-cell-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .semi-table-tbody > .semi-table-row.semi-table-row-expand > .semi-table-row-cell { background-color: var(--semi-color-fill-0); } .semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-left, .semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-right { z-index: 101; position: sticky; background-color: var(--semi-color-bg-1); } .semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-left-last { border-right: 1px solid var(--semi-color-border); box-shadow: 3px 0 0 0 var(--semi-color-shadow); } .semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-right-first { border-left: 1px solid var(--semi-color-border); box-shadow: -3px 0 0 0 var(--semi-color-shadow); } .semi-table-tbody > .semi-table-row > .semi-table-cell-fixed > * { transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeOut) 0ms; } .semi-table-tbody > .semi-table-row > * { transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeOut) 0ms; } .semi-table-tbody > .semi-table-row-section { display: table-row; } .semi-table-tbody > .semi-table-row-section > .semi-table-row-cell { background-color: rgba(var(--semi-grey-0), 1); border-bottom: 1px solid var(--semi-color-border); } .semi-table-tbody > .semi-table-row-section > .semi-table-row-cell:not(.semi-table-column-selection) { padding: 10px 16px; } .semi-table-tbody > .semi-table-row-section .semi-table-section-inner { display: inline-flex; align-items: center; } .semi-table-virtualized .semi-table-tbody { display: block; } .semi-table-virtualized .semi-table-tbody > .semi-table-row { display: flex; } .semi-table-virtualized .semi-table-tbody > .semi-table-row > .semi-table-row-cell { word-wrap: unset; word-break: unset; white-space: nowrap; display: inline-flex; align-items: center; overflow: hidden; } .semi-table-virtualized .semi-table-tbody > .semi-table-row-section > .semi-table-row-cell { padding-top: 16px; padding-bottom: 16px; display: flex; } .semi-table-virtualized .semi-table-tbody > .semi-table-row-expand > .semi-table-row-cell { padding: 0; overflow: unset; } .semi-table-footer { background-color: var(--semi-color-fill-0); padding: 16px; margin: 0; position: relative; } .semi-table .semi-table-selection-wrap { display: inline-flex; vertical-align: bottom; } .semi-table .semi-table-selection-disabled { cursor: not-allowed; } .semi-table .semi-table-selection-disabled > .semi-checkbox { pointer-events: none; } .semi-table .semi-table-column-hidden { display: none; } .semi-table .semi-table-column-selection { text-align: center; } .semi-table .semi-table-column-selection .semi-checkbox-inner-display .semi-icon { left: 0; top: 0; } .semi-table .semi-table-column-expand .semi-table-expand-icon { transform: translateY(2px); } .semi-table .semi-table-column-expand .semi-table-expand-icon:last-child { margin-right: 0; } .semi-table .semi-table-column-sorter { margin-left: 4px; display: inline-block; width: 16px; height: 16px; vertical-align: middle; text-align: center; } .semi-table .semi-table-column-sorter-wrapper { display: flex; align-items: center; cursor: pointer; overflow: hidden; } .semi-table .semi-table-column-sorter-up, .semi-table .semi-table-column-sorter-down { height: 0; display: block; color: var(--semi-color-text-2); } .semi-table .semi-table-column-sorter-up:hover .anticon, .semi-table .semi-table-column-sorter-down:hover .anticon { color: var(--semi-color-text-2); } .semi-table .semi-table-column-sorter-up svg, .semi-table .semi-table-column-sorter-down svg { width: 16px; height: 16px; } .semi-table .semi-table-column-sorter-up.on .semi-icon-caretup, .semi-table .semi-table-column-sorter-up.on .semi-icon-caretdown, .semi-table .semi-table-column-sorter-down.on .semi-icon-caretup, .semi-table .semi-table-column-sorter-down.on .semi-icon-caretdown { color: var(--semi-color-primary); } .semi-table .semi-table-column-filter { margin-left: 4px; display: inline-flex; cursor: pointer; color: var(--semi-color-text-2); align-items: center; } .semi-table .semi-table-column-filter svg { width: 16px; height: 16px; } .semi-table .semi-table-column-filter.on { color: var(--semi-color-primary); } .semi-table-bordered .semi-table-title { padding-left: 16px; padding-right: 16px; border-top: 1px solid var(--semi-color-border); border-right: 1px solid var(--semi-color-border); border-left: 1px solid var(--semi-color-border); } .semi-table-bordered .semi-table-container { border: 1px solid var(--semi-color-border); border-right: 0; border-bottom: 0; } .semi-table-bordered .semi-table-header::-webkit-scrollbar { border-right: 1px solid var(--semi-color-border); } .semi-table-bordered .semi-table-footer { border-left: 1px solid var(--semi-color-border); border-right: 1px solid var(--semi-color-border); border-bottom: 1px solid var(--semi-color-border); } .semi-table-bordered .semi-table-thead > .semi-table-row > .semi-table-row-head .react-resizable-handle { background-color: transparent; } .semi-table-bordered .semi-table-thead > .semi-table-row > .semi-table-row-head, .semi-table-bordered .semi-table-tbody > .semi-table-row > .semi-table-row-cell { border-right: 1px solid var(--semi-color-border); } .semi-table-bordered .semi-table-placeholder { border-right: 1px solid var(--semi-color-border); } .semi-table-placeholder { position: sticky; left: 0px; z-index: 1; padding: 16px 12px; color: var(--semi-color-text-2); font-size: 14px; text-align: center; background: transparent; border-bottom: 1px solid var(--semi-color-border); border-radius: 0 0 4px 4px; } .semi-table-fixed { table-layout: fixed; min-width: 100%; } .semi-table-fixed > .semi-table-tbody > .semi-table-row-expand > .semi-table-row-cell > .semi-table-expand-inner, .semi-table-fixed > .semi-table-tbody > .semi-table-row-section > .semi-table-row-cell > .semi-table-section-inner { position: sticky; overflow: auto; left: 0; margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; height: 100%; display: flex; align-items: center; } .semi-table-fixed-header table { table-layout: fixed; } .semi-table-scroll-position-left .semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-left-last, .semi-table-scroll-position-left .semi-table-thead > .semi-table-row > .semi-table-cell-fixed-left-last { box-shadow: none; } .semi-table-scroll-position-right .semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-right-first, .semi-table-scroll-position-right .semi-table-thead > .semi-table-row > .semi-table-cell-fixed-right-first { box-shadow: none; } .semi-table-pagination-outer { color: var(--semi-color-text-2); min-height: 60px; } .semi-table-expand-icon { color: var(--semi-color-text-2); cursor: pointer; display: inline-flex; align-items: center; user-select: none; background: transparent; position: relative; margin-right: 8px; } .semi-table-expand-icon-cell { display: inline-flex; align-items: center; justify-content: center; } .semi-table-expand-icon .semi-table-expandedIcon-show { transition: transform 150ms cubic-bezier(0.62, 0.05, 0.36, 0.95); transform: rotate(90deg); } .semi-table-expand-icon .semi-table-expandedIcon-hide { transition: transform 150ms cubic-bezier(0.62, 0.05, 0.36, 0.95); transform: rotate(0deg); } .semi-table-column-filter-dropdown .semi-dropdown-menu { max-height: 290px; overflow-y: auto; } .semi-table-wrapper-rtl .semi-table { direction: rtl; text-align: right; } .semi-table-wrapper-rtl .semi-table-thead > .semi-table-row > .semi-table-row-head { text-align: right; } .semi-table-wrapper-rtl .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-left-last { border-right: 0; border-left: 1px solid var(--semi-color-border); } .semi-table-wrapper-rtl .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-left-last.resizing { border-left: 2px solid var(--semi-color-primary); } .semi-table-wrapper-rtl .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-right-first { border-left: 0; border-right: 1px solid var(--semi-color-border); } .semi-table-wrapper-rtl .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-right-first.resizing { border-left: 2px solid var(--semi-color-primary); } .semi-table-wrapper-rtl .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-right-first[x-type=column-scrollbar] { box-shadow: none; border-right: transparent; } .semi-table-wrapper-rtl .semi-table-thead > .semi-table-row .resizing { border-left: 2px solid var(--semi-color-primary); } .semi-table-wrapper-rtl .semi-table-thead > .semi-table-row .react-resizable-handle { right: auto; left: -1px; } .semi-table-wrapper-rtl .semi-table-tbody { display: table-row-group; } .semi-table-wrapper-rtl .semi-table-tbody > .semi-table-row > .semi-table-row-cell.resizing { border-right: 0; border-left: 2px solid var(--semi-color-primary); } .semi-table-wrapper-rtl .semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-left-last { border-right: 0; border-left: 1px solid var(--semi-color-border); } .semi-table-wrapper-rtl .semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-right-first { border-left: 0; border-right: 1px solid var(--semi-color-border); } .semi-table-wrapper-rtl .semi-table .semi-table-column-selection .semi-checkbox-inner-display .semi-icon { left: auto; right: 0; } .semi-table-wrapper-rtl .semi-table .semi-table-column-expand .semi-table-expand-icon { transform: scaleX(-1) translateY(2px); } .semi-table-wrapper-rtl .semi-table .semi-table-column-expand .semi-table-expand-icon:last-child { margin-right: auto; margin-left: 0; } .semi-table-wrapper-rtl .semi-table .semi-table-column-sorter { margin-left: auto; margin-right: 4px; } .semi-table-wrapper-rtl .semi-table .semi-table-column-filter { margin-left: auto; margin-right: 4px; } .semi-table-wrapper-rtl .semi-table-bordered .semi-table-container { border-left: 0; border-right: 1px solid var(--semi-color-border); } .semi-table-wrapper-rtl .semi-table-bordered .semi-table-thead > .semi-table-row > .semi-table-row-head, .semi-table-wrapper-rtl .semi-table-bordered .semi-table-tbody > .semi-table-row > .semi-table-row-cell { border-right: 0; border-left: 1px solid var(--semi-color-border); } .semi-table-wrapper-rtl .semi-table-bordered .semi-table-placeholder { border-left: 1px solid var(--semi-color-border); border-right: 0; } .semi-table-wrapper-rtl .semi-table-bordered .semi-table-header::-webkit-scrollbar { border-right: 0; border-left: 1px solid var(--semi-color-border); } .semi-table-wrapper-rtl .semi-table-fixed > .semi-table-tbody > .semi-table-row-expand > .semi-table-row-cell > .semi-table-expand-inner, .semi-table-wrapper-rtl .semi-table-fixed > .semi-table-tbody > .semi-table-row-section > .semi-table-row-cell > .semi-table-section-inner { left: auto; right: 0; margin-right: -16px; margin-left: -16px; padding-right: 16px; padding-left: 16px; } .semi-table-wrapper-rtl .semi-table-scroll-position-left .semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-left-last, .semi-table-wrapper-rtl .semi-table-scroll-position-left .semi-table-thead > .semi-table-row > .semi-table-cell-fixed-left-last { box-shadow: 3px 0 0 0 var(--semi-color-shadow); } .semi-table-wrapper-rtl .semi-table-scroll-position-left .semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-right-first, .semi-table-wrapper-rtl .semi-table-scroll-position-left .semi-table-thead > .semi-table-row > .semi-table-cell-fixed-right-first { box-shadow: none; } .semi-table-wrapper-rtl .semi-table-scroll-position-right .semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-left-last, .semi-table-wrapper-rtl .semi-table-scroll-position-right .semi-table-thead > .semi-table-row > .semi-table-cell-fixed-left-last { box-shadow: none; } .semi-table-wrapper-rtl .semi-table-scroll-position-right .semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-right-first, .semi-table-wrapper-rtl .semi-table-scroll-position-right .semi-table-thead > .semi-table-row > .semi-table-cell-fixed-right-first { box-shadow: -3px 0 0 0 var(--semi-color-shadow); } .semi-table-wrapper-rtl .semi-table-expand-icon { margin-right: auto; margin-left: 8px; transform: scaleX(-1) translateY(2px); } .semi-table-wrapper-rtl .semi-spin { direction: rtl; } .semi-tabs { box-sizing: border-box; position: relative; } .semi-tabs-left { display: flex; flex-direction: row; } .semi-tabs-bar { position: relative; white-space: nowrap; outline: none; } .semi-tabs-bar-left { display: flex; flex-direction: column; } .semi-tabs-bar-extra { padding: 0px 5px; } .semi-tabs-bar .semi-tabs-tab { font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; cursor: pointer; box-sizing: border-box; position: relative; display: block; float: left; font-weight: 400; color: var(--semi-color-text-2); user-select: none; } .semi-tabs-bar .semi-tabs-tab .semi-icon:not(.semi-icon-checkbox_tick, .semi-icon-radio, .semi-icon-checkbox_indeterminate) { position: relative; margin-right: 8px; top: 3px; color: var(--semi-color-text-2); transition: color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); } .semi-tabs-bar .semi-tabs-tab .semi-icon.semi-tabs-tab-icon-close { margin-right: 0; font-size: 14px; color: var(--semi-color-text-2); margin-left: 10px; cursor: pointer; } .semi-tabs-bar .semi-tabs-tab:hover { color: var(--semi-color-text-0); } .semi-tabs-bar .semi-tabs-tab:hover .semi-icon:not(.semi-icon-checkbox_tick, .semi-icon-radio, .semi-icon-checkbox_indeterminate) { color: var(--semi-color-text-0); } .semi-tabs-bar .semi-tabs-tab:active { color: var(--semi-color-text-0); } .semi-tabs-bar .semi-tabs-tab:active .semi-icon:not(.semi-icon-checkbox_tick, .semi-icon-radio, .semi-icon-checkbox_indeterminate) { color: var(--semi-color-text-0); } .semi-tabs-bar .semi-tabs-tab-active, .semi-tabs-bar .semi-tabs-tab-active:hover { cursor: default; font-weight: 600; color: var(--semi-color-text-0); } .semi-tabs-bar .semi-tabs-tab-active .semi-icon:not(.semi-icon-checkbox_tick, .semi-icon-radio, .semi-icon-checkbox_indeterminate), .semi-tabs-bar .semi-tabs-tab-active:hover .semi-icon:not(.semi-icon-checkbox_tick, .semi-icon-radio, .semi-icon-checkbox_indeterminate) { color: var(--semi-color-primary); } .semi-tabs-bar .semi-tabs-tab-active .semi-icon.semi-tabs-tab-icon-close, .semi-tabs-bar .semi-tabs-tab-active:hover .semi-icon.semi-tabs-tab-icon-close { color: var(--semi-color-text-2); } .semi-tabs-bar .semi-tabs-tab-active .semi-icon.semi-tabs-tab-icon-close:hover { color: var(--semi-color-text-1); } .semi-tabs-bar .semi-tabs-tab-disabled { cursor: not-allowed; color: var(--semi-color-disabled-text); } .semi-tabs-bar .semi-tabs-tab-disabled:hover { color: var(--semi-color-disabled-text); border-bottom: none; } .semi-tabs-tab-single.semi-tabs-tab { font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; cursor: pointer; box-sizing: border-box; position: relative; display: inline-block; font-weight: 400; color: var(--semi-color-text-2); user-select: none; } .semi-tabs-tab-single.semi-tabs-tab .semi-icon:not(.semi-icon-checkbox_tick, .semi-icon-radio, .semi-icon-checkbox_indeterminate) { position: relative; margin-right: 8px; top: 3px; color: var(--semi-color-text-2); transition: color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); } .semi-tabs-tab-single.semi-tabs-tab .semi-icon.semi-tabs-tab-icon-close { margin-right: 0; font-size: 14px; color: var(--semi-color-text-2); margin-left: 10px; cursor: pointer; } .semi-tabs-tab-single.semi-tabs-tab:hover { color: var(--semi-color-text-0); } .semi-tabs-tab-single.semi-tabs-tab:hover .semi-icon:not(.semi-icon-checkbox_tick, .semi-icon-radio, .semi-icon-checkbox_indeterminate) { color: var(--semi-color-text-0); } .semi-tabs-tab-single.semi-tabs-tab:active { color: var(--semi-color-text-0); } .semi-tabs-tab-single.semi-tabs-tab:active .semi-icon:not(.semi-icon-checkbox_tick, .semi-icon-radio, .semi-icon-checkbox_indeterminate) { color: var(--semi-color-text-0); } .semi-tabs-tab-single.semi-tabs-tab-active, .semi-tabs-tab-single.semi-tabs-tab-active:hover { cursor: default; font-weight: 600; color: var(--semi-color-text-0); } .semi-tabs-tab-single.semi-tabs-tab-active .semi-icon:not(.semi-icon-checkbox_tick, .semi-icon-radio, .semi-icon-checkbox_indeterminate), .semi-tabs-tab-single.semi-tabs-tab-active:hover .semi-icon:not(.semi-icon-checkbox_tick, .semi-icon-radio, .semi-icon-checkbox_indeterminate) { color: var(--semi-color-primary); } .semi-tabs-tab-single.semi-tabs-tab-active .semi-icon.semi-tabs-tab-icon-close, .semi-tabs-tab-single.semi-tabs-tab-active:hover .semi-icon.semi-tabs-tab-icon-close { color: var(--semi-color-text-2); } .semi-tabs-tab-single.semi-tabs-tab-active .semi-icon.semi-tabs-tab-icon-close:hover { color: var(--semi-color-text-1); } .semi-tabs-tab-single.semi-tabs-tab-disabled { cursor: not-allowed; color: var(--semi-color-disabled-text); } .semi-tabs-tab-single.semi-tabs-tab-disabled:hover { color: var(--semi-color-disabled-text); border-bottom: none; } .semi-tabs-bar-collapse, .semi-tabs-bar-collapse .semi-tabs-bar-overflow-list { display: flex; align-items: center; } .semi-tabs-bar-collapse .semi-overflow-list { flex: 1; } .semi-tabs-bar-collapse .semi-overflow-list .semi-overflow-list-scroll-wrapper { -ms-overflow-style: none; /* Internet Explorer 10+ */ scrollbar-width: none; /* Firefox */ } .semi-tabs-bar-collapse .semi-overflow-list .semi-overflow-list-scroll-wrapper::-webkit-scrollbar { display: none; /* Safari and Chrome */ width: 0; height: 0; } .semi-tabs-bar-collapse .semi-overflow-list .semi-overflow-list-scroll-wrapper:focus-visible { outline: 2px solid var(--semi-color-primary-light-active); outline-offset: -2px; } .semi-tabs-bar-collapse .semi-overflow-list > .semi-button-disabled { color: var(--semi-color-disabled-text); background-color: transparent; } .semi-tabs-bar-collapse .semi-overflow-list > .semi-button-disabled:hover { color: var(--semi-color-disabled-text); background-color: transparent; } .semi-tabs-bar-collapse .semi-tabs-bar-arrow-start { margin-right: 4px; } .semi-tabs-bar-collapse .semi-tabs-bar-arrow-start > .semi-button { color: var(--semi-color-primary); padding: 8px; border: 0px solid transparent; background-color: transparent; } .semi-tabs-bar-collapse .semi-tabs-bar-arrow-start > .semi-button:hover { background-color: var(--semi-color-fill-0); color: var(--semi-color-primary); border-color: transparent; } .semi-tabs-bar-collapse .semi-tabs-bar-arrow-start > .semi-button:active { background-color: var(--semi-color-fill-1); color: var(--semi-color-primary); border-color: transparent; } .semi-tabs-bar-collapse .semi-tabs-bar-arrow-end { margin-left: 4px; } .semi-tabs-bar-collapse .semi-tabs-bar-arrow-end > .semi-button { color: var(--semi-color-primary); padding: 8px; border: 0px solid transparent; background-color: transparent; } .semi-tabs-bar-collapse .semi-tabs-bar-arrow-end > .semi-button:hover { background-color: var(--semi-color-fill-0); color: var(--semi-color-primary); border-color: transparent; } .semi-tabs-bar-collapse .semi-tabs-bar-arrow-end > .semi-button:active { background-color: var(--semi-color-fill-1); color: var(--semi-color-primary); border-color: transparent; } .semi-tabs-bar-dropdown { max-height: 300px; overflow-y: auto; } .semi-tabs-bar:after { content: ""; height: 0; display: block; clear: both; } .semi-tabs-bar-line.semi-tabs-bar-top { border-bottom: 1px solid var(--semi-color-border); transition: color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); transform: scale(var(--semi-transform_scale-none)); } .semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab { padding: 16px 4px 14px 4px; transition: border-bottom-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); border-bottom: 2px solid transparent; } .semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab:nth-of-type(1) { padding-left: 0; } .semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab:hover { border-bottom: 2px solid var(--semi-color-fill-0); } .semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab:focus-visible { outline: 2px solid var(--semi-color-primary-light-active); outline-offset: -1px; } .semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab:active { border-bottom: 2px solid var(--semi-color-fill-1); } .semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab:not(:last-of-type) { margin-right: 24px; } .semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab-small { padding: 8px 4px 6px 4px; } .semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab-medium { padding: 12px 4px 10px 4px; } .semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab-active, .semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab-active:hover { border-bottom: 2px solid var(--semi-color-primary); } .semi-tabs-bar-line.semi-tabs-bar-left { border-right: 1px solid var(--semi-color-border); } .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab { padding: 12px; border-left: 2px solid transparent; transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); } .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab:hover { border-left: 2px solid var(--semi-color-fill-0); background-color: var(--semi-color-fill-0); } .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab:focus-visible { outline: 2px solid var(--semi-color-primary-light-active); outline-offset: -2px; } .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab:active { border-left: 2px solid var(--semi-color-fill-1); background-color: var(--semi-color-fill-1); } .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab-small { padding: 6px; } .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab-medium { padding: 10px; } .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab-active { background-color: var(--semi-color-primary-light-default); } .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab-active, .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab-active:hover { border-left: 2px solid var(--semi-color-primary); background-color: var(--semi-color-primary-light-default); } .semi-tabs-bar-line .semi-tabs-bar-extra { height: 50px; line-height: 50px; } .semi-tabs-bar-line .semi-tabs-bar-line-extra-small { height: 36px; line-height: 36px; } .semi-tabs-bar-card.semi-tabs-bar-top::before { position: absolute; right: 0; left: 0; bottom: 0; border-bottom: 1px solid var(--semi-color-border); content: ""; } .semi-tabs-bar-card.semi-tabs-bar-top .semi-tabs-tab { border: 1px solid transparent; border-bottom: none; border-radius: var(--semi-border-radius-small) var(--semi-border-radius-small) 0 0; } .semi-tabs-bar-card.semi-tabs-bar-top .semi-tabs-tab:hover { border-bottom: none; } .semi-tabs-bar-card.semi-tabs-bar-top .semi-tabs-tab:not(:last-of-type) { margin-right: 8px; } .semi-tabs-bar-card.semi-tabs-bar-top .semi-tabs-tab-active, .semi-tabs-bar-card.semi-tabs-bar-top .semi-tabs-tab-active:hover { padding: 8px 12px 7px 12px; border: 1px solid var(--semi-color-border); border-bottom: 1px solid var(--semi-color-bg-1); background: transparent; } .semi-tabs-bar-card.semi-tabs-bar-left { border-right: 1px solid var(--semi-color-border); } .semi-tabs-bar-card.semi-tabs-bar-left .semi-tabs-tab { border: 1px solid transparent; border-right: none; border-radius: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small); } .semi-tabs-bar-card.semi-tabs-bar-left .semi-tabs-tab:hover { border-right: none; } .semi-tabs-bar-card.semi-tabs-bar-left .semi-tabs-tab:not(:last-of-type) { margin-bottom: 8px; } .semi-tabs-bar-card.semi-tabs-bar-left .semi-tabs-tab-active:after { content: " "; width: 1px; position: absolute; right: -1px; top: 0; bottom: 0; background: var(--semi-color-bg-1); } .semi-tabs-bar-card.semi-tabs-bar-left .semi-tabs-tab-active, .semi-tabs-bar-card.semi-tabs-bar-left .semi-tabs-tab-active:hover { padding: 8px 12px; border: 1px solid var(--semi-color-border); border-right: none; background: transparent; } .semi-tabs-bar-card .semi-tabs-tab { padding: 8px 12px; transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); transform: scale(var(--semi-transform_scale-none)); } .semi-tabs-bar-card .semi-tabs-tab:hover { background: var(--semi-color-fill-0); } .semi-tabs-bar-card .semi-tabs-tab:focus-visible { outline: 2px solid var(--semi-color-primary-light-active); outline-offset: -2px; } .semi-tabs-bar-card .semi-tabs-tab:active { background: var(--semi-color-fill-1); } .semi-tabs-bar-button { border: none; } .semi-tabs-bar-button.semi-tabs-bar-left .semi-tabs-tab:not(:last-of-type) { margin-bottom: 8px; } .semi-tabs-bar-button.semi-tabs-bar-top .semi-tabs-tab:not(:last-of-type) { margin-right: 8px; } .semi-tabs-bar-button .semi-tabs-tab { padding: 8px 12px; border-radius: var(--semi-border-radius-small); color: var(--semi-color-text-2); border: none; transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); transform: scale(var(--semi-transform_scale-none)); } .semi-tabs-bar-button .semi-tabs-tab:hover { border: none; background-color: var(--semi-color-fill-0); } .semi-tabs-bar-button .semi-tabs-tab:focus-visible { outline: 2px solid var(--semi-color-primary-light-active); outline-offset: -2px; } .semi-tabs-bar-button .semi-tabs-tab:active { background-color: var(--semi-color-fill-1); } .semi-tabs-bar-button .semi-tabs-tab-active, .semi-tabs-bar-button .semi-tabs-tab-active:hover { color: var(--semi-color-primary); border: none; background-color: var(--semi-color-primary-light-default); } .semi-tabs-content { width: 100%; padding: 5px 0; } .semi-tabs-content-left { height: 100%; padding: 0 5px; } .semi-tabs-pane { width: 100%; overflow: hidden; color: var(--semi-color-text-0); } .semi-tabs-pane:focus-visible { outline: 2px solid var(--semi-color-primary-light-active); } .semi-tabs-pane-inactive, .semi-tabs-content-no-animated .semi-tabs-pane-inactive { display: none; } @keyframes semi-tabs-panel-keyframe-leftShow { 0% { transform: translateX(60px); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } } @keyframes semi-tabs-panel-keyframe-rightShow { 0% { transform: translateX(-60px); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } } @keyframes semi-tabs-panel-keyframe-topShow { 0% { transform: translateY(60px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } @keyframes semi-tabs-panel-keyframe-bottomShow { 0% { transform: translateY(-60px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } .semi-tabs-pane-animate-leftShow { animation: 200ms semi-tabs-panel-keyframe-leftShow ease-in-out 0s; animation-fill-mode: forwards; } .semi-tabs-pane-animate-rightShow { animation: 200ms semi-tabs-panel-keyframe-rightShow ease-in-out 0s; animation-fill-mode: forwards; } .semi-tabs-pane-animate-topShow { animation: 200ms semi-tabs-panel-keyframe-topShow ease-in-out 0s; animation-fill-mode: forwards; } .semi-tabs-pane-animate-bottomShow { animation: 200ms semi-tabs-panel-keyframe-bottomShow ease-in-out 0s; animation-fill-mode: forwards; } .semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab { padding: 16px 4px 14px 4px; transition: border-bottom-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); border-bottom: 2px solid transparent; } .semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab:nth-of-type(1) { padding-left: 0; } .semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab:hover { border-bottom: 2px solid var(--semi-color-fill-0); } .semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab:focus-visible { outline: 2px solid var(--semi-color-primary-light-active); outline-offset: -1px; } .semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab:active { border-bottom: 2px solid var(--semi-color-fill-1); } .semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab-small { padding: 8px 4px 6px 4px; } .semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab-medium { padding: 12px 4px 10px 4px; } .semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab-active, .semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab-active:hover { border-bottom: 2px solid var(--semi-color-primary); } .semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab { padding: 12px; border-left: 2px solid transparent; transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); } .semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab:hover { border-left: 2px solid var(--semi-color-fill-0); background-color: var(--semi-color-fill-0); } .semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab:focus-visible { outline: 2px solid var(--semi-color-primary-light-active); outline-offset: -2px; } .semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab:active { border-left: 2px solid var(--semi-color-fill-1); background-color: var(--semi-color-fill-1); } .semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab-small { padding: 6px; } .semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab-medium { padding: 10px; } .semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab-active { background-color: var(--semi-color-primary-light-default); } .semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab-active, .semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab-active:hover { border-left: 2px solid var(--semi-color-primary); background-color: var(--semi-color-primary-light-default); } .semi-tabs-tab-card.semi-tabs-tab-top.semi-tabs-tab { border: 1px solid transparent; border-bottom: none; border-radius: var(--semi-border-radius-small) var(--semi-border-radius-small) 0 0; } .semi-tabs-tab-card.semi-tabs-tab-top.semi-tabs-tab:hover { border-bottom: none; } .semi-tabs-tab-card.semi-tabs-tab-top.semi-tabs-tab-active, .semi-tabs-tab-card.semi-tabs-tab-top.semi-tabs-tab-active:hover { padding: 8px 12px 7px 12px; border: 1px solid var(--semi-color-border); border-bottom: 1px solid var(--semi-color-bg-1); background: transparent; } .semi-tabs-tab-card.semi-tabs-tab-left.semi-tabs-tab { border: 1px solid transparent; border-right: none; border-radius: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small); } .semi-tabs-tab-card.semi-tabs-tab-left.semi-tabs-tab:hover { border-right: none; } .semi-tabs-tab-card.semi-tabs-tab-left.semi-tabs-tab-active:after { content: " "; width: 1px; position: absolute; right: -1px; top: 0; bottom: 0; background: var(--semi-color-bg-1); } .semi-tabs-tab-card.semi-tabs-tab-left.semi-tabs-tab-active, .semi-tabs-tab-card.semi-tabs-tab-left.semi-tabs-tab-active:hover { padding: 8px 12px; border: 1px solid var(--semi-color-border); border-right: none; background: transparent; } .semi-tabs-tab-card.semi-tabs-tab { padding: 8px 12px; transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); transform: scale(var(--semi-transform_scale-none)); } .semi-tabs-tab-card.semi-tabs-tab:hover { background: var(--semi-color-fill-0); } .semi-tabs-tab-card.semi-tabs-tab:focus-visible { outline: 2px solid var(--semi-color-primary-light-active); outline-offset: -2px; } .semi-tabs-tab-card.semi-tabs-tab:active { background: var(--semi-color-fill-1); } .semi-tabs-tab-button { border: none; } .semi-tabs-tab-button.semi-tabs-tab { padding: 8px 12px; border-radius: var(--semi-border-radius-small); color: var(--semi-color-text-2); border: none; transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); transform: scale(var(--semi-transform_scale-none)); } .semi-tabs-tab-button.semi-tabs-tab:hover { border: none; background-color: var(--semi-color-fill-0); } .semi-tabs-tab-button.semi-tabs-tab:focus-visible { outline: 2px solid var(--semi-color-primary-light-active); outline-offset: -2px; } .semi-tabs-tab-button.semi-tabs-tab:active { background-color: var(--semi-color-fill-1); } .semi-tabs-tab-button.semi-tabs-tab-active, .semi-tabs-tab-button.semi-tabs-tab-active:hover { color: var(--semi-color-primary); border: none; background-color: var(--semi-color-primary-light-default); } .semi-rtl .semi-tabs, .semi-portal-rtl .semi-tabs { direction: rtl; } .semi-rtl .semi-tabs-bar .semi-tabs-tab, .semi-portal-rtl .semi-tabs-bar .semi-tabs-tab { float: right; } .semi-rtl .semi-tabs-bar .semi-tabs-tab .semi-icon, .semi-portal-rtl .semi-tabs-bar .semi-tabs-tab .semi-icon { margin-right: 0; margin-left: 8px; } .semi-rtl .semi-tabs-bar-collapse .semi-tabs-bar-arrow-start, .semi-portal-rtl .semi-tabs-bar-collapse .semi-tabs-bar-arrow-start { margin-right: 0; margin-left: 4px; } .semi-rtl .semi-tabs-bar-collapse .semi-tabs-bar-arrow-end, .semi-portal-rtl .semi-tabs-bar-collapse .semi-tabs-bar-arrow-end { margin-left: 0; margin-right: 4px; } .semi-rtl .semi-tabs-bar-collapse .semi-icon-chevron_right, .semi-rtl .semi-tabs-bar-collapse .semi-icon-chevron_left, .semi-portal-rtl .semi-tabs-bar-collapse .semi-icon-chevron_right, .semi-portal-rtl .semi-tabs-bar-collapse .semi-icon-chevron_left { transform: scaleX(-1); } .semi-rtl .semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab:not(:last-of-type), .semi-portal-rtl .semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab:not(:last-of-type) { margin-right: 0; margin-left: 24px; } .semi-rtl .semi-tabs-bar-line.semi-tabs-bar-left, .semi-portal-rtl .semi-tabs-bar-line.semi-tabs-bar-left { border-right: 0; border-left: 1px solid var(--semi-color-border); } .semi-rtl .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab, .semi-portal-rtl .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab { border-left: 0; border-right: 2px solid transparent; } .semi-rtl .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab:hover, .semi-portal-rtl .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab:hover { border-left: 0; border-right: 2px solid var(--semi-color-fill-0); } .semi-rtl .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab:active, .semi-portal-rtl .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab:active { border-left: 0; border-right: 2px solid var(--semi-color-fill-1); } .semi-rtl .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab-active, .semi-rtl .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab-active:hover, .semi-portal-rtl .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab-active, .semi-portal-rtl .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab-active:hover { border-left: 0; border-right: 2px solid var(--semi-color-primary); } .semi-rtl .semi-tabs-bar-card.semi-tabs-bar-top .semi-tabs-tab:not(:last-of-type), .semi-portal-rtl .semi-tabs-bar-card.semi-tabs-bar-top .semi-tabs-tab:not(:last-of-type) { margin-left: 0; margin-right: 8px; } .semi-rtl .semi-tabs-bar-card.semi-tabs-bar-left, .semi-portal-rtl .semi-tabs-bar-card.semi-tabs-bar-left { border-right: 0; border-left: 1px solid var(--semi-color-border); } .semi-rtl .semi-tabs-bar-card.semi-tabs-bar-left .semi-tabs-tab, .semi-portal-rtl .semi-tabs-bar-card.semi-tabs-bar-left .semi-tabs-tab { border: 1px solid transparent; border-left: none; } .semi-rtl .semi-tabs-bar-card.semi-tabs-bar-left .semi-tabs-tab:hover, .semi-portal-rtl .semi-tabs-bar-card.semi-tabs-bar-left .semi-tabs-tab:hover { border-left: none; } .semi-rtl .semi-tabs-bar-card.semi-tabs-bar-left .semi-tabs-tab-active:after, .semi-portal-rtl .semi-tabs-bar-card.semi-tabs-bar-left .semi-tabs-tab-active:after { right: auto; left: -1px; } .semi-rtl .semi-tabs-bar-button.semi-tabs-bar-top .semi-tabs-tab:not(:last-of-type), .semi-portal-rtl .semi-tabs-bar-button.semi-tabs-bar-top .semi-tabs-tab:not(:last-of-type) { margin-right: auto; margin-left: 8px; } .semi-tag { box-sizing: border-box; border-radius: var(--semi-border-radius-small); background-color: transparent; position: relative; user-select: none; overflow: hidden; white-space: nowrap; vertical-align: bottom; display: flex; justify-content: center; align-items: center; display: inline-flex; } .semi-tag-default, .semi-tag-small { font-size: 12px; line-height: 16px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; height: 20px; padding: 2px 8px; } .semi-tag-default:focus-visible, .semi-tag-small:focus-visible { outline: 2px solid var(--semi-color-primary-light-active); } .semi-tag-square { border-radius: var(--semi-border-radius-small); } .semi-tag-circle { border-radius: var(--semi-border-radius-full); } .semi-tag-large { font-size: 12px; line-height: 16px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; padding: 4px 8px; height: 24px; } .semi-tag-large:focus-visible { outline: 2px solid var(--semi-color-primary-light-active); } .semi-tag-invisible { display: none; } .semi-tag-prefix-icon { display: flex; padding-right: 4px; } .semi-tag-suffix-icon { display: flex; padding-left: 4px; } .semi-tag-content { flex: 1; } .semi-tag-content-ellipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .semi-tag-content-center { display: flex; display: flex; justify-content: center; align-items: center; height: 100%; min-width: 0; } .semi-tag-close { display: flex; justify-content: center; align-items: center; color: var(--semi-color-text-2); padding-left: 4px; cursor: pointer; } .semi-tag-close:hover { color: var(--semi-color-text-1); } .semi-tag-close:active { color: var(--semi-color-text-0); } .semi-tag-closable { padding: 4px 4px 4px 8px; } .semi-tag-avatar-square .semi-avatar, .semi-tag-avatar-circle .semi-avatar { margin-right: 4px; } .semi-tag-avatar-square { padding: 0 4px 0 0; } .semi-tag-avatar-square .semi-avatar > img { background-color: var(--semi-color-default); } .semi-tag-avatar-circle { padding: 2px 4px 2px 2px; } .semi-tag-avatar-square.semi-tag-default .semi-avatar, .semi-tag-avatar-square.semi-tag-small .semi-avatar { width: 20px; height: 20px; } .semi-tag-avatar-square.semi-tag-large .semi-avatar { width: 24px; height: 24px; } .semi-tag-avatar-circle.semi-tag-small, .semi-tag-avatar-circle.semi-tag-default { border-radius: 11px; } .semi-tag-avatar-circle.semi-tag-small .semi-avatar, .semi-tag-avatar-circle.semi-tag-default .semi-avatar { width: 16px; height: 16px; } .semi-tag-avatar-circle.semi-tag-large { border-radius: 13px; } .semi-tag-avatar-circle.semi-tag-large .semi-avatar { width: 20px; height: 20px; } .semi-tag-group { display: block; height: auto; } .semi-tag-group .semi-tag { margin-bottom: 0; margin-right: 8px; } .semi-tag-group-max.semi-tag-group-small { height: 22px; } .semi-tag-group-max.semi-tag-group-large { height: 26px; } .semi-tag-rest-group-popover .semi-tag { margin-right: 8px; margin-bottom: 0; } .semi-tag-rest-group-popover .semi-tag:last-of-type { margin-right: 0; } .semi-tag-amber-ghost { background-color: transparent; border: 1px solid rgba(var(--semi-amber-4), 1); color: rgba(var(--semi-amber-5), 1); } .semi-tag-amber-solid { background-color: rgba(var(--semi-amber-5), 1); color: rgba(var(--semi-white), 1); } .semi-tag-amber-light { background-color: rgba(var(--semi-amber-5), 0.15); color: rgba(var(--semi-amber-8), 1); } .semi-tag-blue-ghost { background-color: transparent; border: 1px solid rgba(var(--semi-blue-4), 1); color: rgba(var(--semi-blue-5), 1); } .semi-tag-blue-solid { background-color: rgba(var(--semi-blue-5), 1); color: rgba(var(--semi-white), 1); } .semi-tag-blue-light { background-color: rgba(var(--semi-blue-5), 0.15); color: rgba(var(--semi-blue-8), 1); } .semi-tag-cyan-ghost { background-color: transparent; border: 1px solid rgba(var(--semi-cyan-4), 1); color: rgba(var(--semi-cyan-5), 1); } .semi-tag-cyan-solid { background-color: rgba(var(--semi-cyan-5), 1); color: rgba(var(--semi-white), 1); } .semi-tag-cyan-light { background-color: rgba(var(--semi-cyan-5), 0.15); color: rgba(var(--semi-cyan-8), 1); } .semi-tag-green-ghost { background-color: transparent; border: 1px solid rgba(var(--semi-green-4), 1); color: rgba(var(--semi-green-5), 1); } .semi-tag-green-solid { background-color: rgba(var(--semi-green-5), 1); color: rgba(var(--semi-white), 1); } .semi-tag-green-light { background-color: rgba(var(--semi-green-5), 0.15); color: rgba(var(--semi-green-8), 1); } .semi-tag-grey-ghost { background-color: transparent; border: 1px solid rgba(var(--semi-grey-4), 1); color: rgba(var(--semi-grey-5), 1); } .semi-tag-grey-solid { background-color: rgba(var(--semi-grey-5), 1); color: rgba(var(--semi-white), 1); } .semi-tag-grey-light { background-color: rgba(var(--semi-grey-5), 0.15); color: rgba(var(--semi-grey-8), 1); } .semi-tag-indigo-ghost { background-color: transparent; border: 1px solid rgba(var(--semi-indigo-4), 1); color: rgba(var(--semi-indigo-5), 1); } .semi-tag-indigo-solid { background-color: rgba(var(--semi-indigo-5), 1); color: rgba(var(--semi-white), 1); } .semi-tag-indigo-light { background-color: rgba(var(--semi-indigo-5), 0.15); color: rgba(var(--semi-indigo-8), 1); } .semi-tag-light-blue-ghost { background-color: transparent; border: 1px solid rgba(var(--semi-light-blue-4), 1); color: rgba(var(--semi-light-blue-5), 1); } .semi-tag-light-blue-solid { background-color: rgba(var(--semi-light-blue-5), 1); color: rgba(var(--semi-white), 1); } .semi-tag-light-blue-light { background-color: rgba(var(--semi-light-blue-5), 0.15); color: rgba(var(--semi-light-blue-8), 1); } .semi-tag-light-green-ghost { background-color: transparent; border: 1px solid rgba(var(--semi-light-green-4), 1); color: rgba(var(--semi-light-green-5), 1); } .semi-tag-light-green-solid { background-color: rgba(var(--semi-light-green-5), 1); color: rgba(var(--semi-white), 1); } .semi-tag-light-green-light { background-color: rgba(var(--semi-light-green-5), 0.15); color: rgba(var(--semi-light-green-8), 1); } .semi-tag-lime-ghost { background-color: transparent; border: 1px solid rgba(var(--semi-lime-4), 1); color: rgba(var(--semi-lime-5), 1); } .semi-tag-lime-solid { background-color: rgba(var(--semi-lime-5), 1); color: rgba(var(--semi-white), 1); } .semi-tag-lime-light { background-color: rgba(var(--semi-lime-5), 0.15); color: rgba(var(--semi-lime-8), 1); } .semi-tag-orange-ghost { background-color: transparent; border: 1px solid rgba(var(--semi-orange-4), 1); color: rgba(var(--semi-orange-5), 1); } .semi-tag-orange-solid { background-color: rgba(var(--semi-orange-5), 1); color: rgba(var(--semi-white), 1); } .semi-tag-orange-light { background-color: rgba(var(--semi-orange-5), 0.15); color: rgba(var(--semi-orange-8), 1); } .semi-tag-pink-ghost { background-color: transparent; border: 1px solid rgba(var(--semi-pink-4), 1); color: rgba(var(--semi-pink-5), 1); } .semi-tag-pink-solid { background-color: rgba(var(--semi-pink-5), 1); color: rgba(var(--semi-white), 1); } .semi-tag-pink-light { background-color: rgba(var(--semi-pink-5), 0.15); color: rgba(var(--semi-pink-8), 1); } .semi-tag-purple-ghost { background-color: transparent; border: 1px solid rgba(var(--semi-purple-4), 1); color: rgba(var(--semi-purple-5), 1); } .semi-tag-purple-solid { background-color: rgba(var(--semi-purple-5), 1); color: rgba(var(--semi-white), 1); } .semi-tag-purple-light { background-color: rgba(var(--semi-purple-5), 0.15); color: rgba(var(--semi-purple-8), 1); } .semi-tag-red-ghost { background-color: transparent; border: 1px solid rgba(var(--semi-red-4), 1); color: rgba(var(--semi-red-5), 1); } .semi-tag-red-solid { background-color: rgba(var(--semi-red-5), 1); color: rgba(var(--semi-white), 1); } .semi-tag-red-light { background-color: rgba(var(--semi-red-5), 0.15); color: rgba(var(--semi-red-8), 1); } .semi-tag-teal-ghost { background-color: transparent; border: 1px solid rgba(var(--semi-teal-4), 1); color: rgba(var(--semi-teal-5), 1); } .semi-tag-teal-solid { background-color: rgba(var(--semi-teal-5), 1); color: rgba(var(--semi-white), 1); } .semi-tag-teal-light { background-color: rgba(var(--semi-teal-5), 0.15); color: rgba(var(--semi-teal-8), 1); } .semi-tag-violet-ghost { background-color: transparent; border: 1px solid rgba(var(--semi-violet-4), 1); color: rgba(var(--semi-violet-5), 1); } .semi-tag-violet-solid { background-color: rgba(var(--semi-violet-5), 1); color: rgba(var(--semi-white), 1); } .semi-tag-violet-light { background-color: rgba(var(--semi-violet-5), 0.15); color: rgba(var(--semi-violet-8), 1); } .semi-tag-yellow-ghost { background-color: transparent; border: 1px solid rgba(var(--semi-yellow-4), 1); color: rgba(var(--semi-yellow-5), 1); } .semi-tag-yellow-solid { background-color: rgba(var(--semi-yellow-5), 1); color: rgba(var(--semi-white), 1); } .semi-tag-yellow-light { background-color: rgba(var(--semi-yellow-5), 0.15); color: rgba(var(--semi-yellow-8), 1); } .semi-tag-white-ghost { background-color: var(--semi-color-bg-4); border: 1px solid rgba(var(--semi-grey-2), 0.7); color: var(--semi-color-text-0); } .semi-tag-white-solid { background-color: var(--semi-color-bg-4); border: 1px solid rgba(var(--semi-grey-2), 0.7); color: var(--semi-color-text-0); } .semi-tag-white-light { background-color: var(--semi-color-bg-4); border: 1px solid rgba(var(--semi-grey-2), 0.7); color: var(--semi-color-text-0); } .semi-tag-white-ghost .semi-tag-close, .semi-tag-white-light .semi-tag-close, .semi-tag-white-solid .semi-tag-close { color: var(--semi-color-text-2); } .semi-tag-avatar-square, .semi-tag-avatar-circle { background-color: var(--semi-color-bg-4); border: 1px solid var(--semi-color-border); color: var(--semi-color-text-0); } .semi-tag-solid .semi-tag-close { color: var(--semi-color-white); opacity: 0.8; } .semi-tag-solid .semi-tag-close:hover { opacity: 1; } .semi-tag-solid .semi-tag-close:active { opacity: 0.9; } .semi-rtl .semi-tag, .semi-portal-rtl .semi-tag { direction: rtl; } .semi-rtl .semi-tag-close, .semi-portal-rtl .semi-tag-close { padding-left: auto; padding-right: 4px; } .semi-rtl .semi-tag-closable, .semi-portal-rtl .semi-tag-closable { padding: 4px 8px 4px 4px; } .semi-rtl .semi-tag-avatar-square .semi-avatar, .semi-rtl .semi-tag-avatar-circle .semi-avatar, .semi-portal-rtl .semi-tag-avatar-square .semi-avatar, .semi-portal-rtl .semi-tag-avatar-circle .semi-avatar { margin-right: auto; margin-left: 4px; } .semi-rtl .semi-tag-avatar-square, .semi-portal-rtl .semi-tag-avatar-square { padding-right: auto; padding-left: 4px; } .semi-rtl .semi-tag-avatar-circle, .semi-portal-rtl .semi-tag-avatar-circle { padding: 2px 2px 2px 4px; } .semi-rtl .semi-tag-group, .semi-portal-rtl .semi-tag-group { direction: rtl; } .semi-rtl .semi-tag-group .semi-tag, .semi-portal-rtl .semi-tag-group .semi-tag { margin-right: auto; margin-left: 8px; } .semi-rtl .semi-tag-rest-group-popover, .semi-portal-rtl .semi-tag-rest-group-popover { direction: rtl; } .semi-rtl .semi-tag-rest-group-popover .semi-tag, .semi-portal-rtl .semi-tag-rest-group-popover .semi-tag { margin-right: 0; margin-left: 8px; } .semi-rtl .semi-tag-rest-group-popover .semi-tag:last-of-type, .semi-portal-rtl .semi-tag-rest-group-popover .semi-tag:last-of-type { margin-right: auto; margin-left: 0; } .semi-tagInput { background-color: var(--semi-color-fill-0); border: 1px transparent solid; border-radius: var(--semi-border-radius-small); display: inline-flex; font-weight: 400; width: 100%; min-height: 32px; box-sizing: border-box; transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); } .semi-tagInput-small { min-height: 24px; } .semi-tagInput-large { min-height: 40px; } .semi-tagInput-drag-item { display: flex; align-items: center; } .semi-tagInput-drag-item-move { z-index: 2000; } .semi-tagInput-drag-handler { color: var(--semi-color-text-2); margin-right: 4px; cursor: move; } .semi-tagInput-sortable-item { position: relative; } .semi-tagInput-sortable-item-over { overflow: visible; } .semi-tagInput-sortable-item-over::before { content: ""; display: block; height: 100%; width: 2px; background-color: var(--semi-color-primary); position: absolute; left: -2px; top: 0; } .semi-tagInput-sortable-item-active { opacity: 0.5; } .semi-tagInput-hover { background-color: var(--semi-color-fill-1); border: 1px transparent solid; } .semi-tagInput-focus { background-color: var(--semi-color-fill-0); border: 1px var(--semi-color-focus-border) solid; } .semi-tagInput-warning { background-color: var(--semi-color-warning-light-default); border-color: var(--semi-color-warning-light-default); } .semi-tagInput-warning:hover { background-color: var(--semi-color-warning-light-hover); border-color: var(--semi-color-warning-light-hover); } .semi-tagInput-warning.semi-tagInput-focus { background-color: var(--semi-color-warning-light-default); border-color: var(--semi-color-warning); } .semi-tagInput-error { background-color: var(--semi-color-danger-light-default); border-color: var(--semi-color-danger-light-default); } .semi-tagInput-error:hover { background-color: var(--semi-color-danger-light-hover); border-color: var(--semi-color-danger-light-hover); } .semi-tagInput-error.semi-tagInput-focus { background-color: var(--semi-color-danger-light-default); border-color: var(--semi-color-danger); } .semi-tagInput-disabled { cursor: not-allowed; } .semi-tagInput-disabled .semi-tagInput-clearBtn, .semi-tagInput-disabled .semi-tagInput-prefix, .semi-tagInput-disabled .semi-tagInput-suffix { color: var(--semi-color-disabled-text); } .semi-tagInput-disabled .semi-tagInput-wrapper { cursor: not-allowed; } .semi-tagInput-disabled .semi-tagInput-wrapper-tag { color: var(--semi-color-disabled-text); background-color: transparent; } .semi-tagInput-disabled .semi-tagInput-wrapper-input { cursor: not-allowed; } .semi-tagInput-disabled .semi-tagInput-wrapper-input::placeholder { color: var(--semi-color-disabled-text); } .semi-tagInput-wrapper { display: flex; flex-wrap: wrap; flex-grow: 1; align-items: center; padding-left: 4px; padding-right: 4px; overflow: hidden; } .semi-tagInput-wrapper-tag { margin-right: 4px; white-space: pre; } .semi-tagInput-wrapper-tag-size-small { margin-top: 1px; margin-bottom: 1px; } .semi-tagInput-wrapper-tag-size-default { margin-top: 2px; margin-bottom: 2px; } .semi-tagInput-wrapper-tag-size-large { margin-top: 3px; margin-bottom: 3px; } .semi-tagInput-wrapper-tag-icon { padding-left: 4px; } .semi-tagInput-wrapper-typo { font-size: 12px; } .semi-tagInput-wrapper-typo-disabled { color: var(--semi-color-disabled-text); } .semi-tagInput-wrapper-n { cursor: pointer; font-size: 12px; margin-right: 4px; color: var(--semi-color-text-0); padding-left: 8px; padding-right: 8px; } .semi-tagInput-wrapper-n-disabled { cursor: not-allowed; color: var(--semi-color-disabled-text); } .semi-tagInput-wrapper .semi-tagInput-wrapper-input { flex-grow: 1; width: min-content; border: none; outline: none; background-color: transparent; font-size: 14px; } .semi-tagInput-wrapper .semi-tagInput-wrapper-input:hover { background-color: transparent; } .semi-tagInput-wrapper .semi-tagInput-wrapper-input:not(:first-child) > input { padding-left: 0; } .semi-tagInput-wrapper .semi-tagInput-wrapper-input-small { height: 20px; margin-top: 1px; margin-bottom: 1px; line-height: 20px; } .semi-tagInput-wrapper .semi-tagInput-wrapper-input-small .semi-input-small { height: 20px; line-height: 20px; } .semi-tagInput-wrapper .semi-tagInput-wrapper-input-default { height: 24px; margin-top: 2px; margin-bottom: 2px; line-height: 24px; } .semi-tagInput-wrapper .semi-tagInput-wrapper-input-default .semi-input-default { height: 24px; line-height: 24px; } .semi-tagInput-wrapper .semi-tagInput-wrapper-input-large { height: 24px; margin-top: 3px; margin-bottom: 3px; line-height: 24px; } .semi-tagInput-wrapper .semi-tagInput-wrapper-input-large .semi-input-large { height: 24px; line-height: 24px; } .semi-tagInput-clearBtn { display: flex; justify-content: center; align-items: center; width: 32px; flex-shrink: 0; color: var(--semi-color-text-2); } .semi-tagInput-clearBtn:hover { cursor: pointer; color: var(--semi-color-primary-hover); } .semi-tagInput-clearBtn-invisible { visibility: hidden; } .semi-tagInput-prefix, .semi-tagInput-suffix { display: flex; justify-content: center; align-items: center; } .semi-tagInput-prefix-text, .semi-tagInput-suffix-text { margin: 0 12px; font-weight: 600; white-space: nowrap; } .semi-tagInput-prefix-icon, .semi-tagInput-suffix-icon { color: var(--semi-color-text-2); margin: 0 8px; } .semi-tagInput-prefix-text { color: var(--semi-color-text-2); } .semi-tagInput-suffix-text { color: var(--semi-color-text-2); } .semi-tagInput-tag-content-wrapper { display: flex; align-items: center; } .semi-tagInput-sortable-list { display: flex; flex-flow: row wrap; width: 100%; } .semi-rtl .semi-tagInput, .semi-portal-rtl .semi-tagInput { direction: rtl; } .semi-rtl .semi-tagInput-wrapper-tag, .semi-portal-rtl .semi-tagInput-wrapper-tag { margin-left: 4px; margin-right: 0; } .semi-rtl .semi-tagInput-wrapper-input:not(:first-child) > input, .semi-portal-rtl .semi-tagInput-wrapper-input:not(:first-child) > input { padding-right: 0; } .semi-timepicker { display: inline-block; } .semi-timepicker-panel .semi-scrolllist-body { height: 252px; } .semi-timepicker-panel .semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-list-outer-nocycle > ul:before, .semi-timepicker-panel .semi-scrolllist-body .semi-scrolllist-item > ul:before { height: 108px; } .semi-timepicker-panel .semi-scrolllist-body .semi-scrolllist-item, .semi-timepicker-panel .semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-list-outer { -ms-overflow-style: none; /* Internet Explorer 10+ */ scrollbar-width: none; /* Firefox */ } .semi-timepicker-panel .semi-scrolllist-body .semi-scrolllist-item::-webkit-scrollbar, .semi-timepicker-panel .semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-list-outer::-webkit-scrollbar { display: none; width: 0; height: 0; } .semi-timepicker-panel .semi-scrolllist-body .semi-scrolllist-item > ul, .semi-timepicker-panel .semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-list-outer > ul { padding-bottom: 108px; } .semi-timepicker-panel .semi-scrolllist-body .semi-scrolllist-item { -ms-overflow-style: none; /* Internet Explorer 10+ */ scrollbar-width: none; /* Firefox */ } .semi-timepicker-panel .semi-scrolllist-body .semi-scrolllist-item::-webkit-scrollbar { display: none; width: 0; height: 0; } .semi-timepicker-panel .semi-scrolllist-item, .semi-timepicker-panel .semi-scrolllist-item-wheel { flex: none; } .semi-timepicker-panel .semi-scrolllist-item-wheel, .semi-timepicker-panel .semi-scrolllist-item-wheel:not(:last-child) { border: none; } .semi-timepicker-panel-list-ampm { width: 72px; } .semi-timepicker-panel-list-hour { width: 64px; } .semi-timepicker-panel-list-minute { width: 64px; } .semi-timepicker-panel-list-second { width: 64px; } .semi-timepicker-range-panel .semi-timepicker-lists { display: flex; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1); border: 1px solid rgba(0, 0, 0, 0.1); border-radius: var(--semi-border-radius-medium); } .semi-timepicker-range-panel .semi-timepicker-lists .semi-scrolllist:first-of-type { border-radius: var(--semi-border-radius-medium) 0 0 var(--semi-border-radius-medium); } .semi-timepicker-range-panel .semi-timepicker-lists .semi-scrolllist:last-of-type { border-radius: 0 var(--semi-border-radius-medium) var(--semi-border-radius-medium) 0; } .semi-timepicker-range-panel .semi-timepicker-lists > .semi-scrolllist:not(:last-child) .semi-scrolllist-body { border-right: 2px solid var(--semi-color-border); } .semi-timepicker-range-panel .semi-timepicker-lists > .semi-scrolllist { box-shadow: none; } .semi-timepicker-range-panel .semi-timepicker-lists > .semi-scrolllist .semi-scrolllist-body, .semi-timepicker-range-panel .semi-timepicker-lists > .semi-scrolllist .semi-scrolllist-header { padding: 0; } .semi-timepicker .semi-timepicker-input { font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; border-radius: var(--semi-border-radius-small); align-items: center; } .semi-timepicker .semi-input-readonly { cursor: pointer; } .semi-timepicker .semi-input-borderless:not(:focus-within):not(:hover) .semi-input-suffix { opacity: 0; } .semi-rtl .semi-timepicker, .semi-portal-rtl .semi-timepicker { direction: rtl; } .semi-rtl .semi-timepicker-panel, .semi-portal-rtl .semi-timepicker-panel { direction: rtl; } .semi-rtl .semi-timepicker-range, .semi-portal-rtl .semi-timepicker-range { direction: rtl; } .semi-rtl .semi-timepicker-range-panel .semi-timepicker-lists > .semi-scrolllist:not(:last-child) .semi-scrolllist-body, .semi-portal-rtl .semi-timepicker-range-panel .semi-timepicker-lists > .semi-scrolllist:not(:last-child) .semi-scrolllist-body { border-right: 0; border-left: 2px solid var(--semi-color-border); } .semi-timeline { margin: 0; padding: 8px; width: 100%; list-style: none; } .semi-timeline-item { position: relative; margin: 0; padding: 0 0 24px 0; list-style: none; } .semi-timeline-item-tail { position: absolute; top: 20px; left: 4px; height: calc(100% - 20px); border-left: 1px solid var(--semi-color-text-3); } .semi-timeline-item-head { position: absolute; top: 5px; width: 9px; height: 9px; border-radius: var(--semi-border-radius-circle); } .semi-timeline-item-head-ongoing { background-color: var(--semi-color-primary); } .semi-timeline-item-head-default { background-color: var(--semi-color-tertiary-light-active); } .semi-timeline-item-head-success { background-color: var(--semi-color-success); } .semi-timeline-item-head-warning { background-color: var(--semi-color-warning); } .semi-timeline-item-head-error { background-color: var(--semi-color-danger); } .semi-timeline-item-head-custom { position: absolute; display: flex; align-self: center; top: 10px; left: 5px; width: auto; height: auto; border: 0; border-radius: 0; transform: translate(-50%, -50%); } .semi-timeline-item .semi-timeline-item-head-custom.semi-timeline-item-head-ongoing { background-color: transparent; color: var(--semi-color-primary); } .semi-timeline-item .semi-timeline-item-head-custom.semi-timeline-item-head-success { background-color: transparent; color: var(--semi-color-success); } .semi-timeline-item .semi-timeline-item-head-custom.semi-timeline-item-head-warning { background-color: transparent; color: var(--semi-color-warning); } .semi-timeline-item .semi-timeline-item-head-custom.semi-timeline-item-head-error { background-color: transparent; color: var(--semi-color-danger); } .semi-timeline-item .semi-timeline-item-head-custom.semi-timeline-item-head-default { background-color: transparent; color: var(--semi-color-tertiary-light-active); } .semi-timeline-item-content { font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; position: relative; margin: 0 0 0 25px; word-break: break-word; color: var(--semi-color-text-0); } .semi-timeline-item-content-extra, .semi-timeline-item-content-time { font-size: 12px; line-height: 16px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; color: var(--semi-color-text-2); margin-top: 4px; } .semi-timeline-item:last-child > .semi-timeline-item-tail { border-left: none; } .semi-timeline-alternate .semi-timeline-item-tail, .semi-timeline-alternate .semi-timeline-item-head, .semi-timeline-alternate .semi-timeline-item-head-custom, .semi-timeline-right .semi-timeline-item-tail, .semi-timeline-right .semi-timeline-item-head, .semi-timeline-right .semi-timeline-item-head-custom, .semi-timeline-center .semi-timeline-item-tail, .semi-timeline-center .semi-timeline-item-head, .semi-timeline-center .semi-timeline-item-head-custom { left: 50%; } .semi-timeline-alternate .semi-timeline-item-head.semi-timeline-item-head-custom, .semi-timeline-right .semi-timeline-item-head.semi-timeline-item-head-custom, .semi-timeline-center .semi-timeline-item-head.semi-timeline-item-head-custom { margin-left: 0; } .semi-timeline-alternate .semi-timeline-item-head, .semi-timeline-right .semi-timeline-item-head, .semi-timeline-center .semi-timeline-item-head { margin-left: -4px; } .semi-timeline-alternate .semi-timeline-item-left .semi-timeline-item-content, .semi-timeline-right .semi-timeline-item-left .semi-timeline-item-content, .semi-timeline-center .semi-timeline-item-left .semi-timeline-item-content { left: calc(50% - 4px); width: calc(50% - 14px); text-align: left; } .semi-timeline-alternate .semi-timeline-item-right .semi-timeline-item-content, .semi-timeline-right .semi-timeline-item-right .semi-timeline-item-content, .semi-timeline-center .semi-timeline-item-right .semi-timeline-item-content { width: calc(50% - 20px); margin: 0; text-align: right; } .semi-timeline-center .semi-timeline-item-content-time { position: absolute; top: -2px; margin-left: calc(-40px - 100%); width: 100%; text-align: right; } .semi-timeline-right .semi-timeline-item-right .semi-timeline-item-tail, .semi-timeline-right .semi-timeline-item-right .semi-timeline-item-head, .semi-timeline-right .semi-timeline-item-right .semi-timeline-item-head-custom { left: calc(100% - 9px); } .semi-timeline-right .semi-timeline-item-right .semi-timeline-item-content { width: calc(100% - 28px); } .semi-rtl .semi-timeline, .semi-portal-rtl .semi-timeline { direction: rtl; } .semi-rtl .semi-timeline-item-tail, .semi-portal-rtl .semi-timeline-item-tail { left: auto; right: 4px; border-left: 0; border-right: 1px solid var(--semi-color-text-3); } .semi-rtl .semi-timeline-item-head-custom, .semi-portal-rtl .semi-timeline-item-head-custom { left: auto; right: 5px; transform: translate(50%, -50%); } .semi-rtl .semi-timeline-item-content, .semi-portal-rtl .semi-timeline-item-content { margin: 0 25px 0 0; } .semi-rtl .semi-timeline-item:last-child .semi-timeline-item-tail, .semi-portal-rtl .semi-timeline-item:last-child .semi-timeline-item-tail { border-right: none; } .semi-rtl .semi-timeline-alternate .semi-timeline-item-tail, .semi-rtl .semi-timeline-alternate .semi-timeline-item-head, .semi-rtl .semi-timeline-alternate .semi-timeline-item-head-custom, .semi-rtl .semi-timeline-right .semi-timeline-item-tail, .semi-rtl .semi-timeline-right .semi-timeline-item-head, .semi-rtl .semi-timeline-right .semi-timeline-item-head-custom, .semi-rtl .semi-timeline-center .semi-timeline-item-tail, .semi-rtl .semi-timeline-center .semi-timeline-item-head, .semi-rtl .semi-timeline-center .semi-timeline-item-head-custom, .semi-portal-rtl .semi-timeline-alternate .semi-timeline-item-tail, .semi-portal-rtl .semi-timeline-alternate .semi-timeline-item-head, .semi-portal-rtl .semi-timeline-alternate .semi-timeline-item-head-custom, .semi-portal-rtl .semi-timeline-right .semi-timeline-item-tail, .semi-portal-rtl .semi-timeline-right .semi-timeline-item-head, .semi-portal-rtl .semi-timeline-right .semi-timeline-item-head-custom, .semi-portal-rtl .semi-timeline-center .semi-timeline-item-tail, .semi-portal-rtl .semi-timeline-center .semi-timeline-item-head, .semi-portal-rtl .semi-timeline-center .semi-timeline-item-head-custom { left: auto; right: 50%; } .semi-rtl .semi-timeline-alternate .semi-timeline-item-head, .semi-rtl .semi-timeline-right .semi-timeline-item-head, .semi-rtl .semi-timeline-center .semi-timeline-item-head, .semi-portal-rtl .semi-timeline-alternate .semi-timeline-item-head, .semi-portal-rtl .semi-timeline-right .semi-timeline-item-head, .semi-portal-rtl .semi-timeline-center .semi-timeline-item-head { margin-left: 0; margin-right: -4px; } .semi-rtl .semi-timeline-alternate .semi-timeline-item-left .semi-timeline-item-content, .semi-rtl .semi-timeline-right .semi-timeline-item-left .semi-timeline-item-content, .semi-rtl .semi-timeline-center .semi-timeline-item-left .semi-timeline-item-content, .semi-portal-rtl .semi-timeline-alternate .semi-timeline-item-left .semi-timeline-item-content, .semi-portal-rtl .semi-timeline-right .semi-timeline-item-left .semi-timeline-item-content, .semi-portal-rtl .semi-timeline-center .semi-timeline-item-left .semi-timeline-item-content { left: auto; right: calc(50% - 4px); text-align: right; } .semi-rtl .semi-timeline-alternate .semi-timeline-item-right .semi-timeline-item-content, .semi-rtl .semi-timeline-right .semi-timeline-item-right .semi-timeline-item-content, .semi-rtl .semi-timeline-center .semi-timeline-item-right .semi-timeline-item-content, .semi-portal-rtl .semi-timeline-alternate .semi-timeline-item-right .semi-timeline-item-content, .semi-portal-rtl .semi-timeline-right .semi-timeline-item-right .semi-timeline-item-content, .semi-portal-rtl .semi-timeline-center .semi-timeline-item-right .semi-timeline-item-content { text-align: left; } .semi-rtl .semi-timeline-center .semi-timeline-item-content-time, .semi-portal-rtl .semi-timeline-center .semi-timeline-item-content-time { margin-left: 0; margin-right: calc(-40px - 100%); text-align: left; } .semi-rtl .semi-timeline-right .semi-timeline-item-right .semi-timeline-item-tail, .semi-rtl .semi-timeline-right .semi-timeline-item-right .semi-timeline-item-head, .semi-rtl .semi-timeline-right .semi-timeline-item-right .semi-timeline-item-head-custom, .semi-portal-rtl .semi-timeline-right .semi-timeline-item-right .semi-timeline-item-tail, .semi-portal-rtl .semi-timeline-right .semi-timeline-item-right .semi-timeline-item-head, .semi-portal-rtl .semi-timeline-right .semi-timeline-item-right .semi-timeline-item-head-custom { left: 0; right: calc(100% - 9px); } .semi-toast { pointer-events: none; } .semi-toast-wrapper { position: fixed; height: 0; top: 0; width: 100%; display: flex; justify-content: center; z-index: 1010; } .semi-toast-wrapper .semi-toast-innerWrapper { width: fit-content; height: fit-content; } .semi-toast-wrapper .semi-toast-innerWrapper-hover .semi-toast-zero-height-wrapper { perspective: unset; perspective-origin: center center; } .semi-toast-zero-height-wrapper { transition: all 300ms cubic-bezier(0.22, 0.57, 0.02, 1.2); perspective-origin: center 280px; perspective: 280px; height: 0; overflow: visible; } .semi-toast-content { pointer-events: all; box-shadow: var(--semi-shadow-elevated); font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; background-color: var(--semi-color-bg-3); border-radius: var(--semi-border-radius-medium); padding: 12px 8px 12px 8px; display: inline-flex; align-items: flex-start; justify-content: center; margin: 12px; font-weight: 600; color: var(--semi-color-text-0); } .semi-toast-content .semi-toast-close-button { margin-top: -2px; height: 20px; } .semi-toast-content .semi-toast-content-text { margin-left: 12px; margin-right: 12px; text-align: left; word-wrap: break-word; overflow-wrap: break-word; } .semi-toast-light.semi-toast-warning .semi-toast-content { background-color: var(--semi-color-warning-light-default); border: 1px solid var(--semi-color-warning); } .semi-toast-light.semi-toast-warning .semi-toast-icon-warning { color: var(--semi-color-warning); } .semi-toast-light.semi-toast-success .semi-toast-content { background-color: var(--semi-color-success-light-default); border: 1px solid var(--semi-color-success); } .semi-toast-light.semi-toast-success .semi-toast-icon-success { color: var(--semi-color-success); } .semi-toast-light.semi-toast-info .semi-toast-content { background-color: var(--semi-color-info-light-default); border: 1px solid var(--semi-color-info); } .semi-toast-light.semi-toast-info .semi-toast-icon-info { color: var(--semi-color-info); } .semi-toast-light.semi-toast-error .semi-toast-content { background-color: var(--semi-color-danger-light-default); border: 1px solid var(--semi-color-danger); } .semi-toast-light.semi-toast-error .semi-toast-icon-error { color: var(--semi-color-danger); } .semi-toast .semi-toast-icon-warning { color: var(--semi-color-warning); } .semi-toast .semi-toast-icon-success { color: var(--semi-color-success); } .semi-toast .semi-toast-icon-info { color: var(--semi-color-info); } .semi-toast .semi-toast-icon-error { color: var(--semi-color-danger); } .semi-toast-animation-show { animation: 300ms semi-toast-keyframe-toast-show cubic-bezier(0.22, 0.57, 0.02, 1.2) 0s; animation-fill-mode: forwards; } .semi-toast-animation-hide { animation: 300ms semi-toast-keyframe-toast-hide cubic-bezier(0.22, 0.57, 0.02, 1.2) 0s; animation-fill-mode: forwards; } @keyframes semi-toast-keyframe-toast-show { 0% { opacity: 0; transform: translateY(-100%); } 100% { opacity: 1; } } @keyframes semi-toast-keyframe-toast-hide { 0% { opacity: 1; } 100% { opacity: 0; transform: translateY(-100%); } } .semi-toast-rtl { direction: rtl; } .semi-toast-rtl .semi-toast-content .semi-toast-content-text { text-align: right; margin-left: 12px; margin-right: 12px; } @keyframes semi-tooltip-zoomIn { from { opacity: 0; transform: scale(0.8, 0.8); } 50% { opacity: 1; } } @keyframes semi-tooltip-bounceIn { from { opacity: 0; transform: scale(0.6, 0.6); } 70% { opacity: 1; transform: scale(1.01, 1.01); } to { opacity: 1; transform: scale(1, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } } @keyframes semi-tooltip-zoomOut { from { opacity: 1; } 60% { opacity: 0; transform: scale(0.8, 0.8); } to { opacity: 0; } } .semi-tooltip-wrapper { position: relative; background-color: rgba(var(--semi-grey-7), 1); color: var(--semi-color-bg-0); border-radius: var(--semi-border-radius-medium); padding-top: 8px; padding-right: 12px; padding-bottom: 8px; padding-left: 12px; font-size: 14px; left: 0; top: 0; word-wrap: break-word; overflow-wrap: break-word; font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; opacity: 0; max-width: 240px; } .semi-tooltip-wrapper-show { opacity: 1; } .semi-tooltip-content { min-width: 0; } .semi-tooltip-trigger { display: inline-block; width: auto; height: auto; } .semi-tooltip-with-arrow { display: flex; align-items: center; justify-content: center; box-sizing: border-box; } .semi-tooltip-animation-show { animation: semi-tooltip-zoomIn 100ms cubic-bezier(0.215, 0.61, 0.355, 1); animation-fill-mode: forwards; } .semi-tooltip-animation-hide { animation: semi-tooltip-zoomOut 100ms cubic-bezier(0.215, 0.61, 0.355, 1); animation-fill-mode: forwards; } .semi-tooltip-wrapper .semi-tooltip-icon-arrow { height: 7px; width: 24px; position: absolute; color: rgba(var(--semi-grey-7), 1); } .semi-tooltip-wrapper[x-placement=top] .semi-tooltip-icon-arrow { left: 50%; transform: translateX(-50%); bottom: -6px; } .semi-tooltip-wrapper[x-placement=top].semi-tooltip-with-arrow, .semi-tooltip-wrapper[x-placement=top] .semi-tooltip-with-arrow { min-width: 36px; } .semi-tooltip-wrapper[x-placement=topLeft] .semi-tooltip-icon-arrow { bottom: -6px; left: 6px; } .semi-tooltip-wrapper[x-placement=topLeft].semi-tooltip-with-arrow, .semi-tooltip-wrapper[x-placement=topLeft] .semi-tooltip-with-arrow { min-width: 36px; } .semi-tooltip-wrapper[x-placement=topRight] .semi-tooltip-icon-arrow { bottom: -6px; right: 6px; } .semi-tooltip-wrapper[x-placement=topRight].semi-tooltip-with-arrow, .semi-tooltip-wrapper[x-placement=topRight] .semi-tooltip-with-arrow { min-width: 36px; } .semi-tooltip-wrapper[x-placement=leftTop] .semi-tooltip-icon-arrow { width: 7px; height: 24px; right: -6px; top: 5px; } .semi-tooltip-wrapper[x-placement=leftTop].semi-tooltip-with-arrow, .semi-tooltip-wrapper[x-placement=leftTop] .semi-tooltip-with-arrow { min-height: 34px; } .semi-tooltip-wrapper[x-placement=left] .semi-tooltip-icon-arrow { width: 7px; height: 24px; right: -6px; top: 50%; transform: translateY(-50%); } .semi-tooltip-wrapper[x-placement=left].semi-tooltip-with-arrow, .semi-tooltip-wrapper[x-placement=left] .semi-tooltip-with-arrow { min-height: 34px; } .semi-tooltip-wrapper[x-placement=leftBottom] .semi-tooltip-icon-arrow { width: 7px; height: 24px; right: -6px; bottom: 5px; } .semi-tooltip-wrapper[x-placement=leftBottom].semi-tooltip-with-arrow, .semi-tooltip-wrapper[x-placement=leftBottom] .semi-tooltip-with-arrow { min-height: 34px; } .semi-tooltip-wrapper[x-placement=rightTop] .semi-tooltip-icon-arrow { width: 7px; height: 24px; left: -6px; top: 5px; transform: rotate(180deg); } .semi-tooltip-wrapper[x-placement=rightTop].semi-tooltip-with-arrow, .semi-tooltip-wrapper[x-placement=rightTop] .semi-tooltip-with-arrow { min-height: 34px; } .semi-tooltip-wrapper[x-placement=right] .semi-tooltip-icon-arrow { width: 7px; height: 24px; left: -6px; top: 50%; transform: translateY(-50%) rotate(180deg); } .semi-tooltip-wrapper[x-placement=right].semi-tooltip-with-arrow, .semi-tooltip-wrapper[x-placement=right] .semi-tooltip-with-arrow { min-height: 34px; } .semi-tooltip-wrapper[x-placement=rightBottom] .semi-tooltip-icon-arrow { width: 7px; height: 24px; left: -6px; bottom: 5px; transform: rotate(180deg); } .semi-tooltip-wrapper[x-placement=rightBottom].semi-tooltip-with-arrow, .semi-tooltip-wrapper[x-placement=rightBottom] .semi-tooltip-with-arrow { min-height: 34px; } .semi-tooltip-wrapper[x-placement=bottomLeft] .semi-tooltip-icon-arrow { top: -6px; left: 6px; transform: rotate(180deg); } .semi-tooltip-wrapper[x-placement=bottomLeft].semi-tooltip-with-arrow, .semi-tooltip-wrapper[x-placement=bottomLeft] .semi-tooltip-with-arrow { min-width: 36px; } .semi-tooltip-wrapper[x-placement=bottom] .semi-tooltip-icon-arrow { top: -6px; left: 50%; transform: translateX(-50%) rotate(180deg); } .semi-tooltip-wrapper[x-placement=bottom].semi-tooltip-with-arrow, .semi-tooltip-wrapper[x-placement=bottom] .semi-tooltip-with-arrow { min-width: 36px; } .semi-tooltip-wrapper[x-placement=bottomRight] .semi-tooltip-icon-arrow { right: 6px; top: -6px; transform: rotate(180deg); } .semi-tooltip-wrapper[x-placement=bottomRight].semi-tooltip-with-arrow, .semi-tooltip-wrapper[x-placement=bottomRight] .semi-tooltip-with-arrow { min-width: 36px; } .semi-rtl .semi-tooltip-wrapper, .semi-portal-rtl .semi-tooltip-wrapper { direction: rtl; padding-right: 12px; padding-left: 12px; left: auto; right: 0; } .semi-transfer { background-color: var(--semi-color-bg-1); border: 1px solid var(--semi-color-border); border-radius: var(--semi-border-radius-medium); min-width: 402px; height: 400px; box-sizing: border-box; display: flex; } .semi-transfer-disabled .semi-transfer-header { color: var(--semi-color-disabled-text); cursor: not-allowed; } .semi-transfer-disabled .semi-transfer-item { color: var(--semi-color-disabled-text); cursor: not-allowed; } .semi-transfer-disabled .semi-transfer-item:hover { background-color: inherit; } .semi-transfer-disabled .semi-transfer-item:hover .semi-transfer-item-close-icon { visibility: hidden; } .semi-transfer-disabled .semi-transfer-item:active { background-color: inherit; } .semi-transfer-custom-panel { border: none; min-width: inherit; height: inherit; } .semi-transfer-header { font-size: 12px; line-height: 16px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; display: flex; align-items: center; height: 24px; margin-top: 12px; margin-right: 12px; margin-bottom: 8px; margin-left: 12px; color: var(--semi-color-text-2); } .semi-transfer-header-all { font-weight: 600; margin-left: 16px; } .semi-transfer-header .semi-button { font-size: 12px; line-height: 16px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; } .semi-transfer-item { min-height: 36px; box-sizing: border-box; padding-top: 8px; padding-right: 9px; padding-bottom: 8px; padding-left: 12px; user-select: none; font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; color: var(--semi-color-text-1); cursor: pointer; transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); } .semi-transfer-item:hover { background-color: var(--semi-color-fill-0); } .semi-transfer-item:active { background-color: var(--semi-color-fill-1); } .semi-transfer-item-disabled { cursor: not-allowed; } .semi-transfer-item-disabled:hover { background-color: inherit; } .semi-transfer-item .semi-transfer-item-close-icon { font-size: 12px; cursor: pointer; visibility: hidden; color: var(--semi-color-text-2); } .semi-transfer-left { width: 50%; border-right: 1px solid var(--semi-color-border); display: flex; flex-direction: column; } .semi-transfer-left-list { overflow: auto; flex-grow: 1; } .semi-transfer-left-empty { height: 36px; } .semi-transfer-left > .semi-spin { width: 100%; flex-grow: 1; } .semi-transfer-right { width: 50%; display: flex; flex-direction: column; position: relative; } .semi-transfer-right-header { margin-top: 12px; margin-bottom: 0; height: 32px; flex-shrink: 0; } .semi-transfer-right-list { overflow: auto; flex-grow: 1; } .semi-transfer-right-item { color: var(--semi-color-text-0); cursor: auto; } .semi-transfer-right-item:hover .semi-transfer-item-close-icon { flex-shrink: 0; visibility: visible; cursor: pointer; } .semi-transfer-right-item:hover .semi-transfer-item-close-icon.semi-transfer-item-close-icon-disabled { visibility: hidden; } .semi-transfer-right-item-text { flex: 1; word-break: break-all; } .semi-transfer-right-item-drag-handler { margin-right: 4px; flex-shrink: 0; cursor: move; } .semi-transfer-right-item-drag-item-move { z-index: 2000; } .semi-transfer-right-item-sortable-item-active { opacity: 0; } .semi-transfer-right-empty { position: absolute; height: 100%; } .semi-transfer-empty { width: 100%; display: flex; justify-content: center; align-items: center; font-size: 12px; line-height: 16px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; color: var(--semi-color-text-2); } .semi-transfer-filter { margin-top: 12px; margin-right: 12px; margin-bottom: 0; margin-left: 12px; } .semi-transfer-group-title { color: var(--semi-color-text-2); padding-left: 12px; font-size: 12px; line-height: 16px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; height: 28px; display: flex; align-items: center; } .semi-rtl .semi-transfer, .semi-portal-rtl .semi-transfer { direction: rtl; } .semi-rtl .semi-transfer-header-all, .semi-portal-rtl .semi-transfer-header-all { margin-left: 0; margin-right: 16px; } .semi-rtl .semi-transfer-item, .semi-portal-rtl .semi-transfer-item { padding-left: 9px; padding-right: 12px; } .semi-rtl .semi-transfer-left, .semi-portal-rtl .semi-transfer-left { border-right: 0; border-left: 1px solid var(--semi-color-border); } .semi-rtl .semi-transfer-group-title, .semi-portal-rtl .semi-transfer-group-title { padding-left: 0; padding-right: 12px; } .semi-tree-search-wrapper { padding: 8px 12px; } .semi-tree-wrapper { display: flex; flex-direction: column; } .semi-tree-option-list { overflow-x: hidden; overflow-y: auto; box-sizing: border-box; flex: 1; padding: 8px 0; } .semi-tree-option-list ul, .semi-tree-option-list li { list-style-type: none; padding: 0; margin: 0; } .semi-tree-option-list li.semi-tree-option { box-sizing: border-box; padding-top: 4px; padding-bottom: 4px; } .semi-tree-option-list li > .semi-tree-option-label { list-style-type: none; padding: 0; } .semi-tree-option-list .semi-tree-option-expand-icon, .semi-tree-option-list .semi-tree-option-empty-icon { box-sizing: border-box; width: 12px; color: var(--semi-color-text-2); margin-right: 8px; display: flex; flex-shrink: 0; } .semi-tree-option-list .semi-tree-option { display: flex; align-items: center; cursor: pointer; transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); transform: scale(var(--semi-transform_scale-none)); font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; word-break: break-word; color: var(--semi-color-text-0); position: relative; } .semi-tree-option-list .semi-tree-option-label { display: flex; align-items: center; } .semi-tree-option-list .semi-tree-option-label > .semi-icon { margin-right: 8px; } .semi-tree-option-list .semi-tree-option-label .semi-checkbox { margin-right: 8px; } .semi-tree-option-list .semi-tree-option-label-text { display: block; flex: 1; } .semi-tree-option-list .semi-tree-option-ellipsis .semi-tree-option-label-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .semi-tree-option-list .semi-tree-option-label-text, .semi-tree-option-list .semi-tree-option .semi-checkbox-addon { border-radius: var(--semi-border-radius-small); } .semi-tree-option-list .semi-tree-option-label-text:hover, .semi-tree-option-list .semi-tree-option .semi-checkbox-addon:hover { background-color: var(--semi-color-fill-0); } .semi-tree-option-list .semi-tree-option-label-text:active, .semi-tree-option-list .semi-tree-option .semi-checkbox-addon:active { background-color: var(--semi-color-fill-1); } .semi-tree-option-list .semi-tree-option-item-icon { color: var(--semi-color-text-2); } .semi-tree-option-list .semi-tree-option-active .semi-tree-option-label-text { background-color: var(--semi-color-primary-light-default); } .semi-tree-option-list .semi-tree-option-active:hover, .semi-tree-option-list .semi-tree-option-active:active { background-color: transparent; } .semi-tree-option-list .semi-tree-option-selected .semi-tree-option-label { background-color: var(--semi-color-primary-light-default); } .semi-tree-option-list .semi-tree-option-selected .semi-tree-option-label:hover, .semi-tree-option-list .semi-tree-option-selected .semi-tree-option-label:active { background-color: var(--semi-color-primary-light-default); } .semi-tree-option-list .semi-tree-option-collapsed .semi-tree-option-expand-icon { transform: rotate(270deg); } .semi-tree-option-list .semi-tree-option-highlight { font-weight: 600; color: var(--semi-color-primary); } .semi-tree-option-list .semi-tree-option-hidden { display: none; } .semi-tree-option-list .semi-tree-option-disabled .semi-tree-option-label { color: var(--semi-color-disabled-text); } .semi-tree-option-list .semi-tree-option-fullLabel-draggable, .semi-tree-option-list .semi-tree-option-draggable { -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; user-select: none; /* Required to make elements draggable in old WebKit */ -khtml-user-drag: element; -webkit-user-drag: element; } .semi-tree-option-list .semi-tree-option-draggable { box-sizing: border-box; border-left: 2px solid transparent; margin-top: -2px; } .semi-tree-option-list .semi-tree-option-draggable .semi-tree-option-label { border-top: 2px transparent solid; border-bottom: 2px transparent solid; } .semi-tree-option-list .semi-tree-option-draggable .semi-tree-option-drag-over-gap-top { border-top: 2px var(--semi-color-primary) solid; } .semi-tree-option-list .semi-tree-option-draggable .semi-tree-option-drag-over-gap-bottom { border-bottom: 2px var(--semi-color-primary) solid; } .semi-tree-option-list .semi-tree-option-fullLabel-draggable.semi-tree-option-fullLabel-drag-over-gap-top { border-top: 2px var(--semi-color-primary) solid; } .semi-tree-option-list .semi-tree-option-fullLabel-draggable.semi-tree-option-fullLabel-drag-over-gap-bottom { border-bottom: 2px var(--semi-color-primary) solid; } .semi-tree-option-list .semi-tree-option-drag-over.semi-tree-option-draggable, .semi-tree-option-list .semi-tree-option-drag-over.semi-tree-option-fullLabel-draggable { border: 2px solid var(--semi-color-primary); } .semi-tree-option-list .semi-tree-option-drag-over.semi-tree-option-draggable .semi-tree-option-label, .semi-tree-option-list .semi-tree-option-drag-over.semi-tree-option-fullLabel-draggable .semi-tree-option-label { border-top: 0; border-bottom: 0; } .semi-tree-option-list .semi-tree-option-drag-over.semi-tree-option-draggable + .semi-tree-option-selected::after, .semi-tree-option-list .semi-tree-option-drag-over.semi-tree-option-fullLabel-draggable + .semi-tree-option-selected::after { content: ""; position: absolute; top: 0; left: -2px; bottom: 0; right: -1px; border-top: 2px solid var(--semi-color-primary); } .semi-tree-option-list li.semi-tree-option-draggable.semi-tree-option { padding-top: 0px; padding-bottom: 0px; } .semi-tree-option-list li.semi-tree-option-draggable.semi-tree-option .semi-tree-option-label { padding: 3px 0; } .semi-tree-option-list li.semi-tree-option-draggable.semi-tree-option .semi-tree-option-selected { background-color: transparent; } .semi-tree-option-list li.semi-tree-option-draggable.semi-tree-option .semi-tree-option-selected:hover, .semi-tree-option-list li.semi-tree-option-draggable.semi-tree-option .semi-tree-option-selected:active { background-color: transparent; } .semi-tree-option-list .semi-tree-option-level-1 { padding-left: 8px; } .semi-tree-option-list .semi-tree-option-level-2 { padding-left: 28px; } .semi-tree-option-list .semi-tree-option-level-3 { padding-left: 48px; } .semi-tree-option-list .semi-tree-option-level-4 { padding-left: 68px; } .semi-tree-option-list .semi-tree-option-level-5 { padding-left: 88px; } .semi-tree-option-list .semi-tree-option-level-6 { padding-left: 108px; } .semi-tree-option-list .semi-tree-option-level-7 { padding-left: 128px; } .semi-tree-option-list .semi-tree-option-level-8 { padding-left: 148px; } .semi-tree-option-list .semi-tree-option-level-9 { padding-left: 168px; } .semi-tree-option-list .semi-tree-option-level-10 { padding-left: 188px; } .semi-tree-option-list .semi-tree-option-level-11 { padding-left: 208px; } .semi-tree-option-list .semi-tree-option-level-12 { padding-left: 228px; } .semi-tree-option-list .semi-tree-option-level-13 { padding-left: 248px; } .semi-tree-option-list .semi-tree-option-level-14 { padding-left: 268px; } .semi-tree-option-list .semi-tree-option-level-15 { padding-left: 288px; } .semi-tree-option-list .semi-tree-option-level-16 { padding-left: 308px; } .semi-tree-option-list .semi-tree-option-level-17 { padding-left: 328px; } .semi-tree-option-list .semi-tree-option-level-18 { padding-left: 348px; } .semi-tree-option-list .semi-tree-option-level-19 { padding-left: 368px; } .semi-tree-option-list .semi-tree-option-level-20 { padding-left: 388px; } .semi-tree-option-list .semi-tree-option-empty:hover, .semi-tree-option-list .semi-tree-option-empty:active { background-color: transparent; } .semi-tree-option-list .semi-tree-option-label-empty { padding-left: 0; justify-content: center; color: var(--semi-color-disabled-text); user-select: none; cursor: not-allowed; } .semi-tree-option-list .semi-checkboxGroup-vertical { row-gap: 0; } .semi-tree-option-list-block .semi-tree-option:hover { background-color: var(--semi-color-fill-0); } .semi-tree-option-list-block .semi-tree-option:active { background-color: var(--semi-color-fill-1); } .semi-tree-option-list-block .semi-tree-option-label { flex: 1; } .semi-tree-option-list-block .semi-tree-option-active { background-color: var(--semi-color-primary-light-default); } .semi-tree-option-list-block .semi-tree-option-active:hover, .semi-tree-option-list-block .semi-tree-option-active:active { background-color: var(--semi-color-primary-light-default); } .semi-tree-option-list-block .semi-tree-option-active .semi-tree-option-label-text { background-color: transparent; } .semi-tree-option-list-block .semi-tree-option-expand-icon { flex-shrink: 0; box-sizing: content-box; } .semi-tree-option-list-block .semi-tree-option-expand-icon:hover { color: var(--semi-color-text-0); } .semi-tree-option-list-block .semi-tree-option-expand-icon:active { color: var(--semi-color-black); } .semi-tree-option-list-block .semi-tree-option-spin-icon { display: flex; line-height: 0; color: var(--semi-color-primary); } .semi-tree-option-list-block .semi-tree-option-spin-icon svg { width: 12px; height: 12px; } .semi-tree-option-list-block .semi-tree-option-selected { background-color: var(--semi-color-primary-light-default); } .semi-tree-option-list-block .semi-tree-option-selected .semi-tree-option-label { background-color: transparent; } .semi-tree-option-list-block .semi-tree-option-selected .semi-tree-option-label:hover, .semi-tree-option-list-block .semi-tree-option-selected .semi-tree-option-label:active { background-color: transparent; } .semi-tree-option-list-block .semi-tree-option-selected .semi-checkbox-addon { background-color: transparent; } .semi-tree-option-list-block .semi-tree-option-selected:hover, .semi-tree-option-list-block .semi-tree-option-selected:active { background-color: var(--semi-color-primary-light-default); } .semi-tree-option-list-block .semi-tree-option-label-text, .semi-tree-option-list-block .semi-tree-option .semi-checkbox-addon { padding: 0; border-radius: var(--semi-border-radius-small); } .semi-tree-option-list-block .semi-tree-option-label-text:hover, .semi-tree-option-list-block .semi-tree-option .semi-checkbox-addon:hover { background-color: transparent; } .semi-tree-option-list-block .semi-tree-option-label-text:active, .semi-tree-option-list-block .semi-tree-option .semi-checkbox-addon:active { background-color: transparent; } .semi-tree-option-list-block .semi-tree-option-label-text { width: 0; } .semi-tree-option-list-block .semi-tree-option-empty:hover, .semi-tree-option-list-block .semi-tree-option-empty:active { background-color: transparent; } .semi-rtl .semi-tree, .semi-popover-rtl .semi-tree { direction: rtl; } .semi-rtl .semi-tree-wrapper, .semi-popover-rtl .semi-tree-wrapper { direction: rtl; } .semi-rtl .semi-tree-option-list, .semi-popover-rtl .semi-tree-option-list { direction: rtl; } .semi-rtl .semi-tree-option-list .semi-tree-option-expand-icon, .semi-rtl .semi-tree-option-list .semi-tree-option-empty-icon, .semi-popover-rtl .semi-tree-option-list .semi-tree-option-expand-icon, .semi-popover-rtl .semi-tree-option-list .semi-tree-option-empty-icon { margin-right: 0; margin-left: 8px; } .semi-rtl .semi-tree-option-list .semi-tree-option-label > .semi-icon, .semi-popover-rtl .semi-tree-option-list .semi-tree-option-label > .semi-icon { margin-right: 0; margin-left: 8px; } .semi-rtl .semi-tree-option-list .semi-tree-option-label .semi-checkbox, .semi-popover-rtl .semi-tree-option-list .semi-tree-option-label .semi-checkbox { margin-right: 0; margin-left: 8px; } .semi-rtl .semi-tree-option-list .semi-tree-option-collapsed .semi-tree-option-expand-icon, .semi-popover-rtl .semi-tree-option-list .semi-tree-option-collapsed .semi-tree-option-expand-icon { transform: rotate(90deg); } .semi-rtl .semi-tree-option-list .semi-tree-option-level-1, .semi-popover-rtl .semi-tree-option-list .semi-tree-option-level-1 { padding-left: 0; padding-right: 8px; } .semi-rtl .semi-tree-option-list .semi-tree-option-level-2, .semi-popover-rtl .semi-tree-option-list .semi-tree-option-level-2 { padding-left: 0; padding-right: 28px; } .semi-rtl .semi-tree-option-list .semi-tree-option-level-3, .semi-popover-rtl .semi-tree-option-list .semi-tree-option-level-3 { padding-left: 0; padding-right: 48px; } .semi-rtl .semi-tree-option-list .semi-tree-option-level-4, .semi-popover-rtl .semi-tree-option-list .semi-tree-option-level-4 { padding-left: 0; padding-right: 68px; } .semi-rtl .semi-tree-option-list .semi-tree-option-level-5, .semi-popover-rtl .semi-tree-option-list .semi-tree-option-level-5 { padding-left: 0; padding-right: 88px; } .semi-rtl .semi-tree-option-list .semi-tree-option-level-6, .semi-popover-rtl .semi-tree-option-list .semi-tree-option-level-6 { padding-left: 0; padding-right: 108px; } .semi-rtl .semi-tree-option-list .semi-tree-option-level-7, .semi-popover-rtl .semi-tree-option-list .semi-tree-option-level-7 { padding-left: 0; padding-right: 128px; } .semi-rtl .semi-tree-option-list .semi-tree-option-level-8, .semi-popover-rtl .semi-tree-option-list .semi-tree-option-level-8 { padding-left: 0; padding-right: 148px; } .semi-rtl .semi-tree-option-list .semi-tree-option-level-9, .semi-popover-rtl .semi-tree-option-list .semi-tree-option-level-9 { padding-left: 0; padding-right: 168px; } .semi-rtl .semi-tree-option-list .semi-tree-option-level-10, .semi-popover-rtl .semi-tree-option-list .semi-tree-option-level-10 { padding-left: 0; padding-right: 188px; } .semi-rtl .semi-tree-option-list .semi-tree-option-level-11, .semi-popover-rtl .semi-tree-option-list .semi-tree-option-level-11 { padding-left: 0; padding-right: 208px; } .semi-rtl .semi-tree-option-list .semi-tree-option-level-12, .semi-popover-rtl .semi-tree-option-list .semi-tree-option-level-12 { padding-left: 0; padding-right: 228px; } .semi-rtl .semi-tree-option-list .semi-tree-option-level-13, .semi-popover-rtl .semi-tree-option-list .semi-tree-option-level-13 { padding-left: 0; padding-right: 248px; } .semi-rtl .semi-tree-option-list .semi-tree-option-level-14, .semi-popover-rtl .semi-tree-option-list .semi-tree-option-level-14 { padding-left: 0; padding-right: 268px; } .semi-rtl .semi-tree-option-list .semi-tree-option-level-15, .semi-popover-rtl .semi-tree-option-list .semi-tree-option-level-15 { padding-left: 0; padding-right: 288px; } .semi-rtl .semi-tree-option-list .semi-tree-option-level-16, .semi-popover-rtl .semi-tree-option-list .semi-tree-option-level-16 { padding-left: 0; padding-right: 308px; } .semi-rtl .semi-tree-option-list .semi-tree-option-level-17, .semi-popover-rtl .semi-tree-option-list .semi-tree-option-level-17 { padding-left: 0; padding-right: 328px; } .semi-rtl .semi-tree-option-list .semi-tree-option-level-18, .semi-popover-rtl .semi-tree-option-list .semi-tree-option-level-18 { padding-left: 0; padding-right: 348px; } .semi-rtl .semi-tree-option-list .semi-tree-option-level-19, .semi-popover-rtl .semi-tree-option-list .semi-tree-option-level-19 { padding-left: 0; padding-right: 368px; } .semi-rtl .semi-tree-option-list .semi-tree-option-level-20, .semi-popover-rtl .semi-tree-option-list .semi-tree-option-level-20 { padding-left: 0; padding-right: 388px; } .semi-rtl .semi-tree-option-list .semi-tree-option-label-empty, .semi-popover-rtl .semi-tree-option-list .semi-tree-option-label-empty { padding-left: auto; padding-right: 0; } .semi-rtl .semi-tree-option-list-block, .semi-popover-rtl .semi-tree-option-list-block { direction: rtl; } .semi-tree-select { box-sizing: border-box; border-radius: var(--semi-border-radius-small); border: 1px solid transparent; min-width: 80px; min-height: 32px; line-height: 32px; font-weight: 400; background-color: var(--semi-color-fill-0); display: inline-flex; align-items: center; position: relative; cursor: pointer; } .semi-tree-select:hover { background-color: var(--semi-color-fill-1); border: 1px solid transparent; } .semi-tree-select:focus { border: 1px solid var(--semi-color-focus-border); background-color: var(--semi-color-fill-0); outline: 0; } .semi-tree-select:active { background-color: var(--semi-color-fill-2); } .semi-tree-select-focus { background-color: var(--semi-color-fill-0); border: 1px solid var(--semi-color-focus-border); outline: 0; } .semi-tree-select-focus:hover { background-color: var(--semi-color-fill-0); border: 1px solid var(--semi-color-focus-border); outline: 0; } .semi-tree-select-focus:active { background-color: var(--semi-color-fill-2); } .semi-tree-select-warning { background-color: var(--semi-color-warning-light-default); border-color: var(--semi-color-warning-light-default); } .semi-tree-select-warning:hover { background-color: var(--semi-color-warning-light-hover); border-color: var(--semi-color-warning-light-hover); } .semi-tree-select-warning.semi-tree-select-focus { background-color: var(--semi-color-warning-light-default); border-color: var(--semi-color-warning); } .semi-tree-select-warning:active { background-color: var(--semi-color-warning-light-active); border-color: var(--semi-color-warning-light-active); } .semi-tree-select-error { background-color: var(--semi-color-danger-light-default); border-color: var(--semi-color-danger-light-default); } .semi-tree-select-error:hover { background-color: var(--semi-color-danger-light-hover); border-color: var(--semi-color-danger-light-hover); } .semi-tree-select-error.semi-tree-select-focus { background-color: var(--semi-color-danger-light-default); border-color: var(--semi-color-danger); } .semi-tree-select-error:active { background-color: var(--semi-color-danger-light-active); border-color: var(--semi-color-danger-light-active); } .semi-tree-select-disabled { cursor: not-allowed; user-select: none; background-color: var(--semi-color-disabled-fill); } .semi-tree-select-disabled:hover { background-color: var(--semi-color-disabled-fill); } .semi-tree-select-disabled .semi-tree-select-selection, .semi-tree-select-disabled .semi-tree-select-selection-placeholder { color: var(--semi-color-disabled-text); cursor: not-allowed; } .semi-tree-select-disabled .semi-tree-select-arrow, .semi-tree-select-disabled .semi-tree-select-prefix, .semi-tree-select-disabled .semi-tree-select-suffix { color: var(--semi-color-disabled-text); } .semi-tree-select-disabled .semi-tag { color: var(--semi-color-disabled-text); background-color: transparent; } .semi-tree-select-selection { font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; height: 100%; display: inline-flex; align-items: center; flex-wrap: wrap; flex-grow: 1; overflow: hidden; padding-left: 12px; padding-right: 0; cursor: pointer; color: var(--semi-color-text-0); position: relative; } .semi-tree-select-selection-content { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .semi-tree-select-selection-placeholder { color: var(--semi-color-text-2); } .semi-tree-select-selection .semi-tag-group { height: inherit; display: inline-flex; align-items: center; flex-wrap: wrap; } .semi-tree-select-selection .semi-tag { margin: 1px 2px; } .semi-tree-select-selection-TriggerSearchItem { position: absolute; max-width: calc(100% - 12px); text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .semi-tree-select-selection-TriggerSearchItem-placeholder { opacity: 0.6; } .semi-tree-select-selection-TriggerSearchItem-disabled { cursor: not-allowed; color: var(--semi-color-disabled-text); } .semi-tree-select-selection .semi-tree-select-triggerSingleSearch-wrapper { width: 100%; } .semi-tree-select-selection .semi-tree-select-triggerSingleSearch-wrapper .semi-tree-select-inputTrigger .semi-input-wrapper { background: transparent; } .semi-tree-select-selection .semi-tree-select-triggerSingleSearch-wrapper .semi-input-wrapper { height: 100%; width: 100%; border: none; background-color: transparent; } .semi-tree-select-selection .semi-tree-select-triggerSingleSearch-wrapper .semi-input-wrapper-focus { border: none; } .semi-tree-select-selection .semi-tree-select-triggerSingleSearch-wrapper .semi-input { padding-left: 0; padding-right: 0; } .semi-tree-select-selection .semi-tagInput { border: hidden; background: transparent; min-height: 30px; } .semi-tree-select-selection .semi-tagInput-small { min-height: 22px; } .semi-tree-select-selection .semi-tagInput-large { min-height: 38px; } .semi-tree-select-selection .semi-tagInput .semi-tagInput-wrapper { padding-left: 4px; padding-right: 4px; } .semi-tree-select-selection .semi-tagInput .semi-tagInput-wrapper .semi-input-wrapper .semi-input { padding-left: 0; } .semi-tree-select-selection .semi-tagInput .semi-tagInput-wrapper .semi-input-wrapper-default { margin-top: 1px; margin-bottom: 1px; } .semi-tree-select-selection .semi-tagInput .semi-tagInput-wrapper .semi-input-wrapper-large { margin-top: 1px; margin-bottom: 1px; } .semi-tree-select-multiple-tagInput-notEmpty .semi-tagInput { margin-left: -4px; } .semi-tree-select-multiple-tagInput-empty .semi-tagInput { margin-left: 4px; } .semi-tree-select-multiple { display: inline-flex; } .semi-tree-select-multiple .semi-tree-select-selection { padding-left: 4px; padding-right: 0; } .semi-tree-select-multiple .semi-tree-select-selection-placeholder { padding-left: 8px; } .semi-tree-select-small { min-height: 24px; line-height: 24px; } .semi-tree-select-large { min-height: 40px; line-height: 40px; } .semi-tree-select-large .semi-tree-select-selection { font-size: 16px; line-height: 22px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; } .semi-tree-select-arrow { display: inline-flex; align-items: center; flex-shrink: 0; height: 100%; justify-content: center; width: 32px; color: var(--semi-color-text-2); } .semi-tree-select-inset-label { display: inline; margin-right: 12px; font-weight: 600; font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; color: var(--semi-color-text-2); flex-shrink: 0; white-space: nowrap; } .semi-tree-select.semi-tree-select-with-prefix { display: inline-flex; align-items: center; } .semi-tree-select-arrow, .semi-tree-select-clearbtn { display: inline-flex; align-items: center; height: 100%; flex-shrink: 0; justify-content: center; width: 32px; color: var(--semi-color-text-2); } .semi-tree-select-clearbtn:hover { color: var(--semi-color-primary-hover); } .semi-tree-select-clearbtn:active { color: var(--semi-color-primary-active); } .semi-tree-select-prefix, .semi-tree-select-suffix { display: inline; display: flex; justify-content: center; align-items: center; } .semi-tree-select-prefix-text, .semi-tree-select-suffix-text { margin: 0px 12px; } .semi-tree-select-prefix-icon, .semi-tree-select-suffix-icon { color: var(--semi-color-text-2); margin: 0px 8px; } .semi-tree-select-prefix.semi-tree-select-with-suffix .semi-tree-select-selection, .semi-tree-select-suffix.semi-tree-select-with-suffix .semi-tree-select-selection { padding-right: 0px; } .semi-tree-select-prefix-search-wrapper, .semi-tree-select-suffix-search-wrapper { padding: 8px 12px; border-bottom: 1px solid var(--semi-color-fill-0); } .semi-tree-select-prefix-maxTagCount, .semi-tree-select-suffix-maxTagCount { color: var(--semi-color-text-2); font-size: 14px; } .semi-tree-select-prefix-popover, .semi-tree-select-suffix-popover { max-height: 300px; overflow: auto; } .semi-tree-select-popover .semi-tree-wrapper { height: 100%; display: flex; flex-direction: column; } .semi-tree-select-popover .semi-tree-wrapper .semi-tree-option-list { flex: 1; min-width: 230px; } .semi-tree-select-popover .semi-tree-wrapper .semi-tree-search-wrapper { border-bottom: 1px var(--semi-color-fill-0) solid; } .semi-tree-select-borderless:not(:focus-within):not(:hover) { background-color: transparent; border-color: transparent; } .semi-tree-select-borderless:not(:focus-within):not(:hover) .semi-tree-select-arrow { opacity: 0; } .semi-tree-select-borderless:focus-within:not(:active) { background-color: transparent; } .semi-tree-select-borderless.semi-tree-select-error:not(:focus-within) { border-color: var(--semi-color-danger); } .semi-tree-select-borderless.semi-tree-select-warning:not(:focus-within) { border-color: var(--semi-color-warning); } .semi-tree-select-borderless.semi-tree-select-error:focus-within { border-color: var(--semi-color-danger); } .semi-tree-select-borderless.semi-tree-select-warning:focus-within { border-color: var(--semi-color-warning); } .semi-rtl .semi-tree-select, .semi-portal-rtl .semi-tree-select { direction: rtl; } .semi-rtl .semi-tree-select .semi-tagInput .semi-input, .semi-portal-rtl .semi-tree-select .semi-tagInput .semi-input { padding-right: 0; } .semi-rtl .semi-tree-select-multiple-tagInput-notEmpty .semi-tagInput, .semi-portal-rtl .semi-tree-select-multiple-tagInput-notEmpty .semi-tagInput { margin-left: 0; margin-right: -4px; } .semi-rtl .semi-tree-select-multiple-tagInput-empty .semi-tagInput, .semi-portal-rtl .semi-tree-select-multiple-tagInput-empty .semi-tagInput { margin-left: 0; margin-right: 4px; } .semi-rtl .semi-tree-select-selection, .semi-portal-rtl .semi-tree-select-selection { padding-right: 12px; padding-left: 0; } .semi-rtl .semi-tree-select-multiple .semi-tree-select-selection, .semi-portal-rtl .semi-tree-select-multiple .semi-tree-select-selection { padding-left: 0; padding-right: 4px; } .semi-rtl .semi-tree-select-multiple .semi-tree-select-selection-placeholder, .semi-portal-rtl .semi-tree-select-multiple .semi-tree-select-selection-placeholder { padding-left: 0; padding-right: 8px; } .semi-rtl .semi-tree-select-inset-label, .semi-portal-rtl .semi-tree-select-inset-label { margin-right: 0; margin-left: 12px; } .semi-rtl .semi-tree-select-prefix.semi-tree-select-with-suffix .semi-tree-select-selection, .semi-rtl .semi-tree-select-suffix.semi-tree-select-with-suffix .semi-tree-select-selection, .semi-portal-rtl .semi-tree-select-prefix.semi-tree-select-with-suffix .semi-tree-select-selection, .semi-portal-rtl .semi-tree-select-suffix.semi-tree-select-with-suffix .semi-tree-select-selection { padding-right: auto; padding-left: 0; } .semi-rtl .semi-tree-select-popover, .semi-portal-rtl .semi-tree-select-popover { direction: rtl; } .semi-typography { color: var(--semi-color-text-0); font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; } .semi-typography.semi-typography-secondary { color: var(--semi-color-text-1); } .semi-typography.semi-typography-tertiary { color: var(--semi-color-text-2); } .semi-typography.semi-typography-quaternary { color: var(--semi-color-text-3); } .semi-typography.semi-typography-warning { color: var(--semi-color-warning); } .semi-typography.semi-typography-success { color: var(--semi-color-success); } .semi-typography.semi-typography-danger { color: var(--semi-color-danger); } .semi-typography.semi-typography-link { color: var(--semi-color-link); font-weight: 600; } .semi-typography.semi-typography-disabled { color: var(--semi-color-disabled-text); cursor: not-allowed; user-select: none; } .semi-typography.semi-typography-disabled.semi-typography-link { color: var(--semi-color-link); } .semi-typography-icon { margin-right: 4px; vertical-align: middle; color: inherit; } .semi-typography-small { font-size: 12px; line-height: 16px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; } .semi-typography code { border: 1px solid var(--semi-color-border); border-radius: 2px; color: var(--semi-color-text-2); background-color: var(--semi-color-fill-1); padding: 2px 4px; } .semi-typography mark { background-color: var(--semi-color-primary-light-default); } .semi-typography u { text-decoration: underline; text-decoration-skip-ink: auto; } .semi-typography del { text-decoration: line-through; } .semi-typography strong { font-weight: 600; } .semi-typography a { display: inline; color: var(--semi-color-link); cursor: pointer; text-decoration: none; } .semi-typography a:visited { color: var(--semi-color-link-visited); } .semi-typography a:hover { color: var(--semi-color-link-hover); } .semi-typography a:active { color: var(--semi-color-link-active); } .semi-typography a .semi-typography-link-underline:hover { border-bottom: 1px solid var(--semi-color-link-hover); margin-bottom: -1px; } .semi-typography a .semi-typography-link-underline:active { border-bottom: 1px solid var(--semi-color-link-active); margin-bottom: -1px; } .semi-typography-ellipsis-single-line { overflow: hidden; } .semi-typography-ellipsis-multiple-line { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .semi-typography-ellipsis-multiple-line.semi-typography-ellipsis-multiple-line-text { display: -webkit-inline-box; } .semi-typography-ellipsis-overflow-ellipsis { display: block; white-space: nowrap; text-overflow: ellipsis; } .semi-typography-ellipsis-overflow-ellipsis.semi-typography-ellipsis-overflow-ellipsis-text { display: inline-block; max-width: 100%; vertical-align: top; } .semi-typography-ellipsis-expand { display: inline; margin-left: 8px; } .semi-typography-action-copy { display: inline-flex; vertical-align: middle; padding: 0; margin-left: 4px; } .semi-typography a.semi-typography-action-copy-icon { display: inline-flex; } .semi-typography-action-copied { display: inline-flex; padding: 0; margin-left: 4px; color: var(--semi-color-text-2); } .semi-typography-action-copied .semi-icon { vertical-align: middle; color: var(--semi-color-success); } .semi-typography-paragraph { margin: 0; } h1.semi-typography, .semi-typography-h1.semi-typography { font-size: 32px; line-height: 44px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 600; margin: 0; } h1.semi-typography.semi-typography-h1-weight-light, .semi-typography-h1.semi-typography.semi-typography-h1-weight-light { font-weight: 200; } h1.semi-typography.semi-typography-h1-weight-regular, .semi-typography-h1.semi-typography.semi-typography-h1-weight-regular { font-weight: 400; } h1.semi-typography.semi-typography-h1-weight-medium, .semi-typography-h1.semi-typography.semi-typography-h1-weight-medium { font-weight: 500; } h1.semi-typography.semi-typography-h1-weight-semibold, .semi-typography-h1.semi-typography.semi-typography-h1-weight-semibold { font-weight: 600; } h1.semi-typography.semi-typography-h1-weight-bold, .semi-typography-h1.semi-typography.semi-typography-h1-weight-bold { font-weight: 700; } h2.semi-typography, .semi-typography-h2.semi-typography { font-size: 28px; line-height: 40px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 600; margin: 0; } h2.semi-typography.semi-typography-h2-weight-light, .semi-typography-h2.semi-typography.semi-typography-h2-weight-light { font-weight: 200; } h2.semi-typography.semi-typography-h2-weight-regular, .semi-typography-h2.semi-typography.semi-typography-h2-weight-regular { font-weight: 400; } h2.semi-typography.semi-typography-h2-weight-medium, .semi-typography-h2.semi-typography.semi-typography-h2-weight-medium { font-weight: 500; } h2.semi-typography.semi-typography-h2-weight-semibold, .semi-typography-h2.semi-typography.semi-typography-h2-weight-semibold { font-weight: 600; } h2.semi-typography.semi-typography-h2-weight-bold, .semi-typography-h2.semi-typography.semi-typography-h2-weight-bold { font-weight: 700; } h3.semi-typography, .semi-typography-h3.semi-typography { font-size: 24px; line-height: 32px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 600; margin: 0; } h3.semi-typography.semi-typography-h3-weight-light, .semi-typography-h3.semi-typography.semi-typography-h3-weight-light { font-weight: 200; } h3.semi-typography.semi-typography-h3-weight-regular, .semi-typography-h3.semi-typography.semi-typography-h3-weight-regular { font-weight: 400; } h3.semi-typography.semi-typography-h3-weight-medium, .semi-typography-h3.semi-typography.semi-typography-h3-weight-medium { font-weight: 500; } h3.semi-typography.semi-typography-h3-weight-semibold, .semi-typography-h3.semi-typography.semi-typography-h3-weight-semibold { font-weight: 600; } h3.semi-typography.semi-typography-h3-weight-bold, .semi-typography-h3.semi-typography.semi-typography-h3-weight-bold { font-weight: 700; } h4.semi-typography, .semi-typography-h4.semi-typography { font-size: 20px; line-height: 28px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 600; margin: 0; } h4.semi-typography.semi-typography-h4-weight-light, .semi-typography-h4.semi-typography.semi-typography-h4-weight-light { font-weight: 200; } h4.semi-typography.semi-typography-h4-weight-regular, .semi-typography-h4.semi-typography.semi-typography-h4-weight-regular { font-weight: 400; } h4.semi-typography.semi-typography-h4-weight-medium, .semi-typography-h4.semi-typography.semi-typography-h4-weight-medium { font-weight: 500; } h4.semi-typography.semi-typography-h4-weight-semibold, .semi-typography-h4.semi-typography.semi-typography-h4-weight-semibold { font-weight: 600; } h4.semi-typography.semi-typography-h4-weight-bold, .semi-typography-h4.semi-typography.semi-typography-h4-weight-bold { font-weight: 700; } h5.semi-typography, .semi-typography-h5.semi-typography { font-size: 18px; line-height: 24px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 600; margin: 0; } h5.semi-typography.semi-typography-h5-weight-light, .semi-typography-h5.semi-typography.semi-typography-h5-weight-light { font-weight: 200; } h5.semi-typography.semi-typography-h5-weight-regular, .semi-typography-h5.semi-typography.semi-typography-h5-weight-regular { font-weight: 400; } h5.semi-typography.semi-typography-h5-weight-medium, .semi-typography-h5.semi-typography.semi-typography-h5-weight-medium { font-weight: 500; } h5.semi-typography.semi-typography-h5-weight-semibold, .semi-typography-h5.semi-typography.semi-typography-h5-weight-semibold { font-weight: 600; } h5.semi-typography.semi-typography-h5-weight-bold, .semi-typography-h5.semi-typography.semi-typography-h5-weight-bold { font-weight: 700; } h6.semi-typography, .semi-typography-h6.semi-typography { font-size: 16px; line-height: 22px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 600; margin: 0; } h6.semi-typography.semi-typography-h6-weight-light, .semi-typography-h6.semi-typography.semi-typography-h6-weight-light { font-weight: 200; } h6.semi-typography.semi-typography-h6-weight-regular, .semi-typography-h6.semi-typography.semi-typography-h6-weight-regular { font-weight: 400; } h6.semi-typography.semi-typography-h6-weight-medium, .semi-typography-h6.semi-typography.semi-typography-h6-weight-medium { font-weight: 500; } h6.semi-typography.semi-typography-h6-weight-semibold, .semi-typography-h6.semi-typography.semi-typography-h6-weight-semibold { font-weight: 600; } h6.semi-typography.semi-typography-h6-weight-bold, .semi-typography-h6.semi-typography.semi-typography-h6-weight-bold { font-weight: 700; } p.semi-typography-extended, .semi-typography-paragraph.semi-typography-extended { line-height: 24px; } .semi-rtl .semi-typography, .semi-portal-rtl .semi-typography { direction: rtl; } .semi-rtl .semi-typography-link a, .semi-rtl .semi-typography a, .semi-portal-rtl .semi-typography-link a, .semi-portal-rtl .semi-typography a { display: inline-block; } .semi-rtl .semi-typography-icon, .semi-portal-rtl .semi-typography-icon { margin-right: auto; margin-left: 4px; } .semi-rtl .semi-typography-ellipsis-expand, .semi-portal-rtl .semi-typography-ellipsis-expand { margin-left: auto; } .semi-rtl .semi-typography-action-copy, .semi-portal-rtl .semi-typography-action-copy { margin-left: auto; margin-right: 4px; } .semi-rtl .semi-typography-action-copied, .semi-portal-rtl .semi-typography-action-copied { margin-left: auto; margin-right: 4px; } .semi-upload { display: flex; flex-wrap: wrap; } .semi-upload-disabled { cursor: not-allowed; } .semi-upload-disabled .semi-upload-file-card { cursor: not-allowed; } .semi-upload-disabled .semi-upload-file-card-close { cursor: not-allowed; } .semi-upload-disabled .semi-upload-drag-area { border: none; cursor: not-allowed; } .semi-upload-disabled .semi-upload-drag-area:hover { background-color: var(--semi-color-tertiary-light-default); } .semi-upload-disabled .semi-upload-drag-area-main-text, .semi-upload-disabled .semi-upload-drag-area-sub-text, .semi-upload-disabled .semi-upload-drag-area-icon { cursor: not-allowed; color: var(--semi-color-disabled-text); } .semi-upload-hidden-input { display: none; } .semi-upload-hidden-input-replace { display: none; } .semi-upload-add { display: flex; align-items: center; } .semi-upload[x-prompt-pos=right] .semi-upload-add { display: inline-flex; } .semi-upload[x-prompt-pos=right] .semi-upload-prompt { display: inline-flex; } .semi-upload[x-prompt-pos=bottom] .semi-upload-add { display: flex; } .semi-upload[x-prompt-pos=bottom] .semi-upload-prompt { display: flex; flex-basis: 100%; } .semi-upload[x-prompt-pos=bottom] .semi-upload-file-list { flex-basis: 100%; } .semi-upload[x-prompt-pos=left] .semi-upload-add { display: inline-flex; } .semi-upload[x-prompt-pos=left] .semi-upload-prompt { display: inline-flex; order: -1; } .semi-upload[x-prompt-pos=left] .semi-upload-file-list { order: 2; } .semi-upload-file-list { flex-basis: 100%; flex-shrink: 0; display: block; margin-top: 8px; margin-bottom: 8px; } .semi-upload-file-list-main { display: flex; flex-wrap: wrap; flex-shrink: 0; gap: 8px; margin-bottom: 8px; } .semi-upload-file-list-main p { display: flex; align-items: center; } .semi-upload-file-list-title { font-size: 12px; line-height: 16px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; color: var(--semi-color-text-2); margin-bottom: 4px; } .semi-upload-file-list-title-choosen { margin-right: 8px; } .semi-upload-file-list-title-clear { cursor: pointer; color: var(--semi-color-primary); } .semi-upload-file-card { border-radius: var(--semi-border-radius-medium); display: inline-flex; align-items: center; justify-content: space-between; height: 52px; width: 250px; background-color: var(--semi-color-fill-0); cursor: pointer; } .semi-upload-file-card:hover { background-color: var(--semi-color-fill-1); } .semi-upload-file-card a { text-decoration: none; } .semi-upload-file-card-preview { height: 36px; width: 36px; color: var(--semi-color-text-2); margin: 8px; display: flex; justify-content: center; align-items: center; border-radius: var(--semi-border-radius-small); flex-shrink: 0; } .semi-upload-file-card-preview img { width: 36px; height: 36px; object-fit: cover; } .semi-upload-file-card-preview-placeholder { background-color: rgba(var(--semi-grey-3), 1); color: rgba(var(--semi-white), 1); } .semi-upload-file-card-show-pointer { cursor: pointer; } .semi-upload-file-card-info { display: flex; align-items: center; } .semi-upload-file-card-info-main { display: flex; flex-wrap: wrap; flex: 1; } .semi-upload-file-card-info-main-text { display: flex; align-items: center; flex-basis: 100%; } .semi-upload-file-card-info-main-control { display: flex; } .semi-upload-file-card-info-name { width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 600; color: var(--semi-color-text-0); } .semi-upload-file-card-info-size { font-size: 12px; line-height: 16px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; margin-left: 8px; color: var(--semi-color-text-2); margin-top: 1px; } .semi-upload-file-card-info-replace { display: inline-flex; margin-left: 8px; color: var(--semi-color-text-2); } .semi-upload-file-card-info-validate-message { font-size: 12px; line-height: 16px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; display: flex; align-items: center; color: var(--semi-color-text-0); } .semi-upload-file-card-info-retry { font-size: 12px; line-height: 16px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; color: var(--semi-color-primary); cursor: pointer; margin-left: 8px; } .semi-upload-file-card-info .semi-progress { flex-basis: 100%; margin-top: 4px; } .semi-upload-file-card-close { margin-left: 8px; margin-right: 8px; flex-shrink: 0; } .semi-upload-file-card-replace { margin-left: 8px; width: 24px; flex-shrink: 0; } .semi-upload-file-card-icon-loading, .semi-upload-file-card-icon-error { font-size: 11px; margin-right: 2px; } .semi-upload-file-card-icon-error { position: relative; top: -1px; } .semi-upload-file-card-icon-loading { line-height: 0; } .semi-upload-file-card-icon-loading .semi-spin-wrapper svg { height: 11px; width: 11px; } .semi-upload-file-card-fail { background-color: var(--semi-color-danger-light-default); } .semi-upload-file-card-fail:hover { background-color: var(--semi-color-danger-light-hover); } .semi-upload-file-card-fail .semi-upload-file-card-info-validate-message { color: var(--semi-color-danger); } .semi-upload-picture { display: flex; } .semi-upload-picture[x-prompt-pos=bottom] { flex-direction: column; } .semi-upload-picture[x-prompt-pos=bottom] .semi-upload-prompt { order: 1; } .semi-upload-picture[x-prompt-pos=right] .semi-upload-prompt { order: 1; } .semi-upload-picture-add { background-color: var(--semi-color-fill-0); height: 96px; width: 96px; box-sizing: border-box; display: inline-flex; justify-content: center; align-items: center; border: 2px dashed var(--semi-color-border); color: var(--semi-color-tertiary); border-radius: var(--semi-border-radius-small); cursor: pointer; } .semi-upload-picture-add:hover { background-color: var(--semi-color-fill-1); } .semi-upload-picture-add:active { background-color: var(--semi-color-fill-2); } .semi-upload-picture-add-disabled { cursor: not-allowed; } .semi-upload-picture-add-disabled:hover { background-color: var(--semi-color-fill-0); } .semi-upload-picture-add-disabled:active { background-color: var(--semi-color-fill-0); } .semi-upload-picture-file-list { flex-basis: inherit; margin-top: 0; margin-bottom: 0; } .semi-upload-picture-file-card { display: flex; align-items: center; justify-content: center; height: 96px; width: 96px; border-radius: var(--semi-border-radius-small); position: relative; overflow: hidden; } .semi-upload-picture-file-card img { height: 96px; width: 96px; object-fit: cover; border-radius: var(--semi-border-radius-small); } .semi-upload-picture-file-card-close { visibility: hidden; display: inline-flex; position: absolute; top: 8px; right: 8px; border-radius: var(--semi-border-radius-circle); cursor: pointer; transition: all 0s; } .semi-upload-picture-file-card-icon-close { font-size: 16px; color: var(--semi-color-white); } .semi-upload-picture-file-card::before { visibility: hidden; background-color: var(--semi-color-overlay-bg); content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; } .semi-upload-picture-file-card-retry { visibility: hidden; background-color: var(--semi-color-white); width: 24px; height: 24px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--semi-color-primary); border-radius: var(--semi-border-radius-circle); display: flex; align-items: center; justify-content: center; cursor: pointer; } .semi-upload-picture-file-card-icon-retry { transform: scale(-1, 1); font-size: 13px; } .semi-upload-picture-file-card-replace { visibility: hidden; display: inline-flex; position: absolute; cursor: pointer; top: 50%; left: 50%; color: var(--semi-color-white); transform: translate3D(-50%, -50%, 0); } .semi-upload-picture-file-card-preview { visibility: hidden; display: inline-flex; position: absolute; cursor: pointer; top: 50%; left: 50%; transform: translate3D(-50%, -50%, 0); } .semi-upload-picture-file-card-preview-fallback { background-color: var(--semi-color-fill-0); border: 2px var(--semi-color-border); color: var(--semi-color-tertiary); border-radius: var(--semi-border-radius-small); } .semi-upload-picture-file-card-pic-info { display: inline-flex; box-sizing: border-box; justify-content: space-between; align-items: center; position: absolute; width: 100%; height: 24px; padding: 0 10px; bottom: 0; left: 0; color: var(--semi-color-white); font-size: 12px; font-weight: 600; background: linear-gradient(0deg, rgba(22, 22, 26, 0.3) 0%, rgba(22, 22, 26, 0) 77.08%); } .semi-upload-picture-file-card-icon-loading, .semi-upload-picture-file-card-icon-error { position: absolute; bottom: 6px; right: 6px; color: var(--semi-color-danger); } .semi-upload-picture-file-card-icon-loading { font-size: 14px; } .semi-upload-picture-file-card-show-pointer { cursor: pointer; } .semi-upload-picture-file-card-error { outline: 1px solid var(--semi-color-danger); } .semi-upload-picture-file-card:hover::before { visibility: visible; } .semi-upload-picture-file-card:hover .semi-upload-picture-file-card-close { visibility: visible; } .semi-upload-picture-file-card:hover .semi-upload-picture-file-card-replace { visibility: visible; } .semi-upload-picture-file-card:hover .semi-upload-picture-file-card-retry { visibility: visible; } .semi-upload-picture-file-card:hover .semi-upload-picture-file-card-preview { visibility: visible; } .semi-upload-picture-file-card-uploading::before { visibility: visible; } .semi-upload-picture-file-card .semi-progress-circle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .semi-upload-drag-area { border-radius: var(--semi-border-radius-small); border: 2px dashed var(--semi-color-border); width: 100%; padding: 12px; background-color: var(--semi-color-tertiary-light-default); display: flex; justify-content: center; align-items: center; flex-direction: column; cursor: pointer; } .semi-upload-drag-area:hover { background-color: var(--semi-color-primary-light-default); border-color: var(--semi-color-primary); } .semi-upload-drag-area-custom { border: none; padding: 0; background-color: inherit; } .semi-upload-drag-area-custom:hover { background-color: inherit; } .semi-upload-drag-area-legal { background-color: var(--semi-color-primary-light-default); border-color: var(--semi-color-primary); } .semi-upload-drag-area-legal .semi-upload-drag-area-sub-text { display: none; } .semi-upload-drag-area-icon { color: var(--semi-color-primary); } .semi-upload-drag-area-text { text-align: center; } .semi-upload-drag-area-main-text { cursor: pointer; font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; margin-bottom: 4px; color: var(--semi-color-text-0); } .semi-upload-drag-area-main-text:hover { color: var(--semi-color-text-0); } .semi-upload-drag-area-main-text:active { color: var(--semi-color-text-0); } .semi-upload-drag-area-sub-text { cursor: pointer; font-size: 12px; line-height: 16px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; color: var(--semi-color-text-0); } .semi-upload-drag-area-sub-text:hover { color: var(--semi-color-text-0); } .semi-upload-drag-area-sub-text:active { color: var(--semi-color-text-0); } .semi-upload-drag-area-tips { font-size: 12px; line-height: 16px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 600; } .semi-upload-drag-area-tips-legal { color: var(--semi-color-primary); } .semi-upload-validate-message { flex-basis: 100%; flex-shrink: 0; display: block; color: var(--semi-color-danger); } .semi-rtl .semi-upload, .semi-portal-rtl .semi-upload { direction: rtl; } .semi-rtl .semi-upload-file-list-title-choosen, .semi-portal-rtl .semi-upload-file-list-title-choosen { margin-right: 0; margin-left: 8px; } .semi-rtl .semi-upload-file-list-title-choosen, .semi-rtl .semi-upload-file-list-title-clear, .semi-portal-rtl .semi-upload-file-list-title-choosen, .semi-portal-rtl .semi-upload-file-list-title-clear { display: inline-block; } .semi-rtl .semi-upload-file-card-info-size, .semi-portal-rtl .semi-upload-file-card-info-size { margin-left: 0; margin-right: 8px; } .semi-rtl .semi-upload-file-card-info-retry, .semi-portal-rtl .semi-upload-file-card-info-retry { margin-left: 0; margin-right: 8px; } .semi-rtl .semi-upload-file-card-icon-loading, .semi-rtl .semi-upload-file-card-icon-error, .semi-portal-rtl .semi-upload-file-card-icon-loading, .semi-portal-rtl .semi-upload-file-card-icon-error { margin-right: 0; margin-left: 2px; } .semi-rtl .semi-upload-picture-file-card-close, .semi-portal-rtl .semi-upload-picture-file-card-close { right: auto; left: 8px; } .semi-rtl .semi-upload-picture-file-card .semi-progress-circle, .semi-portal-rtl .semi-upload-picture-file-card .semi-progress-circle { left: auto; right: 50%; transform: translate(50%, -50%); } .semi-rtl .semi-upload-picture-file-card-retry, .semi-portal-rtl .semi-upload-picture-file-card-retry { left: auto; right: 50%; transform: translate(50%, -50%); } .semi-rtl .semi-upload-picture-file-card-icon-loading, .semi-rtl .semi-upload-picture-file-card-icon-error, .semi-portal-rtl .semi-upload-picture-file-card-icon-loading, .semi-portal-rtl .semi-upload-picture-file-card-icon-error { right: 0; left: 6px; } .semi-icon { display: inline-block; font-style: normal; line-height: 0; text-align: center; text-transform: none; text-rendering: optimizeLegibility; fill: currentColor; } .semi-icon-extra-small { font-size: 8px; } .semi-icon-small { font-size: 12px; } .semi-icon-default { font-size: 16px; } .semi-icon-large { font-size: 20px; } .semi-icon-extra-large { font-size: 24px; } .semi-icon-spinning { animation: 0.6s linear infinite semi-icon-animation-rotate; animation-fill-mode: forwards; } @keyframes semi-icon-animation-rotate { from { transform: rotate(0); } to { transform: rotate(360deg); } } .semi-button.semi-button-with-icon { display: inline-flex; align-items: center; } .semi-button.semi-button-with-icon .semi-button-content { display: flex; align-items: center; justify-content: center; } .semi-button.semi-button-loading { pointer-events: none; cursor: not-allowed; } .semi-button.semi-button-loading .semi-button-content > svg { width: 16px; height: 16px; animation: 0.6s linear infinite semi-animation-rotate; animation-fill-mode: forwards; } .semi-button.semi-button-with-icon-only { padding-left: 8px; padding-right: 8px; padding-top: 8px; padding-bottom: 8px; justify-content: center; align-items: center; } .semi-button.semi-button-with-icon-only.semi-button-size-small { padding-left: 4px; padding-right: 4px; padding-top: 4px; padding-bottom: 4px; } .semi-button.semi-button-with-icon-only.semi-button-size-large { padding-left: 12px; padding-right: 12px; padding-top: 12px; padding-bottom: 12px; } .semi-button-content-left { margin-right: 8px; } .semi-button-content-right { margin-left: 8px; } .semi-rtl .semi-button, .semi-portal-rtl .semi-button { direction: rtl; padding-left: 12px; padding-right: 12px; } .semi-rtl .semi-button-size-small, .semi-portal-rtl .semi-button-size-small { padding-left: 12px; padding-right: 12px; } .semi-rtl .semi-button-size-large, .semi-portal-rtl .semi-button-size-large { padding-left: 16px; padding-right: 16px; } .semi-rtl .semi-button-group, .semi-portal-rtl .semi-button-group { direction: rtl; } .semi-rtl .semi-button-group > .semi-button, .semi-portal-rtl .semi-button-group > .semi-button { padding-left: 0; padding-right: 0; } .semi-rtl .semi-button-group > .semi-button .semi-button-content, .semi-portal-rtl .semi-button-group > .semi-button .semi-button-content { padding-left: 12px; padding-right: 12px; } .semi-rtl .semi-button-group > .semi-button-size-large .semi-button-content, .semi-portal-rtl .semi-button-group > .semi-button-size-large .semi-button-content { padding-left: 16px; padding-right: 16px; } .semi-rtl .semi-button-group > .semi-button-size-small .semi-button-content, .semi-portal-rtl .semi-button-group > .semi-button-size-small .semi-button-content { padding-left: 12px; padding-right: 12px; } .semi-rtl .semi-button-group > .semi-button.semi-button-with-icon-only, .semi-portal-rtl .semi-button-group > .semi-button.semi-button-with-icon-only { padding-left: 0; padding-right: 0; } .semi-rtl .semi-button-group > .semi-button.semi-button-with-icon-only .semi-button-content, .semi-portal-rtl .semi-button-group > .semi-button.semi-button-with-icon-only .semi-button-content { padding-left: 8px; padding-right: 8px; } .semi-rtl .semi-button-group > .semi-button.semi-button-with-icon-only.semi-button-size-small .semi-button-content, .semi-portal-rtl .semi-button-group > .semi-button.semi-button-with-icon-only.semi-button-size-small .semi-button-content { padding-left: 4px; padding-right: 4px; } .semi-rtl .semi-button-group > .semi-button.semi-button-with-icon-only.semi-button-size-large .semi-button-content, .semi-portal-rtl .semi-button-group > .semi-button.semi-button-with-icon-only.semi-button-size-large .semi-button-content { padding-left: 12px; padding-right: 12px; } .semi-rtl .semi-button-group > .semi-button:first-child, .semi-portal-rtl .semi-button-group > .semi-button:first-child { border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: var(--semi-border-radius-small); border-bottom-right-radius: var(--semi-border-radius-small); } .semi-rtl .semi-button-group > .semi-button:not(:last-child) .semi-button-content, .semi-portal-rtl .semi-button-group > .semi-button:not(:last-child) .semi-button-content { border-left: 1px var(--semi-color-border) solid; border-right: 0; } .semi-rtl .semi-button-group > .semi-button:last-child, .semi-portal-rtl .semi-button-group > .semi-button:last-child { border-top-right-radius: 0; border-bottom-right-radius: 0; border-top-left-radius: var(--semi-border-radius-small); border-bottom-left-radius: var(--semi-border-radius-small); } .semi-rtl .semi-button.semi-button-with-icon-only, .semi-portal-rtl .semi-button.semi-button-with-icon-only { padding-left: 8px; padding-right: 8px; } .semi-rtl .semi-button.semi-button-with-icon-only.semi-button-size-small, .semi-portal-rtl .semi-button.semi-button-with-icon-only.semi-button-size-small { padding-left: 4px; padding-right: 4px; } .semi-rtl .semi-button.semi-button-with-icon-only.semi-button-size-large, .semi-portal-rtl .semi-button.semi-button-with-icon-only.semi-button-size-large { padding-left: 12px; padding-right: 12px; } .semi-rtl .semi-button-content-left, .semi-portal-rtl .semi-button-content-left { margin-left: 8px; margin-right: 0; } .semi-rtl .semi-button-content-right, .semi-portal-rtl .semi-button-content-right { margin-right: 8px; margin-left: 0; } .semi-input-textarea-wrapper { box-sizing: border-box; display: inline-block; position: relative; width: 100%; border: 1px transparent solid; border-radius: var(--semi-border-radius-small); vertical-align: bottom; background-color: var(--semi-color-fill-0); transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); } .semi-input-textarea-wrapper:hover { background-color: var(--semi-color-fill-1); } .semi-input-textarea-wrapper-focus { background-color: var(--semi-color-fill-0); border: 1px var(--semi-color-focus-border) solid; } .semi-input-textarea-wrapper-focus:hover, .semi-input-textarea-wrapper-focus:active { background-color: var(--semi-color-fill-0); } .semi-input-textarea-wrapper:active { background-color: var(--semi-color-fill-2); } .semi-input-textarea-wrapper .semi-input-clearbtn { position: absolute; top: 0; min-width: 24px; color: var(--semi-color-text-2); right: 4px; height: 32px; } .semi-input-textarea-wrapper .semi-input-clearbtn > svg { pointer-events: none; } .semi-input-textarea-wrapper .semi-input-clearbtn:hover { cursor: pointer; } .semi-input-textarea-wrapper .semi-input-clearbtn:hover .semi-icon { color: var(--semi-color-primary-hover); } .semi-input-textarea-wrapper .semi-input-clearbtn-hidden { visibility: hidden; } .semi-input-textarea-wrapper-disabled, .semi-input-textarea-wrapper-readonly { cursor: not-allowed; color: var(--semi-color-disabled-text); background-color: var(--semi-color-disabled-fill); } .semi-input-textarea-wrapper-disabled:hover, .semi-input-textarea-wrapper-readonly:hover { background-color: var(--semi-color-disabled-fill); } .semi-input-textarea-wrapper-disabled::placeholder, .semi-input-textarea-wrapper-readonly::placeholder { color: var(--semi-color-disabled-text); } .semi-input-textarea-wrapper-readonly { cursor: text; } .semi-input-textarea-wrapper-error { background-color: var(--semi-color-danger-light-default); border-color: var(--semi-color-danger-light-default); } .semi-input-textarea-wrapper-error:hover { background-color: var(--semi-color-danger-light-hover); border-color: var(--semi-color-danger-light-hover); } .semi-input-textarea-wrapper-error.semi-input-textarea-wrapper-focus { background-color: var(--semi-color-danger-light-default); border-color: var(--semi-color-danger); } .semi-input-textarea-wrapper-error:active { background-color: var(--semi-color-danger-light-active); border-color: var(--semi-color-danger); } .semi-input-textarea-wrapper-warning { background-color: var(--semi-color-warning-light-default); border-color: var(--semi-color-warning-light-default); } .semi-input-textarea-wrapper-warning:hover { background-color: var(--semi-color-warning-light-hover); border-color: var(--semi-color-warning-light-hover); } .semi-input-textarea-wrapper-warning.semi-input-textarea-wrapper-focus { background-color: var(--semi-color-warning-light-default); border-color: var(--semi-color-warning); } .semi-input-textarea-wrapper-warning:active { background-color: var(--semi-color-warning-light-active); border-color: var(--semi-color-warning); } .semi-input-textarea { position: relative; resize: none; padding: 5px 12px; box-shadow: none; font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; background-color: transparent; border: 0 solid transparent; vertical-align: bottom; width: 100%; outline: none; cursor: text; box-sizing: border-box; color: var(--semi-color-text-0); } .semi-input-textarea:hover { border-color: transparent; } .semi-input-textarea::placeholder { color: var(--semi-color-text-2); } .semi-input-textarea-showClear { padding-right: 36px; } .semi-input-textarea-disabled, .semi-input-textarea-readonly { cursor: not-allowed; color: var(--semi-color-disabled-text); background-color: transparent; } .semi-input-textarea-disabled:hover, .semi-input-textarea-readonly:hover { background-color: transparent; } .semi-input-textarea-disabled::placeholder, .semi-input-textarea-readonly::placeholder { color: var(--semi-color-disabled-text); } .semi-input-textarea-readonly { cursor: text; } .semi-input-textarea-autosize { overflow: hidden; } .semi-input-textarea-counter { font-size: 12px; line-height: 16px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; display: flex; flex-direction: column; justify-content: center; padding: 3px 12px 5px 12px; min-height: 24px; text-align: right; color: var(--semi-color-text-2); } .semi-input-textarea-counter-exceed { color: var(--semi-color-danger); } .semi-input-textarea-borderless:not(:focus-within):not(:hover) { background-color: transparent; border-color: transparent; } .semi-input-textarea-borderless:focus-within:not(:active) { background-color: transparent; } .semi-input-textarea-borderless.semi-input-textarea-wrapper-error:not(:focus-within) { border-color: var(--semi-color-danger); } .semi-input-textarea-borderless.semi-input-textarea-wrapper-warning:not(:focus-within) { border-color: var(--semi-color-warning); } .semi-input-textarea-borderless.semi-input-textarea-wrapper-error .semi-input-textarea-counter { color: var(--semi-color-danger); } .semi-input-textarea-borderless.semi-input-textarea-wrapper-warning .semi-input-textarea-counter { color: var(--semi-color-warning); } .semi-rtl .semi-input-wrapper, .semi-portal-rtl .semi-input-wrapper { direction: rtl; } .semi-rtl .semi-input-wrapper__with-prefix .semi-input, .semi-portal-rtl .semi-input-wrapper__with-prefix .semi-input { padding-left: auto; padding-right: 0; } .semi-rtl .semi-input-wrapper__with-suffix .semi-input, .semi-portal-rtl .semi-input-wrapper__with-suffix .semi-input { padding-right: auto; padding-left: 0; } .semi-rtl .semi-input, .semi-portal-rtl .semi-input { padding-left: 12px; padding-right: 12px; } .semi-rtl .semi-input-inset-label, .semi-portal-rtl .semi-input-inset-label { margin-right: auto; margin-left: 12px; } .semi-rtl .semi-input-clearbtn + .semi-rtl .semi-input-suffix + .semi-input-suffix-text, .semi-rtl .semi-input-clearbtn + .semi-portal-rtl .semi-input-suffix + .semi-input-suffix-text, .semi-portal-rtl .semi-input-clearbtn + .semi-rtl .semi-input-suffix + .semi-input-suffix-text, .semi-portal-rtl .semi-input-clearbtn + .semi-portal-rtl .semi-input-suffix + .semi-input-suffix-text { margin-left: auto; margin-right: 0; } .semi-rtl .semi-input-clearbtn + .semi-rtl .semi-input-suffix + .semi-input-suffix-icon, .semi-rtl .semi-input-clearbtn + .semi-portal-rtl .semi-input-suffix + .semi-input-suffix-icon, .semi-portal-rtl .semi-input-clearbtn + .semi-rtl .semi-input-suffix + .semi-input-suffix-icon, .semi-portal-rtl .semi-input-clearbtn + .semi-portal-rtl .semi-input-suffix + .semi-input-suffix-icon { margin-left: auto; margin-right: 0; } .semi-rtl .semi-input-append, .semi-portal-rtl .semi-input-append { border-left: 0; border-right: 1px transparent solid; } .semi-rtl .semi-input-prepend, .semi-portal-rtl .semi-input-prepend { border-right: 0; border-left: 1px transparent solid; } .semi-rtl .semi-input-group .semi-select:not(:last-child)::after, .semi-rtl .semi-input-group .semi-cascader:not(:last-child)::after, .semi-rtl .semi-input-group .semi-tree-select:not(:last-child)::after, .semi-rtl .semi-input-group > .semi-input-wrapper:not(:last-child)::after, .semi-portal-rtl .semi-input-group .semi-select:not(:last-child)::after, .semi-portal-rtl .semi-input-group .semi-cascader:not(:last-child)::after, .semi-portal-rtl .semi-input-group .semi-tree-select:not(:last-child)::after, .semi-portal-rtl .semi-input-group > .semi-input-wrapper:not(:last-child)::after { right: auto; left: -1px; } .semi-rtl .semi-input-group .semi-input-number:not(:last-child)::after, .semi-portal-rtl .semi-input-group .semi-input-number:not(:last-child)::after { right: auto; left: -1px; } .semi-rtl .semi-input-textarea-wrapper, .semi-portal-rtl .semi-input-textarea-wrapper { direction: rtl; } .semi-rtl .semi-input-textarea-counter, .semi-portal-rtl .semi-input-textarea-counter { text-align: left; } .semi-rtl .semi-input-textarea-showClear, .semi-portal-rtl .semi-input-textarea-showClear { padding-right: 0; padding-left: 36px; } ================================================ FILE: app/home/service/components/homeSummary.tsx ================================================ import { Card, Tag, Typography } from "@douyinfe/semi-ui"; import Image from "next/image"; import { z } from "zod"; import { SSEDataFetch } from "@/app/home/utils/sseFetch"; type HomeCardProps = { type: string; status: boolean; value: string; img: string; }; const HomeCard = ({ type, status, value, img }: HomeCardProps) => { const { Title } = Typography; return (
{type} <Tag style={{ marginLeft: "5px", }} size="small" shape="circle" color={status ? "green" : "amber"} > {" "} {status ? "运行中" : "已关闭"}{" "} </Tag>
{value}
{"air"}
); }; const homeCardDataSchema = z.object({ AirConditioner: z.object({ state: z.boolean().nullable(), temp: z.number().nullable(), }), Humidifier: z.object({ state: z.boolean().nullable(), humidity: z.number().nullable(), }), AirPurifier: z.object({ state: z.boolean().nullable(), pm25: z.number().nullable(), }), Light: z.object({ state: z.boolean().nullable(), brightness: z.number().nullable(), }), }); export default function HomeSummary() { const homeInfoGetData = SSEDataFetch( process.env.NEXT_PUBLIC_GO_API_BASE_URL + "/GetHomeDataSSE", ); const homeCardValidation = homeCardDataSchema.safeParse( homeInfoGetData?.homeData, ); return ( <>
); } ================================================ FILE: app/home/service/components/paySummary.tsx ================================================ import { Card, Progress, Typography } from "@douyinfe/semi-ui"; import { getDaysBetweenDates } from "@/app/home/utils/functions"; type PayCardProps = { service: string; expireDate: string; }; function PayDetailCard(props: PayCardProps) { const { service, expireDate } = props; // 获取今天的日期 const today = new Date().toISOString().split("T")[0]; const daysRemain: number = getDaysBetweenDates(today!.toString(), expireDate); const remainPercent: string = ((daysRemain / 365) * 100).toFixed(2); const { Title } = Typography; return (
{service} <div style={{ fontSize: "0.8rem", color: "rgba(var(--semi-grey-7), 1)", }} > {daysRemain}天 </div> {remainPercent}%
); } export default function PaySummary() { return (
); } ================================================ FILE: app/home/service/components/serviceList.tsx ================================================ import { Card, Progress, Tag, Typography } from "@douyinfe/semi-ui"; import { z } from "zod"; import { SSEDataFetch } from "@/app/home/utils/sseFetch"; type ServiceCardProps = { type: string; service: string; status: boolean; ping: number; availability: number; }; function ServerDetailCard(props: ServiceCardProps) { const { type, service, ping, status, availability } = props; const { Title } = Typography; return (
{type} {!status && ( {" "} Offline{" "} )}
{service} <Title heading={6} style={{ fontSize: "0.8rem", color: status ? "rgba(var(--semi-green-1), 1)" : "rgba(var(--semi-red-1), 1)", }} > {ping}ms {availability}%
); } const serviceInfoSchema = z.object({ xui: z.object({ status: z.boolean(), uptime: z.string(), ping: z.number(), }), v2raya: z.object({ status: z.boolean(), uptime: z.string(), ping: z.number(), }), proxy: z.object({ status: z.boolean(), uptime: z.string(), ping: z.number(), }), nginx: z.object({ status: z.boolean(), uptime: z.string(), ping: z.number(), }), home: z.object({ status: z.boolean(), uptime: z.string(), ping: z.number(), }), netflix: z.object({ status: z.boolean(), uptime: z.string(), ping: z.number(), }), }); export default function ServiceList() { const serviceListGetData = SSEDataFetch( process.env.NEXT_PUBLIC_GO_API_BASE_URL + "/GetUptimeDataSSE", ); const uptimeValidation = serviceInfoSchema.safeParse( serviceListGetData?.uptimeData, ); return ( <>
); } ================================================ FILE: app/home/service/components/serviceSummary.tsx ================================================ import { Card, Descriptions, Progress } from "@douyinfe/semi-ui"; import { z } from "zod"; import { getDaysBetweenDates } from "@/app/home/utils/functions"; import { SSEDataFetch } from "@/app/home/utils/sseFetch"; type ServiceCardProps = { title: string; totalValue: number; runningValue: number; }; export function ServiceCard(props: ServiceCardProps) { const { title, totalValue, runningValue } = props; const data = [ { key: title, value: runningValue ? runningValue + "/" + totalValue : "0/0", style: { paddingRight: "0px" }, }, ]; return (
(
{percent}%
)} stroke={ Number(((runningValue / totalValue) * 100).toFixed(0)) < 80 ? "rgba(var(--semi-orange-5), 1)" : Number(((runningValue / totalValue) * 100).toFixed(0)) < 50 ? "rgba(var(--semi-red-5), 1)" : "rgba(var(--semi-green-5), 1)" } type="circle" strokeWidth={10} aria-label={title} />
); } const serviceSummarySchema = z.object({ serverCount: z.number(), errorCount: z.number(), dockerStatus: z.object({ ServerCount: z.number(), ErrorServer: z.number(), DockerCount: z.number(), ErrorDocker: z.number(), }), }); export default function ServiceSummary() { const serviceGetData = SSEDataFetch( process.env.NEXT_PUBLIC_GO_API_BASE_URL + "/GetDockerMonitorSSE", ); const serviceSummaryValidation = serviceSummarySchema.safeParse( serviceGetData?.dockerData, ); const today = new Date().toISOString().split("T")[0]; const date2: string = "2024-12-16"; const daysBetween: number = getDaysBetweenDates(today!.toString(), date2); return (
); } ================================================ FILE: app/home/service/page.tsx ================================================ import ServiceContent from "@/app/home/service/service"; export const metadata = { title: "服务 | HomeDash", }; export default function Service() { return ; } ================================================ FILE: app/home/service/service.tsx ================================================ "use client"; import { Typography } from "@douyinfe/semi-ui"; import HomeSummary from "@/app/home/service/components/homeSummary"; import PaySummary from "@/app/home/service/components/paySummary"; import ServiceList from "@/app/home/service/components/serviceList"; import ServiceSummary from "@/app/home/service/components/serviceSummary"; export default function ServiceContent() { const { Title } = Typography; return ( <> 🛠️ 核心服务状态 ); } ================================================ FILE: app/home/style.css ================================================ .newDescription { padding: 10px; border-radius: 5px; background-color: transparent; transition: border-radius 0.5s ease, background-color 0.3s ease; } .newDescription:hover { border-radius: 15px; background-color: rgba(var(--semi-grey-0), 1); } .serverDescription{ padding: 20px; margin-left: 20px; margin-right: 20px; margin-bottom: 10px; border-radius: 10px; background-color: rgba(var(--semi-grey-0), 1); } .xuiDescription { padding: 20px; margin-left: 20px; margin-right: 20px; border-radius: 10px; } .semi-descriptions-double-medium .semi-descriptions-item { padding-right: 20px; } .fixedButton { position: fixed; bottom: 20px; right: 20px; z-index: 100; display: flex; flex-direction: row; backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); background-color: rgba(var(--semi-grey-0), 0.2); padding: 3px; border-radius: 20px; } .responsive-divider { display: flex; } @media (max-width: 768px) { .responsive-divider { display: none; } } ================================================ FILE: app/home/surge/components/surgeCard.tsx ================================================ import React from "react"; type SurgeCardProps = { children?: React.ReactNode; style?: React.CSSProperties; }; function SurgeCard({ children, style }: SurgeCardProps) { return (
{children}
); } export default SurgeCard; ================================================ FILE: app/home/surge/page.tsx ================================================ import SurgeContent from "@/app/home/surge/surge"; export const metadata = { title: "Surge | HomeDash", }; export default function Service() { return ; } ================================================ FILE: app/home/surge/surge.tsx ================================================ "use client"; import { Typography } from "@douyinfe/semi-ui"; import React from "react"; import SurgeStatus from "@/app/home/surge/surgeStatus"; import SurgeTraffic from "@/app/home/surge/surgeTraffic"; export default function SurgeContent() { const { Title } = Typography; return ( <> 🎛️️ Surge 网关状态 ); } ================================================ FILE: app/home/surge/surgeStatus.tsx ================================================ import { IconActivity, IconDisc, IconSafe, IconSignal, } from "@douyinfe/semi-icons"; import { Divider, Progress, Typography } from "@douyinfe/semi-ui"; import React from "react"; import SurgeCard from "@/app/home/surge/components/surgeCard"; import { surgeTrafficDataSchema } from "@/app/home/surge/surgeTraffic"; import { SSEDataFetch } from "@/app/home/utils/sseFetch"; function SurgeStatus() { const { Title, Text } = Typography; const surgeGetData = SSEDataFetch( process.env.NEXT_PUBLIC_GO_API_BASE_URL + "/GetSurgeInfoSSE", ); const surgeValidation = surgeTrafficDataSchema.safeParse( surgeGetData?.surgeInfo, ); return (
{surgeValidation.success ? surgeValidation.data.system_proxy_status ? "已启用" : "已禁用" : "..."}
系统代理
{surgeValidation.success ? surgeValidation.data.enhanced_mode_status ? "已开启" : "已关闭" : "..."}
增强模式
设备数
{surgeValidation.success ? surgeValidation.data.connected_device : "..."} 已连接 在线时长
{surgeValidation.success ? surgeValidation.data.traffic.start_days.toFixed(1) : "..."} Days 已开启
); } export default SurgeStatus; ================================================ FILE: app/home/surge/surgeTraffic.tsx ================================================ import { Descriptions, Skeleton, Typography } from "@douyinfe/semi-ui"; import React from "react"; import { z } from "zod"; import { SSEDataFetch } from "@/app/home/utils/sseFetch"; export const surgeTrafficDataSchema = z.object({ traffic: z.object({ out_current_speed: z.number(), in_current_speed: z.number(), direct: z.number(), proxy: z.number(), total: z.number(), start_days: z.number(), }), mac_mini_info: z.object({ tcp_conn_count: z.number(), udp_conn_count: z.number(), process_count: z.number(), }), connected_device: z.number(), enhanced_mode_status: z.boolean(), system_proxy_status: z.boolean(), now_node: z.string(), node_latency: z.number(), }); function SurgeTraffic() { const { Title, Text } = Typography; const surgeGetData = SSEDataFetch( process.env.NEXT_PUBLIC_GO_API_BASE_URL + "/GetSurgeInfoSSE", ); const surgeValidation = surgeTrafficDataSchema.safeParse( surgeGetData?.surgeInfo, ); const placeholder = (
); const surgeTrafficDataOne = [ { key: "上传速度", value: surgeValidation.success ? (
{surgeValidation.data.traffic.out_current_speed.toFixed(2)} Mb/s
) : ( ), }, { key: "下载速度", value: surgeValidation.success ? (
{surgeValidation.data.traffic.in_current_speed.toFixed(2)} Mb/s
) : ( ), }, { key: "TCP连接数", value: surgeValidation.success ? (
{surgeValidation.data.mac_mini_info.tcp_conn_count}
) : ( ), }, { key: "UDP连接数", value: surgeValidation.success ? (
{surgeValidation.data.mac_mini_info.udp_conn_count}
) : ( ), }, { key: "进程数", value: surgeValidation.success ? (
{surgeValidation.data.mac_mini_info.process_count}
) : ( ), }, ]; const surgeTrafficDataTwo = [ { key: "节点", value: surgeValidation.success ? ( {surgeValidation.data.now_node} ) : ( ), }, { key: "延迟", value: surgeValidation.success ? (
{surgeValidation.data.node_latency.toFixed(2)} ms
) : ( ), }, { key: "流量占比", value: surgeValidation.success ? (
{surgeValidation.data.traffic.direct.toFixed(2) + "GB"}
{surgeValidation.data.traffic.proxy.toFixed(2) + "GB"}
) : ( ), }, ]; return (
); } export default SurgeTraffic; ================================================ FILE: app/home/utils/fixedButton.tsx ================================================ "use client"; import { IconDesktop, IconMoon, IconSun } from "@douyinfe/semi-icons"; import { Button } from "@douyinfe/semi-ui"; import { useTheme } from "next-themes"; import { useEffect, useState } from "react"; const FixedButton = () => { const { theme, setTheme } = useTheme(); const [mounted, setMounted] = useState(false); const switchMode = (theme: string) => { setTheme(theme); }; // 避免按钮闪烁的问题 useEffect(() => { setMounted(true); }, []); if (!mounted) { return null; } return (
); }; export default FixedButton; ================================================ FILE: app/home/utils/functions.tsx ================================================ export function getDaysBetweenDates(date1: string, date2: string): number { const oneDay = 24 * 60 * 60 * 1000; // 一天的毫秒数 const firstDate = new Date(date1); const secondDate = new Date(date2); // 计算两个日期之间的天数差异 return Math.round( Math.abs((firstDate.getTime() - secondDate.getTime()) / oneDay), ); } ================================================ FILE: app/home/utils/leftSide.tsx ================================================ import { IconSemiLogo } from "@douyinfe/semi-icons"; import { IconBanner, IconList, IconProgress, IconToken, } from "@douyinfe/semi-icons-lab"; import { Nav } from "@douyinfe/semi-ui"; import { useRouter } from "next/navigation"; import { usePathname } from "next/navigation"; import { useCallback, useEffect, useMemo } from "react"; import { useSSEContext } from "@/app/home/utils/sseContext"; const routerMap: Record = { home: "/home/main", network: "/home/xui", service: "/home/service", surge: "/home/surge", }; function LeftSide() { const pathname = usePathname(); const router = useRouter(); const selectedKeys = useMemo(() => { const keys = Object.keys(routerMap); const selectedKey = keys.find((key) => pathname.startsWith(routerMap[key] as string), ); return selectedKey ? [selectedKey] : []; }, [pathname]); // 从 SSEContext 中获取侧边栏状态及其 setter 函数 const { isNavCollapsed, setNavCollapsed } = useSSEContext(); const toggleNav = useCallback( (isCollapse: boolean) => { setNavCollapsed(isCollapse); }, [setNavCollapsed], ); const navWidth = isNavCollapsed ? 60 : 220; useEffect(() => { const handleResize = () => { if (window.innerWidth < 768) { toggleNav(true); } }; window.addEventListener("resize", handleResize); return () => { window.removeEventListener("resize", handleResize); }; }, [toggleNav]); useEffect(() => { router.prefetch("/home/main"); router.prefetch("/home/xui"); router.prefetch("/home/service"); router.prefetch("/home/surge"); }, [router]); return (
); } export default LeftSide; ================================================ FILE: app/home/utils/sseContext.tsx ================================================ "use client"; import React, { createContext, type ReactNode, useContext, useReducer, useState, } from "react"; type SpeedData = { speed: number }; interface SSEContextType { SSEConnect: boolean; setSSEConnect: (value: boolean) => void; HomeNetworkSpeedList: SpeedData[]; setHomeNetworkSpeedList: (value: SpeedData[]) => void; ProxyNetworkSpeedList: SpeedData[]; setProxyNetworkSpeedList: (value: SpeedData[]) => void; isNavCollapsed: boolean; setNavCollapsed: (value: boolean) => void; } const SSEContext = createContext({ SSEConnect: false, setSSEConnect: () => {}, HomeNetworkSpeedList: [], setHomeNetworkSpeedList: () => {}, ProxyNetworkSpeedList: [], setProxyNetworkSpeedList: () => {}, isNavCollapsed: false, setNavCollapsed: () => {}, }); const initialState: { SSEConnect: boolean; HomeNetworkSpeedList: SpeedData[]; ProxyNetworkSpeedList: SpeedData[]; isNavCollapsed: boolean; } = { SSEConnect: false, HomeNetworkSpeedList: [], ProxyNetworkSpeedList: [], isNavCollapsed: false, }; type Actions = | { type: "SET_SSE_CONNECT"; payload: boolean } | { type: "SET_HOME_NETWORK_SPEED_LIST"; payload: SpeedData[] } | { type: "SET_PROXY_NETWORK_SPEED_LIST"; payload: SpeedData[] } | { type: "SET_NAV_COLLAPSED"; payload: boolean }; const reducer = (state: typeof initialState, action: Actions) => { switch (action.type) { case "SET_SSE_CONNECT": return { ...state, SSEConnect: action.payload }; case "SET_HOME_NETWORK_SPEED_LIST": return { ...state, HomeNetworkSpeedList: action.payload }; case "SET_PROXY_NETWORK_SPEED_LIST": return { ...state, ProxyNetworkSpeedList: action.payload }; case "SET_NAV_COLLAPSED": return { ...state, isNavCollapsed: action.payload }; default: return state; } }; export const useSSEContext = () => { return useContext(SSEContext); }; interface SSEContextProviderProps { children: ReactNode; } export const SSEConnectProvider: React.FC = ({ children, }) => { const [state, dispatch] = useReducer(reducer, initialState); const setSSEConnect = (value: boolean) => { dispatch({ type: "SET_SSE_CONNECT", payload: value }); }; const setHomeNetworkSpeedList = (value: SpeedData[]) => { dispatch({ type: "SET_HOME_NETWORK_SPEED_LIST", payload: value }); }; const setProxyNetworkSpeedList = (value: SpeedData[]) => { dispatch({ type: "SET_PROXY_NETWORK_SPEED_LIST", payload: value }); }; // For nav collapsed const [isNavCollapsed, setIsNavCollapsed] = useState(() => { const savedState = typeof window !== "undefined" ? localStorage.getItem("navCollapsed") : null; return savedState ? (JSON.parse(savedState) as boolean) : false; }); const setNavCollapsed = (value: boolean) => { setIsNavCollapsed(value); localStorage.setItem("navCollapsed", JSON.stringify(value)); }; return ( {children} ); }; ================================================ FILE: app/home/utils/sseFetch.tsx ================================================ "use client"; import useSWRSubscription, { type SWRSubscriptionOptions, } from "swr/subscription"; type LooseObject = { [key: string]: any; }; export function SSEDataFetch(url: string): LooseObject | undefined { const { data } = useSWRSubscription( url, (key: string | URL, { next }: SWRSubscriptionOptions) => { const source = new EventSource(key); source.onmessage = (event) => { const parsedData = JSON.parse(event.data); next(null, parsedData); }; source.onerror = () => next(new Error("EventSource error")); return () => source.close(); }, ); return data; } ================================================ FILE: app/home/xui/components/xuiDetail.tsx ================================================ import { Descriptions, Skeleton, Typography } from "@douyinfe/semi-ui"; import React from "react"; import { z } from "zod"; import { SSEDataFetch } from "@/app/home/utils/sseFetch"; const xuiDetailDataSchema = z.object({ user_count: z.number(), up_total: z.number(), down_total: z.number(), }); export default function XuiSummary() { const { Title } = Typography; const xuiGetData = SSEDataFetch( process.env.NEXT_PUBLIC_GO_API_BASE_URL + "/GetXuiDataSSE", ); const xuiDetailValidation = xuiDetailDataSchema.safeParse( xuiGetData?.xuiData, ); const placeholder = (
); const networkSummaryData = [ { key: "状态", value: xuiDetailValidation.success ? ( 在线 ) : ( 离线 ), }, { key: "代理用户数", value: xuiDetailValidation.success ? ( xuiDetailValidation.data.user_count ) : ( ), }, { key: "总上传流量", value: xuiDetailValidation.success ? ( xuiDetailValidation.data.up_total.toFixed(2) + "GB" ) : ( ), }, { key: "总下载流量", value: xuiDetailValidation.success ? ( xuiDetailValidation.data.down_total.toFixed(2) + "GB" ) : ( ), }, ]; return ( <> ); } ================================================ FILE: app/home/xui/components/xuiTable.tsx ================================================ import { Progress, Table, Tag } from "@douyinfe/semi-ui"; import React from "react"; import { z } from "zod"; import { SSEDataFetch } from "@/app/home/utils/sseFetch"; const xuiDataSchema = z.object({ user_list: z.array( z.object({ remark: z.string(), enable: z.boolean(), protocol: z.string(), up: z.number(), down: z.number(), }), ), user_count: z.number(), up_total: z.number(), down_total: z.number(), }); export default function XuiTable() { const xuiTableGetData = SSEDataFetch( process.env.NEXT_PUBLIC_GO_API_BASE_URL + "/GetXuiDataSSE", ); const xuiValidation = xuiDataSchema.safeParse(xuiTableGetData?.xuiData); const columns = [ { title: "名称", dataIndex: "remark", width: "15%", }, { title: "启用状态", dataIndex: "enable", width: "20%", render: (enable: boolean) => { return enable ? ( 启用 ) : ( 禁用 ); }, }, { title: "协议", dataIndex: "protocol", width: "20%", render: (protocol: string) => { return ( {protocol} ); }, }, { title: "上传流量", dataIndex: "up", render: (up: number) => { return up.toFixed(2) + "GB"; }, }, { title: "下载流量", dataIndex: "down", render: (down: number) => { return (
80 ? "rgba(var(--semi-red-5), 1)" : (down / xuiValidation.data.down_total) * 100 > 50 ? "rgba(var(--semi-orange-5), 1)" : "rgba(var(--semi-green-5), 1)" : "rgba(var(--semi-red-5), 1)" } percent={ xuiValidation.success ? (down / xuiValidation.data.down_total) * 100 : 0 } type="circle" size="small" /> {down.toFixed(2) + "GB"}
); }, }, ]; return (
); } ================================================ FILE: app/home/xui/page.tsx ================================================ import XuiContent from "@/app/home/xui/xui"; export const metadata = { title: "用户列表 | HomeDash", }; export default function NetWork() { return ; } ================================================ FILE: app/home/xui/xui.tsx ================================================ "use client"; import { Typography } from "@douyinfe/semi-ui"; import React from "react"; import XuiSummary from "@/app/home/xui/components/xuiDetail"; import XuiTable from "@/app/home/xui/components/xuiTable"; export default function XuiContent() { const { Title } = Typography; return ( <> 🚀 代理用户列表 ); } ================================================ FILE: app/layout.tsx ================================================ import { Inter } from "next/font/google"; import Script from "next/script"; import React from "react"; import { SSEConnectProvider } from "@/app/home/utils/sseContext"; import { Providers } from "./providers"; const inter = Inter({ subsets: ["latin"] }); export default function RootLayout({ children, }: { children: React.ReactNode; }) { return (