@charset "UTF-8"; /* v1.3.0 色彩方案：告诉浏览器本页支持两套配色，原生 UI（主滚动条、 表单控件、下拉面板、文本选区、拼写检查波浪线）才会跟着深色走。 基声明必须是 light dark；手动固定由 映射， 这样 JS 不跑时页面仍跟随系统，不会硬钉死某一套。 */ :root{color-scheme:light dark} :root:has(> head > meta[name="color-scheme"][content="dark"]){color-scheme:dark} :root:has(> head > meta[name="color-scheme"][content="light"]){color-scheme:light} :root{--bg:#f4f6fb;--surface:#fff;--ink:#1b2b43;--muted:#5f6d84;--secondary:#61718a;--line:#eaf0f6;--blue:#3568f7;--gain:#df8d22;--teal:#0eaa87;--shadow:0 2px 5px #233e6603;--radius:17px;font-family:"Segoe UI Variable","Segoe UI","Microsoft YaHei UI",sans-serif;color:var(--ink);background:var(--bg);font-synthesis:none;font-size:14px;line-height:1.5;font-variant-numeric:tabular-nums} *{box-sizing:border-box}body{margin:0}a{color:inherit;text-decoration:none}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button{border:0;background:none;color:inherit}button:disabled{cursor:default}a,button{transition:color .16s ease,background .16s ease,border-color .16s ease,box-shadow .16s ease}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #3568f757;outline-offset:3px}h1,h2,h3,p{margin:0}h1{font-size:27px;line-height:1.3;letter-spacing:-.5px}h2{font-size:17px;line-height:1.4;font-weight:700}h3{font-size:16px;line-height:1.4;font-weight:700}.icon{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.positive{color:var(--gain)!important}.negative{color:#bc617a!important}.neutral{color:var(--muted)!important}.subtle{font-size:12px;color:var(--muted);font-weight:400;white-space:nowrap} .site-header{height:77px;background:#ffffffed;border-bottom:1px solid var(--line)}.header-inner{max-width:1584px;padding:0 32px;height:100%;margin:auto;display:flex;align-items:center;gap:30px}.brand{display:flex;align-items:center;gap:11px;font-size:21px;font-weight:750;letter-spacing:-.55px;white-space:nowrap}.brand img{display:block}.brand b{font-weight:650}.main-nav{display:flex;align-self:stretch;gap:28px;margin-left:13px;white-space:nowrap}.main-nav>a{display:flex;align-items:center;position:relative;color:var(--secondary);font-size:14px;font-weight:550}.main-nav>a.active{color:var(--blue)}.main-nav>a.active:after{content:"";position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--blue);border-radius:3px 3px 0 0}.main-nav>a:hover{color:var(--blue)}#follow-count:not(:empty){display:inline-grid;place-items:center;min-width:17px;height:17px;border-radius:5px;background:#eaf0ff;color:var(--blue);font-size:10px;margin-left:5px;padding:0 4px}.search{display:flex;align-items:center;margin-left:auto;background:#f5f7fb;border:1px solid #edf1f7;border-radius:9px;height:36px;padding:0 10px;gap:8px;min-width:0;width:235px}.search svg{width:16px;height:16px;stroke:#8b99af;stroke-width:1.6;fill:none;flex-shrink:0}.search input{width:100%;min-width:0;border:0;background:transparent;outline:0;font-size:12px;color:var(--ink)}.search input::placeholder{color:#5f6d84}.search kbd{font:11px "Segoe UI",sans-serif;color:#9aa5b8;border:1px solid #dfe5ee;border-radius:3px;min-width:16px;text-align:center}.mock-badge{font-size:11px;color:#8a753f;background:#f7f1e4;border:1px solid #efe6d0;padding:3px 7px;border-radius:5px;white-space:nowrap}.home-link{font-size:12px;color:var(--muted);white-space:nowrap;margin-left:-13px}.home-link:hover{color:var(--blue)}.container{max-width:1584px;margin:0 auto;padding:0 32px 40px;min-height:65vh}.period-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:27px 0 22px}.period-tabs{display:flex;gap:6px;padding:5px;background:#eaf0f7;border-radius:11px}.period-tabs button{min-width:70px;padding:7px 16px;border-radius:7px;font-weight:600;font-size:14px;color:#63718a}.period-tabs button[aria-selected=true]{background:#fff;color:var(--blue);box-shadow:0 2px 5px #2946750b}.period-tabs button:hover{color:var(--blue)}.date-label{color:#7c8ca3;font-size:12px;display:flex;align-items:center;gap:8px}.date-label .icon{width:14px;height:14px}.date-label>span{display:flex;gap:12px;align-items:center}.date-label small{color:#5f6d84;font-size:11px;border-left:1px solid #dbe3ee;padding-left:12px}.stat-strip{display:grid;grid-template-columns:1fr 1fr 1.18fr 1.18fr;gap:0;border:1px solid #e6edf6;background:#fff;border-radius:14px;margin-bottom:23px;box-shadow:var(--shadow)}.stat-strip>div{display:flex;align-items:center;gap:14px;padding:21px 24px;position:relative;min-width:0}.stat-strip>div+div:before{content:"";position:absolute;left:0;top:24%;height:52%;width:1px;background:var(--line)}.stat-icon{width:43px;height:43px;display:grid;place-items:center;border-radius:12px;flex-shrink:0}.stat-icon .icon{width:22px;height:22px}.blue{background:#edf2ff;color:#527df0}.violet{background:#f3effd;color:#9a80d2}.amber{background:#fff6e8;color:#e2a244}.teal{background:#eaf8f4;color:#37b599}.stat-label{display:block;color:var(--secondary);font-size:12px;margin-bottom:2px}.stat-strip strong{font-size:25px;font-weight:670;line-height:1.3;letter-spacing:-.4px;display:block}.stat-strip small{font-size:11px;color:var(--muted);margin-left:auto;align-self:flex-end;margin-bottom:3px;white-space:nowrap}.stat-strip small b{font-weight:600;color:var(--blue);margin-left:4px}.card{border:1px solid #e6edf6;border-radius:var(--radius);background:#fff;box-shadow:var(--shadow);overflow:hidden}.card-header{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:22px 24px 14px;min-width:0}.card-heading{display:flex;gap:9px;align-items:center;min-width:0}.heading-dot{height:8px;width:8px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 4px #3568f70a;margin-right:2px;flex-shrink:0}.amber-dot{background:var(--gain);box-shadow:0 0 0 4px #df8d220a}.teal-dot{background:var(--teal);box-shadow:0 0 0 4px #0eaa870a}.more{display:flex;align-items:center;gap:2px;border:1px solid #e8eef7;border-radius:6px;padding:3px 7px;font-size:11px;color:#8a9bb5;white-space:nowrap;flex-shrink:0}.more:hover{color:var(--blue);background:#f5f8ff;border-color:#d8e4ff}.more .icon{width:12px;height:12px}.lead-grid{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(0,1fr);gap:22px}.lead-toolbar,.list-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 24px 14px;border-bottom:1px solid #f0f3f8}.lead-toolbar>span{font-size:11px;color:var(--muted)}.metric-tabs{display:flex;gap:4px;flex-wrap:wrap}.metric-tabs button{font-size:11px;color:#7f8ca1;border-radius:5px;padding:4px 9px;white-space:nowrap}.metric-tabs button.active{background:#eef3ff;color:#416ee7;font-weight:600}.metric-tabs button:hover{color:var(--blue);background:#f5f8fe}.repo-row{display:flex;align-items:center;gap:13px;padding:14px 24px;border-bottom:1px solid #f1f4f8;min-width:0;position:relative;transition:background .16s ease}.repo-row:hover{background:#fafbfe}.repo-row:last-child{border-bottom:0}.rank{font-size:13px;font-weight:650;color:#66738a;width:23px;flex-shrink:0;text-align:center;align-self:center}.rank-1,.rank-2,.rank-3{background:#fff2df;color:#e99a2d;height:24px;line-height:24px;border-radius:6px}.rank-2{color:#7586a4;background:#edf2f9}.rank-3{color:#bd9978;background:#f8f0e8}.repo-info{min-width:0;flex:1;display:block}.repo-info:hover .repo-name{color:var(--blue)}.repo-name{font-size:14px;font-weight:650;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.1px;line-height:1.55}.repo-summary{font-size:12px;color:#63718a;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.65;margin-top:1px}.repo-meta{display:flex;font-size:10px;color:#99a5b8;gap:13px;align-items:center;line-height:1.5;margin-top:4px;white-space:nowrap}.repo-meta>span{display:flex;align-items:center;gap:4px}.lang-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#8d9bb1;margin-right:4px;flex-shrink:0}.typescript{background:#558ecc}.python{background:#e9bd59}.rust{background:#c89d86}.go{background:#7fc1ce}.javascript{background:#dcc64c}.new-tag{display:inline-block;background:#edf8f3;color:#39a78a;border-radius:3px;padding:0 4px;font:9px "Segoe UI",sans-serif;vertical-align:middle;margin-left:7px;letter-spacing:.3px}.sparkline{width:70px;height:26px;color:#aac0f7;flex-shrink:0;margin-right:5px}.sparkline polyline{fill:none;stroke:currentColor;stroke-width:1.4}.row-numbers{text-align:right;min-width:70px;flex-shrink:0;line-height:1.5}.row-numbers strong{font-size:14px;font-weight:650;display:block}.row-numbers>span{font-size:10px;color:#8f9db3;display:block;white-space:nowrap}.secondary-number{text-align:right;width:53px;flex-shrink:0}.secondary-number strong{display:block;font-size:12px;font-weight:500;color:#8190a7}.secondary-number>span{font-size:10px;color:#a3aec0}.follow{display:flex;align-items:center;gap:7px;color:#a7b4c8;background:#fff;border:1px solid #e7edf6;border-radius:7px;padding:8px 11px;font-size:12px;white-space:nowrap}.repo-row .follow{padding:5px;border-color:transparent;margin-right:-8px}.follow .icon{width:15px;height:15px}.follow:hover{background:#fff8e9;color:#d5a044;border-color:#f2e8d1}.follow.is-followed{color:#dcaa3e;background:#fff9e9}.follow.is-followed .icon{fill:#eabb58;stroke:#eabb58}.lead-card>.ranking-rows>.repo-row:first-child{background:linear-gradient(90deg,#fffaf2,#fff 65%)}.lead-card>.ranking-rows>.repo-row:first-child .repo-name{font-size:16px}.lead-card>.ranking-rows>.repo-row:first-child .rank{color:#eb9b20;background:#fff0d6;font-size:17px;width:28px;height:31px;line-height:31px;margin-left:-2px;margin-right:-3px}.lead-card>.ranking-rows>.repo-row:first-child .row-numbers strong{font-size:18px}.lead-footer{display:flex;justify-content:space-between;gap:10px;color:#68768d;font-size:10px;padding:12px 24px;background:#fcfdff;border-top:1px solid #f0f3f8}.lead-footer>span:first-child{display:flex;align-items:center;gap:5px}.lead-footer .icon{width:13px;height:13px}.side-stack{display:flex;flex-direction:column;gap:22px;min-width:0}.side-card{flex:1;display:flex;flex-direction:column}.side-card .card-header{padding:22px 22px 10px}.card-subline{display:flex;justify-content:space-between;color:#68768d;font-size:10px;margin:0 22px 7px}.repo-row.mini{gap:8px;padding:11px 22px;border:0}.mini .rank{font-size:10px;width:20px;line-height:20px;height:20px;background:#f2f5f9;border-radius:4px;color:#90a0b7}.mini .rank-1{color:#e79523;background:#fff5e5}.mini .rank-2{color:#ad9473;background:#f7f1e9}.mini .rank-3{color:#8c92a6;background:#f2f2f8}.mini .repo-name{font-size:12px;line-height:1.5;font-weight:600}.mini .repo-summary{font-size:11px;line-height:1.4;margin-top:1px}.mini .row-numbers{min-width:47px}.mini .row-numbers strong{font-size:12px;font-weight:600}.mini .row-numbers>span{font-size:9px}.mini .new-tag{font-size:7px;margin-left:4px;padding:0 3px}.side-card .repo-row.mini{padding-top:10px;padding-bottom:10px}.side-card .owner-row{flex:1}.section-title{display:flex;justify-content:space-between;gap:15px;align-items:center;margin:30px 0 15px}.section-title>div:first-child{display:flex;align-items:center;gap:15px}.section-title h2{font-size:18px;letter-spacing:-.3px}.section-title>div>span,.section-note{font-size:11px;color:#95a2b7}.category-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:21px}.category-card .card-header{padding:21px 22px 14px}.category-icon{display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 8%,white);color:var(--accent);border-radius:12px;width:38px;height:38px;flex-shrink:0;font-weight:650;font-size:15px}.category-card .card-heading{gap:11px}.card-heading p{font-size:10px;color:#9aa7bb;margin-top:2px;font-weight:400}.category-card .card-heading h3{font-size:15px}.category-card .card-subline{padding-top:5px;border-top:1px solid #f2f5f9;padding-bottom:2px}.category-card .repo-row.mini{padding-top:11px;padding-bottom:11px}.card-tail{display:flex;align-items:center;justify-content:center;gap:4px;color:#9ba9bd;font-size:10px;border-top:1px solid #f1f4f9;margin:9px 22px 0;padding:13px 0}.card-tail .icon{width:11px;height:11px}.card-tail:hover{color:var(--accent)}.avatar{display:grid;place-items:center;background:color-mix(in srgb,var(--avatar) 16%,white);color:color-mix(in srgb,var(--avatar) 42%,#13203a);height:64px;width:64px;flex-shrink:0;border-radius:20px;font-size:21px;font-weight:650;text-transform:uppercase;letter-spacing:-.8px}.avatar.organization{border-radius:14px}.avatar.small{height:31px;width:31px;font-size:11px;border-radius:11px}.avatar.small.organization{border-radius:8px}.owner-row{display:flex;align-items:center;gap:14px;padding:19px 26px;border-bottom:1px solid #f1f4f8}.owner-row:last-child{border-bottom:0}.owner-row:hover{background:#fafbfe}.owner-identity{display:flex;gap:11px;align-items:center;flex:1;min-width:0}.owner-identity>span:last-child{min-width:0}.owner-identity strong{display:block;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.owner-identity:hover strong{color:var(--blue)}.owner-identity small{display:block;color:#99a6ba;font-size:10px;margin-top:2px}.owner-row.mini{border:0;padding:10px 22px;gap:9px}.owner-row.mini .owner-identity{gap:9px}.owner-row.mini .owner-identity strong{font-size:12px}.kind-tabs{display:flex;gap:4px;padding:3px;background:#e9eef7;border-radius:7px}.kind-tabs button{font-size:12px;padding:4px 14px;color:#63718a;border-radius:5px}.kind-tabs button.active{color:#4977ec;background:white;box-shadow:0 1px 3px #243b6908}.account-toolbar{display:flex;justify-content:space-between;align-items:center;margin:-4px 0 15px}.account-toolbar>span{font-size:11px;color:#68768d}.account-toolbar .metric-tabs{background:transparent}.account-toolbar .metric-tabs button{padding:5px 11px}.account-toolbar .metric-tabs button.active{background:#fff;border:1px solid #e4eaf5;padding:4px 10px}.account-card .card-header{padding:21px 22px 16px}.period-mark{width:37px;height:37px;display:grid;place-items:center;font-weight:650;color:#537cf2;background:#eef3ff;border-radius:10px;font-size:17px}.period-mark.month{color:#9c79d7;background:#f6f0ff}.period-mark.year{color:#d9a050;background:#fff5e8}.account-card .owner-row{padding:13px 22px}.account-total{display:flex;justify-content:space-between;border-top:1px solid #f1f4f8;padding:13px 22px;color:#68768d;font-size:10px;margin-top:8px}.site-footer{max-width:1520px;margin:12px auto 0;padding:26px 0 32px;border-top:1px solid #e2e9f2;display:flex;align-items:center;gap:28px;flex-wrap:wrap;color:#94a2b8;font-size:10px}.site-footer>div{display:flex;gap:16px;align-items:center}.footer-brand{display:inline-flex;align-items:center;gap:6px;font-weight:650;color:#65748d;font-size:12px} .footer-brand img{display:block;border-radius:4px}.site-footer nav{display:flex;gap:22px;margin-left:auto}.site-footer nav a:hover{color:var(--blue)}.site-footer small{font-size:10px}.breadcrumbs{display:flex;gap:9px;align-items:center;margin:25px 0 22px;font-size:12px;color:#63718a}.breadcrumbs .icon{height:10px;width:10px;color:#b4bfce}.breadcrumbs a:hover{color:var(--blue)}.breadcrumbs>span{color:#5b6f8e}.page-heading{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:26px}.page-heading p{font-size:13px;color:#8594aa;margin-top:8px}.count-label{color:#8d9db5;font-size:12px}.page-heading+.period-bar{margin-top:0}.list-card .list-toolbar{padding:18px 24px}.list-card .repo-row{padding-top:18px;padding-bottom:18px}.list-card .repo-name{font-size:15px}.list-card .repo-summary{font-size:13px}.list-card .repo-meta{font-size:11px}.list-card .sparkline{margin-right:5%;width:90px;height:28px}.list-card .secondary-number{width:85px}.list-card .row-numbers{min-width:100px}.category-select{display:flex;align-items:center;gap:9px;color:#8a99af;font-size:11px}.category-select select{border:1px solid #e4ebf5;background:#fff;color:#687c9b;padding:5px 8px;border-radius:6px;font-size:11px;max-width:160px}.search-summary{padding:13px 26px;font-size:12px;color:#8495ae;border-bottom:1px solid var(--line)}.search-summary b{color:#5676b6;margin:0 7px}.search-summary a{float:right;color:var(--blue)}.no-result{padding:25px;color:var(--muted)}.empty-state{display:flex;align-items:center;flex-direction:column;justify-content:center;min-height:320px;gap:16px;color:#8a9ab3;text-align:center;padding:40px 20px}.empty-state>.icon{width:35px;height:35px;color:#a1b6e9}.empty-state h3{font-size:18px;color:#526b92}.empty-state p{font-size:12px}.primary-button{border-radius:8px;padding:10px 18px;background:var(--blue);color:#fff;font-size:12px}.primary-button:hover{background:#2458e7}.detail-hero{padding:28px 30px}.detail-title{display:flex;align-items:center;gap:17px;min-width:0}.detail-title>div h1{font-size:29px;margin-top:1px;overflow-wrap:anywhere}.project-symbol{display:grid;place-items:center;width:60px;height:60px;background:color-mix(in srgb,var(--accent) 8%,white);color:var(--accent);border-radius:17px;flex-shrink:0}.project-symbol .icon{height:30px;width:30px}.owner-label{font-size:12px;color:#8b9cb5}.owner-label:hover{color:var(--blue)}.detail-actions{margin-left:auto;display:flex;gap:13px;align-items:center}.fixture-project{color:#a2afc1;font-size:11px;margin-left:auto;white-space:nowrap}.detail-summary{font-size:15px;color:#7084a1;margin-top:24px}.detail-meta{display:flex;align-items:center;gap:21px;color:#95a3b8;font-size:11px;margin-top:20px;flex-wrap:wrap}.category-pill{color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,white);border-radius:5px;padding:4px 9px}.detail-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:22px;gap:20px}.detail-stats>div{background:white;border:1px solid #e6edf6;border-radius:13px;padding:20px 24px}.detail-stats span{color:#8394ad;font-size:12px;display:block}.detail-stats strong{font-size:28px;display:block;margin:7px 0;letter-spacing:-.4px;font-weight:650}.detail-stats small{font-size:11px;color:#a1aec0}.chart-card .card-header{padding:22px 27px 0}.history-chart{padding:5px 12px 10px}.history-chart svg{width:100%;display:block;max-height:295px;overflow:visible}.history-chart line{stroke:#eaf0f7;stroke-dasharray:3 4}.history-chart text{fill:#9daabe;font-family:inherit;font-size:10px}.chart-line{fill:none;stroke:#5681f5;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}.detail-bottom-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:22px;margin-top:22px}.owner-profile-main{display:flex;align-items:center;gap:16px;padding:5px 24px 14px}.owner-profile-main .avatar{height:47px;width:47px;font-size:16px;border-radius:14px}.owner-profile-main strong{display:block;font-size:16px}.owner-profile-main small{display:block;font-size:11px;color:#97a6bc;margin-top:3px}.owner-profile>p{font-size:12px;color:#63718a;padding:0 24px}.owner-profile-stats{display:flex;gap:30px;color:#9aa8bc;font-size:12px;margin-top:19px}.owner-profile .owner-profile-stats{padding:0 24px 25px}.owner-profile-stats b{color:#69809f;font-size:15px;margin-right:4px;font-weight:650}.related-card .repo-row.mini{padding-top:13px;padding-bottom:13px}.owned-list{margin-top:22px}.prose{max-width:970px;margin:0 auto;padding:38px 45px}.prose-intro{color:#8697af;font-size:14px;margin-top:12px}.prose section{margin-top:32px}.prose h2{margin-bottom:15px}.prose p{font-size:14px;color:#7689a5;line-height:1.9;margin-top:12px}.prose table{border-collapse:collapse;width:100%;font-size:13px;color:#7488a5}.prose th{text-align:left;color:#607695;font-weight:600;background:#f7f9fd}.prose td,.prose th{padding:12px 15px;border-bottom:1px solid var(--line)}.prose dt{font-size:14px;font-weight:600;color:#647a99;margin-top:20px}.prose dd{margin:7px 0 0;font-size:13px;line-height:1.9;color:#8192ab}.loading{padding:70px 0;color:var(--muted);font-size:14px}#toast{position:fixed;bottom:35px;left:50%;transform:translate(-50%,12px);opacity:0;pointer-events:none;background:#263d60;color:white;border-radius:9px;padding:10px 20px;font-size:12px;box-shadow:0 7px 24px #1b2b4322;transition:opacity .16s ease,transform .16s ease;z-index:20}#toast.show{opacity:1;transform:translate(-50%,0)}.refreshing .ranking-rows,.refreshing .category-grid,.refreshing .detail-stats{animation:reveal .24s ease both}@keyframes reveal{from{opacity:.65;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}} @media(min-width:1750px){.header-inner,.container{max-width:1760px}.site-footer{max-width:1696px}.category-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.account-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.lead-grid{grid-template-columns:minmax(0,2.2fr) minmax(0,1fr)}.repo-row{padding-top:13px;padding-bottom:13px}.lead-card .repo-info{max-width:none}} @media(max-width:1190px){.header-inner{gap:22px}.main-nav{margin-left:0;gap:22px}.home-link{display:none}.stat-strip>div{padding:19px 17px;gap:10px}.stat-strip small{display:none}.stat-strip strong{font-size:24px}.sparkline{display:none}.lead-grid{grid-template-columns:minmax(0,1.75fr) minmax(0,1fr)}.category-grid{gap:17px}.card-heading p{font-size:10px}.category-card .card-header{padding:20px 17px 13px}.category-card .repo-row.mini{padding-left:16px;padding-right:16px}.category-icon{width:32px;height:32px;font-size:12px;border-radius:9px}.category-card .card-heading{gap:8px}.category-card .card-heading h3{font-size:14px}.category-card .more{padding:2px 4px}.secondary-number{width:42px}.site-footer{margin-left:32px;margin-right:32px}.site-footer small{width:100%}.site-footer nav{gap:16px}.search{width:205px}.mini .repo-summary{font-size:10px}.card-subline{font-size:10px}.list-card .sparkline{display:block;margin-right:20px}.list-card .secondary-number{width:70px}} @media(max-width:950px){.header-inner,.container{padding-left:22px;padding-right:22px}.main-nav{gap:19px}.header-inner{gap:21px}.brand{font-size:18px;gap:8px}.brand img{width:29px;height:29px}.search{width:190px}.mock-badge{font-size:10px}.date-label>span{flex-direction:column;gap:1px;align-items:flex-end}.date-label small{padding:0;border:0}.period-tabs button{min-width:57px;padding:7px 13px}.lead-grid{grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:17px}.repo-row{gap:10px;padding-left:18px;padding-right:18px}.lead-card .secondary-number{display:none}.card-header{padding-left:18px;padding-right:18px}.lead-toolbar{padding-left:17px;padding-right:17px}.lead-toolbar>span{display:none}.metric-tabs button{font-size:10px;padding:4px 6px}.side-card .card-header{padding-left:17px;padding-right:17px}.side-card .card-subline{margin-left:17px;margin-right:17px}.side-card .repo-row.mini,.side-card .owner-row.mini{padding-left:15px;padding-right:15px}.side-card .owner-row .rank{display:none}.side-stack{gap:17px}.category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.category-card .card-header{padding:20px 20px 14px}.category-card .card-heading h3{font-size:15px}.category-icon{width:37px;height:37px;font-size:15px}.category-card .repo-row.mini{padding:12px 20px}.mini .repo-summary{font-size:11px}.account-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.account-card .card-header{padding:18px 15px 12px}.account-card .card-heading{gap:7px}.account-card .card-heading h3{font-size:14px}.account-card .period-mark{height:29px;width:29px;font-size:14px;border-radius:8px}.account-card .card-heading p{font-size:9px}.account-card .owner-row{padding:13px 14px;gap:7px}.account-card .owner-row .rank{display:none}.account-card .owner-identity .avatar{display:none}.account-card .owner-identity strong{font-size:11px}.account-card .row-numbers strong{font-size:11px}.account-total{padding:12px 14px;font-size:9px}.site-footer{margin-left:22px;margin-right:22px}.detail-stats{gap:15px}.detail-stats>div{padding:18px}.detail-stats strong{font-size:25px}.list-card .sparkline{display:none}} @media(max-width:700px){.site-header{height:112px}.header-inner{display:grid;grid-template-columns:1fr auto;grid-template-rows:59px 52px;gap:0 15px;padding:0 18px;position:relative}.brand{font-size:19px;gap:9px;grid-column:1;grid-row:1}.brand img{width:30px;height:30px}.mock-badge{grid-column:2;grid-row:1;justify-self:end;font-size:10px}.main-nav{grid-column:1;grid-row:2;gap:24px;margin:0;height:52px;align-items:stretch;align-self:start}.main-nav>a{font-size:13px}.search{grid-column:2;grid-row:2;width:39px;height:31px;padding:0 9px;margin-top:9px;align-self:start;background:#f1f5fc;transition:background .16s ease}.search input{opacity:0;width:0;position:absolute;pointer-events:none}.search kbd{display:none}.search:focus-within{position:absolute;left:18px;right:18px;top:60px;z-index:4;width:auto;height:40px;box-shadow:0 0 0 5px white;margin:0}.search:focus-within input{position:static;opacity:1;pointer-events:auto;width:100%}.container{padding:0 15px 26px}.period-bar{align-items:flex-start;flex-direction:column;gap:11px;margin:18px 0 15px}.period-tabs{width:100%;gap:3px;padding:4px;border-radius:9px}.period-tabs button{padding:7px 0;min-width:0;flex:1;font-size:13px}.date-label{font-size:10px;margin-left:2px}.date-label>span{flex-direction:row;gap:10px}.date-label small{font-size:10px;border-left:1px solid #dce4ef;padding-left:10px}.date-label .icon{width:12px;height:12px}.stat-strip{grid-template-columns:repeat(2,minmax(0,1fr));border-radius:12px;margin-bottom:16px}.stat-strip>div{padding:15px 13px;gap:10px}.stat-strip>div:nth-child(3),.stat-strip>div:nth-child(4){border-top:1px solid var(--line)}.stat-strip>div:nth-child(3):before{display:none}.stat-icon{height:32px;width:32px;border-radius:9px}.stat-icon .icon{height:17px;width:17px}.stat-strip strong{font-size:21px;letter-spacing:-.5px}.stat-label{font-size:10px;margin-bottom:2px}.lead-grid{grid-template-columns:1fr;gap:16px}.card{border-radius:14px}.card-header{padding:19px 17px 13px}.card-header h2{font-size:16px}.lead-toolbar{padding:0 13px 12px}.metric-tabs{gap:3px}.metric-tabs button{padding:4px 7px;font-size:10px}.lead-toolbar>span{display:block;font-size:9px}.repo-row{padding:13px 15px;gap:9px}.repo-name{font-size:13px}.repo-summary{font-size:11px}.repo-meta{font-size:9px;gap:9px}.row-numbers{min-width:57px}.row-numbers strong{font-size:13px}.row-numbers>span{font-size:9px}.rank{width:20px;font-size:11px}.lead-card>.ranking-rows>.repo-row:first-child .repo-name{font-size:14px}.lead-card>.ranking-rows>.repo-row:first-child .row-numbers strong{font-size:16px}.repo-row .follow{padding:4px;margin-right:-5px}.repo-row .follow .icon{height:13px;width:13px}.lead-footer{padding:11px 16px;font-size:9px}.side-stack{display:grid;grid-template-columns:1fr;gap:16px}.side-card .card-header{padding:19px 17px 11px}.side-card .repo-row.mini{padding:10px 17px}.side-card .owner-row.mini{padding:12px 17px}.side-card .owner-row .rank{display:block}.side-card .card-subline{margin-bottom:4px}.side-card{padding-bottom:8px}.category-grid{grid-template-columns:1fr;gap:16px}.section-title{margin:25px 1px 12px}.section-title h2{font-size:17px}.section-note{font-size:10px}.category-card .card-header{padding:20px 19px 14px}.category-card .card-heading h3{font-size:15px}.card-heading p{font-size:11px}.category-card .repo-row.mini{padding:12px 18px;gap:10px}.mini .repo-name{font-size:13px}.mini .repo-summary{font-size:11px}.mini .row-numbers strong{font-size:13px}.mini .row-numbers>span{font-size:10px}.mini .rank{font-size:11px}.card-subline{font-size:10px}.card-tail{padding:12px 0;font-size:10px}.account-toolbar{gap:10px}.account-toolbar>span{display:none}.account-toolbar .metric-tabs button{font-size:11px;padding:5px 9px}.account-toolbar .metric-tabs button.active{padding:4px 8px}.account-grid{grid-template-columns:1fr}.account-card .card-header{padding:20px 19px 14px}.account-card .period-mark{width:36px;height:36px;font-size:16px;border-radius:10px}.account-card .card-heading{gap:11px}.account-card .card-heading h3{font-size:15px}.account-card .card-heading p{font-size:10px}.account-card .owner-row{padding:14px 18px;gap:10px}.account-card .owner-row .rank{display:block}.account-card .owner-identity .avatar{display:grid}.account-card .owner-identity strong{font-size:13px}.account-card .row-numbers strong{font-size:13px}.account-total{padding:12px 19px;font-size:10px}.site-footer{margin:4px 17px 0;padding:23px 0;gap:17px}.site-footer>div{width:100%;font-size:10px}.site-footer nav{margin-left:0;flex-wrap:wrap;gap:15px;font-size:10px}.site-footer small{font-size:9px}.breadcrumbs{margin:20px 1px;font-size:11px;gap:6px}.page-heading{margin-bottom:20px;gap:8px}.page-heading h1{font-size:24px}.page-heading p{font-size:11px;margin-top:7px}.page-heading .kind-tabs button{font-size:11px;padding:4px 10px}.count-label{font-size:10px}.list-card .list-toolbar{padding:14px 12px;flex-wrap:wrap}.list-toolbar .category-select{font-size:10px}.category-select select{font-size:10px;max-width:130px;padding:4px}.list-card .repo-row{padding:16px 13px;gap:8px}.list-card .repo-name{font-size:13px}.list-card .repo-summary{font-size:11px}.list-card .repo-meta{font-size:9px;gap:7px}.list-card .secondary-number{display:none}.list-card .row-numbers{min-width:56px}.list-card .follow{margin-right:-6px}.owner-row{padding:18px 16px;gap:12px}.owner-identity{gap:9px}.owner-identity strong{font-size:13px}.detail-hero{padding:21px 19px}.detail-title{gap:12px;flex-wrap:wrap}.detail-title>div h1{font-size:24px}.project-symbol{width:46px;height:46px;border-radius:13px}.project-symbol .icon{height:25px;width:25px}.owner-label{font-size:11px}.detail-actions{width:100%;justify-content:space-between;margin-top:7px;flex-direction:row-reverse}.detail-actions .follow{font-size:11px;padding:7px 10px}.fixture-project{font-size:10px;margin-left:0}.detail-summary{font-size:13px;margin-top:18px;line-height:1.75}.detail-meta{gap:12px;font-size:10px;margin-top:16px}.detail-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin-bottom:16px}.detail-stats>div{padding:16px 17px;border-radius:11px}.detail-stats span{font-size:11px}.detail-stats strong{font-size:25px;margin:6px 0}.detail-stats small{font-size:10px}.chart-card .card-header{padding:18px 18px 2px}.history-chart{padding:18px 0 8px;overflow:hidden}.history-chart svg{min-width:490px;max-width:calc(100% + 130px);transform:translateX(-18px);height:160px}.history-chart text{font-size:11px}.history-chart svg{min-width:0;max-width:100%;transform:none;height:auto}.history-chart text{font-size:19px}.detail-bottom-grid{grid-template-columns:1fr;gap:16px;margin-top:16px}.owner-profile-main{padding-left:19px;padding-right:19px}.owner-profile>p{padding-left:19px;padding-right:19px}.owner-profile .owner-profile-stats{padding-left:19px;padding-right:19px}.owner-profile-stats{font-size:11px;gap:22px}.owner-profile-stats b{font-size:14px}.detail-title>.avatar{width:49px;height:49px;border-radius:15px;font-size:17px}.detail-title>.fixture-project{margin-left:auto}.prose{padding:25px 21px}.prose h1{font-size:23px}.prose p{font-size:12px}.prose-intro{font-size:12px}.prose h2{font-size:16px}.prose table{font-size:10px}.prose td,.prose th{padding:10px 6px}.prose dt{font-size:13px}.prose dd{font-size:12px}.empty-state{min-height:290px}.search-owners .owner-row .rank{display:none}} @media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}} /* Readability and density pass after desktop and mobile review. */ :root{--muted:#5f6d84;--secondary:#586d8a} .repo-summary{color:#6e819d}.repo-meta{color:#8394ac}.card-heading p{color:#7e91ac}.card-subline{color:#7a8eaa}.row-numbers>span{color:#7f92af}.section-note,.section-title>div>span{color:#63718a}.more{color:#7088ad}.card-tail{color:#7f94b2}.owner-identity small{color:#7d92b0} .lead-card .repo-row{padding-top:10px;padding-bottom:10px}.lead-card .repo-name{line-height:1.4}.lead-card .repo-summary{line-height:1.4}.lead-card .repo-meta{line-height:1.3;margin-top:2px}.lead-card .repo-row:first-child .repo-name{line-height:1.35}.lead-card .lead-footer{background:#fafcff} @media(min-width:701px){.category-card .mini .repo-name,.side-card .mini .repo-name{font-size:13px}.category-card .mini .repo-summary,.side-card .mini .repo-summary{font-size:12px}.category-card .card-heading p{font-size:11px}.category-card .mini .row-numbers>span{font-size:10px}.owner-row.mini .owner-identity strong{font-size:13px}.owner-row.mini .owner-identity small{font-size:11px}.side-card .owner-row{flex:0}.side-card .owner-row.mini{padding-top:12px;padding-bottom:12px}} @media(max-width:700px){.lead-card .repo-row{padding-top:14px;padding-bottom:14px}.repo-meta{font-size:10px}.lead-card .repo-summary{font-size:12px}.category-card .mini .repo-summary{font-size:12px}.category-card .card-subline{margin-top:0}.date-label{color:#7086a5}} .search-toggle{display:flex;align-items:center;justify-content:center;padding:0;flex-shrink:0} /* v0.4.1 Annual cohort dashboard. */ .home-lead-grid{padding-top:25px;grid-template-columns:minmax(0,2.7fr) minmax(280px,1fr);align-items:start}.annual-board{overflow:visible}.annual-header{display:flex;justify-content:space-between;align-items:center;padding:25px 25px 17px;gap:15px}.annual-header h1{font-size:22px}.scope-label{display:block;color:#7c8fa9;font-size:11px;margin-top:5px}.annual-stamp{font-size:11px;color:#778ca9;display:flex;flex-direction:column;align-items:flex-end;gap:2px}.annual-stamp small{font-size:10px;color:#97a6bb}.annual-board>.period-bar{margin:0;padding:0 24px 17px;gap:12px}.annual-board .period-tabs{padding:4px}.annual-board .period-tabs button{min-width:69px;font-size:12px;padding:6px 12px}.annual-board .date-label{font-size:10px}.annual-board .date-label small{font-size:10px}.annual-stats{margin:0 20px 18px;box-shadow:none;border-radius:11px;grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible}.annual-stats>div{padding:17px 13px;gap:9px}.annual-stats .stat-icon{height:32px;width:32px;border-radius:9px}.annual-stats .stat-icon .icon{height:18px;width:18px}.annual-stats strong{font-size:23px;font-weight:650}.annual-stats .stat-label{font-size:11px;display:flex;align-items:center;gap:5px;white-space:nowrap}.stat-help{position:relative;display:inline-block}.stat-help summary{cursor:pointer;list-style:none;border:1px solid #b4c1d4;border-radius:50%;height:13px;width:13px;line-height:11px;text-align:center;font-size:9px;color:#8a9cb7}.stat-help summary::-webkit-details-marker{display:none}.stat-help>span{position:absolute;left:-30px;top:23px;width:245px;background:#263d60;color:white;font-size:11px;line-height:1.8;border-radius:8px;padding:11px 14px;z-index:10;box-shadow:0 5px 18px #1b2b4325;white-space:normal}.dual-rankings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line)}.dual-column{min-width:0}.dual-column+.dual-column{border-left:1px solid var(--line)}.dual-column>header{padding:17px 18px 12px;display:flex;justify-content:space-between;align-items:center;gap:8px}.dual-column h3{display:flex;align-items:center;gap:7px;font-size:14px}.dual-column h3 .icon{color:#d8a044;height:16px;width:16px}.dual-column:nth-child(2) h3 .icon{color:#2ba58d}.dual-legend{display:flex;justify-content:space-between;padding:0 18px 10px;font-size:9px;color:#8b9eb8;border-bottom:1px solid #f2f5f9}.dual-row{display:flex;gap:9px;align-items:center;padding:13px 15px;min-width:0;border-bottom:1px solid #f1f4f8;min-height:91px}.dual-row:last-child{border-bottom:0}.dual-row:first-of-type{background:#fffdf8}.dual-row .rank{width:21px;font-size:11px}.dual-row .repo-name{font-size:13px}.dual-row .repo-summary{font-size:11px;line-height:1.6;margin-top:3px}.dual-author{display:block;color:#8b9db6;font-size:10px;margin-top:4px}.pair-number{text-align:right;min-width:49px;flex-shrink:0;line-height:1.4}.pair-label{display:block;color:#8a9cb4;font-size:9px;margin-bottom:2px}.pair-number strong{display:block;font-size:13px;font-weight:550}.pair-number.primary-pair strong{font-weight:750}.pair-number small{display:block;color:#8598b3;font-size:10px;margin-top:3px}.home-lead-grid .side-stack{align-self:start}.home-lead-grid .side-card{flex:none;padding-bottom:12px}.home-lead-grid .side-card .repo-row.mini{padding-top:14px;padding-bottom:14px}.annual-board>.lead-footer{border-radius:0 0 17px 17px}.annual-board .stat-strip>div:nth-child(3):before{display:block}.annual-board .stat-strip>div:nth-child(3),.annual-board .stat-strip>div:nth-child(4){border-top:0} @media(max-width:1250px){.home-lead-grid{grid-template-columns:1fr}.home-lead-grid .side-stack{display:grid;grid-template-columns:1fr 1fr}.annual-stats>div{padding:18px}.annual-board .date-label>span{flex-direction:row}.dual-row{padding:14px 19px}.dual-row .repo-summary{font-size:12px}.pair-number{min-width:62px}} @media(max-width:700px){.home-lead-grid{padding-top:17px}.annual-header{padding:20px 17px 14px;align-items:flex-start}.annual-header h1{font-size:20px}.scope-label{font-size:10px}.annual-stamp{font-size:9px;max-width:155px;gap:4px}.annual-stamp small{font-size:9px}.annual-board>.period-bar{padding:0 15px 14px;gap:10px}.annual-board .period-tabs button{font-size:12px;flex:1}.annual-stats{grid-template-columns:1fr 1fr;margin:0 13px 15px}.annual-stats>div{padding:15px 12px}.annual-stats>div:nth-child(3),.annual-stats>div:nth-child(4){border-top:1px solid var(--line)!important}.annual-stats>div:nth-child(3):before{display:none!important}.annual-stats strong{font-size:23px}.annual-stats .stat-label{font-size:10px}.dual-rankings{grid-template-columns:1fr}.dual-column+.dual-column{border-left:0;border-top:1px solid var(--line)}.dual-column>header{padding:17px 16px 11px}.dual-row{padding:14px 14px;gap:9px;min-height:88px}.dual-row .repo-summary{font-size:11px}.pair-number{min-width:48px}.dual-row .repo-name{font-size:13px}.home-lead-grid .side-stack{display:flex}.stat-help>span{left:-40px;width:220px}.annual-board>.lead-footer{font-size:9px}.annual-board .date-label>span{flex-wrap:wrap;gap:6px}.annual-board .date-label small{font-size:9px}} @media(max-width:700px){.annual-stats>div:nth-child(n+3) .stat-icon{display:none}.annual-stats>div:nth-child(n+3){padding-left:17px}.annual-stats>div>div{min-width:0}} /* v0.4.2 棣栭〉淇锛氱粺璁″彲涓嬮捇銆佹湀/骞村懆鏈熴€佸埛鏂板€掕鏃躲€佸彸鏍忎笁鍗＄瓑楂樸€佸垪琛ㄥ垎椤?*/ .annual-title{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap} .h1-note{color:#67748a;font-size:11px;font-weight:500} .annual-stamp .stamp-line{display:flex;align-items:center;gap:4px;white-space:nowrap} .annual-stamp .stamp-line .icon{width:12px;height:12px} .stamp-refresh strong{font-variant-numeric:tabular-nums;font-weight:650;color:#5b7595} .stamp-refresh strong.countdown-missed{color:#b45309} .stat-tile{cursor:pointer;transition:background .16s ease} .stat-tile:hover{background:#f7faff} .tile-hit{position:absolute;inset:0;z-index:1;border-radius:10px} .tile-hit:focus-visible{outline:2px solid var(--blue);outline-offset:-3px} .tile-chev{position:absolute;right:9px;top:50%;transform:translateY(-50%);z-index:1;color:#a9bcd6;opacity:.5;transition:opacity .16s ease,transform .16s ease;pointer-events:none} .tile-chev .icon{width:13px;height:13px} .stat-tile:hover .tile-chev,.stat-tile:focus-within .tile-chev{opacity:1;transform:translateY(-50%) translateX(2px)} .stat-tile .stat-help summary{position:relative;z-index:2} .rail-toggle{display:flex;gap:2px;background:#eef3fa;border-radius:7px;padding:2px} .rail-toggle button{padding:2px 9px;border-radius:5px;font-size:10px;font-weight:600;line-height:1.6;color:#63718a} .rail-toggle button.active{background:#fff;color:var(--blue);box-shadow:0 1px 3px #2946751f} .rail-rows{display:flex;flex-direction:column;justify-content:flex-start;flex:1;min-height:0} .rail-rows>.repo-row,.rail-rows>.owner-row{flex:0 0 auto} .side-total{margin-top:auto;padding:11px 20px 13px;border-top:1px solid #f1f4f9;color:#67748a;font-size:11px;display:flex;justify-content:space-between;gap:8px} .bar-list{display:flex;flex-direction:column;justify-content:space-between;gap:11px;flex:1;padding:6px 20px 18px} .bar-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:10px;row-gap:6px;font-size:12px;color:inherit} .bar-name{color:#43566f;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .bar-value{font-variant-numeric:tabular-nums;font-weight:700;font-size:12px} .bar-track{grid-column:1/-1;height:4px;border-radius:99px;background:#eef2f9;overflow:hidden} .bar-track i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#5c7ef8,#8aa4ff)} .bar-row:hover .bar-name{color:var(--blue)} .heading-dot.violet-dot{background:#8b7bf3;box-shadow:0 0 0 4px #8b7bf312} .pager{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px;padding:16px 18px;border-top:1px solid #f0f3f8} .pager a{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:30px;padding:0 9px;border:1px solid #e6edf6;border-radius:7px;background:#fff;color:#5d728f;font-size:12px} .pager a:hover{color:var(--blue);border-color:#cfdcf5;background:#f6f9ff} .pager-num.active{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:600} .pager-step.is-disabled{color:#bcc8d8;background:#fbfcfe;pointer-events:none} .pager-gap{color:#a9b6c9;padding:0 2px} .pager-total{color:#68768d;font-size:11px;margin-left:4px} .home-lead-grid{align-items:stretch} .home-lead-grid .side-stack{align-self:stretch} .home-lead-grid .side-card{flex:1 1 auto} .side-card .rail-rows .repo-row.mini{padding-top:8px;padding-bottom:8px} .side-card .rail-rows .owner-row.mini{padding-top:7px;padding-bottom:7px} .side-card .rail-rows .owner-row .rank{display:block} @media(max-width:1250px){.home-lead-grid .side-stack{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.home-lead-grid .side-card{flex:1 1 auto}.rail-rows,.bar-list{justify-content:flex-start}} @media(max-width:950px){.home-lead-grid .side-stack{grid-template-columns:1fr}} @media(max-width:700px){.h1-note{display:none}.tile-chev{display:none}.annual-board .period-tabs button{min-width:0}.rail-toggle button{padding:2px 7px}.bar-list{padding:4px 17px 14px}.side-total{padding:10px 17px 12px}.pager{padding:13px 12px}} /* v0.4.3 瑙嗚浣撶郴锛氬眰绾с€佺暀鐧姐€佹暟瀛楁帓鐗堜笌鍔ㄦ晥 */ @keyframes riseIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} @keyframes growX{from{transform:scaleX(0)}to{transform:scaleX(1)}} @keyframes drawLine{to{stroke-dashoffset:0}} .home-lead-grid{padding-top:28px;gap:22px} .home-lead-grid .side-stack{display:flex;flex-direction:column;gap:18px;align-self:stretch} .home-lead-grid .side-card{flex:1 1 0;min-height:0;padding-bottom:10px} .side-card .rail-rows{flex:1;display:flex;flex-direction:column} .side-card .card-header{padding:20px 22px 8px} .card{transition:box-shadow .25s ease,transform .25s ease,border-color .25s ease} .side-card:hover,.category-card:hover,.account-card:hover{transform:translateY(-2px);box-shadow:0 16px 38px -22px rgba(23,42,84,.32)} .annual-header{padding:26px 26px 14px} .annual-header h1{font-size:31px;font-weight:800;letter-spacing:-1.1px;line-height:1.15;font-variant-numeric:tabular-nums} .annual-stamp{gap:2px;font-size:11.5px;color:#7a89a1} .annual-stamp .stamp-line{gap:5px} .stamp-refresh strong{font-variant-numeric:tabular-nums;font-size:12.5px;color:#2f4fd0;letter-spacing:.2px} .stat-strip{margin-bottom:22px} .stat-strip>div{padding:22px 26px;gap:16px} .stat-strip strong{font-size:40px;font-weight:800;line-height:1.1;letter-spacing:-1.6px;font-variant-numeric:tabular-nums} .stat-label{font-size:12.5px;font-weight:600;color:#5a6a84;letter-spacing:.1px} .stat-icon{width:44px;height:44px} .stat-tile{transition:background .2s ease} .stat-tile:hover{background:linear-gradient(180deg,#f8fbff,#fff)} .stat-tile .tile-chev{transition:opacity .2s ease,transform .2s ease} .dual-column>header h3{font-size:15px;font-weight:700;letter-spacing:-.2px} .dual-row{min-height:86px;padding:12px 16px;transition:background .18s ease} .dual-row:hover{background:#f8fbff} .dual-row:hover .repo-name{color:#1f49d0} .dual-spark{width:50px;flex-shrink:0;opacity:.75;margin-right:2px} .dual-spark .sparkline{width:50px;height:24px;margin:0} .pair-number{min-width:60px;text-align:right} .pair-number strong{font-variant-numeric:tabular-nums;letter-spacing:-.2px;font-size:14.5px} .pair-number small{font-variant-numeric:tabular-nums;letter-spacing:0} .rank{transition:background .2s ease,color .2s ease,transform .2s ease} .rank-1{background:linear-gradient(135deg,#fff4dc,#ffe1ab);color:#b57300;box-shadow:0 2px 6px -2px rgba(224,155,0,.45)} .rank-2{background:linear-gradient(135deg,#f3f6fb,#e1e8f4);color:#5f7189} .rank-3{background:linear-gradient(135deg,#fdf2e8,#f7e0c9);color:#a86f3a} .dual-row .rank-1,.repo-row .rank-1,.owner-row .rank-1{color:#b57300} .mini .rank-1{background:linear-gradient(135deg,#fff4dc,#ffe1ab);color:#b57300} .mini .rank-2{background:linear-gradient(135deg,#f3f6fb,#e1e8f4);color:#5f7189} .mini .rank-3{background:linear-gradient(135deg,#fdf2e8,#f7e0c9);color:#a86f3a} .dual-row:first-of-type,.repo-row:first-child{background:linear-gradient(90deg,#fffdf6,#fff 60%)} .section-title{margin:36px 0 16px} .section-title h2{font-size:19px;font-weight:800;letter-spacing:-.5px} .section-tools{display:flex;align-items:center;gap:10px} .section-note{font-size:11.5px;color:#63718a} .card-subline b{font-size:13px;color:#132540;font-weight:700;font-variant-numeric:tabular-nums} .category-grid{gap:22px} .categories-section .category-card{animation:riseIn .5s cubic-bezier(.22,.8,.3,1) both} .category-grid .category-card:nth-child(2){animation-delay:.045s} .category-grid .category-card:nth-child(3){animation-delay:.09s} .category-grid .category-card:nth-child(4){animation-delay:.135s} .category-grid .category-card:nth-child(5){animation-delay:.18s} .category-grid .category-card:nth-child(6){animation-delay:.225s} .category-grid .category-card:nth-child(7){animation-delay:.27s} .category-grid .category-card:nth-child(8){animation-delay:.315s} .lead-card,.side-card{animation:riseIn .45s cubic-bezier(.22,.8,.3,1) both} .side-stack .side-card:nth-child(2){animation-delay:.06s} .bar-track i{transform-origin:left center;animation:growX .85s cubic-bezier(.22,.8,.3,1) both} .sparkline polyline{stroke-dasharray:240;stroke-dashoffset:240;animation:drawLine 1s .15s ease forwards} .repo-row,.owner-row,.dual-row{transition:background .18s ease} .repo-row:hover,.owner-row:hover{background:#f8fbff} .card-tail,.more{transition:color .18s ease,gap .18s ease} .card-tail:hover,.more:hover{color:#1f49d0} @media (max-width:700px){ .annual-header h1{font-size:25px;letter-spacing:-.8px} .stat-strip strong{font-size:30px;letter-spacing:-1px} .stat-strip>div{padding:16px 14px;gap:10px} .dual-spark{display:none} .section-title{margin:26px 0 13px} } @media (prefers-reduced-motion:reduce){ .lead-card,.side-card,.category-card,.account-card,.bar-track i,.sparkline polyline{animation:none!important} .sparkline polyline{stroke-dashoffset:0} .card,.stat-tile,.rank,.dual-row,.repo-row,.owner-row{transition:none!important} } /* v0.4.3b 鍙虫爮涓ゅ崱绛夐珮涓庢暟瀛楁斁澶?*/ .home-lead-grid .side-card{flex:0 0 auto} .home-lead-grid .side-card:nth-child(2){flex:1 1 0} .side-card .rail-rows{flex:1;justify-content:flex-start} .side-card .rail-rows>.owner-row.mini{flex:1 1 0;min-height:62px;align-items:center} .side-card .rail-rows>.owner-row.mini .owner-identity{align-items:center} .stat-strip strong{font-size:44px;letter-spacing:-1.8px} .dual-row .repo-info{flex:1 1 auto;min-width:0} .dual-author{display:inline-flex;align-items:center;gap:5px;flex-wrap:wrap} .dual-author i{font-style:normal;color:#c3cedd;font-size:9px} .dual-spark{opacity:.9;margin-right:4px} .dual-spark .sparkline{color:#b7c9f4} @media (max-width:1250px){ .home-lead-grid .side-card:nth-child(2){flex:1 1 auto} .side-card .rail-rows{flex:0 1 auto} .side-card .rail-rows>.owner-row.mini{flex:0 0 auto;min-height:0} } @media (max-width:950px){.stat-strip strong{font-size:36px;letter-spacing:-1.2px}} /* v0.4.3c 鎽樿绛夊涓庡弻姒滄爡鏍煎榻?*/ .stat-strip{grid-template-columns:repeat(4,minmax(0,1fr))} .dual-row{display:grid;grid-template-columns:22px minmax(0,1fr) 62px 62px 62px;column-gap:12px;align-items:center} .dual-row .repo-info{display:flex;flex-direction:column;min-width:0} .dual-row .repo-name{font-size:14.5px;letter-spacing:-.2px;line-height:1.4} .dual-row .repo-summary{font-size:11.5px;line-height:1.55} .dual-author{font-size:10.5px;letter-spacing:.1px;color:#8b98ad} .dual-spark{width:62px;margin:0} .dual-spark .sparkline{width:62px;height:26px} .dual-row .pair-number{min-width:0;text-align:right} .dual-row .pair-label{font-size:9.5px;letter-spacing:.5px;color:#a3afc2} .dual-row .pair-number strong{font-size:15px} .dual-row .pair-number small{font-size:10.5px;color:#93a1b6} @media (max-width:1100px){ .dual-row{grid-template-columns:20px minmax(0,1fr) 56px 56px;column-gap:10px} .dual-row .dual-spark{display:none} } @media (max-width:700px){ .stat-strip{grid-template-columns:1fr 1fr} .stat-tile{padding:14px 12px} .stat-strip strong{font-size:28px;letter-spacing:-1px} } @media (max-width:700px){ .annual-header{flex-wrap:wrap;gap:6px;padding:18px 16px 12px} .annual-header h1{font-size:24px;letter-spacing:-.6px} .annual-stamp{flex:1 1 100%;max-width:none;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:4px 12px;font-size:10.5px} .stamp-refresh{font-size:10.5px} .dual-row .dual-author{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .dual-row{padding:10px 12px;min-height:78px} .category-grid{gap:16px} } @media (max-width:430px){ .annual-board>.period-bar{padding:0 12px 12px} .period-tabs{gap:2px;padding:4px} .annual-board .period-tabs button{font-size:11px;padding:6px 3px;min-width:0;white-space:nowrap;letter-spacing:-.2px} } /* v0.4.4 楠屾敹锛氬弻姒滃乏鍙冲簳鑹插尯鍒?/ 琛屽唴鍒嗙被鏍囩 / 鍒囨崲閽€変腑鎬?/ 鎻愮ず鑷姩鏀惰捣 */ .dual-rankings .dual-column:first-child{background:linear-gradient(180deg,#fffaf1 0,#fffdf9 150px)} .dual-rankings .dual-column:first-child>header{background:linear-gradient(180deg,#fff6e6,#fffaf1)} .dual-rankings .dual-column:last-child{background:linear-gradient(180deg,#f2fbf9 0,#fbfefd 150px)} .dual-rankings .dual-column:last-child>header{background:linear-gradient(180deg,#e9f8f5,#f2fbf9)} .cat-chip{display:inline-flex;align-items:center;gap:4px;margin-left:7px;padding:0 7px;border-radius:999px;background:#eef2f8;color:#6d7f9a;font-size:9.5px;font-weight:600;line-height:1.7;letter-spacing:.2px;white-space:nowrap;vertical-align:1px} .cat-chip::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--cat,#9aa9bd)} .rail-toggle{background:#e4eaf4} .rail-toggle button{color:#5f7089} .rail-toggle button.active{background:linear-gradient(135deg,#2f6bff,#4a86ff);color:#fff;box-shadow:0 2px 6px #2f6bff3d} .rail-toggle button.active:hover{color:#fff} @media (max-width:700px){ .cat-chip{font-size:9px;padding:0 6px;margin-left:5px} } /* v0.4.5 绗簲杞細绛夐珮鍙虫爮涓庡惊鐜粴鍔ㄣ€佸垎娈甸挳鍥炲埌娴呭簳銆佽处鍙峰崱鍙ｅ緞銆佹繁娴呰壊 */ .header-tools{display:flex;align-items:center;gap:6px;margin-left:4px} .tool-button{width:30px;height:30px;border-radius:9px;border:1px solid var(--line);background:var(--surface);color:var(--text-2);font-size:12px;line-height:1;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .18s,color .18s,background .18s} .tool-button:hover{border-color:var(--line-strong);color:var(--text)} .lang-button{width:auto;padding:0 9px;font-weight:700;letter-spacing:.02em} .rail-toggle{background:#e9eef6} .rail-toggle button{color:#61738c} .rail-toggle button.active{background:#fff;color:#1f49d0;box-shadow:0 1px 3px rgba(23,43,77,.14)} .home-lead-grid .side-card{flex:1 1 0;min-height:0} .home-lead-grid .side-card:nth-child(2){flex:1 1 0} .side-card{display:flex;flex-direction:column;min-height:0} .rail-window{position:relative;flex:1 1 auto;min-height:96px;overflow:hidden} .rail-window > .rail-rows{display:flex;flex-direction:column;justify-content:flex-start;height:100%} .rail-track{display:flex;flex-direction:column;animation:railLoop calc(var(--rail-n,8) * 2.6s) linear infinite} .rail-track > [aria-hidden="true"]{display:flex;flex-direction:column} .rail-window:hover .rail-track,.rail-window:focus-within .rail-track{animation-play-state:paused} @keyframes railLoop{from{transform:translateY(0)}to{transform:translateY(-50%)}} .row-numbers small{font-size:9.5px;color:var(--muted);letter-spacing:.02em;font-weight:500} @media (prefers-reduced-motion:reduce){.rail-track{animation:none}.rail-window{overflow-y:auto}} @media (max-width:1250px){.home-lead-grid .side-card{flex:0 1 auto}.rail-window{max-height:520px}} @media (max-width:700px){.header-tools{margin-left:auto}.tool-button{width:28px;height:28px}.rail-window{max-height:420px}} /* v0.4.5 娣辨祬鑹插彉閲?*/ :root{--bg:#eef1f6;--surface:#fff;--surface-2:#f7f9fc;--surface-3:#f2f5fa;--line:#e6ecf5;--line-strong:#cfd9e8;--text:#16233a;--text-2:#5d6d84;--muted:#67748a;--accent:#1f49d0;--shadow:0 1px 2px rgba(23,43,77,.06),0 12px 28px rgba(23,43,77,.05)} [data-theme="dark"]{color-scheme:dark;--bg:#0d1219;--surface:#151c27;--surface-2:#1a2230;--surface-3:#1e2735;--line:#242e3d;--line-strong:#33415a;--text:#e8eef7;--text-2:#a3b1c4;--muted:#77879c;--accent:#7aa2ff;--shadow:0 1px 2px rgba(0,0,0,.5),0 16px 32px rgba(0,0,0,.35)} [data-theme="dark"] body{background:var(--bg);color:var(--text)} [data-theme="dark"] .site-header{background:rgba(13,18,25,.88);border-bottom-color:var(--line)} [data-theme="dark"] .brand span{color:var(--text)} [data-theme="dark"] .main-nav a{color:var(--text-2)} [data-theme="dark"] .main-nav a.active,[data-theme="dark"] .main-nav a:hover{color:var(--text)} [data-theme="dark"] .search{background:var(--surface-2);border-color:var(--line)} [data-theme="dark"] .search input{color:var(--text)} [data-theme="dark"] .search input::placeholder{color:var(--muted)} [data-theme="dark"] .search kbd{background:var(--surface-3);border-color:var(--line);color:var(--muted)} [data-theme="dark"] .home-link{color:var(--text-2)} [data-theme="dark"] .card,[data-theme="dark"] .list-card{background:var(--surface);border-color:var(--line);box-shadow:var(--shadow)} [data-theme="dark"] h1,[data-theme="dark"] h2,[data-theme="dark"] h3,[data-theme="dark"] h4{color:var(--text)} [data-theme="dark"] .repo-name,[data-theme="dark"] .owner-name,[data-theme="dark"] .repo-name strong{color:var(--text)} [data-theme="dark"] .repo-summary,[data-theme="dark"] .subtle,[data-theme="dark"] .card-subline,[data-theme="dark"] .dual-author,[data-theme="dark"] .repo-meta,[data-theme="dark"] .section-title span,[data-theme="dark"] .account-total,[data-theme="dark"] .page-heading p,[data-theme="dark"] .prose p,[data-theme="dark"] .prose li{color:var(--text-2)} [data-theme="dark"] .annual-stamp,[data-theme="dark"] .stat-label,[data-theme="dark"] .rank,[data-theme="dark"] .pager,[data-theme="dark"] .breadcrumbs{color:var(--muted)} [data-theme="dark"] .period-tabs,[data-theme="dark"] .kind-tabs,[data-theme="dark"] .metric-tabs,[data-theme="dark"] .rail-toggle{background:var(--surface-3);border-color:var(--line)} [data-theme="dark"] .period-tabs button,[data-theme="dark"] .kind-tabs button,[data-theme="dark"] .metric-tabs button,[data-theme="dark"] .rail-toggle button{color:var(--text-2)} [data-theme="dark"] .period-tabs button[aria-selected="true"],[data-theme="dark"] .period-tabs button.active,[data-theme="dark"] .kind-tabs button.active,[data-theme="dark"] .metric-tabs button.active{background:var(--surface);color:var(--accent);box-shadow:0 1px 3px rgba(0,0,0,.4)} [data-theme="dark"] .rail-toggle button.active{background:var(--surface);color:var(--accent);box-shadow:0 1px 3px rgba(0,0,0,.4)} [data-theme="dark"] .annual-board,[data-theme="dark"] .annual-board>.period-bar,[data-theme="dark"] .stat-strip,[data-theme="dark"] .dual-rankings{border-color:var(--line)} [data-theme="dark"] .stat-strip{background:var(--surface)} [data-theme="dark"] .stat-tile:hover{background:var(--surface-2)} [data-theme="dark"] .stat-strip strong{color:var(--text)} [data-theme="dark"] .dual-rankings .dual-column:first-child{background:linear-gradient(180deg,#1d1a14,#151c27 150px)} [data-theme="dark"] .dual-rankings .dual-column:first-child .dual-column-head{background:#241f16;border-bottom-color:var(--line)} [data-theme="dark"] .dual-rankings .dual-column:last-child{background:linear-gradient(180deg,#111d1b,#151c27 150px)} [data-theme="dark"] .dual-rankings .dual-column:last-child .dual-column-head{background:#122420;border-bottom-color:var(--line)} [data-theme="dark"] .dual-row{border-top-color:var(--line)} [data-theme="dark"] .dual-row:hover,[data-theme="dark"] .repo-row:hover,[data-theme="dark"] .owner-row:hover{background:rgba(255,255,255,.035)} [data-theme="dark"] .repo-row,[data-theme="dark"] .owner-row,[data-theme="dark"] .list-toolbar,[data-theme="dark"] .card-header,[data-theme="dark"] .card-subline,[data-theme="dark"] .account-total,[data-theme="dark"] .lead-footer{border-color:var(--line)} [data-theme="dark"] .rank{background:var(--surface-3);color:var(--muted)} [data-theme="dark"] .rank-1{background:#3a2a12;color:#f4b860} [data-theme="dark"] .rank-2{background:#2b3340;color:#c3d1e4} [data-theme="dark"] .rank-3{background:#33261d;color:#e0a882} [data-theme="dark"] .cat-chip{background:var(--surface-3);color:var(--text-2)} [data-theme="dark"] .more{color:var(--text-2)} [data-theme="dark"] .sparkline{color:#4a6fa8} [data-theme="dark"] .bar-track{background:var(--surface-3)} [data-theme="dark"] .pager a,[data-theme="dark"] .pager span{border-color:var(--line);background:var(--surface-2);color:var(--text-2)} [data-theme="dark"] .pager .current{background:var(--accent);color:#0d1219;border-color:var(--accent)} [data-theme="dark"] .stat-help summary{color:var(--muted)} [data-theme="dark"] .stat-help[open] .stat-help-body,[data-theme="dark"] .stat-help div{background:#0b1017;color:#dbe5f2} [data-theme="dark"] .breadcrumbs a{color:var(--text-2)} [data-theme="dark"] .prose h2,[data-theme="dark"] .prose h3{color:var(--text)} [data-theme="dark"] .prose blockquote,[data-theme="dark"] .prose section{border-color:var(--line)} [data-theme="dark"] .site-footer{background:#0a0e14;border-top-color:var(--line);color:var(--muted)} [data-theme="dark"] .site-footer a{color:var(--text-2)} [data-theme="dark"] .toast{background:#e8eef7;color:#0d1219} [data-theme="dark"] .empty-state h1{color:var(--text)} [data-theme="dark"] .primary-button{background:var(--accent);color:#0d1219} [data-theme="dark"] .follow{background:var(--surface-2);border-color:var(--line);color:var(--text-2)} [data-theme="dark"] .follow.is-followed{background:#1d3350;border-color:#2c4f7a;color:#9dc2ff} [data-theme="dark"] .avatar{background:#1e2937;color:#c3d1e4} [data-theme="dark"] .period-mark{background:var(--surface-3);color:var(--text-2)} [data-theme="dark"] .no-result{color:var(--muted)} [data-theme="dark"] .loading{color:var(--muted)} [data-theme="dark"] .cat-chip::before{box-shadow:none} [data-theme="dark"] .dual-rankings .dual-column>header{background:linear-gradient(180deg,#241f16,#1d1a14);border-bottom-color:var(--line)} [data-theme="dark"] .dual-rankings .dual-column:last-child>header{background:linear-gradient(180deg,#122420,#111d1b)} [data-theme="dark"] .dual-row:first-of-type,[data-theme="dark"] .repo-row:first-of-type,[data-theme="dark"] .repo-row:first-child{background:transparent} [data-theme="dark"] .mini .rank-1{background:#3a2a12;color:#f4b860} [data-theme="dark"] .stat-tile:hover{background:#1b2432} [data-theme="dark"] .card-header{border-bottom-color:var(--line)} [data-theme="dark"] .list-toolbar{background:transparent;border-color:var(--line)} [data-theme="dark"] .annual-header{border-bottom-color:var(--line)} [data-theme="dark"] .stat-strip>div+div{border-left-color:var(--line)} [data-theme="dark"] .stat-help div{background:#0a0f16;color:#dce6f3;border-color:#243043} [data-theme="dark"] .category-card,[data-theme="dark"] .account-card{background:var(--surface);border-color:var(--line)} [data-theme="dark"] .category-card .category-head,[data-theme="dark"] .account-card .card-header{border-color:var(--line)} [data-theme="dark"] .cat-rows .repo-row,[data-theme="dark"] .account-card .owner-row{border-color:var(--line)} [data-theme="dark"] .list-card .repo-row+.repo-row{border-top-color:var(--line)} [data-theme="dark"] .empty-state{background:var(--surface);border-color:var(--line)} .rail-track{animation-delay:2.4s} .rail-window{mask-image:linear-gradient(180deg,transparent 0,#000 22px,#000 calc(100% - 22px),transparent 100%);-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22px,#000 calc(100% - 22px),transparent 100%)} .rail-window > .rail-rows{justify-content:center} [data-theme="dark"] .card-subline b,[data-theme="dark"] .annual-stamp b,[data-theme="dark"] .category-card b,[data-theme="dark"] .account-card b,[data-theme="dark"] .stat-strip b{color:var(--text)} [data-theme="dark"] .repo-row .repo-name b,[data-theme="dark"] .dual-row .repo-name b{color:var(--text)} [data-theme="dark"] .dual-row .repo-name .cat-chip{color:var(--text-2)} .rail-window > .rail-rows{justify-content:center} .rail-window > .rail-rows > .repo-row,.rail-window > .rail-rows > .owner-row{flex:0 0 auto} .rail-track > .repo-row,.rail-track > .owner-row{flex:0 0 auto} .rail-track > [aria-hidden="true"] > .repo-row,.rail-track > [aria-hidden="true"] > .owner-row{flex:0 0 auto} [data-theme="dark"] .new-tag{background:#12332c;color:#5fd7b4} [data-theme="dark"] .cat-chip{background:#1b2430;color:#9db0c7} /* v0.4.6 鍒嗙被鏉垮潡锛氬崱澶村垎绫昏壊 + 鍥哄畾楂樺害婊氬姩绐楀彛 */ .category-card { position: relative; overflow: hidden; } .category-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--accent, #3568f7); opacity: .9; } .category-card > header.card-header { background: linear-gradient(180deg, color-mix(in srgb, var(--accent, #3568f7) 11%, transparent), transparent); } .category-card .category-icon { background: color-mix(in srgb, var(--accent, #3568f7) 15%, transparent); color: var(--accent, #3568f7); } .cat-window { position: relative; flex: 1 1 auto; overflow: hidden; } .cat-window > .cat-rows { display: flex; flex-direction: column; height: 100%; } .cat-window > .cat-track { display: flex; flex-direction: column; animation: catLoop var(--cat-dur, 34s) linear infinite; animation-delay: 2.6s; } @keyframes catLoop { from { transform: translateY(0); } to { transform: translateY(-50%); } } .cat-track > .repo-row { flex: 0 0 auto; } .category-card { --row-h: 54px; } .cat-window { max-height: calc(var(--row-h) * 5); min-height: calc(var(--row-h) * 5); } .cat-window .repo-row { height: var(--row-h); min-height: var(--row-h); max-height: var(--row-h); padding: 4px 14px; align-items: center; overflow: hidden; } .cat-window::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, var(--surface, #fff) 0, transparent 18px, transparent calc(100% - 18px), var(--surface, #fff) 100%); opacity: .9; } .category-card .repo-row:last-child { border-bottom: 0; } .category-card { padding-bottom: 10px; } @media (prefers-reduced-motion: reduce) { .cat-window > .cat-track { animation: none; } .cat-window { overflow-y: auto; } } [data-theme="dark"] .category-card > header.card-header { background: linear-gradient(180deg, color-mix(in srgb, var(--accent, #3568f7) 22%, transparent), transparent); } [data-theme="dark"] .cat-window::after { background: linear-gradient(180deg, var(--surface) 0, transparent 18px, transparent calc(100% - 18px), var(--surface) 100%); } @media (max-width: 700px) { .category-card { --row-h: 50px; } .cat-window { max-height: calc(var(--row-h) * 4); min-height: calc(var(--row-h) * 4); } } .cat-track:hover,.rail-track:hover{animation-play-state:paused} /* v0.4.10 鍙虫爮瀵圭О涓庡弻鎸囨爣鍒?*/ /* 涓ゅ紶鍗″悓涓€琛岄珮銆侀《閮ㄥ榻愶紝5 鏉″唴瀹圭殑鑺傚涓€鑷?*/ .home-lead-grid .side-card .rail-window > .rail-rows { justify-content: flex-start; } .side-stack .rail-window > .rail-rows > .repo-row, .side-stack .rail-window > .rail-rows > .owner-row { flex: 0 0 auto; height: 66px; min-height: 0; box-sizing: border-box; padding-top: 0; padding-bottom: 0; } /* 璐﹀彿琛岋細Star 涓?Fork 涓ゅ垪锛屽悇甯﹀噣澧炰笌绱 */ .row-numbers.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; min-width: 168px; text-align: right; } .row-numbers.pair .num-col { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; } .row-numbers.pair .num-col strong { font-size: 14px; font-variant-numeric: tabular-nums; } .row-numbers.pair .num-col small { font-size: 9.5px; color: var(--muted); white-space: nowrap; } .row-numbers.pair .num-col.on strong { color: #e08f2a; } [data-theme="dark"] .row-numbers.pair .num-col.on strong { color: #f0b25c; } .row-numbers.pair .num-col:not(.on) strong { color: var(--text-2, #61708a); font-weight: 620; } /* 鍒楀ご鎻愮ず */ .card-subline .pair-hint { margin-left: auto; font-size: 9.5px; letter-spacing: .04em; color: var(--muted); } /* 鏂板缓椤圭洰鍗′笌璐﹀彿鍗″ご閮ㄤ繚鎸佸悓楂?*/ .home-lead-grid .side-card .card-header { min-height: 56px; padding-bottom: 2px; } .home-lead-grid .side-card .card-subline { min-height: 32px; align-items: center; } @media (max-width: 700px) { .rail-window > .rail-rows > .repo-row, .rail-window > .rail-rows > .owner-row { height: 66px; } .row-numbers.pair { min-width: 140px; } } /* v0.4.11 璐﹀彿鍛ㄦ湡姒滀笌鍒嗙被鍗＄粺涓€琛岃妭濂?*/ .account-card .owner-row { height: 68px; min-height: 0; box-sizing: border-box; align-items: center; } .account-card .owner-row .row-numbers small { font-size: 9.5px; color: var(--muted); white-space: nowrap; } .account-card { display: flex; flex-direction: column; } .account-card > .owner-row { flex: 0 0 auto; } .cat-window .repo-row { height: var(--row-h); min-height: 0; box-sizing: border-box; align-items: center; overflow: hidden; } @media (max-width: 700px) { .account-card .owner-row { height: 62px; } } /* v0.4.12 鍙屾寚鏍囧垪锛氫富鎸囨爣浜€佸彟涓€鍒楀帇鏆楋紱灏忓崱閲屼袱鍒楅兘淇濈暀 */ .row-numbers.pair { min-width: 138px; } .row-numbers.pair .num-col strong { font-size: 13px; } .row-numbers.pair .num-col small { font-size: 9px; } .category-card .row-numbers.pair { min-width: 118px; gap: 4px 10px; } .category-card .row-numbers.pair .num-col strong { font-size: 12px; } .category-card .row-numbers.pair .num-col small { font-size: 8.5px; } .account-card .row-numbers.pair { min-width: 132px; } .account-card .row-numbers.pair .num-col strong { font-size: 12.5px; } /* 涓绘寚鏍囷細鏆栬壊楂橀ケ鍜岋紱娆℃寚鏍囷細涓€х伆鍘嬫殫 */ .row-numbers.pair .num-col.on strong { color: #d9821f; font-weight: 750; } .row-numbers.pair .num-col:not(.on) strong { color: var(--muted, #8b97a8); font-weight: 620; } .row-numbers.pair .num-col:not(.on) small { color: var(--muted, #8b97a8); opacity: .78; } [data-theme="dark"] .row-numbers.pair .num-col.on strong { color: #f2b463; } [data-theme="dark"] .row-numbers.pair .num-col:not(.on) strong { color: #7d8b9e; } [data-theme="dark"] .row-numbers.pair .num-col:not(.on) small { color: #6f7d90; } @media (max-width: 1100px) { .category-card .row-numbers.pair { min-width: 104px; } } /* v0.4.12 閰嶅鍒椾笉缁ф壙 .positive!important锛屾敼鐢?on/off 涓ょ骇鎺у埗鏄庢殫 */ .row-numbers.pair .num-col strong.pair-val { font-variant-numeric: tabular-nums; } .row-numbers.pair .num-col.on strong.pair-val { color: #d9821f !important; font-weight: 760; } .row-numbers.pair .num-col:not(.on) strong.pair-val { color: #67748a !important; font-weight: 600; } .row-numbers.pair .num-col:not(.on) small { color: #6c7a91; } .row-numbers.pair .num-col strong.pair-val.neg { color: #c4563f !important; } [data-theme="dark"] .row-numbers.pair .num-col.on strong.pair-val { color: #f2b463 !important; } [data-theme="dark"] .row-numbers.pair .num-col:not(.on) strong.pair-val { color: #7c8a9c !important; } [data-theme="dark"] .row-numbers.pair .num-col:not(.on) small { color: #6d7b8d; } /* v0.4.12 鍙屾涓绘锛氭湰鏍忔帓搴忔寚鏍囦寒锛屽彟涓€鍒楀帇鏆?*/ .dual-row .pair-number.primary-pair strong { color: #d9821f !important; font-weight: 760; } .dual-row .pair-number.primary-pair small { color: #b08a55; } .dual-row .pair-number:not(.primary-pair) strong { color: #67748a !important; font-weight: 600; } .dual-row .pair-number:not(.primary-pair) small { color: #66738a; } .dual-row .pair-number.primary-pair .pair-label { color: #b9812f; } .dual-row .pair-number:not(.primary-pair) .pair-label { color: #9aa8ba; } [data-theme="dark"] .dual-row .pair-number.primary-pair strong { color: #f2b463 !important; } [data-theme="dark"] .dual-row .pair-number:not(.primary-pair) strong { color: #7c8a9c !important; } [data-theme="dark"] .dual-row .pair-number:not(.primary-pair) small { color: #6d7b8d; } [data-theme="dark"] .dual-row .pair-number.primary-pair .pair-label { color: #c99a5c; } [data-theme="dark"] .dual-row .pair-number:not(.primary-pair) .pair-label { color: #6f7d90; } /* v0.4.13 鍒楄〃涓庤鎯咃細瀵嗗害銆佸眰绾с€佷富棰樹笌鍔ㄦ晥 */ /* 鍒楄〃椤靛伐鍏锋潯锛氱櫧鑹查€変腑鑳跺泭锛屼笌鍙虫爮鍒嗘閿竴鑷?*/ .list-toolbar .metric-tabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: #e9eef6; border: 1px solid #e1e8f2; } .list-toolbar .metric-tabs button { border: 0; background: transparent; color: #5b6b85; font-size: 12px; font-weight: 600; padding: 6px 14px; border-radius: 999px; cursor: pointer; transition: background .18s, color .18s, box-shadow .18s; } .list-toolbar .metric-tabs button:hover { color: #2f5fd0; } .list-toolbar .metric-tabs button.active { background: #fff; color: #1f49d0; box-shadow: 0 1px 3px rgba(23,43,77,.14); } .category-select { color: var(--muted); font-size: 12px; display: inline-flex; align-items: center; gap: 8px; } .category-select select { appearance: none; border: 1px solid var(--line); background: var(--surface); color: var(--text); padding: 7px 30px 7px 12px; border-radius: 10px; font-size: 12px; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } /* 鍒楄〃琛岋細鏇寸揣鍑戯紝鏁板瓧鍒楀彸瀵归綈 */ .list-card .repo-row { min-height: 80px; } .list-card .repo-row .repo-name { font-size: 14px; } .list-card .list-toolbar { padding: 12px 18px; } .page-heading { margin: 18px 0 10px; } /* 鍒楄〃琛屽姩鏁?*/ /* v1.3.0：手写 nth-child 阶梯换成按真实位置计算，行数再多也不会挤在同一延迟上。 */ .list-card .repo-row, .related-card .repo-row { animation: rowRise .5s cubic-bezier(.22,.61,.36,1) both; animation-delay: calc((var(--sibling-index, 1) - 1) * .04s); animation-delay: min(calc((sibling-index() - 1) * .04s), .2s); } @keyframes rowRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* 璇︽儏椤碉細绠€浠嬩笌涓婚鏍囩 */ .detail-intro { margin: 8px 0 0; max-width: 68ch; color: var(--text-2, #4a5a72); font-size: 13.5px; line-height: 1.85; } .topic-row { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0 4px; } .topic-chip { font-size: 11px; letter-spacing: .02em; color: #4a6ba8; background: #eef3fc; border: 1px solid #dde7f8; border-radius: 999px; padding: 3px 10px; } .detail-hero { animation: heroIn .45s ease both; } @keyframes heroIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* 璇︽儏椤靛洓椤圭粺璁★細绱鍘嬫殫銆佸噣澧炴彁浜紝鎸?Star / Fork 鍖哄垎鑹?*/ .detail-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .detail-stats > div { position: relative; overflow: hidden; border-radius: 15px; padding: 18px 20px 16px; background: var(--surface); border: 1px solid var(--line); animation: statIn .5s cubic-bezier(.22,.61,.36,1) both; } .detail-stats > div:nth-child(2) { animation-delay: .05s; } .detail-stats > div:nth-child(3) { animation-delay: .1s; } .detail-stats > div:nth-child(4) { animation-delay: .15s; } @keyframes statIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .detail-stats > div::after { content: ""; position: absolute; inset: auto -20% -60% auto; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, rgba(53,104,247,.10), transparent 70%); pointer-events: none; } .detail-stats > div.is-fork::after { background: radial-gradient(circle, rgba(14,170,135,.12), transparent 70%); } .detail-stats > div > span { font-size: 11.5px; color: var(--muted); letter-spacing: .02em; } .detail-stats > div > strong { display: block; margin: 10px 0 4px; font-size: 30px; font-weight: 780; letter-spacing: -1px; font-variant-numeric: tabular-nums; } .detail-stats > div.stat-total > strong { color: var(--muted); font-weight: 620; font-size: 26px; } .detail-stats > div.stat-gain.is-star > strong { color: #d9821f; } .detail-stats > div.stat-gain.is-fork > strong { color: #0e9c7c; } .detail-stats > div > small { font-size: 10.5px; color: var(--muted); } /* 娣辫壊涓婚琛ラ綈 */ [data-theme="dark"] .detail-stats > div { background: #131b26; border-color: #1e2836; } [data-theme="dark"] .detail-stats > div > strong { color: #e7edf6; } [data-theme="dark"] .detail-stats > div.stat-total > strong { color: #8a97a8; } [data-theme="dark"] .detail-stats > div.stat-gain.is-star > strong { color: #f2b463; } [data-theme="dark"] .detail-stats > div.stat-gain.is-fork > strong { color: #4fd1ad; } [data-theme="dark"] .detail-intro { color: #b3c0d2; } [data-theme="dark"] .topic-chip { background: #16202c; border-color: #24303f; color: #8fb4e6; } [data-theme="dark"] .list-toolbar .metric-tabs { background: #182230; border-color: #22303f; } [data-theme="dark"] .list-toolbar .metric-tabs button { color: #67748a; } [data-theme="dark"] .list-toolbar .metric-tabs button.active { background: #22303f; color: #cfe0ff; box-shadow: none; } [data-theme="dark"] .category-select select { background-color: #131b26; border-color: #22303f; color: #dbe4ef; } [data-theme="dark"] .detail-hero, [data-theme="dark"] .chart-card { border-color: #1e2836; } @media (max-width: 900px) { .detail-stats { grid-template-columns: 1fr 1fr; gap: 10px; } .detail-stats > div > strong { font-size: 24px; } } @media (prefers-reduced-motion: reduce) { .list-card .repo-row, .related-card .repo-row, .detail-hero, .detail-stats > div { animation: none; } } /* v0.4.13b 鍒楄〃琛岋細鎶婅秼鍔跨嚎鎺ㄥ埌鏁板瓧鏃侊紝鏀剁揣涓棿绌虹櫧 */ .list-card .repo-row { min-height: 82px; padding: 12px 20px; gap: 14px; } .list-card .repo-info { flex: 1 1 auto; min-width: 0; } .list-card .sparkline { margin: 0 16px 0 auto; width: 86px; height: 26px; flex-shrink: 0; } .list-card .row-numbers { min-width: 108px; text-align: right; } .list-card .secondary-number { min-width: 84px; text-align: right; } .list-card .follow-button { margin-left: 4px; } .list-card .list-toolbar { border-bottom: 1px solid var(--line); } @media (max-width: 900px) { .list-card .sparkline { display: none; } .list-card .repo-row { min-height: 74px; padding: 10px 14px; } } /* v0.4.13c 璇︽儏缁熻锛氱粫寮€ .positive!important锛屾寜鎸囨爣鍙栬壊 */ .detail-stats > div.stat-gain.is-star > strong.gain-num { color: #d9821f !important; } .detail-stats > div.stat-gain.is-fork > strong.gain-num { color: #0e9c7c !important; } .detail-stats > div.stat-gain > strong.gain-num.neg { color: #c4563f !important; } [data-theme="dark"] .detail-stats > div.stat-gain.is-star > strong.gain-num { color: #f2b463 !important; } [data-theme="dark"] .detail-stats > div.stat-gain.is-fork > strong.gain-num { color: #4fd1ad !important; } /* v0.4.14 鏈煡鐘舵€侊細鐮存姌鍙蜂笉褰撴垚鏁板瓧娓叉煋 */ .annual-stats strong.is-unknown { font-size: 26px; letter-spacing: 0; color: var(--muted); font-weight: 600; } .stat-note { display: block; margin-top: 4px; font-size: 10.5px; font-style: normal; color: var(--muted); } .board-note { margin: 0 18px 14px; padding: 8px 10px; border-radius: 8px; background: #f7f9fc; color: var(--muted); font-size: 11px; } [data-theme="dark"] .board-note { background: #141b24; } .detail-stats strong.is-unknown { font-size: 26px; color: var(--muted); } /* v0.4.16 杩炵画闇告鏍囪 */ .streak-badge{display:inline-flex;align-items:center;margin-left:6px;padding:0 6px;border-radius:999px; background:linear-gradient(135deg,#fff0d6,#ffe2b8);color:#b9691a;font-size:9.5px;font-style:normal; font-weight:700;letter-spacing:.02em;line-height:1.7} [data-theme="dark"] .streak-badge{background:linear-gradient(135deg,#3a2a14,#4a3417);color:#f2b463} /* v0.5.1 鐪熷疄鏁版嵁杩囨湡鎻愮ず */ .annual-stamp .stamp-stale { display: block; margin-top: 4px; font-size: 11px; color: #c4563f; } [data-theme="dark"] .annual-stamp .stamp-stale { color: #f08a6c; } /* v0.5.1 棣栧睆楠ㄦ灦锛氶鐣欓珮搴︼紝鍑忓皯鏁版嵁鏇挎崲鏃剁殑甯冨眬鍋忕Щ */ /* 楠ㄦ灦楂樺害鍙栧埌瑙嗗彛浠ヤ笅锛岄〉鑴氬湪棣栨娓叉煋鍓嶅悗閮戒笉杩涘叆瑙嗗彛锛岄伩鍏?CLS */ #app { min-height: calc(100vh - 210px); display: flow-root; } .shell-skeleton { min-height: 140vh; } .shell-skeleton { display: flex; flex-direction: column; padding: 18px 0 40px; min-height: calc(100vh - 190px); } .sk-bar, .sk-block { border-radius: 12px; background: linear-gradient(90deg, #eef2f8, #f6f9fd, #eef2f8); } .sk-title { width: 320px; height: 40px; margin: 8px 0 14px; } .sk-sub { width: 240px; height: 16px; margin-bottom: 22px; } .sk-tabs { width: 420px; height: 40px; margin-bottom: 20px; border-radius: 999px; } .sk-block { flex: 1 1 auto; min-height: 460px; } [data-theme="dark"] .sk-bar, [data-theme="dark"] .sk-block { background: linear-gradient(90deg, #161d27, #1b2431, #161d27); } @media (prefers-reduced-motion: no-preference) { .sk-bar, .sk-block { animation: skPulse 1.4s ease-in-out infinite; } @keyframes skPulse { 0%, 100% { opacity: 1; } 50% { opacity: .65; } } } /* v0.5.1 瀵规瘮搴︽敹鍙ｏ細娆¤鏂囧瓧缁熶竴鍒?AA锛堢櫧搴?鈮?.5:1锛?*/ .pair-label, .row-numbers .pair-label, .dual-row .pair-label { color: #616e85 !important; } .side-total, .card-subline, .card-footer, .lead-footer, .pager-meta, .scope-owner { color: #5f6d84 !important; } /* v1.3.1：这条 !important 会把说明页深底页头里的白字也刷成深灰（实测导语压蓝底几乎看不见）， 所以把 .doc-head 内的文字排除在外；页头自己声明白字，两种主题都成立。 */ .prose p:not(.doc-lede), .prose li, .prose td, .prose th, .table td, .table th, .method-table td, .method-table th { color: #4a5768 !important; } .site-footer a, .site-footer small, .footer-brand { color: #5a6779 !important; } .breadcrumbs a, .breadcrumbs span { color: #5a6779 !important; } .muted, .subtle, .secondary, .num-label, .metric-label, .card-note { color: #5f6d84 !important; } [data-theme="dark"] .pair-label, [data-theme="dark"] .card-subline, [data-theme="dark"] .site-footer a, [data-theme="dark"] .site-footer small, [data-theme="dark"] .breadcrumbs a { color: #a9b8cc !important; } /* v0.5.1 瀵规瘮搴︽敹鍙?2锛氭寜鎺㈤拡璺緞閫愭潯澶勭悊锛堢櫧搴曠洰鏍?4.5:1锛屽ぇ瀛楀彿 3:1锛?*/ .rail-rows .rank, .cat-track .rank, .repo-row.mini .rank, .owner-row.mini .rank { color: #5c6a82 !important; } .secondary-number, .secondary-number span, .row-numbers > span, .repo-meta, .repo-meta span, .detail-meta span, .owner-profile-stats span, .owner-profile-main small, .owner-label, .follow, .count-label, .page-heading p, .page-heading .count-label { color: #5a6779 !important; } .pager-step.is-disabled { color: #7c8798 !important; } /* 鐞ョ弨鑹插垎涓ゆ。锛氬皬瀛楀彿鐢ㄦ繁鐞ョ弨锛屽ぇ瀛楀彿鐢ㄤ腑鐞ョ弨锛屽潎婊¤冻鍚勮嚜闃堝€?*/ .row-numbers strong.positive, .row-numbers.pair .num-col.on strong.pair-val, .row-numbers.pair .num-col.on strong.gain-num { color: #a2620f !important; } .stat-strip strong, .detail-stats .stat-gain.is-star > strong.gain-num, .detail-stats .stat-gain.is-fork > strong.gain-num { color: #b06a11 !important; } [data-theme="dark"] .secondary-number, [data-theme="dark"] .row-numbers > span, [data-theme="dark"] .repo-meta, [data-theme="dark"] .owner-label { color: #a9b8cc !important; } /* v0.5.1 瀵规瘮搴︽敹鍙?3锛堟渶缁堬級锛氱粺涓€娆¤鏂囧瓧涓庣惀鐝€鑹叉。浣?*/ .annual-stamp .stamp-line, .annual-stamp small, .stamp-refresh, .dual-row .dual-author, .dual-row .dual-author i, .dual-row .pair-label, .pair-number small, .owner-identity small, .card-heading p, .card-subline, .period-bar .date-label, .period-bar .scope-text, .period-tabs button, .metric-tabs button, .kind-tabs button, .dual-column > header > a.more, .card-header > a.more, .repo-summary, .cat-chip, .secondary-number, .secondary-number strong, .repo-meta, .repo-meta span, .owner-label, .count-label, .page-heading p, .owner-profile-stats span, .owner-profile-main small, .detail-meta span, .pager-step, .pager-meta, .pager-num, .site-footer a, .site-footer small, .footer-brand, .breadcrumbs a, .breadcrumbs span, .rank, .rail-rows .rank, .cat-track .rank { color: #55637a !important; } .dual-row .pair-number strong.positive, .dual-row .pair-number strong.pair-val, .row-numbers strong.positive, .row-numbers strong.pair-val, .row-numbers.pair .num-col strong.pair-val { color: #a2620f !important; } .stat-strip strong, .detail-stats strong.gain-num { color: #b06a11 !important; } [data-theme="dark"] .annual-stamp .stamp-line, [data-theme="dark"] .dual-row .dual-author, [data-theme="dark"] .dual-row .pair-label, [data-theme="dark"] .repo-summary, [data-theme="dark"] .card-heading p, [data-theme="dark"] .period-tabs button, [data-theme="dark"] .site-footer a, [data-theme="dark"] .site-footer small, [data-theme="dark"] .breadcrumbs a, [data-theme="dark"] .rank, [data-theme="dark"] .secondary-number, [data-theme="dark"] .repo-meta { color: #aab8cc !important; } [data-theme="dark"] .dual-row .pair-number strong.positive, [data-theme="dark"] .row-numbers strong.pair-val { color: #f0b269 !important; } /* v0.5.1 瀵规瘮搴︽敹鍙?4 */ .rail-toggle button:not(.active), .kind-tabs button:not(.active), .metric-tabs button:not(.active), .period-tabs button:not(.active) { color: #4d5a70 !important; } .row-numbers.pair .num-col small, .pair-number small { color: #5a687f !important; } .pager-step.is-disabled { color: #5a6779 !important; opacity: 1 !important; } .detail-stats > div.stat-gain.is-star > strong.gain-num { color: #a5640f !important; } .detail-stats > div.stat-gain.is-fork > strong.gain-num { color: #0b7a63 !important; } .detail-summary, .detail-intro { color: #4f5d70 !important; } .category-pill { color: #2d63b8 !important; } [data-theme="dark"] .detail-stats > div.stat-gain.is-star > strong.gain-num { color: #f0b269 !important; } [data-theme="dark"] .detail-stats > div.stat-gain.is-fork > strong.gain-num { color: #58d6b4 !important; } [data-theme="dark"] .rail-toggle button, [data-theme="dark"] .metric-tabs button { color: #b3c1d4 !important; } /* v0.5.1 閾炬帴鑹诧細#2d63b8 鍦ㄧ櫧鑹蹭笂绾?5.4:1锛屼繚鐣欏彲鐐瑰嚮鏆楃ず */ a.more, .card-header a.more, .dual-column > header a.more, .breadcrumbs a, .site-footer a, .footer-brand, .home-link, .category-pill, .owner-label, .gh-link { color: #2d63b8 !important; } [data-theme="dark"] a.more, [data-theme="dark"] .breadcrumbs a, [data-theme="dark"] .site-footer a, [data-theme="dark"] .owner-label { color: #8fb4f0 !important; } /* v0.5.4 鏁版嵁鍔犺浇閿欒鎬?*/ .empty-state.data-error { max-width: 640px; } .empty-state.data-error .error-detail { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: #6b7a90; word-break: break-all; } .empty-state.data-error .error-hint { font-size: 12px; color: #6b7a90; } .empty-state.data-error .error-hint code { background: #eef2f8; border-radius: 4px; padding: 1px 5px; } .empty-state.data-error .error-actions { display: flex; gap: 12px; align-items: center; justify-content: center; margin-top: 14px; } [data-theme="dark"] .empty-state.data-error .error-detail, [data-theme="dark"] .empty-state.data-error .error-hint { color: #aab8cc; } [data-theme="dark"] .empty-state.data-error .error-hint code { background: #1b2430; } .empty-state.data-error { margin-inline: auto; text-align: center; padding-block: 56px; } .empty-state.data-error h1, .empty-state.data-error h2 { color: #1b2433; font-size: 22px; font-weight: 760; } [data-theme="dark"] .empty-state.data-error h1 { color: #e6edf7; } /* v0.5.6 绋€鐤忓巻鍙诧細涓嶇敾鍋囨洸绾?*/ .history-chart.is-sparse { padding: 34px 26px; } .history-chart.is-sparse .chart-note { margin: 0 0 8px; color: #66738a; font-size: 13px; } .history-chart.is-sparse .chart-value { margin: 0; font-size: 34px; font-weight: 780; color: #1b2433; letter-spacing: -1px; } [data-theme="dark"] .history-chart.is-sparse .chart-note { color: #aab8cc; } [data-theme="dark"] .history-chart.is-sparse .chart-value { color: #e6edf7; } .chart-flat-note { fill: #8a97aa; font-size: 10px; } [data-theme="dark"] .chart-flat-note { fill: #92a3ba; } /* v0.5.7 鎼滅储/绛涢€夎鏄?*/ .search-note { margin: 0 0 12px; font-size: 12.5px; color: #5b6a80; } [data-theme="dark"] .search-note { color: #9db0c7; } /* 2026-11-11 棣栭〉銆屼粖骞存柊浣溿€嶅叆鍙?*/ .annual-title { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .year-entry { font-size: 12.5px; font-weight: 600; color: #2d63b8; border: 1px solid #d5e0f5; background: #f4f8ff; border-radius: 999px; padding: 3px 11px; text-decoration: none; } .year-entry:hover { background: #e8f1ff; } [data-theme="dark"] .year-entry { color: #8fb4f0; background: #16202e; border-color: #24344a; } /* v05 鏂板锛氬ご鍚嶅崱涓庢柊鑰佽础鐚潯锛堜笉鏀瑰姩鏃㈡湁鍖哄潡锛?*/ .leader-strip{margin:0 20px 18px;box-shadow:none;border-radius:11px;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible} .leader-strip>div{padding:16px 18px;gap:12px;align-items:flex-start} .leader-strip .leader-body{min-width:0} .leader-strip .stat-label{font-size:11px;color:var(--secondary);margin-bottom:4px} .leader-strip strong{font-size:19px;font-weight:680;letter-spacing:-.3px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .leader-strip .leader-meta{font-size:10px;color:#8b9cb5;margin-top:4px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .leader-strip .leader-meta b{color:#5f6d84;font-weight:600} .contribution-card{margin:0 20px 18px;border:1px solid #e6edf6;border-radius:11px;padding:15px 18px 16px;background:#fff} .contribution-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:10px} .contribution-head h3{font-size:13px;font-weight:650} .contribution-head span{font-size:11px;color:#8b9cb5} .contribution-bar{display:flex;height:26px;border-radius:7px;overflow:hidden;background:#f2f5fa} .contribution-bar span{display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:#fff;white-space:nowrap} .contribution-bar .seg-new{background:linear-gradient(90deg,#3f6ff0,#5b83f5)} .contribution-bar .seg-old{background:linear-gradient(90deg,#0eaa87,#2bb99a)} .contribution-legend{display:flex;gap:18px;margin-top:9px;font-size:11px;color:#68768d} .contribution-legend i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:6px;vertical-align:middle} .contribution-legend .dot-new{background:#3f6ff0} .contribution-legend .dot-old{background:#0eaa87} @media(max-width:700px){.leader-strip{grid-template-columns:1fr;margin:0 13px 14px}.leader-strip>div{border-top:1px solid var(--line)}.leader-strip>div:first-child{border-top:0}.contribution-card{margin:0 13px 14px;padding:14px 15px}.contribution-bar{height:24px}.contribution-bar span{font-size:10px}} /* v05 淇锛氬洓鏍肩粺璁″崟鍏冮噷鐨勯暱鏁板瓧涓嶅啀鍘嬪埌鐩搁偦鏍?*/ .annual-stats-clamp .stat-strip>.annual-stats>div, .annual-stats>div{min-width:0} .annual-stats strong{font-size:clamp(20px,2.05vw,34px);letter-spacing:-.8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%} /* v05 鏂板锛氭柊绉€姒滀笌瀛橀噺澧為噺姒滐紙娌跨敤鏃㈡湁琛屾牱寮忥級 */ .growth-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line)} .growth-card{border:0;border-radius:0;box-shadow:none;overflow:visible} .growth-card+.growth-card{border-left:1px solid var(--line)} .growth-card .card-header{padding:20px 22px 12px} .growth-card .card-subline{margin:0 22px 6px} .growth-grid .repo-row.mini{padding:12px 22px} @media(max-width:700px){.growth-grid{grid-template-columns:1fr}.growth-card+.growth-card{border-left:0;border-top:1px solid var(--line)}} /* v05 鏂板锛氳穬鍗囨涓庢帀闃熸 */ .leap-rankings{border-top:1px solid var(--line)} .leap-rankings .dual-column>header h3{font-size:15px} .leap-rankings .dual-column>header h3 .icon{color:#d8a044} .leap-rankings .dual-column:last-child>header h3 .icon{color:#bc617a} .leap-rankings .repo-row.mini{padding:12px 20px} .leap-rankings .row-numbers strong{font-size:13px} /* v05锛氬厛鍘绘帀鍙充晶鏍忥紙浠婃棩鏂板缓椤圭洰 / 璐﹀彿涓婂崌姒滐級锛屼富鍒楀崰婊★紱瑕佹仮澶嶅垹鎺夎繖涓€娈靛嵆鍙?*/ .home-lead-grid{grid-template-columns:minmax(0,2.65fr) minmax(320px,1fr);gap:18px;align-items:stretch} .home-lead-grid>.side-stack{display:flex;flex-direction:column;gap:14px} /* v05 鏀舵暃锛氬帇楂樺害銆侀檷楗卞拰銆佸姞灞傛锛堝彧瑕嗙洊 v05 鏂板姞鐨勯儴鍒嗕笌琛岄珮锛?*/ .leader-strip{border:1px solid var(--line);background:linear-gradient(180deg,#fbfcff,#f5f8fd);border-radius:12px} .leader-strip>div{background:transparent} .leader-strip strong{font-size:21px;letter-spacing:-.4px} .leader-strip .stat-label{font-size:10.5px;letter-spacing:.04em;text-transform:none} .contribution-card{background:#fbfcfe;padding:12px 16px 13px} .contribution-head{margin-bottom:8px} .contribution-bar{height:16px;border-radius:999px;background:#eef2f8} .contribution-bar span{font-size:10px;font-weight:600;letter-spacing:.02em} .contribution-bar .seg-new{background:#6d90f2} .contribution-bar .seg-old{background:#3db79b} .contribution-legend{margin-top:7px;font-size:10.5px;color:#7c8aa0} .home-lead-grid .repo-row.mini{padding:9px 20px} .home-lead-grid .repo-row.mini .repo-name{font-size:14px} .home-lead-grid .repo-row.mini .repo-summary{font-size:11.5px;color:#8493a8} .home-lead-grid .repo-row.mini .row-numbers strong{font-size:13px} .leap-rankings .row-numbers strong{display:inline-block;min-width:34px;text-align:center;background:#f3f7fc;border:1px solid #e6eef8;border-radius:999px;padding:1px 7px;font-size:12px} .leap-rankings .row-numbers strong.positive{background:#f4f8ff;border-color:#dbe6fb} .leap-rankings .row-numbers strong.negative{background:#fff5f6;border-color:#f7dfe3} .leap-rankings .dual-legend{font-size:10.5px} @media(max-width:700px){.leader-strip strong{font-size:19px}} /* v05 鍚堝苟锛氭妸"澶村悕鍗?+ 鏂拌€佽础鐚?鏀惰繘涓€寮犲崱锛岄〉闈笂灏戜竴鏉℃í甯?*/ .hero-band{padding:0;margin:0 0 18px;overflow:hidden} .hero-band .leader-strip{margin:0;border:0;border-radius:0;background:transparent;box-shadow:none;border-bottom:1px solid var(--line)} .hero-band .contribution-card{margin:0;border:0;border-radius:0;background:transparent;padding:14px 20px 15px} .hero-band .contribution-bar{height:20px} /* v05 双列留白：新秀/存量、跃升/掉队 各自成卡，中间留 14px 缝隙 */ .growth-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;border-top:0;margin:0 0 18px;padding:0 20px} .growth-grid .growth-card{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden} .growth-grid .growth-card>header{padding:14px 16px 10px;border-bottom:1px solid #f2f5f9} .growth-grid .repo-row.mini{padding:10px 16px} .leap-rankings{display:grid;grid-template-columns:1fr 1fr;gap:14px;border-top:0;margin:0;padding:0 20px 20px} .leap-rankings .dual-column{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden} .leap-rankings .dual-column+.dual-column{border-left:1px solid var(--line)} .leap-rankings .dual-column>header{padding:14px 16px 10px} .leap-rankings .repo-row.mini{padding:10px 16px} @media(max-width:700px){.growth-grid,.leap-rankings{grid-template-columns:1fr;padding:0 13px 14px}.leap-rankings .dual-column+.dual-column{border-left:1px solid var(--line);border-top:0}} /* v05：跃升/掉队用的是 dual-rankings 复合类，单独压一层留白与底色 */ .dual-rankings.leap-rankings{display:grid;grid-template-columns:1fr 1fr;gap:14px;border-top:0;padding:0 20px 20px;background:transparent} .dual-rankings.leap-rankings .dual-column{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden} .dual-rankings.leap-rankings .dual-column:first-child,.dual-rankings.leap-rankings .dual-column:last-child{background:#fff} .dual-rankings.leap-rankings .dual-column:first-child>header,.dual-rankings.leap-rankings .dual-column:last-child>header{background:#fbfcfe;border-bottom:1px solid #f2f5f9} .dual-rankings.leap-rankings .dual-column+.dual-column{border-left:1px solid var(--line)} @media(max-width:700px){.dual-rankings.leap-rankings{grid-template-columns:1fr;padding:0 13px 14px}} /* v05 两列（左主卡 / 右两卡对齐） */ .v05-aside{display:flex;flex-direction:column;gap:16px} .v05-aside>section{flex:1;min-height:0;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden} .v05-aside .card-header{padding:14px 16px 10px;border-bottom:1px solid #f2f5f9} .v05-aside .repo-row.mini{padding:10px 16px} .v05-leap{padding:2px 0 18px} .v05-leap .dual-rankings.leap-rankings{padding:0 20px} @media(max-width:900px){.home-lead-grid{grid-template-columns:minmax(0,2.65fr) minmax(320px,1fr);gap:18px;align-items:stretch}.v05-aside{display:grid;grid-template-columns:1fr 1fr}} @media(max-width:700px){.v05-aside{grid-template-columns:1fr}} /* v05 内嵌条：主卡里横排两块小面板（新秀/存量、跃升/掉队），像主卡自带的一条 */ .inset-strip{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:4px 20px 16px} .inset-strip>section{background:#fbfcfe;border:1px solid #eef3f9;border-radius:12px;overflow:hidden} .inset-strip>section .card-header{padding:12px 14px 8px;border-bottom:1px solid #eef3f9;background:#fff} .inset-strip>section .repo-row.mini{padding:8px 14px} .inset-strip>section h3{font-size:15px} .inset-strip-leap{padding-top:0} @media(max-width:760px){.inset-strip{grid-template-columns:1fr;padding:4px 13px 14px}} /* 内嵌条里的跃升/掉队：去掉一层多余 padding 与内层边框 */ .inset-strip-leap .dual-rankings.leap-rankings{padding:0;gap:12px} .inset-strip-leap .dual-rankings.leap-rankings .dual-column{border:0;background:#fbfcfe;border-radius:12px;overflow:hidden} .inset-strip-leap .dual-rankings.leap-rankings .dual-column>header{background:#fff;border-bottom:1px solid #eef3f9} /* v05 右栏两块等分 */ .v05-aside>section{flex:1;min-height:0} .v05-aside{gap:14px} .v05-leap{padding:18px 20px 4px} /* v05 右栏：一个卡 + 四个 tab */ .v05-tabs-card{padding:0;overflow:hidden;display:flex;flex-direction:column} .v05-tabs-card>.card-header{padding:14px 16px 10px} .v05-tabs{display:flex;gap:6px;padding:0 12px 10px;flex-wrap:wrap} .v05-tab{font:inherit;font-size:12.5px;color:#5f6d84;background:#f3f6fb;border:1px solid #e6edf7;border-radius:999px;padding:5px 11px;cursor:pointer;line-height:1.2} .v05-tab.is-active{background:#1b2b43;border-color:#1b2b43;color:#fff} .v05-panel{display:none;padding:0 12px 10px} .v05-panel.is-active{display:block} .v05-panel .card{border:0;box-shadow:none;background:transparent;padding:0;margin:0} .v05-panel .card-header{display:none} .v05-panel .repo-row{padding-left:2px;padding-right:2px} /* v05 右栏下半：四张卡自动轮播，每 2 秒一张，8 秒一轮 */ .v05-aside{display:grid !important;grid-template-rows:minmax(0,1fr) minmax(0,0.62fr);gap:14px} .v05-aside>.v05-tabs-card{min-height:0} .v05-panels{flex:1;min-height:0;overflow:auto} .v05-panels .v05-panel{display:none} .v05-panels .v05-panel.is-active{display:block} .v05-rotator{display:flex;flex-direction:column;min-height:0;overflow:hidden} .v05-rotator>.card-header{padding:12px 16px 6px} .v05-rot-hint{font-size:11.5px;color:#8b98ab} .v05-rot-wrap{position:relative;flex:1;min-height:150px;padding:6px 16px 14px} .v05-slide>div{height:100%} .v05-slide .leader-strip{border:0;background:transparent;padding:0} .v05-slide .contribution-card{border:0;background:transparent;padding:0} /* 轮播卡内部的竖排版式 */ .v05-slide>div{display:flex;flex-direction:column;align-items:stretch;gap:10px;width:100%} .v05-slide .leader-body{display:flex;flex-direction:column;gap:6px} .v05-slide .leader-body strong{font-size:26px;line-height:1.15} .v05-slide .leader-meta{font-size:12.5px;color:#6b7a90} .v05-slide .stat-icon{width:38px;height:38px} /* v05 右栏下半：卡牌堆叠，3 秒翻一张 */ .v05-rotator{display:flex;flex-direction:column;min-height:0;overflow:hidden} .v05-rotator>.card-header{padding:12px 16px 4px} .v05-rot-hint{font-size:11.5px;color:#8b98ab} .v05-rot-wrap{position:relative;flex:1;min-height:168px;margin:8px 14px 14px;perspective:900px} .v05-slide{position:absolute;inset:0;background:#fff;border:1px solid #e7eef8;border-radius:14px;padding:14px 16px; box-shadow:0 8px 20px rgba(22,44,74,.07);transition:transform .55s cubic-bezier(.22,.68,.32,1),opacity .55s ease;transform-origin:top center;will-change:transform} .v05-slide>div{display:flex;flex-direction:column;align-items:stretch;gap:8px;height:100%} .v05-slide .leader-body{display:flex;flex-direction:column;gap:4px} .v05-slide .leader-body strong{font-size:24px;line-height:1.15} .v05-slide .leader-meta{font-size:12px;color:#6b7a90} .v05-slide .stat-icon{width:34px;height:34px} .v05-slide .leader-strip{border:0;background:transparent;padding:0} .v05-slide .contribution-card{border:0;background:transparent;padding:0;width:100%} .v05-slide .contribution-bar{width:100%;height:16px} .v05-slide .contribution-bar span{font-size:10px;line-height:16px} /* v05 卡牌堆叠：用 grid 叠放，避免 absolute 定位在高卡片里被裁切 */ .v05-rot-wrap{display:grid !important;grid-template:1fr / 1fr;position:relative;gap:0} .v05-rot-wrap>.v05-slide{position:relative !important;inset:auto !important;grid-area:1 / 1;margin:0} .v05-slide-inner{display:flex;flex-direction:column;gap:8px;height:100%} /* v05 卡牌：填满、分级、居中 */ .v05-rot-wrap{display:grid !important;grid-template:1fr / 1fr;position:relative} .v05-rot-wrap>.v05-slide{position:relative !important;inset:auto !important;grid-area:1 / 1;margin:0; display:flex;flex-direction:column;justify-content:center;padding:20px 22px; background:#fff;border:1px solid #e7eef8;border-radius:16px;box-shadow:0 10px 26px rgba(22,44,74,.08)} .v05-count{position:absolute;top:12px;right:14px;font-size:11px;letter-spacing:.08em;color:#a9b6c8} .v05-slide-inner{display:flex;flex-direction:column;gap:6px;height:auto;justify-content:center} .v05-tile{gap:8px} .v05-tile .stat-icon{width:44px;height:44px;margin-bottom:6px} .v05-kicker{font-size:12.5px;letter-spacing:.06em;color:#7c8aa0} .v05-name{font-size:34px;line-height:1.1;font-weight:800;color:#14263f;letter-spacing:-.01em;word-break:break-word} .v05-meta{font-size:13px;color:#6b7a90;line-height:1.45} .v05-meta b{color:#14263f} .v05-contrib .v05-name{font-size:40px;color:#8a5a12} .v05-bar{display:flex;height:14px;border-radius:999px;overflow:hidden;margin-top:10px;width:100%} .v05-bar>span{display:flex;align-items:center;justify-content:center;font-size:10px;color:#fff;line-height:1} .v05-legend{display:flex;gap:14px;margin-top:8px;font-size:12px;color:#6b7a90;flex-wrap:wrap} .v05-legend i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:5px} /* v05 卡牌：再填满一档（撑开留白、名字自适应） */ .v05-rot-wrap>.v05-slide{padding:24px 24px 22px;justify-content:space-between} .v05-slide-inner{justify-content:center;gap:10px;flex:1} .v05-tile .stat-icon{width:52px;height:52px;border-radius:14px} .v05-name{font-size:clamp(28px,7.4vw,40px)} .v05-contrib .v05-name{font-size:clamp(30px,8vw,44px)} .v05-kicker{margin-top:2px} .v05-meta{margin-top:2px} /* v05 卡牌：名字不再按视口放大，防折行 */ .v05-name{font-size:30px;letter-spacing:-.02em;line-height:1.15} .v05-contrib .v05-name{font-size:36px} .v05-slide-inner{gap:8px} /* v05 卡牌：数字上色 */ .v05-hot{font-weight:800;font-variant-numeric:tabular-nums} .v05-hot.gold{color:#c2410c} .v05-hot.teal{color:#0f766e} .v05-hot.blue{color:#1d4ed8} .v05-meta{font-size:14px} .v05-meta .v05-hot{font-size:17px;margin-right:2px} /* v05 卡牌：数字按类型上色 */ .v05-meta b{font-weight:800;font-size:18px;font-variant-numeric:tabular-nums;margin-right:2px} .t-amber .v05-meta b{color:#c2410c} .t-violet .v05-meta b{color:#6d28d9} .t-blue .v05-meta b{color:#1d4ed8} .v05-contrib .v05-name{color:#b45309} /* v05 卡牌：标签居中放大成胶囊 */ .v05-tile,.v05-contrib{align-items:center;text-align:center} .v05-kicker{font-size:15px;font-weight:700;letter-spacing:.04em;padding:5px 14px;border-radius:999px; background:#f1f5fb;color:#44546b;margin-top:4px} .t-amber .v05-kicker{background:#fdf1e3;color:#b45309} .t-violet .v05-kicker{background:#f3eefc;color:#6d28d9} .t-blue .v05-kicker{background:#eaf0fd;color:#1d4ed8} .v05-contrib .v05-kicker{background:#fdf1e3;color:#b45309} .v05-name{text-align:center} .v05-meta{text-align:center} .v05-bar{width:100%} .v05-legend{justify-content:center} .v05-tile .stat-icon{margin:0 auto} /* v05 右栏榜单卡：头部与 tab 之间留出呼吸 */ .v05-tabs-card>.card-header{padding:16px 16px 12px;border-bottom:1px solid #eef3f9} .v05-tabs{display:flex;flex-wrap:wrap;gap:8px;padding:12px 14px 10px} .v05-tab{font-size:13px;line-height:1;padding:8px 13px;border-radius:999px; background:#f5f8fc;border:1px solid #e6edf7;color:#5f6d84;box-shadow:none} .v05-tab:hover{background:#eef3fb;color:#1b2b43} .v05-tab.is-active{background:#1b2b43;border-color:#1b2b43;color:#fff;box-shadow:0 4px 10px rgba(27,43,67,.18)} .v05-panel{padding:0 14px 12px} .v05-panel .growth-card .card-sub{display:none} /* v05 tab 一行放下 */ .v05-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:12px 12px 10px;gap:6px} .v05-tabs::-webkit-scrollbar{display:none} .v05-tab{flex:0 0 auto;font-size:12.5px;padding:7px 11px} /* v05 榜单行：主数值 + 明细 */ .v05-list .repo-row.mini .row-numbers{align-items:flex-end;gap:1px;min-width:96px} .v05-list .row-sub{font-size:11px;color:#93a1b5} .v05-list .row-meta{font-size:11px;color:#aab6c6;white-space:nowrap} /* v05 榜单行：明细单独一行 */ .v05-list .repo-info{min-width:0} .v05-list .repo-meta-line{display:block;margin-top:3px;font-size:11px;color:#a8b4c4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .v05-list .repo-summary{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* v05 视觉层：渐变与光泽 */ body{background: radial-gradient(1200px 520px at 12% -8%, #eef5ff 0%, rgba(238,245,255,0) 62%), radial-gradient(900px 480px at 88% 4%, #f3f7ff 0%, rgba(243,247,255,0) 60%), #f6f8fc} .annual-board{background:linear-gradient(180deg,#ffffff 0%,#fdfefe 42%,#fbfdff 100%)} /* 大数字渐变 */ .stat-tile strong{background:linear-gradient(180deg,#d99a2b 0%,#b06a08 100%);-webkit-background-clip:text;background-clip:text;color:transparent} /* tab：选中渐变，未选中带浅渐变底 */ .v05-tab{background:linear-gradient(180deg,#ffffff 0%,#f4f8ff 100%);border-color:#e3ecf8} .v05-tab.is-active{background:linear-gradient(135deg,#1b2b43 0%,#2f4a72 100%);border-color:transparent; box-shadow:0 6px 16px rgba(27,43,67,.22)} /* 标题圆点与卡头 */ .v05-tabs-card .heading-dot{background:linear-gradient(135deg,#2f6df6 0%,#3db79b 100%)} .card-heading h3{background:linear-gradient(180deg,#1b2b43 0%,#33465f 100%);-webkit-background-clip:text;background-clip:text;color:transparent} /* 本期之最卡：渐变底 + 渐变描边光 */ .v05-rot-wrap>.v05-slide{ background:linear-gradient(160deg,#ffffff 0%,#f7fbff 55%,#f2f8ff 100%); border:1px solid #e4eefa; box-shadow:0 12px 30px rgba(28,58,98,.10), inset 0 1px 0 #fff} .v05-tile .stat-icon{background:linear-gradient(160deg,#fff8ec 0%,#ffeccd 100%);box-shadow:inset 0 0 0 1px rgba(214,158,46,.18)} .t-violet .stat-icon{background:linear-gradient(160deg,#f7f2ff 0%,#ece2fd 100%);box-shadow:inset 0 0 0 1px rgba(109,40,217,.16)} .t-blue .stat-icon{background:linear-gradient(160deg,#f2f7ff 0%,#e3edfd 100%);box-shadow:inset 0 0 0 1px rgba(29,78,216,.16)} /* 名字与数字渐变 */ .v05-name{background:linear-gradient(180deg,#16263d 0%,#28405d 100%);-webkit-background-clip:text;background-clip:text;color:transparent} .v05-meta b{background:linear-gradient(180deg,#e0761f 0%,#b45309 100%);-webkit-background-clip:text;background-clip:text;color:transparent} .v05-contrib .v05-name{background:linear-gradient(135deg,#f0a63a 0%,#c2410c 100%);-webkit-background-clip:text;background-clip:text;color:transparent} /* 贡献条渐变 */ .v05-bar{background:#eef3fa;box-shadow:inset 0 1px 2px rgba(20,40,70,.06)} .v05-bar>span:first-child{background:linear-gradient(90deg,#7aa2ff 0%,#5f86f0 100%)} .v05-bar>span:last-child{background:linear-gradient(90deg,#46c9ac 0%,#2fa88d 100%)} /* v05 卡牌可下钻 */ .v05-slide-inner{text-decoration:none;color:inherit;cursor:pointer} a.v05-slide-inner:hover .v05-name{filter:brightness(1.06)} a.v05-slide-inner:focus-visible{outline:2px solid #2f6df6;outline-offset:6px;border-radius:12px} /* 两栏收口：左栏多排行，右栏卡片定高 */ .v05-aside{grid-template-rows:auto minmax(240px,1fr) !important;align-content:stretch} .home-lead-grid{align-items:stretch} .v05-tabs-card{height:auto} .v05-rotator{height:auto;display:flex;flex-direction:column} .v05-rotator .v05-rot-wrap{flex:1;min-height:0} /* 左栏双榜行收紧（最终口径） */ .dual-rankings .repo-row.mini{padding:6px 18px} .dual-rankings .repo-name{font-size:14px;line-height:1.35} .dual-rankings .repo-summary{font-size:11.5px;line-height:1.35;margin-top:1px} .dual-rankings .repo-meta{font-size:11px;line-height:1.3;margin-top:2px} .dual-rankings .row-numbers strong{font-size:13.5px} .dual-rankings .row-numbers span{font-size:11px} /* 左 Star / 右 Fork：横向渐变头 + 淡色洗底 */ .dual-rankings .dual-column{position:relative;background:#fff} .dual-rankings .dual-column[data-sort="star_gain"] header{ background:linear-gradient(90deg,#fdf1de 0%,#fffaf3 55%,#ffffff 100%); border-bottom:1px solid #f6e6cd} .dual-rankings .dual-column[data-sort="fork_gain"] header{ background:linear-gradient(90deg,#e6f7f1 0%,#f5fdfa 55%,#ffffff 100%); border-bottom:1px solid #d9f0e8} .dual-rankings .dual-column::before{content:"";position:absolute;left:0;right:0;top:0;height:3px} .dual-rankings .dual-column[data-sort="star_gain"]::before{background:linear-gradient(90deg,#e8a33d 0%,#f3c979 45%,rgba(243,201,121,0) 100%)} .dual-rankings .dual-column[data-sort="fork_gain"]::before{background:linear-gradient(90deg,#2fa88d 0%,#67c9b3 45%,rgba(103,201,179,0) 100%)} .dual-rankings .dual-column[data-sort="star_gain"] .repo-row.mini:nth-child(even){background:linear-gradient(90deg,#fffdf9 0%,#fff 60%)} .dual-rankings .dual-column[data-sort="fork_gain"] .repo-row.mini:nth-child(even){background:linear-gradient(90deg,#fafffd 0%,#fff 60%)} /* 主指标亮、副指标灰 */ .pair-number .pair-label{color:#a9b6c6} .pair-number strong{color:#8f9eb2;font-weight:700} .pair-number small{color:#b3bfcf} .pair-number.primary-pair .pair-label{color:#1b2b43;font-weight:700} .pair-number.primary-pair strong{color:#b45309;font-weight:800} .dual-column[data-sort="fork_gain"] .pair-number.primary-pair strong{color:#0f766e} .dual-column[data-sort="fork_gain"] .pair-number.primary-pair .pair-label{color:#0f766e} .dual-column[data-sort="fork_gain"] .pair-number:not(.primary-pair) strong{color:#93a3b7} /* 主指标亮、副指标灰（强制覆盖行内数字色） */ .dual-row .pair-number:not(.primary-pair) strong{color:#93a3b7 !important;font-weight:700 !important} .dual-row .pair-number:not(.primary-pair) .pair-label{color:#b0bdcb !important} .dual-row .pair-number:not(.primary-pair) small{color:#bcc7d4 !important} .dual-row .pair-number.primary-pair strong{color:#b45309 !important;font-weight:800 !important;font-size:15px !important} .dual-row .pair-number.primary-pair .pair-label{color:#8a5a12 !important;font-weight:700 !important} .dual-column[data-sort="fork_gain"] .dual-row .pair-number.primary-pair strong{color:#0f766e !important} .dual-column[data-sort="fork_gain"] .dual-row .pair-number.primary-pair .pair-label{color:#0f766e !important} /* 头部与四格统计：收紧纵向占用 */ .annual-header{padding:14px 20px 8px !important} .annual-header h1{font-size:26px !important;line-height:1.15} .period-bar{padding:0 20px 6px !important} .period-bar button,.period-bar .period-btn{padding:5px 12px !important;font-size:12.5px !important} .period-bar>div,.period-bar .period-track{min-height:34px !important} .stat-strip{padding:10px 16px !important;margin-top:2px !important} .stat-tile{padding:4px 10px !important;gap:10px !important} .stat-tile .stat-icon{width:32px !important;height:32px !important;border-radius:10px !important} .stat-tile .stat-label{font-size:11.5px !important} .stat-tile strong{font-size:30px !important;line-height:1.05 !important} .stat-strip .stat-tile strong{font-size:30px !important} /* 四格统计再收一档 */ .stat-strip{padding:8px 14px !important} .stat-tile strong,.stat-strip .stat-tile strong{font-size:26px !important} .stat-tile .stat-icon{width:28px !important;height:28px !important;border-radius:9px !important} /* 右栏榜单：序号 + 前三名奖牌感 */ .v05-list{counter-reset:v05rank} .v05-list .repo-row{counter-increment:v05rank;border-radius:10px} .v05-list .repo-rank{display:flex;align-items:center;justify-content:center;flex:0 0 auto; width:22px;height:22px;border-radius:7px;background:#f1f5fb;color:#7d8ea6; font-size:11px;font-weight:700;font-variant-numeric:tabular-nums} .v05-list .repo-rank::before{content:counter(v05rank,decimal-leading-zero)} .v05-list .repo-row:nth-child(1){background:linear-gradient(90deg,#fff8ea 0%,#fffdf8 55%,#fff 100%)} .v05-list .repo-row:nth-child(1) .repo-rank{background:linear-gradient(135deg,#ffd98a 0%,#eaa63c 100%);color:#5c3a05;box-shadow:0 2px 6px rgba(214,158,46,.35)} .v05-list .repo-row:nth-child(1) .repo-name{font-size:15px;font-weight:800} .v05-list .repo-row:nth-child(2){background:linear-gradient(90deg,#f7f9fc 0%,#fcfdff 55%,#fff 100%)} .v05-list .repo-row:nth-child(2) .repo-rank{background:linear-gradient(135deg,#e6ecf5 0%,#c3cfdf 100%);color:#3d4f66} .v05-list .repo-row:nth-child(3){background:linear-gradient(90deg,#fdf6f1 0%,#fffbf8 55%,#fff 100%)} .v05-list .repo-row:nth-child(3) .repo-rank{background:linear-gradient(135deg,#f3dcc6 0%,#d9a97b 100%);color:#5a3418} .v05-list .repo-row:nth-child(-n+3) .row-numbers strong{font-size:15px} /* 本期之最：卡面装饰底纹 */ .v05-rot-wrap>.v05-slide{overflow:hidden} .v05-rot-wrap>.v05-slide::before{content:"";position:absolute;right:-70px;top:-80px;width:240px;height:240px;border-radius:50%; background:radial-gradient(circle at 50% 50%,rgba(120,164,255,.16) 0%,rgba(120,164,255,0) 68%);pointer-events:none} .v05-rot-wrap>.v05-slide::after{content:"";position:absolute;left:-60px;bottom:-90px;width:220px;height:220px;border-radius:50%; background:radial-gradient(circle at 50% 50%,rgba(61,183,155,.14) 0%,rgba(61,183,155,0) 68%);pointer-events:none} .v05-slide-inner{position:relative;z-index:1} /* 整页：极淡的点阵纹理 */ body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0; background-image:radial-gradient(rgba(120,150,190,.10) 1px,transparent 1px); background-size:22px 22px; -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 46%)} /* ============================================================ v1.5.0 氛围层：GitHub 分支图 + 沿线走动的发光圆点 语义是「提交正在分支上流动」，与站点主题一致，不是随机装饰。 线极淡、点发光带拖尾；永远在内容之下且不拦截交互。 ============================================================ */ .ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden} .ambient-graph{position:absolute;width:560px;height:420px;overflow:visible} .ambient-graph.is-left{left:-140px;top:120px} .ambient-graph.is-right{right:-150px;bottom:40px;width:620px;height:465px} /* 静态分支线：淡到只作肌理 */ .ag-lines{opacity:.16} .ag-nodes circle{fill:#3568f7;opacity:.2} .ag-grid rect{fill:#0eaa87;opacity:.13} .ag-star{fill:#df8d22;opacity:.28} /* 拖尾流光：同一条路径上跑一段虚线，跟着圆点方向流动 */ .ag-trail{fill:none;stroke-dasharray:54 1000;opacity:.5; animation:agTrail 7s linear infinite} .ag-trail.t1{animation-duration:7s} .ag-trail.t2{animation-duration:5.5s;animation-delay:1.2s} .ag-trail.t3{animation-duration:6.5s;animation-delay:2.4s} .ag-trail.t4{animation-duration:8s;animation-delay:.6s} .ag-trail.t5{animation-duration:6s;animation-delay:3.1s} @keyframes agTrail{from{stroke-dashoffset:1054}to{stroke-dashoffset:0}} /* 走动的圆点：白心 + 青绿光晕，呼吸式明暗 */ .ag-runner{fill:#eafff8} .ag-runner.r1{fill:#7ff0cd} .ag-runner.r2{fill:#9dc2ff} .ag-runner.r4{fill:#7ff0cd} .ag-runner.r5{fill:#ffd479} .ag-runners{opacity:.85;animation:agRunnerBreath 3.4s ease-in-out infinite} @keyframes agRunnerBreath{0%,100%{opacity:.55}50%{opacity:.95}} /* 节点被「提交」经过时的轻微脉冲，让静态图也有生命 */ .ag-nodes{animation:agNodePulse 5.2s ease-in-out infinite} @keyframes agNodePulse{0%,100%{opacity:.75}50%{opacity:1}} [data-theme="dark"] .ag-lines{opacity:.26} [data-theme="dark"] .ag-nodes circle{fill:#8fb0ff;opacity:.3} [data-theme="dark"] .ag-grid rect{fill:#4fd1b3;opacity:.2} [data-theme="dark"] .ag-star{opacity:.4} [data-theme="dark"] .ag-trail{opacity:.6} [data-theme="dark"] .ag-runners{opacity:1} @media (max-width:1400px){ .ambient-graph{width:440px;height:330px} .ambient-graph.is-left{left:-150px} .ambient-graph.is-right{right:-160px;width:470px;height:352px} .ag-lines{opacity:.12} } @media (max-width:1100px){.ambient{display:none}} /* 减少动效：圆点停在起点、拖尾静止，图形仍在但不再运动 */ @media (prefers-reduced-motion:reduce){ .ag-trail,.ag-runners,.ag-nodes{animation:none} .ag-trail{stroke-dasharray:0 1000;opacity:0} .ag-runners{opacity:.5} } /* 底图与点阵都在 z:0 的固定层；内容三块抬到 z:1， 保证纹理永远压在卡片/文字之下，而不是浮在内容上面。 */ .site-header,.site-footer,.container{position:relative;z-index:1} .app{position:relative;z-index:1} /* ===== 顶部推广轮播 ===== 投放由 config/ads.json 决定，这里只负责呈现。 卡片有真实落地页时才可点，并给出明确的悬停/按压反馈； 控件（暂停、指示器、计数）走站点自己的视觉语言，不用浏览器默认。 */ .v05-banner{position:relative;margin:6px 0 4px} .v05-banner-view{border-radius:16px;border:1px solid #e7eef8; box-shadow:0 10px 26px rgba(22,44,74,.08)} /* v1.3.0 轨道自己就是滚动容器：原生惯性 + 吸附到每张卡。 mandatory 保证停稳时一定压在某张上，指示器与播报才能据此判定。 横向滚动条隐藏（这是轮播不是列表，指示器已表达位置）， 但保留可滚动性与键盘可达，不影响其它区域的自绘滚动条。 */ .v05-banner-track{display:flex;width:100%;overflow-x:auto;overflow-y:hidden; scroll-snap-type:x mandatory;overscroll-behavior-x:contain;touch-action:pan-x; scrollbar-width:none;-ms-overflow-style:none;border-radius:16px} .v05-banner-track::-webkit-scrollbar{height:0;width:0} .v05-banner-track:focus-visible{outline:3px solid var(--blue,#3568f7);outline-offset:2px} @media (prefers-reduced-motion:no-preference){.v05-banner-track{scroll-behavior:smooth}} .v05-banner-slide{flex:0 0 100%;min-height:124px;display:flex;align-items:center; justify-content:space-between;gap:18px;padding:20px 26px;text-decoration:none; color:#fff;position:relative;overflow:hidden;background:var(--ad-bg);isolation:isolate; scroll-snap-align:center;scroll-snap-stop:always} /* 光晕层：跟着每条自己的强调色走，不是所有卡片同一团白光 */ .v05-banner-slide .ad-mesh{position:absolute;inset:0;z-index:-1;pointer-events:none; background: radial-gradient(58% 120% at 88% -20%,color-mix(in srgb,var(--ad-accent) 42%,transparent) 0%,transparent 68%), radial-gradient(46% 110% at 6% 120%,color-mix(in srgb,var(--ad-accent) 22%,transparent) 0%,transparent 70%)} .v05-banner-slide::after{content:"";position:absolute;right:-40px;top:-60px;width:260px;height:260px; border-radius:50%;z-index:-1;pointer-events:none; background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.20) 0%,rgba(255,255,255,0) 70%)} .v05-banner-slide .ad-body{display:flex;flex-direction:column;gap:6px;min-width:0} .v05-banner-k{display:inline-flex;align-items:center;gap:7px;font-size:11.5px; letter-spacing:.12em;opacity:.9} .v05-banner-k .ad-tag{font-style:normal;letter-spacing:.06em;font-size:9.5px;font-weight:800; padding:1px 6px;border-radius:4px;background:rgba(255,255,255,.22); border:1px solid rgba(255,255,255,.3)} .v05-banner-slide strong{font-size:24px;font-weight:800;letter-spacing:-.01em;line-height:1.2} .v05-banner-s{font-size:12.5px;opacity:.82} /* 可点卡片：整块命中，箭头随悬停前移，按压回弹 */ .v05-banner-slide.is-link{cursor:pointer;transition:filter .2s ease} .v05-banner-slide.is-link:hover{filter:brightness(1.07)} .v05-banner-slide.is-link:active{filter:brightness(.96)} .v05-banner-slide.is-link:focus-visible{outline:3px solid var(--ad-accent);outline-offset:-3px} .ad-cta{display:inline-flex;align-items:center;gap:6px;flex-shrink:0; padding:8px 15px;border-radius:999px;font-size:12.5px;font-weight:750;white-space:nowrap; background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.34); backdrop-filter:blur(6px);transition:background .2s ease,transform .2s ease,gap .2s ease} .ad-cta .icon{width:13px;height:13px;stroke-width:2.2} .v05-banner-slide.is-link:hover .ad-cta{background:rgba(255,255,255,.26);gap:9px;transform:translateX(2px)} /* 控件条：暂停 + 指示器 + 计数，常驻可见 */ .ad-bar{display:flex;align-items:center;gap:10px;margin-top:8px;padding:0 2px} .ad-play{width:24px;height:24px;flex-shrink:0;display:grid;place-items:center; border-radius:7px;border:1px solid var(--hairline,#e3eaf4);background:var(--surface,#fff); cursor:pointer;transition:border-color .18s ease,background .18s ease} .ad-play:hover{border-color:var(--blue,#3568f7);background:#f4f8ff} .ad-play:focus-visible{outline:2px solid var(--blue,#3568f7);outline-offset:2px} .ad-play-ic{position:relative;width:9px;height:10px;display:block} /* 播放中显示「暂停」双竖条；已暂停显示「播放」三角 */ .ad-play-ic::before,.ad-play-ic::after{content:"";position:absolute;top:0;width:3px;height:10px; border-radius:1px;background:var(--text-2,#5d6d84);transition:.18s ease} .ad-play-ic::before{left:0} .ad-play-ic::after{right:0} .v05-banner.is-paused .ad-play-ic::before,.ad-play[aria-pressed="true"] .ad-play-ic::before{ left:1px;width:0;height:0;top:0;border-left:8px solid var(--text-2,#5d6d84); border-top:5px solid transparent;border-bottom:5px solid transparent;background:none;border-radius:0} .ad-play[aria-pressed="true"] .ad-play-ic::after{opacity:0} .v05-banner-dots{display:flex;align-items:center;gap:6px} .v05-banner-dots button{position:relative;width:9px;height:9px;border-radius:999px;border:0;padding:0; cursor:pointer;background:color-mix(in srgb,var(--blue,#3568f7) 22%,transparent);overflow:hidden; transition:width .3s cubic-bezier(.22,.68,.32,1),background .3s ease} .v05-banner-dots button:hover{background:color-mix(in srgb,var(--blue,#3568f7) 42%,transparent)} .v05-banner-dots button:focus-visible{outline:2px solid var(--blue,#3568f7);outline-offset:2px} .v05-banner-dots button.on{width:30px;background:color-mix(in srgb,var(--blue,#3568f7) 20%,transparent)} /* 当前指示器内跑一条进度，让人知道还有多久换下一张 */ .v05-banner-dots button i{position:absolute;left:0;top:0;bottom:0;width:0; background:var(--blue,#3568f7);border-radius:999px} .v05-banner-dots button.on i{animation:adFill var(--dur,6000ms) linear forwards} .v05-banner.is-paused .v05-banner-dots button.on i{animation-play-state:paused} @keyframes adFill{from{width:0}to{width:100%}} .ad-count{margin-left:auto;font-size:11px;color:var(--muted,#5f6d84);font-variant-numeric:tabular-nums} .ad-count b{color:var(--text-2,#5d6d84);font-weight:750} .v05-banner.is-single .v05-banner-view{border-radius:16px} /* 状态播报区：视觉上隐藏但留在无障碍树里 */ .visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0; overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0} /* 页面切到后台 / 广告区离屏：停掉插画漂移，省电也少占 CPU */ .v05-banner.is-idle .ad-art-ink,.v05-banner.is-idle .ad-art-haze{animation-play-state:paused} @media (prefers-reduced-motion:reduce){ .v05-banner-track{scroll-behavior:auto} .v05-banner-dots button.on i{animation:none;width:100%} } @media(max-width:700px){ .v05-banner-slide{min-height:112px;padding:16px 18px;gap:12px} .v05-banner-slide strong{font-size:19px} .v05-banner-s{font-size:11.5px} .ad-cta{padding:7px 12px;font-size:11.5px} } @media(max-width:430px){ .v05-banner-slide{flex-direction:column;align-items:flex-start;justify-content:center} .ad-cta{align-self:flex-start} } /* v05 暗色适配 */ [data-theme="dark"] body{background:var(--bg)} [data-theme="dark"] body::before{background-image:radial-gradient(rgba(120,150,190,.14) 1px,transparent 1px);opacity:.5} [data-theme="dark"] .annual-board{background:linear-gradient(180deg,var(--surface) 0%,var(--surface) 100%);border-color:var(--line)} [data-theme="dark"] .card-heading h3, [data-theme="dark"] .annual-header h1{background:none;-webkit-text-fill-color:var(--text);color:var(--text)} [data-theme="dark"] .stat-tile strong{background:none;-webkit-text-fill-color:#e0a13a;color:#e0a13a} [data-theme="dark"] .v05-tabs-card{background:var(--surface);border-color:var(--line)} [data-theme="dark"] .v05-tabs-card>.card-header{border-bottom-color:var(--line)} [data-theme="dark"] .v05-tab{background:var(--surface-2);border-color:var(--line);color:var(--text-2)} [data-theme="dark"] .v05-tab:hover{background:var(--surface-3);color:var(--text)} [data-theme="dark"] .v05-tab.is-active{background:linear-gradient(135deg,#2f4a72 0%,#3f6390 100%);border-color:transparent;color:#fff} [data-theme="dark"] .v05-list .repo-row{background:transparent} [data-theme="dark"] .v05-list .repo-row:hover{background:var(--surface-2)} [data-theme="dark"] .v05-list .repo-row:nth-child(1){background:linear-gradient(90deg,rgba(224,161,58,.16) 0%,rgba(224,161,58,0) 70%)} [data-theme="dark"] .v05-list .repo-row:nth-child(2){background:linear-gradient(90deg,rgba(150,170,195,.12) 0%,rgba(150,170,195,0) 70%)} [data-theme="dark"] .v05-list .repo-row:nth-child(3){background:linear-gradient(90deg,rgba(200,140,95,.14) 0%,rgba(200,140,95,0) 70%)} [data-theme="dark"] .v05-list .repo-rank{background:var(--surface-3);color:var(--text-2)} [data-theme="dark"] .v05-list .repo-name{color:var(--text)} [data-theme="dark"] .v05-list .repo-summary, [data-theme="dark"] .v05-list .repo-meta-line{color:var(--muted)} [data-theme="dark"] .v05-list .row-sub{color:var(--muted)} [data-theme="dark"] .v05-list .pair-number:not(.primary-pair) strong, [data-theme="dark"] .v05-list .row-numbers strong{color:#9fb0c6} [data-theme="dark"] .v05-rot-wrap>.v05-slide{background:linear-gradient(160deg,var(--surface-2) 0%,var(--surface) 100%);border-color:var(--line);box-shadow:0 12px 30px rgba(0,0,0,.35)} [data-theme="dark"] .v05-name{background:none;-webkit-text-fill-color:var(--text);color:var(--text)} [data-theme="dark"] .v05-contrib .v05-name{background:none;-webkit-text-fill-color:#e0a13a;color:#e0a13a} [data-theme="dark"] .v05-meta{color:var(--text-2)} [data-theme="dark"] .v05-meta b{background:none;-webkit-text-fill-color:#e0a13a;color:#e0a13a} [data-theme="dark"] .v05-kicker{background:var(--surface-3);color:var(--text-2)} [data-theme="dark"] .v05-count{color:var(--muted)} [data-theme="dark"] .v05-bar{background:var(--surface-3)} [data-theme="dark"] .v05-legend{color:var(--muted)} [data-theme="dark"] .dual-rankings .dual-column{background:var(--surface)} [data-theme="dark"] .dual-rankings .dual-column[data-sort="star_gain"] header{background:linear-gradient(90deg,rgba(232,163,61,.16) 0%,rgba(232,163,61,0) 65%);border-bottom-color:var(--line)} [data-theme="dark"] .dual-rankings .dual-column[data-sort="fork_gain"] header{background:linear-gradient(90deg,rgba(47,168,141,.16) 0%,rgba(47,168,141,0) 65%);border-bottom-color:var(--line)} [data-theme="dark"] .dual-rankings .repo-row.mini{background:transparent} [data-theme="dark"] .dual-rankings .repo-name{color:var(--text)} [data-theme="dark"] .dual-rankings .repo-summary, [data-theme="dark"] .dual-rankings .dual-author{color:var(--muted)} /* 账号榜：两栏 + 前三名卡牌 */ .accounts-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:18px;align-items:start} .accounts-side{position:sticky;top:16px} .account-podium{padding:0 0 6px} .account-podium .card-header{padding:14px 16px 10px;border-bottom:1px solid var(--line,#eef3f9)} .account-podium .card-heading h3{font-size:15px} .account-podium .subtle{font-size:11.5px;color:#93a1b5} .podium-card{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"rank avatar" "name name" "sub sub" "stats stats"; gap:6px 10px;padding:14px 16px;text-decoration:none;color:inherit;border-bottom:1px solid #f2f5f9;position:relative} .podium-card:last-child{border-bottom:0} .podium-rank{grid-area:rank;font-size:11px;font-weight:800;color:#a9945e} .podium-card .avatar{grid-area:avatar;justify-self:start} .podium-name{grid-area:name;font-size:16px;font-weight:800;color:#16263d} .podium-sub{grid-area:sub;font-size:11.5px;color:#8493a8} .podium-stats{grid-area:stats;display:flex;gap:8px;margin-top:4px} .podium-stats>div{flex:1;background:#f6f9fd;border:1px solid #eaf1fa;border-radius:9px;padding:6px 8px;display:flex;flex-direction:column;gap:1px} .podium-stats>div>span{font-size:10.5px;color:#93a1b5} .podium-stats>div>b{font-size:14px;font-weight:800;color:#4b5c72} .podium-stats>div>small{font-size:10.5px;color:#a8b4c4} .podium-stats>div.on{background:linear-gradient(160deg,#fff7ea,#fdf0dd);border-color:#f6e1c2} .podium-stats>div.on>b{color:#b45309} .podium-card.gold{background:linear-gradient(180deg,#fffaf0 0%,#fff 60%)} .podium-card.silver{background:linear-gradient(180deg,#f8fafd 0%,#fff 60%)} .podium-card.bronze{background:linear-gradient(180deg,#fdf7f2 0%,#fff 60%)} .podium-card.gold .podium-rank{color:#b45309} .podium-card.bronze .podium-rank{color:#a5673a} .owner-pairs{display:flex;gap:18px;margin-left:auto} @media(max-width:1100px){.accounts-grid{grid-template-columns:1fr}.accounts-side{position:static}} /* 暗色 */ [data-theme="dark"] .account-podium{background:var(--surface)} [data-theme="dark"] .podium-card{background:transparent;border-bottom-color:var(--line)} [data-theme="dark"] .podium-name{color:var(--text)} [data-theme="dark"] .podium-sub{color:var(--muted)} [data-theme="dark"] .podium-stats>div{background:var(--surface-2);border-color:var(--line)} [data-theme="dark"] .podium-stats>div>b{color:#c8d3e2} [data-theme="dark"] .podium-stats>div.on{background:rgba(224,161,58,.14);border-color:rgba(224,161,58,.3)} [data-theme="dark"] .podium-stats>div.on>b{color:#e0a13a} /* 账号行：主指标亮、副指标灰 */ .owner-row .pair-number:not(.primary-pair) strong{color:#93a3b7 !important;font-weight:700 !important} .owner-row .pair-number:not(.primary-pair) .pair-label{color:#b0bdcb !important} .owner-row .pair-number:not(.primary-pair) small{color:#bcc7d4 !important} .owner-row .pair-number.primary-pair strong{color:#b45309 !important;font-weight:800 !important} .owner-row .pair-number.primary-pair .pair-label{color:#8a5a12 !important} [data-theme="dark"] .owner-row .pair-number:not(.primary-pair) strong{color:#8b9cb3 !important} [data-theme="dark"] .owner-row .pair-number.primary-pair strong{color:#e0a13a !important} /* 账号榜：顶部统计条 */ .acc-stat{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:0;margin-bottom:14px;overflow:hidden} .acc-stat-cell{padding:14px 18px;border-right:1px solid #eef3f9;display:flex;flex-direction:column;gap:2px} .acc-stat-cell:last-child{border-right:0} .acc-stat-cell span{font-size:12px;color:#7b8a9e} .acc-stat-cell strong{font-size:24px;font-weight:800;letter-spacing:-.01em} .acc-stat-cell strong.pos{background:linear-gradient(180deg,#d99a2b,#b06a08);-webkit-background-clip:text;background-clip:text;color:transparent} /* 账号榜：行内进度条 */ .owner-row{position:relative} .owner-gauge{position:absolute;left:14px;right:14px;bottom:4px;height:3px;border-radius:2px;background:#f1f5fa;overflow:hidden} .owner-gauge i{display:block;height:100%;border-radius:2px;background:linear-gradient(90deg,#f0b64b,#b45309);transition:width .35s ease} .owner-row:nth-child(even) .owner-gauge{background:#eef3f9} [data-theme="dark"] .acc-stat-cell{border-right-color:#1c2a3c} [data-theme="dark"] .owner-gauge{background:#1b2737} [data-theme="dark"] .owner-gauge i{background:linear-gradient(90deg,#d9a04a,#8a5a12)} /* 账号榜：比例条改为整行底色填充 */ .owner-gauge{top:0;bottom:0;height:auto;border-radius:0;background:transparent;z-index:0;pointer-events:none} .owner-gauge i{height:100%;border-radius:0;opacity:.13;background:linear-gradient(90deg,#f6c76a,#c9761a)} .owner-row>*{position:relative;z-index:1} [data-theme="dark"] .owner-gauge i{opacity:.20;background:linear-gradient(90deg,#8a5a12,#d9a04a)} /* 账号行：成员项目合成曲线 */ .owner-spark{display:flex;align-items:center;margin-left:auto;margin-right:26px;opacity:.9} .owner-spark .sparkline{width:96px;height:30px} .owner-spark .sparkline polyline{stroke:#c9761a;stroke-width:2} [data-theme="dark"] .owner-spark .sparkline polyline{stroke:#e0a13a} /* 账号行：底部比例条（清晰版） */ .owner-gauge{top:auto;bottom:0;height:3px;background:#eef3f9} .owner-gauge i{opacity:1;border-radius:0 2px 2px 0;background:linear-gradient(90deg,#f3b64f,#b45309)} .owner-row{padding-bottom:10px} [data-theme="dark"] .owner-gauge{background:#1b2737} /* 修正：进度条必须是绝对定位 */ .owner-row{position:relative} .owner-row>*:not(.owner-gauge){position:relative;z-index:1} .owner-row>.owner-gauge{position:absolute;left:0;right:0;bottom:0;top:auto;height:3px;z-index:0} /* 趋势卡：Fork 用青绿，Star 保持蓝，切换一眼可辨 */ .chart-card svg[aria-label*="Fork"] polyline{stroke:#0f9d8a} .chart-card svg[aria-label*="Fork"] #chart-fill stop:first-child{stop-color:#0f9d8a} /* 行内「详情」入口 */ .row-detail{flex:0 0 auto;margin:0 10px 0 2px;padding:2px 8px;border:1px solid #e3ebf6;border-radius:999px;font-size:11.5px;line-height:1.5;color:#5f6d84;background:#f7faff;white-space:nowrap} .row-detail:hover{color:#1b2b43;border-color:#c9d8ee;background:#eef4fd} [data-theme="dark"] .row-detail{background:#16202e;border-color:#26364a;color:#a8b7ca} [data-theme="dark"] .row-detail:hover{background:#1c2a3c;color:#e6eef8} /* 详情入口贴右 */ .repo-row .row-detail{margin-left:auto;margin-right:12px} /* 行可点：名称走 GitHub，行体走详情 */ [data-detail]{cursor:pointer} .repo-row .repo-name{display:inline-flex;align-items:center;gap:6px;color:inherit;text-decoration:none} .repo-row .repo-name:hover{text-decoration:underline} /* 列表密度：项目榜行高收紧 */ .repo-row{padding:9px 14px} .repo-row .repo-name{font-size:14px} .repo-row .repo-summary{font-size:12px;line-height:1.45} .repo-row .repo-meta{font-size:11.5px} .repo-row .sparkline{width:70px;height:24px} /* 错误页：细节折叠 */ .error-detail-box{margin:10px 0 0;font-size:13px;color:#7b8a9e} .error-detail-box summary{cursor:pointer;color:#5f6d84} .error-detail-box .error-detail{margin:6px 0 0;font-size:12px;color:#93a3b7;word-break:break-all} /* 列表更紧一档 */ .repo-row{padding:7px 14px;gap:10px} .repo-row .repo-info{gap:1px} .repo-row .repo-name{font-size:13.5px;line-height:1.35} .repo-row .repo-summary{font-size:11.5px;line-height:1.4} .repo-row .repo-meta{font-size:11px;line-height:1.35;margin-top:1px} .repo-row .sparkline{width:62px;height:22px} /* 提高优先级：列表行内边距 */ .list-card .repo-row{padding:7px 16px;gap:10px} .list-card .repo-row .repo-info{gap:1px} .list-card .repo-row .repo-name{font-size:13.5px;line-height:1.3} .list-card .repo-row .repo-summary{font-size:11.5px;line-height:1.35} .list-card .repo-row .repo-meta{font-size:11px;line-height:1.3;margin-top:1px} /* 取消行最小高度，交给内容决定 */ .list-card .repo-row{min-height:0} /* 头部右侧统计 */ .head-stats{display:flex;gap:26px;align-items:flex-end} .head-stat{display:flex;flex-direction:column;gap:2px;text-align:right} .head-stat span{font-size:11.5px;color:#8d9aad} .head-stat strong{font-size:20px;font-weight:800;color:#1b2b43;font-variant-numeric:tabular-nums} .head-stat .pos{color:#c06f0c} .head-stat .pos-fork{color:#0f766e} [data-theme="dark"] .head-stat strong{color:#e8eef6} [data-theme="dark"] .head-stat .pos{color:#e0a13a} [data-theme="dark"] .head-stat .pos-fork{color:#3fbfae} /* 行内比例条，填充中段留白 */ .repo-row .row-meter{flex:1;min-width:60px;height:6px;border-radius:99px;background:#eef3f9;margin:0 20px;overflow:hidden} .repo-row .row-meter i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#f6d9a6,#c9761a)} [data-theme="dark"] .repo-row .row-meter{background:#1b2738} [data-theme="dark"] .repo-row .row-meter i{background:linear-gradient(90deg,#7a5312,#d9a04a)} @media (max-width:760px){.repo-row .row-meter{display:none}} /* 比例条吃满中段留白 */ .repo-row .repo-info{flex:0 1 340px} .repo-row .row-meter{flex:1 1 auto;margin:0 26px} /* 账号榜：右栏与左栏等高 */ .accounts-grid{align-items:stretch} .account-podium{display:flex;flex-direction:column;height:100%} .account-podium>.podium-list, .account-podium .podium{flex:1;display:flex;flex-direction:column;justify-content:space-between} /* 空数据提示：给个卡片，别整页留白 */ .data-empty{max-width:560px;margin:56px auto;background:#fff;border:1px solid #e8eef7;border-radius:18px;padding:52px 28px;text-align:center;box-shadow:0 10px 24px rgba(22,44,74,.05)} .data-empty h3{font-size:20px;margin:0 0 10px} .data-empty p{color:#7b8a9e;margin:0 0 20px} [data-theme="dark"] .data-empty{background:#141c28;border-color:#23303f} /* ===== 数据可信度栏（紧凑一行，不占第五张卡位） ===== */ .trust-bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:2px 0 10px;padding:0 2px;font-size:12px;color:#6b7a90;line-height:1.5} .trust-item{display:inline-flex;align-items:baseline;gap:5px;white-space:nowrap} .trust-k{color:#8b98ab} .trust-item b{color:#33475f;font-weight:700;font-variant-numeric:tabular-nums} .trust-sep{color:#d4dde9} .trust-state{padding:1px 8px;border-radius:999px;background:#eef3f9;color:#4a5f7a;font-weight:600} .trust-bar[data-trust="partial"] .trust-state{background:#fff6e5;color:#9a6512} .trust-bar[data-trust="no_baseline"] .trust-state{background:#fdeeee;color:#a33b3b} .trust-bar[data-trust="stale"] .trust-state{background:#fdeeee;color:#a33b3b} .trust-bar[data-trust="complete"] .trust-state{background:#eaf7f1;color:#1c7a58} .trust-scope{margin-left:auto;color:#9aa7b8;font-size:11.5px} [data-theme="dark"] .trust-bar{color:#9db0c6} [data-theme="dark"] .trust-item b{color:#e3ecf7} [data-theme="dark"] .trust-state{background:#22303f;color:#c3d2e4} @media (max-width:640px){ .trust-bar{gap:4px 8px;font-size:11.5px} .trust-scope{margin-left:0;width:100%} .trust-sep{display:none} } /* 窄屏不得横向溢出：容器裁切 + 轨道收敛 */ html,body{overflow-x:clip} .v05-banner{overflow:hidden} .v05-tabs-card{overflow:hidden} .v05-panels,.v05-panel,.v05-list{min-width:0} .v05-panel{max-width:100%} .v05-list .repo-row{min-width:0} @media (max-width:640px){ .v05-banner-slide{min-width:100%;max-width:100%} .v05-banner-track{width:100%} .v05-list .row-numbers{max-width:104px} .trust-bar{row-gap:6px} .trust-scope{margin-left:0} } /* 数据过期独立标注，不覆盖覆盖度状态 */ .trust-stale{color:#b42318;font-weight:600} [data-theme="dark"] .trust-stale{color:#f97066} /* ============================================================ v0.6.8 视觉呼吸层 目标：在不改结构与口径的前提下，增加留白、层次与质感。 全部为追加覆盖，不删除既有规则；深浅色各自适配。 ============================================================ */ /* ---- 1. 页面底色：从平灰改为极淡的双色氛围，给白卡一个可呼吸的场 ---- */ :root{ --page-glow-a:rgba(53,104,247,.055); --page-glow-b:rgba(14,170,135,.045); --card-lift:0 1px 2px rgba(20,38,68,.04),0 8px 24px -12px rgba(20,38,68,.10); --card-lift-hover:0 2px 6px rgba(20,38,68,.05),0 22px 48px -20px rgba(20,38,68,.20); --hairline:rgba(20,38,68,.07); --ease-out-soft:cubic-bezier(.22,.8,.3,1); } [data-theme="dark"]{ --page-glow-a:rgba(122,162,255,.07); --page-glow-b:rgba(63,191,174,.05); --card-lift:0 1px 2px rgba(0,0,0,.4),0 10px 30px -14px rgba(0,0,0,.55); --card-lift-hover:0 2px 8px rgba(0,0,0,.45),0 26px 56px -22px rgba(0,0,0,.7); --hairline:rgba(255,255,255,.07); } body{ background-image: radial-gradient(1100px 520px at 12% -8%,var(--page-glow-a),transparent 62%), radial-gradient(900px 460px at 92% 4%,var(--page-glow-b),transparent 60%); background-attachment:fixed; background-repeat:no-repeat; } /* ---- 2. 顶栏：悬浮玻璃感 + 滚动时收紧，始终可达 ---- */ .site-header{ position:sticky;top:0;z-index:30; background:color-mix(in srgb,var(--surface) 82%,transparent); backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid var(--hairline); box-shadow:0 1px 0 rgba(255,255,255,.6) inset; transition:height .28s var(--ease-out-soft),box-shadow .28s ease; } [data-theme="dark"] .site-header{ background:color-mix(in srgb,#0d1219 78%,transparent); box-shadow:0 1px 0 rgba(255,255,255,.04) inset; } .site-header.is-condensed{height:62px;box-shadow:0 6px 24px -14px rgba(20,38,68,.28)} .site-header.is-condensed .brand img{width:29px;height:29px} .site-header.is-condensed .brand{font-size:19px} .brand img,.brand{transition:width .28s var(--ease-out-soft),height .28s var(--ease-out-soft),font-size .28s var(--ease-out-soft)} .main-nav>a:after{transition:transform .24s var(--ease-out-soft),opacity .24s ease;transform-origin:center} .main-nav>a:not(.active):after{content:"";position:absolute;bottom:0;left:0;right:0;height:3px;border-radius:3px 3px 0 0;background:var(--blue);opacity:0;transform:scaleX(.4)} .main-nav>a:not(.active):hover:after{opacity:.28;transform:scaleX(1)} .search{transition:box-shadow .22s ease,border-color .22s ease,background .22s ease,width .28s var(--ease-out-soft)} .search:focus-within{border-color:color-mix(in srgb,var(--blue) 42%,transparent);box-shadow:0 0 0 4px color-mix(in srgb,var(--blue) 12%,transparent);background:var(--surface)} .tool-button{border-radius:9px;transition:background .2s ease,color .2s ease,transform .2s var(--ease-out-soft)} .tool-button:hover{background:color-mix(in srgb,var(--blue) 9%,transparent);color:var(--blue);transform:translateY(-1px)} .tool-button:active{transform:translateY(0) scale(.96)} /* ---- 3. 卡片：统一柔和抬升，边界更轻，悬停有回应 ---- */ .card,.stat-strip,.data-empty{box-shadow:var(--card-lift);border-color:var(--hairline)} .card{transition:box-shadow .3s var(--ease-out-soft),transform .3s var(--ease-out-soft),border-color .3s ease} .side-card:hover,.category-card:hover,.account-card:hover{transform:translateY(-3px);box-shadow:var(--card-lift-hover)} .category-card::before{opacity:.85;transition:opacity .3s ease} .category-card:hover::before{opacity:1} /* ---- 4. 呼吸感：区块之间的纵向节奏 ---- */ .home-lead-grid{padding-top:34px;gap:26px} .annual-header{padding:32px 30px 18px} .annual-board>.period-bar{padding:0 30px 20px} .annual-stats{margin:0 26px 22px} .annual-stats>div{padding:24px 20px} .dual-column>header{padding:22px 22px 14px} .dual-legend{padding:0 22px 12px} .dual-row{padding:16px 20px;min-height:96px} .section-title{margin:52px 0 20px} .category-grid{gap:26px} .category-card .card-header{padding:26px 24px 16px} .category-card .repo-row.mini{padding-top:13px;padding-bottom:13px} .side-card .card-header{padding:24px 24px 10px} .v05-aside{gap:18px} .container{padding-bottom:64px} .site-footer{margin-top:28px;padding:34px 0 44px} /* ---- 5. 榜首与三甲：让名次本身成为视觉锚点 ---- */ .dual-row:first-of-type{ background:linear-gradient(100deg,color-mix(in srgb,var(--gain) 9%,var(--surface)),var(--surface) 68%); box-shadow:inset 3px 0 0 color-mix(in srgb,var(--gain) 55%,transparent); } .dual-column:nth-child(2) .dual-row:first-of-type{ background:linear-gradient(100deg,color-mix(in srgb,var(--teal) 9%,var(--surface)),var(--surface) 68%); box-shadow:inset 3px 0 0 color-mix(in srgb,var(--teal) 55%,transparent); } [data-theme="dark"] .dual-row:first-of-type{background:linear-gradient(100deg,rgba(224,161,58,.13),transparent 68%)} [data-theme="dark"] .dual-column:nth-child(2) .dual-row:first-of-type{background:linear-gradient(100deg,rgba(63,191,174,.13),transparent 68%)} .rank-1{box-shadow:0 3px 10px -3px rgba(224,155,0,.5)} .dual-row .rank{transition:transform .22s var(--ease-out-soft)} .dual-row:hover .rank{transform:scale(1.08)} /* ---- 6. 行悬停：左侧色条滑入，替代整行变色的突兀 ---- */ .dual-row,.repo-row,.owner-row{position:relative} .dual-row::after,.list-card .repo-row::after{ content:"";position:absolute;left:0;top:12%;bottom:12%;width:3px;border-radius:0 3px 3px 0; background:linear-gradient(180deg,var(--blue),color-mix(in srgb,var(--teal) 70%,var(--blue))); opacity:0;transform:scaleY(.3);transform-origin:center; transition:opacity .22s ease,transform .22s var(--ease-out-soft);pointer-events:none; } .dual-row:hover::after,.list-card .repo-row:hover::after{opacity:1;transform:scaleY(1)} .dual-row:hover,.repo-row:hover,.owner-row:hover{background:color-mix(in srgb,var(--blue) 3.5%,var(--surface))} [data-theme="dark"] .dual-row:hover,[data-theme="dark"] .repo-row:hover,[data-theme="dark"] .owner-row:hover{background:rgba(122,162,255,.06)} /* ---- 7. 数字：等宽对齐 + 增量语义色更克制 ---- */ .row-numbers strong,.pair-number strong,.stat-strip strong,.annual-stats strong,.head-stat strong{font-feature-settings:"tnum" 1,"lnum" 1} .pair-number.primary-pair strong{letter-spacing:-.3px} .stat-strip strong,.annual-stats strong{background:linear-gradient(180deg,var(--text,#16233a),color-mix(in srgb,var(--text,#16233a) 72%,var(--muted)));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} [data-theme="dark"] .stat-strip strong,[data-theme="dark"] .annual-stats strong{background:linear-gradient(180deg,#f2f7ff,#b9c9de);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .stat-icon{transition:transform .26s var(--ease-out-soft),box-shadow .26s ease} .stat-tile:hover .stat-icon{transform:translateY(-2px) scale(1.05)} /* ---- 8. 周期与指标切换：胶囊滑动感 ---- */ .period-tabs{background:color-mix(in srgb,var(--blue) 6%,var(--surface-3,#f2f5fa));box-shadow:inset 0 1px 2px rgba(20,38,68,.05)} .period-tabs button{transition:color .2s ease,background .24s var(--ease-out-soft),box-shadow .24s ease,transform .2s var(--ease-out-soft)} .period-tabs button[aria-selected=true]{box-shadow:0 2px 8px -2px rgba(20,38,68,.18),0 0 0 1px rgba(20,38,68,.03)} .period-tabs button:active{transform:scale(.97)} .metric-tabs button,.rail-toggle button,.v05-tab{transition:color .2s ease,background .22s ease,border-color .22s ease,transform .18s var(--ease-out-soft)} .v05-tab:hover{border-color:color-mix(in srgb,var(--blue) 30%,transparent);color:var(--blue)} .v05-tab.is-active{box-shadow:0 4px 14px -6px rgba(27,43,67,.5)} .v05-tab:active{transform:scale(.97)} /* ---- 9. 可信度栏：从裸文字升级为轻量信息条 ---- */ .trust-bar{ margin:0 26px 18px;padding:11px 16px;border-radius:12px; background:color-mix(in srgb,var(--blue) 3.5%,var(--surface)); border:1px solid var(--hairline); } [data-theme="dark"] .trust-bar{background:rgba(122,162,255,.05)} .trust-state{box-shadow:0 1px 2px rgba(20,38,68,.06)} /* ---- 10. 横幅：细网格质感叠在每条自己的光晕之上，避免大色块发闷 ---- */ .v05-banner-view{border-color:var(--hairline);box-shadow:0 14px 36px -18px rgba(20,38,68,.35)} .v05-banner-slide::before{ content:"";position:absolute;inset:0;pointer-events:none;opacity:.45;z-index:-1; background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px); background-size:34px 34px; mask-image:radial-gradient(120% 100% at 80% 0%,#000,transparent 70%); -webkit-mask-image:radial-gradient(120% 100% at 80% 0%,#000,transparent 70%); } .v05-banner-slide strong{position:relative;text-shadow:0 2px 12px rgba(0,0,0,.22)} .v05-banner-k,.v05-banner-s{position:relative} [data-theme="dark"] .v05-banner-view{border-color:rgba(255,255,255,.08)} [data-theme="dark"] .ad-play{background:var(--surface-2,#1a2230);border-color:var(--line,#242e3d)} [data-theme="dark"] .ad-play:hover{background:#22304a;border-color:var(--accent,#7aa2ff)} [data-theme="dark"] .ad-play-ic::before,[data-theme="dark"] .ad-play-ic::after{background:var(--text-2,#a3b1c4)} [data-theme="dark"] .ad-play[aria-pressed="true"] .ad-play-ic::before{border-left-color:var(--text-2,#a3b1c4)} [data-theme="dark"] .ad-count{color:var(--muted,#77879c)} [data-theme="dark"] .ad-count b{color:var(--text-2,#a3b1c4)} /* ---- 11. 滚动条：用站点自己的配色，不用浏览器默认 ---- */ *{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--blue) 26%,transparent) transparent} ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{ background:color-mix(in srgb,var(--blue) 24%,transparent); border-radius:99px;border:3px solid transparent;background-clip:content-box; } ::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--blue) 44%,transparent);background-clip:content-box} [data-theme="dark"] ::-webkit-scrollbar-thumb{background:rgba(122,162,255,.28);background-clip:content-box} [data-theme="dark"] ::-webkit-scrollbar-thumb:hover{background:rgba(122,162,255,.5);background-clip:content-box} /* ---- 12. 入场：分区错峰浮现，滚动到才播 ---- */ .reveal-on-scroll{opacity:0;transform:translateY(16px)} .reveal-on-scroll.is-revealed{opacity:1;transform:none;transition:opacity .6s var(--ease-out-soft),transform .6s var(--ease-out-soft)} .category-grid>.category-card{opacity:0;transform:translateY(14px)} .category-grid.is-revealed>.category-card{opacity:1;transform:none;transition:opacity .55s var(--ease-out-soft),transform .55s var(--ease-out-soft),box-shadow .3s ease} .category-grid.is-revealed>.category-card:nth-child(1){transition-delay:.02s} .category-grid.is-revealed>.category-card:nth-child(2){transition-delay:.07s} .category-grid.is-revealed>.category-card:nth-child(3){transition-delay:.12s} .category-grid.is-revealed>.category-card:nth-child(4){transition-delay:.17s} .category-grid.is-revealed>.category-card:nth-child(5){transition-delay:.22s} .category-grid.is-revealed>.category-card:nth-child(6){transition-delay:.27s} .category-grid.is-revealed>.category-card:nth-child(7){transition-delay:.32s} .category-grid.is-revealed>.category-card:nth-child(8){transition-delay:.37s} .bar-track i{animation:growX .9s var(--ease-out-soft) both} .sparkline polyline{stroke-dasharray:240;stroke-dashoffset:240;animation:drawLine 1.1s var(--ease-out-soft) .1s forwards} /* ---- 13. 骨架屏：微光扫过，替代静态灰块 ---- */ .sk-bar,.sk-block{position:relative;overflow:hidden;background:var(--surface-3,#eef2f8)} .sk-bar::after,.sk-block::after{ content:"";position:absolute;inset:0;transform:translateX(-100%); background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent); animation:skSweep 1.5s ease-in-out infinite; } [data-theme="dark"] .sk-bar::after,[data-theme="dark"] .sk-block::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent)} @keyframes skSweep{to{transform:translateX(100%)}} /* ---- 14. 按钮与分页：触感反馈 ---- */ .primary-button{box-shadow:0 6px 18px -8px color-mix(in srgb,var(--blue) 70%,transparent);transition:background .2s ease,transform .2s var(--ease-out-soft),box-shadow .2s ease} .primary-button:hover{transform:translateY(-1px);box-shadow:0 10px 24px -8px color-mix(in srgb,var(--blue) 75%,transparent)} .primary-button:active{transform:translateY(0) scale(.98)} .pager a{transition:color .2s ease,border-color .2s ease,background .2s ease,transform .18s var(--ease-out-soft)} .pager a:hover{transform:translateY(-1px)} .follow{transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s var(--ease-out-soft)} .follow:hover{transform:translateY(-1px)} .follow:active{transform:scale(.95)} .more:hover{gap:5px} /* ---- 15. 详情页：主标题区更有分量 ---- */ .detail-hero{padding:36px 34px;background:linear-gradient(180deg,color-mix(in srgb,var(--blue) 3%,var(--surface)),var(--surface) 70%)} [data-theme="dark"] .detail-hero{background:linear-gradient(180deg,rgba(122,162,255,.05),transparent 70%)} .detail-stats>div{box-shadow:var(--card-lift);border-color:var(--hairline);transition:transform .26s var(--ease-out-soft),box-shadow .26s ease} .detail-stats>div:hover{transform:translateY(-2px);box-shadow:var(--card-lift-hover)} .project-symbol{box-shadow:0 8px 22px -12px color-mix(in srgb,var(--accent,#3568f7) 60%,transparent)} /* ---- 16. 窄屏收敛：呼吸感按比例回收，不挤压内容 ---- */ @media(max-width:1250px){ .home-lead-grid{padding-top:26px;gap:20px} .annual-header{padding:26px 22px 16px} .annual-board>.period-bar{padding:0 22px 16px} .annual-stats{margin:0 18px 18px} .trust-bar{margin:0 18px 16px} .section-title{margin:40px 0 16px} .category-grid{gap:20px} } @media(max-width:700px){ .site-header{position:sticky} .site-header.is-condensed{height:104px} .home-lead-grid{padding-top:18px;gap:16px} .annual-header{padding:22px 17px 14px} .annual-board>.period-bar{padding:0 15px 14px} .annual-stats{margin:0 13px 15px} .annual-stats>div{padding:17px 13px} .dual-row{padding:15px 15px;min-height:92px} .trust-bar{margin:0 13px 14px;padding:10px 13px} .section-title{margin:32px 1px 14px} .category-grid{gap:16px} .category-card .card-header{padding:22px 19px 14px} .container{padding-bottom:40px} .detail-hero{padding:24px 19px} .v05-banner-view{border-radius:14px} } /* ---- 17. 尊重减少动效：全部动画与位移关闭 ---- */ @media(prefers-reduced-motion:reduce){ .reveal-on-scroll,.category-grid>.category-card{opacity:1!important;transform:none!important} .sparkline polyline{stroke-dashoffset:0!important;animation:none!important} .bar-track i{animation:none!important} .sk-bar::after,.sk-block::after{animation:none!important} .site-header,.brand,.brand img{transition:none!important} body{background-attachment:scroll} } /* ============================================================ v0.6.8b 截图复核后的缺陷修复 1) 深色下选中态与分隔线对比不足 2) 8 张分类卡在 3 列时末行留空 3) 数字渐变在部分环境可能不可读 → 回退实色 ============================================================ */ /* 深色：周期/指标选中态用实心强调，不再与未选中同色 */ [data-theme="dark"] .period-tabs{background:#101722;box-shadow:inset 0 1px 3px rgba(0,0,0,.55)} [data-theme="dark"] .period-tabs button{color:#8fa1b8} [data-theme="dark"] .period-tabs button[aria-selected=true]{ background:linear-gradient(180deg,#2b3d5c,#22314a); color:#dce8ff;font-weight:700; box-shadow:0 2px 10px -2px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.09); } [data-theme="dark"] .period-tabs button:hover:not([aria-selected=true]){color:#c6d6ee;background:rgba(122,162,255,.09)} [data-theme="dark"] .metric-tabs button.active,[data-theme="dark"] .rail-toggle button.active,[data-theme="dark"] .kind-tabs button.active{ background:#26364f;color:#dce8ff;box-shadow:inset 0 1px 0 rgba(255,255,255,.08); } [data-theme="dark"] .v05-tab{background:#18212e;border-color:#26313f;color:#93a5bd} [data-theme="dark"] .v05-tab.is-active{background:linear-gradient(180deg,#3a5488,#2c4270);border-color:#4a6ba8;color:#eaf1ff} /* 深色：行分隔线收细收暗，避免整页横线过亮 */ [data-theme="dark"] .dual-row,[data-theme="dark"] .repo-row,[data-theme="dark"] .owner-row{border-bottom-color:rgba(255,255,255,.045)} [data-theme="dark"] .dual-row+.dual-row,[data-theme="dark"] .repo-row+.repo-row{border-top-color:rgba(255,255,255,.045)} [data-theme="dark"] .dual-rankings,[data-theme="dark"] .dual-column+.dual-column{border-color:rgba(255,255,255,.06)} [data-theme="dark"] .dual-legend{border-bottom-color:rgba(255,255,255,.05)} [data-theme="dark"] .annual-stats,[data-theme="dark"] .stat-strip{border-color:rgba(255,255,255,.07)} [data-theme="dark"] .stat-strip>div+div:before{background:rgba(255,255,255,.07)} [data-theme="dark"] .lead-footer,[data-theme="dark"] .card-tail,[data-theme="dark"] .side-total{border-top-color:rgba(255,255,255,.05)} /* 深色：可信度栏与状态胶囊提高可读性 */ [data-theme="dark"] .trust-bar{background:rgba(122,162,255,.07);border-color:rgba(255,255,255,.08)} [data-theme="dark"] .trust-k{color:#8395ad} [data-theme="dark"] .trust-sep{color:rgba(255,255,255,.14)} [data-theme="dark"] .trust-bar[data-trust="partial"] .trust-state{background:#3a2c12;color:#f0be6a} [data-theme="dark"] .trust-bar[data-trust="complete"] .trust-state{background:#123027;color:#63d3ab} [data-theme="dark"] .trust-bar[data-trust="no_baseline"] .trust-state,[data-theme="dark"] .trust-bar[data-trust="stale"] .trust-state{background:#3a1a1a;color:#ff9b93} [data-theme="dark"] .trust-scope{color:#7d8fa6} /* 深色：榜首底色与左侧色条更明确 */ [data-theme="dark"] .dual-row:first-of-type{box-shadow:inset 3px 0 0 #d9a04a} [data-theme="dark"] .dual-column:nth-child(2) .dual-row:first-of-type{box-shadow:inset 3px 0 0 #3fbfae} /* 数字：渐变文字在个别环境会整块透明，改用实色保证永远可读 */ .stat-strip strong,.annual-stats strong{ background:none;-webkit-background-clip:border-box;background-clip:border-box; -webkit-text-fill-color:currentColor;color:var(--text,#16233a); } [data-theme="dark"] .stat-strip strong,[data-theme="dark"] .annual-stats strong{ background:none;-webkit-text-fill-color:currentColor;color:#eef4ff; } /* 分类卡：8 张卡在宽屏用 4 列（两整行），中屏 2 列（四整行），窄屏 1 列。 避免 3 列时末行只剩 2 张、右下角空一块。 */ @media(min-width:1251px){ .category-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px} .category-card .card-header{padding:22px 20px 14px} .category-card .card-heading h3{font-size:14.5px} .category-card .repo-row.mini{padding:12px 18px} .category-card .mini .repo-name{font-size:12.5px} .category-card .mini .repo-summary{font-size:11.5px} .category-card .card-subline{margin:0 18px 6px} .category-card .row-numbers.pair{min-width:96px} } @media(min-width:1750px){ .category-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px} } @media(min-width:701px) and (max-width:1250px){ .category-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px} } /* 分类卡：顶部色条更明确，卡内层级靠留白而非细线堆叠 */ .category-card::before{height:3px;opacity:1} .category-card .card-subline{border-top:0;padding-top:2px} .category-card .card-tail{border-top-color:var(--hairline)} /* 双榜列头：与榜首呼应，Star 暖、Fork 冷 */ .dual-column>header{position:relative} .dual-column:first-child>header{background:linear-gradient(180deg,color-mix(in srgb,var(--gain) 7%,var(--surface)),transparent)} .dual-column:nth-child(2)>header{background:linear-gradient(180deg,color-mix(in srgb,var(--teal) 7%,var(--surface)),transparent)} [data-theme="dark"] .dual-column:first-child>header{background:linear-gradient(180deg,rgba(217,160,74,.12),transparent)} [data-theme="dark"] .dual-column:nth-child(2)>header{background:linear-gradient(180deg,rgba(63,191,174,.12),transparent)} /* 右栏本期之最：卡片内容垂直居中，避免大片空白压在下方。 历史规则把 .v05-slide 设成 justify-content:space-between， 而卡内只有一个 .v05-slide-inner，导致内容贴顶、下方留白。 这里恢复居中，并让内层承担伸展。 */ .v05-rot-wrap>.v05-slide{justify-content:center !important} .v05-rot-wrap>.v05-slide>.v05-slide-inner{flex:1 1 auto;justify-content:center;gap:12px} .v05-slide .leader-body{gap:8px} .v05-slide .v05-tile{align-items:center;text-align:center} .v05-slide .v05-name{margin-top:2px} /* 顶栏：深色下玻璃层与描边更稳 */ [data-theme="dark"] .site-header{border-bottom-color:rgba(255,255,255,.07)} [data-theme="dark"] .search{background:#141c27;border-color:#232f3e} [data-theme="dark"] .search:focus-within{border-color:#4a6ba8;box-shadow:0 0 0 4px rgba(122,162,255,.14);background:#18212e} [data-theme="dark"] .tool-button:hover{background:rgba(122,162,255,.14);color:#cfe0ff} /* 窄屏：分类卡单列时恢复舒展的内边距 */ @media(max-width:700px){ .category-card .card-header{padding:22px 19px 14px} .category-card .card-subline{margin:0 19px 6px} .category-card .repo-row.mini{padding:13px 19px} } /* ============================================================ v0.6.8c 对比度硬修复 既有 v0.5.1 规则用 !important 把「未选中」文字色钉成 #4d5a70， 但周期标签用的是 aria-selected 而非 .active，导致深色下选中态 也命中该规则 → 深底深字（实测对比度约 1.7:1，不可读）。 这里用同等强度、更高特异性的选择器纠正，不删除历史规则。 ============================================================ */ /* 深色：选中态必须亮字；未选中保持中灰，两者拉开层级 */ [data-theme="dark"] .period-tabs button[aria-selected="true"], [data-theme="dark"] .period-tabs button.active, [data-theme="dark"] .annual-board .period-tabs button[aria-selected="true"]{ color:#e6eeff !important;font-weight:700; } [data-theme="dark"] .period-tabs button:not([aria-selected="true"]):not(.active), [data-theme="dark"] .annual-board .period-tabs button:not([aria-selected="true"]):not(.active){ color:#93a5bd !important; } [data-theme="dark"] .period-tabs button:not([aria-selected="true"]):hover{color:#d3e2ff !important} [data-theme="dark"] .rail-toggle button.active,[data-theme="dark"] .metric-tabs button.active, [data-theme="dark"] .kind-tabs button.active{color:#e6eeff !important} [data-theme="dark"] .rail-toggle button:not(.active),[data-theme="dark"] .metric-tabs button:not(.active), [data-theme="dark"] .kind-tabs button:not(.active){color:#93a5bd !important} /* 浅色：选中态用品牌蓝实字，未选中中灰，去掉 !important 造成的同色 */ .period-tabs button[aria-selected="true"],.annual-board .period-tabs button[aria-selected="true"]{ color:#1f49d0 !important;font-weight:700; } .period-tabs button:not([aria-selected="true"]):not(.active){color:#5d6d84 !important} /* 深色：列头与行分隔线统一收敛，消除亮色实线 */ [data-theme="dark"] .dual-column>header, [data-theme="dark"] .dual-rankings .dual-column>header, [data-theme="dark"] .dual-rankings .dual-column:first-child .dual-column-head, [data-theme="dark"] .dual-rankings .dual-column:last-child .dual-column-head{ border-bottom:1px solid rgba(255,255,255,.06) !important; } [data-theme="dark"] .dual-row,[data-theme="dark"] .repo-row,[data-theme="dark"] .owner-row{ border-bottom:1px solid rgba(255,255,255,.05) !important;border-top:0 !important; } [data-theme="dark"] .dual-row:last-child,[data-theme="dark"] .repo-row:last-child,[data-theme="dark"] .owner-row:last-child{border-bottom:0 !important} [data-theme="dark"] .dual-rankings{border-top:1px solid rgba(255,255,255,.06) !important} [data-theme="dark"] .dual-column+.dual-column{border-left:1px solid rgba(255,255,255,.06) !important} [data-theme="dark"] .annual-stats,[data-theme="dark"] .stat-strip{border:1px solid rgba(255,255,255,.07) !important} [data-theme="dark"] .card,[data-theme="dark"] .v05-aside>section{border-color:rgba(255,255,255,.07) !important} /* 深色：累计数字从深灰提到可读亮度（原 #aab8cc 在深底上偏暗） */ [data-theme="dark"] .secondary-number strong,[data-theme="dark"] .pair-number small{color:#9fb0c6 !important} [data-theme="dark"] .dual-row .pair-label{color:#8b9cb4 !important} [data-theme="dark"] .repo-meta,[data-theme="dark"] .repo-meta span{color:#8b9cb4 !important} [data-theme="dark"] .dual-row .dual-author{color:#93a5bd !important} /* 深色：累计 Star/Fork 的次列数字与主列拉开，但不刺眼 */ [data-theme="dark"] .pair-number:not(.primary-pair) strong{color:#b9c8dc !important} /* 浅色：列头分隔线同样收细，避免整页横线过重 */ .dual-column>header{border-bottom:1px solid var(--hairline)} .dual-row,.list-card .repo-row{border-bottom:1px solid color-mix(in srgb,var(--hairline) 70%,transparent)} /* ============================================================ v0.6.8d 移动端布局硬修复（截图复核发现的严重缺陷） 根因：历史规则 `@media(max-width:900px)` 把主区设成 `minmax(0,2.65fr) minmax(320px,1fr)` 两列，且位置晚于 `@media(max-width:700px){...1fr}`，在 390px 视口下后者被覆盖。 320px 最小宽吃掉几乎全部空间，主榜被压到 24px → 标题竖排、 统计与榜单重叠。横向溢出检查测不出这类「压缩型」错乱。 这里用更高特异性 + 明确断点把窄屏强制回单列。 ============================================================ */ @media(max-width:900px){ .lead-grid.home-lead-grid{ grid-template-columns:minmax(0,1fr) !important; gap:18px;align-items:stretch; } .lead-grid.home-lead-grid>.annual-board, .lead-grid.home-lead-grid>.v05-aside{min-width:0;width:100%} .v05-aside{grid-template-columns:minmax(0,1fr) !important} } @media(max-width:700px){ .lead-grid.home-lead-grid{grid-template-columns:minmax(0,1fr) !important;gap:16px} .annual-board,.v05-aside,.v05-tabs-card,.v05-rotator{min-width:0;max-width:100%} .annual-header{flex-wrap:wrap} .annual-header h1{min-width:0;overflow-wrap:anywhere} .annual-stats{grid-template-columns:repeat(2,minmax(0,1fr)) !important} .annual-stats>div{min-width:0} .dual-rankings{grid-template-columns:minmax(0,1fr) !important} .dual-column{min-width:0} .dual-column+.dual-column{border-left:0 !important;border-top:1px solid var(--hairline)} [data-theme="dark"] .dual-column+.dual-column{border-top:1px solid rgba(255,255,255,.06) !important} .trust-bar{min-width:0} .trust-item{white-space:normal} .v05-rot-wrap{min-height:220px} .v05-rot-wrap>.v05-slide{padding:20px 18px} .v05-name{font-size:26px} .v05-contrib .v05-name{font-size:30px} .category-grid{grid-template-columns:minmax(0,1fr) !important} } /* 平板竖屏：主区单列，右栏两块并排，避免 320px 最小宽再次挤压 */ @media(min-width:701px) and (max-width:900px){ .v05-aside{grid-template-columns:repeat(2,minmax(0,1fr)) !important} .category-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important} } /* 通用兜底：任何栅格子项都不得因内容最小宽度撑破轨道 */ .home-lead-grid>*,.category-grid>*,.dual-rankings>*,.annual-stats>*,.v05-aside>*{min-width:0} /* ============================================================ v0.7.0 编辑精选 · 我的关注变化 ============================================================ */ /* ---- 编辑精选：与自然排名视觉分离，明确「人工核验、非赞助」 ---- */ .editorial-section{margin-top:8px} .editorial-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px} .editorial-card{padding-bottom:18px;position:relative;border-color:var(--hairline)} .editorial-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px; background:linear-gradient(90deg,#c9a227,#e6c65c);opacity:.9} .editorial-card .card-header{padding:22px 22px 10px} .editorial-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;flex-shrink:0; background:color-mix(in srgb,#c9a227 14%,var(--surface));color:#a8801a} .editorial-mark .icon{width:17px;height:17px} .editorial-card .card-heading h3{font-size:15px} .editorial-card .card-heading p{font-size:11px;color:var(--muted);margin-top:2px} .editorial-summary{padding:0 22px;font-size:13.5px;line-height:1.7;color:var(--text,#16233a)} .editorial-audience{padding:8px 22px 0;font-size:12.5px;color:var(--text-2,#5d6d84);line-height:1.6} .editorial-audience>span{display:inline-block;margin-right:6px;padding:1px 7px;border-radius:999px; background:color-mix(in srgb,var(--blue) 8%,var(--surface));color:var(--blue);font-size:11px;font-weight:600} .editorial-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:14px 22px 0;font-size:11.5px;color:var(--muted)} .editorial-cat{padding:2px 8px;border-radius:999px;background:var(--surface-3,#f2f5fa);color:var(--text-2,#5d6d84)} .editorial-gain{font-weight:700;font-variant-numeric:tabular-nums} .editorial-warn{color:#a8801a} [data-theme="dark"] .editorial-card::before{background:linear-gradient(90deg,#8a6a12,#d9b64a)} [data-theme="dark"] .editorial-mark{background:rgba(217,182,74,.16);color:#e2c469} [data-theme="dark"] .editorial-summary{color:#e8eef7} [data-theme="dark"] .editorial-audience{color:#a3b1c4} [data-theme="dark"] .editorial-audience>span{background:rgba(122,162,255,.14);color:#9dc2ff} [data-theme="dark"] .editorial-cat{background:#1e2735;color:#a3b1c4} [data-theme="dark"] .editorial-warn{color:#e2c469} /* ---- 我的关注变化：工具条、风险提示、基准列 ---- */ .follow-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 16px} .tool-pill{border:1px solid var(--hairline);background:var(--surface);border-radius:999px; padding:7px 15px;font-size:12.5px;color:var(--text-2,#5d6d84); transition:color .2s ease,border-color .2s ease,background .2s ease,transform .18s var(--ease-out-soft)} .tool-pill:hover{color:var(--blue);border-color:color-mix(in srgb,var(--blue) 34%,transparent); background:color-mix(in srgb,var(--blue) 6%,var(--surface));transform:translateY(-1px)} .tool-pill:active{transform:scale(.97)} .follow-snap-note{font-size:11.5px;color:var(--muted);margin-left:auto} .follow-alert{display:flex;align-items:center;gap:9px;margin:0 0 16px;padding:11px 16px;border-radius:12px; background:color-mix(in srgb,#c9a227 10%,var(--surface));border:1px solid color-mix(in srgb,#c9a227 26%,transparent); font-size:12.5px;color:#8a6a12} .follow-alert .icon{width:15px;height:15px;flex-shrink:0} .follow-flag{padding:1px 7px;border-radius:999px;background:var(--surface-3,#f2f5fa);color:var(--muted);font-size:10.5px} .follow-flag.warn{background:color-mix(in srgb,#c9a227 14%,var(--surface));color:#8a6a12} .follow-row .secondary-number{width:78px} [data-theme="dark"] .tool-pill{background:#18212e;border-color:#26313f;color:#a3b1c4} [data-theme="dark"] .tool-pill:hover{background:rgba(122,162,255,.12);border-color:#4a6ba8;color:#cfe0ff} [data-theme="dark"] .follow-alert{background:rgba(217,182,74,.12);border-color:rgba(217,182,74,.3);color:#e2c469} [data-theme="dark"] .follow-flag{background:#1e2735;color:#8395ad} [data-theme="dark"] .follow-flag.warn{background:rgba(217,182,74,.16);color:#e2c469} /* ---- 未分类货架：中性色，明确「待核验」而非某一类 ---- */ .category-card[style*="#8a94a6"] .category-icon{font-weight:700} /* ============================================================ v0.7.1 自动精选卡 + 本期之最四格 ============================================================ */ .picks-section{margin-top:8px} .picks-empty{padding:26px 22px;border:1px dashed var(--line-strong,#cfd9e8);border-radius:14px; color:var(--muted);font-size:13px;background:var(--surface-2,#f7f9fc)} [data-theme="dark"] .picks-empty{background:#18212e;border-color:#26313f} .picks-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px} .pick-card{padding-bottom:16px;position:relative;border-color:var(--hairline);display:flex;flex-direction:column} .pick-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px; background:linear-gradient(90deg,#3568f7,#0eaa87);opacity:.9} .pick-card .card-header{padding:20px 20px 8px} .pick-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;flex-shrink:0; background:color-mix(in srgb,var(--blue) 12%,var(--surface));color:var(--blue)} .pick-mark .icon{width:17px;height:17px} .pick-card .card-heading h3{font-size:15px} .pick-card .card-heading p{font-size:11px;color:var(--muted);margin-top:2px} .pick-lane{margin-left:auto;flex-shrink:0;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:600; background:color-mix(in srgb,var(--teal) 12%,var(--surface));color:var(--teal)} .pick-use{padding:0 20px;font-size:13.5px;line-height:1.65;color:var(--text,#16233a)} .pick-audience{padding:6px 20px 0;font-size:12.5px;color:var(--text-2,#5d6d84)} .pick-audience>span{display:inline-block;margin-right:6px;padding:1px 7px;border-radius:999px; background:color-mix(in srgb,var(--blue) 8%,var(--surface));color:var(--blue);font-size:11px;font-weight:600} .pick-reasons{list-style:none;margin:10px 20px 0;padding:10px 0 0;border-top:1px dashed var(--hairline); display:flex;flex-direction:column;gap:5px} .pick-reasons li{font-size:12px;color:var(--text-2,#5d6d84);line-height:1.5;padding-left:16px;position:relative} .pick-reasons li::before{content:"";position:absolute;left:2px;top:7px;width:6px;height:6px;border-radius:50%; background:color-mix(in srgb,var(--teal) 60%,var(--surface))} .pick-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 20px 0} .pick-src{font-size:10.5px;color:var(--muted)} [data-theme="dark"] .pick-card::before{background:linear-gradient(90deg,#7aa2ff,#3fbfae)} [data-theme="dark"] .pick-mark{background:rgba(122,162,255,.14);color:#9dc2ff} [data-theme="dark"] .pick-lane{background:rgba(63,191,174,.14);color:#5fd6bd} [data-theme="dark"] .pick-use{color:#e8eef7} [data-theme="dark"] .pick-audience{color:#a3b1c4} [data-theme="dark"] .pick-reasons li{color:#a3b1c4} /* 本期之最四格：同时可见，不轮播 */ .v05-best{padding-bottom:16px} .v05-best .card-header{padding:16px 18px 10px} .best-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:0 16px} .best-tile{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border-radius:12px; background:var(--surface-2,#f7f9fc);border:1px solid var(--hairline);min-width:0; transition:transform .2s var(--ease-out-soft),box-shadow .2s ease} .best-tile:hover{transform:translateY(-2px);box-shadow:var(--card-lift)} .best-k{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--muted);font-weight:600} .best-k .stat-icon{width:24px;height:24px;border-radius:7px} .best-k .stat-icon .icon{width:13px;height:13px} .best-name{font-size:15px;font-weight:700;color:var(--text,#16233a);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .best-meta{font-size:11.5px;color:var(--text-2,#5d6d84);font-variant-numeric:tabular-nums} [data-theme="dark"] .best-tile{background:#18212e;border-color:#26313f} [data-theme="dark"] .best-name{color:#e8eef7} [data-theme="dark"] .best-meta{color:#a3b1c4} /* 精选 4~6 张：宽屏 2 列成整行，避免 3 列留下孤卡 */ @media(min-width:1251px){.picks-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(min-width:701px) and (max-width:1250px){.picks-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}} /* 分类 9 货架：宽屏 3 列成 3 整行，避免 4 列留下孤卡 */ @media(min-width:1251px){.categories-section .category-grid{grid-template-columns:repeat(3,minmax(0,1fr))}} /* 右栏三卡自然高度堆叠，不再强制拉伸留白 */ .home-lead-grid .v05-aside{display:flex;flex-direction:column;gap:16px;align-self:start} .home-lead-grid .v05-aside>.card{flex:0 0 auto} .home-follow-card{padding-bottom:12px} .home-follow-card .card-header{padding:16px 18px 8px} .hf-list{display:flex;flex-direction:column;padding:0 10px} .hf-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 8px;border-radius:8px;font-size:13px} .hf-row:hover{background:color-mix(in srgb,var(--blue) 5%,var(--surface))} .hf-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text,#16233a)} .hf-row strong{font-variant-numeric:tabular-nums} .hf-empty{padding:6px 18px 12px;font-size:12.5px;color:var(--muted)} [data-theme="dark"] .hf-name{color:#e8eef7} @media(max-width:700px){ .picks-grid{grid-template-columns:minmax(0,1fr);gap:16px} .pick-card .card-header,.pick-use,.pick-audience{padding-left:18px;padding-right:18px} .pick-reasons{margin-left:18px;margin-right:18px} .pick-foot{padding-left:18px;padding-right:18px} .best-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:0 14px} } @media(min-width:1251px){.editorial-grid{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(min-width:701px) and (max-width:1250px){.editorial-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}} @media(max-width:700px){ .editorial-grid{grid-template-columns:minmax(0,1fr);gap:16px} .editorial-card .card-header{padding:20px 18px 10px} .editorial-summary,.editorial-audience{padding-left:18px;padding-right:18px} .editorial-meta{padding-left:18px;padding-right:18px} .follow-toolbar{gap:8px} .tool-pill{padding:6px 12px;font-size:12px} .follow-snap-note{margin-left:0;width:100%} .follow-row .secondary-number{display:none} } /* ============================================================ v0.7.2 说明收敛 + 为什么好用 + 图标修复 1) 口径说明只在页头说一次，可信度栏只讲覆盖度（消除两处重复） 2) 精选卡新增「为什么好用」区块，标注文案来源 3) 分类图标渲染为矢量图形并强制不溢出 4) 刷量嫌疑项目标注「待核验」 ============================================================ */ /* ---- 1. 页头：唯一的口径与新鲜度说明处 ---- */ .annual-stamp .stamp-scope{color:#8b98ab;font-size:11px;letter-spacing:.1px} [data-theme="dark"] .annual-stamp .stamp-scope{color:#8fa1b8} /* ---- 2. 可信度栏：只讲覆盖度，不再重复时间与过期 ---- */ .trust-bar{gap:8px 12px} .trust-hint{color:#8b98ab;font-size:11.5px} .trust-more{margin-left:auto;display:inline-flex;align-items:center;gap:4px; font-size:11.5px;font-weight:600;color:var(--blue,#3568f7);white-space:nowrap} .trust-more .icon{width:11px;height:11px} .trust-more:hover{text-decoration:underline} [data-theme="dark"] .trust-hint{color:#8fa1b8} @media(max-width:700px){ .trust-hint{width:100%;order:3} .trust-more{margin-left:0;order:4} } /* ---- 3. 分类图标：图形化且永不溢出 ---- */ .category-icon{overflow:hidden;line-height:0} .category-icon .icon{width:19px;height:19px;stroke-width:1.7} @media(max-width:1250px){.category-icon .icon{width:17px;height:17px}} /* ---- 4. 为什么好用：卡片里最该被读到的一块 ---- */ .pick-why{margin:10px 18px 0;padding:12px 14px;border-radius:12px; background:linear-gradient(135deg,color-mix(in srgb,#e39724 9%,var(--surface)),color-mix(in srgb,#3568f7 6%,var(--surface))); border:1px solid color-mix(in srgb,#e39724 22%,transparent)} .pick-why.is-verified{background:linear-gradient(135deg,color-mix(in srgb,#0ba98c 10%,var(--surface)),color-mix(in srgb,#3568f7 6%,var(--surface))); border-color:color-mix(in srgb,#0ba98c 26%,transparent)} .pick-why-k{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700; letter-spacing:.3px;color:#a86a12} .pick-why.is-verified .pick-why-k{color:#0a7f68} .pick-why-k .icon{width:13px;height:13px;stroke-width:2.1} .pick-why-text{margin:6px 0 0;font-size:13.5px;line-height:1.65;font-weight:600;color:var(--text,#16233a)} .pick-why .pick-audience{padding:6px 0 0;font-size:12px} .pick-use-raw{margin:10px 0 0;color:var(--text-2,#5d6d84)} [data-theme="dark"] .pick-why{background:linear-gradient(135deg,rgba(227,151,36,.12),rgba(122,162,255,.08));border-color:rgba(227,151,36,.28)} [data-theme="dark"] .pick-why.is-verified{background:linear-gradient(135deg,rgba(11,169,140,.14),rgba(122,162,255,.08));border-color:rgba(11,169,140,.3)} [data-theme="dark"] .pick-why-k{color:#e0a94a} [data-theme="dark"] .pick-why.is-verified .pick-why-k{color:#43c9ac} [data-theme="dark"] .pick-why-text{color:#e8eef7} /* ---- 5. 入选理由折叠：默认不占版面，需要时可展开审计 ---- */ .pick-why-detail{margin:10px 18px 0} .pick-why-detail>summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:4px; font-size:11.5px;font-weight:600;color:var(--muted,#5f6d84)} .pick-why-detail>summary::-webkit-details-marker{display:none} .pick-why-detail>summary .icon{width:10px;height:10px;transition:transform .18s ease} .pick-why-detail[open]>summary .icon{transform:rotate(90deg)} .pick-why-detail>summary:hover{color:var(--blue,#3568f7)} .pick-why-detail .pick-reasons{margin:8px 0 0;padding-left:18px} /* ---- 5c. 分类卡覆盖标注：小计不冒充全分类合计 ---- */ .cat-scope{margin-left:5px;padding:0 6px;border-radius:999px;background:color-mix(in srgb,#e39724 12%,transparent); color:#9a6512;font-size:10px;font-weight:700;font-style:normal;white-space:nowrap;cursor:help} [data-theme="dark"] .cat-scope{background:rgba(227,151,36,.16);color:#e0a94a} /* ---- 5b. 已观测小计：数值照常给，但明确它不是全量 ---- */ .stat-tile.is-partial strong{position:relative} .stat-tile.is-partial .stat-note{color:#9a6512;font-weight:600} [data-theme="dark"] .stat-tile.is-partial .stat-note{color:#e0a94a} /* ============================================================ v0.7.3 去自动滚动 + 删冗余说明 + 精选收紧 使用者反馈：①分类卡自动上滚容易点错 ②页头两行说明多余（页脚已有） ③整条可信度栏多余 ④卡底「已核验 日期 · 规则 v2」多余 ⑤精选间距偏大 ============================================================ */ /* ---- 1. 分类卡：v0.7.7 起走统一 .scroll-window（取 10 露 5、悬停暂停）。 v0.7.3 曾按当时要求改成纯静态并留下 overflow:visible / max-height:none， 那几条会压掉新视口的高度锁定，已移除；此处只保留空态与行高。 ---- */ .cat-window .repo-row{height:auto;min-height:var(--row-h);max-height:none} .cat-window .no-result{padding:18px 16px;font-size:12.5px;color:var(--muted)} /* ---- 2. 状态说明：四格下方一行小字，不再单独占框 ---- */ .board-note-line{display:flex;align-items:center;gap:6px;margin:0 26px 14px; font-size:11.5px;line-height:1.5;color:#9a6512;min-height:0} .board-note-line:empty{display:none;margin:0} .board-note-line .icon{width:13px;height:13px;flex-shrink:0;stroke-width:2} [data-theme="dark"] .board-note-line{color:#e0a94a} @media(max-width:1250px){.board-note-line{margin:0 18px 12px}} @media(max-width:700px){.board-note-line{margin:0 13px 12px;font-size:11px}} /* ---- 3. 页脚：版权在左、导航在右（参考使用者给的旧站样式） ---- v0.7.4 使用者明确「不要就是不要」：收录范围与过期提示彻底删除， 不再从页头挪到页脚，页脚只保留版权与导航入口。 */ .site-footer{justify-content:space-between;align-items:center;gap:14px 24px; padding-left:32px;padding-right:32px;box-sizing:border-box} .site-footer .footer-copy{order:0;flex:0 1 auto;font-size:11px;line-height:1.6;color:#94a2b8} .site-footer nav{order:1;margin-left:auto;display:flex;flex-wrap:wrap;align-items:center;gap:6px 20px} .site-footer nav a{font-size:11.5px} @media(max-width:950px){.site-footer{padding-left:22px;padding-right:22px}} @media(max-width:700px){ .site-footer{flex-direction:column;align-items:flex-start;gap:10px;padding-left:18px;padding-right:18px} .site-footer nav{margin-left:0;gap:6px 16px} } /* ============================================================ v0.7.5 空间利用：四榜并排 + 行紧凑 + 精选卡两列 使用者反馈：空白太多、分几行、还要点击才展开；首页要放亮点数据。 ============================================================ */ /* ---- A. 首页四榜：新增双榜 + 累计总榜，2×2 铺满主区 ---- */ .dual-rankings.quad-rankings{grid-template-columns:repeat(2,minmax(0,1fr));gap:0} .quad-rankings .dual-column{border-top:1px solid var(--hairline)} .quad-rankings .dual-column:nth-child(-n+2){border-top:0} .quad-rankings .dual-column:nth-child(even){border-left:1px solid var(--hairline)} .quad-rankings .dual-column>header{padding:9px 16px 7px} .quad-rankings .dual-column>header h3{font-size:13.5px} /* ============================================================ v0.7.6 四榜双轴辨识：上下=维度，左右=指标 使用者反馈：四个标题顺眼看差不多，上下不是一个维度、卡片色该区分。 维度（上下）：本期新增 = 暖族（琥珀/珊瑚），累计总量 = 冷族（靛蓝/紫） 指标（左右）：Star = 琥珀 #b4741a，Fork = 青绿 #0f766e 两轴叠加后四格各有独立色相，且徽标文字直接写明维度，不只靠颜色。 ============================================================ */ .quad-rankings{--star-ink:#9a5a0d;--fork-ink:#0b6f62; --gain-tint:#fff8ee;--gain-tint-2:#fffdf8;--gain-edge:#e8a33d; --total-tint:#f3f6ff;--total-tint-2:#fbfcff;--total-edge:#5b74e0} /* 维度徽标：实色小胶囊，文字写明「本期新增·7日」/「累计总量·GitHub 累计」 */ .quad-rankings .board-head{display:flex;flex-direction:column;gap:2px;min-width:0} .quad-rankings .board-dim{display:inline-flex;align-items:center;gap:4px;align-self:flex-start; padding:2px 8px;border-radius:999px;font-size:10px;font-weight:750;letter-spacing:.2px; line-height:1.5;white-space:nowrap} .quad-rankings .board-dim .icon{width:11px;height:11px;stroke-width:2.2} .quad-rankings .board-dim i{font-style:normal;opacity:.45} .quad-rankings .board-dim em{font-style:normal;font-weight:600;opacity:.8} .quad-rankings .dual-column>header{display:flex;align-items:flex-end;justify-content:space-between;gap:10px} .quad-rankings .dual-column>header h3{display:flex;align-items:center;gap:6px; font-size:17px;font-weight:800;letter-spacing:-.4px;line-height:1.1} .quad-rankings .dual-column>header h3 .icon{width:17px;height:17px;stroke-width:2} .quad-rankings .dual-column>header .more{align-self:center;flex-shrink:0} /* 旧规则按 :first-child / :last-child 给首尾列上色（双榜时代遗留）， 四榜下会污染第 1、4 格。这里显式接管四格的底色与表头底色。 */ .dual-rankings.quad-rankings .dual-column:first-child>header, .dual-rankings.quad-rankings .dual-column:last-child>header, .dual-rankings.quad-rankings .dual-column>header{background:transparent} /* 上排：本期新增（暖族） */ .dual-rankings.quad-rankings .dual-column.is-gain, .dual-rankings.quad-rankings .dual-column.is-gain:first-child, .dual-rankings.quad-rankings .dual-column.is-gain:last-child{background:linear-gradient(180deg,var(--gain-tint) 0,var(--gain-tint-2) 120px,var(--surface,#fff) 260px)} .dual-rankings.quad-rankings .dual-column.is-gain .board-dim{background:#fdecd2;color:#8a5209} .dual-rankings.quad-rankings .dual-column.is-gain>header{border-bottom:1px solid #f4e3c8} /* 下排：累计总量（冷族） */ .dual-rankings.quad-rankings .dual-column.is-total, .dual-rankings.quad-rankings .dual-column.is-total:first-child, .dual-rankings.quad-rankings .dual-column.is-total:last-child{background:linear-gradient(180deg,var(--total-tint) 0,var(--total-tint-2) 120px,var(--surface,#fff) 260px)} .dual-rankings.quad-rankings .dual-column.is-total .board-dim{background:#e2e8fd;color:#3a49a8} .dual-rankings.quad-rankings .dual-column.is-total>header{border-bottom:1px solid #dde4fa} /* 上下两排之间加一条更明确的分隔，强调这是两个维度 */ .dual-rankings.quad-rankings .dual-column.is-total{border-top:2px solid #d8e0f7} /* 左右：指标专属色（标题、图标、顶部色条、主数值同色系） */ .quad-rankings .dual-column[data-metric="star"]>header h3{color:var(--star-ink)} .quad-rankings .dual-column[data-metric="fork"]>header h3{color:var(--fork-ink)} .quad-rankings .dual-column[data-metric="star"]::before{background:linear-gradient(90deg,#e8a33d 0%,#f3c979 55%,rgba(243,201,121,0) 100%)} .quad-rankings .dual-column[data-metric="fork"]::before{background:linear-gradient(90deg,#12907e 0%,#5fc4b0 55%,rgba(95,196,176,0) 100%)} /* 旧规则 .dual-row .pair-number.primary-pair strong 带 !important 强制琥珀色， 会把 Fork 列也染成琥珀。这里用更高特异性 + !important 夺回控制权。 */ .dual-rankings.quad-rankings .dual-column[data-metric="star"] .dual-row .pair-number.primary-pair strong{color:var(--star-ink) !important} .dual-rankings.quad-rankings .dual-column[data-metric="fork"] .dual-row .pair-number.primary-pair strong{color:var(--fork-ink) !important} /* 新增榜的负增长仍要能看出来，不被指标色盖掉 */ .dual-rankings.quad-rankings .dual-column.is-gain .dual-row .pair-number.primary-pair strong.negative{color:#b42318 !important} /* 序号牌跟随所在格的指标色，强化左右分区 */ .quad-rankings .dual-column[data-metric="star"] .rank-1{background:linear-gradient(135deg,#fff2d6,#ffdfab);color:#8a5209} .quad-rankings .dual-column[data-metric="fork"] .rank-1{background:linear-gradient(135deg,#dff5f0,#b9e8dd);color:#0d6b5e} /* 累计榜主数值是总量不是增量，用更深的同色系，靠标题与徽标区分维度 */ .dual-rankings.quad-rankings .dual-column.is-total[data-metric="star"] .dual-row .pair-number.primary-pair strong{color:#8a5209 !important} .dual-rankings.quad-rankings .dual-column.is-total[data-metric="fork"] .dual-row .pair-number.primary-pair strong{color:#0d6b5e !important} /* 深色：暖族偏棕、冷族偏靛，保持上下可分 */ [data-theme="dark"] .dual-rankings.quad-rankings .dual-column.is-gain, [data-theme="dark"] .dual-rankings.quad-rankings .dual-column.is-gain:first-child, [data-theme="dark"] .dual-rankings.quad-rankings .dual-column.is-gain:last-child{background:linear-gradient(180deg,#221a10 0,#1a1a1f 120px,var(--surface) 260px)} [data-theme="dark"] .quad-rankings .dual-column.is-gain .board-dim{background:rgba(232,163,61,.2);color:#f0b95e} [data-theme="dark"] .quad-rankings .dual-column.is-gain>header{border-bottom-color:rgba(232,163,61,.22)} [data-theme="dark"] .dual-rankings.quad-rankings .dual-column.is-total, [data-theme="dark"] .dual-rankings.quad-rankings .dual-column.is-total:first-child, [data-theme="dark"] .dual-rankings.quad-rankings .dual-column.is-total:last-child{background:linear-gradient(180deg,#161c33 0,#171a26 120px,var(--surface) 260px);border-top-color:rgba(122,142,255,.28)} [data-theme="dark"] .dual-rankings.quad-rankings .dual-column>header, [data-theme="dark"] .dual-rankings.quad-rankings .dual-column:first-child>header, [data-theme="dark"] .dual-rankings.quad-rankings .dual-column:last-child>header{background:transparent} [data-theme="dark"] .quad-rankings .dual-column.is-total .board-dim{background:rgba(122,142,255,.22);color:#a8b6ff} [data-theme="dark"] .quad-rankings .dual-column.is-total>header{border-bottom-color:rgba(122,142,255,.22)} [data-theme="dark"] .quad-rankings .dual-column[data-metric="star"]>header h3{color:#f0b95e} [data-theme="dark"] .quad-rankings .dual-column[data-metric="fork"]>header h3{color:#5fd6bd} [data-theme="dark"] .dual-rankings.quad-rankings .dual-column[data-metric="star"] .dual-row .pair-number.primary-pair strong{color:#f0b95e !important} [data-theme="dark"] .dual-rankings.quad-rankings .dual-column[data-metric="fork"] .dual-row .pair-number.primary-pair strong{color:#5fd6bd !important} [data-theme="dark"] .quad-rankings .dual-column[data-metric="star"] .pair-number.primary-pair .pair-label{color:#f0b95e} [data-theme="dark"] .quad-rankings .dual-column[data-metric="fork"] .pair-number.primary-pair .pair-label{color:#5fd6bd} [data-theme="dark"] .dual-rankings.quad-rankings .dual-column.is-gain .dual-row .pair-number.primary-pair strong.negative{color:#f97066 !important} [data-theme="dark"] .quad-rankings .dual-column[data-metric="star"] .rank-1{background:#3a2a12;color:#f4b860} [data-theme="dark"] .quad-rankings .dual-column[data-metric="fork"] .rank-1{background:#12302a;color:#5fd6bd} @media(max-width:900px){ .quad-rankings .dual-column.is-total{border-top:1px solid var(--hairline)} .quad-rankings .dual-column>header h3{font-size:17px} } @media(max-width:700px){ .quad-rankings .dual-column>header{padding:11px 13px 8px} .quad-rankings .board-dim{font-size:9.5px;padding:2px 7px} .quad-rankings .dual-column>header h3{font-size:16px} } /* ---- B. 榜单行紧凑：一行放下名称/作者/两个指标，不再三行堆叠 ---- */ .quad-rankings .dual-row{display:grid;grid-template-columns:22px minmax(0,1fr) 78px 78px; column-gap:10px;align-items:center;min-height:0;padding:5px 16px} /* 旧规则 .dual-row .repo-info 是 flex-direction:column（名称/简介/作者三行）。 这里保留纵向但只留两行：名称一行、作者·语言一行，行高 ~46px。 分类标签在四榜里挤占名称宽度导致 build-your-own-x 被截断， 分类信息由下方九个货架承载，这里不再重复。 */ .dual-rankings.quad-rankings .dual-row .repo-info{display:flex;flex-direction:column; align-items:flex-start;justify-content:center;gap:1px;min-width:0;flex-wrap:nowrap} .dual-rankings.quad-rankings .dual-row .cat-chip{display:none} .dual-rankings.quad-rankings .dual-row .repo-name{font-size:13px;font-weight:650; line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; max-width:100%;display:block} .dual-rankings.quad-rankings .dual-row .repo-summary{display:none} .dual-rankings.quad-rankings .dual-row .dual-spark{display:none} .dual-rankings.quad-rankings .dual-row .dual-author{display:block;margin:0;max-width:100%; font-size:10.5px;line-height:1.3;color:var(--muted,#5f6d84); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .dual-rankings.quad-rankings .dual-row .dual-author i{font-style:normal;opacity:.5;margin:0 3px} .dual-rankings.quad-rankings .dual-name-line{display:flex;align-items:center;gap:5px; min-width:0;max-width:100%} .dual-rankings.quad-rankings .dual-name-line .repo-name{flex:0 1 auto;min-width:0} .dual-rankings.quad-rankings .dual-name-line .spam-chip, .dual-rankings.quad-rankings .dual-name-line .streak-badge{flex:0 0 auto;margin-left:0} /* v0.7.10 双指标列：每列「指标名 + 净增 + 累计」，Star/Fork 始终并排。 主列（所在卡排序指标）高亮，副列压暗但完整可读。 */ .quad-rankings .pair-number{min-width:0;text-align:right;line-height:1.2} .quad-rankings .pair-number .pair-label{display:block;font-size:9px;font-weight:700; letter-spacing:.4px;color:var(--muted,#5f6d84);margin-bottom:1px} .quad-rankings .pair-number strong{display:block;font-size:13px;font-weight:750;font-variant-numeric:tabular-nums} .quad-rankings .pair-number small{display:block;font-size:9.5px;color:var(--muted,#5f6d84)} .quad-rankings .pair-number:not(.primary-pair) strong{font-weight:600;color:var(--text-2,#5d6d84);font-size:12px} .quad-rankings .pair-number:not(.primary-pair) .pair-label{opacity:.75} /* 主列指标名跟随指标色，强化「这卡按谁排」 */ .quad-rankings .dual-column[data-metric="star"] .pair-number.primary-pair .pair-label{color:var(--star-ink)} .quad-rankings .dual-column[data-metric="fork"] .pair-number.primary-pair .pair-label{color:var(--fork-ink)} .quad-rankings .cat-chip,.quad-rankings .spam-chip,.quad-rankings .streak-badge{flex-shrink:0} [data-theme="dark"] .quad-rankings .dual-column{border-color:rgba(255,255,255,.06)} @media(max-width:1250px){ .quad-rankings .dual-row{grid-template-columns:20px minmax(0,1fr) 72px 72px;padding:6px 14px} } @media(max-width:900px){ .dual-rankings.quad-rankings{grid-template-columns:minmax(0,1fr)} .quad-rankings .dual-column:nth-child(n+2){border-top:1px solid var(--hairline)} .quad-rankings .dual-column:nth-child(even){border-left:0} } @media(max-width:700px){ /* 窄屏两指标列等宽，Star/Fork 都完整；隐藏作者行腾空间，超长名省略带 title */ .quad-rankings .dual-row{grid-template-columns:18px minmax(0,1fr) 64px 64px;column-gap:7px;padding:7px 12px} .quad-rankings .dual-author{display:none} .quad-rankings .pair-number strong{font-size:12.5px} .quad-rankings .pair-number:not(.primary-pair) strong{font-size:11.5px} .quad-rankings .pair-number small{font-size:9px} .quad-rankings .pair-number .pair-label{font-size:8.5px} } /* ---- C. 精选卡：用途在左、数据在右，理由直接可见 ---- */ .pick-body{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:12px;align-items:stretch;margin:8px 16px 0} .pick-body .pick-why{margin:0;display:flex;flex-direction:column;justify-content:center} .pick-body .pick-stats{margin:0;flex-direction:column;align-items:flex-start; justify-content:center;gap:7px;padding:10px 12px} .pick-body .pick-stat{width:100%;justify-content:space-between} .pick-body .pick-lang{margin-left:0;justify-content:flex-start} .pick-card .pick-foot{display:flex;align-items:flex-start;justify-content:space-between; gap:10px;margin:8px 16px 0;padding:8px 0 0;border-top:1px solid var(--hairline,#e6ecf5)} .pick-card .pick-reasons{display:flex;flex-wrap:wrap;gap:4px 10px;margin:0;padding:0;list-style:none;min-width:0} .pick-card .pick-reasons li{position:relative;padding-left:9px;font-size:10.5px;line-height:1.5;color:var(--muted,#5f6d84)} .pick-card .pick-reasons li::before{content:"";position:absolute;left:0;top:6px;width:3px;height:3px; border-radius:50%;background:currentColor;opacity:.55} .pick-card .pick-foot .more{flex-shrink:0;font-size:12px} .pick-card .pick-why-text{font-size:13px;line-height:1.5} .pick-card .pick-audience{padding:4px 0 0;font-size:11px} @media(max-width:1250px){ .pick-body{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:10px} } @media(max-width:700px){ .pick-body{grid-template-columns:minmax(0,1fr);margin:8px 15px 0} .pick-body .pick-stats{flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 14px} .pick-body .pick-stat{width:auto} .pick-card .pick-foot{margin:8px 15px 0} } /* ---- 3b. 精选卡数据行：累计 Star / Fork / 语言，一眼看到体量 ---- */ .pick-stats{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px; margin:10px 16px 0;padding:9px 12px;border-radius:10px; background:color-mix(in srgb,var(--blue) 4%,var(--surface)); border:1px solid var(--hairline,#e6ecf5)} .pick-stat{display:inline-flex;align-items:baseline;gap:6px;font-size:12px;color:var(--text-2,#5d6d84)} .pick-stat-k{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--muted,#5f6d84)} .pick-stat-k .icon{width:12px;height:12px;stroke-width:1.9} .pick-stat:first-child .pick-stat-k .icon{color:#d8a044} .pick-stat:nth-child(2) .pick-stat-k .icon{color:#2ba58d} .pick-stat b{font-size:14px;font-weight:750;color:var(--text,#16233a);font-variant-numeric:tabular-nums;letter-spacing:-.2px} .pick-lang{margin-left:auto;align-items:center;font-size:11.5px} .pick-lang .lang-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0} [data-theme="dark"] .pick-stats{background:rgba(122,162,255,.06);border-color:#26313f} [data-theme="dark"] .pick-stat b{color:#e8eef7} @media(max-width:700px){ .pick-stats{margin:8px 15px 0;gap:6px 14px;padding:8px 11px} .pick-lang{margin-left:0} } /* ---- 4. 精选：间距收紧，卡内更紧凑 ---- */ .picks-section{margin-top:4px} .picks-grid{gap:14px} .pick-card{padding-bottom:12px} .pick-card .card-header{padding:15px 16px 6px} .pick-card .card-heading h3{font-size:14.5px} .pick-why{margin:8px 16px 0;padding:10px 12px;border-radius:10px} .pick-why-text{margin:4px 0 0;font-size:13px;line-height:1.55} .pick-why .pick-audience{padding:4px 0 0;font-size:11.5px} .pick-why-detail{margin:8px 16px 0} /* margin-top:auto 会把详情行推到等高卡底部，留下一段空白； 卡片高度改为贴合内容，同行两卡由 grid 自然对齐。 */ .pick-foot{margin-top:0;padding:8px 16px 0;justify-content:flex-start} .pick-card{padding-bottom:14px} .pick-use-raw{margin:8px 16px 0;font-size:13px} @media(min-width:701px) and (max-width:1250px){.picks-grid{gap:12px}} @media(max-width:700px){ .picks-grid{gap:12px} .pick-card .card-header{padding:14px 15px 6px} .pick-why{margin:8px 15px 0} .pick-why-detail{margin:8px 15px 0} .pick-foot{padding:8px 15px 0} } /* ============================================================ v0.7.7 统一滚动视口 + 数字格式契约 使用者要求：各卡首屏有定数、控件默认露 5 条并向上滚动、 鼠标放上去停止滚动、其余靠「更多」。 所有首页列表共用 .scroll-window，不再各写一套。 ============================================================ */ /* v0.7.13 原生滚动：单份内容 + 可见可拖动滚动条。 旧版用 transform 动画推两份复制内容，overflow:hidden 把滚动条藏了， 滚到中间只能等它滚完；且位移与内容高度错位时底部会露出大片空白。 现在 scrollTop 驱动：滚动条比例真实、拖到底就是最后一条、不会露白。 */ .scroll-window{position:relative; /* --win-h 由 JS 按真实行高校准；未校准前用 --peek 估算兜底 */ height:var(--win-h,calc(var(--peek,5) * var(--row-h,44px)))} /* 外层不滚，内层 .scroll-vp 负责滚动；滚动条由 .sb 自绘， 不受系统「叠加式滚动条 / 自动隐藏」影响，任何时候都看得见、拖得动。 */ .scroll-window.is-loop{overflow:hidden;display:block} .scroll-window.has-sb{padding-right:14px} .scroll-window .scroll-vp{height:100%;overflow-y:auto;overflow-x:hidden; overscroll-behavior:contain;scrollbar-width:none;-ms-overflow-style:none} .scroll-window .scroll-vp::-webkit-scrollbar{width:0;height:0;display:none} /* 自绘轨道：常驻在卡片右缘内侧，圆角胶囊，底色取自所在卡的指标色族 */ .scroll-window .sb{position:absolute;top:4px;bottom:4px;right:3px;width:8px; border-radius:999px;background:var(--sb-track,#eef2f8);cursor:pointer; transition:opacity .18s ease} .scroll-window .sb-thumb{position:absolute;left:0;top:0;width:8px;min-height:28px; border-radius:999px;background:var(--sb-thumb,#c3cede);cursor:grab; will-change:transform;transition:background .15s ease} .scroll-window .sb-thumb:hover{background:var(--sb-thumb-on,#9aa9c0)} .scroll-window .sb-thumb:active{background:var(--sb-thumb-on,#9aa9c0);cursor:grabbing} .scroll-window .sb-thumb:focus-visible{outline:2px solid var(--blue);outline-offset:2px} .scroll-window.is-static,.scroll-window.is-empty{height:auto;overflow:visible} .scroll-window.is-empty{padding:18px 0;text-align:center} .scroll-window:focus-visible{outline:2px solid var(--blue);outline-offset:-2px;border-radius:8px} /* 四榜：滚动条取所在卡的指标色（Star 琥珀 / Fork 青绿），与标题同色系 */ .quad-rankings .dual-column[data-metric="star"] .scroll-window{ --sb-track:#f6ecdc;--sb-thumb:#c9903a;--sb-thumb-on:#9a5a0d} .quad-rankings .dual-column[data-metric="fork"] .scroll-window{ --sb-track:#e2efed;--sb-thumb:#4f9f92;--sb-thumb-on:#0b6f62} [data-theme="dark"] .scroll-window.is-loop{--sb-track:rgba(255,255,255,.06); --sb-thumb:rgba(255,255,255,.22);--sb-thumb-on:rgba(255,255,255,.36)} [data-theme="dark"] .quad-rankings .dual-column[data-metric="star"] .scroll-window{ --sb-track:rgba(232,163,61,.12);--sb-thumb:rgba(232,163,61,.5);--sb-thumb-on:rgba(232,163,61,.75)} [data-theme="dark"] .quad-rankings .dual-column[data-metric="fork"] .scroll-window{ --sb-track:rgba(45,168,150,.12);--sb-thumb:rgba(45,168,150,.5);--sb-thumb-on:rgba(45,168,150,.75)} /* 减少动效：不自动滚（JS 侧跳过位移），滚动条仍可拖，内容一条不丢 */ @media (prefers-reduced-motion:reduce){ .scroll-window .scroll-vp{scroll-behavior:auto} .scroll-window .sb,.scroll-window .sb-thumb{transition:none} } /* 各列表的行高基准：用于 JS 校准前的兜底估算 */ .board-window{--row-h:49px} .cat-window{--row-h:52px} .v05-list{--row-h:56px} .hf-list{--row-h:34px} .account-window{--row-h:52px} /* 四榜视口：默认露 5 条（v0.7.8 由 10 降，平衡左右栏高度），其余向上滚动。 v0.7.13 滚动条常驻右侧 8px：行右内边距收到 8px，让数值列不被滚动条挤走， 滚动条正好落在卡片右缘内侧，不再出现「数值与卡边之间一条空档」。 */ .quad-rankings .board-window{margin:0} .quad-rankings .board-window.has-sb{padding-right:15px} .quad-rankings .board-window .dual-row{padding-right:6px} /* 分类货架与右栏沿用各自内边距，视口只负责高度与滚动 */ .cat-window .scroll-rows,.v05-list .scroll-rows{display:flex;flex-direction:column} /* ---- 6. 待核验标记：说明为什么它排在后面 ---- */ .spam-chip{display:inline-flex;align-items:center;gap:3px;margin-left:6px;padding:1px 7px; border-radius:999px;background:#fdf0e6;color:#a1560f;font-size:10.5px;font-weight:700; font-style:normal;vertical-align:middle;white-space:nowrap;cursor:help} .spam-chip .icon{width:10px;height:10px;stroke-width:2.2} [data-theme="dark"] .spam-chip{background:rgba(227,151,36,.16);color:#e0a94a} .detail-title h1 .spam-chip{font-size:12px;padding:3px 10px} /* ============================================================ v0.8.1 热榜（GitHub Trending）/ 开发者榜 / 主题卡 位置：广告位之下、全部收录榜之上。热榜独占整行（静态对齐双列、 无滚动条）；下面开发者榜与主题并排，窄屏堆叠。 头部只留标题：副标题 / 快照戳 / 主题计数按使用者截图要求移除。 ============================================================ */ .trend-stack{display:flex;flex-direction:column;gap:18px;margin:18px 0 0} .trend-card,.topics-card,.devs-card{padding:18px 20px 14px;border-radius:var(--radius); background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)} /* 下排两卡等高成面板：开发者名单长、主题短，若各自撑高会在右侧留下 上千像素空白（截图复核发现）。统一 680px 面板高度，内部滚动， 滚动条按站点视觉语言自绘（琥珀/蓝灰胶囊），不用浏览器默认灰条。 */ .trend-duo{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:18px;align-items:stretch} .trend-duo>.card{display:flex;flex-direction:column;height:680px;min-height:0} .trend-duo .trend-tabs{align-self:flex-start} .trend-duo .trend-head,.trend-duo .trend-chips{flex:0 0 auto} .trend-duo .dev-list,.trend-duo .topic-grid{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain; scrollbar-width:thin;scrollbar-color:#c3cede #eef2f8;padding-right:8px} .trend-duo .dev-list::-webkit-scrollbar,.trend-duo .topic-grid::-webkit-scrollbar{width:8px} .trend-duo .dev-list::-webkit-scrollbar-track,.trend-duo .topic-grid::-webkit-scrollbar-track{background:#eef2f8;border-radius:999px} .trend-duo .dev-list::-webkit-scrollbar-thumb,.trend-duo .topic-grid::-webkit-scrollbar-thumb{background:#c3cede;border-radius:999px} .trend-duo .dev-list::-webkit-scrollbar-thumb:hover,.trend-duo .topic-grid::-webkit-scrollbar-thumb:hover{background:#9aa9c0} .trend-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap} .trend-title h2{margin:0;font-size:17px;font-weight:750;letter-spacing:-.01em;color:var(--text,#16233a)} /* 周期 tab：与四榜的 period-tabs 同一视觉语言，但独立类名，互不影响 */ .trend-tabs{display:inline-flex;gap:2px;margin:14px 0 0;padding:3px;border-radius:11px; background:var(--surface-3,#f2f5fa);border:1px solid var(--line)} .trend-tab{appearance:none;border:0;background:transparent;cursor:pointer; padding:6px 14px;border-radius:8px;font-size:12.5px;font-weight:650;color:var(--text-2,#5d6d84); font-family:inherit;transition:background .2s ease,color .2s ease,box-shadow .2s ease} .trend-tab:hover{color:var(--text,#16233a)} .trend-tab.is-active{background:var(--surface);color:var(--accent,#1f49d0); box-shadow:0 1px 3px rgba(20,38,68,.14)} .trend-tab:focus-visible{outline:2px solid var(--blue);outline-offset:1px} /* 分类标签：点击过滤当前周期，计数是该周期内的真实条数 */ .trend-chips{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0} .trend-chip{appearance:none;cursor:pointer;font-family:inherit; display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px; border:1px solid var(--line);background:var(--surface-2,#f7f9fc); color:var(--text-2,#5d6d84);font-size:11.5px;font-weight:650; transition:border-color .18s,color .18s,background .18s} .trend-chip small{font-size:10px;font-weight:700;color:var(--muted); padding:0 4px;border-radius:999px;background:var(--surface-3,#f2f5fa)} .trend-chip:hover{border-color:var(--line-strong,#cfd9e8);color:var(--text,#16233a)} .trend-chip.is-active{background:color-mix(in srgb,var(--accent,#1f49d0) 10%,var(--surface)); border-color:color-mix(in srgb,var(--accent,#1f49d0) 34%,var(--line));color:var(--accent,#1f49d0)} .trend-chip.is-active small{background:color-mix(in srgb,var(--accent,#1f49d0) 16%,var(--surface));color:var(--accent,#1f49d0)} .trend-chip:focus-visible{outline:2px solid var(--blue);outline-offset:1px} .trend-body{margin:12px 0 0} /* v0.8.1 静态对齐双列：行优先网格（1,2 首行左右，3,4 次行……）， 同行两侧卡片顶对齐、底对齐（grid stretch），整卡一次看全，无滚动条。 窄屏回落单列，纯 CSS 自适应，不需要 JS 断点重绘。 */ .trend-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px} .trend-row{display:grid;grid-template-columns:22px 24px minmax(0,1fr) auto; align-items:start;gap:10px;padding:12px 14px;border:1px solid var(--line); border-radius:12px;background:var(--surface-2,#f7f9fc);min-width:0} .trend-rank{font-size:12px;font-weight:750;color:var(--muted);text-align:right; padding-top:3px;font-variant-numeric:tabular-nums} .trend-av-link{display:block;line-height:0;border-radius:6px} .trend-av-link:focus-visible{outline:2px solid var(--blue);outline-offset:2px} /* 雪碧图：--spr-* 由 JS 按序号算出，2 倍图缩一半显示 */ .trend-av,.topic-logo{display:block;background-repeat:no-repeat; background-size:var(--spr-w) var(--spr-h);background-position:var(--spr-x) var(--spr-y); background-color:var(--surface-3,#f2f5fa)} .trend-av{width:20px;height:20px;border-radius:5px;margin-top:2px} .trend-av.is-empty{background-image:none;border:1px solid var(--line);position:relative} .trend-av.is-empty::after{content:'';position:absolute;left:50%;top:4px;width:6px;height:6px; margin-left:-3px;border-radius:50%;background:var(--line-strong,#cfd9e8)} .trend-av.is-empty::before{content:'';position:absolute;left:50%;bottom:3px;width:11px;height:6px; margin-left:-5.5px;border-radius:6px 6px 2px 2px;background:var(--line-strong,#cfd9e8)} .trend-main{min-width:0} .trend-name{display:block;font-size:13.5px;font-weight:700;color:var(--text,#16233a); text-decoration:none;line-height:1.35;overflow-wrap:anywhere} .trend-name:hover{color:var(--accent,#1f49d0)} .trend-owner{color:var(--muted);font-weight:600} /* 「为什么好用」琥珀盒：对齐使用者日报特色（图3），小标题 + 中文一句话。 来源（已核验/AI/简介）在产物 why_src 与 title 悬浮里，可追溯不冒充。 */ .trend-why-box{margin:7px 0 0;padding:7px 10px 8px;border-radius:9px; background:color-mix(in srgb,var(--gain,#df8d22) 7%,var(--surface)); border:1px solid color-mix(in srgb,var(--gain,#df8d22) 20%,var(--line))} .trend-why-k{display:block;font-size:10.5px;font-weight:800;letter-spacing:.02em; color:var(--gain,#df8d22)} .trend-why-text{margin:3px 0 0;font-size:12px;line-height:1.6;font-weight:600; color:var(--text,#16233a);overflow-wrap:anywhere} .trend-why-box.is-verified{background:color-mix(in srgb,#0ba98c 8%,var(--surface)); border-color:color-mix(in srgb,#0ba98c 24%,var(--line))} .trend-why-box.is-verified .trend-why-k{color:#0a7f68} .trend-meta{display:flex;align-items:center;gap:12px;margin-top:5px;flex-wrap:wrap} .trend-lang{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--text-2,#5d6d84)} .trend-dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:0 0 auto} .trend-total{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--muted)} .trend-total .icon{width:11px;height:11px;stroke-width:2} .trend-gain{display:flex;flex-direction:column;align-items:flex-end;gap:1px; font-size:13px;font-weight:750;white-space:nowrap;padding-top:2px;font-variant-numeric:tabular-nums} .trend-gain small{font-size:9.5px;font-weight:600;color:var(--muted)} .trend-gain.positive{color:var(--gain,#df8d22)} .trend-gain.negative{color:#c0453c} .trend-gain.neutral{color:var(--muted)} /* v0.9.0 默认首页隐藏下半后的低调展开入口 */ .home-expand{display:flex;justify-content:center;margin:20px 0 6px} .home-expand-link{display:inline-flex;align-items:center;gap:6px;padding:8px 18px;border-radius:999px; border:1px dashed var(--line-strong,#cfd9e8);color:var(--text-2,#5d6d84);font-size:12px;font-weight:650; text-decoration:none;transition:border-color .18s,color .18s,background .18s} .home-expand-link:hover{border-color:var(--accent,#1f49d0);color:var(--accent,#1f49d0);background:var(--surface)} .home-expand-link .icon{width:13px;height:13px;stroke-width:2} [data-theme="dark"] .home-expand-link{border-color:var(--line-strong);color:var(--text-2)} [data-theme="dark"] .home-expand-link:hover{border-color:var(--accent);color:var(--accent);background:var(--surface-2)} /* v0.9.0 热榜关注按钮：星数下方，与开发者榜关注同一视觉语言 */ .trend-side{display:flex;flex-direction:column;align-items:flex-end;gap:7px} .trend-follow{appearance:none;cursor:pointer;font-family:inherit; padding:4px 12px;border-radius:9px;border:1px solid var(--line-strong,#cfd9e8); background:var(--surface);color:var(--text,#16233a);font-size:11px;font-weight:700; transition:border-color .18s,background .18s,color .18s} .trend-follow:hover{border-color:var(--accent,#1f49d0);color:var(--accent,#1f49d0)} .trend-follow.is-followed{background:color-mix(in srgb,var(--accent,#1f49d0) 10%,var(--surface)); border-color:color-mix(in srgb,var(--accent,#1f49d0) 34%,var(--line));color:var(--accent,#1f49d0)} .trend-follow:focus-visible{outline:2px solid var(--blue);outline-offset:1px} /* 关注页：分类 tab 计数 + 热榜关注网格 + 开发者名单 */ .follow-tabs .trend-tab small{margin-left:5px;font-size:10px;font-weight:700;color:var(--muted); padding:0 5px;border-radius:999px;background:var(--surface-3,#f2f5fa)} .follow-tabs .trend-tab.is-active small{background:color-mix(in srgb,var(--accent,#1f49d0) 14%,var(--surface));color:var(--accent,#1f49d0)} .follow-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0 0} .follow-grid .trend-row{grid-template-columns:24px minmax(0,1fr) auto} .follow-dev-list{margin:14px 0 0} .follow-item .follow-flag{margin-top:4px} @media (max-width:900px){.follow-grid{grid-template-columns:1fr}} [data-theme="dark"] .trend-follow{background:var(--surface-2);border-color:var(--line-strong);color:var(--text)} [data-theme="dark"] .trend-follow.is-followed{background:rgba(122,162,255,.14);border-color:rgba(122,162,255,.4);color:var(--accent)} [data-theme="dark"] .follow-tabs .trend-tab small{background:var(--surface-3);color:var(--muted)} [data-theme="dark"] .follow-tabs .trend-tab.is-active small{background:rgba(122,162,255,.2);color:var(--accent)} /* v0.8.2 三卡页脚说明按使用者截图移除，.trend-foot 不再使用 */ .trend-empty{padding:22px 6px;text-align:center} .trend-empty p{margin:0;font-size:13px;font-weight:650;color:var(--text-2,#5d6d84)} .trend-empty-note{margin-top:6px !important;font-size:11.5px !important;font-weight:500 !important; color:var(--muted) !important;line-height:1.65;max-width:520px;margin-left:auto;margin-right:auto} /* 开发者榜：序号 + 头像 + 姓名/账号 + 热门仓库 + 简介 + 本地关注按钮 */ .dev-list{display:flex;flex-direction:column;margin:12px 0 0} .dev-row{display:grid;grid-template-columns:20px 40px minmax(0,1fr) auto;gap:10px; align-items:start;padding:12px 2px;border-top:1px solid var(--line)} .dev-row:first-child{border-top:0} .dev-rank{font-size:12px;font-weight:750;color:var(--muted);text-align:right; padding-top:12px;font-variant-numeric:tabular-nums} .dev-av-link{display:block;line-height:0;border-radius:50%} .dev-av-link:focus-visible{outline:2px solid var(--blue);outline-offset:2px} .dev-av{width:40px;height:40px;border-radius:50%;display:block;background-repeat:no-repeat; background-size:var(--spr-w) var(--spr-h);background-position:var(--spr-x) var(--spr-y); background-color:var(--surface-3,#f2f5fa)} .dev-av.is-empty{background-image:none;border:1px solid var(--line)} .dev-main{min-width:0} .dev-id{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap} .dev-name{font-size:13.5px;font-weight:750;color:var(--accent,#1f49d0);text-decoration:none;overflow-wrap:anywhere} .dev-name:hover{text-decoration:underline} .dev-login{font-size:11.5px;color:var(--muted);font-weight:600} .dev-repo{display:flex;align-items:center;gap:6px;margin-top:5px;min-width:0} .dev-repo .icon{width:12px;height:12px;stroke-width:2;color:var(--gain,#df8d22);flex:0 0 auto} .dev-repo-k{font-size:9.5px;font-weight:800;letter-spacing:.05em;color:var(--muted);white-space:nowrap} .dev-repo-name{font-size:12.5px;font-weight:700;color:var(--accent,#1f49d0);text-decoration:none; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dev-repo-name:hover{text-decoration:underline} .dev-desc{margin:4px 0 0;font-size:11.5px;line-height:1.55;color:var(--text-2,#5d6d84); display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} /* 人物维度「为什么值得关注」琥珀盒，与热榜「为什么好用」同一视觉语言 */ .dev-why-box{margin:6px 0 0;padding:6px 10px 7px;border-radius:9px; background:color-mix(in srgb,var(--gain,#df8d22) 7%,var(--surface)); border:1px solid color-mix(in srgb,var(--gain,#df8d22) 20%,var(--line))} .dev-why-k{display:block;font-size:10px;font-weight:800;letter-spacing:.02em;color:var(--gain,#df8d22)} .dev-why-text{margin:2px 0 0;font-size:11.5px;line-height:1.55;font-weight:600; color:var(--text,#16233a);overflow-wrap:anywhere} .dev-follow{appearance:none;cursor:pointer;font-family:inherit;margin-top:8px; padding:5px 14px;border-radius:9px;border:1px solid var(--line-strong,#cfd9e8); background:var(--surface);color:var(--text,#16233a);font-size:11.5px;font-weight:700; transition:border-color .18s,background .18s,color .18s} .dev-follow:hover{border-color:var(--accent,#1f49d0);color:var(--accent,#1f49d0)} .dev-follow.is-followed{background:color-mix(in srgb,var(--accent,#1f49d0) 10%,var(--surface)); border-color:color-mix(in srgb,var(--accent,#1f49d0) 34%,var(--line));color:var(--accent,#1f49d0)} .dev-follow:focus-visible{outline:2px solid var(--blue);outline-offset:1px} /* 主题卡：官方图标 + 名称 + 一句话；半幅宽时两列、窄屏单列 */ .topic-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;margin:14px 0 0} .topic-item{display:grid;grid-template-columns:32px minmax(0,1fr) 14px;align-items:center;gap:10px; padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--surface-2,#f7f9fc); text-decoration:none;transition:border-color .18s,background .18s,transform .18s} .topic-item:hover{border-color:var(--line-strong,#cfd9e8);background:var(--surface);transform:translateY(-1px)} .topic-item:focus-visible{outline:2px solid var(--blue);outline-offset:1px} .topic-logo{width:32px;height:32px;border-radius:8px} /* 无官方图标的主题：画一个 # 占位，表明「这里没有官方图」， 而不是空白方块（会被误认为图挂了）。不伪造任何官方图形。 */ .topic-logo.is-empty{background-image:none;border:1px solid var(--line);position:relative} .topic-logo.is-empty::after{content:'#';position:absolute;inset:0;display:flex; align-items:center;justify-content:center;font-size:15px;font-weight:700; color:var(--line-strong,#cfd9e8)} .topic-text{min-width:0} .topic-text strong{display:block;font-size:12.5px;font-weight:700;color:var(--text,#16233a); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .topic-text small{display:block;margin-top:2px;font-size:10.5px;line-height:1.45;color:var(--muted); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .topic-item>.icon{width:13px;height:13px;stroke-width:2;color:var(--muted)} /* 深色：沿用站内变量，只补需要单独压暗的底色 */ [data-theme="dark"] .trend-card,[data-theme="dark"] .topics-card,[data-theme="dark"] .devs-card{background:var(--surface);border-color:var(--line)} [data-theme="dark"] .trend-tabs{background:var(--surface-3);border-color:var(--line)} [data-theme="dark"] .trend-tab{color:var(--text-2)} [data-theme="dark"] .trend-tab.is-active{background:var(--surface);color:var(--accent);box-shadow:0 1px 3px rgba(0,0,0,.4)} [data-theme="dark"] .trend-chip{background:var(--surface-2);border-color:var(--line);color:var(--text-2)} [data-theme="dark"] .trend-chip small{background:var(--surface-3);color:var(--muted)} [data-theme="dark"] .trend-chip.is-active{background:rgba(122,162,255,.14);border-color:rgba(122,162,255,.4);color:var(--accent)} [data-theme="dark"] .trend-chip.is-active small{background:rgba(122,162,255,.2);color:var(--accent)} [data-theme="dark"] .trend-row{background:var(--surface-2);border-color:var(--line)} [data-theme="dark"] .trend-why-box{background:rgba(223,141,34,.10);border-color:rgba(223,141,34,.28)} [data-theme="dark"] .trend-why-k{color:#e0a94a} [data-theme="dark"] .trend-why-text{color:var(--text)} [data-theme="dark"] .trend-why-box.is-verified{background:rgba(11,169,140,.12);border-color:rgba(11,169,140,.3)} [data-theme="dark"] .trend-why-box.is-verified .trend-why-k{color:#4fd1b3} [data-theme="dark"] .topic-logo.is-empty::after{color:var(--line-strong)} [data-theme="dark"] .trend-av.is-empty::after,[data-theme="dark"] .trend-av.is-empty::before{background:var(--line-strong)} [data-theme="dark"] .trend-name,[data-theme="dark"] .topic-text strong{color:var(--text)} [data-theme="dark"] .trend-lang{color:var(--text-2)} [data-theme="dark"] .trend-av,[data-theme="dark"] .topic-logo,[data-theme="dark"] .dev-av{background-color:var(--surface-3)} [data-theme="dark"] .topic-item{background:var(--surface-2);border-color:var(--line)} [data-theme="dark"] .topic-item:hover{background:var(--surface-3);border-color:var(--line-strong)} [data-theme="dark"] .trend-gain.negative{color:#e88379} [data-theme="dark"] .dev-row{border-top-color:var(--line)} [data-theme="dark"] .dev-name,[data-theme="dark"] .dev-repo-name{color:var(--accent)} [data-theme="dark"] .dev-desc{color:var(--text-2)} [data-theme="dark"] .dev-why-box{background:rgba(223,141,34,.10);border-color:rgba(223,141,34,.28)} [data-theme="dark"] .dev-why-k{color:#e0a94a} [data-theme="dark"] .dev-why-text{color:var(--text)} [data-theme="dark"] .dev-follow{background:var(--surface-2);border-color:var(--line-strong);color:var(--text)} [data-theme="dark"] .dev-follow.is-followed{background:rgba(122,162,255,.14);border-color:rgba(122,162,255,.4);color:var(--accent)} [data-theme="dark"] .trend-duo .dev-list,[data-theme="dark"] .trend-duo .topic-grid{scrollbar-color:#3a4759 #232e3d} [data-theme="dark"] .trend-duo .dev-list::-webkit-scrollbar-track,[data-theme="dark"] .trend-duo .topic-grid::-webkit-scrollbar-track{background:#232e3d} [data-theme="dark"] .trend-duo .dev-list::-webkit-scrollbar-thumb,[data-theme="dark"] .trend-duo .topic-grid::-webkit-scrollbar-thumb{background:#3a4759} [data-theme="dark"] .trend-duo .dev-list::-webkit-scrollbar-thumb:hover,[data-theme="dark"] .trend-duo .topic-grid::-webkit-scrollbar-thumb:hover{background:#55657d} /* 中屏：开发者与主题堆叠；热榜保持双列到 900px */ @media (max-width:1100px){ .trend-duo{grid-template-columns:1fr} .trend-duo>.card{height:auto;max-height:640px} } /* 窄屏：热榜单列、星数换行到右下；主题单列 */ @media (max-width:900px){ .trend-grid{grid-template-columns:1fr} } @media (max-width:720px){ .trend-card,.topics-card,.devs-card{padding:15px 14px 12px} .trend-duo>.card{height:auto;max-height:560px} .trend-row{grid-template-columns:20px 22px minmax(0,1fr);gap:8px} .trend-gain{grid-column:3;flex-direction:row;align-items:baseline;gap:5px;padding-top:4px} .trend-tabs{display:flex;width:100%} .trend-tab{flex:1;padding:7px 4px;text-align:center} .topic-grid{grid-template-columns:1fr} .dev-row{grid-template-columns:16px 34px minmax(0,1fr);gap:8px} .dev-av{width:34px;height:34px} .dev-follow{grid-column:3;margin-top:6px;justify-self:start} } @media (prefers-reduced-motion:reduce){ .topic-item{transition:none} .topic-item:hover{transform:none} } /* ============================================================ v1.1.0 视觉与交互升级 1) 头部控件靠右；导航首项「首页」 2) 时间范围提升为页面级分段控件（卡片外），分类筛选留卡内 3) 关注页重做：渐变工作台页头 + 单卡内容 + 统一空态 （修掉开发者行被压成竖排单字的网格列宽冲突） 4) 呼吸感：实时脉冲点、前三名奖牌微光、星标错峰闪烁、 行悬停抬升、分段滑块滑动、骨架屏扫光 全部动效只动 transform / opacity，且尊重 prefers-reduced-motion。 ============================================================ */ /* ---- 1. 头部：导航左、控件右 ---- */ .header-right{display:flex;align-items:center;gap:14px;margin-left:auto} .header-right .header-tools{margin-left:0} .header-right .home-link{margin-left:0;padding-left:14px;border-left:1px solid var(--line)} [data-theme="dark"] .header-right .home-link{border-left-color:var(--line)} @media (max-width:700px){ .header-right{grid-column:2;grid-row:1;justify-self:end;gap:8px} .header-right .home-link{display:none} } /* ---- 2. 页面级工具条 + 分段控件 ---- */ .board-toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px; flex-wrap:wrap;margin:20px 0 14px} .board-toolbar.is-follow{margin:16px 0 12px} .board-lead{display:flex;align-items:center;gap:11px;min-width:0} .board-h1{margin:0;font-size:23px;font-weight:800;letter-spacing:-.5px;color:var(--ink); background:linear-gradient(96deg,#16233a 0%,#1f49d0 58%,#0eaa87 100%); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} [data-theme="dark"] .board-h1{background:linear-gradient(96deg,#e8eefc 0%,#8fb0ff 55%,#4fd1b3 100%); -webkit-background-clip:text;background-clip:text} .board-toolbar-note{font-size:11.5px;font-weight:600;color:var(--muted)} /* 实时脉冲点：数据就绪时呼吸，未就绪时静止灰点（不假装有实时数据） */ .live-badge{display:inline-flex;align-items:center;justify-content:center; width:22px;height:22px;border-radius:50%;flex:0 0 auto; background:color-mix(in srgb,var(--muted) 12%,transparent)} .live-dot{width:7px;height:7px;border-radius:50%;background:var(--muted);display:block} .live-badge.is-live{background:color-mix(in srgb,var(--teal) 15%,transparent)} .live-badge.is-live .live-dot{background:var(--teal);animation:livePulse 2.6s ease-in-out infinite} @keyframes livePulse{ 0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--teal) 55%,transparent);opacity:1} 50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--teal) 0%,transparent);opacity:.72} } /* 分段控件：滑块用 transform 位移，切换有物理感；键盘可达 */ .seg-switch{position:relative;display:inline-flex;padding:4px;border-radius:13px; background:var(--surface);border:1px solid var(--line); box-shadow:0 1px 2px rgba(20,38,68,.05),0 8px 22px -18px rgba(20,38,68,.5); --seg-i:0;--seg-n:4} .seg-thumb{position:absolute;top:4px;bottom:4px;left:4px; width:calc((100% - 8px) / var(--seg-n));border-radius:10px; background:linear-gradient(135deg,#3568f7,#1f49d0); box-shadow:0 4px 12px -4px rgba(53,104,247,.6); transform:translateX(calc(var(--seg-i) * 100%)); transition:transform .34s cubic-bezier(.34,1.28,.5,1);pointer-events:none} .seg-btn{position:relative;z-index:1;appearance:none;border:0;background:transparent; cursor:pointer;font-family:inherit;flex:1 1 0;min-width:74px; padding:7px 16px;border-radius:10px;font-size:13px;font-weight:700; color:var(--secondary);white-space:nowrap; transition:color .24s ease,transform .18s ease} .seg-btn:hover{color:var(--ink)} .seg-btn:active{transform:scale(.97)} .seg-btn.is-active{color:#fff} .seg-btn small{margin-left:6px;font-size:10.5px;font-weight:800; padding:1px 6px;border-radius:999px;background:color-mix(in srgb,var(--muted) 14%,transparent); color:var(--muted);transition:background .24s ease,color .24s ease} .seg-btn.is-active small{background:rgba(255,255,255,.24);color:#fff} .seg-btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px} [data-theme="dark"] .seg-switch{background:var(--surface-2);border-color:var(--line)} [data-theme="dark"] .seg-btn{color:var(--text-2)} [data-theme="dark"] .seg-btn:hover{color:var(--text)} [data-theme="dark"] .seg-btn.is-active{color:#fff} /* ---- 卡片头部：标题 + 计数胶囊 + 右侧备注 ---- */ .card-topline{display:flex;align-items:center;justify-content:space-between;gap:12px; padding-bottom:12px;border-bottom:1px solid var(--line);flex-wrap:wrap} .card-topline-lead{display:flex;align-items:center;gap:9px;min-width:0} /* v1.4.0 卡片头部语义图标：分支/人物/标签，渐变底小方块，与品牌同一语言 */ .topline-glyph{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px; border-radius:8px;flex:0 0 auto;color:var(--blue); background:linear-gradient(135deg,color-mix(in srgb,var(--blue) 14%,transparent),color-mix(in srgb,var(--teal) 14%,transparent)); border:1px solid color-mix(in srgb,var(--blue) 22%,transparent)} .topline-glyph .icon{width:15px;height:15px;stroke-width:1.9} [data-theme="dark"] .topline-glyph{color:#8fb0ff;border-color:color-mix(in srgb,#8fb0ff 26%,transparent)} .card-topline h2{margin:0;font-size:16px;font-weight:800;letter-spacing:-.2px;color:var(--ink)} .count-pill{display:inline-flex;align-items:center;justify-content:center;min-width:24px; padding:2px 8px;border-radius:999px;font-size:11px;font-weight:800; background:linear-gradient(135deg,color-mix(in srgb,var(--blue) 14%,transparent),color-mix(in srgb,var(--teal) 14%,transparent)); color:var(--blue);font-variant-numeric:tabular-nums} .card-topline-note{font-size:10.5px;font-weight:700;letter-spacing:.04em;color:var(--muted); text-transform:uppercase} [data-theme="dark"] .card-topline{border-bottom-color:var(--line)} [data-theme="dark"] .card-topline h2{color:var(--text)} [data-theme="dark"] .count-pill{color:#8fb0ff} /* ---- 3. 呼吸感与入场 ---- */ /* 行入场：按序号错峰浮现，只动 transform/opacity */ /* v1.3.0 错峰入场交给 CSS：sibling-index() 按元素在父级中的真实位置算延迟， 新增/重排的行自动拿到正确节奏，不再由 JS 往每行注入序号。 两条 animation-delay 是刻意的双声明回落：旧浏览器解析不了第二条会忽略它， 沿用第一条的 --sibling-index（由 JS 仅在检测到不支持时补写）。 */ .trend-row,.dev-row,.topic-item{animation:rowEnter .42s cubic-bezier(.22,.9,.3,1) both; animation-delay:calc((var(--sibling-index,1) - 1) * 26ms); animation-delay:calc((sibling-index() - 1) * 26ms)} @keyframes rowEnter{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}} /* 悬停抬升 + 左侧强调条滑入 */ .trend-row{position:relative;overflow:hidden; transition:transform .22s cubic-bezier(.22,.9,.3,1),box-shadow .22s ease,border-color .22s ease} .trend-row::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px; background:linear-gradient(180deg,var(--blue),var(--teal)); transform:scaleY(0);transform-origin:top;transition:transform .26s cubic-bezier(.22,.9,.3,1)} .trend-row:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--blue) 26%,var(--line)); box-shadow:0 10px 26px -16px rgba(20,38,68,.55)} .trend-row:hover::before{transform:scaleY(1)} /* 前三名：奖牌底色 + 序号金属渐变，一眼看到头部 */ .trend-row.is-top[data-rank="1"]{background:linear-gradient(135deg,color-mix(in srgb,#f0b429 9%,var(--surface)),var(--surface-2,#f7f9fc))} .trend-row.is-top[data-rank="2"]{background:linear-gradient(135deg,color-mix(in srgb,#9aa9bd 11%,var(--surface)),var(--surface-2,#f7f9fc))} .trend-row.is-top[data-rank="3"]{background:linear-gradient(135deg,color-mix(in srgb,#c98a52 10%,var(--surface)),var(--surface-2,#f7f9fc))} .trend-row.is-top .trend-rank,.dev-row.is-top .dev-rank{ font-weight:900;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .trend-row.is-top[data-rank="1"] .trend-rank,.dev-row.is-top[data-rank="1"] .dev-rank{background-image:linear-gradient(135deg,#e0a020,#b8791a)} .trend-row.is-top[data-rank="2"] .trend-rank,.dev-row.is-top[data-rank="2"] .dev-rank{background-image:linear-gradient(135deg,#8b9bb0,#5f6d84)} .trend-row.is-top[data-rank="3"] .trend-rank,.dev-row.is-top[data-rank="3"] .dev-rank{background-image:linear-gradient(135deg,#c98a52,#96603a)} /* 星标错峰闪烁：页面「活着」的核心信号，幅度小、周期长，不刺眼 */ .trend-total .icon{color:var(--gain);animation:starBreath 3.4s ease-in-out infinite; animation-delay:calc((var(--sibling-index,1) - 1) * 180ms); animation-delay:calc((sibling-index() - 1) * 180ms)} @keyframes starBreath{ 0%,100%{opacity:.62;transform:scale(1)} 45%{opacity:1;transform:scale(1.16)} } /* 新增 Star：数字微光呼吸，强调「在涨」 */ .trend-gain.positive{animation:gainBreath 3.8s ease-in-out infinite; animation-delay:calc((var(--sibling-index,1) - 1) * 200ms); animation-delay:calc((sibling-index() - 1) * 200ms)} @keyframes gainBreath{ 0%,100%{text-shadow:0 0 0 rgba(223,141,34,0)} 50%{text-shadow:0 0 12px rgba(223,141,34,.42)} } /* 开发者头像：悬停放大 + 光环 */ .dev-av-link{transition:transform .24s cubic-bezier(.22,.9,.3,1)} .dev-row:hover .dev-av-link{transform:scale(1.06)} .dev-row.is-top .dev-av{box-shadow:0 0 0 2px color-mix(in srgb,var(--gain) 40%,transparent)} .dev-row{transition:background .2s ease} .dev-row:hover{background:color-mix(in srgb,var(--blue) 4%,transparent)} /* 主题卡：图标缓慢自转呼吸 + 悬停箭头右移 */ .topic-logo{transition:transform .3s cubic-bezier(.22,.9,.3,1)} .topic-item:hover .topic-logo{transform:rotate(-6deg) scale(1.08)} .topic-item>.icon{transition:transform .24s ease,color .24s ease} .topic-item:hover>.icon{transform:translateX(3px);color:var(--blue)} /* 关注按钮：按下有回弹，已关注态星标轻跳 */ .trend-follow,.dev-follow{transition:transform .16s ease,border-color .18s,background .18s,color .18s} .trend-follow:active,.dev-follow:active{transform:scale(.94)} /* ---- 4. 骨架屏：加载时就有结构，不是空白 ---- */ .trend-skeleton,.dev-skeleton,.topic-skeleton{display:grid;gap:12px;margin-top:14px} .trend-skeleton{grid-template-columns:1fr 1fr} .topic-skeleton{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px} .sk-row,.sk-dev,.sk-topic{position:relative;overflow:hidden;display:flex;gap:11px; padding:14px;border-radius:12px;border:1px solid var(--line);background:var(--surface-2,#f7f9fc)} .sk-dev{border:0;border-top:1px solid var(--line);border-radius:0;padding:14px 2px} .sk-topic{align-items:center;padding:11px 12px} .sk-row::after,.sk-dev::after,.sk-topic::after{content:'';position:absolute;inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent); transform:translateX(-100%);animation:skSweep 1.5s ease-in-out infinite} .sk-av,.sk-topic>i{width:26px;height:26px;border-radius:7px;flex:0 0 auto; background:var(--surface-3,#eef2f8)} .sk-dev>i{width:40px;height:40px;border-radius:50%;flex:0 0 auto;background:var(--surface-3,#eef2f8)} .sk-lines,.sk-topic>span{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px} .sk-lines>i,.sk-topic>span>i{display:block;height:9px;border-radius:5px;background:var(--surface-3,#eef2f8)} .sk-lines>i:first-child{width:52%} .sk-lines>i:nth-child(2){width:88%} .sk-lines>i:nth-child(3){width:66%} .sk-topic>span>i:first-child{width:46%} .sk-topic>span>i:nth-child(2){width:78%;height:7px} [data-theme="dark"] .sk-row,[data-theme="dark"] .sk-dev,[data-theme="dark"] .sk-topic{background:var(--surface-2);border-color:var(--line)} [data-theme="dark"] .sk-row::after,[data-theme="dark"] .sk-dev::after,[data-theme="dark"] .sk-topic::after{ background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent)} [data-theme="dark"] .sk-av,[data-theme="dark"] .sk-dev>i,[data-theme="dark"] .sk-topic>i, [data-theme="dark"] .sk-lines>i,[data-theme="dark"] .sk-topic>span>i{background:var(--surface-3)} /* ---- 5. 统一空态 ---- */ .empty-panel{display:flex;flex-direction:column;align-items:center;justify-content:center; text-align:center;gap:10px;padding:46px 24px 42px;margin:14px auto 6px;max-width:520px; border-radius:16px;border:1px dashed var(--line-strong,#cfd9e8); background:radial-gradient(120% 100% at 50% 0%,color-mix(in srgb,var(--blue) 5%,transparent),transparent 70%)} .empty-glyph{display:flex;align-items:center;justify-content:center;width:52px;height:52px; border-radius:16px;background:linear-gradient(135deg,color-mix(in srgb,var(--blue) 14%,transparent),color-mix(in srgb,var(--teal) 14%,transparent)); color:var(--blue);animation:emptyFloat 4.2s ease-in-out infinite} .empty-glyph svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.6; stroke-linecap:round;stroke-linejoin:round} @keyframes emptyFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}} .empty-title{margin:0;font-size:15px;font-weight:800;color:var(--ink)} .empty-note{margin:0;font-size:12.5px;line-height:1.7;color:var(--muted);max-width:400px} .empty-cta{display:inline-flex;align-items:center;gap:7px;margin-top:6px; padding:9px 20px;border-radius:11px;border:0;cursor:pointer;font-family:inherit; font-size:12.5px;font-weight:750;color:#fff;text-decoration:none; background:linear-gradient(135deg,#3568f7,#1f49d0); box-shadow:0 8px 20px -10px rgba(53,104,247,.8); transition:transform .18s ease,box-shadow .18s ease} .empty-cta:hover{transform:translateY(-1px);box-shadow:0 12px 26px -10px rgba(53,104,247,.9)} .empty-cta:active{transform:translateY(0) scale(.98)} .empty-cta .icon{width:14px;height:14px;stroke-width:2.2} [data-theme="dark"] .empty-panel{border-color:var(--line-strong); background:radial-gradient(120% 100% at 50% 0%,rgba(122,162,255,.08),transparent 70%)} [data-theme="dark"] .empty-title{color:var(--text)} [data-theme="dark"] .empty-glyph{color:#8fb0ff} /* ---- 6. 关注页工作台 ---- */ .follow-hero{position:relative;overflow:hidden;display:flex;align-items:center; justify-content:space-between;gap:24px;flex-wrap:wrap;margin:20px 0 0; padding:24px 26px;border-radius:20px;color:#fff; background:linear-gradient(118deg,#12235c 0%,#1f49d0 46%,#0eaa87 100%)} .follow-hero::after{content:'';position:absolute;inset:0;pointer-events:none; background:radial-gradient(60% 120% at 88% 10%,rgba(255,255,255,.22),transparent 60%), radial-gradient(50% 100% at 10% 100%,rgba(255,255,255,.12),transparent 60%)} .follow-hero-lead{position:relative;z-index:1;display:flex;align-items:center;gap:15px;min-width:0} .follow-hero-mark{display:flex;align-items:center;justify-content:center;width:46px;height:46px; border-radius:14px;flex:0 0 auto;background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.28)} .follow-hero-mark .icon{width:23px;height:23px;stroke-width:1.8; animation:starBreath 3.6s ease-in-out infinite} .follow-hero h1{margin:0;font-size:24px;font-weight:800;letter-spacing:-.5px;color:#fff} .follow-hero p{margin:4px 0 0;font-size:12.5px;line-height:1.6;color:rgba(255,255,255,.82)} .follow-metrics{position:relative;z-index:1;display:flex;gap:10px;flex-wrap:wrap} .follow-metric{display:flex;flex-direction:column;align-items:center;gap:2px; min-width:78px;padding:10px 14px;border-radius:14px; background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22)} .follow-metric strong{font-size:21px;font-weight:850;line-height:1.1;color:#fff; font-variant-numeric:tabular-nums} .follow-metric span{font-size:10.5px;font-weight:650;color:rgba(255,255,255,.8)} .follow-metric.is-hot{background:rgba(255,255,255,.24);border-color:rgba(255,255,255,.45)} .follow-card{padding:18px 20px 20px;border-radius:var(--radius);background:var(--surface); border:1px solid var(--line);box-shadow:var(--shadow)} .follow-card .follow-grid{margin-top:0} .follow-card .dev-list{margin-top:0} /* 关注页开发者行：独立三列（头像 / 主体 / 按钮）， 不再继承首页四列定义——旧版列数不匹配导致主体被挤成竖排单字。 */ .follow-dev-list .dev-row{grid-template-columns:44px minmax(0,1fr) auto;gap:14px; align-items:start;padding:16px 4px} .follow-dev-list .dev-av{width:44px;height:44px} .follow-dev-list .dev-follow{margin-top:0;align-self:start} .follow-dev-list .dev-why-box{max-width:none} .follow-card .trend-row{grid-template-columns:26px minmax(0,1fr) auto} /* v1.2.0 关注页口径说明：明确与首页同一时间口径，避免读者误以为是另一套统计 */ .follow-note{margin:0 0 12px;font-size:11.5px;font-weight:600;color:var(--muted); display:flex;align-items:center;gap:7px} .follow-note::before{content:'';width:5px;height:5px;border-radius:50%;flex:0 0 auto; background:linear-gradient(135deg,var(--blue),var(--teal))} /* 关注页两组分段控件：分类在左、时间在右，窄屏堆叠 */ .board-toolbar.is-follow{gap:12px} .board-toolbar.is-follow .seg-switch:first-child{flex:0 0 auto} .board-toolbar.is-follow .seg-switch:last-child{margin-left:auto} [data-theme="dark"] .follow-card{background:var(--surface);border-color:var(--line)} [data-theme="dark"] .follow-hero{background:linear-gradient(118deg,#0d1a44 0%,#1b3aa8 46%,#0a7f68 100%)} /* ---- 6b. 数据概览条：真实汇总 + 语言分布 ---- */ .board-pulse{display:grid;grid-template-columns:repeat(3,minmax(0,auto)) minmax(0,1fr); gap:10px;margin:0 0 16px} .pulse-cell{display:flex;flex-direction:column;gap:3px;padding:12px 18px;border-radius:14px; background:var(--surface);border:1px solid var(--line);min-width:120px; box-shadow:0 1px 2px rgba(20,38,68,.04);position:relative;overflow:hidden} .pulse-cell::after{content:'';position:absolute;left:0;top:0;bottom:0;width:3px; background:linear-gradient(180deg,var(--blue),var(--teal));opacity:.5} .pulse-cell.is-gain::after{background:linear-gradient(180deg,#f0b429,var(--gain))} .pulse-cell>span{font-size:10.5px;font-weight:700;letter-spacing:.03em;color:var(--muted)} .pulse-cell>strong{font-size:20px;font-weight:850;line-height:1.15;color:var(--ink); font-variant-numeric:tabular-nums} .pulse-cell.is-gain>strong{color:var(--gain)} .pulse-cell.is-wide{min-width:0} .pulse-langs{display:flex;gap:3px;height:9px;margin-top:5px;border-radius:999px;overflow:hidden} .pulse-langs>i{display:block;border-radius:999px;min-width:6px; animation:langGrow .6s cubic-bezier(.22,.9,.3,1) both} @keyframes langGrow{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}} .pulse-lang-label{font-size:10.5px;font-weight:650;color:var(--text-2);margin-top:5px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} [data-theme="dark"] .pulse-cell{background:var(--surface);border-color:var(--line)} [data-theme="dark"] .pulse-cell>strong{color:var(--text)} [data-theme="dark"] .pulse-cell.is-gain>strong{color:#e0a94a} [data-theme="dark"] .pulse-lang-label{color:var(--text-2)} @media (max-width:900px){ .board-pulse{grid-template-columns:1fr 1fr} .pulse-cell.is-wide{grid-column:1 / -1} } @media (max-width:640px){ /* 三格在两列网格里会让第三格独占半行、右侧留白（窄屏截图）。 窄屏改为「两小格 + 新增合计整行 + 语言整行」，不留半空位。 */ .board-pulse{grid-template-columns:1fr 1fr;gap:8px} .pulse-cell{padding:11px 14px;min-width:0} .pulse-cell>strong{font-size:18px} .pulse-cell.is-gain,.pulse-cell.is-wide{grid-column:1 / -1} .pulse-cell.is-gain{flex-direction:row;align-items:baseline;justify-content:space-between;gap:10px} } /* ---- 6c. 推荐关注：把关注页空白变成有用内容 ---- */ .suggest-block{margin:22px 0 0} .suggest-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px; margin-bottom:12px;flex-wrap:wrap} .suggest-head h3{margin:0;font-size:15px;font-weight:800;color:var(--ink)} .suggest-head span{font-size:11px;font-weight:650;color:var(--muted)} .suggest-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px} .suggest-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:11px;align-items:start; padding:14px;border-radius:14px;border:1px solid var(--line);background:var(--surface); box-shadow:var(--shadow);transition:transform .22s cubic-bezier(.22,.9,.3,1),box-shadow .22s ease,border-color .22s ease} .suggest-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--blue) 26%,var(--line)); box-shadow:0 12px 28px -18px rgba(20,38,68,.6)} .suggest-card .dev-av{width:34px;height:34px} .suggest-card .trend-av{width:26px;height:26px;margin-top:1px} .suggest-main{min-width:0} .suggest-name{display:block;font-size:12.5px;font-weight:750;color:var(--ink); text-decoration:none;overflow-wrap:anywhere;line-height:1.4} .suggest-name:hover{color:var(--blue)} .suggest-why{margin:5px 0 0;font-size:11.5px;line-height:1.6;color:var(--text-2); display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .suggest-gain{display:inline-flex;align-items:baseline;gap:4px;margin-top:6px; font-size:12.5px;font-weight:800;color:var(--gain);font-variant-numeric:tabular-nums} .suggest-gain small{font-size:9.5px;font-weight:650;color:var(--muted)} .suggest-login{display:block;margin-top:6px;font-size:10.5px;font-weight:650;color:var(--muted)} .suggest-card .trend-follow,.suggest-card .dev-follow{margin-top:0;align-self:start;white-space:nowrap} [data-theme="dark"] .suggest-head h3{color:var(--text)} [data-theme="dark"] .suggest-card{background:var(--surface);border-color:var(--line)} [data-theme="dark"] .suggest-name{color:var(--text)} [data-theme="dark"] .suggest-why{color:var(--text-2)} @media (max-width:720px){ .suggest-grid{grid-template-columns:1fr} } @media (prefers-reduced-motion:reduce){ .pulse-langs>i{animation:none} .suggest-card{transition:none} .suggest-card:hover{transform:none} } /* ---- 6d. 面板滚动条统一到品牌色（原来是浏览器灰条，与站点视觉脱节） ---- */ .trend-duo .dev-list,.trend-duo .topic-grid{ scrollbar-width:thin; scrollbar-color:color-mix(in srgb,var(--blue) 30%,transparent) color-mix(in srgb,var(--blue) 6%,transparent)} .trend-duo .dev-list::-webkit-scrollbar,.trend-duo .topic-grid::-webkit-scrollbar{width:9px} .trend-duo .dev-list::-webkit-scrollbar-track,.trend-duo .topic-grid::-webkit-scrollbar-track{ background:color-mix(in srgb,var(--blue) 6%,transparent);border-radius:999px} .trend-duo .dev-list::-webkit-scrollbar-thumb,.trend-duo .topic-grid::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,color-mix(in srgb,var(--blue) 42%,transparent),color-mix(in srgb,var(--teal) 42%,transparent)); border-radius:999px;border:2px solid transparent;background-clip:content-box} .trend-duo .dev-list::-webkit-scrollbar-thumb:hover,.trend-duo .topic-grid::-webkit-scrollbar-thumb:hover{ background:linear-gradient(180deg,color-mix(in srgb,var(--blue) 66%,transparent),color-mix(in srgb,var(--teal) 66%,transparent)); background-clip:content-box} [data-theme="dark"] .trend-duo .dev-list,[data-theme="dark"] .trend-duo .topic-grid{ scrollbar-color:rgba(122,162,255,.34) rgba(122,162,255,.08)} [data-theme="dark"] .trend-duo .dev-list::-webkit-scrollbar-track,[data-theme="dark"] .trend-duo .topic-grid::-webkit-scrollbar-track{background:rgba(122,162,255,.08)} [data-theme="dark"] .trend-duo .dev-list::-webkit-scrollbar-thumb,[data-theme="dark"] .trend-duo .topic-grid::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,rgba(122,162,255,.42),rgba(79,209,179,.42));background-clip:content-box} [data-theme="dark"] .trend-duo .dev-list::-webkit-scrollbar-thumb:hover,[data-theme="dark"] .trend-duo .topic-grid::-webkit-scrollbar-thumb:hover{ background:linear-gradient(180deg,rgba(122,162,255,.66),rgba(79,209,179,.66));background-clip:content-box} /* 页面主滚动条：品牌渐变胶囊，替代系统默认 */ html{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--blue) 34%,transparent) transparent} html::-webkit-scrollbar{width:11px} html::-webkit-scrollbar-track{background:color-mix(in srgb,var(--blue) 4%,transparent)} html::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,color-mix(in srgb,var(--blue) 52%,transparent),color-mix(in srgb,var(--teal) 52%,transparent)); border-radius:999px;border:3px solid transparent;background-clip:content-box} html::-webkit-scrollbar-thumb:hover{ background:linear-gradient(180deg,var(--blue),var(--teal));background-clip:content-box} [data-theme="dark"] html{scrollbar-color:rgba(122,162,255,.4) transparent} [data-theme="dark"] html::-webkit-scrollbar-track{background:rgba(122,162,255,.06)} [data-theme="dark"] html::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,rgba(122,162,255,.5),rgba(79,209,179,.5));background-clip:content-box} /* ---- 6d. 广告横幅：铅笔线稿叠层 ---- 三张 AIGC 铅笔素描（雷达 / 账本放大镜 / 开发者侧影）转成透明白线 WebP， 用 screen 混合叠在各自的渐变上——线稿变成"发光的铅笔线"，与背景同色系融合， 不出现白底方块。两层制造景深：远景虚化淡出、近景清晰，各自以不同速度极缓漂移， 横幅像有呼吸的画而不是一块静态色卡。只动 transform/opacity，不触发重排。 */ .ad-art{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden} .ad-art-ink,.ad-art-haze{position:absolute;inset:-2% -1%;display:block; background-image:var(--ad-art);background-repeat:no-repeat; background-position:right center;background-size:auto 100%; mix-blend-mode:screen} /* 近景：清晰线稿，右侧实、左侧已在素材内渐隐 */ .ad-art-ink{opacity:.5;animation:adArtDrift 26s ease-in-out infinite} /* 远景：同一张图放大 + 虚化 + 更淡，形成景深层次 */ .ad-art-haze{opacity:.26;filter:blur(3.5px);transform:scale(1.14); background-position:78% center;animation:adArtDriftFar 34s ease-in-out infinite} @keyframes adArtDrift{ 0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(-10px,-3px,0) scale(1.015)} } @keyframes adArtDriftFar{ 0%,100%{transform:translate3d(0,0,0) scale(1.14)} 50%{transform:translate3d(9px,4px,0) scale(1.17)} } /* 有插画时网格质感收一点，避免两种纹理打架 */ .v05-banner-slide.has-art::before{opacity:.24} /* 文字侧再压一层同色渐隐，保证标题对比度不受线稿影响 */ .v05-banner-slide.has-art .ad-body{position:relative;z-index:1} .v05-banner-slide.has-art .ad-cta{position:relative;z-index:1} [data-theme="dark"] .ad-art-ink{opacity:.42} [data-theme="dark"] .ad-art-haze{opacity:.2} /* ---- 6e. v1.3.0 首屏之外延迟渲染 ---- 下排两卡与推荐区在首屏之外且内部结构重（几十行名单）。content-visibility:auto 让浏览器在它们接近视口前跳过布局与绘制；必须配 contain-intrinsic-size 占位， 否则离屏时塌成 0 高度会造成滚动条跳动。auto 关键字让浏览器渲染过一次后记住真实尺寸。 首屏内的热榜卡刻意不加——加了反而拖慢首屏。 */ .trend-duo>.card{content-visibility:auto;contain-intrinsic-size:auto none auto 680px} .suggest-block{content-visibility:auto;contain-intrinsic-size:auto none auto 210px} /* 内部滚动区：内容远超面板高度，逐行跳过渲染收益最大。 开发者行高度由内容决定，给 96px 估算；主题行两行文字，给 62px。 */ .trend-duo .dev-list>.dev-row{content-visibility:auto;contain-intrinsic-size:auto none auto 96px} .trend-duo .topic-grid>.topic-item{content-visibility:auto;contain-intrinsic-size:auto none auto 62px} @media (max-width:720px){ .trend-duo>.card{contain-intrinsic-size:auto none auto 560px} } /* ---- 6f. v1.3.0 页面间原生转场 ---- 同源导航（首页 ↔ 关注 ↔ 口径）由浏览器做淡入淡出，不再是硬切。 只在未要求减少动效时启用；不支持的浏览器直接常规跳转，无副作用。 */ @media (prefers-reduced-motion:no-preference){ @view-transition{navigation:auto} } ::view-transition-old(root){animation:vtOut .18s ease-in both} ::view-transition-new(root){animation:vtIn .26s cubic-bezier(.22,.9,.3,1) both} @keyframes vtOut{to{opacity:0}} @keyframes vtIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} /* 顶栏不参与淡出，导航时保持视觉锚点 */ .site-header{view-transition-name:site-header} /* ---- 7. 响应式 ---- */ @media (max-width:900px){ .board-toolbar{align-items:flex-start;flex-direction:column;gap:12px} .seg-switch{width:100%} .seg-btn{min-width:0;padding:8px 6px;font-size:12.5px} .trend-skeleton{grid-template-columns:1fr} .follow-hero{padding:20px} .follow-metrics{width:100%} .follow-metric{flex:1 1 0;min-width:0} .board-toolbar.is-follow .seg-switch:last-child{margin-left:0} /* 窄屏横幅变高变窄：线稿收到右侧、淡一点，别压住文案 */ .ad-art-ink{opacity:.34;background-size:auto 116%} .ad-art-haze{opacity:.16} } @media (max-width:720px){ .board-h1{font-size:20px} .follow-hero h1{font-size:20px} .follow-hero-lead{gap:12px} .follow-hero-mark{width:40px;height:40px} .follow-dev-list .dev-row{grid-template-columns:38px minmax(0,1fr);gap:10px} .follow-dev-list .dev-av{width:38px;height:38px} .follow-dev-list .dev-follow{grid-column:2;justify-self:start;margin-top:8px} .empty-panel{padding:34px 18px 30px} } /* ============================================================ v1.3.1 说明页（数字说明 / 关于 / 隐私） 读者是普通人不是研发：一句话结论 + 真实数字示例 + 卡片对照， 不再堆表格与接口名。配色沿用站点蓝→青，深浅两套都成立。 ============================================================ */ .prose{max-width:860px;padding:0;background:transparent;border:0;box-shadow:none} .doc-head{position:relative;overflow:hidden;padding:30px 32px 28px;border-radius:20px; color:#fff;background:linear-gradient(118deg,#12235c 0%,#1f49d0 48%,#0eaa87 100%)} .doc-head::after{content:'';position:absolute;inset:0;pointer-events:none; background:radial-gradient(58% 120% at 88% 6%,rgba(255,255,255,.22),transparent 62%), radial-gradient(46% 100% at 8% 104%,rgba(255,255,255,.12),transparent 60%)} .doc-kicker{position:relative;z-index:1;display:inline-flex;align-items:center; padding:4px 11px;border-radius:999px;font-size:11px;font-weight:750;letter-spacing:.06em; background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3)} .doc-head h1{position:relative;z-index:1;margin:13px 0 0;font-size:26px;line-height:1.32; font-weight:800;letter-spacing:-.4px;color:#fff} .doc-lede{position:relative;z-index:1;margin:11px 0 0;font-size:13.5px;line-height:1.85; color:rgba(255,255,255,.88);max-width:64ch} .doc-block{margin:22px 0 0;padding:24px 28px 26px;border-radius:18px; background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)} .doc-block h2{margin:0;font-size:16.5px;font-weight:800;letter-spacing:-.2px;color:var(--ink); display:flex;align-items:center;gap:9px} .doc-block h2::before{content:'';width:4px;height:16px;border-radius:3px;flex:0 0 auto; background:linear-gradient(180deg,var(--blue),var(--teal))} .doc-block p{margin:12px 0 0;font-size:13.5px;line-height:1.9;color:var(--text-2,#5d6d84)} .doc-block p:first-of-type{margin-top:14px} .doc-block b{color:var(--ink);font-weight:750} .doc-block a{color:var(--blue);font-weight:650;text-decoration:none; border-bottom:1px solid color-mix(in srgb,var(--blue) 32%,transparent)} .doc-block a:hover{border-bottom-color:var(--blue)} .doc-block a:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:3px} /* 真实数字示例：让人一眼看懂「总数」和「新增」的区别 */ .num-demo{margin:16px 0 0;border-radius:14px;overflow:hidden; border:1px solid var(--line);background:var(--surface-2,#f7f9fc)} .num-demo-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap; padding:15px 18px;border-bottom:1px solid var(--line);background:var(--surface)} .num-demo-name{font-size:14px;font-weight:750;color:var(--blue);min-width:0} .num-demo-total{display:inline-flex;align-items:center;gap:5px;margin-left:auto; font-size:13px;font-weight:700;color:var(--muted)} .num-demo-total .icon{width:15px;height:15px;color:var(--gain)} .num-demo-gain{display:inline-flex;align-items:baseline;gap:5px; padding:5px 11px;border-radius:9px;font-size:15px;font-weight:850; color:var(--gain);background:color-mix(in srgb,var(--gain) 12%,transparent); font-variant-numeric:tabular-nums} .num-demo-gain small{font-size:10px;font-weight:700;color:var(--muted)} .num-demo-legend{padding:14px 18px 16px;display:grid;gap:8px} .num-demo-legend p{margin:0;font-size:12.5px;line-height:1.75} /* 卡片对照：四个档位 / 三块内容 */ .doc-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:16px 0 0} .doc-cards.is-three{grid-template-columns:repeat(3,minmax(0,1fr))} .doc-card{display:flex;flex-direction:column;gap:5px;padding:14px 15px;border-radius:13px; background:var(--surface-2,#f7f9fc);border:1px solid var(--line);position:relative;overflow:hidden} .doc-card::after{content:'';position:absolute;left:0;top:0;bottom:0;width:3px; background:linear-gradient(180deg,var(--blue),var(--teal));opacity:.55} .doc-card b{font-size:14px;font-weight:800;color:var(--ink)} /* 卡片说明字号小，用比 muted 更深一档的灰，保证 ≥4.5:1（实测 muted 只有 4.48） */ .doc-card span{font-size:11.5px;line-height:1.65;color:#5a6880} /* 「—」「空」「旧数据」三种状态，用看得见的符号解释 */ .doc-notes{display:grid;gap:12px;margin:16px 0 0} .doc-notes p{display:flex;align-items:flex-start;gap:11px;margin:0; padding:13px 15px;border-radius:12px;background:var(--surface-2,#f7f9fc); border:1px solid var(--line);font-size:13px;line-height:1.8} .doc-dash,.doc-empty,.doc-old,.doc-mark{flex:0 0 auto;display:grid;place-items:center; width:26px;height:26px;border-radius:8px;font-size:14px;font-weight:800; background:var(--surface);border:1px solid var(--line);color:var(--muted);margin-top:1px} .doc-empty::after{content:'';width:11px;height:11px;border-radius:3px; border:1.5px dashed color-mix(in srgb,var(--muted) 60%,transparent)} .doc-old::after{content:'';width:12px;height:12px;border-radius:50%; border:2px solid color-mix(in srgb,var(--blue) 55%,transparent);border-top-color:transparent} .doc-mark{color:var(--blue)} /* 清单：短句，一条一件事 */ .doc-list{margin:15px 0 0;padding:0;list-style:none;display:grid;gap:11px} .doc-list li{position:relative;padding-left:20px;font-size:13.5px;line-height:1.85; color:var(--text-2,#5d6d84)} .doc-list li::before{content:'';position:absolute;left:2px;top:.72em;width:7px;height:7px; border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--teal));opacity:.75} /* 文案来源标签：与热榜里的琥珀盒同一套语义 */ .doc-tags{display:grid;grid-template-columns:auto minmax(0,1fr);gap:9px 13px; align-items:center;margin:16px 0 0} .doc-tag{justify-self:start;padding:4px 11px;border-radius:999px;font-size:11.5px;font-weight:800; white-space:nowrap;border:1px solid transparent} .doc-tag.is-verified{color:#0b7a5f;background:color-mix(in srgb,var(--teal) 14%,transparent); border-color:color-mix(in srgb,var(--teal) 32%,transparent)} .doc-tag.is-ai{color:#96601a;background:color-mix(in srgb,var(--gain) 15%,transparent); border-color:color-mix(in srgb,var(--gain) 34%,transparent)} .doc-tag.is-desc{color:var(--muted);background:var(--surface-2,#f2f5fa);border-color:var(--line)} .doc-tag-desc{font-size:12.5px;line-height:1.7;color:var(--text-2,#5d6d84)} .doc-foot-note{background:var(--surface-2,#f7f9fc)} .doc-foot-note p{font-size:12.5px;color:var(--muted)} .doc-foot-note p:first-of-type{margin-top:0} /* 页头是深底白字，必须挡住上面那条「深色主题下所有 .prose p 变灰」的通用规则， 否则浅色模式的导语会被改成深灰、压在蓝底上几乎看不见（实测对比度 1.3:1）。 这里用 .prose .doc-lede 提高特异性，两种主题都保持白字。 */ .prose .doc-head .doc-lede{color:rgba(255,255,255,.9)} .prose .doc-head h1{color:#fff} .prose .doc-head .doc-kicker{color:#fff} [data-theme="dark"] .doc-head{background:linear-gradient(118deg,#0d1a44 0%,#1b3aa8 48%,#0a7f68 100%)} [data-theme="dark"] .doc-block{background:var(--surface);border-color:var(--line)} [data-theme="dark"] .doc-block h2,[data-theme="dark"] .doc-block b, [data-theme="dark"] .doc-card b{color:var(--text)} /* 上面第 626 行那条 `.prose p{color:#4a5768 !important}` 会连深色一起压住 （实测深色正文只有 2.33:1，看不清）。这里用同等强度把说明页正文在深色下拉回亮色， 并排除深底页头，避免白字被改灰。 */ [data-theme="dark"] .prose .doc-block p:not(.doc-lede), [data-theme="dark"] .prose .doc-list li, [data-theme="dark"] .prose .doc-notes p, [data-theme="dark"] .prose .doc-tag-desc, [data-theme="dark"] .prose .num-demo-legend p{color:var(--text-2)!important} [data-theme="dark"] .prose .doc-block b, [data-theme="dark"] .prose .doc-notes b{color:var(--text)!important} /* 深色卡片说明同样提亮一档（原 muted 在深底上只有 4.36:1） */ [data-theme="dark"] .doc-card span{color:#8b9bb2} [data-theme="dark"] .doc-card,[data-theme="dark"] .doc-notes p, [data-theme="dark"] .num-demo,[data-theme="dark"] .doc-foot-note{background:var(--surface-2);border-color:var(--line)} [data-theme="dark"] .num-demo-row,[data-theme="dark"] .doc-dash, [data-theme="dark"] .doc-empty,[data-theme="dark"] .doc-old, [data-theme="dark"] .doc-mark{background:var(--surface-3);border-color:var(--line)} [data-theme="dark"] .doc-tag.is-verified{color:#5fd6b4} [data-theme="dark"] .doc-tag.is-ai{color:#e2b463} [data-theme="dark"] .doc-tag.is-desc{background:var(--surface-3);color:var(--text-2)} @media (max-width:720px){ .doc-head{padding:24px 20px 22px;border-radius:16px} .doc-head h1{font-size:21px} .doc-lede{font-size:12.5px} .doc-block{padding:20px 18px 22px;border-radius:15px} .doc-block h2{font-size:15.5px} .doc-cards,.doc-cards.is-three{grid-template-columns:repeat(2,minmax(0,1fr))} .num-demo-row{gap:10px} .num-demo-total{margin-left:0} .doc-tags{grid-template-columns:minmax(0,1fr);gap:5px} .doc-tag-desc{margin-bottom:7px} } @media (max-width:420px){ .doc-cards,.doc-cards.is-three{grid-template-columns:minmax(0,1fr)} } /* 尊重系统「减少动效」：全部呼吸/入场/脉冲一律关闭，内容照常显示 */ @media (prefers-reduced-motion:reduce){ .trend-row,.dev-row,.topic-item{animation:none} .trend-total .icon,.trend-gain.positive,.live-badge.is-live .live-dot, .empty-glyph,.follow-hero-mark .icon{animation:none} .seg-thumb{transition:none} .trend-row,.trend-row::before,.dev-av-link,.topic-logo,.topic-item>.icon{transition:none} .trend-row:hover{transform:none} .trend-row:hover::before{transform:scaleY(1)} .sk-row::after,.sk-dev::after,.sk-topic::after{animation:none} .ad-art-ink,.ad-art-haze{animation:none} .ag-trail,.ag-runners,.ag-nodes{animation:none} } /* 减少动效时 SMIL 也要停：CSS 关不掉 animateMotion， 由前端在检测到该偏好时移除运动元素（见 site.js applyMotionPreference）。 */