codex.css

1/* Peach Codex — generation and restoration view styles.2 *3 * Class names are `peach-codex-*` to avoid colliding with the existing4 * settings/overlay tokens. Colours and surfaces reuse `--peach-*` variables5 * defined in vars.css and popup.css — do not introduce new tokens here.6 */78/* Shared body padding — the overlay header eats the top inset, the rest is9 * scrollable so a long page (toggle + warnings + footnote) still fits in10 * the 320×520 popup without clipping. */11.peach-codex-body {12  padding: 12px 16px 18px;13  display: flex;14  flex-direction: column;15  gap: 12px;16}1718.peach-codex-intro {19  padding: 12px;20}2122.peach-codex-blurb {23  margin: 0;24  font-size: 0.8125rem;25  line-height: 1.45;26  color: var(--peach-t1);27}2829.peach-codex-meta {30  margin: 8px 0 0;31  font-size: 0.75rem;32  color: var(--peach-t2);33  letter-spacing: 0.01em;34}3536.peach-codex-meta strong {37  color: var(--peach-t0);38  font-weight: 400;39}4041.peach-codex-toggle-desc {42  margin: 8px 0 0;43  font-size: 0.75rem;44  color: var(--peach-t2);45  line-height: 1.45;46}4748.peach-codex-error {49  margin: 0;50}5152.peach-codex-generate-btn {53  margin-top: 4px;54}5556.peach-codex-footnote {57  margin: 8px 0 0;58  font-size: 0.6875rem;59  color: var(--peach-t2);60  line-height: 1.5;61  font-style: italic;62}6364.peach-codex-done {65  padding: 12px;66  display: flex;67  flex-direction: column;68  gap: 6px;69}7071.peach-codex-verify {72  font-family: var(--font-mono, ui-monospace, monospace);73  letter-spacing: 0.04em;74  color: var(--peach-t0);75}7677/* ── Restore view — scanner ──────────────────────────────────────────── */7879.peach-codex-scanner {80  position: relative;81  width: 100%;82  aspect-ratio: 4 / 3;83  background: var(--peach-s2, rgba(0, 0, 0, 0.6));84  border-radius: 8px;85  overflow: hidden;86}8788.peach-codex-video {89  width: 100%;90  height: 100%;91  object-fit: cover;92  display: block;93}9495.peach-codex-camera-overlay {96  position: absolute;97  inset: 0;98  display: flex;99  align-items: center;100  justify-content: center;101  padding: 16px;102  background: rgba(0, 0, 0, 0.55);103  text-align: center;104}105106.peach-codex-progress-group {107  padding: 10px 12px;108  display: flex;109  flex-direction: column;110  gap: 6px;111}112113.peach-codex-progress-track {114  width: 100%;115  height: 4px;116  background: var(--peach-s2, rgba(255, 255, 255, 0.08));117  border-radius: 2px;118  overflow: hidden;119}120121.peach-codex-progress-fill {122  height: 100%;123  background: var(--peach-accent);124  transition: width 240ms var(--peach-curve-settle, cubic-bezier(0.16, 1, 0.3, 1));125}126127.peach-codex-progress-label {128  display: flex;129  justify-content: space-between;130  align-items: baseline;131  margin: 0;132  font-size: 0.75rem;133  color: var(--peach-t1);134}135136.peach-codex-verify-tag {137  font-family: var(--font-mono, ui-monospace, monospace);138  font-size: 0.6875rem;139  color: var(--peach-t2);140  letter-spacing: 0.04em;141}142143.peach-codex-hint {144  margin: 0;145  font-size: 0.75rem;146  color: var(--peach-t2);147  line-height: 1.4;148}149150.peach-codex-warning {151  margin: 4px 0 0;152}153154.peach-codex-passphrase-group {155  padding: 12px;156  display: flex;157  flex-direction: column;158  gap: 8px;159}160161.peach-codex-cancel-btn {162  margin-top: auto;163}164165/* Pro badge used in Settings → DATA → Peach Codex when free user. */166.peach-pro-badge {167  display: inline-flex;168  align-items: center;169  padding: 1px 6px;170  margin-left: 8px;171  font-family: var(--font-mono, ui-monospace, monospace);172  font-size: 9px;173  letter-spacing: 0.06em;174  text-transform: uppercase;175  color: var(--peach-accent);176  border: 0.5px solid var(--peach-accent);177  border-radius: 4px;178  vertical-align: middle;179  opacity: 0.8;180}