/* ============================================================ boot.css — 起動ローディング画面 & テーマのクロスフェード ------------------------------------------------------------ 役割（editor / diff-viewer の両方で読み込む共通スタイル）: 1. 起動中は UI を隠してフルスクリーンのローダーだけ見せ、 テーマ・設定の読み込みが終わってから滑らかに UI を出す。 2. テーマ切り替え時に色・枠・影・アイコン色をフェードで反映する。 theme の CSS 変数を使うので、各テーマの色がそのまま反映される。 ============================================================ */ /* ---- ローディング画面（フルスクリーン） -------------------- */ .boot-loader{ position:fixed;inset:0;z-index:9999; display:flex;align-items:center;justify-content:center; background: radial-gradient(120% 120% at 50% 0%, var(--brand-tint-1) 0%, var(--surface) 55%, var(--panel) 100%); opacity:0;transition:opacity .12s ease; } .boot-loader[hidden]{display:none} .boot-loader.show{opacity:1} .boot-loader.hiding{opacity:0} /* 初期ローダーのフェードアウトは通常より少し長め＝滑らか */ .boot-loader.boot-fade-out{transition:opacity .42s ease} .boot-loader-card{ display:flex;flex-direction:column;align-items:center;gap:26px; padding:44px 56px;border-radius:22px; background:var(--panel); border:1px solid var(--border); box-shadow:0 24px 70px -24px color-mix(in srgb, var(--brand) 40%, transparent), 0 4px 14px rgba(0,0,0,.06); transform:translateY(8px) scale(.98);opacity:0; animation:boot-card-in .5s cubic-bezier(.2,.8,.2,1) forwards; } @keyframes boot-card-in{to{transform:translateY(0) scale(1);opacity:1}} /* スピナー：二重リングが逆回転＋中央ドットが脈動 */ .boot-spinner{position:relative;width:72px;height:72px} .boot-ring{ position:absolute;inset:0;border-radius:50%; border:4px solid transparent; border-top-color:var(--brand);border-right-color:var(--brand-soft); animation:boot-spin 1s linear infinite; } .boot-ring-2{ inset:12px;border-width:3px; border-top-color:var(--brand-soft);border-left-color:var(--brand); border-right-color:transparent; animation:boot-spin 1.4s linear infinite reverse; opacity:.7; } .boot-dot{ position:absolute;top:50%;left:50%;width:14px;height:14px;margin:-7px 0 0 -7px; border-radius:50%;background:var(--brand); box-shadow:0 0 0 0 color-mix(in srgb, var(--brand) 50%, transparent); animation:boot-pulse 1.2s ease-in-out infinite; } @keyframes boot-spin{to{transform:rotate(360deg)}} @keyframes boot-pulse{ 0%,100%{transform:scale(.85);box-shadow:0 0 0 0 color-mix(in srgb, var(--brand) 45%, transparent)} 50%{transform:scale(1.1);box-shadow:0 0 0 10px color-mix(in srgb, var(--brand) 0%, transparent)} } /* タイトル：ブランドグラデーションが流れる文字 */ .boot-title{ font-size:19px;font-weight:800;letter-spacing:.02em; background:linear-gradient(90deg, var(--brand) 0%, var(--brand-soft) 35%, var(--brand) 70%); background-size:200% auto; -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; animation:boot-shine 2.4s linear infinite; } @keyframes boot-shine{to{background-position:200% center}} /* サブタイトル：現在の作業状態（フォルダ読み込み中／Lintスキャン中 N/M 等）。 タイトルより小さく薄く、長文も省略表示にする。空のときは高さを取らない。 */ .boot-subtitle{ font-size:12px;color:var(--muted);letter-spacing:.01em; max-width:280px;text-align:center; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; min-height:1em; } .boot-subtitle:empty{display:none} /* プログレスバー：擬似進捗＋光が流れるシマー */ .boot-progress{ width:240px;height:7px;border-radius:99px;overflow:hidden; background:var(--brand-tint-2); } .boot-progress-bar{ height:100%;width:0%;border-radius:99px; background:linear-gradient(90deg, var(--brand) 0%, var(--brand-soft) 100%); transition:width 1.1s cubic-bezier(.22,.61,.36,1); position:relative;overflow:hidden; } .boot-progress-bar::after{ content:"";position:absolute;inset:0; background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); transform:translateX(-100%); animation:boot-shimmer 1.1s ease-in-out infinite; } @keyframes boot-shimmer{to{transform:translateX(100%)}} /* ---- 起動中の表示制御（チラつき防止） ---------------------- は head 内のインラインスクリプトが最初の描画前に付与する。 これにより、テーマ・設定が確定するまで UI 本体（.app）と広告レールを隠し、 ローダーだけを最初のフレームから表示する。 */ html.booting #bootLoader{display:flex;opacity:1} html.booting .app{opacity:0} html.booting .ad-rail{opacity:0} /* 読み込み完了時に .app／広告レールをふわっと表示（booting を外すとフェードイン） */ .app{transition:opacity .42s ease} .ad-rail{transition:opacity .42s ease} /* ---- テーマ切り替え時のクロスフェード ---------------------- テーマ変更（CSS変数の差し替え）の瞬間だけ を付け、 背景色・文字色・枠線・影・アイコン色を滑らかに補間する。 常時 transition を張ると通常操作が重くなるため、切替時のワンショットに限定する。 */ html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after{ transition: background-color .42s ease, color .42s ease, border-color .42s ease, fill .42s ease, stroke .42s ease, box-shadow .42s ease !important; } /* アニメーション抑制設定の尊重 */ @media (prefers-reduced-motion: reduce){ .boot-ring,.boot-ring-2,.boot-dot,.boot-title,.boot-progress-bar::after,.boot-loader-card{animation:none} .boot-loader-card{opacity:1;transform:none} .app,.ad-rail,.boot-loader.boot-fade-out{transition:none} html.theme-anim,html.theme-anim *,html.theme-anim *::before,html.theme-anim *::after{transition:none !important} }