/* =================================================================== mihub 样式 —— iOS 风格 =================================================================== 设计原则（照着苹果那套来）： · 配色用 iOS 的「系统色」，而不是自己调的颜色；亮暗两套都有对应值 · 卡片无边框、大圆角（16~22px），靠层次和极淡的阴影区分，不靠描边 · 导航栏和底部栏用「毛玻璃」（半透明 + 背景模糊），内容从下面透过去 · 分隔线是「内缩的细线」，不是通栏线 · 字体用系统字体栈，苹果设备上直接就是 SF Pro · 动效克制：只做「按下有反馈、出现有淡入」，不做花哨的位移 · 尊重系统的「减弱动态效果」设置没有任何第三方依赖，也不走 CDN —— 少一个外部请求就少一个打不开的理由。 =================================================================== */ /* =================================================================== 1. 主题变量 =================================================================== 亮色是默认值，暗色由触发。那个属性由 head 里的一小段脚本设置（优先读用户选择，其次跟随系统），所以不会出现「先闪一下白再变黑」。 =================================================================== */ :root { /* ---- 背景层次 ---- */ --bg: #F2F2F7; /* 页面底色（iOS 分组背景） */ --card: #FFFFFF; --card-2: #F2F2F7; /* 卡片里的次级块 */ --fill: rgba(118, 118, 128, 0.12); --fill-2: rgba(118, 118, 128, 0.07); --chrome: rgba(250, 250, 252, 0.82); /* 导航栏毛玻璃底色 */ /* ---- 文字三级层次（iOS 的 label / secondaryLabel / tertiaryLabel） ---- */ --label: #000000; --label-2: rgba(60, 60, 67, 0.6); --label-3: rgba(60, 60, 67, 0.3); --label-4: rgba(60, 60, 67, 0.15); /* ---- 分隔线 ---- */ --sep: rgba(60, 60, 67, 0.16); /* ---- iOS 系统色 ---- */ --blue: #007AFF; --green: #34C759; --orange: #FF9500; --red: #FF3B30; --purple: #AF52DE; --teal: #30B0C7; --indigo: #5856D6; --pink: #FF2D55; --yellow: #FFCC00; --accent: var(--blue); --accent-soft: rgba(0, 122, 255, 0.12); /* ---- 圆角 ---- */ --r-lg: 22px; --r-md: 16px; --r-sm: 11px; --r-pill: 999px; /* ---- 阴影：亮色靠它做层次，暗色几乎不用 ---- */ --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 6px 20px rgba(0, 0, 0, 0.05); --shadow-float: 0 2px 8px rgba(0, 0, 0, 0.08), 0 12px 32px rgba(0, 0, 0, 0.10); /* ---- 动效曲线：这条接近 iOS 的手感 ---- */ --ease: cubic-bezier(0.32, 0.72, 0, 1); --dur: 0.28s; } :root[data-theme="dark"] { --bg: #000000; --card: #1C1C1E; --card-2: #2C2C2E; --fill: rgba(118, 118, 128, 0.24); --fill-2: rgba(118, 118, 128, 0.16); --chrome: rgba(28, 28, 30, 0.72); --label: #FFFFFF; --label-2: rgba(235, 235, 245, 0.6); --label-3: rgba(235, 235, 245, 0.3); --label-4: rgba(235, 235, 245, 0.16); --sep: rgba(84, 84, 88, 0.5); --blue: #0A84FF; --green: #30D158; --orange: #FF9F0A; --red: #FF453A; --purple: #BF5AF2; --teal: #40C8E0; --indigo: #5E5CE6; --pink: #FF375F; --yellow: #FFD60A; --accent: var(--blue); --accent-soft: rgba(10, 132, 255, 0.18); /* 暗色下层次靠明度区分，不用阴影 */ --shadow-card: none; --shadow-float: 0 8px 32px rgba(0, 0, 0, 0.55); } /* =================================================================== 2. 基础 =================================================================== */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--label); /* 苹果设备上直接命中 SF Pro；其它平台用各自最好的系统字体。日文字体排在中文前面 —— 汉字字形不一样，学日语的人看得出来。 */ font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, "Noto Sans JP", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 1.55; letter-spacing: -0.01em; transition: background-color .25s var(--ease), color .25s var(--ease); } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: none; opacity: .78; } code { background: var(--fill); padding: 2px 6px; border-radius: 6px; font-size: 0.87em; font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; } /* =================================================================== 3. 顶部导航栏（毛玻璃） =================================================================== */ .topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 14px; padding: 10px 18px; min-height: 52px; background: var(--chrome); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 0.5px solid var(--sep); } .brand { display: flex; align-items: center; gap: 8px; flex: none; color: var(--label); font-size: 17px; font-weight: 600; letter-spacing: -0.02em; } .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); flex: none; } .nav { display: flex; gap: 2px; flex: 1; overflow-x: auto; scrollbar-width: none; } .nav::-webkit-scrollbar { display: none; } .nav a { color: var(--label-2); padding: 6px 11px; border-radius: var(--r-sm); white-space: nowrap; font-size: 14.5px; font-weight: 500; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } .nav a:hover { background: var(--fill); color: var(--label); opacity: 1; } .nav a.on { background: var(--fill); color: var(--label); font-weight: 600; } .logout-form { flex: none; margin: 0; } /* 亮暗切换 */ .theme-toggle { flex: none; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: transparent; color: var(--label-2); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background var(--dur) var(--ease), transform .12s var(--ease); } .theme-toggle:hover { background: var(--fill); color: var(--label); } .theme-toggle:active { transform: scale(.9); } .theme-toggle svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .icon-sun { display: none; } :root[data-theme="dark"] .icon-sun { display: block; } :root[data-theme="dark"] .icon-moon { display: none; } /* =================================================================== 4. 布局 =================================================================== */ .wrap { max-width: 780px; margin: 0 auto; padding: 20px 18px 64px; } .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; } @media (max-width: 760px) { .cols { grid-template-columns: 1fr; } } /* =================================================================== 5. 卡片 =================================================================== */ /* 卡片淡入。 ⚠️ 这里的时长是调过的：原来是 .5s，还有最多 .22s 的依次延迟，结果最后一张卡片要 0.5+0.22 = 0.72 秒才完全显现。第一次打开时很好看，但**每次切换页面都会重播一遍** —— 手机上点导航就会觉得「怎么慢半拍」。现在砍到 .22s、依次延迟压到 .05s 以内：该有的层次感还在，但不再拖时间。（实测：从 1120ms 降到 670ms 才看全）*/ .card { background: var(--card); border-radius: var(--r-lg); padding: 18px; margin-bottom: 16px; box-shadow: var(--shadow-card); animation: card-in .22s var(--ease) both; } /* 依次淡入，别一起蹦出来（顺序感留着，但别让人等） */ .card:nth-of-type(1) { animation-delay: .012s; } .card:nth-of-type(2) { animation-delay: .024s; } .card:nth-of-type(3) { animation-delay: .032s; } .card:nth-of-type(4) { animation-delay: .040s; } .card:nth-of-type(5) { animation-delay: .046s; } .card:nth-of-type(n+6) { animation-delay: .050s; } @keyframes card-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .card-title { margin: 0 0 14px; font-size: 17px; font-weight: 600; letter-spacing: -0.02em; display: flex; align-items: center; gap: 8px; } .small-title { font-size: 15px; } /* =================================================================== 6. 页面大标题（iOS 的 Large Title） =================================================================== */ .hero { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; justify-content: space-between; margin: 4px 2px 20px; } .hero-title { margin: 2px 0 0; font-size: 30px; font-weight: 700; letter-spacing: -0.035em; line-height: 1.2; } .today-head { margin: 0 2px 20px; } .today-head .hero-title { font-size: 26px; line-height: 1.32; margin-top: 6px; } .stats { display: flex; gap: 8px; } .stat { background: var(--card); border-radius: var(--r-md); padding: 9px 14px; text-align: center; min-width: 76px; box-shadow: var(--shadow-card); } .stat-num { font-size: 20px; font-weight: 700; color: var(--accent); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; } .stat-label { font-size: 11px; color: var(--label-2); white-space: nowrap; margin-top: 1px; } /* =================================================================== 7. 文字工具类 =================================================================== */ .muted { color: var(--label-2); } .small { font-size: 13.5px; } .empty { color: var(--label-2); font-size: 15px; margin: 6px 0 0; line-height: 1.7; } .tips { margin: 0; padding-left: 20px; color: var(--label-2); font-size: 14.5px; line-height: 1.7; } .tips li { margin: 6px 0; } .tips strong { color: var(--label); } .alert { background: rgba(255, 149, 0, 0.14); color: var(--orange); padding: 12px 14px; border-radius: var(--r-md); font-size: 14px; line-height: 1.6; margin-bottom: 14px; } .warn-text { color: var(--orange); } .ok-text { color: var(--green); } .err-text { color: var(--red); word-break: break-word; } /* =================================================================== 8. 按钮 =================================================================== */ .btn { appearance: none; border: none; background: var(--fill); color: var(--label); border-radius: var(--r-sm); padding: 10px 16px; font-size: 15px; font-weight: 500; font-family: inherit; letter-spacing: -0.01em; cursor: pointer; flex: none; -webkit-tap-highlight-color: transparent; transition: opacity var(--dur) var(--ease), transform .12s var(--ease), background var(--dur) var(--ease); } .btn:hover { opacity: .82; } .btn:active { transform: scale(.97); opacity: .7; } .btn:disabled { opacity: .38; cursor: default; transform: none; } .btn-primary { background: var(--accent); color: #fff; font-weight: 600; } .btn-primary:hover { opacity: 1; filter: brightness(1.06); } .btn-ghost { background: transparent; color: var(--accent); } .btn-ghost:hover { background: var(--accent-soft); opacity: 1; } .btn-sm { padding: 6px 12px; font-size: 14px; border-radius: 9px; } .btn-block { width: 100%; } /* =================================================================== 9. 表单 =================================================================== */ .stack { display: flex; flex-direction: column; gap: 10px; } .row-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .row-form .input { flex: 1; min-width: 120px; } .inline { display: inline; margin: 0; } .input { width: 100%; background: var(--fill); border: none; border-radius: var(--r-sm); color: var(--label); padding: 11px 13px; font-size: 16px; /* 小于 16px 时 iOS 会自动放大页面，很烦 */ font-family: inherit; letter-spacing: -0.01em; outline: none; -webkit-appearance: none; appearance: none; transition: box-shadow var(--dur) var(--ease), background var(--dur) var(--ease); } .input::placeholder { color: var(--label-3); } .input:focus { background: var(--card); box-shadow: 0 0 0 3.5px var(--accent-soft), 0 0 0 1px var(--accent) inset; } .select { flex: none; width: auto; min-width: 88px; /* 自己画下拉箭头，各平台看起来一致 */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23888' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; } .textarea { resize: vertical; line-height: 1.65; min-height: 80px; } /* =================================================================== 10. 列表 =================================================================== */ .list { list-style: none; margin: 10px 0 0; padding: 0; } .item { display: flex; align-items: flex-start; gap: 11px; padding: 12px 0; position: relative; } /* 内缩的细线，不是通栏线 */ .item + .item::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 0.5px; background: var(--sep); } .item.done .item-title { color: var(--label-3); text-decoration: line-through; } .item-main { flex: 1; min-width: 0; } .item-title { font-size: 16px; line-height: 1.45; word-break: break-word; } .item-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 4px; font-size: 13px; color: var(--label-2); } .stars { color: var(--orange); letter-spacing: 1.5px; font-size: 12.5px; } /* 圆形勾选 */ .check { width: 25px; height: 25px; flex: none; margin-top: 1px; border: 1.8px solid var(--label-3); border-radius: 50%; background: transparent; color: #fff; font-size: 13px; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: all .2s var(--ease); } .check:hover { border-color: var(--accent); } .check:active { transform: scale(.88); } .check.on { background: var(--green); border-color: var(--green); animation: pop .3s var(--ease); } @keyframes pop { 0% { transform: scale(.8); } 55% { transform: scale(1.12); } 100% { transform: scale(1); } } .tag { display: inline-block; background: var(--fill); border-radius: 7px; padding: 2px 8px; font-size: 12px; color: var(--label-2); font-weight: 500; } .tag.ok { background: rgba(52, 199, 89, .16); color: var(--green); } .day-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } /* =================================================================== 11. 登录页 =================================================================== */ .login-wrap { min-height: 72vh; display: flex; align-items: center; justify-content: center; } .login-card { width: 100%; max-width: 340px; padding: 32px 24px; box-shadow: var(--shadow-float); } .login-title { font-size: 26px; font-weight: 700; letter-spacing: -0.03em; margin: 0 0 6px; display: flex; align-items: center; gap: 9px; } /* =================================================================== 12. 对话页 =================================================================== */ .chat-card { display: flex; flex-direction: column; } .chat-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; } .chat-head .card-title { margin: 0; } .messages { display: flex; flex-direction: column; gap: 9px; min-height: 300px; max-height: calc(100vh - 330px); overflow-y: auto; padding: 6px 2px 12px; scrollbar-width: thin; } .chat-hint { color: var(--label-2); font-size: 14px; text-align: center; padding: 28px 12px; line-height: 1.9; } /* 气泡：iOS 信息那种大圆角 + 一侧收窄 */ .bubble { max-width: 84%; padding: 10px 14px; border-radius: 19px; font-size: 15.5px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; animation: bubble-in .35s var(--ease) both; } @keyframes bubble-in { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } } .bubble.user { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 5px; } .bubble.assistant { align-self: flex-start; background: var(--card-2); color: var(--label); border-bottom-left-radius: 5px; } .bubble.pending::after { content: "▍"; color: var(--accent); animation: blink 1s steps(2) infinite; } @keyframes blink { 50% { opacity: 0; } } .composer { display: flex; gap: 8px; align-items: flex-end; border-top: 0.5px solid var(--sep); padding-top: 14px; } .composer .textarea { flex: 1; max-height: 150px; } /* =================================================================== 13. 状态条 / 健康检查 =================================================================== */ .status-card { padding: 14px 18px; } .status-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .status-text { font-size: 14px; color: var(--label-2); flex: 1; min-width: 160px; } .status-actions { display: flex; gap: 8px; flex: none; } .pulse { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-right: 7px; animation: pulse 1.3s var(--ease) infinite; } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .3; transform: scale(.65); } } .feed-details { margin-top: 12px; } .feed-details summary { cursor: pointer; outline: none; font-size: 14px; } .feed-table { width: 100%; border-collapse: collapse; margin: 12px 0 8px; font-size: 13.5px; } .feed-table th { text-align: left; color: var(--label-2); font-weight: 500; font-size: 12px; padding: 4px 8px 6px 0; border-bottom: 0.5px solid var(--sep); } .feed-table td { padding: 7px 8px 7px 0; vertical-align: top; } /* =================================================================== 14. 分类切换（iOS 分段控件） =================================================================== */ .tabs { display: flex; gap: 4px; overflow-x: auto; margin: 0 0 16px; padding: 3px; background: var(--fill); border-radius: var(--r-sm); scrollbar-width: none; width: fit-content; max-width: 100%; } .tabs::-webkit-scrollbar { display: none; } .tabs a { flex: none; color: var(--label-2); border-radius: 8px; padding: 6px 13px; font-size: 14px; font-weight: 500; white-space: nowrap; transition: all var(--dur) var(--ease); } .tabs a:hover { color: var(--label); opacity: 1; } /* 选中那个「浮起来」，就像 iOS 的分段控件 */ .tabs a.on { background: var(--card); color: var(--label); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 0 0 0.5px rgba(0, 0, 0, .04); } .tab-n { opacity: .5; font-size: 12px; margin-left: 2px; } .chips { display: flex; gap: 7px; overflow-x: auto; margin: -8px 0 16px; scrollbar-width: none; } .chips::-webkit-scrollbar { display: none; } .chip { flex: none; color: var(--label-2); background: var(--fill-2); border-radius: var(--r-pill); padding: 6px 14px; font-size: 13.5px; white-space: nowrap; transition: all var(--dur) var(--ease); } .chip:hover { background: var(--fill); color: var(--label); opacity: 1; } .chip.on { background: var(--accent); color: #fff; font-weight: 500; } /* =================================================================== 15. 新闻 / 论文列表 =================================================================== */ .news-list { padding: 6px 18px; } .news-item { display: flex; align-items: flex-start; gap: 11px; padding: 15px 0; position: relative; } .news-item + .news-item::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 0.5px; background: var(--sep); } .news-main { flex: 1; min-width: 0; } .news-title { color: var(--label); font-size: 16px; font-weight: 600; line-height: 1.42; display: block; letter-spacing: -0.015em; transition: color var(--dur) var(--ease); } .news-title:hover { color: var(--accent); opacity: 1; } .news-item.read .news-title { color: var(--label-3); font-weight: 400; } .unread-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-right: 8px; vertical-align: middle; } .news-summary { display: block; color: var(--label-2); font-size: 13.5px; line-height: 1.6; margin-top: 5px; } .news-actions { display: flex; align-items: center; gap: 2px; flex: none; padding-top: 1px; } .star { background: transparent; border: none; color: var(--label-3); font-size: 20px; line-height: 1; cursor: pointer; padding: 3px 6px; -webkit-tap-highlight-color: transparent; transition: color var(--dur) var(--ease), transform .15s var(--ease); } .star:hover { color: var(--orange); transform: scale(1.18); } .star:active { transform: scale(.9); } .star.on { color: var(--orange); } .paper-item { padding: 16px 0; } .paper-authors { color: var(--label-2); font-size: 13.5px; margin-top: 6px; line-height: 1.55; } .pdf-link { color: var(--accent); font-size: 13px; white-space: nowrap; font-weight: 500; } .abstract { margin-top: 9px; } .abstract summary { color: var(--label-2); font-size: 13px; cursor: pointer; outline: none; user-select: none; transition: color var(--dur) var(--ease); } .abstract summary:hover { color: var(--accent); } .abstract p { margin: 9px 0 0; color: var(--label-2); font-size: 14px; line-height: 1.75; text-align: justify; } .abstract p + p { margin-top: 7px; } /* =================================================================== 16. 阅读题 =================================================================== */ .reading-head { margin-bottom: 16px; } .reading-title { margin: 0 0 6px; font-size: 22px; font-weight: 650; letter-spacing: -0.025em; line-height: 1.35; } /* 正文：日文行距放宽，读着不累 */ .passage { background: var(--card-2); border-radius: var(--r-md); padding: 18px 20px; font-size: 16.5px; line-height: 2.0; white-space: pre-wrap; word-break: break-word; } .score-bar { margin: 18px 0 0; padding: 13px 16px; border-radius: var(--r-md); font-size: 16px; font-weight: 600; letter-spacing: -0.01em; animation: card-in .22s var(--ease) both; } .score-bar.good { background: rgba(52, 199, 89, .16); color: var(--green); } .score-bar.mid { background: rgba(255, 149, 0, .16); color: var(--orange); } .quiz { margin-top: 20px; } .quiz-q { border: none; border-radius: 0; padding: 0 0 20px; margin: 0 0 20px; position: relative; } .quiz-q + .quiz-q::before { content: ""; position: absolute; top: -20px; left: 0; right: 0; height: 0.5px; background: var(--sep); } .quiz-q legend { padding: 0; margin-bottom: 10px; font-size: 16px; font-weight: 600; line-height: 1.5; letter-spacing: -0.015em; } .q-no { display: inline-flex; align-items: center; justify-content: center; width: 23px; height: 23px; background: var(--accent); color: #fff; border-radius: 50%; font-size: 12.5px; font-weight: 600; margin-right: 9px; vertical-align: 1px; } /* 选项：大圆角行，选中/对错都有明确反馈 */ .opt { display: flex; align-items: flex-start; gap: 11px; padding: 12px 14px; margin-top: 8px; background: var(--card-2); border-radius: var(--r-md); cursor: pointer; font-size: 15.5px; line-height: 1.55; transition: background var(--dur) var(--ease), transform .12s var(--ease), box-shadow var(--dur) var(--ease); } .opt:hover { background: var(--fill); } .opt:active { transform: scale(.985); } .opt input { margin: 3px 0 0; flex: none; accent-color: var(--accent); } .opt.correct { background: rgba(52, 199, 89, .16); box-shadow: 0 0 0 2px var(--green) inset; } .opt.wrong { background: rgba(255, 59, 48, .14); box-shadow: 0 0 0 2px var(--red) inset; } .opt:has(input:disabled) { cursor: default; } .opt:has(input:disabled):active { transform: none; } .explain { margin-top: 11px; padding: 12px 14px; background: var(--fill-2); border-radius: var(--r-sm); color: var(--label-2); font-size: 14px; line-height: 1.75; } .vocab { list-style: none; margin: 0; padding: 0; } .vocab li { display: flex; align-items: center; gap: 11px; padding: 11px 0; position: relative; } .vocab li + li::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 0.5px; background: var(--sep); } .vocab-main { flex: 1; min-width: 0; } .vocab-word { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; } .vocab-reading { color: var(--label-2); font-size: 13px; margin-left: 9px; font-weight: 400; } .vocab-meaning { color: var(--label-2); font-size: 14px; margin-top: 2px; } /* =================================================================== 17. 课表 =================================================================== */ .mono { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: 13px; line-height: 1.8; } .err-list { margin: 10px 0 0; padding-left: 20px; color: var(--orange); font-size: 13.5px; line-height: 1.8; } .day-card.is-today { box-shadow: 0 0 0 2px var(--accent) inset, var(--shadow-card); } .day-card .day-head { margin-bottom: 6px; } .day-card .card-title { margin-bottom: 0; } .course-list { list-style: none; margin: 10px 0 0; padding: 0; } .course { display: flex; align-items: flex-start; gap: 13px; padding: 14px 0; position: relative; } .course + .course::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 0.5px; background: var(--sep); } .course-time { flex: none; width: 64px; font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; padding-top: 1px; } .course-time .muted { font-weight: 400; font-size: 12.5px; display: block; } .course-main { flex: 1; min-width: 0; } .course-name { font-size: 16.5px; font-weight: 600; letter-spacing: -0.015em; word-break: break-word; } .course-actions { display: flex; flex-direction: column; gap: 5px; flex: none; } /* AI 评分卡：左边一条颜色条 */ .verdict { margin-top: 11px; padding: 12px 15px; border-radius: var(--r-md); background: var(--card-2); position: relative; overflow: hidden; } .verdict::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3.5px; background: var(--label-3); } .verdict-go::before { background: var(--green); } .verdict-maybe::before { background: var(--orange); } .verdict-skip::before { background: var(--red); } .verdict-head { display: flex; align-items: baseline; gap: 9px; } .verdict-score { font-size: 24px; font-weight: 700; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; } .verdict-go .verdict-score { color: var(--green); } .verdict-maybe .verdict-score { color: var(--orange); } .verdict-skip .verdict-score { color: var(--red); } .verdict-label { font-size: 14.5px; font-weight: 600; } .verdict-reason { margin-top: 7px; font-size: 14px; line-height: 1.75; color: var(--label-2); } .verdict-use { margin-top: 7px; font-size: 13.5px; line-height: 1.7; color: var(--accent); } /* =================================================================== 18. 提醒页 / 代码块 =================================================================== */ .codeblock { background: var(--card-2); border-radius: var(--r-md); padding: 13px 15px; margin: 9px 0 0; font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.8; color: var(--label-2); overflow-x: auto; white-space: pre; } .codeblock.digest { white-space: pre-wrap; word-break: break-word; font-size: 13.5px; line-height: 1.9; color: var(--label); } /* =================================================================== 19. 规划助手 =================================================================== */ .mini-list { list-style: none; margin: 0; padding: 0; font-size: 15px; } .mini-list li { display: flex; align-items: baseline; gap: 9px; padding: 5px 0; line-height: 1.6; } .mono-time { flex: none; color: var(--label-2); font-size: 12.5px; font-variant-numeric: tabular-nums; font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; } .mini-list li.now { color: var(--accent); font-weight: 600; } .mini-list li.now .mono-time { color: var(--accent); } .proposal-card { box-shadow: 0 0 0 2px var(--accent) inset, var(--shadow-card); } .plan-request { color: var(--label-2); font-size: 14px; padding: 10px 14px; background: var(--card-2); border-radius: var(--r-sm); margin-bottom: 14px; } .plan-reply { font-size: 16px; line-height: 1.8; letter-spacing: -0.01em; white-space: pre-wrap; word-break: break-word; } .action-list { list-style: none; margin: 0; padding: 0; background: var(--card-2); border-radius: var(--r-md); overflow: hidden; } .action-list li { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 12px 15px; position: relative; font-size: 15px; } .action-list li + li::before { content: ""; position: absolute; top: 0; left: 15px; right: 0; height: 0.5px; background: var(--sep); } /* =================================================================== 20. 首页「今天还剩」 =================================================================== */ .todo-card { padding: 8px 18px 10px; } .todo-card .card-title { padding-top: 12px; } .todo-list { list-style: none; margin: 0; padding: 0; } .todo-list li { position: relative; } .todo-list li + li::before { content: ""; position: absolute; top: 0; left: 46px; right: 0; /* 内缩到文字开头，跟 iOS 一样 */ height: 0.5px; background: var(--sep); } .todo-list a { display: flex; align-items: center; gap: 12px; padding: 13px 0; min-height: 50px; color: var(--label); transition: opacity var(--dur) var(--ease); } .todo-list a:hover { opacity: .6; } .todo-list a:active { opacity: .45; } .todo-icon { flex: none; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--accent-soft); color: var(--accent); } .todo-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .todo-text { flex: 1; font-size: 15.5px; letter-spacing: -0.01em; } .todo-arrow { flex: none; color: var(--label-4); font-size: 22px; line-height: 1; } /* =================================================================== 21. 「更多」页 =================================================================== */ .more-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; } @media (max-width: 430px) { .more-grid { grid-template-columns: 1fr; } } .more-tile { display: flex; flex-direction: column; gap: 6px; padding: 17px; min-height: 96px; background: var(--card); border-radius: var(--r-lg); color: var(--label); box-shadow: var(--shadow-card); animation: card-in .22s var(--ease) both; transition: transform .16s var(--ease), opacity var(--dur) var(--ease); } .more-tile:nth-child(1) { animation-delay: .012s; } .more-tile:nth-child(2) { animation-delay: .024s; } .more-tile:nth-child(3) { animation-delay: .032s; } .more-tile:nth-child(4) { animation-delay: .040s; } .more-tile:nth-child(5) { animation-delay: .046s; } .more-tile:nth-child(6) { animation-delay: .050s; } .more-tile:hover { opacity: 1; transform: translateY(-2px); } .more-tile:active { transform: scale(.975); } .more-icon { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); margin-bottom: 2px; } .more-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .more-name { font-size: 16px; font-weight: 600; letter-spacing: -0.02em; } .more-meta { font-size: 13px; color: var(--label-2); line-height: 1.5; } /* =================================================================== 22. 底部导航（毛玻璃） =================================================================== */ .tabbar { display: none; } /* 断点选 900px：iPad 竖屏正好 768px 宽，按 768 切的话平板会掉进桌面版布局 */ @media (max-width: 900px) { /* 手机上顶部那条太挤，收起来；没进底部栏的页面统一走「更多」 */ .topbar .nav { display: none; } .topbar { padding: 8px 14px; } body { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); } .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; background: var(--chrome); -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px); border-top: 0.5px solid var(--sep); padding-bottom: env(safe-area-inset-bottom, 0px); } .tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 56px; color: var(--label-3); font-size: 10.5px; font-weight: 500; letter-spacing: 0; -webkit-tap-highlight-color: transparent; transition: color var(--dur) var(--ease); } .tabbar a svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; transition: transform .22s var(--ease); } .tabbar a.on { color: var(--accent); } .tabbar a.on svg { transform: translateY(-1px) scale(1.06); } .tabbar a:active svg { transform: scale(.86); } /* 触控尺寸不小于 44px；输入框 16px 防止 iOS 自动缩放页面 */ .btn { min-height: 44px; padding: 12px 17px; font-size: 16px; } .btn-sm { min-height: 34px; padding: 7px 12px; font-size: 14px; } .input { min-height: 46px; } .select { min-height: 46px; } .wrap { padding: 16px 14px 44px; } .card { padding: 16px; } .check { width: 27px; height: 27px; } .hero-title { font-size: 26px; } .today-head .hero-title { font-size: 22px; } } /* =================================================================== 23. 页脚 =================================================================== */ .foot { text-align: center; color: var(--label-3); font-size: 12px; padding: 24px 0 32px; } /* =================================================================== 24. 无障碍 =================================================================== */ /* 尊重系统的「减弱动态效果」 */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } /* =================================================================== 26. 主站首页（mimila.cn / 小小咪） ------------------------------------------------------------------- 和 App 里那些页面的区别： · 没有底部导航、没有登录相关的东西 —— 访客看到的第一眼就是聊天 · 版心更窄（<560px）：聊天内容太宽反而不好读 · 只有顶部一条很轻的导航（主页 / 后厨）刻意**不继承** base.html：主站是给外人看的门面，混进 App 的导航和"记忆档案"这类词会让人一头雾水。 =================================================================== */ body.home { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; } .home-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; padding-top: calc(14px + env(safe-area-inset-top, 0px)); max-width: 640px; margin: 0 auto; width: 100%; } .home-brand { display: flex; align-items: center; gap: 9px; font-size: 18px; font-weight: 700; letter-spacing: -0.02em; color: var(--label); text-decoration: none; } .home-brand img { border-radius: 8px; display: block; } .home-nav { display: flex; gap: 4px; background: var(--fill); padding: 3px; border-radius: 999px; } .home-nav a { padding: 6px 15px; border-radius: 999px; font-size: 14.5px; font-weight: 600; color: var(--label-2); text-decoration: none; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } .home-nav a.on { background: var(--card); color: var(--label); box-shadow: 0 1px 3px rgba(0, 0, 0, .1); } .home-nav a:not(.on):hover { color: var(--label); } .home-wrap { flex: 1; width: 100%; max-width: 640px; margin: 0 auto; padding: 6px 20px 20px; } .home-warn { border-left: 3px solid var(--orange); } .home-warn p { margin: 6px 0 0; color: var(--label-2); font-size: 14px; } .home-chat { display: flex; flex-direction: column; } .home-chat-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-weight: 600; font-size: 15px; } .home-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(52, 199, 89, .18); } .home-clear { margin-left: auto; background: none; border: none; padding: 4px 8px; font-size: 13px; font-family: inherit; color: var(--label-2); cursor: pointer; border-radius: 8px; } .home-clear:hover { background: var(--fill); color: var(--label); } .home-messages { display: flex; flex-direction: column; gap: 9px; min-height: 44vh; max-height: 52vh; overflow-y: auto; padding: 4px 2px 12px; scrollbar-width: thin; } .home-form { display: flex; gap: 9px; align-items: flex-end; padding-top: 12px; border-top: 1px solid var(--sep); } .home-form textarea { flex: 1; resize: none; min-height: 42px; max-height: 150px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--sep); background: var(--fill); color: var(--label); font: inherit; font-size: 15.5px; line-height: 1.5; } .home-form textarea:focus { outline: none; border-color: var(--accent); background: var(--card); } /* 额度用完 / 次数用满时，替代输入框的那块提示。为什么不用禁用输入框：禁用框 + 一句报错，访客只会在那儿反复点，不知道是坏了还是怎么了。把状态说清楚、并告诉他什么时候能再来。 */ .home-blocked { padding: 16px 18px; border-radius: var(--r-md); background: rgba(255, 149, 0, .12); border: 1px solid rgba(255, 149, 0, .25); text-align: center; } .home-blocked-title { font-size: 15.5px; font-weight: 600; color: var(--orange); } .home-blocked-sub { margin-top: 5px; font-size: 13.5px; color: var(--label-2); } /* 标题右边那个「今天还剩多少」 */ .home-left { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--label-3); font-variant-numeric: tabular-nums; padding: 3px 9px; border-radius: 999px; background: var(--fill); } /* 有了这个徽标，清空按钮就不用再自己 margin-left:auto 了 */ .home-chat-head .home-clear { margin-left: 8px; } .home-meta { margin: 10px 0 0; font-size: 12.5px; color: var(--label-2); text-align: center; } .home-meta-hint { opacity: .75; } .home-foot { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 18px 20px calc(18px + env(safe-area-inset-bottom, 0px)); font-size: 13px; color: var(--label-2); } .home-foot a { color: var(--label-2); text-decoration: none; } .home-foot a:hover { color: var(--accent); } /* 额度用完 / 被拒绝时那条气泡：一眼看出不是小小咪说的话 */ .bubble.denied { background: rgba(255, 149, 0, .14); color: var(--orange); font-size: 14.5px; align-self: flex-start; } @media (max-width: 520px) { .home-top { padding-left: 16px; padding-right: 16px; } .home-wrap { padding-left: 16px; padding-right: 16px; } .home-messages { min-height: 40vh; max-height: 48vh; } } /* =================================================================== 27. 设置页（/site）用的小组件 ------------------------------------------------------------------- 复用已有的 .card / .stats / .stat-num / .stat-label / .alert / .btn，这里只补设置页独有的那几个。 =================================================================== */ .hint { color: var(--label-2); font-size: 13.5px; line-height: 1.7; margin: 6px 0 14px; } .hint strong { color: var(--label); } /* 人设那个大文本框 */ .mono-area { width: 100%; box-sizing: border-box; padding: 13px 15px; border-radius: var(--r-md); border: 1px solid var(--sep); background: var(--fill); color: var(--label); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13.5px; line-height: 1.75; resize: vertical; min-height: 180px; } .mono-area:focus { outline: none; border-color: var(--accent); background: var(--card); } .field-row { display: flex; gap: 12px; flex-wrap: wrap; margin: 14px 0 0; } .field { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 160px; } .field span { font-size: 13px; color: var(--label-2); } .field input { padding: 10px 13px; border-radius: var(--r-sm); border: 1px solid var(--sep); background: var(--fill); color: var(--label); font: inherit; font-size: 15px; } .field input:focus { outline: none; border-color: var(--accent); background: var(--card); } .btn-row { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; margin-top: 14px; } /* 折叠的「看看兜底人设」 */ .fold { margin-top: 18px; } .fold summary { cursor: pointer; font-size: 14px; color: var(--accent); padding: 6px 0; } .fold summary:hover { opacity: .8; } .mono-block { background: var(--fill); border-radius: var(--r-md); padding: 13px 15px; margin: 8px 0 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.75; color: var(--label-2); white-space: pre-wrap; word-break: break-word; max-height: 340px; overflow-y: auto; } /* 图标预览 */ .icon-preview { display: flex; align-items: center; gap: 14px; padding: 13px 15px; background: var(--fill); border-radius: var(--r-md); margin-bottom: 16px; } .icon-preview img { border-radius: 12px; display: block; background: var(--card); box-shadow: var(--shadow-card); } .icon-state { font-size: 14.5px; } .icon-state strong { color: var(--accent); } /* 上传文件那个原生控件，给它一点体面 */ input[type="file"] { font: inherit; font-size: 14px; color: var(--label-2); max-width: 100%; } input[type="file"]::file-selector-button { font: inherit; font-size: 14px; margin-right: 10px; padding: 8px 14px; border: none; border-radius: var(--r-sm); background: var(--fill); color: var(--label); cursor: pointer; } input[type="file"]::file-selector-button:hover { background: var(--fill-2); } /* 保存成功那条 */ .notice-ok { background: rgba(52, 199, 89, .14); color: var(--green); font-size: 14.5px; line-height: 1.6; } .notice-ok a { color: var(--green); } /* 「已公开」那个小标签：一眼看出哪几条会出现在主站上 */ .tag-public { background: rgba(52, 199, 89, .16); color: var(--green); font-weight: 600; } /* ---------- 起草人设那块 ---------- */ .draft-box { margin-bottom: 16px; } .draft-body { padding-top: 4px; } .draft-result { margin-top: 14px; padding: 13px 15px; border-radius: var(--r-md); font-size: 14px; line-height: 1.75; background: var(--fill); } .draft-result.ok { background: rgba(52, 199, 89, .12); border: 1px solid rgba(52, 199, 89, .22); } .draft-result.warn { background: rgba(255, 149, 0, .12); border: 1px solid rgba(255, 149, 0, .25); color: var(--orange); } .draft-sub { margin-top: 12px; font-size: 12.5px; font-weight: 600; color: var(--label-2); } .draft-list { margin: 5px 0 0; padding-left: 20px; color: var(--label); font-size: 13.5px; line-height: 1.8; } .pending-text { color: var(--label-2); } /* 键盘操作的焦点要看得见；鼠标点击时不显示，两边都照顾到 */ :focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; border-radius: 6px; } /* =================================================================== 25. 即时反馈 + 缓存提示 ------------------------------------------------------------------- 为什么需要：手机在境外服务器上，点一次导航要等一个网络往返（实测 180-200ms，从国内出海到 VPS 基本就是这个数，改不掉）。等待本身不可怕，**「按下去毫无反应」才让人焦虑**。所以这里做两件事： 1. 手指按下（或点击）的瞬间就点亮目标按钮 + 顶部出一条进度条 —— 页面还在路上，但用户已经知道「它收到了」 2. 如果显示的是缓存页面，顶部给一条能看懂的提示 —— 不能让人误以为「我加的东西丢了」 =================================================================== */ /* --- 按下/点击的瞬间就点亮 --- */ .tabbar a.nav-busy, .nav a.nav-busy { color: var(--accent) !important; } .tabbar a.nav-busy svg { transform: translateY(-1px) scale(1.06); color: var(--accent); } /* 按钮本身也压一下，手感更像原生 */ .tabbar a.nav-busy { opacity: .75; } /* --- 顶部那条细进度条 --- */ .nav-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 9999; pointer-events: none; opacity: 0; transition: opacity .12s var(--ease); } .nav-progress::after { content: ""; display: block; height: 100%; width: 40%; border-radius: 0 3px 3px 0; background: var(--accent); animation: nav-slide 0.9s var(--ease) infinite; } .nav-progress.on { opacity: 1; } @keyframes nav-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } } /* --- 「显示的是缓存」提示条 --- */ .cache-note { position: fixed; left: 50%; top: calc(8px + env(safe-area-inset-top, 0px)); transform: translate(-50%, -140%); z-index: 9998; display: flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: #7A4B00; background: #FFE9B8; box-shadow: 0 6px 20px rgba(0, 0, 0, .16); transition: transform .22s var(--ease); pointer-events: none; max-width: calc(100vw - 32px); } [data-theme="dark"] .cache-note { color: #FFD98A; background: #46340F; } .cache-note.on { transform: translate(-50%, 0); } .cache-note.ok { color: #14632F; background: #CFF3DA; } [data-theme="dark"] .cache-note.ok { color: #A7E8BC; background: #123A22; } .cache-note.warn { color: #7A2E00; background: #FFDCC2; } [data-theme="dark"] .cache-note.warn { color: #FFC49B; background: #46220C; } .cache-note svg { width: 15px; height: 15px; flex: 0 0 auto; stroke: currentColor; stroke-width: 2.2; fill: none; stroke-linecap: round; } /* 「正在取最新」时让那个小图标转起来，一眼知道它在干活 */ .cache-note.loading svg { animation: spin .9s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } }