2021-09-07 21:40:48 +02:00
: root {
--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 ;
2021-07-23 11:58:50 +02:00
}
2021-09-07 21:40:48 +02:00
: 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 ;
2021-07-23 11:58:50 +02:00
}
2021-09-07 21:40:48 +02:00
2021-08-17 08:33:07 +02:00
. jp-carousel-overlay . swiper-button-prev ,
. jp-carousel-overlay . swiper-container-rtl . swiper-button-next ,
. jp-carousel-overlay . swiper-button-next ,
. jp-carousel-overlay . swiper-container-rtl . swiper-button-prev {
2021-07-23 11:58:50 +02:00
background-image : none ;
}
2025-05-07 06:48:41 +02:00
2021-07-23 11:58:50 +02:00
/* end of temporary fix */
2021-09-07 21:40:48 +02:00
[ data-carousel-extra ] : not ( . jp-carousel-wrap ) img , [ data-carousel-extra ] : not ( . jp-carousel-wrap ) img + figcaption {
2021-07-23 11:58:50 +02:00
cursor : pointer ;
2019-11-15 23:26:29 +01:00
}
. jp-carousel-wrap * {
2021-07-23 11:58:50 +02:00
line-height : inherit ;
2019-11-15 23:26:29 +01:00
}
2021-07-23 11:58:50 +02:00
. jp-carousel-wrap . swiper-container {
height : auto ;
width : 100vw ;
}
. jp-carousel-overlay . swiper-zoom-container {
background-size : 200 % ;
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 {
opacity : 0 . 5 ;
transition : 0 . 5s opacity ease-out ;
height : initial ;
width : initial ;
padding : 20px 40px ;
background-image : none ;
}
. jp-carousel-overlay . swiper-button-prev : hover ,
. jp-carousel-overlay . swiper-button-next : hover {
opacity : 1 ;
}
2025-05-07 06:48:41 +02:00
. jp-carousel-overlay . swiper-button-next :: after ,
. jp-carousel-overlay . swiper-container-rtl . swiper-button-next :: after ,
. jp-carousel-overlay . swiper-button-prev :: after ,
. jp-carousel-overlay . swiper-container-rtl . swiper-button-prev :: after {
2021-07-23 11:58:50 +02:00
content : none ;
}
. jp-carousel-overlay . swiper-button-prev svg ,
. jp-carousel-overlay . swiper-button-next svg {
height : 30px ;
width : 28px ;
2021-09-07 21:40:48 +02:00
background : var ( --jp-carousel-bg-color ) ;
2021-07-23 11:58:50 +02:00
border-radius : 4px ;
2019-11-15 23:26:29 +01:00
}
2023-01-25 20:43:46 +01:00
. jp-carousel-overlay . swiper-button-prev svg : hover ,
. jp-carousel-overlay . swiper-button-next svg : hover {
background : var ( --jp-carousel-primary-subtle-color ) ;
}
2021-07-23 11:58:50 +02:00
. jp-carousel-overlay {
font-family : 'Helvetica Neue' , sans-serif ! important ;
z-index : 2147483647 ;
overflow-x : hidden ;
overflow-y : auto ;
direction : ltr ;
2019-11-15 23:26:29 +01:00
position : fixed ;
2021-07-23 11:58:50 +02:00
top : 0 ;
right : 0 ;
2019-11-15 23:26:29 +01:00
bottom : 0 ;
2021-07-23 11:58:50 +02:00
left : 0 ;
2021-09-07 21:40:48 +02:00
background : var ( --jp-carousel-bg-color ) ;
2019-11-15 23:26:29 +01:00
}
2021-07-23 11:58:50 +02:00
. jp-carousel-overlay * {
box-sizing : border-box ;
}
/* Fix for Twenty Nineteen theme compatibility */
2025-05-07 06:48:41 +02:00
. jp-carousel-overlay h1 :: before ,
. jp-carousel-overlay h2 :: before ,
. jp-carousel-overlay h3 :: before {
2021-07-23 11:58:50 +02:00
content : none ;
display : none ;
}
. jp-carousel-overlay . swiper-container . swiper-button-prev {
left : 0 ;
right : auto ;
}
. jp-carousel-overlay . swiper-container . swiper-button-next {
right : 0 ;
left : auto ;
}
. jp-carousel-overlay . swiper-container . swiper-container-rtl . swiper-button-prev ,
. jp-carousel-overlay . swiper-container . swiper-container-rtl . swiper-button-next {
transform : scaleX ( -1 ) ;
}
. jp-carousel-container {
display : grid ;
grid-template-rows : 1fr 64px ; /* 1. main carousel, 2. info area as footer */
height : 100 % ;
2019-11-15 23:26:29 +01:00
}
2021-08-17 08:33:07 +02:00
. jp-carousel-hide-controls . jp-carousel-container {
grid-template-rows : 1fr ;
}
. 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. */
}
2019-11-15 23:26:29 +01:00
. jp-carousel-msg {
2021-07-23 11:58:50 +02:00
font-family : 'Open Sans' , sans-serif ;
2019-11-15 23:26:29 +01:00
font-style : normal ;
display : inline-block ;
line-height : 19px ;
padding : 11px 15px ;
font-size : 14px ;
text-align : center ;
margin : 25px 20px 0 2px ;
2021-09-07 21:40:48 +02:00
background-color : var ( --jp-carousel-primary-color ) ;
2019-11-15 23:26:29 +01:00
border-left : 4px solid # ffba00 ;
2021-07-23 11:58:50 +02:00
box-shadow : 0 1px 1px 0 rgba ( 0 , 0 , 0 , 0 . 1 ) ;
2019-11-15 23:26:29 +01:00
}
. jp-carousel-info {
2021-07-23 11:58:50 +02:00
display : flex ;
flex-direction : column ;
2019-11-15 23:26:29 +01:00
text-align : left ! important ;
-webkit-font-smoothing : subpixel-antialiased ! important ;
2021-07-23 11:58:50 +02:00
z-index : 100 ;
2021-09-07 21:40:48 +02:00
background-color : var ( --jp-carousel-bg-color ) ;
2021-08-17 08:33:07 +02:00
transition : opacity 200ms ease-out ;
opacity : 1 ;
}
. jp-carousel-hide-controls . jp-carousel-info {
visibility : hidden ;
height : 0 ;
overflow : hidden ;
2021-07-23 11:58:50 +02:00
}
. jp-carousel-info-footer {
position : relative ;
2021-09-07 21:40:48 +02:00
background-color : var ( --jp-carousel-bg-color ) ;
2021-07-23 11:58:50 +02:00
height : 64px ;
display : flex ;
align-items : center ;
justify-content : space-between ;
width : 100vw ;
}
. jp-carousel-info-extra {
display : none ;
2021-09-07 21:40:48 +02:00
background-color : var ( --jp-carousel-bg-color ) ;
2021-07-23 11:58:50 +02:00
padding : 35px ;
width : 100vw ;
2021-09-07 21:40:48 +02:00
border-top : 1px solid var ( --jp-carousel-bg-faded-color ) ;
2021-07-23 11:58:50 +02:00
}
. jp-carousel-title-and-caption {
margin-bottom : 15px ;
}
. jp-carousel-info-extra . jp-carousel-show {
display : block ;
2019-11-15 23:26:29 +01:00
}
. jp-carousel-info :: selection {
2021-09-07 21:40:48 +02:00
background : var ( --jp-carousel-primary-color ) ; /* Safari */
color : var ( --jp-carousel-primary-color ) ;
2021-07-23 11:58:50 +02:00
}
2019-11-15 23:26:29 +01:00
. jp-carousel-info :: -moz-selection {
2021-09-07 21:40:48 +02:00
background : var ( --jp-carousel-primary-color ) ; /* Firefox */
color : var ( --jp-carousel-primary-color ) ;
2019-11-15 23:26:29 +01:00
}
. jp-carousel-photo-info {
2021-07-23 11:58:50 +02:00
left : 0 ! important ;
width : 100 % ! important ;
2019-11-15 23:26:29 +01:00
}
2021-07-23 11:58:50 +02:00
. jp-carousel-comments-wrapper {
padding : 0 ;
width : 100 % ! important ;
display : none ;
2019-11-15 23:26:29 +01:00
}
2021-07-23 11:58:50 +02:00
. jp-carousel-comments-wrapper . jp-carousel-show {
display : block ;
2019-11-15 23:26:29 +01:00
}
2021-07-23 11:58:50 +02:00
. jp-carousel-comments-wrapper > . jp-carousel-photo-info {
display : none ;
2019-11-15 23:26:29 +01:00
}
2021-07-23 11:58:50 +02:00
. jp-carousel-transitions . jp-carousel-photo-info {
transition : 400ms ease-out ;
2019-11-15 23:26:29 +01:00
}
. jp-carousel-buttons {
2021-07-23 11:58:50 +02:00
margin : -18px -20px 15px ;
padding : 8px 10px ;
border-bottom : 1px solid # 222 ;
2019-11-15 23:26:29 +01:00
background : # 222 ;
text-align : center ;
}
div . jp-carousel-buttons a {
border : none ! important ;
2021-09-07 21:40:48 +02:00
color : var ( --jp-carousel-primary-subtle-color ) ;
2025-05-07 06:48:41 +02:00
font : 400 11px / 1 . 2em 'Helvetica Neue' , sans-serif ! important ;
2019-11-15 23:26:29 +01:00
letter-spacing : 0 ! important ;
padding : 5px 2px 5px 0 ;
text-decoration : none ! important ;
text-shadow : none ! important ;
vertical-align : middle ;
-webkit-font-smoothing : subpixel-antialiased ;
}
div . jp-carousel-buttons a : hover {
2021-09-07 21:40:48 +02:00
color : var ( --jp-carousel-primary-color ) ;
2019-11-15 23:26:29 +01:00
border : none ! important ;
}
. jp-carousel-transitions div . jp-carousel-buttons a : hover {
transition : none ! important ;
}
2021-07-23 11:58:50 +02:00
. jp-carousel-slide ,
2021-08-17 08:33:07 +02:00
. jp-carousel-slide img {
2021-07-23 11:58:50 +02:00
transform : translate3d ( 0 , 0 , 0 ) ;
2019-11-15 23:26:29 +01:00
}
. jp-carousel-close-hint {
letter-spacing : 0 ! important ;
2021-07-23 11:58:50 +02:00
position : fixed ;
top : 20px ;
right : 30px ;
padding : 10px ;
2019-11-15 23:26:29 +01:00
text-align : right ;
2021-07-23 11:58:50 +02:00
width : 45px ;
height : 45px ;
z-index : 15 ;
2021-09-07 21:40:48 +02:00
color : var ( --jp-carousel-primary-color ) ;
2021-07-23 11:58:50 +02:00
cursor : pointer ;
2021-08-17 08:33:07 +02:00
transition : opacity 200ms ease-out ;
2019-11-15 23:26:29 +01:00
}
. jp-carousel-transitions . jp-carousel-close-hint {
transition : color 200ms linear ;
}
2021-07-23 11:58:50 +02:00
. jp-carousel-close-hint svg {
padding : 3px 2px ;
2021-09-07 21:40:48 +02:00
background : var ( --jp-carousel-bg-color ) ;
2019-11-15 23:26:29 +01:00
border-radius : 4px ;
}
2023-01-25 20:43:46 +01:00
. jp-carousel-close-hint svg : hover {
background : var ( --jp-carousel-primary-subtle-color ) ;
}
2019-11-15 23:26:29 +01:00
. jp-carousel-close-hint : hover {
2021-09-07 21:40:48 +02:00
color : var ( --jp-carousel-primary-color ) ;
2019-11-15 23:26:29 +01:00
}
. jp-carousel-close-hint : hover span {
2021-09-07 21:40:48 +02:00
border-color : var ( --jp-carousel-primary-color ) ;
2019-11-15 23:26:29 +01:00
}
2021-07-23 11:58:50 +02:00
/** Pagination Start **/
. jp-carousel-pagination-container {
flex : 1 ;
margin : 0 15px 0 35px ;
2019-11-15 23:26:29 +01:00
}
2021-07-23 11:58:50 +02:00
. jp-swiper-pagination ,
. jp-carousel-pagination {
2021-09-07 21:40:48 +02:00
color : var ( --jp-carousel-primary-color ) ;
2021-07-23 11:58:50 +02:00
font-size : 15px ; /* same as .jp-carousel-info-footer .jp-carousel-photo-title */
2025-05-07 06:48:41 +02:00
font-weight : 400 ;
2021-07-23 11:58:50 +02:00
white-space : nowrap ;
display : none ;
position : static ! important ;
2019-11-15 23:26:29 +01:00
}
2021-07-23 11:58:50 +02:00
. jp-carousel-pagination-container . swiper-pagination {
text-align : left ;
line-height : 8px ;
2019-11-15 23:26:29 +01:00
}
2021-07-23 11:58:50 +02:00
. jp-carousel-pagination {
padding-left : 5px ;
2019-11-15 23:26:29 +01:00
}
2021-07-23 11:58:50 +02:00
. jp-swiper-pagination . swiper-pagination-bullet {
2021-09-07 21:40:48 +02:00
background : var ( --jp-carousel-primary-subtle-color ) ;
2023-01-25 20:43:46 +01:00
margin : 0 4px ;
2019-11-15 23:26:29 +01:00
}
2021-07-23 11:58:50 +02:00
. jp-swiper-pagination . swiper-pagination-bullet . swiper-pagination-bullet-active {
2021-09-07 21:40:48 +02:00
background : var ( --jp-carousel-primary-color ) ;
2019-11-15 23:26:29 +01:00
}
2021-07-23 11:58:50 +02:00
. jp-swiper-pagination . swiper-pagination-bullet : not ( . swiper-pagination-bullet-active ) {
2021-09-07 21:40:48 +02:00
background : var ( --jp-carousel-primary-color ) ;
2021-07-23 11:58:50 +02:00
opacity : 0 . 5 ;
2019-11-15 23:26:29 +01:00
}
2025-05-07 06:48:41 +02:00
2021-07-23 11:58:50 +02:00
/** Pagination End **/
2019-11-15 23:26:29 +01:00
2021-07-23 11:58:50 +02:00
/** Title and Desc Start **/
. jp-carousel-info-footer . jp-carousel-photo-title-container {
flex : 4 ;
justify-content : center ;
2019-11-15 23:26:29 +01:00
overflow : hidden ;
2021-07-23 11:58:50 +02:00
margin : 0 ;
2019-11-15 23:26:29 +01:00
}
2021-07-23 11:58:50 +02:00
. jp-carousel-photo-title ,
. jp-carousel-photo-caption {
background : none ! important ;
border : none ! important ;
display : inline-block ;
2025-05-07 06:48:41 +02:00
font : 400 20px / 1 . 3em 'Helvetica Neue' , sans-serif ;
2021-07-23 11:58:50 +02:00
line-height : normal ;
letter-spacing : 0 ! important ;
margin : 0 0 10px 0 ;
padding : 0 ;
overflow : hidden ;
text-shadow : none ! important ;
text-transform : none ! important ;
2021-09-07 21:40:48 +02:00
color : var ( --jp-carousel-primary-color ) ;
2019-11-15 23:26:29 +01:00
}
2021-07-23 11:58:50 +02:00
. jp-carousel-info-footer . jp-carousel-photo-caption {
text-align : center ;
font-size : 15px ; /* same as .jp-carousel-pagination */
white-space : nowrap ;
2021-09-07 21:40:48 +02:00
color : var ( --jp-carousel-primary-subtle-color ) ;
2021-07-23 11:58:50 +02:00
cursor : pointer ;
margin : 0 ;
text-overflow : ellipsis ;
2019-11-15 23:26:29 +01:00
}
2021-07-23 11:58:50 +02:00
. jp-carousel-info-footer . jp-carousel-photo-caption p {
margin : 0 ;
2019-11-15 23:26:29 +01:00
}
2021-07-23 11:58:50 +02:00
. jp-carousel-photo-title {
font-size : 32px ;
margin-bottom : 2px ;
2019-11-15 23:26:29 +01:00
}
2021-07-23 11:58:50 +02:00
. jp-carousel-photo-description {
2021-09-07 21:40:48 +02:00
color : var ( --jp-carousel-primary-subtle-color ) ;
2021-07-23 11:58:50 +02:00
font-size : 16px ;
margin : 25px 0 ;
width : 100 % ;
overflow : hidden ;
overflow-wrap : break-word ;
2019-11-15 23:26:29 +01:00
}
2021-07-23 11:58:50 +02:00
. jp-carousel-photo-description p {
2021-09-07 21:40:48 +02:00
color : var ( --jp-carousel-primary-subtle-color ) ;
2021-07-23 11:58:50 +02:00
line-height : 1 . 4 ;
margin-bottom : 0 ;
2019-11-15 23:26:29 +01:00
}
2021-07-23 11:58:50 +02:00
. jp-carousel-photo-description p a ,
2019-11-15 23:26:29 +01:00
. jp-carousel-comments p a ,
. jp-carousel-info h2 a {
2021-09-07 21:40:48 +02:00
color : var ( --jp-carousel-primary-color ) ! important ;
2019-11-15 23:26:29 +01:00
border : none ! important ;
text-decoration : underline ! important ;
2025-05-07 06:48:41 +02:00
font-weight : 400 ! important ;
2019-11-15 23:26:29 +01:00
font-style : normal ! important ;
}
2021-07-23 11:58:50 +02:00
. jp-carousel-photo-description p strong ,
. jp-carousel-photo-description p b {
2025-05-07 06:48:41 +02:00
font-weight : 700 ;
2021-09-07 21:40:48 +02:00
color : var ( --jp-carousel-primary-subtle-color ) ;
2019-11-15 23:26:29 +01:00
}
2021-07-23 11:58:50 +02:00
. jp-carousel-photo-description p em ,
. jp-carousel-photo-description p i {
2019-11-15 23:26:29 +01:00
font-style : italic ;
2021-09-07 21:40:48 +02:00
color : var ( --jp-carousel-primary-subtle-color ) ;
2019-11-15 23:26:29 +01:00
}
2021-07-23 11:58:50 +02:00
. jp-carousel-photo-description p a : hover ,
2019-11-15 23:26:29 +01:00
. jp-carousel-comments p a : hover ,
. jp-carousel-info h2 a : hover {
2021-09-07 21:40:48 +02:00
color : var ( --jp-carousel-primary-subtle-color ) ! important ;
2019-11-15 23:26:29 +01:00
}
2021-07-23 11:58:50 +02:00
. jp-carousel-photo-description p : empty {
2019-11-15 23:26:29 +01:00
display : none ;
}
2025-05-07 06:48:41 +02:00
. jp-carousel-photo-info h1 :: before ,
. jp-carousel-photo-info h1 :: after ,
. jp-carousel-comments-wrapper h1 :: before ,
. jp-carousel-comments-wrapper h1 :: after {
2021-07-23 11:58:50 +02:00
content : none ! important ;
2019-11-15 23:26:29 +01:00
}
2021-07-23 11:58:50 +02:00
. jp-carousel-caption {
font-size : 14px ;
2025-05-07 06:48:41 +02:00
font-weight : 400 ;
2021-07-23 11:58:50 +02:00
margin : 0 ;
}
2019-11-15 23:26:29 +01:00
/** Title and Desc End **/
/** Meta Box Start **/
. jp-carousel-image-meta {
2021-09-07 21:40:48 +02:00
color : var ( --jp-carousel-primary-color ) ;
2021-07-23 11:58:50 +02:00
font : 12px / 1 . 4 'Helvetica Neue' , sans-serif ! important ;
width : 100 % ;
display : none ;
}
. jp-carousel-image-meta . jp-carousel-show {
display : block ;
2019-11-15 23:26:29 +01:00
}
. jp-carousel-image-meta li ,
. jp-carousel-image-meta h5 {
2021-07-23 11:58:50 +02:00
font-family : 'Helvetica Neue' , sans-serif ! important ;
2019-11-15 23:26:29 +01:00
position : inherit ! important ;
top : auto ! important ;
right : auto ! important ;
left : auto ! important ;
bottom : auto ! important ;
background : none ! important ;
border : none ! important ;
font-weight : 400 ! important ;
2025-05-07 06:48:41 +02:00
/* 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 */
2019-11-15 23:26:29 +01:00
line-height : 1 . 3em ! important ;
}
. jp-carousel-image-meta ul {
margin : 0 ! important ;
padding : 0 ! important ;
list-style : none ! important ;
}
. jp-carousel-image-meta li {
width : 48 % ! important ;
display : inline-block ! important ;
vertical-align : top ! important ;
margin : 0 2 % 15px 0 ! important ;
2021-09-07 21:40:48 +02:00
color : var ( --jp-carousel-primary-color ) ! important ;
2021-07-23 11:58:50 +02:00
font-size : 13px ! important ;
2019-11-15 23:26:29 +01:00
}
. jp-carousel-image-meta h5 {
2021-09-07 21:40:48 +02:00
color : var ( --jp-carousel-primary-subtle-color ) ! important ;
2019-11-15 23:26:29 +01:00
text-transform : uppercase ! important ;
2021-07-23 11:58:50 +02:00
font-size : 10px ! important ;
margin : 0 0 2px ! important ;
2019-11-15 23:26:29 +01:00
letter-spacing : 0 . 1em ! important ;
}
a . jp-carousel-image-download {
display : inline-block ;
clear : both ;
2021-09-07 21:40:48 +02:00
color : var ( --jp-carousel-primary-subtle-color ) ;
2019-11-15 23:26:29 +01:00
line-height : 1 ;
font-weight : 400 ;
2021-07-23 11:58:50 +02:00
font-size : 14px ;
2019-11-15 23:26:29 +01:00
text-decoration : none ;
2021-07-23 11:58:50 +02:00
}
a . jp-carousel-image-download svg {
display : inline-block ;
vertical-align : middle ;
margin : 0 3px ;
padding-bottom : 2px ;
2019-11-15 23:26:29 +01:00
}
a . jp-carousel-image-download span . photo-size {
font-size : 11px ;
border-radius : 1em ;
margin-left : 2px ;
display : inline-block ;
}
a . jp-carousel-image-download span . photo-size-times {
padding : 0 1px 0 2px ;
}
/** Meta Box End **/
/** Comments Start **/
. jp-carousel-comments {
2021-07-23 11:58:50 +02:00
font : 15px / 1 . 7 'Helvetica Neue' , sans-serif ! important ;
2019-11-15 23:26:29 +01:00
font-weight : 400 ;
2021-07-23 11:58:50 +02:00
background : none transparent ;
width : 100 % ;
bottom : 10px ;
margin-top : 20px ;
2019-11-15 23:26:29 +01:00
}
2021-07-23 11:58:50 +02:00
. jp-carousel-comments p a : hover ,
. jp-carousel-comments p a : focus ,
. jp-carousel-comments p a : active {
2021-09-07 21:40:48 +02:00
color : var ( --jp-carousel-primary-color ) ! important ;
2019-11-15 23:26:29 +01:00
}
. jp-carousel-comment {
2021-07-23 11:58:50 +02:00
background : none transparent ;
2021-09-07 21:40:48 +02:00
color : var ( --jp-carousel-primary-subtle-color ) ;
2019-11-15 23:26:29 +01:00
overflow : auto ;
2021-07-23 11:58:50 +02:00
width : 100 % ;
display : flex ;
}
. jp-carousel-comment + . jp-carousel-comment {
margin-top : 20px ;
}
. jp-carousel-comment : last-of-type {
margin-bottom : 20px ;
2019-11-15 23:26:29 +01:00
}
. jp-carousel-comment p {
2021-09-07 21:40:48 +02:00
color : var ( --jp-carousel-primary-subtle-color ) ! important ;
2019-11-15 23:26:29 +01:00
}
. jp-carousel-comment . comment-author {
2021-07-23 11:58:50 +02:00
font-size : 15px ;
font-weight : 500 ;
padding : 0 ;
width : auto ;
2019-11-15 23:26:29 +01:00
display : inline ;
2021-07-23 11:58:50 +02:00
float : none ;
border : none ;
margin : 0 ;
2019-11-15 23:26:29 +01:00
}
. jp-carousel-comment . comment-author a {
2021-09-07 21:40:48 +02:00
color : var ( --jp-carousel-primary-color ) ;
2019-11-15 23:26:29 +01:00
}
. jp-carousel-comment . comment-gravatar {
2021-07-23 11:58:50 +02:00
float : none ;
margin-right : 10px ;
2019-11-15 23:26:29 +01:00
}
. jp-carousel-comment . comment-content {
2021-07-23 11:58:50 +02:00
border : none ;
2019-11-15 23:26:29 +01:00
padding : 0 ;
}
. jp-carousel-comment . avatar {
2021-07-23 11:58:50 +02:00
margin : 0 ;
2019-11-15 23:26:29 +01:00
border-radius : 4px ;
border : none ! important ;
padding : 0 ! important ;
background-color : transparent ! important ;
2021-07-23 11:58:50 +02:00
min-width : 64px ;
min-height : 64px ;
width : 64px ;
height : 64px ;
2019-11-15 23:26:29 +01:00
}
. jp-carousel-comment . comment-date {
2021-09-07 21:40:48 +02:00
color : var ( --jp-carousel-primary-subtle-color ) ;
2021-07-23 11:58:50 +02:00
font-size : 11px ;
2021-09-07 21:40:48 +02:00
border-bottom : 1px solid var ( --jp-carousel-bg-faded-color ) ;
2021-07-23 11:58:50 +02:00
margin-bottom : 6px ;
2019-11-15 23:26:29 +01:00
}
# jp-carousel-comment-form {
2021-07-23 11:58:50 +02:00
margin : 0 0 10px ! important ;
2019-11-15 23:26:29 +01:00
width : 100 % ;
}
2021-07-23 11:58:50 +02:00
# jp-carousel-comment-form . jp-carousel-is-disabled {
opacity : 0 . 5 ;
pointer-events : none ;
}
2019-11-15 23:26:29 +01:00
textarea # jp-carousel-comment-form-comment-field {
2021-09-07 21:40:48 +02:00
background : var ( --jp-carousel-bg-faded-color ) ;
border : 1px solid var ( --jp-carousel-border-color ) ;
color : var ( --jp-carousel-primary-subtle-color ) ;
2021-07-23 11:58:50 +02:00
font : 16px / 1 . 4 'Helvetica Neue' , sans-serif ! important ;
2019-11-15 23:26:29 +01:00
width : 100 % ;
padding : 10px 10px 5px ;
margin : 0 ;
float : none ;
height : 147px ;
2021-09-07 21:40:48 +02:00
box-shadow : inset 2px 2px 2px rgba ( 0 , 0 , 0 , 0 . 1 ) ;
2019-11-15 23:26:29 +01:00
border-radius : 3px ;
overflow : hidden ;
box-sizing : border-box ;
}
textarea # jp-carousel-comment-form-comment-field :: -webkit-input-placeholder {
color : # 555 ;
}
textarea # jp-carousel-comment-form-comment-field : focus {
2021-09-07 21:40:48 +02:00
background : var ( --jp-carousel-bg-faded-color ) ;
color : var ( --jp-carousel-primary-subtle-color ) ;
2019-11-15 23:26:29 +01:00
}
textarea # jp-carousel-comment-form-comment-field : focus :: -webkit-input-placeholder {
2021-09-07 21:40:48 +02:00
color : var ( --jp-carousel-primary-subtle-color ) ;
2019-11-15 23:26:29 +01:00
}
2021-07-23 11:58:50 +02:00
# jp-carousel-loading-overlay {
display : none ;
position : fixed ;
top : 0 ;
bottom : 0 ;
left : 0 ;
right : 0 ;
}
# jp-carousel-loading-wrapper {
display : flex ;
align-items : center ;
justify-content : center ;
height : 100vh ;
width : 100vw ;
}
# jp-carousel-library-loading ,
2025-05-07 06:48:41 +02:00
# jp-carousel-library-loading :: after {
2021-07-23 11:58:50 +02:00
border-radius : 50 % ;
width : 40px ;
height : 40px ;
}
# jp-carousel-library-loading {
float : left ;
margin : 22px 0 0 10px ;
font-size : 10px ;
position : relative ;
text-indent : -9999em ;
border-top : 8px solid rgba ( 255 , 255 , 255 , 0 . 2 ) ;
border-right : 8px solid rgba ( 255 , 255 , 255 , 0 . 2 ) ;
border-bottom : 8px solid rgba ( 255 , 255 , 255 , 0 . 2 ) ;
2021-09-07 21:40:48 +02:00
border-left : 8px solid var ( --jp-carousel-primary-color ) ;
2021-07-23 11:58:50 +02:00
transform : translateZ ( 0 ) ;
animation : load8 1 . 1s infinite linear ;
}
2020-09-15 14:30:05 +02:00
# jp-carousel-comment-form-spinner ,
2025-05-07 06:48:41 +02:00
# jp-carousel-comment-form-spinner :: after {
2020-09-15 14:30:05 +02:00
border-radius : 50 % ;
2019-11-15 23:26:29 +01:00
width : 20px ;
height : 20px ;
2020-09-15 14:30:05 +02:00
}
2025-05-07 06:48:41 +02:00
2020-09-15 14:30:05 +02:00
# jp-carousel-comment-form-spinner {
display : none ;
2019-11-15 23:26:29 +01:00
float : left ;
2020-09-15 14:30:05 +02:00
font-size : 10px ;
2021-07-23 11:58:50 +02:00
position : absolute ; /* relative to .jp-carousel-comment-form-container */
2020-09-15 14:30:05 +02:00
text-indent : -9999em ;
2021-07-23 11:58:50 +02:00
border-top : 4px solid rgba ( 255 , 255 , 255 , 0 . 2 ) ;
border-right : 4px solid rgba ( 255 , 255 , 255 , 0 . 2 ) ;
border-bottom : 4px solid rgba ( 255 , 255 , 255 , 0 . 2 ) ;
2021-09-07 21:40:48 +02:00
border-left : 4px solid var ( --jp-carousel-primary-color ) ;
2021-07-23 11:58:50 +02:00
transform : translateZ ( 0 ) ;
2020-09-15 14:30:05 +02:00
animation : load8 1 . 1s infinite linear ;
2021-07-23 11:58:50 +02:00
margin : 0 auto ;
top : calc ( 50 % - 15px ) ;
left : 0 ;
bottom : 0 ;
right : 0 ;
2020-09-15 14:30:05 +02:00
}
@ keyframes load8 {
2025-05-07 06:48:41 +02:00
2021-07-23 11:58:50 +02:00
0 % {
transform : rotate ( 0deg ) ;
}
2025-05-07 06:48:41 +02:00
2021-07-23 11:58:50 +02:00
100 % {
transform : rotate ( 360deg ) ;
}
}
. jp-carousel-info-content-wrapper {
max-width : 800px ;
margin : auto ;
2019-11-15 23:26:29 +01:00
}
# jp-carousel-comment-form-submit-and-info-wrapper {
display : none ;
overflow : hidden ;
2021-07-23 11:58:50 +02:00
width : 100 % ;
2019-11-15 23:26:29 +01:00
}
# jp-carousel-comment-form-commenting-as input {
2021-09-07 21:40:48 +02:00
background : var ( --jp-carousel-bg-color ) ;
border : 1px solid var ( --jp-carousel-border-color ) ;
color : var ( --jp-carousel-primary-subtle-color ) ;
2021-07-23 11:58:50 +02:00
font : 16px / 1 . 4 'Helvetica Neue' , sans-serif ! important ;
padding : 10px ;
2019-11-15 23:26:29 +01:00
float : left ;
2021-07-23 11:58:50 +02:00
box-shadow : inset 2px 2px 2px rgba ( 0 , 0 , 0 , 0 . 2 ) ;
2019-11-15 23:26:29 +01:00
border-radius : 2px ;
2021-07-23 11:58:50 +02:00
width : 285px ;
2019-11-15 23:26:29 +01:00
}
# jp-carousel-comment-form-commenting-as input : focus {
2021-09-07 21:40:48 +02:00
background : var ( --jp-carousel-bg-faded-color ) ;
color : var ( --jp-carousel-primary-subtle-color ) ;
2019-11-15 23:26:29 +01:00
}
# jp-carousel-comment-form-commenting-as p {
2021-07-23 11:58:50 +02:00
font : 400 13px / 1 . 7 'Helvetica Neue' , sans-serif ! important ;
margin : 22px 0 0 ;
2019-11-15 23:26:29 +01:00
float : left ;
}
# jp-carousel-comment-form-commenting-as fieldset {
2021-07-23 11:58:50 +02:00
float : left ;
border : none ;
margin : 20px 0 0 0 ;
padding : 0 ;
2019-11-15 23:26:29 +01:00
clear : both ;
}
# jp-carousel-comment-form-commenting-as label {
2021-07-23 11:58:50 +02:00
font : 400 13px / 1 . 7 'Helvetica Neue' , sans-serif ! important ;
margin : 0 20px 3px 0 ;
float : left ;
width : 100px ;
2019-11-15 23:26:29 +01:00
}
# jp-carousel-comment-form-button-submit {
margin-top : 20px ;
2021-07-23 11:58:50 +02:00
margin-left : auto ;
display : block ;
2021-09-07 21:40:48 +02:00
border : solid 1px var ( --jp-carousel-primary-color ) ;
background : var ( --jp-carousel-bg-color ) ;
2021-07-23 11:58:50 +02:00
border-radius : 3px ;
padding : 8px 16px ;
font-size : 14px ;
2021-09-07 21:40:48 +02:00
color : var ( --jp-carousel-primary-color ) ;
2019-11-15 23:26:29 +01:00
}
2021-07-23 11:58:50 +02:00
# jp-carousel-comment-form-button-submit : active ,
# jp-carousel-comment-form-button-submit : focus {
2021-09-07 21:40:48 +02:00
background : var ( --jp-carousel-primary-color ) ;
color : var ( --jp-carousel-bg-color ) ;
2019-11-15 23:26:29 +01:00
}
# jp-carousel-comment-form-container {
2021-07-23 11:58:50 +02:00
margin-bottom : 15px ;
2019-11-15 23:26:29 +01:00
width : 100 % ;
2021-07-23 11:58:50 +02:00
margin-top : 20px ;
2021-09-07 21:40:48 +02:00
color : var ( --jp-carousel-primary-subtle-color ) ;
2021-07-23 11:58:50 +02:00
position : relative ;
overflow : hidden ;
2019-11-15 23:26:29 +01:00
}
# jp-carousel-comment-post-results {
display : none ;
2021-07-23 11:58:50 +02:00
overflow : auto ;
width : 100 % ;
2019-11-15 23:26:29 +01:00
}
# jp-carousel-comment-post-results span {
2021-07-23 11:58:50 +02:00
display : block ;
2019-11-15 23:26:29 +01:00
text-align : center ;
2021-07-23 11:58:50 +02:00
margin-top : 20px ;
2019-11-15 23:26:29 +01:00
width : 100 % ;
overflow : auto ;
padding : 1em 0 ;
box-sizing : border-box ;
border-radius : 2px ;
2021-07-23 11:58:50 +02:00
font : 13px / 1 . 4 'Helvetica Neue' , sans-serif ! important ;
2021-09-07 21:40:48 +02:00
border : 1px solid var ( --jp-carousel-border-color ) ;
2025-05-07 06:48:41 +02:00
box-shadow : inset 0 0 5px 0 rgba ( 0 , 0 , 0 , 0 . 2 ) ;
2019-11-15 23:26:29 +01:00
}
. jp-carousel-comment-post-error {
2021-07-23 11:58:50 +02:00
color : # df4926 ;
2019-11-15 23:26:29 +01:00
}
# jp-carousel-comments-closed {
display : none ;
2021-09-07 21:40:48 +02:00
color : var ( --jp-carousel-primary-subtle-color ) ;
2019-11-15 23:26:29 +01:00
}
# jp-carousel-comments-loading {
2021-07-23 11:58:50 +02:00
font : 400 15px / 1 . 7 'Helvetica Neue' , sans-serif ! important ;
2019-11-15 23:26:29 +01:00
display : none ;
2021-09-07 21:40:48 +02:00
color : var ( --jp-carousel-primary-subtle-color ) ;
2019-11-15 23:26:29 +01:00
text-align : left ;
margin-bottom : 20px ;
2021-07-23 11:58:50 +02:00
width : 100 % ;
bottom : 10px ;
margin-top : 20px ;
2019-11-15 23:26:29 +01:00
}
2021-07-23 11:58:50 +02:00
/** Icons Start **/
. jp-carousel-photo-icons-container {
flex : 1 ;
display : block ;
text-align : right ;
margin : 0 20px 0 30px ;
white-space : nowrap ;
}
. jp-carousel-icon-btn {
padding : 16px ;
text-decoration : none ;
border : none ;
background : none ;
display : inline-block ;
height : 64px ;
}
. jp-carousel-icon {
border : none ;
display : inline-block ;
line-height : 0 ;
font-weight : 400 ;
font-style : normal ;
border-radius : 4px ;
width : 31px ; /* Prevent comments indicator from changing icon width */
padding : 4px 3px 3px ;
}
2023-01-25 20:43:46 +01:00
. jp-carousel-icon : hover {
background : var ( --jp-carousel-primary-subtle-color ) ;
}
2021-07-23 11:58:50 +02:00
. jp-carousel-icon svg {
display : inline-block ;
}
2021-09-07 21:40:48 +02:00
. jp-carousel-overlay rect {
fill : var ( --jp-carousel-primary-color ) ;
}
2021-07-23 11:58:50 +02:00
. jp-carousel-selected . jp-carousel-icon {
2021-09-07 21:40:48 +02:00
background : var ( --jp-carousel-primary-color ) ;
2021-07-23 11:58:50 +02:00
}
2025-05-07 06:48:41 +02:00
2021-07-23 11:58:50 +02:00
. jp-carousel-selected rect {
2021-09-07 21:40:48 +02:00
fill : var ( --jp-carousel-bg-color ) ;
2021-07-23 11:58:50 +02:00
}
2019-11-15 23:26:29 +01:00
2021-07-23 11:58:50 +02:00
. jp-carousel-icon-comments . jp-carousel-show {
display : inline-block ;
}
. jp-carousel-icon . jp-carousel-has-comments-indicator {
display : none ;
font-size : 12px ;
vertical-align : top ;
margin-left : -16px ;
line-height : 1 ;
padding : 2px 4px ;
border-radius : 4px ;
2021-09-07 21:40:48 +02:00
background : var ( --jp-carousel-primary-color ) ;
color : var ( --jp-carousel-bg-color ) ;
2025-05-07 06:48:41 +02:00
font-weight : 400 ;
2021-07-23 11:58:50 +02:00
font-family : 'Helvetica Neue' , sans-serif ! important ;
position : relative ;
}
2021-09-07 21:40:48 +02:00
. jp-carousel-selected . jp-carousel-icon . jp-carousel-has-comments-indicator {
background : var ( --jp-carousel-bg-color ) ;
color : var ( --jp-carousel-primary-color ) ;
2021-07-23 11:58:50 +02:00
}
. jp-carousel-has-comments-indicator . jp-carousel-show {
display : inline-block ;
}
/** Icons End **/
/* Small screens */
@ media only screen and ( max-width : 760px ) {
2025-05-07 06:48:41 +02:00
2021-07-23 11:58:50 +02:00
. jp-carousel-overlay . swiper-container . swiper-button-next ,
. jp-carousel-overlay . swiper-container . swiper-button-prev {
2019-11-15 23:26:29 +01:00
display : none ! important ;
}
. jp-carousel-buttons {
display : none ! important ;
}
. jp-carousel-image-meta {
float : none ! important ;
width : 100 % ! important ;
box-sizing : border-box ;
2021-07-23 11:58:50 +02:00
margin-left : 0 ;
2019-11-15 23:26:29 +01:00
}
. jp-carousel-close-hint {
font-size : 26px ! important ;
position : fixed ! important ;
2021-07-23 11:58:50 +02:00
top : 10px ;
right : 10px ;
}
/* The admin bar is fixed at top: 0*/
. admin-bar . jp-carousel-close-hint {
top : 40px ;
2019-11-15 23:26:29 +01:00
}
. jp-carousel-slide img {
opacity : 1 ;
}
. jp-carousel-wrap {
2021-09-07 21:40:48 +02:00
background-color : var ( --jp-carousel-bg-color ) ;
2021-07-23 11:58:50 +02:00
}
2019-11-15 23:26:29 +01:00
. jp-carousel-fadeaway {
display : none ;
}
2021-07-23 11:58:50 +02:00
. jp-carousel-info > . jp-carousel-photo-info {
display : none ;
2019-11-15 23:26:29 +01:00
}
2021-07-23 11:58:50 +02:00
. jp-carousel-comments-wrapper > . jp-carousel-photo-info {
display : block ;
2019-11-15 23:26:29 +01:00
}
2021-07-23 11:58:50 +02:00
. jp-carousel-caption {
overflow : visible ! important ;
2019-11-15 23:26:29 +01:00
}
2021-07-23 11:58:50 +02:00
. jp-carousel-info-footer . jp-carousel-photo-title-container {
display : none ;
2019-11-15 23:26:29 +01:00
}
2021-07-23 11:58:50 +02:00
. jp-carousel-photo-icons-container {
margin : 0 10px 0 0 ;
white-space : nowrap ;
}
. jp-carousel-icon-btn {
padding-left : 20px ;
}
. jp-carousel-pagination {
padding-left : 5px ;
}
. jp-carousel-pagination-container {
margin-left : 25px ;
}
. jp-carousel-comment . avatar {
min-width : 48px ;
}
# jp-carousel-comment-form-commenting-as fieldset ,
# jp-carousel-comment-form-commenting-as input {
width : 100 % ;
float : none ;
2019-11-15 23:26:29 +01:00
}
}