vue-carousel-lite
Version:
Fast, Lightweight Vue Carousel With Touch, Mouse, Keyboard, Wheel & SSR support
2 lines (1 loc) • 17.5 kB
CSS
.carousel-pagination{--carousel-pagination-gap: .5rem;--carousel-pagination-padding: 1rem;--carousel-pagination-z-index: 5;--carousel-pagination-border-radius: .125rem;--carousel-pagination-bottom-offset: 0rem;--carousel-pagination-side-offset: .5rem;--carousel-pagination-primary-color: white;--carousel-pagination-secondary-color: rgba(255, 255, 255, .3);--carousel-pagination-accent-color: rgba(59, 130, 246, .5);--carousel-pagination-text-color: white;--carousel-pagination-border-color: rgba(0, 0, 0, .15);--carousel-pagination-shadow-color: rgba(0, 0, 0, .1);--carousel-pagination-bg-inactive: var(--carousel-pagination-secondary-color);--carousel-pagination-bg-hover: rgba(255, 255, 255, .8);--carousel-pagination-bg-active: rgba(255, 255, 255, .9);--carousel-pagination-bg-current: var(--carousel-pagination-primary-color);--carousel-pagination-focus-color: var(--carousel-pagination-accent-color);--carousel-pagination-hover-scale: 1.1;--carousel-pagination-active-scale: 1.25;--carousel-pagination-disabled-opacity: .5;--carousel-pagination-font-size: .875rem;--carousel-pagination-font-weight: 500;--carousel-pagination-font-weight-bold: 700;--carousel-pagination-text-shadow: rgba(0, 0, 0, .8) .1px .5px 1px;--carousel-pagination-dot-size: .65em;--carousel-pagination-dot-border-width: .5px;--carousel-pagination-dot-hover-scale: var(--carousel-pagination-hover-scale);--carousel-pagination-dot-current-scale: var(--carousel-pagination-active-scale);--carousel-pagination-line-width: 2rem;--carousel-pagination-line-height: .25rem;--carousel-pagination-line-border-radius: var(--carousel-pagination-border-radius);--carousel-pagination-line-gap: .25rem;--carousel-pagination-line-vertical-width: .25em;--carousel-pagination-line-vertical-height: 1em;--carousel-pagination-button-size: 2.6rem;--carousel-pagination-button-border-width: 1px;--carousel-pagination-button-border-color: rgba(255, 255, 255, .6);--carousel-pagination-button-bg: rgba(0, 0, 0, .4);--carousel-pagination-button-hover-border: rgba(255, 255, 255, .4);--carousel-pagination-button-hover-bg: rgba(0, 0, 0, .2);--carousel-pagination-button-icon-size: 1.25rem;--carousel-pagination-button-gap: 1rem;--carousel-pagination-button-rotation: 90deg;--carousel-pagination-button-scale: .9;--carousel-pagination-button-backdrop-blur: 0px;--carousel-pagination-fraction-border-color: rgba(255, 255, 255, .1);--carousel-pagination-fraction-bg: rgba(0, 0, 0, .2);--carousel-pagination-fraction-padding: .5rem 1rem;--carousel-pagination-fraction-border-radius: 1rem;--carousel-pagination-fraction-gap: .25rem;--carousel-pagination-fraction-backdrop-blur: 4px;--carousel-pagination-fraction-separator-opacity: .7;--carousel-pagination-fraction-total-opacity: .9;--carousel-pagination-progressbar-max-width: 200px;--carousel-pagination-progressbar-track-height: .25rem;--carousel-pagination-progressbar-track-bg: var(--carousel-pagination-secondary-color);--carousel-pagination-progressbar-track-border-radius: var(--carousel-pagination-border-radius);--carousel-pagination-progressbar-fill-bg: var(--carousel-pagination-primary-color);--carousel-pagination-progressbar-fill-border-radius: var(--carousel-pagination-border-radius);--carousel-pagination-transition-duration: .3s;--carousel-pagination-transition-timing: ease;--carousel-pagination-transition: all var(--carousel-pagination-transition-duration) var(--carousel-pagination-transition-timing);--carousel-pagination-progressbar-transition: width var(--carousel-pagination-transition-duration) var(--carousel-pagination-transition-timing)}.carousel-pagination--sm{--carousel-pagination-gap: .25rem;--carousel-pagination-padding: .5rem;--carousel-pagination-font-size: .75rem;--carousel-pagination-button-size: 2rem;--carousel-pagination-button-icon-size: 1rem;--carousel-pagination-dot-size: .75em;--carousel-pagination-line-width: 1.25rem;--carousel-pagination-line-height: .2rem;--carousel-pagination-fraction-padding: .25rem .5rem}.carousel-pagination--lg{--carousel-pagination-gap: 1rem;--carousel-pagination-padding: 1.5rem;--carousel-pagination-font-size: 1rem;--carousel-pagination-button-size: 3.25rem;--carousel-pagination-button-icon-size: 1.5rem;--carousel-pagination-dot-size: 1em;--carousel-pagination-line-width: 2.75rem;--carousel-pagination-line-height: .375rem;--carousel-pagination-fraction-padding: .75rem 1.25rem}.carousel-pagination{display:flex;align-items:center;justify-content:center;gap:var(--carousel-pagination-gap);padding:var(--carousel-pagination-padding);z-index:var(--carousel-pagination-z-index);transition:opacity var(--carousel-pagination-transition-duration) var(--carousel-pagination-transition-timing)}.carousel-pagination--center{padding:0}.carousel-pagination--center .carousel-pagination-items .carousel-pagination-button:first-child{position:absolute;top:50%;left:var(--carousel-pagination-side-offset);transform:translate(-50%,-50%)}.carousel-pagination--center .carousel-pagination-items .carousel-pagination-button:last-child{position:absolute;top:50%;right:var(--carousel-pagination-side-offset);transform:translate(50%,-50%)}.carousel-pagination--bottom-center{position:absolute;bottom:var(--carousel-pagination-bottom-offset);left:50%;transform:translate(-50%)}.carousel-pagination--bottom-left{position:absolute;bottom:var(--carousel-pagination-side-offset);left:var(--carousel-pagination-side-offset)}.carousel-pagination--bottom-right{position:absolute;bottom:var(--carousel-pagination-side-offset);right:var(--carousel-pagination-side-offset)}.carousel-pagination--center-right{position:absolute;top:50%;right:var(--carousel-pagination-side-offset);transform:translateY(-50%);flex-direction:column}.carousel-pagination--center-left{position:absolute;top:50%;left:var(--carousel-pagination-side-offset);transform:translateY(-50%);flex-direction:column}.carousel-pagination--vertical.carousel-pagination--center-right .carousel-pagination-items,.carousel-pagination--vertical.carousel-pagination--center-left .carousel-pagination-items,.carousel-pagination--vertical.carousel-pagination--bottom-left .carousel-pagination-items,.carousel-pagination--vertical.carousel-pagination--bottom-right .carousel-pagination-items{flex-direction:column}.carousel-pagination--vertical.carousel-pagination--center-right .carousel-pagination-line,.carousel-pagination--vertical.carousel-pagination--center-left .carousel-pagination-line,.carousel-pagination--vertical.carousel-pagination--bottom-left .carousel-pagination-line,.carousel-pagination--vertical.carousel-pagination--bottom-right .carousel-pagination-line{flex-direction:column;width:var(--carousel-pagination-line-vertical-width);height:var(--carousel-pagination-line-vertical-height)}.carousel-pagination--vertical .carousel-pagination-button{transform:rotate(var(--carousel-pagination-button-rotation)) scale(var(--carousel-pagination-button-scale))}.carousel-pagination-dots{display:flex;align-items:center;gap:var(--carousel-pagination-gap)}.carousel-pagination-dot{padding:0;width:var(--carousel-pagination-dot-size);height:var(--carousel-pagination-dot-size);min-width:var(--carousel-pagination-dot-size);min-height:var(--carousel-pagination-dot-size);border-radius:50%;border:var(--carousel-pagination-dot-border-width) solid var(--carousel-pagination-border-color);background-color:var(--carousel-pagination-bg-inactive);cursor:pointer;transition:var(--carousel-pagination-transition);outline:none;position:relative}.carousel-pagination-dot:hover{background-color:var(--carousel-pagination-bg-hover);transform:scale(var(--carousel-pagination-dot-hover-scale))}.carousel-pagination-dot--active{background-color:var(--carousel-pagination-bg-active)}.carousel-pagination-dot--current{background-color:var(--carousel-pagination-bg-current);transform:scale(var(--carousel-pagination-dot-current-scale))}.carousel-pagination-dot:focus{box-shadow:0 0 0 2px var(--carousel-pagination-focus-color)}.carousel-pagination-lines{display:flex;align-items:center;gap:var(--carousel-pagination-line-gap)}.carousel-pagination-line{padding:0;width:var(--carousel-pagination-line-width);height:var(--carousel-pagination-line-height);border:var(--carousel-pagination-dot-border-width) solid var(--carousel-pagination-border-color);background-color:var(--carousel-pagination-bg-inactive);cursor:pointer;transition:var(--carousel-pagination-transition);outline:none;border-radius:var(--carousel-pagination-line-border-radius);position:relative}.carousel-pagination-line:hover{background-color:var(--carousel-pagination-bg-hover)}.carousel-pagination-line--active{background-color:var(--carousel-pagination-bg-active)}.carousel-pagination-line--current{background-color:var(--carousel-pagination-bg-current)}.carousel-pagination-line:focus{box-shadow:0 0 0 2px var(--carousel-pagination-focus-color)}.carousel-pagination-buttons{display:flex;align-items:center;gap:var(--carousel-pagination-button-gap)}.carousel-pagination-button{display:flex;align-items:center;justify-content:center;width:var(--carousel-pagination-button-size);height:var(--carousel-pagination-button-size);border:var(--carousel-pagination-button-border-width) solid var(--carousel-pagination-button-border-color);background-color:var(--carousel-pagination-button-bg);border-radius:50%;cursor:pointer;transition:var(--carousel-pagination-transition);outline:none;color:var(--carousel-pagination-text-color);-webkit-backdrop-filter:blur(var(--carousel-pagination-button-backdrop-blur));backdrop-filter:blur(var(--carousel-pagination-button-backdrop-blur));position:relative}.carousel-pagination-button:hover:not(:disabled){border-color:var(--carousel-pagination-button-hover-border);background-color:var(--carousel-pagination-button-hover-bg)}.carousel-pagination-button:focus{box-shadow:0 0 0 2px var(--carousel-pagination-focus-color)}.carousel-pagination-button--disabled{opacity:var(--carousel-pagination-disabled-opacity);cursor:not-allowed}.carousel-pagination-button svg{width:var(--carousel-pagination-button-icon-size);height:var(--carousel-pagination-button-icon-size);transition:transform var(--carousel-pagination-transition-duration) var(--carousel-pagination-transition-timing)}.carousel-pagination-fraction{display:flex;align-items:center;gap:var(--carousel-pagination-fraction-gap);border:var(--carousel-pagination-button-border-width) solid var(--carousel-pagination-fraction-border-color);background-color:var(--carousel-pagination-fraction-bg);color:var(--carousel-pagination-text-color);padding:var(--carousel-pagination-fraction-padding);border-radius:var(--carousel-pagination-fraction-border-radius);font-size:var(--carousel-pagination-font-size);font-weight:var(--carousel-pagination-font-weight);-webkit-backdrop-filter:blur(var(--carousel-pagination-fraction-backdrop-blur));backdrop-filter:blur(var(--carousel-pagination-fraction-backdrop-blur));text-shadow:var(--carousel-pagination-text-shadow);position:relative}.carousel-pagination-fraction-current{font-weight:var(--carousel-pagination-font-weight-bold)}.carousel-pagination-fraction-separator{opacity:var(--carousel-pagination-fraction-separator-opacity)}.carousel-pagination-fraction-total{opacity:var(--carousel-pagination-fraction-total-opacity)}.carousel-pagination-progressbar{width:100%;max-width:var(--carousel-pagination-progressbar-max-width);position:relative}.carousel-pagination-progressbar-track{width:100%;height:var(--carousel-pagination-progressbar-track-height);background-color:var(--carousel-pagination-progressbar-track-bg);border-radius:var(--carousel-pagination-progressbar-track-border-radius);overflow:hidden;position:relative}.carousel-pagination-progressbar-fill{height:100%;background-color:var(--carousel-pagination-progressbar-fill-bg);border-radius:var(--carousel-pagination-progressbar-fill-border-radius);transition:var(--carousel-pagination-progressbar-transition);position:relative}.carousel-pagination-dot:focus-visible,.carousel-pagination-line:focus-visible,.carousel-pagination-button:focus-visible{box-shadow:0 0 0 3px var(--carousel-pagination-focus-color);outline:none}@media (prefers-reduced-motion: reduce){.carousel-pagination-dot,.carousel-pagination-line,.carousel-pagination-button,.carousel-pagination-button svg,.carousel-pagination-progressbar-fill{transition:none}}@media (max-width: 640px){.carousel-pagination{padding:var(--carousel-pagination-mobile-padding)}.carousel-pagination-button{width:var(--carousel-pagination-mobile-button-size);height:var(--carousel-pagination-mobile-button-size)}.carousel-pagination-button svg{width:var(--carousel-pagination-mobile-button-icon-size);height:var(--carousel-pagination-mobile-button-icon-size)}.carousel-pagination-dot{width:var(--carousel-pagination-mobile-dot-size);height:var(--carousel-pagination-mobile-dot-size)}.carousel-pagination-line{width:var(--carousel-pagination-mobile-line-width);height:var(--carousel-pagination-mobile-line-height)}}@media (prefers-contrast: high){.carousel-pagination-dot,.carousel-pagination-line,.carousel-pagination-button{border-width:2px}.carousel-pagination-dot--current,.carousel-pagination-line--current{outline:2px solid}}.carousel-wrapper{position:relative;width:100%;contain:layout style paint}.carousel{position:relative;width:100%;border-radius:.5rem;max-width:var(--container-width);overflow:hidden;transform:translateZ(0);will-change:auto}.carousel-container{position:relative;width:100%;height:var(--container-height);overflow:hidden;cursor:grab;touch-action:pan-y;outline:none;contain:layout style;transform:translateZ(0)}.carousel-container--no-drag{cursor:default!important}.carousel-focus-container{outline:none;position:relative;border-radius:.5rem;contain:layout}.carousel-focus-container:focus{outline:none}.carousel:not(.carousel--initialized){opacity:1}.carousel--initialized{opacity:1;transition:opacity .15s ease-out}.carousel-container:active{cursor:grabbing}.carousel-container--no-drag:active{cursor:default}.carousel--vertical .carousel-container{touch-action:pan-x;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}.carousel--horizontal .carousel-container{touch-action:pan-y;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}.carousel-container::-webkit-scrollbar{display:none;width:0;height:0}.carousel-container{-ms-overflow-style:none;scrollbar-width:none}.carousel-track{display:flex;transform:translateZ(0);transform-style:preserve-3d;backface-visibility:hidden;perspective:1000px;transition-property:transform;transition-duration:var(--carousel-transition-duration, .3s);transition-timing-function:var(--carousel-transition-timing, cubic-bezier(.25, .46, .45, .94));width:fit-content;height:100%;contain:layout style}.carousel-track-multiple{gap:var(--carousel-gap)}.carousel--initialized .carousel-track{will-change:transform}.carousel-track[data-dragging=true]{transition:none;will-change:transform}.carousel--vertical .carousel-track{flex-direction:column;width:100%;height:fit-content;align-items:flex-start}.carousel--vertical .carousel-track-multiple{gap:var(--carousel-gap)}.carousel-slide{flex:0 0 var(--carousel-slide-width);min-width:0;min-height:0;position:relative;backface-visibility:hidden;contain:layout style paint;box-sizing:border-box}.carousel--vertical .carousel-slide{flex:0 0 auto;width:100%;height:var(--container-height)}.carousel-slide-content{width:100%;height:100%;border-radius:.5rem;overflow:hidden;display:flex;align-items:flex-start;justify-content:center;position:relative;contain:layout style paint}.carousel--initialized .carousel-slide-content{transform:translateZ(0)}.carousel-default-content{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:.875rem;font-weight:500;text-rendering:optimizeSpeed}@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi){.carousel--initialized .carousel-track,.carousel--initialized .carousel-slide{image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges}}@media (prefers-reduced-motion: no-preference){.carousel-track{transition-timing-function:cubic-bezier(.215,.61,.355,1)}.carousel--initialized .carousel-track-multiple .carousel-slide.carouse-last-visible-slide:not(.slide-moving){transition-timing-function:cubic-bezier(.215,.61,.355,1)}}@media (prefers-reduced-motion: reduce){.carousel-track,.carousel-track-multiple .carousel-slide.carouse-last-visible-slide:not(.slide-moving),.carousel--initialized{transition:none;animation:none}.carousel-track{will-change:auto}}@media (max-width: 768px){.carousel--initialized .carousel-track{perspective:none;transform-style:flat}.carousel--initialized .carousel-slide{transform:translateZ(0)}.carousel-slide-content{contain:layout style}}@media (min-width: 1024px) and (min-height: 768px){.carousel--initialized .carousel-track{transform-style:preserve-3d;perspective:2000px}.carousel--initialized .carousel-slide{transform-style:preserve-3d}}.carousel-focus-container:focus-visible{outline:2px solid rgba(59,130,246,.8);outline-offset:2px;border-radius:.5rem}@media print{.carousel-track{transition:none;transform:none;will-change:auto}.carousel-slide{transform:none;break-inside:avoid}}.carousel-slide-content[data-dragging=true] img,.carousel-slide-content[data-dragging=true] a{pointer-events:none;user-drag:none;-webkit-user-drag:none}.carousel-slide-content:not([data-dragging=true]){pointer-events:auto}