@charset "utf-8"; @mixin font($font-family, $font-weight, $font-style, $font-local, $font-url) { @font-face { font-family: $font-family; font-weight: $font-weight; font-style: $font-style; font-display: swap; src: local($font-local), url($font-url) format('woff2'); } } @include font( 'Pretendard JP', 400, normal, 'Pretendard JP Regular', 'https://cdn.jsdelivr.net/gh/orioncactus/pretendard/packages/pretendard-jp/dist/web/static/woff2/PretendardJP-Regular.woff2' ); @include font( 'Pretendard JP', 700, normal, 'Pretendard JP Bold', 'https://cdn.jsdelivr.net/gh/orioncactus/pretendard/packages/pretendard-jp/dist/web/static/woff2/PretendardJP-Bold.woff2' ); @include font( 'JetBrains Mono', 400, normal, 'JetBrains Mono Regular', 'https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono@master/fonts/webfonts/JetBrainsMono-Regular.woff2' ); @include font( 'JetBrains Mono', 700, normal, 'JetBrains Mono Bold', 'https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono@master/fonts/webfonts/JetBrainsMono-Bold.woff2' ); :root { --radius: 12px; --marginFull: 16px; --marginHalf: 10px; --margin: var(--marginFull); // switch dynamically --minBottomSpacingMobile: calc(72px + max(12px, env(safe-area-inset-bottom, 0px))); --minBottomSpacing: var(--minBottomSpacingMobile); @media (max-width: 500px) { --margin: var(--marginHalf); } //--ad: rgb(255 169 0 / 10%); --cherry: rgb(255, 188, 220); --pick: rgb(177, 211, 255); --misskey: rgb(134, 179, 0); --cast: rgb(181, 151, 246); --ella: rgb(150, 198, 234); } ::selection { color: var(--fgOnAccent); background-color: var(--accent); } html { background-color: var(--bg); color: var(--fg); accent-color: var(--accent); overflow: auto; overflow-wrap: break-word; font-family: "Pretendard JP", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Hiragino Sans", "Apple SD Gothic Neo", Meiryo, "Noto Sans JP", "Noto Sans KR", "Malgun Gothic", Osaka, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; // incoming changes from v13 // font-family: 'Hiragino Maru Gothic Pro', "BIZ UDGothic", Roboto, HelveticaNeue, Arial, sans-serif; font-size: 14px; line-height: 1.35; text-size-adjust: 100%; tab-size: 2; &, * { scrollbar-color: var(--scrollbarHandle) transparent; scrollbar-width: thin; &::-webkit-scrollbar { width: 6px; height: 6px; } &::-webkit-scrollbar-track { background: inherit; } &::-webkit-scrollbar-thumb { background: var(--scrollbarHandle); &:hover { background: var(--scrollbarHandleHover); } &:active { background: var(--accent); } } } &.f-1 { font-size: 7px; } &.f-2 { font-size: 8px; } &.f-3 { font-size: 9px; } &.f-4 { font-size: 10px; } &.f-5 { font-size: 11px; } &.f-6 { font-size: 12px; } &.f-7 { font-size: 13px; } &.f-8 { font-size: 14px; } &.f-9 { font-size: 15px; } &.f-10 { font-size: 16px; } &.f-11 { font-size: 17px; } &.f-12 { font-size: 18px; } &.f-13 { font-size: 19px; } &.f-14 { font-size: 20px; } &.f-15 { font-size: 21px; } &.f-16 { font-size: 22px; } &.f-17 { font-size: 23px; } &.f-18 { font-size: 24px; } &.f-19 { font-size: 25px; } &.useBoldFont { font-weight: bold; } &.useSystemFont { font-family: system-ui; } } html._themeChanging_ { &, * { transition: background 1s ease, border 1s ease !important; } } html, body { touch-action: manipulation; margin: 0; padding: 0; scroll-behavior: smooth; } a { text-decoration: none; cursor: pointer; color: inherit; tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; &:hover { text-decoration: underline; } &[target="_blank"] { -webkit-touch-callout: default; } } textarea, input { tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent; } optgroup, option { background: var(--panel); color: var(--fg); } hr { margin: var(--margin) 0 var(--margin) 0; border: none; height: 1px; background: var(--divider); } .ti { width: 1.28em; vertical-align: -12%; line-height: 1em; &:before { font-size: 128%; } } .ti-fw { display: inline-block; text-align: center; } ._indicatorCircle { display: inline-block; width: 1em; height: 1em; border-radius: 100%; background: currentColor; } ._noSelect { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } ._nowrap { white-space: pre !important; word-wrap: normal !important; // https://codeday.me/jp/qa/20190424/690106.html overflow: hidden; text-overflow: ellipsis; } ._ghost { @extend ._noSelect; pointer-events: none; } ._modalBg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--modalBg); -webkit-backdrop-filter: var(--modalBgFilter); backdrop-filter: var(--modalBgFilter); } ._shadow { box-shadow: 0px 4px 32px var(--shadow) !important; } ._button { @extend ._noSelect; appearance: none; display: inline-block; padding: 0; margin: 0; // for Safari background: none; border: none; cursor: pointer; color: inherit; touch-action: manipulation; tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent; font-size: 1em; font-family: inherit; line-height: inherit; max-width: 100%; &:focus-visible { outline: none; } &:disabled { opacity: 0.5; cursor: default; } } ._buttonPrimary { @extend ._button; color: var(--fgOnAccent); background: var(--accent); &:not(:disabled):hover { background: var(--X8); } &:not(:disabled):active { background: var(--X9); } } ._buttonGradate { @extend ._buttonPrimary; color: var(--fgOnAccent); background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB)); &:not(:disabled):hover { background: linear-gradient(90deg, var(--X8), var(--X8)); } &:not(:disabled):active { background: linear-gradient(90deg, var(--X8), var(--X8)); } } ._help { color: var(--accent); cursor: help } ._textButton { @extend ._button; color: var(--accent); &:not(:disabled):hover { text-decoration: underline; } } ._panel { background: var(--panel); border-radius: var(--radius); overflow: clip; } ._margin { margin: var(--margin) 0; } ._gaps_m { display: flex; flex-direction: column; gap: 1.5em; } ._gaps_s { display: flex; flex-direction: column; gap: 0.75em; } ._gaps { display: flex; flex-direction: column; gap: var(--margin); } ._buttons { display: flex; gap: 8px; flex-wrap: wrap; } ._buttonsCenter { @extend ._buttons; justify-content: center; } ._borderButton { @extend ._button; display: block; width: 100%; padding: 10px; box-sizing: border-box; text-align: center; border: solid 0.5px var(--divider); border-radius: var(--radius); &:active { border-color: var(--accent); } } ._popup { background: var(--popup); border-radius: var(--radius); contain: content; } ._acrylic { background: var(--acrylicPanel); -webkit-backdrop-filter: var(--blur, blur(15px)); backdrop-filter: var(--blur, blur(15px)); } ._formLinksGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-gap: 12px; } ._formLinks { > *:not(:last-child) { margin-bottom: 8px; } } ._beta { margin-left: 0.7em; font-size: 65%; padding: 2px 3px; color: var(--accent); border: solid 1px var(--accent); border-radius: 4px; vertical-align: top; } ._table { > ._row { display: flex; &:not(:last-child) { margin-bottom: 16px; @media (max-width: 500px) { margin-bottom: 8px; } } > ._cell { flex: 1; > ._label { font-size: 80%; opacity: 0.7; > ._icon { margin-right: 4px; display: none; } } } } } ._fullinfo { padding: 64px 32px; text-align: center; > img { vertical-align: bottom; height: 128px; margin-bottom: 16px; border-radius: 16px; } } ._link { color: var(--link); } ._caption { font-size: 0.8em; opacity: 0.7; } ._monospace { font-family: "Pretendard JP", "JetBrains Mono", Fira code, Fira Mono, Consolas, Menlo, Courier, monospace !important; } ._code { @extend ._monospace; background: #2d2d2d; color: #ccc; font-size: 14px; line-height: 1.5; padding: 5px; } code[class*="language-"], pre[class*="language-"] { font-family: "JetBrains Mono", "Pretendard JP" , Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace !important; } .prism-editor__textarea:focus { outline: none; } ._zoom { transition-duration: 0.5s, 0.5s; transition-property: opacity, transform; transition-timing-function: cubic-bezier(0,.5,.5,1); } ._transition_zoom-enter-active, ._transition_zoom-leave-active { transition: opacity 0.5s, transform 0.5s !important; } ._transition_zoom-enter-from, ._transition_zoom-leave-to { opacity: 0; transform: scale(0.9); } @keyframes blink { 0% { opacity: 1; transform: scale(1); } 30% { opacity: 1; transform: scale(1); } 90% { opacity: 0; transform: scale(0.5); } } @keyframes tada { from { transform: scale3d(1, 1, 1); } 10%, 20% { transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } to { transform: scale3d(1, 1, 1); } } ._anime_bounce { will-change: transform; animation: bounce ease 0.7s; animation-iteration-count: 1; transform-origin: 50% 50%; } ._anime_bounce_ready { will-change: transform; transform: scaleX(0.90) scaleY(0.90) ; } ._anime_bounce_standBy { transition: transform 0.1s ease; } @keyframes bounce { 0% { transform: scaleX(0.90) scaleY(0.90) ; } 19% { transform: scaleX(1.10) scaleY(1.10) ; } 48% { transform: scaleX(0.95) scaleY(0.95) ; } 100% { transform: scaleX(1.00) scaleY(1.00) ; } } // MFM ----------------------------- ._mfm_blur_ { filter: blur(6px); transition: filter 0.3s; &:hover { filter: blur(0px); } } .mfm-x2 { --mfm-zoom-size: 200%; } .mfm-x3 { --mfm-zoom-size: 400%; } .mfm-x4 { --mfm-zoom-size: 600%; } .mfm-x2, .mfm-x3, .mfm-x4 { font-size: var(--mfm-zoom-size); .mfm-x2, .mfm-x3, .mfm-x4 { /* only half effective */ font-size: calc(var(--mfm-zoom-size) / 2 + 50%); .mfm-x2, .mfm-x3, .mfm-x4 { /* disabled */ font-size: 100%; } } } @keyframes mfm-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes mfm-spinX { 0% { transform: perspective(128px) rotateX(0deg); } 100% { transform: perspective(128px) rotateX(360deg); } } @keyframes mfm-spinY { 0% { transform: perspective(128px) rotateY(0deg); } 100% { transform: perspective(128px) rotateY(360deg); } } @keyframes mfm-jump { 0% { transform: translateY(0); } 25% { transform: translateY(-16px); } 50% { transform: translateY(0); } 75% { transform: translateY(-8px); } 100% { transform: translateY(0); } } @keyframes mfm-bounce { 0% { transform: translateY(0) scale(1, 1); } 25% { transform: translateY(-16px) scale(1, 1); } 50% { transform: translateY(0) scale(1, 1); } 75% { transform: translateY(0) scale(1.5, 0.75); } 100% { transform: translateY(0) scale(1, 1); } } // const val = () => `translate(${Math.floor(Math.random() * 20) - 10}px, ${Math.floor(Math.random() * 20) - 10}px)`; // let css = ''; // for (let i = 0; i <= 100; i += 5) { css += `${i}% { transform: ${val()} }\n`; } @keyframes mfm-twitch { 0% { transform: translate(7px, -2px) } 5% { transform: translate(-3px, 1px) } 10% { transform: translate(-7px, -1px) } 15% { transform: translate(0px, -1px) } 20% { transform: translate(-8px, 6px) } 25% { transform: translate(-4px, -3px) } 30% { transform: translate(-4px, -6px) } 35% { transform: translate(-8px, -8px) } 40% { transform: translate(4px, 6px) } 45% { transform: translate(-3px, 1px) } 50% { transform: translate(2px, -10px) } 55% { transform: translate(-7px, 0px) } 60% { transform: translate(-2px, 4px) } 65% { transform: translate(3px, -8px) } 70% { transform: translate(6px, 7px) } 75% { transform: translate(-7px, -2px) } 80% { transform: translate(-7px, -8px) } 85% { transform: translate(9px, 3px) } 90% { transform: translate(-3px, -2px) } 95% { transform: translate(-10px, 2px) } 100% { transform: translate(-2px, -6px) } } // const val = () => `translate(${Math.floor(Math.random() * 6) - 3}px, ${Math.floor(Math.random() * 6) - 3}px) rotate(${Math.floor(Math.random() * 24) - 12}deg)`; // let css = ''; // for (let i = 0; i <= 100; i += 5) { css += `${i}% { transform: ${val()} }\n`; } @keyframes mfm-shake { 0% { transform: translate(-3px, -1px) rotate(-8deg) } 5% { transform: translate(0px, -1px) rotate(-10deg) } 10% { transform: translate(1px, -3px) rotate(0deg) } 15% { transform: translate(1px, 1px) rotate(11deg) } 20% { transform: translate(-2px, 1px) rotate(1deg) } 25% { transform: translate(-1px, -2px) rotate(-2deg) } 30% { transform: translate(-1px, 2px) rotate(-3deg) } 35% { transform: translate(2px, 1px) rotate(6deg) } 40% { transform: translate(-2px, -3px) rotate(-9deg) } 45% { transform: translate(0px, -1px) rotate(-12deg) } 50% { transform: translate(1px, 2px) rotate(10deg) } 55% { transform: translate(0px, -3px) rotate(8deg) } 60% { transform: translate(1px, -1px) rotate(8deg) } 65% { transform: translate(0px, -1px) rotate(-7deg) } 70% { transform: translate(-1px, -3px) rotate(6deg) } 75% { transform: translate(0px, -2px) rotate(4deg) } 80% { transform: translate(-2px, -1px) rotate(3deg) } 85% { transform: translate(1px, -3px) rotate(-10deg) } 90% { transform: translate(1px, 0px) rotate(3deg) } 95% { transform: translate(-2px, 0px) rotate(-3deg) } 100% { transform: translate(2px, 1px) rotate(2deg) } } @keyframes mfm-rubberBand { from { transform: scale3d(1, 1, 1); } 30% { transform: scale3d(1.25, 0.75, 1); } 40% { transform: scale3d(0.75, 1.25, 1); } 50% { transform: scale3d(1.15, 0.85, 1); } 65% { transform: scale3d(0.95, 1.05, 1); } 75% { transform: scale3d(1.05, 0.95, 1); } to { transform: scale3d(1, 1, 1); } } @keyframes mfm-rainbow { 0% { filter: hue-rotate(0deg) contrast(150%) saturate(150%); } 100% { filter: hue-rotate(360deg) contrast(150%) saturate(150%); } }