39 lines
1.2 KiB
CSS
39 lines
1.2 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:dir(rtl) img + img {
|
||
|
|
@apply [clip-path:polygon(50%_0,100%_0,100%_100%,50%_100%)]
|
||
|
|
}
|
||
|
|
|
||
|
|
.p-imagecompare-slider {
|
||
|
|
@apply relative appearance-none w-[calc(100%+1rem)] h-full -ms-2 bg-transparent outline-none transition-all duration-200
|
||
|
|
hover:w-[calc(100%+2rem)] hover:-ms-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
|
||
|
|
}
|