/* ============================================================================
* qqspace-butterfly.css — QQ空间归档页「去 Bootstrap 重皮肤」
* ----------------------------------------------------------------------------
* 背景：原页面依赖 Bootstrap 4 的若干工具/组件类（.container/.d-flex/.badge
* /.rounded-circle/.text-muted …），这些类 common.css 并未定义，此前由
* bootstrap.min.css 兜底。本文件用 Butterfly 主题的设计变量（CSS 变量）
* 等价重写这些类，从而：
* 1) 彻底移除 Bootstrap 依赖（视觉一致性更好，少一个外部库）；
* 2) 颜色/圆角/阴影与全站卡片风格统一；
* 3) 复用 var(--card-bg)/var(--font-color) 等变量，自动适配
* 亮色 / 暗色 / 阅读 三种模式。
*
* 作用域：全部以 .qqspace-page 前缀限定（#qqspace.qqspace-page 是布局包裹层），
* 避免 .container/.row/.text-muted 等通用类名污染全站其它页面。
* 加载顺序：本文件在 common.css 之后引入，同级选择器下后者生效，确保覆盖。
* ==========================================================================*/
/* ----------------------------------------------------------------------------
* 0. 卡片基座（替代 Bootstrap .card 基础样式）
* 说明：common.css 只定义了 .card-body 的内边距与 .border 的圆角，
* 卡片的底色 / 边框 / 阴影原本全部来自 Bootstrap，去 Bootstrap 后必须补回。
* 这里用主题变量重写，使说说卡片与全站卡片风格统一，并自动适配暗色模式。
* --------------------------------------------------------------------------*/
.qqspace-page .card {
background-color: var(--card-bg); /* 主题卡片底色（亮/暗自动切换） */
color: var(--font-color); /* 卡片内文字随模式变化 */
border: 1px solid var(--tab-border-color); /* 主题分隔线色 */
border-radius: var(--radius-card); /* 与 Butterfly 卡片圆角一致 */
/* 柔和阴影：用主色 8% 透明度生成，亮/暗模式均自然 */
box-shadow: 0 4px 12px color-mix(in srgb, var(--font-color) 8%, transparent);
transition:
box-shadow 0.3s ease,
transform 0.3s ease;
}
/* 悬停轻微浮起，呼应全站卡片交互 */
.qqspace-page .card:hover {
box-shadow: 0 8px 20px color-mix(in srgb, var(--font-color) 14%, transparent);
transform: translateY(-2px);
}
/* 通用圆角工具：替代 Bootstrap .rounded（部分图片可能用到） */
.qqspace-page .rounded {
border-radius: 0.25rem;
}
/* ----------------------------------------------------------------------------
* 1. 布局工具类（替代 Bootstrap 栅格/排版工具）
* --------------------------------------------------------------------------*/
/* 居中定宽容器：替代 .container（内容区 #messages_html 即带此 class） */
.qqspace-page .qq-container {
width: 100%;
max-width: 1140px;
margin-right: auto;
margin-left: auto;
padding-right: 15px;
padding-left: 15px;
}
/* 弹性行：common.css 已定义 .row，这里再次显式声明以保证 flex 行为 */
.qqspace-page .qq-row {
display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
/* 弹性列：替代 .col（如说说信息区的头像列 + 文本列） */
.qqspace-page .qq-col {
flex: 1 1 0;
max-width: 100%;
padding-right: 15px;
padding-left: 15px;
}
/* 是否显示弹性布局：替代 .d-flex */
.qqspace-page .qq-d-flex {
display: flex;
}
/* 主轴起点对齐：替代 .justify-content-start */
.qqspace-page .qq-justify-content-start {
justify-content: flex-start;
}
/* 间距工具：替代 .ml-2 / .mt-2 / .mt-3 / .pl-3 / .pl-0 */
.qqspace-page .qq-ml-2 {
margin-left: 0.5rem;
}
.qqspace-page .qq-mt-2 {
margin-top: 0.5rem;
}
.qqspace-page .qq-mt-3 {
margin-top: 1rem;
}
.qqspace-page .qq-pl-3 {
padding-left: 1rem;
}
.qqspace-page .pl-0 {
padding-left: 0;
}
/* 宽度工具：替代 .w-100 / .h-100 / .w-70 */
.qqspace-page .qq-w-100 {
width: 100%;
}
.qqspace-page .qq-h-100 {
height: 100%;
}
.qqspace-page .qq-w-70 {
width: 100%;
} /* 说说卡片主体宽度：与年份/月份/日期标题同宽（均占满 .container），
避免「标题满宽、卡片 70%」导致的错位撕裂感；
移动端媒体查询里也曾单独置 100%，此处统一为 100% 即可 */
/* ----------------------------------------------------------------------------
* 2. 文本与配色工具（全部用主题变量，自动适配暗色）
* --------------------------------------------------------------------------*/
/* 次要文本：替代 .text-muted（用主色按 60% 透明度，亮/暗模式自适应） */
.qqspace-page .qq-text-muted {
color: color-mix(in srgb, var(--font-color) 60%, transparent);
}
/* 小号字：替代 .small */
.qqspace-page .qq-small {
font-size: 0.875em;
}
/* 文字对齐：替代 .text-left */
.qqspace-page .qq-text-left {
text-align: left;
}
/* 主色文字：替代 .text-primary */
.qqspace-page .qq-text-primary {
color: var(--default-bg-color);
}
/* 信息色文字：替代 .text-info（青色，区别于主蓝） */
.qqspace-page .text-info {
color: #38b2c9;
}
/* --------------------------------------------------------------------------
* 说说「设备标识」（手机型号，如 HUAWEI nova 4 (4G)）
* 结构： 型号
* 问题：型号与 FontAwesome 手机图标共用同一 span。.fa 把字体强制为 FontAwesome，
* 文字只能靠浏览器回退，导致：① 字号与图标对不齐、整体偏大；
* ② 回退字体不规整；③ 窄屏下整段被折行。
* 修复（仅作用于 .message-infos 内，不污染全站）：
* 1) 字号缩小到与手机图标视觉协调（.75em，相对已是 .small 的 .message-infos）；
* 2) 整段不换行，型号保持一行（如 HUAWEI nova 4 (4G)）；
* 3) 改用系统无衬线字体，文字规整；line-height/vertical-align 与图标对齐；
* 4) 图标 ::before 显式指回 FontAwesome，否则上面的 font-family 会把图标变豆腐块。
* ------------------------------------------------------------------------*/
.qqspace-page .message-infos .text-info {
font-size: 0.75em; /* 比图标略小，视觉协调（图标在 .fa 下约为 .8~1em） */
white-space: nowrap; /* 型号不折行，始终同行显示 */
display: inline-block; /* 配合 nowrap，避免 block 行盒异常换行 */
/* 规整的系统无衬线字体：覆盖 .fa 的 FontAwesome，让型号文字正常显示 */
font-family:
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB",
sans-serif;
line-height: 1; /* 与 .fa 的 line-height:1 一致，避免行高把文字撑大 */
vertical-align: middle; /* 与手机图标垂直居中对齐 */
}
/* 手机图标必须显式指回 FontAwesome 字体（上面的 font-family 只作用于文字，
不影响 ::before 的图标字形；这里单独把图标字体拉回来） */
.qqspace-page .message-infos .text-info::before {
font-family: FontAwesome;
}
/* 单行省略：替代 .text-truncate */
.qqspace-page .qq-text-truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 白字（用于图片/深色块之上的文字，与模式无关） */
.qqspace-page .qq-text-white {
color: #fff;
}
.qqspace-page .qq-text-white-50 {
color: rgba(255, 255, 255, 0.5);
}
/* ----------------------------------------------------------------------------
* 3. 头像/图片圆角与缩略图（替代 Bootstrap 形状类）
* --------------------------------------------------------------------------*/
/* 圆形：替代 .rounded-circle（头像） */
.qqspace-page .qq-rounded-circle {
border-radius: 50% !important;
}
/* 缩略图边框：替代 .img-thumbnail */
.qqspace-page .img-thumbnail {
padding: 0.25rem;
background-color: var(--card-bg);
border: 1px solid var(--tab-border-color);
border-radius: 6px;
}
/* 相册详情容器：导出工具用 .photo-detail 包裹图片，给一个安全的全宽显示 */
.qqspace-page .photo-detail {
width: 100%;
}
.qqspace-page .photo-detail img {
width: 100%;
border-radius: 6px;
}
/* ----------------------------------------------------------------------------
* 4. 徽标 / 数量胶囊（替代 Bootstrap .badge 系列）
* 用于说说分组标题后的「数量」徽标（如 6月 1）
* --------------------------------------------------------------------------*/
.qqspace-page .badge {
display: inline-block;
padding: 0.25em 0.5em;
font-size: 0.75em;
font-weight: 600;
line-height: 1;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: 0.25rem;
color: #fff;
background-color: var(--light-grey); /* 默认灰底，下面再细分主/次色 */
}
/* 胶囊形：替代 .badge-pill */
.qqspace-page .badge-pill {
border-radius: 50rem;
}
/* 主色徽标：替代 .badge-primary（年份分组数量，用主题蓝） */
.qqspace-page .badge-primary {
color: #fff;
background-color: var(--default-bg-color);
}
/* 次色徽标：替代 .badge-secondary（月份分组数量，用主色 15% 透明作灰底） */
.qqspace-page .badge-secondary {
color: var(--font-color);
background-color: color-mix(in srgb, var(--font-color) 15%, transparent);
}
/* ----------------------------------------------------------------------------
* 5. 列表组（替代 Bootstrap .list-group 系列，用于评论等区块）
* --------------------------------------------------------------------------*/
.qqspace-page .list-group {
display: flex;
flex-direction: column;
padding-left: 0;
margin-bottom: 0;
border-radius: 8px;
overflow: hidden;
background-color: var(--card-bg);
border: 1px solid var(--tab-border-color);
}
/* 无边框变体：替代 .list-group-flush */
.qqspace-page .list-group-flush {
border: 0;
border-radius: 0;
}
.qqspace-page .list-group-item {
position: relative;
display: block;
padding: 0.75rem 1.25rem;
background-color: var(--card-bg);
border-bottom: 1px solid var(--tab-border-color);
}
.qqspace-page .list-group-item:last-child {
border-bottom: 0;
}
/* ----------------------------------------------------------------------------
* 6. 卡片正文间距（替代 .card-text，common.css 未定义）
* --------------------------------------------------------------------------*/
.qqspace-page .card-text {
margin-bottom: 0.75rem;
}
/* ----------------------------------------------------------------------------
* 7. 响应式：移动端收紧容器内边距（卡片宽度已在基线上统一为 100%，此处无需再覆盖）
* --------------------------------------------------------------------------*/
@media (max-width: var(--bp-md)) {
.qqspace-page .qq-container {
padding-right: 10px;
padding-left: 10px;
}
}
/* --------------------------------------------------------------------------
* 头像 / 昵称：禁用点击
* 说说卡片里的头像与昵称原本是 ，点击会跳转到图片。
* 现已在 HTML 中移除其 href，这里再补两条规则确保彻底不可交互：
* - pointer-events: none → 鼠标事件完全透传，连“右键打开图片”都不行；
* - cursor: default → 不再显示手型，提示“不可点”。
* 仅作用于 .qqspace-page 作用域，不影响全站其它链接。
* ------------------------------------------------------------------------ */
.qqspace-page a.avatar,
.qqspace-page a.message-avatar-name,
.qqspace-page a.nickname-zoom {
pointer-events: none;
cursor: default;
}
/* ----------------------------------------------------------------------------
* 8. 年份 / 月份 / 日期 分组标题（替代原 #BlogAnchor 左导航的不可见锚点）
* 背景：原导出把年份/月份写成空的