feat: styled zoom slider
This commit is contained in:
parent
8394ae25a7
commit
f5e5c5ef87
|
@ -25,16 +25,16 @@
|
|||
-ms-touch-action: none;
|
||||
touch-action: none;
|
||||
box-sizing: border-box;
|
||||
-webkit-tap-highlight-color: var(--color-transparent-color);
|
||||
-webkit-tap-highlight-color: var(--transparent-color);
|
||||
}
|
||||
.rc-slider * {
|
||||
box-sizing: border-box;
|
||||
-webkit-tap-highlight-color: var(--color-transparent-color);
|
||||
-webkit-tap-highlight-color: var(--transparent-color);
|
||||
}
|
||||
.rc-slider-rail {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
background: var(--color-clickable-hovered);
|
||||
background: var(--scroll-bar-fill-color);
|
||||
|
||||
height: 8px;
|
||||
border-radius: 6px;
|
||||
|
@ -51,26 +51,25 @@
|
|||
margin-left: -2.3px;
|
||||
cursor: grab;
|
||||
border-radius: 4px;
|
||||
/* TODO What should this be? */
|
||||
background-color: var(--color-session-green-color);
|
||||
background-color: var(--zoom-bar-selector-color);
|
||||
-ms-touch-action: pan-x;
|
||||
touch-action: pan-x;
|
||||
}
|
||||
.rc-slider-handle:focus {
|
||||
border-color: var(--color-session-green-color);
|
||||
box-shadow: 0 0 0 5px rgba(var(--color-white-color-rgb), 0.2);
|
||||
border-color: var(--zoom-bar-selector-color);
|
||||
box-shadow: none;
|
||||
outline: none;
|
||||
}
|
||||
.rc-slider-handle-click-focused:focus {
|
||||
border-color: rgba(var(--color-white-color-rgb), 0.2);
|
||||
border-color: var(--zoom-bar-selector-color);
|
||||
box-shadow: unset;
|
||||
}
|
||||
.rc-slider-handle:hover {
|
||||
border-color: var(--color-session-green-color);
|
||||
border-color: var(--zoom-bar-selector-color);
|
||||
}
|
||||
.rc-slider-handle:active {
|
||||
border-color: var(--color-session-green-color);
|
||||
box-shadow: 0 0 5px rgba(var(--color-white-color-rgb), 0.2);
|
||||
border-color: var(--zoom-bar-selector-color);
|
||||
box-shadow: none;
|
||||
cursor: -webkit-grabbing;
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
@ -87,10 +86,10 @@
|
|||
vertical-align: middle;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
color: var(--color-light-gray-color);
|
||||
color: var(--text-secondary-color);
|
||||
}
|
||||
.rc-slider-mark-text-active {
|
||||
color: var(--color-gray-color);
|
||||
color: var(--text-primary-color);
|
||||
}
|
||||
.rc-slider-step {
|
||||
position: absolute;
|
||||
|
@ -105,7 +104,7 @@
|
|||
margin-left: -4px;
|
||||
width: 3px;
|
||||
height: 6px;
|
||||
background: var(--color-clickable-hovered);
|
||||
background: var(--zoom-bar-interval-color);
|
||||
|
||||
cursor: pointer;
|
||||
border-radius: 2px;
|
||||
|
@ -118,20 +117,20 @@
|
|||
margin-right: -2px;
|
||||
}
|
||||
.rc-slider-dot-active {
|
||||
border-color: var(--color-light-blue-color);
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
.rc-slider-dot-reverse {
|
||||
margin-left: 0;
|
||||
margin-right: -4px;
|
||||
}
|
||||
.rc-slider-disabled {
|
||||
background-color: var(--color-lighter-gray-color);
|
||||
background-color: var(--scroll-bar-fill-color);
|
||||
}
|
||||
.rc-slider-disabled .rc-slider-handle,
|
||||
.rc-slider-disabled .rc-slider-dot {
|
||||
border-color: var(--color-light-gray-color);
|
||||
border-color: var(--zoom-bar-interval-color);
|
||||
box-shadow: none;
|
||||
background-color: var(--color-white-color);
|
||||
background-color: var(--zoom-bar-interval-color);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.rc-slider-disabled .rc-slider-mark-text,
|
||||
|
@ -229,11 +228,11 @@
|
|||
top: -9999px;
|
||||
visibility: visible;
|
||||
box-sizing: border-box;
|
||||
-webkit-tap-highlight-color: var(--color-transparent-color);
|
||||
-webkit-tap-highlight-color: var(--transparent-color);
|
||||
}
|
||||
.rc-slider-tooltip * {
|
||||
box-sizing: border-box;
|
||||
-webkit-tap-highlight-color: var(--color-transparent-color);
|
||||
-webkit-tap-highlight-color: var(--transparent-color);
|
||||
}
|
||||
.rc-slider-tooltip-hidden {
|
||||
display: none;
|
||||
|
@ -247,12 +246,12 @@
|
|||
height: 24px;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
color: var(--color-white-color);
|
||||
color: var(--text-primary-color);
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
background-color: var(--color-gray-color);
|
||||
background-color: var(--background-primary-color);
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 0 4px var(--color-lighter-gray-color);
|
||||
box-shadow: none;
|
||||
}
|
||||
.rc-slider-tooltip-arrow {
|
||||
position: absolute;
|
||||
|
@ -266,5 +265,5 @@
|
|||
left: 50%;
|
||||
margin-left: -4px;
|
||||
border-width: 4px 4px 0;
|
||||
border-top-color: var(--color-gray-color);
|
||||
border-top-color: var(--background-primary-color);
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue