Showing preview only (739K chars total). Download the full file or copy to clipboard to get everything.
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
================================================
<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
<component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$">
<excludeFolder url="file://$MODULE_DIR$/.tmp" />
<excludeFolder url="file://$MODULE_DIR$/temp" />
<excludeFolder url="file://$MODULE_DIR$/tmp" />
<excludeFolder url="file://$MODULE_DIR$/.idea/copilot/chatSessions" />
</content>
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>
================================================
FILE: .idea/inspectionProfiles/Project_Default.xml
================================================
<component name="InspectionProjectProfileManager">
<profile version="1.0">
<option name="myName" value="Project Default" />
<inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
</profile>
</component>
================================================
FILE: .idea/modules.xml
================================================
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/hamster-home.iml" filepath="$PROJECT_DIR$/.idea/hamster-home.iml" />
</modules>
</component>
</project>
================================================
FILE: .idea/vcs.xml
================================================
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="" vcs="Git" />
</component>
</project>
================================================
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
================================================
<div align="center">
<strong>项目因技术栈选择问题已归档，重构中...</strong>
<br>
<strong>新重构 HomeDash 地址: https://dash.buycoffee.top</strong>
<br>
</div>
<h1 align="center">HomeDash</h1>
<div align="center">
<strong>HomeDash 是一个基于 Next.js 和 Semi-design 的仪表盘</strong>
<br>
<strong>Demo地址: https://home.buycoffee.top</strong>
</div>
## 一键部署前端
[](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
```
## 同时也兼容了黑色模式！
================================================
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 (
<Layout>
<Sider
style={{
marginRight: isNavCollapsed ? "60px" : "220px",
}}
>
<LeftSide />
</Sider>
<Layout>
<Content>{children}</Content>
</Layout>
<FixedButton />
</Layout>
);
}
================================================
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 (
<div
style={{
gap: "3px",
display: "flex",
flexDirection: "column",
justifyContent: "center",
...style, // This is the style prop that is passed in from the parent component
}}
>
<Text type="tertiary">{keyString}</Text>
<Title heading={4}>{value}</Title>
</div>
);
}
================================================
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 (
<Card
style={{
flex: "1",
minWidth: "220px",
margin: "10px",
borderRadius: "10px",
border: "none",
// backgroundColor: props.backgroundColor,
backgroundImage: backgroundColor,
}}
>
<div
style={{
display: "flex",
flexDirection: "column",
justifyContent: "start",
}}
>
<div
style={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
}}
>
<div
style={{
display: "flex",
justifyContent: "start",
alignItems: "center",
}}
>
{props.icon}
<Title
heading={6}
style={{
marginLeft: "5px",
}}
>
{props.title}
</Title>
</div>
<div
style={{
display: "flex",
justifyContent: "start",
alignItems: "center",
}}
>
<div
style={{
marginRight: "5px",
fontWeight: "bold",
fontSize: "0.8rem",
}}
>
{props.moreInfo}
</div>
{props.moreIcon}
</div>
</div>
<div
style={{
display: "flex",
justifyContent: "start",
alignItems: "baseline",
}}
>
<Title
style={{
marginTop: "15px",
marginBottom: "10px",
}}
heading={1}
>
{props.value.toFixed(2)}
</Title>
<Title
style={{
marginLeft: "3px",
fontWeight: "lighter",
}}
heading={6}
>
{props.unit}
</Title>
</div>
<div
style={{
display: "flex",
justifyContent: "space-between",
alignItems: "baseline",
}}
>
<div
style={{
fontWeight: "bold",
}}
>
{props.name}
</div>
<div
style={{
marginTop: "10px",
fontWeight: "bold",
}}
>
{props.value.toFixed(2)}/{props.total}
</div>
</div>
<Progress
stroke={"rgba(var(--semi-grey-9), 1)"}
orbitStroke={"rgba(var(--semi-grey-2), 0.5)"}
style={{
height: "4px",
}}
percent={
props.value !== 0
? Math.round((props.value / props.total) * 100)
: 0
}
aria-label={props.name}
/>
</div>
</Card>
);
}
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 (
<>
<InfoCard
backgroundColor={"rgba(var(--semi-light-blue-3), 0.1)"}
backgroundFillColor={"rgba(var(--semi-light-blue-3), 0.3)"}
icon={<IconGlobeStroke />}
title={"代理服务"}
moreIcon={<IconCalendarClock />}
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) +
"天"
}
/>
<InfoCard
backgroundColor={"rgba(var(--semi-light-green-3), 0.1)"}
backgroundFillColor={"rgba(var(--semi-light-green-3), 0.3)"}
icon={<IconConnectionPoint2 />}
title={"x-ui 面板"}
moreIcon={<IconUser />}
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)
}
/>
<InfoCard
backgroundColor={"rgba(var(--semi-cyan-3), 0.1)"}
backgroundFillColor={"rgba(var(--semi-cyan-3), 0.3)"}
icon={<IconGithubLogo />}
title={"Actions"}
moreIcon={<IconCalendarClock />}
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) +
"天"
}
/>
<InfoCard
backgroundColor={"rgba(var(--semi-violet-3),0.1)"}
backgroundFillColor={"rgba(var(--semi-violet-3),0.3)"}
icon={<IconBrackets />}
title={"拨测总数"}
moreIcon={<IconBolt />}
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 (
<div
style={{
margin: "10px",
}}
>
<div
style={{
width: "100%",
height: "100px",
backgroundColor: backgroundColor,
borderRadius: "10px",
}}
>
<ResponsiveContainer width="100%" height="100%">
<AreaChart
data={data}
margin={{ top: 10, right: -10, left: -10, bottom: 6 }}
>
<defs>
<linearGradient id={colorToken} x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor={strokeColor} stopOpacity={0.6} />
<stop offset="100%" stopColor={strokeColor} stopOpacity={0} />
</linearGradient>
</defs>
<YAxis domain={[0, "dataMax + 1"]} hide={true} />
{/*<Tooltip />*/}
<Area
type="linear"
dataKey={keyString?.toString()}
stroke={strokeColor}
isAnimationActive={false}
fillOpacity={1}
fill={fill}
/>
</AreaChart>
</ResponsiveContainer>
</div>
</div>
);
}
================================================
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 = (
<div>
<Skeleton.Title style={{ width: 50 }} />
</div>
);
return (
<>
<div
className={"newDescription"}
style={{
gap: "20px",
display: "flex",
marginLeft: "10px",
marginRight: "10px",
flexWrap: "wrap",
}}
>
<NewDescription
keyString={"设备数"}
value={
networkValidation.success ? (
networkValidation.data.deviceCount
) : (
<Skeleton
placeholder={placeholder}
loading={true}
active
></Skeleton>
)
}
/>
<NewDescription
style={{
width: "105px",
overflow: "hidden",
}}
keyString={"上传速率"}
value={
networkValidation.success ? (
networkValidation.data.txSpeedMbps + "mb/s"
) : (
<Skeleton
placeholder={placeholder}
loading={true}
active
></Skeleton>
)
}
/>
<NewDescription
style={{
width: "105px",
overflow: "hidden",
}}
keyString={"下载速率"}
value={
networkValidation.success ? (
networkValidation.data.rxSpeedMbps + "mb/s"
) : (
<Skeleton
placeholder={placeholder}
loading={true}
active
></Skeleton>
)
}
/>
<section
style={{
columnGap: "20px",
display: "flex",
}}
>
<NewDescription
keyString={"DNS查询数"}
value={
adguardValidation.success ? (
adguardValidation.data.NumDnsQueries
) : (
<Skeleton
placeholder={placeholder}
loading={true}
active
></Skeleton>
)
}
/>
<NewDescription
keyString={"拦截数"}
value={
adguardValidation.success ? (
adguardValidation.data.NumBlockedFiltering
) : (
<Skeleton
placeholder={placeholder}
loading={true}
active
></Skeleton>
)
}
/>
<NewDescription
keyString={"处理时间"}
value={
adguardValidation.success ? (
adguardValidation.data.AvgProcessingTime + "ms"
) : (
<Skeleton
placeholder={placeholder}
loading={true}
active
></Skeleton>
)
}
/>
</section>
</div>
<NetworkChart
data={HomeNetworkSpeedList}
keyString={"speed"}
colorToken={"blue"}
/>
</>
);
}
================================================
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 = (
<div>
<Skeleton.Title style={{ width: 50 }} />
</div>
);
return (
<>
<div
className={"newDescription"}
style={{
gap: "20px",
display: "flex",
marginLeft: "10px",
marginRight: "10px",
flexWrap: "wrap",
}}
>
<NewDescription
keyString={"当前节点"}
value={
nodeValidation.success ? (
<Title heading={5}>
{nodeValidation.data.nodeName.slice(1, -1)}
</Title>
) : (
<Skeleton
placeholder={placeholder}
loading={true}
active
></Skeleton>
)
}
/>
<NewDescription
keyString={"延迟"}
value={
nodeValidation.success ? (
nodeValidation.data.nodeLatency + "ms"
) : (
<Skeleton
placeholder={placeholder}
loading={true}
active
></Skeleton>
)
}
/>
<NewDescription
style={{
width: "105px",
overflow: "hidden",
}}
keyString={"上传速率"}
value={
proxyValidation.success ? (
proxyValidation.data.txSpeedMbps + "mb/s"
) : (
<Skeleton
placeholder={placeholder}
loading={true}
active
></Skeleton>
)
}
/>
<NewDescription
style={{
width: "105px",
overflow: "hidden",
}}
keyString={"下载速率"}
value={
proxyValidation.success ? (
proxyValidation.data.rxSpeedMbps + "mb/s"
) : (
<Skeleton
placeholder={placeholder}
loading={true}
active
></Skeleton>
)
}
/>
</div>
<NetworkChart
data={ProxyNetworkSpeedList}
keyString={"speed"}
colorToken={"purple"}
/>
</>
);
}
================================================
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 = (
<div>
<Skeleton.Title style={{ width: 50 }} />
</div>
);
export function ServerCard(props: ServerCardProps) {
return (
<>
<div>
<div
className={"serverDescription"}
style={{
display: "flex",
flexWrap: "wrap",
}}
>
<NewDescription
style={{
minWidth: "200px",
}}
keyString={"服务器"}
value={props.name}
/>
<section
style={{
display: "flex",
flexWrap: "wrap",
columnGap: "40px",
}}
>
<NewDescription
keyString={"在线状态"}
value={
<div
style={{
color:
props.status === "online"
? "rgba(var(--semi-green-6), 1)"
: "rgba(var(--semi-red-6), 1)",
}}
>
{props.status}
</div>
}
/>
<NewDescription
style={{
width: "110px",
overflow: "hidden",
}}
keyString={"CPU占用"}
value={
props.status === "online" ? (
<div
style={{
display: "flex",
alignItems: "center",
}}
>
<Progress
style={{
marginRight: "4px",
}}
stroke={
props.cpu > 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}%
</div>
) : (
<Skeleton
placeholder={placeholder}
loading={true}
active
></Skeleton>
)
}
/>
<NewDescription
style={{
width: "110px",
overflow: "hidden",
}}
keyString={"内存占用"}
value={
props.status === "online" ? (
<div
style={{
display: "flex",
alignItems: "center",
}}
>
<Progress
style={{
marginRight: "4px",
}}
stroke={
props.memory > 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}%
</div>
) : (
<Skeleton
placeholder={placeholder}
loading={true}
active
></Skeleton>
)
}
/>
<NewDescription
style={{
width: "110px",
overflow: "hidden",
}}
keyString={"存储占用"}
value={
props.status === "online" ? (
<div
style={{
display: "flex",
alignItems: "center",
}}
>
<Progress
style={{
marginRight: "4px",
}}
stroke={
props.disk > 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}%
</div>
) : (
<Skeleton
placeholder={placeholder}
loading={true}
active
></Skeleton>
)
}
/>
<NewDescription
style={{
width: "110px",
overflow: "hidden",
}}
keyString={"上传"}
value={
props.status === "online" ? (
props.up.toFixed(2) + "mb/s"
) : (
<Skeleton
placeholder={placeholder}
loading={true}
active
></Skeleton>
)
}
/>
<NewDescription
style={{
width: "110px",
overflow: "hidden",
}}
keyString={"下载"}
value={
props.status === "online" ? (
props.down.toFixed(2) + "mb/s"
) : (
<Skeleton
placeholder={placeholder}
loading={true}
active
></Skeleton>
)
}
/>
<NewDescription
keyString={"在线天数"}
value={
props.status === "online" ? (
props.uptime.toFixed(0) + "天"
) : (
<Skeleton
placeholder={placeholder}
loading={true}
active
></Skeleton>
)
}
/>
</section>
</div>
</div>
</>
);
}
export default function Server() {
const serverGetData = SSEDataFetch(
process.env.NEXT_PUBLIC_GO_API_BASE_URL + "/GetNetworkDataSSE",
);
return (
<div
style={{
marginBottom: "20px",
}}
>
{serverGetData ? (
serverGetData?.serverInfo.map((server: ServerCardProps) => (
<ServerCard
key={server.id}
id={server.id}
name={server.name}
status={server.status}
cpu={server.cpu}
memory={server.memory}
disk={server.disk}
uptime={server.uptime}
up={server.up}
down={server.down}
/>
))
) : (
<ServerCard
key={"server.id"}
id={0}
name={"加载中"}
status={"加载中"}
cpu={0}
memory={0}
disk={0}
uptime={0}
up={0}
down={0}
/>
)}
</div>
);
}
================================================
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 (
<>
<Title
heading={2}
style={{
marginTop: "30px",
marginLeft: "30px",
marginBottom: "20px",
}}
>
<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>
</Title>
<div
style={{
display: "flex",
flexWrap: "wrap",
justifyContent: "space-between",
alignItems: "center",
marginLeft: "20px",
}}
>
<div
style={{
paddingTop: "10px",
border: "1px solid rgba(var(--semi-grey-1), 1)",
borderRadius: "15px",
minWidth: "220px",
marginRight: "20px",
marginBottom: "10px",
flex: 1,
}}
>
<section
style={{
display: "flex",
justifyContent: "space-between",
alignItems: "start",
flexWrap: "wrap",
marginLeft: "20px",
marginRight: "20px",
}}
>
<Title heading={3}>家庭网络</Title>
<picture>
<img
src={
resolvedTheme === "light"
? "/AdguardHome.png"
: "/AdguardHome-dark.png"
}
width={"130px"}
alt={"AdGuardHome"}
/>
</picture>
</section>
<NetworkSummary />
</div>
<div
style={{
paddingTop: "10px",
border: "1px solid rgba(var(--semi-grey-1), 1)",
borderRadius: "15px",
flex: 1,
marginRight: "20px",
marginBottom: "10px",
minWidth: "220px",
}}
>
<section
style={{
display: "flex",
justifyContent: "space-between",
alignItems: "start",
flexWrap: "wrap",
marginLeft: "20px",
marginRight: "20px",
}}
>
<Title heading={3}>科学上网</Title>
<div
style={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
}}
>
<picture>
<img
src={
resolvedTheme === "light"
? "/kuromi.png"
: "/kuromi-dark.png"
}
width={"110px"}
alt={"kuromi"}
/>
</picture>
<Text
strong
style={{
marginLeft: "5px",
marginRight: "5px",
}}
>
&
</Text>
<picture>
<img
src={
resolvedTheme === "light"
? "/coffee.png"
: "/coffee-dark.png"
}
width={"60px"}
alt={"coffee"}
/>
</picture>
</div>
</section>
<ProxySummary />
</div>
</div>
<div
style={{
display: "flex",
flexWrap: "wrap",
justifyContent: "space-between",
alignItems: "center",
marginLeft: "10px",
marginRight: "10px",
}}
>
<InfoCardList />
</div>
<Title
heading={3}
style={{
marginLeft: "30px",
marginBottom: "10px",
}}
>
系统状态
</Title>
<Server />
</>
);
}
================================================
FILE: app/home/main/page.tsx
================================================
import MainContent from "@/app/home/main/dashboard";
export const metadata = {
title: "概览 | HomeDash",
};
export default function DashboardPage() {
return <MainContent />;
}
================================================
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 {
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
SYMBOL INDEX (50 symbols across 32 files)
FILE: app/home/layout.tsx
function DashboardLayout (line 11) | function DashboardLayout({
FILE: app/home/main/components/NewDescription.tsx
type NewDescriptionProps (line 4) | type NewDescriptionProps = {
function NewDescription (line 10) | function NewDescription({
FILE: app/home/main/components/infoCard.tsx
type InfoCardProps (line 16) | type InfoCardProps = {
function InfoCard (line 29) | function InfoCard(props: InfoCardProps) {
function InfoCardList (line 189) | function InfoCardList() {
FILE: app/home/main/components/networkChart.tsx
type NetworkChartProps (line 4) | type NetworkChartProps = {
function NetworkChart (line 10) | function NetworkChart({
FILE: app/home/main/components/networkSummary.tsx
function NetworkSummary (line 22) | function NetworkSummary() {
FILE: app/home/main/components/proxySummary.tsx
function ProxySummary (line 20) | function ProxySummary() {
FILE: app/home/main/components/serverList.tsx
type ServerCardProps (line 7) | type ServerCardProps = {
function ServerCard (line 25) | function ServerCard(props: ServerCardProps) {
function Server (line 242) | function Server() {
FILE: app/home/main/dashboard.tsx
function MainContent (line 17) | function MainContent() {
FILE: app/home/main/page.tsx
function DashboardPage (line 7) | function DashboardPage() {
FILE: app/home/service/components/homeSummary.tsx
type HomeCardProps (line 7) | type HomeCardProps = {
function HomeSummary (line 102) | function HomeSummary() {
FILE: app/home/service/components/paySummary.tsx
type PayCardProps (line 5) | type PayCardProps = {
function PayDetailCard (line 10) | function PayDetailCard(props: PayCardProps) {
function PaySummary (line 81) | function PaySummary() {
FILE: app/home/service/components/serviceList.tsx
type ServiceCardProps (line 6) | type ServiceCardProps = {
function ServerDetailCard (line 14) | function ServerDetailCard(props: ServiceCardProps) {
function ServiceList (line 164) | function ServiceList() {
FILE: app/home/service/components/serviceSummary.tsx
type ServiceCardProps (line 7) | type ServiceCardProps = {
function ServiceCard (line 13) | function ServiceCard(props: ServiceCardProps) {
function ServiceSummary (line 83) | function ServiceSummary() {
FILE: app/home/service/page.tsx
function Service (line 7) | function Service() {
FILE: app/home/service/service.tsx
function ServiceContent (line 9) | function ServiceContent() {
FILE: app/home/surge/components/surgeCard.tsx
type SurgeCardProps (line 3) | type SurgeCardProps = {
function SurgeCard (line 8) | function SurgeCard({ children, style }: SurgeCardProps) {
FILE: app/home/surge/page.tsx
function Service (line 7) | function Service() {
FILE: app/home/surge/surge.tsx
function SurgeContent (line 8) | function SurgeContent() {
FILE: app/home/surge/surgeStatus.tsx
function SurgeStatus (line 14) | function SurgeStatus() {
FILE: app/home/surge/surgeTraffic.tsx
function SurgeTraffic (line 28) | function SurgeTraffic() {
FILE: app/home/utils/functions.tsx
function getDaysBetweenDates (line 1) | function getDaysBetweenDates(date1: string, date2: string): number {
FILE: app/home/utils/leftSide.tsx
function LeftSide (line 22) | function LeftSide() {
FILE: app/home/utils/sseContext.tsx
type SpeedData (line 10) | type SpeedData = { speed: number };
type SSEContextType (line 12) | interface SSEContextType {
type Actions (line 46) | type Actions =
type SSEContextProviderProps (line 71) | interface SSEContextProviderProps {
FILE: app/home/utils/sseFetch.tsx
type LooseObject (line 6) | type LooseObject = {
function SSEDataFetch (line 10) | function SSEDataFetch(url: string): LooseObject | undefined {
FILE: app/home/xui/components/xuiDetail.tsx
function XuiSummary (line 13) | function XuiSummary() {
FILE: app/home/xui/components/xuiTable.tsx
function XuiTable (line 22) | function XuiTable() {
FILE: app/home/xui/page.tsx
function NetWork (line 7) | function NetWork() {
FILE: app/home/xui/xui.tsx
function XuiContent (line 8) | function XuiContent() {
FILE: app/layout.tsx
function RootLayout (line 10) | function RootLayout({
FILE: app/providers.tsx
function Providers (line 6) | function Providers({ children }: { children: React.ReactNode }) {
FILE: env.d.ts
type ProcessEnv (line 2) | interface ProcessEnv {
FILE: next.config.js
method redirects (line 11) | async redirects() {
Condensed preview — 54 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (762K chars).
[
{
"path": ".eslintrc.cjs",
"chars": 1519,
"preview": "// eslint-disable-next-line @typescript-eslint/no-var-requires\nconst path = require('path')\n\n/** @type {import(\"eslint\")"
},
{
"path": ".github/dependabot.yml",
"chars": 616,
"preview": "# To get started with Dependabot version updates, you'll need to specify which\n# package ecosystems to update and where "
},
{
"path": ".github/workflows/DeployTo_ghrc_ali.yml",
"chars": 2475,
"preview": "name: Build and push Docker image\n\non:\n push:\n tags:\n - 'v*'\n\njobs:\n changelog:\n name: Generate Changelog\n "
},
{
"path": ".github/workflows/autoMerge.yml",
"chars": 751,
"preview": "name: Dependabot auto-merge\non: pull_request\n\npermissions:\n contents: write\n pull-requests: write\n\njobs:\n dependabot:"
},
{
"path": ".gitignore",
"chars": 389,
"preview": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pn"
},
{
"path": ".idea/.gitignore",
"chars": 131,
"preview": "# 默认忽略的文件\n/shelf/\n/workspace.xml\n# 基于编辑器的 HTTP 客户端请求\n/httpRequests/\n# GitHub Copilot persisted chat sessions\n/copilot/ch"
},
{
"path": ".idea/hamster-home.iml",
"chars": 535,
"preview": "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<module type=\"WEB_MODULE\" version=\"4\">\n <component name=\"NewModuleRootManager\">\n"
},
{
"path": ".idea/inspectionProfiles/Project_Default.xml",
"chars": 251,
"preview": "<component name=\"InspectionProjectProfileManager\">\n <profile version=\"1.0\">\n <option name=\"myName\" value=\"Project De"
},
{
"path": ".idea/modules.xml",
"chars": 276,
"preview": "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<project version=\"4\">\n <component name=\"ProjectModuleManager\">\n <modules>\n "
},
{
"path": ".idea/vcs.xml",
"chars": 167,
"preview": "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<project version=\"4\">\n <component name=\"VcsDirectoryMappings\">\n <mapping dire"
},
{
"path": "Dockerfile",
"chars": 1058,
"preview": "FROM node:18-alpine AS base\n\nFROM base AS deps\nRUN apk add --no-cache libc6-compat\nWORKDIR /app\n\nCOPY package.json yarn."
},
{
"path": "LICENSE",
"chars": 1059,
"preview": "MIT License\n\nCopyright (c) 2023 仓鼠\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this"
},
{
"path": "README.md",
"chars": 1107,
"preview": "<div align=\"center\">\n<strong>项目因技术栈选择问题已归档，重构中...</strong>\n<br>\n<strong>新重构 HomeDash 地址: https://dash.buycoffee.top</str"
},
{
"path": "app/home/globals.css",
"chars": 1431,
"preview": "/* http://meyerweb.com/eric/tools/css/reset/\n v5.0.1 | 20191019\n License: none (public domain)\n*/\n@import '@/app/hom"
},
{
"path": "app/home/layout.tsx",
"chars": 963,
"preview": "\"use client\";\nimport \"./globals.css\";\n\nimport { Layout } from \"@douyinfe/semi-ui\";\nimport React, { useEffect, useState }"
},
{
"path": "app/home/main/components/NewDescription.tsx",
"chars": 679,
"preview": "import { Typography } from \"@douyinfe/semi-ui\";\nimport React from \"react\";\n\ntype NewDescriptionProps = {\n keyString: st"
},
{
"path": "app/home/main/components/infoCard.tsx",
"chars": 7609,
"preview": "import {\n IconBolt,\n IconBrackets,\n IconCalendarClock,\n IconConnectionPoint2,\n IconGithubLogo,\n IconGlobeStroke,\n "
},
{
"path": "app/home/main/components/networkChart.tsx",
"chars": 1600,
"preview": "import React from \"react\";\nimport { Area, AreaChart, ResponsiveContainer, YAxis } from \"recharts\";\n\ntype NetworkChartPro"
},
{
"path": "app/home/main/components/networkSummary.tsx",
"chars": 5092,
"preview": "import { Skeleton } from \"@douyinfe/semi-ui\";\nimport React, { useEffect } from \"react\";\nimport { z } from \"zod\";\n\nimport"
},
{
"path": "app/home/main/components/proxySummary.tsx",
"chars": 3746,
"preview": "import { Skeleton, Typography } from \"@douyinfe/semi-ui\";\nimport React, { useEffect } from \"react\";\nimport { z } from \"z"
},
{
"path": "app/home/main/components/serverList.tsx",
"chars": 7867,
"preview": "import { Progress, Skeleton } from \"@douyinfe/semi-ui\";\nimport React from \"react\";\n\nimport NewDescription from \"@/app/ho"
},
{
"path": "app/home/main/dashboard.tsx",
"chars": 5761,
"preview": "\"use client\";\nimport {\n IconGithubLogo,\n IconTickCircle,\n IconUploadError,\n} from \"@douyinfe/semi-icons\";\nimport { Ta"
},
{
"path": "app/home/main/page.tsx",
"chars": 180,
"preview": "import MainContent from \"@/app/home/main/dashboard\";\n\nexport const metadata = {\n title: \"概览 | HomeDash\",\n};\n\nexport def"
},
{
"path": "app/home/semi.css",
"chars": 624750,
"preview": "/* shadow */\n/* sizing */\n/* spacing */\nbody,\nbody .semi-always-light {\n --semi-amber-0: 254,251,235;\n --semi-amber-1:"
},
{
"path": "app/home/service/components/homeSummary.tsx",
"chars": 4697,
"preview": "import { Card, Tag, Typography } from \"@douyinfe/semi-ui\";\nimport Image from \"next/image\";\nimport { z } from \"zod\";\n\nimp"
},
{
"path": "app/home/service/components/paySummary.tsx",
"chars": 2412,
"preview": "import { Card, Progress, Typography } from \"@douyinfe/semi-ui\";\n\nimport { getDaysBetweenDates } from \"@/app/home/utils/f"
},
{
"path": "app/home/service/components/serviceList.tsx",
"chars": 7474,
"preview": "import { Card, Progress, Tag, Typography } from \"@douyinfe/semi-ui\";\nimport { z } from \"zod\";\n\nimport { SSEDataFetch } f"
},
{
"path": "app/home/service/components/serviceSummary.tsx",
"chars": 4194,
"preview": "import { Card, Descriptions, Progress } from \"@douyinfe/semi-ui\";\nimport { z } from \"zod\";\n\nimport { getDaysBetweenDates"
},
{
"path": "app/home/service/page.tsx",
"chars": 181,
"preview": "import ServiceContent from \"@/app/home/service/service\";\n\nexport const metadata = {\n title: \"服务 | HomeDash\",\n};\n\nexport"
},
{
"path": "app/home/service/service.tsx",
"chars": 697,
"preview": "\"use client\";\nimport { Typography } from \"@douyinfe/semi-ui\";\n\nimport HomeSummary from \"@/app/home/service/components/ho"
},
{
"path": "app/home/style.css",
"chars": 1100,
"preview": ".newDescription {\n padding: 10px;\n border-radius: 5px;\n background-color: transparent;\n transition: border-r"
},
{
"path": "app/home/surge/components/surgeCard.tsx",
"chars": 478,
"preview": "import React from \"react\";\n\ntype SurgeCardProps = {\n children?: React.ReactNode;\n style?: React.CSSProperties;\n};\n\nfun"
},
{
"path": "app/home/surge/page.tsx",
"chars": 176,
"preview": "import SurgeContent from \"@/app/home/surge/surge\";\n\nexport const metadata = {\n title: \"Surge | HomeDash\",\n};\n\nexport de"
},
{
"path": "app/home/surge/surge.tsx",
"chars": 516,
"preview": "\"use client\";\nimport { Typography } from \"@douyinfe/semi-ui\";\nimport React from \"react\";\n\nimport SurgeStatus from \"@/app"
},
{
"path": "app/home/surge/surgeStatus.tsx",
"chars": 6776,
"preview": "import {\n IconActivity,\n IconDisc,\n IconSafe,\n IconSignal,\n} from \"@douyinfe/semi-icons\";\nimport { Divider, Progress"
},
{
"path": "app/home/surge/surgeTraffic.tsx",
"chars": 8671,
"preview": "import { Descriptions, Skeleton, Typography } from \"@douyinfe/semi-ui\";\nimport React from \"react\";\nimport { z } from \"zo"
},
{
"path": "app/home/utils/fixedButton.tsx",
"chars": 1369,
"preview": "\"use client\";\nimport { IconDesktop, IconMoon, IconSun } from \"@douyinfe/semi-icons\";\nimport { Button } from \"@douyinfe/s"
},
{
"path": "app/home/utils/functions.tsx",
"chars": 316,
"preview": "export function getDaysBetweenDates(date1: string, date2: string): number {\n const oneDay = 24 * 60 * 60 * 1000; // 一天的"
},
{
"path": "app/home/utils/leftSide.tsx",
"chars": 2564,
"preview": "import { IconSemiLogo } from \"@douyinfe/semi-icons\";\nimport {\n IconBanner,\n IconList,\n IconProgress,\n IconToken,\n} f"
},
{
"path": "app/home/utils/sseContext.tsx",
"chars": 3223,
"preview": "\"use client\";\nimport React, {\n createContext,\n type ReactNode,\n useContext,\n useReducer,\n useState,\n} from \"react\";"
},
{
"path": "app/home/utils/sseFetch.tsx",
"chars": 659,
"preview": "\"use client\";\nimport useSWRSubscription, {\n type SWRSubscriptionOptions,\n} from \"swr/subscription\";\n\ntype LooseObject ="
},
{
"path": "app/home/xui/components/xuiDetail.tsx",
"chars": 1806,
"preview": "import { Descriptions, Skeleton, Typography } from \"@douyinfe/semi-ui\";\nimport React from \"react\";\nimport { z } from \"zo"
},
{
"path": "app/home/xui/components/xuiTable.tsx",
"chars": 3016,
"preview": "import { Progress, Table, Tag } from \"@douyinfe/semi-ui\";\nimport React from \"react\";\nimport { z } from \"zod\";\n\nimport { "
},
{
"path": "app/home/xui/page.tsx",
"chars": 167,
"preview": "import XuiContent from \"@/app/home/xui/xui\";\n\nexport const metadata = {\n title: \"用户列表 | HomeDash\",\n};\n\nexport default f"
},
{
"path": "app/home/xui/xui.tsx",
"chars": 509,
"preview": "\"use client\";\nimport { Typography } from \"@douyinfe/semi-ui\";\nimport React from \"react\";\n\nimport XuiSummary from \"@/app/"
},
{
"path": "app/layout.tsx",
"chars": 691,
"preview": "import { Inter } from \"next/font/google\";\nimport Script from \"next/script\";\nimport React from \"react\";\n\nimport { SSEConn"
},
{
"path": "app/providers.tsx",
"chars": 328,
"preview": "\"use client\";\n\nimport { ThemeProvider } from \"next-themes\";\nimport React from \"react\";\n\nexport function Providers({ chil"
},
{
"path": "env.d.ts",
"chars": 99,
"preview": "declare namespace NodeJS {\n interface ProcessEnv {\n NEXT_PUBLIC_GO_API_BASE_URL: string;\n }\n}\n"
},
{
"path": "git-cliff/cliff.toml",
"chars": 2880,
"preview": "# git-cliff ~ configuration file\n# https://git-cliff.org/docs/configuration\n#\n# Lines starting with \"#\" are comments.\n# "
},
{
"path": "next.config.js",
"chars": 398,
"preview": "/** @type {import('next').NextConfig} */\n\nconst nextConfig = {\n // 针对Docker部署\n output: \"standalone\",\n transpilePackag"
},
{
"path": "package.json",
"chars": 1074,
"preview": "{\n \"name\": \"home-dash\",\n \"version\": \"0.2.0\",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"next dev\",\n \"build\": \"ne"
},
{
"path": "tsconfig.json",
"chars": 792,
"preview": "{\n \"compilerOptions\": {\n \"target\": \"es2017\",\n \"lib\": [\"dom\", \"dom.iterable\", \"esnext\"],\n \"allowJs\": true,\n "
},
{
"path": "turbo.json",
"chars": 158,
"preview": "{\n \"$schema\": \"https://turbo.build/schema.json\",\n \"pipeline\": {\n \"build\": {\n \"outputs\": [\".next/**\", \"!.next/c"
},
{
"path": "vercel.json",
"chars": 41,
"preview": "{\n \"buildCommand\": \"pnpm turbo build\"\n}\n"
}
]
About this extraction
This page contains the full source code of the hamster1963/HomeDash GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 54 files (710.4 KB), approximately 207.7k tokens, and a symbol index with 50 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.