/* ==================================================================
* vibe-newapi.css — Vibe UI 手绘风格主题，注入到 NewAPI (Semi Design) 上
* ------------------------------------------------------------------
* 触发开关：
* - 由 vibe-toggle.js 控制
* - 在 /topup、/redemption 路径或充值/支付模态框出现时自动摘掉
* - 摘掉 class 后所有规则失效，回到 Semi Design 默认外观
*
* 注入位置：nginx sub_filter 在 前注入
* 部署路径：/opt/vibe-assets/vibe-newapi.css → URL /_vibe/vibe-newapi.css
*
* 风格来源：C:\Users\aisen bige\Desktop\手绘风格ui\
* - vibe-theme.css (基础 token)
* - README.md (设计规范)
*
* 排除范围：/topup, /redemption 及含「充值」「支付」字样的模态框
* ================================================================== */
/* ==================== 1. 中文手写字体（按需 subset） ==================== */
@import url("https://cdn.jsdelivr.net/npm/lxgw-wenkai-screen-webfont@1.7.0/style.css");
/* ==================== 2. CSS 变量（仅在 vibe-enabled 下生效） ==================== */
html.vibe-enabled {
--vibe-bg: #F5F5DC;
--vibe-card-bg: #FFFFFF;
--vibe-border: #000000;
--vibe-text: #000000;
--vibe-text-secondary: #666666;
--vibe-text-placeholder: #888888;
--vibe-radius-sm: 5px;
--vibe-radius-lg: 10px;
--vibe-shadow: 3px 3px 0 rgba(0,0,0,0.2);
--vibe-shadow-lg: 5px 5px 0 rgba(0,0,0,0.2);
--vibe-font: 'Segoe Print', 'Comic Sans MS', 'LXGW WenKai Screen', 'LXGW WenKai', cursive;
/* 强制亮色模式 */
color-scheme: light !important;
}
/* ==================== 3. 全局基础（背景、字体） ==================== */
html.vibe-enabled,
html.vibe-enabled body {
background-color: var(--vibe-bg) !important;
color: var(--vibe-text) !important;
font-family: var(--vibe-font) !important;
}
html.vibe-enabled body * {
font-family: var(--vibe-font) !important;
}
/* 兜底：把 Semi 全局背景类也染上 */
html.vibe-enabled .semi-portal,
html.vibe-enabled .semi-layout,
html.vibe-enabled .semi-layout-content,
html.vibe-enabled .semi-layout-has-sider {
background-color: var(--vibe-bg) !important;
}
/* ==================== 4. Semi 全局变量覆盖 ==================== */
html.vibe-enabled body {
--semi-color-bg-0: #F5F5DC !important;
--semi-color-bg-1: #FFFFFF !important;
--semi-color-bg-2: #FAFAFA !important;
--semi-color-bg-3: #F5F5F5 !important;
--semi-color-bg-4: #EEEEEE !important;
--semi-color-fill-0: #FFFFFF !important;
--semi-color-fill-1: #FAFAFA !important;
--semi-color-fill-2: #F5F5F5 !important;
--semi-color-border: #000000 !important;
--semi-color-primary: #000000 !important;
--semi-color-primary-hover: #333333 !important;
--semi-color-primary-active: #000000 !important;
--semi-color-text-0: #000000 !important;
--semi-color-text-1: #333333 !important;
--semi-color-text-2: #666666 !important;
--semi-color-text-3: #888888 !important;
--semi-border-radius-small: 5px !important;
--semi-border-radius-medium: 5px !important;
--semi-border-radius-large: 10px !important;
--semi-border-radius-extra-small: 3px !important;
--semi-shadow-elevated: 3px 3px 0 rgba(0,0,0,0.2) !important;
--semi-shadow-elevated-reverse: -3px -3px 0 rgba(0,0,0,0.2) !important;
}
/* ==================== 5. 按钮 ==================== */
html.vibe-enabled body .semi-button {
border: 2px solid var(--vibe-border) !important;
border-radius: var(--vibe-radius-sm) !important;
box-shadow: var(--vibe-shadow) !important;
font-family: var(--vibe-font) !important;
transition: transform 0.15s, box-shadow 0.15s !important;
}
html.vibe-enabled body .semi-button:hover:not(:disabled) {
transform: translateY(-2px) !important;
box-shadow: var(--vibe-shadow-lg) !important;
}
html.vibe-enabled body .semi-button:active:not(:disabled) {
transform: translateY(0) !important;
box-shadow: 2px 2px 0 rgba(0,0,0,0.2) !important;
}
html.vibe-enabled body .semi-button:disabled {
opacity: 0.5 !important;
box-shadow: none !important;
}
html.vibe-enabled body .semi-button-primary {
background-color: #000000 !important;
color: #FFFFFF !important;
}
html.vibe-enabled body .semi-button-secondary,
html.vibe-enabled body .semi-button-tertiary {
background-color: #FFFFFF !important;
color: #000000 !important;
}
html.vibe-enabled body .semi-button-danger {
background-color: #FFEEEE !important;
color: #000000 !important;
}
html.vibe-enabled body .semi-button-warning {
background-color: #FFF9E6 !important;
color: #000000 !important;
}
/* 链接按钮保持轻量 */
html.vibe-enabled body .semi-button-borderless {
border: 2px dashed var(--vibe-border) !important;
box-shadow: none !important;
background: transparent !important;
}
/* ==================== 6. 输入框 / 选择器 ==================== */
html.vibe-enabled body .semi-input-wrapper,
html.vibe-enabled body .semi-input-textarea-wrapper,
html.vibe-enabled body .semi-select,
html.vibe-enabled body .semi-cascader,
html.vibe-enabled body .semi-datepicker,
html.vibe-enabled body .semi-timepicker {
border: 2px solid var(--vibe-border) !important;
border-radius: var(--vibe-radius-sm) !important;
background-color: #FFFFFF !important;
box-shadow: none !important;
}
html.vibe-enabled body .semi-input-wrapper-focus,
html.vibe-enabled body .semi-input-wrapper:focus-within,
html.vibe-enabled body .semi-select-focus {
box-shadow: 0 0 0 3px rgba(0,0,0,0.1) !important;
border-color: var(--vibe-border) !important;
}
html.vibe-enabled body .semi-input,
html.vibe-enabled body .semi-input-textarea,
html.vibe-enabled body .semi-select-selection {
font-family: var(--vibe-font) !important;
color: var(--vibe-text) !important;
}
html.vibe-enabled body .semi-input::placeholder,
html.vibe-enabled body .semi-select-selection-placeholder {
color: var(--vibe-text-placeholder) !important;
}
/* ==================== 7. Checkbox / Radio / Switch ==================== */
html.vibe-enabled body .semi-checkbox-inner-display {
border: 2px solid var(--vibe-border) !important;
border-radius: 3px !important;
background-color: #FFFFFF !important;
}
html.vibe-enabled body .semi-checkbox-checked .semi-checkbox-inner-display {
background-color: #000000 !important;
border-color: #000000 !important;
}
html.vibe-enabled body .semi-radio-inner {
border: 2px solid var(--vibe-border) !important;
background-color: #FFFFFF !important;
}
html.vibe-enabled body .semi-radio-checked .semi-radio-inner::after {
background-color: #000000 !important;
}
html.vibe-enabled body .semi-switch {
border: 2px solid var(--vibe-border) !important;
background-color: #FFFFFF !important;
}
html.vibe-enabled body .semi-switch-checked {
background-color: #000000 !important;
}
html.vibe-enabled body .semi-switch-knob {
background-color: #FFFFFF !important;
border: 2px solid #000000 !important;
}
html.vibe-enabled body .semi-switch-checked .semi-switch-knob {
background-color: #FFFFFF !important;
}
/* ==================== 8. 卡片 ==================== */
html.vibe-enabled body .semi-card {
border: 3px solid var(--vibe-border) !important;
border-radius: var(--vibe-radius-lg) !important;
box-shadow: var(--vibe-shadow-lg) !important;
background-color: #FFFFFF !important;
}
html.vibe-enabled body .semi-card-header {
border-bottom: 2px solid var(--vibe-border) !important;
font-weight: bold !important;
}
html.vibe-enabled body .semi-card-footer {
border-top: 2px solid var(--vibe-border) !important;
}
/* ==================== 9. 模态框 / 抽屉 / Popover ==================== */
html.vibe-enabled body .semi-modal-content,
html.vibe-enabled body .semi-sidesheet-inner {
border: 3px solid var(--vibe-border) !important;
border-radius: var(--vibe-radius-lg) !important;
box-shadow: var(--vibe-shadow-lg) !important;
background-color: #FFFFFF !important;
}
html.vibe-enabled body .semi-modal-header,
html.vibe-enabled body .semi-sidesheet-header {
border-bottom: 2px solid var(--vibe-border) !important;
}
html.vibe-enabled body .semi-modal-footer,
html.vibe-enabled body .semi-sidesheet-footer {
border-top: 2px solid var(--vibe-border) !important;
}
html.vibe-enabled body .semi-popover-content {
border: 2px solid var(--vibe-border) !important;
border-radius: var(--vibe-radius-sm) !important;
box-shadow: var(--vibe-shadow) !important;
}
html.vibe-enabled body .semi-dropdown-menu {
border: 2px solid var(--vibe-border) !important;
border-radius: var(--vibe-radius-sm) !important;
box-shadow: var(--vibe-shadow) !important;
background-color: #FFFFFF !important;
}
/* ==================== 10. 表格 ==================== */
html.vibe-enabled body .semi-table-container {
border: 3px solid var(--vibe-border) !important;
border-radius: var(--vibe-radius-lg) !important;
background-color: #FFFFFF !important;
box-shadow: var(--vibe-shadow-lg) !important;
}
html.vibe-enabled body .semi-table-thead > .semi-table-row > .semi-table-row-head {
background-color: #000000 !important;
color: #FFFFFF !important;
border-bottom: 2px solid var(--vibe-border) !important;
font-weight: bold !important;
}
html.vibe-enabled body .semi-table-tbody > .semi-table-row > .semi-table-row-cell {
border-bottom: 1px solid var(--vibe-border) !important;
}
html.vibe-enabled body .semi-table-tbody > .semi-table-row:hover > .semi-table-row-cell,
html.vibe-enabled body .semi-table-tbody > .semi-table-row-hover > .semi-table-row-cell {
background-color: #FFF9E6 !important;
}
/* ==================== 11. Tabs ==================== */
html.vibe-enabled body .semi-tabs-bar {
border-bottom: 2px solid var(--vibe-border) !important;
}
html.vibe-enabled body .semi-tabs-tab {
font-family: var(--vibe-font) !important;
}
html.vibe-enabled body .semi-tabs-tab-active {
color: #000000 !important;
font-weight: bold !important;
}
html.vibe-enabled body .semi-tabs-tab-line.semi-tabs-tab-active::after,
html.vibe-enabled body .semi-tabs-bar-line.semi-tabs-bar-bottom .semi-tabs-tab-active {
border-bottom: 3px solid #000000 !important;
}
/* ==================== 12. 导航 / 侧边栏 ==================== */
html.vibe-enabled body .semi-navigation {
background-color: var(--vibe-bg) !important;
border-right: 2px solid var(--vibe-border) !important;
}
html.vibe-enabled body .semi-navigation-horizontal {
border-right: none !important;
border-bottom: 2px solid var(--vibe-border) !important;
}
html.vibe-enabled body .semi-navigation-item {
font-family: var(--vibe-font) !important;
border-radius: var(--vibe-radius-sm) !important;
}
html.vibe-enabled body .semi-navigation-item-selected {
background-color: #000000 !important;
color: #FFFFFF !important;
}
html.vibe-enabled body .semi-navigation-item-selected .semi-navigation-item-icon {
color: #FFFFFF !important;
}
html.vibe-enabled body .semi-navigation-header {
border-bottom: 2px solid var(--vibe-border) !important;
background-color: var(--vibe-bg) !important;
}
/* 头部 Header */
html.vibe-enabled body .semi-layout-header {
background-color: var(--vibe-bg) !important;
border-bottom: 2px solid var(--vibe-border) !important;
}
/* ==================== 13. Toast / Notification / Banner ==================== */
html.vibe-enabled body .semi-toast,
html.vibe-enabled body .semi-notification-notice,
html.vibe-enabled body .semi-banner {
border: 2px solid var(--vibe-border) !important;
border-radius: var(--vibe-radius-sm) !important;
box-shadow: var(--vibe-shadow) !important;
background-color: #FFFFFF !important;
}
html.vibe-enabled body .semi-banner-success { background-color: #F0F8F0 !important; }
html.vibe-enabled body .semi-banner-warning { background-color: #FFF9E6 !important; }
html.vibe-enabled body .semi-banner-danger { background-color: #FFEEEE !important; }
html.vibe-enabled body .semi-banner-info { background-color: #E8F4F8 !important; }
/* ==================== 14. Tag / Badge ==================== */
html.vibe-enabled body .semi-tag {
border: 1px solid var(--vibe-border) !important;
border-radius: var(--vibe-radius-sm) !important;
font-family: var(--vibe-font) !important;
}
html.vibe-enabled body .semi-badge-count {
border: 1px solid var(--vibe-border) !important;
background-color: #000000 !important;
color: #FFFFFF !important;
}
/* ==================== 15. 分页 / Steps / Progress ==================== */
html.vibe-enabled body .semi-page-item {
border: 2px solid var(--vibe-border) !important;
border-radius: var(--vibe-radius-sm) !important;
background-color: #FFFFFF !important;
}
html.vibe-enabled body .semi-page-item-active {
background-color: #000000 !important;
color: #FFFFFF !important;
}
html.vibe-enabled body .semi-steps-item-icon {
border: 2px solid var(--vibe-border) !important;
}
html.vibe-enabled body .semi-progress-track {
border: 1px solid var(--vibe-border) !important;
background-color: #FFFFFF !important;
}
html.vibe-enabled body .semi-progress-bar {
background-color: #000000 !important;
}
/* ==================== 16. Avatar / 滚动条 ==================== */
html.vibe-enabled body .semi-avatar {
border: 2px solid var(--vibe-border) !important;
}
html.vibe-enabled ::-webkit-scrollbar {
width: 8px;
height: 8px;
}
html.vibe-enabled ::-webkit-scrollbar-thumb {
background: #888888;
border-radius: 4px;
}
html.vibe-enabled ::-webkit-scrollbar-thumb:hover {
background: #555555;
}
/* ==================== 17. 表单 ==================== */
html.vibe-enabled body .semi-form-field-label {
font-family: var(--vibe-font) !important;
font-weight: bold !important;
}
html.vibe-enabled body .semi-form-field-error-message {
color: #B00020 !important;
font-family: var(--vibe-font) !important;
}
/* ==================== 18. Markdown / 代码 ==================== */
html.vibe-enabled body .markdown-body pre,
html.vibe-enabled body code {
border: 1px solid var(--vibe-border) !important;
border-radius: var(--vibe-radius-sm) !important;
background-color: #FAFAFA !important;
font-family: 'Courier New', monospace !important;
}
/* ==================== 19. 兜底：Echarts 图表外壳加描边 ==================== */
html.vibe-enabled body .echarts-for-react,
html.vibe-enabled body [class*="chart"] > div > canvas,
html.vibe-enabled body [class*="Chart"] > div > canvas {
background-color: #FFFFFF !important;
}
/* ==================== END ==================== */
/* ==================================================================
* 紧急修复：侧边导航选中项文字可见性
* ================================================================== */
/* 1. 加强选中项的白色文字（覆盖所有子元素） */
html.vibe-enabled body .semi-navigation-item-selected,
html.vibe-enabled body .semi-navigation-item-selected *,
html.vibe-enabled body .semi-navigation-item-selected .semi-navigation-item-text,
html.vibe-enabled body .semi-navigation-item-selected .semi-navigation-item-icon,
html.vibe-enabled body .semi-navigation-item-selected span,
html.vibe-enabled body .semi-navigation-item-selected svg {
color: #FFFFFF !important;
fill: #FFFFFF !important;
}
/* 2. hover 状态也要保持可读 */
html.vibe-enabled body .semi-navigation-item:hover,
html.vibe-enabled body .semi-navigation-item:hover * {
color: #000000 !important;
background-color: #F0F0F0 !important;
}
/* 3. 选中 + hover 叠加时，白字优先 */
html.vibe-enabled body .semi-navigation-item-selected:hover,
html.vibe-enabled body .semi-navigation-item-selected:hover * {
color: #FFFFFF !important;
background-color: #000000 !important;
}
/* 4. 确保 icon SVG 的 fill 也是白色 */
html.vibe-enabled body .semi-navigation-item-selected svg path,
html.vibe-enabled body .semi-navigation-item-selected svg circle,
html.vibe-enabled body .semi-navigation-item-selected svg rect {
fill: #FFFFFF !important;
stroke: #FFFFFF !important;
}
/* ==================================================================
* 空状态插图替换 — 手绘风格
* ================================================================== */
/* 隐藏 Semi Design 默认的空状态图 */
html.vibe-enabled body .semi-empty-image,
html.vibe-enabled body .semi-empty-image img,
html.vibe-enabled body .semi-empty-image svg {
display: none !important;
}
/* 用自定义手绘风格 SVG 替换 */
html.vibe-enabled body .semi-empty::before {
content: "";
display: block;
width: 180px;
height: 180px;
margin: 0 auto 20px;
background-image: url('data:image/svg+xml;utf8,');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
/* 空状态文字也改成手绘字体 */
html.vibe-enabled body .semi-empty-title,
html.vibe-enabled body .semi-empty-description {
font-family: var(--vibe-font) !important;
}
html.vibe-enabled body .semi-empty-title {
font-size: 18px !important;
font-weight: bold !important;
color: #000000 !important;
}
html.vibe-enabled body .semi-empty-description {
font-size: 14px !important;
color: #666666 !important;
}