feat: themed scroll and zoom bars
This commit is contained in:
parent
48cbd25019
commit
5a0928cb17
|
@ -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%;
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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(
|
||||
|
|
Loading…
Reference in New Issue