/* 主题色 CSS 变量(默认值,运行时由 themeColor 工具覆盖) */ :root { --app-primary-color: #054f74; --app-primary-color-hover: #054b6e; --app-primary-color-light: #eef3f6; --app-navbar-bg: #054f74; --app-sidebar-bg: #054f74; --app-page-bg: #f5f4f1; --app-card-bg: #ffffff; --app-card-border: #e5e6eb; --app-elevated-bg: #ffffff; /* 官网同款极简磨砂玻璃 */ --app-acrylic-bg: rgba(255, 255, 255, 0.32); --app-acrylic-hover-bg: rgba(255, 255, 255, 0.44); --app-acrylic-border: rgba(255, 255, 255, 0.72); --app-acrylic-border-strong: rgba(255, 255, 255, 0.92); --app-acrylic-blur: blur(28px) saturate(160%); --app-button-gap: 8px; /* 相邻按钮间距,规范统一 */ /* 同步 Arco Design 主色(rgb 分量) */ --primary-6: 5, 79, 116; --primary-5: 38, 103, 134; --primary-7: 5, 75, 110; --color-primary-light-1: #eef3f6; } * { box-sizing: border-box; } /* 使用 SimpleAdmin 的字体栈,移除自定义 @font-face,避免字体加载失败导致方块 */ html, body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Inter, Roboto, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* 路由切换进度条:更细、主题色、弱化存在感 */ #nprogress .bar { background: var(--app-primary-color, #2d8c8c) !important; height: 2px !important; } #nprogress .peg { box-shadow: 0 0 8px var(--app-primary-color, #2d8c8c), 0 0 4px var(--app-primary-color, #2d8c8c) !important; } #nprogress .spinner { display: none !important; } code, pre, kbd, samp { font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } /* Date/Time picker robust overrides for production layout consistency */ body .arco-picker, body .arco-picker-input, body .arco-picker-trigger { height: 28px !important; min-height: 28px !important; } body .arco-picker-input .arco-input, body .arco-picker .arco-input, body .arco-picker .arco-input-inner { height: 28px !important; line-height: 28px !important; font-size: 12px !important; } body .arco-picker .arco-picker-suffix, body .arco-picker .arco-picker-clear-btn { height: 28px !important; line-height: 28px !important; } /* Range picker inputs */ body .arco-picker-range .arco-picker-input { height: 28px !important; min-height: 28px !important; } /* Element Plus-like date/time picker visual style */ body .arco-picker, body .arco-picker-input { border-radius: 4px !important; } body .arco-picker-focused, body .arco-picker:hover { border-color: var(--app-primary-color) !important; box-shadow: 0 0 0 2px rgba(45, 140, 140, 0.2) !important; } /* 新增/编辑接口弹窗:固定 900px 高度,body 填满,4 个容器随弹窗增高,弹窗居中(弹窗 Teleport 到 body,需全局样式) */ body .arco-modal-container.interface-modal-tall .arco-modal-wrapper, body .arco-modal-container.upstream-modal-tall .arco-modal-wrapper { display: flex !important; align-items: center !important; justify-content: center !important; } body .arco-modal-container.interface-modal-tall .arco-modal, body .arco-modal-container.upstream-modal-tall .arco-modal { height: 900px !important; display: flex !important; flex-direction: column !important; } body .arco-modal-container.interface-modal-tall .arco-modal-body, body .arco-modal-container.upstream-modal-tall .arco-modal-body { flex: 1 !important; min-height: 0 !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; max-height: none !important; } body .arco-modal-container.interface-modal-tall .service-provider-interface-modal, body .arco-modal-container.upstream-modal-tall .upstream-interface-modal { flex: 1 !important; min-height: 0 !important; } /* Modal titles: left-aligned (Arco default is center) */ body .arco-modal-header .arco-modal-title, body .arco-modal-simple .arco-modal-title { justify-content: flex-start; text-align: left; } /* Rounded corners to align with SimpleAdmin (Element Plus-like 4px) */ body .arco-card, body .arco-card-bordered, body .arco-modal, body .arco-popover-content, body .arco-dropdown, body .arco-drawer, body .arco-input-wrapper, body .arco-textarea-wrapper, body .arco-select, body .arco-select-view, body .arco-picker, body .arco-table, body .arco-tag, body .arco-alert, body .arco-message, body .arco-notification { border-radius: 8px !important; } /* vxe table wrapper */ body .vxe-table--border, body .vxe-grid { border-radius: 8px !important; overflow: hidden; } /* Panel header */ body .arco-picker-panel { border-radius: 4px !important; } body .arco-picker-header-view button:hover { color: var(--app-primary-color) !important; } /* Date cells */ body .arco-picker-cell { border-radius: 4px !important; } body .arco-picker-cell:hover .arco-picker-date { background-color: var(--app-primary-color-light) !important; color: var(--app-primary-color) !important; } body .arco-picker-cell-selected .arco-picker-date, body .arco-picker-cell-selected:hover .arco-picker-date { background-color: var(--app-primary-color) !important; color: #fff !important; } body .arco-picker-cell-in-view.arco-picker-cell-today .arco-picker-date { box-shadow: inset 0 0 0 1px var(--app-primary-color) !important; } /* Time panel (hours/minutes/seconds columns) */ body .arco-picker-time-panel { --n-item-height: 28px; } body .arco-timepicker-column__item { height: 28px !important; line-height: 28px !important; border-radius: 4px !important; } body .arco-timepicker-column__item:hover { background-color: var(--app-primary-color-light) !important; color: var(--app-primary-color) !important; } body .arco-timepicker-column__item.is-selected { background-color: var(--app-primary-color) !important; color: #fff !important; } html, body { width: 100%; height: 100%; margin: 0; padding: 0; /* Align with SimpleAdmin (Element Plus) defaults */ font-size: 14px; /* SimpleAdmin font stack */ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Inter, Roboto, "Helvetica Neue", Arial, sans-serif; background-color: var(--color-bg-1); -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } div, span, input, button, select, .arco-button { font-size: 14px; font-family: "PingFang SC", "Microsoft YaHei", Arial, Helvetica, sans-serif; } .arco-picker-input, .arco-btn { height: 32px } /* SimpleAdmin visual alignment: primary color and button styles */ body .arco-btn-primary { background-color: var(--app-primary-color) !important; border-color: var(--app-primary-color) !important; color: #fff !important; } body .arco-btn-primary:hover, body .arco-btn-primary:focus { background-color: var(--app-primary-color-hover) !important; border-color: var(--app-primary-color-hover) !important; } /* * Input focus:只描外层 wrapper,禁止内层 .arco-input 再画边框/阴影, * 否则会与 wrapper 描边叠成「左右双线」。 */ body .arco-input-wrapper.arco-input-focus, body .arco-input-wrapper:focus-within, body .arco-textarea-wrapper.arco-textarea-focus, body .arco-textarea-wrapper:focus-within { border-color: var(--app-primary-color) !important; box-shadow: 0 0 0 2px color-mix(in srgb, var(--app-primary-color) 14%, transparent); } body .arco-input-wrapper .arco-input, body .arco-input-wrapper .arco-input:focus, body .arco-textarea-wrapper .arco-textarea, body .arco-textarea-wrapper .arco-textarea:focus { border: none !important; box-shadow: none !important; outline: none !important; } /* Global Switch Styles */ body .arco-switch-checked { background-color: var(--app-primary-color) !important; border-color: var(--app-primary-color) !important; } body .arco-switch-checked:hover { background-color: var(--app-primary-color-hover) !important; border-color: var(--app-primary-color-hover) !important; } /* Global Tabs Styles */ body .arco-tabs-tab-active { color: var(--app-primary-color) !important; } body .arco-tabs-tab-active:hover { color: var(--app-primary-color) !important; } body .arco-tabs-nav-ink { background-color: var(--app-primary-color) !important; } /* Arco Design Menu Selected Colors */ body .arco-menu-item-selected { background-color: var(--app-primary-color-light) !important; color: var(--app-primary-color) !important; .arco-menu-icon { color: var(--app-primary-color) !important; } } body .arco-menu-item:hover { background-color: #f0f9f9 !important; color: var(--app-primary-color) !important; .arco-menu-icon { color: var(--app-primary-color) !important; } } body .arco-menu-item { color: #8c8c8c !important; .arco-menu-icon { color: #8c8c8c !important; } } /* Tab Bar Selected Colors */ body .link-activated { color: var(--app-primary-color) !important; .tag-link { color: var(--app-primary-color) !important; } & + .arco-tag-close-btn { color: var(--app-primary-color) !important; } } /* Unify all buttons size/shape (align to SimpleAdmin/Element Plus) */ body .arco-btn, body .arco-button { height: 32px !important; line-height: 30px !important; padding: 0 12px !important; font-size: 14px !important; border-radius: 4px !important; } /* Ensure size variants are normalized */ body .arco-btn-size-small, body .arco-btn-size-medium, body .arco-btn-size-large { height: 32px !important; line-height: 30px !important; padding: 0 12px !important; font-size: 14px !important; } /* Icon-only buttons keep square shape */ body .arco-btn-icon-only { width: 32px !important; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; } /* 1) Unify spacing between adjacent buttons (global) */ body .arco-btn + .arco-btn, body .arco-button + .arco-button, body .arco-btn + .arco-button, body .arco-button + .arco-btn { margin-left: var(--app-button-gap) !important; } /* Normalize adhibition-list toolbar spacing explicitly */ .xxx-container .toolbar-buttons .arco-btn + .arco-btn, .xxx-container .toolbar-buttons .arco-button + .arco-button { margin-left: 8px !important; } .echarts-tooltip-diy { background: linear-gradient( 304.17deg, rgb(253 254 255 / 60%) -6.04%, rgb(244 247 252 / 60%) 85.2% ) !important; border: none !important; /* Note: backdrop-filter has minimal browser support */ border-radius: 6px !important; backdrop-filter: blur(10px) !important; .content-panel { display: flex; justify-content: space-between; width: 164px; height: 32px; margin-bottom: 4px; padding: 0 9px; line-height: 32px; background: rgb(255 255 255 / 80%); border-radius: 4px; box-shadow: 6px 0 20px rgb(34 87 188 / 10%); } .tooltip-title { margin: 0 0 10px; } p { margin: 0; } .tooltip-title, .tooltip-value { display: flex; align-items: center; color: var(--color-text-1); font-weight: bold; font-size: 12px; line-height: 15px; text-align: right; } .tooltip-item-icon { display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; } } .general-card { border: 1px solid var(--app-acrylic-border); border-radius: 16px; background: var(--app-acrylic-bg); backdrop-filter: var(--app-acrylic-blur); -webkit-backdrop-filter: var(--app-acrylic-blur); box-shadow: none; & > .arco-card-header { height: auto; padding: 20px; border: none; background: transparent; } & > .arco-card-body { padding: 0 20px 20px; background: transparent; } } .split-line { border-color: rgb(var(--gray-2)); } .arco-table-cell { .circle { display: inline-block; width: 6px; height: 6px; margin-right: 4px; background-color: var(--app-primary-color); border-radius: 50%; &.pass { background-color: rgb(var(--green-6)); } } } /* 公告样式,统一设置所有UI控件字体大小为12px,覆盖常见控件 */ .notice { /* 输入框 */ .arco-input, /* 选择器选择框 */ .arco-select-selector, /* 选择器选项 */ .arco-select-option, /* 多选标签 */ .arco-select-multiple-tag, /* 日期选择器输入框 */ .arco-picker-input, /* 日期选择器面板 */ .arco-picker-panel, /* 按钮 */ .arco-button, /* 表单验证提示文字 */ .arco-form-item-explain, /* 输入框前缀 */ .arco-input-prefix, /* 输入框后缀 */ .arco-input-suffix, /* 复选框 */ .arco-checkbox, /* 单选框 */ .arco-radio, /* 开关 */ .arco-switch, /* 滑块 */ .arco-slider, /* 文本区域 */ .arco-textarea, /* 下拉菜单 */ .arco-dropdown, /* 标签 */ .arco-tag, /* 表格单元格 */ .arco-table-cell, /* 按钮 */ .arco-button, /* 复选框 */ .arco-checkbox, /* 下拉菜单选项 */ .arco-dropdown-option, /* 步骤条 */ .arco-steps-item, /* 步骤条标题 */ .arco-steps-item-title, /* 步骤条内容 */ .arco-steps-item-content, /* 步骤条进度条 */ .arco-steps-item-progress, .arco-form-size-small, .arco-form-size-medium, .arco-form-size-large, .arco-form-item-label, .arco-form-item-content, .arco-form-item-required, .arco-form-item-error, .arco-form-item-extra, .arco-form-item-help, .arco-form-item-group, .arco-form-item-group-list, .arco-form-item-group-title, .arco-form-item-group-extra, .arco-form-item-group-required, .arco-form-item-group-error, .arco-form-item-group-help, .arco-form-item-group-content, .arco-form-item-group-content-item, .arco-select-dropdown .arco-select-selector .arco-select-option, .arco-select-multiple-tag, .arco-select-multiple-tag-close, .arco-form-item-label, .arco-tree-node-title, .arco-tree-node-title, .arco-btn-size-medium, .arco-input-size-medium, .arco-select-view-input, .arco-select-view-multiple, .arco-select-view-size-medium, .arco-select-view-value, .arco-popover-content { font-size: 12px !important; } } .arco-form { .arco-form-item-content-wrapper { .arco-input-size-medium{ font-size: 12px !important; } } .arco-form-item-content { min-height: 28px !important; } } /* 侧边菜单栏背景(主题色变量) */ .main-menu { background: var(--app-sidebar-bg) !important; } /* 更具体的选择器覆盖 */ div.main-menu { background: var(--app-sidebar-bg) !important; } /* 针对Vue scoped样式的覆盖 */ [data-v-eb552580].main-menu { background: var(--app-sidebar-bg) !important; } /* 强制覆盖所有可能的main-menu样式 */ .main-menu[data-v-eb552580] { background: var(--app-sidebar-bg) !important; } /* 使用更高优先级的选择器 */ div.main-menu[data-v-eb552580] { background: var(--app-sidebar-bg) !important; } /* 使用属性选择器覆盖 */ [class*="main-menu"] { background: var(--app-sidebar-bg) !important; } /* 主菜单文字样式覆盖 */ .main-menu .menu-text { font-size: 12px !important; font-weight: bold !important; } /* 针对Vue scoped样式的文字覆盖 */ [data-v-eb552580] .menu-text { font-size: 12px !important; font-weight: bold !important; } .main-menu[data-v-eb552580] .menu-text { font-size: 12px !important; font-weight: bold !important; }