This commit is contained in:
NoriDev 2023-09-28 20:29:27 +09:00
parent d24a5de2f3
commit 6466cf45cf
3 changed files with 20 additions and 606 deletions

View file

@ -218,30 +218,24 @@
<code>${JSON.stringify(details)}</code>`;
errorsElement.appendChild(detailsElement);
addStyle(`
@font-face {
font-family: 'Pretendard JP';
font-weight: 400;
font-display: swap;
src: local('Pretendard JP Regular'),
url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/packages/pretendard-jp/dist/web/static/woff2/PretendardJP-Regular.woff2') format('woff2'),
url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/packages/pretendard-jp/dist/web/static/woff/PretendardJP-Regular.woff') format('woff');
}
@font-face {
font-family: 'Pretendard JP';
font-weight: 700;
font-display: swap;
src: local('Pretendard JP Bold'),
url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/packages/pretendard-jp/dist/web/static/woff2/PretendardJP-Bold.woff2') format('woff2'),
url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/packages/pretendard-jp/dist/web/static/woff/PretendardJP-Bold.woff') format('woff');
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 400;
src: local("JetBrains Mono Regular"), local("JetBrainsMono-Regular"),
url("https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono@master/fonts/webfonts/JetBrainsMono-Regular.woff2") format("woff2");
font-display: swap; }
}
@import url("https://cdn.jsdelivr.net/npm/@fontsource/jetbrains-mono/100.css");
@import url("https://cdn.jsdelivr.net/npm/@fontsource/jetbrains-mono/100-italic.css");
@import url("https://cdn.jsdelivr.net/npm/@fontsource/jetbrains-mono/200.css");
@import url("https://cdn.jsdelivr.net/npm/@fontsource/jetbrains-mono/200-italic.css");
@import url("https://cdn.jsdelivr.net/npm/@fontsource/jetbrains-mono/300.css");
@import url("https://cdn.jsdelivr.net/npm/@fontsource/jetbrains-mono/300-italic.css");
@import url("https://cdn.jsdelivr.net/npm/@fontsource/jetbrains-mono/400.css");
@import url("https://cdn.jsdelivr.net/npm/@fontsource/jetbrains-mono/400-italic.css");
@import url("https://cdn.jsdelivr.net/npm/@fontsource/jetbrains-mono/500.css");
@import url("https://cdn.jsdelivr.net/npm/@fontsource/jetbrains-mono/500-italic.css");
@import url("https://cdn.jsdelivr.net/npm/@fontsource/jetbrains-mono/600.css");
@import url("https://cdn.jsdelivr.net/npm/@fontsource/jetbrains-mono/600-italic.css");
@import url("https://cdn.jsdelivr.net/npm/@fontsource/jetbrains-mono/700.css");
@import url("https://cdn.jsdelivr.net/npm/@fontsource/jetbrains-mono/700-italic.css");
@import url("https://cdn.jsdelivr.net/npm/@fontsource/jetbrains-mono/800.css");
@import url("https://cdn.jsdelivr.net/npm/@fontsource/jetbrains-mono/800-italic.css");
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css");
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-jp.css");
* {
font-family: "Pretendard JP", BIZ UDGothic, Roboto, HelveticaNeue, Arial, sans-serif;
@ -327,7 +321,7 @@
}
code {
font-family: "JetBrains Mono", Fira, FiraCode, monospace;
font-family: "JetBrains Mono", "Pretendard JP", Pretendard, Fira, FiraCode, monospace;
}
#errorInfo {

View file

@ -122,7 +122,7 @@ h1 {
code {
display: block;
font-family: Fira, FiraCode, monospace;
font-family: "JetBrains Mono", "Pretendard JP", Pretendard, Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
background: #333;
padding: 0.5rem 1rem;
max-width: 40rem;

View file

@ -1,580 +0,0 @@
@font-face {
font-family: "Pretendard JP";
font-weight: 400;
font-style: normal;
font-display: swap;
src: local("Pretendard JP Regular"), url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/packages/pretendard-jp/dist/web/static/woff2/PretendardJP-Regular.woff2") format("woff2");
}
@font-face {
font-family: "Pretendard JP";
font-weight: 700;
font-style: normal;
font-display: swap;
src: local("Pretendard JP Bold"), url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/packages/pretendard-jp/dist/web/static/woff2/PretendardJP-Bold.woff2") format("woff2");
}
@font-face {
font-family: "JetBrains Mono";
font-weight: 400;
font-style: normal;
font-display: swap;
src: local("JetBrains Mono Regular"), url("https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono@master/fonts/webfonts/JetBrainsMono-Regular.woff2") format("woff2");
}
@font-face {
font-family: "JetBrains Mono";
font-weight: 700;
font-style: normal;
font-display: swap;
src: local("JetBrains Mono Bold"), url("https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono@master/fonts/webfonts/JetBrainsMono-Bold.woff2") format("woff2");
}
:root {
--radius: 12px;
--marginFull: 16px;
--marginHalf: 10px;
--margin: var(--marginFull);
--minBottomSpacing: 0px;
--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);
}
@media (max-width: 500px) {
:root {
--margin: var(--marginHalf);
--minBottomSpacing: calc(72px + max(12px, env(safe-area-inset-bottom, 0px)));
}
}
::-moz-selection {
color: var(--fgOnAccent);
background-color: var(--accent);
}
::selection {
color: var(--fgOnAccent);
background-color: var(--accent);
}
html {
touch-action: manipulation;
background-color: var(--bg);
background-attachment: fixed;
background-size: cover;
background-position: center;
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;
font-size: 14px;
line-height: 1.35;
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
text-size-adjust: 100%;
-moz-tab-size: 2;
-o-tab-size: 2;
tab-size: 2;
}
html, html * {
scrollbar-color: var(--scrollbarHandle) inherit;
scrollbar-width: thin;
}
html::-webkit-scrollbar, html *::-webkit-scrollbar {
width: 6px;
height: 6px;
}
html::-webkit-scrollbar-track, html *::-webkit-scrollbar-track {
background: inherit;
}
html::-webkit-scrollbar-thumb, html *::-webkit-scrollbar-thumb {
background: var(--scrollbarHandle);
}
html::-webkit-scrollbar-thumb:hover, html *::-webkit-scrollbar-thumb:hover {
background: var(--scrollbarHandleHover);
}
html::-webkit-scrollbar-thumb:active, html *::-webkit-scrollbar-thumb:active {
background: var(--accent);
}
html.f-1 {
font-size: 7px;
}
html.f-2 {
font-size: 8px;
}
html.f-3 {
font-size: 9px;
}
html.f-4 {
font-size: 10px;
}
html.f-5 {
font-size: 11px;
}
html.f-6 {
font-size: 12px;
}
html.f-7 {
font-size: 13px;
}
html.f-8 {
font-size: 14px;
}
html.f-9 {
font-size: 15px;
}
html.f-10 {
font-size: 16px;
}
html.f-11 {
font-size: 17px;
}
html.f-12 {
font-size: 18px;
}
html.f-13 {
font-size: 19px;
}
html.f-14 {
font-size: 20px;
}
html.f-15 {
font-size: 21px;
}
html.f-16 {
font-size: 22px;
}
html.f-17 {
font-size: 23px;
}
html.f-18 {
font-size: 24px;
}
html.f-19 {
font-size: 25px;
}
html.useBoldFont {
font-weight: bold;
}
html.useSystemFont {
font-family: "Hiragino Maru Gothic Pro", sans-serif;
}
html._themeChanging_, html._themeChanging_ * {
transition: background 1s ease, border 1s ease !important;
}
html, body {
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;
}
a:hover {
text-decoration: underline;
}
a[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 {
vertical-align: -10%;
line-height: 0.9em;
}
.ti:before {
font-size: 130%;
}
.ti-fw {
display: inline-block;
text-align: center;
}
._indicatorCircle {
display: inline-block;
width: 1em;
height: 1em;
border-radius: 100%;
background: currentColor;
}
._noSelect, ._button, ._borderButton, ._textButton, ._buttonPrimary, ._buttonGradate, ._ghost {
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
}
._ghost {
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, ._borderButton, ._textButton, ._buttonPrimary, ._buttonGradate {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: inline-block;
padding: 0;
margin: 0;
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%;
}
._button:focus-visible, ._borderButton:focus-visible, ._textButton:focus-visible, ._buttonPrimary:focus-visible, ._buttonGradate:focus-visible {
outline: none;
}
._button:disabled, ._borderButton:disabled, ._textButton:disabled, ._buttonPrimary:disabled, ._buttonGradate:disabled {
opacity: 0.5;
cursor: default;
}
._buttonPrimary, ._buttonGradate {
color: var(--fgOnAccent);
background: var(--accent);
}
._buttonPrimary:not(:disabled):hover, ._buttonGradate:not(:disabled):hover {
background: var(--X8);
}
._buttonPrimary:not(:disabled):active, ._buttonGradate:not(:disabled):active {
background: var(--X9);
}
._buttonGradate {
color: var(--fgOnAccent);
background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
}
._buttonGradate:not(:disabled):hover {
background: linear-gradient(90deg, var(--X8), var(--X8));
}
._buttonGradate:not(:disabled):active {
background: linear-gradient(90deg, var(--X8), var(--X8));
}
._help {
color: var(--accent);
cursor: help;
}
._textButton {
color: var(--accent);
}
._textButton: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;
}
._borderButton {
display: block;
width: 100%;
padding: 10px;
box-sizing: border-box;
text-align: center;
border: solid 0.5px var(--divider);
border-radius: var(--radius);
}
._borderButton: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;
}
._table > ._row:not(:last-child) {
margin-bottom: 16px;
}
@media (max-width: 500px) {
._table > ._row:not(:last-child) {
margin-bottom: 8px;
}
}
._table > ._row > ._cell {
flex: 1;
}
._table > ._row > ._cell > ._label {
font-size: 80%;
opacity: 0.7;
}
._table > ._row > ._cell > ._label > ._icon {
margin-right: 4px;
display: none;
}
._fullinfo {
padding: 64px 32px;
text-align: center;
}
._fullinfo > 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, ._code {
font-family: "JetBrains Mono", "Pretendard JP", Fira code, Fira Mono, Consolas, Menlo, Courier, monospace !important;
}
._code {
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, 0.5, 0.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);
}
@-webkit-keyframes blink {
0% {
opacity: 1;
transform: scale(1);
}
30% {
opacity: 1;
transform: scale(1);
}
90% {
opacity: 0;
transform: scale(0.5);
}
}
@keyframes blink {
0% {
opacity: 1;
transform: scale(1);
}
30% {
opacity: 1;
transform: scale(1);
}
90% {
opacity: 0;
transform: scale(0.5);
}
}
@-webkit-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);
}
}
@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;
-webkit-animation: bounce ease 0.7s;
animation: bounce ease 0.7s;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
transform-origin: 50% 50%;
}
._anime_bounce_ready {
will-change: transform;
transform: scaleX(0.9) scaleY(0.9);
}
._anime_bounce_standBy {
transition: transform 0.1s ease;
}
@-webkit-keyframes bounce {
0% {
transform: scaleX(0.9) scaleY(0.9);
}
19% {
transform: scaleX(1.1) scaleY(1.1);
}
48% {
transform: scaleX(0.95) scaleY(0.95);
}
100% {
transform: scaleX(1) scaleY(1);
}
}
@keyframes bounce {
0% {
transform: scaleX(0.9) scaleY(0.9);
}
19% {
transform: scaleX(1.1) scaleY(1.1);
}
48% {
transform: scaleX(0.95) scaleY(0.95);
}
100% {
transform: scaleX(1) scaleY(1);
}
}/*# sourceMappingURL=style.css.map */