/* 品牌/标题用衬线字体，营造高级餐厅菜单质感；正文仍用无衬线保证可读性 */ @import url("https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@600;700;900&display=swap"); /* ========================================================================== THEME.css 点餐小程序 · 黑金高级餐厅风 主题变量 色值来源：老板提供的最终颜色变量代码（唯一权威色板，见下方 :root 第一段） 使用方式：在各页面 CSS 顶部 @import 或在 中于业务 CSS 之前引入本文件， 所有颜色/圆角/间距一律使用下方 CSS 变量，禁止在业务样式中写死颜色值。 ========================================================================== */ :root { /* ---------- 字体 Font ---------- */ --font-display: "Noto Serif SC", "Songti SC", serif; --font-body: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif; /* ---------- 背景 ---------- */ --bg-main: #050505; --bg-page: #080808; --bg-card: #111111; --bg-card-soft: #161616; --bg-input: #1a1a1a; /* ---------- 金色系统 ---------- */ --gold-main: #f6b83f; --gold-dark: #c8871e; --gold-deep: #8a5a12; --gold-light: #ffd77a; /* ---------- 文字 ---------- */ --text-main: #ffffff; --text-soft: #d8d8d8; --text-muted: #9a9a9a; /* ---------- 状态 ---------- */ --success: #35c759; --warning: #f5a623; --danger: #ff4d4f; /* ---------- 边框 ---------- */ --border-gold: rgba(246, 184, 63, 0.45); --border-soft: rgba(255, 255, 255, 0.08); /* ---------- 阴影 ---------- */ --shadow-gold: 0 0 18px rgba(246, 184, 63, 0.28); --shadow-card: 0 12px 30px rgba(0, 0, 0, 0.55); } /* ========================================================================== 以下为项目内部实际使用的变量名，全部指向上方色板，不重复定义颜色值。 组件样式（admin.css / menu.css 等 60+ 处引用）一律用这一层变量名， 以后只需要改上面 :root 那一段颜色，这里和全站会自动跟着变。 ========================================================================== */ :root { /* ---------- 背景色 Background ---------- */ --bg-app-outer: var(--bg-main); /* 桌面端窗口最外层背景 */ --card-gradient: linear-gradient(180deg, #171717 0%, #0d0d0d 100%); /* 卡片专用渐变 */ --bg-surface: var(--card-gradient); /* 卡片区块背景（渐变） */ --bg-surface-raised: var(--bg-card-soft); /* 略高一级的面板，如未选中 Tab、hover 态 */ --bg-overlay: rgba(0, 0, 0, 0.6); /* 弹层/遮罩背景 */ /* ---------- 品牌主色 / 强调金色 Accent ---------- */ --accent-primary: var(--gold-main); /* 主按钮金色 */ --accent-primary-hover: var(--gold-light); --accent-primary-active: var(--gold-deep); --accent-secondary: var(--gold-dark); /* 强调金色：次要强调、渐变终点 */ --accent-primary-soft: rgba(246, 184, 63, 0.15); --accent-gradient: linear-gradient(135deg, var(--gold-main) 0%, var(--gold-dark) 100%); /* ---------- 状态色 Status ---------- */ --status-success: var(--success); --status-warn: var(--warning); --status-warn-soft: rgba(245, 166, 35, 0.15); --status-danger: var(--danger); --status-disabled-bg: var(--bg-card-soft); --status-disabled-text: var(--text-muted); --status-badge-bg: var(--danger); /* ---------- 文字色 Text ---------- */ --text-primary: var(--text-main); --text-secondary: var(--text-soft); --text-tertiary: var(--text-muted); --text-on-accent: #1a1200; /* 深色文字放在金色按钮上时使用 */ --text-link: var(--accent-primary); /* ---------- 边框 / 分隔线 Border ---------- */ --border-default: var(--border-soft); --border-accent: var(--border-gold); --border-input: rgba(255, 255, 255, 0.12); --border-input-focus: var(--accent-primary); /* ---------- 圆角 Radius ---------- */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 16px; --radius-pill: 999px; /* 分类导航胶囊按钮、标签 */ /* ---------- 间距 Spacing ---------- */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; /* ---------- 字号 Font Size ---------- */ --font-size-xs: 12px; --font-size-sm: 14px; --font-size-md: 16px; --font-size-lg: 20px; --font-size-xl: 28px; /* ---------- 阴影 Shadow ---------- */ --shadow-button: var(--shadow-gold); /* ---------- 动效 Transition ---------- */ --transition-fast: 0.15s ease; --transition-base: 0.25s ease; } /* 整体背景：顶部金色光晕 + 深黑渐变（覆盖桌面端窗口与手机页面的可见区域） */ body { background: radial-gradient(circle at top, rgba(246, 184, 63, 0.10), transparent 28%), linear-gradient(180deg, #0a0a0a 0%, #030303 100%); color: var(--text-main); } /* ========================================================================== 基础复用类（可选使用，非强制） ========================================================================== */ .theme-page { background: var(--bg-page); color: var(--text-primary); font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; } /* 主按钮：如「去付款」「返回首页」「查看订单/去结算」「保存」等，全站唯一主按钮样式 */ .btn-primary { background: linear-gradient(180deg, #ffd36a 0%, var(--gold-main) 45%, var(--gold-dark) 100%); color: var(--bg-card); border: 1px solid var(--gold-light); border-radius: 14px; font-weight: 700; font-size: var(--font-size-md); padding: var(--space-md) var(--space-lg); box-shadow: 0 6px 18px rgba(246, 184, 63, 0.35); transition: transform var(--transition-fast), box-shadow var(--transition-fast); } .btn-primary:active { transform: scale(0.98); background: var(--gold-dark); } /* 次要按钮：如未选中的 Tab（预定/外卖）、取消/重置/关闭等 */ .btn-secondary { background: var(--bg-card); color: var(--gold-main); border: 1px solid var(--border-gold); border-radius: 14px; } /* 金额文字：重点金额、合计等强调用法 */ .price { color: var(--gold-main); font-weight: 800; text-shadow: 0 0 12px rgba(246, 184, 63, 0.35); } /* 售罄 / 禁用态：菜品卡片、按钮通用 */ .state-disabled { background: var(--status-disabled-bg) !important; color: var(--status-disabled-text) !important; filter: grayscale(1); pointer-events: none; opacity: 0.7; } /* 卡片容器：今日推荐、菜品行、订单内容框 */ .card { background: var(--card-gradient); border: 1px solid var(--border-gold); border-radius: 16px; box-shadow: var(--shadow-card); } /* 输入框：桌号/姓名/电话/地址/备注 */ .input-field { background: var(--bg-input); border: 1px solid var(--border-input); border-radius: var(--radius-sm); color: var(--text-primary); padding: var(--space-sm) var(--space-md); transition: border-color var(--transition-fast); } .input-field::placeholder { color: var(--text-tertiary); } .input-field:focus { border-color: var(--border-input-focus); outline: none; } /* 数量控制器 + / - 按钮 */ .qty-btn { width: 28px; height: 28px; border-radius: var(--radius-pill); background: var(--bg-surface-raised); color: var(--accent-primary); border: 1px solid var(--border-accent); display: inline-flex; align-items: center; justify-content: center; } /* 购物车数量红色徽标 */ .badge-count { background: var(--status-badge-bg); color: #fff; border-radius: var(--radius-pill); font-size: var(--font-size-xs); padding: 0 6px; } /* 营业中状态圆点 */ .status-dot-online { width: 8px; height: 8px; border-radius: 50%; background: var(--status-success); display: inline-block; }