Awesome/awesome-copilot
1
0
Fork 0
mirror of https://github.com/github/awesome-copilot.git synced 2026-08-25 18:25:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

style(website): soften catalog filter list scrollbars

Browse Source 
The filter option lists only set scrollbar-width: thin, so they rendered
the platform default scrollbar. They now use the same muted, transparent
track treatment as the article sidebar, which resolves through
--brand-color-border-muted in both colour modes.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Copilot-Session: 80686fef-efe3-4cdd-8cd6-bfa61a5d0af6
This commit is contained in:
Aaron Powell
2026-08-17 14:12:23 +10:00
parent 31f586489e
commit 28201bfe30
5 changed files with 80 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/src/components/brand/styles/agents.module.css
+16
View File
@@ -686,7 +686,23 @@
max-block-size: 480px;
overflow-y: auto;
padding-inline-end: var(--base-size-4);
/* Matches the muted, low-contrast scrollbar used by the article sidebar so
the filter list does not read as a heavy chrome element. */
scrollbar-width: thin;
scrollbar-color: var(--brand-color-border-muted) transparent;
}
.filterOptions::-webkit-scrollbar {
width: 6px;
}
.filterOptions::-webkit-scrollbar-track {
background: transparent;
}
.filterOptions::-webkit-scrollbar-thumb {
background-color: var(--brand-color-border-muted);
border-radius: var(--brand-borderRadius-medium, 6px);
}
.showMoreButton {
website/src/components/brand/styles/extensions.module.css
+16
View File
@@ -749,7 +749,23 @@
max-block-size: 480px;
overflow-y: auto;
padding-inline-end: var(--base-size-4);
/* Matches the muted, low-contrast scrollbar used by the article sidebar so
the filter list does not read as a heavy chrome element. */
scrollbar-width: thin;
scrollbar-color: var(--brand-color-border-muted) transparent;
}
.filterOptions::-webkit-scrollbar {
width: 6px;
}
.filterOptions::-webkit-scrollbar-track {
background: transparent;
}
.filterOptions::-webkit-scrollbar-thumb {
background-color: var(--brand-color-border-muted);
border-radius: var(--brand-borderRadius-medium, 6px);
}
.showMoreButton {
website/src/components/brand/styles/instructions.module.css
+16
View File
@@ -672,7 +672,23 @@
max-block-size: 480px;
overflow-y: auto;
padding-inline-end: var(--base-size-4);
/* Matches the muted, low-contrast scrollbar used by the article sidebar so
the filter list does not read as a heavy chrome element. */
scrollbar-width: thin;
scrollbar-color: var(--brand-color-border-muted) transparent;
}
.filterOptions::-webkit-scrollbar {
width: 6px;
}
.filterOptions::-webkit-scrollbar-track {
background: transparent;
}
.filterOptions::-webkit-scrollbar-thumb {
background-color: var(--brand-color-border-muted);
border-radius: var(--brand-borderRadius-medium, 6px);
}
.showMoreButton {
website/src/components/brand/styles/plugins.module.css
+16
View File
@@ -770,7 +770,23 @@
max-block-size: 480px;
overflow-y: auto;
padding-inline-end: var(--base-size-4);
/* Matches the muted, low-contrast scrollbar used by the article sidebar so
the filter list does not read as a heavy chrome element. */
scrollbar-width: thin;
scrollbar-color: var(--brand-color-border-muted) transparent;
}
.filterOptions::-webkit-scrollbar {
width: 6px;
}
.filterOptions::-webkit-scrollbar-track {
background: transparent;
}
.filterOptions::-webkit-scrollbar-thumb {
background-color: var(--brand-color-border-muted);
border-radius: var(--brand-borderRadius-medium, 6px);
}
.showMoreButton {
website/src/components/brand/styles/skills.module.css
+16
View File
@@ -679,7 +679,23 @@
max-block-size: 480px;
overflow-y: auto;
padding-inline-end: var(--base-size-4);
/* Matches the muted, low-contrast scrollbar used by the article sidebar so
the filter list does not read as a heavy chrome element. */
scrollbar-width: thin;
scrollbar-color: var(--brand-color-border-muted) transparent;
}
.filterOptions::-webkit-scrollbar {
width: 6px;
}
.filterOptions::-webkit-scrollbar-track {
background: transparent;
}
.filterOptions::-webkit-scrollbar-thumb {
background-color: var(--brand-color-border-muted);
border-radius: var(--brand-borderRadius-medium, 6px);
}
.showMoreButton {