Spaces:
Running
Running
| :root { | |
| --primary: #6366f1; | |
| --primary-600: #4f46e5; | |
| --primary-50: #eef2ff; | |
| --bg: #0b1020; | |
| --bg-elev: #11182c; | |
| --bg-soft: #0f172a; | |
| --text: #e2e8f0; | |
| --muted: #94a3b8; | |
| --card: #0f172a; | |
| --border: #1f2a44; | |
| --success: #16a34a; | |
| --warn: #f59e0b; | |
| --danger: #ef4444; | |
| } | |
| :root[data-theme="light"] { | |
| --bg: #f8fafc; | |
| --bg-elev: #ffffff; | |
| --bg-soft: #f1f5f9; | |
| --text: #0f172a; | |
| --muted: #475569; | |
| --card: #ffffff; | |
| --border: #e2e8f0; | |
| } | |
| * { box-sizing: border-box; } | |
| html, body { height: 100%; } | |
| body { | |
| margin: 0; | |
| color: var(--text); | |
| background: linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%); | |
| font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; | |
| line-height: 1.35; | |
| } | |
| .app-header { | |
| position: sticky; | |
| top: 0; | |
| z-index: 30; | |
| display: flex; | |
| gap: 16px; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 14px 18px; | |
| background: linear-gradient(90deg, color-mix(in oklab, var(--primary) 14%, transparent), transparent 60%), | |
| var(--bg-elev); | |
| border-bottom: 1px solid var(--border); | |
| backdrop-filter: blur(6px); | |
| } | |
| .brand { | |
| display: flex; | |
| gap: 12px; | |
| align-items: center; | |
| } | |
| .logo { | |
| width: 40px; height: 40px; | |
| border-radius: 10px; | |
| display: grid; place-items: center; | |
| background: radial-gradient(75% 75% at 30% 30%, var(--primary) 0%, transparent 70%), | |
| radial-gradient(65% 65% at 70% 70%, var(--secondary) 0%, transparent 70%); | |
| color: white; | |
| font-weight: 800; | |
| letter-spacing: -1px; | |
| box-shadow: 0 4px 18px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.08); | |
| } | |
| .title h1 { | |
| margin: 0; font-size: 18px; letter-spacing: .2px; | |
| } | |
| .title p { | |
| margin: 2px 0 0; | |
| color: var(--muted); font-size: 12px; | |
| } | |
| .customization { | |
| display: flex; gap: 10px; align-items: center; | |
| } | |
| .chip { | |
| display: inline-flex; gap: 8px; align-items: center; | |
| padding: 6px 8px; border-radius: 999px; | |
| border: 1px solid var(--border); | |
| background: var(--bg-elev); | |
| } | |
| .chip label { font-size: 12px; color: var(--muted); } | |
| .chip input[type="color"], .chip select { | |
| appearance: none; | |
| width: 28px; height: 24px; border: none; background: transparent; padding: 0; | |
| cursor: pointer; | |
| } | |
| .app { | |
| display: grid; | |
| grid-template-columns: 360px 1fr; | |
| gap: 14px; | |
| padding: 14px; | |
| min-height: calc(100vh - 88px); | |
| } | |
| .sidebar { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 14px; | |
| max-height: calc(100vh - 120px); | |
| overflow: auto; | |
| } | |
| .panel { | |
| background: var(--card); | |
| border: 1px solid var(--border); | |
| border-radius: 12px; | |
| padding: 12px; | |
| box-shadow: 0 6px 20px rgba(0,0,0,.18); | |
| } | |
| .panel h2 { | |
| margin: 0 0 8px 0; | |
| font-size: 14px; | |
| color: var(--muted); | |
| font-weight: 700; | |
| letter-spacing: .3px; | |
| } | |
| .row { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 8px; | |
| margin-top: 6px; | |
| } | |
| .field { display: grid; gap: 6px; } | |
| .field label { font-size: 12px; color: var(--muted); } | |
| .field input, .field select { | |
| border: 1px solid var(--border); | |
| background: var(--bg-soft); | |
| color: var(--text); | |
| border-radius: 8px; | |
| padding: 8px 10px; | |
| font-size: 13px; | |
| outline: none; | |
| } | |
| .field input:focus, .field select:focus { | |
| border-color: color-mix(in oklab, var(--primary) 50%, var(--border)); | |
| box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 20%, transparent); | |
| } | |
| .grid { | |
| display: grid; | |
| grid-template-columns: 1fr auto auto; | |
| gap: 8px; | |
| align-items: end; | |
| margin-top: 8px; | |
| } | |
| .btn { | |
| appearance: none; | |
| border: 1px solid var(--border); | |
| background: linear-gradient(180deg, var(--bg-elev), var(--bg-soft)); | |
| color: var(--text); | |
| padding: 8px 12px; | |
| border-radius: 10px; | |
| font-size: 13px; | |
| cursor: pointer; | |
| transition: transform .06s ease, background .2s ease, border-color .2s ease; | |
| } | |
| .btn:hover { transform: translateY(-1px); } | |
| .btn:active { transform: translateY(0); } | |
| .btn.primary { | |
| background: linear-gradient(180deg, color-mix(in oklab, var(--primary) 35%, var(--bg-elev)), color-mix(in oklab, var(--primary) 22%, var(--bg-soft))); | |
| border-color: color-mix(in oklab, var(--primary) 55%, var(--border)); | |
| color: white; | |
| } | |
| .btn.ghost { | |
| background: transparent; | |
| } | |
| .btn.warn { border-color: color-mix(in oklab, var(--warn) 60%, var(--border)); color: color-mix(in oklab, var(--warn) 90%, white); } | |
| .btn.danger { border-color: color-mix(in oklab, var(--danger) 60%, var(--border)); color: color-mix(in oklab, var(--danger) 90%, white); } | |
| .list { list-style: none; margin: 6px 0 0; padding: 0; } | |
| .list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-soft); margin-bottom: 6px; } | |
| .list.compact li { padding: 4px 6px; font-size: 12px; } | |
| .list .left { display: flex; gap: 8px; align-items: center; overflow: hidden; } | |
| .badge { | |
| display: inline-flex; gap: 6px; align-items: center; | |
| padding: 2px 6px; border-radius: 999px; | |
| border: 1px solid var(--border); | |
| background: var(--bg-elev); | |
| font-size: 12px; | |
| } | |
| .dot { | |
| width: 10px; height: 10px; border-radius: 50%; | |
| box-shadow: 0 0 0 2px rgba(255,255,255,.1) inset; | |
| } | |
| .small { font-size: 12px; color: var(--muted); } | |
| .graph { | |
| position: relative; | |
| background: radial-gradient(1200px 600px at 30% 0%, color-mix(in oklab, var(--primary) 9%, transparent), transparent), | |
| radial-gradient(900px 900px at 90% 10%, color-mix(in oklab, var(--secondary) 10%, transparent), transparent), | |
| var(--card); | |
| border: 1px solid var(--border); | |
| border-radius: 12px; | |
| box-shadow: 0 6px 20px rgba(0,0,0,.18); | |
| min-height: 520px; | |
| display: grid; | |
| grid-template-rows: auto 1fr; | |
| } | |
| .graph-toolbar { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 8px 10px; | |
| border-bottom: 1px solid var(--border); | |
| background: linear-gradient(180deg, var(--bg-elev), var(--bg-soft)); | |
| border-radius: 12px 12px 0 0; | |
| } | |
| .legend { display: inline-flex; gap: 8px; align-items: center; font-size: 12px; color: var(--muted); margin-left: 10px; } | |
| .legend-dot { | |
| width: 10px; height: 10px; border-radius: 50%; | |
| background: var(--text); | |
| } | |
| .legend-branch { | |
| width: 12px; height: 2px; background: var(--primary); | |
| } | |
| .legend-head { | |
| width: 10px; height: 10px; border-radius: 50%; | |
| outline: 2px solid var(--secondary); | |
| background: transparent; | |
| } | |
| .canvas-wrapper { | |
| position: relative; overflow: hidden; | |
| } | |
| #graphSvg { | |
| width: 100%; height: 100%; | |
| background-image: | |
| radial-gradient(circle at 25px 25px, rgba(255,255,255,.06) 1px, transparent 0), | |
| radial-gradient(circle at 25px 25px, rgba(255,255,255,.05) 1px, transparent 0); | |
| background-size: 50px 50px, 10px 10px; | |
| } | |
| /* Graph nodes and links */ | |
| .link { | |
| stroke: color-mix(in oklab, var(--muted) 25%, var(--text)); | |
| stroke-opacity: .5; | |
| stroke-width: 2.5; | |
| fill: none; | |
| transition: stroke .15s ease; | |
| } | |
| .link.merge { | |
| stroke: color-mix(in oklab, var(--secondary) 65%, var(--muted)); | |
| stroke-opacity: .7; | |
| stroke-dasharray: 4 3; | |
| } | |
| .node { | |
| cursor: pointer; | |
| transition: transform .08s ease; | |
| } | |
| .node:hover { transform: scale(1.06); } | |
| .node circle { | |
| fill: var(--text); | |
| stroke: var(--bg-elev); | |
| stroke-width: 2; | |
| } | |
| .node .label { | |
| font-size: 11px; | |
| fill: var(--muted); | |
| } | |
| .node .branch { | |
| font-size: 11px; | |
| fill: var(--muted); | |
| } | |
| .node .head { | |
| fill: var(--secondary); | |
| stroke: var(--bg-elev); | |
| stroke-width: 2.5; | |
| } | |
| .node .diamond { | |
| fill: var(--secondary); | |
| opacity: .85; | |
| stroke: var(--bg-elev); | |
| stroke-width: 2; | |
| } | |
| .node .id { | |
| font-size: 10px; | |
| fill: var(--muted); | |
| } | |
| /* Commit card */ | |
| .commit-card { | |
| position: absolute; | |
| background: var(--bg-elev); | |
| border: 1px solid var(--border); | |
| border-radius: 10px; | |
| padding: 10px; | |
| width: 260px; | |
| box-shadow: 0 8px 26px rgba(0,0,0,.25); | |
| } | |
| .commit-card h3 { | |
| margin: 0 0 4px 0; | |
| font-size: 13px; | |
| } | |
| .commit-card .meta { font-size: 11px; color: var(--muted); margin-bottom: 8px; } | |
| .commit-card .meta .tag { | |
| background: var(--bg-soft); | |
| border: 1px solid var(--border); | |
| border-radius: 999px; | |
| padding: 1px 6px; | |
| } | |
| .commit-card .message { | |
| font-size: 12px; | |
| margin-bottom: 8px; | |
| } | |
| .commit-card .actions { display: flex; gap: 6px; flex-wrap: wrap; } | |
| .commit-card .actions .btn { padding: 6px 8px; font-size: 12px; } | |
| /* Code/blame */ | |
| .code { | |
| background: var(--bg-soft); | |
| border: 1px dashed var(--border); | |
| border-radius: 10px; | |
| padding: 10px; | |
| font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; | |
| font-size: 12px; | |
| line-height: 1.4; | |
| white-space: pre-wrap; | |
| color: var(--text); | |
| } | |
| .hidden { display: none; } | |
| .app-footer { | |
| padding: 12px 16px; | |
| border-top: 1px solid var(--border); | |
| background: var(--bg-elev); | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| color: var(--muted); | |
| } | |
| /* Responsive */ | |
| @media (max-width: 1080px) { | |
| .app { | |
| grid-template-columns: 1fr; | |
| } | |
| .sidebar { max-height: unset; } | |
| } |