Updating Classic Editor, Google Authenticatior, Jetpack, Public Post Preview, Table of Contents, Wordpress Importer

Signed-off-by: Yury German <blueknight@gentoo.org>

1 files changed, 631 insertions, 720 deletions

diff --git a/plugins/jetpack/modules/carousel/jetpack-carousel.css b/plugins/jetpack/modules/carousel/jetpack-carousel.css
index 33e2b9c4..f0e13263 100644
--- a/plugins/jetpack/modules/carousel/jetpack-carousel.css
+++ b/plugins/jetpack/modules/carousel/jetpack-carousel.css
@@ -1,33 +1,149 @@
-[data-carousel-extra] {
-	cursor: pointer; /* adds a cursor when the carousel takes effect */
+: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;
+}
+
+: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-container-rtl .swiper-button-next,
+.jp-carousel-overlay .swiper-button-next,
+.jp-carousel-overlay .swiper-container-rtl .swiper-button-prev {
+	background-image: none;
+}
+/* end of temporary fix */
+
+[data-carousel-extra]:not( .jp-carousel-wrap ) img, [data-carousel-extra]:not( .jp-carousel-wrap ) img + figcaption {
+	cursor: pointer;
 }
 
 .jp-carousel-wrap * {
-	line-height:inherit; /* prevent declarations of line-height in the universal selector */
+	line-height: inherit;
 }
 
-.jp-carousel-overlay {
-	background: #000;
+.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;
 }
 
-div.jp-carousel-fadeaway {
-	background: -moz-linear-gradient(bottom, rgba(0,0,0,0.5), rgba(0,0,0,0));
-	background: -webkit-gradient(linear, left bottom, left top, from(rgba(0,0,0,0.5)), to(rgba(0,0,0,0)));
+.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 {
+	content: none;
+}
+
+.jp-carousel-overlay .swiper-button-prev svg,
+.jp-carousel-overlay .swiper-button-next svg {
+	height: 30px;
+	width: 28px;
+	background: var(--jp-carousel-bg-color);
+	border-radius: 4px;
+}
+
+.jp-carousel-overlay {
+	font-family: 'Helvetica Neue', sans-serif !important;
+	z-index: 2147483647;
+	overflow-x: hidden;
+	overflow-y: auto;
+	direction: ltr;
 	position: fixed;
+	top: 0;
+	right: 0;
 	bottom: 0;
-	z-index: 2147483647;
-	width: 100%;
-	height: 15px;
+	left: 0;
+	background: var(--jp-carousel-bg-color);
+}
+
+.jp-carousel-overlay * {
+	box-sizing: border-box;
+}
+
+/* Fix for Twenty Nineteen theme compatibility */
+.jp-carousel-overlay h1:before,
+.jp-carousel-overlay h2:before,
+.jp-carousel-overlay h3:before {
+	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%;
+}
+
+.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-next-button span,
-.jp-carousel-previous-button span {
-	background: url(./images/arrows.png) no-repeat center center;
-	background-size: 200px 126px;
+
+.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. */
 }
 
 .jp-carousel-msg {
-	font-family: "Open Sans", sans-serif;
+	font-family: 'Open Sans', sans-serif;
 	font-style: normal;
 	display: inline-block;
 	line-height: 19px;
@@ -35,126 +151,103 @@ div.jp-carousel-fadeaway {
 	font-size: 14px;
 	text-align: center;
 	margin: 25px 20px 0 2px;
-	background-color: #fff;
+	background-color: var(--jp-carousel-primary-color);
 	border-left: 4px solid #ffba00;
-	-webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1);
-	box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1);
-}
-
-@media
-only screen and (-webkit-min-device-pixel-ratio: 1.5),
-only screen and (-o-min-device-pixel-ratio: 3/2),
-only screen and (min--moz-device-pixel-ratio: 1.5),
-only screen and (min-device-pixel-ratio: 1.5) {
-	.jp-carousel-next-button span,
-	.jp-carousel-previous-button span {
-		background-image: url(./images/arrows-2x.png);
-	}
-}
-
-.jp-carousel-wrap {
-	font-family: "Helvetica Neue", sans-serif !important;
+	-webkit-box-shadow: 0 1px 1px 0 rgba( 0, 0, 0, 0.1 );
+	box-shadow: 0 1px 1px 0 rgba( 0, 0, 0, 0.1 );
 }
 
 .jp-carousel-info {
-	position: absolute;
-	bottom: 0;
+	display: flex;
+	flex-direction: column;
 	text-align: left !important;
 	-webkit-font-smoothing: subpixel-antialiased !important;
+	z-index: 100;
+	background-color: var(--jp-carousel-bg-color);
+	transition: opacity 200ms ease-out;
+	opacity: 1;
 }
 
-.jp-carousel-info ::selection {
-	background: #68c9e8; /* Safari */
-	color: #fff;
-	}
-
-.jp-carousel-info ::-moz-selection {
-	background: #68c9e8; /* Firefox */
-	color: #fff;
+.jp-carousel-hide-controls .jp-carousel-info {
+	visibility: hidden;
+	height: 0;
+	overflow: hidden;
 }
 
-.jp-carousel-photo-info {
+.jp-carousel-info-footer {
 	position: relative;
-	left: 25%;
-	width: 50%;
+	background-color: var(--jp-carousel-bg-color);
+	height: 64px;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	width: 100vw;
 }
 
-.jp-carousel-transitions .jp-carousel-photo-info {
-	-webkit-transition: 400ms ease-out;
-	-moz-transition: 400ms ease-out;
-	-o-transition: 400ms ease-out;
-	transition: 400ms ease-out;
+.jp-carousel-info-extra {
+	display: none;
+	background-color: var(--jp-carousel-bg-color);
+	padding: 35px;
+	width: 100vw;
+	border-top: 1px solid var(--jp-carousel-bg-faded-color);
 }
 
-.jp-carousel-info h2 {
-	background: none !important;
-	border: none !important;
-	color: #999;
-	display: block !important;
-	font: normal 13px/1.25em "Helvetica Neue", sans-serif !important;
-	letter-spacing: 0 !important;
-	margin: 7px 0 0 0 !important;
-	padding: 10px 0 0 !important;
-	overflow: hidden;
-	text-align: left;
-	text-shadow: none !important;
-	text-transform: none !important;
-	-webkit-font-smoothing: subpixel-antialiased;
+.jp-carousel-title-and-caption {
+	margin-bottom: 15px;
 }
 
-.jp-carousel-next-button,
-.jp-carousel-previous-button {
-	text-indent: -9999px;
-	overflow: hidden;
-	cursor: pointer;
+.jp-carousel-info-extra.jp-carousel-show {
+	display: block;
 }
 
-.jp-carousel-next-button span,
-.jp-carousel-previous-button span {
-	position: absolute;
-	top: 0;
-	bottom: 0;
-	width: 82px;
-	zoom: 1;
-	filter: alpha(opacity=20);
-	opacity: 0.2;
+.jp-carousel-info ::selection {
+	background: var(--jp-carousel-primary-color); /* Safari */
+	color: var(--jp-carousel-primary-color);
 }
 
-.jp-carousel-transitions .jp-carousel-next-button span,
-.jp-carousel-transitions .jp-carousel-previous-button span {
-	-webkit-transition: 500ms opacity ease-out;
-	-moz-transition: 500ms opacity ease-out;
-	-o-transition: 500ms opacity ease-out;
-	transition: 500ms opacity ease-out;
+.jp-carousel-info ::-moz-selection {
+	background: var(--jp-carousel-primary-color); /* Firefox */
+	color: var(--jp-carousel-primary-color);
 }
 
-.jp-carousel-next-button:hover span,
-.jp-carousel-previous-button:hover span {
-	filter: alpha(opacity=60);
-	opacity: 0.6;
+.jp-carousel-photo-info {
+	left: 0 !important;
+	width: 100% !important;
 }
-.jp-carousel-next-button span {
-	background-position: -110px center;
-	right: 0;
+
+.jp-carousel-comments-wrapper {
+	padding: 0;
+	width: 100% !important;
+	display: none;
+}
+
+.jp-carousel-comments-wrapper.jp-carousel-show {
+	display: block;
+}
+
+.jp-carousel-comments-wrapper > .jp-carousel-photo-info {
+	display: none;
 }
 
-.jp-carousel-previous-button span {
-	background-position: -10px center;
-	left:0;
+.jp-carousel-transitions .jp-carousel-photo-info {
+	-webkit-transition: 400ms ease-out;
+	-moz-transition: 400ms ease-out;
+	-o-transition: 400ms ease-out;
+	transition: 400ms ease-out;
 }
 
 .jp-carousel-buttons {
-	margin:-18px -20px 15px;
-	padding:8px 10px;
-	border-bottom:1px solid #222;
+	margin: -18px -20px 15px;
+	padding: 8px 10px;
+	border-bottom: 1px solid #222;
 	background: #222;
 	text-align: center;
 }
 
 div.jp-carousel-buttons a {
 	border: none !important;
-	color: #999;
-	font: normal 11px/1.2em "Helvetica Neue", sans-serif !important;
+	color: var(--jp-carousel-primary-subtle-color);
+	font: normal 11px/1.2em 'Helvetica Neue', sans-serif !important;
 	letter-spacing: 0 !important;
 	padding: 5px 2px 5px 0;
 	text-decoration: none !important;
@@ -164,7 +257,7 @@ div.jp-carousel-buttons a {
 }
 
 div.jp-carousel-buttons a:hover {
-	color: #68c9e8;
+	color: var(--jp-carousel-primary-color);
 	border: none !important;
 }
 
@@ -175,74 +268,29 @@ div.jp-carousel-buttons a:hover {
 	transition: none !important;
 }
 
-.jp-carousel-slide, .jp-carousel-slide img, .jp-carousel-next-button,
-.jp-carousel-previous-button {
-	-webkit-transform:translate3d(0, 0, 0);
-	-moz-transform:translate3d(0, 0, 0);
-	-o-transform:translate3d(0, 0, 0);
-	-ms-transform:translate3d(0, 0, 0);
-}
-
-.jp-carousel-slide {
-	position:fixed;
-	width:0;
-	bottom:0;
-	background-color:#000;
-	border-radius:2px;
-	-webkit-border-radius:2px;
-	-moz-border-radius:2px;
-	-ms-border-radius:2px;
-	-o-border-radius:2px;
-}
-
-.jp-carousel-transitions .jp-carousel-slide {
-	-webkit-transition: 300ms ease-out;
-	-moz-transition: 300ms ease-out;
-	-o-transition: 300ms ease-out;
-	transition: 300ms ease-out;
-}
-
-.jp-carousel-slide.selected {
-	position: absolute !important;
-	filter: alpha(opacity=100);
-	opacity: 1;
-}
-
-.jp-carousel-slide {
-	filter: alpha(opacity=25);
-	opacity: 0.25;
-}
-
+.jp-carousel-slide,
 .jp-carousel-slide img {
-	display: block;
-	width: 100% !important;
-	height: 100% !important;
-	max-width: 100% !important;
-	max-height: 100% !important;
-	background: none !important;
-	border: none !important;
-	padding: 0 !important;
-	-webkit-box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-	-moz-box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-	zoom: 1;
-}
-
-.jp-carousel-transitions .jp-carousel-slide {
-	-webkit-transition: opacity 400ms linear;
-	-moz-transition: opacity 400ms linear;
-	-o-transition: opacity 400ms linear;
-	transition: opacity 400ms linear;
+	-webkit-transform: translate3d( 0, 0, 0 );
+	-moz-transform: translate3d( 0, 0, 0 );
+	-o-transform: translate3d( 0, 0, 0 );
+	-ms-transform: translate3d( 0, 0, 0 );
+	transform: translate3d( 0, 0, 0 );
 }
 
 .jp-carousel-close-hint {
-	color: #999;
 	cursor: default;
 	letter-spacing: 0 !important;
-	padding:0.35em 0 0;
-	position: absolute;
+	position: fixed;
+	top: 20px;
+	right: 30px;
+	padding: 10px;
 	text-align: right;
-	width: 90%;
+	width: 45px;
+	height: 45px;
+	z-index: 15;
+	color: var(--jp-carousel-primary-color);
+	cursor: pointer;
+	transition: opacity 200ms ease-out;
 }
 
 .jp-carousel-transitions .jp-carousel-close-hint {
@@ -252,291 +300,185 @@ div.jp-carousel-buttons a:hover {
 	transition: color 200ms linear;
 }
 
-.jp-carousel-close-hint span {
-	cursor: pointer;
-	background-color: black;
-	background-color: rgba(0,0,0,0.8);
-	display: inline-block;
-	height: 22px;
-	font: 400 24px/1 "Helvetica Neue", sans-serif !important;
-	line-height: 22px;
-	margin: 0 0 0 0.4em;
-	text-align: center;
-	vertical-align: middle;
-	width: 22px;
-	-moz-border-radius: 4px;
-	-webkit-border-radius: 4px;
+.jp-carousel-close-hint svg {
+	padding: 3px 2px;
+	background: var(--jp-carousel-bg-color);
 	border-radius: 4px;
 }
 
-.jp-carousel-transitions .jp-carousel-close-hint span {
-	-webkit-transition: border-color 200ms linear;
-	-moz-transition: border-color 200ms linear;
-	-o-transition: border-color 200ms linear;
-	transition: border-color 200ms linear;
-}
-
 .jp-carousel-close-hint:hover {
-	cursor: default;
-	color: #fff;
+	color: var(--jp-carousel-primary-color);
 }
 
 .jp-carousel-close-hint:hover span {
-	border-color: #fff;
-}
-
-div.jp-carousel-buttons a.jp-carousel-reblog,
-div.jp-carousel-buttons a.jp-carousel-commentlink,
-a.jp-carousel-image-download {
-	background: url(./images/carousel-sprite.png?5) no-repeat;
-	background-size: 16px 200px;
-}
-
-div.jp-carousel-buttons a.jp-carousel-reblog,
-div.jp-carousel-buttons a.jp-carousel-commentlink {
-	margin: 0 14px 0 0 !important;
-}
-
-div.jp-carousel-buttons a.jp-carousel-reblog.reblogged {
-	background-color: #303030;
-	padding-right: 8px !important;
-	border-radius: 2px;
-	border-radius: 2px;
-	-webkit-border-radius:2px;
-	-moz-border-radius:2px;
-	-ms-border-radius:2px;
-	-o-border-radius:2px;
-}
-
-div.jp-carousel-buttons a.jp-carousel-reblog.reblogged {
-	margin: 0 2px 0 -12px !important;
+	border-color: var(--jp-carousel-primary-color);
 }
 
-div.jp-carousel-buttons a.jp-carousel-reblog,
-div.jp-carousel-buttons a.jp-carousel-reblog.reblogged:hover {
-	background-position: 6px -36px;
-	padding-right: auto !important;
-	padding-left: 26px !important;
-	color: #999;
+/** Pagination Start **/
+.jp-carousel-pagination-container {
+	flex: 1;
+	margin: 0 15px 0 35px;
 }
 
-div.jp-carousel-buttons a.jp-carousel-commentlink {
-	background-position: 0px -156px;
-	padding-left: 19px !important;
+.jp-swiper-pagination,
+.jp-carousel-pagination {
+	color: var(--jp-carousel-primary-color);
+	font-size: 15px; /* same as .jp-carousel-info-footer .jp-carousel-photo-title  */
+	font-weight: normal;
+	white-space: nowrap;
+	display: none;
+	position: static !important;
 }
 
-div.jp-carousel-buttons a.jp-carousel-reblog.reblogged:hover {
-	cursor: default;
+.jp-carousel-pagination-container .swiper-pagination {
+	text-align: left;
+	line-height: 8px;
 }
 
-div.jp-carousel-buttons a.jp-carousel-reblog:hover {
-	background-position: 6px -56px;
-	color: #68c9e8;
+.jp-carousel-pagination {
+	padding-left: 5px;
 }
 
-@media
-only screen and (-webkit-min-device-pixel-ratio: 1.5),
-only screen and (-o-min-device-pixel-ratio: 3/2),
-only screen and (min--moz-device-pixel-ratio: 1.5),
-only screen and (min-device-pixel-ratio: 1.5) {
-	div.jp-carousel-buttons a.jp-carousel-reblog,
-	div.jp-carousel-buttons a.jp-carousel-commentlink,
-	a.jp-carousel-image-download {
-		background-image: url(./images/carousel-sprite-2x.png?5);
-	}
+.jp-swiper-pagination .swiper-pagination-bullet {
+	background: var(--jp-carousel-primary-subtle-color);
+	margin: 0 9px;
 }
 
-/* reblog */
-div#carousel-reblog-box {
-	background: #222;
-	background: -moz-linear-gradient(bottom,  #222,  #333);
-	background: -webkit-gradient(linear, left bottom, left top, from(#222), to(#333));
-	padding: 3px 0 0;
-	display: none;
-	margin: 5px auto 0;
-	-moz-border-radius: 2px;
-	-webkit-border-radius: 2px;
-	border-radius: 2px;
-	-webkit-box-shadow: 0 0 20px rgba(0,0,0,0.9);
-	-moz-box-shadow: 0 0 20px rgba(0,0,0,0.9);
-	box-shadow: 0 0 20px rgba(0,0,0,0.9);
-	height: 74px;
-	width: 565px;
-}
-
-#carousel-reblog-box textarea {
-	background: #999;
-	font: 13px/1.4 "Helvetica Neue", sans-serif !important;
-	color: #444;
-	padding: 3px 6px;
-	width: 370px;
-	height: 48px;
-	float: left;
-	margin: 6px 9px 0 9px;
-	border: 1px solid #666;
-	-webkit-box-shadow: inset 2px 2px 2px rgba(0,0,0,0.2);
-	box-shadow: inset 2px 2px 2px rgba(0,0,0,0.2);
-	-moz-border-radius: 2px;
-	-webkit-border-radius: 2px;
-	border-radius: 2px;
+.jp-swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
+	background: var(--jp-carousel-primary-color);
 }
 
-#carousel-reblog-box textarea:focus {
-	background: #ccc;
-	color: #222;
+.jp-swiper-pagination .swiper-pagination-bullet:not( .swiper-pagination-bullet-active ) {
+	background: var(--jp-carousel-primary-color);
+	opacity: 0.5;
 }
+/** Pagination End **/
 
-#carousel-reblog-box label {
-	color: #aaa;
-	font-size: 11px;
-	padding-right: 2px;
-	padding-left: 2px;
-	display: inline;
-	font-weight: normal;
+/** Title and Desc Start **/
+.jp-carousel-info-footer .jp-carousel-photo-title-container {
+	flex-basis: 50vw;
+	flex: 4;
+	justify-content: center;
+	overflow: hidden;
+	margin: 0;
 }
 
-#carousel-reblog-box select {
-	width: 110px;
+.jp-carousel-photo-title,
+.jp-carousel-photo-caption {
+	background: none !important;
+	border: none !important;
+	display: inline-block;
+	font: normal 20px/1.3em 'Helvetica Neue', sans-serif;
+	line-height: normal;
+	letter-spacing: 0 !important;
+	margin: 0 0 10px 0;
 	padding: 0;
-	font-size: 12px;
-	font-family: "Helvetica Neue", sans-serif !important;
-	background: #333;
-	color: #eee;
-	border: 1px solid #444;
-	margin-top:5px;
-}
-
-#carousel-reblog-box .submit,
-#wrapper #carousel-reblog-box p.response {
-	float: left;
-	width: 154px;
-	padding-top: 0;
-	padding-left: 1px;
 	overflow: hidden;
-	height: 34px;
-	margin:3px 0 0 2px !important;
-}
-
-#wrapper #carousel-reblog-box p.response {
-	font-size: 13px;
-	clear: none;
-	padding-left: 2px;
-	height: 34px;
-	color: #aaa;
+	text-shadow: none !important;
+	text-transform: none !important;
+	color: var(--jp-carousel-primary-color);
 }
 
-#carousel-reblog-box input#carousel-reblog-submit, #jp-carousel-comment-form-button-submit {
-	font: 13px/24px "Helvetica Neue", sans-serif !important;
-	margin-top: 8px;
-	padding: 0 10px !important;
-	border-radius: 1em;
-	height: 24px;
-	color: #333;
-	cursor:pointer;
-	font-weight: normal;
-	background: #aaa;
-	background: -moz-linear-gradient(bottom,  #aaa,  #ccc);
-	background: -webkit-gradient(linear, left bottom, left top, from(#aaa), to(#ccc));
-	border: 1px solid #444;
+.jp-carousel-info-footer .jp-carousel-photo-caption {
+	text-align: center;
+	font-size: 15px; /* same as .jp-carousel-pagination */
+	white-space: nowrap;
+	color: var(--jp-carousel-primary-subtle-color);
+	cursor: pointer;
+	margin: 0;
+	text-overflow: ellipsis;
 }
 
-#carousel-reblog-box input#carousel-reblog-submit:hover, #jp-carousel-comment-form-button-submit:hover {
-	background: #ccc;
-	background: -moz-linear-gradient(bottom,  #ccc,  #eee);
-	background: -webkit-gradient(linear, left bottom, left top, from(#ccc), to(#eee));
+.jp-carousel-info-footer .jp-carousel-photo-caption p {
+	margin: 0;
 }
 
-#carousel-reblog-box .canceltext {
-	color: #aaa;
-	font-size: 11px;
-	line-height: 24px;
+.jp-carousel-photo-title {
+	font-size: 32px;
+	margin-bottom: 2px;
 }
 
-#carousel-reblog-box .canceltext a {
-	color: #fff;
+.jp-carousel-photo-description {
+	color: var(--jp-carousel-primary-subtle-color);
+	font-size: 16px;
+	margin: 25px 0;
+	width: 100%;
 }
-/* reblog end */
 
-
-/** Title and Desc Start **/
-.jp-carousel-titleanddesc {
-	border-top: 1px solid #222;
-	color: #999;
-	font-size: 15px;
-	padding-top: 24px;
-	margin-bottom: 20px;
-	font-weight:400;
-}
-.jp-carousel-titleanddesc-title {
-	font: 300 1.5em/1.1 "Helvetica Neue", sans-serif !important;
-	text-transform: none !important; /* prevents uppercase from leaking through */
-	color: #fff;
-	margin: 0 0 15px;
-	padding:0;
+.jp-carousel-photo-description {
+	overflow: hidden;
+	overflow-wrap: break-word;
 }
 
-.jp-carousel-titleanddesc-desc p {
-	color: #999;
-	line-height:1.4;
-	margin-bottom: 0.75em;
+.jp-carousel-photo-description p {
+	color: var(--jp-carousel-primary-subtle-color);
+	line-height: 1.4;
+	margin-bottom: 0;
 }
 
-.jp-carousel-titleanddesc p a,
+.jp-carousel-photo-description p a,
 .jp-carousel-comments p a,
 .jp-carousel-info h2 a {
-	color: #fff !important;
+	color: var(--jp-carousel-primary-color) !important;
 	border: none !important;
 	text-decoration: underline !important;
 	font-weight: normal !important;
 	font-style: normal !important;
 }
 
-.jp-carousel-titleanddesc p strong,
-.jp-carousel-titleanddesc p b {
+.jp-carousel-photo-description p strong,
+.jp-carousel-photo-description p b {
 	font-weight: bold;
-	color: #999;
+	color: var(--jp-carousel-primary-subtle-color);
 }
 
-.jp-carousel-titleanddesc p em,
-.jp-carousel-titleanddesc p i {
+.jp-carousel-photo-description p em,
+.jp-carousel-photo-description p i {
 	font-style: italic;
-	color: #999;
+	color: var(--jp-carousel-primary-subtle-color);
 }
 
-
-.jp-carousel-titleanddesc p a:hover,
+.jp-carousel-photo-description p a:hover,
 .jp-carousel-comments p a:hover,
 .jp-carousel-info h2 a:hover {
-	color: #68c9e8 !important;
+	color: var(--jp-carousel-primary-subtle-color) !important;
 }
 
-.jp-carousel-titleanddesc p:empty {
+.jp-carousel-photo-description p:empty {
 	display: none;
 }
 
 .jp-carousel-photo-info h1:before,
 .jp-carousel-photo-info h1:after,
-.jp-carousel-left-column-wrapper h1:before,
-.jp-carousel-left-column-wrapper h1:after {
-	content:none !important;
+.jp-carousel-comments-wrapper h1:before,
+.jp-carousel-comments-wrapper h1:after {
+	content: none !important;
+}
+
+.jp-carousel-caption {
+	font-size: 14px;
+	font-weight: normal;
+	margin: 0;
 }
+
 /** Title and Desc End **/
 
 /** Meta Box Start **/
 .jp-carousel-image-meta {
-	background: #111;
-	border: 1px solid #222;
-	color: #fff;
+	color: var(--jp-carousel-primary-color);
 	font-size: 13px;
-	font: 12px/1.4 "Helvetica Neue", sans-serif !important;
-	overflow: hidden;
-	padding: 18px 20px;
-	width: 209px !important;
+	font: 12px/1.4 'Helvetica Neue', sans-serif !important;
+	width: 100%;
+	display: none;
+}
+
+.jp-carousel-image-meta.jp-carousel-show {
+	display: block;
 }
 
 .jp-carousel-image-meta li,
 .jp-carousel-image-meta h5 {
-	font-family: "Helvetica Neue", sans-serif !important;
+	font-family: 'Helvetica Neue', sans-serif !important;
 	position: inherit !important;
 	top: auto !important;
 	right: auto !important;
@@ -559,28 +501,33 @@ div#carousel-reblog-box {
 	display: inline-block !important;
 	vertical-align: top !important;
 	margin: 0 2% 15px 0 !important;
-	color: #fff !important;
-	font-size:13px !important;
+	color: var(--jp-carousel-primary-color) !important;
+	font-size: 13px !important;
 }
 
 .jp-carousel-image-meta h5 {
-	color: #999 !important;
+	color: var(--jp-carousel-primary-subtle-color) !important;
 	text-transform: uppercase !important;
-	font-size:10px !important;
-	margin:0 0 2px !important;
+	font-size: 10px !important;
+	margin: 0 0 2px !important;
 	letter-spacing: 0.1em !important;
 }
 
 a.jp-carousel-image-download {
-	padding-left: 23px;
 	display: inline-block;
 	clear: both;
-	color: #999;
+	color: var(--jp-carousel-primary-subtle-color);
 	line-height: 1;
 	font-weight: 400;
-	font-size: 13px;
+	font-size: 14px;
 	text-decoration: none;
-	background-position: 0 -82px;
+}
+
+a.jp-carousel-image-download svg {
+	display: inline-block;
+	vertical-align: middle;
+	margin: 0 3px;
+	padding-bottom: 2px;
 }
 
 a.jp-carousel-image-download span.photo-size {
@@ -594,134 +541,112 @@ a.jp-carousel-image-download span.photo-size-times {
 	padding: 0 1px 0 2px;
 }
 
-a.jp-carousel-image-download:hover {
-	background-position: 0 -122px;
-	color: #68c9e8;
-	border: none !important;
-}
-
 /** Meta Box End **/
 
-/** GPS Map Start **/
-.jp-carousel-image-map {
-	position: relative;
-	margin: -20px -20px 20px;
-	border-bottom: 1px solid rgba( 255, 255, 255, 0.17 );
-	height: 154px;
-}
-
-.jp-carousel-image-map img.gmap-main {
-	-moz-border-radius-topleft: 6px;
-	border-top-left-radius: 6px;
-	border-right: 1px solid rgba( 255, 255, 255, 0.17 );
-}
-.jp-carousel-image-map div.gmap-topright {
-	width: 94px;
-	height: 154px;
-	position: absolute;
-	top: 0;
-	right: 0;
-}
-.jp-carousel-image-map div.imgclip {
-	overflow: hidden;
-	-moz-border-radius-topright: 6px;
-	border-top-right-radius: 6px;
-}
-.jp-carousel-image-map div.gmap-topright img {
-	margin-left: -40px;
-}
-.jp-carousel-image-map img.gmap-bottomright {
-	position: absolute;
-	top: 96px;
-	right: 0;
-}
-
 /** Comments Start **/
 .jp-carousel-comments {
-	font: 15px/1.7 "Helvetica Neue", sans-serif !important;
+	font: 15px/1.7 'Helvetica Neue', sans-serif !important;
 	font-weight: 400;
-	background:none transparent;
+	background: none transparent;
+	width: 100%;
+	bottom: 10px;
+	margin-top: 20px;
 }
 
-.jp-carousel-comments p a:hover, .jp-carousel-comments p a:focus, .jp-carousel-comments p a:active {
-	color: #68c9e8  !important;
+.jp-carousel-comments p a:hover,
+.jp-carousel-comments p a:focus,
+.jp-carousel-comments p a:active {
+	color: var(--jp-carousel-primary-color) !important;
 }
 
 .jp-carousel-comment {
-	background:none transparent;
-	color: #999;
-	margin-bottom: 20px;
-	clear:left;
+	background: none transparent;
+	color: var(--jp-carousel-primary-subtle-color);
 	overflow: auto;
-	width: 100%
+	width: 100%;
+	display: flex;
+}
+
+.jp-carousel-comment + .jp-carousel-comment {
+	margin-top: 20px;
+}
+
+.jp-carousel-comment:last-of-type {
+	margin-bottom: 20px;
 }
 
 .jp-carousel-comment p {
-	color: #999 !important;
+	color: var(--jp-carousel-primary-subtle-color) !important;
 }
 
 .jp-carousel-comment .comment-author {
-	font-size: 13px;
-	font-weight:400;
-	padding:0;
-	width:auto;
+	font-size: 15px;
+	font-weight: 500;
+	padding: 0;
+	width: auto;
 	display: inline;
-	float:none;
-	border:none;
-	margin:0;
+	float: none;
+	border: none;
+	margin: 0;
 }
 
 .jp-carousel-comment .comment-author a {
-	color: #fff;
+	color: var(--jp-carousel-primary-color);
 }
 
 .jp-carousel-comment .comment-gravatar {
-	float:left;
+	float: none;
+	margin-right: 10px;
 }
 
 .jp-carousel-comment .comment-content {
-	border:none;
-	margin-left:85px;
+	border: none;
 	padding: 0;
 }
 
 .jp-carousel-comment .avatar {
-	margin:0 20px 0 0;
+	margin: 0;
 	-moz-border-radius: 4px;
 	-webkit-border-radius: 4px;
 	border-radius: 4px;
 	border: none !important;
 	padding: 0 !important;
 	background-color: transparent !important;
+	min-width: 64px;
+	min-height: 64px;
+	width: 64px;
+	height: 64px;
 }
 
 .jp-carousel-comment .comment-date {
-	color:#999;
-	margin-top: 4px;
-	font-size:11px;
-	display: inline;
-	float: right;
-	/*clear: right;*/
+	color: var(--jp-carousel-primary-subtle-color);
+	font-size: 11px;
+	border-bottom: 1px solid var(--jp-carousel-bg-faded-color);
+	margin-bottom: 6px;
 }
 
 #jp-carousel-comment-form {
-	margin:0 0 10px !important;
-	float: left;
+	margin: 0 0 10px !important;
 	width: 100%;
 }
 
+#jp-carousel-comment-form.jp-carousel-is-disabled {
+	opacity: 0.5;
+	pointer-events: none;
+}
+
 textarea#jp-carousel-comment-form-comment-field {
-	background: rgba(34,34,34,0.9);
-	border: 1px solid #3a3a3a;
-	color: #aaa;
-	font: 15px/1.4 "Helvetica Neue", sans-serif !important;
+	background: var(--jp-carousel-bg-faded-color);
+	border: 1px solid var(--jp-carousel-border-color);
+	color: var(--jp-carousel-primary-subtle-color);
+	font: 16px/1.4 'Helvetica Neue', sans-serif !important;
 	width: 100%;
 	padding: 10px 10px 5px;
 	margin: 0;
 	float: none;
 	height: 147px;
-	-webkit-box-shadow: inset 2px 2px 2px rgba(0,0,0,0.2);
-	box-shadow: inset 2px 2px 2px rgba(0,0,0,0.2);
+	-webkit-box-shadow: inset 2px 2px 2px rgba( 0, 0, 0, 0.1 );
+	box-shadow: inset 2px 2px 2px rgba( 0, 0, 0, 0.1 );
 	-moz-border-radius: 3px;
 	-webkit-border-radius: 3px;
 	border-radius: 3px;
@@ -736,344 +661,304 @@ textarea#jp-carousel-comment-form-comment-field::-webkit-input-placeholder {
 }
 
 textarea#jp-carousel-comment-form-comment-field:focus {
-	background: #ccc;
-	color: #222;
+	background: var(--jp-carousel-bg-faded-color);
+	color: var(--jp-carousel-primary-subtle-color);
 }
 
 textarea#jp-carousel-comment-form-comment-field:focus::-webkit-input-placeholder {
-	color: #aaa;
+	color: var(--jp-carousel-primary-subtle-color);
 }
 
-#jp-carousel-comment-form-spinner {
-	color: #fff;
-	margin:22px 0 0 10px;
-	display: block;
+#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,
+#jp-carousel-library-loading:after {
+	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 );
+	border-left: 8px solid var(--jp-carousel-primary-color);
+	-webkit-transform: translateZ( 0 );
+	-ms-transform: translateZ( 0 );
+	transform: translateZ( 0 );
+	-webkit-animation: load8 1.1s infinite linear;
+	animation: load8 1.1s infinite linear;
+}
+
+#jp-carousel-comment-form-spinner,
+#jp-carousel-comment-form-spinner:after {
+	border-radius: 50%;
 	width: 20px;
 	height: 20px;
+}
+#jp-carousel-comment-form-spinner {
+	display: none;
 	float: left;
+	margin: 22px 0 0 10px;
+	font-size: 10px;
+	position: absolute; /* relative to .jp-carousel-comment-form-container */
+	text-indent: -9999em;
+	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 );
+	border-left: 4px solid var(--jp-carousel-primary-color);
+	-webkit-transform: translateZ( 0 );
+	-ms-transform: translateZ( 0 );
+	transform: translateZ( 0 );
+	-webkit-animation: load8 1.1s infinite linear;
+	animation: load8 1.1s infinite linear;
+	margin: 0 auto;
+	top: calc( 50% - 15px );
+	left: 0;
+	bottom: 0;
+	right: 0;
+}
+
+@-webkit-keyframes load8 {
+	0% {
+		-webkit-transform: rotate( 0deg );
+		transform: rotate( 0deg );
+	}
+	100% {
+		-webkit-transform: rotate( 360deg );
+		transform: rotate( 360deg );
+	}
+}
+@keyframes load8 {
+	0% {
+		-webkit-transform: rotate( 0deg );
+		transform: rotate( 0deg );
+	}
+	100% {
+		-webkit-transform: rotate( 360deg );
+		transform: rotate( 360deg );
+	}
+}
+
+.jp-carousel-info-content-wrapper {
+	max-width: 800px;
+	margin: auto;
 }
 
 #jp-carousel-comment-form-submit-and-info-wrapper {
 	display: none;
-	/*margin-bottom:15px;*/
 	overflow: hidden;
-	width: 100%
-}
-
-#jp-carousel-comment-form-commenting-as {
+	width: 100%;
 }
 
 #jp-carousel-comment-form-commenting-as input {
-	background: rgba(34,34,34,0.9);
-	border: 1px solid #3a3a3a;
-	color: #aaa;
-	font: 13px/1.4 "Helvetica Neue", sans-serif !important;
-	padding: 3px 6px;
+	background: var(--jp-carousel-bg-color);
+	border: 1px solid var(--jp-carousel-border-color);
+	color: var(--jp-carousel-primary-subtle-color);
+	font: 16px/1.4 'Helvetica Neue', sans-serif !important;
+	padding: 10px;
 	float: left;
-	-webkit-box-shadow: inset 2px 2px 2px rgba(0,0,0,0.2);
-	box-shadow: inset 2px 2px 2px rgba(0,0,0,0.2);
+	-webkit-box-shadow: inset 2px 2px 2px rgba( 0, 0, 0, 0.2 );
+	box-shadow: inset 2px 2px 2px rgba( 0, 0, 0, 0.2 );
 	-moz-border-radius: 2px;
 	-webkit-border-radius: 2px;
 	border-radius: 2px;
-	width:285px;
+	width: 285px;
 }
 
 #jp-carousel-comment-form-commenting-as input:focus {
-	background: #ccc;
-	color: #222;
+	background: var(--jp-carousel-bg-faded-color);
+	color: var(--jp-carousel-primary-subtle-color);
 }
 
 #jp-carousel-comment-form-commenting-as p {
-	font: 400 13px/1.7 "Helvetica Neue", sans-serif !important;
-	margin:22px 0 0;
+	font: 400 13px/1.7 'Helvetica Neue', sans-serif !important;
+	margin: 22px 0 0;
 	float: left;
 }
 
 #jp-carousel-comment-form-commenting-as fieldset {
-	float:left;
-	border:none;
-	margin:20px 0 0 0;
-	padding:0;
-}
-
-#jp-carousel-comment-form-commenting-as fieldset {
+	float: left;
+	border: none;
+	margin: 20px 0 0 0;
+	padding: 0;
 	clear: both;
 }
 
 #jp-carousel-comment-form-commenting-as label {
-	font: 400 13px/1.7 "Helvetica Neue", sans-serif !important;
-	margin:0 20px 3px 0;
-	float:left;
-	width:100px;
+	font: 400 13px/1.7 'Helvetica Neue', sans-serif !important;
+	margin: 0 20px 3px 0;
+	float: left;
+	width: 100px;
 }
 
 #jp-carousel-comment-form-button-submit {
 	margin-top: 20px;
-	float:right;
+	margin-left: auto;
+	display: block;
+	border: solid 1px var(--jp-carousel-primary-color);
+	background: var(--jp-carousel-bg-color);
+	border-radius: 3px;
+	padding: 8px 16px;
+	font-size: 14px;
+	color: var(--jp-carousel-primary-color);
 }
 
-#js-carousel-comment-form-container {
-	margin-bottom:15px;
-	overflow: auto;
-	width: 100%;
+#jp-carousel-comment-form-button-submit:active,
+#jp-carousel-comment-form-button-submit:focus {
+	background: var(--jp-carousel-primary-color);
+	color: var(--jp-carousel-bg-color);
 }
 
 #jp-carousel-comment-form-container {
-	margin-bottom:15px;
-	overflow: auto;
+	margin-bottom: 15px;
 	width: 100%;
+	margin-top: 20px;
+	color: var(--jp-carousel-primary-subtle-color);
+	position: relative;
+	overflow: hidden;
 }
 
 #jp-carousel-comment-post-results {
 	display: none;
-	overflow:auto;
-	width:100%;
+	overflow: auto;
+	width: 100%;
 }
 
 #jp-carousel-comment-post-results span {
-	display:block;
+	display: block;
 	text-align: center;
-	margin-top:20px;
+	margin-top: 20px;
 	width: 100%;
 	overflow: auto;
 	padding: 1em 0;
 	box-sizing: border-box;
-	background: rgba( 0, 0, 0, 0.7 );
 	border-radius: 2px;
-	font: 13px/1.4 "Helvetica Neue", sans-serif !important;
-	border: 1px solid rgba( 255, 255, 255, 0.17 );
-	-webkit-box-shadow: inset 0px 0px 5px 5px rgba(0, 0, 0, 1);
-	        box-shadow: inset 0px 0px 5px 5px rgba(0, 0, 0, 1);
+	font: 13px/1.4 'Helvetica Neue', sans-serif !important;
+	border: 1px solid var(--jp-carousel-border-color);
+	-webkit-box-shadow: inset 0px 0px 5px 0px rgba( 0, 0, 0, 0.2 );
+	box-shadow: inset 0px 0px 5px 0px rgba( 0, 0, 0, 0.2 );
 }
 
 .jp-carousel-comment-post-error {
-	color:#DF4926;
-}
-
-.jp-carousel-comment-post-success {
-	/*color:#21759B;*/
+	color: #df4926;
 }
 
 #jp-carousel-comments-closed {
 	display: none;
-	color: #999;
+	color: var(--jp-carousel-primary-subtle-color);
 }
 
 #jp-carousel-comments-loading {
-	font: 400 15px/1.7 "Helvetica Neue", sans-serif !important;
+	font: 400 15px/1.7 'Helvetica Neue', sans-serif !important;
 	display: none;
-	color: #999;
+	color: var(--jp-carousel-primary-subtle-color);
 	text-align: left;
 	margin-bottom: 20px;
+	width: 100%;
+	bottom: 10px;
+	margin-top: 20px;
 }
 
-
-/* ----- Light variant ----- */
-
-.jp-carousel-light .jp-carousel-overlay {
-	background: #fff;
-}
-
-.jp-carousel-light .jp-carousel-next-button:hover span,
-.jp-carousel-light .jp-carousel-previous-button:hover span {
-	opacity: 0.8;
-}
-
-.jp-carousel-light .jp-carousel-close-hint:hover,
-.jp-carousel-light .jp-carousel-titleanddesc div {
-	color: #000 !important;
-}
-
-.jp-carousel-light .jp-carousel-comments p a,
-.jp-carousel-light .jp-carousel-comment .comment-author a,
-.jp-carousel-light .jp-carousel-titleanddesc p a,
-.jp-carousel-light .jp-carousel-titleanddesc p a,
-.jp-carousel-light .jp-carousel-comments p a,
-.jp-carousel-light .jp-carousel-info h2 a {
-	color: #1e8cbe !important;
-}
-
-.jp-carousel-light .jp-carousel-comments p a:hover,
-.jp-carousel-light .jp-carousel-comment .comment-author a:hover,
-.jp-carousel-light .jp-carousel-titleanddesc p a:hover,
-.jp-carousel-light .jp-carousel-titleanddesc p a:hover,
-.jp-carousel-light .jp-carousel-comments p a:hover,
-.jp-carousel-light .jp-carousel-info h2 a:hover {
-	color: #f1831e !important;
-}
-
-.jp-carousel-light .jp-carousel-info h2,
-.jp-carousel-light .jp-carousel-titleanddesc,
-.jp-carousel-light .jp-carousel-titleanddesc p,
-.jp-carousel-light .jp-carousel-comment,
-.jp-carousel-light .jp-carousel-comment p,
-.jp-carousel-light div.jp-carousel-buttons a,
-.jp-carousel-light .jp-carousel-titleanddesc p strong,
-.jp-carousel-light .jp-carousel-titleanddesc p b,
-.jp-carousel-light .jp-carousel-titleanddesc p em,
-.jp-carousel-light .jp-carousel-titleanddesc p i {
-	color: #666;
-}
-
-.jp-carousel-light .jp-carousel-buttons {
-	border-bottom-color: #f0f0f0;
-	background: #f5f5f5;
+/** Icons Start **/
+.jp-carousel-photo-icons-container {
+	flex: 1;
+	display: block;
+	text-align: right;
+	margin: 0 20px 0 30px;
+	white-space: nowrap;
 }
 
-.jp-carousel-light div.jp-carousel-buttons a:hover {
+.jp-carousel-icon-btn {
+	padding: 16px;
 	text-decoration: none;
-	color: #f1831e;
-}
-
-.jp-carousel-light div.jp-carousel-buttons a.jp-carousel-reblog,
-.jp-carousel-light div.jp-carousel-buttons a.jp-carousel-reblog:hover {
-	background-position: 4px -56px;
-	padding-left: 24px !important;
-}
-
-.jp-carousel-light div.jp-carousel-buttons a.jp-carousel-reblog.reblogged {
-	background-color: #2ea2cc;
-	color: #fff;
-}
-
-.jp-carousel-light div.jp-carousel-buttons a.jp-carousel-commentlink {
-	background-position: 0px -176px;
-}
-
-.jp-carousel-light div.jp-carousel-buttons a.jp-carousel-reblog.reblogged {
-	background-position: 5px -36px;
-}
-
-.jp-carousel-light div#carousel-reblog-box {
-	background: #eee;
-	background: -moz-linear-gradient(bottom,  #ececec,  #f7f7f7);
-	background: -webkit-gradient(linear, left bottom, left top, from(#ececec), to(#f7f7f7));
-	-webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.1);
-	-moz-box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-	box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-	border:1px solid #ddd;
-}
-
-.jp-carousel-light #carousel-reblog-box textarea {
-	border: 1px inset #ccc;
-	color: #666;
-	border: 1px solid #cfcfcf;
-	background: #fff;
-}
-
-.jp-carousel-light #carousel-reblog-box .canceltext {
-	color: #888;
-}
-
-.jp-carousel-light #carousel-reblog-box .canceltext a {
-	color: #666;
-}
-
-.jp-carousel-light #carousel-reblog-box select {
-	background: #eee;
-	color: #333;
-	border: 1px solid #aaa;
-}
-
-.jp-carousel-light #carousel-reblog-box input#carousel-reblog-submit, #jp-carousel-comment-form-button-submit {
-	color: #333;
-	background: #fff;
-	background: -moz-linear-gradient(bottom,  #ddd,  #fff);
-	background: -webkit-gradient(linear, left bottom, left top, from(#ddd), to(#fff));
-	border: 1px solid #aaa;
-}
-
-.jp-carousel-light .jp-carousel-image-meta {
-	background: #fafafa;
-	border: 1px solid #eee;
-	border-top-color: #f5f5f5;
-	border-left-color: #f5f5f5;
-	color: #333;
-}
-
-.jp-carousel-light .jp-carousel-image-meta li {
-	color: #000 !important;
-}
-
-.jp-carousel-light .jp-carousel-close-hint {
-	color: #ccc;
-}
-
-.jp-carousel-light .jp-carousel-close-hint span {
-	background-color: white;
-	border-color: #ccc;
-}
-
-.jp-carousel-light #jp-carousel-comment-form-comment-field::-webkit-input-placeholder {
-	color: #aaa;
-}
-
-.jp-carousel-light #jp-carousel-comment-form-comment-field:focus {
-	color: #333;
+	border: none;
+	background: none;
+	display: inline-block;
+	height: 64px;
 }
 
-.jp-carousel-light #jp-carousel-comment-form-comment-field:focus::-webkit-input-placeholder {
-	color: #ddd;
+.jp-carousel-icon {
+	border: none;
+	pointer-events: 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;
 }
 
-.jp-carousel-light a.jp-carousel-image-download {
-	background-position: 0 -122px;
+.jp-carousel-icon svg {
+	display: inline-block;
 }
 
-.jp-carousel-light a.jp-carousel-image-download:hover {
-	background-position: 0 -122px;
-	color: #f1831e;
+.jp-carousel-overlay rect {
+	fill: var(--jp-carousel-primary-color);
 }
 
-.jp-carousel-light textarea#jp-carousel-comment-form-comment-field {
-	background: #fbfbfb;
-	color: #333;
-	border: 1px solid #dfdfdf;
-	-webkit-box-shadow: inset 2px 2px 2px rgba(0,0,0,0.1);
-	box-shadow: inset 2px 2px 2px rgba(0,0,0,0.1);
+.jp-carousel-selected .jp-carousel-icon {
+	background: var(--jp-carousel-primary-color);
 }
-
-.jp-carousel-light #jp-carousel-comment-form-commenting-as input {
-	background: #fbfbfb;
-	border: 1px solid #dfdfdf;
-	color: #333;
-	-webkit-box-shadow: inset 2px 2px 2px rgba(0,0,0,0.1);
-	box-shadow: inset 2px 2px 2px rgba(0,0,0,0.1);
+.jp-carousel-selected rect {
+	fill: var(--jp-carousel-bg-color);
 }
 
-.jp-carousel-light #jp-carousel-comment-form-commenting-as input:focus {
-	background: #fbfbfb;
-	color: #333;
+.jp-carousel-icon-comments.jp-carousel-show {
+	display: inline-block;
 }
 
-.jp-carousel-light  #jp-carousel-comment-post-results span {
-	background: #f7f7f7;
-	border:1px solid #dfdfdf;
-	-webkit-box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.05);
-	        box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.05);
+.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;
+	background: var(--jp-carousel-primary-color);
+	color: var(--jp-carousel-bg-color);
+	font-weight: normal;
+	font-family: 'Helvetica Neue', sans-serif !important;
+	position: relative;
 }
 
-.jp-carousel-light .jp-carousel-slide {
-	background-color:#fff;
+.jp-carousel-selected .jp-carousel-icon .jp-carousel-has-comments-indicator {
+	background: var(--jp-carousel-bg-color);
+	color: var(--jp-carousel-primary-color);
 }
 
-.jp-carousel-light .jp-carousel-titleanddesc {
-	border-top: 1px solid #eee;
+.jp-carousel-has-comments-indicator.jp-carousel-show {
+	display: inline-block;
 }
 
-.jp-carousel-light .jp-carousel-fadeaway {
-	background: -moz-linear-gradient(bottom, rgba(255,255,255,0.75), rgba(255,255,255,0));
-	background: -webkit-gradient(linear, left bottom, left top, from(rgba(255,255,255,0.75)), to(rgba(255,255,255,0)));
-}
+/** Icons End **/
 
 /* Small screens */
-@media only screen and (max-width: 760px) {
-
-	.jp-carousel-info {
-		margin: 0 10px !important;
-	}
-
-	.jp-carousel-next-button, .jp-carousel-previous-button {
+@media only screen and ( max-width: 760px ) {
+	.jp-carousel-overlay .swiper-container .swiper-button-next,
+	.jp-carousel-overlay .swiper-container .swiper-button-prev {
 		display: none !important;
 	}
 
@@ -1084,50 +969,76 @@ textarea#jp-carousel-comment-form-comment-field:focus::-webkit-input-placeholder
 	.jp-carousel-image-meta {
 		float: none !important;
 		width: 100% !important;
-		-moz-box-sizing:border-box;
-		-webkit-box-sizing:border-box;
+		-moz-box-sizing: border-box;
+		-webkit-box-sizing: border-box;
 		box-sizing: border-box;
+		margin-left: 0;
 	}
 
 	.jp-carousel-close-hint {
-	 	font-weight: 800 !important;
 		font-size: 26px !important;
 		position: fixed !important;
-		top: -10px;
+		top: 10px;
+		right: 10px;
+	}
+
+	/* The admin bar is fixed at top: 0*/
+	.admin-bar .jp-carousel-close-hint {
+		top: 40px;
 	}
 
 	.jp-carousel-slide img {
-		filter: alpha(opacity=100);
 		opacity: 1;
 	}
 
 	.jp-carousel-wrap {
-		background-color: #000;
+		background-color: var(--jp-carousel-bg-color);
 	}
 
 	.jp-carousel-fadeaway {
 		display: none;
 	}
 
-	#jp-carousel-comment-form-container {
-		display: none !important;
+	.jp-carousel-info > .jp-carousel-photo-info {
+		display: none;
 	}
 
-	.jp-carousel-titleanddesc {
-		padding-top: 0 !important;
-		border: none !important;
+	.jp-carousel-comments-wrapper > .jp-carousel-photo-info {
+		display: block;
 	}
-	.jp-carousel-titleanddesc-title {
-		font-size: 1em !important;
+
+	.jp-carousel-caption {
+		overflow: visible !important;
 	}
 
-	.jp-carousel-left-column-wrapper {
-		padding: 0;
-		width: 100% !important;
+	.jp-carousel-info-footer .jp-carousel-photo-title-container {
+		display: none;
 	}
 
-	.jp-carousel-photo-info {
-		left: 0 !important;
-		width: 100% !important;
+	.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;
 	}
 }