diff options
Diffstat (limited to 'packages/client/src/style.scss')
| -rw-r--r-- | packages/client/src/style.scss | 584 |
1 files changed, 0 insertions, 584 deletions
diff --git a/packages/client/src/style.scss b/packages/client/src/style.scss deleted file mode 100644 index 8b7a846863..0000000000 --- a/packages/client/src/style.scss +++ /dev/null @@ -1,584 +0,0 @@ -@charset "utf-8"; - -:root { - --radius: 12px; - --marginFull: 16px; - --marginHalf: 10px; - - --margin: var(--marginFull); - - @media (max-width: 500px) { - --margin: var(--marginHalf); - } - - //--ad: rgb(255 169 0 / 10%); -} - -::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: '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) 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-1 { - font-size: 15px; - } - - &.f-2 { - font-size: 16px; - } - - &.f-3 { - font-size: 17px; - } - - &.useSystemFont { - font-family: 'Hiragino Maru Gothic Pro', 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); -} - -.ti { - vertical-align: -10%; - line-height: 0.9em; - - &: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 { - 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; - max-width: 100%; - - &, * { - @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; - } -} - -._inputs { - display: flex; - margin: 32px 0; - - &:first-child { - margin-top: 8px; - } - - &:last-child { - margin-bottom: 8px; - } - - > * { - flex: 1; - margin: 0 !important; - - &:not(:first-child) { - margin-left: 8px !important; - } - - &:not(:last-child) { - margin-right: 8px !important; - } - } -} - -._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; - } - } -} - -._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; -} - -// 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; - } -} - -._acrylic { - background: var(--acrylicPanel); - -webkit-backdrop-filter: var(--blur, blur(15px)); - backdrop-filter: var(--blur, blur(15px)); -} - -._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; - } -} - -._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; - } -} - -._keyValue { - display: flex; - - > * { - flex: 1; - } -} - -._link { - color: var(--link); -} - -._caption { - font-size: 0.8em; - opacity: 0.7; -} - -._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); } -} - -@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) ; - } -} |