/* ============================================================ 20-news.css —— 顶栏新闻资讯样式（v3：一次一条 / 最多两行 / 上滚淡入）配合 20-news.js。默认完全不显示；仅当时生效。主题色复用 01-foundation.css 的 --text-dark / --edge-pad（自动适配深浅色）。切换特效（v3）：上滚淡入 —— 新一条从下方升入并淡入，旧一条原地淡出，字幕机 / 航班翻页牌那种向上翻滚感。仅动 opacity / transform，走 GPU 合成层，不触发重排重绘，省电；与 JS 的全网时钟同步逻辑互不影响。 ============================================================ */ /* 默认态：新闻条不存在于视觉中（即使 DOM 已注入） */ .news-ticker { display: none; } /* ── 开启新闻模式：重排每个 .common-header ────────────────────────── */ /* 标题文字隐藏；Logo 落到最左；新闻条占满右侧。 */ body.news-mode .common-header { justify-content: flex-start; gap: 12px; } body.news-mode .header-title { display: none; } body.news-mode .header-logo { width: 34px; height: 34px; order: -1; /* 双保险：确保 Logo 在最前 */ } /* ── 新闻条本体 ──────────────────────────────────────────────────── */ body.news-mode .news-ticker { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; /* 允许在 flex 容器内收缩，否则长文本撑破布局 */ height: 40px; /* 预留「两行」高度，1 行时垂直居中，切换不跳动 */ } /* 文本视口：相对定位，承载 A/B 两层；overflow 裁掉升入时露出的越界部分 */ .news-ticker-text { position: relative; flex: 1 1 auto; min-width: 0; height: 100%; overflow: hidden; } /* A/B 两层：绝对叠放、默认透明，.is-active 升入淡入 → 交叉切换 */ .news-line { position: absolute; inset: 0; display: flex; align-items: center; /* 1~2 行都垂直居中 */ opacity: 0; transition: opacity 0.4s ease; /* 旧层：原地淡出 */ pointer-events: none; } /* 新层：升入（translateY 55% → 0）＋淡入 */ .news-line.is-active { opacity: 1; animation: news-rise 0.45s cubic-bezier(0.22, 0.61, 0.36, 1); } @keyframes news-rise { from { transform: translateY(55%); } to { transform: translateY(0); } } /* 单条文字：最多两行，超出省略号 */ .news-clip { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; font-size: 14px; font-weight: 500; line-height: 1.35; letter-spacing: 0.1px; color: var(--text-dark); opacity: 0.8; /* 次级文字观感 */ } /* 无障碍：减少动态效果时去掉淡入与升入动画（瞬切，不闪不滑） */ @media (prefers-reduced-motion: reduce) { .news-line { transition: none; animation: none; } }