/* ========== 归档时间轴 ========== */ .archive-timeline__group { margin-bottom: 40px; } .archive-timeline__heading { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; font-size: 1.125rem; font-weight: 700; } .archive-timeline__badge { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--color-primary-50); color: var(--color-primary-dark); } html.dark .archive-timeline__badge, html.dark .archive-timeline__badge { color: var(--color-primary-light); } /* ========== 认证页 / 表单页 ========== */ .auth-page .site-nav__inner { max-width: 100%; } .auth-shell { min-height: calc(100vh - var(--nav-height)); display: flex; align-items: center; justify-content: center; padding: 48px 16px 64px; } .auth-card { width: 100%; max-width: 400px; padding: 32px 28px; border-radius: var(--radius-lg); border: 1px solid var(--color-line); background: var(--surface-2); box-shadow: var(--shadow-md); } .auth-card__logo { width: 80px; height: 80px; margin: 0 auto 16px; border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 28px; } .auth-card__title { text-align: center; font-weight: 800; font-size: 1.5rem; margin: 0 0 4px; } .auth-card__subtitle { text-align: center; color: var(--color-ink-3); font-size: 14px; margin: 0 0 24px; } /* 绑定/登录会话过期状态 */ .auth-card__expired { text-align: center; padding: var(--space-8, 40px) var(--space-5, 20px); } .auth-card__expired p { color: var(--color-ink-3); margin-bottom: var(--space-5, 20px); } .auth-card__expired-action { display: inline-flex; text-decoration: none; padding: 10px 32px; } .form-field { margin-bottom: 16px; position: relative; } .form-field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--color-ink-3); } .input-wrap { position: relative; } .input-wrap .input-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 14px; opacity: 0.6; pointer-events: none; } .form-field input:not([type="checkbox"]) { width: 100%; height: 44px; padding: 0 16px 0 40px; border-radius: var(--radius-btn); border: 1px solid var(--color-line); background: var(--surface-page); color: var(--color-ink); font-size: 14px; box-sizing: border-box; } .form-field input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-50); } .form-field--pwd input { padding-right: 44px; } .input-wrap .toggle-pwd { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: none; background: none; cursor: pointer; color: var(--color-ink-4); } .form-row-between { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; font-size: 13px; } /* 社交登录分隔线 */ .social-login-divider { display: flex; align-items: center; margin: 24px 0 16px; color: var(--color-ink-3, #94a3b8); font-size: 13px; } .social-login-divider::before, .social-login-divider::after { content: ''; flex: 1; height: 1px; background: var(--color-line, #e2e8f0); } .social-login-divider span { padding: 0 16px; white-space: nowrap; } .oauth-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 16px; } .oauth-btn { width: 44px; height: 44px; border-radius: var(--radius-btn); border: 1px solid var(--color-line); display: flex; align-items: center; justify-content: center; color: var(--color-ink-3); transition: border-color 0.2s, color 0.2s; } .oauth-btn svg { width: 22px; height: 22px; display: block; fill: currentColor; } .oauth-btn:hover { border-color: var(--color-primary); color: var(--color-primary); } .auth-footer-link { text-align: center; margin-top: 20px; font-size: 14px; color: var(--color-ink-3); } .auth-footer-link a { color: var(--color-primary); font-weight: 600; } /* ========== 用户中心 Dashboard ========== */ .dashboard { max-width: 960px; margin: 0 auto; } .dashboard-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--color-line); margin-bottom: 24px; position: sticky; top: var(--nav-height); z-index: 50; background: var(--surface-page); padding-top: 8px; } /* WordPress Admin Bar 已全局禁用,无需偏移规则 */ .dashboard-tabs button { padding: 12px 16px; border: none; background: none; font-size: 14px; font-weight: 600; color: var(--color-ink-3); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 0.2s, border-color 0.2s; } .dashboard-tabs__link { padding: 12px 16px; font-size: 14px; font-weight: 600; color: var(--color-ink-3); text-decoration: none; border-bottom: 2px solid transparent; display: inline-flex; align-items: center; gap: 6px; margin-bottom: -1px; transition: color 0.15s; } .dashboard-tabs__link:hover { color: var(--color-primary); } .dashboard-tabs button:hover { color: var(--color-ink); } .dashboard-tabs button.is-active { color: var(--color-primary); border-bottom-color: var(--color-primary); } @media (max-width: 767px) { .dashboard-tabs button { padding: 10px 12px; font-size: 13px; } .tab-hide-mobile { display: none !important; } } @media (min-width: 768px) { .tab-hide-pc { display: none !important; } } .dashboard-panel { display: none; } .dashboard-panel.is-active { display: block; } .data-table-wrap { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--color-line); } .data-table { width: 100%; border-collapse: collapse; font-size: 14px; } .data-table th, .data-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--color-line); } .data-table th { background: var(--surface-3); font-weight: 600; } .data-table tr:nth-child(even) { background: var(--surface-2); } html.dark .data-table tr:nth-child(even), html.dark .data-table tr:nth-child(even) { background: rgba(255, 255, 255, 0.02); } .notif-list { border: 1px solid var(--color-line); border-radius: var(--radius-lg); overflow: hidden; } .notif-item { display: flex; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--color-line); background: var(--surface-2); } .notif-item:last-child { border-bottom: none; } .notif-item--unread { border-left: 3px solid var(--color-info); padding-left: 15px; } .notif-item--unread .notif-title { font-weight: 700; } .notif-title { font-size: 14px; margin: 0 0 4px; } .notif-meta { font-size: 12px; color: var(--color-ink-4); } /* ========== About / 友链 / 404 ========== */ .about-hero { max-width: 640px; margin: 0 auto; text-align: center; padding: 24px 20px 40px; border-radius: var(--radius-lg); border: 1px solid var(--color-line); background: var(--surface-2); } .about-avatar { width: 150px; height: 150px; border-radius: var(--radius-avatar); object-fit: cover; margin-bottom: 16px; border: 4px solid var(--color-line); }