mirror of
https://github.com/zoriya/v10.git
synced 2026-08-16 02:45:09 +00:00
145 lines
3.3 KiB
CSS
145 lines
3.3 KiB
CSS
/* ==========================================================================
|
|
Slider
|
|
========================================================================== */
|
|
|
|
.media-default-skin .media-slider {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex: 1;
|
|
border-radius: calc(infinity * 1px);
|
|
outline: none;
|
|
cursor: pointer;
|
|
|
|
&[data-orientation="horizontal"] {
|
|
min-width: 5rem;
|
|
width: 100%;
|
|
height: 1.25rem;
|
|
}
|
|
|
|
&[data-orientation="vertical"] {
|
|
width: 1.25rem;
|
|
height: 5rem;
|
|
}
|
|
}
|
|
|
|
/* Track */
|
|
.media-default-skin .media-slider__track {
|
|
position: relative;
|
|
isolation: isolate;
|
|
overflow: hidden;
|
|
border-radius: inherit;
|
|
user-select: none;
|
|
|
|
&[data-orientation="horizontal"] {
|
|
width: 100%;
|
|
height: 0.25rem;
|
|
}
|
|
|
|
&[data-orientation="vertical"] {
|
|
width: 0.25rem;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
/* Thumb */
|
|
.media-default-skin .media-slider__thumb {
|
|
z-index: 10;
|
|
position: absolute;
|
|
translate: -50% -50%;
|
|
width: 0.625rem;
|
|
height: 0.625rem;
|
|
background-color: currentColor;
|
|
border-radius: calc(infinity * 1px);
|
|
box-shadow:
|
|
0 0 0 1px var(--media-controls-current-shadow-color-subtle, oklch(0 0 0 / 0.1)),
|
|
0 1px 3px 0 oklch(0 0 0 / 0.15),
|
|
0 1px 2px -1px oklch(0 0 0 / 0.15);
|
|
opacity: 0;
|
|
transition-property: opacity, height, width, outline-offset;
|
|
transition-duration: 150ms;
|
|
transition-timing-function: ease-out;
|
|
user-select: none;
|
|
outline: 4px solid transparent;
|
|
outline-offset: -4px;
|
|
|
|
&[data-orientation="horizontal"] {
|
|
top: 50%;
|
|
left: var(--media-slider-fill);
|
|
}
|
|
|
|
&[data-orientation="vertical"] {
|
|
left: 50%;
|
|
top: calc(100% - var(--media-slider-fill));
|
|
}
|
|
|
|
&:hover,
|
|
&:focus {
|
|
outline-color: oklch(from currentColor l c h / 0.25);
|
|
outline-offset: 0;
|
|
}
|
|
}
|
|
|
|
.media-default-skin .media-slider:active .media-slider__thumb,
|
|
.media-default-skin .media-slider__thumb--persistent {
|
|
width: 0.75rem;
|
|
height: 0.75rem;
|
|
}
|
|
|
|
.media-default-skin .media-slider:hover .media-slider__thumb,
|
|
.media-default-skin .media-slider__thumb:focus-visible,
|
|
.media-default-skin .media-slider__thumb--persistent {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Shared track fills */
|
|
.media-default-skin .media-slider__buffer,
|
|
.media-default-skin .media-slider__fill {
|
|
position: absolute;
|
|
border-radius: inherit;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.media-default-skin .media-slider__buffer[data-orientation="horizontal"],
|
|
.media-default-skin .media-slider__fill[data-orientation="horizontal"] {
|
|
inset-block: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.media-default-skin .media-slider__buffer[data-orientation="vertical"],
|
|
.media-default-skin .media-slider__fill[data-orientation="vertical"] {
|
|
inset-inline: 0;
|
|
bottom: 0;
|
|
}
|
|
|
|
/* Buffer */
|
|
.media-default-skin .media-slider__buffer {
|
|
background-color: oklch(from currentColor l c h / 0.2);
|
|
transition-duration: 0.25s;
|
|
transition-timing-function: ease-out;
|
|
|
|
&[data-orientation="horizontal"] {
|
|
width: var(--media-slider-buffer);
|
|
transition-property: width;
|
|
}
|
|
|
|
&[data-orientation="vertical"] {
|
|
height: var(--media-slider-buffer);
|
|
transition-property: height;
|
|
}
|
|
}
|
|
|
|
/* Fill */
|
|
.media-default-skin .media-slider__fill {
|
|
background-color: currentColor;
|
|
|
|
&[data-orientation="horizontal"] {
|
|
width: var(--media-slider-fill);
|
|
}
|
|
|
|
&[data-orientation="vertical"] {
|
|
height: var(--media-slider-fill);
|
|
}
|
|
}
|