Skip to content

Commit

Permalink
feat: themed scroll and zoom bars
Browse files Browse the repository at this point in the history
  • Loading branch information
@yougotwill
yougotwill committed Oct 7, 2022
1 parent 48cbd25 commit 5a0928c
Show file tree
Hide file tree
Showing 4 changed files with 51 additions and 31 deletions.
11 changes: 6 additions & 5 deletions stylesheets/_global.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,17 +23,18 @@ body {
height: 6px;
}

::-webkit-scrollbar-track {
background-color: var(--scroll-bar-track-color);
}

::-webkit-scrollbar-thumb {
background: var(--color-scroll-bar-thumb);
background: var(--scroll-bar-thumb-color);
border-radius: 20px;

&:hover {
background: var(--color-light-gray-color);
background: var(--scroll-bar-thumb-hover-color);
}
}
::-webkit-scrollbar-track {
background: none;
}

audio {
max-width: 100%;
Expand Down
14 changes: 7 additions & 7 deletions stylesheets/_session_slider.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@
.rc-slider-rail {
position: absolute;
width: 100%;
background: var(--scroll-bar-fill-color);
background: var(--zoom-bar-track-color);

height: 8px;
border-radius: 6px;
Expand All @@ -51,24 +51,24 @@
margin-left: -2.3px;
cursor: grab;
border-radius: 4px;
background-color: var(--zoom-bar-selector-color);
background-color: var(--zoom-bar-thumb-color);
-ms-touch-action: pan-x;
touch-action: pan-x;
}
.rc-slider-handle:focus {
border-color: var(--zoom-bar-selector-color);
border-color: var(--zoom-bar-thumb-color);
box-shadow: none;
outline: none;
}
.rc-slider-handle-click-focused:focus {
border-color: var(--zoom-bar-selector-color);
border-color: var(--zoom-bar-thumb-color);
box-shadow: unset;
}
.rc-slider-handle:hover {
border-color: var(--zoom-bar-selector-color);
border-color: var(--zoom-bar-thumb-color);
}
.rc-slider-handle:active {
border-color: var(--zoom-bar-selector-color);
border-color: var(--zoom-bar-thumb-color);
box-shadow: none;
cursor: -webkit-grabbing;
cursor: grabbing;
Expand Down Expand Up @@ -124,7 +124,7 @@
margin-right: -4px;
}
.rc-slider-disabled {
background-color: var(--scroll-bar-fill-color);
background-color: var(--zoom-bar-track-color);
}
.rc-slider-disabled .rc-slider-handle,
.rc-slider-disabled .rc-slider-dot {
Expand Down
11 changes: 6 additions & 5 deletions ts/themes/SessionTheme.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -580,13 +580,14 @@ export const SessionGlobalStyles = createGlobalStyle`
--search-bar-icon-hover-color: var(--text-primary-color);
/* Scroll Bars */
/* TODO Theming think this is the track? Should add thumb and other scroll colors here */
/* Default */
--scroll-bar-fill-color: var(--text-secondary-color);
--scroll-bar-track-color: none;
--scroll-bar-thumb-color: ${THEMES.CLASSIC_LIGHT.COLOR2};
--scroll-bar-thumb-hover-color: ${THEMES.CLASSIC_LIGHT.COLOR1};
/* Zoom Bar */
--zoom-bar-track-color: ${THEMES.CLASSIC_LIGHT.COLOR3};
--zoom-bar-thumb-color: var(--primary-color);
--zoom-bar-interval-color: var(--text-secondary-color);
/* TODO Theming think this is the thumb? */
--zoom-bar-selector-color: var(--primary-color);
/* Toggle Switch */
--toggle-switch-ball-color: var(--white-color);
Expand Down
46 changes: 32 additions & 14 deletions ts/themes/switchTheme.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -248,16 +248,22 @@ function loadClassicLight(primaryColor?: PrimaryColorStateType) {
'var(--text-primary-color)'
);

document.documentElement.style.setProperty('--scroll-bar-track-color', 'none');
document.documentElement.style.setProperty(
'--scroll-bar-fill-color',
'var(--text-secondary-color)'
'--scroll-bar-thumb-color',
THEMES.CLASSIC_LIGHT.COLOR2
);
document.documentElement.style.setProperty(
'--scroll-bar-thumb-hover-color',
THEMES.CLASSIC_LIGHT.COLOR1
);

document.documentElement.style.setProperty('--zoom-bar-track-color', THEMES.CLASSIC_LIGHT.COLOR3);
document.documentElement.style.setProperty('--zoom-bar-thumb-color', 'var(--primary-color)');
document.documentElement.style.setProperty(
'--zoom-bar-interval-color',
'var(--text-secondary-color)'
);
document.documentElement.style.setProperty('--zoom-bar-selector-color', 'var(--primary-color)');

document.documentElement.style.setProperty('--toggle-switch-ball-color', 'var(--white-color)');
document.documentElement.style.setProperty(
Expand Down Expand Up @@ -672,13 +678,19 @@ function loadClassicDark(primaryColor?: PrimaryColorStateType) {
'var(--text-primary-color)'
);

document.documentElement.style.setProperty('--scroll-bar-fill-color', THEMES.CLASSIC_DARK.COLOR4);

document.documentElement.style.setProperty('--scroll-bar-track-color', 'none');
document.documentElement.style.setProperty(
'--zoom-bar-interval-color',
'--scroll-bar-thumb-color',
THEMES.CLASSIC_DARK.COLOR3
);
document.documentElement.style.setProperty(
'--scroll-bar-thumb-hover-color',
THEMES.CLASSIC_DARK.COLOR4
);
document.documentElement.style.setProperty('--zoom-bar-selector-color', 'var(--primary-color)');

document.documentElement.style.setProperty('--zoom-bar-track-color', THEMES.CLASSIC_DARK.COLOR3);
document.documentElement.style.setProperty('--zoom-bar-thumb-color', 'var(--primary-color)');
document.documentElement.style.setProperty('--zoom-bar-interval-color', 'var(--primary-color)');

document.documentElement.style.setProperty('--toggle-switch-ball-color', 'var(--white-color)');
document.documentElement.style.setProperty(
Expand Down Expand Up @@ -1092,16 +1104,19 @@ function loadOceanLight(primaryColor?: PrimaryColorStateType) {
'var(--text-primary-color)'
);

document.documentElement.style.setProperty('--scroll-bar-track-color', 'none');
document.documentElement.style.setProperty('--scroll-bar-thumb-color', THEMES.OCEAN_LIGHT.COLOR4);
document.documentElement.style.setProperty(
'--scroll-bar-fill-color',
'var(--text-secondary-color)'
'--scroll-bar-thumb-hover-color',
THEMES.OCEAN_LIGHT.COLOR3
);

document.documentElement.style.setProperty('--zoom-bar-track-color', THEMES.OCEAN_LIGHT.COLOR4);
document.documentElement.style.setProperty('--zoom-bar-thumb-color', 'var(--primary-color)');
document.documentElement.style.setProperty(
'--zoom-bar-interval-color',
'var(--text-secondary-color)'
);
document.documentElement.style.setProperty('--zoom-bar-selector-color', 'var(--primary-color)');

document.documentElement.style.setProperty('--toggle-switch-ball-color', 'var(--white-color)');
document.documentElement.style.setProperty(
Expand Down Expand Up @@ -1510,13 +1525,16 @@ function loadOceanDark(primaryColor?: PrimaryColorStateType) {
'var(--text-primary-color)'
);

document.documentElement.style.setProperty('--scroll-bar-track-color', 'none');
document.documentElement.style.setProperty('--scroll-bar-thumb-color', THEMES.OCEAN_DARK.COLOR4);
document.documentElement.style.setProperty(
'--scroll-bar-fill-color',
'var(text-secondary-color)'
'--scroll-bar-thumb-hover-color',
THEMES.OCEAN_DARK.COLOR5
);

document.documentElement.style.setProperty('--zoom-bar-interval-color', THEMES.OCEAN_DARK.COLOR4);
document.documentElement.style.setProperty('--zoom-bar-selector-color', 'var(--primary-color)');
document.documentElement.style.setProperty('--zoom-bar-track-color', THEMES.OCEAN_DARK.COLOR4);
document.documentElement.style.setProperty('--zoom-bar-thumb-color', 'var(--primary-color)');
document.documentElement.style.setProperty('--zoom-bar-interval-color', 'var(--primary-color)');

document.documentElement.style.setProperty('--toggle-switch-ball-color', 'var(--white-color)');
document.documentElement.style.setProperty(
Expand Down

0 comments on commit 5a0928c

Please sign in to comment.