forked from external-repos/squoosh
126 lines
3.5 KiB
CSS
126 lines
3.5 KiB
CSS
two-up {
|
|
display: grid;
|
|
position: relative;
|
|
--split-point: 0;
|
|
--accent-color: #777;
|
|
--track-color: var(--accent-color);
|
|
--thumb-background: #fff;
|
|
--thumb-color: var(--accent-color);
|
|
--thumb-size: 62px;
|
|
--bar-size: 6px;
|
|
--bar-touch-size: 30px;
|
|
}
|
|
|
|
two-up > * {
|
|
/* Overlay all children on top of each other, and let two-up's layout contain all of them. */
|
|
grid-area: 1/1;
|
|
}
|
|
|
|
two-up[legacy-clip-compat] > :not(.two-up-handle) {
|
|
/* Legacy mode uses clip rather than clip-path (Edge doesn't support clip-path), but clip requires
|
|
elements to be positioned absolutely */
|
|
position: absolute;
|
|
}
|
|
|
|
.two-up-handle {
|
|
touch-action: none;
|
|
position: relative;
|
|
width: var(--bar-touch-size);
|
|
transform: translateX(var(--split-point)) translateX(-50%);
|
|
will-change: transform;
|
|
cursor: ew-resize;
|
|
}
|
|
|
|
.two-up-handle::before {
|
|
content: '';
|
|
display: block;
|
|
height: 100%;
|
|
width: var(--bar-size);
|
|
margin: 0 auto;
|
|
box-shadow: inset calc(var(--bar-size) / 2) 0 0 rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.4);
|
|
background: var(--track-color);
|
|
}
|
|
|
|
.scrubber {
|
|
display: flex;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform-origin: 50% 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: var(--thumb-size);
|
|
height: calc(var(--thumb-size) * 0.9);
|
|
background: var(--thumb-background);
|
|
border: 1px solid rgba(0,0,0,0.2);
|
|
border-radius: calc(var(--thumb-size) * 0.08);
|
|
box-shadow: 0 1px 4px rgba(0,0,0,0.1);
|
|
color: var(--thumb-color);
|
|
box-sizing: border-box;
|
|
padding: 0 48%;
|
|
}
|
|
|
|
.scrubber svg {
|
|
flex: 1;
|
|
}
|
|
|
|
two-up[orientation='vertical'] .two-up-handle {
|
|
width: auto;
|
|
height: var(--bar-touch-size);
|
|
transform: translateY(var(--split-point)) translateY(-50%);
|
|
cursor: ns-resize;
|
|
}
|
|
|
|
two-up[orientation='vertical'] .two-up-handle::before {
|
|
width: auto;
|
|
height: var(--bar-size);
|
|
box-shadow: inset 0 calc(var(--bar-size) / 2) 0 rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.4);
|
|
margin: calc((var(--bar-touch-size) - var(--bar-size)) / 2) 0 0 0;
|
|
}
|
|
|
|
two-up[orientation='vertical'] .scrubber {
|
|
box-shadow: 1px 0 4px rgba(0,0,0,0.1);
|
|
transform: translate(-50%, -50%) rotate(-90deg);
|
|
}
|
|
|
|
two-up > :nth-child(1):not(.two-up-handle) {
|
|
-webkit-clip-path: inset(0 calc(100% - var(--split-point)) 0 0);
|
|
clip-path: inset(0 calc(100% - var(--split-point)) 0 0);
|
|
}
|
|
|
|
two-up > :nth-child(2):not(.two-up-handle) {
|
|
-webkit-clip-path: inset(0 0 0 var(--split-point));
|
|
clip-path: inset(0 0 0 var(--split-point));
|
|
}
|
|
|
|
two-up[orientation='vertical'] > :nth-child(1):not(.two-up-handle) {
|
|
-webkit-clip-path: inset(0 0 calc(100% - var(--split-point)) 0);
|
|
clip-path: inset(0 0 calc(100% - var(--split-point)) 0);
|
|
}
|
|
|
|
two-up[orientation='vertical'] > :nth-child(2):not(.two-up-handle) {
|
|
-webkit-clip-path: inset(var(--split-point) 0 0 0);
|
|
clip-path: inset(var(--split-point) 0 0 0);
|
|
}
|
|
|
|
/*
|
|
Even in legacy-clip-compat, prefer clip-path if it's supported.
|
|
It performs way better in Safari.
|
|
*/
|
|
@supports not ((clip-path: inset(0 0 0 0)) or (-webkit-clip-path: inset(0 0 0 0))) {
|
|
two-up[legacy-clip-compat] > :nth-child(1):not(.two-up-handle) {
|
|
clip: rect(auto var(--split-point) auto auto);
|
|
}
|
|
|
|
two-up[legacy-clip-compat] > :nth-child(2):not(.two-up-handle) {
|
|
clip: rect(auto auto auto var(--split-point));
|
|
}
|
|
|
|
two-up[orientation='vertical'][legacy-clip-compat] > :nth-child(1):not(.two-up-handle) {
|
|
clip: rect(auto auto var(--split-point) auto);
|
|
}
|
|
|
|
two-up[orientation='vertical'][legacy-clip-compat] > :nth-child(2):not(.two-up-handle) {
|
|
clip: rect(var(--split-point) auto auto auto);
|
|
}
|
|
}
|