style(selection): color the record mode coral red and keep amber for warnings
- commit
- 06fe3927261b9de3fb51ded3cabd57ece4b4aa5e
- author
- brice · · 2026-10-17 18:18 UTC
- parent
- ffd1332
- signature
- GPG Verified
CD88F9E564E0102646FB6077A1A07C7C7C3E349D· arch-gpg Verified for the committer email
3 files · +7 -8
M README.md +1 -1
| @@ -24,7 +24,7 @@ bind.cmd+p = spawn nefercap | |||
| 24 | 24 | ||
| 25 | 25 | Press the key: a selector covers every monitor. Pick what to capture, press **Tab** to switch between screenshot and recording, then confirm. | |
| 26 | 26 | ||
| 27 | - | Chips at the top left show the mode (`SHOT` or `REC`) and the target (`R Region`, `M Monitor`, `W Workspace`). The active ones and the selection border take the mode color: cyan for screenshots, amber for recordings. Each key press also shows a short toast in the center and pulses the border. | |
| 27 | + | Chips at the top left show the mode (`SHOT` or `REC`) and the target (`R Region`, `M Monitor`, `W Workspace`). The active ones and the selection border take the mode color: cyan for screenshots, red for recordings. Each key press also shows a short toast in the center and pulses the border. | |
| 28 | 28 | ||
| 29 | 29 | After a screenshot, a green frame briefly flashes over the captured area. It is drawn after the capture, so it never appears in the image. | |
| 30 | 30 | ||
| @@ -24,7 +24,7 @@ bind.cmd+p = spawn nefercap | |||||
| 24 | 24 | ||||
| 25 | Press the key: a selector covers every monitor. Pick what to capture, press **Tab** to switch between screenshot and recording, then confirm. | 25 | Press the key: a selector covers every monitor. Pick what to capture, press **Tab** to switch between screenshot and recording, then confirm. | ||
| 26 | 26 | ||||
| 27 | - | Chips at the top left show the mode (`SHOT` or `REC`) and the target (`R Region`, `M Monitor`, `W Workspace`). The active ones and the selection border take the mode color: cyan for screenshots, amber for recordings. Each key press also shows a short toast in the center and pulses the border. | 27 | + | Chips at the top left show the mode (`SHOT` or `REC`) and the target (`R Region`, `M Monitor`, `W Workspace`). The active ones and the selection border take the mode color: cyan for screenshots, red for recordings. Each key press also shows a short toast in the center and pulses the border. |
| 28 | 28 | ||||
| 29 | After a screenshot, a green frame briefly flashes over the captured area. It is drawn after the capture, so it never appears in the image. | 29 | After a screenshot, a green frame briefly flashes over the captured area. It is drawn after the capture, so it never appears in the image. | ||
| 30 | 30 | ||||
M internal/adapters/selection/scene.go +2 -3
| @@ -74,8 +74,7 @@ func footerText(mode ports.Mode, kind core.PickKind, workspace, toggle, noIndica | |||
| 74 | 74 | return b.String() | |
| 75 | 75 | } | |
| 76 | 76 | ||
| 77 | - | // badgeText is the label of a mode chip. No mode is red: red would read as | |
| 78 | - | // an active recording. | |
| 77 | + | // badgeText is the label of a mode chip. | |
| 79 | 78 | func badgeText(mode ports.Mode) string { | |
| 80 | 79 | if mode == ports.Record { | |
| 81 | 80 | return "REC" | |
| @@ -84,7 +83,7 @@ func badgeText(mode ports.Mode) string { | |||
| 84 | 83 | } | |
| 85 | 84 | ||
| 86 | 85 | // modeClass is the stylesheet class that colors the active mode: cyan for | |
| 87 | - | // screenshots, amber for recordings. | |
| 86 | + | // screenshots, coral red for recordings. | |
| 88 | 87 | func modeClass(mode ports.Mode) string { | |
| 89 | 88 | if mode == ports.Record { | |
| 90 | 89 | return "rec" | |
| @@ -74,8 +74,7 @@ func footerText(mode ports.Mode, kind core.PickKind, workspace, toggle, noIndica | |||||
| 74 | return b.String() | 74 | return b.String() | ||
| 75 | } | 75 | } | ||
| 76 | 76 | ||||
| 77 | - | // badgeText is the label of a mode chip. No mode is red: red would read as | 77 | + | // badgeText is the label of a mode chip. |
| 78 | - | // an active recording. | |||
| 79 | func badgeText(mode ports.Mode) string { | 78 | func badgeText(mode ports.Mode) string { | ||
| 80 | if mode == ports.Record { | 79 | if mode == ports.Record { | ||
| 81 | return "REC" | 80 | return "REC" | ||
| @@ -84,7 +83,7 @@ func badgeText(mode ports.Mode) string { | |||||
| 84 | } | 83 | } | ||
| 85 | 84 | ||||
| 86 | // modeClass is the stylesheet class that colors the active mode: cyan for | 85 | // modeClass is the stylesheet class that colors the active mode: cyan for | ||
| 87 | - | // screenshots, amber for recordings. | 86 | + | // screenshots, coral red for recordings. |
| 88 | func modeClass(mode ports.Mode) string { | 87 | func modeClass(mode ports.Mode) string { | ||
| 89 | if mode == ports.Record { | 88 | if mode == ports.Record { | ||
| 90 | return "rec" | 89 | return "rec" | ||
M internal/adapters/selection/style.css +4 -4
| @@ -9,10 +9,10 @@ box.backdrop { overflow: hidden; } | |||
| 9 | 9 | box.backdrop image { width: 100%; height: 100%; } | |
| 10 | 10 | box.dim { background-color: rgba(0, 0, 0, 0.5); } | |
| 11 | 11 | box.edge { background-color: #4fd1a5; } | |
| 12 | - | /* Mode colors: cyan for screenshots, amber for recordings. Never red, which | |
| 13 | - | would read as a recording in progress. */ | |
| 12 | + | /* Mode colors: cyan for screenshots, coral red for recordings. Amber is kept | |
| 13 | + | for warnings. */ | |
| 14 | 14 | box.edge.shot { background-color: #38bdf8; } | |
| 15 | - | box.edge.rec { background-color: #f5a524; } | |
| 15 | + | box.edge.rec { background-color: #ef5350; } | |
| 16 | 16 | box.grid { background-color: #808080; } | |
| 17 | 17 | box.tag { | |
| 18 | 18 | display: flex; flex-direction: row; justify-content: center; align-items: center; | |
| @@ -24,7 +24,7 @@ box.tag { | |||
| 24 | 24 | box.chip.idle { color: #8b949e; } | |
| 25 | 25 | box.chip.off { color: #484f58; } | |
| 26 | 26 | box.chip.shot { background-color: #38bdf8; color: #0d1014; } | |
| 27 | - | box.chip.rec { background-color: #f5a524; color: #0d1014; } | |
| 27 | + | box.chip.rec { background-color: #ef5350; color: #0d1014; } | |
| 28 | 28 | /* Centered toast confirming a key, faded out by the o* steps. */ | |
| 29 | 29 | box.toast { | |
| 30 | 30 | display: flex; flex-direction: row; justify-content: center; align-items: center; | |
| @@ -9,10 +9,10 @@ box.backdrop { overflow: hidden; } | |||||
| 9 | box.backdrop image { width: 100%; height: 100%; } | 9 | box.backdrop image { width: 100%; height: 100%; } | ||
| 10 | box.dim { background-color: rgba(0, 0, 0, 0.5); } | 10 | box.dim { background-color: rgba(0, 0, 0, 0.5); } | ||
| 11 | box.edge { background-color: #4fd1a5; } | 11 | box.edge { background-color: #4fd1a5; } | ||
| 12 | - | /* Mode colors: cyan for screenshots, amber for recordings. Never red, which | 12 | + | /* Mode colors: cyan for screenshots, coral red for recordings. Amber is kept |
| 13 | - | would read as a recording in progress. */ | 13 | + | for warnings. */ |
| 14 | box.edge.shot { background-color: #38bdf8; } | 14 | box.edge.shot { background-color: #38bdf8; } | ||
| 15 | - | box.edge.rec { background-color: #f5a524; } | 15 | + | box.edge.rec { background-color: #ef5350; } |
| 16 | box.grid { background-color: #808080; } | 16 | box.grid { background-color: #808080; } | ||
| 17 | box.tag { | 17 | box.tag { | ||
| 18 | display: flex; flex-direction: row; justify-content: center; align-items: center; | 18 | display: flex; flex-direction: row; justify-content: center; align-items: center; | ||
| @@ -24,7 +24,7 @@ box.tag { | |||||
| 24 | box.chip.idle { color: #8b949e; } | 24 | box.chip.idle { color: #8b949e; } | ||
| 25 | box.chip.off { color: #484f58; } | 25 | box.chip.off { color: #484f58; } | ||
| 26 | box.chip.shot { background-color: #38bdf8; color: #0d1014; } | 26 | box.chip.shot { background-color: #38bdf8; color: #0d1014; } | ||
| 27 | - | box.chip.rec { background-color: #f5a524; color: #0d1014; } | 27 | + | box.chip.rec { background-color: #ef5350; color: #0d1014; } |
| 28 | /* Centered toast confirming a key, faded out by the o* steps. */ | 28 | /* Centered toast confirming a key, faded out by the o* steps. */ | ||
| 29 | box.toast { | 29 | box.toast { | ||
| 30 | display: flex; flex-direction: row; justify-content: center; align-items: center; | 30 | display: flex; flex-direction: row; justify-content: center; align-items: center; | ||