diff --git a/package-lock.json b/package-lock.json index 8437a35cc..9a5e2f247 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4886,8 +4886,7 @@ }, "ini": { "version": "1.3.5", - "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz", - "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==", + "resolved": "", "dev": true, "optional": true }, @@ -7663,9 +7662,9 @@ "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=" }, "photoswipe": { - "version": "4.1.3", - "resolved": "https://registry.npmjs.org/photoswipe/-/photoswipe-4.1.3.tgz", - "integrity": "sha512-89Z43IRUyw7ycTolo+AaiDn3W1EEIfox54hERmm9bI12IB9cvRfHSHez3XhAyU8XW2EAFrC+2sKMhh7SJwn0bA==" + "version": "5.2.0-beta.2", + "resolved": "https://registry.npmjs.org/photoswipe/-/photoswipe-5.2.0-beta.2.tgz", + "integrity": "sha512-cRV7inl2r0CLnAnMxzgeUTAz00O+BMHntc3J8ZTUzSrWbDePdZLeeddMNDtG8G1inXPzyxQ4oJfqFis2JIx2qQ==" }, "picomatch": { "version": "2.3.0", diff --git a/package.json b/package.json index b87db16f9..b6af34654 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,7 @@ "floating-vue": "^1.0.0-beta.8", "moment": "^2.29.1", "node-sass": "^4.14.1", - "photoswipe": "^4.1.3", + "photoswipe": "^5.2.0-beta.2", "qs": "^6.9.4", "react": "^17.0.2", "react-dom": "^17.0.2", diff --git a/src/assets/css/tainacan-gutenberg-block-item-gallery.css b/src/assets/css/tainacan-gutenberg-block-item-gallery.css index 9dd7d783c..3e202a5fe 100644 --- a/src/assets/css/tainacan-gutenberg-block-item-gallery.css +++ b/src/assets/css/tainacan-gutenberg-block-item-gallery.css @@ -1,614 +1,3 @@ -/*! PhotoSwipe main CSS by Dmitry Semenov | photoswipe.com | MIT license */ -/* - Styles for basic PhotoSwipe functionality (sliding area, open/close transitions) -*/ -/* pswp = photoswipe */ -.pswp { - display: none; - position: absolute; - width: 100%; - height: 100%; - left: 0; - top: 0; - overflow: hidden; - -ms-touch-action: none; - touch-action: none; - z-index: 9999999; - -webkit-text-size-adjust: 100%; - /* create separate layer, to avoid paint on window.onscroll in webkit/blink */ - -webkit-backface-visibility: hidden; - outline: none; } - .pswp * { - box-sizing: border-box; } - .pswp img { - max-width: none; } - -/* style is added when JS option showHideOpacity is set to true */ -.pswp--animate_opacity { - /* 0.001, because opacity:0 doesn't trigger Paint action, which causes lag at start of transition */ - opacity: 0.001; - will-change: opacity; - /* for open/close transition */ - transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); } - -.pswp--open { - display: block; } - -.pswp--zoom-allowed .pswp__img { - /* autoprefixer: off */ - cursor: -webkit-zoom-in; - cursor: -moz-zoom-in; - cursor: zoom-in; } - -.pswp--zoomed-in .pswp__img { - /* autoprefixer: off */ - cursor: -webkit-grab; - cursor: -moz-grab; - cursor: grab; } - -.pswp--dragging .pswp__img { - /* autoprefixer: off */ - cursor: -webkit-grabbing; - cursor: -moz-grabbing; - cursor: grabbing; } - -/* - Background is added as a separate element. - As animating opacity is much faster than animating rgba() background-color. -*/ -.pswp__bg { - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100%; - background: rgba(0, 0, 0, 0.8); - opacity: 0; - transform: translateZ(0); - -webkit-backface-visibility: hidden; - will-change: opacity; } - -.pswp__scroll-wrap { - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100%; - overflow: hidden; } - -.pswp__container, -.pswp__zoom-wrap { - -ms-touch-action: none; - touch-action: none; - position: absolute; - left: 0; - right: 0; - top: 0; - bottom: 0; } - -/* Prevent selection and tap highlights */ -.pswp__container, -.pswp__img { - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - -webkit-touch-callout: none; } - -.pswp__zoom-wrap { - position: absolute; - width: 100%; - -webkit-transform-origin: left top; - -moz-transform-origin: left top; - -ms-transform-origin: left top; - transform-origin: left top; - /* for open/close transition */ - transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1); } - -.pswp__bg { - will-change: opacity; - /* for open/close transition */ - transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); } - -.pswp--animated-in .pswp__bg, -.pswp--animated-in .pswp__zoom-wrap { - -webkit-transition: none; - transition: none; } - -.pswp__container, -.pswp__zoom-wrap { - -webkit-backface-visibility: hidden; } - -.pswp__item { - position: absolute; - left: 0; - right: 0; - top: 0; - bottom: 0; - overflow: hidden; } - -.pswp__img { - position: absolute; - width: auto; - height: auto; - top: 0; - left: 0; } - -/* - stretched thumbnail or div placeholder element (see below) - style is added to avoid flickering in webkit/blink when layers overlap -*/ -.pswp__img--placeholder { - -webkit-backface-visibility: hidden; } - -/* - div element that matches size of large image - large image loads on top of it -*/ -.pswp__img--placeholder--blank { - background: #222; } - -.pswp--ie .pswp__img { - width: 100% !important; - height: auto !important; - left: 0; - top: 0; } - -/* - Error message appears when image is not loaded - (JS option errorMsg controls markup) -*/ -.pswp__error-msg { - position: absolute; - left: 0; - top: 50%; - width: 100%; - text-align: center; - font-size: 14px; - line-height: 16px; - margin-top: -8px; - color: #CCC; } - -.pswp__error-msg a { - color: #CCC; - text-decoration: underline; } - -/*! PhotoSwipe Default UI CSS by Dmitry Semenov | photoswipe.com | MIT license */ -/* - - Contents: - - 1. Buttons - 2. Share modal and links - 3. Index indicator ("1 of X" counter) - 4. Caption - 5. Loading indicator - 6. Additional styles (root element, top bar, idle state, hidden state, etc.) - -*/ -/* - - 1. Buttons - - */ -/*