34 lines
1.1 KiB
CSS
34 lines
1.1 KiB
CSS
.p-imagecompare {
|
|
@apply relative overflow-hidden w-full aspect-video
|
|
}
|
|
|
|
.p-imagecompare img {
|
|
@apply w-full h-full absolute
|
|
}
|
|
|
|
.p-imagecompare img + img {
|
|
@apply [clip-path:polygon(0_0,50%_0,50%_100%,0_100%)]
|
|
}
|
|
|
|
.p-imagecompare-slider {
|
|
@apply relative appearance-none w-[calc(100%+1rem)] h-full -ml-2 bg-transparent outline-none transition-all duration-200
|
|
hover:w-[calc(100%+2rem)] hover:-ml-4
|
|
}
|
|
|
|
.p-imagecompare-slider::-webkit-slider-thumb {
|
|
@apply appearance-none h-4 w-4 bg-white/30 rounded-full bg-contain cursor-ew-resize transition-all duration-200
|
|
focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
|
|
}
|
|
|
|
.p-imagecompare-slider::-moz-range-thumb {
|
|
@apply appearance-none h-4 w-4 bg-white/30 rounded-full bg-contain cursor-ew-resize transition-all duration-200
|
|
focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
|
|
}
|
|
|
|
.p-imagecompare-slider:hover::-webkit-slider-thumb {
|
|
@apply bg-white/40 h-8 w-8
|
|
}
|
|
|
|
.p-imagecompare-slider:hover::-moz-range-thumb {
|
|
@apply bg-white/40 h-8 w-8
|
|
} |