/* =================================================================== Haresora 现代设计层 (modern.css) ------------------------------------------------------------------- 叠在 styles.css 之上，负责全部视觉身份：圆角、层次、动效、排版。 只使用 --hrs-* 设计 token（在 styles.css 的 :root / html.dark-mode 中定义），因此明暗两套主题无需在这里写第二遍。 加载顺序：styles.css -> modern.css（见 templates/includes/layout.html） 约定： · 动效一律用贝塞尔曲线，不用 linear / ease · 圆角一律走 --r-* 变量，不写字面量 · 层级靠「底色差 + 边框 + 阴影」三者配合，不靠描边 =================================================================== */ /* ============ 1. 滚动条 ============ */ * { scrollbar-width: thin; scrollbar-color: var(--hrs-scrollbar) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--hrs-scrollbar); border-radius: var(--r-pill); border: 3px solid transparent; background-clip: content-box; transition: background-color var(--t) var(--ease); } ::-webkit-scrollbar-thumb:hover { background-clip: content-box; background-color: var(--hrs-scrollbar-hover); } /* ============ 2. 焦点可见性（键盘可达性） ============ */ :focus-visible { outline: 2px solid var(--hrs-accent); outline-offset: 2px; border-radius: var(--r-sm); } .button:focus-visible, .btn:focus-visible { outline-offset: 1px; } /* 仅供读屏的标题：模板里有若干

，而 .voice 的隐藏规则 并不在编译后的样式里，所以必须由设计层补上 —— 少了它，页面结构标题会 变成一个巨大的可见标题，还会作为 flex 项把登录卡片挤离视觉中心。 */ .voice { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; } /* 浮层消息容器不参与布局 */ #messagestack:empty { display: none !important; } /* ============ 3. 应用外壳 ============ */ html, body, #layout { background: var(--hrs-bg) !important; color: var(--hrs-text); font-family: var(--hrs-sans) !important; font-size: 14px; line-height: 1.55; letter-spacing: 0; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } #layout { background: var(--hrs-bg) !important; gap: var(--s-3); padding: var(--s-3); box-sizing: border-box; } /* ---- 三块面板统一成「悬浮卡片」 ---- */ #layout-sidebar, #layout-list, #layout-content { background: var(--hrs-surface) !important; border: 1px solid var(--hrs-border) !important; border-radius: var(--r-lg) !important; box-shadow: var(--hrs-shadow-sm); overflow: hidden; transition: box-shadow var(--t) var(--ease), border-color var(--t) var(--ease); margin: 0; } #layout-sidebar:hover, #layout-list:hover, #layout-content:hover { box-shadow: var(--hrs-shadow-md); } /* 面板标题栏：更高、留白更足、底边更含蓄 */ .listbox > .header, #layout-content > .header { background: transparent !important; border-bottom: 1px solid var(--hrs-border); padding: var(--s-3) var(--s-4); min-height: 52px; box-sizing: border-box; display: flex; align-items: center; gap: var(--s-2); } .header-title { font-size: 13px; font-weight: 600; letter-spacing: .01em; color: var(--hrs-text) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .header .header-title.username { font-size: 14px; font-weight: 600; color: var(--hrs-text) !important; display: block; max-width: 100%; line-height: 1.3; } /* 面板底部（配额） */ .listbox > .footer { background: transparent !important; border-top: 1px solid var(--hrs-border) !important; padding: var(--s-3) var(--s-4); font-size: 12px; color: var(--hrs-text-2) !important; } .quota-widget { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); } .quota-widget .count { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--hrs-text); } /* ============ 4. 左侧导航（原 elastic 的任务栏图标条） ============ */ /* 改成一条有品牌、有文字的现代导航栏 —— 这是和原版观感差别最大的地方。 要点： 渲染出来是 ， 并不带 .button 类，所以必须按结构选（#taskmenu 下的直接子 a）。写成 a.button 的话整套导航样式一条都不会生效。 */ #layout-menu { background: var(--hrs-rail) !important; border: 1px solid var(--hrs-border); border-radius: var(--r-lg); box-shadow: var(--hrs-shadow-sm); width: var(--rail-w); flex: 0 0 var(--rail-w); padding: var(--s-3) var(--s-2); box-sizing: border-box; display: flex; flex-direction: column; overflow: hidden; min-height: 0; } /* 品牌区：elastic 的 .popover-header 原本只是个弹层标题（logo + 关闭按钮）， 这里改造成导航栏顶部的品牌行。 ⚠ 背景必须显式清成透明：elastic 给这一层铺的是「深色面」底色，换色时被 映射成 Latte 的文字色，于是浅色模式下变成深底压深字，整块读不出来。 */ #layout-menu .popover-header { display: flex !important; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-3) var(--s-4) !important; margin: 0 0 var(--s-3); border-bottom: 1px solid var(--hrs-border); background: transparent !important; border-radius: 0 !important; position: static !important; width: 100% !important; height: auto !important; } #layout-menu .popover-header #logo, #layout-menu .popover-header .hrs-brand-mark { width: 34px !important; height: 34px !important; flex: 0 0 34px; margin: 0 !important; border-radius: var(--r-sm); box-shadow: 0 2px 8px var(--hrs-accent-glow); animation: none; } #layout-menu .popover-header .hrs-rail-name { font-size: 15px; font-weight: 700; letter-spacing: -.015em; color: var(--hrs-text) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 这个关闭按钮是给移动端抽屉用的，常驻桌面导航栏里没有意义 */ #layout-menu .popover-header a.cancel { display: none !important; } #taskmenu { display: flex !important; flex-direction: column; gap: 2px; flex: 1 1 auto; min-height: 0; background: transparent !important; border: 0 !important; padding: 0 !important; position: static !important; overflow: hidden; } #taskmenu .action-buttons { display: block !important; width: 100% !important; max-width: none !important; margin-bottom: var(--s-3); } /* elastic 把这一组做成绝对定位（给折叠抽屉用），会溢出导航栏底部被裁掉， 这里改回正常流并靠 margin-top:auto 贴底。 */ #taskmenu .special-buttons { position: static !important; display: flex !important; flex-direction: column; gap: 2px; width: 100% !important; margin-top: auto; padding-top: var(--s-3); border-top: 1px solid var(--hrs-border); background: transparent !important; /* elastic 在这层铺了深色底（见品牌区注释） */ border-radius: 0 !important; height: auto !important; inset: auto !important; } /* 导航项：图标 + 文字，圆角胶囊 */ #taskmenu > a, #taskmenu .action-buttons > a, #taskmenu .special-buttons > a { display: flex !important; align-items: center; gap: var(--s-3); width: 100% !important; /* elastic 在桌面档给 #taskmenu a 写死了 width: 78px，还带一个 max-width （算出来 84px）。width 我们的 !important 能压过，max-width 不能 —— 少了 这一行，导航项永远是 84px 宽，文字被挤成一团。 */ max-width: none !important; min-width: 0 !important; float: none !important; box-sizing: border-box; padding: 9px var(--s-3) !important; height: auto !important; min-height: 0 !important; border-radius: var(--r-md); color: var(--hrs-text-2) !important; background: transparent !important; border: 0 !important; font-size: 13.5px; font-weight: 500; line-height: 1.25; white-space: nowrap; text-decoration: none; position: relative; transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); } /* elastic 给折叠态做的文字旋转/缩进在这里必须全部中和 */ #taskmenu > a .inner, #taskmenu .action-buttons > a .inner, #taskmenu .special-buttons > a .inner { display: flex !important; align-items: center; gap: var(--s-3); width: auto !important; padding: 0 !important; margin: 0 !important; background: none !important; text-indent: 0 !important; overflow: visible !important; transform: none !important; writing-mode: horizontal-tb !important; font-size: inherit !important; line-height: inherit !important; white-space: nowrap; text-align: left; } /* 图标槽：固定宽，保证所有导航项文字左对齐在同一条线上 */ #taskmenu > a:before, #taskmenu .action-buttons > a:before, #taskmenu .special-buttons > a:before { font-family: 'Icons' !important; font-size: 15px; width: 20px; min-width: 20px; text-align: center; display: inline-block; color: inherit; opacity: .9; transition: transform var(--t) var(--ease-spring); } #taskmenu > a:hover, #taskmenu .action-buttons > a:hover, #taskmenu .special-buttons > a:hover { background: var(--hrs-hover) !important; color: var(--hrs-text) !important; } #taskmenu a:hover:before { transform: scale(1.14); } #taskmenu a:active { transform: scale(.985); } /* 选中态：强调色胶囊 + 左侧色条 */ #taskmenu a.selected { background: var(--hrs-accent-tint) !important; color: var(--hrs-accent) !important; font-weight: 600; } #taskmenu a.selected:before { color: var(--hrs-accent); opacity: 1; } #taskmenu a.selected:after { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 18px; margin-top: -9px; border-radius: var(--r-pill); background: var(--hrs-accent); animation: hrs-grow-y var(--t) var(--ease); } @keyframes hrs-grow-y { from { height: 0; opacity: 0; } to { height: 18px; opacity: 1; } } /* 「撰写」是主行动，做成实心强调色按钮 */ #taskmenu a.compose { background: var(--hrs-accent) !important; color: var(--hrs-accent-ink) !important; font-weight: 600; justify-content: flex-start; box-shadow: 0 2px 10px var(--hrs-accent-glow); } #taskmenu a.compose:before { color: var(--hrs-accent-ink) !important; opacity: 1; } #taskmenu a.compose:hover { filter: brightness(1.07); box-shadow: 0 4px 16px var(--hrs-accent-glow); color: var(--hrs-accent-ink) !important; background: var(--hrs-accent) !important; } #taskmenu a.compose.selected { background: var(--hrs-accent) !important; } #taskmenu a.compose.selected:after { display: none; } /* ============ 5. 文件夹树 ============ */ #folderlist-content { padding: var(--s-2); } #mailboxlist.listing { background: transparent !important; border: 0 !important; width: 100%; border-collapse: separate; border-spacing: 0 1px; } #mailboxlist li, #mailboxlist tr { transition: background-color var(--t-fast) var(--ease); } #mailboxlist li a, #mailboxlist a { display: flex !important; align-items: center; gap: var(--s-2); padding: 8px 10px; border-radius: var(--r-sm); color: var(--hrs-text-2) !important; font-size: 13.5px; text-decoration: none; transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); } #mailboxlist a:hover { background: var(--hrs-hover) !important; color: var(--hrs-text) !important; } #mailboxlist a:active { transform: scale(.99); } #mailboxlist .selected > a, #mailboxlist li.selected > a, #mailboxlist a.selected { background: var(--hrs-accent-tint) !important; color: var(--hrs-accent) !important; font-weight: 600; } /* 未读计数做成小胶囊 */ #mailboxlist .unreadcount, #mailboxlist .count, #mailboxlist a .unreadcount { margin-left: auto; background: var(--hrs-accent); color: var(--hrs-accent-ink); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; padding: 4px 7px; border-radius: var(--r-pill); min-width: 18px; text-align: center; box-sizing: border-box; } #mailboxlist .totalcount { color: var(--hrs-text-3) !important; font-size: 11px; } #mailboxlist .folder-icon:before, #mailboxlist .icon:before { font-family: 'Icons' !important; } /* ============ 6. 邮件列表 ============ */ #messagelist-content { padding: 0 var(--s-2) var(--s-2); } #messagelist.listing { width: 100%; border-collapse: separate; border-spacing: 0 2px; background: transparent !important; border: 0 !important; table-layout: fixed; } /* 表头：吸顶 + 毛玻璃 */ #messagelist thead th, #messagelist .sortheader thead th { position: sticky; top: 0; z-index: 3; background: var(--hrs-surface-blur) !important; backdrop-filter: blur(12px) saturate(1.4); -webkit-backdrop-filter: blur(12px) saturate(1.4); border-bottom: 1px solid var(--hrs-border) !important; color: var(--hrs-text-3) !important; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; padding: var(--s-2) var(--s-3); text-align: left; } #messagelist thead th a { color: inherit !important; } /* 行：圆角、悬停浮起 */ #messagelist tbody tr { cursor: pointer; transition: background-color var(--t-fast) var(--ease), box-shadow var(--t) var(--ease), transform var(--t-fast) var(--ease); } #messagelist tbody tr > td { background: transparent; border: 0 !important; padding: 10px var(--s-3); vertical-align: middle; transition: background-color var(--t-fast) var(--ease); } #messagelist tbody tr:hover > td { background: var(--hrs-hover); } #messagelist tbody tr:hover { transform: translateX(2px); } #messagelist tbody tr:hover > td:first-child { border-radius: var(--r-md) 0 0 var(--r-md); } #messagelist tbody tr:hover > td:last-child { border-radius: 0 var(--r-md) var(--r-md) 0; } /* 选中行 */ #messagelist tbody tr.selected > td, #messagelist tbody tr.focused > td { background: var(--hrs-accent-tint) !important; } #messagelist tbody tr.selected > td:first-child { border-radius: var(--r-md) 0 0 var(--r-md); } #messagelist tbody tr.selected > td:last-child { border-radius: 0 var(--r-md) var(--r-md) 0; } #messagelist tbody tr.selected td.subject a { color: var(--hrs-accent) !important; } /* 未读：加粗 + 主色圆点 */ #messagelist tbody tr.unread td.fromto, #messagelist tbody tr.unread td.subject a { font-weight: 600; color: var(--hrs-text) !important; } #messagelist tbody tr.unread td.fromto:before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: var(--r-pill); background: var(--hrs-accent); box-shadow: 0 0 0 3px var(--hrs-accent-tint); vertical-align: middle; animation: hrs-pop var(--t) var(--ease-spring); } @keyframes hrs-pop { from { transform: scale(0); } to { transform: scale(1); } } #messagelist tbody tr:not(.unread) td.fromto { color: var(--hrs-text-2) !important; } #messagelist td.fromto { font-size: 13.5px; } #messagelist td.subject { font-size: 13.5px; } #messagelist td.subject a { color: var(--hrs-text); text-decoration: none; } #messagelist td.date { font-size: 12px; color: var(--hrs-text-3) !important; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; } #messagelist td.size { font-size: 11.5px; color: var(--hrs-text-3) !important; white-space: nowrap; } #messagelist td.attachment span.attachment:before { font-family: 'Icons' !important; color: var(--hrs-text-3); } #messagelist td.flags span { opacity: .85; } #messagelist .msgicon, #messagelist .icon { font-family: 'Icons' !important; } #messagelist tr.deleted > td { opacity: .45; text-decoration: line-through; } /* 列表里的部件（未读圆点/头像由 JS 注入） */ .hrs-avatar { width: 32px; height: 32px; flex: 0 0 32px; border-radius: var(--r-pill); display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 700; color: #fff; letter-spacing: .02em; user-select: none; background: var(--hrs-accent); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); } .hrs-fromto { display: inline-flex; align-items: center; gap: 9px; min-width: 0; } .hrs-fromto .hrs-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ============ 7. 工具栏与按钮 ============ */ /* ⚠ 必须 :not(.popupmenu)。elastic 在手机端把邮件列表工具栏做成