2 lines
9.2 KiB
CSS
2 lines
9.2 KiB
CSS
@keyframes arco-carousel-slide-x-in{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes arco-carousel-slide-x-out{0%{transform:translate(0)}to{transform:translate(-100%)}}@keyframes arco-carousel-slide-x-in-reverse{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes arco-carousel-slide-x-out-reverse{0%{transform:translate(0)}to{transform:translate(100%)}}@keyframes arco-carousel-slide-y-in{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes arco-carousel-slide-y-out{0%{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes arco-carousel-slide-y-in-reverse{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes arco-carousel-slide-y-out-reverse{0%{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes arco-carousel-card-bottom-to-middle{0%{opacity:0;transform:translate(0) translateZ(-400px)}to{opacity:.4;transform:translate(0) translateZ(-200px)}}@keyframes arco-carousel-card-middle-to-bottom{0%{opacity:.4;transform:translate(-100%) translateZ(-200px)}to{opacity:0;transform:translate(-100%) translateZ(-400px)}}@keyframes arco-carousel-card-top-to-middle{0%{opacity:1;transform:translate(-50%) translateZ(0)}to{opacity:.4;transform:translate(-100%) translateZ(-200px)}}@keyframes arco-carousel-card-middle-to-top{0%{opacity:.4;transform:translate(0) translateZ(-200px)}to{opacity:1;transform:translate(-50%) translateZ(0)}}@keyframes arco-carousel-card-bottom-to-middle-reverse{0%{opacity:0;transform:translate(-100%) translateZ(-400px)}to{opacity:.4;transform:translate(-100%) translateZ(-200px)}}@keyframes arco-carousel-card-middle-to-bottom-reverse{0%{opacity:.4;transform:translate(0) translateZ(-200px)}to{opacity:0;transform:translate(0) translateZ(-400px)}}@keyframes arco-carousel-card-top-to-middle-reverse{0%{opacity:1;transform:translate(-50%) translateZ(0)}to{opacity:.4;transform:translate(0) translateZ(-200px)}}@keyframes arco-carousel-card-middle-to-top-reverse{0%{opacity:.4;transform:translate(-100%) translateZ(-200px)}to{opacity:1;transform:translate(-50%) translateZ(0)}}.arco-carousel{position:relative}.arco-carousel-indicator-position-outer{margin-bottom:30px}.arco-carousel-slide,.arco-carousel-card,.arco-carousel-fade{width:100%;height:100%;overflow:hidden;position:relative}.arco-carousel-slide>*,.arco-carousel-card>*,.arco-carousel-fade>*{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden}.arco-carousel-item-current{z-index:1;position:relative}.arco-carousel-slide>*:not(.arco-carousel-item-current){visibility:hidden}.arco-carousel-slide.arco-carousel-horizontal .arco-carousel-item-slide-out{display:block;animation:arco-carousel-slide-x-out}.arco-carousel-slide.arco-carousel-horizontal .arco-carousel-item-slide-in{display:block;animation:arco-carousel-slide-x-in}.arco-carousel-slide.arco-carousel-horizontal.arco-carousel-negative .arco-carousel-item-slide-out{animation:arco-carousel-slide-x-out-reverse}.arco-carousel-slide.arco-carousel-horizontal.arco-carousel-negative .arco-carousel-item-slide-in{animation:arco-carousel-slide-x-in-reverse}.arco-carousel-slide.arco-carousel-vertical .arco-carousel-item-slide-out{display:block;animation:arco-carousel-slide-y-out}.arco-carousel-slide.arco-carousel-vertical .arco-carousel-item-slide-in{display:block;animation:arco-carousel-slide-y-in}.arco-carousel-slide.arco-carousel-vertical.arco-carousel-negative .arco-carousel-item-slide-out{animation:arco-carousel-slide-y-out-reverse}.arco-carousel-slide.arco-carousel-vertical.arco-carousel-negative .arco-carousel-item-slide-in{animation:arco-carousel-slide-y-in-reverse}.arco-carousel-card{perspective:800px}.arco-carousel-card>*{left:50%;opacity:0;transform:translate(-50%) translateZ(-400px);animation:arco-carousel-card-middle-to-bottom}.arco-carousel-card .arco-carousel-item-prev{opacity:.4;transform:translate(-100%) translateZ(-200px);animation:arco-carousel-card-top-to-middle}.arco-carousel-card .arco-carousel-item-next{opacity:.4;transform:translate(0) translateZ(-200px);animation:arco-carousel-card-bottom-to-middle}.arco-carousel-card .arco-carousel-item-current{opacity:1;transform:translate(-50%) translateZ(0);animation:arco-carousel-card-middle-to-top}.arco-carousel-card.arco-carousel-negative>*{animation:arco-carousel-card-middle-to-bottom-reverse}.arco-carousel-card.arco-carousel-negative .arco-carousel-item-prev{animation:arco-carousel-card-bottom-to-middle-reverse}.arco-carousel-card.arco-carousel-negative .arco-carousel-item-next{animation:arco-carousel-card-top-to-middle-reverse}.arco-carousel-card.arco-carousel-negative .arco-carousel-item-current{animation:arco-carousel-card-middle-to-top-reverse}.arco-carousel-fade>*{left:50%;transform:translate(-50%);opacity:0}.arco-carousel-fade .arco-carousel-item-current{opacity:1}.arco-carousel-indicator{display:flex;position:absolute;margin:0;padding:0}.arco-carousel-indicator-wrapper{position:absolute;z-index:2}.arco-carousel-indicator-wrapper-top{left:0;right:0;top:0;height:48px;background:linear-gradient(180deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,0) 87%)}.arco-carousel-indicator-wrapper-bottom{left:0;right:0;bottom:0;height:48px;background:linear-gradient(180deg,rgba(0,0,0,0) 13%,rgba(0,0,0,.15) 100%)}.arco-carousel-indicator-wrapper-left{left:0;top:0;width:48px;height:100%;background:linear-gradient(90deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,0) 87%)}.arco-carousel-indicator-wrapper-right{right:0;top:0;width:48px;height:100%;background:linear-gradient(90deg,rgba(0,0,0,0) 13%,rgba(0,0,0,.15) 100%)}.arco-carousel-indicator-wrapper-outer{left:0;right:0;background:none}.arco-carousel-indicator-bottom{bottom:12px;left:50%;transform:translate(-50%)}.arco-carousel-indicator-top{top:12px;left:50%;transform:translate(-50%)}.arco-carousel-indicator-left{left:12px;top:50%;transform:translate(-50%,-50%) rotate(90deg)}.arco-carousel-indicator-right{right:12px;top:50%;transform:translate(50%,-50%) rotate(90deg)}.arco-carousel-indicator-outer{left:50%;transform:translate(-50%);padding:4px;border-radius:20px;background-color:transparent}.arco-carousel-indicator-outer.arco-carousel-indicator-dot{bottom:-22px}.arco-carousel-indicator-outer.arco-carousel-indicator-line{bottom:-20px}.arco-carousel-indicator-outer.arco-carousel-indicator-slider{padding:0;bottom:-16px;background-color:rgba(var(--gray-4),.5)}.arco-carousel-indicator-outer .arco-carousel-indicator-item{background-color:rgba(var(--gray-4),.5)}.arco-carousel-indicator-outer .arco-carousel-indicator-item:hover,.arco-carousel-indicator-outer .arco-carousel-indicator-item-active{background-color:var(--color-fill-4)}.arco-carousel-indicator-item{display:inline-block;border-radius:var(--border-radius-medium);background-color:#ffffff4d;cursor:pointer}.arco-carousel-indicator-item:hover,.arco-carousel-indicator-item-active{background-color:var(--color-white)}.arco-carousel-indicator-dot .arco-carousel-indicator-item{width:6px;height:6px;border-radius:50%}.arco-carousel-indicator-dot .arco-carousel-indicator-item:not(:last-child){margin-right:8px}.arco-carousel-indicator-line .arco-carousel-indicator-item{width:12px;height:4px}.arco-carousel-indicator-line .arco-carousel-indicator-item:not(:last-child){margin-right:8px}.arco-carousel-indicator-slider{width:48px;height:4px;border-radius:var(--border-radius-medium);background-color:#ffffff4d;cursor:pointer}.arco-carousel-indicator-slider .arco-carousel-indicator-item{position:absolute;top:0;height:100%;transition:left .3s}.arco-carousel-arrow>div{display:flex;align-items:center;justify-content:center;position:absolute;width:24px;height:24px;border-radius:50%;color:var(--color-white);background-color:#ffffff4d;cursor:pointer;z-index:2}.arco-carousel-arrow>div:focus-visible{box-shadow:0 0 0 2px var(--color-primary-light-3)}.arco-carousel-arrow>div>svg{color:var(--color-white);font-size:14px}.arco-carousel-arrow>div:hover{background-color:#ffffff80}.arco-carousel-arrow-left{left:12px;top:50%;transform:translateY(-50%)}.arco-carousel-arrow-right{top:50%;transform:translateY(-50%);right:12px}.arco-carousel-arrow-top{left:50%;transform:translate(-50%);top:12px}.arco-carousel-arrow-bottom{left:50%;transform:translate(-50%);bottom:12px}.arco-carousel-arrow-hover div{opacity:0;transition:all .3s}.arco-carousel:hover .arco-carousel-arrow-hover div{opacity:1}.arco-carousel-rtl .arco-carousel-indicator-dot .arco-carousel-indicator-item:not(:last-child){margin-left:8px;margin-right:0}.arco-carousel-rtl .arco-carousel-indicator-line .arco-carousel-indicator-item:not(:last-child){margin-left:8px;margin-right:0}body[arco-theme=dark] .arco-carousel-arrow>div{background-color:rgba(var(--gray-1),.3)}body[arco-theme=dark] .arco-carousel-arrow>div:hover{background-color:rgba(var(--gray-1),.5)}body[arco-theme=dark] .arco-carousel-indicator-item,body[arco-theme=dark] .arco-carousel-indicator-slider{background-color:rgba(var(--gray-1),.3)}body[arco-theme=dark] .arco-carousel-indicator-item-active,body[arco-theme=dark] .arco-carousel-indicator-item:hover{background-color:var(--color-white)}body[arco-theme=dark] .arco-carousel-indicator-outer.arco-carousel-indicator-slider{background-color:rgba(var(--gray-4),.5)}body[arco-theme=dark] .arco-carousel-indicator-outer .arco-carousel-indicator-item:hover,body[arco-theme=dark] .arco-carousel-indicator-outer .arco-carousel-indicator-item-active{background-color:var(--color-fill-4)}
|