commit-guardian
Version:
Interactive CLI tool with browser-based GitHub-style diff viewer for reviewing and approving git changes before commit. Features React-based UI, approval workflow, line comments, and safe commit protection.
2 lines (1 loc) • 3.59 kB
CSS
*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.4;background-color:#0d1117;color:#e6edf3;font-size:13px;min-height:100vh}code,pre{font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace}.container{max-width:1200px;margin:0 auto}.header{border-bottom:1px solid #30363d;background:#161b22;padding:16px 0}.header-content{display:flex;justify-content:space-between;align-items:center;padding:0 16px}.header-title{display:flex;align-items:center;gap:12px}.header-title h1{font-size:18px;font-weight:600;color:#e6edf3}.header-stats{display:flex;align-items:center;gap:24px;font-size:12px;color:#8b949e}.header-stat{display:flex;align-items:center;gap:4px}.diff-container{border:1px solid #30363d;border-radius:6px;background:#161b22;margin-bottom:16px}.diff-header{padding:12px 16px;background:#21262d;border-bottom:1px solid #30363d;cursor:pointer;display:flex;align-items:center;gap:8px;font-weight:500;color:#e6edf3}.diff-header:hover{background:#30363d}.diff-content{font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:12px;line-height:1.45;overflow-x:auto}.diff-line{display:flex;position:relative;min-width:100%;width:-moz-max-content;width:max-content}.diff-line:hover{background:#21262d}.diff-line-number{padding:2px 8px;background:#161b22;color:#8b949e;min-width:60px;text-align:right;border-right:1px solid #30363d;-webkit-user-select:none;-moz-user-select:none;user-select:none}.diff-line-content{flex:1;padding:2px 8px;white-space:pre;min-width:0}.diff-line-add{background:#2ea04326}.diff-line-add .diff-line-content{color:#3fb950}.diff-line-del{background:#f8514926}.diff-line-del .diff-line-content{color:#f85149}.diff-line-header{background:#21262d;color:#8b949e}.btn{padding:8px 16px;border-radius:6px;font-weight:500;cursor:pointer;transition:all .15s;border:1px solid;display:inline-flex;align-items:center;gap:4px}.btn-primary{background:#238636;border-color:#238636;color:#fff}.btn-primary:hover:not(:disabled){background:#2ea043}.btn-danger{background:#da3633;border-color:#da3633;color:#fff}.btn-danger:hover:not(:disabled){background:#f85149}.btn:disabled{opacity:.5;cursor:not-allowed}.input-field{background:#0d1117;border:1px solid #30363d;border-radius:6px;color:#e6edf3;padding:8px 12px;font-size:13px;resize:none;font-family:inherit}.input-field:focus{outline:none;border-color:#238636;box-shadow:0 0 0 2px #23863633}.action-panel{position:fixed;bottom:0;left:0;right:0;background:#161b22;border-top:1px solid #30363d;padding:12px 16px;box-shadow:0 -4px 16px #0006}.action-content{max-width:1200px;margin:0 auto;display:flex;gap:12px;align-items:end}.action-field{flex:1}.action-field label{display:block;font-size:11px;font-weight:500;color:#8b949e;margin-bottom:4px}.action-field textarea{height:36px;width:100%}.action-buttons{display:flex;gap:8px;flex-shrink:0}.loading{display:flex;flex-direction:column;align-items:center;gap:16px;padding:32px;color:#8b949e}.spinner{width:32px;height:32px;border:2px solid #30363d;border-top-color:#238636;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.diff-line:hover .comment-btn{opacity:1}.diff-content::-webkit-scrollbar{height:8px}.diff-content::-webkit-scrollbar-track{background:#21262d}.diff-content::-webkit-scrollbar-thumb{background:#30363d;border-radius:4px}.diff-content::-webkit-scrollbar-thumb:hover{background:#484f58}.text-green{color:#3fb950}.text-red{color:#f85149}.text-muted{color:#8b949e}.pb-32{padding-bottom:128px}