--jp-carousel-primary-color: #fff;
--jp-carousel-primary-subtle-color: #999;
--jp-carousel-bg-color: #000;
--jp-carousel-bg-faded-color: #222;
--jp-carousel-border-color: #3a3a3a;
:root .jp-carousel-light {
--jp-carousel-primary-color: #000;
--jp-carousel-primary-subtle-color: #646970;
--jp-carousel-bg-color: #fff;
--jp-carousel-bg-faded-color: #fbfbfb;
--jp-carousel-border-color: #dcdcde;
.jp-carousel-overlay .swiper-button-prev,
.jp-carousel-overlay .swiper-rtl .swiper-button-next,
.jp-carousel-overlay .swiper-button-next,
.jp-carousel-overlay .swiper-rtl .swiper-button-prev {
/* end of temporary fix */
[data-carousel-extra]:not(.jp-carousel-wrap) img,
[data-carousel-extra]:not(.jp-carousel-wrap) img + figcaption {
.jp-carousel-wrap.swiper {
.jp-carousel-overlay .swiper-zoom-container {
background-repeat: no-repeat;
background-position: center;
To prevent flash of prev/next image scale transition after pinch zoom we need
to hide them. Swiper does not add a class of `swiper-slide-zoomed` to slides
on pinch and zoom so we have to target all affected elements in touch devices.
.jp-carousel-overlay .swiper-slide.swiper-slide-prev .swiper-zoom-container img,
.jp-carousel-overlay .swiper-slide.swiper-slide-next .swiper-zoom-container img {
transition: none !important;
.jp-carousel-overlay .swiper-button-prev,
.jp-carousel-overlay .swiper-button-next {
transition: 0.5s opacity ease-out;
.jp-carousel-overlay .swiper-button-prev:hover,
.jp-carousel-overlay .swiper-button-next:hover {
.jp-carousel-overlay .swiper-button-next::after,
.jp-carousel-overlay .swiper-rtl .swiper-button-next::after,
.jp-carousel-overlay .swiper-button-prev::after,
.jp-carousel-overlay .swiper-rtl .swiper-button-prev::after {
.jp-carousel-overlay .swiper-button-prev svg,
.jp-carousel-overlay .swiper-button-next svg {
background: var(--jp-carousel-bg-color);
.jp-carousel-overlay .swiper-button-prev svg:hover,
.jp-carousel-overlay .swiper-button-next svg:hover {
background: var(--jp-carousel-primary-subtle-color);
font-family: "Helvetica Neue", sans-serif !important;
background: var(--jp-carousel-bg-color);
/* Fix for Twenty Nineteen theme compatibility */
.jp-carousel-overlay h1::before,
.jp-carousel-overlay h2::before,
.jp-carousel-overlay h3::before {
.jp-carousel-overlay .swiper .swiper-button-prev {
.jp-carousel-overlay .swiper .swiper-button-next {
.jp-carousel-overlay .swiper.swiper-rtl .swiper-button-prev,
.jp-carousel-overlay .swiper.swiper-rtl .swiper-button-next {
grid-template-rows: 1fr 64px; /* 1. main carousel, 2. info area as footer */
.jp-carousel-hide-controls .jp-carousel-container {
.jp-carousel-hide-controls .swiper-wrapper {
margin-top: -32px; /* Compensate for the remove of the height of the info bar. */
.jp-carousel-hide-controls .jp-swiper-button-next,
.jp-carousel-hide-controls .jp-swiper-button-prev {
margin-top: -54px; /* The height of the info bar plus any top padding on the nav button itself. */
font-family: "Open Sans", sans-serif;
background-color: var(--jp-carousel-primary-color);
border-left: 4px solid #ffba00;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
text-align: left !important;
-webkit-font-smoothing: subpixel-antialiased !important;
background-color: var(--jp-carousel-bg-color);
transition: opacity 200ms ease-out;
.jp-carousel-hide-controls .jp-carousel-info {
.jp-carousel-info-footer {
background-color: var(--jp-carousel-bg-color);
justify-content: space-between;
.jp-carousel-info-extra {
background-color: var(--jp-carousel-bg-color);
border-top: 1px solid var(--jp-carousel-bg-faded-color);
.jp-carousel-title-and-caption {
.jp-carousel-info-extra.jp-carousel-show {
.jp-carousel-info ::selection {
background: var(--jp-carousel-primary-color); /* Safari */
color: var(--jp-carousel-primary-color);
.jp-carousel-info ::-moz-selection {
background: var(--jp-carousel-primary-color); /* Firefox */
color: var(--jp-carousel-primary-color);
.jp-carousel-photo-info {
.jp-carousel-comments-wrapper {
.jp-carousel-comments-wrapper.jp-carousel-show {
.jp-carousel-comments-wrapper > .jp-carousel-photo-info {
.jp-carousel-transitions .jp-carousel-photo-info {
transition: 400ms ease-out;
margin: -18px -20px 15px;
border-bottom: 1px solid #222;
div.jp-carousel-buttons a {
color: var(--jp-carousel-primary-subtle-color);
font: 400 11px/1.2em "Helvetica Neue", sans-serif !important;
letter-spacing: 0 !important;
text-decoration: none !important;
text-shadow: none !important;
-webkit-font-smoothing: subpixel-antialiased;
div.jp-carousel-buttons a:hover {
color: var(--jp-carousel-primary-color);
.jp-carousel-transitions div.jp-carousel-buttons a:hover {
transition: none !important;
transform: translate3d(0, 0, 0);
.jp-carousel-close-hint {
letter-spacing: 0 !important;
color: var(--jp-carousel-primary-color);
transition: opacity 200ms ease-out;
.jp-carousel-transitions .jp-carousel-close-hint {
transition: color 200ms linear;
.jp-carousel-close-hint svg {
background: var(--jp-carousel-bg-color);
.jp-carousel-close-hint svg:hover {
background: var(--jp-carousel-primary-subtle-color);
.jp-carousel-close-hint:hover {
color: var(--jp-carousel-primary-color);
.jp-carousel-close-hint:hover span {
border-color: var(--jp-carousel-primary-color);
.jp-carousel-pagination-container {
.jp-carousel-pagination {
color: var(--jp-carousel-primary-color);
font-size: 15px; /* same as .jp-carousel-info-footer .jp-carousel-photo-title */
position: static !important;
.jp-carousel-pagination-container .swiper-pagination {
.jp-carousel-pagination {
.jp-swiper-pagination .swiper-pagination-bullet {
background: var(--jp-carousel-primary-subtle-color);
.jp-swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
background: var(--jp-carousel-primary-color);
.jp-swiper-pagination .swiper-pagination-bullet:not(.swiper-pagination-bullet-active) {
background: var(--jp-carousel-primary-color);
/** Title and Desc Start **/
.jp-carousel-info-footer .jp-carousel-photo-title-container {
.jp-carousel-photo-title,
.jp-carousel-photo-caption {
background: none !important;
font: 400 20px/1.3em "Helvetica Neue", sans-serif;
letter-spacing: 0 !important;
text-shadow: none !important;
text-transform: none !important;
color: var(--jp-carousel-primary-color);
.jp-carousel-info-footer .jp-carousel-photo-caption {
font-size: 15px; /* same as .jp-carousel-pagination */
color: var(--jp-carousel-primary-subtle-color);
.jp-carousel-info-footer .jp-carousel-photo-caption p {
.jp-carousel-photo-title {
.jp-carousel-photo-description {
color: var(--jp-carousel-primary-subtle-color);
overflow-wrap: break-word;
.jp-carousel-photo-description p {
color: var(--jp-carousel-primary-subtle-color);
.jp-carousel-photo-description p a,
.jp-carousel-comments p a,
color: var(--jp-carousel-primary-color) !important;
text-decoration: underline !important;
font-weight: 400 !important;
font-style: normal !important;
.jp-carousel-photo-description p strong,
.jp-carousel-photo-description p b {
color: var(--jp-carousel-primary-subtle-color);
.jp-carousel-photo-description p em,
.jp-carousel-photo-description p i {
color: var(--jp-carousel-primary-subtle-color);
.jp-carousel-photo-description p a:hover,
.jp-carousel-comments p a:hover,
.jp-carousel-info h2 a:hover {
color: var(--jp-carousel-primary-subtle-color) !important;
.jp-carousel-photo-description p:empty {
.jp-carousel-photo-info h1::before,
.jp-carousel-photo-info h1::after,
.jp-carousel-comments-wrapper h1::before,
.jp-carousel-comments-wrapper h1::after {
content: none !important;
/** Title and Desc End **/
.jp-carousel-image-meta {
color: var(--jp-carousel-primary-color);
font: 12px/1.4 "Helvetica Neue", sans-serif !important;
.jp-carousel-image-meta.jp-carousel-show {
.jp-carousel-image-meta li,
.jp-carousel-image-meta h5 {
font-family: "Helvetica Neue", sans-serif !important;
position: inherit !important;
background: none !important;
font-weight: 400 !important;
/* stylelint-disable-next-line declaration-property-unit-allowed-list -- this should be changed to a unitless value: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/css/#values */
line-height: 1.3em !important;
.jp-carousel-image-meta ul {
list-style: none !important;
.jp-carousel-image-meta li {
display: inline-block !important;
vertical-align: top !important;
margin: 0 2% 15px 0 !important;
color: var(--jp-carousel-primary-color) !important;
font-size: 13px !important;