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

@import url('snapic.font.face.css'); 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; overflow-y: auto; } a { text-decoration: none; line-height: inherit; outline: none; } a:hover, a:focus, a:active { outline-width: 0; } [hidden], .hidden { display: none !important; } .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: 999999; } #snapic-hello { display: none; position: fixed; top: 33.33333%; left: 50%; padding: 1em; width: 75vw; max-width: 30em; max-height: 50vh; font-size: var(--font-size-xxl); text-align: center; -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; } #snapic-hello a { display: block; } #snapic-hello span { padding: 1em 1.25em; color: white; border-radius: 3em; background-color: rgba(2 203 171 / 75%); } #snapic-hello img { -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-hello img:hover { -webkit-transform: scale(.97); -moz-transform: scale(.97); -ms-transform: scale(.97); -o-transform: scale(.97); transform: scale(.97); } :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; } .js .loading::before, .js .loading::after, .js .grid--loading::before, .js .grid--loading::after, #pushbar_loading::before, #pushbar_loading::after { content: ''; position: fixed; z-index: 999; } .js .loading::before, .js .grid--loading::before, #pushbar_loading::before { position: fixed; top: 0; left: 0; width: 100%; height: 100%; max-height: 100vh; background-color: var(--color-loading-background); } .js .loading::after, .js .grid--loading::after, #pushbar_loading::after { position: fixed; 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-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); } } @-ms-keyframes animLoader { to { -ms-transform: rotate(360deg); } } @-o-keyframes animLoader { to { -o-transform: rotate(360deg); } } @keyframes animLoader { to { transform: rotate(360deg); } } .grid-aside .loading { display: flex; align-items: center; justify-content: center; position: absolute; top: 0; left: 0; height: 100%; width: 100%; color: white; background-color: transparent; z-index: 0; } .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; } .header { position: relative; width: 100%; height: 100vh; min-height: 480px; max-height: 1920px; background-color: var(--color-grid-background); 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: 5em; 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 { display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0; width: 5.2em; height: 5.2em; 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; z-index: 1; } .snapic-bgimg-author:hover { border: 0.25em solid var(--color-bgimg-author-hover); } .snapic-bgimg-author img { display: block; width: 4.8em; height: 4.8em; border-radius: 50%; } .header .snapic-bgimg-description { position: relative; font-size: var(--font-size-l); color: var(--color-bgimg-text); line-height: 1.4; text-align: center; } .header .snapic-bgimg-description p { margin: 0.25em 0; } .header .snapic-bgimg-description a { color: var(--color-content-text-a); } .header .snapic-bgimg-description a:hover { padding-bottom: 0.1em; color: var(--color-content-text-hover); border-bottom: 0.1em dashed var(--color-content-text-a-decoration); } .snapic-bgimg-digg-title { display: block; } .snapic-bgimg-digg-more { display: inline-block; margin: 1em 0; margin-left: calc(5.2em / 2 + 0.25em - 4.5em / 2); padding: 0.5em 0.75em; width: auto; font-size: 87.5%; color: var(--color-bgimg-more-text) !important; border-radius: 2em; background-color: var(--color-bgimg-more-background); } .snapic-bgimg-description .snapic-bgimg-digg-more { margin-left: 0; } .snapic-bgimg-digg-more:hover { border-bottom: 0 !important; padding-bottom: 0.5em !important; color: var(--color-bgimg-more-text-hover) !important; background-color: var(--color-bgimg-more-background-hover); } .header .snapic-bgimg-open { position: absolute; bottom: -5em; width: 3em; height: 3em; background-position: center; background-repeat: no-repeat; background-size: 3em; background-image: url('../img/icon/open.svg'); filter: var(--color-svg-filter); -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); } } @-ms-keyframes open { to { -ms-transform: translate(0, -1em); } } @-o-keyframes open { to { -o-transform: translate(0, -1em); } } @keyframes open { to { transform: translate(0, -1em); } } .snapic-shaders-left { position: absolute; bottom: 0; left: 0; width: 50%; height: 100%; background-image: linear-gradient(to left, 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% ); z-index: 0; } .snapic-shaders-bottom { position: absolute; bottom: 0; left: 0; width: 100%; height: 33.33333%; 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% ); z-index: 0; } .snapic-bgimg-effect { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; z-index: 0; } .snapic-bgimg-about { display: flex; flex-direction: column; justify-content: flex-end; position: absolute; bottom: 0; left: calc((100% - 92.5%) / 2); width: 100%; height: 100%; max-width: 92.5%; max-height: 85vh; z-index: 1; } .snapic-bgimg-about div { margin: 1em 0; } .snapic-bgimg-about-author { display: flex; align-items: center; } .snapic-bgimg-about .snapic-bgimg-author { margin-right: 2em; } .snapic-bgimg-about-name { font-size: var(--font-size-xxxxl); font-weight: bold; color: var(--color-bgimg-text); } .snapic-bgimg-about-description { width: 50%; font-size: var(--font-size-l); line-height: 1.4; color: var(--color-bgimg-text); } .snapic-bgimg-about-more { display: inline-block; margin: 0 0.5em; padding: 0.5em 0.75em; width: auto; font-size: 87.5%; color: var(--color-bgimg-more-text) !important; border-radius: 2em; background-color: var(--color-bgimg-more-background); } .snapic-bgimg-about-more:hover { border-bottom: 0 !important; padding-bottom: 0.5em !important; color: var(--color-bgimg-more-text-hover) !important; background-color: var(--color-bgimg-more-background-hover); } .snapic-bgimg-about-skill { display: flex; flex-wrap: wrap; width: 75%; margin-top: auto !important; font-size: var(--font-size-s); color: var(--color-bgimg-text); } .snapic-bgimg-about-skill .about-skill-item { display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin: 0.25em; padding: 1em; max-width: 33.33333%; border-radius: 0.5em; background-color: var(--color-grid-background); opacity: .7; } .snapic-bgimg-about-skill .about-skill-item:hover { opacity: 1; } .snapic-bgimg-about-skill .about-skill-item span { -webkit-line-clamp: 1; line-clamp: 1; } .snapic-bgimg-about-sns { display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; margin-bottom: 2em !important; margin-right: calc((5.2em / 2 + 0.25em - 3em / 2) * 2 + 3em) !important; } .snapic-bgimg-about-sns { display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; margin-bottom: 2em !important; width: 75%; } .snapic-bgimg-about-sns a { display: flex; align-items: center; justify-content: center; margin: 0.5em; width: auto; height: 3em; max-width: calc(20% - 1em); min-width: 3em; font-size: var(--font-size-l); color: var(--color-post-text-a); } .snapic-bgimg-about-sns a:hover { color: var(--color-post-text); border-bottom: 0; } .snapic-bgimg-about-sns a span { -webkit-line-clamp: 1; line-clamp: 1; } .snapic-bgimg-about-sns a span:not(.clamp) { display: block; width: 2em; height: 2em; background-size: 2em; background-position: center; background-repeat: no-repeat; filter: var(--color-svg-filter); opacity: .7; } .snapic-bgimg-about-sns a:hover span:not(.clamp) { opacity: 1; } .snapic-bgimg-about .snapic-bgimg-open { bottom: 1em; left: auto !important; right: 0; margin-left: auto !important; margin-right: calc(5.2em / 2 + 0.25em - 3em / 2); } .snapic-bgimg-about, .snapic-bgimg-info { animation-delay: 0.3s; animation: fadeInUp 1s ease-in-out forwards; opacity: 0; } @-webkit-keyframes fadeInUp { to { opacity: 1; } } @-moz-keyframes fadeInUp { to { opacity: 1; } } @-ms-keyframes fadeInUp { to { opacity: 1; } } @-o-keyframes fadeInUp { to { opacity: 1; } } @keyframes fadeInUp { to { opacity: 1; } } #main { display: block; } .content { flex: 1; max-width: 1920px; margin: 0 auto; } .masonry { margin-bottom: 5px; } .grid { position: relative; display: block; margin: 0 auto; } .grid .grid__item { 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.animate { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); opacity: 1; } .grid .grid__item:hover { background-color: var(--color-grid-background-hover); } .grid__item.explore { display: flex; width: calc(100% - 10px) !important; max-height: 75px; background-color: transparent; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; } .grid__item.explore:hover { background-color: transparent; } .grid__item.explore a, .explore-aside a { display: flex; align-items: center; justify-content: center; position: relative; flex-shrink: 0; margin: 1em 5px; padding: 1em; max-width: calc((960px - 4em) * 0.75); text-align: justify; word-break: break-all; word-wrap: break-word; background-color: var(--color-grid-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.explore a:hover, .explore-aside a:hover { background-color: var(--color-grid-background-hover); } .grid__item.explore a:first-child { margin-left: 0; } .snapic-explore-title { margin: 1em 0; padding: 0 1em; font-size: var(--font-size-xl); color: var(--color-content-text); font-weight: bold; line-height: 1.6; -webkit-line-clamp: 1; line-clamp: 1; } .snapic-explore-title:hover { color: var(--color-content-text-a-hover) !important; } .grid__item.explore a:hover .snapic-explore-title { color: var(--color-content-text-hover); } .snapic-explore-comments { position: absolute; top: 0; right: 0; padding: 0.25em 0.5em; font-size: var(--font-size-s); color: var(--color-content-text-hover) !important; border-radius: 0 1em 0 0.5em; background-color: var(--color-author-background); } .grid__item.explore a:hover .snapic-explore-comments { background-color: var(--color-author-background-hover) !important; } .snapic-explore-comments:hover { color: var(--color-content-text-a-hover) !important; } .snapic-explore-open { display: flex; align-items: center; justify-content: flex-end; position: absolute; top: -5px; right: 0; width: auto; height: auto; z-index: 1; } .snapic-explore-open a { display: flex; justify-content: flex-end; align-items: center; margin: 1em 0; padding: 1em; padding-right: 1.75em; width: 75px; height: 55px; background-color: transparent; background-image: linear-gradient(to right, 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% ); } .snapic-explore-open a:hover { background-color: transparent !important; } .many { display: block; width: 3em; height: 3em; filter: var(--color-svg-filter); background-size: 3em; background-position: center; background-repeat: no-repeat; background-image: url('../img/icon/plus.svg'); background-color: transparent; -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: .7; z-index: 3; } .snapic-explore-open a:hover .many { opacity: 1; } .explore-aside { display: flex; flex-wrap: wrap; margin: 2em auto; padding: 0 2em; height: auto; max-width: calc(960px - 4em); } .explore-aside a { margin: 0.5em !important; } .explore-aside .snapic-explore-title { margin: 0.5em 0; } .grid__item.solarterm .plaintext { display: flex; position: relative; min-height: 7em; background-color: var(--color-grid-background); } .grid__item.solarterm:hover .plaintext { background-color: var(--color-grid-background-hover); } .grid__item.solarterm .plaintext a { display: flex; align-items: center; justify-content: center; width: 100%; } .grid__item.solarterm .plaintext:hover .snapic-grid-solarterm-title { color: var(--color-content-text-hover); } .grid__item.solarterm .snapic-grid-solarterm-title:hover { color: var(--color-content-text-a-hover) !important; } .grid__item.solarterm .snapic-grid-solarterm-title { font-size: var(--font-size-xxxxl); color: var(--color-content-text); } .grid__item.solarterm .snapic-grid-solarterm-sub { position: absolute; top: 0; right: 0; padding: 0.5em 0.75em; font-size: var(--font-size-s); color: var(--color-content-text-hover) !important; border-radius: 0 1em 0 0.5em; background-color: var(--color-author-background); } .grid__item.solarterm .plaintext:hover .snapic-grid-solarterm-sub { background-color: var(--color-author-background-hover) !important; } .grid__item.solarterm .snapic-grid-solarterm-sub:hover { color: var(--color-content-text-a-hover) !important; } .grid__item.unlock .plaintext { position: relative; min-height: 7em; } .snapic-grid-unlock-icon { position: absolute; top: 1em; right: 1em; background-image: url('../img/icon/lock.svg'); width: 1.5em; height: 1.5em; background-size: 1.2em; background-position: center; background-repeat: no-repeat; filter: var(--color-svg-filter); -webkit-transition: all .15s ease-in-out; -moz-transition: all .15s ease-in-out; -ms-transition: all .15s ease-in-out; -o-transition: all .15s ease-in-out; transition: all .15s ease-in-out; opacity: .15; } .snapic-grid-unlock-icon:hover { opacity: .75; } .snapic-grid-unlock-day, .snapic-grid-unlock-shape, .snapic-grid-unlock-shape-o { position: absolute; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .snapic-grid-unlock-day { top: calc(50% + 0.25em); left: 50%; font-size: 1200%; font-weight: bold; -webkit-transition: all .15s ease-in-out; -moz-transition: all .15s ease-in-out; -ms-transition: all .15s ease-in-out; -o-transition: all .15s ease-in-out; transition: all .15s ease-in-out; cursor: default; opacity: .7; z-index: 2; } .snapic-grid-unlock-shape, .snapic-grid-unlock-shape-o { width: 6em; height: 6em; z-index: 0; } .snapic-grid-unlock-shape { top: 15%; left: 5%; } .snapic-grid-unlock-shape-o { top: 55%; left: 75%; } .snapic-grid-unlock-shape::before, .snapic-grid-unlock-shape-o::before, .snapic-grid-unlock-shape::after, .snapic-grid-unlock-shape-o::after { content: ''; display: block; position: absolute; top: 50%; left: 50%; 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-grid-unlock-shape::before { width: calc(100% + 1.5em); height: calc(100% + 1.5em); background: transparent; -webkit-animation: rotateAnimation 3s linear infinite; -moz-animation: rotateAnimation 3s linear infinite; -ms-animation: rotateAnimation 3s linear infinite; -o-animation: rotateAnimation 3s linear infinite; animation: rotateAnimation 3s linear infinite; opacity: .97; z-index: 1; } .snapic-grid-unlock-shape-o::before { width: calc(55% + 1.5em); height: calc(55% + 1.5em); background: transparent; -webkit-animation: rotateAnimation 5s linear infinite; -moz-animation: rotateAnimation 5s linear infinite; -ms-animation: rotateAnimation 5s linear infinite; -o-animation: rotateAnimation 5s linear infinite; animation: rotateAnimation 5s linear infinite; opacity: .97; z-index: 1; } .snapic-grid-unlock-shape::after { width: 100%; height: 100%; border: 0.5em solid var(--color-cyan); -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: 0; } .snapic-grid-unlock-shape-o::after { width: 55%; height: 55%; border: 0.5em solid var(--color-cyan); -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: 0; } .grid .grid__item:hover .snapic-grid-unlock-day { top: calc(35% + 0.25em); font-size: 800%; opacity: 1; } @-webkit-keyframes rotateAnimation { 0% { -webkit-transform: translate(-50%, -50%) rotate(0deg); } 100% { -webkit-transform: translate(-50%, -50%) rotate(360deg); } } @-moz-keyframes rotateAnimation { 0% { -moz-transform: translate(-50%, -50%) rotate(0deg); } 100% { -moz-transform: translate(-50%, -50%) rotate(360deg); } } @-ms-keyframes rotateAnimation { 0% { -ms-transform: translate(-50%, -50%) rotate(0deg); } 100% { -ms-transform: translate(-50%, -50%) rotate(360deg); } } @-o-keyframes rotateAnimation { 0% { -o-transform: translate(-50%, -50%) rotate(0deg); } 100% { -o-transform: translate(-50%, -50%) rotate(360deg); } } @keyframes rotateAnimation { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } } .grid__item.about .grid__link { position: relative; height: auto; padding-top: calc(100% * 1/2.35); overflow: hidden; } .grid__item.about .grid__img { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; -webkit-transform: translate(-50%, -50%) scale(1); -moz-transform: translate(-50%, -50%) scale(1); -ms-transform: translate(-50%, -50%) scale(1); -o-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); object-fit: cover; } .grid__item.about .grid__img:hover { -webkit-transform: translate(-50%, -50%) scale(0.97); -moz-transform: translate(-50%, -50%) scale(0.97); -ms-transform: translate(-50%, -50%) scale(0.97); -o-transform: translate(-50%, -50%) scale(0.97); transform: translate(-50%, -50%) scale(0.97); } .grid__link { display: block; position: relative; margin: 0 auto; } .grid__img { display: block; margin: 0 auto; 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 { display: flex; flex-direction: column; align-items: flex-end; position: absolute !important; top: calc(1em - 0.15em); right: 1em; max-width: calc(41.66667% - 1.5em); font-size: var(--font-size-m); text-align: justify; opacity: 0; z-index: 1; } .snapic-grid-category a { margin: 0.15em 0; padding: 0.5em; border-radius: 0.25em; background-color: var(--color-mark-category-background); } .snapic-grid-category, .snapic-grid-category a { color: var(--color-mark-category-text); } .snapic-grid-category a:hover { background-color: var(--color-mark-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-top-left { display: flex; flex-direction: column; align-items: flex-start; position: absolute !important; top: 1.25em; left: 1em; max-width: calc(66.66667% - 1.5em); } .snapic-grid-like { background-color: var(--color-mark-like-background); opacity: 0; cursor: pointer; pointer-events: auto !important; } .grid__item:hover .snapic-grid-like { -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-like span { flex-shrink: 0; } .snapic-grid-thumb { margin-bottom: 0.5em; background-color: var(--color-mark-thumb-background); cursor: default; } .snapic-grid-like, .snapic-grid-thumb { display: flex; align-items: center; position: relative; padding: 0.25em 0.75em; border-radius: 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; z-index: 1; } .snapic-grid-like:hover { background-color: var(--color-mark-like-background-hover); } .snapic-grid-thumb:hover { background-color: var(--color-mark-thumb-background-hover); } .snapic-grid-like:hover, .snapic-grid-thumb: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-like-icon { background-image: url('../img/icon/like.svg'); } .snapic-thumb-icon { background-image: url('../img/icon/image.svg'); } .snapic-like-icon, .snapic-thumb-icon { display: block; width: 2em; height: 2em; background-size: 1.5em; background-position: center; background-repeat: no-repeat; filter: invert(100%) grayscale(100%); } .snapic-like-loading { display: block; width: 1em; height: 1em; margin-left: 0.25em; background-position: center; background-repeat: no-repeat; background-size: 1em; background-image: url('../img/load_loop.gif'); } .snapic-like-cnt, .snapic-thumb-cnt { margin-left: 0.25em; min-width: 1em; min-height: 1em; font-size: var(--font-size-m); color: var(--color-mark-text); text-align: center; } .snapic-grid-progress { display: flex; align-items: center; justify-content: center; position: absolute; bottom: 50%; left: 50%; margin: 0; padding: 0; width: 100%; max-width: calc(100% - 1em); font-size: var(--font-size-xxxl); color: var(--color-progress-text); -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: 2; } .snapic-grid-num { font-size: 300%; font-weight: bold; } .snapic-grid-den { margin-bottom: -5em; margin-left: 0.5em; font-size: 38.5%; font-weight: normal; } .snapic-grid-done { padding: 0.5em 1em; font-size: 62.5%; font-weight: normal; white-space: nowrap; border-radius: 3em; background-color: var(--color-progress-background); -webkit-animation: doneFadeInOut 5s ease-out; -moz-animation: doneFadeInOut 5s ease-out; -ms-animation: doneFadeInOut 5s ease-out; -o-animation: doneFadeInOut 5s ease-out; animation: doneFadeInOut 5s ease-out; overflow: hidden; opacity: 0; } @-webkit-keyframes doneFadeInOut { 0% { opacity: 0; } 25% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } } @-moz-keyframes doneFadeInOut { 0% { opacity: 0; } 25% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } } @-ms-keyframes doneFadeInOut { 0% { opacity: 0; } 25% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } } @-o-keyframes doneFadeInOut { 0% { opacity: 0; } 25% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } } @keyframes doneFadeInOut { 0% { opacity: 0; } 25% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } } .snapic-grid-description h1, .snapic-grid-description h2, .snapic-grid-description p, .snapic-grid-poster, .snapic-grid-poster p { margin: 1em 0; } .snapic-grid-meta { display: flex; justify-content: space-between; align-items: center; } .snapic-grid-time { color: var(--color-meta-text); } .snapic-grid-comments { flex-shrink: 0; color: var(--color-meta-text); margin-left: auto !important; } .snapic-grid-comments a { margin-left: 1em; 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, .grid__item:hover .snapic-grid-comments a { color: var(--color-meta-hover); } .snapic-grid-by { display: flex; align-items: center; justify-content: center; margin-left: -0.25em; flex-shrink: 0; font-size: 12px; color: var(--color-author-text) !important; border-radius: 50%; background-color: var(--color-author-background); } .grid__item:hover .snapic-grid-by { background-color: var(--color-author-background-hover); } .snapic-grid-avatar { flex-shrink: 0; -webkit-transition: all .15s ease-in-out; -moz-transition: all .15s ease-in-out; -ms-transition: all .15s ease-in-out; -o-transition: all .15s ease-in-out; transition: all .15s ease-in-out; opacity: .7; } .grid__item:hover .snapic-grid-avatar, .snapic-grid-by:hover .snapic-grid-avatar { -webkit-transition: all .15s ease-in-out; -moz-transition: all .15s ease-in-out; -ms-transition: all .15s ease-in-out; -o-transition: all .15s ease-in-out; transition: all .15s ease-in-out; opacity: 1; } .snapic-grid-avatar img { border-radius: 50% !important } .snapic-grid-icon { position: absolute; top: -24px; left: 50%; margin: 0; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -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; opacity: 0; } .snapic-grid-icon a.snapic-grid-by { display: flex; align-items: center; justify-content: center; margin: 0; width: 48px; height: 48px; font-size: 12px; color: var(--color-author-text-hover) !important; border-radius: 50%; background-color: var(--color-author-background); } .snapic-grid-icon span.snapic-grid-avatar { width: 48px; height: 48px; } .snapic-grid-icon span.snapic-grid-avatar img { width: 48px; height: 48px; border-radius: 50% !important } .grid__item:hover .snapic-grid-icon { top: calc(1.35em + 24px); -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: .7; } .snapic-grid-icon:hover { opacity: 1 !important; } .snapic-grid-title { display: flex; align-items: center; } .snapic-grid-title a { font-weight: normal; -webkit-line-clamp: 3; line-clamp: 3; } .snapic-grid-title:hover, .snapic-grid-title a:hover { color: var(--color-content-text-a-hover) !important; } .snapic-grid-title, .snapic-grid-title a, .snapic-grid-excerpt, .snapic-grid-about, .snapic-grid-keyword, .snapic-grid-poster { color: var(--color-content-text); text-align: justify; word-break: break-all; word-wrap: break-word; } .grid__item:hover .snapic-grid-title, .grid__item:hover .snapic-grid-title a, .grid__item:hover .snapic-grid-excerpt, .grid__item:hover .snapic-grid-about, .grid__item:hover .snapic-grid-keyword, .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-about-more a, .snapic-grid-poster a, .error a { color: var(--color-content-text-a); } .snapic-grid-excerpt a:hover, .snapic-grid-about-more a:hover, .snapic-grid-poster a:hover, .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-grid-about-more { text-align: center; } .snapic-grid-about, .snapic-grid-keyword { position: relative; display: flex; align-items: center; margin: 1em 0; padding: 0 1em; width: calc(100% - 2em); height: 100%; min-height: 96px; } .snapic-grid-about-avatar, .snapic-grid-keyword-avatar { width: 100%; height: 100%; min-height: 96px; } .snapic-grid-about-avatar img, .snapic-grid-keyword-avatar a { position: absolute; top: 50%; width: 96px; height: 96px; border-radius: 50%; border: 0.5em solid var(--color-author-background-hover); background-color: var(--color-author-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; opacity: .3; z-index: 1; } .snapic-grid-about-avatar img { right: calc(-48px - 0.5em); -webkit-transform: translate(0%, -50%); -moz-transform: translate(0%, -50%); -ms-transform: translate(0%, -50%); -o-transform: translate(0%, -50%); transform: translate(0%, -50%); } .snapic-grid-keyword-avatar a { display: flex; align-items: center; justify-content: center; font-size: var(--font-size-xxxl); color: var(--color-content-text-hover); left: calc(-36px - 0.5em); -webkit-transform: translate(0%, -50%); -moz-transform: translate(0%, -50%); -ms-transform: translate(0%, -50%); -o-transform: translate(0%, -50%); transform: translate(0%, -50%); } .snapic-grid-keyword-avatar a:hover { color: var(--color-content-text-a-hover); } .snapic-grid-keyword-avatar a::before, .snapic-grid-keyword-avatar a::after { content: ''; display: block; position: absolute; width: 256px; height: 256px; border-radius: 50%; background-color: black; } .snapic-grid-keyword-avatar a::before { top: 1.5em; left: -1em; opacity: .3; z-index: 3; } .snapic-grid-keyword-avatar a::after { top: 1em; left: 3em; opacity: .15; z-index: 2; } .grid__item:hover .snapic-grid-about-avatar img, .grid__item:hover .snapic-grid-keyword-avatar a { border: 0.25em solid var(--color-author-background); background-color: var(--color-author-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: 1; } .snapic-grid-keyword-icon { width: 96px; height: 96px; border-radius: 50%; background-size: 96px; background-position: 50% 50%; background-repeat: no-repeat; -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 .snapic-grid-keyword-icon { opacity: .3; } .snapic-grid-keyword-avatar a:hover .snapic-grid-keyword-icon { opacity: 1; } .snapic-grid-about-meta, .snapic-grid-keyword-meta { display: flex; flex-direction: column; align-items: flex-start; margin: 1em 0; padding: 0; flex-shrink: 0; line-height: 1.6; cursor: default; } .snapic-grid-about-meta { width: 100%; } .snapic-grid-keyword-meta { position: absolute; left: calc(56px + 0.75em); width: auto; padding-right: 0.5em; line-height: 1.2; -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-about-meta div, .snapic-grid-keyword-meta div { display: flex; align-items: center; justify-content: flex-start; } .snapic-grid-keyword-meta div:first-child span:last-child { -webkit-line-clamp: 2; line-clamp: 2; } .snapic-grid-keyword-home { position: absolute !important; top: -1em; right: 0; } .noborder { border: 0 !important; background-color: transparent !important; } .home.noborder { background-size: 1.5em; opacity: .3; } .home.noborder:hover { opacity: 1; } .snapic-grid-about-author, .snapic-grid-about-time, .snapic-grid-about-count, .snapic-grid-about-comments, .snapic-grid-keyword-author, .snapic-grid-keyword-word, .snapic-grid-keyword-count { flex-shrink: 0; margin-right: 0.5em; width: 1.5em; height: 1.5em; background-size: 1.2em; background-position: center; background-repeat: no-repeat; filter: var(--color-svg-filter); opacity: .5; } .grid__item:hover .snapic-grid-about-author, .grid__item:hover .snapic-grid-about-time, .grid__item:hover .snapic-grid-about-count, .grid__item:hover .snapic-grid-about-comments, .grid__item:hover .snapic-grid-keyword-author, .grid__item:hover .snapic-grid-keyword-word, .grid__item:hover .snapic-grid-keyword-count { -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; opacity: 1; } .snapic-grid-about-author { background-image: url('../img/icon/author.svg'); background-size: contain; } .snapic-grid-about-time { background-image: url('../img/icon/clock.svg'); } .snapic-grid-about-count { background-image: url('../img/icon/image.svg'); } .snapic-grid-about-comments { background-image: url('../img/icon/comment.svg'); background-size: 1em; background-position: calc(50% + 1px) center; } .snapic-grid-keyword-author { background-image: url('../img/icon/author.svg'); background-size: 1.5em; } .snapic-grid-keyword-word { background-image: url('../img/icon/keyword.svg'); background-size: 1.5em; } .snapic-grid-keyword-count { background-image: url('../img/icon/edit.svg'); } .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 { 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); } .err-404 { display: flex; align-items: center; justify-content: center; max-height: 7em; font-size: var(--font-size-xxxxl); font-weight: bold; background-color: transparent !important; } .error, .plaintext { 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; } .media-play { display: block; position: absolute; top: 50% !important; left: 50% !important; width: 4.8em; height: 4.8em; border-radius: 50%; background-size: 5.2em; background-position: center; background-repeat: no-repeat; background-image: url('../img/icon/play.svg'); background-color: rgb(222 222 222 / 70%); filter: invert(100%) grayscale(100%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .grid__link a:hover .media-play { background-color: rgb(122 122 122 / 70%); } .pushbar_overlay { background-color: var(--color-body-background) !important; } aside.snapic-tool-aside-left, aside.snapic-tool-aside-bottom, aside.snapic-grid-aside-bottom { margin: 0 auto; padding: 0; background-color: var(--color-aside-background); } aside.snapic-tool-aside-left { height: 100% !important; border-right: 1.5em solid var(--color-aside-border); border-image: linear-gradient(to bottom, var(--color-body-background), var(--color-aside-border), var(--color-body-background)); border-image-slice: 1; } aside.snapic-tool-aside-bottom, aside.snapic-grid-aside-bottom { 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; } aside.snapic-grid-aside-bottom { overflow: hidden; } [id^="aside-"] { margin: 0; padding: 0; height: 85vh; } .snapic-iframe { width: 100%; height: 100%; } .snapic-oops { margin: 1em auto; padding: 0 2em; width: calc(100% - 4em); max-width: 960px; } .pswp__button--download-button .download { display: block; width: 3.2em; height: 3.2em; background-size: 2.25em; background-position: center calc(50% - 1px); background-repeat: no-repeat; background-image: url('../img/icon/download.svg'); filter: var(--color-svg-filter); } .pswp img { border-radius: 0.5em; } .pswp__by { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 50px; } .pswp__by .snapic-grid-by { margin: 0; } .pswp__by .snapic-grid-avatar { opacity: 1; } .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, .author-cc { display: none; position: absolute; color: var(--color-cc-text); 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; } .snapic-cc { padding: 0.5em 0.7em; white-space: nowrap; border-radius: 2em; font-size: var(--font-size-m); } .author-cc { align-items: center; justify-content: center; position: absolute; top: 50%; left: 50%; padding: 1em; width: calc(100% - 2em + 2px); height: calc(100% - 2em + 2px); font-size: var(--font-size-l); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .snapic-exif-more, .snapic-exif-gear { position: absolute !important; bottom: 1.35em; padding: 0.25em 0.75em; font-size: var(--font-size-m); line-height: 1.4; border-radius: 1em; pointer-events: auto !important; cursor: default; opacity: 0; z-index: 1; } .snapic-exif-more { right: 1em; width: auto; max-width: 50px; color: var(--color-exif-more); background-color: var(--color-exif-more-background); } .snapic-exif-gear { left: 0; margin-left: 1em; width: auto; max-width: calc(100% - 3em - 50px); color: var(--color-exif-gear); word-break: break-all; word-wrap: break-word; background-color: var(--color-exif-gear-background); -webkit-line-clamp: 1; line-clamp: 1; } .snapic-exif-more:hover { background-color: var(--color-exif-more-background-hover); } .snapic-exif-gear:hover { background-color: var(--color-exif-gear-background-hover); } .grid__item:hover .snapic-exif-more, .grid__item:hover .snapic-exif-gear { -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 { display: none; position: absolute; bottom: -1px; left: -1px; padding-top: 3em; padding-bottom: 1.35em; height: auto; min-height: 1em; color: var(--color-exif-info); 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% ); z-index: 1; } .snapic-exif-info span { word-break: break-all; word-wrap: break-word; -webkit-line-clamp: 1; line-clamp: 1; } .about .snapic-exif-info { display: none; } .page-navigator { display: flex; align-items: center; justify-content: space-evenly; margin: 1.5em 0; padding: 0; list-style: none; font-size: var(--font-size-m); } .page-navigator a, .page-navigator span { display: flex; align-items: center; justify-content: center; border-radius: 0.25em; width: auto; color: var(--color-navigator-text); } .page-navigator span { padding: 0; min-width: auto; height: auto; } .grid__item:hover .page-navigator li, .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; opacity: 1; } .page-navigator a:hover { background-color: var(--color-navigator-btn-hover); color: var(--color-navigator-btn-a-hover) !important; } .page-navigator .prev a, .page-navigator .next a { background-position: center; background-repeat: no-repeat; background-size: 2em; background-color: transparent; filter: var(--color-svg-filter); } .page-navigator .prev a { background-image: url('../img/icon/prev.svg'); opacity: .3; } .page-navigator .prev:hover { border-radius: 0.25em; 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 { border-radius: 0.25em; background-color: var(--color-navigator-next-background); } .page-navigator .next a { background-image: url('../img/icon/next.svg'); } .page-navigator .next:hover { border-radius: 50%; } .snapic-tags { display: flex; flex-direction: column; margin: 0 auto; margin-bottom: 2em; width: 100%; max-width: 960px; } .snapic-tags-cate { display: flex; flex-wrap: wrap; } .snapic-tags-cate span { margin: 0.5em 0; padding: 0.5em 0; } .snapic-tags-cate span a { margin: 0.25em; padding: 0.5em 0.75em; border-radius: 2em; font-size: var(--font-size-m); color: var(--color-tags-text); background-color: var(--color-tags-background); } .snapic-tags-cate span a:hover { color: var(--color-tags-text-hover); background-color: var(--color-tags-background-hover); } .snapic-tags-digg { color: var(--color-orange) !important; } .snapic-tags-prefix a { color: var(--color-tags-prefix-text) !important; background-color: var(--color-tags-prefix-background) !important; cursor: default; } .snapic-tags-prefix a:hover { background-color: var(--color-tags-prefix-background-hover) !important; } .snapic-tool { display: none; flex-direction: column; align-items: center; position: fixed; right: 1.5em; bottom: 7em; width: calc(3em + 0.25em * 2); min-height: calc(3em + 0.25em * 2 + 1em); z-index: 99; } html.pushbar_locked .snapic-tool { right: calc(1.5em + 7px) !important; } .toolHide { -webkit-transform: translate(350%, 0%) !important; -moz-transform: translate(350%, 0%) !important; -ms-transform: translate(350%, 0%) !important; -o-transform: translate(350%, 0%) !important; transform: translate(350%, 0%) !important; -webkit-transition: transform .5s ease-out; -moz-transition: transform .5s ease-out; -ms-transition: transform .5s ease-out; -o-transition: transform .5s ease-out; transition: transform .5s ease-out; } .toolShow { -webkit-transform: translate(0%, 0%); -moz-transform: translate(0%, 0%); -ms-transform: translate(0%, 0%); -o-transform: translate(0%, 0%); transform: translate(0%, 0%); -webkit-transition: transform .5s ease-out; -moz-transition: transform .5s ease-out; -ms-transition: transform .5s ease-out; -o-transition: transform .5s ease-out; transition: transform .5s ease-out; } .music, .snapic-search, .snapic-menu, .snapic-point, .snapic-chat, .snapic-home, .snapic-gotop { margin-top: 1em; } .music a, .snapic-search a, #search-form button, .snapic-menu a, .snapic-point a, .snapic-chat a, .snapic-home a, .snapic-gotop 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; } #music-play, #music-pause, .search, #search-form button, .menu, .point, .chat, .home, .gotop { display: block; width: 3em; height: 3em; background-size: 2em; background-position: center; background-repeat: no-repeat; filter: var(--color-svg-filter); } #music-play { background-image: url('../img/icon/music.svg'); background-position: calc(50% - 1px) center; } #music-pause { background-image: url('../img/icon/pause.svg'); background-position: center; } .search, #search-form button { background-image: url('../img/icon/search.svg'); } .menu { background-image: url('../img/icon/menu.svg'); } .point { background-image: url('../img/icon/point.svg'); } .chat { background-image: url('../img/icon/comment.svg'); background-size: 1.5em; } .home { background-image: url('../img/icon/home.svg'); } .gotop { background-image: url('../img/icon/top.svg'); } .music a:hover, .snapic-search a:hover, #search-form button:hover, .snapic-menu a:hover, .snapic-point a:hover, .snapic-chat a:hover, .snapic-home a:hover, .snapic-gotop 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; } #music { display: none; width: 0; height: 0; } #music::-webkit-media-controls { display: none !important; } #music-play { background-size: 1.5em; cursor: pointer; } #music-pause { background-size: 2em; cursor: pointer; } #music-err { display: none; position: absolute; top: -3em; right: 4em; margin: 0; padding: 1em 1.25em; width: auto; max-width: 7em; font-size: var(--font-size-l); color: var(--color-white); white-space: nowrap; text-align: center; border-radius: 3em; background-color: var(--color-black); overflow: hidden; } .musical { position: absolute; top: calc(50% - 5em); left: calc(50% - 2em); opacity: 0; -webkit-animation: mAnime 3s linear infinite; -moz-animation: mAnime 3s linear infinite; -o-animation: mAnime 3s linear infinite; -ms-animation: mAnime 3s linear infinite; animation: mAnime 3s linear infinite; } .toolHide .musical { top: calc(50% - 5em); left: calc(-350% + 2em); } .musical.a, .musical.b, .musical.c { width: 3em; height: 3em; background-size: 3em; background-position: center; background-repeat: no-repeat; } .musical.a { background-image: url('../img/icon/music-a.svg'); } .musical.b { background-image: url('../img/icon/music-b.svg'); } @-webkit-keyframes mAnime { 0% { -webkit-transform: translateY(0) translateX(0) scale(1); opacity: 1; } 50% { -webkit-transform: translateY(-300px) translateX(calc(50px - 200px * var(--random))) scale(0.5); opacity: 0.5; } 100% { -webkit-transform: translateY(-600px) translateX(calc(100px - 400px * var(--random))) scale(0); opacity: 0; } } @-moz-keyframes mAnime { 0% { -moz-transform: translateY(0) translateX(0) scale(1); opacity: 1; } 50% { -moz-transform: translateY(-300px) translateX(calc(50px - 200px * var(--random))) scale(0.5); opacity: 0.5; } 100% { -moz-transform: translateY(-600px) translateX(calc(100px - 400px * var(--random))) scale(0); opacity: 0; } } @-ms-keyframes mAnime { 0% { -ms-transform: translateY(0) translateX(0) scale(1); opacity: 1; } 50% { -ms-transform: translateY(-300px) translateX(calc(50px - 200px * var(--random))) scale(0.5); opacity: 0.5; } 100% { -ms-transform: translateY(-600px) translateX(calc(100px - 400px * var(--random))) scale(0); opacity: 0; } } @-o-keyframes mAnime { 0% { -o-transform: translateY(0) translateX(0) scale(1); opacity: 1; } 50% { -o-transform: translateY(-300px) translateX(calc(50px - 200px * var(--random))) scale(0.5); opacity: 0.5; } 100% { -o-transform: translateY(-600px) translateX(calc(100px - 400px * var(--random))) scale(0); opacity: 0; } } @keyframes mAnime { 0% { transform: translateY(0) translateX(0) scale(1); opacity: 1; } 50% { transform: translateY(-300px) translateX(calc(50px - 200px * var(--random))) scale(0.5); opacity: 0.5; } 100% { transform: translateY(-600px) translateX(calc(100px - 400px * var(--random))) scale(0); opacity: 0; } } #search-aside { display: flex; flex-direction: column; margin: 0 auto; padding: 0 2em; height: auto; } #search-form { display: flex; align-items: center; justify-content: center; margin: 0 auto; width: 100%; height: auto; min-height: 250px; max-width: 50em; } #search-form input { margin-right: 0.5em; padding: 0.5em; width: calc(100% - 5em); font-family: sans-serif; 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-form input:focus { color: var(--color-search-input-focus); background-color:  var(--color-search-input-background-focus); } #search-form button { border: 0; background-color: transparent; cursor: pointer; } .menu-aside { display: flex; flex-direction: column; justify-content: space-around; align-items: center; margin: 3em auto; padding: 0 2em; } .menu-aside a { color: var(--color-menu-text); } .menu-aside hr { margin: 1.5em auto; width: calc(100% - 3em); } .menu-aside .current { border: 0.5em dashed var(--color-menu-current-border); border-radius: 2em; } .snapic-menu-item { position: relative; margin: 1em; width: calc(100% - 2em); } .snapic-menu-image { width: 100%; height: 100%; border-radius: 1em; overflow: hidden; } .snapic-menu-image img { width: 250px; height: 100%; max-height: calc(250px / 2.35); object-fit: cover; background-size: 100%; background-repeat: no-repeat; } .snapic-menu-meta { display: flex; flex-direction: column; justify-content: space-around; position: absolute; top: 50%; left: 50%; width: calc(100% + 2px); height: calc(100% + 2px); border-radius: 1em; background-color: var(--color-menu-background); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -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-menu-meta:hover { background-color: var(--color-menu-background-hover); } .snapic-menu-thumb { margin-right: 1em; text-align: right; font-size: var(--font-size-m); opacity: .7; } .snapic-menu-title { margin: 0 0.5em; text-align: center; font-size: var(--font-size-xxxl); -webkit-line-clamp: 1; line-clamp: 1; } .snapic-menu-time { margin-left: 1em; text-align: left; font-size: var(--font-size-m); opacity: .7; } .snapic-menu-meta:hover .snapic-menu-thumb, .snapic-menu-meta:hover .snapic-menu-time { opacity: 1; } .snapic-menu-link { display: flex; flex-wrap: wrap; } .snapic-menu-link-icon { display: flex; flex-wrap: wrap; justify-content: space-evenly; align-items: center; } .snapic-menu-link, .snapic-menu-link-icon { margin: 0.75em 1em; width: calc(100% - 2em); max-width: 220px; } .snapic-menu-link a, .snapic-menu-link-icon a { display: flex; align-items: center; justify-content: center; flex-shrink: 0; background-color: var(--color-tags-background); } .snapic-menu-link a { margin: 0.25em; padding: 0.5em 0.75em; width: calc(50% - 2em); min-height: 2em; font-size: var(--font-size-m); color: var(--color-tags-text); text-align: center; border-radius: 2em; } .snapic-menu-link-icon a { margin: 0.5em; padding: 0.5em; width: 3em; height: 3em; border-radius: 50%; } .snapic-menu-link a:hover, .snapic-menu-link-icon a:hover { color: var(--color-tags-text-hover); background-color: var(--color-tags-background-hover); } .snapic-menu-link span { -webkit-line-clamp: 1; line-clamp: 1; } .snapic-menu-link-icon span { display: block; width: 3em; height: 3em; border-radius: 50%; background-size: 2em; background-position: center; background-repeat: no-repeat; filter: var(--color-svg-filter); opacity: .7; } .snapic-menu-link-icon a:hover span { opacity: 1; } .point-aside { display: flex; flex-direction: column; margin: 2.5em auto; padding: 0 2em; width: auto; height: calc(85vh - 5em); max-width: 960px; } #map { width: 100%; height: 100%; border-radius: 1em; } .point-aside .location { margin-top: 0.5em; margin-right: 0.5em; color: var(--color-post-text); font-size: var(--font-size-l); text-align: right; } .point-aside .location span { margin-left: 1.5em; } 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; } @media screen and (min-width: 1920px) { .snapic-bgimg-info { max-width: calc(1920px / 2); } .snapic-bgimg-about { left: calc(50% - (1920px / 2) + (1920px * 0.075) / 2); max-width: calc(1920px * 0.925); } .snapic-tool { right: calc(50% - (1920px / 2) + 2em); } } @media screen and (max-width: 960px) { .snapic-bgimg-about-description { width: 75%; } .grid__item.explore a { max-width: 75vw; } } @media screen and (max-width: 768px) { #main { display: block; } .grid__item.explore a { margin: 0.25em 5px; } .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); } .grid__item.about .grid__img:hover { -webkit-transform: translate(-50%, -50%) scale(1); -moz-transform: translate(-50%, -50%) scale(1); -ms-transform: translate(-50%, -50%) scale(1); -o-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); } .snapic-exif-more, .snapic-exif-gear { bottom: 1em; } .snapic-exif-info { padding-bottom: 1em; } } @media screen and (max-width: 640px) { .slick-slide .diyloading { top: calc(50% - 30px); } .header { height: calc(100vh - 60px); } .snapic-bgimg-about { max-height: calc(85vh - 60px); } .snapic-bgimg-about-skill, .snapic-bgimg-about-sns { width: 100%; } .snapic-bgimg-about-sns { width: auto; } .snapic-bgimg-info { max-width: 75vw; } aside.snapic-tool-aside-bottom, aside.snapic-grid-aside-bottom, [id^="aside-"] { height: calc(85vh - 60px); } .point-aside { height: calc(85vh - 60px - 5em); } html.pushbar_locked .snapic-tool { right: 1.5em !important; } } @media screen and (max-width: 480px) { .grid__item.explore a { max-width: 50vw; } .menu-aside { margin: 2em auto; padding: 0 1em; } .snapic-menu-image img { width: 200px; max-height: calc(200px / 2.35); } hr { border-top: 0.05em solid var(--color-markdowon-hr-top); border-bottom: 0.05em solid var(--color-markdowon-hr-bottom); } } @media screen and (max-width: 360px) { .media-play { width: 3.6em; height: 3.6em; background-size: 3.6em; } }