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;
}
::-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%;

14
stylesheets/_session_slider.scss
View File

@ -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;
@ -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;
@ -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 {

11
ts/themes/SessionTheme.tsx
View File

@ -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);

46
ts/themes/switchTheme.tsx
View File

@ -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(
@ -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(
@ -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(
@ -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(