:root { --bg: #1D2021; --panel: #282828; --row: #32302F; --line: #3C3836; --line2: #504945; --line3: #665C54; --fg: #EBDBB2; --fg2: #D5C4A1; --fg4: #A89984; --dim: #7C6F64; --yellow: #FABD2F; --green: #B8BB26; --orange: #FE8019; --blue: #83A598; --purple: #D3869B; --mono: 'Martian Mono', 'Courier New', monospace; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--fg); font: 15px/1.5 var(--mono); } a { color: var(--fg); } a:hover { color: var(--yellow); } :focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; } [hidden] { display: none !important; } .wrap { max-width: 1440px; margin: 0 auto; padding: 40px 80px; } /* "#" 开头的说明行: 符号由样式加上, 不进正文, 读屏也不读 */ .comment, .note, .hero h1, .lead { color: var(--fg4); } .comment::before, .note::before, .hero h1::before, .lead::before { content: "# "; content: "# " / ""; } .comment, .prompt { margin: 0; } .prompt { color: var(--fg4); } kbd { padding: 2px 7px; font: 400 12px var(--mono); border: 1px solid var(--line3); border-radius: 4px; } /* 顶栏 */ .top { display: flex; justify-content: space-between; align-items: center; } .logo { font-size: 18px; font-weight: 700; text-decoration: none; color: var(--yellow); } .nav { display: flex; gap: 28px; font-size: 14px; } .nav a { display: flex; gap: 8px; align-items: center; text-decoration: none; } /* 首屏 */ .hero { margin-top: 56px; } .hero h1 { margin: 0; font-size: 15px; font-weight: 400; } .display { margin: 14px 0 0; font-size: 62px; font-weight: 700; line-height: 1.1; } .cursor { display: inline-block; width: 0.48em; height: 1em; margin-left: 0.2em; vertical-align: -0.14em; background: var(--yellow); animation: blink 1.1s steps(1, end) infinite; } @keyframes blink { 50% { opacity: 0; } } /* 大标题打字机效果 (home.js)。html.tw 由 里的一行脚本加上, 系统要求减少动画时不加。 脚本接手前先藏起整句; 脚本没来的话 2.5 秒后照常显示。 */ .tw .display { visibility: hidden; animation: tw-show 0s 2.5s forwards; } @keyframes tw-show { to { visibility: visible; } } .tw .display.typing, .tw .display.done { visibility: visible; animation: none; } .display.typing .ch { visibility: hidden; } .display.typing .ch.on { visibility: visible; } .display.typing > .cursor { visibility: hidden; } /* 打字时的光标不占宽度 (右边距抵掉自身), 盖在下一个还没显示的字符上, 换行不受影响 */ .display .caret { margin-left: 0.04em; margin-right: -0.52em; } .display.go .caret { animation: none; } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .lead { max-width: 860px; margin: 14px 0 0; font-size: 16px; line-height: 1.7; } /* 命令式表单 */ .cmd { margin-top: 36px; padding: 26px 30px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; } .cmd-body { min-width: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; border: 0; } .cmd-body:disabled input, .cmd-body:disabled .chip span, .cmd-body:disabled .btn { cursor: not-allowed; } .idea { display: flex; align-items: center; gap: 12px; font-size: 20px; } .ps { flex-shrink: 0; color: var(--yellow); white-space: nowrap; } .cont { color: var(--dim); } input[type="text"] { height: 44px; padding: 0 4px; font: inherit; color: var(--fg); background: transparent; border: 0; border-bottom: 1px dashed var(--line3); border-radius: 0; } input[type="text"]:focus { border-bottom-color: var(--yellow); outline: none; } input::placeholder { color: var(--fg4); opacity: 1; } .idea input { flex: 1; min-width: 0; max-width: 640px; } .opts { padding-left: 52px; display: flex; flex-direction: column; gap: 12px; } .opt { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .opt .note { margin-left: auto; } .flag { width: 104px; flex-shrink: 0; color: var(--orange); } .flag.short { width: auto; } .grow { flex: 1; min-width: 0; max-width: 620px; } .pair { gap: 40px; } .pair > .opt { gap: 12px; flex-wrap: nowrap; } #must { width: 250px; } #avoid { width: 360px; } .chips { display: flex; flex-wrap: wrap; gap: 10px; } .chip { position: relative; } .chip input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; } .chip span { height: 44px; padding: 0 12px; display: inline-flex; align-items: center; color: var(--fg2); border: 1px solid var(--line2); border-radius: 4px; cursor: pointer; user-select: none; } .chip span:hover { border-color: var(--line3); } .chip input:checked + span { color: var(--bg); background: var(--c); border-color: var(--c); } .chip input:focus-visible + span { outline: 2px solid var(--yellow); outline-offset: 2px; } .chips.vibe { --c: var(--blue); } .chips.tld { --c: var(--orange); } .chips.len { --c: var(--purple); } .cmd-foot { margin-top: 6px; padding-top: 16px; display: flex; justify-content: space-between; align-items: center; gap: 16px; border-top: 1px solid var(--line); } .btn { height: 48px; padding: 0 18px; display: inline-flex; flex-shrink: 0; align-items: center; gap: 10px; font: 700 15px var(--mono); text-decoration: none; color: var(--bg); background: var(--green); border: 0; border-radius: 4px; cursor: pointer; } .btn:hover { color: var(--bg); background: #C8CB3A; } .btn:disabled { opacity: 0.5; cursor: default; } .btn kbd { border-color: var(--bg); } .btn.ghost { color: var(--fg); background: transparent; border: 1px solid var(--line3); } .btn.ghost kbd { border-color: var(--line3); } /* 刚被注册的名字 */ .live { margin-top: 64px; display: flex; flex-direction: column; gap: 14px; } .live-head { display: flex; justify-content: space-between; align-items: center; gap: 24px; } h2 { margin: 0; font-size: 32px; font-weight: 700; line-height: 1.15; } .pill { margin: 0; flex-shrink: 0; padding: 10px 14px; display: flex; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 4px; } .dot { width: 10px; height: 10px; flex-shrink: 0; border-radius: 999px; background: var(--green); animation: pulse 1.8s ease-out infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(184, 187, 38, 0.6); } 70% { box-shadow: 0 0 0 8px rgba(184, 187, 38, 0); } 100% { box-shadow: 0 0 0 0 rgba(184, 187, 38, 0); } } .words { margin-top: 6px; } .chips.word button { height: 44px; padding: 0 12px; font: 14px var(--mono); color: var(--fg2); background: transparent; border: 1px solid var(--line2); border-radius: 4px; cursor: pointer; } .chips.word button:hover { border-color: var(--line3); } .chips.word button[aria-pressed="true"] { color: var(--bg); background: var(--yellow); border-color: var(--yellow); } .grid-head { margin-top: 8px; padding-bottom: 10px; font-size: 12px; letter-spacing: 0.08em; color: var(--fg4); } .grid-head, .rows li { display: grid; grid-template-columns: 130px minmax(0, 500px) minmax(0, 1fr) 200px; gap: 14px; } .rows { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--line); } .rows li { padding: 10px 0; align-items: center; border-top: 1px solid var(--line); } .rows li:first-child { background: var(--row); } .rows li.in { animation: slidein 0.4s ease-out both; } @keyframes slidein { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } .rows time { padding-left: 6px; color: var(--fg4); } .rows .d { font-size: 18px; font-weight: 700; overflow-wrap: anywhere; } .rows .w { color: var(--fg2); } .rows .empty { display: block; padding: 14px 6px; color: var(--fg4); background: none; } .like { justify-self: end; margin-right: 6px; padding: 4px 0; font: inherit; color: var(--fg4); text-align: right; background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .rows li:first-child .like { color: var(--fg); } .like:hover { color: var(--yellow); } .live-foot { padding-top: 6px; display: flex; justify-content: space-between; align-items: center; gap: 24px; } /* 说明、选名建议、常见问题 */ .guide { margin-top: 88px; display: flex; flex-direction: column; gap: 14px; } .guide h2 { margin-top: 26px; font-size: 26px; } .guide h2:first-of-type { margin-top: 8px; } .sub { margin: 14px 0 0; color: var(--yellow); } .steps, .tips { max-width: 920px; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; line-height: 1.7; color: var(--fg2); } .steps { counter-reset: step; } .steps li { display: grid; grid-template-columns: 48px minmax(0, 1fr); counter-increment: step; } .steps li::before { content: counter(step, decimal-leading-zero); } .tips li { display: grid; grid-template-columns: 24px minmax(0, 1fr); } .tips li::before { content: "-"; } .tips a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } .tips a:hover { color: inherit; text-decoration-thickness: 2px; } .kinds { margin: 0; display: flex; flex-direction: column; gap: 10px; color: var(--fg2); } .kinds div { display: grid; grid-template-columns: 150px minmax(0, 520px) minmax(0, 1fr); gap: 12px; padding-left: 24px; } .kinds dt, .kinds dd { margin: 0; } .faq { max-width: 920px; margin: 0; display: flex; flex-direction: column; gap: 18px; line-height: 1.7; } .faq dt { color: var(--fg); } .faq dd { margin: 4px 0 0; color: var(--fg2); } /* 结果页 */ .echo { margin-top: 48px; padding: 20px 24px; display: flex; justify-content: space-between; align-items: center; gap: 24px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; } .echo p { margin: 0; color: var(--fg4); overflow-wrap: anywhere; } .res-head { margin-top: 36px; display: flex; flex-direction: column; gap: 8px; } .res-head h1 { margin: 0; font-size: 44px; font-weight: 700; line-height: 1.15; } .res { margin-top: 28px; display: flex; flex-direction: column; } .res .grid-head, .res-rows li { grid-template-columns: 56px minmax(0, 320px) 140px 150px minmax(0, 1fr) 190px; gap: 12px; } .res-rows { margin: 0; padding: 0; list-style: none; } .res-rows li { padding: 12px 0; display: grid; row-gap: 6px; align-items: baseline; border-top: 1px solid var(--line); } .res-rows li:last-child { border-bottom: 1px solid var(--line); } .res-rows .n { color: var(--fg4); } .res-rows .d { font-size: 22px; font-weight: 700; overflow-wrap: anywhere; } .res-rows .m { color: var(--fg2); } .res-rows .why { grid-column: 2 / span 4; } .res-rows .copy { justify-self: start; padding: 0; font: inherit; color: var(--fg); background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .unv { margin-top: 40px; display: flex; flex-direction: column; gap: 10px; } .unv .sub { margin: 0; } .more { margin-top: 40px; display: flex; align-items: center; gap: 24px; } .more .note { margin: 0; } .legend { margin-top: 56px; } /* 页脚 */ .foot { margin-top: 72px; padding-top: 28px; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--line); font-size: 13px; color: var(--fg4); } .foot p { margin: 0; } .legal { display: flex; justify-content: space-between; gap: 16px; } .legal nav { display: flex; gap: 24px; } .foot a { color: var(--fg4); } @media (max-width: 1099px) { .wrap { padding: 32px 40px; } .display { font-size: 48px; } .opts { padding-left: 0; } .grid-head, .rows li { grid-template-columns: 96px minmax(0, 1.2fr) minmax(0, 1fr) auto; } .res .grid-head, .res-rows li { grid-template-columns: 40px minmax(0, 1fr) 90px 110px minmax(0, 1fr) auto; } .pair { gap: 12px 40px; } } @media (max-width: 720px) { body { font-size: 13px; } .wrap { padding: 20px 16px 28px; } .nav { display: none; } .hero { margin-top: 32px; } .hero h1 { font-size: 13px; } .display { margin-top: 10px; font-size: 30px; line-height: 1.2; } .lead { font-size: 13px; line-height: 1.6; } .cmd { margin-top: 24px; padding: 16px; } .cmd-body { gap: 14px; } .idea { flex-direction: column; align-items: stretch; gap: 6px; font-size: 13px; } .idea .q2, .cont { display: none; } input[type="text"] { font-size: 16px; } .idea input, .grow, #must, #avoid { width: 100%; max-width: none; } .opts { gap: 14px; } .opt, .pair > .opt { flex-direction: column; align-items: stretch; gap: 6px; } .opt .note { margin-left: 0; } .flag { width: auto; } .pair { gap: 14px; } .chips { gap: 6px; } .chip span { padding: 0 10px; font-size: 13px; } .cmd-foot { flex-direction: column-reverse; align-items: stretch; gap: 10px; padding-top: 0; border-top: 0; } .btn { height: 52px; justify-content: center; } .btn kbd { display: none; } .live { margin-top: 32px; gap: 10px; } .live-head { flex-direction: column; align-items: stretch; gap: 10px; } h2 { font-size: 22px; } .chips.word button { padding: 0 10px; font-size: 13px; } .grid-head { display: none; } .rows li { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "d d" "t w" "b b"; gap: 4px 8px; } .rows li:first-child { padding: 10px 8px; } .rows .d { grid-area: d; font-size: 16px; } .rows time { grid-area: t; padding-left: 0; font-size: 12px; } .rows .w { grid-area: w; font-size: 12px; color: var(--fg4); } .rows .w::before { content: "\00B7 "; } .like { grid-area: b; justify-self: start; margin: 0; min-height: 32px; font-size: 12px; text-align: left; } .live-foot { flex-direction: column; align-items: stretch; gap: 10px; } .guide { margin-top: 56px; } .guide h2 { font-size: 20px; } .kinds div { grid-template-columns: 90px minmax(0, 1fr); padding-left: 0; } .kinds .eg { grid-column: 2; } .echo { margin-top: 28px; padding: 14px; flex-direction: column; align-items: stretch; } .res-head h1 { font-size: 26px; } .res .grid-head { display: none; } .res-rows li { grid-template-columns: 32px minmax(0, 1fr); gap: 4px 8px; } .res-rows .d { font-size: 18px; } .res-rows .m, .res-rows .why, .res-rows .copy { grid-column: 2; } .more { flex-direction: column; align-items: stretch; gap: 10px; } .legal { flex-direction: column; } } @media (prefers-reduced-motion: reduce) { .cursor, .dot, .rows li.in { animation: none; } }