/* =========================================================== * platform.css * 控制 iOS / Android 平台差异内容的显隐 + toggle 控件样式 * 依赖： 会被 inline 脚本加上 platform-ios 或 platform-android * =========================================================== */ /* 初始安全兜底：class 未写入前先隐藏所有平台专属内容 * （inline 脚本在 里执行，理论上 body 开始渲染前 class 已就位； * 此规则是防御性兜底，防止脚本执行失败时两套内容都显露） */ html:not(.platform-ios):not(.platform-android) .only-ios, html:not(.platform-ios):not(.platform-android) .only-android { display: none !important; } /* 主规则：按当前平台隐藏另一平台的元素 */ html.platform-ios .only-android, html.platform-android .only-ios { display: none !important; } /* =========================================================== * Android 机型外框 * Android 平台下保留同一组截图容器，仅把 iPhone 刘海框切换成更接近 * Android 的直屏圆角、居中打孔摄像头和侧边按键。平台 toggle 切换时 * class 变化即可同步生效。 * =========================================================== */ html.platform-android .phone-frame, html.platform-android .feat-phone { background: linear-gradient(145deg, #33383f 0%, #151719 58%, #0f1012 100%); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 30px; padding: 7px; box-shadow: 0 30px 60px rgba(60, 46, 26, 0.25), 0 12px 24px rgba(60, 46, 26, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.06); } html.platform-android .phone-frame::before, html.platform-android .feat-phone::before, html.platform-android .phone-frame::after, html.platform-android .feat-phone::after { content: ''; position: absolute; background: #1f2328; border-radius: 3px; z-index: 1; } html.platform-android .phone-frame::before, html.platform-android .feat-phone::before { right: -4px; top: 132px; width: 3px; height: 78px; } html.platform-android .phone-frame::after, html.platform-android .feat-phone::after { left: -4px; top: 94px; width: 3px; height: 48px; } html.platform-android .phone-notch, html.platform-android .feat-phone-notch { top: 17px; left: 50%; width: 14px; height: 14px; background: #0b0c0d; border: 2px solid rgba(255, 255, 255, 0.16); border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35); } html.platform-android .phone-screen { border-radius: 24px; background: #101112; } html.platform-android .feat-screen { border-radius: 23px; background: #101112; } @media (max-width: 900px) { html.platform-android .phone-frame, html.platform-android .feat-phone { border-radius: 28px; padding: 7px; } html.platform-android .phone-frame::before, html.platform-android .feat-phone::before { top: 112px; height: 68px; } html.platform-android .phone-frame::after, html.platform-android .feat-phone::after { top: 82px; height: 42px; } html.platform-android .phone-screen, html.platform-android .feat-screen { border-radius: 22px; } } /* =========================================================== * Toggle 控件 —— segmented pill 放在 nav 右侧 * =========================================================== */ .platform-toggle { display: inline-flex; align-items: stretch; border: 1.5px solid var(--ink-brown); border-radius: 999px; overflow: hidden; background: var(--paper-card); font-family: inherit; line-height: 1; } .platform-toggle button { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border: none; background: transparent; color: var(--ink-brown); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .platform-toggle button svg { width: 14px; height: 14px; flex-shrink: 0; } .platform-toggle button:hover { background: var(--paper-alt); } /* 当前平台高亮——由 class 驱动，不需要 JS 管理 .active */ html.platform-ios .platform-toggle [data-platform-toggle="ios"], html.platform-android .platform-toggle [data-platform-toggle="android"] { background: var(--ink-brown); color: var(--paper-main); cursor: default; } html.platform-ios .platform-toggle [data-platform-toggle="ios"]:hover, html.platform-android .platform-toggle [data-platform-toggle="android"]:hover { background: var(--ink-brown); } /* 移动端紧凑态（< 480px）：隐藏文字标签，保留图标，并保证 tap target 不缩水 */ @media (max-width: 480px) { .platform-toggle button { padding: 8px 12px; gap: 0; min-width: 44px; min-height: 36px; justify-content: center; } .platform-toggle button span { display: none; } .platform-toggle button svg { width: 16px; height: 16px; } }