@arco-design/web-react/lib/Carousel/style/index.css

Arco Design React UI Library.

@keyframes arco-carousel-slide-x-in{from{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes arco-carousel-slide-x-out{from{transform:translateX(0)}to{transform:translateX(-100%)}}@keyframes arco-carousel-slide-x-in-reverse{from{transform:translateX(-100%)}to{transform:translateX(0)}}@keyframes arco-carousel-slide-x-out-reverse{from{transform:translateX(0)}to{transform:translateX(100%)}}@keyframes arco-carousel-slide-y-in{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes arco-carousel-slide-y-out{from{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes arco-carousel-slide-y-in-reverse{from{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes arco-carousel-slide-y-out-reverse{from{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes arco-carousel-card-bottom-to-middle{from{opacity:0;transform:translateX(0) translateZ(-400px)}to{opacity:.4;transform:translateX(0) translateZ(-200px)}}@keyframes arco-carousel-card-middle-to-bottom{from{opacity:.4;transform:translateX(-100%) translateZ(-200px)}to{opacity:0;transform:translateX(-100%) translateZ(-400px)}}@keyframes arco-carousel-card-middle-to-bottom-rtl{from{opacity:.4;transform:translateX(100%) translateZ(-200px)}to{opacity:0;transform:translateX(100%) translateZ(-400px)}}@keyframes arco-carousel-card-top-to-middle{from{opacity:1;transform:translateX(-50%) translateZ(0)}to{opacity:.4;transform:translateX(-100%) translateZ(-200px)}}@keyframes arco-carousel-card-top-to-middle-rtl{from{opacity:1;transform:translateX(50%) translateZ(0)}to{opacity:.4;transform:translateX(100%) translateZ(-200px)}}@keyframes arco-carousel-card-middle-to-top{from{opacity:.4;transform:translateX(0) translateZ(-200px)}to{opacity:1;transform:translateX(-50%) translateZ(0)}}@keyframes arco-carousel-card-middle-to-top-rtl{from{opacity:.4;transform:translateX(0) translateZ(-200px)}to{opacity:1;transform:translateX(50%) translateZ(0)}}@keyframes arco-carousel-card-bottom-to-middle-reverse{from{opacity:0;transform:translateX(-100%) translateZ(-400px)}to{opacity:.4;transform:translateX(-100%) translateZ(-200px)}}@keyframes arco-carousel-card-bottom-to-middle-reverse-rtl{from{opacity:0;transform:translateX(100%) translateZ(-400px)}to{opacity:.4;transform:translateX(100%) translateZ(-200px)}}@keyframes arco-carousel-card-middle-to-bottom-reverse{from{opacity:.4;transform:translateX(0) translateZ(-200px)}to{opacity:0;transform:translateX(0) translateZ(-400px)}}@keyframes arco-carousel-card-top-to-middle-reverse{from{opacity:1;transform:translateX(-50%) translateZ(0)}to{opacity:.4;transform:translateX(0) translateZ(-200px)}}@keyframes arco-carousel-card-top-to-middle-reverse-rtl{from{opacity:1;transform:translateX(50%) translateZ(0)}to{opacity:.4;transform:translateX(0) translateZ(-200px)}}@keyframes arco-carousel-card-middle-to-top-reverse{from{opacity:.4;transform:translateX(-100%) translateZ(-200px)}to{opacity:1;transform:translateX(-50%) translateZ(0)}}@keyframes arco-carousel-card-middle-to-top-reverse-rtl{from{opacity:.4;transform:translateX(100%) translateZ(-200px)}to{opacity:1;transform:translateX(50%) translateZ(0)}}@keyframes arco-carousel-card-right-to-middle{from{opacity:0;transform:translateX(-50%) translateY(0) translateZ(-400px)}to{opacity:.4;transform:translateX(-50%) translateY(0) translateZ(-200px)}}@keyframes arco-carousel-card-middle-to-right{from{opacity:.4;transform:translateX(-50%) translateY(-100%) translateZ(-200px)}to{opacity:0;transform:translateX(-50%) translateY(-100%) translateZ(-400px)}}@keyframes arco-carousel-card-left-to-middle{from{opacity:1;transform:translateX(-50%) translateY(-50%) translateZ(0)}to{opacity:.4;transform:translateX(-50%) translateY(-100%) translateZ(-200px)}}@keyframes arco-carousel-card-middle-to-left{from{opacity:.4;transform:translateX(-50%) translateY(0) translateZ(-200px)}to{opacity:1;transform:translateX(-50%) translateY(-50%) translateZ(0)}}@keyframes arco-carousel-card-right-to-middle-reverse{from{opacity:0;transform:translateX(-50%) translateY(-100%) translateZ(-400px)}to{opacity:.4;transform:translateX(-50%) translateY(-100%) translateZ(-200px)}}@keyframes arco-carousel-card-middle-to-right-reverse{from{opacity:.4;transform:translateX(-50%) translateY(0) translateZ(-200px)}to{opacity:0;transform:translateX(-50%) translateY(0) translateZ(-400px)}}@keyframes arco-carousel-card-left-to-middle-reverse{from{opacity:1;transform:translateX(-50%) translateY(-50%) translateZ(0)}to{opacity:.4;transform:translateX(-50%) translateY(0) translateZ(-200px)}}@keyframes arco-carousel-card-middle-to-left-reverse{from{opacity:.4;transform:translateX(-50%) translateY(-100%) translateZ(-200px)}to{opacity:1;transform:translateX(-50%) translateY(-50%) translateZ(0)}}.arco-carousel{position:relative}.arco-carousel-indicator-position-outer{margin-bottom:30px}.arco-carousel-card,.arco-carousel-fade,.arco-carousel-slide{width:100%;height:100%;overflow:hidden;position:relative}.arco-carousel-card>*,.arco-carousel-fade>*,.arco-carousel-slide>*{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.arco-carousel-horizontal>*{left:50%;opacity:0;transform:translateX(-50%) translateZ(-400px);animation:arco-carousel-card-middle-to-bottom}.arco-carousel-rtl .arco-carousel-card.arco-carousel-horizontal>*{left:unset;right:50%;animation:arco-carousel-card-middle-to-bottom-rtl}.arco-carousel-card.arco-carousel-horizontal .arco-carousel-item-prev{opacity:.4;transform:translateX(-100%) translateZ(-200px);animation:arco-carousel-card-top-to-middle}.arco-carousel-rtl .arco-carousel-card.arco-carousel-horizontal .arco-carousel-item-prev{transform:translateX(100%) translateZ(-200px);animation:arco-carousel-card-top-to-middle-rtl}.arco-carousel-card.arco-carousel-horizontal .arco-carousel-item-next{opacity:.4;transform:translateX(0) translateZ(-200px);animation:arco-carousel-card-bottom-to-middle}.arco-carousel-card.arco-carousel-horizontal .arco-carousel-item-current{opacity:1;transform:translateX(-50%) translateZ(0);animation:arco-carousel-card-middle-to-top}.arco-carousel-rtl .arco-carousel-card.arco-carousel-horizontal .arco-carousel-item-current{transform:translateX(50%) translateZ(0);animation:arco-carousel-card-middle-to-top-rtl}.arco-carousel-card.arco-carousel-horizontal.arco-carousel-negative>*{animation:arco-carousel-card-middle-to-bottom-reverse}.arco-carousel-card.arco-carousel-horizontal.arco-carousel-negative .arco-carousel-item-prev{animation:arco-carousel-card-bottom-to-middle-reverse}.arco-carousel-rtl .arco-carousel-card.arco-carousel-horizontal.arco-carousel-negative .arco-carousel-item-prev{animation:arco-carousel-card-bottom-to-middle-reverse-rtl}.arco-carousel-card.arco-carousel-horizontal.arco-carousel-negative .arco-carousel-item-next{animation:arco-carousel-card-top-to-middle-reverse}.arco-carousel-rtl .arco-carousel-card.arco-carousel-horizontal.arco-carousel-negative .arco-carousel-item-next{animation:arco-carousel-card-top-to-middle-reverse-rtl}.arco-carousel-card.arco-carousel-horizontal.arco-carousel-negative .arco-carousel-item-current{animation:arco-carousel-card-middle-to-top-reverse}.arco-carousel-rtl .arco-carousel-card.arco-carousel-horizontal.arco-carousel-negative .arco-carousel-item-current{animation:arco-carousel-card-middle-to-top-reverse-rtl}.arco-carousel-card.arco-carousel-vertical>*{top:50%;left:50%;opacity:0;transform:translateX(-50%) translateY(-50%) translateZ(-400px);animation:arco-carousel-card-middle-to-right;display:flex;justify-content:center}.arco-carousel-card.arco-carousel-vertical .arco-carousel-item-prev{opacity:.4;transform:translateX(-50%) translateY(-100%) translateZ(-200px);animation:arco-carousel-card-left-to-middle}.arco-carousel-card.arco-carousel-vertical .arco-carousel-item-next{opacity:.4;transform:translateX(-50%) translateY(0) translateZ(-200px);animation:arco-carousel-card-right-to-middle}.arco-carousel-card.arco-carousel-vertical .arco-carousel-item-current{opacity:1;transform:translateX(-50%) translateY(-50%) translateZ(0);animation:arco-carousel-card-middle-to-left}.arco-carousel-card.arco-carousel-negative>*{animation:arco-carousel-card-middle-to-right-reverse}.arco-carousel-card.arco-carousel-negative .arco-carousel-item-prev{animation:arco-carousel-card-right-to-middle-reverse}.arco-carousel-card.arco-carousel-negative .arco-carousel-item-next{animation:arco-carousel-card-left-to-middle-reverse}.arco-carousel-card.arco-carousel-negative .arco-carousel-item-current{animation:arco-carousel-card-middle-to-left-reverse}.arco-carousel-fade>*{left:50%;transform:translateX(-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:0 0}.arco-carousel-indicator-wrapper-outer-right{right:0;top:0;width:20px;height:100%}.arco-carousel-indicator-bottom{bottom:12px;left:50%;transform:translateX(-50%)}.arco-carousel-indicator-top{top:12px;left:50%;transform:translateX(-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:translateX(-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-active,.arco-carousel-indicator-outer .arco-carousel-indicator-item:hover{background-color:var(--color-fill-4)}.arco-carousel-indicator-outer-right{top:50%;left:50%;transform:translate(-50%,-50%) rotate(90deg);padding:4px;border-radius:20px;background-color:transparent}.arco-carousel-indicator-outer-right.arco-carousel-indicator-slider{padding:0;background-color:rgba(var(--gray-4),.5)}.arco-carousel-indicator-outer-right .arco-carousel-indicator-item{background-color:rgba(var(--gray-4),.5)}.arco-carousel-indicator-outer-right .arco-carousel-indicator-item-active,.arco-carousel-indicator-outer-right .arco-carousel-indicator-item:hover{background-color:var(--color-fill-4)}.arco-carousel-indicator-item{display:inline-block;border-radius:var(--border-radius-medium);background-color:rgba(255,255,255,.3);cursor:pointer}.arco-carousel-indicator-item-active,.arco-carousel-indicator-item:hover{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:rgba(255,255,255,.3);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:rgba(255,255,255,.3);cursor:pointer;z-index:2;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.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:rgba(255,255,255,.5)}.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:translateX(-50%);top:12px}.arco-carousel-arrow-bottom{left:50%;transform:translateX(-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{direction:rtl}.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-active,body[arco-theme=dark] .arco-carousel-indicator-outer .arco-carousel-indicator-item:hover{background-color:var(--color-fill-4)}