:root {
    --font-family: -apple-system, blinkmacsystemfont, 'Segoe UI', roboto,
        'Helvetica Neue', arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
        'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';

    /* Default background color of <body />...etc */
    --background: 0 0% 100%;

    /* 主体区域背景色 */
    --background-deep: 216 20.11% 95.47%;
    --foreground: 210 6% 21%;

    /* Background color for <Card /> */
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;

    /* Background color for popovers such as <DropdownMenu />, <HoverCard />, <Popover /> */
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;

    /* Muted backgrounds such as <TabsList />, <Skeleton /> and <Switch /> */

    /* --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%; */

    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;

    /* 主题颜色 */

    --primary: 212 100% 45%;
    --primary-foreground: 0 0% 98%;

    /* Used for destructive actions such as <Button variant="destructive"> */

    --destructive: 359.33 100% 65.1%;
    --destructive-foreground: 0 0% 98%;

    /* Used for success actions such as <message> */

    --info: 240, 5%, 96%;
    --info-foreground: 220, 4%, 58%;

    /* Used for success actions such as <message> */

    --success: 144 57% 58%;
    --success-foreground: 0 0% 98%;

    /* Used for warning actions such as <message> */

    --warning: 42 84% 61%;
    --warning-foreground: 0 0% 98%;

    /* Secondary colors for <Button /> */

    --secondary: 240 5% 96%;
    --secondary-foreground: 240 6% 10%;

    /* Used for accents such as hover effects on <DropdownMenuItem>, <SelectItem>...etc */
    --accent: 240 5% 96%;
    --accent-lighter: 240 0% 98%;
    --accent-hover: 200deg 10% 90%;
    --accent-foreground: 240 6% 10%;

    /* Darker color */
    --heavy: 192deg 9.43% 89.61%;
    --heavy-foreground: var(--accent-foreground);

    /* Default border color */
    --border: 240 5.9% 90%;

    /* Border color for inputs such as <Input />, <Select />, <Textarea /> */
    --input: 240deg 5.88% 90%;
    --input-placeholder: 217 10.6% 65%;
    --input-background: 0 0% 100%;

    /* Used for focus ring */
    --ring: 222.2 84% 4.9%;

    /* Border radius for card, input and buttons */
    --radius: 0.5rem;

    /* ============= custom ============= */

    /* 遮罩颜色 */
    --overlay: 0 0% 0% / 45%;
    --overlay-content: 0 0% 95% / 45%;

    /* 基本文字大小 */
    --font-size-base: 16px;

    /* =============component & UI============= */

    /* menu */
    --sidebar: 0 0% 100%;
    --sidebar-deep: 0 0% 100%;
    --menu: var(--sidebar);

    /* header */
    --header: 0 0% 100%;
    /* container */
    --container-background-color: #f6f7f9;
    accent-color: var(--primary);
    color-scheme: light;
    /* sidebar */
    --menu-background-color: hsl(var(--menu));
    --menu-item-background-color: var(--menu-background-color);
    --menu-item-color: hsl(var(--foreground));
    --menu-item-hover-color: var(--menu-item-color);
    --menu-item-hover-background-color: hsl(var(--accent));
    --menu-item-active-color: hsl(var(--primary));
    --menu-item-active-background-color: hsl(var(--primary) / 15%);
    --menu-submenu-hover-color: hsl(var(--primary));
    --menu-submenu-hover-background-color: hsl(var(--accent));
    --menu-submenu-active-color: hsl(var(--primary));
    --menu-submenu-active-background-color: transparent;
    --menu-submenu-background-color: var(--menu-background-color);
    /* table */
    --el-table-bg-color: #ffffff;
    --el-table-tr-bg-color: #ffffff;
    --el-table-border: rgb(228, 228, 231);
    --el-fill-color-lighter: rgb(250, 250, 250);
    --el-table-row-hover-bg-color: rgb(244, 244, 245);
    /* dialog */
    --el-dialog-header-bg-color: #f4f4f4;
}

::view-transition-new(root),
::view-transition-old(root) {
    animation: none;
    mix-blend-mode: normal;
}

::view-transition-old(root) {
    z-index: 1;
}

::view-transition-new(root) {
    z-index: 2147483646;
}

html.dark::view-transition-old(root) {
    z-index: 2147483646;
}

html.dark::view-transition-new(root) {
    z-index: 1;
}

/* 以下样式修改为了贴合主题风格 */

/* title */

.title,
.header-title {
    color: var(--menu-item-color);
}

/* navbar */
.navbar-is-open .layout-row-main {
    left: 210px;
    width: calc(100vw - 210px);
}

.layout-row-main>div {
    width: 100%;
}

/* container */
.layout-col-main,
.layout-no-cols,
.layout-row-main,
.layout-col-detail,
.resource-content-box,
.form-container,
body {
    background: hsl(var(--background-deep)) !important;
}

.row-bg {
    background-color: hsl(var(--sidebar)) !important;
    color: var(--menu-item-color);
}

/* el-tabs */
.el-tabs__nav-wrap::after {
    width: 0;
}

.el-tabs__item,
.classify-label {
    color: var(--menu-item-color);
}

.el-tabs__item.is-active {
    color: var(--menu-item-active-color);
}

.el-tabs__header {
    background-color: hsl(var(--sidebar));
}

/* mode-btns */
.mode-btns i {
    font-size: 20px;
    color: var(--menu-item-color);
    cursor: pointer;
}

.mode-btns i.active,
.mode-btns i:hover {
    color: var(--menu-item-active-color);
}

/* el-table */
.el-table,
.el-table th.el-table__cell {
    background-color: var(--el-table-bg-color)
}

.el-table th.is-leaf {
    border-bottom: 1px solid var(--el-table-border)
}

.el-table__row {
    background-color: var(--el-table-tr-bg-color) !important;
    color: var(--menu-item-color);
}

.el-table__body tr:hover>td.el-table__cell,
.el-table__body tr.hover-row>td {
    background: var(--el-table-row-hover-bg-color) !important;
}

.el-table--striped .el-table__body tr.el-table__row--striped td {
    background: var(--el-fill-color-lighter);
}

.el-table td {
    border-bottom: 1px solid var(--el-table-border);
}

.el-table--border,
.el-table--group,
.el-table--border th,
.el-table__fixed-right-patch {
    border-color: hsl(var(--border));
}

.el-table__fixed-right::before,
.el-table__fixed::before,
.el-table--border::after,
.el-table--group::after,
.el-table::before {
    background-color: var(--el-table-border);
}

/* el-loading-mask */
.el-loading-mask {
    background-color: hsl(var(--sidebar)) !important;
}

/* el-tree */
.layout-col-tree,
.catelog-tree {
    background: var(--menu-background-color);
    border-right: 1px solid hsl(var(--border));
}

.el-tree-node__content,
.el-checkbox {
    color: var(--menu-item-color);
}

.el-tree-node__content:hover {
    background-color: var(--menu-item-active-background-color);
}

/* el-pagination */
.block {
    background-color: hsl(var(--sidebar)) !important;
}

.el-pagination__total,
.el-pagination__jump {
    color: var(--menu-item-color);
}

.el-pagination__rightwrapper .btn-prev,
.el-pagination__rightwrapper .btn-next,
.el-pagination__rightwrapper li,
.el-pager li.btn-quicknext,
.el-pager li.btn-quickprev,
.el-pagination,
.el-table__footer-wrapper {
    background-color: hsl(var(--sidebar)) !important;
    color: var(--menu-item-color);
}

/* el-card */
.el-card {
    background-color: hsl(var(--sidebar));
    color: var(--menu-item-color);
    border: 1px solid hsl(var(--border));
}

/* el-dialog */
.el-dialog__header,
.el-dialog__footer {
    background: var(--el-dialog-header-bg-color);
}

.panel-card {
    background-color: hsl(var(--sidebar));
    color: var(--menu-item-color);
}

.el-dialog,
.el-dialog__body {
    background-color: hsl(var(--sidebar)) !important;
}

.el-dialog__title {
    color: var(--menu-item-color);
}

/* el-tooltip */
.el-toolbar-body {
    color: var(--menu-item-color);
}

/* el-form */
.el-form {
    background-color: hsl(var(--sidebar)) !important;
    border-color: hsl(var(--border)) !important;
}

.el-form-item__label,
.el-form-item__content {
    color: var(--menu-item-color);
}

/* el-dropdown-menu */
.el-dropdown-menu {
    background-color: hsl(var(--sidebar));
    border: 1px solid hsl(var(--border));
}

.popper__arrow::after {
    border-color: hsl(var(--sidebar)) !important;
}

.el-dropdown-menu__item:focus,
.el-dropdown-menu__item:not(.is-disabled):hover {
    background-color: hsl(var(--accent));
}

.el-dropdown-menu__item {
    color: var(--menu-item-color);
}

/* el-upload */
.uploader .el-upload,
.uploader .el-upload-dragger,
.import-catalog-path {
    background-color: hsl(var(--sidebar)) !important;
}

/* el-input */
.el-range-input {
    background: #ffffff;
}