@charset "UTF-8";
/* =============================================================================
 * 闲言（时光机）页面 · 视觉一致性修正
 * -----------------------------------------------------------------------------
 * 作用范围：只影响 /index.php/cross.html
 *   所有选择器都用 #time_content 收口，该 id 只出现在 cross.php 的 <main> 上，
 *   因此本文件即使被别的页面加载也不会外溢。
 *
 * 改的四件事：
 *   1. 头图压暗（2026-10-04 调整为「只压下半」），右上角「132 说说 / 9 标签」不再消失在雪地里
 *   2. 「我的动态」标签条 + 编辑框合并成一张发布卡片，左边界统一到 15px 栅格
 *   3. 发布卡片的圆角/阴影与下方「说说」卡片对齐（原来 6px/1px vs 4px/3px）
 *   4. 编辑框从"看不见的空白"变成有描边、有 placeholder 的输入区
 *
 * 颜色全部走局部变量：深色模式下主题不会输出 --bg-* 那组变量，
 * 所以浅色规则里不能直接写 var(--bg-main-lter) 了事，必须单独兜底。
 * ========================================================================== */

/* --- 局部颜色变量：浅色 / 深色两套 ---------------------------------------- */
#time_content {
    --xj-card: var(--bg-main-lter, #fefffd);      /* 卡片底色，与说说卡片同色 */
    --xj-input: #fff;                              /* 输入框底色 */
    --xj-line: rgba(0, 0, 0, .10);                 /* 输入框描边 */
    --xj-divider: rgba(0, 0, 0, .05);              /* 卡头分隔线 */
    --xj-shadow: 0 1px 3px rgba(0, 0, 0, .05);     /* 与 .box-shadow-wrap-normal 一致 */
    --xj-accent: var(--bg-most-dk, #487054);       /* 当前主题的强调色 */
}

html.theme-dark #time_content {
    --xj-card: #171718;
    --xj-input: #0a0a0a;
    --xj-line: rgba(255, 255, 255, .12);
    --xj-divider: rgba(255, 255, 255, .07);
    --xj-shadow: 0 2px 6px rgba(0, 0, 0, .42);
    --xj-accent: #dcdcdc;
}

/* =============================================================================
 * 1. 头图：压暗 + 文字投影，保证右上角数字可读
 *    原来 .bg-text 是 #ececec、.bg-second-text 是 #d6d6d6，直接压在白雪上：
 *    取样最亮处（雪面）对比度约 1.1:1，中位背景约 3.3~4.6:1，属于「能看见但发飘」。
 *    加压制后中位对比度提升到 5.4~13.6:1。
 * ========================================================================== */
#time_content .time_cover {
    position: relative;
    overflow: hidden;
}

#time_content .time_cover::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /* 2026-10-04 调整：站长反馈「上面有点暗」。
       原为 to top 三层（0.46 / 0.24 / 0.12），整张图（含上半部的雪峰与天空）
       都被压了一档，实测平均亮度从 106 降到 83（-22%）。
       改成「上 45% 完全不动，只往下渐深」：
         · 雪峰 / 天空 / 山脊 → 100% 原图，通透
         · 右下角「132 说说 / 9 标签」所在的 57% 高度处 → α≈0.20，仍有底
       配合 .bg-second-text 的白色 + 文字投影（见下方 .comment-respond 前的规则）
       保证数字在雪面上的可读性。 */
    background: linear-gradient(to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0) 45%,
    rgba(0, 0, 0, .20) 70%,
    rgba(0, 0, 0, .38) 100%);
    pointer-events: none;
}

#time_content .time_cover > .wrapper-lg {
    position: relative;
    z-index: 1; /* 保证统计数字压在压暗层之上 */
}

#time_content .time_cover .bg-text,
#time_content .time_cover .bg-second-text {
    text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}

/* 2026-10-04：压暗层改成「只压下半」后，右下角这组统计数字（132 说说 / 9 标签）
   落在 α≈0.20 的那一档上，底子比原来薄了，所以把投影加重一档补回来，
   保证数字在雪面上仍然立得住（实测对比度见优化报告第十六节）。 */
#time_content .time_cover .wrapper-lg .bg-second-text {
    text-shadow: 0 1px 3px rgba(0, 0, 0, .8), 0 0 10px rgba(0, 0, 0, .45);
}

#time_content .time_cover .bg-second-text {
    color: #fff;
    opacity: .82;
}

/* =============================================================================
 * 2. 发布卡片：标签条当卡头，编辑框当卡身，两者拼成一张卡
 *    原来标签条内边距 15px（左边 306px），编辑框被
 *    `.comment-respond .panel-default{margin-left:30px}` 推到 337px，
 *    上下差 31px，看起来是两个不相干的碎片。
 * ========================================================================== */
#time_content .time_tab_list {
    /* 左右 16px + 下 -1px：让卡头与下面的 .comment-respond 卡身像素级对齐
       （.respond 比 .tab-content 左右各窄 1px），不留接缝。 */
    margin: 0 16px -1px;
    /* 左内边距 3px 是配合下面 tab 自带的 10px 内边距，
       让「我的动态」四个字左边正好落在 384.5px，
       与编辑框、工具条、提交按钮的左边界对齐（原来差 31px）。
       注意：时间线卡片的左边界是 430.5px，本来就比发布卡片更靠右，
       这里对齐的是「发布卡片内部」，不是时间线卡片。 */
    padding: 8px 15px 0 3px;
    background: var(--xj-card);
    border-radius: 4px 4px 0 0;
    box-shadow: var(--xj-shadow), inset 0 -1px 0 var(--xj-divider);
    position: relative;
    z-index: 1;
}

/* 标签条内部：从 Bootstrap 的浮动胶囊改成一行对齐的表头 */
#time_content #time-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 2px;
}

#time_content #time-tabs > li {
    float: none;
}

#time_content #time-tabs > li > a,
#time_content #time-tabs > li > a:focus {
    padding: 7px 10px 8px;
    margin: 0;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 3px 3px 0 0;
    color: var(--text-color-lt, #7c8780);
    font-size: 14px;
    line-height: 1.4;
}

#time_content #time-tabs > li > a:hover {
    background: transparent;
    color: var(--xj-accent);
}

/* 未登录访客：编辑框是 .hide（display:none），此时卡头下面没有卡身，
   不该只圆上面两个角、还拖一条分隔线，做成一张完整的小卡片更自然。
   访客点「回复」后 JS 会去掉 .hide，:has() 会自动失效、恢复卡头样式。
   老浏览器不支持 :has() 时只是下沿不圆，不影响可用性。 */
#time_content .time_tab_list:not(:has(+ .tab-content #talk .respond:not(.hide))) {
    margin-bottom: 0;
    border-radius: 4px;
    box-shadow: var(--xj-shadow);
}

#time_content #time-tabs > li.active > a,
#time_content #time-tabs > li.active > a:hover,
#time_content #time-tabs > li.active > a:focus {
    background: transparent;
    /* 主题里 .nav-pills>li.active>a{color:#fff!important} 是 !important，
       这里必须同样加 !important，否则白字压在浅色卡头上等于隐形。 */
    color: var(--xj-accent) !important;
    font-weight: 600;
    border-bottom-color: var(--xj-accent);
}

/* 卡身：.tab-content / #talk 都不再另起内边距，让编辑框顶到卡头上 */
#time_content .tab-content {
    margin: 0 15px;
}

#time_content #talk.padder {
    padding: 0;
}

/* 其他 tab（rssItems 配置了才会有：豆瓣/朋友圈等）原本靠 .padder 缩进 15px，
   现在 .tab-content 已经加了 15px 外边距，这里要把横向内边距还回去，
   否则它们会比说说面板多缩进 15px。（当前 rssItems 为空，属于预防性修正。） */
#time_content .tab-content > .tab-pane:not(#talk) {
    padding-left: 0;
    padding-right: 0;
}

#time_content .comment-respond {
    padding: 14px 15px 15px;
    background: var(--xj-card);
    border-radius: 0 0 4px 4px;
    box-shadow: var(--xj-shadow);
}

/* 去掉卡片内部那层多余的 panel 外观（原 margin:20px 0 20px 30px） */
#time_content .comment-respond .panel-default {
    margin: 0 !important;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

/* 点某条说说的「回复」时，JS 会把同一个 #respond 搬进时间线里
   （.streamline > .comment-list > .comment-body > #respond）。
   这时卡头与卡身的关系反过来了：回复框自己就是一张卡，而且必须和它所回复的
   那条说说左右对齐。所以把卡片外观从 .comment-respond 挪到 .panel-default 上，
   并恢复 .panel-default 原有的 margin-left:30px（否则整体会比说说卡片左突 15px、
   右溢 15px——这是实测出来的回归，不是推测）。 */
#time_content #talk .streamline .comment-respond {
    padding: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

#time_content #talk .streamline .comment-respond .panel-default {
    margin-left: 30px !important;
    padding: 14px 15px 15px;
    background: var(--xj-card);
    border-radius: 4px;
    box-shadow: var(--xj-shadow);
}

/* =============================================================================
 * 3. 编辑框：给输入区一个可见的边界，不再是一块"什么都没写的白板"
 * ========================================================================== */
#time_content #comment {
    padding: 10px 12px;
    min-height: 84px;
    background: var(--xj-input);
    border: 1px solid var(--xj-line);
    border-radius: 4px;
    color: var(--text-color, #666);
    font-size: 14px;
    line-height: 1.7;
    resize: vertical;
    transition: border-color .2s ease, box-shadow .2s ease;
}

#time_content #comment:focus {
    border-color: var(--xj-accent);
    box-shadow: 0 0 0 2px rgba(35, 183, 229, .12);
    outline: none;
}

#time_content #comment::placeholder {
    color: var(--text-color-lt, #9aa79f);
    opacity: .85;
}

/* 工具条：底色跟卡身一致，只留一条细分隔线 */
#time_content .comment-respond .panel-footer {
    margin-top: 0;
    padding: 10px 0 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

/* 三个小图标对齐输入框左边界 */
#time_content #time_toolbar {
    margin: 0;
}

/* =============================================================================
 * 4. 专注模式（点击「专注」开关）下不要卡片外观，保持原来铺满的样子
 * ========================================================================== */
body.focus_comment #time_content .comment-respond {
    padding: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

body.focus_comment #time_content .comment-respond .panel-default {
    margin: 20px 30px !important;
}

/* =============================================================================
 * 5. 窄屏：标签条与卡片左右留白收窄，避免小屏上两侧被挤掉
 * ========================================================================== */
@media (max-width: 767px) {
    /* 窄屏同样要保持「卡头比卡身左右各多缩 1px、并向上叠 1px」的关系，
       否则卡头与卡身会错开 1px 并露出一条 1px 的竖向缝隙（实测过）。 */
    #time_content .time_tab_list {
        margin: 0 11px -1px;
        padding: 6px 10px 0;
    }

    #time_content .tab-content {
        margin: 0 10px;
    }

    #time_content .comment-respond {
        padding: 10px 10px 12px;
    }
}