Skip to content

Commit 8c46f2d

Browse files
committed
Add hovers to cards and walkthrough in home
1 parent 7d8f98d commit 8c46f2d

File tree

3 files changed

+20
-1
lines changed

3 files changed

+20
-1
lines changed

src/webviews/apps/home/home.css.ts

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -310,11 +310,18 @@ export const walkthroughProgressStyles = css`
310310
display: flex;
311311
flex-direction: column;
312312
gap: 2px;
313-
padding-block: 4px;
313+
padding: 4px 8px 6px;
314+
margin-inline: -8px;
314315
margin-bottom: 16px;
315316
align-items: stretch;
316317
cursor: pointer;
318+
border-radius: 4px;
317319
}
320+
.walkthrough-progress:focus-within,
321+
.walkthrough-progress:hover {
322+
background-color: var(--gl-walkthrough-hover-background);
323+
}
324+
318325
.walkthrough-progress__title {
319326
display: flex;
320327
justify-content: space-between;

src/webviews/apps/home/home.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,16 @@
55

66
@include utils.dark-theme {
77
--popover-bg: var(--color-background--lighten-15);
8+
--gl-walkthrough-hover-background: color-mix(in lab, var(--vscode-sideBar-background) 100%, #fff 4%);
89
--gl-card-background: color-mix(in lab, var(--vscode-sideBar-background) 100%, #fff 6%);
10+
--gl-card-hover-background: color-mix(in lab, var(--vscode-sideBar-background) 100%, #fff 8%);
911
}
1012

1113
@include utils.light-theme {
1214
--popover-bg: var(--color-background--darken-15);
15+
--gl-walkthrough-hover-background: color-mix(in lab, var(--vscode-sideBar-background) 100%, #000 2%);
1316
--gl-card-background: color-mix(in lab, var(--vscode-sideBar-background) 100%, #000 4%);
17+
--gl-card-hover-background: color-mix(in lab, var(--vscode-sideBar-background) 100%, #000 6%);
1418
}
1519

1620
* {

src/webviews/apps/shared/components/card/card.css.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,14 @@ export const cardStyles = css`
1717
border-inline-start-color: var(--gl-card-active-border, var(--vscode-gitDecoration-addedResourceForeground));
1818
}
1919
20+
.card:focus-within,
21+
.card:hover {
22+
background-color: var(
23+
--gl-card-hover-background,
24+
color-mix(in lab, var(--vscode-sideBar-background) 100%, #fff 8%)
25+
);
26+
}
27+
2028
.card__actions {
2129
position: absolute;
2230
top: 0.4rem;

0 commit comments

Comments
 (0)