mirror of
https://github.com/GoogleChromeLabs/squoosh.git
synced 2025-11-17 03:00:13 +00:00
106 lines
2.0 KiB
CSS
106 lines
2.0 KiB
CSS
.cropper {
|
|
position: absolute;
|
|
left: -10px;
|
|
top: -10px;
|
|
right: -10px;
|
|
bottom: -10px;
|
|
shape-rendering: crispedges;
|
|
overflow: visible;
|
|
contain: layout size;
|
|
|
|
&.pan {
|
|
cursor: grabbing;
|
|
& * {
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
& > svg {
|
|
overflow: visible;
|
|
contain: layout size;
|
|
}
|
|
}
|
|
|
|
.background {
|
|
pointer-events: none;
|
|
fill: rgba(0, 0, 0, 0.25);
|
|
}
|
|
|
|
.cropbox {
|
|
fill: none;
|
|
stroke: white;
|
|
stroke-width: calc(1.5px / var(--scale, 1));
|
|
stroke-dasharray: calc(5px / var(--scale, 1)), calc(5px / var(--scale, 1));
|
|
stroke-dashoffset: 50%;
|
|
/* Accept pointer input even though this is unpainted transparent */
|
|
pointer-events: all;
|
|
cursor: move;
|
|
}
|
|
|
|
.edge {
|
|
fill: #aaa;
|
|
opacity: 0;
|
|
transition: opacity 250ms ease;
|
|
z-index: 2;
|
|
pointer-events: all;
|
|
--edge-width: calc(10px / var(--scale, 1));
|
|
|
|
@media (max-width: 779px) {
|
|
--edge-width: calc(20px / var(--scale, 1));
|
|
fill: rgba(0, 0, 0, 0.01);
|
|
}
|
|
|
|
&[data-edge='left'],
|
|
&[data-edge='right'] {
|
|
cursor: ew-resize;
|
|
transform: translate(calc(var(--edge-width, 10px) / -2), 0);
|
|
width: var(--edge-width, 10px);
|
|
}
|
|
&[data-edge='top'],
|
|
&[data-edge='bottom'] {
|
|
cursor: ns-resize;
|
|
transform: translate(0, calc(var(--edge-width, 10px) / -2));
|
|
height: var(--edge-width, 10px);
|
|
}
|
|
|
|
&:hover,
|
|
&:active {
|
|
opacity: 0.1;
|
|
transition: none;
|
|
}
|
|
}
|
|
|
|
.corner {
|
|
r: calc(4px / var(--scale, 1));
|
|
stroke-width: calc(4px / var(--scale, 1));
|
|
stroke: rgba(225, 225, 225, 0.01);
|
|
fill: white;
|
|
shape-rendering: geometricprecision;
|
|
pointer-events: all;
|
|
transition: fill 250ms ease, stroke 250ms ease;
|
|
|
|
&:hover,
|
|
&:active {
|
|
stroke: rgba(225, 225, 225, 0.5);
|
|
transition: none;
|
|
}
|
|
|
|
@media (max-width: 779px) {
|
|
r: calc(10 / var(--scale, 1));
|
|
stroke-width: calc(2 / var(--scale, 1));
|
|
}
|
|
|
|
&[data-edge='left,top'] {
|
|
cursor: nw-resize;
|
|
}
|
|
&[data-edge='right,top'] {
|
|
cursor: ne-resize;
|
|
}
|
|
&[data-edge='right,bottom'] {
|
|
cursor: se-resize;
|
|
}
|
|
&[data-edge='left,bottom'] {
|
|
cursor: sw-resize;
|
|
}
|
|
}
|