/* =================================================================== * Lopwon Main Stylesheet * Template Ver. 4.0.0 * 09-15-2022 * ------------------------------------------------------------------ * * # html * # loading * # bgimg * # masonry * ## grid * ## item * ## post * ## footer * ## CC & Exif * ## navigator * ## search & top * # mobile * ## min-width: 1920px * ## max-width: 768px * ## max-width: 640px * ## max-width: 480px * * ------------------------------------------------------------------- */ @charset "UTF-8"; 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-x: hidden; } a { text-decoration: none; line-height: inherit; outline: none; } a:hover, a:focus, a:active { outline-width: 0; } [hidden] { display: none; } .clamp { text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; } .snapic-overlay { display: flex; justify-content: center; align-items: center; position: fixed; top: 0; left: 0; width: 100%; height: 100%; color: yellow; background-color: rgba(0 0 0 / 75%); z-index: 99999; } :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; } .js .loading::before, .js .loading::after, .js .grid--loading::before, .js .grid--loading::after { content: ''; position: fixed; z-index: 9999; } .js .loading::before, .js .grid--loading::before { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--color-loading-background); } .js .loading::after, .js .grid--loading::after { position: absolute; top: 50%; left: 50%; width: 5em; height: 5em; margin: -2.5em 0 0 -2.5em; border: 0.5em solid var(--color-loading-load); border-bottom-color: var(--color-loading-loading); border-radius: 50%; -webkit-animation: animLoader 0.7s linear infinite forwards; -moz-animation: animLoader 0.7s linear infinite forwards; -o-animation: animLoader 0.7s linear infinite forwards; -ms-animation: animLoader 0.7s linear infinite forwards; animation: animLoader 0.7s linear infinite forwards; } @-webkit-keyframes animLoader { to { -webkit-transform: rotate(360deg); } } @-moz-keyframes animLoader { to { -moz-transform: rotate(360deg); } } @-o-keyframes animLoader { to { -o-transform: rotate(360deg); } } @-ms-keyframes animLoader { to { -ms-transform: rotate(360deg); } } @keyframes animLoader { to { transform: rotate(360deg); } } .header { position: relative; margin-bottom: 0.5em; width: 100%; height: 100vh; min-height: 480px; max-height: 1920px; overflow: hidden; } .header .snapic-bgimg { width: 100%; height: 100%; background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; } .snapic-bgimg-info { display: flex; flex-direction: column; align-items: center; position: absolute; bottom: 0; left: 50%; width: 100%; max-width: 50vw; -webkit-transform: translate(-50%, 0%); -moz-transform: translate(-50%, 0%); -ms-transform: translate(-50%, 0%); -o-transform: translate(-50%, 0%); transform: translate(-50%, 0%); z-index: 1; } .snapic-bgimg-info div { margin: 1em 0; } .snapic-bgimg-author { padding: 0.25em; border: 0.25em solid var(--color-bgimg-author); border-radius: 50%; -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-bgimg-author:hover { border: 0.25em solid var(--color-bgimg-author-hover); -webkit-transform: scale(.97); -moz-transform: scale(.97); -ms-transform: scale(.97); -o-transform: scale(.97); transform: scale(.97); } .snapic-bgimg-author img { display: block; width: 4.8em; height: 4.8em; border-radius: 50%; } .header .snapic-bgimg-description { font-size: var(--font-size-xl); color: var(--color-bgimg-text); } .header .snapic-bgimg-open { width: 3em; height: 3em; background-position: 50% 50%; background-repeat: no-repeat; background-size: 3em; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAABFklEQVR4Ae3ZwcnCQAAF4b+7/2Ixgg1sEWkiZaWSJwEDIksQHHkg82AI7CXLd8glf0nsJBEEEkgggQQSSCCBTCCBBBJIIIEEEsgEEkgggQQSSKD/62V/jiTbo2U/a5bk9nSfsZ+1gA6c140izvQ+TaAt840CzpL5tj4Qj0Th1IFGzjeKOMdG/yNdQkqyvvPuKhCPxOL0gXgkFKcPxCOhOH0gHgnF6QPxSChOG+gTpOX7OH0gFInH6QOhSDxOHwhF4nH6QCTSyuP0gXAkFqcPhCOxOH0gFInH6QOhSDxOHwhF4nH6QCgSj9MHopEmOAJNfh8BOCDQryeQQAIJJJBAAplAAgkkkEACCSSQCSSQQAIJJJBAAtkdO2a1bqG00tEAAAAASUVORK5CYII="); -webkit-animation: open 1s ease-in-out 1s infinite alternate; -moz-animation: open 1s ease-in-out 1s infinite alternate; -ms-animation: open 1s ease-in-out 1s infinite alternate; -o-animation: open 1s ease-in-out 1s infinite alternate; animation: open 1s ease-in-out 1s infinite alternate; z-index: 1; cursor: pointer; } .header .snapic-bgimg-open:hover { opacity: .7; } @-webkit-keyframes open { to { -webkit-transform: translate(0, -1em); } } @-moz-keyframes open { to { -moz-transform: translate(0, -1em); } } @-o-keyframes open { to { -o-transform: translate(0, -1em); } } @-ms-keyframes open { to { -ms-transform: translate(0, -1em); } } @keyframes open { to { transform: translate(0, -1em); } } .snapic-shaders-bottom { position: absolute; bottom: 0; left: 0; width: 100%; height: 33.33333%; background-image: linear-gradient(to bottom, rgba(0 0 0 / 0%) 0%, rgba(0 0 0 / 25%) 25%, rgba(0 0 0 / 50%) 50%, rgba(0 0 0 / 75%) 75%, rgba(0 0 0 / 100%) 100%); z-index: 0; } #main { display: flex; flex-wrap: wrap; } .content { flex: 1; max-width: 1920px; margin: 0 auto; } .masonry { margin: 0.5em auto 1em auto; } .grid { position: relative; display: block; margin: 0 auto; height: 100% !important; z-index: 2; } .grid--hidden { position: fixed !important; top: 0; left: 0; width: 100%; pointer-events: none; opacity: 0; z-index: 1; } .grid__deco { position: absolute; top: 0; left: 0; pointer-events: none; } .grid__deco path { fill: none; stroke: var(--color-loading-loading); stroke-width: 0.25em; } .grid__reveal { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; background-color: var(--color-loading-background); z-index: 999; } .grid .grid__item, .grid .grid__sizer { background-color: var(--color-grid-background); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; -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; overflow: hidden; } .grid .grid__item:hover, .grid .grid__sizer:hover { background-color: var(--color-grid-background-hover); } .grid__link { display: block; position: relative; } .grid__img { display: block; width: 100%; -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; cursor: pointer; } .grid__img:hover { -webkit-transform: scale(.97); -moz-transform: scale(.97); -ms-transform: scale(.97); -o-transform: scale(.97); transform: scale(.97); } .snapic-grid-category { position: absolute !important; top: 1em; right: 1em; max-width: 50%; padding: 0.25em 0.5em; font-size: var(--font-size-l); text-align: right; border-radius: 0.25em; background-color: var(--color-category-background); opacity: 0; z-index: 1; } .snapic-grid-category, .snapic-grid-category a { color: var(--color-category-text); } .snapic-grid-category:hover { background-color: var(--color-category-background-hover); opacity: 1; } .grid__item:hover .snapic-grid-category { -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; } .snapic-grid-thumb { position: absolute !important; top: 1em; left: 1em; padding: 0.25em 0.5em; font-size: var(--font-size-l); color: var(--color-thumb-text); border-radius: 1em; background-color: var(--color-thumb-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; cursor: default; z-index: 1; } .snapic-grid-thumb:hover { background-color: var(--color-thumb-background-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; } .snapic-grid-description, .snapic-grid-poster { padding: 0 1em; } .snapic-grid-description h1, .snapic-grid-description h2, .snapic-grid-description p, .snapic-grid-poster, .snapic-grid-poster p { margin: 1em 0; } .snapic-grid-description hr { margin: 1em 0; 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; } .snapic-grid-meta { display: flex; justify-content: space-between; align-items: center; font-size: var(--font-size-m); } .snapic-grid-time { color: var(--color-time-text); } .snapic-grid-comments a { color: var(--color-comments-text); } .snapic-grid-comments a:hover { color: var(--color-comments-text-hover) !important; } .grid__item:hover .snapic-grid-time, .grid__item:hover .snapic-grid-comments a { color: var(--color-meta-hover); } .snapic-grid-title { font-size: var(--font-size-xl); font-weight: normal; } .snapic-grid-title a:hover { color: var(--color-content-text-a-hover) !important; } .snapic-grid-excerpt, .snapic-grid-poster { font-size: var(--font-size-l); line-height: 1.4; text-align: justify; } .snapic-grid-title a, .snapic-grid-excerpt, .snapic-grid-poster { color: var(--color-content-text); } .grid__item:hover .snapic-grid-title a, .grid__item:hover .snapic-grid-excerpt, .grid__item:hover .snapic-grid-poster { color: var(--color-content-text-hover); -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -ms-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out; } .snapic-grid-excerpt a, .snapic-grid-poster a { color: var(--color-content-text-a); } .snapic-grid-excerpt a:hover, .snapic-grid-poster a:hover { padding-bottom: 0.1em; color: var(--color-content-text-hover); border-bottom: 0.1em dashed var(--color-content-text-a-decoration); } .poster { display: block; text-align: center; } .snapic-grid-poster { display: inline-block; text-align: left; } .snapic-grid-poster img { margin: 0.25em 0; width: 100%; } .error { font-size: var(--font-size-m); line-height: 1.4; color: var(--color-error-text); } .error, .plaintext { display: flex; align-items: center; 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, .grid__item:hover .plaintext { background-color: var(--color-error-background-hover); } .plaintext { display: block; color: var(--color-content-text); text-align: center; min-height: auto; } .grid__item:hover .plaintext { color: var(--color-content-text-hover); } .plaintext span { display: inline-block; text-align: left; } .plaintext h1, .plaintext h2 { margin: 0.35em 0; } .fancybox-opened .fancybox-skin { min-height: 25vh !important; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; -ms-box-shadow: none !important; -o-box-shadow: none !important; box-shadow: none !important; } .fancybox-skin { background: var(--color-fancybox-background); } .fancybox-type-image .fancybox-close { top: 0; right: 0; } .fancybox-type-iframe .fancybox-close, .fancybox-type-inline .fancybox-close { top: 10px; right: calc(50% - 18px); } .footer { display: flex; flex-direction: column; padding: 1.8em 0; } .footer span, .copyright a, .powered a, .miit a, .beian a { color: var(--color-footer-text); } .grid__item:hover .copyright a, .grid__item:hover .powered a { color: var(--color-footer-text-hover); -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -ms-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out; } .copyright a:hover, .powered a:hover, .miit a:hover, .beian a:hover { color: var(--color-footer-text-a-hover) !important; } .footer span { margin: 0.5em 0; padding: 0 1em; width: calc(100% - 2em); -webkit-line-clamp: 1; line-clamp: 1; } .footer span:first-child { margin-bottom: 1.5em; } .footer span:last-child { margin-top: 1em; } .copyright a, .powered a { font-size: var(--font-size-l); } .miit a, .beian a { font-size: var(--font-size-s); } .snapic-cc { display: none; position: absolute; padding: 0.5em 0.7em; 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: 99999; } .snapic-exif-info { display: flex; flex-wrap: wrap; align-items: flex-end; position: absolute; bottom: 0; left: 0; padding: 1.5em 1em; width: calc(100% - 2em); height: auto; min-height: 1em; font-size: var(--font-size-s); color: var(--color-exif-text); background-image: linear-gradient(to bottom, rgba(0 0 0 / 0%)0%, rgba(0 0 0 / 25%)25%, rgba(0 0 0 / 50%) 50%, rgba(0 0 0 / 75%) 75%, rgba(0 0 0 / 100%) 100%); -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: 0; z-index: 0; } .grid__link:hover .snapic-exif-info { -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; } .snapic-exif-info span { margin: 0.25em 2em 0 0; } .about .snapic-exif-info { display: none; } .page-navigator { display: flex; margin: 1.5em 0; padding: 0; list-style: none; align-items: center; justify-content: center; font-size: var(--font-size-m); } .page-navigator li { margin: 0 0.25em; } .page-navigator a, .page-navigator span { display: flex; align-items: center; justify-content: center; padding: 0.5em; border-radius: 0.25em; width: auto; min-width: 1.5em; height: 1.5em; color: var(--color-navigator-text); } .grid__item:hover .page-navigator a, .grid__item:hover .page-navigator span { color: var(--color-navigator-text-hover); -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -ms-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out; } .page-navigator a:hover { background-color: var(--color-navigator-btn-hover); color: var(--color-navigator-btn-a-hover) !important; } .page-navigator .prev a { background-position: 50% 50%; background-repeat: no-repeat; background-size: 2em; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABIBAMAAACnw650AAAAFVBMVEVHcEz///////////////////////+3ygHaAAAABnRSTlMAgKnhlHObIjSDAAAAaklEQVRIx2NgGAWjgALAaCxAWJFYWiJhg9LSkokwiLAioEFpKUQYlCZAhEGJowZRxyAHasUa1QxSIKTILC0tiYEqioiyDuTwUaMGxKgUBmqkPBKMEiDGqFSqFIfEFaxEFdHEFfajYBRgAAAtKjnNh/YM0wAAAABJRU5ErkJggg=="); background-color: var(--color-navigator-prev-background); } .page-navigator .prev a:hover { background-color: var(--color-navigator-prev-background-hover); } .page-navigator .current a, .grid__item:hover .current a { color: var(--color-navigator-current-text); } .page-navigator .next a { background-position: 50% 50%; background-repeat: no-repeat; background-size: 2em; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABIBAMAAACnw650AAAAFVBMVEVHcEz///////////////////////+3ygHaAAAABnRSTlMAgKnhlHObIjSDAAAAbElEQVRIx2NgGAWjgHTAaCxAWJFYWiJhRWZpaQLEKCJslFsaEUYxphFjlNioUdQ1iiWNajFIRaOYiDJKLS0tmSqKiLJOjQiHjxpEJYOISSUs1DKIqOwURky6Jao4JKpgJaqIJqqwHwWjADcAALCFOicLBA7VAAAAAElFTkSuQmCC"); background-color: var(--color-navigator-next-background); } .page-navigator .next a:hover { border-radius: 50%; } .tags { display: flex; flex-wrap: wrap; margin: 2em auto; width: 100%; max-width: 960px; } .tags li { margin: 0.5em 0; padding: 0.5em 0; list-style: none; } .tags li a { margin: 0.25em; padding: 0.5em; border-radius: 2em; font-size: 1.2em; color: var(--color-tags-text); background-color: var(--color-tags-background); } .tags li a:hover { color: var(--color-tags-text-hover); background-color: var(--color-tags-background-hover); } .search, #gotop { display: none; position: fixed; right: 2em; border: 0.25em solid var(--color-icon-border); border-radius: 100%; background-color: var(--color-icon-background); opacity: .3; } .search { bottom: 8em; } #gotop { bottom: 3.2em; } .search a, #gotop a { display: block; width: 100%; height: 100%; } #snapic-search { display: none; margin: 0 auto; padding: 2em 3em; width: auto; height: auto; max-width: 1170px; background-color: var(--color-search-background); } #search { display: flex; align-items: center; justify-content: space-between; margin: 0 auto; width: 100%; height: 25em; max-width: 50em; } #search input { margin-right: 1em; padding: 0.5em; width: calc(100% - 5em); font-size: var(--font-size-xl); line-height: 1.4; color: var(--color-search-input); text-align: center; outline: none; border: none; border-radius: 2em; background-color: var(--color-search-input-background); } #search input:focus { color: var(--color-search-input-focus); background-color: var(--color-search-input-background-focus); } .search, #search button, #gotop { padding: 0; width: 3em; height: 3em; background-position: 50% 50%; background-repeat: no-repeat; background-size: 2em; -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; cursor: pointer; z-index: 99; } .search, #search button { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAMAAABiM0N1AAAANlBMVEVHcEz///////////////////////////////////////////////////////////////////+GUsxbAAAAEXRSTlMAfTaeR7+P7AnOJRataPlW3hBKbzUAAAHvSURBVFjD7ZfrcoQgDIXlEi5y9f1ftrsgVVshcbud6UzNT2U/4jkJZKfpjjv+WZg5CA9WZwtCJWdexHAGcdmF9mF+BaOW76GDu4hxTC+nYdO1dOzSDX8hqbSlY4UKKTHld4/ISoWmsWWyWWXmJHJ7zK/lA1+UNU7lKznxlcPOPPDrHoSSmisnhvPXgkoy1S/ddZlVksJAdV3k2IpFIh9WDIvDqqtfB2OQ6Oq8i6r4cDNe3cV8LWlbgyoUMCFL3nGgkgF0q11KCpNa4WeDReQOFGOfUc4qzcffngnHhIyD4m++Ckof5bEpQJOoudJfaUnmb7l3X2u0Yg9q+t8HWUKjkdQki+2QLWvCZPsTUrCEkz0hlZ0Wotplx9xP3elxeRzr0Q8WeFqzlVYb2hsoJ+160wy1rJcallIgXEh1zbgC6lWMmGvq7T7S2+FLtgoYyLRexdaRDog+ydSJUEtiG/UOSg7LQqu1h3MryX/vABfa3EbIaBsgo+AHIYyE3XxLIc2fPwAl5/KJbk4KjpMyhdQGs2IPeCHA5o0gNJ1kVHc6tnKSF0iThFOMVs+CvkQyycZzzFXSwyUFusGizp5t7dVIxIn7UQohMOG9YoEfC3QlZTKpL+JKmt9Fgp//v+SltvT0JpKY3kECLdx0xx1/Mj4AgrIzJYQ4A3wAAAAASUVORK5CYII="); } #gotop { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABIBAMAAACnw650AAAAFVBMVEVHcEz///////////////////////+3ygHaAAAABnRSTlMAgKnhlHObIjSDAAAAl0lEQVRIx+3UvQmAQAwF4EQdQDhIbWWt4ABWLuAEJ3L7j6CHgt5fYmeTV748vkoPQKPR/B8zyht0rhVH5Jz9AMkU+ZH9AEkUXSMrQVsvUB7qKp7y0A7AUx6aAVjqhnjqhlgKn1OZoudSpPB9KFH07gsUhnWeorDNUhiXS4aq4645iyEdRfqSjtLvP/dHmClu1lHfF43mvxymGzoYyGZhAgAAAABJRU5ErkJggg=="); } #search button { border: 0; border-radius: 50%; background-color: var(--color-search-button); } #search button:hover { border: 0.25em solid var(--color-icon-border); -webkit-transform: scale(.97); -moz-transform: scale(.97); -ms-transform: scale(.97); -o-transform: scale(.97); transform: scale(.97); } .search:hover, #gotop: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; } @media screen and (min-width: 1920px) { .search, #gotop { right: calc(50% - (1920px / 2) + 2em); } } @media screen and (max-width: 768px) { #main { display: block; } .content { max-width: 100vw; } .grid__img:hover { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } } @media screen and (max-width: 640px) { .header { height: calc(100vh - 60px); } .snapic-bgimg-info { max-width: 75vw; } } @media screen and (max-width: 480px) { .snapic-grid-description hr { border-top: 0.05em solid var(--color-markdowon-hr-top); border-bottom: 0.05em solid var(--color-markdowon-hr-bottom); } .fancybox-nav span { visibility: visible !important; opacity: .3; } .fancybox-next span { -webkit-animation: lr 1s ease-in-out 1s infinite alternate; -moz-animation: lr 1s ease-in-out 1s infinite alternate; -ms-animation: lr 1s ease-in-out 1s infinite alternate; -o-animation: lr 1s ease-in-out 1s infinite alternate; animation: lr 1s ease-in-out 1s infinite alternate; } @keyframes lr { from { margin-right: 0; } to { margin-right: -12px; } } @keyframes lr { from { transform: translate(0, 0); } to { transform: translate(6px, 0); } } @-webkit-keyframes lr { from { margin-right: 0; } to { margin-right: -12px; } } @-webkit-keyframes lr { from { transform: translate(0, 0); } to { transform: translate(6px, 0); } } @-o-keyframes lr { from { margin-right: 0; } to { margin-right: -12px; } } @-o-keyframes lr { from { transform: translate(0, 0); } to { transform: translate(6px, 0); } } @-moz-keyframes lr { from { margin-right: 0; } to { margin-right: -12px; } } @-moz-keyframes lr { from { transform: translate(0, 0); } to { transform: translate(6px, 0); } } }