Spaces:
Sleeping
Sleeping
| *, | |
| *::before, | |
| *::after { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| :root { | |
| --bg: #0e1117; | |
| --surface: #161b22; | |
| --border: #30363d; | |
| --text: #e6edf3; | |
| --text-muted: #8b949e; | |
| --accent: #58a6ff; | |
| --accent-hover: #79c0ff; | |
| --error: #f85149; | |
| --diff-add-bg: rgba(46, 160, 67, 0.15); | |
| --diff-add-fg: #3fb950; | |
| --diff-del-bg: rgba(248, 81, 73, 0.15); | |
| --diff-del-fg: #f85149; | |
| --diff-info-fg: #58a6ff; | |
| --radius: 8px; | |
| } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; | |
| background: var(--bg); | |
| color: var(--text); | |
| line-height: 1.6; | |
| min-height: 100vh; | |
| } | |
| main { | |
| max-width: 860px; | |
| margin: 0 auto; | |
| padding: 48px 20px; | |
| } | |
| .app-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 16px; | |
| margin-bottom: 8px; | |
| } | |
| .logo { | |
| width: 56px; | |
| height: 56px; | |
| border-radius: 12px; | |
| flex-shrink: 0; | |
| } | |
| h1 { | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| margin-bottom: 2px; | |
| } | |
| .subtitle { | |
| color: var(--text-muted); | |
| margin-bottom: 0; | |
| } | |
| .resources { | |
| display: flex; | |
| gap: 16px; | |
| margin-bottom: 28px; | |
| } | |
| .resources a { | |
| color: var(--accent); | |
| font-size: 0.85rem; | |
| text-decoration: none; | |
| transition: color 0.15s; | |
| } | |
| .resources a:hover { | |
| color: var(--accent-hover); | |
| text-decoration: underline; | |
| } | |
| /* ---------- Form ---------- */ | |
| .input-row { | |
| display: flex; | |
| gap: 8px; | |
| } | |
| #url-input { | |
| flex: 1; | |
| padding: 10px 14px; | |
| font-size: 0.95rem; | |
| background: var(--surface); | |
| color: var(--text); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| outline: none; | |
| transition: border-color 0.15s; | |
| } | |
| #url-input:focus { | |
| border-color: var(--accent); | |
| } | |
| #submit-btn { | |
| padding: 10px 20px; | |
| font-size: 0.95rem; | |
| font-weight: 600; | |
| color: #fff; | |
| background: var(--accent); | |
| border: none; | |
| border-radius: var(--radius); | |
| cursor: pointer; | |
| white-space: nowrap; | |
| transition: background 0.15s; | |
| } | |
| #submit-btn:hover:not(:disabled) { | |
| background: var(--accent-hover); | |
| } | |
| #submit-btn:disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed; | |
| } | |
| /* ---------- Errors ---------- */ | |
| .error { | |
| color: var(--error); | |
| font-size: 0.9rem; | |
| margin-top: 10px; | |
| } | |
| /* ---------- Samples ---------- */ | |
| #samples { | |
| margin-top: 20px; | |
| } | |
| .samples-label { | |
| font-size: 0.85rem; | |
| color: var(--text-muted); | |
| margin-bottom: 10px; | |
| } | |
| .samples-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); | |
| gap: 8px; | |
| } | |
| .sample-btn { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| padding: 8px 12px; | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| cursor: pointer; | |
| text-align: left; | |
| transition: border-color 0.15s, background 0.15s; | |
| } | |
| .sample-btn:hover { | |
| border-color: var(--accent); | |
| background: rgba(88, 166, 255, 0.08); | |
| } | |
| .sample-lang { | |
| font-size: 0.7rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| color: var(--bg); | |
| background: var(--accent); | |
| padding: 2px 6px; | |
| border-radius: 4px; | |
| white-space: nowrap; | |
| } | |
| .sample-name { | |
| font-size: 0.82rem; | |
| color: var(--text); | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| /* ---------- Metadata bar ---------- */ | |
| #meta { | |
| display: flex; | |
| gap: 12px; | |
| flex-wrap: wrap; | |
| margin-top: 20px; | |
| padding: 10px 14px; | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| font-size: 0.85rem; | |
| color: var(--text-muted); | |
| } | |
| #meta span::before { | |
| font-weight: 600; | |
| color: var(--text); | |
| } | |
| #meta-repo::before { content: "Repo: "; } | |
| #meta-path::before { content: "File: "; } | |
| #meta-branch::before { content: "Branch: "; } | |
| /* ---------- Tabs ---------- */ | |
| #tabs { | |
| margin-top: 20px; | |
| } | |
| .tab-bar { | |
| display: flex; | |
| gap: 2px; | |
| border-bottom: 1px solid var(--border); | |
| overflow-x: auto; | |
| } | |
| .tab { | |
| position: relative; | |
| padding: 10px 18px; | |
| font-size: 0.88rem; | |
| font-weight: 500; | |
| color: var(--text-muted); | |
| background: none; | |
| border: none; | |
| border-bottom: 2px solid transparent; | |
| cursor: pointer; | |
| white-space: nowrap; | |
| transition: color 0.15s, border-color 0.15s; | |
| } | |
| .tab:hover { | |
| color: var(--text); | |
| } | |
| .tab.active { | |
| color: var(--text); | |
| border-bottom-color: var(--accent); | |
| } | |
| /* Dot: tab has content */ | |
| .tab.has-content::after { | |
| content: ""; | |
| position: absolute; | |
| top: 8px; | |
| right: 6px; | |
| width: 6px; | |
| height: 6px; | |
| border-radius: 50%; | |
| background: var(--accent); | |
| } | |
| /* Pulsing dot: tab is currently receiving streamed content */ | |
| .tab.streaming::after { | |
| background: var(--accent); | |
| animation: pulse 1s ease-in-out infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.3; } | |
| } | |
| /* ---------- Tab content ---------- */ | |
| .tab-content { | |
| padding: 24px; | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-top: none; | |
| border-radius: 0 0 var(--radius) var(--radius); | |
| min-height: 120px; | |
| } | |
| .tab-content-empty { | |
| color: var(--text-muted); | |
| font-style: italic; | |
| } | |
| /* Cursor blink while streaming */ | |
| .tab-content.is-streaming::after { | |
| content: "▍"; | |
| animation: blink 0.8s step-end infinite; | |
| } | |
| @keyframes blink { | |
| 50% { opacity: 0; } | |
| } | |
| /* ---------- Rendered markdown ---------- */ | |
| .tab-content h2 { | |
| display: none; /* section header is already the tab title */ | |
| } | |
| .tab-content h3 { | |
| font-size: 1rem; | |
| margin-top: 18px; | |
| margin-bottom: 6px; | |
| } | |
| .tab-content p { | |
| margin-bottom: 10px; | |
| } | |
| .tab-content ul, | |
| .tab-content ol { | |
| margin-bottom: 10px; | |
| padding-left: 24px; | |
| } | |
| .tab-content li { | |
| margin-bottom: 4px; | |
| } | |
| .tab-content strong { | |
| color: var(--accent); | |
| } | |
| .tab-content code { | |
| font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; | |
| background: rgba(110, 118, 129, 0.15); | |
| padding: 2px 6px; | |
| border-radius: 4px; | |
| font-size: 0.88em; | |
| } | |
| .tab-content pre { | |
| background: var(--bg); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| padding: 14px; | |
| overflow-x: auto; | |
| margin-bottom: 12px; | |
| } | |
| .tab-content pre code { | |
| background: none; | |
| padding: 0; | |
| } | |
| /* ---------- Diff highlighting ---------- */ | |
| .diff-block { | |
| background: var(--bg); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| padding: 0; | |
| overflow-x: auto; | |
| margin-bottom: 12px; | |
| font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; | |
| font-size: 0.85rem; | |
| line-height: 1.55; | |
| } | |
| .diff-block code { | |
| background: none; | |
| padding: 0; | |
| display: block; | |
| } | |
| .diff-line { | |
| display: block; | |
| padding: 1px 14px; | |
| white-space: pre-wrap; | |
| word-break: break-all; | |
| } | |
| .diff-add { | |
| background: var(--diff-add-bg); | |
| color: var(--diff-add-fg); | |
| } | |
| .diff-del { | |
| background: var(--diff-del-bg); | |
| color: var(--diff-del-fg); | |
| } | |
| .diff-info { | |
| color: var(--diff-info-fg); | |
| font-style: italic; | |
| padding-top: 4px; | |
| padding-bottom: 4px; | |
| } | |
| .diff-neutral { | |
| color: var(--text-muted); | |
| } | |
| /* ---------- Loading spinner ---------- */ | |
| .loading #submit-btn::after { | |
| content: ""; | |
| display: inline-block; | |
| width: 14px; | |
| height: 14px; | |
| margin-left: 8px; | |
| border: 2px solid rgba(255, 255, 255, 0.3); | |
| border-top-color: #fff; | |
| border-radius: 50%; | |
| animation: spin 0.6s linear infinite; | |
| vertical-align: middle; | |
| } | |
| @keyframes spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| /* ---------- Brutality Selector ---------- */ | |
| .brutality-selector { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| margin-top: 12px; | |
| } | |
| .brutality-label { | |
| font-size: 0.85rem; | |
| color: var(--text-muted); | |
| } | |
| .brutality-btn { | |
| padding: 6px 14px; | |
| font-size: 0.82rem; | |
| font-weight: 500; | |
| color: var(--text-muted); | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| cursor: pointer; | |
| transition: all 0.15s; | |
| } | |
| .brutality-btn:hover { | |
| color: var(--text); | |
| border-color: var(--accent); | |
| } | |
| .brutality-btn.active { | |
| color: #fff; | |
| background: var(--accent); | |
| border-color: var(--accent); | |
| } | |
| /* ---------- Issue Badge ---------- */ | |
| #issue-badge { | |
| display: flex; | |
| gap: 16px; | |
| flex-wrap: wrap; | |
| margin-top: 16px; | |
| padding: 10px 14px; | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| font-size: 0.85rem; | |
| } | |
| .badge-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| } | |
| .badge-dot { | |
| width: 10px; | |
| height: 10px; | |
| border-radius: 50%; | |
| } | |
| .badge-dot.critical { background: #f85149; } | |
| .badge-dot.high { background: #f0883e; } | |
| .badge-dot.medium { background: #d29922; } | |
| .badge-dot.low { background: #8b949e; } | |
| .badge-count { | |
| font-weight: 600; | |
| color: var(--text); | |
| } | |
| .badge-label { | |
| color: var(--text-muted); | |
| } | |
| /* ---------- Review Metrics ---------- */ | |
| #review-metrics { | |
| display: flex; | |
| gap: 20px; | |
| flex-wrap: wrap; | |
| margin-top: 10px; | |
| padding: 10px 14px; | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| font-size: 0.85rem; | |
| } | |
| .metric-item { | |
| display: flex; | |
| align-items: baseline; | |
| gap: 5px; | |
| } | |
| .metric-value { | |
| font-weight: 700; | |
| color: var(--accent); | |
| font-variant-numeric: tabular-nums; | |
| } | |
| .metric-label { | |
| color: var(--text-muted); | |
| } | |
| /* ---------- Copy Button ---------- */ | |
| #copy-btn { | |
| padding: 6px 14px; | |
| font-size: 0.82rem; | |
| font-weight: 500; | |
| color: var(--text-muted); | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| cursor: pointer; | |
| transition: all 0.15s; | |
| } | |
| #copy-btn:hover { | |
| color: var(--text); | |
| border-color: var(--accent); | |
| } | |
| #copy-btn:active { | |
| background: var(--accent); | |
| color: #fff; | |
| } | |
| /* ---------- Save Button ---------- */ | |
| #save-btn { | |
| padding: 6px 14px; | |
| font-size: 0.82rem; | |
| font-weight: 500; | |
| color: #fff; | |
| background: var(--accent); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| cursor: pointer; | |
| transition: all 0.15s; | |
| } | |
| #save-btn:hover { | |
| color: #fff; | |
| background: var(--accent-hover); | |
| border-color: var(--accent-hover); | |
| } | |
| /* ---------- Toast Notification ---------- */ | |
| #toast { | |
| position: fixed; | |
| bottom: 24px; | |
| left: 50%; | |
| transform: translateX(-50%) translateY(100px); | |
| padding: 12px 24px; | |
| background: var(--accent); | |
| color: #fff; | |
| font-size: 0.9rem; | |
| font-weight: 500; | |
| border-radius: var(--radius); | |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); | |
| opacity: 0; | |
| transition: transform 0.3s ease, opacity 0.3s ease; | |
| z-index: 1000; | |
| } | |
| #toast.show { | |
| transform: translateX(-50%) translateY(0); | |
| opacity: 1; | |
| } |