@charset "UTF-8"; /* ==================================================
 * Snapic Plus for PagePiling Main Stylesheet, Modified by Lopwon.
 * www.Lopwon.com
 * 2023-10-18
 * ------------------------------------------------------------------- */

html { font-family: sans-serif; font-size: 62.5%; line-height: 1.2; box-sizing: border-box; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { margin: 0; padding: 0; font-weight: normal; line-height: 1.2; text-rendering: optimizeLegibility; word-wrap: break-word; background-color: var(--color-body-background); -webkit-overflow-scrolling: touch; -webkit-text-size-adjust: none; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; overflow: hidden !important; } a { text-decoration: none; line-height: inherit; outline: none; } a:hover, a:focus, a:active { outline-width: 0; } [hidden], .hidden { opacity: 0 !important; } .clamp { text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; } :root { --font-size-s: 1.0em; --font-size-m: 1.2em; --font-size-l: 1.4em; --font-size-xl: 1.6em; --font-size-xxl: 1.8em; --font-size-xxxl: 2.8em; --font-size-xxxxl: 3.0em; } .diyloading { display: block; position: absolute; top: 50%; left: 50%; width: 5em; height: 5em; border-radius: 50%; background-position: 50% 50%; background-repeat: no-repeat; background-size: 88%; -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: 1; } .clickHide { display: block; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; opacity: 1; } .snapic-oops { margin: 1em auto; padding: 0 2em; width: calc(100% - 4em); max-width: 960px; } .error { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; font-size: var(--font-size-m); line-height: 1.4; color: var(--color-error-text); } .error { margin: 0; padding: 1em; height: 100%; min-height: 7em; background-color: var(--color-error-background); -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .grid__item:hover .error { background-color: var(--color-error-background-hover); } .error a { color: var(--color-content-text-a); } .error a:hover { padding-bottom: 0.1em; color: var(--color-content-text-hover); border-bottom: 0.1em dashed var(--color-content-text-a-decoration); } #snapic-gallery-tips { display: flex; justify-content: center; position: fixed; bottom: calc(1.5em * 3 + 8em + 1em); left: 50%; border-radius: 3em; background-color: var(--color-bgimg-author); -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: 999; } .scrollIcon { display: flex; justify-content: center; position: relative; width: 5em; height: 8em; border: 0.5em solid var(--color-icon-border); border-radius: 3em; } .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: 1em; height: 2em; border-radius: 0.5em; 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: 1; -webkit-transform: translateY(120%); } } @-moz-keyframes scrollWheel { 0% { opacity: 0; -moz-transform: translateY(40%); } 100% { opacity: 1; -moz-transform: translateY(120%); } } @-ms-keyframes scrollWheel { 0% { opacity: 0; -ms-transform: translateY(40%); } 100% { opacity: 1; -ms-transform: translateY(120%); } } @-o-keyframes scrollWheel { 0% { opacity: 0; -o-transform: translateY(40%); } 100% { opacity: 1; -o-transform: translateY(120%); } } @keyframes scrollWheel { 0% { opacity: 0; transform: translateY(40%); } 100% { opacity: 1; transform: translateY(120%); } } hr { margin: 1em auto; width: 100%; height: 0; border: none; border-top: 0.01em solid var(--color-markdowon-hr-top); border-bottom: 0.01em solid var(--color-markdowon-hr-bottom); background-color: transparent; clear: both; } blockquote { margin: 2em 0 1em 0; padding-left: 1em; font-size: 0.9em; color: var(--color-markdowon-blockquote-text); border-left: 0.5em solid var(--color-markdowon-blockquote-border); } table { display: flex; flex-direction: column; margin: 1em 0; padding: 0; border: 0.01em solid var(--color-markdowon-hr-bottom); background-color: var(--color-grid-background); } tr { display: flex; } th, td { flex: 1; padding: 1em; text-align: left; border: 0.01em solid var(--color-markdowon-hr-top); } table tr:hover { background-color: var(--color-grid-background-hover); } pre, p code { font-size: 0.9em; color: var(--color-markdowon-code); background-color: var(--color-markdowon-code-background); } p code { margin: 0 0.15em; padding: 0.25em 0.5em; border-radius: 0.15em; } pre { padding: 1em 1.5em; max-height: 30em; font-family: Menlo,Monaco,Consolas,"Courier New",monospace; font-size: 0.9em; border-radius: 0.5em; overflow: auto; } pre code { padding: 0; color: var(--color-markdowon-pre); } code, kbd, samp { font-family: Menlo,Monaco,Consolas,"Courier New",monospace; font-size: 0.9em; } p mark { margin: 0 0.15em; padding: 0.15em 0.25em; border-radius: 0.15em; color: var(--color-black); background-color: var(--color-yellow); } [id^="fnref-"] { padding-top: 3.5em; } #gallery ul { margin: 0; padding: 0; } #gallery li.pp-active { } .pp-easing { -webkit-transition: all 1000ms cubic-bezier(0.550, 0.085, 0.000, 0.990); -moz-transition: all 1000ms cubic-bezier(0.550, 0.085, 0.000, 0.990); -ms-transition: all 1000ms cubic-bezier(0.550, 0.085, 0.000, 0.990); -o-transition: all 1000ms cubic-bezier(0.550, 0.085, 0.000, 0.990); transition: all 1000ms cubic-bezier(0.550, 0.085, 0.000, 0.990); -webkit-transition-timing-function: cubic-bezier(0.550, 0.085, 0.000, 0.990); -moz-transition-timing-function: cubic-bezier(0.550, 0.085, 0.000, 0.990); -ms-transition-timing-function: cubic-bezier(0.550, 0.085, 0.000, 0.990); -o-transition-timing-function: cubic-bezier(0.550, 0.085, 0.000, 0.990); transition-timing-function: cubic-bezier(0.550, 0.085, 0.000, 0.990); } .pp-section { position: absolute; top: 0; left: 0; width: 100%; height: 100%; backface-visibility: hidden; } .pp-section.pp-table { display: table; } .pp-scrollable { height: 100%; overflow-y: scroll; } .pp-tableCell { position: relative; display: flex; justify-content: center; align-items: center; height: 100vh; } .snapic-gallery-meta { display: flex; position: absolute; bottom: -1.5em; left: 0; margin: 1.5em 0; padding: 1.5em; padding-left: 1.5em; padding-right: calc(1.5em + 3em + 0.25em); width: calc(100% - 1.5em * 2 - 3em - 0.25em); height: auto; min-height: calc(1.5em * 2 + 3em); font-size: var(--font-size-l); color: var(--color-bgimg-text); -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; background-image: linear-gradient(to bottom, rgba(var(--color-linear-gradient) / 0%) 0%, rgba(var(--color-linear-gradient) / 10%) 10%, rgba(var(--color-linear-gradient) / 20%) 20%, rgba(var(--color-linear-gradient) / 30%) 30%, rgba(var(--color-linear-gradient) / 40%) 40%, rgba(var(--color-linear-gradient) / 50%) 50%, rgba(var(--color-linear-gradient) / 60%) 60%, rgba(var(--color-linear-gradient) / 70%) 70%, rgba(var(--color-linear-gradient) / 80%) 80%, rgba(var(--color-linear-gradient) / 90%) 90%, rgba(var(--color-linear-gradient) / 100%) 100% ); animation-delay: 0.7s; animation: fadeInUp 1s ease-in-out forwards; -webkit-transform: translateY(10px); -moz-transform: translateY(10px); -ms-transform: translateY(10px); -o-transform: translateY(10px); transform: translateY(10px); opacity: 0.7; } .snapic-gallery-meta:hover { opacity: 1; } .snapic-gallery-meta span { margin-top: auto; padding: 0.5em 0.75em; } @-webkit-keyframes fadeInUp { to { -webkit-transform: translateY(0); } } @-moz-keyframes fadeInUp { to { -moz-transform: translateY(0); } } @-ms-keyframes fadeInUp { to { -ms-transform: translateY(0); } } @-o-keyframes fadeInUp { to { -o-transform: translateY(0); } } @keyframes fadeInUp { to { transform: translateY(0); } } .snapic-gallery-num { flex-shrink: 0; margin-bottom: 0.25em; font-size: 87.5%; border-radius: 2em; background-color: var(--color-body-background); } .snapic-gallery-desc { max-height: calc(100vh / 3 - 1.5em * 3 + 0.5em); overflow-x: hidden; overflow-y: auto; } .snapic-gallery-item img { width: 100%; height: 100%; max-width: 100vw; max-height: 100vh; object-fit: cover; background-color: var(--color-body-background); -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .snapic-gallery-item img.contain { object-fit: contain; } .snapic-tool { display: flex; flex-direction: column; align-items: center; position: fixed; right: 1.5em; bottom: 3em; width: calc(3em + 0.25em * 2); min-height: calc(3em + 0.25em * 2 + 1em); z-index: 99; } .snapic-home, .snapic-info, .snapic-guide, .snapic-mode { margin-top: 1em; } .snapic-home a, .snapic-info a, .snapic-guide a, .snapic-mode a { display: block; padding: 0; width: 3em; height: 3em; border: 0.25em solid var(--color-icon-border); border-radius: 50%; background-color: var(--color-icon-background); -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; opacity: .3; } .home, .info, .guide, .mode { display: block; width: 3em; height: 3em; background-size: 2em; background-position: center; background-repeat: no-repeat; filter: var(--color-svg-filter); } .home { background-image: url('../img/icon/home.svg'); } .info { background-image: url('../img/icon/info.svg'); background-size: 1.5em; } .guide { background-image: url('../img/icon/guide.svg'); } .mode.cover { background-image: url('../img/icon/contain.svg'); } .mode.contain { background-image: url('../img/icon/cover.svg'); } .snapic-home a:hover, .snapic-info a:hover, .snapic-guide a:hover, .snapic-mode a:hover { -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; opacity: 1; } .pushbar_overlay { background-color: var(--color-body-background) !important; } aside.snapic-tool-aside-bottom { margin: 0 auto; padding: 0; width: 100% !important; border-top: 1.5em solid var(--color-aside-border); border-image: linear-gradient(to right, var(--color-body-background), var(--color-aside-border), var(--color-body-background)); border-image-slice: 1; background-color: var(--color-aside-background); } .thumbnail { min-height: 10em !important; max-height: calc(100vh / 3) !important; } .snapic-gallery-info { display: flex; flex-direction: column; margin: 2.5em auto; padding: 0 2em; width: auto; height: calc(85vh - 5em); max-width: 960px; } .snapic-gallery-guide { display: flex; justify-content: center; flex-wrap: wrap; margin: 2em auto; padding: 0 2em; height: auto; max-width: calc(1920px - 4em); } .snapic-gallery-guide ul { display: flex; justify-content: center; flex-wrap: wrap; margin: 0; padding: 0; } .snapic-gallery-guide li a, .snapic-gallery-guide li.pp-active a { display: block; padding: 0.5em; } .snapic-gallery-guide li { display: flex; align-items: center; justify-content: center; margin: 0.5em; padding: 0; border-radius: 0.25em; background-color: var(--color-author-background-hover); } .snapic-gallery-guide li.pp-active { background-color: var(--color-author-text-hover); } .snapic-gallery-guide li:hover { background: var(--color-author-background); } .snapic-gallery-guide li img { display: block; width: 5em; height: 5em; object-fit: cover; } #pp-nav { position: fixed; top: 50%; margin-top: -32px; opacity: 1; z-index: 99; } #pp-nav.top, #pp-nav.left { left: calc(1.5em + 0.35em); } #pp-nav.bottom, #pp-nav.right { right: calc(1.5em + 0.35em); } #pp-nav ul { margin: 0; padding: 0; } #pp-nav li { display: block; position: relative; margin: 7px; width: 14px; height: 13px; } #pp-nav li a { display: block; position: relative; width: 100%; height: 100%; text-decoration: none; cursor: pointer; } #pp-nav span { position: absolute; top: 2px; left: 2px; width: 8px; height: 8px; border: 1px solid; border-radius: 50%; background-color: var(--color-bgimg-author); } #pp-nav span:hover { background-color: var(--color-bgimg-author-hover); } #pp-nav li .pp-active span { background-color: var(--color-loading-loading); } .pp-tooltip { position: absolute; top: -2px; max-width: 20em; font-size: 1.4em; white-space: nowrap; } .pp-tooltip.top, .pp-tooltip.left { left: 2em; } .pp-tooltip.bottom, .pp-tooltip.right { right: 2em; } .snapic-cc { display: none; position: absolute; padding: 0.5em 0.7em; font-size: var(--font-size-m); color: var(--color-cc-text); white-space: nowrap; border-radius: 2em; background-color: var(--color-cc-background); -webkit-box-shadow: 0 0 1.5em -0.5em var(--color-cc-background-shadow); -moz-box-shadow: 0 0 1.5em -0.5em var(--color-cc-background-shadow); -ms-box-shadow: 0 0 1.5em -0.5em var(--color-cc-background-shadow); -o-box-shadow: 0 0 1.5em -0.5em var(--color-cc-background-shadow); box-shadow: 0 0 1.5em -0.5em var(--color-cc-background-shadow); z-index: 2147483647; } @media screen and (min-width: 1920px) { .snapic-gallery-num { margin-left: calc(50% - (1920px / 2) + 4em); } .snapic-tool { right: calc(50% - (1920px / 2) + 2em); } } @media screen and (max-width: 640px) { #info-aside { height: calc(85vh - 60px); } #snapic-gallery-tips { bottom: calc(1.5em * 6 + 8em + 1em); background-color: transparent; } .scrollIcon { border: 0; } .scrollIcon::after { content: '上滑翻页'; } i.scroll { width: 2em; height: 2em; border-radius: 50%; } @-webkit-keyframes scrollWheel { 0% { opacity: 0; -webkit-transform: translateY(320%); } 100% { opacity: .9; -webkit-transform: translateY(40%); } } @-moz-keyframes scrollWheel { 0% { opacity: 0; -moz-transform: translateY(320%); } 100% { opacity: .9; -moz-transform: translateY(40%); } } @-ms-keyframes scrollWheel { 0% { opacity: 0; -ms-transform: translateY(320%); } 100% { opacity: .9; -ms-transform: translateY(40%); } } @-o-keyframes scrollWheel { 0% { opacity: 0; -o-transform: translateY(320%); } 100% { opacity: .9; -o-transform: translateY(40%); } } @keyframes scrollWheel { 0% { opacity: 0; transform: translateY(320%); } 100% { opacity: .9; transform: translateY(40%); } } 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 { top: 0; animation: scrollBefore cubic-bezier(0.7, 0, 0, 1) 3s infinite; } @-webkit-keyframes scrollBefore { 0% { opacity: 0; -webkit-transform: translateY(calc(100% - 2em)); } 100% { opacity: .5; -webkit-transform: translateY(calc(100% - 0.5em)); } } @-moz-keyframes scrollBefore { 0% { opacity: 0; -moz-transform: translateY(calc(100% - 2em)); } 100% { opacity: .5; -moz-transform: translateY(calc(100% - 0.5em)); } } @-ms-keyframes scrollBefore { 0% { opacity: 0; -ms-transform: translateY(calc(100% - 2em)); } 100% { opacity: .5; -ms-transform: translateY(calc(100% - 0.5em)); } } @-o-keyframes scrollBefore { 0% { opacity: 0; -o-transform: translateY(calc(100% - 2em)); } 100% { opacity: .5; -o-transform: translateY(calc(100% - 0.5em)); } } @keyframes scrollBefore { 0% { opacity: 0; transform: translateY(calc(100% - 2em)); } 100% { opacity: .5; transform: translateY(calc(100% - 0.5em)); } } i.scroll::after { top: 2em; animation: scrollAfter cubic-bezier(0.7, 0, 0, 1) 3s infinite; } @-webkit-keyframes scrollAfter { 0% { opacity: 0; -webkit-transform: translateY(calc(100% - 3em)); } 100% { opacity: .3; -webkit-transform: translateY(calc(100% - 1em)); } } @-moz-keyframes scrollAfter { 0% { opacity: 0; -moz-transform: translateY(calc(100% - 3em)); } 100% { opacity: .3; -moz-transform: translateY(calc(100% - 1em)); } } @-ms-keyframes scrollAfter { 0% { opacity: 0; -ms-transform: translateY(calc(100% - 3em)); } 100% { opacity: .3; -ms-transform: translateY(calc(100% - 1em)); } } @-o-keyframes scrollAfter { 0% { opacity: 0; -o-transform: translateY(calc(100% - 3em)); } 100% { opacity: .3; -o-transform: translateY(calc(100% - 1em)); } } @keyframes scrollAfter { 0% { opacity: 0; transform: translateY(calc(100% - 3em)); } 100% { opacity: .3; transform: translateY(calc(100% - 1em)); } } }