229 lines
6.4 KiB
CSS
Raw Normal View History

2024-08-31 01:03:37 +08:00
/*! 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: 15000;
-webkit-text-size-adjust: 100%;
/* create separate layer, to avoid paint on window.onscroll in webkit/blink */
-webkit-backface-visibility: hidden;
outline: none; }
.pswp * {
-webkit-box-sizing: border-box;
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 */
-webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
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: #000;
opacity: 0;
-webkit-transform: translateZ(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;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none; }
.pswp__zoom-wrap {
position: absolute;
width: 100%;
-webkit-transform-origin: left top;
-ms-transform-origin: left top;
transform-origin: left top;
/* for open/close transition */
-webkit-transition: -webkit-transform 333ms cubic-bezier(0.4, 0, 0.22, 1);
transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1); }
.pswp__bg {
will-change: opacity;
/* for open/close transition */
-webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
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; }
.pswp__button{transition:opacity, background-color .2s;color: #fff;font-size: 18px;font-family: 'remixicon';}
.pswp__button:hover {background-color: rgba(255,255,255,0.1);}
.pswp__button.pswp__button--rotate{background-image: none !important;}
.pswp__button.pswp__button--rotate:before{content: "\eb95";}
.pswp__button.pswp__button--remove{background-image: none !important;}
.pswp__button.pswp__button--remove:before{content:"\ec1e";}
/* .pswp__container:not(.touch-start) .pswp__item.loading .pswp__zoom-wrap{transform: none !important;} */
.pswp__item.loading .pswp__zoom-wrap{transform: none !important;}
.pswp__item .pswp__zoom-wrap .pswp__img.pswp__img--placeholder{display:none;}
.pswp__container.init-first .pswp__zoom-wrap .pswp__img.pswp__img--placeholder{display:block;}
.pswp__item.loading .pswp__zoom-wrap .pswp__img.pswp__img--placeholder{display:block;}
.pswp__item.loading .pswp__zoom-wrap .pswp__img {
position: absolute;
top: 0;right: 0;left: 0;bottom: 0;
margin: auto;height: 80%;min-width: 40%;
}
.pswp__button.pswp__button--show-true{
margin-right:5px;background-image: none !important;
width: auto;font-size: 12px;padding: 0 8px 0 28px;
}
.pswp__button.pswp__button--show-true:before{
content:"\ee4a";font-size: 18px;position: absolute;margin:-3px 0 0 -20px;
}
.pswp .file-panel *{box-sizing: initial;}
.pswp__button.pswp__button--info{background-image: none !important;}
.pswp__button.pswp__button--info:before{content:"\ee58";}
.app-wap-small .pswp__button.pswp__button--info{display: none !important;}
.pswp_content .pswp__scroll-wrap{z-index:2;}
.pswp_content.dark-mode .file-panel{
border-left: 1px solid rgba(255,255,255,0.15);
box-shadow: 0 0 10px #00000080;background: rgba(20,20,20,0.8);
}
.pswp_content .file-panel-info{position:absolute;right:0;top:0;bottom:0;width:320px;z-index:1;}
.pswp_content.panel-info-open .pswp__scroll-wrap{width:auto;right:320px;}
.pswp_content.panel-info-open .pswp__button.pswp__button--info{color: #1890ff;background: rgba(255,255,255,0.15);}
.pswp__error-msg{width: 100% !important;height: auto !important;}
.pswp_content .file-panel .btn[data-action="copyWget"]{display: none;}
.pswp_content .file-panel .btn[data-action="copyCurl"]{display: none;}
.pswp__button.pswp__button--download i{display: none;}
.pswp__button.pswp__button--download{background-image: none !important;}
.pswp__button.pswp__button--download:before{content:"\ec53";}