基于SimpleMemory皮肤的仿Fixyll主题皮肤
页面css定制代码- /* =====================================================
- Theme : Pixyll Minimalist
- Author: JayZorn
- ===================================================== */
- /* =====================================================
- Web Fonts
- Playfair Display — 高对比几何衬线，西文杂志感
- · 仅含拉丁字符，中文自动 fallback 至系统宋体
- · jsdelivr CDN，国内可访问，无需额外中文字体文件
- ===================================================== */
- @import url("https://cdn.jsdelivr.net/npm/@fontsource/playfair-display@5/index.css");
- /* =====================================================
- 0. 全局变量
- · 所有颜色、字体、宽度集中于此，改一处全局生效
- · color-scheme: light 防止系统深色模式干扰自定义色
- ===================================================== */
- :root {
- --bg-color: #ffffff; /* 页面背景 */
- --text-main: #333332; /* 正文文字 */
- --text-title: #111111; /* 标题文字 */
- --code-bg: #1e1e1e; /* 代码块背景 */
- --accent-color: #d63384; /* 行内代码强调色 */
- --max-width: 1020px; /* 内容区最大宽度 */
- /*
- * 字体栈：
- * --font-serif : 英文 → Playfair Display / 中文 → 系统宋体（自动 fallback）
- * --font-sans : UI 无衬线，用于导航等非正文区域
- * --font-mono : 代码块等宽字体
- */
- --font-serif: "Playfair Display", "Songti SC", "SimSun", "STSong", serif;
- --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
- --font-mono: "Consolas", "Monaco", monospace;
- color-scheme: light; /* 强制浅色模式，不受系统深色模式影响 */
- }
- /* =====================================================
- 1. 全局基础
- ===================================================== */
- html, body {
- -webkit-text-size-adjust: 100% !important; /* 禁止移动端自动缩放字号 */
- text-size-adjust: 100% !important;
- background-color: var(--bg-color) !important;
- }
- /* =====================================================
- 2. 随笔正文排版
- · 统一字体、行高、字间距、颜色
- · 覆盖博客园默认首行缩进与杂乱字体继承
- ===================================================== */
- /* 正文所有内联/块级元素：统一基础排版 */
- #mainContent .postBody,
- #mainContent .postBody h1, #mainContent .postBody h2,
- #mainContent .postBody h3, #mainContent .postBody h4,
- #mainContent .postBody h5, #mainContent .postBody h6,
- #mainContent .postBody p, #mainContent .postBody ol,
- #mainContent .postBody ul, #mainContent .postBody li,
- #mainContent .postBody span, #mainContent .postBody a {
- font-family: var(--font-serif) !important;
- line-height: 1.8 !important;
- letter-spacing: 0.01em !important;
- color: var(--text-main) !important;
- text-indent: 0 !important;
- }
- /* 列表缩进与项间距 */
- #mainContent .postBody ol,
- #mainContent .postBody ul {
- margin: 1.5em 0 !important;
- padding-left: 1.5em !important;
- }
- #mainContent .postBody li { margin-bottom: 0.6em !important; }
- /* 标题：加粗、深色、移除默认底边框 */
- #mainContent .postBody h1, #mainContent .postBody h2,
- #mainContent .postBody h3, #mainContent .postBody h4,
- #mainContent .postBody h5, #mainContent .postBody h6 {
- color: var(--text-title) !important;
- font-weight: 700 !important;
- margin: 1.8em 0 0.8em !important;
- border-bottom: none !important;
- }
- /* 消除正文顶部多余间距 */
- #mainContent .postBody,
- #cnblogs_post_body > p:first-child,
- #cnblogs_post_body > h1:first-child,
- #cnblogs_post_body > h2:first-child {
- margin-top: 0 !important;
- padding-top: 0 !important;
- }
- /* =====================================================
- 3. 页面布局
- · PC 端：#home flex 居中，#main 限宽
- padding-left: 150px 补偿博客园两栏布局残留的负 margin 偏移
- （若日后博客园修改默认布局，可将此值调为 0）
- · 移动端：全宽、紧凑内边距、防缩放字号
- ===================================================== */
- /* PC 端 (≥768px) */
- @media screen and (min-width: 768px) {
- #home {
- max-width: 100% !important;
- display: flex !important;
- flex-direction: column !important;
- align-items: center !important;
- }
- #main {
- width: 100% !important;
- max-width: var(--max-width) !important;
- padding-left: 200px !important;
- margin: 40px auto 0 !important;
- }
- #mainContent { width: 100% !important; float: none !important; }
- #mainContent .postBody { padding: 40px 20px !important; font-size: 17px !important; }
- #mainContent .postBody p,
- #mainContent .postBody li,
- #mainContent .postBody span { font-size: 17px !important; }
- }
- /* 移动端 (≤767px) */
- @media screen and (max-width: 767px) {
- #main { width: 100% !important; padding: 0 !important; }
- #mainContent .postBody { padding: 10px 15px !important; }
- #mainContent .postBody,
- #mainContent .postBody p, #mainContent .postBody ol,
- #mainContent .postBody ul, #mainContent .postBody li,
- #mainContent .postBody li p, #mainContent .postBody span {
- font-size: 15px !important;
- }
- #mainContent .postBody ol,
- #mainContent .postBody ul { padding-left: 1.2em !important; }
- }
- /* =====================================================
- 4. 代码块
- · 深色背景 + 白色文字，覆盖 highlight.js 各 token 色
- · 行内 code：浅灰背景 + 强调色，与块级代码视觉区分
- ===================================================== */
- /* 块级代码 */
- #mainContent .postBody pre, #mainContent .postBody code,
- .cnblogs-post-body pre, .cnblogs-markdown pre {
- background-color: var(--code-bg) !important;
- color: #ffffff !important;
- border: none !important;
- border-radius: 4px !important;
- padding: 20px !important;
- font-family: var(--font-mono) !important;
- font-size: 14px !important;
- line-height: 1.6 !important;
- }
- /* 覆盖 highlight.js token 颜色，统一白色 */
- #mainContent .postBody pre span, #mainContent .postBody code span,
- .hljs, .hljs-keyword, .hljs-string, .hljs-comment,
- .hljs-operator, .hljs-function, .hljs-title, .hljs-params {
- color: #ffffff !important;
- background-color: transparent !important;
- font-style: normal !important;
- }
- /* 行内代码（不在 pre 内） */
- #mainContent .postBody :not(pre) > code {
- background-color: #f3f4f4 !important;
- color: var(--accent-color) !important;
- padding: 2px 4px !important;
- border-radius: 3px !important;
- font-family: inherit !important;
- }
- /* =====================================================
- 5. 隐藏冗余元素
- · 侧边栏、广告、置顶图标、多余按钮等
- · 如博客园新增推广组件，在此追加选择器即可
- ===================================================== */
- #topics .postTitle, .entrylistPosttitle, #cb_post_title_url,
- #sideBar, #sideBarMain, #navList,
- #green_channel, #vip_tip, #BlogPostCategory,
- #commentform_title,
- #under_post_card1, #under_post_card2,
- #cnblogs_ch, #blog_c1,
- #tip_comment2, .commentbox_title_right,
- .p_arrow, .p_puton, .post_top_icon,
- img[src*="zhiding"], span[style*="color: blue"], .pinned-post-mark {
- display: none !important;
- }
- /* =====================================================
- 6. 页面头部 & 导航栏
- ===================================================== */
- /* 头部容器：上下留白，居中，去边框背景 */
- #header {
- margin: 80px auto 60px !important;
- max-width: var(--max-width) !important;
- text-align: center !important;
- padding: 0 20px !important;
- border: none !important;
- background: transparent !important;
- }
- /* 博客主标题：大字重、紧字距 */
- #blogTitle h1 {
- font-family: var(--font-serif) !important;
- font-size: 42px !important;
- font-weight: 800 !important;
- letter-spacing: -1px !important;
- margin-bottom: 10px !important;
- }
- #blogTitle h1 a { color: var(--text-title) !important; text-decoration: none !important; }
- /* 博客副标题：正常字重，浅灰 */
- #blogTitle h2 {
- font-family: var(--font-serif) !important;
- font-size: 18px !important;
- font-weight: 400 !important;
- color: #999 !important;
- margin-top: 5px !important;
- line-height: 1.5 !important;
- }
- /* 导航栏：顶部细线与头部分隔 */
- #navigator {
- margin-top: 30px !important;
- border-top: 1px solid #eee !important;
- padding-top: 20px !important;
- }
- /* =====================================================
- 7. 首页文章列表
- · 同天/异天随笔间距统一为 56px
- 原理：.day 本身零间距，节奏全部由 .postTitle margin
- 和 .day+.day 控制，两者数值相同，视觉节奏一致
- · postDesc 与标题/摘要左侧严格对齐（padding: 0）
- · 颜色固定为 #bbb，深浅色模式下视觉一致
- ===================================================== */
- /* .day 本身不贡献间距 */
- .day { margin: 0 !important; padding: 0 !important; border: none !important; }
- /* 不同天的 .day 之间：56px（与同天内帖间距相同） */
- .day + .day { margin-top: 56px !important; }
- /* 隐藏原有分割线，间距已由 .postTitle margin 接管 */
- .postSeparator { display: none !important; }
- /* 每篇标题块：56px 顶距 + 细灰分割线（同天第 2 篇起生效） */
- .postTitle {
- margin-top: 56px !important;
- padding-top: 20px !important;
- border-top: 1px solid #f0f0f0 !important;
- }
- /* 每个 .day 内第一篇：去顶距和分割线（由 .day+.day 接管） */
- .day > .postTitle:first-child,
- .day > a:first-child + .postTitle,
- .day > .postTitle:first-of-type {
- margin-top: 0 !important;
- border-top: none !important;
- }
- /* 移除标题左侧蓝色竖线 */
- .day .postTitle2, .postTitle2, .entrylistPosttitle,
- #mainContent .day .postTitle {
- border-left: none !important;
- padding-left: 0 !important;
- margin-left: 0 !important;
- }
- /* 文章标题链接 */
- .postTitle2 {
- font-family: var(--font-serif) !important;
- font-size: 26px !important;
- font-weight: 700 !important;
- line-height: 1.3 !important;
- color: var(--text-title) !important;
- text-decoration: none !important;
- }
- /* 移除标题伪元素装饰（部分皮肤会添加） */
- .postTitle2::before, .postTitle2::after,
- .entrylistPosttitle::before {
- content: none !important;
- display: none !important;
- border: none !important;
- width: 0 !important;
- }
- /* 摘要：稍小字号 + 浅灰，与标题形成层级对比 */
- .postCon, .c_b_p_desc {
- font-family: var(--font-serif) !important;
- font-size: 15px !important;
- line-height: 1.75 !important;
- color: #888 !important;
- margin-top: 10px !important;
- margin-bottom: 0 !important;
- }
- /* "阅读全文"链接 */
- .c_b_p_desc_readmore {
- display: inline-block !important;
- margin-top: 8px !important;
- font-size: 13px !important;
- color: var(--text-title) !important;
- font-weight: 600 !important;
- text-decoration: underline !important;
- }
- /* 文章元信息栏（时间、评论数等） */
- .postDesc {
- font-family: var(--font-serif) !important;
- font-size: 12px !important;
- text-transform: uppercase !important;
- letter-spacing: 1.5px !important;
- color: #bbb !important;
- margin-top: 10px !important;
- margin-bottom: 0 !important;
- padding: 0 !important; /* 与标题/摘要左侧严格对齐 */
- text-align: left !important;
- background-image: none !important;
- border: none !important;
- }
- /* postDesc 内链接（含"编辑"按钮）：Pixyll hover 风格 */
- .postDesc a {
- color: #bbb !important;
- text-decoration: none !important;
- border-bottom: 1px solid transparent !important;
- transition: color 0.25s ease, border-bottom-color 0.25s ease !important;
- }
- .postDesc a:hover,
- .postDesc .post-edit-link:hover {
- color: #111 !important;
- border-bottom-color: #111 !important;
- }
- /* 隐藏 postDesc 内图标字体（iconfont / Font Awesome 等） */
- .postDesc i, .postDesc .iconfont, .postDesc [class*="fa-"],
- .postDesc .far, .postDesc .fas,
- .postDesc::before, .postDesc span::before {
- display: none !important;
- font-size: 0 !important;
- opacity: 0 !important;
- }
- /* 移除文章底部"上一篇/下一篇"边框 */
- #post_next_prev, #blog_post_info_block {
- border-top: none !important;
- border-bottom: none !important;
- }
- /* 分页按钮 */
- .pager { font-family: var(--font-serif) !important; margin-top: 50px !important; color: #999 !important; }
- .pager a { border: 1px solid #eee !important; padding: 8px 16px !important; border-radius: 4px !important; color: #333 !important; }
- /* =====================================================
- 8. 评论区
- ===================================================== */
- /*
- * Pixyll 通用链接 hover 风格
- * 适用范围：评论导航 / 排序切换 / 评论投票 / 单条评论 Digg
- * 规则：默认浅灰无下划线，hover 时文字变黑 + 底部细线浮现
- */
- #comment_nav a,
- #comment_sort a, #comment_sort span,
- .comment_vote a,
- .comment_digg a, .comment_bury a {
- color: #bbb !important;
- text-decoration: none !important;
- border-bottom: 1px solid transparent !important;
- font-family: var(--font-serif) !important;
- transition: color 0.25s ease, border-bottom-color 0.25s ease !important;
- }
- #comment_nav a:hover,
- #comment_sort a:hover,
- .comment_vote a:hover,
- .comment_digg a:hover, .comment_bury a:hover {
- color: #111 !important;
- border-bottom-color: #111 !important;
- }
- /* 投票 / Digg 按钮字号略小 */
- .comment_vote a,
- .comment_digg a, .comment_bury a { font-size: 12px !important; }
- /* 评论排序：当前选中项保持黑色 + 底线 */
- #comment_sort .active,
- #comment_sort span.selected {
- color: #111 !important;
- border-bottom-color: #111 !important;
- }
- /* "评论列表"标题 */
- .feedback_area_title { font-family: var(--font-serif) !important; }
- /* 评论内容：与正文排版一致 */
- .feedbackItem {
- font-family: var(--font-serif) !important;
- font-size: 17px !important;
- line-height: 1.8 !important;
- letter-spacing: 0.01em !important;
- color: var(--text-main) !important;
- text-indent: 0 !important;
- }
- /* 评论者姓名：加粗，黑色，去下划线 */
- .feedbackItem .comment_author,
- .feedbackItem .comment_author a,
- .feedbackItem .louzhu {
- color: #000 !important;
- font-weight: 600 !important;
- text-decoration: none !important;
- }
- /* 评论时间与楼层：80% 透明度 */
- .feedbackListSubtitle, .feedbackListSubtitle a,
- .comment_actions a { color: #000 !important; opacity: 0.8; }
- /* 评论输入框：细边框方角，hover/focus 时边框变黑 */
- div.commentbox_main,
- textarea#tbCommentBody,
- .comment_textarea {
- border: 1px solid #ddd !important;
- background-color: #fff !important;
- border-radius: 0 !important;
- padding: 12px !important;
- font-family: var(--font-serif) !important; /* 输入文字同步衬线字体 */
- box-sizing: border-box !important;
- transition: border-color 0.3s ease-in-out !important;
- }
- div.commentbox_main:hover,
- textarea#tbCommentBody:hover,
- textarea#tbCommentBody:focus { border-color: #000 !important; outline: none !important; }
- /* 移除输入框伪元素装饰 */
- div.commentbox_main::before,
- div.commentbox_main::after { display: none !important; }
- /* 评论框 Tab（"编辑" / "预览"）：黑色文字，选中项有外框 */
- .commentbox_title a,
- .commentbox_title_left a,
- .commentbox_title_left .tab_selected,
- .commentbox_title_left span {
- font-family: var(--font-serif) !important;
- color: #000 !important;
- text-decoration-color: #000 !important;
- border-bottom-color: #000 !important;
- font-weight: 500 !important;
- }
- .commentbox_title_left .tab_selected {
- border: 1px solid #000 !important;
- background-color: #fff !important;
- border-bottom: none !important; /* 选中时底边融入内容区 */
- }
- .commentbox_title a:hover {
- color: #666 !important;
- text-decoration-color: #666 !important;
- border-bottom-color: #666 !important;
- }
- .commentbox_title_left { border-bottom: 1px solid #000 !important; }
- /* 评论框底部选项（"退出"、表情等） */
- #commentbox_opt,
- #commentbox_opt a {
- font-family: var(--font-serif) !important;
- color: #000 !important;
- font-size: 13px !important;
- }
- #commentbox_opt a { text-decoration: none !important; transition: color 0.3s ease !important; }
- #commentbox_opt a:hover { color: #bbb !important; }
- /* "自动补全"提示 */
- .inline_middle { font-family: var(--font-serif) !important; }
- /* 提交评论按钮：实心黑底，hover 稍淡 + 阴影 */
- #btn_comment_submit {
- background-color: #000 !important;
- color: #fff !important;
- border: 1px solid #000 !important;
- padding: 8px 24px !important;
- border-radius: 4px !important;
- font-family: var(--font-serif) !important;
- font-size: 14px !important;
- cursor: pointer !important;
- transition: all 0.3s ease !important;
- }
- #btn_comment_submit:hover {
- background-color: #333 !important;
- border-color: #333 !important;
- box-shadow: 0 2px 8px rgba(0,0,0,.2) !important;
- }
- /*
- * 博客统计区域（#blogStats）字体：
- * 博客园用内联 style 写死字体，CSS !important 无法覆盖内联样式，
- * 暂无有效方案，留此注释供日后排查
- */
- /* =====================================================
- 9. 随笔 Digg（推荐 / 反对）
- · 极简 flex 布局，数字大字，无背景无边框
- · 用 ::after 伪元素生成文字标签，避免修改 HTML
- ===================================================== */
- #div_digg { margin: 60px 0 !important; display: flex !important; }
- .diggit, .buryit {
- flex: 1 !important;
- text-align: center !important;
- background: none !important;
- border: none !important;
- box-shadow: none !important;
- padding: 20px 0 !important;
- }
- .diggnum, .burynum {
- font-size: 22px !important;
- font-weight: 600 !important;
- color: #111 !important;
- display: block !important;
- margin-bottom: 6px !important;
- }
- .diggit::after { content: "推荐"; display: block; font-size: 13px; color: #666; white-space: nowrap; }
- .buryit::after { content: "反对"; display: block; font-size: 13px; color: #666; white-space: nowrap; }
- .diggit:hover::after, .buryit:hover::after { color: #000; }
✨ 很简洁，隐藏了很多元素，详细内容待各位阅读代码
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！ |
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜
