/* /Components/Layout/ReconnectModal.razor.rz.scp.css */ /* 再接続モーダル(Blazor テンプレート由来を全面調整)。 状態ごとの表示切替クラス(components-*-visible)はフレームワークが付ける #components-reconnect-modal のクラスと対。ここは見た目だけを持つ。 配色は (AdminLayout.razor → admin.js applyTheme)で切り替える。 サーキット切断後は JS を呼べないため CSS だけで完結させる必要があり、属性が付く前 (初回レンダー直後まで)の窓は prefers-color-scheme でフォールバックする。 MudBlazor の CSS 変数は使わない —— このモーダルは MudThemeProvider の外側にあり、 変数が未定義になると「白地に白文字」に落ちるため(ダークモードの視認性不具合の原因)。 */ .components-reconnect-first-attempt-visible[b-dwf0ojwxpp], .components-reconnect-repeated-attempt-visible[b-dwf0ojwxpp], .components-reconnect-failed-visible[b-dwf0ojwxpp], .components-pause-visible[b-dwf0ojwxpp], .components-resume-failed-visible[b-dwf0ojwxpp], .components-rejoining-animation[b-dwf0ojwxpp] { display: none; } #components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-dwf0ojwxpp], #components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-dwf0ojwxpp], #components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-dwf0ojwxpp], #components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-dwf0ojwxpp], #components-reconnect-modal.components-reconnect-retrying[b-dwf0ojwxpp], #components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-dwf0ojwxpp], #components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-dwf0ojwxpp], #components-reconnect-modal.components-reconnect-failed[b-dwf0ojwxpp], #components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-dwf0ojwxpp] { display: block; } /* Blazor は状態クラスを積み増しで付ける(再接続中は show と retrying が同時に付く)。 後段の状態が出たら前段の文言と待機アニメーションを隠し、2つの状態が同時に見える ようにしない。同詳細度なので上の display:block より後ろに置くことで打ち消す */ #components-reconnect-modal.components-reconnect-retrying .components-reconnect-first-attempt-visible[b-dwf0ojwxpp], #components-reconnect-modal.components-reconnect-failed .components-reconnect-first-attempt-visible[b-dwf0ojwxpp], #components-reconnect-modal.components-reconnect-failed .components-reconnect-repeated-attempt-visible[b-dwf0ojwxpp], #components-reconnect-modal.components-reconnect-failed .components-rejoining-animation[b-dwf0ojwxpp], #components-reconnect-modal.components-reconnect-paused .components-reconnect-first-attempt-visible[b-dwf0ojwxpp], #components-reconnect-modal.components-reconnect-paused .components-reconnect-repeated-attempt-visible[b-dwf0ojwxpp], #components-reconnect-modal.components-reconnect-paused .components-rejoining-animation[b-dwf0ojwxpp], #components-reconnect-modal.components-reconnect-resume-failed .components-reconnect-first-attempt-visible[b-dwf0ojwxpp], #components-reconnect-modal.components-reconnect-resume-failed .components-reconnect-repeated-attempt-visible[b-dwf0ojwxpp], #components-reconnect-modal.components-reconnect-resume-failed .components-rejoining-animation[b-dwf0ojwxpp] { display: none; } /* ---- 配色トークン(ライト既定) ---- */ #components-reconnect-modal[b-dwf0ojwxpp] { --rc-surface: #ffffff; --rc-surface-accent: #f1f5f9; /* slate-100: アイコンの座 */ --rc-text: #0f172a; /* AdminTheme PaletteLight.TextPrimary */ --rc-text-muted: #475569; /* 同 TextSecondary。白地で約 7:1 */ --rc-border: #e2e8f0; /* 同 LinesDefault */ --rc-accent: #0284c7; /* brand-600 */ --rc-accent-hover: #0369a1; /* brand-700 */ --rc-on-accent: #ffffff; --rc-danger: #dc2626; --rc-backdrop: rgb(2 6 23 / 0.55); --rc-shadow: 0 24px 56px -24px rgb(8 47 73 / 0.55), 0 2px 8px rgb(8 47 73 / 0.12); } /* ダーク: 管理画面の配色設定(localStorage)が正。AdminLayout が属性で伝える */ :root[data-admin-theme="dark"] #components-reconnect-modal[b-dwf0ojwxpp] { --rc-surface: #1e293b; /* AdminTheme PaletteDark.Surface */ --rc-surface-accent: #0f172a; /* 同 Background */ --rc-text: #e2e8f0; /* 同 TextPrimary。濃紺地で約 12:1 */ --rc-text-muted: #94a3b8; /* 同 TextSecondary。約 5.6:1 */ --rc-border: #334155; /* 同 LinesDefault */ --rc-accent: #38bdf8; /* brand-400(濃色地で読める段) */ --rc-accent-hover: #7dd3fc; /* brand-300 */ --rc-on-accent: #0f172a; /* 明るい水色地には濃色文字(約 9:1) */ --rc-danger: #f87171; --rc-backdrop: rgb(2 6 23 / 0.72); --rc-shadow: 0 24px 56px -24px rgb(0 0 0 / 0.7), 0 2px 8px rgb(0 0 0 / 0.35); } /* 属性が付く前(初回レンダー直後まで)の窓だけ OS 設定に従う */ @media (prefers-color-scheme: dark) { :root:not([data-admin-theme]) #components-reconnect-modal[b-dwf0ojwxpp] { --rc-surface: #1e293b; --rc-surface-accent: #0f172a; --rc-text: #e2e8f0; --rc-text-muted: #94a3b8; --rc-border: #334155; --rc-accent: #38bdf8; --rc-accent-hover: #7dd3fc; --rc-on-accent: #0f172a; --rc-danger: #f87171; --rc-backdrop: rgb(2 6 23 / 0.72); --rc-shadow: 0 24px 56px -24px rgb(0 0 0 / 0.7), 0 2px 8px rgb(0 0 0 / 0.35); } } /* ---- モーダル本体 ---- */ #components-reconnect-modal[b-dwf0ojwxpp] { width: min(24rem, calc(100vw - 2rem)); margin: 20vh auto; padding: 2rem 1.75rem 1.75rem; border: 1px solid var(--rc-border); border-radius: 1rem; background-color: var(--rc-surface); color: var(--rc-text); /* 継承元(body)の文字色に頼らない=地色との同化を防ぐ */ box-shadow: var(--rc-shadow); opacity: 0; transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete; animation: components-reconnect-modal-fadeOutOpacity-b-dwf0ojwxpp 0.5s both; } #components-reconnect-modal[open][b-dwf0ojwxpp] { animation: components-reconnect-modal-slideUp-b-dwf0ojwxpp 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-dwf0ojwxpp 0.5s ease-in-out 0.3s; animation-fill-mode: both; } #components-reconnect-modal[b-dwf0ojwxpp]::backdrop { background-color: var(--rc-backdrop); backdrop-filter: blur(3px); animation: components-reconnect-modal-fadeInOpacity-b-dwf0ojwxpp 0.5s ease-in-out; opacity: 1; } @keyframes components-reconnect-modal-slideUp-b-dwf0ojwxpp { 0% { transform: translateY(30px) scale(0.95); } 100% { transform: translateY(0); } } @keyframes components-reconnect-modal-fadeInOpacity-b-dwf0ojwxpp { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes components-reconnect-modal-fadeOutOpacity-b-dwf0ojwxpp { 0% { opacity: 1; } 100% { opacity: 0; } } .components-reconnect-container[b-dwf0ojwxpp] { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; } /* ---- 文字組み ---- */ #components-reconnect-modal p[b-dwf0ojwxpp] { margin: 0; text-align: center; } .components-reconnect-title[b-dwf0ojwxpp] { font-size: 1.0625rem; font-weight: 700; line-height: 1.5; color: var(--rc-text); } .components-reconnect-note[b-dwf0ojwxpp] { font-size: 0.8125rem; line-height: 1.7; color: var(--rc-text-muted); } /* 再試行までの残り秒数(桁で揺れないように等幅字形) */ #components-seconds-to-next-attempt[b-dwf0ojwxpp] { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--rc-text); } /* 失敗状態のアイコン(色だけに頼らず記号でも状態を示す=color-not-only)。 display を持つのでこのクラスは表示切替クラスと同じ要素に付けない(razor 側のコメント参照) */ .components-reconnect-icon[b-dwf0ojwxpp] { display: flex; align-items: center; justify-content: center; width: 3.25rem; height: 3.25rem; margin-bottom: 0.25rem; border-radius: 9999px; background-color: var(--rc-surface-accent); color: var(--rc-danger); } .components-reconnect-icon svg[b-dwf0ojwxpp] { width: 1.75rem; height: 1.75rem; } /* ---- ボタン(タッチターゲット 44px を確保) ---- */ #components-reconnect-modal button[b-dwf0ojwxpp] { min-height: 2.75rem; margin-top: 0.75rem; padding: 0.625rem 1.75rem; border: 0; border-radius: 0.625rem; background-color: var(--rc-accent); color: var(--rc-on-accent); font-family: inherit; font-size: 0.9375rem; font-weight: 600; cursor: pointer; transition: background-color 0.2s ease, transform 0.12s ease; } #components-reconnect-modal button:hover[b-dwf0ojwxpp] { background-color: var(--rc-accent-hover); } #components-reconnect-modal button:active[b-dwf0ojwxpp] { transform: scale(0.98); } /* ---- 接続中のリング(2重の波紋) ---- */ .components-rejoining-animation[b-dwf0ojwxpp] { position: relative; width: 72px; height: 72px; margin-bottom: 0.25rem; } .components-rejoining-animation div[b-dwf0ojwxpp] { position: absolute; border: 3px solid var(--rc-accent); opacity: 1; border-radius: 50%; animation: components-rejoining-animation-b-dwf0ojwxpp 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite; } .components-rejoining-animation div:nth-child(2)[b-dwf0ojwxpp] { animation-delay: -0.5s; } @keyframes components-rejoining-animation-b-dwf0ojwxpp { 0% { top: 36px; left: 36px; width: 0; height: 0; opacity: 0; } 4.9% { top: 36px; left: 36px; width: 0; height: 0; opacity: 0; } 5% { top: 36px; left: 36px; width: 0; height: 0; opacity: 1; } 100% { top: 0px; left: 0px; width: 72px; height: 72px; opacity: 0; } } /* OS の「視差効果を減らす」設定を尊重(公開側 app.css と同じ方針)。 波紋は状態表示なので消さず、入場アニメーションだけ止める */ @media (prefers-reduced-motion: reduce) { #components-reconnect-modal[b-dwf0ojwxpp], #components-reconnect-modal[open][b-dwf0ojwxpp], #components-reconnect-modal[b-dwf0ojwxpp]::backdrop { animation: none; opacity: 1; } #components-reconnect-modal button[b-dwf0ojwxpp] { transition: none; } #components-reconnect-modal button:active[b-dwf0ojwxpp] { transform: none; } }