Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
.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);
}
}