dev

Note: After publishing, you may have to bypass your browser's cache to see the changes.

.fandom-slider.orientation-bottom .fandom-slider__nav {
    background: linear-gradient(transparent, #000000cc);
    bottom: 0;
    flex-direction: column;
    height: auto;
}
.fandom-slider.orientation-right .fandom-slider__nav {
    background: linear-gradient(270deg, transparent, #000000cc);
    flex-direction: row;
    height: 100%;
    right: 0;
    width: 100%;
}
.fandom-slider__controls {
    z-index: 2;
}
.fandom-slider.orientation-right:hover .fandom-slider__controls__next {
    right: 22px;
}
.fandom-slider__nav__caption {
    height: auto;
    overflow: visible;
    padding: 0 !important;
}
.fandom-slider.orientation-right .fandom-slider__nav__caption {
    height: 100%;
    width: 100%;
}
.fandom-slider .fandom-slider__nav__caption > div {
    flex-direction: column;
    justify-content: center;
}
.fandom-slider .fandom-slider__nav__caption > div[style*="opacity: 1"] {
    display: flex !important;
}
.fandom-slider.orientation-bottom .fandom-slider__nav__caption > div {
    align-items: center;
}
.fandom-slider.orientation-right .fandom-slider__nav__caption > div {
    align-items: flex-start;
    height: auto;
    padding-left: 45px;
    width: 100%;
    transform: translatey(calc(100% + 40px));
    text-align: left;
}
.fandom-slider__nav__caption > div > h2 {
    animation: move-in 0.4s;
    font-size: 25px;
    line-height: inherit;
    text-shadow: 0 0 10px #0009;
}
.fandom-slider__nav__caption > div > h2 ~ p {
    animation: move-in 0.6s;
    font-size: 14px;
    line-height: 20px;
    padding: 1px 0;
}
.fandom-slider__nav__caption > div > p:last-child {
    animation: move-in 0.8s;
    display: flex;
    justify-content: center;
    line-height: 16px;
}
.fandom-slider__nav__caption > div > p:last-child > a {
    background-color: rgba(var(--theme-accent-color--rgb), 0.3);
    border-radius: 5px;
    border: 1px solid rgba(var(--theme-accent-color--rgb), 0.5);
    color: white;
    display: flex;
    font-size: 16px;
    line-height: 16px;
    margin: 5px 0;
    padding: 6px 12px;
    transition: 0.3s;
}
.fandom-slider__nav__caption > div > p:last-child > a:hover {
    background-color: rgba(var(--theme-accent-color--rgb), 0.6);
    border-color: rgba(var(--theme-accent-color--rgb), 0.8);
    text-decoration: none;
}
.fandom-slider .fandom-slider__nav__thumbs {
    align-items: flex-end;
    gap: 10px;
    justify-content: center;
}
.fandom-slider .fandom-slider__nav__thumbs > div {
    background-color: white;
    border-radius: 5px;
    padding: 0;
    transition: 0.3s;
}
.fandom-slider.orientation-right .fandom-slider__nav__thumbs {
    width: auto;
}
.fandom-slider.orientation-bottom .fandom-slider__nav__thumbs > div {
    height: 6px;
    margin: 5px 0;
}
.fandom-slider.orientation-right .fandom-slider__nav__thumbs > div {
    margin: 0 5px;
    width: 6px;
}
.fandom-slider__nav__thumbs > div.current-thumb {
    background-color: var(--theme-accent-color);
    border-color: transparent;
}
.fandom-slider__nav__thumbs > div > img {
    visibility: hidden;
}
.fandom-slider.orientation-right
    .fandom-slider__nav__caption
    > div
    > p:last-child {
    justify-content: unset;
}
.fandom-slider.orientation-bottom
    .fandom-slider__nav__thumbs
    .fandom-slider__nav__thumb-0 {
    animation: slider-move-in--bottom 0.5s;
}
.fandom-slider.orientation-bottom
    .fandom-slider__nav__thumbs
    .fandom-slider__nav__thumb-1 {
    animation: slider-move-in--bottom 0.6s;
}
.fandom-slider.orientation-bottom
    .fandom-slider__nav__thumbs
    .fandom-slider__nav__thumb-2 {
    animation: slider-move-in--bottom 0.7s;
}
.fandom-slider.orientation-bottom
    .fandom-slider__nav__thumbs
    .fandom-slider__nav__thumb-3 {
    animation: slider-move-in--bottom 0.8s;
}
.fandom-slider.orientation-right
    .fandom-slider__nav__thumbs
    .fandom-slider__nav__thumb-0 {
    animation: slider-move-in--right 0.5s;
}
.fandom-slider.orientation-right
    .fandom-slider__nav__thumbs
    .fandom-slider__nav__thumb-1 {
    animation: slider-move-in--right 0.6s;
}
.fandom-slider.orientation-right
    .fandom-slider__nav__thumbs
    .fandom-slider__nav__thumb-2 {
    animation: slider-move-in--right 0.7s;
}
.fandom-slider.orientation-right
    .fandom-slider__nav__thumbs
    .fandom-slider__nav__thumb-3 {
    animation: slider-move-in--right 0.8s;
}
.fandom-slider__nav__thumbs img,
.fandom-slider__nav__thumbs svg {
    display: none !important;
}
.fandom-slider__nav__caption {
    height: auto;
    overflow: visible;
    padding: 0 !important;
    text-align: center;
}

@keyframes slider-move-in--bottom {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }

    50% {
        transform: translateY(-5px);
    }
}

@keyframes slider-move-in--right {
    0% {
        opacity: 0;
        transform: translateX(30px);
    }

    50% {
        transform: translateX(-5px);
    }
}