@charset "utf-8"; :root { --radius: 12px; --marginFull: 16px; --marginHalf: 10px; --margin: var(--marginFull); @media (max-width: 500px) { --margin: var(--marginHalf); } } ::selection { color: #fff; 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: "BIZ UDGothic", Roboto, HelveticaNeue, Arial, sans-serif; font-size: 15px; line-height: 1.35; text-size-adjust: 100%; tab-size: 2; &, * { scrollbar-color: var(--scrollbarHandle) inherit; 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-small { font-size: 0.9em; } &.f-large { font-size: 1.1em; } &.f-veryLarge { font-size: 1.2em; } &.useSystemFont { font-family: sans-serif; } } 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; &:hover { text-decoration: underline; } } 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); } ._noSelect { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } ._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 { 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; &, * { @extend ._noSelect; } * { pointer-events: none; } &: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; } ._block { @extend ._panel; & + ._block { margin-top: var(--margin); } } ._gap { margin: var(--margin) 0; } // TODO: 廃止 ._card { @extend ._panel; // TODO: _cardTitle に > ._title { margin: 0; padding: 22px 32px; font-size: 1em; border-bottom: solid 1px var(--panelHeaderDivider); font-weight: bold; background: var(--panelHeaderBg); color: var(--panelHeaderFg); @media (max-width: 500px) { padding: 16px; font-size: 1em; } } // TODO: _cardContent に > ._content { padding: 32px; @media (max-width: 500px) { padding: 16px; } &._noPad { padding: 0 !important; } & + ._content { border-top: solid 0.5px var(--divider); } } // TODO: _cardFooter に > ._footer { border-top: solid 0.5px var(--divider); padding: 24px 32px; @media (max-width: 500px) { padding: 16px; } } } ._popup { background: var(--popup); border-radius: var(--radius); contain: content; } // TODO: 廃止 ._monolithic_ { ._section:not(:empty) { box-sizing: border-box; padding: var(--root-margin, 32px); @media (max-width: 500px) { --root-margin: 10px; } & + ._section:not(:empty) { border-top: solid 0.5px var(--divider); } } } ._narrow_ ._card { > ._title { padding: 16px; font-size: 1em; } > ._content { padding: 16px; } > ._footer { padding: 16px; } } ._formBlock { margin: 1.5em 0; } ._formRoot { > ._formBlock:first-child { margin-top: 0; } > ._formBlock:last-child { margin-bottom: 0; } } ._formLinksGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-gap: 12px; } ._formLinks { > *:not(:last-child) { margin-bottom: 8px; } } ._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); } ._monospace { font-family: 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; } .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); } .zoom-enter-active, .zoom-leave-active { transition: opacity 0.5s, transform 0.5s !important; } .zoom-enter-from, .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); } }