/* NAVHUB — Bloomberg terminal 风格：等宽字体、高密度表格、琥珀色高亮。 两套配色：dark（默认）/ light，靠 切换。 */ :root { --bg: #000000; --panel: #08090b; --panel-2: #0e1016; --panel-3: #0a0c0f; --line: #23252c; --line-soft: #16181d; --fg: #d9dae0; --dim: #7c7f89; --muted: #6d717b; --muted-2: #5f636d; --faint: #43464e; --placeholder: #4c4f57; --amber: #ff9e18; --amber-dim: #b46f10; --amber-hi: #ffb340; --on-amber: #000000; --blue: #4ea3ff; --red: #ff4d4d; --green: #3ddc84; --topbar-a: #0c0d10; --topbar-b: #000000; --input-bg: #000000; --btn-bg: #14100a; --danger-bg: #140808; --danger-line: #5a1f1f; --chip-bg: #070b10; --chip-line: #1e2b3a; --row-hover: #0e0f13; --tag-hover: #101115; --tag-on: #1a1408; --hint-bg: #0d0e12; --ok-bg: #06120b; --bad-bg: #150707; --mono: ui-monospace, "SF Mono", "IBM Plex Mono", Menlo, Consolas, "Liberation Mono", "Noto Sans Mono CJK SC", "Microsoft YaHei Mono", monospace; --ease: 180ms cubic-bezier(.4, 0, .2, 1); } :root[data-theme="light"] { --bg: #f4f2ec; --panel: #ffffff; --panel-2: #f6f4ee; --panel-3: #faf8f3; --line: #d9d5cb; --line-soft: #e8e5dd; --fg: #1c1d21; --dim: #6f7179; --muted: #74716a; --muted-2: #8a8780; --faint: #a5a29a; --placeholder: #a8a49b; --amber: #a35c00; --amber-dim: #96702a; --amber-hi: #c87400; --on-amber: #ffffff; --blue: #0a5fc0; --red: #c62222; --green: #157a45; --topbar-a: #ffffff; --topbar-b: #f2efe8; --input-bg: #ffffff; --btn-bg: #fdf3e4; --danger-bg: #fdeded; --danger-line: #e3b7b7; --chip-bg: #eff4fb; --chip-line: #c9dcf3; --row-hover: #f7f5f0; --tag-hover: #f2efe8; --tag-on: #fbeed6; --hint-bg: #f6f4ee; --ok-bg: #e9f6ee; --bad-bg: #fdecec; } * { box-sizing: border-box; } html, body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--mono); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; } /* 主题切换时整页平滑过渡 */ html, body, .topbar, .sidebar, .panel, .panel-head, .cmdbar, .addbar, .flash, .hint, .mergebar, input, select, textarea, button, .chip, .clear { transition: background-color var(--ease), color var(--ease), border-color var(--ease); } a { color: var(--fg); text-decoration: none; transition: color var(--ease), background-color var(--ease), border-color var(--ease); } a:hover { color: var(--amber); } b { color: var(--amber); font-weight: 600; } .dim { color: var(--dim); } :focus-visible { outline: 1px solid var(--amber); outline-offset: 1px; } /* ---------- 顶栏 ---------- */ .topbar { display: flex; align-items: stretch; gap: 0; border-bottom: 1px solid var(--amber-dim); background: linear-gradient(180deg, var(--topbar-a), var(--topbar-b)); position: sticky; top: 0; z-index: 20; flex-wrap: wrap; } .brand { background: var(--amber); color: var(--on-amber); font-weight: 700; letter-spacing: .18em; padding: 6px 16px; display: flex; align-items: center; } .brand:hover { color: var(--on-amber); background: var(--amber-hi); } .ticker { display: flex; align-items: center; gap: 18px; padding: 0 14px; color: var(--dim); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; overflow: hidden; white-space: nowrap; flex: 1; } .ticker .live { color: var(--green); } .topnav { display: flex; align-items: center; gap: 2px; padding: 0 8px; } .topnav a, .topnav button { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; color: var(--dim); background: none; border: 1px solid transparent; padding: 5px 10px; cursor: pointer; } .topnav a:hover, .topnav button:hover { color: var(--amber); border-color: var(--line); background: transparent; } .topnav form { display: inline; margin: 0; } .theme-toggle { font-size: 15px; line-height: 1; padding: 5px 9px; } .theme-toggle .icon { display: inline-block; width: 1.1em; text-align: center; } :root[data-theme="light"] .theme-toggle .sun, :root:not([data-theme="light"]) .theme-toggle .moon { display: none; } /* ---------- 提示条 ---------- */ .flash { padding: 6px 14px; font-size: 13px; border-bottom: 1px solid var(--line-soft); animation: slide-in 220ms cubic-bezier(.4, 0, .2, 1); } .flash.ok { color: var(--green); background: var(--ok-bg); } .flash.bad { color: var(--red); background: var(--bad-bg); } .err-inline { color: var(--red); font-size: 12px; } @keyframes slide-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } /* ---------- 命令条 ---------- */ .cmdbar, .addbar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1px solid var(--line-soft); flex-wrap: wrap; } .cmdbar { background: var(--panel-2); } .cmdbar .prompt { color: var(--amber); font-weight: 700; } .cmdbar input[type="search"] { flex: 1; min-width: 200px; } .addbar { background: var(--panel-3); border-bottom: 1px solid var(--line); } .addbar input { flex: 1; min-width: 150px; } input, select, textarea, button { font-family: var(--mono); font-size: 14px; background: var(--input-bg); color: var(--fg); border: 1px solid var(--line); padding: 6px 9px; outline: none; } input:focus, select:focus, textarea:focus { border-color: var(--amber); } input::placeholder, textarea::placeholder { color: var(--placeholder); } button { cursor: pointer; text-transform: uppercase; letter-spacing: .1em; font-size: 12px; color: var(--amber); border-color: var(--amber-dim); background: var(--btn-bg); } button:hover { background: var(--amber); color: var(--on-amber); } button.danger { color: var(--red); border-color: var(--danger-line); background: var(--danger-bg); } button.danger:hover { background: var(--red); color: #fff; } .clear { font-size: 12px; letter-spacing: .1em; color: var(--dim); border: 1px solid var(--line); padding: 6px 10px; } .clear:hover { border-color: var(--amber-dim); } .active-filters { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 7px 12px; border-bottom: 1px solid var(--line-soft); } .active-filters .label { color: var(--dim); font-size: 12px; letter-spacing: .1em; } /* ---------- 布局 ---------- */ .layout { display: grid; grid-template-columns: 240px 1fr; gap: 1px; background: var(--line-soft); } .sidebar, .panel { background: var(--panel); } .panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--panel-2); color: var(--amber); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; padding: 6px 11px; border-bottom: 1px solid var(--line); position: sticky; top: 0; } .panel-head .dim { letter-spacing: normal; text-transform: none; } /* TAGS 侧栏：跟着页面一路向下延伸，不再用内部滚动条截断 */ .taglist { list-style: none; margin: 0; padding: 2px 0 8px; } .taglist li a { display: flex; justify-content: space-between; gap: 8px; padding: 4px 11px; border-left: 2px solid transparent; font-size: 14px; } .taglist li a:hover { background: var(--tag-hover); border-left-color: var(--amber-dim); } .taglist li a.on { background: var(--tag-on); border-left-color: var(--amber); color: var(--amber); } .taglist .tname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .taglist .tnum { color: var(--dim); font-size: 12px; font-variant-numeric: tabular-nums; } .taglist li.dim { padding: 8px 11px; } /* ---------- 表格 ---------- */ .grid { width: 100%; border-collapse: collapse; } .grid th { text-align: left; color: var(--amber-dim); font-weight: 500; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; padding: 5px 9px; border-bottom: 1px solid var(--line); } .grid td { padding: 7px 9px; border-bottom: 1px solid var(--line-soft); vertical-align: top; } .grid tbody tr { transition: background-color var(--ease); } .grid tbody tr:hover { background: var(--row-hover); } .grid tbody tr.dead .site { color: var(--red); text-decoration: line-through; } .c-icon { width: 30px; } .c-num { width: 58px; text-align: right; color: var(--dim); font-variant-numeric: tabular-nums; } .c-tags { width: 34%; } .c-act { width: 140px; white-space: nowrap; } .c-act form { display: inline; margin: 0; } .c-act a { font-size: 12px; letter-spacing: .1em; color: var(--dim); margin-right: 8px; } .c-act a:hover { color: var(--amber); } .c-icon img { width: 18px; height: 18px; object-fit: contain; display: block; margin-top: 3px; } .site { color: var(--fg); font-weight: 600; } .site:hover { color: var(--amber); text-decoration: underline; } .badge-dead { color: var(--red); border: 1px solid var(--danger-line); font-size: 10px; padding: 0 5px; margin-left: 6px; letter-spacing: .1em; vertical-align: middle; } .meta { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--dim); } .meta .url { color: var(--muted-2); max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .meta .desc { color: var(--muted); } .empty { color: var(--dim); text-align: center; padding: 28px; } /* ---------- 标签 chip ---------- */ .tags-cell { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; } .chip { font-size: 12px; color: var(--blue); border: 1px solid var(--chip-line); background: var(--chip-bg); padding: 1px 7px; } .chip:hover { background: var(--blue); color: #fff; border-color: var(--blue); } .chip.on { background: var(--amber); color: var(--on-amber); border-color: var(--amber); } .ai-btn { font-size: 11px; padding: 2px 7px; letter-spacing: .12em; color: var(--amber); border: 1px dashed var(--amber-dim); background: transparent; } .ai-btn:hover { background: var(--amber); color: var(--on-amber); } .ai-btn[disabled] { opacity: .5; cursor: wait; } /* ---------- 表单页 ---------- */ .loginwrap { display: flex; justify-content: center; padding: 40px 12px; } .loginwrap.wide .panel { max-width: 900px; } .loginbox, .formbox { width: 100%; max-width: 560px; border: 1px solid var(--line); } .loginbox label, .formbox label { display: flex; gap: 10px; align-items: center; padding: 9px 12px; font-size: 12px; letter-spacing: .12em; color: var(--dim); } .formbox label { align-items: flex-start; } .loginbox input, .formbox input[type="text"], .formbox input[type="url"], .formbox textarea { flex: 1; letter-spacing: normal; } .loginbox button, .formbox .row { margin: 8px 12px 14px; } .formbox .row { display: flex; align-items: center; gap: 10px; } .formbox .check { text-transform: none; letter-spacing: normal; align-items: center; } .formbox p { margin: 0 12px 12px; font-size: 12px; } .hint { margin: 0 12px 10px; padding: 9px; background: var(--hint-bg); border: 1px solid var(--line-soft); color: var(--dim); font-size: 12px; overflow-x: auto; } .tagtable .rename { width: 160px; } .mergebar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px; border-top: 1px solid var(--line); background: var(--panel-2); } .mergebar label { font-size: 12px; letter-spacing: .12em; color: var(--dim); display: flex; gap: 8px; align-items: center; } .maintenance { margin-top: 1px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-bottom: 10px; } .maintenance .panel-head { width: 100%; } .maintenance form { margin-left: 10px; } footer { border-top: 1px solid var(--line-soft); margin-top: 20px; padding: 9px 12px; color: var(--faint); font-size: 11px; letter-spacing: .18em; } /* ---------- 窄屏 ---------- */ @media (max-width: 820px) { html, body { font-size: 14px; } .layout { grid-template-columns: 1fr; } /* 手机上 TAGS 在正文之上，给个宽松上限，超出才滚动 */ .taglist { max-height: 45vh; overflow-y: auto; } .c-tags { width: auto; } .meta .url { max-width: 30ch; } .grid thead { display: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }