和 ![]()
默认都是浏览器可拖元素，按住一拖会先拉起原生的拖影（半透明缩略图），
Swiper 这时候收不到 mousemove，看起来就是「按住拖完全没反应」。
光靠 JS 的 preventDefault 拦不干净（dragstart 不冒泡到 Swiper 的监听），
这里从 CSS 上直接禁掉原生拖拽，再配 grab / grabbing 抓手光标。 */
.joe_index__banner .swiper-slide,
.joe_index__banner .swiper-slide .item,
.joe_index__banner .swiper-slide img {
-webkit-user-drag: none;
-khtml-user-drag: none;
user-select: none;
-webkit-user-select: none;
}
.joe_index__banner .swiper-container.swiper-container-grab {
cursor: grab;
}
.joe_index__banner .swiper-container.swiper-container-grabbing {
cursor: grabbing;
}
/* 11.3 底部压暗：标题压在任意图片上都看得清 */
.joe_index__banner .swiper-slide .item::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 42%;
background: linear-gradient(to top, rgba(10, 12, 16, 0.42), rgba(10, 12, 16, 0));
pointer-events: none;
}
/* 11.4 去掉左上角的白色装饰图标 */
.joe_index__banner .swiper-slide .icon {
display: none;
}
/* 11.5 标题：整条渐变 → 左下角磨砂胶囊 */
.joe_index__banner .swiper-slide .title {
left: 14px;
right: auto;
bottom: 14px;
max-width: calc(100% - 28px);
padding: 7px 14px;
border-radius: 999px;
text-align: left;
font-size: 13px;
line-height: 1.4;
background: rgba(12, 14, 18, 0.42);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.14);
}
/* 11.6 分页：小圆点 → 会伸长的胶囊 */
.joe_index__banner .swiper-pagination {
left: auto;
right: 14px;
top: 14px;
bottom: auto;
width: auto;
display: flex;
align-items: center;
gap: 5px;
}
.joe_index__banner .swiper-pagination-bullet {
width: 6px;
height: 6px;
margin: 0;
border-radius: 999px;
background: #fff;
opacity: 0.42;
transition: width 0.28s ease, opacity 0.28s ease;
}
.joe_index__banner .swiper-pagination-bullet-active {
width: 18px;
opacity: 1;
}
/* 11.7 箭头：直角灰条 → 圆形磨砂，鼠标进区域才出现 */
.joe_index__banner .swiper-button-next,
.joe_index__banner .swiper-button-prev {
width: 38px;
height: 38px;
margin-top: -19px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.16);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.18);
opacity: 0;
transition: opacity 0.25s, background 0.25s;
}
.joe_index__banner .swiper-button-next {
right: 14px;
}
.joe_index__banner .swiper-button-prev {
left: 14px;
}
.joe_index__banner .swiper-container:hover .swiper-button-next,
.joe_index__banner .swiper-container:hover .swiper-button-prev,
.joe_index__banner .swiper-container:focus-within .swiper-button-next,
.joe_index__banner .swiper-container:focus-within .swiper-button-prev {
opacity: 1;
}
.joe_index__banner .swiper-button-next:hover,
.joe_index__banner .swiper-button-prev:hover {
background: rgba(255, 255, 255, 0.28);
}
/* 11.8 只配了一张图时，分页和箭头都没有意义（PHP 会加 is-single） */
.joe_index__banner.is-single .swiper-pagination,
.joe_index__banner.is-single .swiper-button-next,
.joe_index__banner.is-single .swiper-button-prev {
display: none;
}
/* 11.9 小图（手机） */
@media (max-width: 768px) {
html .joe_index__banner .swiper-container,
html .joe_index__banner .swiper-slide .item {
height: 190px;
border-radius: 14px;
}
.joe_index__banner .swiper-slide .title {
left: 10px;
bottom: 10px;
max-width: calc(100% - 20px);
padding: 6px 12px;
font-size: 12.5px;
}
.joe_index__banner .swiper-pagination {
right: 10px;
top: 10px;
}
.joe_index__banner .swiper-button-next,
.joe_index__banner .swiper-button-prev {
display: none;
}
}
/* --------------------------------------------------------------------------
12. 文章页：轻装修
--------------------------------------------------------------------------
只动圆角、标题层级、正文行高、控件的年代感。
不动列宽、不动 DOM、不碰目录和代码高亮。
-------------------------------------------------------------------------- */
/* 12.1 标题：24px/500 → 26px/600，与正文拉开层级 */
.joe_detail__title {
font-size: 26px;
font-weight: 600;
line-height: 1.45;
letter-spacing: -0.2px;
color: var(--main);
}
/* 12.2 作者行 */
.joe_detail__count {
padding-bottom: 16px;
border-bottom-color: var(--modern-line);
}
/* 那条 80px 的实心色块（原版是纯 var(--theme) 矩形）换成渐变短线 */
.joe_detail__count::after {
width: 56px;
height: 3px;
border-radius: 999px;
background: linear-gradient(90deg, var(--theme), rgba(64, 158, 255, 0.2));
}
.joe_detail__count-information .avatar {
padding: 2px;
border-color: var(--modern-line-strong);
}
.joe_detail__count-information .meta .author .link {
font-size: 12.5px;
font-weight: 600;
}
/* 右侧 32px 的日期大字太抢眼，收到次要层级 */
.joe_detail__count-created {
font-size: 26px;
line-height: 32px;
color: var(--seat);
letter-spacing: -0.5px;
}
/* 12.3 正文：行高与段距松一点，中文长文更耐读 */
.joe_detail__article {
padding-top: 18px;
}
.joe_detail__article p {
line-height: 1.9;
margin-bottom: 20px;
}
.joe_detail__article img {
border-radius: var(--radius-inner);
}
/* 12.4 版权块：跟卡片同一套圆角 + 淡描边 */
.joe_detail__copyright {
border-top-color: var(--modern-line);
}
.joe_detail__copyright .content {
padding: 14px 16px;
border-radius: var(--radius-inner);
border: 1px solid var(--modern-line);
}
/* 12.5 标签：方形色块 → 描边胶囊 */
.joe_detail__operate-tags a {
border-radius: 999px;
}
/* 12.6 上一篇 / 下一篇：直角小方块 → 胶囊 */
.joe_post__pagination-item {
width: auto;
height: auto;
}
.joe_post__pagination-item a {
padding: 8px 18px;
height: auto;
line-height: 1.4;
border-radius: 999px;
font-size: 12.5px;
letter-spacing: 0.2px;
box-shadow: none;
}
.joe_post__pagination-item a:hover {
box-shadow: none;
opacity: 0.9;
}
/* 12.7 评论区标题：24px 居中 → 18px 左对齐，层次更清楚 */
.joe_comment {
margin-top: 18px;
}
.joe_comment__title {
font-size: 18px;
font-weight: 600;
text-align: left;
padding-bottom: 14px;
border-bottom-color: var(--modern-line);
}
/* 12.8 评论表单：去掉那块浅蓝的直角底板 */
.joe_comment__respond-form {
border-radius: var(--radius-inner);
border: 1px solid var(--modern-line-strong);
background: var(--background);
overflow: hidden;
}
.joe_comment__respond-form .head {
border-bottom-color: var(--modern-line);
}
.joe_comment__respond-form .head .list:nth-child(2)::before,
.joe_comment__respond-form .head .list:nth-child(2)::after {
background: var(--modern-line);
}
/* 画图 / 文本模式：两个直角块 → 两颗胶囊 */
.joe_comment__respond-type {
gap: 6px;
margin-bottom: 8px;
}
.joe_comment__respond-type .item {
height: 28px;
padding: 0 14px;
border-radius: 999px;
font-size: 12.5px;
background: var(--classD);
}
.joe_comment__respond-type .item:first-child,
.joe_comment__respond-type .item:last-child {
border-radius: 999px;
}
.joe_comment__respond-form .foot .submit button {
height: 32px;
padding: 0 20px;
border-radius: 999px;
font-size: 13px;
}
/* 12.9 面包屑：从「裸文字」改成一条圆角导航条
结构在 post.php 里：.joe_container.joe_bread > ul.joe_bread__bread
> li.item（首页图标 + 链接） / li.line（分隔）/ li.item（分类）/ li.item（正文）
原来只有文字，飘在页面背景上很单薄；现在给它一张卡片底，和文章卡、
侧栏卡的圆角、描边、阴影保持同一套视觉语言。 */
.joe_bread {
/* .joe_container 自身左右各 15px 内边距，这里覆盖了 padding 就要一起补回来，
否则卡片会左贴容器边、和下面的文章卡错开（桌面端错 15px） */
padding: 14px 15px 4px;
}
/* ≥993px 起侧栏出现（.joe_aside 在 ≤992 隐藏），面包屑只应该占「文章那一列」：
右侧让出 15(容器内边距) + 250(侧栏 .joe_aside__item) + 15(侧栏左边距) = 280px，
这样它和 .joe_detail 左右正好齐平，不会一直伸到侧栏底下 */
@media (min-width: 993px) {
.joe_bread {
padding-right: 280px;
}
}
.joe_bread .joe_bread__bread {
display: flex;
align-items: center;
gap: 2px;
/* .joe_bread 本身是 flex 容器，ul 作为 flex item 默认收缩到内容宽度，
不写 width 100% 的话手机端只剩一小截卡片 */
width: 100%;
box-sizing: border-box;
min-height: 46px;
padding: 8px 14px;
background: var(--background);
border: 1px solid var(--modern-line);
border-radius: var(--radius-inner);
box-shadow: var(--box-shadow);
font-size: 13px;
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.joe_bread .joe_bread__bread::-webkit-scrollbar {
display: none;
}
.joe_bread .joe_bread__bread .item {
display: inline-flex;
align-items: center;
gap: 5px;
height: 26px;
white-space: nowrap;
color: var(--routine);
}
.joe_bread .joe_bread__bread .item .link {
color: var(--routine);
transition: color 0.2s;
}
.joe_bread .joe_bread__bread .item .link:hover {
color: var(--theme);
}
/* 首页图标：跟着主题色走，比灰色更容易认 */
.joe_bread .joe_bread__bread .item .icon {
width: 16px;
height: 16px;
min-width: 16px;
min-height: 16px;
margin-right: 0;
fill: var(--theme);
}
.joe_bread .joe_bread__bread .line {
padding: 0 7px;
color: var(--seat);
font-size: 12px;
line-height: 1;
}
/* 当前位置（正文）稍作强调，靠字重而不是换色，避免整条太花 */
.joe_bread .joe_bread__bread .item:last-child {
color: var(--main);
font-weight: 500;
}
/* 12.10 「暂无标签」这类标签：去掉左侧那块白色圆底，
改成「描边胶囊 + 小圆点」，亮色暗色都干净 */
.joe_detail__operate-tags a {
padding: 0 12px 0 24px;
border-radius: 999px;
background: transparent;
border: 1px solid var(--modern-line-strong);
color: var(--minor);
}
.joe_detail__operate-tags a:hover {
background: transparent;
border-color: var(--theme);
color: var(--theme);
}
.joe_detail__operate-tags a::before {
display: none;
}
.joe_detail__operate-tags a::after {
left: 12px;
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
opacity: 0.55;
/* 原图标是 12×12 的 SVG，换成 6px 圆点后位置要重算 */
transform: translate(-50%, -50%);
}
/* 12.11 小屏：评论区标题跟桌面一样左对齐（responsive 里是居中） */
@media (max-width: 768px) {
html .joe_comment__title {
text-align: left;
}
html .joe_post__pagination-item a {
padding: 7px 16px;
}
}
/* 12.12 代码块：不写语言的围栏代码会把整页撑宽（2026-10-17 修）
*
* 主题只给 pre[class*=language-] 写了样式，于是两种写法命运完全不同：
* ```php → 深的黑卡，能滚
* ``` → 裸奔
*
* 裸 会命中 .joe_detail__article code:not([class]) 那条「行内代码」样式：
* display:inline-block + 蓝底 + 内边距。inline-block 按最长一行撑宽度，
* 而 pre 的 white-space:pre 又不允许自动换行 ⇒ 这一块的宽度就等于最长的代码行，
* 父容器没有 overflow 兜底，整页跟着横向溢出（手机上右侧整条被切掉）。
*
* 覆盖要点：code 那条规则特异性是 0,2,1（.joe_detail__article + :not([class]) + code），
* 这里用 .joe_detail__article pre:not([class]) > code（0,2,2）压住它，把 inline-block 还原成块级。
*
* 规则刻意收窄到 pre:not([class])：带语言标记的深色代码卡有自己一整套样式
* （overflow:hidden + 内层 code 滚动 + 三个圆点），不能被这里的内边距和背景污染。
* 第一条 pre{max-width:100%;overflow-x:auto} 是全量兜底 —— 万一哪天裸块也被
* 加了 class，至少页面不会被撑破，最差也只是块内横滑。
*/
.joe_detail__article pre {
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.joe_detail__article pre:not([class]) {
margin: 0 0 18px;
padding: 15px 18px;
border: 1px solid var(--modern-line);
border-radius: var(--radius-inner);
background: rgba(16, 24, 40, 0.028);
}
html[data-night="night"] .joe_detail__article pre:not([class]) {
background: rgba(255, 255, 255, 0.045);
}
.joe_detail__article pre:not([class]) > code,
.joe_detail__article pre:not([class]) > code:not([class]) {
display: block;
padding: 0;
border: 0;
border-radius: 0;
background: none;
color: inherit;
font-size: 13px;
line-height: 1.8;
vertical-align: baseline;
white-space: pre;
word-break: normal;
}
@media (max-width: 768px) {
html .joe_detail__article pre:not([class]) {
padding: 13px 14px;
border-radius: 10px;
}
html .joe_detail__article pre:not([class]) > code,
html .joe_detail__article pre:not([class]) > code:not([class]) {
font-size: 12.5px;
}
}
/* --------------------------------------------------------------------------
13. 页脚运行统计（后台「页脚显示运行统计」开成 on 时才输出这一块）
位置：统计块是 .joe_footer .joe_container 的一个 .item，和备案号 / RSS·MAP
同处一条主行 —— 宽屏时正好落在「左备案号 ↔ 右 RSS·MAP」中间；
≤1200px 时主题的响应式文件把这条主行改成竖排（flex-direction:column），
统计块自然就变成独立一行，这里给它补一条上分隔线。
-------------------------------------------------------------------------- */
.joe_footer .joe_container > .joe_footer__stats {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 2px 18px;
margin: 0 auto;
padding: 0;
font-size: 12px;
line-height: 1.6;
color: var(--minor);
/* 数字等宽：三个数值不会因为位数变化而左右抖动 */
font-variant-numeric: tabular-nums;
}
.joe_footer__stats span {
display: inline-flex;
align-items: baseline;
gap: 4px;
white-space: nowrap;
}
.joe_footer__stats strong {
font-weight: 500;
color: var(--routine);
}
/* ≤768px：主题的 joe.responsive.min.css 把这条主行改成竖排，
统计块因此独占一行，补一条淡分隔线把它和 RSS·MAP 分开。
断点必须跟主题保持一致（768，不是 1200）—— 否则 769~1200px 之间
主行还是横排，width:100% 会把中间的统计撑成一整行，挤得 RSS·MAP 换行。 */
@media (max-width: 768px) {
html .joe_footer .joe_container > .joe_footer__stats {
width: 100%;
padding-top: 8px;
border-top: 1px solid var(--modern-line);
/* 竖排时排到最后一行，别夹在版权和 RSS·MAP 中间 */
order: 10;
}
}
/* 12.12 文章顶部的分类角标：2px 直角 → 胶囊 */
.joe_detail__category {
margin-bottom: 14px;
}
.joe_detail__category .item {
padding: 4px 11px;
border-radius: 999px;
font-size: 12px;
letter-spacing: 0.2px;
}
/* --------------------------------------------------------------------------
14. 首页「热门文章」四宫格：跟列表卡统一成「卡片」
-------------------------------------------------------------------------- */
/* 有轮播图时，banner 自己的 margin-bottom 已经给了间距，这里不要再叠一层 */
.joe_index__banner + .joe_index__hot {
padding-top: 0;
}
.joe_index__hot {
margin-bottom: 16px;
}
.joe_index__hot-list .item {
border-radius: var(--radius-wrap);
border: 1px solid var(--modern-line);
transition: border-color 0.25s, box-shadow 0.25s;
}
.joe_index__hot-list .item:hover {
border-color: var(--modern-line-strong);
box-shadow: var(--modern-shadow-hover);
}
/* 圆角交给外层裁切，图片本身不再单独设圆角（否则 hover 阴影会出现直角缝） */
.joe_index__hot-list .item .link .inner .image {
border-radius: 0;
}
.joe_index__hot-list .item .link .inner .title {
border-radius: 0;
line-height: 34px;
background: var(--background);
transition: color 0.25s;
}
/* 原来 hover 会把标题条刷成 --classC（一截深灰），像坏掉的色块 */
.joe_index__hot-list .item .link .inner:hover .title {
background: var(--background);
color: var(--theme);
}
/* 温度角标：橙红直角块 → 半透明磨砂胶囊 */
.joe_index__hot-list .item .link .inner .views {
top: 8px;
right: 8px;
height: 20px;
padding: 0 9px;
border-radius: 999px;
font-size: 11.5px;
background-image: none;
background: rgba(12, 14, 18, 0.5);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
/* --------------------------------------------------------------------------
15. 垂直轮播（右侧有两张推荐卡时，Swiper 切到竖向）
--------------------------------------------------------------------------
分页默认被第 11.6 节拉到了右上角横排，竖向滑动时应该回到右侧中部竖排。
-------------------------------------------------------------------------- */
.joe_index__banner .swiper-container-vertical .swiper-pagination {
left: auto;
right: 10px;
top: 50%;
bottom: auto;
transform: translateY(-50%);
flex-direction: column;
gap: 6px;
}
.joe_index__banner .swiper-container-vertical .swiper-pagination-bullet-active {
width: 6px;
height: 18px;
}
/* --------------------------------------------------------------------------
16. 文章页「点赞 / 赞赏 / 分享 / 收藏」按钮组 与 赞赏弹窗
handle.php 的结构：
.joe_detail__actions
├── .joe_detail__agree 点赞（DOM 结构不能动，见下）
├── .joe_detail__reward 赞赏
├── .joe_share__wechat 分享（复用 joe.share.js 的二维码面板）
└── .joe_fav 收藏（joe.actions.js + localStorage）
两条硬约束：
1. 主题 JS 是 $('.joe_detail__agree .icon').on('click', ...)，
别的按钮只要沾上 .icon 或落进 .joe_detail__agree，点一下会顺带点个赞。
2. 点赞数由 JS 用 $('.joe_detail__agree .text').html(n) 重写，
所以「点赞」二字只能用伪元素，写进 .text 会被冲掉。
-------------------------------------------------------------------------- */
.joe_detail__actions {
display: flex;
align-items: flex-start;
justify-content: center;
gap: 58px;
margin: 30px 0 22px;
}
/* 16.1 四个按钮共用：竖排、无底、灰字，图标 24px 描边 */
.joe_act {
display: block;
margin: 0;
padding: 0;
border: 0;
background: none;
color: var(--minor);
font-family: inherit;
font-size: 12px;
line-height: 1;
text-align: center;
text-decoration: none;
cursor: pointer;
user-select: none;
-webkit-tap-highlight-color: transparent;
transition: color 0.2s ease;
}
.joe_act:hover,
.joe_act:focus-visible {
color: var(--theme);
outline: none;
}
.joe_detail__actions .agree {
display: flex;
flex-direction: column;
align-items: center;
font-size: 12px;
line-height: 1;
color: inherit;
}
/* 图标容器统一 28×28 透明块，压掉原版的红色 / 金色圆底与阴影 */
.joe_detail__actions .joe_act__icon,
.joe_detail__actions .joe_detail__agree .agree .icon,
.joe_detail__actions .joe_detail__reward .agree .joe_reward__btn {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
margin: 0 0 7px;
padding: 0;
border-radius: 0;
background: none;
box-shadow: none;
color: inherit;
}
.joe_detail__actions .joe_act__icon svg,
.joe_detail__actions .joe_detail__agree .agree .icon svg,
.joe_detail__actions .joe_detail__reward .agree .joe_reward__btn svg {
width: 26px;
height: 26px;
}
/* 点赞那两个 svg 是绝对定位叠放的，原版靠 transform: scale(0/1) 切换显隐，
这里只补居中，别动 transform（JS 加 .active 时要用） */
.joe_detail__actions .joe_detail__agree .agree .icon svg {
inset: 0;
margin: auto;
}
/* 兜底：这两个 svg 默认都是 scale(0) + opacity:0，全靠 JS 加 .active 才出现。
万一主题 JS 没跑到（脚本被拦、报错、CSP），点赞图标就是一块空白。
这里在「两个 svg 都没有 .active」时先露出描边版，JS 一旦接管就自动让位。 */
.joe_detail__actions .joe_detail__agree .agree .icon:not(:has(svg.active)) svg.icon-2 {
transform: scale(1);
opacity: 1;
}
/* 点赞：未赞描边、已赞实心并变主题色（:has 不支持时退化成全灰，不影响功能） */
.joe_detail__actions .joe_detail__agree .agree .icon:has(svg.icon-2.active) {
color: inherit;
}
.joe_detail__actions .joe_detail__agree .agree .icon:has(svg.icon-1.active) {
color: var(--theme);
}
/* 「点赞」二字只能用伪元素 —— JS 会 html() 重写 .text 的内容 */
.joe_detail__actions .joe_detail__agree .text::before {
content: "点赞 ";
}
.joe_detail__actions .text {
font-size: 12px;
line-height: 1.15;
color: inherit;
}
/* 16.2 收藏激活态：星星填实 + 主题色 */
.joe_fav.is-on {
color: var(--theme);
}
.joe_fav.is-on .joe_fav__star {
fill: currentColor;
}
/* 16.3 弹窗 */
.joe_reward__mask {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
background: rgba(12, 14, 18, 0.46);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
opacity: 0;
visibility: hidden;
transition: opacity 0.24s ease, visibility 0.24s ease;
}
.joe_reward__mask.is-open {
opacity: 1;
visibility: visible;
}
body.joe_reward--lock {
overflow: hidden;
}
.joe_reward__dialog {
position: relative;
width: 100%;
max-width: 400px;
padding: 26px 24px 22px;
border-radius: var(--radius-wrap);
background: var(--background);
box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.4);
text-align: center;
transform: translateY(10px) scale(0.98);
opacity: 0;
transition: transform 0.26s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.26s ease;
}
.joe_reward__mask.is-open .joe_reward__dialog {
transform: translateY(0) scale(1);
opacity: 1;
}
.joe_reward__title {
font-size: 17px;
font-weight: 600;
letter-spacing: -0.2px;
color: var(--main);
}
.joe_reward__desc {
margin-top: 6px;
font-size: 12.5px;
line-height: 1.7;
color: var(--minor);
}
.joe_reward__body {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: center;
gap: 18px;
margin-top: 20px;
}
.joe_reward__qr {
flex: 0 0 auto;
}
/* 二维码统一放白底：透明 PNG 在暗色模式下也能扫 */
.joe_reward__qr-img {
width: 148px;
height: 148px;
padding: 7px;
border-radius: var(--radius-inner);
background: #fff;
box-shadow: 0 0 0 1px var(--modern-line) inset;
overflow: hidden;
}
.joe_reward__qr-img img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.joe_reward__qr-name {
margin-top: 9px;
font-size: 12px;
color: var(--minor);
}
.joe_reward__close {
position: absolute;
top: 10px;
right: 12px;
width: 30px;
height: 30px;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--seat);
font-size: 21px;
line-height: 1;
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease;
}
.joe_reward__close:hover {
background: var(--classD);
color: var(--routine);
}
@media (max-width: 768px) {
html .joe_detail__actions {
gap: 34px;
margin: 24px 0 18px;
}
html .joe_reward__dialog {
padding: 22px 16px 18px;
}
html .joe_reward__body {
gap: 12px;
}
html .joe_reward__qr-img {
width: 126px;
height: 126px;
}
}
/* --------------------------------------------------------------------------
17. 首页 tab：手机端显示全部四项（原主题只留前两项）
--------------------------------------------------------------------------
原主题在 joe.responsive.min.css 的 ≤768px 里写死了：
html .joe_index__title-title .item { display: none; }
html .joe_index__title-title .item:nth-child(1),
html .joe_index__title-title .item:nth-child(2) { display: block; }
也就是「评论最多 / 点赞最多」在手机上被**故意藏起来**了，不是渲染出错。
这里用同特异性（0,2,1）+ 后加载把它改回全部显示。
四项在 390px 下会略微超宽，所以给容器开横向滑动：放不下时可以左右拨。
*/
@media (max-width: 768px) {
html .joe_index__title {
flex-wrap: wrap;
padding-bottom: 12px;
}
html .joe_index__title-title {
width: 100%;
max-width: 100%;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
/* 能滑就行，滚动条不显示 */
scrollbar-width: none;
-ms-overflow-style: none;
-webkit-overflow-scrolling: touch;
}
html .joe_index__title-title::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
}
/* 关键：必须带 html 前缀，否则压不过 .joe_index__title-title .item { display:none } */
html .joe_index__title-title .item {
display: block;
flex: 0 0 auto;
padding: 7px 12px;
font-size: 13px;
white-space: nowrap;
}
/* 公告条换到第二行，不再和 tab 抢宽度 */
html .joe_index__title-notice {
width: 100%;
height: auto;
min-height: 22px;
margin-left: 0;
margin-top: 2px;
}
html .joe_index__title-notice a {
max-width: 100%;
}
}
@media (max-width: 400px) {
html .joe_index__title-title .item {
padding: 6px 10px;
font-size: 12.5px;
}
}
/* --------------------------------------------------------------------------
18. 分享：面板现代化 + 微信扫码浮层（2026-10-18，2026-10-18 二次改造）
原来点分享图标弹出来的是三个裸图标（QQ / QQ空间 / 微博）直接浮在页面底色上，
没有任何容器，视觉上像 2015 年的东西。这里给它套一层白底圆卡；
微博那格换成了微信 —— 微信没有网页转发接口，点开是当前页的二维码。
二次改造：QQ 与 QQ空间 那两个老跳转接口已废弃，换成「复制链接」和
「系统分享」（navigator.share，浏览器不支持时整个按钮不出现）。
-------------------------------------------------------------------------- */
/* 18.1 竖排面板：白底圆卡 + hover 微放大
宽度 = 图标 30 + padding 6 × 2 = 42，相对 26px 的分享按钮居中要左移 8px */
.joe_detail__operate-share .reach {
left: -8px;
padding: 6px;
border: 1px solid var(--modern-line);
border-radius: 21px;
background: var(--background);
box-shadow: 0 8px 24px -12px rgba(16, 24, 40, 0.35);
}
.joe_detail__operate-share .reach a {
display: block;
line-height: 0;
border-radius: 50%;
transition: transform 0.25s;
}
.joe_detail__operate-share .reach a:hover {
transform: scale(1.12);
}
/* 上面的 display:block 会盖掉 [hidden] 自带的 display:none，这里补回来 */
.joe_detail__operate-share .reach a[hidden] {
display: none;
}
/* 18.1b 复制成功的小提示（不依赖任何弹窗库） */
.joe_toast {
position: fixed;
left: 50%;
bottom: 48px;
z-index: 9999;
padding: 9px 16px;
border-radius: 999px;
background: rgba(20, 22, 26, 0.88);
color: #fff;
font-size: 13px;
line-height: 1.4;
opacity: 0;
transform: translate(-50%, 8px);
transition: opacity 0.2s ease, transform 0.2s ease;
pointer-events: none;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
.joe_toast.is-open {
opacity: 1;
transform: translate(-50%, 0);
}
/* 18.2 微信扫码浮层 */
.joe_share {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9998;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
background: rgba(10, 12, 16, 0.5);
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
opacity: 0;
transition: opacity 0.22s;
}
.joe_share.is-open {
opacity: 1;
}
.joe_share__card {
position: relative;
width: 268px;
max-width: 100%;
padding: 22px 20px 18px;
border-radius: 18px;
background: #fff;
box-shadow: 0 24px 60px -20px rgba(10, 12, 16, 0.55);
text-align: center;
transform: translateY(10px) scale(0.98);
transition: transform 0.24s;
}
.joe_share.is-open .joe_share__card {
transform: none;
}
.joe_share__close {
position: absolute;
top: 8px;
right: 8px;
width: 30px;
height: 30px;
padding: 0;
border: 0;
border-radius: 50%;
background: none;
color: #9aa0a6;
font-size: 20px;
line-height: 1;
cursor: pointer;
transition: background 0.2s, color 0.2s;
}
.joe_share__close:hover {
background: rgba(16, 24, 40, 0.06);
color: #5f6368;
}
.joe_share__title {
margin-bottom: 14px;
font-size: 15px;
font-weight: 600;
color: #1a1a1c;
}
/* 二维码容器固定白底：暗色模式下若跟着变深，手机就扫不出来了 */
.joe_share__qr {
width: 176px;
height: 176px;
margin: 0 auto 12px;
background: #fff;
}
.joe_share__qr img,
.joe_share__qr canvas {
display: block;
width: 176px;
height: 176px;
}
/* 二维码库没加载时的降级：直接给一段可复制的链接 */
.joe_share__qr--fallback {
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: 10px;
border: 1px dashed #dcdfe6;
border-radius: 8px;
color: #5f6368;
font-size: 11px;
line-height: 1.5;
text-align: left;
word-break: break-all;
}
.joe_share__tip {
font-size: 12.5px;
line-height: 1.7;
color: #777b83;
}
.joe_share__tip b {
color: #07c160;
font-weight: 600;
}
.joe_share__url {
margin-top: 10px;
color: #b0b4bb;
font-size: 11px;
word-break: break-all;
}
body.joe_share--lock {
overflow: hidden;
}
html[data-night="night"] .joe_share__card {
background: #232323;
}
html[data-night="night"] .joe_share__title {
color: #e8eaed;
}
html[data-night="night"] .joe_share__tip {
color: #b7bac0;
}
html[data-night="night"] .joe_share__url {
color: #6b6f76;
}
html[data-night="night"] .joe_share__close {
color: #8d9199;
}
html[data-night="night"] .joe_detail__operate-share .reach {
background: #2b2b2b;
}
@media (max-width: 768px) {
.joe_share {
padding: 16px;
}
.joe_share__card {
width: 250px;
padding: 20px 16px 16px;
}
}
/* ==========================================================================
19. 404 页（第 K+1 轮）
--------------------------------------------------------------------------
原生 404.php 只有一个 84KB 的 SVG 动画：没有标题、没有说明、没有返回入口，
手机上按 viewBox 1920×1920 等比缩到很小，看着像「页面白屏只剩一张图」。
这里把它包成上下两段：上面图（限高 46vh）、下面文案 + 两个按钮。
========================================================================== */
.joe_404 {
min-height: 100vh;
box-sizing: border-box;
padding: 24px 20px 40px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
background: var(--background);
}
.joe_404__art {
width: 100%;
/* 这个 SVG 的 viewBox 是 1920×1920，图形只占中间一小块，
容器给到 760px 时画面主体看起来才约 380px 宽 */
max-width: 760px;
display: flex;
justify-content: center;
}
/* SVG 自带 width/height 100%，不限高会把整屏吃满、把文案挤出视口 */
.joe_404__art > svg {
width: 100%;
height: auto;
max-height: 50vh;
display: block;
}
.joe_404__text {
text-align: center;
max-width: 460px;
}
.joe_404__text h1 {
margin: 0;
font-size: 40px;
line-height: 1.2;
font-weight: 700;
letter-spacing: 2px;
color: var(--main);
}
.joe_404__text p {
margin: 10px 0 20px;
font-size: 14px;
line-height: 1.7;
color: var(--seat);
}
.joe_404__actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
}
.joe_404__btn {
display: inline-flex;
align-items: center;
justify-content: center;
height: 38px;
padding: 0 20px;
border-radius: 999px;
font-size: 14px;
font-weight: 500;
text-decoration: none;
background: var(--theme);
color: #fff;
transition: opacity 0.2s, transform 0.2s;
}
.joe_404__btn:hover {
opacity: 0.88;
color: #fff;
}
.joe_404__btn:active {
transform: scale(0.97);
}
.joe_404__btn--ghost {
background: transparent;
color: var(--main);
border: 1px solid var(--modern-line);
}
.joe_404__btn--ghost:hover {
color: var(--theme);
opacity: 1;
}
@media (max-width: 768px) {
.joe_404 {
padding: 16px 16px 32px;
}
.joe_404__art {
max-width: 420px;
}
.joe_404__art > svg {
max-height: 34vh;
}
.joe_404__text h1 {
font-size: 30px;
}
}
/* ==========================================================================
20. 搜索浮层（.joe_header__searchout，手机端点放大镜滑出的那一块）
--------------------------------------------------------------------------
原生面板：输入框是直角、按钮紧贴右边、下面挂 20 个随机配色的标签方块 ——
手机上一展开就是一片彩色格子，而且零文章的标签也混在里面，点进去是空列表。
现在：胶囊搜索框 + 流式标签云。形态还是标签，只把「每个标签随机一个糖果色」
换成统一浅底 + 前 3 名主题色淡染（详见下面「热门标签」段）。
========================================================================== */
/* 面板：底部圆角 + 轻投影；高度受视口限制，内容多时面板内部滚动 */
.joe_header__searchout {
/* dvh 兜底：移动端浏览器地址栏收起/展开时 100vh 会跳，面板高度跟着抖 */
max-height: calc(100vh - 60px);
max-height: calc(100dvh - 60px);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.08);
border-bottom-left-radius: var(--radius-inner);
border-bottom-right-radius: var(--radius-inner);
}
.joe_header__searchout-inner {
padding: 14px 0 18px;
}
.joe_header__searchout-inner .search {
position: relative;
gap: 8px;
}
/* 放大镜：脱流定位在输入框左侧（.search 是 flex，直接塞进去会把输入框顶歪） */
.joe_header__searchout-inner .search > .icon {
position: absolute;
left: 15px;
top: 50%;
width: 17px;
height: 17px;
margin: 0;
fill: var(--seat);
transform: translateY(-50%);
pointer-events: none;
}
.joe_header__searchout-inner .search input {
height: 42px;
padding: 0 14px 0 40px;
border: 1px solid var(--modern-line);
border-radius: 999px;
background: var(--classD);
color: var(--main);
font-size: 14px;
transition: border-color 0.2s;
}
.joe_header__searchout-inner .search input::placeholder {
color: var(--seat);
}
.joe_header__searchout-inner .search input:focus {
border-color: var(--theme);
outline: none;
}
.joe_header__searchout-inner .search button {
flex: 0 0 auto;
height: 42px;
padding: 0 22px;
border: none;
border-radius: 999px;
font-size: 14px;
font-weight: 500;
color: #fff;
background: var(--theme);
transition: opacity 0.2s;
}
.joe_header__searchout-inner .search button:hover {
opacity: 0.88;
}
/* ---- 热门标签（流式 pill，替代原来的排行榜列表） ---- */
.joe_hot {
margin-top: 18px;
}
.joe_hot__head {
display: flex;
align-items: center;
gap: 7px;
margin-bottom: 10px;
font-size: 13px;
font-weight: 600;
color: var(--main);
}
.joe_hot__head::before {
content: "";
width: 3px;
height: 13px;
border-radius: 2px;
background: var(--theme);
}
.joe_hot__tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
/* 统一浅底。原来每个标签从色板里随机取色当背景，亮色下是糖果色、
暗色下又脏又乱；现在只有一种底色，颜色全部由主题变量带，明暗自动跟随。
border 一直占 1px 只是为了 hover 变实心时尺寸不跳。 */
.joe_hot__tag {
display: inline-flex;
align-items: center;
gap: 6px;
max-width: 100%;
height: 32px;
padding: 0 13px;
/* 描边用 --classC：面板是纯白，只有 --classD 的淡蓝底在手机上几乎看不出
「这是一颗按钮」，加一档更深的边就清楚了；hover 时描边跟着变主题色 */
border: 1px solid var(--classC);
border-radius: 999px;
background: var(--classD);
color: var(--routine);
font-size: 13px;
line-height: 1;
text-decoration: none;
/* 手机上点标签会闪一层灰蓝高亮，和 hover 色叠在一起很脏，关掉 */
-webkit-tap-highlight-color: transparent;
transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
}
/* 键盘 Tab 过来要看得见焦点，别只做 hover */
.joe_hot__tag:focus-visible {
outline: 2px solid var(--theme);
outline-offset: 2px;
}
.joe_hot__tag:hover {
background: var(--theme);
border-color: var(--theme);
/* 用 --background 当文字色：亮色主题 = 白字，暗色主题的背景是 #232323，
会自动变成「亮青底 + 深字」，比白字压在 #54b5db 上清楚得多 */
color: var(--background);
text-decoration: none;
transform: translateY(-1px);
}
.joe_hot__tag:active {
transform: translateY(0);
}
/* 标签名可能很长（有人会写「Typecho 主题二次开发」），单行省略，别把 pill 撑破 */
.joe_hot__tag .name {
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/* 文章数当热度，弱化成小字，不抢标签名 */
.joe_hot__tag .num {
flex: 0 0 auto;
font-size: 11px;
opacity: 0.5;
}
/* 前 3 名：主题色淡染 + 主题色文字。color-mix 不支持的浏览器会保留上面的
var(--classD) 浅底（先写的那条），只是没有「热点」区分，不影响可读性。 */
.joe_hot__tag--hot {
border-color: color-mix(in srgb, var(--theme) 30%, transparent);
/* 13% 是试出来的：10% 在 #232323 上几乎看不出底色差，18% 又像被选中 */
background: color-mix(in srgb, var(--theme) 13%, var(--background));
color: var(--theme);
}
/* 桌面端：面板很宽，搜索框和标签云一起限宽，
否则标签会一路排到 1100px 外，眼睛要横跨整屏扫 */
@media (min-width: 769px) {
.joe_header__searchout-inner .search {
max-width: 560px;
}
.joe_hot {
max-width: 640px;
}
}
/* ==========================================================================
21. 暗色模式下的代码块
--------------------------------------------------------------------------
Prism 主题 CSS 由 post.php / page.php / friends.php 按后台「代码高亮主题」引入，默认那条
（prism.min.css）把 pre 背景写死成 #f5f2f0 暖白、文字 #000、外加
text-shadow:0 1px #fff 的描边。亮色下这是标准的 GitHub 风浅色代码卡，
一进暗色模式就变成整页深色里的一块发光白板 —— 而且 token 是深色系
（#07a 深蓝、#905 深紫），就算只把背景压黑也全糊在一起。
这里在 html[data-night="night"] 下整体换成 Prism Tomorrow 色板：
背景 #2b2b2b、正文 #ccc、13 类 token 换成亮色版本。只作用于暗色，
亮色模式完全不受影响。
特异性：prism.min.css 是 pre[class*=language-]（0,1,1），token 是
.token.xxx（0,2,0）；每条都加了 html[data-night="night"] 前缀，
最低也到 0,1,2，压得住。
========================================================================== */
html[data-night="night"] pre[class*="language-"] {
/* 默认主题的 #f5f2f0 在深色页里像一块灯箱，这里换成和分享面板同阶的深灰 */
background: #2b2b2b;
color: #ccc;
/* 默认主题给每条代码都描了 1px 白边，深底上会糊成一团 */
text-shadow: none;
}
html[data-night="night"] code[class*="language-"] {
color: #ccc;
text-shadow: none;
}
/* 选中高亮：浅色主题用的是 #b3d4fc 淡蓝，深底上太亮 */
html[data-night="night"] pre[class*="language-"] ::selection,
html[data-night="night"] pre[class*="language-"]::selection,
html[data-night="night"] code[class*="language-"] ::selection,
html[data-night="night"] code[class*="language-"]::selection {
background: rgba(103, 205, 204, 0.25);
text-shadow: none;
}
/* —— Prism Tomorrow 色板（官方配色，深底对比度经过验证） —— */
html[data-night="night"] .token.comment,
html[data-night="night"] .token.block-comment,
html[data-night="night"] .token.prolog,
html[data-night="night"] .token.doctype,
html[data-night="night"] .token.cdata {
color: #999;
}
html[data-night="night"] .token.punctuation {
color: #ccc;
}
html[data-night="night"] .token.tag,
html[data-night="night"] .token.attr-name,
html[data-night="night"] .token.namespace,
html[data-night="night"] .token.deleted {
color: #e2777a;
}
html[data-night="night"] .token.function-name {
color: #6196cc;
}
html[data-night="night"] .token.boolean,
html[data-night="night"] .token.number,
html[data-night="night"] .token.function {
color: #f08d49;
}
html[data-night="night"] .token.property,
html[data-night="night"] .token.class-name,
html[data-night="night"] .token.constant,
html[data-night="night"] .token.symbol {
color: #f8c555;
}
html[data-night="night"] .token.selector,
html[data-night="night"] .token.important,
html[data-night="night"] .token.atrule,
html[data-night="night"] .token.keyword,
html[data-night="night"] .token.builtin {
color: #cc99cd;
}
html[data-night="night"] .token.string,
html[data-night="night"] .token.char,
html[data-night="night"] .token.attr-value,
html[data-night="night"] .token.regex,
html[data-night="night"] .token.variable {
color: #7ec699;
}
html[data-night="night"] .token.operator,
html[data-night="night"] .token.entity,
html[data-night="night"] .token.url {
color: #67cdcc;
}
html[data-night="night"] .token.important,
html[data-night="night"] .token.bold {
font-weight: 700;
}
html[data-night="night"] .token.italic {
font-style: italic;
}
/* 复制图标：默认 #909399 在 #2b2b2b 上偏暗，hover 才勉强看清 */
html[data-night="night"] .joe_detail__article pre[class*="language-"] .copy {
color: #8a8a8a;
}
html[data-night="night"] .joe_detail__article pre[class*="language-"] .copy:hover {
color: #fff;
}
/* 行内代码：默认 #ecf5ff 浅蓝底 + #409eff 蓝字，深底上是一片发白的浅块 */
html[data-night="night"] .joe_detail__article code:not([class]) {
background: rgba(64, 158, 255, 0.14);
color: #79bbff;
}
/* ==========================================================================
文章目录（TOC）—— 放在文章侧边栏
--------------------------------------------------------------------------
复用 .joe_aside__item 的卡片样式；JS 在 assets/js/joe.toc.js。
========================================================================== */
.joe_detail__article h2,
.joe_detail__article h3 {
scroll-margin-top: 92px;
}
.joe_toc.joe_aside__item {
background: var(--background, #fff);
}
.joe_toc .joe_aside__item-title {
gap: 6px;
font-size: 15px;
}
.joe_toc .joe_aside__item-title .text {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.joe_toc__count {
flex-shrink: 0;
padding: 0 7px;
height: 18px;
line-height: 18px;
border-radius: 999px;
background: rgba(64, 158, 255, 0.1);
color: var(--theme, #409eff);
font-size: 11px;
font-weight: 600;
}
.joe_toc__fold {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 22px;
height: 22px;
margin-left: 2px;
padding: 0;
border: 0;
border-radius: 7px;
background: transparent;
color: var(--minor, #909399);
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease;
}
.joe_toc__fold::before {
content: "";
width: 7px;
height: 7px;
border-top: 1.6px solid currentColor;
border-left: 1.6px solid currentColor;
transform: rotate(45deg) translate(1px, 1px);
transition: transform 0.2s ease;
}
.joe_toc__fold:hover {
background: var(--classC, #ebeef5);
color: var(--main, #303133);
}
.joe_toc.is-folded .joe_toc__body {
display: none;
}
.joe_toc.is-folded .joe_toc__fold::before {
transform: rotate(-135deg) translate(1px, 1px);
}
.joe_toc__body {
max-height: 380px;
overflow-y: auto;
overscroll-behavior: contain;
padding: 6px 6px 8px;
}
.joe_toc__body::-webkit-scrollbar {
width: 4px;
}
.joe_toc__body::-webkit-scrollbar-thumb {
border-radius: 4px;
background: rgba(144, 147, 153, 0.35);
}
.joe_toc__list {
margin: 0;
padding: 0;
list-style: none;
}
.joe_toc__item a {
display: block;
padding: 7px 10px 7px 12px;
border-left: 2px solid transparent;
border-radius: 0 8px 8px 0;
color: var(--routine, #606266);
font-size: 13px;
line-height: 1.55;
text-decoration: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.joe_toc__item--h3 a {
padding-left: 26px;
font-size: 12.5px;
color: var(--minor, #909399);
}
.joe_toc__item a:hover {
background: var(--classD, #f2f6fc);
color: var(--main, #303133);
}
.joe_toc__item a.is-active {
border-left-color: var(--theme, #409eff);
background: rgba(64, 158, 255, 0.09);
color: var(--theme, #409eff);
font-weight: 600;
}
/* 没有侧边栏的页面：退回正文顶部的卡片形态 */
.joe_toc--inline {
margin: 0 0 18px;
width: auto;
border: 1px solid rgba(15, 23, 42, 0.06);
background: var(--background, #fff);
}
.joe_toc--inline .joe_toc__body {
max-height: 300px;
}
@media (max-width: 900px) {
.joe_toc__body {
max-height: 260px;
}
}
html[data-night="night"] .joe_toc.joe_aside__item,
html[data-night="night"] .joe_toc--inline {
background: #2a2a2a;
border-color: rgba(255, 255, 255, 0.08);
}
html[data-night="night"] .joe_toc__item a:hover {
background: rgba(255, 255, 255, 0.05);
}
html[data-night="night"] .joe_toc__item a.is-active {
background: rgba(84, 181, 219, 0.16);
}