bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2026-02-24 08:33:29 +00:00
Code Issues Releases Wiki Activity

[PM-32481] Apply same custom scrollbar to nav (#19083)

Browse Source 
* Apply same custom scrollbar to nav

* Split colors
This commit is contained in:
Oscar Hinton
2026-02-19 21:18:17 +01:00
committed by GitHub
parent 8399815ea7
commit caa28ac5b3
2 changed files with 26 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
apps/desktop/src/scss/base.scss
View File

@@ -102,23 +102,30 @@ textarea {
div:not(.modal)::-webkit-scrollbar,
.cdk-virtual-scroll-viewport::-webkit-scrollbar,
.vault-filters::-webkit-scrollbar {
.vault-filters::-webkit-scrollbar,
#bit-side-nav::-webkit-scrollbar {
width: 10px;
height: 10px;
}
div:not(.modal)::-webkit-scrollbar-track,
.cdk-virtual-scroll-viewport::-webkit-scrollbar-track,
.vault-filters::-webkit-scrollbar-track {
.vault-filters::-webkit-scrollbar-track,
#bit-side-nav::-webkit-scrollbar-track {
background-color: transparent;
}
div:not(.modal)::-webkit-scrollbar-thumb,
.cdk-virtual-scroll-viewport::-webkit-scrollbar-thumb,
.vault-filters::-webkit-scrollbar-thumb {
.vault-filters::-webkit-scrollbar-thumb,
#bit-side-nav::-webkit-scrollbar-thumb {
border-radius: 10px;
margin-right: 1px;
}
div:not(.modal)::-webkit-scrollbar-thumb,
.cdk-virtual-scroll-viewport::-webkit-scrollbar-thumb,
.vault-filters::-webkit-scrollbar-thumb {
@include themify($themes) {
background-color: themed("scrollbarColor");
}
@@ -130,6 +137,18 @@ div:not(.modal)::-webkit-scrollbar-thumb,
}
}
#bit-side-nav::-webkit-scrollbar-thumb {
@include themify($themes) {
background-color: themed("scrollbarColorNav");
}
&:hover {
@include themify($themes) {
background-color: themed("scrollbarHoverColorNav");
}
}
}
// cdk-virtual-scroll
.cdk-virtual-scroll-viewport {
width: 100%;

4
apps/desktop/src/scss/variables.scss
View File

@@ -56,6 +56,8 @@ $themes: (
backgroundColorAlt2: $background-color-alt2,
scrollbarColor: rgba(100, 100, 100, 0.2),
scrollbarHoverColor: rgba(100, 100, 100, 0.4),
scrollbarColorNav: rgba(226, 226, 226),
scrollbarHoverColorNav: rgba(197, 197, 197),
boxBackgroundColor: $box-background-color,
boxBackgroundHoverColor: $box-background-hover-color,
boxBorderColor: $box-border-color,
@@ -115,6 +117,8 @@ $themes: (
backgroundColorAlt2: #15181e,
scrollbarColor: #6e788a,
scrollbarHoverColor: #8d94a5,
scrollbarColorNav: #6e788a,
scrollbarHoverColorNav: #8d94a5,
boxBackgroundColor: #2f343d,
boxBackgroundHoverColor: #3c424e,
boxBorderColor: #4c525f,