Files
code-utils/frontend/src/style.css
李琦 7c4109f687 feat: 提交详情能看 diff,也能丢给 AI 审这一次改动。文件检查可单独排除路径,TODO 只认大写,避免把 todo 表和模块当成待办标记。
热力图按容器宽度铺满一年,不再横向滚动。托盘右键换成可换皮肤的弹层;更新下载显示进度,退出后再由脚本拉起安装器,避免还占着 exe。
2026-08-19 15:46:03 +08:00

2 lines
14 KiB
CSS

@font-face{font-family:Nunito;src:url('./assets/fonts/nunito-v16-latin-regular.woff2')}*{box-sizing:border-box}html{--bg:#0e141d;--side:#151b24;--surface:#19212b;--surface-2:#202838;--surface-3:#252e40;--border:#303949;--text:#f4f5f8;--muted:#929bac;--primary:#7367f5;--green:#43c996;--blue:#4f9df5;--red:#f05e68;--yellow:#e7bd35;background:var(--bg);color:var(--text);font-family:Nunito,"Segoe UI",sans-serif;letter-spacing:0}html[data-theme=light]{--bg:#f4f6fa;--side:#fff;--surface:#fff;--surface-2:#f6f7fa;--surface-3:#edf0f6;--border:#dce1ea;--text:#111827;--muted:#526071;--primary:#6557e8}body{margin:0;min-width:960px}html.tray-window,html.tray-window body,html.tray-window #app{min-width:0!important;width:100%!important;height:100%!important;margin:0;overflow:hidden!important;background:transparent!important}button,input,textarea,select{font:inherit;letter-spacing:0}.shell{min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:232px;background:var(--side);border-right:1px solid var(--border);padding:24px 16px;display:flex;flex-direction:column;z-index:10}.brand{height:52px;display:flex;align-items:center;gap:14px;font-size:18px;padding:0 8px}.brand-mark{display:grid;place-items:center;width:40px;height:40px;background:var(--primary);border-radius:8px;color:white}.brand-mark svg{width:23px}.sidebar nav{display:grid;gap:8px;margin-top:35px}.sidebar nav a{height:54px;display:flex;align-items:center;gap:16px;padding:0 18px;color:var(--muted);text-decoration:none;border-radius:7px;transition:background .2s,color .2s}.sidebar nav a:hover,.sidebar nav a.active{background:var(--surface-3);color:var(--text)}.sidebar nav a.active{color:#867eff}.sidebar svg{width:21px}.version{margin-top:auto;border-top:1px solid var(--border);padding:24px 8px 0;color:var(--muted);font-size:13px}.version i{display:inline-block;width:8px;height:8px;border-radius:50%;background:#26c795;margin-right:8px}main{margin-left:232px;min-height:100vh;background:radial-gradient(circle at 100% 0,rgba(91,86,192,.12),transparent 34%),var(--bg)}.page{padding:34px 42px 60px;max-width:1540px;margin:auto}.page-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:30px}.page h1{font-size:30px;margin:0 0 6px}.page-head p,.project-head p{margin:0;color:var(--muted)}.actions{display:flex;align-items:center;gap:12px}.btn{height:40px;border:1px solid var(--border);border-radius:7px;padding:0 16px;display:inline-flex;align-items:center;justify-content:center;gap:9px;color:var(--text);background:var(--surface-2);cursor:pointer;transition:border-color .2s,background .2s;white-space:nowrap;flex-shrink:0;line-height:1}.btn svg{width:17px}.btn:hover{border-color:var(--primary)}.btn.primary{background:var(--primary);border-color:var(--primary);color:white;box-shadow:0 8px 18px rgba(115,103,245,.25)}.btn.danger{background:#ef4444;border-color:#ef4444;color:white}.stats-grid{display:grid;gap:16px;margin-bottom:30px}.stats-grid.three{grid-template-columns:repeat(3,1fr)}.stats-grid.four{grid-template-columns:repeat(4,1fr)}.stats-grid.five{grid-template-columns:repeat(5,1fr)}.stat-card{height:124px;border:1px solid var(--border);background:var(--surface);border-radius:8px;padding:23px 24px;display:flex;align-items:center;gap:16px}.stat-icon{width:48px;height:48px;border-radius:8px;display:grid;place-items:center;background:rgba(115,103,245,.18);color:#8178ff}.stat-icon.green{background:rgba(67,201,150,.16);color:var(--green)}.stat-icon.blue{background:rgba(79,157,245,.16);color:var(--blue)}.stat-icon.red{background:rgba(240,94,104,.16);color:var(--red)}.stat-icon svg{width:22px}.stat-card strong{font-size:29px;display:block}.stat-card small{display:block;color:var(--muted);margin-top:5px}.section-head{display:flex;align-items:center;justify-content:space-between}.section-head h2,.panel h2{font-size:18px;margin:0}.search{height:38px;width:280px;border:1px solid var(--border);background:var(--surface-2);border-radius:7px;display:flex;align-items:center;padding:0 13px;color:var(--muted)}.search svg{width:17px}.search input{border:0;outline:0;background:transparent;color:var(--text);width:100%;padding-left:9px}.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:20px}.project-card{min-height:280px;border:1px solid var(--border);background:var(--surface);border-radius:8px;padding:24px;cursor:pointer;transition:border-color .2s,background .2s}.project-card:hover{border-color:#555f77;background:var(--surface-2)}.project-title{display:flex;justify-content:space-between}.project-title h3{margin:0 0 5px}.project-title p{color:var(--muted);font-size:12px;margin:0;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:280px}.icon-actions{display:flex}.icon-actions button,.toast button{border:0;background:transparent;color:var(--muted);cursor:pointer;padding:5px}.icon-actions svg{width:16px}.metric-row{display:grid;grid-template-columns:repeat(3,1fr);margin:27px 0 17px}.metric-row b{display:block;font-size:25px}.metric-row span{font-size:12px;color:var(--muted)}.language-bar{height:6px;border-radius:4px;overflow:hidden;display:flex;background:var(--surface-3)}.legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:15px;color:var(--muted);font-size:11px;min-height:34px}.legend i{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:5px}.project-card footer{border-top:1px solid var(--border);margin-top:13px;padding-top:13px;display:flex;gap:14px;color:var(--muted);font-size:12px}.positive{color:var(--green)!important}.negative{color:var(--red)!important}.add-card{min-height:280px;border:1px dashed #3a4558;background:transparent;border-radius:8px;color:var(--muted);display:grid;place-content:center;gap:15px;cursor:pointer}.add-card span{width:48px;height:48px;background:var(--surface-2);display:grid;place-items:center;border-radius:50%;margin:auto}.overlay{position:fixed;inset:0;background:rgba(0,0,0,.66);backdrop-filter:blur(5px);z-index:30;display:grid;place-items:center}.modal{width:500px;background:var(--surface);border:1px solid var(--border);border-radius:8px}.modal header,.modal footer{padding:20px 24px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between}.modal footer{border:0;border-top:1px solid var(--border);justify-content:flex-end}.modal header h2{margin:0}.modal header button{border:0;background:transparent;color:var(--muted);font-size:25px;cursor:pointer}.modal>label{display:block;margin:20px 24px 0;font-size:13px}.modal input,.modal textarea,.rule-add input,.rule-add select,.form-panel select{width:100%;background:var(--surface-2);border:1px solid var(--border);border-radius:7px;color:var(--text);padding:10px 12px;margin-top:7px;outline:none}.modal textarea{height:80px;resize:vertical}.browse{display:flex;gap:8px}.browse input{margin-top:7px}.browse .btn{margin-top:7px;flex:none}.form-error{color:var(--red);padding:0 24px}.project-head{display:flex;align-items:center;gap:30px;background:rgba(8,12,19,.65);padding:24px;margin:-10px 0 12px}.project-head h1{font-size:25px}.back{border:0;background:transparent;color:var(--text);display:flex;align-items:center;gap:7px;cursor:pointer}.back svg{width:18px}.tabs{display:flex;gap:3px;background:var(--surface);width:max-content;padding:4px;border-radius:8px;margin:10px 0 25px}.tabs button{height:37px;padding:0 14px;border:0;background:transparent;color:var(--muted);border-radius:7px;display:flex;align-items:center;gap:8px;cursor:pointer}.tabs svg{width:18px}.tabs button.active{background:var(--primary);color:white}.split{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:22px}.panel{border:1px solid var(--border);background:var(--surface);border-radius:8px;padding:24px;margin-bottom:22px}.panel>.chart{height:310px}.language-list{height:310px;overflow:auto;margin-top:14px}.language-list>div{display:grid;grid-template-columns:1fr auto auto;gap:20px;background:var(--surface-2);padding:13px;margin-bottom:8px;border-radius:7px}.language-list i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px}.language-list span{color:var(--muted)}.center-action{text-align:center}.heat-panel{height:220px}.heatmap{display:grid;grid-template-rows:repeat(7,12px);grid-auto-flow:column;grid-auto-columns:12px;gap:4px;overflow:hidden;margin-top:25px}.heatmap i{background:#2b3441;border-radius:2px}.heatmap i.l1{background:#28594b}.heatmap i.l2{background:#318266}.heatmap i.l3{background:#3cab7d}.heatmap i.l4{background:#4dd69b}.branch{height:76px;background:var(--surface-2);border-radius:7px;margin-top:10px;padding:12px 16px;display:grid;grid-template-columns:1fr auto;align-items:center}.branch span{display:flex;gap:9px;align-items:center;font-weight:bold}.branch svg{width:17px}.branch .current{color:var(--green)}.branch small{grid-column:1;color:var(--muted)}.branch code{grid-row:1/3;grid-column:2}.commit{min-height:76px;background:var(--surface-2);border-radius:7px;margin-top:10px;padding:12px;display:grid;grid-template-columns:42px 1fr auto auto;gap:9px;align-items:center}.avatar{width:36px;height:36px;border-radius:8px;background:var(--primary);color:#fff;display:grid;place-items:center;font-weight:bold}.commit div{min-width:0}.commit div b,.commit small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.commit small,.contributor small{color:var(--muted);margin-top:5px}.trend .chart{height:250px}.segments{display:flex;background:var(--surface-2);padding:3px;border-radius:7px}.segments button{border:0;background:transparent;color:var(--muted);height:31px;padding:0 13px;border-radius:5px;cursor:pointer}.segments button.active{background:var(--primary);color:white}.contributor{height:65px;background:var(--surface-2);display:grid;grid-template-columns:35px 45px 1fr auto auto auto;gap:12px;align-items:center;padding:0 15px;margin-top:8px;border-radius:7px}.contributor div strong,.contributor div small{display:block}.file-tree{height:620px;overflow:auto;margin-top:18px}.file-tree>div{height:32px;display:flex;align-items:center;gap:7px}.file-tree svg{width:15px;color:var(--yellow)}.file-tree small{margin-left:auto;color:var(--muted)}.folder-size{display:grid;grid-template-columns:1fr auto;gap:8px 20px;background:var(--surface-2);padding:14px;margin-top:10px;border-radius:7px}.folder-size span{color:var(--muted);font-size:12px}.folder-size i{height:5px;background:#3b4353;border-radius:3px}.folder-size em{display:block;height:100%;background:var(--primary);border-radius:3px}.folder-size strong{font-size:13px}.large-file{display:flex;justify-content:space-between;background:var(--surface-2);padding:14px;margin-top:10px}.large-file b,.large-file small{display:block}.large-file small{color:var(--muted);margin-top:5px}.large-file>strong{color:var(--red)}.extension-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:15px}.extension-grid>div{background:var(--surface-2);padding:16px;display:flex;gap:10px;justify-content:space-between}.extension-grid code{color:#8178ff}.extension-grid span{color:var(--muted)}.empty{height:100%;min-height:130px;display:grid;place-content:center;text-align:center;color:var(--muted);gap:10px}.empty svg{margin:auto;width:38px}.taskbar{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:25;width:460px;background:var(--surface-3);border:1px solid var(--border);box-shadow:0 12px 30px rgba(0,0,0,.3);padding:12px 15px;border-radius:8px;display:grid;grid-template-columns:1fr 60px;gap:7px}.taskbar div:first-child{display:flex;gap:10px}.taskbar span{color:var(--muted)}.taskbar .progress{grid-column:1/3;height:4px;background:#3b4353}.taskbar .progress i{display:block;height:100%;background:var(--primary)}.toast{position:fixed;right:24px;top:22px;z-index:40;background:var(--surface-3);border:1px solid var(--border);padding:13px 15px;border-radius:7px}.toast.success{border-color:var(--green)}.toast.error{border-color:var(--red)}.toggle{display:flex;align-items:center;gap:7px;color:var(--primary)}.log-panel{min-height:400px}.log{min-height:96px;border-left:3px solid var(--blue);background:var(--surface-2);padding:15px 16px;margin-bottom:8px;display:grid;grid-template-columns:34px 1fr auto;gap:14px}.log.warning{border-color:var(--yellow)}.log.error{border-color:var(--red)}.log>span{width:30px;height:30px;background:rgba(79,157,245,.13);display:grid;place-items:center;border-radius:6px;color:var(--blue)}.log svg{width:15px}.log small,.log b,.log code{display:block}.log small{color:var(--muted)}.log code{background:rgba(0,0,0,.22);padding:8px;margin-top:7px}.log time{color:var(--muted);font-size:12px}.settings-page{max-width:1000px}.settings-tabs{width:100%;display:grid;grid-auto-flow:column;grid-auto-columns:1fr}.settings-tabs button{justify-content:center}.rule-add h2,.form-panel h2{display:flex;gap:10px;align-items:center}.rule-add h2 svg,.form-panel h2 svg{width:20px;color:var(--primary)}.rule-add>div{display:grid;grid-template-columns:1fr 240px auto;gap:15px;margin-top:20px}.rule-add input,.rule-add select{margin:0}.rule-add>small{color:var(--muted);display:block;margin-top:12px}.rule-group h2 small{color:var(--muted);font-weight:normal}.rule-group>div{display:flex;flex-wrap:wrap;gap:8px;border-top:1px solid var(--border);padding-top:15px;margin-top:15px}.rule-group button{border:0;background:var(--surface-3);color:var(--text);border-radius:7px;padding:8px 10px;display:flex;align-items:center;gap:7px;cursor:pointer}.rule-group button.builtin{cursor:default}.rule-group button small{color:#8178ff}.rule-group svg{width:13px}.form-panel label{display:grid;grid-template-columns:180px 1fr;align-items:center;margin-top:18px}.db-path{background:var(--surface-2);padding:18px;margin:20px 0}.db-path code{color:#8178ff}.migrate{height:78px}.danger-zone h2{color:var(--red);display:flex;gap:9px}.danger-zone h2 svg{width:20px}.danger-zone p{color:var(--muted)}.danger-zone>div{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.danger-zone button{border:1px solid var(--border);background:var(--surface-2);color:var(--text);padding:20px;text-align:left;display:flex;gap:14px;align-items:center;border-radius:8px;cursor:pointer}.danger-zone button.danger{border-color:#713947}.danger-zone svg{width:25px}.danger-zone b,.danger-zone small{display:block}.danger-zone small{color:var(--muted);margin-top:5px}@media(max-width:1150px){.sidebar{width:72px}.brand b,.sidebar nav span{display:none}.brand{padding:0}.sidebar nav a{justify-content:center;padding:0}.version{font-size:0}.version i{margin:0}main{margin-left:72px}.project-grid{grid-template-columns:repeat(2,1fr)}.stats-grid.five{grid-template-columns:repeat(3,1fr)}.split{grid-template-columns:1fr}.extension-grid{grid-template-columns:repeat(3,1fr)}}@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}