/* ============================================================ * Default theme (GVA blue-white) — applied when . * * Same layui components/markup everywhere; this stylesheet only re-skins * layui defaults to the GVA palette (primary #3b82f6, white sidebar, * 4–6px radius). Every rule MUST be scoped under .theme-default so * loading this file never affects the layui theme. * ============================================================ */ .theme-default { /* layui v2.9 CSS variables — overriding here re-themes most components. `--global-checked-color` controls layui's primary tint (active nav, tab indicator, primary buttons in some skins). */ --global-checked-color: #3b82f6; --global-primary-color: #3b82f6; --global-active-color: #3b82f6; --global-back-color: #f2f3f5; --global-neutral-color: #909399; /* GVA palette tokens (used by selectors below). */ --gva-primary: #3b82f6; --gva-primary-2: #60a5fa; --gva-primary-7: #2563eb; --gva-primary-9: #ddecfe; --gva-success: #67c23a; --gva-warning: #e6a23c; --gva-danger: #f56c6c; --gva-text-primary: #303133; --gva-text-regular: #606266; --gva-text-secondary: #909399; --gva-text-placeholder: #c0c4cc; --gva-border: #dcdfe6; --gva-border-light: #e4e7ed; --gva-bg-page: #f2f3f5; --gva-bg-card: #ffffff; --gva-bg-hover: #f5f7fa; --gva-radius-sm: 4px; --gva-radius: 6px; } /* ---------- Page background ---------- */ .theme-default { background: var(--gva-bg-page); color: var(--gva-text-primary); } /* ---------- Header ---------- */ .theme-default .layui-layout-admin .layui-header { background: #ffffff; border-bottom: 1px solid var(--gva-border-light); box-shadow: 0 1px 2px rgba(0,0,0,0.04); } .theme-default .layui-layout-admin .layui-header .layui-logo { background: #ffffff !important; color: var(--gva-primary) !important; font-weight: 600; border-right: 1px solid var(--gva-border-light); } .theme-default .layui-layout-admin .layui-header .layui-nav, .theme-default .layui-layout-admin .layui-header .layui-nav-item a { background: transparent; color: var(--gva-text-regular); } .theme-default .layui-layout-admin .layui-header .layui-nav-item a:hover, .theme-default .layui-layout-admin .layui-header .layui-nav .layui-nav-more { color: var(--gva-primary); } .theme-default .layui-layout-admin .layui-header .layui-nav-bar { background: var(--gva-primary); } .theme-default .layui-layout-admin .layui-header .layui-icon { color: var(--gva-text-regular); } /* ---------- Sidebar ---------- 走 layuiAdmin 默认的深色侧栏（#20222a + 白字 + 主题色高亮），不再强制白底。 adminui 自己的主题切换器（顶栏 🎨）会动态注入色板覆盖。 */ /* ---------- Buttons ---------- * !important on color guards against the `a { color: var(--gva-primary) }` * rule below — without it, shows blue text on blue * background (invisible). Layui's own .layui-btn sets color:#fff but the * generic `a` selector wins by source order. */ .theme-default .layui-btn { background-color: var(--gva-primary); border: 1px solid var(--gva-primary); color: #fff !important; border-radius: var(--gva-radius-sm); font-weight: 400; height: 32px; line-height: 30px; padding: 0 15px; font-size: 14px; } .theme-default .layui-btn:hover { background-color: var(--gva-primary-2); border-color: var(--gva-primary-2); color: #fff !important; opacity: 1; } .theme-default .layui-btn-primary { background: #fff; color: var(--gva-text-regular) !important; border: 1px solid var(--gva-border); } .theme-default .layui-btn-primary:hover { color: var(--gva-primary) !important; border-color: var(--gva-primary); background: #fff; } .theme-default .layui-btn-danger { background-color: var(--gva-danger); border-color: var(--gva-danger); color: #fff !important; } .theme-default .layui-btn-danger:hover { background-color: #ff7875; border-color: #ff7875; color: #fff !important; } .theme-default .layui-btn-warm { background-color: var(--gva-warning); border-color: var(--gva-warning); color: #fff !important; } .theme-default .layui-btn-warm:hover { background-color: #ebb563; border-color: #ebb563; color: #fff !important; } .theme-default .layui-btn-normal { background-color: var(--gva-success); border-color: var(--gva-success); color: #fff !important; } .theme-default .layui-btn-normal:hover { background-color: #85ce61; border-color: #85ce61; color: #fff !important; } .theme-default .layui-btn-sm { height: 26px; line-height: 24px; font-size: 12px; padding: 0 10px; border-radius: 3px; } .theme-default .layui-btn-xs { height: 22px; line-height: 20px; font-size: 12px; padding: 0 8px; border-radius: 3px; } /* ---------- Inputs ---------- */ .theme-default .layui-input, .theme-default .layui-textarea { border-radius: var(--gva-radius-sm); border-color: var(--gva-border); color: var(--gva-text-primary); } .theme-default .layui-input:hover, .theme-default .layui-input:focus, .theme-default .layui-textarea:hover, .theme-default .layui-textarea:focus { border-color: var(--gva-primary) !important; } .theme-default .layui-input-wrap .layui-input-prefix { color: var(--gva-text-secondary); } .theme-default .layui-form-label { color: var(--gva-text-regular); } /* ---------- Select (layui-rendered) ---------- */ .theme-default .layui-select-title input, .theme-default .layui-select-title input.layui-input { border-radius: var(--gva-radius-sm); } .theme-default .layui-anim.layui-anim-upbit dl dd.layui-this { background: var(--gva-primary-9); color: var(--gva-primary); } .theme-default .layui-select-tips { color: var(--gva-text-placeholder); } /* ---------- Checkbox / Radio ---------- */ .theme-default .layui-form-checked, .theme-default .layui-form-checked:hover { color: var(--gva-primary); border-color: var(--gva-primary); } .theme-default .layui-form-checked[lay-skin="primary"] i, .theme-default .layui-form-checked[lay-skin="primary"]:hover i { background-color: var(--gva-primary); border-color: var(--gva-primary); color: #fff; } .theme-default .layui-form-radioed, .theme-default .layui-form-radioed > i { color: var(--gva-primary); } /* ---------- Tables ---------- */ /* 圆角 + overflow 只挂 .layui-table-view（list view 包装层），不挂裸 .layui-table。裸表也用在表单内（活动编辑奖品行表），那里 td 内 select 下拉开口向上时， overflow:hidden 会把 dl.layui-anim 裁掉只露一个选项。 */ .theme-default .layui-table-view { border-radius: var(--gva-radius); overflow: hidden; } .theme-default .layui-table thead { background: #fafbfc; } .theme-default .layui-table th { background: #fafbfc; color: var(--gva-text-primary); font-weight: 500; border-bottom: 1px solid var(--gva-border-light); } .theme-default .layui-table tbody tr:hover > td { background: var(--gva-bg-hover); } .theme-default .layui-table td { border-color: var(--gva-border-light); } /* ---------- Cards ---------- */ .theme-default .layui-card { border-radius: var(--gva-radius); box-shadow: 0 1px 2px rgba(0,0,0,0.04); border: 1px solid var(--gva-border-light); } .theme-default .layui-card-header { background: #ffffff; color: var(--gva-text-primary); font-weight: 500; border-bottom: 1px solid var(--gva-border-light); border-radius: var(--gva-radius) var(--gva-radius) 0 0; } /* ---------- Badges ---------- */ .theme-default .layui-badge { border-radius: 3px; padding: 0 6px; } .theme-default .layui-badge.layui-bg-blue { background-color: var(--gva-primary); } .theme-default .layui-badge.layui-bg-green { background-color: var(--gva-success); } .theme-default .layui-badge.layui-bg-orange { background-color: var(--gva-warning); } .theme-default .layui-badge.layui-bg-red { background-color: var(--gva-danger); } .theme-default .layui-badge.layui-bg-gray { background-color: #f0f2f5; color: var(--gva-text-regular); } .theme-default .layui-badge-rim { border-radius: 3px; } /* ---------- Tabs (used by config/info page) ---------- */ .theme-default .layui-tab-title li.layui-this { color: var(--gva-primary); } .theme-default .layui-tab-brief > .layui-tab-title .layui-this:after { border-bottom-color: var(--gva-primary); } .theme-default .layui-tab-bar:hover { color: var(--gva-primary); } /* ---------- Pagination (laypage) ---------- */ .theme-default .layui-laypage a, .theme-default .layui-laypage span, .theme-default .layui-laypage button, .theme-default .layui-laypage input, .theme-default .layui-laypage select { border-radius: var(--gva-radius-sm); border-color: var(--gva-border); } .theme-default .layui-laypage .layui-laypage-curr .layui-laypage-em { background: var(--gva-primary); } /* ---------- Layer (modal) ---------- */ .theme-default .layui-layer { border-radius: var(--gva-radius); } .theme-default .layui-layer-title { background: #ffffff; border-bottom: 1px solid var(--gva-border-light); color: var(--gva-text-primary); font-weight: 500; } .theme-default .layui-layer-btn { border-top: 1px solid var(--gva-border-light); } .theme-default .layui-layer-btn .layui-layer-btn0 { background: var(--gva-primary); border-color: var(--gva-primary); color: #ffffff; border-radius: var(--gva-radius-sm); } .theme-default .layui-layer-btn .layui-layer-btn0:hover, .theme-default .layui-layer-btn .layui-layer-btn0:focus { background: var(--gva-primary-7); border-color: var(--gva-primary-7); color: #ffffff; opacity: 1; } .theme-default .layui-layer-btn .layui-layer-btn1 { background: #ffffff; border-color: var(--gva-border); color: var(--gva-text-regular); border-radius: var(--gva-radius-sm); } .theme-default .layui-layer-btn .layui-layer-btn1:hover, .theme-default .layui-layer-btn .layui-layer-btn1:focus { background: var(--gva-bg-hover); border-color: var(--gva-primary); color: var(--gva-primary); opacity: 1; } /* ---------- Toast (layer.msg) ---------- */ .theme-default .layui-layer-msg { border-radius: var(--gva-radius); } /* ---------- Links ---------- */ .theme-default a { color: var(--gva-primary); } .theme-default a:hover { color: var(--gva-primary-2); } .theme-default .layui-card-body a { color: var(--gva-primary); } /* ---------- Breadcrumb in header / generic nav highlights ---------- */ .theme-default .layui-breadcrumb > *:last-child, .theme-default .layui-breadcrumb a:hover { color: var(--gva-primary); } /* ---------- Fieldsets (used in detail forms) ---------- */ .theme-default .layui-elem-field { border-color: var(--gva-border-light); border-radius: var(--gva-radius); } .theme-default .layui-elem-field legend { color: var(--gva-text-regular); } /* ---------- Collapse ---------- */ .theme-default .layui-colla-item { border-color: var(--gva-border-light); border-radius: var(--gva-radius); } .theme-default .layui-colla-title { background: #fafbfc; } /* ---------- Footer ---------- */ .theme-default .layui-layout-admin .layui-footer { background: #ffffff; border-top: 1px solid var(--gva-border-light); color: var(--gva-text-secondary); }