oxen-io
/
session-desktop
mirror of https://github.com/oxen-io/session-desktop.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: themed scroll and zoom bars

This commit is contained in:
William Grant 2022-10-07 14:42:59 +11:00
parent 48cbd25019
commit 5a0928cb17
4 changed files with 51 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
stylesheets/_global.scss
View File

@ -23,17 +23,18 @@ body {
height: 6px; height: 6px;
} }
::-webkit-scrollbar-track {
background-color: var(--scroll-bar-track-color);
}
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background: var(--color-scroll-bar-thumb); background: var(--scroll-bar-thumb-color);
border-radius: 20px; border-radius: 20px;
&:hover { &:hover {
background: var(--color-light-gray-color); background: var(--scroll-bar-thumb-hover-color);
} }
} }
::-webkit-scrollbar-track {
background: none;
}
audio { audio {
max-width: 100%; max-width: 100%;

14
stylesheets/_session_slider.scss
View File

@ -34,7 +34,7 @@
.rc-slider-rail { .rc-slider-rail {
position: absolute; position: absolute;
width: 100%; width: 100%;
background: var(--scroll-bar-fill-color); background: var(--zoom-bar-track-color);
height: 8px; height: 8px;
border-radius: 6px; border-radius: 6px;
@ -51,24 +51,24 @@
margin-left: -2.3px; margin-left: -2.3px;
cursor: grab; cursor: grab;
border-radius: 4px; border-radius: 4px;
background-color: var(--zoom-bar-selector-color); background-color: var(--zoom-bar-thumb-color);
-ms-touch-action: pan-x; -ms-touch-action: pan-x;
touch-action: pan-x; touch-action: pan-x;
} }
.rc-slider-handle:focus { .rc-slider-handle:focus {
border-color: var(--zoom-bar-selector-color); border-color: var(--zoom-bar-thumb-color);
box-shadow: none; box-shadow: none;
outline: none; outline: none;
} }
.rc-slider-handle-click-focused:focus { .rc-slider-handle-click-focused:focus {
border-color: var(--zoom-bar-selector-color); border-color: var(--zoom-bar-thumb-color);
box-shadow: unset; box-shadow: unset;
} }
.rc-slider-handle:hover { .rc-slider-handle:hover {
border-color: var(--zoom-bar-selector-color); border-color: var(--zoom-bar-thumb-color);
} }
.rc-slider-handle:active { .rc-slider-handle:active {
border-color: var(--zoom-bar-selector-color); border-color: var(--zoom-bar-thumb-color);
box-shadow: none; box-shadow: none;
cursor: -webkit-grabbing; cursor: -webkit-grabbing;
cursor: grabbing; cursor: grabbing;
@ -124,7 +124,7 @@
margin-right: -4px; margin-right: -4px;
} }
.rc-slider-disabled { .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-handle,
.rc-slider-disabled .rc-slider-dot { .rc-slider-disabled .rc-slider-dot {

11
ts/themes/SessionTheme.tsx
View File

@ -580,13 +580,14 @@ export const SessionGlobalStyles = createGlobalStyle`
--search-bar-icon-hover-color: var(--text-primary-color); --search-bar-icon-hover-color: var(--text-primary-color);
/* Scroll Bars */ /* Scroll Bars */
/* TODO Theming think this is the track? Should add thumb and other scroll colors here */ --scroll-bar-track-color: none;
/* Default */ --scroll-bar-thumb-color: ${THEMES.CLASSIC_LIGHT.COLOR2};
--scroll-bar-fill-color: var(--text-secondary-color); --scroll-bar-thumb-hover-color: ${THEMES.CLASSIC_LIGHT.COLOR1};
/* Zoom Bar */ /* 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); --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 */
--toggle-switch-ball-color: var(--white-color); --toggle-switch-ball-color: var(--white-color);

46
ts/themes/switchTheme.tsx
View File

@ -248,16 +248,22 @@ function loadClassicLight(primaryColor?: PrimaryColorStateType) {
'var(--text-primary-color)' 'var(--text-primary-color)'
); );
document.documentElement.style.setProperty('--scroll-bar-track-color', 'none');
document.documentElement.style.setProperty( document.documentElement.style.setProperty(
'--scroll-bar-fill-color', '--scroll-bar-thumb-color',
'var(--text-secondary-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( document.documentElement.style.setProperty(
'--zoom-bar-interval-color', '--zoom-bar-interval-color',
'var(--text-secondary-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('--toggle-switch-ball-color', 'var(--white-color)');
document.documentElement.style.setProperty( document.documentElement.style.setProperty(
@ -672,13 +678,19 @@ function loadClassicDark(primaryColor?: PrimaryColorStateType) {
'var(--text-primary-color)' '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( 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 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('--toggle-switch-ball-color', 'var(--white-color)');
document.documentElement.style.setProperty( document.documentElement.style.setProperty(
@ -1092,16 +1104,19 @@ function loadOceanLight(primaryColor?: PrimaryColorStateType) {
'var(--text-primary-color)' '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( document.documentElement.style.setProperty(
'--scroll-bar-fill-color', '--scroll-bar-thumb-hover-color',
'var(--text-secondary-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( document.documentElement.style.setProperty(
'--zoom-bar-interval-color', '--zoom-bar-interval-color',
'var(--text-secondary-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('--toggle-switch-ball-color', 'var(--white-color)');
document.documentElement.style.setProperty( document.documentElement.style.setProperty(
@ -1510,13 +1525,16 @@ function loadOceanDark(primaryColor?: PrimaryColorStateType) {
'var(--text-primary-color)' '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( document.documentElement.style.setProperty(
'--scroll-bar-fill-color', '--scroll-bar-thumb-hover-color',
'var(text-secondary-color)' THEMES.OCEAN_DARK.COLOR5
); );
document.documentElement.style.setProperty('--zoom-bar-interval-color', THEMES.OCEAN_DARK.COLOR4); document.documentElement.style.setProperty('--zoom-bar-track-color', THEMES.OCEAN_DARK.COLOR4);
document.documentElement.style.setProperty('--zoom-bar-selector-color', 'var(--primary-color)'); 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('--toggle-switch-ball-color', 'var(--white-color)');
document.documentElement.style.setProperty( document.documentElement.style.setProperty(