/* ============================================================ * 【主样式表 Main Stylesheet】（style.css） * * 作用域：个人主页全局视觉表现层——布局 / 排版 / 组件 / 响应式 / 光标。 * 设计系统：配色变量抽离至 root.css（--xxx），本表仅消费变量； * 换肤只需修改 即可全局切换。 * * 目录（Table of Contents）： * §1 全局重置（Global Reset） —— 清默认边距 / 统一盒模型 / 禁文本选中 / 去下划线 * §1.1 通配选择器 —— reset + box-sizing + transition 统一行为 * §1.2 链接重置 —— 去除所有状态下的下划线与高亮边框 * §1.3 滚动条隐藏 —— 全站隐藏滚动条（滚动功能不受影响） * * §2 根容器与背景层（Body & Bg） * §2.1 body —— 视口级 Flex 容器，应用主题背景 / 文字 / 字体 * §2.2 .noise-filter —— 全屏固定模糊遮罩层（Backdrop Filter） * * §3 主布局容器（Main Container） * §3.1 .noise-main —— 居中约束容器（max-width: 1150px） * * §4 左侧边栏（Sidebar） * §4.1 .noise-left —— fixed 定位竖向信息面板 * §4.2 .logo —— 圆形头像 * §4.3 .left-div / .left-div-music —— 通用毛玻璃卡片容器 * §4.4 .left-des / .left-des-item —— 个人简介文字信息 * §4.5 .left-tag / .left-tag-item —— 标签云 * §4.6 .left-time-header —— 数字时钟 + 问候语 * §4.7 .left-calendar —— 日历卡片（公历 / 农历 / 黄历精简版） * §4.8 日历卡片跨主题高对比保障 * * §5 右侧主内容区（Main Content） * §5.1 .noise-right —— float:right 文档流主区域 * §5.2 .welcome / .description —— 头部大标题与副标题 * §5.3 .gradientText —— 渐变文字动画（含 @keyframes） * §5.4 .purpleText —— 品牌色强调文字 * §5.5 .iconContainer / .iconItem —— 社交图标栏 * §5.6 .title —— 分区 H2 标题 * §5.7 .projectList / .projectItem —— 项目卡片网格 * §5.8 图片轮播（Image Carousel） * §5.9 footer / #siteUptime —— 页脚 * * §6 控制组件（Controls） * §6.1 .switch / .onoffswitch —— 主题切换滑块开关 * §6.2 .menu-toggle —— 菜单图标开关 * * §7 覆层组件（Overlays） * §7.1 .image-popup —— 图片灯箱 * §7.2 .announcement-bar —— 公告跑马灯 * * §8 响应式断点（Breakpoints） * §8.1 ≤1150px —— 中等屏幕卡片间距调整 * §8.2 ≤800px —— 移动端：隐藏左栏 / 显示汉堡菜单 * §8.3 ≤480px —— 小屏手机端：页脚字号缩小 * §8.4 ≥801px —— 桌面端：隐藏汉堡按钮 * * §9 黄历详情页切换逻辑 * ============================================================ */ /* ============================================================ * §1 全局重置（Global Reset） * * 清除浏览器 UA 默认样式，统一盒模型，禁止意外文本选中。 * 注意：user-select: none 禁止全站选中，若需可复制区域需单独覆盖。 * ============================================================ */ /* §1.1 通配选择器：margin/padding 清零 + border-box 盒模型 + 禁止文本选中 + 过渡 */ * { margin: 0; padding: 0; box-sizing: border-box; user-select: none; transition: background-color .4s ease, border-color .4s ease; } /* §1.2 链接重置：去除所有伪类状态下的下划线 / 外轮廓 / 边框 / 触控高亮 * - color: inherit 使链接继承父元素字体色，避免全局默认蓝色超链接 * - -webkit-tap-highlight-color 移除移动端触控灰色高亮层 */ a:hover, a:link, a:visited, a:active, a:focus { text-decoration: none; outline: none; border: none; color: inherit; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } /* §1.3 全局隐藏滚动条（WebKit） * WHY：毛玻璃卡片背景滚动时不应显示滚动条，避免破坏玻璃质感。 * 仅隐藏视觉条，滚动功能不受影响。 */ ::-webkit-scrollbar { width: 0; } /* ============================================================ * §2 根容器（Body）：视口级 Flex 容器 * * 应用主题背景色/渐变/图片，设定全站字体栈。 * 这里声明背景（background）而非单独在 root.css 中定义， * 是因为背景需要 background-repeat/size/attachment 等完整属性集。 * ============================================================ */ /* §2.1 body：100vh 高度 + Flex 居中 + 固定背景 */ body { display: flex; height: 100%; min-height: 100vh; width: 100%; position: relative; font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Heiti SC", "Source Han Sans CN", sans-serif; background: var(--main_bg_color); background-repeat: no-repeat; background-size: cover; background-position: center; background-attachment: fixed; transition: color .4s ease, background-color .4s ease; justify-content: center; color: var(--main_text_color); } /* §2.2 背景毛玻璃层（Backdrop Filter Layer） * 全屏 fixed 定位，应用 backdrop-filter: blur(var(--back_filter)) * 结合半透明背景色，压暗背景并产生模糊效果。 * z-index: -99999999 确保其在所有内容之下、在 body 背景之上。 * pointer-events: none 默认不需要，此处未设置意味着它阻挡鼠标事件—— * 因此下层可交互元素（如链接）仍可穿透，因为 z-index 足够低。 */ .noise-filter { position: fixed; width: 100vw; height: 100vh; backdrop-filter: blur(var(--back_filter)); -webkit-backdrop-filter: blur(var(--back_filter)); z-index: -99999999; background: var(--back_filter_color); } /* ============================================================ * §3 主布局容器（Main Container） * * .noise-main：居中约束容器，内部通过 float 和 --sidebar-w * 实现左右两栏布局。 * ============================================================ */ /* §3.1 .noise-main：max-width 1150px 居中 * — 适中宽度，避免过宽或过窄导致排版崩溃 * — --sidebar-w: 280px 左栏宽度已收窄，贴合侧栏卡片内容排版 * — 右栏自适应 container - 左栏 = 剩余宽度 */ .noise-main { width: 100%; max-width: 1150px; --sidebar-w: 280px; /* 左栏宽度：贴合卡片内容，避免过宽影响美观 */ position: relative; } /* ============================================================ * §4 左侧边栏（Sidebar） * * position:fixed 固定定位，宽度取 --sidebar-w（280px）， * overflow-y:scroll 可滚动，隐藏滚动条。 * 内部卡片均使用 Flex column 纵向排列。 * ============================================================ */ /* §4.1 .noise-left：固定定位，竖向 Flex 布局，滚动隐藏 */ .noise-left { overflow-y: scroll; width: var(--sidebar-w); height: 100vh; display: flex; padding: 0 15px; position: fixed; align-items: center; flex-direction: column; } /* 隐藏侧栏滚动条（保持 Chrome/Safari 视觉干净） */ .noise-left::-webkit-scrollbar { display: none; } /* §4.2 .logo：圆形头像，Hover 旋转 360° * — aspect-ratio: 1/1 保证正方形 * — max-width: 160px 限制头像最大直径 * — margin-top: 24px 与右侧 .noise-right 的 padding-top 对齐 */ .logo { flex-shrink: 0; width: 65%; max-width: 160px; /* 加宽侧栏后限制头像最大直径，使个性签名框与右侧社交栏顶部平齐 */ position: relative; aspect-ratio: 1/1; margin-top: 24px; /* 与右侧 .noise-right 的 padding-top 对齐 */ background-size: cover; border-radius: 50%; transition: transform 0.5s; } .logo:hover { transform: rotate(360deg); /* 趣味交互：头像旋转一圈 */ } /* §4.3 .left-div：通用毛玻璃卡片 * 侧栏内所有信息卡片的外壳，提供 blur + 半透明背景， * border-radius: 13px 统一圆角。 */ .left-div { flex-shrink: 0; width: 100%; border-radius: 13px; margin-top: 10px; /* 收紧卡片间距，配合加宽侧栏后对齐右侧内容顶部 */ padding: 10px; backdrop-filter: blur(var(--card_filter)); -webkit-backdrop-filter: blur(var(--card_filter)); background: var(--item_bg_color); } /* 音乐播放器卡片：flex-shrink:10 优先收缩，避免溢出 */ .left-div-music { flex-shrink: 10; width: 100%; border-radius: 8px; margin-top: 10px; padding: 4px; backdrop-filter: blur(var(--card_filter)); -webkit-backdrop-filter: blur(var(--card_filter)); background: var(--item_bg_color); } /* §4.4 .left-des / .left-des-item：个人简介文字区 * Flex column 居中，每项 14px 行高 22px 多行可读 */ .left-des { display: flex; flex-direction: column; justify-content: center; } .left-des-item { display: flex; align-items: center; line-height: 22px; font-size: 14px; margin-bottom: 8px; overflow: hidden; } /* 简介行图标：固定 16px 宽高，填充主题色 */ .left-des-item i, .left-des-item svg { width: 16px; height: 16px; min-width: 16px; fill: var(--fill); font-size: 15px; margin-right: 10px; text-align: center; } /* §4.5 标签云（Tag Cloud） * Flex wrap 自适应多行圆角标签块 * 每个标签 .left-tag-item： * — inline-flex 内联块，自动换行 * — background 与 text 取自主题变量，亮底深字 / 暗底浅字 * — white-space: nowrap 防止单个标签折断 */ .left-tag { display: flex; flex-direction: row; flex-wrap: wrap; padding: 13px; } .left-tag-item { display: inline-flex; align-items: center; justify-content: center; min-height: 28px; margin: 0 5px 5px 0; padding: 4px 10px; font-size: 13px; border-radius: 10px; background: var(--left_tag_item); color: var(--left_tag_text); /* 标签文字随主题取色，亮底用深字、暗底用浅字 */ box-sizing: border-box; white-space: nowrap; } /* (旧版合并卡片样式已废弃；日历卡片统一定义见 §4.7) */ /* ============================================================ * §4.6 时间头部（Time Header） * * 独立于日历卡的纯数字时钟 + 时段问候语。 * 时钟通过 NTP 接口校准，减少本地系统时钟漂移。 * 样式：居中大号等宽数字 + 动态问候语，复用 .left-div 毛玻璃外框。 * ============================================================ */ .left-time-header { display: flex; flex-direction: column; align-items: center; padding: 14px 10px; gap: 4px; } /* §4.6.1 大号数字时钟：等宽字体防抖动，tabular-nums 保证数字切换不位移 */ .cal-clock { font-family: 'Arial', 'Helvetica Neue', 'SF Mono', monospace; font-size: 28px; font-weight: 700; letter-spacing: 2px; text-align: center; color: var(--item_left_text_color); font-variant-numeric: tabular-nums; line-height: 1.2; } /* §4.6.2 时段问候语：较小字号、品牌色居中 */ .cal-greeting { font-size: 13px; color: var(--purple_text_color); opacity: .85; text-align: center; line-height: 1.4; } /* ============================================================ * §4.7 日历卡片（Calendar Card） * * 结构（自上而下共 8 层）： * ① 翻页栏（‹ 日期标签 ›）——可左右翻看昨天/今天/明天/任意天 * ② 日期区：农历年月日星期 + 阳历年月日星期 * ③ 天气（实时，位于日期下方） * ④ 吉日判定（黄道吉日 / 黑道凶日） * ⑤ 黄历常用项目网格（生肖 / 冲煞 / 星座 / 廿八宿 / 十二神 / 值神 / 纳音 / 五行） * ⑥ 节气 / 节日 * ⑦ 宜 / 忌（精简前 N 项） * ⑧ 小运播报（每日运势简报） * * 数据全部由 cnlunar-js 本地计算，零网络依赖。 * ============================================================ */ .left-calendar { display: flex; flex-direction: column; padding: 10px 14px; gap: 8px; } /* --- ① 翻页栏：左右箭头 + 中间日期标签 --- */ .cal-nav { display: flex; align-items: center; justify-content: space-between; gap: 6px; } /* 翻页按钮：单个胶囊按钮，左半前翻 / 中间回到今天 / 右半后翻 * 文本由 JS 计算：今天/昨天/明天 或 农历日名（固定初一式） */ .cal-nav-btn { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid rgba(128,128,128,0.35); border-radius: 14px; font-size: 13px; line-height: 1; color: var(--item_left_title_color); background: var(--left_tag_item); cursor: pointer; user-select: none; -webkit-user-select: none; transition: background-color .2s ease, transform .12s ease, color .2s ease, border-color .2s ease; } .cal-nav-btn:hover { border-color: var(--purple_text_color); color: var(--purple_text_color); } .cal-nav-btn:active { transform: scale(0.97); } /* 两侧箭头提示（仅视觉，点击位置决定前/后翻） */ .cal-nav-arrow { font-size: 15px; font-weight: 700; opacity: .8; flex-shrink: 0; } /* 中间文本：显示 今天/昨天/明天 或 固定农历日名，由 getCalNavLabel 计算 */ .cal-nav-label { flex: 1; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--item_left_title_color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; } /* --- ② 日期区：Flex column 显示农历 + 阳历 --- */ .cal-date-block { display: flex; flex-direction: column; gap: 4px; } /* 数据行：icon 居左 + 文字跟随主题色 */ .cal-row { display: flex; align-items: flex-start; line-height: 1.5; font-size: 13px; color: var(--item_left_text_color); } .cal-row > i { margin-right: 7px; min-width: 16px; text-align: center; font-style: normal; flex-shrink: 0; } /* 农历行：加粗突出，word-break 允许长内容换行避免溢出窄侧栏 */ .cal-lunar { font-size: 14px; font-weight: 600; line-height: 1.45; word-break: break-word; /* 长格式（干支+生肖）在窄侧栏可换行，避免溢出 */ } /* 农历高亮：五月 / 廿七 等用 --cal-bad 语义色突出 */ .cal-lunar .cal-hl { color: var(--cal-bad, #d1493b); font-weight: 700; } /* --- ③ 天气行 --- */ .cal-weather { font-size: 13px; } /* 星期：置于阳历日期之后同行内联，次要色小字号 */ .cal-week-inline { margin-left: 8px; font-size: 12.5px; color: var(--item_left_text_color); opacity: .9; } /* 阳历日期移至数字时钟下方：居中显示，与时钟对齐 */ .left-time-header .cal-solar { justify-content: center; font-size: 13px; color: var(--item_left_text_color); } .left-time-header .cal-solar > i { margin-right: 6px; } /* --- ④ 吉日判定 + 宜/忌 布局 --- */ .cal-yiji { display: flex; flex-direction: column; gap: 3px; } /* 吉日判定条：去除背景，仅保留文字与细边框 * 点击（cursor:pointer）可打开黄历详情页 */ .cal-lucky { flex-shrink: 0; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 12.5px; font-weight: 700; white-space: nowrap; padding: 4px 9px; border-radius: 8px; border: 1px solid rgba(128,128,128,0.18); cursor: pointer; /* 点击打开黄历详情页 */ transition: border-color .2s ease, color .2s ease, background-color .2s ease; } .cal-lucky:hover { border-color: var(--purple_text_color); background: var(--item_hover_color, rgba(128,128,128,0.08)); } .cal-lucky::after { content: ' ›'; opacity: .6; font-weight: 400; } /* 右箭头指示可点击跳转 */ .cal-lucky.good { color: var(--cal-good, #1e9e54); } .cal-lucky.bad { color: var(--cal-bad, #d1493b); } /* --- ⑤/⑥ 键值网格：默认 2 列，常用项目用 4 列紧凑布局 --- */ .cal-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 8px; } .cal-common { grid-template-columns: repeat(4, 1fr); } /* 生肖/星座等用 4 列以节省空间 */ .cal-facts .cal-cell, .cal-common .cal-cell { display: flex; flex-direction: column; line-height: 1.3; font-size: 12px; min-width: 0; } .cal-k { font-size: 11px; color: var(--purple_text_color); opacity: .85; } .cal-cell b { font-weight: 600; color: var(--item_left_title_color); word-break: break-all; } /* --- ⑦ 宜（--cal-good 绿色）/ 忌（--cal-bad 红色）：语义色跨主题一致 --- */ .cal-yi b { color: var(--cal-good, #1e9e54); font-weight: 700; } .cal-ji b { color: var(--cal-bad, #d1493b); font-weight: 700; } .cal-yi, .cal-ji { font-size: 12.5px; } /* --- ⑧ 运势文字：去除背景仅保留文字与细边框 --- */ .cal-fortune { font-size: 12px; line-height: 1.5; color: var(--item_left_text_color); border-radius: 8px; padding: 7px 9px; border: 1px solid rgba(128,128,128,0.18); } .cal-fortune .fortune-star { color: #e6a23c; letter-spacing: 1px; } /* 星级评分用暖金色 */ /* 日历卡片可复制项：悬停浅色反馈 */ .cal-cell, .cal-yi, .cal-ji, .cal-lunar, .cal-weather, .cal-fortune, .cal-solar { cursor: pointer; border-radius: 8px; transition: background-color .2s ease; } .cal-cell:hover, .cal-yi:hover, .cal-ji:hover, .cal-lunar:hover, .cal-weather:hover, .cal-fortune:hover, .cal-solar:hover { background: var(--item_hover_color, rgba(128,128,128,0.08)); } /* 复制提示 Toast（主页日历卡片复用）：fixed 底部居中 */ .cal-toast { position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%) translateY(12px); background: rgba(0,0,0,0.82); color: #fff; font-size: 13px; padding: 8px 16px; border-radius: 20px; opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease; z-index: 9999; } .cal-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* ============================================================ * §4.8 日历卡片跨主题高对比保障 * * 经典问题：在半透明 / 图片背景主题（如「暗紫」使用 background.jpg）下， * 卡片继承的 --item_bg_color 透明度过低，文字易看不清。 * * 方案：按主题明暗分组，给日历卡片强制一层不透明底色 * - 浅色组（light / blue / colorful）：纯白纸色（rgba 255,255,255,0.96） * - 深色组（tech / purple / neon / blackgold / dark）：近黑纸色（rgba 10,12,16,0.66） * - auto 模式初始浅色，跟随系统深色模式媒体查询切换为深色组底色 * ============================================================ */ html[data-theme="light"] .left-calendar, html[data-theme="blue"] .left-calendar, html[data-theme="colorful"] .left-calendar { background: rgba(255, 255, 255, 0.96); border: 1px solid rgba(0, 0, 0, 0.06); } html[data-theme="tech"] .left-calendar, html[data-theme="purple"] .left-calendar, html[data-theme="neon"] .left-calendar, html[data-theme="blackgold"] .left-calendar, html[data-theme="dark"] .left-calendar { background: rgba(10, 12, 16, 0.66); border: 1px solid rgba(255, 255, 255, 0.10); } html[data-theme="auto"] .left-calendar { background: rgba(255, 255, 255, 0.96); border: 1px solid rgba(0, 0, 0, 0.06); } @media (prefers-color-scheme: dark) { html[data-theme="auto"] .left-calendar { background: rgba(10, 12, 16, 0.66); border: 1px solid rgba(255, 255, 255, 0.10); } } /* ============================================================ * §5 右侧主内容区（Main Content） * * float:right 文档流主区域，宽度自适应为 容器 - 左栏。 * 内部包含：标题 / 描述 / 渐变文字 / 社交栏 / 分区标题 / 项目卡片 / 轮播 / 页脚。 * ============================================================ */ /* §5.1 .noise-right：右栏宽度 = container - 左栏宽度 * padding: 24px 内边距，padding-bottom: 50px 为页脚留空间 */ .noise-right { width: calc(100% - var(--sidebar-w)); /* 右栏自适应：容器宽度减去左栏宽度 */ display: flex; padding: 24px; position: relative; float: right; padding-bottom: 50px; flex-direction: column; } /* §5.2 头部大标题（welcome）和副标题（description） */ .welcome { font-size: 55px; font-weight: 800; margin: 34px 0 12px 0; /* 上边距加大，使社交栏顶部与左侧个性签名框对齐 */ } .description { font-size: 20px; margin-top: 7px; } /* §5.3 渐变文字（.gradientText）： * 使用 background-clip: text 制作纯 CSS 渐变文字， * font-family 优先使用 Georgia 衬线字体，赋予标题典雅感。 * animation 10s 循环移动渐变位置，产生流光效果。 */ .gradientText { -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-size: 200%; background-position: 0%; font-family: "Georgia", "Palatino Linotype", "Times New Roman", serif; animation: backgroundSizeAnimation 10s ease-in-out infinite; background-image: var(--gradient); } @keyframes backgroundSizeAnimation { 0% { background-position: 100%; } 25% { background-position: 50%; } 50% { background-position: 0%; } 75% { background-position: 50%; } 100% { background-position: 100%; } } /* §5.4 品牌色强调文字 */ .purpleText { color: var(--purple_text_color); font-weight: 800; } /* §5.5 社交图标栏（Social Icon Bar） * 横向可滚动图标列表（overflow-x:scroll 隐藏滚动条）。 * .iconItem Hover 时宽度从 49px 展开到 95px，露出 Tooltip 文字。 * 此效果模拟了社交应用「悬停展开标签」的交互模式。 */ .iconContainer { width: 100%; height: 60px; display: flex; align-items: center; overflow-x: scroll; margin-top: 20px; } .iconContainer::-webkit-scrollbar { display: none; } .iconItem { width: 49px; height: 43px; box-sizing: border-box; border-radius: 7px; display: flex; margin-left: 10px; backdrop-filter: blur(var(--card_filter)); -webkit-backdrop-filter: blur(var(--card_filter)); background: var(--item_bg_color); align-items: center; justify-content: center; transition: width 0.3s ease, opacity 0.3s ease, transform 0.3s ease; flex-shrink: 0; } .iconItem i, .iconItem svg { width: 22px; height: 22px; fill: var(--fill); font-size: 22px; margin-right: 3px; } /* 图标 Tooltip 文字：默认隐藏，Hover 时显示 */ .iconTip { white-space: nowrap; display: none; } .iconItem:hover { width: 95px; /* 展开宽度露出 Tooltip */ transform: translateY(-2px); /* 轻微上浮 */ background: var(--item_hover_color); } .iconItem:hover .iconTip { display: block; } /* §5.6 分区 H2 标题（Section Title） * Hover 时 translateY(-5px) 上浮动画，配合 flex 布局图标在左 */ .title { display: flex; align-items: center; font-size: 26px; font-weight: 800; margin: 20px 0; transition: transform 0.4s ease; font-family: "Inter", "PingFang SC", "Microsoft YaHei", sans-serif; } .title i, .title svg { margin-right: 8px; height: 26px; width: 26px; fill: var(--fill); } .title:hover { transform: translateY(-5px); } /* §5.7 项目卡片网格（Card Grid） * Flex wrap 自适应排列，卡片默认宽 25%（四列一排）， * 移动端调整为 50%（两列一排）。 * .projectItem 包含左侧文字区（.projectItemLeft）和右侧图标区（.projectItemRight）。 * Hover 时左侧扩展至 100%、右侧收缩至 0%，图标旋转 40deg。 */ .projectList { display: flex; flex-wrap: wrap; } .projectItem { margin: 7px; display: flex; background-color: var(--item_bg_color); border-radius: 8px; padding: 15px; height: 100px; width: calc(25% - 15px); backdrop-filter: blur(var(--card_filter)); -webkit-backdrop-filter: blur(var(--card_filter)); transition: opacity 0.5s ease, background-color 0.2s ease, border 0.2s ease, transform 0.3s ease; overflow: hidden; /* 防止子元素溢出卡片边界 */ } /* 卡片左侧文字区：限制最大宽度 80%，超长文字截断省略 */ .projectItemLeft { transition: width 0.4s ease; height: 100%; width: 80%; overflow: hidden; /* 内容不超出左侧区 */ display: flex; flex-direction: column; justify-content: center; } .projectItemLeft h1 { font-weight: normal; font-size: 16px; margin: 0; transition: font-size 0.4s ease; color: var(--item_left_title_color); overflow: hidden; /* 标题单行溢出省略 */ text-overflow: ellipsis; white-space: nowrap; line-height: 1.3; } .projectItemLeft p { font-size: 12px; margin-top: 8px; color: var(--item_left_text_color); overflow: hidden; /* 描述最多两行截断 */ text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.4; } .projectItem:hover { box-shadow: 0 8px 16px -4px #2c2d300c; transform: translateY(-2px); /* 悬停上浮 2px */ } .projectItem.pressed { transform: scale(0.9); /* 点击缩放反馈 */ background-color: var(--item_hover_color); } .projectItem:hover .projectItemLeft { width: 100%; /* Hover 时左侧文字区占满整卡 */ } .projectItem:hover .projectItemRight { width: 0%; /* Hover 时右侧图标区收缩到 0 */ } .projectItem:hover .projectItemRight img { transform: rotate(40deg); /* 图标旋转 */ } .projectItem:hover h1 { font-size: 18px; /* Hover 时标题略放大 */ } .projectItemLeft p { font-size: 12px; margin-top: 15px; color: var(--item_left_text_color); } .projectItemLeft h1 { font-weight: normal; font-size: 16px; margin: 0px; transition: font-size 0.4s ease; color: var(--item_left_title_color); } .projectItemLeft { transition: width 0.4s ease; height: 100%; width: 80%; } .projectItemRight { overflow: hidden; transition: width 0.4s ease; display: flex; justify-content: center; align-items: center; width: 20%; height: 100%; } .projectItemRight img { height: 39px; width: 39px; } /* §5.8 图片轮播（Image Carousel） * 拖拽 + 自动横向滚动的图片条 */ .projectItemRightimg { display: flex; align-items: center; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); background: rgba(20, 20, 20, 0.396); height: 120px; max-width: 99%; overflow: hidden; } .img-1 { max-width: 100%; max-height: 100%; margin-right: 6px; } /* §5.9 页脚（Footer） * position:absolute + bottom:0 固定在右栏底部 * 提供站点运行时间和访问时长的统计信息 */ footer { position: absolute; left: 0; right: 0; padding: 10px 15px; text-align: center; backdrop-filter: blur(var(--card_filter)); -webkit-backdrop-filter: blur(var(--card_filter)); background: var(--item_bg_color); color: var(--footer_text_color); font-size: 13px; bottom: 0; box-sizing: border-box; } #siteUptime { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; } #visitDuration { display: block; margin-top: 3px; font-size: 12px; opacity: 0.8; } /* ============================================================ * §6 控制组件（Controls） * * 包含：主题切换滑块开关、菜单图标开关。 * 两者均使用 hidden checkbox + label 技巧实现无 JS CSS 开关效果。 * ============================================================ */ /* §6.1 主题滑块开关（Theme Toggle Switch） * 使用 .onoffswitch-checkbox:hidden + .onoffswitch-label 模拟滑块。 * 轨道颜色（--switch_track）和旋钮颜色（--fill）随主题变化， * 切换时提供平滑的背景色 transition。 */ .switch { width: 55px; height: 43px; box-sizing: border-box; border-radius: 7px; display: flex; margin-left: 10px; backdrop-filter: blur(var(--card_filter)); -webkit-backdrop-filter: blur(var(--card_filter)); background: var(--item_bg_color); align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; transition: background-color .2s ease; } .switch:hover { background: var(--item_hover_color); } .onoffswitch { position: relative; width: 38px; height: 20px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } .onoffswitch-checkbox { display: none; /* 隐藏原生 checkbox，用 label 控制 */ } .onoffswitch-label { display: block; overflow: hidden; cursor: pointer; height: 100%; border-radius: 50px; } .onoffswitch-inner { display: flex; justify-content: center; align-items: center; width: 200%; height: 100%; margin-left: -100%; transition: margin-left .35s cubic-bezier(.4, 0, .2, 1); } /* ::before（左半）和 ::after（右半）构成滑块轨道的左右两段 */ .onoffswitch-inner:before, .onoffswitch-inner:after { display: flex; justify-content: center; align-items: center; float: left; width: 50%; height: 100%; padding: 0; font-size: 12px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold; box-sizing: border-box; transition: background-color .35s ease; /* 切换主题时轨道颜色平滑过渡 */ } .onoffswitch-inner:before { content: ""; background-color: var(--switch_track); /* 轨道随主题变色（浅色态） */ color: #FFFFFF; text-align: left; } .onoffswitch-inner:after { content: ""; background-color: var(--switch_track); /* 轨道随主题变色（深色态，略深以区分左右） */ color: #FAFAFA; text-align: right; filter: brightness(0.7); /* 比左侧暗 30%，形成轨道明暗区分 */ } /* 滑块旋钮：使用 --fill（主题强调色），圆角 */ .onoffswitch-switch { display: block; height: 70%; aspect-ratio: 1/1; background: var(--fill); /* 旋钮随主题变色（用主题强调色） */ position: absolute; top: 12.5%; bottom: 12.5%; right: 5px; border-radius: 20px; transition: right .35s cubic-bezier(.4, 0, .2, 1), background-color .35s ease; } /* checked 态：轨道内联内容偏移归零，旋钮滑到中线 */ .onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-inner { margin-left: 0; } .onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-switch { right: 50%; } /* §6.2 右键菜单图标开关（Menu Toggle Button） * 隐藏 checkbox 控制显示/隐藏菜单图标，开启态用 --purple_text_color 强调 */ .menu-toggle { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-left: 10px; flex-shrink: 0; border: 1px solid rgba(128,128,128,.35); background: rgba(128,128,128,.12); border-radius: 8px; cursor: pointer; transition: background-color .25s ease, border-color .25s ease; } .menu-toggle-checkbox { display: none; } .menu-toggle .menu-toggle-icon-on, .menu-toggle .menu-toggle-icon-off { font-size: 17px; line-height: 1; transition: opacity .25s ease, transform .25s ease, color .25s ease; } .menu-toggle .menu-toggle-icon-off { display: none; } /* 开启态：主题色边框 + 半透明背景，融入卡片风格 */ .menu-toggle:has(.menu-toggle-checkbox:checked) { border-color: var(--purple_text_color); background: var(--text_bg_color); } .menu-toggle:has(.menu-toggle-checkbox:checked) .menu-toggle-icon-on { display: inline-block; color: var(--purple_text_color); } /* 关闭态：中性半透灰色，与开启态形成清晰视觉对比 */ .menu-toggle:has(.menu-toggle-checkbox:not(:checked)) { border-color: rgba(128,128,128,.35); background: rgba(128,128,128,.12); } .menu-toggle:has(.menu-toggle-checkbox:not(:checked)) .menu-toggle-icon-on { display: none; } .menu-toggle:has(.menu-toggle-checkbox:not(:checked)) .menu-toggle-icon-off { display: inline-block; color: rgba(150,150,150,.8); } /* (旧版黄历网格样式已合并至 §4.7) */ /* ============================================================ * §7 覆层组件（Overlays） * * 全屏 fixed 定位层，优先级高于普通文档流。 * ============================================================ */ /* §7.1 图片灯箱（Photo Lightbox） * 全屏 Fixed 遮罩（rgba 0,0,0,0.7）+ 居中图片。 * z-index: 1000 确保高于所有内容。 */ .image-popup { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); z-index: 1000; } .image-popup img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .popup-close { position: absolute; top: 10px; right: 10px; color: white; font-size: 24px; } /* §7.2 公告跑马灯（Announcement Marquee） * 使用 CSS @keyframes 配合 JS 控制， * 替代废弃的 标签。 * 从左侧开始，按项停留后滚动到下一项。 */ .announcement-bar { margin-top: 0; height: 80px; overflow: hidden; line-height: 80px; text-align: left; } .announcement-track { display: inline-flex; white-space: nowrap; will-change: transform; } .announcement-track a { text-decoration: none; } .announcement-track span { font-family: 'Tahoma', sans-serif; font-weight: 900; font-size: 30px; line-height: 80px; padding: 0 20px; } /* 公告跑马灯由 script.js 控制：从左侧开始，按项停留后滚动到下一项 */ /* ============================================================ * §8 响应式断点（Breakpoints） * * ≤800px 移动端布局：隐藏侧栏、全宽右栏、显示汉堡按钮 * ≥801px 桌面端布局：固定侧栏、自适应右栏 * ≤1150px 中等屏幕：卡片间距微调 * ≤480px 小屏手机：页脚字号缩小 * ============================================================ */ /* §8.1 移动端头像（≤800px 显示，桌面端隐藏） */ .index-logo { display: none; width: 40%; height: 0; padding-bottom: 40%; background-size: cover; background-position: center; border-radius: 50%; background-repeat: no-repeat; } /* §8.2 ≤1150px 中等屏幕：卡片间距调整 */ @media (max-width: 1150px) { .projectItem { margin: 10px; } } /* §8.3 ≤800px 移动端布局 * 关键变更： * 1. body 背景使用 32.png 图片（全屏平铺） * 2. 隐藏左侧边栏 .noise-left（display:none） * 3. 右栏 .noise-right 宽度 100% * 4. 显示移动端头像 .index-logo * 5. 标题和描述使用 vw 相对单位适配屏幕 * 6. 卡片宽度改为 50%（两列一排） * 7. 放大卡片字体 */ @media (max-width: 800px) { body { background-image: url('../img/32.png'); background-size: 100% 100%; background-attachment: fixed; background-repeat: no-repeat; background-position: center center; /* 注意：body 不能加 backdrop-filter，否则会为 fixed 子元素（手机导航按钮） 建立包含块，导致按钮相对 body 定位、随页面滚动而"不跟随窗口"。 移动端背景模糊已由 .noise-filter 全屏遮罩层（var(--back_filter)）统一提供。 */ background-color: #0d0e11e7; } .index-logo { display: block; margin: 0 auto; } .noise-left { display: none; } /* 时间头部移动端适配：缩小字号 + 收紧内边距 */ .cal-clock { font-size: 24px; letter-spacing: 1px; } .cal-greeting { font-size: 12px; } .left-time-header { padding: 10px 8px; } .a .projectItemRight, .a .projectItemRight img { display: none; } .a .projectItemLeft { width: 100%; } .a { width: calc(50% - 18px); margin: 9px; } .noise-right { width: 100%; } .description { font-size: 4vw; } .welcome { display: flex; justify-content: center; align-items: center; font-size: 10vw; } .gradientText { display: inline; } .iconContainer { margin-top: 4vw; } .projectItem { padding: 10px; } .projectItemLeft p { font-size: 13px; } .projectItemLeft h1 { font-size: 18px; } .projectItem:hover h1 { font-size: 20px; } } /* §8.4 汉堡按钮（Hamburger Button）：≤800px 显示 * Fixed 定位在左上角，z-index:199000 确保高于侧栏（z-index:99900）。 * 点击后 .noise-left.show 从左侧滑入。 * 黄历详情页打开时（body.hl-open）隐藏汉堡按钮，避免遮挡返回主页按钮。 */ @media screen and (max-width: 800px) { .mobile-nav-button { display: flex; align-items: center; justify-content: center; position: fixed; top: 15px; left: 10px; z-index: 199000; width: 48px; height: 40px; padding: 0; background-color: #3c3f4a; /* Discord 深灰背景，固定深色不随主题 */ color: #fff; border: none; border-radius: 8px; cursor: pointer; transition: left 0.3s ease-in-out, background-color 0.2s ease-in-out; } /* 黄历详情内容区打开时（仅手机端），隐藏汉堡按钮与左边栏 */ body.hl-open .mobile-nav-button { display: none; } body.hl-open .noise-left { display: none; } /* 按钮内部图标居中 */ .nav-btn-inner { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } /* 汉堡三条线 SVG 图标：白色 */ .nav-hamburger { flex-shrink: 0; fill: #fff; } .noise-left { display: none; position: fixed; top: 0; width: 66.67%; height: 100%; background-color: #0d0e11ed; z-index: 99900; transition: left 0.3s ease-in-out; left: -100%; } .noise-left.show { display: block; left: 0; } .logo { display: none; } } /* §8.5 ≥801px 桌面端：隐藏汉堡按钮 */ @media screen and (max-width: 801px) { /* 此断点为空，仅供占位参考 */ /* 实际 801+ 的规则在下一条媒体查询中定义 */ } @media screen and (min-width: 801px) { .mobile-nav-button { display: none; } } /* §8.6 ≤480px 小屏手机：页脚字号缩小 */ @media screen and (max-width: 480px) { footer { padding: 8px 10px; font-size: 12px; } #siteUptime { font-size: 11px; } #visitDuration { font-size: 10px; margin-top: 2px; } } /* ============================================================ * §9 黄历详情页切换逻辑 * * 黄历详情以 SPA 方式在当前页加载（不打开新标签页）： * #home-main 为主页内容，#hl-detail 为黄历详情容器。 * 通过 hidden 属性控制显示/隐藏。 * 桌面端保留侧边栏，仅手机端隐藏（规则见上方 §8.4 媒体查询）。 * ============================================================ */ /* 主页内容隐藏 / 黄历详情显示 */ #home-main[hidden] { display: none; } #hl-detail { display: block; } #hl-detail[hidden] { display: none; } /* 黄历详情页内容容器：去除左右 padding 保持全宽 */ #hl-detail .hl-page { max-width: 100%; padding-left: 0; padding-right: 0; }