mirrors/opencode
1
0
Fork 0
mirror of https://github.com/anomalyco/opencode.git synced 2026-11-13 19:46:16 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix(app): highlight the activity chip on hover (#58052)

Browse Source
This commit is contained in:
Kit Langton
2026-10-22 10:21:45 -07:00
committed by GitHub
Unverified
parent 110faa19ae
commit 2f2dfa04aa
2 changed files with 20 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/app/src/session/composer/activity-chips.css
+19
View File
@@ -2,7 +2,26 @@
background: var(--v2-background-bg-layer-01);
}
/* The composer buttons' overlays and focus ring, with overlays layered over the capsule's own surface. */
[data-slot="session-activity-chip"] {
&:focus-visible {
outline: 2px solid var(--v2-border-border-focus);
outline-offset: 2.5px;
}
@media (hover: hover) {
&:hover:not(:active, [data-expanded]) {
background-image: linear-gradient(var(--v2-overlay-simple-overlay-hover), var(--v2-overlay-simple-overlay-hover));
}
}
&:is(:active, [data-expanded]) {
background-image: linear-gradient(
var(--v2-overlay-simple-overlay-pressed),
var(--v2-overlay-simple-overlay-pressed)
);
}
&[data-orb="true"] {
position: relative;
height: 28px;
packages/app/src/session/composer/activity-chips.tsx
+1 -1
View File
@@ -177,7 +177,7 @@ export function SessionActivityChips(props: {
data-orb={experiment.chip === "orb"}
style={{ "--activity-chip-radius": experiment.corners === "capsule" ? "9999px" : "var(--radius-xl)" }}
aria-label={label()}
class="pointer-events-auto flex h-7 min-w-0 max-w-full items-center gap-2 rounded-[12px] border-[0.5px] border-v2-border-border-muted bg-v2-background-bg-base ps-2.5 pe-2.5 text-[13px] font-[530] leading-text-compact tracking-[-0.04px] whitespace-nowrap tabular-nums text-v2-text-text-base shadow-[var(--v2-elevation-raised)] outline-none duration-150 ease-out motion-reduce:animate-none hover:bg-v2-background-bg-layer-01 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-v2-border-border-focus"
class="pointer-events-auto flex h-7 min-w-0 max-w-full items-center gap-2 rounded-[12px] border-[0.5px] border-v2-border-border-muted bg-v2-background-bg-base ps-2.5 pe-2.5 text-[13px] font-[530] leading-text-compact tracking-[-0.04px] whitespace-nowrap tabular-nums text-v2-text-text-base shadow-[var(--v2-elevation-raised)] outline-none duration-150 ease-out motion-reduce:animate-none"
classList={{ "animate-in fade-in": enter() }}
>
<ActivityGlyph />