diff --git a/web/static/app.css b/web/static/app.css index 3bf5371..d6f433c 100644 --- a/web/static/app.css +++ b/web/static/app.css @@ -95,10 +95,13 @@ body { border: 1px solid var(--border); background: var(--surface-2); color: var(--muted-fg); border-radius: var(--radius); padding: 4px 10px; font: inherit; font-size: 21.6px; cursor: pointer; } +/* shared code line metrics (#50): gutter + code must share one line box */ +:root { --code-lh: 1.7; --code-fs: 21.6px; } + .editor-wrap { flex: 1; display: flex; min-height: 0; } .gutter { padding: 14px 10px; text-align: right; color: var(--muted); font-family: var(--font-mono); - font-size: 21.6px; line-height: 1.7; user-select: none; white-space: pre; overflow: hidden; + font-size: var(--code-fs); line-height: var(--code-lh); user-select: none; white-space: pre; overflow: hidden; border-right: 1px solid var(--border); } .editor { @@ -145,11 +148,12 @@ body { .paste-title-bar { display: flex; align-items: center; gap: 12px; padding: 12px 18px; flex-wrap: wrap; } .paste-title-bar h1 { font-size: 29.2px; font-weight: 600; margin: 0; } .stats-pill { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } -.stats-head { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: 0; color: var(--muted-fg); font: inherit; font-size: 21.6px; padding: 10px 14px; cursor: pointer; text-align: left; } +.stats-head { display: flex; align-items: center; gap: 16px; width: 100%; background: none; border: 0; color: var(--muted-fg); font: inherit; font-size: 21.6px; padding: 14px 18px; cursor: pointer; text-align: left; } .stats-head:hover { color: var(--fg); background: var(--surface-2); } .stats-chev { width: 18px; height: 18px; flex: none; transition: transform 0.15s ease; } .stats-pill.open .stats-chev { transform: rotate(180deg); } -.stats-summary { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } +.stats-summary { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: .01em; } +@media (max-width: 640px) { .stats-summary { white-space: normal; word-break: break-word; } } .stats-body { border-top: 1px solid var(--border); } .stats-grid { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; padding: 12px 16px; font-size: 20.7px; } .stats-k { color: var(--muted-fg); } @@ -169,10 +173,12 @@ body { } .code-head .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); } .code { - font-family: var(--font-mono); font-size: 22.4px; line-height: 1.7; + font-family: var(--font-mono); font-size: var(--code-fs); line-height: var(--code-lh); padding: 14px 0; display: flex; overflow-x: auto; } .code .gutter { flex-shrink: 0; } +/* gutter/code share line metrics; the editor gutter keeps its own padding (#50) */ +.code .gutter { padding-top: 0; padding-bottom: 0; } .codebody { padding: 0 18px; white-space: pre; } /* syntax highlight tokens (#1) */ .tok-kw { color: #c792ea; } @@ -370,6 +376,12 @@ th.sorted.desc .sort-ind { border-top: 6px solid var(--accent); } outline-offset: 1px; } +/* in-place copy success feedback (#53) */ +.iconbtn.ok, .btn.ok { + color: var(--ok); + border-color: var(--ok); +} + /* headings: unified treatment (mirrors .side-section h3) */ .settings-head h1, .paste-title-bar h1, .head-row h1, .inner h1 { letter-spacing: -0.01em; diff --git a/web/templates/history.html b/web/templates/history.html index b65148a..4bcd4ff 100644 --- a/web/templates/history.html +++ b/web/templates/history.html @@ -10,13 +10,13 @@
| Paste | -Language | -Size | -Views | -Created | -URL | -ID | +Paste | +Language | +Size | +Views | +Created | +URL | +ID |
|---|