herryyun
7c25c89992
CI / test (ubuntu-latest, node 22) (push) Failing after 33m10s
CI / test (ubuntu-latest, node 24) (push) Failing after 34m41s
CI / tooling (lint, imports, typecheck) (push) Failing after 36m11s
CI / test (windows-latest, node 22) (push) Canceled after 0s
CI / test (windows-latest, node 24) (push) Canceled after 0s
46 lines
3.7 KiB
CSS
46 lines
3.7 KiB
CSS
/* Feature-local styles: keep upstream title/components styles untouched. */
|
|
.sp-binding-callsign { display: grid; gap: .1rem; margin: 0; }
|
|
.sp-binding-callsign__label { display: flex; align-items: baseline; gap: .1rem; color: var(--text-lo); font-size: calc(.15 * var(--t)); font-weight: 500; letter-spacing: .04em; }
|
|
.sp-binding-callsign__name { display: flex; align-items: center; gap: .12rem; margin: 0; color: var(--text-hi); font-size: calc(.26 * var(--t)); font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
|
|
.sp-binding-callsign__icon { flex: none; color: var(--text-lo); }
|
|
.sp-binding-callsign__name > span { min-width: 0; }
|
|
.sp-binding-entry { display: flex; justify-content: flex-end; width: 4.9rem; margin-top: -.08rem; }
|
|
.sp-binding-entry:empty { display: none; }
|
|
.sp-binding-entry > .btn { max-width: 100%; white-space: normal; text-align: left; }
|
|
.sp-binding .modal__body { display: grid; gap: .2rem; font-size: calc(.18 * var(--t)); }
|
|
.sp-binding__intro { color: var(--text-lo); line-height: 1.6; margin: 0; }
|
|
.sp-binding__tabs, .sp-binding__channels, .sp-binding__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .12rem; }
|
|
.sp-binding__channels { color: var(--text-lo); font-size: calc(.15 * var(--t)); }
|
|
.sp-binding__channels > span { display: inline-flex; align-items: center; gap: .08rem; }
|
|
.sp-binding__brand { width: .26rem; height: .26rem; object-fit: contain; flex: none; }
|
|
.sp-binding__scan { display: grid; justify-items: center; gap: .16rem; text-align: center; }
|
|
.sp-binding__scan p { margin: 0; }
|
|
.sp-binding__qr { width: 2.4rem; height: 2.4rem; max-width: 100%; image-rendering: pixelated; background: #fff; }
|
|
.sp-binding__form, .sp-binding__roles { display: grid; gap: .16rem; }
|
|
.sp-binding__form p, .sp-binding__roles p { margin: 0; line-height: 1.6; }
|
|
.sp-binding__code { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: .12rem; }
|
|
.sp-binding__field { min-width: 0; }
|
|
.sp-binding__role { justify-content: flex-start; gap: .14rem; height: auto; min-height: .65rem; text-align: left; white-space: normal; }
|
|
.sp-binding__role > span { display: grid; gap: .04rem; overflow-wrap: anywhere; }
|
|
.sp-binding__role small { color: var(--text-lo); font-size: calc(.14 * var(--t)); }
|
|
.sp-binding__error { color: var(--red); overflow-wrap: anywhere; }
|
|
.sp-binding__notice { color: var(--mint-500); }
|
|
.sp-binding__captcha { border-top: 1px solid var(--line-2); padding-top: .16rem; }
|
|
.sp-binding__verifying { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; background: rgba(0, 0, 0, .75); color: var(--text-hi); font-size: calc(.2 * var(--t)); }
|
|
|
|
/* Short landscape screens: the title scene can be taller than the browser's visual viewport. Anchor the account box
|
|
to the top of the overlay and let its body scroll, so the close action and role list remain reachable. */
|
|
@media (max-height: 600px) {
|
|
.sp-binding { align-self: start; max-height: calc(100dvh - .3rem); margin-top: .15rem; }
|
|
.sp-binding .modal__head { padding-top: .12rem; }
|
|
.sp-binding .modal__body { padding-top: .1rem; padding-bottom: .14rem; }
|
|
.sp-binding .modal__actions { padding-top: .1rem; padding-bottom: .1rem; }
|
|
}
|
|
|
|
/* Recovery remains readable on another device even at the game's smallest landscape root scale. */
|
|
.sp-account-resume { width: min(94vw, max(6.8rem, 420px)); max-height: calc(100dvh - 24px); }
|
|
.sp-account-resume .modal__title { font-size: max(18px, calc(.26 * var(--t))); }
|
|
.sp-account-resume .modal__body { display: grid; gap: max(.16rem, 10px); font-size: max(14px, calc(.18 * var(--t))); line-height: 1.7; }
|
|
.sp-account-resume .modal__body p { margin: 0; }
|
|
.sp-account-resume .btn { min-height: 44px; font-size: max(14px, calc(.17 * var(--t))); }
|