polish(frontend): 侧栏与徽章可读性，智能悬停提示
降权全站字重；优化右栏公告/数据块；类型状态徽章用固定浅色区分；TipHost 仅在文案不一致、非文字或省略时显示。 Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -121,23 +121,22 @@ body {
|
||||
padding: 5px 10px;
|
||||
border-radius: 8px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
line-height: 1.35;
|
||||
font-weight: 400;
|
||||
line-height: 1.4;
|
||||
letter-spacing: 0.01em;
|
||||
pointer-events: none;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: var(--panel);
|
||||
background: color-mix(in srgb, var(--ink) 92%, transparent);
|
||||
border: 1px solid color-mix(in srgb, var(--ink) 88%, transparent);
|
||||
box-shadow: var(--shadow);
|
||||
white-space: normal;
|
||||
overflow-wrap: anywhere;
|
||||
color: var(--accent);
|
||||
background: color-mix(in srgb, var(--accent) 10%, var(--panel));
|
||||
border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
|
||||
box-shadow: var(--shadow-sm);
|
||||
animation: j13-tip-in 80ms ease-out;
|
||||
}
|
||||
.dark .j13-tip-bubble {
|
||||
color: var(--ink);
|
||||
background: color-mix(in srgb, var(--panel-2) 94%, var(--ink));
|
||||
border-color: var(--line-2);
|
||||
color: var(--accent);
|
||||
background: color-mix(in srgb, var(--accent) 16%, var(--panel));
|
||||
border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
|
||||
}
|
||||
@keyframes j13-tip-in {
|
||||
from {
|
||||
@@ -248,7 +247,7 @@ body {
|
||||
background: var(--panel);
|
||||
color: var(--ink-2);
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
font-weight: 500;
|
||||
transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
|
||||
}
|
||||
.j13-compose-typechip:hover:not(:disabled) {
|
||||
@@ -326,7 +325,7 @@ body {
|
||||
}
|
||||
.j13-compose-title::placeholder {
|
||||
color: var(--ink-3);
|
||||
font-weight: 700;
|
||||
font-weight: 500;
|
||||
}
|
||||
.j13-compose-title:focus {
|
||||
outline: none;
|
||||
@@ -427,7 +426,7 @@ body {
|
||||
border-radius: 10px;
|
||||
color: var(--ink);
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
font-weight: 500;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
transition: background 0.12s ease;
|
||||
@@ -450,7 +449,7 @@ body {
|
||||
border-radius: 12px;
|
||||
color: var(--ink-2);
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* 正文画布占满剩余高度 */
|
||||
@@ -522,7 +521,7 @@ body {
|
||||
padding: 0 12px;
|
||||
border-radius: 999px;
|
||||
font-size: 12.5px;
|
||||
font-weight: 700;
|
||||
font-weight: 500;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
@@ -717,7 +716,7 @@ h1, h2, h3, h4 {
|
||||
/* 主题强调色加深 + 对比色字，胶囊形 */
|
||||
background: color-mix(in srgb, var(--accent) 82%, #000);
|
||||
color: #fff !important;
|
||||
font-weight: 600;
|
||||
font-weight: 500;
|
||||
text-decoration: none !important;
|
||||
cursor: pointer;
|
||||
transition: filter 0.12s ease, opacity 0.12s ease;
|
||||
@@ -754,7 +753,7 @@ a.j13-mention-token:hover {
|
||||
.kicker {
|
||||
font-family: var(--font-sans);
|
||||
font-size: 12.5px;
|
||||
font-weight: 600;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.02em;
|
||||
color: var(--ink-3);
|
||||
}
|
||||
@@ -797,7 +796,7 @@ a.j13-mention-token:hover {
|
||||
padding: 10px 20px;
|
||||
border-radius: 999px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
border: 1px solid transparent;
|
||||
cursor: pointer;
|
||||
@@ -918,7 +917,7 @@ a.j13-mention-token:hover {
|
||||
.field-label {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
font-weight: 500;
|
||||
color: var(--ink-2);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
@@ -971,7 +970,7 @@ a.j13-mention-token:hover {
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
font-weight: 500;
|
||||
padding: 4px 11px;
|
||||
background: var(--clay-soft);
|
||||
color: var(--clay);
|
||||
@@ -983,7 +982,7 @@ a.j13-mention-token:hover {
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
font-weight: 500;
|
||||
padding: 4px 11px;
|
||||
background: var(--gold-soft);
|
||||
color: var(--gold);
|
||||
@@ -995,7 +994,7 @@ a.j13-mention-token:hover {
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
font-weight: 500;
|
||||
padding: 4px 11px;
|
||||
background: var(--accent-soft);
|
||||
color: var(--accent);
|
||||
@@ -1006,18 +1005,23 @@ a.j13-mention-token:hover {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
font-weight: 500;
|
||||
padding: 4px 11px;
|
||||
background: color-mix(in srgb, var(--accent) 12%, var(--tint));
|
||||
color: var(--accent);
|
||||
/* 固定靛紫，不跟主题 accent，避免与状态徽章撞色 */
|
||||
background: color-mix(in srgb, #5b5bd6 12%, var(--panel));
|
||||
color: #4f46b8;
|
||||
border-radius: 999px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.dark .badge-type {
|
||||
background: rgba(165, 180, 252, 0.16);
|
||||
color: #a5b4fc;
|
||||
}
|
||||
.badge-access {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
font-weight: 500;
|
||||
padding: 4px 11px;
|
||||
background: var(--tint);
|
||||
color: var(--ink-2);
|
||||
@@ -1025,14 +1029,132 @@ a.j13-mention-token:hover {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 帖子列表中的板块小标签：全站统一浅灰配色，避免每行多色眩目 */
|
||||
/* 类型帖状态徽章：浅色区分，避免同一灰；状态色固定，不跟主题 */
|
||||
.badge-status {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
padding: 4px 11px;
|
||||
border-radius: 999px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.badge-status-unsolved {
|
||||
/* 淡红：待解决，与推荐金 / 已解决绿区分 */
|
||||
background: color-mix(in srgb, #c8281e 11%, var(--panel));
|
||||
color: #b91c1c;
|
||||
}
|
||||
.badge-status-solved {
|
||||
background: color-mix(in srgb, var(--ok) 16%, var(--panel));
|
||||
color: var(--ok);
|
||||
}
|
||||
.badge-status-open {
|
||||
/* 进行中：天空蓝，不跟主题 accent，亦区别于类型徽章 */
|
||||
background: color-mix(in srgb, #0284c7 12%, var(--panel));
|
||||
color: #0369a1;
|
||||
}
|
||||
.badge-status-closed {
|
||||
background: color-mix(in srgb, #5b6b8c 12%, var(--panel));
|
||||
color: #5b6b8c;
|
||||
}
|
||||
.badge-status-expired {
|
||||
background: color-mix(in srgb, var(--danger) 12%, var(--panel));
|
||||
color: var(--danger);
|
||||
}
|
||||
.badge-status-drawn {
|
||||
background: color-mix(in srgb, #7c5cbf 14%, var(--panel));
|
||||
color: #6a4aad;
|
||||
}
|
||||
.dark .badge-status-unsolved {
|
||||
background: rgba(255, 107, 96, 0.14);
|
||||
color: #fca5a5;
|
||||
}
|
||||
.dark .badge-status-solved {
|
||||
background: color-mix(in srgb, var(--ok) 22%, transparent);
|
||||
color: var(--ok);
|
||||
}
|
||||
.dark .badge-status-open {
|
||||
background: rgba(56, 189, 248, 0.14);
|
||||
color: #7dd3fc;
|
||||
}
|
||||
.dark .badge-status-closed {
|
||||
background: rgba(170, 182, 207, 0.14);
|
||||
color: #aab6cf;
|
||||
}
|
||||
.dark .badge-status-expired {
|
||||
background: color-mix(in srgb, var(--danger) 20%, transparent);
|
||||
color: var(--danger);
|
||||
}
|
||||
.dark .badge-status-drawn {
|
||||
background: rgba(192, 168, 245, 0.16);
|
||||
color: #c0a8f5;
|
||||
}
|
||||
|
||||
/* 站点公告列表 */
|
||||
.j13-anno-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.j13-anno-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0;
|
||||
padding: 11px 12px 11px 0;
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--line);
|
||||
background: transparent;
|
||||
transition: background 0.15s ease, border-color 0.15s ease;
|
||||
overflow: hidden;
|
||||
}
|
||||
.j13-anno-item::before {
|
||||
content: "";
|
||||
flex-shrink: 0;
|
||||
width: 3px;
|
||||
align-self: stretch;
|
||||
margin-right: 11px;
|
||||
border-radius: 0 2px 2px 0;
|
||||
background: color-mix(in srgb, var(--accent) 55%, transparent);
|
||||
}
|
||||
.j13-anno-item:hover,
|
||||
.j13-anno-item:focus-visible {
|
||||
background: var(--accent-soft);
|
||||
border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
|
||||
}
|
||||
.j13-anno-item:hover::before,
|
||||
.j13-anno-item:focus-visible::before {
|
||||
background: var(--accent);
|
||||
}
|
||||
.j13-anno-item-body {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
padding-right: 2px;
|
||||
}
|
||||
.j13-anno-item-title {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
line-height: 1.45;
|
||||
color: var(--ink);
|
||||
}
|
||||
.j13-anno-item:hover .j13-anno-item-title,
|
||||
.j13-anno-item:focus-visible .j13-anno-item-title {
|
||||
color: var(--accent);
|
||||
}
|
||||
.j13-anno-item-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
.j13-board-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0 7px;
|
||||
border-radius: 6px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
font-weight: 500;
|
||||
line-height: 1.65;
|
||||
background: var(--tint);
|
||||
color: var(--ink-2);
|
||||
@@ -1052,7 +1174,7 @@ a.j13-mention-token:hover {
|
||||
padding: 2px 10px;
|
||||
border-radius: 999px;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
font-weight: 500;
|
||||
line-height: 1.55;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
@@ -1116,7 +1238,7 @@ a.j13-mention-token:hover {
|
||||
background: var(--nav-active-bg);
|
||||
border-color: var(--nav-active-line);
|
||||
color: var(--nav-active-ink);
|
||||
font-weight: 700;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* ----- 辅助 ----- */
|
||||
@@ -1161,7 +1283,7 @@ a.j13-mention-token:hover {
|
||||
padding: 4.5px 12px;
|
||||
font-family: var(--font-sans);
|
||||
font-size: 12.5px;
|
||||
font-weight: 600;
|
||||
font-weight: 500;
|
||||
line-height: 1.35;
|
||||
color: var(--ink-3);
|
||||
cursor: pointer;
|
||||
@@ -1177,7 +1299,7 @@ a.j13-mention-token:hover {
|
||||
background: var(--accent-soft);
|
||||
border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
|
||||
color: var(--accent);
|
||||
font-weight: 700;
|
||||
font-weight: 600;
|
||||
}
|
||||
.j13-tab:active {
|
||||
transform: scale(0.97);
|
||||
@@ -1218,7 +1340,7 @@ a.j13-mention-token:hover {
|
||||
background: var(--nav-active-bg);
|
||||
border-color: var(--nav-active-line);
|
||||
color: var(--nav-active-ink);
|
||||
font-weight: 700;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* 首页左栏「全部讨论 / 板块目录」卡片：与面包屑的纯文字位置指引区分，
|
||||
@@ -1251,6 +1373,7 @@ a.j13-mention-token:hover {
|
||||
}
|
||||
.j13-bcard-name {
|
||||
color: var(--ink);
|
||||
font-size: 14px;
|
||||
}
|
||||
.j13-bcard[aria-current="page"] .j13-bcard-name {
|
||||
color: var(--nav-active-ink);
|
||||
@@ -1285,7 +1408,7 @@ a.j13-mention-token:hover {
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.02em;
|
||||
color: var(--ink);
|
||||
}
|
||||
@@ -1318,31 +1441,42 @@ a.j13-mention-token:hover {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 站点数据 bento 统计瓦片 */
|
||||
/* 站点数据：无灰底瓦片，细线分隔 */
|
||||
.j13-pulse {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 8px;
|
||||
gap: 0;
|
||||
margin-top: 10px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--r-sm);
|
||||
overflow: hidden;
|
||||
}
|
||||
.j13-pulse-cell {
|
||||
min-width: 0;
|
||||
padding: 11px 12px 10px;
|
||||
background: var(--panel-2);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--r-sm);
|
||||
padding: 12px 14px 11px;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
.j13-pulse-cell:nth-child(odd) {
|
||||
border-right: 1px solid var(--line);
|
||||
}
|
||||
.j13-pulse-cell:nth-child(-n + 2) {
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
.j13-pulse-lab {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
font-size: 11.5px;
|
||||
font-weight: 400;
|
||||
color: var(--ink-3);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.j13-pulse-num {
|
||||
margin-top: 6px;
|
||||
font-size: 21px;
|
||||
font-weight: 800;
|
||||
font-size: 22px;
|
||||
font-weight: 500;
|
||||
line-height: 1.05;
|
||||
letter-spacing: -0.015em;
|
||||
color: var(--ink);
|
||||
@@ -1354,6 +1488,7 @@ a.j13-mention-token:hover {
|
||||
gap: 3px;
|
||||
margin-top: 6px;
|
||||
font-size: 10.5px;
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
color: var(--ink-3);
|
||||
font-variant-numeric: tabular-nums;
|
||||
@@ -1361,7 +1496,7 @@ a.j13-mention-token:hover {
|
||||
}
|
||||
.j13-pulse-foot.is-up {
|
||||
color: var(--ok);
|
||||
font-weight: 600;
|
||||
font-weight: 400;
|
||||
}
|
||||
.j13-pulse-dot {
|
||||
position: relative;
|
||||
@@ -1409,7 +1544,7 @@ a.j13-mention-token:hover {
|
||||
padding: 6px 11px;
|
||||
border-radius: 9999px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@@ -1433,7 +1568,7 @@ a.j13-mention-token:hover {
|
||||
padding-top: 2px;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
font-weight: 500;
|
||||
font-variant-numeric: tabular-nums;
|
||||
color: var(--ink-3);
|
||||
flex-shrink: 0;
|
||||
@@ -1481,7 +1616,7 @@ a.j13-mention-token:hover {
|
||||
background: var(--panel);
|
||||
border-radius: 999px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
font-weight: 500;
|
||||
color: var(--ink-2);
|
||||
white-space: nowrap;
|
||||
transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
|
||||
@@ -1608,14 +1743,14 @@ a.j13-mention-token:hover {
|
||||
/* 子回复昵称 */
|
||||
.cmt-reply-name {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
font-weight: 500;
|
||||
color: var(--ink-2);
|
||||
}
|
||||
|
||||
/* 楼层号标签（主评论昵称旁） */
|
||||
.cmt-floor-label {
|
||||
font-size: 11.5px;
|
||||
font-weight: 600;
|
||||
font-weight: 500;
|
||||
color: var(--ink-3);
|
||||
text-decoration: none;
|
||||
padding: 1px 6px;
|
||||
@@ -1650,7 +1785,7 @@ a.j13-mention-token:hover {
|
||||
/* 被回复者名称（可点击跳转） */
|
||||
.cmt-reply-target {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
font-weight: 500;
|
||||
color: var(--ink-2);
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
@@ -1680,7 +1815,7 @@ a.j13-mention-token:hover {
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 12.5px;
|
||||
font-weight: 600;
|
||||
font-weight: 500;
|
||||
color: var(--accent);
|
||||
padding: 4px 10px;
|
||||
border-radius: 99px;
|
||||
@@ -1765,7 +1900,7 @@ a.j13-mention-token:hover {
|
||||
z-index: 10001;
|
||||
padding: 10px 18px;
|
||||
font-size: 13.5px;
|
||||
font-weight: 600;
|
||||
font-weight: 500;
|
||||
background: var(--accent);
|
||||
color: var(--accent-on);
|
||||
border-radius: 999px;
|
||||
|
||||
Reference in New Issue
Block a user