/* =========================================================== 有乐岛 · 全网统一皮（yolo.css） 🤖 自动生成，别手改——改了下次 build 就没了。 源文件：tokens.css + base.css + components.css 生成器：build_yolo_css.py 改样式怎么改： 1. 改设计系统的 tokens.css / base.css / components.css 2. python3 build_yolo_css.py 3. 把 yolo.css 推到 2号机 /opt/kie-wrapper/hub_assets/yolo.css → 全网页面下次刷新就变（hub / lib / 各 flow 外框 / design 外壳） =========================================================== */ /* ---- 字体（服务器路径 · 由 build_yolo_css.py 生成）---- */ @font-face{font-family:'思源黑体';src:url('/static/fonts/SourceHanSansSC.woff2') format('woff2');font-display:swap;} /* ========== 以下来自 tokens.css ========== */ /* =========================================================== 有乐岛 · 设计系统 Token（重建版 · 唯一真源 SSOT） 方向：日系电影生活感 / **UI中性浅灰当画布·暖交给照片** / 主蓝点缀 ⚠️ 本文件是有乐岛新设计系统的机器真源，别处副本只读。 ⚠️ 旧的 风格库/003 与 有乐岛YOLOLAND（OpenDesign 产的）＝被推翻的旧美学，**2026-07-17 已删**。 用法： 引用：var(--color-bg) / var(--color-ink) / var(--color-accent) 等 状态：v0.5 · 2026-07-16 · **色彩已中性化(见01 v0.2)**·字体·间距版式·图标。摄影见04(那边保持暖)。 =========================================================== */ /* ---- 字体加载（引用共享库 ../免费字体/ · 派角色见 02-字体系统）---- */ :root { /* ---- 颜色 · 背景层级（中性浅灰·UI当画布·暖交给照片）-------- */ --color-bg: #FAFAFA; /* 页面底·中性浅灰 */ --color-surface: #FFFFFF; /* 浮起卡·白（⚠️与底只差5阶·卡边不能省）*/ --color-panel: #EFEFEF; /* 沉板/次背景 */ /* ---- 颜色 · 文字层级 --------------------------------------- */ --color-ink-max: #000000; /* 纯黑·【只给实心操作面和 logo，禁当文字色】 和 logo 主体同色（logo 正源锁死 #000000）。 主按钮用它而不是 --color-ink，是要比正文重一档： 两者同色的话，"主操作"和正文在色彩上没区别，层级只能靠形态撑。*/ --color-ink: #2C2E30; /* 主文字（非纯黑·纯黑太数码）*/ --color-ink-2: #565656; /* 次文字 */ --color-ink-3: #999999; /* 辅助/弱 */ --color-ink-disabled: #B3B3B3; /* 禁用 */ /* ---- 颜色 · 描边 / 分割 ------------------------------------ */ --color-line: #E4E4E4; /* 默认发丝线 */ --color-line-strong: #CFCFCF; /* 强调分割 */ /* ---- 颜色 · 点缀（面积要小）------------------------------- */ --color-accent: #44B2E8; /* 主蓝·品牌锚色（只做点缀·别铺底）*/ --color-accent-deep: #2E93C6; /* 蓝按压/链接深态 */ --color-accent-tint: #DCEAF1; /* 蓝浅底/hover */ --color-warm: #CE8A5E; /* 暮橙·暖点缀（器物色·小面积）*/ --color-warm-deep: #AE7049; /* 暮橙按压 */ --color-cool: #7E99A0; /* 雾青·冷点缀（器物色·小面积）*/ --color-warm-tint: #EDE0D2; /* 暮橙浅底·暖标签底（.tag-warm 用·2026-07-18 从 components.css 的硬编收进真源）*/ /* ---- 颜色 · 语义（低饱和·不用刺眼原色）-------------------- */ --color-success: #7E8B5A; /* 苔绿 */ --color-warning: #C79A4E; /* 赭黄 */ --color-danger: #B85C4E; /* 陶红 */ /* ---- 品牌锚 ----------------------------------------------- */ --brand-slogan: "把小事，认真过成值得的事。"; /* ---- 字体 · 派角色（见 02-字体系统）---------------------- */ --font-cn: '思源黑体','Noto Sans SC','PingFang SC',sans-serif; /* 主力·跟logo同框 */ --font-literary: '霞鹜文楷','LXGW WenKai',serif; /* 文学点睛·远离logo */ --font-impact: '得意黑','Smiley Sans','思源黑体',sans-serif; /* 力量·促销钩子 */ --font-en: 'Helvetica Neue',Helvetica,Arial,sans-serif; /* 英文/数字·呼应logo */ --font-body: var(--font-cn); /* 正文 */ --font-display: var(--font-cn); /* 默认标题=主力(稳) */ /* ---- 字号阶梯 · 16px 基准 -------------------------------- */ --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-md: 18px; --text-lg: 24px; --text-xl: 32px; --text-2xl: 40px; --text-3xl: 56px; --text-4xl: 72px; /* ---- 字重（中文 ≥400）----------------------------------- */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; /* ---- 行高 ------------------------------------------------ */ --leading-tight: 1.2; --leading-snug: 1.4; --leading-normal: 1.7; --leading-relaxed: 1.9; /* ---- 字间距 ---------------------------------------------- */ --tracking-normal: 0; --tracking-wide: 0.05em; /* ---- 间距 · 4px基准（大步为主·大留白）· 见 03 ---------- */ --space-4: 4px; --space-8: 8px; --space-12: 12px; --space-16: 16px; --space-24: 24px; --space-32: 32px; --space-48: 48px; --space-64: 64px; --space-96: 96px; --space-128: 128px; --space-160: 160px; /* ---- 页面网格 ------------------------------------------- */ --max-narrow: 680px; /* 窄栏阅读 */ --max-content: 1080px; /* 常规内容 */ --max-wide: 1440px; /* 宽屏上限 */ --gutter: 32px; /* 桌面边距 */ --gutter-mobile: 20px; /* 手机边距 */ /* ---- 圆角 · 柔和（换掉旧直角硬边·呼应圆logo+柔光）------ */ --radius-sm: 6px; /* 按钮/标签/输入框 */ --radius-md: 12px; /* 卡片·默认 */ --radius-lg: 16px; /* 大面板/图片容器 */ --radius-pill: 999px;/* 胶囊/圆点 */ /* ---- 图标 · 见 05 --------------------------------------- */ --icon-size: 24px; /* 基准网格 */ --icon-stroke: 2px; /* 线性图标描边·圆头圆角 */ /* ---- 外壳 ------------------------------------------------ 装 iframe 的外壳页（wenan/design）用。改这一个值， 固定页眉高度和下面 iframe 的起始位置会一起走，不会脱节。 */ --shell-topbar-h: 52px; /* ============================================================ ⏳ 待补：阴影/质感 · 动效（07+） ============================================================ */ } /* ========== 以下来自 base.css ========== */ /* =========================================================== 有乐岛 · 页面骨架（引 tokens.css） 管的是「每一页都要有的那点地基」：reset、body 默认、居中容器。 ⚠️ 不放组件（组件在 components.css），不放某一页专有的东西（那留在页面里）。 状态：v0.2 · 2026-07-20（补全局 a 重置） =========================================================== */ /* ---- reset（够用就好，不引第三方）------------------------ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } /* ---- body 默认皮 ----------------------------------------- */ body{ background: var(--color-bg); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-normal); -webkit-font-smoothing: antialiased; } /* ---- 链接（全局默认皮）---------------------------------- 为什么要这条（2026-07-20 补 · PLM 踩过）：不写的话，浏览器给所有 上自己的默认皮 —— 那个 #0000EE 的蓝 + 下划线，导航、卡片、按钮、chip 全被画上线， 于是每个 App 都得自己再写一遍 `a{...}` 收口，收得还各不一样（＝新的漂移源）。 品牌口径：链接色＝主蓝深态 `--color-accent-deep`（主蓝只做小面积点睛，见 01 色彩）， **默认不带下划线**（因为「长得不像链接的链接」占多数：整块卡片、按钮、品牌区）。 👉 正文里的真链接**要**下划线（一段字里得看得出哪儿能点）——由使用方按需加： 用组件件 `.link`（自带 hover 下划线），或给正文容器加一条 `.article a{ text-decoration: underline; }`。 ⚠️ 这里故意**不写 a:hover 变色** —— 它的选择器权重会盖过 `.btn` / `.card` 这类 挂在 上的组件，把按钮字 hover 成蓝的。hover 反馈交给各组件自己。 */ a{ color: var(--color-accent-deep); text-decoration: none; } /* ---- 居中容器（见 03-间距网格版式）---------------------- .wrap 只管「居中 + 上限」，左右留白交给 .wrap-body， 这样页脚能放在 .wrap 外面通栏（见 components.css 的页脚铁律）。 */ .wrap{ max-width: var(--max-content); margin: 0 auto; } .wrap-narrow{ max-width: var(--max-narrow); margin: 0 auto; } .wrap-wide{ max-width: var(--max-wide); margin: 0 auto; } .wrap-body{ padding: var(--space-24) var(--gutter) 0; } @media (max-width: 768px){ .wrap-body{ padding: var(--space-16) var(--gutter-mobile) 0; } } /* ========== 以下来自 components.css ========== */ /* =========================================================== 有乐岛 · 基础组件（引 tokens.css） 原则：只做基础核心，别贪多贪杂。要加新组件先报设计院，别本地手搓变体。 用法： 状态：v0.3 · 2026-07-20（v0.2 主按钮改黑 + 次按钮边框过对比度 / v0.3 补 .yolo-appbar App 页头 + logo 铁律） =========================================================== */ /* ---- 按钮（主/次 两种，别再加隐形变体）------------------- */ .btn{ font-family: var(--font-cn); font-size: var(--text-base); line-height: 1; padding: 11px 22px; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; transition: background var(--duration-normal, .25s) ease; } /* ⚠️ 主按钮＝黑，不是蓝（Simon 2026-07-20 拍板 + 美术审过） ① 品牌：按钮密度高，一屏好几个，蓝按钮累积起来＝变相铺底，违背 01 色彩。 拿掉蓝按钮后 logo 那片蓝叶反而跳出来了 —— 少用蓝，蓝才是点睛。 ② 无障碍（硬指标）：旧的 #44B2E8 压白字只有 2.39:1，WCAG AA 要 4.5 —— 本来就不该。 现在 #000000 压白字 = 21:1，hover #565656 = 7.34:1，都过 AAA。 ⚠️ 用 --color-ink-max（纯黑）不用 --color-ink（#2C2E30 正文色）： 和正文同色的话，"主操作"在色彩上和正文没区别，层级只能靠形态撑。 👉 改这条＝同时改 13-shadcn主题桥 的 --primary，两套必须一样。 📋 主蓝准用/禁用清单见 01-色彩系统「主蓝用在哪」。 */ .btn-primary{ background: var(--color-ink-max); color: #fff; } /* 主操作·一屏最多一个 */ .btn-primary:hover{ background: var(--color-ink-2); } /* 深底按钮 hover 提亮 */ /* ⚠️ 次按钮边框用 --color-ink-2 不是 --color-line-strong（2026-07-20 美术审改） 原来 #CFCFCF 压页底只有 1.49:1，WCAG 对「UI 组件边界」要求 3:1 —— 不过线。 实景（lib 页）：实心黑的「搜索」旁边挨着几乎没有边的「看全部」，像一段悬空的字。 主按钮变重之后这个失衡更明显，所以两条得一起改。#565656 压页底 = 6.4:1。*/ .btn-secondary{ background: transparent; color: var(--color-ink); border-color: var(--color-ink-2); } .btn-secondary:hover{ background: var(--color-panel); } /* ---- 文字链接 -------------------------------------------- */ .link{ color: var(--color-accent-deep); text-decoration: none; } .link:hover{ text-decoration: underline; } /* ---- 卡片 ------------------------------------------------ */ .card{ background: var(--color-surface); border: 0.5px solid var(--color-line); border-radius: var(--radius-md); padding: var(--space-24); } /* ---- 标签（中性 + 暖强调）------------------------------- */ .tag{ display: inline-block; font-size: var(--text-xs); line-height: 1.6; padding: 3px 10px; border-radius: var(--radius-sm); background: var(--color-panel); color: var(--color-ink-2); } .tag-warm{ background: var(--color-warm-tint); color: var(--color-warm-deep); } /* 强调标记：当季/新品 */ /* ---- 输入框 ---------------------------------------------- */ .input{ font-family: var(--font-cn); font-size: var(--text-base); padding: 10px 14px; width: 100%; background: var(--color-surface); color: var(--color-ink); border: 1px solid var(--color-line-strong); border-radius: var(--radius-sm); } .input::placeholder{ color: var(--color-ink-disabled); } .input:focus{ outline: none; border-color: var(--color-accent); } /* ---- 分割线 ---------------------------------------------- */ .divider{ height: 0.5px; background: var(--color-line); border: none; margin: var(--space-24) 0; } /* ---- 页眉 / 页脚（全网统一壳）------------------ 规范：所有内部页共用一套页眉页脚，别每页手搓。 ✅ 2026-07-17 已上线：本皮就是线上皮（hub / lib / 13个flow外框页 / design 编辑器外壳）。 部署件＝ yolo.css（build_yolo_css.py 拼 tokens+base+components）→ 2号机 /opt/kie-wrapper/hub_assets/css/yolo.css，页面 。 ⚠️ 旧壳 ~/Documents/Claude/_app共享件/壳/（yolo-shell.css·旧#003黑白皮）**已删**。 */ .topbar{ display: flex; align-items: center; gap: var(--space-16); padding: 14px 4px; border-bottom: 0.5px solid var(--color-line); } .topbar .topbar-left{ display: flex; align-items: center; gap: var(--space-12); min-width: 0; flex: 1; } /* 左边一组（返回/斜杠/页名）。右边放 logo。 */ .topbar .logo{ height: 28px; width: auto; display: block; flex: none; } /* 用 logo英文(YOLOLAND)·只钉高度，见下面 logo 铁律 */ /* ⚠️ 2026-07-20 去掉了原来的 max-width:220px —— 它和 height 一起钉，正是下面那条 logo 铁律 禁止的写法：字标 8.23:1，28px 高算出来 230px 宽 > 220 被截住、高度却不动 → 横向压扁约 4%。 要它占更窄就调 height，别用 max-width 拦。 */ .topbar .back{ color: var(--color-accent-deep); font-size: var(--text-sm); text-decoration: none; } /* App页「← 工具库」，根页不放 */ .topbar .back:hover{ color: var(--color-accent); } .topbar .sep{ color: var(--color-line-strong); } /* 「← 工具库 / 页名」的斜杠 */ .topbar .name{ font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 当前页名 */ .topbar .spacer{ flex: 1; } /* .topbar-fixed ── 满屏 iframe 外壳专用的固定页眉（2026-07-17 设计院批准加） 为什么要这个变体：wenan / design 这类页面是「我们的壳 + 别人的开源框」—— 框要占满剩下的整个视口、页面本身不滚动，所以页眉必须 fixed 且自带底色（否则框会顶穿）。 ⚠️ 只给「装 iframe 的外壳页」用。普通页面一律用 .topbar，别拿这个当默认。 ⚠️ 高度 52px 与 --shell-topbar-h 绑定，改高度改那一个变量，下面的 .shell-frame 会跟着走。 */ .topbar-fixed{ position: fixed; top: 0; left: 0; right: 0; z-index: 10; height: var(--shell-topbar-h); display: flex; align-items: center; gap: var(--space-12); padding: 0 var(--gutter); background: var(--color-surface); border-bottom: 0.5px solid var(--color-line); } .shell-frame{ position: fixed; top: var(--shell-topbar-h); left: 0; right: 0; bottom: 0; overflow: auto; -webkit-overflow-scrolling: touch; } .shell-frame > iframe{ width: 100%; height: 100%; border: 0; display: block; } /* ---- App 页头 .yolo-appbar（2026-07-20 设计院批准加）--------------------- 啥时候用它：**有登录、有用户身份的独立 App**（PLM 病历本这类）。左边＝品牌 + 应用名，右边＝用户区。 三个页头别套错： · `.topbar` ＝ 工具台那套壳页（hub / lib / flow 外框）：logo 靠右，左边是「← 工具库 / 页名」。 · `.yolo-appbar` ＝ App 自己的页头：logo 靠左带应用名，右边是「谁登录了 · 退出」。 · `.topbar-fixed` ＝ 满屏 iframe 外壳页专用（见上）。 为什么补它（2026-07-20）：PLM 套皮时设计系统里没有这件，App 只能自己手搓一个 `.appbar`， 手搓的那版把 logo 压扁了 —— 缺组件就手搓、手搓就出错，所以补成成品件。 */ .yolo-appbar{ display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); padding: var(--space-12) var(--gutter-mobile); background: var(--color-surface); border-bottom: 0.5px solid var(--color-line); } @media (min-width: 768px){ .yolo-appbar{ padding: var(--space-12) var(--gutter); } } .yolo-appbar .brand{ display: flex; align-items: center; gap: var(--space-8); min-width: 0; flex: 0 1 auto; } /* 整块通常包成 ，点了回首页 */ /* 🩸 logo 铁律（2026-07-20 立 · PLM 踩过 · 所有地方通用，不止本组件）： **图片只钉一维（高度），另一维永远 auto；禁止同时钉两维。** 同时钉 height 和 max-width（或 width）会怎样：浏览器先按原始比例算出宽度， 再被 max-width 截断，而高度是你钉死的、不会跟着缩 → logo 被横向压扁。 PLM 那次：字标原始 8.44:1，被 height+max-width 夹成约 5:1，**扁了 40%**。 CSS 不报错、控制台不吭声，只有把成品和 logo 原件并排比才看得出来。 👉 想让它占窄一点，就调 height（宽度自己按比例走），别加 max-width/width 去拦。 */ .yolo-appbar .logo-full{ height: 20px; width: auto; display: block; } /* 字标 logo英文 · 8.44:1 → 约 169px 宽 */ .yolo-appbar .logo-mark{ height: 24px; width: auto; display: none; } /* 蓝叶辅助图形 · 0.90:1 → 约 22px 宽 */ @media (max-width: 480px){ /* 窄屏：字标太长 → 换蓝叶图形标 */ .yolo-appbar .logo-full{ display: none; } .yolo-appbar .logo-mark{ display: block; } } .yolo-appbar .app-name{ font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--color-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* 应用名长了省略，别把用户区挤掉 */ } .yolo-appbar .user{ display: flex; align-items: center; gap: var(--space-12); flex: 0 0 auto; font-size: var(--text-sm); color: var(--color-ink-2); white-space: nowrap; } .yolo-appbar .user a{ color: var(--color-accent-deep); } /* 「退出」这类轻操作 */ /* 📐 页脚通栏的唯一正确做法（2026-07-16 立·踩过坑别再犯）： 页脚要通栏出血 → 把