diff --git a/unredact/static/style.css b/unredact/static/style.css index 0528fc1..24e08aa 100644 --- a/unredact/static/style.css +++ b/unredact/static/style.css @@ -197,6 +197,27 @@ main { margin-bottom: 0.15rem; } +.redaction-delete { + margin-left: auto; + background: none; + border: none; + color: var(--text-muted); + font-size: 0.9rem; + line-height: 1; + cursor: pointer; + padding: 0 0.25rem; + opacity: 0; + transition: opacity 0.15s, color 0.15s; +} + +.redaction-item:hover .redaction-delete { + opacity: 1; +} + +.redaction-delete:hover { + color: var(--red-light); +} + .redaction-num { font-size: 0.75rem; font-weight: 700; @@ -749,3 +770,127 @@ main { from { opacity: 1; } to { opacity: 0; } } + +/* ── Mobile responsive (≤768px) ── */ + +.mobile-tabs { + display: none; +} + +@media (max-width: 768px) { + /* Header: compact */ + header { + padding: 0.5rem 1rem; + } + header h1 { + font-size: 1.1rem; + } + .subtitle { + font-size: 0.7rem; + } + + /* Main: tighter padding */ + main { + padding: 0.5rem; + } + + /* Controls bar: wrap on narrow screens */ + #controls { + flex-wrap: wrap; + gap: 0.5rem; + padding: 0.4rem 0.6rem; + } + + /* Tab bar: visible */ + .mobile-tabs { + display: flex; + gap: 0; + flex-shrink: 0; + border-bottom: 1px solid var(--border); + background: var(--bg-surface); + border-radius: 8px 8px 0 0; + } + .mobile-tab { + flex: 1; + padding: 0.6rem 0; + background: none; + border: none; + color: var(--text-dim); + font-size: 0.85rem; + font-weight: 600; + cursor: pointer; + border-bottom: 2px solid transparent; + transition: color 0.15s, border-color 0.15s; + } + .mobile-tab.active { + color: var(--accent); + border-bottom-color: var(--accent); + } + + /* Workspace: stack vertically */ + #workspace { + flex-direction: column; + } + + /* Left panel: hidden by default, full-width when active */ + #left-panel { + display: none; + width: 100%; + border-radius: 0 0 8px 8px; + } + #left-panel.mobile-active { + display: block; + } + + /* Right panel: hidden by default, full-size when active */ + #right-panel { + display: none; + border-radius: 0 0 8px 8px; + } + #right-panel.mobile-active { + display: block; + flex: 1; + } + + /* Popover: full-screen modal */ + #popover { + position: fixed; + inset: 0; + width: 100%; + border-radius: 0; + z-index: 50; + background: rgba(20, 20, 40, 0.98); + backdrop-filter: none; + } + + /* Font toolbar: full-width, no right offset */ + #font-toolbar { + right: 0.5rem; + font-size: 0.7rem; + gap: 0.4rem; + } + + /* Touch targets: larger buttons */ + .tb-btn { + width: 2.2rem; + height: 2.2rem; + font-size: 0.85rem; + } + + /* Solve controls: slightly larger inputs for touch */ + .solve-controls select, + .solve-controls input { + padding: 4px 6px; + font-size: 0.85rem; + } + .solve-btn { + padding: 8px 20px; + } + + /* Popover close button: larger touch target */ + .popover-close-btn { + width: 2.2rem; + height: 2.2rem; + font-size: 0.9rem; + } +}