@charset "UTF-8"; /* ==================================================
 * PhotoSwipe Main Stylesheet by Dmytro Semenov, Modify by Lopwon.
 * www.Lopwon.com
 * 2023-10-18
 * ------------------------------------------------------------------- */


.pswp * { box-sizing: border-box; } .pswp { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; touch-action: none; outline: 0; contain: layout style size; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0.003; z-index: 100000; } .pswp:focus { outline: 0; } .pswp img { max-width: none; } .pswp--open { display: block; } .pswp, .pswp__bg { -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); will-change: opacity; } .pswp__bg { background: var(--pswp-bg); opacity: 0.005; } .pswp, .pswp__scroll-wrap { overflow: hidden; } .pswp__scroll-wrap, .pswp__bg, .pswp__container, .pswp__item, .pswp__content, .pswp__img, .pswp__zoom-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .pswp__img, .pswp__zoom-wrap { width: auto; height: auto; } .pswp--click-to-zoom.pswp--zoom-allowed .pswp__img { cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: zoom-in; } .pswp--click-to-zoom.pswp--zoomed-in .pswp__img { cursor: move; cursor: -webkit-grab; cursor: -moz-grab; cursor: grab; } .pswp--click-to-zoom.pswp--zoomed-in .pswp__img:active { cursor: -webkit-grabbing; cursor: -moz-grabbing; cursor: grabbing; } .pswp--no-mouse-drag.pswp--zoomed-in .pswp__img, .pswp--no-mouse-drag.pswp--zoomed-in .pswp__img:active, .pswp__img { cursor: -webkit-zoom-out; cursor: -moz-zoom-out; cursor: zoom-out; } .pswp__container, .pswp__img, .pswp__button, .pswp__counter { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } .pswp__item { overflow: hidden; z-index: 1; } .pswp__hidden { display: none !important; } .pswp__content { pointer-events: none; } .pswp__content > * { pointer-events: auto; } .pswp-caption-content { display: none; } .pswp__dynamic-caption { position: absolute; left: 0; top: 0; width: 100%; color: var(--pswp-icon-color); -webkit-transition: opacity 120ms linear !important; -moz-transition:opacity 120ms linear !important; -ms-transition: opacity 120ms linear !important; -o-transition: opacity 120ms linear !important; transition: opacity 120ms linear !important; } .pswp__dynamic-caption a { color: var(--color-post-text-a); } .pswp__dynamic-caption a:hover { padding-bottom: 0.1em; color: var(--color-content-text-hover); border-bottom: 0.1em dashed var(--color-content-text-a-decoration); } .pswp__dynamic-caption--faded { opacity: 0 !important; } .pswp__dynamic-caption--aside { padding: 15px; width: auto; max-width: 320px; } .pswp__dynamic-caption--below { padding: 15px; width: auto; max-width: 640px; } .pswp__dynamic-caption--on-hor-edge { color: transparent; } .pswp__dynamic-caption--mobile { top: auto !important; left: 0 !important; right: 0; bottom: 0; padding: 15px; width: 100%; background: var(--pswp-bg); } .pswp__error-msg-container { display: grid; } .pswp__error-msg { position: absolute; top: calc(50% + 30px); left: 50%; margin: auto; font-size: 1em; color: var(--pswp-error-text-color); line-height: 1.2; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .pswp .pswp__hide-on-close { -webkit-transition: opacity var(--pswp-transition-duration) cubic-bezier(0.4, 0, 0.22, 1); -moz-transition: opacity var(--pswp-transition-duration) cubic-bezier(0.4, 0, 0.22, 1); -ms-transition: opacity var(--pswp-transition-duration) cubic-bezier(0.4, 0, 0.22, 1); -o-transition: opacity var(--pswp-transition-duration) cubic-bezier(0.4, 0, 0.22, 1); transition: opacity var(--pswp-transition-duration) cubic-bezier(0.4, 0, 0.22, 1); will-change: opacity; pointer-events: none; opacity: 0.005; z-index: 10; } .pswp--ui-visible .pswp__hide-on-close { pointer-events: auto; opacity: .7; } .pswp__button { position: relative; display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 50px; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; opacity: 0.7; -webkit-appearance: none; -webkit-touch-callout: none; overflow: hidden; cursor: pointer; } .pswp__button:hover, .pswp__button:active, .pswp__button:focus { padding: 0; border: 0; background: none; box-shadow: none; -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; opacity: 1; } .pswp__button:disabled { opacity: 0.3; cursor: auto; } .pswp__icn { fill: var(--pswp-icon-color); color: var(--pswp-icon-color-secondary); } .pswp__icn { width: 32px; height: 32px; pointer-events: none; overflow: hidden; } .pswp__icn-shadow { stroke: var(--pswp-icon-stroke-color); stroke-width: 2px; fill: none; } .pswp__icn:focus { outline: 0; } div.pswp__img--placeholder, .pswp__img--with-bg { background: var(--pswp-placeholder-bg); opacity: 3; } .pswp__top-bar { display: flex; align-items: center; position: absolute; left: 0; top: 0; width: 100%; height: 50px; pointer-events: none !important; z-index: 10; } .pswp__top-bar > * { pointer-events: auto; will-change: opacity; } .pswp__button--arrow { position: absolute; top: calc(50% + 30px); left: 50%; width: 60px; height: 60px; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .pswp__button--arrow:disabled { display: none; cursor: default; } .pswp__button--arrow .pswp__icn { width: 60px; height: 60px; border-radius: 0; background: none; } .pswp--one-slide .pswp__button--arrow { display: none; } .pswp--touch .pswp__button--arrow { visibility: hidden; } .pswp--has_mouse .pswp__button--arrow { visibility: visible; } .pswp__button--arrow--prev { left: calc(0% + 50px); } .pswp__button--arrow--next { left: calc(100% - 50px); } .pswp__button--arrow--next .pswp__icn { -webkit-transform: scale(-1, 1); -moz-transform: scale(-1, 1); -ms-transform: scale(-1, 1); -o-transform: scale(-1, 1); transform: scale(-1, 1); } .pswp__button--zoom { display: none; } .pswp--zoom-allowed .pswp__button--zoom { display: block; } .pswp--zoomed-in .pswp__zoom-icn-bar-v { display: none; } .pswp__preloader { display: flex; justify-content: center; align-items: center; flex-shrink: 0; position: relative; margin-right: auto; width: 50px; overflow: hidden; } .pswp__preloader .pswp__icn { position: relative; -webkit-transition: opacity 0.2s linear; -moz-transition: opacity 0.2s linear; -ms-transition: opacity 0.2s linear; -o-transition: opacity 0.2s linear; transition: opacity 0.2s linear; animation: pswp-clockwise 600ms linear infinite; opacity: 0; } .pswp__preloader--active .pswp__icn { opacity: 0.7; } @-webkit-keyframes pswp-clockwise { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @-moz-keyframes pswp-clockwise { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @-ms-keyframes pswp-clockwise { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @-o-keyframes pswp-clockwise { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes pswp-clockwise { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .pswp__counter { margin-left: 15px; flex-shrink: 0; min-width: 50px; font-size: 1.6em; color: var(--pswp-icon-color); opacity: 0.7; } .pswp__counter:hover { opacity: 1; } .pswp--one-slide .pswp__counter { display: none; } @media screen and (max-width: 640px) { #snapic-pswp-tips { display: flex; justify-content: center; position: fixed; bottom: calc(1.5em * 6 + 8em + 1em); left: 50%; -webkit-transform: translate(-50%, 50%); -moz-transform: translate(-50%, 50%); -ms-transform: translate(-50%, 50%); -o-transform: translate(-50%, 50%); transform: translate(-50%, 50%); z-index: 100000; } .scrollIcon { display: flex; justify-content: center; position: relative; width: 5em; height: 8em; } .scrollIcon::after { display: block; content: '下滑关闭'; position: absolute; top: calc(8em + 1em + 1em); color: var(--color-bgimg-text); width: 8em; text-align: center; } i.scroll { display: block; width: 2em; height: 2em; border-radius: 50%; background-color: var(--color-icon-border); -webkit-animation: scrollWheel cubic-bezier(0.7, 0, 0, 1) 3s infinite; -moz-animation: scrollWheel cubic-bezier(0.7, 0, 0, 1) 3s infinite; -ms-animation: scrollWheel cubic-bezier(0.7, 0, 0, 1) 3s infinite; -o-animation: scrollWheel cubic-bezier(0.7, 0, 0, 1) 3s infinite; animation: scrollWheel cubic-bezier(0.7, 0, 0, 1) 3s infinite; } @-webkit-keyframes scrollWheel { 0% { opacity: 0; -webkit-transform: translateY(40%); } 100% { opacity: .9; -webkit-transform: translateY(320%); } } @-moz-keyframes scrollWheel { 0% { opacity: 0; -moz-transform: translateY(40%); } 100% { opacity: .9; -moz-transform: translateY(320%); } } @-ms-keyframes scrollWheel { 0% { opacity: 0; -ms-transform: translateY(40%); } 100% { opacity: .9; -ms-transform: translateY(320%); } } @-o-keyframes scrollWheel { 0% { opacity: 0; -o-transform: translateY(40%); } 100% { opacity: .9; -o-transform: translateY(320%); } } @keyframes scrollWheel { 0% { opacity: 0; transform: translateY(40%); } 100% { opacity: .9; transform: translateY(320%); } } i.scroll::before, i.scroll::after { content: ''; position: absolute; left: 0; width: 100%; height: 100%; border-radius: inherit; background-color: var(--color-icon-border); } i.scroll::before { bottom: 1.5em; animation: scrollBefore cubic-bezier(0.7, 0, 0, 1) 3s infinite; } @-webkit-keyframes scrollBefore { 0% { opacity: 0; -webkit-transform: translateY(calc(100% - 0.5em)); } 100% { opacity: .5; -webkit-transform: translateY(calc(100% - 2em)); } } @-moz-keyframes scrollBefore { 0% { opacity: 0; -moz-transform: translateY(calc(100% - 0.5em)); } 100% { opacity: .5; -moz-transform: translateY(calc(100% - 2em)); } } @-ms-keyframes scrollBefore { 0% { opacity: 0; -ms-transform: translateY(calc(100% - 0.5em)); } 100% { opacity: .5; -ms-transform: translateY(calc(100% - 2em)); } } @-o-keyframes scrollBefore { 0% { opacity: 0; -o-transform: translateY(calc(100% - 0.5em)); } 100% { opacity: .5; -o-transform: translateY(calc(100% - 2em)); } } @keyframes scrollBefore { 0% { opacity: 0; transform: translateY(calc(100% - 0.5em)); } 100% { opacity: .5; transform: translateY(calc(100% - 2em)); } } i.scroll::after { bottom: 2em; animation: scrollAfter cubic-bezier(0.7, 0, 0, 1) 3s infinite; } @-webkit-keyframes scrollAfter { 0% { opacity: 0; -webkit-transform: translateY(calc(100% - 1em)); } 100% { opacity: .3; -webkit-transform: translateY(calc(100% - 3em)); } } @-moz-keyframes scrollAfter { 0% { opacity: 0; -moz-transform: translateY(calc(100% - 1em)); } 100% { opacity: .3; -moz-transform: translateY(calc(100% - 3em)); } } @-ms-keyframes scrollAfter { 0% { opacity: 0; -ms-transform: translateY(calc(100% - 1em)); } 100% { opacity: .3; -ms-transform: translateY(calc(100% - 3em)); } } @-o-keyframes scrollAfter { 0% { opacity: 0; -o-transform: translateY(calc(100% - 1em)); } 100% { opacity: .3; -o-transform: translateY(calc(100% - 3em)); } } @keyframes scrollAfter { 0% { opacity: 0; transform: translateY(calc(100% - 1em)); } 100% { opacity: .3; transform: translateY(calc(100% - 3em)); } } }