/* ============================================================ GraphScript — style.css UIカスタマイズはここを編集してください ============================================================ */ /* ⚠ @import は CSS 仕様上「他のルールより前」でなければならない (それ以外の位置だと無視される)。 Google Fonts の読み込みもここで先頭に置く。 */ @import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Syne:wght@400;700;800&display=swap'); /* ============================================================ ★ Boot Loader — GSAnim をポップアップで開いた瞬間に表示 ノード画面のチラ見えを防ぐためのスプラッシュ。 が のインライン JS で セットされた直後から、メイン UI を完全に隠してロゴだけを表示する。 ============================================================ */ #gs-boot-loader { display: none; /* 通常時は非表示 */ position: fixed; inset: 0; background: #2d2d2d; z-index: 9999999; align-items: center; justify-content: center; flex-direction: column; gap: 22px; /* 背景は最初から見える (フラッシュ防止)、要素は logo / text 個別にフェード */ } #gs-boot-loader-logo { width: 240px; max-width: 60vw; height: auto; /* 光彩: 白〜薄水色 (GSAnim ティール #45ffe8 と相性が良い淡いハロー) ※ 2 重 drop-shadow で内側=ニュートラル白、外側=ほんのり水色の余韻 */ filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.55)) drop-shadow(0 6px 32px rgba(180, 245, 240, 0.35)); /* 浮き上がり: 透明 + 下から → 不透明 + 元位置、その後ゆっくりパルス */ animation: gs-boot-logo-rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards, gs-boot-logo-pulse 2.4s ease-in-out infinite 0.9s; opacity: 0; } #gs-boot-loader-text { font-family: 'Syne', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.32em; color: #a8a8a8; text-transform: uppercase; animation: gs-boot-text-fadein 0.6s ease-out 0.5s forwards, gs-boot-text-blink 2.4s ease-in-out infinite 1.1s; opacity: 0; } /* boot 状態: メイン UI をすべて隠して、ローダーだけ表示 */ html.gs-boot-animator body > *:not(#gs-boot-loader) { visibility: hidden !important; } html.gs-boot-animator #gs-boot-loader { display: flex !important; } /* ── ロゴの浮き上がり (フェードイン) ── */ @keyframes gs-boot-logo-rise { from { opacity: 0; transform: scale(0.88) translateY(14px); } to { opacity: 0.9; transform: scale(1) translateY(0); } } /* ── ロゴの常時パルス (フェードイン後) ── */ @keyframes gs-boot-logo-pulse { 0%, 100% { opacity: 0.85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.025); } } /* ── テキストのフェードイン ── */ @keyframes gs-boot-text-fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 0.7; transform: translateY(0); } } @keyframes gs-boot-text-blink { 0%, 100% { opacity: 0.45; } 50% { opacity: 0.85; } } /* ── 全体フェードアウト (JS が呼ぶ) ── */ @keyframes gs-boot-fadeout { from { opacity: 1; } to { opacity: 0; } } #gs-boot-loader.gs-boot-loader-fadeout { animation: gs-boot-fadeout 0.6s cubic-bezier(0.4, 0, 1, 1) forwards; } /* ── Google Fonts は最上部に移動済み (CSS 仕様上 @import は先頭必須) ── */ /* ── Design Tokens（ここを変えるだけでテーマ全体が変わります） ── */ :root { /* =========================================================== カラーシステム（2層構造） - カテゴリ色（--cat-*）: ノードの「分類」を表す静的な色。彩度は控えめ。 - 状態色（--state-*） : 「OK / エラー / 警告 / 情報」を表す動的な色。彩度フル。 カテゴリ色と状態色は同じ色相を避けて視覚的衝突を回避する。 状態色は「色だけ」でなく「形・アイコン・リング」と組み合わせて使うこと。 =========================================================== */ /* ── Photoshop ダークモード相当（GSAnim と同じトーン） ───────────── */ --bg: #2d2d2d; /* メインキャンバス = PS ワークスペース */ --surface: #353535; /* やや明るい層（パネル背景） */ --surface-2: #3a3a3a; /* さらに明るい層（パネル本体） */ --border: #4a4a4a; /* ソフトな境界線 */ --text: #e0e0e0; /* 本文テキスト */ --text-muted: #a8a8a8; /* 控えめテキスト */ --grid-dot: rgba(255, 255, 255, 0.07); /* 中性グレー上のドット */ /* ── 状態色（彩度フル、シミュ／検証で使う通知色） ───────── */ --state-success: #16d6a7; /* OK / True — ティールグリーン（カテゴリ緑とは別系統） */ --state-error: #ff3355; /* NG / False / 削除 — 鮮赤（カテゴリ赤と別系統） */ --state-warning: #ffb800; /* 警告 — アンバー（カテゴリ黄と別系統） */ --state-info: #4dabf7; /* 情報 / ヒント / ジャンプ */ --state-progress: #ffd479; /* 進行中 / 部分達成 / 条件設定あり */ --state-locked: #888; /* ロック / 無効 */ /* ── レガシー互換: 既存の --accent / --danger は維持（多数の参照あり） ── */ --accent: #7ee8a2; /* メインアクセント：緑（選択枠などUIプリミティブ用） */ --accent-2: #f9d423; /* サブアクセント：黄 */ --danger: #ff6b6b; /* 危険色（削除ボタン等） */ /* コネクター（接続線の種類別） */ --conn-in: #f9d423; /* 黄：IN（遷移受け） */ --conn-out: #7ee8a2; /* 黄緑：OUT（遷移） */ --conn-param: #bd93f9; /* 紫：パラメータ */ --conn-ui: #4a9eff; /* 青：UI */ --conn-flag: #cc44aa; /* 赤紫：フラグI/O */ --start-color: #4a9eff; /* STARTノードの枠色 */ /* ── カテゴリ色（ノード分類用、彩度を抑えて「識別色」として落ち着いた印象に） ─── */ /* Scenario 系 */ --cat-event: #8fdba6; /* やや穏やかな緑 */ --cat-dialogue: #f0b87a; /* 落ち着いたオレンジ */ --cat-choice: #e6c757; /* くすんだ黄 */ --cat-caseevent: #e088bd; /* ソフトマゼンタ */ --cat-spotdiff: #e88aa9; /* ダスティピンク */ --cat-anomaly: #b399db; /* ラベンダーパープル */ /* Logic 系 */ --cat-condition: #a29bfe; --cat-param: #b39ce8; /* ややくすんだバイオレット */ --cat-timer: #8ddbc6; /* ソフトティール */ --cat-flag-hub: #c25fae; /* くすんだマゼンタ */ --cat-flag-relay: #d894c5; /* マゼンタ系（FlagHubの仲間として淡め） */ --cat-flag-dev: #c25fae; /* UI 系 */ --cat-ui: #6da3d8; /* くすんだ青 */ --cat-ui-relay: #6da3d8; --cat-ui-custom: #ffa07a; /* サーモン */ --cat-pose: #d878a1; /* ローズピンク（やや抑え） */ --cat-asset: #e8b075; /* ピーチ（落ち着き） */ /* System 系 */ --cat-title: #e6c757; --cat-config: #8ddbc6; --cat-savepoint: #7dcfb6; --cat-gallery: #f0a85a; /* ゴールド（やや抑え） */ --cat-trophy: #e8c647; /* くすんだゴールド（実績の象徴は維持） */ --cat-scene: #a8d8e8; /* ソフトシアン */ --cat-minigame: #82c989; /* くすんだグリーン */ /* Meta */ --cat-ending: #e88080; /* ややくすんだ赤 */ --cat-start: #6da3d8; --cat-return: #e6c757; /* ── シーン種別色（Event ノードの ADV/InGame/OutGame タブ） ─── */ --scene-adv: var(--accent); /* セリフ進行＝緑（dialogue系統） */ --scene-ingame: #4a9eff; /* ゲームプレイ＝青 */ --scene-outgame: #ffb86c; /* メニュー/タイトル＝橙 */ /* タイポグラフィ */ --font-ui: 'Syne', sans-serif; --font-mono: 'Space Mono', monospace; /* ノード（パネル風に少し明るい） */ --node-bg: #3a3a3a; --node-border: #555555; --node-radius: 10px; --node-w: 220px; /* ツールバー（ワークスペースより少し暗め） */ --toolbar-h: 52px; --toolbar-bg: #252525; /* サイドエディタ（パネル風） */ --editor-bg: #353535; --editor-w: 280px; /* リサイザー */ --resizer-w: 5px; --resizer-bg: #4a4a4a; /* シャドウ */ --shadow-node: 0 8px 32px rgba(0,0,0,0.5); --shadow-btn: 0 2px 8px rgba(0,0,0,0.4); } /* ライトモード上書き（--light-* で定義） */ body.light-mode { --bg: #f0f2f8; --surface: #ffffff; --surface-2: #e8ebf5; --border: #cdd3e8; --text: #1e2333; --text-muted: #8a96b8; --grid-dot: rgba(50, 60, 120, 0.1); --node-bg: #ffffff; --node-border: #cdd3e8; --toolbar-bg: #e0e4f0; --editor-bg: #f7f8fc; --resizer-bg: #cdd3e8; } /* ── リセット & ベース ─────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { background: var(--bg); color: var(--text); font-family: var(--font-ui); overflow: hidden; display: flex; flex-direction: column; height: 100vh; } /* ── タイトルバー（ロゴ帯） ────────────────────────────────── */ #title-bar { height: 22px; background: #1c1c1c; /* PS タイトルバー風 */ border-bottom: 1px solid #3a3a3a; display: flex; align-items: center; padding: 0 14px; gap: 10px; flex-shrink: 0; user-select: none; z-index: 101; } .title-bar-name { font-family: var(--font-ui); font-size: 11px; font-weight: 800; letter-spacing: 0.14em; color: #74ebd5; text-transform: uppercase; } .title-bar-sub { font-family: var(--font-mono); font-size: 9px; color: rgba(200,208,232,0.2); letter-spacing: 0.06em; } /* ── ツールバー ────────────────────────────────────────────── */ #toolbar { height: var(--toolbar-h); background: var(--toolbar-bg); border-bottom: 1px solid var(--border); display: flex; align-items: flex-end; /* ★ 下揃え：セクションのボタン行と単独ボタンが一直線に */ padding: 0 10px 4px; gap: 0; z-index: 100; flex-shrink: 0; overflow: visible; /* ★ ドロップダウンがクリップされないように */ } /* 左側：スクロール可（ボタンが多くても右側を押し出さない） */ .toolbar-left { display: flex; align-items: flex-end; /* ★ 下揃え */ gap: 6px; flex: 1; min-width: 0; overflow-x: auto; overflow-y: visible; /* ★ ドロップダウン許可 */ scrollbar-width: none; /* Firefox */ padding-right: 8px; } .toolbar-left::-webkit-scrollbar { display: none; } /* Chrome */ /* 右側：常に表示・縮まない */ .toolbar-right { display: flex; align-items: flex-end; /* ★ 下揃え */ gap: 6px; flex-shrink: 0; border-left: 1px solid var(--border); padding-left: 10px; margin-left: 4px; } /* 目玉アイコンボタン（VIEW セクション - メンバー割り振り表示トグル） */ .btn.btn-browse-eye { font-size: 15px; padding: 4px 12px; background: #2a2a30; border: 1px solid #44444a; color: #a8a8a8; min-width: 38px; transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.2s; } .btn.btn-browse-eye:hover { background: #3a3a40; border-color: #5a5a5a; color: #e9d8fd; } .btn.btn-browse-eye.members-browse-eye-active { background: rgba(192, 132, 252, 0.22); border-color: #c084fc; color: #e9d8fd; box-shadow: 0 0 10px rgba(192, 132, 252, 0.55), inset 0 0 6px rgba(192, 132, 252, 0.2); } .btn.btn-browse-eye.members-browse-eye-active::after { content: ''; position: absolute; top: 2px; right: 2px; width: 6px; height: 6px; background: #c084fc; border-radius: 50%; box-shadow: 0 0 4px #c084fc; } .btn.btn-browse-eye { position: relative; } /* ── ツールバー セクション（Nodes / Connector のラベルを上に積む） ──── */ .toolbar-section { display: flex; flex-direction: column; align-items: flex-start; flex-shrink: 0; gap: 2px; } .toolbar-section-title { font-family: var(--font-ui); font-size: 8px; font-weight: 700; letter-spacing: 0.18em; color: var(--text-muted); text-transform: uppercase; opacity: 0.55; padding: 0 4px; white-space: nowrap; pointer-events: none; user-select: none; line-height: 1; } .toolbar-section-row { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } /* ── ボタン共通 ────────────────────────────────────────────── */ .btn { font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: 0.4px; padding: 5px 10px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; white-space: nowrap; flex-shrink: 0; } .btn:hover { background: var(--surface); border-color: var(--accent); color: var(--accent); } /* バリアント：アクセント */ .btn-accent { background: var(--accent); color: #0d0f14; border-color: var(--accent); } .btn-accent:hover { opacity: 0.85; color: #0d0f14; } /* バリアント：IO（Save/Load） */ .btn-io { background: #1a3a5c; border-color: #2a5a8c; color: #6ab4ff; } .btn-io:hover { background: #1e4570; border-color: #6ab4ff; color: #6ab4ff; } /* Save / Load 統合ドロップダウン (#io-menu-btn 直下に展開) */ .io-menu { position: absolute; top: 100%; right: 0; margin-top: 4px; min-width: 200px; background: #2a2a2a; border: 1px solid #5a5a5a; border-radius: 5px; box-shadow: 0 6px 24px rgba(0,0,0,0.5); padding: 4px; z-index: 9500; display: flex; flex-direction: column; gap: 2px; } .io-menu-item { display: block; width: 100%; padding: 8px 12px; background: transparent; color: #6ab4ff; border: 1px solid transparent; border-radius: 3px; cursor: pointer; font-size: 12px; font-weight: 600; text-align: left; white-space: nowrap; } .io-menu-item:hover { background: #1e4570; border-color: #6ab4ff; color: #fff; } /* バリアント：危険 */ .btn-danger { border-color: #4a2020; color: var(--text-muted); } .btn-danger:hover { border-color: var(--danger); color: var(--danger); background: #2a1010; } /* バリアント：Unity エクスポート */ .btn-unity { background: rgba(74, 158, 255, 0.10); border-color: rgba(74, 158, 255, 0.40); color: #4a9eff; } .btn-unity:hover { background: rgba(74, 158, 255, 0.22); border-color: #4a9eff; color: #7ac0ff; } /* バリアント：イベントノード */ .btn-event { background: rgba(143,219,166,0.08); border-color: rgba(143,219,166,0.4); color: var(--cat-event); } .btn-event:hover { background: rgba(143,219,166,0.18); border-color: var(--cat-event); color: var(--cat-event); } .btn-start { background: rgba(109,163,216,0.10); border-color: rgba(109,163,216,0.4); color: var(--cat-start); } .btn-start:hover { background: rgba(109,163,216,0.20); border-color: var(--cat-start); color: var(--cat-start); } .btn-choice { background: rgba(230,199,87,0.10); border-color: rgba(230,199,87,0.4); color: var(--cat-choice); } .btn-choice:hover { background: rgba(230,199,87,0.20); border-color: var(--cat-choice); color: var(--cat-choice); } /* バリアント：結末ノード（赤） */ .btn-ending { background: rgba(232,128,128,0.10); border-color: rgba(232,128,128,0.4); color: var(--cat-ending); } .btn-ending:hover { background: rgba(232,128,128,0.20); border-color: var(--cat-ending); color: var(--cat-ending); } .btn-return-title { background: rgba(230,199,87,0.10); border-color: rgba(230,199,87,0.4); color: var(--cat-return); } .btn-return-title:hover { background: rgba(230,199,87,0.20); border-color: var(--cat-return); color: var(--cat-return); } /* CaseEvent ノード（参照値で case 分岐） */ .btn-caseevent { background: rgba(224,136,189,0.10); border-color: rgba(224,136,189,0.4); color: var(--cat-caseevent); } .btn-caseevent:hover { background: rgba(224,136,189,0.22); border-color: var(--cat-caseevent); } .node-caseevent { border-color: var(--cat-caseevent); min-width: 230px; } .node-caseevent .node-header { background: rgba(224,136,189,0.18); border-bottom-color: rgba(224,136,189,0.4); color: var(--cat-caseevent); } .caseevent-body { padding: 8px 12px 12px; } .caseevent-ref-row { display: flex; gap: 6px; align-items: center; font-size: 10px; margin-bottom: 6px; padding: 4px 6px; background: rgba(255,121,198,0.08); border-radius: 4px; } .caseevent-ref-label { color: rgba(255,255,255,0.55); } .caseevent-ref-value { color: #ff79c6; font-weight: 700; } .caseevent-cases-list { display: flex; flex-direction: column; gap: 3px; margin-bottom: 6px; } .caseevent-case-item { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 4px 22px 4px 6px; /* 右側に2つのコネクタ用余白 */ background: rgba(255,255,255,0.04); border: 1px solid rgba(255,121,198,0.18); border-radius: 3px; font-size: 9px; min-height: 64px; /* サムネ分の高さを確保 → コネクタ間隔も自然に広がる */ } .caseevent-case-row-top { display: flex; align-items: center; gap: 5px; } .caseevent-case-row-meta { display: flex; gap: 8px; font-size: 9px; color: rgba(255,255,255,0.65); font-family: var(--font-mono); padding: 0 2px; overflow: hidden; } .caseevent-case-heading-label, .caseevent-case-id-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .caseevent-case-heading-label { flex: 1; color: var(--state-progress); } .caseevent-case-id-label { color: rgba(116,235,213,0.85); } .caseevent-case-row-gates { display: flex; gap: 3px; flex-wrap: wrap; font-size: 8px; margin: 0 2px; } .caseevent-case-gate { padding: 0 4px; border-radius: 2px; border: 1px solid currentColor; font-family: var(--font-mono); line-height: 1.4; } .caseevent-case-gate.require { color: #7ee8a2; background: rgba(126,232,162,0.10); } .caseevent-case-gate.forbid { color: #ff6b6b; background: rgba(255,107,107,0.10); } .caseevent-default-id { margin-left: auto; font-size: 9px; color: rgba(116,235,213,0.85); font-family: var(--font-mono); } .caseevent-case-thumb-wrap { position: relative; width: 100%; height: 44px; border: 1px dashed rgba(255,121,198,0.35); border-radius: 3px; background: rgba(0,0,0,0.2); display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden; transition: border-color 0.15s, background 0.15s; } .caseevent-case-thumb-wrap:hover, .caseevent-case-thumb-wrap.drag-hover { border-color: #ff79c6; background: rgba(255,121,198,0.12); } .caseevent-case-thumb { width: 100%; height: 100%; object-fit: cover; pointer-events: none; /* ドロップを親に通す */ display: block; } .caseevent-case-thumb-empty { color: rgba(255,121,198,0.55); font-size: 9px; font-family: var(--font-mono); pointer-events: none; } .connector.caseevent-dialogue-out { position: absolute; right: -8px; top: 22px; /* タイトル行付近 */ transform: translateY(-50%); background: #ff9a3c; border-color: #ff9a3c; width: 9px; height: 9px; } .connector.caseevent-case-out { position: absolute; right: -8px; bottom: 12px; /* サムネ下端寄り */ transform: translateY(50%); width: 9px; height: 9px; } .connector.caseevent-dialogue-out:hover { transform: translateY(-50%) scale(1.4); } .connector.caseevent-case-out:hover { transform: translateY(50%) scale(1.4); } .caseevent-case-num { font-family: var(--font-mono); font-weight: 700; color: rgba(255,121,198,0.8); min-width: 14px; } .caseevent-case-cond { color: rgba(255,255,255,0.55); font-family: var(--font-mono); font-size: 9px; } .caseevent-case-name { flex: 1; color: var(--text-main); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .caseevent-default-row { display: flex; gap: 6px; align-items: center; padding: 3px 6px; background: rgba(255,184,108,0.08); border: 1px dashed rgba(255,184,108,0.3); border-radius: 3px; font-size: 9px; } .caseevent-default-tag { font-family: var(--font-mono); color: #ffb86c; font-weight: 700; } .caseevent-default-name { color: rgba(255,255,255,0.7); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .caseevent-empty { font-size: 9px; font-style: italic; color: rgba(255,255,255,0.4); padding: 4px; text-align: center; } /* CaseEvent サイドエディタ */ .ce-empty-hint { font-size: 11px; color: var(--text-muted); font-style: italic; padding: 6px; } .ce-case-edit { background: rgba(255,121,198,0.07); border: 1px solid rgba(255,121,198,0.25); border-radius: 5px; padding: 8px; margin-bottom: 8px; } .ce-case-head { display: flex; align-items: center; gap: 4px; margin-bottom: 6px; } .ce-case-num { font-size: 11px; font-weight: 700; color: #ff79c6; flex: 1; } .ce-case-up, .ce-case-down, .ce-case-del { width: 22px; height: 22px; padding: 0; background: transparent; border: 1px solid rgba(255,255,255,0.15); color: var(--text-muted); border-radius: 3px; cursor: pointer; font-size: 11px; } .ce-case-del:hover { background: rgba(255,107,107,0.25); color: #fff; border-color: #ff6b6b; } .ce-case-cond-row { display: flex; gap: 4px; align-items: center; margin-bottom: 4px; font-size: 10px; color: var(--text-muted); } .ce-case-op { width: 60px; } .ce-case-val { flex: 1; } .ce-case-edit input, .ce-case-edit textarea, .ce-case-edit select { width: 100%; box-sizing: border-box; font-size: 11px; padding: 3px 6px; margin-bottom: 4px; background: rgba(0,0,0,0.35); border: 1px solid rgba(255,121,198,0.3); border-radius: 3px; color: var(--text-main); } .ce-case-edit textarea { resize: vertical; } .ce-default-edit { display: flex; flex-direction: column; gap: 4px; } .ce-default-edit input, .ce-default-edit textarea { width: 100%; box-sizing: border-box; font-size: 11px; padding: 3px 6px; background: rgba(0,0,0,0.35); border: 1px solid rgba(255,184,108,0.3); border-radius: 3px; color: var(--text-main); } .ce-image-row { display: flex; gap: 4px; align-items: center; margin-top: 4px; } /* CaseEvent 周回フィルター（1周目 / 2周目 / 3周目以降） */ .ce-case-rounds { margin-top: 6px; padding: 6px 8px; background: rgba(126,232,162,0.06); border: 1px solid rgba(126,232,162,0.35); border-radius: 4px; } .ce-case-rounds-label { font-size: 10px; font-weight: 700; color: #7ee8a2; margin-bottom: 4px; } /* CaseEvent セリフ表示範囲 UI */ .ce-case-dlgrange { margin-top: 6px; padding: 6px 8px; background: rgba(255,154,60,0.07); border: 1px solid rgba(255,154,60,0.35); border-radius: 4px; } .ce-case-dlgrange-label { font-size: 10px; font-weight: 700; color: #ff9a3c; margin-bottom: 4px; } .ce-dlgrange-empty { font-size: 10px; color: var(--text-muted); font-style: italic; padding: 4px; } .ce-dlgrange-row { display: flex; align-items: center; gap: 6px; margin: 3px 0; } .ce-dlgrange-tag { font-size: 10px; color: #ff9a3c; font-family: var(--font-mono); min-width: 36px; } .ce-dlgrange-row select { flex: 1; padding: 3px 5px; font-size: 11px; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 3px; min-width: 0; } .ce-dlgrange-hint { font-size: 9px; color: var(--text-muted); margin-top: 4px; line-height: 1.4; } /* 周回フィルター 3モード UI */ .ce-round-disabled { display: flex; align-items: center; gap: 6px; padding: 8px 10px; font-size: 10px; color: rgba(255,255,255,0.45); background: rgba(255,255,255,0.03); border: 1px dashed rgba(255,255,255,0.18); border-radius: 4px; font-style: italic; } .ce-round-disabled-icon { font-size: 14px; } .ce-round-mode-tabs { display: flex; gap: 0; margin-bottom: 6px; border: 1px solid rgba(126,232,162,0.35); border-radius: 4px; overflow: hidden; } .ce-round-tab { flex: 1; padding: 4px 6px; font-size: 10px; background: rgba(0,0,0,0.25); color: rgba(255,255,255,0.55); border: none; border-right: 1px solid rgba(126,232,162,0.2); cursor: pointer; } .ce-round-tab:last-child { border-right: none; } .ce-round-tab:hover { background: rgba(126,232,162,0.10); color: #7ee8a2; } .ce-round-tab.active { background: rgba(126,232,162,0.22); color: #7ee8a2; font-weight: 700; } .ce-round-mode-hint { font-size: 9px; color: var(--text-muted); margin-bottom: 4px; line-height: 1.4; } .ce-round-chips { display: flex; gap: 3px; flex-wrap: wrap; margin: 4px 0 6px; min-height: 22px; } .ce-round-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; font-size: 10px; font-family: var(--font-mono); color: #7ee8a2; background: rgba(126,232,162,0.14); border: 1px solid rgba(126,232,162,0.55); border-radius: 10px; } .ce-round-chip .x { cursor: pointer; opacity: 0.7; padding: 0 2px; } .ce-round-chip .x:hover { opacity: 1; color: #fff; } .ce-round-add, .ce-round-from { display: flex; gap: 4px; align-items: center; } .ce-round-add-input, .ce-round-from-input { padding: 3px 5px; font-size: 11px; font-family: var(--font-mono); background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 3px; } .ce-round-add-btn { padding: 3px 8px; font-size: 10px; background: rgba(126,232,162,0.18); border: 1px solid rgba(126,232,162,0.55); color: #7ee8a2; border-radius: 3px; cursor: pointer; } .ce-round-add-btn:hover { background: rgba(126,232,162,0.35); } .ce-round-from span { font-size: 10px; color: var(--text-muted); } /* CaseEvent ノード本体の周回バッジ */ .caseevent-case-row-rounds { display: flex; gap: 2px; margin: 0 2px; font-size: 8px; } .caseevent-round-badge { padding: 0 4px; border-radius: 8px; border: 1px solid currentColor; font-family: var(--font-mono); line-height: 1.4; font-weight: 700; } .caseevent-round-badge.on { color: #7ee8a2; background: rgba(126,232,162,0.14); } .caseevent-round-badge.off { color: rgba(255,255,255,0.18); background: transparent; } .caseevent-round-badge.any { color: #bd93f9; background: rgba(189,147,249,0.10); border-color: #bd93f9; } /* CaseEvent の Round IN 行（AnomalyHunt の anomaly-flag-in-row と同じスタイル） */ .caseevent-round-in-row { position: relative; display: flex; align-items: center; padding: 5px 8px 5px 18px; margin-top: 6px; background: rgba(204,68,170,0.10); border: 1px solid rgba(204,68,170,0.35); border-radius: 5px; font-size: 10px; min-height: 24px; } .caseevent-round-in-label { color: #cc44aa; font-weight: 700; letter-spacing: 0.3px; flex: 1; } /* CaseEvent の caseevent-round-in は共通 Flag IN 行スタイルに従う （連接子の絶対位置は .event-flag-in-pt/.cond-flag-in-pt と同じ規則を適用） */ .connector.caseevent-round-in { position: absolute !important; left: -21px !important; top: 50% !important; transform: translateY(-50%) !important; background: #cc44aa !important; border-color: #cc44aa !important; z-index: 3; } .connector.caseevent-round-in:hover { transform: translateY(-50%) scale(1.4) !important; } /* デバッグパネル: 周回カウント表示 */ .dbg-endcount-display { display: inline-flex; align-items: center; justify-content: center; padding: 4px 12px; margin: 0 4px; font-size: 11px; font-weight: 700; color: #7ee8a2; background: rgba(126,232,162,0.12); border: 1px solid rgba(126,232,162,0.5); border-radius: 4px; font-family: var(--font-mono); } .dbg-force-btn.dbg-force-endcount { background: rgba(126,232,162,0.12); border-color: rgba(126,232,162,0.5); color: #7ee8a2; } .dbg-force-btn.dbg-force-endcount:hover { background: rgba(126,232,162,0.25); } /* CaseEvent 発生条件フラグ（require / forbid） */ .ce-case-gates { margin-top: 6px; padding: 6px 8px; background: rgba(0,0,0,0.25); border: 1px dashed rgba(255,121,198,0.35); border-radius: 4px; } .ce-case-gate-label { font-size: 10px; font-weight: 700; color: rgba(255,121,198,0.85); margin-bottom: 4px; } .ce-case-gate-row { display: flex; align-items: center; gap: 4px; margin: 2px 0; flex-wrap: wrap; } .ce-case-gate-tag { font-size: 10px; font-family: var(--font-mono); padding: 1px 5px; border-radius: 3px; flex-shrink: 0; } .ce-case-gate-tag.require { background: rgba(126,232,162,0.18); color: #7ee8a2; border: 1px solid rgba(126,232,162,0.5); } .ce-case-gate-tag.forbid { background: rgba(255,107,107,0.18); color: #ff6b6b; border: 1px solid rgba(255,107,107,0.5); } .ce-case-flag-chips { flex: 1; display: flex; gap: 3px; flex-wrap: wrap; min-width: 0; } .ce-case-flag-chip { display: inline-flex; align-items: center; gap: 3px; padding: 1px 4px; font-size: 9px; font-family: var(--font-mono); border-radius: 3px; border: 1px solid currentColor; background: rgba(0,0,0,0.35); } .ce-case-flag-chip.require { color: #7ee8a2; } .ce-case-flag-chip.forbid { color: #ff6b6b; } .ce-case-flag-chip .x { cursor: pointer; opacity: 0.7; padding: 0 2px; } .ce-case-flag-chip .x:hover { opacity: 1; color: #fff; } .ce-case-flag-empty { font-size: 10px; color: var(--text-muted); padding: 1px 4px; } .ce-case-flag-add { width: 22px; height: 18px; padding: 0; font-size: 11px; line-height: 1; background: rgba(255,121,198,0.15); color: #ff79c6; border: 1px solid rgba(255,121,198,0.5); border-radius: 3px; cursor: pointer; } .ce-case-flag-add:hover { background: rgba(255,121,198,0.35); } /* フラグ選択ポップアップ */ .ce-flag-picker { background: rgba(20,20,28,0.97); border: 1px solid rgba(255,121,198,0.55); border-radius: 5px; padding: 4px; min-width: 200px; max-height: 240px; overflow-y: auto; box-shadow: 0 6px 24px rgba(0,0,0,0.55); } .ce-flag-picker-row { padding: 5px 8px; font-size: 11px; font-family: var(--font-mono); color: var(--text-main); border-radius: 3px; cursor: pointer; display: flex; align-items: center; gap: 6px; } .ce-flag-picker-row:hover { background: rgba(255,121,198,0.18); } .ce-flag-picker-row span { color: var(--text-muted); font-size: 10px; } .ce-flag-picker-empty { padding: 10px; font-size: 11px; color: var(--text-muted); text-align: center; } .ce-image-preview { max-width: 80px; max-height: 60px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.1); } .ce-image-row button { font-size: 10px; padding: 3px 8px; background: transparent; border: 1px solid rgba(255,255,255,0.2); color: var(--text-muted); border-radius: 3px; cursor: pointer; } .ce-image-row button:hover { border-color: #ff79c6; color: #ff79c6; } /* タイトルへ戻る ノード（タイトルノードと同じ黄色） */ .node-return-title { border-color: var(--cat-return); } .node-return-title .node-header { background: rgba(249,212,35,0.14); border-bottom-color: rgba(249,212,35,0.32); color: #f9d423; } .node-return-title-body { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 12px 8px; } .node-return-title-icon { font-size: 32px; line-height: 1; } .node-return-title-desc { font-size: 10px; text-align: center; color: var(--text-muted); line-height: 1.5; } /* バリアント：セリフノード */ .btn-dialogue { background: rgba(240,184,122,0.10); border-color: rgba(240,184,122,0.4); color: var(--cat-dialogue); } .btn-dialogue:hover { background: rgba(240,184,122,0.20); border-color: var(--cat-dialogue); color: var(--cat-dialogue); } /* バリアント：条件分岐ノード */ .btn-condition { background: rgba(162,155,254,0.10); border-color: rgba(162,155,254,0.4); color: var(--cat-condition); } .btn-condition:hover { background: rgba(162,155,254,0.20); border-color: var(--cat-condition); color: var(--cat-condition); } /* バリアント：グループ */ .btn-group { background: rgba(180, 180, 180, 0.08); border-color: rgba(180, 180, 180, 0.35); color: #b0b0b0; } .btn-group:hover { background: rgba(180, 180, 180, 0.18); border-color: #c0c0c0; color: #ddd; } /* Group モード：ボタン点灯 + ボタン内部にパルス効果 */ .btn-group.group-mode-active { background: rgba(126,232,162,0.22) !important; border-color: #7ee8a2 !important; color: #7ee8a2 !important; box-shadow: 0 0 0 1px rgba(126,232,162,0.45), 0 0 12px rgba(126,232,162,0.55); animation: group-mode-pulse 1.4s ease-in-out infinite; } @keyframes group-mode-pulse { 0%, 100% { box-shadow: 0 0 0 1px rgba(126,232,162,0.45), 0 0 12px rgba(126,232,162,0.4); } 50% { box-shadow: 0 0 0 2px rgba(126,232,162,0.6), 0 0 18px rgba(126,232,162,0.75); } } /* Group モード中：キャンバス全体のカーソル変更 */ body.group-mode-active #viewport, body.group-mode-active #canvas { cursor: crosshair !important; } /* ── カラーパレット ────────────────────────────────────────── */ /* 旧 .color-palette は廃止 (Color トグル + ピッカーパネル方式へ移行) .color-btn はピッカーパネル内で再利用されるので残す */ .color-btn { width: 14px; height: 14px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: transform 0.1s, border-color 0.15s; } .color-btn:hover { transform: scale(1.25); } .color-btn.active { border-color: #fff; box-shadow: 0 0 6px #fff8; } /* ============================================================ コネクタカラーピッカー (コンパクト版) Color トグルボタン + ドロップダウンパネル (カテゴリドロップダウンと同じ position:fixed 方式で、オーバーフロークリッピングを回避) ============================================================ */ .color-picker-wrap { position: relative; margin-left: 8px; padding-left: 12px; border-left: 1px solid var(--border); display: inline-flex; align-items: center; } .color-toggle-btn { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; } .color-toggle-swatch { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.4); display: inline-block; flex-shrink: 0; transition: background 0.15s; } .color-toggle-label { font-size: 11px; font-weight: 700; letter-spacing: 0.02em; } .color-toggle-caret { font-size: 9px; opacity: 0.6; margin-left: 1px; transition: transform 0.18s; } .color-picker-wrap.open .color-toggle-caret { transform: rotate(180deg); } .color-picker-wrap.open .color-toggle-btn { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.4); } /* パネル本体: position:fixed (JS が getBoundingClientRect で座標セット) */ .color-picker-panel { position: fixed; display: none; flex-direction: row; align-items: center; gap: 9px; padding: 10px 12px; background: var(--surface-2, #2a2a2a); border: 1px solid var(--border, #4a4a4a); border-radius: 6px; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.55); z-index: 10000; } .color-picker-wrap.open .color-picker-panel { display: flex; } /* パネル内の color-btn はトグル時より少し大きく (押しやすさ重視) */ .color-picker-panel .color-btn { width: 18px; height: 18px; } /* ラベル（Snap / Dark） */ .toolbar-label { font-size: 11px; color: var(--text-muted); display: flex; align-items: center; gap: 5px; cursor: pointer; user-select: none; } .toolbar-label input { accent-color: var(--accent); cursor: pointer; } /* ── カテゴリドロップダウン ────────────────────────────────── */ .node-cat-wrap { flex-shrink: 0; } /* ── ツールバーセクションラベル（Nodes → / Connector →） ──── */ .toolbar-section-label { font-family: var(--font-ui); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; padding-right: 2px; user-select: none; } /* Connector → の前に縦線セパレーター */ .toolbar-section-sep { width: 1px; height: 32px; /* セクション全体（ラベル+ボタン）の高さ感に合わせる */ background: var(--border); flex-shrink: 0; margin: 0 6px; align-self: flex-end; /* ボタン行と下端揃え */ margin-bottom: 2px; } /* カテゴリトリガーボタン */ .btn-cat { display: flex; align-items: center; gap: 4px; padding: 5px 9px; } .cat-arrow { font-size: 9px; opacity: 0.7; transition: transform 0.15s; line-height: 1; } .node-cat-wrap:has(.cat-dropdown.open) .cat-arrow { transform: rotate(180deg); } /* ドロップダウンパネル — position:fixed でツールバーの overflow clip を回避 */ .cat-dropdown { display: none; position: fixed; /* ← absolute→fixed でツールバー overflow-y:hidden を抜ける */ top: 0; /* JS で上書き */ left: 0; /* JS で上書き */ z-index: 9000; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 6px; min-width: 140px; flex-direction: column; gap: 4px; box-shadow: 0 8px 28px rgba(0,0,0,0.6); } .cat-dropdown.open { display: flex; } .cat-divider { height: 1px; background: rgba(255,255,255,0.1); margin: 4px 0; } /* ドロップダウン内ボタンは幅いっぱい */ .cat-dropdown .btn { width: 100%; text-align: left; justify-content: flex-start; } /* カテゴリ別カラーバリアント */ .btn-cat-meta { background: rgba(74,158,255,0.08); border-color: rgba(74,158,255,0.35); color: #4a9eff; } .btn-cat-meta:hover { background: rgba(74,158,255,0.18); border-color: #4a9eff; } .btn-cat-scenario { background: rgba(126,232,162,0.08); border-color: rgba(126,232,162,0.35); color: var(--accent); } .btn-cat-scenario:hover { background: rgba(126,232,162,0.18); border-color: var(--accent); } .btn-cat-internal { background: rgba(162,155,254,0.08); border-color: rgba(162,155,254,0.35); color: #a29bfe; } .btn-cat-internal:hover { background: rgba(162,155,254,0.18); border-color: #a29bfe; } .btn-cat-ui { background: rgba(116,235,213,0.08); border-color: rgba(116,235,213,0.35); color: #74ebd5; } .btn-cat-ui:hover { background: rgba(116,235,213,0.18); border-color: #74ebd5; } .btn-cat-system { background: rgba(249,212,35,0.08); border-color: rgba(249,212,35,0.35); color: #f9d423; } .btn-cat-system:hover { background: rgba(249,212,35,0.18); border-color: #f9d423; } /* ── メインコンテナ ────────────────────────────────────────── */ #main-container { display: flex; flex: 1; overflow: hidden; position: relative; } /* ── ビューポート（キャンバス領域） ──────────────────────────── */ #viewport { flex: 1; cursor: default; overflow: hidden; position: relative; background-image: radial-gradient(var(--grid-dot) 1px, transparent 1px); background-size: 30px 30px; } #viewport.panning { cursor: grab; } #viewport.panning-active { cursor: grabbing; } #canvas { width: 1px; height: 1px; position: absolute; top: 0; left: 0; transform-origin: 0 0; user-select: none; -webkit-user-select: none; } /* ── リサイザー ────────────────────────────────────────────── */ /* リサイズドラッグ中は同期スライドの transition を無効化（滑らかに追従させる） */ body.is-resizing-editor #side-editor, body.is-resizing-editor #resizer, body.is-resizing-editor #editor-tab { transition: none !important; } /* リサイザー：エディタ左端に吸着し、エディタと同じ transition で同時にスライド */ #resizer { position: absolute; top: 0; bottom: 0; right: 0; /* 通常は画面右端 = エディタ閉じた状態でも常に配置 */ width: var(--resizer-w); background: var(--resizer-bg); cursor: col-resize; z-index: 102; transform: translateX(0); /* 閉じてる時は viewport の外側相当 */ opacity: 0; pointer-events: none; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s, background 0.2s; } #resizer:hover { background: var(--accent); } /* エディタが開いている時：エディタ左端へスライド & 表示 */ #side-editor.editor-open ~ #resizer { transform: translateX(calc(-1 * var(--editor-w))); opacity: 1; pointer-events: auto; } /* ── サイドエディタ ────────────────────────────────────────── */ /* ════════════════════════════════════════════════════════ ドックモード（タイル並びの全画面エディタ） ════════════════════════════════════════════════════════ */ #dock-mode-overlay { position: fixed; inset: 0; z-index: 200; background: var(--bg, #0a0a14); display: none; flex-direction: column; } #dock-mode-bar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: rgba(0,0,0,0.5); border-bottom: 1px solid rgba(255,255,255,0.08); flex-shrink: 0; } #dock-mode-title { flex: 1; font-size: 11px; font-family: var(--font-ui); font-weight: 700; color: #c084fc; letter-spacing: 0.5px; user-select: none; } #dock-mode-add-btn, #dock-mode-new-btn, #dock-mode-exit-btn { padding: 6px 12px; font-size: 11px; font-family: var(--font-ui); font-weight: 700; border-radius: 6px; cursor: pointer; flex-shrink: 0; transition: background 0.15s, color 0.15s, border-color 0.15s; } #dock-mode-new-btn { background: rgba(189,147,249,0.14); border: 1px solid rgba(189,147,249,0.5); color: #bd93f9; } #dock-mode-new-btn:hover { background: rgba(189,147,249,0.28); } #dock-mode-add-btn { background: rgba(99,230,190,0.14); border: 1px solid rgba(99,230,190,0.45); color: #63e6be; } #dock-mode-add-btn:hover { background: rgba(99,230,190,0.26); } #dock-mode-exit-btn { background: rgba(255,107,107,0.10); border: 1px solid rgba(255,107,107,0.4); color: #ff8585; } #dock-mode-exit-btn:hover { background: rgba(255,107,107,0.22); color: #ff6b6b; } /* タイルグリッド：minmax で自動配置（ウィンドウ幅で 1/2/3/4 列に） */ #dock-mode-body { flex: 1; display: grid; gap: 10px; padding: 10px; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); grid-auto-rows: minmax(0, 1fr); overflow: auto; align-content: stretch; } .dock-tile { display: flex; flex-direction: column; background: var(--editor-bg, #141426); border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; overflow: hidden; min-height: 280px; transition: border-color 0.15s, box-shadow 0.15s; } /* .dock-tile-active は現仕様では未使用（並列編集モードに統合） */ .dock-tile-active { border-color: #c084fc; box-shadow: 0 0 0 1px rgba(192,132,252,0.5), 0 8px 24px rgba(192,132,252,0.18); } .dock-tile-header { display: flex; align-items: center; gap: 6px; padding: 6px 8px 6px 10px; background: rgba(0,0,0,0.35); border-bottom: 1px solid rgba(255,255,255,0.08); flex-shrink: 0; cursor: pointer; user-select: none; } .dock-tile-active .dock-tile-header { background: rgba(192,132,252,0.18); border-bottom-color: rgba(192,132,252,0.32); } .dock-tile-type-icon { font-size: 14px; flex-shrink: 0; } .dock-tile-type-badge { font-size: 9px; font-family: var(--font-mono); padding: 1px 5px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15); border-radius: 3px; color: var(--text-muted); letter-spacing: 0.5px; flex-shrink: 0; } .dock-tile-name { flex: 1; font-size: 12px; font-weight: 700; font-family: var(--font-ui); color: var(--text-main); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .dock-tile-move-group { display: flex; gap: 2px; flex-shrink: 0; } .dock-tile-move, .dock-tile-close { width: 22px; height: 22px; border-radius: 4px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.7); cursor: pointer; font-size: 14px; font-weight: 700; line-height: 1; display: inline-flex; align-items: center; justify-content: center; padding: 0; transition: background 0.12s, color 0.12s, border-color 0.12s; } .dock-tile-move:hover:not(:disabled) { background: rgba(192,132,252,0.24); color: #fff; border-color: #c084fc; } .dock-tile-move:disabled { opacity: 0.3; cursor: not-allowed; } .dock-tile-close:hover { background: rgba(255,107,107,0.32); color: #fff; border-color: rgba(255,107,107,0.55); } .dock-tile-body { flex: 1; position: relative; overflow: hidden; min-height: 0; } .dock-tile-editor-slot { position: relative; width: 100%; height: 100%; display: flex; } /* 各タイルに描画したエディタを入れるスロット */ .dock-tile-editor-host { width: 100%; height: 100%; overflow: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; color: var(--text); } .dock-tile-editor-host > [id^="editor-title"], .dock-tile-editor-host > #editor-title { font-size: 13px; font-weight: 700; color: var(--accent); letter-spacing: 1px; text-transform: uppercase; display: block; flex-shrink: 0; padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,0.08); } body.light-mode .dock-tile-editor-host > [id^="editor-title"], body.light-mode .dock-tile-editor-host > #editor-title { border-bottom-color: rgba(0,0,0,0.1); } .dock-tile-editor-host > [id^="editor-content"], .dock-tile-editor-host > #editor-content { flex: 1; min-height: 0; overflow: visible; } /* ================================================================ Event エディタ: アクションカード（編集可能） ================================================================ */ .ev-editor-action-empty { color: var(--text-muted, rgba(255,255,255,0.4)); font-size: 11px; font-style: italic; padding: 8px; text-align: center; } .ev-editor-action-card { background: rgba(0,0,0,0.22); border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; padding: 8px 10px; margin-bottom: 8px; display: flex; flex-direction: column; gap: 6px; } body.light-mode .ev-editor-action-card { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.1); } .ev-editor-action-head { display: flex; align-items: center; justify-content: space-between; } .ev-editor-action-num { font-size: 10px; font-weight: 700; color: var(--accent, #7ee8a2); letter-spacing: 0.5px; } .ev-editor-action-del { font-size: 9px; padding: 2px 8px; border-radius: 3px; border: 1px solid rgba(255,107,107,0.3); background: rgba(255,107,107,0.1); color: #ff6b6b; cursor: pointer; } .ev-editor-action-del:hover { background: #ff6b6b; color: #fff; border-color: #ff6b6b; } .ev-editor-action-dial-row { display: flex; align-items: center; gap: 5px; font-size: 10px; } .ev-editor-action-dial-label { color: rgba(255,255,255,0.6); flex-shrink: 0; font-size: 9px; letter-spacing: 0.3px; } body.light-mode .ev-editor-action-dial-label { color: rgba(0,0,0,0.6); } .ev-editor-action-dial-sel { flex: 1; min-width: 0; background: transparent; border: 1px solid rgba(255,255,255,0.15); border-radius: 4px; padding: 3px 6px; color: inherit; font-size: 11px; } .ev-editor-action-dial-sel:focus { outline: none; border-color: var(--accent, #7ee8a2); } body.light-mode .ev-editor-action-dial-sel { border-color: rgba(0,0,0,0.15); } .ev-editor-action-dial-refresh { width: 22px; height: 22px; border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.7); font-size: 12px; border-radius: 4px; cursor: pointer; padding: 0; flex-shrink: 0; } .ev-editor-action-dial-refresh:hover { border-color: var(--accent, #7ee8a2); color: var(--accent, #7ee8a2); } /* ── 画像スロット（ドロップゾーン） ──────────────────────── */ .ev-editor-action-img-slot { position: relative; background: rgba(0,0,0,0.3); border: 1.5px dashed rgba(255,255,255,0.18); border-radius: 6px; padding: 8px; display: flex; align-items: center; gap: 8px; cursor: pointer; transition: border-color 0.12s, background 0.12s; } body.light-mode .ev-editor-action-img-slot { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.18); } .ev-editor-action-img-slot.drag-over { border-color: var(--accent, #7ee8a2); border-style: solid; background: rgba(126,232,162,0.10); } .ev-editor-action-img-preview { flex: 0 0 80px; width: 80px; aspect-ratio: 4 / 3; background-color: rgba(0,0,0,0.45); background-size: cover; background-position: center; background-repeat: no-repeat; border-radius: 4px; border: 1px solid rgba(255,255,255,0.08); } .ev-editor-action-img-preview.has-image { border-color: rgba(126,232,162,0.4); } .ev-editor-action-img-hint { flex: 1; font-size: 10px; color: rgba(255,255,255,0.4); font-style: italic; text-align: center; pointer-events: none; } body.light-mode .ev-editor-action-img-hint { color: rgba(0,0,0,0.4); } .ev-editor-action-img-btns { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; } .ev-editor-action-img-pick { font-size: 10px; padding: 4px 8px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.85); cursor: pointer; white-space: nowrap; } .ev-editor-action-img-pick:hover { background: var(--accent, #7ee8a2); color: #1a1f30; border-color: var(--accent, #7ee8a2); } body.light-mode .ev-editor-action-img-pick { border-color: rgba(0,0,0,0.15); color: rgba(0,0,0,0.85); } .ev-editor-action-img-clear { width: 22px; height: 22px; border: 1px solid rgba(255,107,107,0.3); background: rgba(255,107,107,0.1); color: #ff6b6b; font-size: 12px; border-radius: 4px; cursor: pointer; padding: 0; } .ev-editor-action-img-clear:hover { background: #ff6b6b; color: #fff; border-color: #ff6b6b; } /* 空状態のヒント */ #dock-empty-hint { position: absolute; inset: 50px 0 0 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 12px; pointer-events: none; } .dock-empty-emoji { font-size: 64px; opacity: 0.4; } .dock-empty-text { font-size: 12px; color: var(--text-muted); font-family: var(--font-ui); } /* ドックモード中：アクティブタイル内 side-editor を埋め込み */ body.dock-mode-active #side-editor { position: static !important; width: 100% !important; height: 100% !important; max-height: none !important; transform: none !important; border-left: none !important; box-shadow: none !important; display: flex !important; pointer-events: auto !important; border-radius: 0 !important; } body.dock-mode-active #editor-tab, body.dock-mode-active #resizer { display: none !important; } /* ツールバーの Dock ボタン */ .btn-dock { background: rgba(192,132,252,0.10); border-color: rgba(192,132,252,0.45) !important; color: #c084fc !important; font-weight: 700; } .btn-dock:hover { background: rgba(192,132,252,0.24) !important; border-color: #c084fc !important; } /* Dock 追加ピッカー */ #dock-add-picker { position: fixed; z-index: 210; background: var(--panel-bg, #1a1a2e); border: 1px solid rgba(192,132,252,0.45); border-radius: 8px; padding: 6px; min-width: 220px; max-height: 360px; overflow-y: auto; box-shadow: 0 8px 24px rgba(0,0,0,0.5); display: none; } .dock-add-item { display: flex; align-items: center; gap: 8px; padding: 6px 10px; font-size: 11px; font-family: var(--font-ui); cursor: pointer; border-radius: 5px; color: var(--text-main); transition: background 0.12s; } .dock-add-item:hover { background: rgba(192,132,252,0.20); color: #e9d8fd; } .dock-add-icon { font-size: 14px; flex-shrink: 0; } .dock-add-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dock-add-type { font-size: 9px; color: var(--text-muted); padding: 1px 5px; border: 1px solid rgba(255,255,255,0.15); border-radius: 3px; flex-shrink: 0; } .dock-add-empty { padding: 12px; text-align: center; font-size: 11px; color: var(--text-muted); font-style: italic; } /* 新規Nodes ピッカー */ #dock-new-node-picker { position: fixed; z-index: 210; background: var(--panel-bg, #1a1a2e); border: 1px solid rgba(189,147,249,0.5); border-radius: 8px; padding: 8px; min-width: 280px; max-width: 380px; max-height: 480px; overflow-y: auto; box-shadow: 0 8px 24px rgba(0,0,0,0.55); display: none; } .dock-new-group { margin-bottom: 8px; } .dock-new-group:last-child { margin-bottom: 0; } .dock-new-group-label { font-size: 9px; font-family: var(--font-ui); font-weight: 700; letter-spacing: 1px; color: #bd93f9; padding: 2px 4px; border-bottom: 1px solid rgba(189,147,249,0.25); margin-bottom: 4px; text-transform: uppercase; } .dock-new-group-items { display: flex; flex-wrap: wrap; gap: 4px; } .dock-new-item { display: flex; align-items: center; gap: 5px; padding: 5px 9px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); border-radius: 5px; color: var(--text-main); font-size: 10px; font-family: var(--font-ui); cursor: pointer; transition: background 0.12s, border-color 0.12s, color 0.12s; } .dock-new-item:hover { background: rgba(189,147,249,0.22); border-color: #bd93f9; color: #e9d8fd; } .dock-new-icon { font-size: 13px; flex-shrink: 0; } .dock-new-name { white-space: nowrap; } /* ──────────────────────────────────────────────────── サイドエディタ：キャンバス右端に被さるオーバーレイ。 閉じている時は画面右にスライドアウトされ、左端からタブだけが見える。 ──────────────────────────────────────────────────── */ #side-editor { position: absolute; top: 0; bottom: 0; right: 0; width: var(--editor-w); min-width: 240px; background: var(--editor-bg); border-left: 1px solid var(--border); padding: 20px; display: flex; /* 常時 flex（visibility/transform で開閉） */ flex-direction: column; gap: 14px; z-index: 101; overflow-y: auto; transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: -6px 0 24px rgba(0,0,0,0.45); pointer-events: none; /* 閉じている間はマウス操作を通さない */ } #side-editor.editor-open { transform: translateX(0); pointer-events: auto; } /* 開閉タブ（エディタ左端の外側に吸着、エディタと同時にスライド） */ #editor-tab { position: fixed; top: 220px; /* MEMBERS タブのすぐ下に配置 */ right: 0; /* 通常は画面右端 = エディタ閉じた状態の位置 */ width: 38px; min-height: 110px; padding: 18px 6px; background: var(--editor-bg, #1a1a2e); border: 1px solid rgba(192,132,252,0.45); border-right: none; border-radius: 8px 0 0 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #c084fc; z-index: 103; box-shadow: -4px 0 14px rgba(0,0,0,0.4); transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.15s, color 0.15s, border-color 0.15s; } #editor-tab:hover:not(.editor-tab-disabled) { background: rgba(192,132,252,0.22); color: #e9d8fd; border-color: #c084fc; } #editor-tab.editor-tab-disabled { opacity: 0.35; cursor: not-allowed; border-color: rgba(192,132,252,0.2); color: rgba(192,132,252,0.5); } /* エディタが開いている時：タブもエディタ左端へスライド + 配色変更 */ #side-editor.editor-open ~ #editor-tab { right: var(--editor-w); background: rgba(192,132,252,0.32); border-color: #c084fc; color: #ffffff; } .editor-tab-label { writing-mode: vertical-rl; text-orientation: mixed; font-size: 11px; font-weight: 700; letter-spacing: 3px; font-family: var(--font-ui); user-select: none; } .editor-header { display: flex; align-items: center; justify-content: space-between; } .editor-title { font-size: 13px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--accent); } .editor-close { font-size: 11px; color: var(--text-muted); cursor: pointer; padding: 4px 8px; border-radius: 4px; border: 1px solid var(--border); transition: color 0.15s, border-color 0.15s; } .editor-close:hover { color: var(--danger); border-color: var(--danger); } .editor-section label { display: block; font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; } .editor-section textarea, .editor-section input[type="text"] { width: 100%; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; font-family: var(--font-mono); font-size: 12px; resize: vertical; transition: border-color 0.15s; } .editor-section textarea:focus, .editor-section input[type="text"]:focus { outline: none; border-color: var(--accent); } .editor-divider { height: 1px; background: var(--border); } /* ── グループ矩形 ──────────────────────────────────────────── */ .group-rect { position: absolute; border: 2px solid; border-radius: 12px; z-index: 2; /* ノード(z-index:10)の背面 */ cursor: move; user-select: none; box-sizing: border-box; min-width: 120px; min-height: 80px; transition: box-shadow 0.2s; } .group-rect:hover { box-shadow: 0 0 0 1px currentColor; } .group-rect.selected { border-style: solid; box-shadow: 0 0 0 2px currentColor, 0 6px 24px rgba(0,0,0,0.4); } .group-header { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 4px; padding: 6px 10px 6px 12px; border-radius: 10px 10px 0 0; background: rgba(0,0,0,0.12); cursor: move; } .group-label-text { font-family: var(--font-ui); font-size: 12px; font-weight: 700; flex: 1; letter-spacing: 0.4px; color: currentColor; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: context-menu; } /* グループラベル付箋化（ノード付箋 #fef9c3 と同色） */ .group-rect.group-sticky-label .group-header { background: #fef9c3 !important; border-bottom: 1px solid rgba(0,0,0,0.13); box-shadow: 0 2px 6px rgba(254,249,195,0.3); } .group-rect.group-sticky-label .group-label-text { color: #1a1200 !important; text-shadow: none; } .group-rect.group-sticky-label .group-del-btn { color: rgba(80,60,0,0.6) !important; } .group-rect.group-sticky-label .group-del-btn:hover { color: #ff6b6b !important; } .group-rect.group-sticky-label .group-label-text::before { content: '📌 '; } .group-rect.group-sticky-flash { animation: groupStickyFlash 1.8s ease-out; } @keyframes groupStickyFlash { 0% { box-shadow: 0 0 0 0 rgba(254,249,195,0); } 20% { box-shadow: 0 0 0 8px rgba(254,249,195,0.7); } 100% { box-shadow: 0 0 0 0 rgba(254,249,195,0); } } /* グループラベル右クリックメニュー */ .group-sticky-menu { position: fixed; z-index: 10000; background: #1a1a1a; border: 1px solid rgba(249,212,35,0.5); border-radius: 6px; padding: 4px; box-shadow: 0 8px 24px rgba(0,0,0,0.6); min-width: 220px; } .group-sticky-menu-item { display: block; width: 100%; background: transparent; color: #f9d423; border: none; padding: 8px 12px; font-size: 12px; text-align: left; border-radius: 4px; cursor: pointer; } .group-sticky-menu-item:hover { background: rgba(249,212,35,0.15); } .group-del-btn { flex-shrink: 0; width: 16px; height: 16px; border: none; background: transparent; color: currentColor; opacity: 0.4; cursor: pointer; font-size: 13px; line-height: 1; padding: 0; border-radius: 3px; display: flex; align-items: center; justify-content: center; transition: opacity 0.15s, background 0.15s; } .group-del-btn:hover { opacity: 1; background: rgba(255,100,100,0.25); } .group-resize-handle { position: absolute; bottom: 6px; right: 6px; width: 14px; height: 14px; cursor: se-resize; opacity: 0.35; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; border-radius: 0 0 4px 0; transition: opacity 0.15s; } .group-rect:hover .group-resize-handle { opacity: 0.75; } /* グループ代理 OUT — 右辺中央、ラベルは矩形の外側（右） */ .group-proxy-out-wrap { position: absolute; left: 100%; top: 50%; transform: translate(-6px, -50%); display: flex; align-items: center; gap: 4px; z-index: 6; pointer-events: none; } .group-proxy-out-wrap .connector.group-proxy-out { order: 1; } .group-proxy-out-wrap .group-proxy-out-label { order: 2; } .group-proxy-out-label { font-size: 9px; font-weight: 700; font-family: var(--font-mono); color: currentColor; background: rgba(0,0,0,0.55); padding: 1px 5px; border-radius: 3px; border: 1px solid currentColor; line-height: 1.3; letter-spacing: 0.5px; white-space: nowrap; pointer-events: none; user-select: none; opacity: 0.9; } .connector.group-proxy-out { position: relative; width: 12px; height: 12px; background: currentColor; border: 2px solid #fff; border-radius: 50%; opacity: 0.85; cursor: crosshair; pointer-events: auto; /* wrap が none なので個別に有効化 */ box-shadow: 0 0 0 1px rgba(0,0,0,0.3); } .connector.group-proxy-out:hover { transform: scale(1.4); opacity: 1; } /* グループ代理 IN — 左側ヘッダー下、ラベルは矩形の外側（左） */ .group-proxy-in-wrap { position: absolute; right: 100%; top: 44px; /* ヘッダー (≈36px) のさらに下 */ transform: translateX(6px); display: flex; align-items: center; gap: 4px; z-index: 6; pointer-events: none; } .group-proxy-in-wrap .group-proxy-in-label { order: 1; } .group-proxy-in-wrap .connector.group-proxy-in { order: 2; } .group-proxy-in-label { font-size: 9px; font-weight: 700; font-family: var(--font-mono); color: currentColor; background: rgba(0,0,0,0.55); padding: 1px 5px; border-radius: 3px; border: 1px solid currentColor; line-height: 1.3; letter-spacing: 0.5px; white-space: nowrap; pointer-events: none; user-select: none; opacity: 0.9; order: 2; /* コネクタを左、ラベルを右に表示 */ } .connector.group-proxy-in { position: relative; width: 12px; height: 12px; background: currentColor; border: 2px solid #fff; border-radius: 50%; opacity: 0.85; cursor: crosshair; pointer-events: auto; box-shadow: 0 0 0 1px rgba(0,0,0,0.3); order: 1; } .connector.group-proxy-in:hover { transform: scale(1.4); opacity: 1; } /* グループ代理 OUT のラジオ式リスト */ .group-proxy-list { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; max-height: 280px; overflow-y: auto; border: 1px solid var(--border); border-radius: 4px; padding: 4px; background: rgba(0,0,0,0.18); } .group-proxy-row { padding: 5px 8px; font-size: 11px; font-family: var(--font-mono); color: var(--text-main); border-radius: 3px; cursor: pointer; border: 1px solid transparent; transition: background 0.12s, border-color 0.12s; user-select: none; } .group-proxy-row:hover { background: rgba(255,224,102,0.10); border-color: rgba(255,224,102,0.6); } .group-proxy-row.active { background: rgba(126,232,162,0.14); border-color: rgba(126,232,162,0.85); color: #7ee8a2; font-weight: 600; } /* 代理リンク中のペアを常時発光（淡め・パルス低速） */ .connector.proxy-linked { box-shadow: 0 0 0 1.5px rgba(126,232,162,0.7), 0 0 10px 2px rgba(126,232,162,0.55), 0 0 18px 4px rgba(126,232,162,0.30); animation: proxy-linked-pulse 2.2s ease-in-out infinite; } @keyframes proxy-linked-pulse { 0%,100% { filter: brightness(1.0); } 50% { filter: brightness(1.35); } } /* ホバー時の一時ハイライト（情報色シアン）。category 色と衝突回避 */ .connector.proxy-target-highlight { box-shadow: 0 0 0 2px var(--state-info), 0 0 14px 4px rgba(77,171,247,0.85), 0 0 28px 8px rgba(77,171,247,0.55) !important; z-index: 10 !important; animation: proxy-target-pulse 1s ease-in-out infinite; } @keyframes proxy-target-pulse { 0%,100% { filter: brightness(1.0); } 50% { filter: brightness(1.5); } } /* 四辺リサイズハンドル（透明、ホバー時のみ薄く可視化 + カーソル変化） */ .group-edge { position: absolute; z-index: 4; background: transparent; transition: background 0.12s; } .group-edge:hover { background: currentColor; opacity: 0.25; } .group-edge-t { top: -4px; left: 8px; right: 8px; height: 8px; cursor: ns-resize; } .group-edge-b { bottom: -4px; left: 8px; right: 8px; height: 8px; cursor: ns-resize; } .group-edge-l { left: -4px; top: 8px; bottom: 8px; width: 8px; cursor: ew-resize; } .group-edge-r { right: -4px; top: 8px; bottom: 8px; width: 8px; cursor: ew-resize; } .group-memo-text { position: absolute; top: 34px; left: 12px; right: 12px; font-size: 10px; color: currentColor; opacity: 0.55; line-height: 1.55; pointer-events: none; overflow: hidden; word-break: break-word; } .group-color-palette { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; } .group-color-btn { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: transform 0.1s, border-color 0.15s; flex-shrink: 0; } .group-color-btn:hover { transform: scale(1.25); } .group-color-btn.active { border-color: #fff; box-shadow: 0 0 6px #fff8; } /* ── UIレシーバーノード ───────────────────────────────────────── */ /* ── UIリレーノード（Sender / Receiver） ─────────────────────── */ .node-ui-relay { width: 160px !important; min-height: unset; border-color: var(--cat-ui-relay) !important; background: rgba(74,158,255,0.06); } /* ヘッダー共通 */ .relay-header { display: flex; align-items: center; gap: 4px; font-size: 9px; padding: 3px 8px; letter-spacing: 0.4px; } /* Sender = 青系、Receiver = 緑系 */ .relay-header.relay-sender { background: rgba(74,158,255,0.15); color: #4a9eff; } .relay-header.relay-receiver { background: rgba(126,232,162,0.15); color: #7ee8a2; } .relay-mode-icon { font-size: 11px; line-height: 1; flex-shrink: 0; } .relay-mode-name { font-weight: 700; flex: 1; } .relay-ch-badge { font-size: 8px; font-family: var(--font-mono); font-weight: 700; padding: 1px 4px; border-radius: 3px; background: rgba(255,255,255,0.1); letter-spacing: 0.2px; flex-shrink: 0; } .relay-body { padding: 4px 8px 6px; display: flex; align-items: center; justify-content: center; } .relay-ch-label { font-size: 11px; font-weight: 700; color: var(--text); font-family: var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* relay-out コネクタ（右側・青） */ .relay-out { position: absolute; right: -8px; top: 50%; transform: translateY(-50%); background: var(--conn-ui); width: 14px; height: 14px; border-radius: 50%; background: #4a9eff; border: 2px solid var(--bg); cursor: crosshair; z-index: 3; transition: transform 0.15s, box-shadow 0.15s; } .relay-out:hover { transform: translateY(-50%) scale(1.3); box-shadow: 0 0 6px #4a9effaa; } /* ── FlagRelay ノード ─────────────────────────────────────── */ .node-flag-relay { width: 160px !important; border-color: var(--cat-flag-relay) !important; min-height: unset; background: rgba(216,148,197,0.05); } .flag-relay-header { display: flex; align-items: center; gap: 4px; font-size: 9px; padding: 3px 8px; letter-spacing: 0.4px; } .flag-relay-header.flag-relay-sender { background: rgba(74,158,255,0.15); color: #4a9eff; border-left: 3px solid #4a9eff; } .flag-relay-header.flag-relay-receiver { background: rgba(126,232,162,0.15); color: #7ee8a2; border-left: 3px solid #7ee8a2; } .relay-mode-toggle { font-size: 9px; margin: 4px 8px; padding: 2px 8px; background: transparent; border: 1px solid var(--border); border-radius: 4px; color: var(--text-muted); cursor: pointer; width: calc(100% - 16px); } .relay-mode-toggle:hover { border-color: #ffb86c; color: #ffb86c; } .relay-mode-toggle.ui-relay-toggle:hover { border-color: #4a9eff; color: #4a9eff; } /* FlagRelay IN コネクタ（ストーリーフロー受信 = Sender） */ .flag-relay-in { position: absolute; left: -8px; top: 50%; transform: translateY(-50%); z-index: 3; transition: transform 0.15s, box-shadow 0.15s; } .flag-relay-in:hover { transform: translateY(-50%) scale(1.3); box-shadow: 0 0 6px #cc44aaaa; } /* FlagRelay OUT コネクタ（ストーリーフロー送出 = Receiver） */ .flag-relay-out { position: absolute; right: -8px; top: 50%; transform: translateY(-50%); z-index: 3; transition: transform 0.15s, box-shadow 0.15s; } .flag-relay-out:hover { transform: translateY(-50%) scale(1.3); box-shadow: 0 0 6px #cc44aaaa; } /* ツールバーボタン FlagRelay */ .btn-flag-relay { border-color: var(--cat-flag-relay) !important; color: var(--cat-flag-relay) !important; } .btn-flag-relay:hover { background: rgba(216,148,197,0.12) !important; } /* ── FlagHub ノード ──────────────────────────────────────────── */ .node-flag-hub { width: 180px !important; border-color: var(--cat-flag-hub) !important; min-height: unset; background: rgba(194,95,174,0.05); } .flag-hub-header { display: flex; align-items: center; gap: 4px; font-size: 9px; padding: 3px 8px; letter-spacing: 0.4px; background: rgba(204,68,170,0.15); color: #cc44aa; border-left: 3px solid #cc44aa; } .flag-hub-registry { font-size: 11px; padding: 4px 8px; max-height: 80px; overflow-y: auto; } .flag-hub-reg-row { display: flex; justify-content: space-between; padding: 1px 0; font-size: 10px; } .flag-hub-reg-name { color: #ccc; font-family: var(--font-mono); font-size: 10px; } .flag-hub-reg-value { font-family: var(--font-mono); font-size: 9px; padding: 1px 5px; border-radius: 3px; border: 1px solid currentColor; } .flag-hub-state-on { color: #7ee8a2; background: rgba(126,232,162,0.12); } .flag-hub-state-off { color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.04); } .flag-hub-state-val { color: #cc44aa; background: rgba(204,68,170,0.10); } /* Ending の Flag 書き出し OUT — 右下角に配置 */ .connector.ending-flag-write-out { position: absolute; right: -8px; bottom: 10px; width: 11px; height: 11px; background: #cc44aa; border: 2px solid #fff; border-radius: 50%; cursor: crosshair; box-shadow: 0 0 0 1px rgba(0,0,0,0.3); z-index: 4; } .connector.ending-flag-write-out:hover { transform: scale(1.4); } .connector.ending-flag-write-out::after { content: 'Flag'; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 8px; font-weight: 700; font-family: var(--font-mono); color: #cc44aa; background: rgba(0,0,0,0.55); border: 1px solid #cc44aa; border-radius: 3px; padding: 0 4px; pointer-events: none; white-space: nowrap; } .flag-hub-empty { font-size: 10px; color: var(--text-muted); padding: 2px 0; } /* ── FlagDevelop ノード ─────────────────────────────────────── */ .node-flag-develop { width: 200px !important; border-color: var(--cat-flag-dev) !important; min-height: unset; background: rgba(194,95,174,0.04); } .flag-develop-header { display: flex; align-items: center; gap: 4px; font-size: 9px; padding: 3px 8px; letter-spacing: 0.4px; background: rgba(204,68,170,0.10); color: #cc44aa; border-left: 3px solid #cc44aa; } .flag-dev-badge { font-size: 8px; background: #cc44aa; color: white; border-radius: 2px; padding: 1px 4px; margin-left: auto; } .flag-develop-table { padding: 4px 8px; font-size: 10px; max-height: 120px; overflow-y: auto; } .flag-dev-row { display: flex; justify-content: space-between; padding: 1px 0; } .flag-dev-header-row { color: #888; border-bottom: 1px solid rgba(255,255,255,0.08); margin-bottom: 2px; } .flag-dev-name { color: #ccc; } .flag-dev-value { color: #cc44aa; font-family: var(--font-mono); } .flag-dev-empty { font-size: 10px; color: var(--text-muted); padding: 2px 0; } /* スキャンバッジ（FlagRelay Sender） */ .scan-badge { color: #7ee8a2; font-size: 9px; } /* ツールバーボタン FlagHub / FlagDevelop */ .btn-flag-hub { border-color: var(--cat-flag-hub) !important; color: var(--cat-flag-hub) !important; } .btn-flag-hub:hover { background: rgba(194,95,174,0.12) !important; } .btn-flag-develop { border-color: var(--cat-flag-dev) !important; color: var(--cat-flag-dev) !important; opacity: 0.8; } .btn-flag-develop:hover { background: rgba(194,95,174,0.12) !important; opacity: 1; } /* ツールバーボタン */ .btn-ui-recv { border-color: #aaaaaa !important; color: #aaaaaa !important; } .btn-ui-recv:hover { background: rgba(170,170,170,0.12) !important; } /* エディター内のチャンネル番号表示 */ .relay-chnum-display { font-size: 18px; font-family: var(--font-mono); font-weight: 700; color: var(--text); padding: 6px 0 4px; letter-spacing: 1px; } .relay-chnum-hint { font-size: 10px; color: var(--text-muted); margin-top: 4px; line-height: 1.5; } /* Sender チャンネル選択ドロップダウン */ .relay-target-select { width: 100%; padding: 7px 10px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 12px; font-family: var(--font-ui); cursor: pointer; margin-top: 4px; } .relay-target-select:focus { outline: none; border-color: #4a9eff; } /* エディター内のモード切り替えボタン */ .relay-toggle-btn { width: 100%; padding: 8px 12px; border-radius: 6px; font-size: 12px; font-weight: 700; cursor: pointer; border: 1.5px solid; transition: background 0.15s; } .relay-toggle-btn.sender { border-color: #4a9eff; color: #4a9eff; background: rgba(74,158,255,0.1); } .relay-toggle-btn.sender:hover { background: rgba(74,158,255,0.2); } .relay-toggle-btn.receiver { border-color: #7ee8a2; color: #7ee8a2; background: rgba(126,232,162,0.1); } .relay-toggle-btn.receiver:hover { background: rgba(126,232,162,0.2); } /* ── クイックノード追加メニュー ──────────────────────────────── */ #node-quick-menu { position: fixed; z-index: 99999; background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px; padding: 5px; box-shadow: 0 8px 28px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04); min-width: 148px; animation: qm-in 0.1s ease; transform-origin: top left; } @keyframes qm-in { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } } .qm-section-title { font-size: 10px; font-family: var(--font-ui); color: var(--text-muted); padding: 4px 10px 4px; letter-spacing: 0.6px; text-transform: uppercase; } .qm-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 6px; cursor: pointer; font-size: 12px; font-family: var(--font-ui); color: var(--text); transition: background 0.1s; user-select: none; } .qm-item:hover { background: rgba(255,255,255,0.07); } .qm-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; } /* ── ノード ────────────────────────────────────────────────── */ .node { position: absolute; width: var(--node-w); min-height: 100px; background: var(--node-bg); border: 1.5px solid var(--node-border); border-radius: var(--node-radius); padding: 12px; cursor: move; box-shadow: var(--shadow-node); z-index: 10; transition: box-shadow 0.2s; /* キャンバスドラッグ範囲選択時にテキスト選択が走らないように。 入力欄（input/textarea/contenteditable）は下のルールで個別に解禁。*/ user-select: none; -webkit-user-select: none; } /* ノード内の編集可能要素はテキスト選択を許可（コピー&ペースト/編集のため） */ .node input, .node textarea, .node select, .node [contenteditable="true"], .node [contenteditable=""] { user-select: text; -webkit-user-select: text; } .node:hover { box-shadow: 0 12px 40px rgba(0,0,0,0.6); } .node.selected { border-color: var(--accent); border-width: 2px; box-shadow: 0 0 0 3px rgba(126,232,162,0.15), var(--shadow-node); } .node-header { font-size: 9px; font-weight: 700; letter-spacing: 1.5px; /* ★ text-transform: uppercase を撤去 — "EzUI" の小文字 z を保つため。 ラベルは HTML ソース表記そのまま (既存は大文字書き) で表示される。 */ font-family: 'Inter', 'Segoe UI', 'Helvetica Neue', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Meiryo', sans-serif; color: var(--text-muted); margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border); } /* ノード内テキストエリア */ .node textarea { width: 100%; background: transparent; color: var(--text); border: none; border-bottom: 1px solid var(--border); border-radius: 0; font-family: var(--font-mono); font-size: 11px; padding: 4px 0; resize: none; min-height: 50px; transition: border-color 0.15s; } .node textarea:focus { outline: none; border-color: var(--accent); } /* 削除ボタン */ .delete-btn { position: absolute; top: -9px; right: -9px; background: var(--danger); color: #fff; border: none; border-radius: 50%; width: 20px; height: 20px; font-size: 13px; line-height: 20px; text-align: center; cursor: pointer; opacity: 0; transition: opacity 0.15s; z-index: 30; padding: 0; } .node:hover .delete-btn { opacity: 1; } /* ── コネクター ────────────────────────────────────────────── */ .connector { width: 12px; height: 12px; border-radius: 50%; position: absolute; cursor: grab; /* 掴める手のひらカーソル */ z-index: 20; border: 2px solid rgba(0,0,0,0.5); transition: transform 0.12s, box-shadow 0.15s, filter 0.15s; } /* 拡張ヒット領域：見えない円を点の周囲に重ねる（吸着エリア） */ .connector::before { content: ''; position: absolute; inset: -10px; /* 12px → 約 32px の実効ヒット領域 */ border-radius: 50%; pointer-events: auto; z-index: -1; /* 視覚的には背後 */ cursor: grab; } /* マウスダウン中：開いた手 → 握る手 へ即座に切替（ドラッグ前から反応） */ .connector:active, .connector:active::before { cursor: grabbing; } /* ホバー時（拡張領域含む）：点が発光して吸着可能と分かる */ .connector:hover { transform: scale(1.35); box-shadow: 0 0 0 3px rgba(255,255,255,0.25), 0 0 14px 6px rgba(255,255,255,0.55); filter: brightness(1.45); } /* 接続ドラッグ中：全コネクタを薄く発光させてターゲットを視認しやすく */ body.connector-dragging .connector { box-shadow: 0 0 0 2px rgba(255,255,255,0.18), 0 0 10px 3px rgba(255,255,255,0.35); filter: brightness(1.2); } body.connector-dragging .connector:hover { transform: scale(1.6); box-shadow: 0 0 0 4px rgba(255,255,255,0.5), 0 0 22px 8px rgba(192,255,255,0.9); filter: brightness(1.6); } /* ドラッグ中：テキスト選択抑止 + 全体を grabbing（握っている手）カーソルに */ body.connector-dragging, body.connector-dragging * { user-select: none !important; cursor: grabbing !important; } .conn-in { background: var(--conn-in); } .conn-out { background: var(--conn-out); } .conn-flag { background: #cc44aa; border-color: #cc44aa; } .in-point { left: -8px; top: 20px; } .out-point { right: -8px; top: 20px; } .flag-in-pt { position: absolute; left: -8px; top: 54px; } .flag-out-pt { position: absolute; right: -8px; top: 54px; } /* 選択肢コネクター（choiceノード用） */ .choice-item { position: relative; margin-top: 6px; } .choice-item input[type="text"] { width: calc(100% - 16px); background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 4px 8px; font-family: var(--font-mono); font-size: 11px; } .choice-item input:focus { outline: none; border-color: var(--accent); } .choice-out { right: -20px; top: 13px; /* input 行の中央に固定（UI Δ 展開に連動しない） */ background: var(--conn-out); } /* ボタン（ノード内 action-btn） */ .action-btn { font-family: var(--font-ui); font-size: 10px; font-weight: 700; letter-spacing: 0.5px; padding: 5px 10px; border-radius: 5px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-muted); cursor: pointer; width: 100%; margin-top: 6px; transition: background 0.15s, color 0.15s; } .action-btn:hover { background: var(--surface); color: var(--accent); } /* ── 一時カーソル（接続ライン用）─────────────────────────────── */ #temp-cursor { position: absolute; width: 1px; height: 1px; pointer-events: none; visibility: hidden; } /* ── スクロールバー ────────────────────────────────────────── */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } /* ── 見出し入力欄（サイドエディタ） ─────────────────────────── */ .editor-section input[type="text"]#editor-heading { font-family: var(--font-ui); font-size: 13px; font-weight: 700; letter-spacing: 0.5px; color: var(--accent); background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 7px 10px; width: 100%; } .editor-section input[type="text"]#editor-heading:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(126,232,162,0.15); } /* ── 線スタイル切り替えボタン ───────────────────────────────── */ .line-style-btns { display: flex; gap: 3px; margin-left: 8px; padding-left: 12px; border-left: 1px solid var(--border); } .line-style-btn { padding: 5px 7px; display: flex; align-items: center; justify-content: center; color: var(--text-muted); transition: color 0.15s, border-color 0.15s, background 0.15s; } .line-style-btn svg { display: block; pointer-events: none; } .line-style-btn:hover { color: var(--text); } .line-style-btn.active { border-color: var(--accent); color: var(--accent); background: var(--surface); } /* ── ラインラベル入力欄（ツールバー） ────────────────────────── */ .line-label-wrap { display: flex; align-items: center; gap: 6px; margin-left: 10px; padding-left: 10px; border-left: 1px solid var(--border); } .line-label-icon { font-size: 13px; color: var(--text-muted); user-select: none; } .line-label-wrap input[type="text"] { font-family: var(--font-ui); font-size: 11px; width: 130px; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 5px; padding: 4px 8px; transition: border-color 0.15s; } .line-label-wrap input[type="text"]:focus { outline: none; border-color: var(--accent); } .line-label-wrap input[type="text"]::placeholder { color: var(--text-muted); font-style: italic; } /* ── Param ボタン ───────────────────────────────────────────── */ .btn-param { background: rgba(189,147,249,0.10); border-color: rgba(189,147,249,0.4); color: var(--cat-param); } .btn-param:hover { background: rgba(189,147,249,0.20); border-color: var(--cat-param); color: var(--cat-param); } /* ── Paramノード ─────────────────────────────────────────────── */ .node-param { border-color: #7b5ea7 !important; min-height: 70px; width: 230px; } .node-param .node-header { color: var(--cat-param); border-bottom-color: rgba(189,147,249,0.25); } /* Param OUT コネクター（紫） */ .param-out { background: var(--conn-param) !important; } .param-out:hover { box-shadow: 0 0 6px 2px rgba(189,147,249,0.6); } .param-out-point { position: absolute; right: -20px; top: 50%; margin-top: -6px; } /* UI専用 OUT コネクター（青） */ .param-ui-out { background: #4a9eff !important; } .param-ui-out-pt { position: absolute; right: -20px; top: 50%; margin-top: -6px; } .param-ui-row { position: relative; display: flex; align-items: center; justify-content: flex-end; padding: 4px 4px 1px; margin-top: 1px; } /* Param IN ＋ UI OUT を同じ行に並べる（Param ノード用） */ .param-in-ui-row { position: relative; display: flex; align-items: center; padding: 4px 4px 4px 4px; margin-top: 1px; gap: 4px; } .param-ui-label { font-family: var(--font-ui); font-size: 9px; font-weight: 700; letter-spacing: 1.2px; color: #4a9eff; user-select: none; margin-right: 6px; } /* ── Param 効果専用コネクター（紫） ─────────────────────────── */ /* OUT 側（Event ノード・Choice アイテム上） */ .param-effect-out { background: #bd93f9 !important; box-shadow: 0 0 0 2px rgba(189,147,249,0.25); } .param-effect-out:hover { box-shadow: 0 0 6px 2px rgba(189,147,249,0.55) !important; } .param-effect-out.param-effect-connected { box-shadow: 0 0 7px 2px rgba(189,147,249,0.65) !important; border-color: #bd93f9 !important; } .param-effect-out-pt { position: absolute; right: -20px; top: 50%; margin-top: -6px; } /* IN 側（Param ノード上） */ .param-effect-in { background: #bd93f9 !important; box-shadow: 0 0 0 2px rgba(189,147,249,0.25); } .param-effect-in:hover { box-shadow: 0 0 6px 2px rgba(189,147,249,0.55) !important; } .param-effect-in-pt { position: absolute; left: -20px; top: 50%; margin-top: -6px; } /* インゲーム / アウトゲーム時：UI・Param コネクタ行グレーアウト */ .conn-group-grayed { opacity: 0.3; pointer-events: none; } .connector.conn-grayed { background: #555 !important; border-color: #555 !important; box-shadow: none !important; cursor: default !important; pointer-events: none; } /* エンジン参照入力ラッパー */ .ev-engine-ref-wrap { padding: 6px 10px 8px; } .ev-engine-ref-label { font-size: 9px; font-weight: 700; font-family: var(--font-ui); color: var(--text-muted); letter-spacing: 0.5px; margin-bottom: 4px; } .ev-engine-ref-input { width: 100%; box-sizing: border-box; font-size: 11px; font-family: var(--font-mono); background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 4px 8px; } .ev-engine-ref-input:focus { outline: none; border-color: var(--accent); } /* エディタ側のノート文 */ .ev-engine-ref-note { font-size: 10px; color: var(--text-muted); line-height: 1.6; margin-top: 6px; } /* Event ノード用 Param 行（UI 行と同スタイル・紫） */ .param-effect-node-row { position: relative; display: flex; align-items: center; justify-content: flex-end; padding: 4px 20px 1px 4px; /* right padding でコネクタ分のスペース確保 */ margin-top: 1px; } /* Param ノード用 Param IN 行（左側に点・ノード左端に突き出す） */ .param-effect-in-row { position: relative; /* 子の absolute 基準 */ display: flex; align-items: center; justify-content: flex-start; padding: 4px 4px 1px 4px; margin-top: 1px; } /* IN 点は行の左端から -20px → ノードの左ボーダーの外に突き出す */ .param-effect-in-pt { position: absolute; left: -20px; /* node.padding(12px) - 20px = -8px from node border ≈ .in-point と同等 */ top: 50%; margin-top: -6px; } /* ラベル共通 */ .param-effect-label { font-family: var(--font-ui); font-size: 9px; font-weight: 700; letter-spacing: 1.2px; color: #bd93f9; user-select: none; } .param-effect-node-row .param-effect-label { margin-right: 6px; } .param-effect-in-label { margin-left: 6px; } /* Choice アイテム用 Param 行 */ .choice-param-effect-row { position: relative; display: flex; align-items: center; justify-content: flex-end; padding: 2px 20px 3px 4px; /* right padding で右端にスペース確保 */ margin-top: 1px; border-top: 1px dashed rgba(189,147,249,0.18); } .choice-param-effect-row .param-effect-label { margin-right: 6px; } /* Choice-item内のparam-effect-outはabsolute配置で右端に突き出す */ .choice-param-effect-out { position: absolute !important; right: -20px; top: 50%; margin-top: -6px; } /* パラメーターアイテム（複数） */ .param-item { position: relative; padding-right: 18px; margin: 5px 0; } .param-item-body { background: var(--surface-2); border-radius: 5px; padding: 5px 7px; } .param-name-display { font-family: var(--font-ui); font-size: 11px; font-weight: 700; color: var(--text); margin-bottom: 4px; letter-spacing: 0.3px; } .param-gauge-track { width: 100%; height: 7px; background: var(--bg); border-radius: 4px; overflow: hidden; margin-bottom: 3px; cursor: ew-resize; user-select: none; } .param-gauge-fill { height: 100%; border-radius: 4px; pointer-events: none; } .param-range-display { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: 9px; color: var(--text-muted); } .param-initial-val { font-size: 10px; color: var(--text); font-weight: 700; } /* ── カウント表示（ノード内） ────────────────────────────── */ .param-count-display { display: flex; align-items: baseline; gap: 4px; justify-content: center; padding: 2px 0 1px; } .param-count-val { font-family: var(--font-mono); font-size: 20px; font-weight: 700; line-height: 1; } .param-count-max { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); } /* ── フラグ表示（ノード内） ──────────────────────────────── */ .param-flag-display { display: inline-block; font-family: var(--font-mono); font-size: 12px; font-weight: 700; padding: 3px 12px; border-radius: 20px; border: 1px solid var(--border); margin: 2px auto; letter-spacing: 1px; text-align: center; color: var(--text-muted); } .param-flag-display.flag-on { /* color/border set inline */ } .param-flag-display.flag-off { color: var(--text-muted); } /* ── ランク表示（ノード内） ──────────────────────────────── */ .param-rank-display { display: flex; gap: 3px; justify-content: center; padding: 2px 0; } .param-rank-badge { font-family: var(--font-mono); font-size: 11px; font-weight: 700; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 4px; border: 1px solid var(--border); color: var(--text-muted); background: transparent; letter-spacing: 0; } .param-rank-badge.active { /* color/border/bg set inline */ } /* ── Paramエディタ（サイドエディタ内） ──────────────────────── */ /* 属性タイプ選択ボタン */ .param-type-btns { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; } .param-type-btn { font-size: 11px; padding: 4px 10px; border-radius: 5px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-muted); cursor: pointer; transition: background 0.15s, color 0.15s; } .param-type-btn:hover { background: rgba(255,255,255,0.07); color: var(--text); } .param-type-btn.active { background: rgba(162,155,254,0.18); border-color: rgba(162,155,254,0.5); color: #a29bfe; font-weight: 700; } /* ランク選択（エディタ内） */ .param-rank-editor-row { display: flex; gap: 5px; } .param-rank-editor-btn { flex: 1; font-family: var(--font-mono); font-size: 13px; font-weight: 700; padding: 6px 0; border-radius: 5px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-muted); cursor: pointer; text-align: center; transition: background 0.15s; } .param-rank-editor-btn:hover { background: rgba(255,255,255,0.07); color: var(--text); } .param-rank-editor-btn.active { background: rgba(162,155,254,0.18); border-color: rgba(162,155,254,0.5); color: #a29bfe; } .param-triple { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; } .param-triple label { display: flex; flex-direction: column; gap: 4px; font-size: 9px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: var(--text-muted); } .param-triple input[type="number"] { width: 100%; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 5px; padding: 5px 6px; font-family: var(--font-mono); font-size: 12px; text-align: center; } .param-triple input[type="number"]:focus { outline: none; border-color: #bd93f9; } .param-color-palette { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; } .param-color-btn { width: 18px; height: 18px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: transform 0.1s, border-color 0.15s; } .param-color-btn:hover { transform: scale(1.25); } .param-color-btn.active { border-color: #fff; box-shadow: 0 0 6px #fff8; } /* ── パラメーター効果（ストーリーノードエディタ内） ──────────── */ .param-effect-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; } .param-effect-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; display: inline-block; } .param-effect-name { flex: 1; font-size: 12px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .param-effect-delta { width: 70px; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 5px; padding: 4px 6px; font-family: var(--font-mono); font-size: 12px; text-align: right; flex-shrink: 0; } .param-effect-delta:focus { outline: none; border-color: #bd93f9; } /* ── UIプレビューノード ──────────────────────────────────────── */ .node-ui { border-color: var(--cat-ui) !important; width: 260px; } .node-ui .node-header { color: var(--cat-ui); border-bottom-color: rgba(74,158,255,0.25); } /* ノード内のゲーム画面風スクリーン */ .ui-screen { background: rgba(0,0,0,0.5); border: 1px solid rgba(74,158,255,0.18); border-radius: 7px; margin: 7px 0 4px; overflow: hidden; } /* ウィジェットセクション共通 */ .ui-node-section { padding: 7px 11px; } .ui-node-sec-label { font-size: 8px; font-weight: 700; letter-spacing: 1.2px; color: rgba(74,158,255,0.55); margin-bottom: 5px; font-family: var(--font-mono); } .ui-node-divider { height: 1px; background: rgba(74,158,255,0.1); } .ui-node-empty { font-size: 9px; color: rgba(255,255,255,0.2); font-style: italic; } /* ゲージセクション */ .ui-node-gauge .ui-gauge-label { margin-bottom: 5px; } /* トーストセクション */ .ui-toast-preview { font-size: 10px; padding: 4px 9px; border-radius: 12px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-style: italic; } .ui-toast-preview.ui-toast-active { background: rgba(74,158,255,0.12); border-color: rgba(74,158,255,0.45); color: #4a9eff; font-style: normal; font-weight: 600; } /* シーン名バナーセクション */ .ui-scene-banner-prev { font-size: 11px; font-weight: 700; padding: 4px 8px; border-radius: 4px; border-left: 3px solid; background: rgba(255,255,255,0.03); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ui-scene-prev-adv { border-color: var(--accent); color: var(--accent); } .ui-scene-prev-ingame { border-color: var(--scene-ingame); color: var(--scene-ingame); } .ui-scene-prev-outgame { border-color: var(--scene-outgame); color: var(--scene-outgame); } /* フラグインジケーターセクション */ .ui-flags-prev { display: flex; flex-wrap: wrap; gap: 3px; } .ui-flag-prev { font-size: 9px; padding: 2px 6px; border-radius: 8px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.3); transition: all 0.2s; } .ui-flag-prev.ui-flag-on { background: rgba(126,232,162,0.15); border-color: rgba(126,232,162,0.4); color: #7ee8a2; font-weight: 700; } /* イベントログ・選択履歴セクション */ .ui-log-prev-entry { font-size: 9px; color: rgba(255,255,255,0.55); padding: 2px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-left: 2px solid transparent; padding-left: 5px; } .ui-log-adv { border-color: rgba(126,232,162,0.4); } .ui-log-ingame { border-color: rgba(74,158,255,0.4); } .ui-log-outgame { border-color: rgba(255,184,108,0.4); } /* カウンターセクション */ .ui-counter-prev-row { display: flex; justify-content: space-between; align-items: center; padding: 2px 0; } .ui-counter-prev-lbl { font-size: 9px; color: rgba(255,255,255,0.5); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; } .ui-counter-prev-val { font-size: 10px; font-weight: 700; font-family: var(--font-mono); color: #4a9eff; margin-left: 6px; flex-shrink: 0; } /* トロフィーセクション */ .ui-trophy-prev-row { display: flex; align-items: center; gap: 5px; padding: 2px 0; opacity: 0.4; } .ui-trophy-prev-row.ui-trophy-prev-on { opacity: 1; } .ui-trophy-prev-icon { font-size: 12px; flex-shrink: 0; } .ui-trophy-prev-name { font-size: 9px; color: var(--text); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ui-trophy-prev-check { font-size: 10px; font-weight: 700; color: #f9d423; flex-shrink: 0; } .ui-screen-empty { color: rgba(255,255,255,0.2); font-size: 10px; font-family: var(--font-ui); text-align: center; padding: 4px 0; letter-spacing: 0.4px; font-style: italic; } /* 複合ゲージ（ノード内） */ .ui-gauge-label { font-family: var(--font-ui); font-size: 10px; font-weight: 700; letter-spacing: 0.6px; color: #4a9eff; text-align: center; margin-bottom: 6px; } .ui-gauge-bar { width: 100%; height: 9px; background: rgba(255,255,255,0.07); border-radius: 5px; overflow: hidden; margin-bottom: 4px; } .ui-gauge-fill { height: 100%; border-radius: 5px; background: linear-gradient(90deg, #4a9eff 0%, #7ee8a2 100%); transition: width 0.4s cubic-bezier(.4,0,.2,1); } .ui-gauge-val { font-family: var(--font-mono); font-size: 10px; color: rgba(255,255,255,0.55); text-align: center; } /* UIノードのウィジェットタグ（キャンバス表示用） */ .ui-widget-tags { display: flex; flex-wrap: wrap; gap: 3px; padding: 4px 8px 6px; } .ui-widget-pill { font-size: 9px; padding: 1px 6px; border-radius: 8px; background: rgba(74,158,255,0.15); border: 1px solid rgba(74,158,255,0.35); color: #4a9eff; font-family: var(--font-mono); letter-spacing: 0.3px; } /* UIノードのINコネクター（青） */ .ui-in { background: #4a9eff !important; } /* ── UIエディタ（サイドエディタ内）— 複合ゲージ ─────────────── */ .ui-editor-screen { background: rgba(0,0,0,0.58); border: 1px solid rgba(74,158,255,0.22); border-radius: 10px; padding: 18px 22px; margin-top: 6px; min-height: 72px; } .ui-editor-gauge-label { font-family: var(--font-ui); font-size: 15px; font-weight: 800; color: #4a9eff; text-align: center; margin-bottom: 12px; letter-spacing: 0.5px; } .ui-editor-bar { width: 100%; height: 13px; background: rgba(255,255,255,0.07); border-radius: 7px; overflow: hidden; margin-bottom: 8px; } .ui-editor-fill { height: 100%; border-radius: 7px; background: linear-gradient(90deg, #4a9eff 0%, #7ee8a2 100%); transition: width 0.4s cubic-bezier(.4,0,.2,1); } .ui-editor-valrow { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--font-mono); } .ui-editor-val { font-size: 18px; font-weight: 700; color: var(--text); } .ui-editor-max { font-size: 11px; color: var(--text-muted); } .ui-no-conn { color: rgba(255,255,255,0.3); font-family: var(--font-ui); font-size: 12px; text-align: center; padding: 12px 0; line-height: 1.8; } .ui-sim-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; letter-spacing: 0.8px; color: var(--accent); text-transform: uppercase; padding: 2px 8px 2px 6px; border: 1px solid rgba(126,232,162,0.35); border-radius: 20px; background: rgba(126,232,162,0.07); } .ui-sim-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: sim-blink 1.1s infinite; } @keyframes sim-blink { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } } .ui-editor-hint { color: var(--text-muted); font-size: 11px; line-height: 1.75; } .ui-editor-hint strong { color: var(--text); } /* エディターのウィジェット切り替えUI */ .ui-widget-toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,0.04); } .ui-widget-toggle-row:last-child { border-bottom: none; } .ui-widget-toggle-label { font-size: 11px; color: var(--text-muted); } .ui-widget-toggle-label.active { color: #4a9eff; } .ui-widget-chk { width: 14px; height: 14px; accent-color: #4a9eff; cursor: pointer; } /* エディターのウィジェット種別ボタングリッド */ .ui-widget-btn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 4px; } .ui-widget-btn { padding: 5px 8px; border-radius: 5px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.04); color: var(--text-muted); font-size: 10px; cursor: pointer; text-align: center; transition: all 0.12s; } .ui-widget-btn:hover { border-color: rgba(74,158,255,0.4); color: var(--text); } .ui-widget-btn.active { background: rgba(74,158,255,0.22); border-color: #4a9eff; color: #4a9eff; font-weight: 700; box-shadow: 0 0 8px rgba(74,158,255,0.35), inset 0 0 6px rgba(74,158,255,0.1); text-shadow: 0 0 6px rgba(74,158,255,0.6); } /* メタノード（START / Ending）エディタバナー */ .meta-node-banner { display: flex; align-items: flex-start; gap: 8px; background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; } .meta-node-icon { font-size: 14px; flex-shrink: 0; margin-top: 1px; color: var(--text-muted); } /* GSAnim メタバナーで使う、ロゴ画像版アイコン (絵文字 🎬 の代替) */ .meta-node-icon-img { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; opacity: 0.85; display: inline-block; } .meta-node-desc { font-size: 11px; line-height: 1.7; color: var(--text-muted); } /* ── Run ボタン ─────────────────────────────────────────────── */ .btn-run { background: rgba(126, 232, 162, 0.12); border-color: rgba(126, 232, 162, 0.45); color: var(--accent); letter-spacing: 1px; } .btn-run:hover { background: rgba(126, 232, 162, 0.22); border-color: var(--accent); color: var(--accent); } /* ── 言語切り替えボタン ─────────────────────────────────────── */ .btn-lang { background: transparent; border: 1px solid var(--border); color: var(--text-muted); font-size: 10px; font-weight: 700; font-family: var(--font-ui); letter-spacing: 0.08em; padding: 3px 8px; border-radius: 4px; cursor: pointer; transition: background 0.15s, color 0.15s; } .btn-lang:hover { background: rgba(255,255,255,0.08); color: var(--text); } /* 完成度バッジ（ノード枠外・右下） */ .node-completeness-badge { position: absolute; bottom: -10px; right: -10px; font-size: 9px; font-family: var(--font-mono); font-weight: 700; padding: 2px 6px; border-radius: 10px; border: 1px solid currentColor; pointer-events: auto; cursor: help; white-space: nowrap; z-index: 5; letter-spacing: 0.5px; box-shadow: 0 1px 4px rgba(0,0,0,0.55); transition: transform 0.15s; } .node-completeness-badge:hover { transform: scale(1.1); } .node-completeness-badge.complete { color: #0d1f15; background: #7ee8a2; } .node-completeness-badge.partial { color: #1f1808; background: var(--state-progress); } .node-completeness-badge.empty { color: #1f0808; background: #ff6b6b; } /* バッジ全非表示（ツールバーの 👁 で切替） */ body.hide-completeness-badges .node-completeness-badge { display: none !important; } /* 完成度ダッシュボードボタン */ .btn-completeness { background: transparent; border: 1px solid rgba(116,235,213,0.55); color: #74ebd5; font-size: 13px; padding: 2px 8px; border-radius: 4px; cursor: pointer; margin-left: 4px; } .btn-completeness:hover { background: rgba(116,235,213,0.18); } /* 完成度モーダル */ #completeness-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); display: none; align-items: center; justify-content: center; z-index: 100000; } #completeness-modal { width: min(720px, 90vw); max-height: 85vh; background: var(--surface, #1a1a22); border: 1px solid rgba(116,235,213,0.4); border-radius: 8px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 12px 48px rgba(0,0,0,0.7); } #completeness-modal .cm-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--border); background: rgba(0,0,0,0.35); } #completeness-modal .cm-title { font-size: 14px; font-weight: 700; color: #74ebd5; } #completeness-modal .cm-close { width: 28px; height: 28px; background: transparent; border: 1px solid var(--border); color: var(--text-muted); border-radius: 4px; cursor: pointer; font-size: 16px; } #completeness-modal .cm-close:hover { background: rgba(255,107,107,0.18); color: #ff6b6b; } #completeness-modal .cm-body { flex: 1; overflow-y: auto; padding: 18px 22px; } .cm-overall { text-align: center; margin-bottom: 18px; padding: 14px; background: rgba(116,235,213,0.08); border: 1px solid rgba(116,235,213,0.35); border-radius: 6px; } .cm-overall-num { font-size: 38px; font-weight: 800; font-family: var(--font-mono); color: #74ebd5; line-height: 1; } .cm-overall-num span { font-size: 18px; opacity: 0.7; } .cm-overall-bar { height: 8px; background: rgba(0,0,0,0.45); border-radius: 4px; overflow: hidden; margin: 10px auto 6px; max-width: 320px; } .cm-overall-fill { height: 100%; background: linear-gradient(90deg, #74ebd5, #7ee8a2); } .cm-overall-sub { font-size: 11px; color: var(--text-muted); } .cm-types { display: flex; flex-direction: column; gap: 4px; margin-bottom: 18px; } .cm-type-row { display: grid; grid-template-columns: 100px 1fr 50px 60px; align-items: center; gap: 8px; font-size: 11px; } .cm-type-name { color: var(--text); font-family: var(--font-mono); } .cm-type-bar { height: 6px; background: rgba(0,0,0,0.45); border-radius: 3px; overflow: hidden; } .cm-type-fill { height: 100%; background: linear-gradient(90deg, var(--state-progress), var(--state-success)); } .cm-type-pct { color: #74ebd5; text-align: right; font-family: var(--font-mono); } .cm-type-count { color: var(--text-muted); text-align: right; font-family: var(--font-mono); font-size: 10px; } .cm-section-title { font-size: 13px; font-weight: 700; color: var(--state-progress); margin: 16px 0 8px; border-bottom: 1px solid rgba(255,212,121,0.25); padding-bottom: 4px; } .cm-incomplete-list { display: flex; flex-direction: column; gap: 6px; } .cm-incomplete-item { padding: 8px 12px; background: rgba(255,212,121,0.05); border: 1px solid rgba(255,212,121,0.25); border-radius: 4px; cursor: pointer; transition: all 0.15s; } .cm-incomplete-item:hover { background: rgba(255,212,121,0.15); border-color: var(--state-progress); } .cm-item-head { display: flex; align-items: center; gap: 8px; font-size: 12px; } .cm-item-type { padding: 1px 6px; border-radius: 3px; background: rgba(255,255,255,0.08); color: var(--text-muted); font-size: 10px; font-family: var(--font-mono); } .cm-item-label { flex: 1; color: var(--text); font-weight: 600; } .cm-item-score { color: var(--state-progress); font-family: var(--font-mono); font-weight: 700; } .cm-item-missing { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; font-size: 10px; } .cm-item-missing span { padding: 1px 5px; border-radius: 3px; background: rgba(255,107,107,0.10); color: #ff6b6b; font-family: var(--font-mono); } .cm-allgood { text-align: center; padding: 30px; font-size: 15px; color: #7ee8a2; } /* エクスポート形式ピッカー */ #export-picker-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; z-index: 100000; } #export-picker { width: min(540px, 90vw); background: var(--surface, #1a1a22); border: 1px solid rgba(116,235,213,0.4); border-radius: 8px; display: flex; flex-direction: column; box-shadow: 0 12px 48px rgba(0,0,0,0.7); overflow: hidden; } #export-picker .ep-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: rgba(0,0,0,0.35); border-bottom: 1px solid var(--border); } #export-picker .ep-title { font-size: 13px; font-weight: 700; color: #74ebd5; } #export-picker .ep-close { width: 28px; height: 28px; background: transparent; border: 1px solid var(--border); color: var(--text-muted); border-radius: 4px; cursor: pointer; font-size: 16px; } #export-picker .ep-close:hover { background: rgba(255,107,107,0.18); color: #ff6b6b; } #export-picker .ep-list { padding: 12px; display: flex; flex-direction: column; gap: 8px; } .ep-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; text-align: left; transition: all 0.15s; color: var(--text); } .ep-item:hover { background: rgba(116,235,213,0.10); border-color: #74ebd5; transform: translateX(2px); } .ep-item-icon { font-size: 22px; width: 32px; text-align: center; flex-shrink: 0; } .ep-item-body { flex: 1; } .ep-item-title { font-size: 13px; font-weight: 700; color: #74ebd5; margin-bottom: 3px; } .ep-item-desc { font-size: 11px; color: var(--text-muted); line-height: 1.5; } .node-flash { animation: node-flash-pulse 1.2s ease-out; } /* ジャンプ到達後のノード発光（クリックまで継続） 情報色（シアン系）を使うことでカテゴリ色（Choice/Title の黄など）と衝突回避 */ .node.node-jump-highlight { box-shadow: 0 0 0 3px var(--state-info), 0 0 24px 6px rgba(77,171,247,0.7) !important; animation: node-jump-pulse 1.1s ease-in-out infinite alternate; z-index: 30 !important; } @keyframes node-jump-pulse { from { filter: brightness(1.0); box-shadow: 0 0 0 3px var(--state-info), 0 0 24px 6px rgba(77,171,247,0.55); } to { filter: brightness(1.45); box-shadow: 0 0 0 5px var(--state-info), 0 0 36px 10px rgba(77,171,247,0.85); } } /* 完成度ダッシュボード — 改良版 */ .cm-incomplete-item .cm-item-head { gap: 8px; } .cm-jump-btn { padding: 2px 8px; font-size: 10px; background: rgba(116,235,213,0.18); border: 1px solid rgba(116,235,213,0.55); color: #74ebd5; border-radius: 3px; cursor: pointer; white-space: nowrap; } .cm-jump-btn:hover { background: rgba(116,235,213,0.35); color: #fff; } .cm-item-missing-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; } .cm-miss-row { display: grid; grid-template-columns: 20px 1fr auto auto; align-items: center; gap: 8px; padding: 3px 8px; font-size: 11px; background: rgba(255,107,107,0.08); border: 1px solid rgba(255,107,107,0.25); border-radius: 3px; } .cm-miss-x { color: #ff6b6b; font-weight: 700; text-align: center; } .cm-miss-label { color: var(--text); } .cm-miss-status { font-size: 9px; font-family: var(--font-mono); color: #ff6b6b; padding: 1px 6px; background: rgba(255,107,107,0.18); border-radius: 8px; } .cm-miss-complete { padding: 1px 6px; font-size: 10px; background: transparent; border: 1px solid rgba(126,232,162,0.5); color: #7ee8a2; border-radius: 3px; cursor: pointer; white-space: nowrap; } .cm-miss-complete:hover { background: rgba(126,232,162,0.18); color: #fff; } @keyframes node-flash-pulse { 0% { box-shadow: 0 0 0 6px rgba(116,235,213,0.7); } 100% { box-shadow: 0 0 0 30px rgba(116,235,213,0); } } /* ヘルプボタン */ .btn-help { background: transparent; border: 1px solid rgba(126,232,162,0.55); color: #7ee8a2; font-size: 10px; font-weight: 700; font-family: var(--font-ui); padding: 3px 8px; border-radius: 4px; cursor: pointer; margin-left: 4px; transition: background 0.15s, color 0.15s; } .btn-help:hover { background: rgba(126,232,162,0.18); color: #fff; } /* ヘルプモーダル */ #help-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); display: none; align-items: center; justify-content: center; z-index: 100000; } #help-modal { width: min(960px, 90vw); height: min(720px, 85vh); background: var(--surface, #1a1a22); border: 1px solid rgba(126,232,162,0.4); border-radius: 8px; box-shadow: 0 12px 48px rgba(0,0,0,0.7); display: flex; flex-direction: column; overflow: hidden; } #help-modal-header { display: flex; align-items: center; background: rgba(0,0,0,0.35); border-bottom: 1px solid var(--border); padding: 6px 8px; gap: 8px; } #help-modal-tabs { flex: 1; display: flex; gap: 4px; flex-wrap: wrap; } .help-tab { padding: 5px 10px; font-size: 11px; font-family: var(--font-ui); background: transparent; color: var(--text-muted); border: 1px solid var(--border); border-radius: 4px; cursor: pointer; transition: all 0.15s; } .help-tab:hover { background: rgba(126,232,162,0.10); color: #7ee8a2; border-color: rgba(126,232,162,0.55); } .help-tab.active { background: rgba(126,232,162,0.18); color: #7ee8a2; border-color: #7ee8a2; font-weight: 700; } #help-modal-close { width: 28px; height: 28px; background: transparent; border: 1px solid var(--border); color: var(--text-muted); border-radius: 4px; cursor: pointer; font-size: 16px; line-height: 1; } #help-modal-close:hover { background: rgba(255,107,107,0.18); color: #ff6b6b; border-color: #ff6b6b; } #help-modal-body { flex: 1; overflow-y: auto; padding: 18px 24px; background: var(--surface, #1a1a22); } #help-modal-content { font-size: 13px; line-height: 1.7; color: var(--text); max-width: 820px; margin: 0 auto; } #help-modal-content h1 { font-size: 22px; margin: 16px 0 12px; color: #7ee8a2; border-bottom: 2px solid rgba(126,232,162,0.35); padding-bottom: 6px; } #help-modal-content h2 { font-size: 18px; margin: 18px 0 10px; color: var(--state-progress); border-bottom: 1px solid rgba(255,212,121,0.25); padding-bottom: 4px; } #help-modal-content h3 { font-size: 15px; margin: 14px 0 6px; color: #74ebd5; } #help-modal-content h4 { font-size: 13px; margin: 12px 0 4px; color: #bd93f9; } #help-modal-content p { margin: 8px 0; } #help-modal-content ul, #help-modal-content ol { padding-left: 24px; margin: 6px 0; } #help-modal-content li { margin: 3px 0; } #help-modal-content code { background: rgba(204,68,170,0.15); color: #ff79c6; padding: 1px 6px; border-radius: 3px; font-family: var(--font-mono); font-size: 12px; } #help-modal-content pre.help-code { background: rgba(0,0,0,0.45); border: 1px solid var(--border); border-radius: 4px; padding: 10px 14px; overflow-x: auto; font-size: 12px; font-family: var(--font-mono); margin: 10px 0; } #help-modal-content pre.help-code code { background: transparent; color: var(--text); padding: 0; } #help-modal-content table.help-table { border-collapse: collapse; margin: 12px 0; font-size: 12px; width: 100%; } #help-modal-content table.help-table th, #help-modal-content table.help-table td { border: 1px solid var(--border); padding: 6px 10px; text-align: left; } #help-modal-content table.help-table th { background: rgba(126,232,162,0.12); color: #7ee8a2; font-weight: 700; } #help-modal-content hr { border: none; border-top: 1px solid var(--border); margin: 16px 0; } #help-modal-content a { color: #74ebd5; text-decoration: underline; } #help-modal-content blockquote { border-left: 3px solid rgba(126,232,162,0.55); padding: 4px 12px; margin: 10px 0; background: rgba(126,232,162,0.06); color: var(--text-muted); } .help-loading, .help-error { padding: 40px; text-align: center; color: var(--text-muted); font-size: 13px; } .help-error { color: #ff6b6b; } /* ── Phaseノード — フラグパラメーター ───────────────────────── */ .phase-flag-section { margin: 5px 0 2px; } .flag-item { display: flex; flex-direction: column; gap: 2px; background: var(--surface-2); border-radius: 4px; padding: 4px 7px 5px; margin: 2px 0; } .flag-item-row { display: flex; align-items: center; gap: 5px; } .flag-name-display { flex: 1; font-family: var(--font-ui); font-size: 10px; font-weight: 700; color: #4a9eff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .flag-delta-display { font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: var(--text-muted); flex-shrink: 0; min-width: 28px; text-align: right; } .flag-delta-display.pos { color: #7ee8a2; } .flag-delta-display.neg { color: #ff6b6b; } /* ── フラグ / 選択肢 デルタゲージ ───────────────────────────── */ .flag-gauge-track { position: relative; height: 6px; background: var(--surface-3, rgba(255,255,255,0.08)); border-radius: 3px; overflow: hidden; cursor: ew-resize; user-select: none; } .flag-gauge-center { position: absolute; left: 50%; top: 0; width: 1px; height: 100%; background: rgba(255,255,255,0.2); } .flag-gauge-fill { position: absolute; top: 0; height: 100%; border-radius: 2px; background: var(--text-muted); transition: left 0.05s, width 0.05s; } .flag-gauge-fill.pos { background: #7ee8a2; } .flag-gauge-fill.neg { background: #ff6b6b; } /* ── Choiceノード — 選択肢ごとのフラグ値 ───────────────────── */ .choice-flag-btn { font-family: var(--font-ui); font-size: 9px; font-weight: 800; padding: 2px 5px; border-radius: 3px; border: 1px solid rgba(74,158,255,0.35); background: transparent; color: rgba(74,158,255,0.6); cursor: pointer; flex-shrink: 0; line-height: 1; transition: all 0.12s; } .choice-flag-btn:hover { border-color: #4a9eff; color: #4a9eff; } .choice-flag-btn.active { background: rgba(74,158,255,0.15); border-color: #4a9eff; color: #4a9eff; } .choice-flag-area { display: none; flex-direction: column; gap: 3px; padding: 4px 6px 5px; background: rgba(74,158,255,0.07); border-radius: 4px; margin-top: 2px; } .choice-flag-area.open { display: flex; } .choice-flag-area-row { display: flex; align-items: center; gap: 5px; } .choice-flag-label { font-family: var(--font-ui); font-size: 9px; font-weight: 700; letter-spacing: 0.6px; color: #4a9eff; white-space: nowrap; flex-shrink: 0; } .choice-delta-track { width: 100%; } .choice-delta-val { min-width: 28px; text-align: right; } .choice-flag-delta { width: 48px; background: var(--surface-2); color: var(--text); border: 1px solid rgba(74,158,255,0.3); border-radius: 3px; padding: 2px 5px; font-family: var(--font-mono); font-size: 10px; text-align: right; flex-shrink: 0; } .choice-flag-delta:focus { outline: none; border-color: #4a9eff; } /* ── UIプレビューボタン ─────────────────────────────────────── */ .btn-ui { background: rgba(109,163,216,0.10); border-color: rgba(109,163,216,0.4); color: var(--cat-ui); } .btn-ui:hover { background: rgba(109,163,216,0.20); border-color: var(--cat-ui); } /* ── ラインツールチップ ─────────────────────────────────────── */ #line-tooltip { position: fixed; pointer-events: none; z-index: 9999; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 5px 10px; font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.3px; box-shadow: 0 4px 16px rgba(0,0,0,0.5); white-space: nowrap; opacity: 0; transform: translateY(4px); transition: opacity 0.12s, transform 0.12s; } #line-tooltip.visible { opacity: 1; transform: translateY(0); } /* ================================================================ シミュレーションモード ================================================================ */ /* ================================================================ シミュレーション — ADV スタイル ================================================================ */ /* ── オーバーレイ ──────────────────────────────────────────── */ #sim-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.92); backdrop-filter: blur(8px); z-index: 2000; align-items: center; justify-content: center; } /* ── ゲーム画面コンテナ ─────────────────────────────────────── */ #sim-screen { width: min(900px, 97vw); height: min(600px, 94vh); background: #090912; border: 1px solid rgba(255,255,255,0.07); border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 28px 90px rgba(0,0,0,0.85); animation: sim-appear 0.22s cubic-bezier(.16,1,.3,1); } @keyframes sim-appear { from { opacity: 0; transform: translateY(18px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ── 上部バー（ゲージ + ナビ） ─────────────────────────────── */ #sim-top-bar { display: flex; align-items: center; padding: 7px 14px; background: rgba(0,0,0,0.50); border-bottom: 1px solid rgba(255,255,255,0.055); gap: 10px; min-height: 42px; flex-shrink: 0; } /* ゲージバー（パラメーター + UI ゲージが横並び） */ #sim-gauge-bar { flex: 1; display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; } .sim-top-gauge { display: flex; align-items: center; gap: 5px; } .sim-top-gauge-label { font-family: var(--font-ui); font-size: 9px; font-weight: 700; letter-spacing: 0.06em; color: var(--text-muted); white-space: nowrap; max-width: 64px; overflow: hidden; text-overflow: ellipsis; } .sim-top-gauge-track { width: 80px; height: 5px; background: rgba(255,255,255,0.09); border-radius: 3px; overflow: hidden; } .sim-top-gauge-fill { height: 100%; border-radius: 3px; transition: width 0.35s cubic-bezier(.4,0,.2,1); } .sim-top-gauge-val { font-family: var(--font-mono); font-size: 9px; color: rgba(255,255,255,0.55); white-space: nowrap; } .sim-top-gauge-val small { font-size: 8px; color: var(--text-muted); margin-left: 1px; } /* UI ゲージは青みがかったラベルで区別 */ .sim-top-gauge-ui .sim-top-gauge-label { color: #5aabf0; } .sim-top-gauge-ui .sim-top-gauge-track { background: rgba(74,158,255,0.15); } /* シム上部バー: アクションボタン共通 */ .sim-param-action-btn { font-family: var(--font-mono); font-size: 12px; font-weight: 700; width: 20px; height: 20px; min-width: 20px; padding: 0; border-radius: 4px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.12s, color 0.12s; flex-shrink: 0; } .sim-param-action-btn:hover { background: rgba(255,255,255,0.12); color: var(--text); } .sim-param-action-btn:active { background: rgba(255,255,255,0.2); transform: scale(0.93); } /* シム上部バー: ＋カウントボタン（大） */ .sim-param-count-btn { font-family: var(--font-ui); font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 12px; border: 1px solid; background: transparent; cursor: pointer; letter-spacing: 0.3px; transition: background 0.12s; flex-shrink: 0; } .sim-param-count-btn:hover { background: rgba(255,255,255,0.08); } .sim-param-count-btn:active { opacity: 0.75; transform: scale(0.95); } /* シム上部バー: フラグトグルピル */ .sim-param-flag-toggle { cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; } .sim-param-flag-toggle:hover { opacity: 0.85; } .sim-param-flag-toggle:active { opacity: 0.65; transform: scale(0.95); } /* シム上部バー: ランクバッジ（ボタン化） */ .sim-top-rank-badge { cursor: pointer; transition: background 0.12s, color 0.12s; } .sim-top-rank-badge:hover:not(.active) { background: rgba(255,255,255,0.08) !important; color: var(--text) !important; } .sim-top-rank-badge:active { opacity: 0.7; } /* シム上部バー: カウント型 */ .sim-top-gauge-count { font-family: var(--font-mono); font-size: 14px; font-weight: 700; line-height: 1; } .sim-top-gauge-count-max { font-family: var(--font-mono); font-size: 9px; color: var(--text-muted); } /* シム上部バー: フラグ型 */ .sim-top-gauge-flag { font-family: var(--font-mono); font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 20px; border: 1px solid var(--border); letter-spacing: 0.5px; color: var(--text-muted); } .sim-top-gauge-flag.flag-on { /* inline style */ } .sim-top-gauge-flag.flag-off { color: var(--text-muted); } /* シム上部バー: ランク型 */ .sim-top-rank-row { display: flex; gap: 2px; } .sim-top-rank-badge { font-family: var(--font-mono); font-size: 9px; font-weight: 700; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; border-radius: 3px; border: 1px solid var(--border); color: var(--text-muted); } .sim-top-rank-badge.active { /* inline style */ } /* ナビボタン */ #sim-nav-btns { display: flex; gap: 6px; flex-shrink: 0; } .sim-nav-btn { font-family: var(--font-ui); font-size: 11px; font-weight: 700; padding: 4px 12px; border-radius: 6px; border: 1px solid var(--border); background: transparent; color: var(--text-muted); cursor: pointer; transition: all 0.15s; } .sim-nav-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); } .sim-nav-btn:disabled { opacity: 0.25; cursor: default; } .sim-close-btn:hover { border-color: var(--danger) !important; color: var(--danger) !important; } /* ── シーンエリア（通常ノード: Phase / START / BRANCH / Ending） */ #sim-scene { flex: 1; display: flex; flex-direction: column; align-items: center; /* コンテンツが収まる時のみ縦中央寄せ、はみ出す時は上から並べてスクロール可能に */ justify-content: safe center; padding: 28px 32px 16px; overflow-y: auto; overscroll-behavior: contain; /* シミュ画面内のスクロールがキャンバスに伝播しないように */ } /* ノード情報カード */ #sim-node-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 28px 32px; max-width: 580px; width: 100%; } /* タイプバッジ */ .sim-type-badge { font-family: var(--font-ui); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 3px 11px; border-radius: 20px; border: 1px solid; user-select: none; } .sim-badge-start { color: var(--start-color); border-color: rgba(74,158,255,0.4); background: rgba(74,158,255,0.08); } .sim-badge-phase, .sim-badge-event { color: var(--accent); border-color: rgba(126,232,162,0.4); background: rgba(126,232,162,0.08); } .sim-badge-choice { color: var(--accent-2); border-color: rgba(249,212,35,0.4); background: rgba(249,212,35,0.08); } .sim-badge-ending { color: var(--danger); border-color: rgba(255,107,107,0.4); background: rgba(255,107,107,0.08); } .sim-badge-unknown { color: var(--text-muted); border-color: var(--border); background: transparent; } #sim-title { font-family: var(--font-ui); font-size: 22px; font-weight: 800; color: var(--text); margin: 14px 0 12px; line-height: 1.35; letter-spacing: 0.2px; min-height: 1em; } #sim-text { font-family: var(--font-mono); font-size: 13px; color: var(--text-muted); line-height: 2; white-space: pre-wrap; } /* ── ADV セリフウィンドウ（Dialogue ノード専用） ─────────────── */ #sim-adv-window { flex: 1; display: none; /* Dialogue ノード時のみ flex に切り替え */ flex-direction: column; cursor: pointer; user-select: none; position: relative; } /* セリフ上部の空きエリア（シーン背景 / Event アクション画像 表示エリア） */ #sim-adv-scene { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding: 0 28px 0; position: relative; overflow: hidden; background: linear-gradient(to bottom, rgba(9,9,18,0) 0%, rgba(9,9,18,0.35) 70%, rgba(9,9,18,0.65) 100%); } /* キャラクター名プレート（テキストボックスの直上に浮く） */ #sim-adv-speaker { display: none; background: rgba(74,158,255,0.82); color: #fff; font-family: var(--font-ui); font-size: 12px; font-weight: 700; padding: 3px 16px 4px; border-radius: 5px 5px 0 0; letter-spacing: 0.5px; align-self: flex-start; box-shadow: 0 -2px 8px rgba(74,158,255,0.3); } /* セリフテキストボックス */ #sim-adv-body { background: rgba(7, 7, 20, 0.93); border-top: 2px solid rgba(74,158,255,0.45); padding: 18px 30px 24px; min-height: 140px; position: relative; flex-shrink: 0; } #sim-adv-text { font-size: 15px; line-height: 1.9; color: rgba(255,255,255,0.90); letter-spacing: 0.2px; white-space: pre-wrap; min-height: 60px; } /* モノローグモード（キャラなし、紫系） */ #sim-adv-window.sim-adv-monologue #sim-adv-body { border-top-color: rgba(162,155,254,0.45); background: rgba(12, 8, 28, 0.95); } #sim-adv-window.sim-adv-monologue #sim-adv-text { font-style: italic; color: rgba(210,200,255,0.90); letter-spacing: 0.4px; } #sim-adv-window.sim-adv-monologue #sim-adv-next-hint { color: #a29bfe; } /* Event アクション連動画像（ADV シーンエリア全体を埋める） */ #sim-adv-img { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; z-index: 0; } /* speaker は画像の上に表示 */ #sim-adv-speaker { position: relative; z-index: 2; } /* ─── Chat モード ─────────────────────────────────── */ /* ─── AnomalyHunt シミュレーター ────────────────────── */ #sim-anomaly-window { flex: 1; flex-direction: column; overflow: hidden; min-height: 0; background: #0a0a14; position: relative; } /* main: サイドバー + 画面エリアの横並びコンテナ */ #sim-anomaly-main { flex: 1; display: flex; min-height: 0; overflow: hidden; } /* ジャンプモード時のサイドバー */ #sim-anomaly-jump-sidebar { display: none; flex-direction: column; gap: 6px; padding: 10px 8px; background: rgba(0,0,0,0.55); border-right: 1px solid rgba(255,255,255,0.08); overflow-y: auto; flex-shrink: 0; width: 96px; } .sim-anomaly-jump-thumb { position: relative; width: 80px; height: 56px; border-radius: 4px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); overflow: hidden; cursor: pointer; padding: 0; transition: border-color 0.15s, transform 0.15s; } .sim-anomaly-jump-thumb:hover { border-color: rgba(99,230,190,0.55); transform: translateX(2px); } .sim-anomaly-jump-thumb.sim-anomaly-jump-active { border-color: #63e6be; box-shadow: 0 0 0 2px rgba(99,230,190,0.32); } .sim-anomaly-jump-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .sim-anomaly-jump-noimg { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 9px; color: rgba(255,255,255,0.45); font-style: italic; } .sim-anomaly-jump-idx { position: absolute; top: 2px; left: 3px; background: rgba(0,0,0,0.7); color: rgba(255,255,255,0.85); font-family: var(--font-mono); font-size: 9px; padding: 1px 5px; border-radius: 3px; pointer-events: none; } /* ナビモードボタン（エディタ内） */ .anomaly-nav-mode-btn, .anomaly-nav-ctrl-btn { font-size: 9px; padding: 4px 8px; border: 1px solid var(--border); background: transparent; color: var(--text-muted); border-radius: 4px; cursor: pointer; font-family: var(--font-ui); transition: background 0.15s, border-color 0.15s, color 0.15s; } .anomaly-nav-mode-btn:hover, .anomaly-nav-ctrl-btn:hover { border-color: var(--accent); color: var(--text); } .anomaly-nav-mode-btn.active, .anomaly-nav-ctrl-btn.active { background: rgba(192,132,252,0.18); border-color: rgba(192,132,252,0.55); color: #c084fc; } #sim-anomaly-stats { display: flex; gap: 14px; padding: 8px 16px; background: rgba(0,0,0,0.6); border-bottom: 1px solid rgba(255,255,255,0.08); font-size: 11px; font-family: var(--font-ui); color: var(--text-main); flex-shrink: 0; } .sim-anom-stat { display: inline-flex; align-items: center; gap: 4px; color: #63e6be; } #sim-anomaly-screen { flex: 1; position: relative; cursor: pointer; user-select: none; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #050510; } #sim-anomaly-img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; pointer-events: none; } #sim-anomaly-screen-label { position: absolute; top: 10px; left: 14px; background: rgba(0,0,0,0.55); color: rgba(255,255,255,0.85); font-family: var(--font-mono); font-size: 10px; padding: 3px 8px; border-radius: 4px; pointer-events: none; } #sim-anomaly-mode-hint { position: absolute; top: 10px; right: 14px; background: rgba(0,0,0,0.55); color: rgba(255,255,255,0.7); font-family: var(--font-ui); font-size: 10px; padding: 3px 8px; border-radius: 4px; pointer-events: none; } /* クリック報告フィードバック ○ / × */ #sim-anomaly-feedback-layer { position: absolute; inset: 0; pointer-events: none; } .sim-anom-feedback { position: absolute; transform: translate(-50%, -50%); font-size: 36px; font-weight: 900; font-family: var(--font-ui); text-shadow: 0 0 8px rgba(0,0,0,0.7); animation: sim-anom-feedback-anim 0.7s ease-out forwards; pointer-events: none; } .sim-anom-feedback-ok { color: #63e6be; } .sim-anom-feedback-ng { color: #ff6b6b; } @keyframes sim-anom-feedback-anim { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); } 35% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.3); } } /* 長押し進捗リング */ #sim-anomaly-press-ring { display: none; position: absolute; width: 60px; height: 60px; transform: translate(-50%, -50%); border-radius: 50%; border: 3px solid rgba(74,158,255,0.3); pointer-events: none; } #sim-anomaly-press-ring::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 3px solid #4a9eff; clip-path: polygon(50% 50%, 50% 0%, 50% 0%); animation: none; } #sim-anomaly-press-ring.sim-anom-press-restart::after { animation: sim-anom-ring-fill linear forwards; animation-duration: inherit; } @keyframes sim-anom-ring-fill { 0% { clip-path: polygon(50% 50%, 50% 0%, 50% 0%); } 25% { clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 50%); } 50% { clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%); } 75% { clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 0% 100%); } 100% { clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%, 50% 0%); } } #sim-anomaly-controls { display: flex; gap: 8px; padding: 10px 16px; background: rgba(0,0,0,0.45); border-top: 1px solid rgba(255,255,255,0.05); flex-shrink: 0; } #sim-anomaly-controls button { flex: 1; padding: 10px 12px; border-radius: 6px; font-size: 12px; font-weight: 700; font-family: var(--font-ui); cursor: pointer; border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.06); color: var(--text-main); transition: background 0.15s, border-color 0.15s; } #sim-anomaly-controls button:hover { background: rgba(255,255,255,0.14); } #sim-anomaly-prev-btn { background: rgba(116,235,213,0.10) !important; border-color: rgba(116,235,213,0.35) !important; color: #74ebd5 !important; } #sim-anomaly-prev-btn:hover { background: rgba(116,235,213,0.22) !important; } #sim-anomaly-next-btn { background: rgba(99,230,190,0.14) !important; border-color: rgba(99,230,190,0.4) !important; color: #63e6be !important; } #sim-anomaly-next-btn:hover { background: rgba(99,230,190,0.28) !important; } /* セリフオーバーレイ */ #sim-anomaly-dialog-overlay { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; background: rgba(7,7,20,0.93); border-top: 2px solid rgba(74,158,255,0.45); padding: 14px 24px 18px; z-index: 5; cursor: pointer; } #sim-anomaly-dialog-overlay.sim-anom-dialog-overlay-mode { top: 0; background: rgba(7,7,20,0.78); justify-content: flex-end; } #sim-anomaly-dialog-speaker { display: inline-block; background: rgba(74,158,255,0.82); color: #fff; font-size: 12px; font-weight: 700; padding: 3px 14px 4px; border-radius: 5px 5px 0 0; margin-bottom: 4px; align-self: flex-start; } #sim-anomaly-dialog-text { font-size: 14px; line-height: 1.7; color: rgba(255,255,255,0.92); white-space: pre-wrap; } #sim-anomaly-dialog-hint { position: absolute; right: 18px; bottom: 8px; color: #4a9eff; font-size: 11px; animation: adv-blink 0.9s ease-in-out infinite; pointer-events: none; } /* 「初回のみ」チェックボックス行（エディタ内） */ .anomaly-screen-dialog-once-row { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 10px; color: var(--text-muted); user-select: none; } .anomaly-screen-dialog-once-row input[type=checkbox] { margin: 0; cursor: pointer; } .anomaly-screen-dialog-once-label { color: var(--text); cursor: pointer; } #sim-chat-window { flex: 1; flex-direction: column; overflow: hidden; padding: 0 12px; min-height: 0; cursor: pointer; user-select: none; position: relative; } #sim-chat-log { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 14px 0 28px; min-height: 0; } /* 次へ▼ ヒント（ADV と同じ位置・点滅） */ #sim-chat-next-hint { position: absolute; bottom: 8px; right: 18px; color: #4a9eff; font-size: 13px; display: none; animation: adv-blink 0.9s ease-in-out infinite; pointer-events: none; } .sim-chat-bubble { display: flex; flex-direction: column; max-width: 78%; animation: chat-bubble-in 0.18s ease; } @keyframes chat-bubble-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .sim-chat-left { align-self: flex-start; animation: chat-bubble-in-left 0.18s ease; } .sim-chat-right { align-self: flex-end; animation: chat-bubble-in-right 0.18s ease; } @keyframes chat-bubble-in-left { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: translateX(0); } } @keyframes chat-bubble-in-right { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: translateX(0); } } .sim-chat-name { font-size: 9px; color: var(--text-muted); margin-bottom: 3px; padding: 0 6px; } .sim-chat-left .sim-chat-name { text-align: left; } .sim-chat-right .sim-chat-name { text-align: right; } .sim-chat-text { padding: 9px 14px; font-size: 13px; line-height: 1.65; color: var(--text-main); white-space: pre-wrap; word-break: break-word; } .sim-chat-left .sim-chat-text { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1); border-radius: 4px 14px 14px 14px; } .sim-chat-right .sim-chat-text { background: rgba(99,230,190,0.18); border: 1px solid rgba(99,230,190,0.28); border-radius: 14px 4px 14px 14px; } /* モノローグは斜体＋色違いで区別 */ .sim-chat-mono .sim-chat-text { font-style: italic; background: rgba(189,147,249,0.14); border-color: rgba(189,147,249,0.28); color: rgba(220,210,255,0.92); } /* 次進む▼インジケーター（テキスト完了時に点滅） */ #sim-adv-next-hint { position: absolute; bottom: 10px; right: 18px; color: #4a9eff; font-size: 13px; display: none; animation: adv-blink 0.9s ease-in-out infinite; } @keyframes adv-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.12; } } /* ── アクションエリア（次へ / 選択肢 / END） ────────────────── */ #sim-actions-wrap { display: flex; justify-content: center; padding: 12px 32px 14px; border-top: 1px solid rgba(255,255,255,0.05); background: rgba(0,0,0,0.28); flex-shrink: 0; } #sim-actions { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 580px; } /* 次へボタン */ .sim-next-btn { font-family: var(--font-ui); font-size: 13px; font-weight: 700; padding: 12px 20px; border-radius: 8px; border: none; background: var(--accent); color: #081510; cursor: pointer; width: 100%; text-align: center; letter-spacing: 0.5px; transition: filter 0.15s, transform 0.12s; } .sim-next-btn:hover { filter: brightness(1.08); transform: translateY(-1px); } .sim-next-btn:active { transform: translateY(0); } /* ループボタン */ .sim-loop-btn { background: rgba(249,212,35,0.10); border: 1px solid rgba(249,212,35,0.45); color: #f9d423; margin-bottom: 4px; } .sim-loop-btn:hover { filter: brightness(1.1); transform: translateY(-1px); } /* 選択肢ボタン */ .sim-choice-btn { font-family: var(--font-ui); font-size: 13px; font-weight: 600; padding: 11px 18px; border-radius: 8px; border: 1px solid var(--border); background: rgba(255,255,255,0.03); color: var(--text); cursor: pointer; width: 100%; text-align: left; transition: all 0.15s; } .sim-choice-btn:hover { border-color: var(--accent-2); background: rgba(249,212,35,0.07); color: var(--accent-2); padding-left: 24px; } /* エンド / 接続なしラベル */ .sim-end-label { text-align: center; font-family: var(--font-mono); font-size: 13px; color: var(--text-muted); padding: 8px 0; letter-spacing: 0.22em; } /* 再スタートボタン */ .sim-restart-btn { font-family: var(--font-ui); font-size: 13px; font-weight: 700; padding: 10px 20px; border-radius: 8px; border: 1px solid rgba(126,232,162,0.5); background: transparent; color: var(--accent); cursor: pointer; width: 100%; text-align: center; margin-top: 4px; transition: all 0.15s; } .sim-restart-btn:hover { background: rgba(126,232,162,0.10); border-color: var(--accent); } /* ── 履歴パンくず ──────────────────────────────────────────── */ #sim-history { display: flex; align-items: center; gap: 3px; padding: 6px 14px 7px; border-top: 1px solid rgba(255,255,255,0.04); background: rgba(0,0,0,0.35); overflow-x: auto; flex-shrink: 0; scrollbar-width: none; min-height: 30px; } #sim-history::-webkit-scrollbar { display: none; } .sim-crumb { font-family: var(--font-ui); font-size: 10px; color: var(--text-muted); white-space: nowrap; max-width: 120px; overflow: hidden; text-overflow: ellipsis; opacity: 0.6; flex-shrink: 0; } .sim-crumb-active { color: var(--accent); opacity: 1; font-weight: 700; } .sim-crumb-sep { font-size: 10px; color: var(--border); flex-shrink: 0; user-select: none; } /* ── Dialogue ノード（キャンバス上） ────────────────────────── */ .node[data-type="Dialogue"] { border-color: var(--cat-dialogue); } .node[data-type="Dialogue"] .node-header { background: rgba(240,184,122,0.12); border-bottom-color: rgba(240,184,122,0.25); color: var(--cat-dialogue); } /* Dialogue ノード — 表示モードトグルボタン（ADV / CHAT） */ /* ── Dialogue モード切替: 3ボタンセグメント (ADV / CHAT / EVT) ── */ .dial-mode-group { display: flex; gap: 3px; padding: 4px 8px 0; z-index: 3; } .dial-mode-btn { font-size: 8px; font-weight: 700; letter-spacing: 0.04em; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.15); color: rgba(255,255,255,0.55); border-radius: 3px; padding: 2px 5px; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; } .dial-mode-btn:hover { background: rgba(255,184,108,0.20); color: #ffb86c; border-color: rgba(255,184,108,0.45); } /* 各モードでアクティブ時の色分け（content textで判定） */ .dial-mode-btn.active { background: rgba(255,184,108,0.20); border-color: rgba(255,184,108,0.55); color: #ffb86c; } .node[data-display-mode="chat"] .dial-mode-btn.active { background: rgba(189,147,249,0.20); border-color: rgba(189,147,249,0.6); color: #bd93f9; } .node[data-display-mode="evt"] .dial-mode-btn.active { background: rgba(116,235,213,0.18); border-color: rgba(116,235,213,0.5); color: #74ebd5; } /* === エディタパネル側のセリフモード切替 === */ .dlg-editor-mode-group { display: flex; gap: 6px; margin-bottom: 6px; } .dlg-editor-mode-btn { flex: 1; padding: 8px 12px; font-size: 12px; font-weight: 700; letter-spacing: 0.05em; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.15); color: rgba(255,255,255,0.7); border-radius: 5px; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; } .dlg-editor-mode-btn:hover { background: rgba(255,184,108,0.15); color: #ffb86c; border-color: rgba(255,184,108,0.4); } .dlg-editor-mode-btn.active[data-mode="adv"] { background: rgba(255,184,108,0.22); border-color: #ffb86c; color: #ffb86c; } .dlg-editor-mode-btn.active[data-mode="chat"] { background: rgba(189,147,249,0.22); border-color: #bd93f9; color: #bd93f9; } .dlg-editor-mode-btn.active[data-mode="evt"] { background: rgba(116,235,213,0.20); border-color: #74ebd5; color: #74ebd5; } .dlg-editor-mode-desc { font-size: 11px; line-height: 1.5; padding: 8px 10px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 4px; color: var(--text-muted); } body.light-mode .dial-mode-btn { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.15); color: rgba(0,0,0,0.6); } /* EVT モード時: フロー遷移しないので OUT コネクタを隠す + ノード枠をシアン寄せに */ .node[data-type="Dialogue"][data-display-mode="evt"] > .conn-out.out-point { display: none !important; } .node[data-type="Dialogue"][data-display-mode="evt"] { border-color: rgba(116,235,213,0.55) !important; } /* キャラ名行：L/R ボタン + 名前入力 を横並びに */ .dialogue-chara-row { display: flex; align-items: stretch; gap: 4px; margin: 4px 0 3px; } .chat-side-btn { flex-shrink: 0; width: 22px; font-size: 10px; font-weight: 700; font-family: var(--font-ui); border-radius: 4px; cursor: pointer; border: 1px solid rgba(255,184,108,0.4); background: rgba(255,184,108,0.1); color: #ffb86c; transition: background 0.15s, border-color 0.15s, color 0.15s; padding: 0; } .chat-side-btn:hover { background: rgba(255,184,108,0.22); } .chat-side-btn.chat-side-R { border-color: rgba(99,230,190,0.5); background: rgba(99,230,190,0.14); color: #63e6be; } .chat-side-btn.chat-side-R:hover { background: rgba(99,230,190,0.28); } .dialogue-chara-input { display: block; width: 100%; box-sizing: border-box; background: rgba(255,184,108,0.07); border: 1px solid rgba(255,184,108,0.25); border-radius: 4px; padding: 3px 8px; font-family: var(--font-ui); font-size: 11px; color: #ffb86c; margin: 0; outline: none; transition: border-color 0.15s; } .dialogue-chara-input::placeholder { color: rgba(255,184,108,0.35); } .dialogue-chara-input:focus { border-color: rgba(255,184,108,0.55); } /* ================================================================ ノード折りたたみ（Event / Dialogue 共通） ================================================================ */ /* コンテンツラッパー：200px を超えたら下が隠れる */ .node-body-collapse { max-height: 200px; overflow: hidden; transition: max-height 0.18s ease; } .node-body-collapse.expanded { max-height: 2000px; /* 十分大きな値 */ } /* トグルボタン */ .node-collapse-btn { display: flex; align-items: center; justify-content: center; width: 100%; padding: 3px 0; margin: 2px 0 1px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.06em; color: var(--text-muted); background: rgba(255,255,255,0.03); border: none; border-top: 1px dashed rgba(255,255,255,0.08); border-bottom: 1px dashed rgba(255,255,255,0.08); cursor: pointer; transition: color 0.12s, background 0.12s; } .node-collapse-btn:hover { color: var(--accent); background: rgba(126,232,162,0.06); } /* セリフエントリーリスト */ .dialogue-entries { padding: 3px 2px 2px; } .dialogue-entry { position: relative; background: rgba(255,184,108,0.04); border: 1px solid rgba(255,184,108,0.12); border-radius: 5px; padding: 4px 6px 4px 6px; margin: 3px 0; } .dialogue-entry[data-entry-type="monologue"] { background: rgba(162,155,254,0.05); border-color: rgba(162,155,254,0.18); } /* エントリーヘッダー行（タイプ切替 + 削除ボタン） */ .dialogue-entry-header { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; } .entry-type-btns { display: flex; gap: 2px; flex: 1; } .entry-type-btn { font-family: var(--font-ui); font-size: 8px; padding: 2px 6px; border-radius: 3px; border: 1px solid var(--border); background: transparent; color: var(--text-muted); cursor: pointer; transition: background 0.15s, color 0.15s; } .entry-type-btn.active[data-type="dialogue"] { background: rgba(255,184,108,0.18); color: #ffb86c; border-color: rgba(255,184,108,0.4); } .entry-type-btn.active[data-type="monologue"] { background: rgba(162,155,254,0.18); color: #a29bfe; border-color: rgba(162,155,254,0.4); } /* エントリー削除ボタン */ .entry-del-btn { flex-shrink: 0; width: 14px; height: 14px; padding: 0; font-size: 9px; line-height: 1; border-radius: 3px; border: 1px solid rgba(255,255,255,0.10); background: transparent; color: rgba(255,255,255,0.20); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s; } .entry-del-btn:hover { background: rgba(255,107,107,0.25); color: #ff6b6b; border-color: rgba(255,107,107,0.4); } /* エントリー内のテキスト要素 */ .dialogue-entry .dialogue-chara-input { font-size: 10px; padding: 2px 6px; margin: 0; } .dialogue-entry-text { width: 100%; box-sizing: border-box; background: transparent; border: none; border-bottom: 1px solid rgba(255,255,255,0.07); color: var(--text); font-family: var(--font-mono); font-size: 11px; resize: none; outline: none; padding: 2px 2px 3px; line-height: 1.5; } .dialogue-entry[data-entry-type="monologue"] .dialogue-entry-text { font-style: italic; color: #c7b8ff; } .dialogue-entry-text::placeholder { color: var(--text-muted); opacity: 0.6; } /* ================================================================ CONDITION ノード（キャンバス上） ================================================================ */ .node[data-type="Condition"] { border-color: var(--cat-condition); min-width: 168px; } .node[data-type="Condition"] .node-header { background: rgba(162,155,254,0.12); border-bottom-color: rgba(162,155,254,0.28); color: var(--cat-condition); } /* 条件式表示エリア */ .condition-body { padding: 6px 8px 4px; } .condition-expr { font-family: var(--font-mono); font-size: 12px; color: rgba(255,255,255,0.85); text-align: center; padding: 5px 8px; background: rgba(162,155,254,0.07); border: 1px solid rgba(162,155,254,0.18); border-radius: 5px; min-height: 24px; line-height: 1.6; word-break: break-all; } /* TRUE / FALSE 出力コネクター行 */ .condition-outputs { display: flex; flex-direction: column; gap: 2px; padding: 5px 8px 6px; } .condition-out-row { position: relative; display: flex; align-items: center; justify-content: flex-end; padding-right: 20px; height: 22px; } .condition-out-label { font-family: var(--font-ui); font-size: 10px; font-weight: 700; letter-spacing: 0.5px; margin-right: 8px; } .true-label { color: #7ee8a2; } .false-label { color: #ff6b6b; } /* 条件コネクター共通 */ .cond-out-pt { position: absolute !important; right: -8px; top: 50%; transform: translateY(-50%); z-index: 10; transition: transform 0.1s, box-shadow 0.2s; } .true-out-pt { background: #7ee8a2; border-color: #7ee8a2; } .true-out-pt:hover { background: #a5f3c0; transform: translateY(-50%) scale(1.4); box-shadow: 0 0 6px 2px rgba(126,232,162,0.5); } .false-out-pt { background: var(--conn-out); border-color: var(--conn-out); } .false-out-pt:hover { background: #a5f3c0; transform: translateY(-50%) scale(1.4); box-shadow: 0 0 6px 2px rgba(126,232,162,0.5); } .flag-cond-out-pt { background: #cc44aa; border-color: #cc44aa; } .flag-cond-out-pt:hover { background: #d966bb; transform: translateY(-50%) scale(1.4); box-shadow: 0 0 6px 2px rgba(204,68,170,0.5); } .flag-label { color: #cc44aa; } /* 接続済みグロー */ .true-out-pt.connected { box-shadow: 0 0 6px 2px rgba(126,232,162,0.55); } .false-out-pt.connected { box-shadow: 0 0 6px 2px rgba(126,232,162,0.55); } .flag-cond-out-pt.connected { box-shadow: 0 0 6px 2px rgba(204,68,170,0.55); } /* Condition ノード — 通常条件 / フラグ条件 セクション区切り */ .cond-section-divider { margin: 4px 8px; border: none; border-top: 1px dashed rgba(204, 68, 170, 0.45); } /* Condition ノード — Flag IN 行 */ .condition-flag-in-row { position: relative; display: flex; align-items: center; gap: 6px; padding: 2px 8px 0px 12px; } .condition-flag-in-label { font-size: 9px; color: #cc44aa; font-family: var(--font-ui); letter-spacing: 0.05em; } .cond-flag-in-pt { position: absolute; left: -8px; top: 50%; transform: translateY(-50%); z-index: 3; transition: transform 0.15s, box-shadow 0.15s; } .cond-flag-in-pt:hover { transform: translateY(-50%) scale(1.4); box-shadow: 0 0 6px 2px rgba(204, 68, 170, 0.5); } .cond-flag-in-pt.connected { box-shadow: 0 0 6px 2px rgba(204, 68, 170, 0.55); } /* フラグ条件エリアのラベル */ .condition-flag-body { padding-top: 2px; } .condition-flag-expr { font-family: var(--font-mono); font-size: 10px; color: #cc44aa; padding: 2px 4px; background: rgba(204, 68, 170, 0.08); border-radius: 4px; } /* エディタ — フラグ条件セクションヘッダー */ .cond-flag-section-header { background: rgba(204, 68, 170, 0.08); border: 1px solid rgba(204, 68, 170, 0.3); border-radius: 6px; padding: 6px 10px !important; display: flex; flex-direction: column; gap: 2px; } .cond-flag-section-title { font-size: 11px; font-weight: 700; color: #cc44aa; font-family: var(--font-ui); } .cond-flag-section-hint { font-size: 10px; color: var(--text-muted); } /* フラグ条件プレビューボックス */ .cond-flag-preview-box { background: rgba(204, 68, 170, 0.1) !important; border-color: rgba(204, 68, 170, 0.35) !important; color: #cc44aa !important; } /* イベントノード フラグIN */ /* 全ノード共通: Flag IN 行スタイル（pink pill + 左フレーム上の連接子） */ .event-flag-in-row, .condition-flag-in-row, .anomaly-flag-in-row, .caseevent-round-in-row { position: relative !important; display: flex !important; align-items: center !important; padding: 5px 8px 5px 18px !important; margin-top: 6px !important; background: rgba(204,68,170,0.10) !important; border: 1px solid rgba(204,68,170,0.35) !important; border-radius: 5px !important; font-size: 10px !important; min-height: 24px !important; } .event-flag-in-label, .condition-flag-in-label, .anomaly-flag-in-label, .caseevent-round-in-label { color: #cc44aa !important; font-weight: 700 !important; letter-spacing: 0.3px !important; flex: 1 !important; font-size: 10px !important; font-family: var(--font-ui) !important; } /* 連接子はノード左フレーム上に配置（半分内、半分外） */ .event-flag-in-pt, .cond-flag-in-pt { position: absolute !important; left: -21px !important; top: 50% !important; transform: translateY(-50%) !important; margin: 0 !important; background: #cc44aa !important; border-color: #cc44aa !important; z-index: 3; } .event-flag-in-pt:hover, .cond-flag-in-pt:hover { transform: translateY(-50%) scale(1.4) !important; } /* パラメーターノード フラグIN/OUT */ .param-flag-io-row { display: flex; align-items: center; gap: 4px; padding: 3px 4px 3px 4px; margin-top: 2px; border-top: 1px solid rgba(204,68,170,0.2); } .param-flag-io-label { font-size: 9px; color: #cc44aa; font-family: var(--font-ui); } .param-flag-in-pt { position: relative; left: -12px; margin-right: -8px; flex-shrink: 0; } .param-flag-out-pt { position: relative; right: -12px; margin-left: -8px; flex-shrink: 0; } /* シミュレーション Condition バッジ */ .sim-badge-condition { color: #a29bfe; border-color: rgba(162,155,254,0.4); background: rgba(162,155,254,0.08); } /* シミュレーション: Condition ノード表示 */ .sim-condition-display { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 8px 0; } .sim-cond-expr { font-family: var(--font-mono); font-size: 18px; color: #a29bfe; letter-spacing: 0.5px; background: rgba(162,155,254,0.07); border: 1px solid rgba(162,155,254,0.2); border-radius: 8px; padding: 8px 20px; } .sim-cond-current { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255,255,255,0.55); } .sim-cond-param-name { font-weight: 600; color: rgba(255,255,255,0.75); } .sim-cond-current-val { font-family: var(--font-mono); } .sim-cond-verdict { font-size: 22px; font-weight: 700; letter-spacing: 1px; padding: 8px 28px; border-radius: 8px; } /* True / False は「色」のみでなく「形（外周リング）＋アイコン」で表現 → カテゴリ色（Event の緑など）と視覚チャンネルが分離される */ .sim-cond-true { color: var(--state-success); background: rgba(22,214,167,0.10); border: 2px solid var(--state-success); box-shadow: 0 0 0 4px rgba(22,214,167,0.15), inset 0 0 20px rgba(22,214,167,0.08); } .sim-cond-false { color: var(--state-error); background: rgba(255,51,85,0.10); border: 2px solid var(--state-error); box-shadow: 0 0 0 4px rgba(255,51,85,0.15), inset 0 0 20px rgba(255,51,85,0.08); } .sim-cond-next-btn { background: rgba(162,155,254,0.15); border-color: rgba(162,155,254,0.4); color: #a29bfe; } .sim-cond-next-btn:hover { background: rgba(162,155,254,0.28); } /* Condition エディター */ .cond-op-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5px; margin-top: 6px; } .cond-op-btn { font-family: var(--font-mono); font-size: 13px; padding: 6px 4px; border-radius: 5px; border: 1px solid var(--border); background: transparent; color: var(--text-muted); cursor: pointer; text-align: center; transition: background 0.15s, color 0.15s, border-color 0.15s; } .cond-op-btn.active { background: rgba(162,155,254,0.18); border-color: rgba(162,155,254,0.5); color: #a29bfe; } .cond-op-btn:hover:not(.active) { background: rgba(255,255,255,0.06); color: var(--text); } .cond-preview-box { text-align: center; font-family: var(--font-mono); font-size: 15px; padding: 10px 12px; background: rgba(162,155,254,0.07); border: 1px solid rgba(162,155,254,0.2); border-radius: 6px; color: rgba(255,255,255,0.9); letter-spacing: 0.5px; margin-top: 4px; } /* ================================================================ EVENT ノード（キャンバス上） ================================================================ */ .node[data-type="Event"] { border-color: var(--cat-event); min-width: 210px; } .node[data-type="Event"] .node-header { background: rgba(143,219,166,0.10); border-bottom-color: rgba(143,219,166,0.25); color: var(--cat-event); } /* シナリオブロック */ .event-body { padding: 4px 2px 2px; } .event-scenario-block { position: relative; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 5px; padding: 5px 22px 4px 7px; /* 右側に × ボタン分のスペース */ margin: 4px 0; } /* シナリオ削除ボタン */ .scenario-del-btn { position: absolute; top: 3px; right: 3px; width: 15px; height: 15px; padding: 0; font-size: 9px; line-height: 1; border-radius: 3px; border: 1px solid rgba(255,255,255,0.12); background: transparent; color: rgba(255,255,255,0.25); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s; } .scenario-del-btn:hover { background: rgba(255,107,107,0.25); color: #ff6b6b; border-color: rgba(255,107,107,0.4); } .event-scenario-text { width: 100%; box-sizing: border-box; background: transparent; border: none; border-bottom: 1px solid rgba(255,255,255,0.08); color: var(--text); font-family: var(--font-mono); font-size: 11px; resize: none; outline: none; padding: 2px 2px 4px; margin-bottom: 4px; line-height: 1.5; } .event-scenario-text::placeholder { color: var(--text-muted); } .event-scenario-text:focus { border-bottom-color: var(--accent); } /* フラグリスト */ .event-flag-list { display: flex; flex-direction: column; gap: 3px; } .event-flag-item { position: relative; padding-right: 18px; /* flag-out コネクタ分のスペース */ background: rgba(126,232,162,0.04); border-radius: 4px; padding-top: 2px; padding-bottom: 2px; padding-left: 4px; } .event-flag-row { display: flex; align-items: center; gap: 5px; margin-bottom: 2px; } .event-flag-row .flag-name-display { flex: 1; font-size: 10px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .event-flag-row .flag-delta-display { font-size: 10px; } /* フラグ項目削除ボタン */ .flag-item-del-btn { flex-shrink: 0; width: 13px; height: 13px; padding: 0; font-size: 8px; line-height: 1; border-radius: 2px; border: 1px solid rgba(255,255,255,0.10); background: transparent; color: rgba(255,255,255,0.20); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s; } .flag-item-del-btn:hover { background: rgba(255,107,107,0.25); color: #ff6b6b; border-color: rgba(255,107,107,0.4); } /* Choice 項目削除ボタン */ .choice-del-btn { position: absolute; top: 2px; right: 18px; /* choice-out コネクタの左隣 */ width: 14px; height: 14px; padding: 0; font-size: 9px; line-height: 1; border-radius: 3px; border: 1px solid rgba(255,255,255,0.12); background: transparent; color: rgba(255,255,255,0.25); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s; z-index: 5; } .choice-del-btn:hover { background: rgba(255,107,107,0.25); color: #ff6b6b; border-color: rgba(255,107,107,0.4); } /* flag-out コネクタは廃止（アクションブロックに移行済み） */ /* .flag-out-pt スタイルは削除 */ /* ── アクションブロック ───────────────────────────────────── */ .event-action-block { background: var(--surface-2); border-radius: 6px; padding: 6px 8px 6px 8px; padding-right: 22px; /* 削除ボタン分 */ margin-bottom: 6px; position: relative; } .action-dial-row { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; } .action-dial-label { font-size: 9px; color: var(--text-muted); font-family: var(--font-ui); white-space: nowrap; flex-shrink: 0; } .action-dial-sel { flex: 1; font-size: 10px; font-family: var(--font-ui); background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 2px 4px; min-width: 0; } .action-dial-refresh { font-size: 11px; background: transparent; border: 1px solid var(--border); border-radius: 4px; color: var(--text-muted); cursor: pointer; padding: 1px 5px; flex-shrink: 0; } .action-dial-refresh:hover { color: var(--text); border-color: var(--accent); } .action-img-row { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .action-img-preview { width: 100%; max-height: 60px; object-fit: cover; border-radius: 4px; margin-bottom: 4px; } .action-img-btn, .action-img-clear { font-size: 9px; padding: 2px 6px; border-radius: 4px; cursor: pointer; } .action-img-btn { background: transparent; border: 1px solid var(--accent); color: var(--accent); } .action-img-clear { background: transparent; border: 1px solid var(--border); color: var(--text-muted); } /* EVENT ノード追加ボタン群 */ .event-add-btns { display: flex; gap: 4px; margin-top: 4px; } .event-add-btns .action-btn { flex: 1; font-size: 9px; padding: 3px 4px; } /* ── Event ノード: シーン種別セレクター ─────────────────────── */ .ev-scene-type-row { display: flex; gap: 3px; padding: 4px 8px 4px; border-bottom: 1px solid rgba(255,255,255,0.05); } .ev-scene-btn { font-family: var(--font-ui); font-size: 9px; font-weight: 700; letter-spacing: 0.03em; padding: 2px 7px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.10); background: transparent; color: var(--text-muted); cursor: pointer; transition: background 0.12s, color 0.12s, border-color 0.12s; white-space: nowrap; } .ev-scene-btn:not(.active):hover { background: rgba(255,255,255,0.07); color: var(--text); } /* アクティブ状態のカラーバリアント */ .ev-scene-adv.active { background: rgba(126,232,162,0.15); color: var(--scene-adv); border-color: rgba(126,232,162,0.45); } .ev-scene-ingame.active { background: rgba(74,158,255,0.15); color: var(--scene-ingame); border-color: rgba(74,158,255,0.45); } .ev-scene-outgame.active{ background: rgba(255,184,108,0.15); color: var(--scene-outgame); border-color: rgba(255,184,108,0.45); } /* ── Event ノード: サムネイルプレビュー（ノード内） ──────────── */ .ev-thumb-strip { overflow: hidden; border-bottom: 1px solid rgba(255,255,255,0.07); max-height: 70px; } .ev-thumb-img { width: 100%; height: 70px; object-fit: cover; display: block; } /* ── エディタ: シーン種別タブ ────────────────────────────────── */ .ev-scene-editor-tabs { display: flex; gap: 5px; margin-top: 6px; margin-bottom: 6px; } .ev-scene-editor-tab { font-family: var(--font-ui); font-size: 11px; font-weight: 700; padding: 5px 12px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-muted); cursor: pointer; transition: background 0.12s, color 0.12s, border-color 0.12s; } .ev-scene-editor-tab:hover { color: var(--text); border-color: var(--text-muted); } .ev-scene-editor-tab.adv-active { background: rgba(126,232,162,0.12); color: var(--accent); border-color: rgba(126,232,162,0.5); } .ev-scene-editor-tab.ingame-active { background: rgba(74,158,255,0.12); color: #4a9eff; border-color: rgba(74,158,255,0.5); } .ev-scene-editor-tab.outgame-active{ background: rgba(255,184,108,0.12); color: #ffb86c; border-color: rgba(255,184,108,0.5); } .ev-scene-desc { font-size: 10px; color: var(--text-muted); line-height: 1.6; margin-top: 2px; } /* エディタ: サムネイルアップロード */ .ev-thumb-editor-preview { width: 100%; height: 110px; border-radius: 6px; overflow: hidden; border: 1px solid var(--border); margin-bottom: 8px; } .ev-thumb-editor-preview img { width: 100%; height: 100%; object-fit: cover; display: block; } .ev-thumb-upload-row { display: flex; gap: 6px; align-items: center; } .ev-thumb-upload-btn, .ev-thumb-clear-btn { font-family: var(--font-ui); font-size: 11px; font-weight: 600; padding: 5px 12px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-muted); cursor: pointer; transition: background 0.12s, color 0.12s, border-color 0.12s; } .ev-thumb-upload-btn:hover { border-color: var(--accent); color: var(--accent); background: rgba(126,232,162,0.08); } .ev-thumb-clear-btn:hover { border-color: var(--danger); color: var(--danger); background: rgba(255,107,107,0.08); } /* ── シミュレーター: 背景レイヤー ────────────────────────────── */ #sim-screen { position: relative; } #sim-bg-layer { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; z-index: 0; pointer-events: none; } /* 暗幕オーバーレイ（見やすさのため） */ #sim-bg-layer::after { content: ''; position: absolute; inset: 0; background: rgba(5,5,14,0.42); } /* 背景がある時は sim-screen 内の要素を前面へ */ #sim-top-bar, #sim-scene, #sim-adv-window, #sim-actions-wrap, #sim-history { position: relative; z-index: 1; } /* ── シミュレーター: シーン種別バナー ───────────────────────── */ #sim-scene-type-banner { position: absolute; top: 48px; left: 50%; transform: translateX(-50%); z-index: 2; padding: 5px 18px; border-radius: 20px; font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; border: 1px solid transparent; pointer-events: none; display: none; } #sim-scene-type-banner.stype-ingame { display: block; background: rgba(74,158,255,0.14); border-color: rgba(74,158,255,0.5); color: #4a9eff; } #sim-scene-type-banner.stype-outgame { display: block; background: rgba(255,184,108,0.14); border-color: rgba(255,184,108,0.5); color: #ffb86c; } /* ── シミュレーション: EVENT ノード表示 ──────────────────────── */ .sim-event-scenarios { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; max-height: 240px; overflow-y: auto; } .sim-event-scenario { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 6px; padding: 8px 12px; } .sim-event-scenario-text { font-family: var(--font-mono); font-size: 12px; color: rgba(255,255,255,0.75); line-height: 1.6; margin-bottom: 6px; white-space: pre-wrap; } .sim-event-flags { display: flex; flex-direction: column; gap: 4px; } .sim-event-flag { display: flex; align-items: center; gap: 6px; font-size: 11px; } .sim-event-flag-name { flex: 1; color: var(--text-muted); } .sim-event-flag-delta { font-family: var(--font-mono); font-size: 10px; min-width: 30px; text-align: right; } .sim-event-flag-btn { font-family: var(--font-ui); font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 5px; border: 1px solid rgba(126,232,162,0.4); background: rgba(126,232,162,0.06); color: var(--accent); cursor: pointer; transition: all 0.13s; } .sim-event-flag-btn:hover { background: rgba(126,232,162,0.14); border-color: var(--accent); transform: translateX(3px); } /* ============================================================ デバッグパネル（F4 トグル） ============================================================ */ /* デバッグヒントボタン（#sim-screen の右下角に合わせた fixed 配置） */ #sim-debug-hint { position: fixed; /* sim-screen は width:min(900px,97vw) height:min(600px,94vh) で中央揃え。 その右下角の内側 14px に合わせる。 */ bottom: calc(50vh - min(300px, 47vh) + 14px); right: calc(50vw - min(450px, 48.5vw) + 14px); display: flex; align-items: center; gap: 5px; padding: 4px 10px 4px 8px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; color: rgba(200,208,232,0.35); font-family: var(--font-mono); font-size: 10px; cursor: pointer; transition: all 0.15s; z-index: 2500; /* overlay(2000) より上、debug-panel(3000) より下 */ letter-spacing: 0.04em; } #sim-debug-hint kbd { display: inline-block; padding: 1px 5px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15); border-radius: 3px; font-family: var(--font-mono); font-size: 9px; color: rgba(200,208,232,0.45); } #sim-debug-hint:hover { background: rgba(126,232,162,0.08); border-color: rgba(126,232,162,0.3); color: rgba(126,232,162,0.7); } #sim-debug-hint:hover kbd { border-color: rgba(126,232,162,0.3); color: rgba(126,232,162,0.6); } #sim-debug-hint.dbg-hint-active { background: rgba(126,232,162,0.1); border-color: rgba(126,232,162,0.45); color: var(--accent); } #sim-debug-hint.dbg-hint-active kbd { background: rgba(126,232,162,0.12); border-color: rgba(126,232,162,0.4); color: var(--accent); } #sim-debug-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 300px; display: flex; flex-direction: column; background: rgba(8, 10, 18, 0.97); border-left: 1px solid rgba(126, 232, 162, 0.25); backdrop-filter: blur(8px); z-index: 3000; /* #sim-overlay(2000) より上 */ font-family: var(--font-mono); font-size: 11px; color: #c8d0e8; overflow: hidden; pointer-events: auto; box-shadow: -8px 0 40px rgba(0,0,0,0.6); } /* ヘッダー */ .dbg-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: rgba(126, 232, 162, 0.07); border-bottom: 1px solid rgba(126, 232, 162, 0.2); flex-shrink: 0; } .dbg-title { font-family: var(--font-ui); font-weight: 700; font-size: 13px; color: var(--accent); letter-spacing: 0.08em; } .dbg-hotkey { font-family: var(--font-mono); font-size: 10px; padding: 2px 6px; border: 1px solid rgba(126,232,162,0.35); border-radius: 4px; color: rgba(126,232,162,0.6); background: transparent; } /* スクロールエリア */ .dbg-body { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 0 0 12px 0; scrollbar-width: thin; scrollbar-color: rgba(126,232,162,0.2) transparent; } .dbg-body::-webkit-scrollbar { width: 4px; } .dbg-body::-webkit-scrollbar-thumb { background: rgba(126,232,162,0.2); border-radius: 2px; } /* セクション */ .dbg-section { padding: 10px 14px 8px; border-bottom: 1px solid rgba(255,255,255,0.05); } .dbg-section-title { font-family: var(--font-ui); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; color: rgba(126,232,162,0.55); text-transform: uppercase; margin-bottom: 7px; } /* 強制操作セクション */ .dbg-subsection { margin-bottom: 8px; padding: 6px 0; border-top: 1px dashed rgba(255,255,255,0.08); } .dbg-subsection:first-child { border-top: none; padding-top: 0; } .dbg-subsection-title { font-size: 9px; font-weight: 700; color: rgba(255,121,198,0.85); letter-spacing: 0.5px; margin-bottom: 4px; } .dbg-force-row { display: flex; flex-wrap: wrap; gap: 4px; } .dbg-force-btn { font-family: var(--font-ui); font-size: 10px; padding: 5px 9px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.15); border-radius: 4px; color: var(--text-main); cursor: pointer; text-align: left; line-height: 1.3; transition: background 0.12s, border-color 0.12s; } .dbg-force-btn:hover:not(:disabled) { background: rgba(255,121,198,0.18); border-color: rgba(255,121,198,0.55); color: #fff; } .dbg-force-btn:disabled { opacity: 0.4; cursor: not-allowed; } .dbg-force-target { font-size: 9px; color: rgba(255,255,255,0.5); } /* タイマー強制 */ .dbg-force-timer { border-color: rgba(204,68,170,0.5); color: #cc44aa; } .dbg-force-timer:hover { background: rgba(204,68,170,0.25) !important; border-color: #cc44aa !important; } /* 異変分岐強制 */ .dbg-force-branch { border-color: rgba(192,132,252,0.45); color: #c084fc; } .dbg-force-branch:hover:not(:disabled) { background: rgba(192,132,252,0.22) !important; border-color: #c084fc !important; } .dbg-force-branch-default { border-color: rgba(255,184,108,0.45); color: #ffb86c; } .dbg-force-branch-default:hover:not(:disabled) { background: rgba(255,184,108,0.22) !important; border-color: #ffb86c !important; } /* ジャンプ */ .dbg-force-jump { border-color: rgba(116,235,213,0.45); color: #74ebd5; } .dbg-force-jump:hover:not(:disabled) { background: rgba(116,235,213,0.22) !important; border-color: #74ebd5 !important; } /* フラグ */ .dbg-force-flag { border-color: rgba(126,232,162,0.35); } .dbg-force-flag.dbg-flag-on { background: rgba(126,232,162,0.18); border-color: rgba(126,232,162,0.7); } /* 現在ノード */ .dbg-node-info { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .dbg-node-type { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 4px; letter-spacing: 0.04em; border: 1px solid currentColor; white-space: nowrap; } .dbg-node-label { font-family: var(--font-ui); font-size: 12px; color: #e8eaf0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; } .dbg-node-id { font-size: 9px; color: rgba(200,208,232,0.3); margin-top: 2px; } /* ノードタイプ別カラー（CSS 変数経由でカテゴリ色と統一） */ .dbg-ntype-start { color: var(--cat-start); } .dbg-ntype-event { color: var(--cat-event); } .dbg-ntype-choice { color: var(--cat-choice); } .dbg-ntype-dialogue { color: var(--cat-dialogue); } .dbg-ntype-condition { color: var(--cat-condition); } .dbg-ntype-ending { color: var(--cat-ending); } /* フラグ一覧 */ .dbg-flags-row { display: flex; flex-wrap: wrap; gap: 5px; min-height: 22px; align-items: center; } .dbg-flag-badge { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 99px; border: 1px solid; white-space: nowrap; } /* パラメーターテーブル */ .dbg-param-table { width: 100%; border-collapse: collapse; } .dbg-param-row { border-bottom: 1px solid rgba(255,255,255,0.04); } .dbg-param-row:last-child { border-bottom: none; } .dbg-param-name { padding: 5px 6px 5px 0; color: #c8d0e8; font-size: 11px; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dbg-param-type { padding: 5px 8px; font-size: 9px; color: rgba(200,208,232,0.35); white-space: nowrap; } .dbg-param-val { padding: 5px 0; text-align: right; } .dbg-val-num { font-weight: 700; font-size: 12px; } .dbg-val-max { font-size: 9px; color: rgba(200,208,232,0.35); } .dbg-val-rank { font-weight: 700; font-size: 14px; } .dbg-mini-bar { height: 3px; background: rgba(255,255,255,0.08); border-radius: 2px; margin-top: 3px; overflow: hidden; } .dbg-mini-fill { height: 100%; border-radius: 2px; transition: width 0.2s ease; } /* フラグ ON/OFF ピル */ .dbg-flag-pill { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 99px; border: 1px solid rgba(200,208,232,0.2); color: rgba(200,208,232,0.35); } .dbg-flag-on { font-weight: 700; } .dbg-flag-off { color: rgba(200,208,232,0.3); border-color: rgba(200,208,232,0.12); } /* 遷移ログ */ .dbg-log-section {} .dbg-log-count { font-size: 9px; color: rgba(200,208,232,0.3); font-weight: 400; margin-left: 6px; } .dbg-log-list { display: flex; flex-direction: column; gap: 3px; max-height: 260px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.1) transparent; } .dbg-log-list::-webkit-scrollbar { width: 3px; } .dbg-log-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); } .dbg-log-entry { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 4px; padding: 5px 8px; border-radius: 6px; background: rgba(255,255,255,0.03); transition: background 0.15s; } .dbg-log-entry.dbg-log-current { background: rgba(126,232,162,0.07); border: 1px solid rgba(126,232,162,0.2); } .dbg-log-step { font-size: 9px; color: rgba(200,208,232,0.3); min-width: 24px; flex-shrink: 0; } .dbg-log-type { font-size: 9px; font-weight: 700; min-width: 56px; flex-shrink: 0; } .dbg-log-label { font-family: var(--font-ui); font-size: 11px; color: #c8d0e8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; } .dbg-log-flags { display: flex; flex-wrap: wrap; gap: 3px; width: 100%; margin-top: 2px; padding-left: 28px; } .dbg-log-flag { font-size: 9px; color: rgba(249,212,35,0.7); background: rgba(249,212,35,0.08); padding: 1px 5px; border-radius: 3px; } /* 空状態 */ .dbg-empty-note { font-size: 10px; color: rgba(200,208,232,0.25); font-style: italic; } /* ============================================================ コンソールパネル ============================================================ */ #console-panel { --console-h: 220px; /* open 時の高さ（ドラッグで可変） */ flex-shrink: 0; height: 28px; /* 閉じた状態 = ヘッダーのみ */ overflow: hidden; background: #080a10; border-top: 1px solid var(--border); display: flex; flex-direction: column; position: relative; transition: height 0.2s cubic-bezier(.4,0,.2,1); z-index: 50; } #console-panel.open { height: var(--console-h); } /* リサイズハンドル：パネル上端の細い帯。ドラッグで高さ可変 */ #console-resize-handle { position: absolute; top: 0; left: 0; right: 0; height: 6px; cursor: ns-resize; z-index: 51; background: transparent; transition: background 0.12s; } #console-resize-handle:hover, body.console-resizing #console-resize-handle { background: rgba(192,132,252,0.45); } /* 閉じてる時はハンドル無効化 */ #console-panel:not(.open) #console-resize-handle { display: none; } /* リサイズドラッグ中は transition を切る */ body.console-resizing #console-panel { transition: none !important; } body.console-resizing { cursor: ns-resize; user-select: none; } /* ヘッダー行 */ #console-header { height: 28px; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; cursor: pointer; user-select: none; border-bottom: 1px solid transparent; transition: background 0.12s; } #console-header:hover { background: rgba(255,255,255,0.03); } #console-panel.open #console-header { border-bottom-color: var(--border); } .console-header-left, .console-header-right { display: flex; align-items: center; gap: 8px; } .console-icon { font-size: 11px; color: var(--accent); opacity: 0.7; } .console-title { font-family: var(--font-ui); font-size: 11px; font-weight: 700; color: var(--text-muted); letter-spacing: 0.08em; text-transform: uppercase; } .console-chevron { font-size: 9px; color: var(--text-muted); transition: transform 0.2s; } #console-panel.open .console-chevron { transform: rotate(180deg); } /* バッジ */ #console-badge { font-family: var(--font-mono); font-size: 10px; padding: 1px 7px; border-radius: 99px; border: 1px solid; } .console-badge-ok { color: var(--state-success); border-color: rgba(22,214,167,0.4); background: rgba(22,214,167,0.08); } .console-badge-warn { color: var(--state-warning); border-color: rgba(255,184,0,0.4); background: rgba(255,184,0,0.08); } .console-badge-error { color: var(--state-error); border-color: rgba(255,51,85,0.4); background: rgba(255,51,85,0.08); } /* ボディ */ #console-body { flex: 1; overflow-y: auto; padding: 6px 10px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.1) transparent; display: flex; flex-direction: column; gap: 3px; } #console-body::-webkit-scrollbar { width: 4px; } #console-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; } /* 各 issue 行 */ .console-issue { display: flex; align-items: baseline; gap: 6px; font-family: var(--font-mono); font-size: 11px; padding: 4px 8px; border-radius: 5px; border-left: 2px solid; line-height: 1.4; } /* 状態色＋左ボーダー幅（4px）で「色＋形」の二重表現 */ .console-error { background: rgba(255,51,85,0.08); border-left-width: 4px; border-left-color: var(--state-error); color: #ffa5a5; } .console-warn { background: rgba(255,184,0,0.08); border-left-width: 4px; border-left-color: var(--state-warning); color: var(--state-progress); } .console-info { background: rgba(77,171,247,0.08); border-left-width: 4px; border-left-color: var(--state-info); color: #90c4ff; } .console-ok { font-family: var(--font-mono); font-size: 11px; color: var(--state-success); padding: 10px; text-align: center; opacity: 0.85; background: rgba(22,214,167,0.06); border: 1px solid rgba(22,214,167,0.25); border-radius: 4px; } /* ジャンプボタン */ .console-jump-btn { margin-left: auto; flex-shrink: 0; font-family: var(--font-mono); font-size: 9px; padding: 1px 7px; border-radius: 3px; border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.05); color: rgba(200,208,232,0.6); cursor: pointer; transition: all 0.12s; } .console-jump-btn:hover { border-color: var(--accent); color: var(--accent); background: rgba(126,232,162,0.08); } /* Refresh ボタン */ .console-btn { font-family: var(--font-mono); font-size: 9px; padding: 2px 8px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.1); background: transparent; color: rgba(200,208,232,0.4); cursor: pointer; transition: all 0.12s; } .console-btn:hover { border-color: var(--accent); color: var(--accent); } .console-btn-bug { border-color: rgba(255,107,107,0.4) !important; color: #ff8585 !important; background: rgba(255,107,107,0.08) !important; } .console-btn-bug:hover { border-color: #ff6b6b !important; color: #fff !important; background: rgba(255,107,107,0.24) !important; } /* ── Title ノード ─────────────────────────────────────────── */ .node-title { border-color: var(--cat-title) !important; } .title-header { background: rgba(249,212,35,0.15); color: #f9d423; } .btn-title { color: var(--cat-title) !important; border-color: rgba(230,199,87,0.5) !important; } .btn-title:hover { background: rgba(230,199,87,0.12) !important; } .title-item { position: relative; display: flex; align-items: center; gap: 4px; padding: 3px 24px 3px 8px; margin-top: 4px; } .title-item-type-sel { font-size: 9px; font-family: var(--font-ui); font-weight: 700; background: rgba(249,212,35,0.12); color: #f9d423; border: 1px solid rgba(249,212,35,0.3); border-radius: 3px; padding: 1px 3px; cursor: pointer; flex-shrink: 0; max-width: 72px; } /* ────────────────────────────────────────────────────── 全 select のドロップダウン展開時 option は黒文字/白背景で読みやすく （ダーク UI で `color: inherit` だと展開時に薄文字になる問題対策） ────────────────────────────────────────────────────── */ select option { color: #1a1200; background: #ffffff; } /* ドロップダウンを開いたときのoption は黒文字/白背景（太字バリアント） */ .title-item-type-sel option { color: #1a1200; background: #ffffff; font-weight: 600; } .title-item-text { flex: 1; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 3px; padding: 2px 6px; font-size: 11px; font-family: var(--font-mono); min-width: 0; } .title-item-del { font-size: 10px; padding: 0 4px; background: transparent; border: none; color: var(--text-muted); cursor: pointer; flex-shrink: 0; } .title-item-del:hover { color: #ff6b6b; } .title-item-out { position: absolute; right: -20px; background: var(--conn-out) !important; top: 50%; margin-top: -6px; background: #f9d423 !important; } .title-item-out:hover { box-shadow: 0 0 6px 2px rgba(126,232,162,0.55) !important; } .connector.conn-disabled { background: #555 !important; opacity: 0.5; cursor: not-allowed !important; box-shadow: none !important; } .connector.conn-disabled:hover { box-shadow: none !important; opacity: 0.6; } .title-add-btn { display: block; width: calc(100% - 16px); margin: 6px 8px 4px; padding: 3px 0; font-size: 9px; font-family: var(--font-ui); font-weight: 700; color: #f9d423; background: rgba(249,212,35,0.07); border: 1px dashed rgba(249,212,35,0.3); border-radius: 4px; cursor: pointer; } .title-add-btn:hover { background: rgba(249,212,35,0.14); } /* ── Config ノード ────────────────────────────────────────── */ .node-config { border-color: var(--cat-config) !important; } .config-header { background: rgba(116,235,213,0.15); color: #74ebd5; } .btn-config { color: var(--cat-config) !important; border-color: rgba(141,219,198,0.5) !important; } .btn-config:hover { background: rgba(141,219,198,0.12) !important; } /* GalleryConfig: ディープゴールド（「宝物」感、TimerAsset のピーチオレンジと分離） */ .node-gallery-config { border-color: var(--cat-gallery) !important; min-width: 200px; } .gallery-config-header { background: rgba(255,169,77,0.18); color: var(--cat-gallery); } .gallery-config-body { padding: 8px; font-size: 12px; } .gallery-config-summary { opacity: 0.85; } .btn-gallery-config { color: var(--cat-gallery) !important; border-color: rgba(255,169,77,0.5) !important; } .btn-gallery-config:hover { background: rgba(255,169,77,0.12) !important; } .gc-entry-row { border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; padding: 6px 8px; margin-bottom: 6px; background: rgba(255,255,255,0.03); } .gc-entry-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; } .gc-entry-num { font-weight: bold; color: var(--cat-gallery); } .gc-entry-del { background: none; border: none; color: #ff6b6b; cursor: pointer; font-size: 16px; } .gc-entry-fields { display: flex; flex-direction: column; gap: 4px; } .gc-entry-fields label { font-size: 11px; opacity: 0.85; display: flex; align-items: center; gap: 6px; } .gc-entry-fields input { flex: 1; } .sim-gallery-tabs { display: flex; gap: 4px; padding: 4px 8px; border-bottom: 1px solid rgba(255,255,255,0.1); flex-wrap: wrap; } .sim-gallery-tab { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.15); color: #ddd; padding: 4px 10px; border-radius: 4px; cursor: pointer; font-size: 12px; } .sim-gallery-tab.active { background: var(--cat-gallery); color: #1a1a1a; border-color: var(--cat-gallery); } .sim-gallery-tab-panel { display: none; } .sim-gallery-tab-panel.active { display: block; } .sim-gallery-locked { background: #222 !important; border: 1px dashed #555 !important; cursor: default !important; } .sim-gallery-locked-icon { font-size: 36px; color: #555; text-align: center; padding: 20px 0; } /* === カスタム系ノード共通 === */ .ui-custom-body { padding: 8px; font-size: 12px; opacity: 0.85; } .uic-btn-row { position: relative; padding: 4px 18px 4px 8px; border-top: 1px solid rgba(255,255,255,0.06); font-size: 12px; min-height: 20px; } .uic-btn-label { color: #ddd; } .uic-btn-out, .sc-scene-out { position: absolute; right: -8px; top: 50%; margin-top: -6px; width: 12px; height: 12px; background: #f9d423 !important; border-radius: 50%; cursor: crosshair; } .uic-btn-edit-row { display: flex; gap: 6px; align-items: center; margin-bottom: 4px; } .uic-btn-edit-row .uic-btn-input { flex: 1; } .uic-btn-num { font-weight: bold; opacity: 0.7; min-width: 24px; } .uic-btn-del { background: none; border: none; color: #ff6b6b; cursor: pointer; } /* === UICustom（サーモン: Dialogue のオレンジと分離） === */ .node-ui-custom { border-color: var(--cat-ui-custom) !important; min-width: 200px; } .ui-custom-header { background: rgba(255,160,122,0.18); color: var(--cat-ui-custom); } .btn-ui-custom { color: var(--cat-ui-custom) !important; border-color: rgba(255,160,122,0.5) !important; } .btn-ui-custom:hover { background: rgba(255,160,122,0.12) !important; } /* ★ Play モード (ゲーム書き出し / ?gsplay) — editor chrome を隠してゲーム画面だけに */ body.gs-play-mode { background: #000 !important; } body.gs-play-mode #toolbar, body.gs-play-mode #canvas, body.gs-play-mode #minimap, body.gs-play-mode .members-tab, body.gs-play-mode #members-panel, body.gs-play-mode #grid-coords { display: none !important; } /* sim-overlay は full-screen のままゲーム本体として表示される */ body.gs-play-mode #sim-overlay { z-index: 1 !important; } /* sim 内の「エディタに戻る/閉じる」系ボタンは Play 配布物では隠す */ body.gs-play-mode .sim-exit-to-editor { display: none !important; } /* === EzUI ノード (UI カテゴリ、シアン系) === */ .btn-ezui { color: #4fd1c5 !important; border-color: rgba(79,209,197,0.5) !important; display: inline-flex; align-items: center; gap: 5px; } .btn-ezui:hover { background: rgba(79,209,197,0.12) !important; } /* メニューボタンのロゴ — シアンに着色 (mask 方式で確実に色指定) */ .btn-ezui-logo { width: 14px; height: 14px; flex-shrink: 0; background-color: #4fd1c5; -webkit-mask: url(logos/ezui.svg?v=2026052526) center/contain no-repeat; mask: url(logos/ezui.svg?v=2026052526) center/contain no-repeat; } .node-ezui { border-color: #4fd1c5 !important; min-width: 200px; } .ezui-header { background: rgba(79,209,197,0.18); color: #4fd1c5; display: flex; align-items: center; gap: 5px; } .ezui-header-logo { width: 14px; height: 14px; flex-shrink: 0; background-color: #4fd1c5; -webkit-mask: url(logos/ezui.svg?v=2026052526) center/contain no-repeat; mask: url(logos/ezui.svg?v=2026052526) center/contain no-repeat; } .ezui-node-body { padding: 6px 8px; display: flex; flex-direction: column; gap: 6px; } .ezui-node-name { font-size: 12px; font-weight: 700; color: #d0d0d0; } .ezui-node-preview { width: 100%; height: 90px; background: #1a1a1d; border: 1px solid #444; border-radius: 4px; overflow: hidden; display: flex; align-items: center; justify-content: center; cursor: pointer; } .ezui-node-edit { background: rgba(79,209,197,0.15); border: 1px solid rgba(79,209,197,0.4); color: #4fd1c5; padding: 4px 8px; border-radius: 4px; font-size: 11px; cursor: pointer; font-weight: 700; } .ezui-node-edit:hover { background: rgba(79,209,197,0.28); color: #fff; } .ezui-btn-row { display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding: 2px 8px; position: relative; } .ezui-btn-label { font-size: 10px; color: #4fd1c5; font-family: monospace; } .ezui-btn-out { position: relative; } /* bind 入力ポート (左側、Param 接続用) */ .ezui-bind-row { display: flex; align-items: center; gap: 6px; padding: 2px 8px; position: relative; } .ezui-bind-label { font-size: 10px; color: #c084fc; font-family: monospace; } .ezui-bind-in { position: relative; } /* ★ EzUI は UI 系ノード — 入力コネクタは UI コネクト色 (青) に統一 */ .node-ezui .in-point { background: #4a9eff !important; } .ezui-bind-in { background: #4a9eff !important; } .ezui-prop-hint { font-size: 10px; color: #888; line-height: 1.5; margin: 2px 0 8px; font-family: sans-serif; } .ezui-imgfile { font-size: 10px; color: #aaa; margin-bottom: 3px; } .ezui-imgfile::-webkit-file-upload-button { background: #34343c; color: #ddd; border: 1px solid #555; border-radius: 3px; padding: 2px 6px; font-size: 10px; cursor: pointer; } .ezui-img-clear { margin-top: 3px; background: rgba(255,100,100,0.15); border: 1px solid rgba(255,100,100,0.4); color: #ff8080; font-size: 10px; padding: 2px 8px; border-radius: 3px; cursor: pointer; } .ezui-img-clear:hover { background: rgba(255,100,100,0.28); } /* リサイズハンドル (Figma 風) */ .ezui-resize-handle:hover { background: #c084fc !important; transform: translate(-50%,-50%) scale(1.3) !important; } /* === EzUI フルスクリーンエディタ === */ #ezui-editor-overlay { position: fixed; inset: 0; z-index: 1350; background: #232328; display: flex; flex-direction: column; color: #ddd; font-family: sans-serif; } .ezui-ed-bar { display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: linear-gradient(180deg, #2a7e78, #1a5e58); border-bottom: 1px solid #14403c; flex: 0 0 auto; } .ezui-ed-logo { font-size: 18px; color: #fff; } .ezui-ed-logo-img { height: 22px; width: auto; } /* SVG は白 fill なのでそのまま (teal バー上で映える) */ .ezui-ed-title { font-size: 15px; font-weight: 700; color: #fff; letter-spacing: 0.04em; } .ezui-ed-name { background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3); color: #fff; padding: 4px 10px; border-radius: 4px; font-size: 13px; width: 220px; } .ezui-ed-spacer { flex: 1 1 auto; } .ezui-ed-btn { background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3); color: #fff; padding: 5px 12px; border-radius: 4px; font-size: 12px; cursor: pointer; font-weight: 600; } .ezui-ed-btn:hover { background: rgba(255,255,255,0.28); } .ezui-ed-close { background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3); color: #fff; padding: 5px 14px; border-radius: 4px; font-size: 12px; cursor: pointer; font-weight: 700; margin-left: 8px; } .ezui-ed-close:hover { background: rgba(255,80,80,0.4); border-color: #ff8080; } .ezui-ed-body { flex: 1 1 auto; display: grid; grid-template-columns: 220px 1fr 280px; min-height: 0; } .ezui-ed-left { border-right: 1px solid #444; padding: 12px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; background: #28282e; } .ezui-ed-section { display: flex; flex-direction: column; gap: 6px; } .ezui-ed-section-grow { flex: 1 1 auto; min-height: 0; } .ezui-ed-section-label { font-size: 11px; font-weight: 700; color: #888; } .ezui-palette { display: flex; flex-direction: column; gap: 4px; } .ezui-palette-btn { background: #34343c; border: 1px solid #555; color: #ddd; padding: 7px 10px; border-radius: 4px; font-size: 12px; cursor: pointer; text-align: left; } .ezui-palette-btn:hover { background: #44444e; border-color: #4fd1c5; color: #fff; } .ezui-hierarchy { display: flex; flex-direction: column; gap: 1px; overflow-y: auto; flex: 1 1 auto; } .ezui-hier-row { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 3px; cursor: pointer; font-size: 12px; } .ezui-hier-row:hover { background: rgba(255,255,255,0.06); } .ezui-hier-sel { background: rgba(79,209,197,0.2) !important; } .ezui-hier-type { font-size: 11px; opacity: 0.7; width: 14px; text-align: center; } .ezui-hier-name { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ezui-hier-del { background: transparent; border: none; color: #888; cursor: pointer; font-size: 13px; padding: 0 2px; } .ezui-hier-del:hover { color: #ff8080; } /* 階層: 前面の向き トグル + ドラッグ並べ替え */ .ezui-hier-label { display: flex; align-items: center; justify-content: space-between; gap: 6px; } .ezui-zorder-toggle { background: #34343c; border: 1px solid #555; color: #bbb; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 10px; cursor: pointer; white-space: nowrap; } .ezui-zorder-toggle:hover { background: #44444e; border-color: #4fd1c5; color: #fff; } .ezui-hier-hint { font-size: 10px; color: #666; margin: -2px 0 1px; } .ezui-hier-caret { width: 12px; flex: 0 0 auto; text-align: center; color: #9a9aa2; font-size: 10px; cursor: pointer; user-select: none; } .ezui-hier-caret:hover { color: #fff; } .ezui-hier-caret-off { cursor: default; visibility: hidden; } .ezui-hier-group > .ezui-hier-name { color: #d9b25a; } .ezui-hier-grip { color: #5a5a62; font-size: 11px; width: 10px; text-align: center; cursor: grab; user-select: none; flex: 0 0 auto; } .ezui-hier-row:hover .ezui-hier-grip { color: #888; } .ezui-hier-grip-off { visibility: hidden; } .ezui-hier-dragging { opacity: 0.4; } .ezui-drop-before { box-shadow: inset 0 2px 0 0 #4fd1c5; } .ezui-drop-after { box-shadow: inset 0 -2px 0 0 #4fd1c5; } .ezui-drop-inside { background: rgba(79,209,197,0.18) !important; outline: 1px dashed #4fd1c5; outline-offset: -1px; } /* 複数選択 / 主選択 / 表示・ロック */ .ezui-hier-primary { box-shadow: inset 2px 0 0 0 #c084fc; } .ezui-hier-hidden .ezui-hier-name, .ezui-hier-hidden .ezui-hier-type { opacity: 0.4; font-style: italic; } .ezui-hier-locked .ezui-hier-name { color: #9aa; } .ezui-hier-tools { margin-left: auto; display: inline-flex; align-items: center; gap: 1px; opacity: 0.35; } .ezui-hier-row:hover .ezui-hier-tools, .ezui-hier-sel .ezui-hier-tools { opacity: 1; } .ezui-hier-icon { background: transparent; border: none; color: #9a9aa2; cursor: pointer; font-size: 11px; padding: 0 2px; line-height: 1; } .ezui-hier-icon:hover { color: #fff; } .ezui-hier-icon-on { color: #e0c060; } .ezui-hier-rename { flex: 1 1 auto; min-width: 0; font-size: 12px; padding: 1px 4px; background: #1f1f24; border: 1px solid #4fd1c5; color: #fff; border-radius: 3px; font-family: sans-serif; } /* プロパティ: 表示/ロック行 + 複数選択アクション */ .ezui-prop-row { flex-direction: row !important; align-items: center; justify-content: space-between; } .ezui-lockhide { display: inline-flex; gap: 4px; } .ezui-lh-btn { background: #34343c; border: 1px solid #555; color: #ccc; cursor: pointer; font-size: 13px; padding: 2px 8px; border-radius: 4px; } .ezui-lh-btn:hover { border-color: #4fd1c5; } .ezui-lh-on { background: #4a3a20; border-color: #e0c060; } .ezui-multi-actions { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; } .ezui-multi-row { display: flex; gap: 6px; flex-wrap: wrap; } .ezui-multi-btn { flex: 1 1 auto; background: #34343c; border: 1px solid #555; color: #ddd; cursor: pointer; font-size: 12px; padding: 6px 12px; border-radius: 4px; } .ezui-multi-btn:hover { background: #44444e; border-color: #4fd1c5; color: #fff; } .ezui-multi-btn-danger:hover { border-color: #ff8080; color: #ff8080; } /* 整列バー */ .ezui-align-row { display: flex; align-items: center; gap: 3px; margin: 2px 0 6px; } .ezui-align-btn { flex: 1 1 0; min-width: 0; background: #34343c; border: 1px solid #555; color: #ddd; cursor: pointer; font-size: 12px; padding: 5px 0; border-radius: 4px; text-align: center; } .ezui-align-btn:hover { background: #44444e; border-color: #4fd1c5; color: #fff; } .ezui-align-wide { padding: 5px 8px; } .ezui-align-sep { flex: 0 0 6px; } /* スマートガイド線 (ドラッグ中) */ .ezui-guide { box-shadow: 0 0 0 0.5px rgba(255,59,107,0.5); } .ezui-ed-center { position: relative; overflow: hidden; background: #18181b; display: flex; align-items: center; justify-content: center; } .ezui-canvas-scroll { overflow: auto; max-width: 100%; max-height: 100%; padding: 20px; } .ezui-canvas-zoom { position: absolute; bottom: 12px; right: 12px; background: rgba(0,0,0,0.6); border-radius: 6px; padding: 4px 8px; display: flex; align-items: center; gap: 8px; } .ezui-canvas-zoom button { background: #44444e; border: 1px solid #666; color: #fff; width: 24px; height: 24px; border-radius: 4px; cursor: pointer; font-size: 14px; } .ezui-canvas-zoom span { font-size: 11px; color: #ccc; min-width: 36px; text-align: center; } .ezui-ed-right { border-left: 1px solid #444; padding: 12px; overflow-y: auto; background: #28282e; } .ezui-props-empty { color: #777; font-size: 12px; text-align: center; padding: 40px 0; } .ezui-props-head { font-size: 14px; font-weight: 700; color: #4fd1c5; margin-bottom: 10px; } .ezui-props-id { font-size: 11px; color: #888; font-weight: 400; } .ezui-prop { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; } .ezui-prop > label { font-size: 11px; color: #999; } .ezui-prop input, .ezui-prop select { background: #1e1e22; border: 1px solid #555; color: #ddd; padding: 5px 8px; border-radius: 3px; font-size: 12px; } .ezui-prop input[type="color"] { padding: 2px; height: 28px; } .ezui-prop-label { font-size: 11px; font-weight: 700; color: #888; margin: 8px 0 4px; } .ezui-prop-grid { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 4px 6px; align-items: center; margin-bottom: 8px; } .ezui-prop-grid label { font-size: 11px; color: #999; } .ezui-prop-grid input { background: #1e1e22; border: 1px solid #555; color: #ddd; padding: 4px 6px; border-radius: 3px; font-size: 12px; width: 100%; box-sizing: border-box; } /* アンカー 9 分割 */ .ezui-anchor-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; width: 72px; } .ezui-anchor-btn { width: 22px; height: 22px; background: #34343c; border: 1px solid #555; border-radius: 3px; cursor: pointer; position: relative; } .ezui-anchor-btn::after { content: ''; position: absolute; width: 5px; height: 5px; background: #888; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%,-50%); } .ezui-anchor-btn:hover { border-color: #4fd1c5; } .ezui-anchor-active { border-color: #4fd1c5 !important; background: rgba(79,209,197,0.25) !important; } .ezui-anchor-active::after { background: #4fd1c5; } /* === StandingPoseCustom（ローズピンク: CaseEvent のピンクと分離） === */ .node-pose-custom { border-color: var(--cat-pose) !important; min-width: 200px; } .pose-custom-header { background: rgba(240,101,149,0.18); color: var(--cat-pose); } .btn-pose-custom { color: var(--cat-pose) !important; border-color: rgba(240,101,149,0.5) !important; } .btn-pose-custom:hover { background: rgba(240,101,149,0.12) !important; } .pose-img-row { display: flex; align-items: center; gap: 8px; margin: 4px 0; } .pose-img-label { font-size: 11px; opacity: 0.85; } .pose-img-actions { display: flex; gap: 4px; flex-wrap: wrap; } .pose-img-btn { background: rgba(240,101,149,0.12); color: var(--cat-pose); border: 1px solid rgba(240,101,149,0.4); border-radius: 4px; padding: 3px 8px; font-size: 11px; cursor: pointer; } .pose-img-btn:hover { background: rgba(240,101,149,0.22); } .pose-img-clear { color: #ff6b6b; border-color: rgba(255,107,107,0.4); background: rgba(255,107,107,0.08); } .pose-img-clear:hover { background: rgba(255,107,107,0.18); } .pose-img-preview { margin: 4px 0; padding: 6px; background: #1a1a1a; border: 1px solid rgba(255,255,255,0.1); border-radius: 4px; text-align: center; } .pose-img-preview img { max-width: 100%; max-height: 180px; object-fit: contain; } /* === 解放条件セレクタ === */ .unlock-flag-block { margin: 6px 0; padding: 6px 8px; border: 1px solid rgba(255,255,255,0.12); border-radius: 5px; background: rgba(255,255,255,0.03); } .unlock-flag-block[data-enabled="true"] { border-color: rgba(255,212,121,0.5); background: rgba(255,212,121,0.06); } .unlock-flag-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .unlock-flag-toggle { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 12px; user-select: none; } .unlock-flag-toggle input { cursor: pointer; } .unlock-flag-icon { font-size: 14px; } .unlock-flag-title { font-weight: bold; color: #ddd; } .unlock-flag-block[data-enabled="true"] .unlock-flag-title { color: var(--state-progress); } .unlock-flag-status { font-size: 10px; opacity: 0.7; padding: 2px 6px; border-radius: 3px; background: rgba(255,255,255,0.05); } .unlock-flag-block[data-enabled="true"] .unlock-flag-status { background: rgba(255,212,121,0.15); color: var(--state-progress); opacity: 1; } .unlock-flag-body { display: flex; gap: 4px; align-items: center; margin-top: 6px; } .unlock-flag-select { flex: 1; min-width: 0; font-size: 11px; padding: 3px 4px; } .unlock-flag-text { flex: 1; min-width: 0; font-size: 11px; padding: 3px 6px; font-family: var(--font-mono); margin-top: 4px; } .unlock-flag-row { display: flex; gap: 4px; align-items: center; } .unlock-flag-typebadge { font-size: 9px; padding: 1px 4px; border-radius: 3px; white-space: nowrap; background: rgba(255,255,255,0.1); color: #aaa; } .unlock-flag-endcount { background: rgba(189,147,249,0.18); color: #bd93f9; } .unlock-flag-bool { background: rgba(80,250,123,0.18); color: #50fa7b; } .unlock-flag-custom { background: rgba(139,233,253,0.18); color: #8be9fd; } .unlock-flag-condrow { display: flex; gap: 4px; align-items: center; margin-top: 4px; } .unlock-flag-op { font-size: 11px; padding: 3px 4px; flex: 0 0 auto; } .unlock-flag-value { width: 56px; font-size: 11px; padding: 3px 6px; text-align: right; } .unlock-flag-unit { font-size: 11px; opacity: 0.75; } .sc-auto-toggle { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 12px; user-select: none; padding: 4px 0; } .sc-auto-toggle input { cursor: pointer; } .sc-auto-hint { font-size: 11px; opacity: 0.75; padding: 4px 0 6px 22px; line-height: 1.4; } /* === Vague Timer ウィジェット === */ .ui-node-vague-timer { --timer-dur: 30s; padding: 6px; } .ui-vague-label { font-size: 11px; opacity: 0.85; text-align: center; margin-bottom: 4px; color: #ddd; } .ui-vague-anim { width: 100%; } /* mode: bar */ .ui-vague-bar { height: 14px; background: #1a1a1a; border: 1px solid #444; border-radius: 7px; overflow: hidden; position: relative; } .ui-vague-bar-fill { height: 100%; width: 100%; background: linear-gradient(90deg, #50fa7b 0%, #50fa7b 50%, #f1fa8c 70%, #ffb86c 88%, #ff5555 100%); transform-origin: left; transform: scaleX(1); animation: vagueBarShrink var(--timer-dur) linear forwards; animation-play-state: paused; } .ui-vague-active .ui-vague-bar-fill { animation-play-state: running; } @keyframes vagueBarShrink { from { transform: scaleX(1); } to { transform: scaleX(0); } } /* mode: pulse */ .ui-vague-pulse { display: flex; justify-content: center; padding: 8px 0; } .ui-vague-pulse-dot { width: 28px; height: 28px; border-radius: 50%; background: #50fa7b; box-shadow: 0 0 0 0 rgba(80,250,123,0.6); animation: vaguePulseColor var(--timer-dur) linear forwards, vaguePulseRing 1.4s ease-out infinite; animation-play-state: paused, paused; } .ui-vague-active .ui-vague-pulse-dot { animation-play-state: running, running; } @keyframes vaguePulseColor { 0% { background: #50fa7b; } 60% { background: #f1fa8c; } 85% { background: #ffb86c; animation-timing-function: ease-in; } 100% { background: #ff5555; } } @keyframes vaguePulseRing { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,0.5); } 100% { box-shadow: 0 0 0 14px rgba(255,255,255,0); } } /* mode: clock */ .ui-vague-clock { display: flex; justify-content: center; padding: 4px; } .ui-vague-clock-face { width: 56px; height: 56px; border-radius: 50%; background: #1a1a1a; border: 2px solid #888; position: relative; } .ui-vague-clock-mark { position: absolute; background: #aaa; } .ui-vague-clock-mark-12 { top: 2px; left: 50%; width: 2px; height: 5px; margin-left: -1px; } .ui-vague-clock-mark-6 { bottom: 2px; left: 50%; width: 2px; height: 5px; margin-left: -1px; } .ui-vague-clock-mark-3 { right: 2px; top: 50%; width: 5px; height: 2px; margin-top: -1px; } .ui-vague-clock-mark-9 { left: 2px; top: 50%; width: 5px; height: 2px; margin-top: -1px; } .ui-vague-clock-hand { position: absolute; left: 50%; top: 50%; width: 2px; height: 22px; margin-left: -1px; margin-top: -22px; background: #ff79c6; transform-origin: bottom center; animation: vagueClockSpin var(--timer-dur) linear forwards; animation-play-state: paused; } .ui-vague-active .ui-vague-clock-hand { animation-play-state: running; } .ui-vague-clock-center { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin-left: -3px; margin-top: -3px; background: #ff79c6; border-radius: 50%; } @keyframes vagueClockSpin { from { transform: rotate(0); } to { transform: rotate(720deg); } } /* mode: sand */ .ui-vague-sand { display: flex; flex-direction: column; align-items: center; padding: 4px; --sand-color: #f1fa8c; } .ui-vague-sand-top, .ui-vague-sand-bottom { width: 36px; height: 18px; background: #1a1a1a; border: 2px solid #888; position: relative; overflow: hidden; } .ui-vague-sand-top { border-radius: 3px 3px 0 0; clip-path: polygon(0 0, 100% 0, 50% 100%); } .ui-vague-sand-bottom { border-radius: 0 0 3px 3px; clip-path: polygon(50% 0, 100% 100%, 0 100%); } .ui-vague-sand-neck { width: 4px; height: 4px; background: #888; } .ui-vague-sand-top-fill { position: absolute; left: 0; right: 0; bottom: 0; background: var(--sand-color); height: 100%; animation: vagueSandDrain var(--timer-dur) linear forwards; animation-play-state: paused; } .ui-vague-sand-bottom-fill { position: absolute; left: 0; right: 0; bottom: 0; background: var(--sand-color); height: 0; animation: vagueSandFill var(--timer-dur) linear forwards; animation-play-state: paused; } .ui-vague-active .ui-vague-sand-top-fill, .ui-vague-active .ui-vague-sand-bottom-fill { animation-play-state: running; } @keyframes vagueSandDrain { from { height: 100%; } to { height: 0%; } } @keyframes vagueSandFill { from { height: 0%; } to { height: 100%; } } /* mode: sunset */ .ui-vague-sky { position: relative; height: 38px; border-radius: 6px; overflow: hidden; background: linear-gradient(180deg, #87ceeb 0%, #87ceeb 100%); animation: vagueSkyShift var(--timer-dur) linear forwards; animation-play-state: paused; border: 1px solid #444; } .ui-vague-active .ui-vague-sky, .ui-vague-active .ui-vague-sun { animation-play-state: running; } .ui-vague-sun { position: absolute; width: 16px; height: 16px; border-radius: 50%; background: #fff5b0; box-shadow: 0 0 10px #fff5b0; left: 0; bottom: 4px; animation: vagueSunArc var(--timer-dur) linear forwards; animation-play-state: paused; } @keyframes vagueSkyShift { 0% { background: linear-gradient(180deg, #87ceeb, #b0e0e6); } 60% { background: linear-gradient(180deg, #ffa07a, #ffd89b); } 100% { background: linear-gradient(180deg, #1a1a2e, #0a0a1a); } } @keyframes vagueSunArc { 0% { left: 0%; bottom: 4px; background: #fff5b0; box-shadow: 0 0 10px #fff5b0; } 50% { left: 50%; bottom: 22px; background: #ffd700; box-shadow: 0 0 12px #ffd700; } 100% { left: 100%; bottom: -16px; background: #ff5555; box-shadow: 0 0 8px #ff5555; } } /* エディタ：モード選択ボタン */ .ui-vague-mode-btns { display: flex; flex-direction: column; gap: 4px; } .ui-vague-mode-btn { text-align: left; padding: 6px 10px; font-size: 12px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 4px; color: #ddd; cursor: pointer; } .ui-vague-mode-btn:hover { background: rgba(255,255,255,0.08); } .ui-vague-mode-btn.active { background: rgba(255,184,108,0.15); border-color: #ffb86c; color: #ffb86c; } .sim-title-btn-subinfo { display: block; font-size: 10px; opacity: 0.7; margin-top: 4px; font-weight: normal; } .sim-title-btn:disabled .sim-title-btn-subinfo { opacity: 0.4; } /* === Trophy ノード === */ .node-trophy { border-color: var(--cat-trophy) !important; min-width: 200px; } .trophy-header { background: rgba(255,215,0,0.15); color: #ffd700; } .trophy-body { padding: 8px; font-size: 12px; opacity: 0.85; } .trophy-summary { opacity: 0.85; } .btn-trophy { color: var(--cat-trophy) !important; border-color: rgba(232,198,71,0.5) !important; } .btn-trophy:hover { background: rgba(232,198,71,0.12) !important; } .trophy-acquired-badge { font-size: 10px; padding: 2px 6px; border-radius: 3px; background: rgba(80,250,123,0.18); color: #50fa7b; } .trophy-add-row { display: flex; align-items: center; gap: 6px; margin-top: 6px; } .trophy-add-row .editor-add-btn { margin-top: 0; flex: 0 0 auto; } .trophy-add-single { flex: 1 1 auto !important; } .trophy-add-sep { opacity: 0.4; font-size: 11px; } .trophy-bulk-input { width: 56px; text-align: right; font-size: 12px; padding: 4px 6px; flex: 0 0 auto; } .trophy-add-bulk { background: rgba(255,215,0,0.1) !important; color: #ffd700 !important; border-color: rgba(255,215,0,0.4) !important; } .trophy-add-bulk:hover { background: rgba(255,215,0,0.2) !important; } .trophy-award-row { margin-top: 6px; padding: 8px; background: rgba(80,250,123,0.05); border: 1px solid rgba(80,250,123,0.25); border-radius: 5px; } .trophy-award-label { display: block; font-size: 12px; font-weight: bold; color: #50fa7b; margin-bottom: 4px; } .trophy-award-fields { display: flex; gap: 4px; align-items: center; } .trophy-award-fields input[type="text"] { font-size: 11px; padding: 3px 6px; } .trophy-award-fields select { font-size: 11px; padding: 3px 4px; } .trophy-award-hint { font-size: 10px; opacity: 0.6; margin-top: 4px; line-height: 1.4; } /* === ノード上のトロフィーバッジ === */ .node-trophy-badge { position: absolute; top: -10px; right: -10px; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, #ffd700, #ffaa00); color: #1a1a1a; font-size: 16px; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 6px rgba(255,215,0,0.5); z-index: 5; user-select: none; transition: transform 0.15s; } .node-trophy-badge:hover { transform: scale(1.15); box-shadow: 0 4px 10px rgba(255,215,0,0.7); } .node-trophy-badge[data-count]:not([data-count="1"])::after { content: attr(data-count); position: absolute; bottom: -4px; right: -4px; background: #ff5555; color: #fff; font-size: 9px; font-weight: bold; padding: 1px 4px; border-radius: 8px; min-width: 12px; text-align: center; } /* === トロフィー紐付けメニュー === */ .trophy-bind-menu { position: fixed; background: #1a1a1a; border: 1px solid rgba(255,215,0,0.5); border-radius: 6px; padding: 8px; min-width: 240px; max-width: 320px; max-height: 60vh; overflow-y: auto; z-index: 10000; box-shadow: 0 8px 24px rgba(0,0,0,0.6); } .trophy-bind-header { font-size: 13px; font-weight: bold; color: #ffd700; padding: 4px 6px 8px; border-bottom: 1px solid rgba(255,255,255,0.1); margin-bottom: 6px; } .trophy-bind-list { display: flex; flex-direction: column; gap: 2px; } .trophy-bind-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 4px; cursor: pointer; font-size: 12px; } .trophy-bind-item:hover { background: rgba(255,255,255,0.06); } .trophy-bind-icon { font-size: 16px; } .trophy-bind-name { color: #ddd; } .trophy-bind-empty { padding: 16px; color: #888; font-size: 12px; line-height: 1.5; text-align: center; } .trophy-bind-footer { display: flex; gap: 6px; justify-content: flex-end; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.1); } .trophy-bind-apply, .trophy-bind-close { padding: 5px 12px; font-size: 12px; border-radius: 4px; cursor: pointer; border: 1px solid; } .trophy-bind-apply { background: rgba(255,215,0,0.18); color: #ffd700; border-color: rgba(255,215,0,0.5); } .trophy-bind-apply:hover { background: rgba(255,215,0,0.3); } .trophy-bind-close { background: rgba(255,255,255,0.06); color: #aaa; border-color: rgba(255,255,255,0.2); } .trophy-bind-close:hover { background: rgba(255,255,255,0.12); } /* === シミュ：トロフィー獲得トースト === */ #sim-trophy-toast-host { position: absolute; top: 12px; right: 12px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; pointer-events: none; } .sim-trophy-toast { background: linear-gradient(135deg, rgba(255,215,0,0.95), rgba(255,170,0,0.95)); color: #1a1a1a; padding: 10px 16px; border-radius: 8px; display: flex; align-items: center; gap: 12px; min-width: 260px; box-shadow: 0 6px 20px rgba(0,0,0,0.5); animation: trophyToastIn 0.4s ease-out; transition: opacity 0.4s, transform 0.4s; } .sim-trophy-toast.sim-trophy-toast-out { opacity: 0; transform: translateX(20px); } .sim-trophy-toast-icon { font-size: 32px; } .sim-trophy-toast-label { font-size: 10px; font-weight: bold; opacity: 0.7; } .sim-trophy-toast-name { font-size: 14px; font-weight: bold; } @keyframes trophyToastIn { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } } /* === シミュ：トロフィー画面 === */ .sim-trophy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; padding: 12px; } .sim-trophy-cell { background: #1a1a1a; border: 1px solid #333; border-radius: 8px; padding: 12px; text-align: center; transition: border-color 0.15s, background 0.15s; } .sim-trophy-cell.sim-trophy-got { border-color: rgba(255,215,0,0.6); background: linear-gradient(135deg, rgba(255,215,0,0.08), rgba(255,170,0,0.05)); box-shadow: inset 0 0 12px rgba(255,215,0,0.1); } .sim-trophy-cell.sim-trophy-not-got { opacity: 0.55; } .sim-trophy-cell.sim-trophy-locked { opacity: 0.3; } .sim-trophy-cell-icon { font-size: 36px; margin-bottom: 6px; } .sim-trophy-cell-name { font-size: 13px; font-weight: bold; color: #ddd; margin-bottom: 4px; } .sim-trophy-cell-desc { font-size: 11px; opacity: 0.7; line-height: 1.4; } .sim-trophy-cell-time { font-size: 9px; opacity: 0.5; margin-top: 6px; font-family: var(--font-mono); } .sim-trophy-cell.sim-trophy-got .sim-trophy-cell-name { color: #ffd700; } /* === Trophy ノード（コネクタなし） === */ .node-trophy { min-width: 220px; max-width: 260px; } .trophy-hint { margin-top: 6px; font-size: 10px; opacity: 0.6; line-height: 1.4; padding: 4px 6px; background: rgba(255,215,0,0.08); border-radius: 4px; border-left: 2px solid rgba(255,215,0,0.5); } /* === UI Preview: Trophy 管理ビュー === */ .node-ui:has(.ui-node-trophy-mgmt) { min-width: 320px; } .ui-node-trophy-mgmt .ui-node-sec-label { display: flex; align-items: center; justify-content: space-between; } .ui-trophy-mgmt-progress { font-size: 10px; opacity: 0.7; padding: 2px 6px; background: rgba(255,215,0,0.15); color: #ffd700; border-radius: 3px; } .ui-trophy-mgmt-list { max-height: 280px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; margin-top: 6px; } .ui-trophy-mgmt-row { display: flex; align-items: flex-start; gap: 8px; padding: 6px 8px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 4px; font-size: 11px; cursor: pointer; transition: background 0.15s, border-color 0.15s; } .ui-trophy-mgmt-row:hover { background: rgba(255,215,0,0.08); border-color: rgba(255,215,0,0.4); } .ui-trophy-mgmt-row.ui-trophy-mgmt-got { background: rgba(255,215,0,0.12); border-color: rgba(255,215,0,0.5); } .ui-trophy-mgmt-icon { font-size: 20px; flex-shrink: 0; line-height: 1; padding-top: 1px; } .ui-trophy-mgmt-main { flex: 1; min-width: 0; } .ui-trophy-mgmt-name { font-weight: bold; color: #ddd; font-size: 12px; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ui-trophy-mgmt-got .ui-trophy-mgmt-name { color: #ffd700; } .ui-trophy-mgmt-check { color: #50fa7b; } .ui-trophy-mgmt-meta { display: flex; flex-direction: column; gap: 1px; font-size: 10px; opacity: 0.75; } .ui-trophy-mgmt-from { color: #8be9fd; } .ui-trophy-mgmt-cond { color: #ffb86c; } .ui-trophy-mgmt-hint { font-size: 10px; opacity: 0.6; padding: 4px; text-align: center; font-style: italic; } /* === TimerAssetCustom ノード === */ /* TimerAsset: ピーチオレンジを Asset 系の代表色として保持（Gallery は #ffa94d へ分離） */ .node-timer-asset { border-color: var(--cat-asset) !important; min-width: 220px; max-width: 260px; } .timer-asset-header { background: rgba(247,178,103,0.18); color: var(--cat-asset); } .btn-timer-asset { color: var(--cat-asset) !important; border-color: rgba(247,178,103,0.5) !important; } .btn-timer-asset:hover { background: rgba(247,178,103,0.12) !important; } .tasset-anim-row { display: flex; gap: 10px; align-items: center; margin: 4px 0; padding: 6px; background: rgba(255,255,255,0.03); border-radius: 4px; } .tasset-anim-row label { display: flex; align-items: center; gap: 4px; font-size: 11px; } .tasset-loop { cursor: pointer; } .tasset-loop input { cursor: pointer; } /* === UI Preview: Asset 管理ビュー === */ .node-ui:has(.ui-node-asset) { min-width: 320px; } .ui-node-asset .ui-node-sec-label { display: flex; align-items: center; justify-content: space-between; } .ui-asset-mgmt-list { max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; margin-top: 6px; } .ui-asset-mgmt-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 4px; font-size: 11px; cursor: pointer; transition: background 0.15s, border-color 0.15s; } .ui-asset-mgmt-row:hover { background: rgba(247,178,103,0.08); border-color: rgba(247,178,103,0.4); } .ui-asset-mgmt-row.ui-asset-mgmt-active { background: rgba(247,178,103,0.18); border-color: #f7b267; box-shadow: inset 0 0 8px rgba(247,178,103,0.2); } .ui-asset-mgmt-thumb { flex-shrink: 0; width: 40px; height: 40px; background: #1a1a1a; border: 1px solid rgba(255,255,255,0.1); border-radius: 4px; overflow: hidden; display: flex; align-items: center; justify-content: center; } .ui-asset-mgmt-thumb img { width: 100%; height: 100%; object-fit: cover; } .ui-asset-mgmt-noimg { font-size: 18px; opacity: 0.4; } .ui-asset-mgmt-main { flex: 1; min-width: 0; } .ui-asset-mgmt-name { font-weight: bold; color: #ddd; font-size: 12px; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ui-asset-mgmt-row.ui-asset-mgmt-active .ui-asset-mgmt-name { color: #f7b267; } .ui-asset-mgmt-active-badge { font-size: 9px; padding: 1px 4px; border-radius: 3px; background: #50fa7b; color: #1a1a1a; font-weight: bold; letter-spacing: 0.5px; } .ui-asset-mgmt-meta { display: flex; gap: 6px; font-size: 10px; opacity: 0.75; flex-wrap: wrap; } .ui-asset-mgmt-cat { background: rgba(247,178,103,0.2); color: #f7b267; padding: 1px 5px; border-radius: 3px; font-family: var(--font-mono); } .ui-asset-mgmt-anim { background: rgba(80,250,123,0.15); color: #50fa7b; padding: 1px 5px; border-radius: 3px; } .ui-asset-mgmt-id { font-family: var(--font-mono); opacity: 0.5; font-size: 9px; } .ui-asset-timer-link { font-size: 11px; padding: 4px 8px; margin: 4px 0; background: rgba(189,147,249,0.12); color: #bd93f9; border: 1px solid rgba(189,147,249,0.3); border-radius: 4px; text-align: center; } /* === シミュ：時間経過アセット選択画面 === */ .sim-tasset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; padding: 12px; } .sim-tasset-cell { background: #1a1a1a; border: 1px solid #333; border-radius: 8px; padding: 8px; cursor: pointer; transition: border-color 0.15s, background 0.15s; position: relative; } .sim-tasset-cell:hover { border-color: rgba(247,178,103,0.5); background: rgba(247,178,103,0.05); } .sim-tasset-cell.sim-tasset-active { border-color: #f7b267; background: rgba(247,178,103,0.12); box-shadow: 0 0 12px rgba(247,178,103,0.3); } .sim-tasset-cell img { width: 100%; height: 100px; object-fit: contain; } .sim-tasset-noimg { height: 100px; display: flex; align-items: center; justify-content: center; color: #555; font-size: 11px; background: #222; } .sim-tasset-meta { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 11px; } .sim-tasset-mode { background: rgba(247,178,103,0.2); color: #f7b267; padding: 1px 5px; border-radius: 3px; font-size: 9px; font-family: var(--font-mono); } .sim-tasset-name { color: #ddd; flex: 1; } .sim-tasset-check { position: absolute; top: 4px; right: 4px; background: #50fa7b; color: #1a1a1a; font-size: 9px; font-weight: bold; padding: 2px 5px; border-radius: 3px; } /* === SceneRecollection === */ .node-scene-recall { border-color: var(--cat-scene) !important; min-width: 200px; } .scene-recall-header { background: rgba(139,233,253,0.18); color: #8be9fd; } .btn-scene-recall { color: var(--cat-scene) !important; border-color: rgba(168,216,232,0.5) !important; } .btn-scene-recall:hover { background: rgba(168,216,232,0.12) !important; } /* === MiniGame === */ .node-minigame { border-color: var(--cat-minigame) !important; min-width: 200px; } .minigame-header { background: rgba(80,250,123,0.18); color: #50fa7b; } .btn-minigame { color: var(--cat-minigame) !important; border-color: rgba(130,201,137,0.5) !important; } .btn-minigame:hover { background: rgba(130,201,137,0.12) !important; } /* === シミュレーション側 === */ .sim-pose-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; padding: 8px; } .sim-pose-cell { background: #222; border: 1px solid #333; border-radius: 6px; padding: 6px; text-align: center; cursor: pointer; } .sim-pose-cell img { width: 100%; height: 140px; object-fit: contain; } .sim-pose-noimg { height: 140px; display: flex; align-items: center; justify-content: center; color: #555; } .sim-pose-name { display: block; margin-top: 4px; font-size: 12px; color: #ddd; } .sim-custom-desc { padding: 12px; color: #ccc; line-height: 1.5; white-space: pre-wrap; } .sim-minigame-placeholder { padding: 20px; text-align: center; color: #ccc; border: 2px dashed rgba(80,250,123,0.4); border-radius: 8px; margin: 16px; } .sim-minigame-icon { font-size: 48px; margin-bottom: 8px; } .sim-minigame-desc { font-size: 14px; line-height: 1.5; margin-bottom: 12px; } .sim-minigame-note { font-size: 11px; opacity: 0.5; font-style: italic; } .config-item { display: flex; align-items: center; gap: 5px; padding: 4px 8px; margin-top: 3px; background: rgba(116,235,213,0.04); border-radius: 5px; border: 1px solid rgba(116,235,213,0.10); } .config-item-icon { font-size: 11px; flex-shrink: 0; line-height: 1; } .config-item-name { flex: 1; font-size: 10px; font-family: var(--font-ui); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } /* ウィジェット種別バッジ */ .config-item-widget-badge { font-size: 8px; font-family: var(--font-ui); font-weight: 700; letter-spacing: 0.04em; padding: 1px 5px; border-radius: 8px; border: 1px solid; flex-shrink: 0; } .config-widget-slider { color: #7ee8a2; border-color: rgba(126,232,162,0.4); background: rgba(126,232,162,0.08); } .config-widget-toggle { color: #4a9eff; border-color: rgba(74,158,255,0.4); background: rgba(74,158,255,0.08); } .config-widget-select { color: #f9d423; border-color: rgba(249,212,35,0.4); background: rgba(249,212,35,0.08); } .config-item-del { font-size: 10px; padding: 0 3px; background: transparent; border: none; color: var(--text-muted); cursor: pointer; flex-shrink: 0; line-height: 1; } .config-item-del:hover { color: #ff6b6b; } /* エディタ: 設定追加プリセット選択行 */ .config-preset-add-row { display: flex; gap: 6px; align-items: center; margin-top: 6px; } .config-preset-sel { flex: 1; font-family: var(--font-ui); font-size: 11px; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 5px; padding: 4px 6px; cursor: pointer; min-width: 0; } .config-preset-sel:focus { outline: none; border-color: #74ebd5; } /* エディタ: 設定アイテム wrap（行 + 選択肢行をまとめる） */ .config-editor-item-wrap { margin-bottom: 6px; } /* エディタ: 設定アイテム行 */ .config-editor-item-row { display: flex; gap: 6px; align-items: center; margin-bottom: 2px; } /* select 型：選択肢入力行 */ .config-options-row { display: flex; align-items: center; gap: 6px; padding: 3px 4px 3px 8px; background: rgba(249,212,35,0.06); border-left: 2px solid #f9d42366; border-radius: 0 4px 4px 0; margin-bottom: 2px; } .config-options-label { font-size: 9px; color: #f9d423aa; white-space: nowrap; flex-shrink: 0; } .config-options-inp { flex: 1; font-size: 10px; font-family: var(--font-ui); background: var(--surface-2); color: var(--text); border: 1px solid #f9d42344; border-radius: 4px; padding: 2px 5px; min-width: 0; } .config-options-inp:focus { outline: none; border-color: #f9d423; } .config-editor-type-sel { font-size: 10px; font-family: var(--font-ui); background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 3px 4px; flex: 0 0 120px; cursor: pointer; } .config-editor-label-inp { flex: 1; font-size: 11px; font-family: var(--font-ui); background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 3px 6px; min-width: 0; } .config-editor-widget-pill { font-size: 8px; font-weight: 700; padding: 2px 6px; border-radius: 8px; border: 1px solid; flex-shrink: 0; } .config-add-btn { display: block; width: calc(100% - 16px); margin: 6px 8px 4px; padding: 3px 0; font-size: 9px; font-family: var(--font-ui); font-weight: 700; color: #74ebd5; background: rgba(116,235,213,0.07); border: 1px dashed rgba(116,235,213,0.3); border-radius: 4px; cursor: pointer; } .config-add-btn:hover { background: rgba(116,235,213,0.14); } /* シミュレーション — タイトル画面ボタン */ .sim-title-btn { display: block; width: 100%; padding: 10px 20px; margin: 5px 0; font-size: 14px; font-family: var(--font-ui); font-weight: 700; letter-spacing: 1.5px; color: #f9d423; background: rgba(249,212,35,0.08); border: 1.5px solid rgba(249,212,35,0.35); border-radius: 6px; cursor: pointer; transition: background 0.15s, border-color 0.15s; } .sim-title-btn:hover:not(:disabled) { background: rgba(249,212,35,0.18); border-color: rgba(249,212,35,0.7); } .sim-title-btn:disabled { opacity: 0.35; cursor: default; } /* シミュレーション — コンフィグ設定リスト */ .sim-config-list { display: flex; flex-direction: column; gap: 8px; padding: 4px 0; } .sim-config-row { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text); } .sim-config-row-label { flex: 1; color: var(--text-muted); font-size: 11px; } .sim-config-row input[type="range"] { flex: 1.5; accent-color: #74ebd5; } .sim-config-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: #74ebd5; } /* フルスクリーン ON 時の画面サイズ行グレーアウト */ .sim-config-row.sim-cfg-disabled { opacity: 0.35; pointer-events: none; } .sim-config-row.sim-cfg-disabled select { cursor: not-allowed; } .sim-config-type-badge { font-size: 8px; font-family: var(--font-ui); font-weight: 700; color: #74ebd5; background: rgba(116,235,213,0.12); border: 1px solid rgba(116,235,213,0.3); border-radius: 3px; padding: 1px 4px; flex-shrink: 0; } /* ── UIウィジェットパネル（シミュレーション画面右側） ─── */ #sim-ui-widgets-panel { flex-shrink: 0; background: rgba(9,9,18,0.88); border-bottom: 1px solid rgba(74,158,255,0.18); display: flex; flex-direction: row; align-items: center; gap: 6px; overflow-x: auto; overflow-y: hidden; z-index: 10; padding: 6px 10px; flex-wrap: wrap; } .sim-widget-section { padding: 6px 10px; border-right: 1px solid rgba(255,255,255,0.07); border-bottom: none; display: flex; flex-direction: column; gap: 4px; min-width: 0; } .sim-widget-section:last-child { border-right: none; } .sim-widget-title { font-size: 9px; font-weight: 700; letter-spacing: 1px; color: rgba(74,158,255,0.7); text-transform: uppercase; margin-bottom: 2px; } /* Timer ウィジェット（Link で同期実行中） */ .sim-widget-timer .sim-widget-title { color: #cc44aa; } .sim-widget-timer-value { font-family: var(--font-mono); font-size: 18px; font-weight: 700; color: #ffe; letter-spacing: 1.5px; background: rgba(204,68,170,0.16); border: 1px solid rgba(204,68,170,0.4); padding: 4px 12px; border-radius: 5px; } .sim-widget-timer-warn { color: #ff6b6b !important; background: rgba(255,107,107,0.18) !important; border-color: rgba(255,107,107,0.55) !important; animation: sim-widget-timer-pulse 0.6s ease-in-out infinite; } @keyframes sim-widget-timer-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } } /* シーン名バナー */ .sim-scene-banner-widget { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 5px; background: rgba(255,255,255,0.04); } .sim-scene-banner-adv { border-left: 3px solid var(--accent); } .sim-scene-banner-ingame { border-left: 3px solid #4a9eff; } .sim-scene-banner-outgame{ border-left: 3px solid #ffb86c; } .sim-scene-banner-type { font-size: 8px; font-weight: 700; letter-spacing: 0.5px; color: rgba(255,255,255,0.4); flex-shrink: 0; } .sim-scene-banner-heading { font-size: 11px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* フラグバッジ */ .sim-flag-badges { display: flex; flex-wrap: wrap; gap: 4px; } .sim-flag-badge { font-size: 9px; padding: 2px 6px; border-radius: 10px; font-weight: 700; letter-spacing: 0.3px; transition: all 0.2s; } .sim-flag-on { background: rgba(126,232,162,0.2); color: #7ee8a2; border: 1px solid rgba(126,232,162,0.4); } .sim-flag-off { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.3); border: 1px solid rgba(255,255,255,0.1); } /* イベントログ */ .sim-event-log { display: flex; flex-direction: column; gap: 2px; } .sim-log-entry { display: flex; align-items: center; gap: 5px; padding: 3px 6px; border-radius: 3px; background: rgba(255,255,255,0.03); border-left: 2px solid transparent; } .sim-log-adv { border-left-color: rgba(126,232,162,0.5); } .sim-log-ingame { border-left-color: rgba(74,158,255,0.5); } .sim-log-outgame { border-left-color: rgba(255,184,108,0.5); } .sim-log-step { font-size: 8px; font-family: var(--font-mono); color: rgba(255,255,255,0.3); flex-shrink: 0; } .sim-log-heading { font-size: 10px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sim-log-empty { font-size: 10px; color: rgba(255,255,255,0.2); text-align: center; padding: 4px; } /* 選択履歴 */ .sim-choice-hist { display: flex; flex-direction: column; gap: 2px; } .sim-choice-hist-entry { display: flex; align-items: center; gap: 5px; padding: 3px 6px; border-radius: 3px; background: rgba(249,212,35,0.05); border-left: 2px solid rgba(249,212,35,0.3); } .sim-choice-hist-step { font-size: 8px; font-family: var(--font-mono); color: rgba(249,212,35,0.5); flex-shrink: 0; } .sim-choice-hist-text { font-size: 10px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* カウンター */ .sim-counters { display: flex; flex-direction: column; gap: 2px; } .sim-counter-entry { display: flex; justify-content: space-between; align-items: center; padding: 3px 6px; border-radius: 3px; background: rgba(255,255,255,0.03); } .sim-counter-label { font-size: 10px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; } .sim-counter-val { font-size: 11px; font-weight: 700; font-family: var(--font-mono); color: #4a9eff; flex-shrink: 0; margin-left: 4px; } /* トースト通知 */ #sim-toast { position: absolute; top: 54px; left: 50%; transform: translateX(-50%) translateY(-8px); background: rgba(9,9,18,0.92); border: 1px solid rgba(74,158,255,0.5); border-radius: 20px; padding: 5px 16px; font-size: 12px; font-weight: 600; color: #4a9eff; pointer-events: none; opacity: 0; transition: opacity 0.25s, transform 0.25s; z-index: 20; white-space: nowrap; max-width: 60%; overflow: hidden; text-overflow: ellipsis; } #sim-toast.sim-toast-show { opacity: 1; transform: translateX(-50%) translateY(0); } #sim-toast.sim-toast-fade { opacity: 0; transform: translateX(-50%) translateY(-4px); transition: opacity 0.5s, transform 0.5s; } /* ── トロフィーウィジェット ─────────────────────────────── */ .sim-trophy-list { display: flex; flex-direction: column; gap: 3px; } .sim-trophy-item { display: flex; align-items: center; gap: 6px; padding: 4px 7px; border-radius: 5px; transition: background 0.2s; } .sim-trophy-unlocked { background: rgba(249,212,35,0.1); border: 1px solid rgba(249,212,35,0.3); } .sim-trophy-locked { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); opacity: 0.55; } .sim-trophy-icon { font-size: 14px; line-height: 1; flex-shrink: 0; } .sim-trophy-name { font-size: 10px; font-weight: 600; color: var(--text); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sim-trophy-check { font-size: 11px; font-weight: 700; color: #f9d423; flex-shrink: 0; } .sim-trophy-lock { font-size: 10px; opacity: 0.4; flex-shrink: 0; } /* ── トロフィーエディター ────────────────────────────────── */ .ue-trophy-row { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 6px; padding: 6px 8px; margin-bottom: 6px; } .ue-trophy-row-top { display: flex; align-items: center; gap: 5px; margin-bottom: 5px; } .ue-trophy-icon { width: 32px !important; text-align: center; font-size: 14px; padding: 2px 4px !important; flex-shrink: 0; } .ue-trophy-name { flex: 1; } .ue-trophy-del { background: none; border: 1px solid rgba(255,107,107,0.3); color: #ff6b6b; border-radius: 4px; cursor: pointer; padding: 1px 6px; font-size: 11px; flex-shrink: 0; } .ue-trophy-del:hover { background: rgba(255,107,107,0.12); } .ue-trophy-cond { display: flex; align-items: center; gap: 4px; } .ue-trophy-cond select, .ue-trophy-cond input { font-size: 10px; padding: 2px 4px; flex-shrink: 0; } .ue-trophy-param { flex: 1; min-width: 0; } .ue-trophy-op { width: 48px; } .ue-trophy-empty { font-size: 11px; color: rgba(255,255,255,0.25); text-align: center; padding: 8px; } /* ── 付箋一覧ボタン ─────────────────────────────────────────── */ .btn-sticky-list { background: rgba(254,243,195,0.1); border-color: rgba(254,243,195,0.3); color: #fef3c7; font-size: 11px; padding: 4px 10px; white-space: nowrap; } .btn-sticky-list:hover { background: rgba(254,243,195,0.2); border-color: #fef3c7; } /* ── 付箋一覧パネル ─────────────────────────────────────────── */ #sticky-list-panel { position: fixed; /* toolbar の overflow:hidden を抜けるため fixed */ top: 0; /* JS で上書き */ left: 0; /* JS で上書き */ width: 240px; max-height: 360px; overflow-y: auto; background: #1a1a2e; border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; padding: 4px; box-shadow: 0 10px 32px rgba(0,0,0,0.65); z-index: 8000; } .sticky-panel-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: none; border: none; border-radius: 6px; padding: 7px 10px; cursor: pointer; transition: background 0.1s; color: var(--text); } .sticky-panel-item:hover { background: rgba(255,243,150,0.08); } .sticky-panel-icon { font-size: 14px; flex-shrink: 0; } .sticky-panel-info { flex: 1; min-width: 0; } .sticky-panel-heading { font-size: 10px; font-weight: 700; color: rgba(255,255,255,0.5); margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sticky-panel-preview { font-size: 11px; color: #fef9c3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sticky-panel-empty { font-size: 11px; color: rgba(255,255,255,0.3); text-align: center; padding: 14px; } /* ── ノード右クリック コンテキストメニュー ──────────────────── */ #node-context-menu { display: none; position: fixed; z-index: 9000; background: #1a1a2e; border: 1px solid rgba(255,255,255,0.12); border-radius: 7px; padding: 4px; box-shadow: 0 8px 28px rgba(0,0,0,0.6); min-width: 150px; } .ctx-menu-item { display: block; width: 100%; text-align: left; background: none; border: none; color: var(--text); font-size: 12px; padding: 6px 12px; border-radius: 5px; cursor: pointer; transition: background 0.1s; } .ctx-menu-item:hover { background: rgba(255,255,255,0.08); } /* ── BG右クリック コンテキストメニュー ──────────────────────── */ #bg-context-menu { position: fixed; z-index: 9000; background: #1a1a2e; border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; padding: 5px; box-shadow: 0 10px 32px rgba(0,0,0,0.65); min-width: 170px; user-select: none; } .bgctx-cat-head { font-size: 9px; font-weight: 700; font-family: var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 10px 3px; margin-top: 3px; border-radius: 4px 4px 0 0; } .bgctx-cat-head:first-child { margin-top: 0; } .bgctx-cat-meta { color: #aaaaaa; } .bgctx-cat-scenario { color: var(--accent); } .bgctx-cat-logic { color: #ff9f7f; } .bgctx-cat-ui { color: #aaaaaa; } .bgctx-cat-system { color: #cc44aa; } .bgctx-cat-other { color: var(--text-muted); } .bgctx-item { display: block; width: 100%; text-align: left; background: none; border: none; color: var(--text); font-size: 12px; padding: 5px 12px; border-radius: 5px; cursor: pointer; transition: background 0.1s; } .bgctx-item:hover { background: rgba(255,255,255,0.09); } /* ── 付箋 ───────────────────────────────────────────────────── */ .node-sticky { position: absolute; left: -1px; /* ノードのborder左に合わせる */ right: -1px; /* ノードのborder右に合わせる */ bottom: 100%; /* ノード上端の真上 */ margin-bottom: -1px; /* 1px だけフレームに重ねる */ background: #fef9c3; border: 1px solid rgba(0,0,0,0.13); border-bottom: none; /* ノードフレームと接する辺は消す */ border-radius: 5px 5px 0 0; padding: 5px 24px 5px 8px; z-index: 15; /* ノード(z-index:10)より前面に */ } /* 表示モード（通常時） */ .node-sticky-display { width: 100%; height: 30px; font-size: 11px; line-height: 15px; color: #1a1200; font-family: var(--font-ui); overflow: hidden; word-break: break-all; white-space: pre-wrap; cursor: text; } .node-sticky-placeholder { color: rgba(80,60,0,0.35); } /* 編集モード（クリック後） */ /* .node textarea の詳細度(0,1,1)に勝つため .node-sticky を前置して(0,2,0) */ .node-sticky .node-sticky-text { display: block; width: 100%; height: 30px; padding: 0; margin: 0; background: transparent; border: none !important; outline: none !important; resize: none; -webkit-appearance: none; appearance: none; color: #1a1200; font-size: 11px; line-height: 15px; font-family: var(--font-ui); overflow: hidden; box-sizing: content-box; } .node-sticky-close { position: absolute; top: 3px; right: 4px; background: none; border: none; color: rgba(80,60,0,0.45); font-size: 12px; cursor: pointer; padding: 0 3px; line-height: 1; border-radius: 3px; } .node-sticky-close:hover { background: rgba(0,0,0,0.08); color: rgba(80,60,0,0.8); } /* ── サイドエディタ内 付箋エディターセクション ─────────────── */ .sticky-editor-divider { margin-top: 4px; } .sticky-editor-section { display: flex; flex-direction: column; gap: 8px; } .sticky-editor-label-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .sticky-editor-label { font-size: 11px; font-weight: 700; color: #c8a84b; /* 付箋カラー */ letter-spacing: 0.5px; } .sticky-editor-textarea { width: 100%; background: #fef9c3; /* 付箋の黄色 */ color: #1a1200; border: 1px solid rgba(0,0,0,0.15); border-radius: 5px; font-family: var(--font-ui); font-size: 12px; line-height: 1.6; padding: 6px 8px; resize: vertical; min-height: 64px; box-sizing: border-box; transition: border-color 0.15s; } .sticky-editor-textarea:focus { outline: none; border-color: #c8a84b; } .sticky-editor-textarea::placeholder { color: rgba(80,60,0,0.35); } .sticky-editor-add-btn { width: 100%; padding: 7px 0; background: rgba(254,249,195,0.12); border: 1px dashed rgba(200,168,75,0.5); border-radius: 5px; color: #c8a84b; font-size: 12px; font-family: var(--font-ui); cursor: pointer; transition: background 0.15s, border-color 0.15s; } .sticky-editor-add-btn:hover { background: rgba(254,249,195,0.22); border-color: rgba(200,168,75,0.9); } .sticky-editor-remove-btn { font-size: 10px; font-family: var(--font-ui); padding: 2px 7px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 4px; color: var(--text-muted); cursor: pointer; transition: background 0.15s, color 0.15s; white-space: nowrap; } .sticky-editor-remove-btn:hover { background: rgba(255,80,80,0.15); border-color: rgba(255,80,80,0.4); color: #ff6b6b; } /* ── ソートハンドル（ノード内アイテムのドラッグ並べ替え） ───── */ .sort-handle { cursor: grab; color: var(--text-muted); font-size: 13px; padding: 2px 4px; user-select: none; opacity: 0.4; flex-shrink: 0; line-height: 1; display: inline-flex; align-items: center; } .sort-handle:hover { opacity: 1; } .sort-handle:active { cursor: grabbing; } .sort-dragging { opacity: 0.45; outline: 1.5px dashed var(--accent); border-radius: 4px; } /* ═══════════════════════════════════════════════════════════ セーブシステム — ノードのセーブポイントボタン ═══════════════════════════════════════════════════════════ */ .node-savepoint-btn { position: absolute; top: 4px; right: 26px; width: 18px; height: 18px; padding: 0; font-size: 10px; line-height: 18px; text-align: center; background: transparent; border: 1px solid transparent; border-radius: 3px; cursor: pointer; opacity: 0.25; transition: opacity 0.15s, background 0.15s, border-color 0.15s; z-index: 3; color: var(--text-main); } .node-savepoint-btn:hover { opacity: 0.75; } .node-savepoint-btn.node-savepoint-active { opacity: 1; background: rgba(99,230,190,0.18); border-color: rgba(99,230,190,0.55); } /* セーブポイント カスタムツールチップ */ #_sp-tooltip { display: none; position: fixed; background: #1a1a2e; border: 1px solid rgba(99,230,190,0.35); border-radius: 7px; padding: 7px 11px; font-size: 10px; font-family: var(--font-ui); color: var(--text-main); line-height: 1.65; white-space: pre-line; max-width: 220px; z-index: 99999; pointer-events: none; transform: translateX(-50%) translateY(-100%); box-shadow: 0 4px 14px rgba(0,0,0,0.45); } #_sp-tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: rgba(99,230,190,0.35); } /* ═══════════════════════════════════════════════════════════ セーブシステム — Config ノード内 Save System セクション ═══════════════════════════════════════════════════════════ */ .config-save-section { border-top: 1px solid rgba(255,255,255,0.07); margin-top: 6px; } .config-save-header { display: flex; align-items: center; gap: 5px; padding: 5px 8px; cursor: pointer; font-size: 10px; font-weight: 700; color: var(--text-muted); user-select: none; transition: color 0.15s; width: 100%; background: none; border: none; text-align: left; font-family: var(--font-ui); } .config-save-header:hover { color: #63e6be; } .config-save-title { flex: 1; } .config-save-arrow { font-size: 9px; } .config-save-body { padding: 0 8px 8px; } .config-save-row { display: flex; align-items: center; justify-content: space-between; font-size: 10px; color: var(--text-muted); padding: 3px 0; gap: 6px; } .config-save-row span { flex: 1; } .config-save-select { background: var(--node-bg); border: 1px solid rgba(255,255,255,0.12); color: var(--text-main); font-size: 10px; padding: 2px 4px; border-radius: 3px; width: 100%; min-width: 0; } /* 「▼ラベル / [選択肢]」の2段組レイアウト */ .config-save-row-stacked { flex-direction: column !important; align-items: stretch !important; gap: 3px !important; } .config-save-row-stacked > span { flex: 0 0 auto !important; font-weight: 600; color: var(--text-main); } .config-save-row-stacked > span::before { content: '▼ '; color: var(--text-muted); font-size: 9px; } /* SavePoint ノード */ .node.node-savepoint { border-color: var(--cat-savepoint) !important; background: rgba(125,207,182,0.05); } .node-savepoint .node-header { color: var(--cat-savepoint); background: rgba(125,207,182,0.10); border-bottom: 1px solid rgba(125,207,182,0.35); } .node-savepoint-body { padding: 10px; text-align: center; } .savepoint-icon { font-size: 24px; line-height: 1.2; margin-bottom: 6px; } .savepoint-settings { display: flex; flex-direction: column; gap: 3px; margin: 0 6px; } .savepoint-setting { display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 6px; padding: 3px 8px; font-size: 10px; font-family: var(--font-mono); border-radius: 4px; border: 1px solid transparent; } .savepoint-setting.on { background: rgba(116,235,213,0.12); border-color: rgba(116,235,213,0.5); color: #74ebd5; } .savepoint-setting.off { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.10); color: rgba(255,255,255,0.4); } .savepoint-setting .sp-icon { text-align: center; } .savepoint-setting .sp-label { text-align: left; } .savepoint-setting .sp-state { font-size: 9px; font-weight: 700; padding: 0 6px; border-radius: 8px; } .savepoint-setting.on .sp-state { background: rgba(116,235,213,0.25); color: #fff; } .savepoint-setting.off .sp-state { background: rgba(255,255,255,0.08); } .savepoint-msg { margin: 8px 6px 0; padding: 5px 8px; font-size: 10px; color: rgba(255,255,255,0.85); background: rgba(116,235,213,0.08); border-left: 3px solid rgba(116,235,213,0.6); border-radius: 3px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .savepoint-warning { margin: 8px 6px 0; padding: 4px 8px; font-size: 9px; color: var(--state-progress); background: rgba(255,212,121,0.10); border: 1px dashed rgba(255,212,121,0.4); border-radius: 3px; text-align: center; } /* SavePoint プロンプトオーバーレイ */ #sim-savepoint-prompt { position: absolute; inset: 0; background: rgba(0,0,0,0.7); display: none; align-items: center; justify-content: center; z-index: 50; } .sp-prompt-box { background: var(--surface, #1a1a22); border: 1px solid #74ebd5; border-radius: 8px; padding: 24px 32px; min-width: 320px; max-width: 80vw; text-align: center; box-shadow: 0 12px 48px rgba(0,0,0,0.7); } .sp-prompt-msg { font-size: 14px; color: var(--text); margin-bottom: 18px; line-height: 1.5; } .sp-prompt-actions { display: flex; gap: 10px; justify-content: center; } .sp-prompt-btn { padding: 8px 16px; font-size: 12px; font-weight: 700; border-radius: 5px; cursor: pointer; } .sp-prompt-yes { background: rgba(116,235,213,0.20); color: #74ebd5; border: 1px solid #74ebd5; } .sp-prompt-yes:hover { background: rgba(116,235,213,0.35); } .sp-prompt-no { background: transparent; color: var(--text-muted); border: 1px solid var(--border); } .sp-prompt-no:hover { background: rgba(255,255,255,0.08); color: var(--text); } /* ノードを線上にドラッグしたときの挿入プレビュー */ path.line-insert-preview { stroke-dasharray: 8 4 !important; stroke-width: 4 !important; filter: drop-shadow(0 0 6px currentColor); animation: line-insert-pulse 0.6s ease-in-out infinite alternate; } @keyframes line-insert-pulse { from { opacity: 0.55; } to { opacity: 1; } } /* ノードヘッダー: カスタム名ラッパー */ .node-header .node-custom-label, .node-header .node-custom-label-close { color: inherit; font-weight: 700; } .node-header .node-custom-label { margin-right: 1px; } .node-header .node-custom-label-close { margin-left: 1px; opacity: 0.7; font-size: 0.9em; } /* Dock 追加ピッカーでマウスオーバー中のノードを発光 */ .node.node-pick-highlight { box-shadow: 0 0 0 3px #ffd479, 0 0 24px 6px rgba(255,212,121,0.7) !important; animation: node-pick-pulse 0.7s ease-in-out infinite alternate; z-index: 30 !important; } @keyframes node-pick-pulse { from { filter: brightness(1.0); } to { filter: brightness(1.5); } } /* インサート可能な瞬間 — ノード本体に緑枠フィードバック */ .node.node-insert-ready { box-shadow: 0 0 0 3px #7ee8a2, 0 0 18px 4px rgba(126,232,162,0.55) !important; transition: box-shadow 0.1s; } .config-save-num { width: 48px; background: var(--node-bg); border: 1px solid rgba(255,255,255,0.12); color: var(--text-main); font-size: 10px; padding: 2px 4px; border-radius: 3px; text-align: right; } .config-save-opts { border-left: 2px solid rgba(99,230,190,0.22); padding-left: 6px; margin-top: 2px; } /* ═══════════════════════════════════════════════════════════ セーブシステム — シミュレーター内 セーブ/ロードパネル ═══════════════════════════════════════════════════════════ */ #sim-save-panel { position: absolute; inset: 0; background: rgba(0,0,0,0.72); display: flex; align-items: center; justify-content: center; z-index: 80; } .sim-save-panel-inner { background: var(--panel-bg, #1e1e2e); border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; width: min(400px, 92vw); /* 画面内に必ず収める：上下に余白を確保 */ max-height: min(80vh, calc(100% - 40px)); display: flex; flex-direction: column; overflow: hidden; } .sim-save-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px 10px; border-bottom: 1px solid rgba(255,255,255,0.08); flex-shrink: 0; /* ヘッダーは縮まない */ } .sim-save-panel-title { font-size: 13px; font-weight: 700; color: #63e6be; } .sim-save-close-btn { display: flex; align-items: center; gap: 4px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14); border-radius: 5px; color: var(--text-muted); cursor: pointer; font-size: 11px; font-family: var(--font-ui); padding: 4px 10px; white-space: nowrap; transition: background 0.15s, color 0.15s, border-color 0.15s; } .sim-save-close-btn:hover { background: rgba(255,80,80,0.15); border-color: rgba(255,80,80,0.4); color: #ff6b6b; } /* スロット一覧 — flex: 1 + min-height: 0 でスクロール有効 */ .sim-save-slots { padding: 8px 12px 12px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; flex: 1; min-height: 0; /* flex コンテナ内で overflow:auto を効かせるために必須 */ } .sim-save-slot { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; border-radius: 7px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.04); gap: 8px; } .sim-save-slot.has-data { border-color: rgba(99,230,190,0.2); } .sim-save-slot-auto { border-style: dashed; } .sim-save-slot-left { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .sim-save-slot-name { font-size: 11px; font-weight: 700; color: var(--text-main); } .sim-save-slot-node { font-size: 10px; color: #63e6be; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sim-save-slot-date { font-size: 9px; color: var(--text-muted); } .sim-save-slot-empty { font-size: 10px; color: rgba(255,255,255,0.25); font-style: italic; } .sim-save-slot-btns { display: flex; gap: 4px; flex-shrink: 0; } .sim-save-action-btn { padding: 4px 10px; background: rgba(99,230,190,0.15); border: 1px solid rgba(99,230,190,0.4); color: #63e6be; font-size: 10px; border-radius: 4px; cursor: pointer; white-space: nowrap; } .sim-save-action-btn:hover { background: rgba(99,230,190,0.28); } .sim-save-del-btn { padding: 4px 7px; background: transparent; border: 1px solid rgba(255,255,255,0.1); color: var(--text-muted); font-size: 10px; border-radius: 4px; cursor: pointer; } .sim-save-del-btn:hover { border-color: #ff6b6b; color: #ff6b6b; } /* ── シム ナビバー セーブ/ロードボタン ─────────────────────── */ .sim-nav-save-btn, .sim-nav-load-btn { padding: 4px 9px; font-size: 13px; } /* ═══════════════════════════════════════════════════════════ セーブシステム — シミュレーター開始画面（つづきから） ═══════════════════════════════════════════════════════════ */ #sim-start-screen { position: absolute; inset: 0; background: rgba(0,0,0,0.80); display: flex; align-items: center; justify-content: center; z-index: 90; } .sim-start-inner { display: flex; flex-direction: column; align-items: center; gap: 14px; width: min(320px, 88vw); } .sim-start-title { font-size: 14px; font-weight: 700; color: rgba(255,255,255,0.6); text-transform: uppercase; letter-spacing: 0.1em; } .sim-start-btn { width: 100%; padding: 12px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; transition: background 0.15s, border-color 0.15s; } .sim-start-new { background: rgba(99,230,190,0.15); border: 1px solid rgba(99,230,190,0.45); color: #63e6be; } .sim-start-new:hover { background: rgba(99,230,190,0.28); } .sim-start-continue { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.18); color: var(--text-main); } .sim-start-continue:hover { background: rgba(255,255,255,0.12); } .sim-start-continue-info { font-size: 9px; color: var(--text-muted); font-weight: 400; } /* ═══════════════════════════════════════════════════════════ セーブシステム — トースト通知 ═══════════════════════════════════════════════════════════ */ #sim-toast { position: absolute; bottom: 72px; left: 50%; transform: translateX(-50%); background: rgba(30,30,46,0.92); border: 1px solid rgba(99,230,190,0.4); color: #63e6be; font-size: 12px; padding: 7px 18px; border-radius: 20px; pointer-events: none; z-index: 100; white-space: nowrap; transition: opacity 0.4s; } .sim-toast-hide { opacity: 0 !important; } /* ── 付箋全文ポップアップ ───────────────────────────────────── */ #sticky-popup { display: none; position: fixed; z-index: 9500; width: 240px; max-height: 240px; overflow-y: auto; background: #fef9c3; border: 1px solid rgba(0,0,0,0.15); border-radius: 7px; padding: 8px 10px; font-size: 11px; line-height: 1.6; color: #3b2e00; font-family: var(--font-ui); white-space: pre-wrap; word-break: break-word; box-shadow: 0 6px 20px rgba(0,0,0,0.35); pointer-events: none; } /* ================================================================ SpotDiff (間違い探し) ノード ================================================================ */ .node-spotdiff { border-color: var(--cat-spotdiff) !important; width: 280px; } .node-spotdiff .node-header { color: var(--cat-spotdiff); border-bottom-color: rgba(255,122,162,0.25); } .btn-spotdiff { background: rgba(232,138,169,0.12); border-color: rgba(232,138,169,0.45); color: var(--cat-spotdiff); } .btn-spotdiff:hover { background: rgba(232,138,169,0.22); border-color: var(--cat-spotdiff); color: var(--cat-spotdiff); } .spotdiff-thumb-wrap { display: flex; gap: 6px; margin: 8px 0 4px; } .spotdiff-thumb-slot { position: relative; flex: 1; min-width: 0; aspect-ratio: 4 / 3; background: rgba(0,0,0,0.35); border: 1px solid rgba(255,122,162,0.25); border-radius: 6px; overflow: hidden; display: flex; align-items: center; justify-content: center; } .spotdiff-thumb-label { position: absolute; top: 3px; left: 5px; z-index: 2; font-size: 9px; font-weight: 700; color: #ff7aa2; background: rgba(0,0,0,0.55); padding: 1px 5px; border-radius: 3px; letter-spacing: 1px; pointer-events: none; } .spotdiff-thumb-img { width: 100%; height: 100%; object-fit: cover; display: none; } .spotdiff-thumb-empty { display: flex; align-items: center; justify-content: center; font-size: 9px; color: rgba(255,255,255,0.25); font-style: italic; text-align: center; padding: 0 6px; } .spotdiff-thumb-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .spotdiff-meta { font-size: 10px; color: rgba(255,255,255,0.65); text-align: center; padding: 3px 0 5px; letter-spacing: 0.5px; } body.light-mode .spotdiff-meta { color: rgba(0,0,0,0.6); } /* ---- Editor side panel ---- */ .spotdiff-img-picker { position: relative; display: flex; flex-direction: column; gap: 6px; background: rgba(0,0,0,0.2); border: 1px solid rgba(255,122,162,0.2); border-radius: 6px; padding: 8px; } body.light-mode .spotdiff-img-picker { background: rgba(0,0,0,0.04); } .spotdiff-img-preview { width: 100%; max-height: 140px; object-fit: contain; background: #000; border-radius: 4px; display: none; } .spotdiff-img-empty { text-align: center; font-size: 11px; font-style: italic; color: rgba(255,255,255,0.35); padding: 14px; } body.light-mode .spotdiff-img-empty { color: rgba(0,0,0,0.4); } .spotdiff-img-btns { display: flex; gap: 6px; } .spotdiff-img-btns .action-img-btn { flex: 1; } .spotdiff-edit-stage { position: relative; width: 100%; background: #000; border: 1px solid rgba(255,122,162,0.3); border-radius: 6px; overflow: hidden; min-height: 120px; } .spotdiff-edit-img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; } .spotdiff-edit-overlay { position: absolute; inset: 0; cursor: crosshair; } .spotdiff-edit-hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-style: italic; color: rgba(255,255,255,0.4); text-align: center; padding: 24px; } .spotdiff-diff-rect { position: absolute; border: 2px solid #ff5577; background: rgba(255,85,119,0.18); box-sizing: border-box; cursor: default; } .spotdiff-diff-rect-drag { border-style: dashed; background: rgba(255,85,119,0.08); pointer-events: none; } .spotdiff-diff-num { position: absolute; top: -2px; left: -2px; background: #ff5577; color: #fff; font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 3px 0 6px 0; pointer-events: none; } .spotdiff-diff-del { position: absolute; top: -2px; right: -2px; width: 16px; height: 16px; border: none; background: #ff5577; color: #fff; font-size: 11px; line-height: 1; border-radius: 0 0 0 6px; cursor: pointer; padding: 0; } .spotdiff-diff-del:hover { background: #ff2a55; } .spotdiff-diff-list { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; } .spotdiff-diff-list-empty { font-size: 11px; font-style: italic; color: rgba(255,255,255,0.35); padding: 6px; text-align: center; } body.light-mode .spotdiff-diff-list-empty { color: rgba(0,0,0,0.4); } .spotdiff-diff-list-row { display: flex; align-items: center; gap: 6px; background: rgba(0,0,0,0.18); border: 1px solid rgba(255,255,255,0.06); border-radius: 5px; padding: 4px 6px; } body.light-mode .spotdiff-diff-list-row { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.08); } .spotdiff-diff-list-num { width: 22px; height: 22px; background: #ff5577; color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; border-radius: 4px; flex-shrink: 0; } .spotdiff-diff-list-label { flex: 1; min-width: 0; background: transparent; border: 1px solid rgba(255,255,255,0.1); border-radius: 4px; padding: 3px 6px; font-size: 11px; color: inherit; } .spotdiff-diff-list-label:focus { outline: none; border-color: #ff7aa2; } body.light-mode .spotdiff-diff-list-label { border-color: rgba(0,0,0,0.15); } .spotdiff-diff-list-del { width: 22px; height: 22px; border: none; background: rgba(255,85,119,0.18); color: #ff5577; font-size: 13px; border-radius: 4px; cursor: pointer; padding: 0; flex-shrink: 0; } .spotdiff-diff-list-del:hover { background: #ff5577; color: #fff; } .spotdiff-settings-row { display: flex; align-items: center; gap: 8px; margin: 4px 0; font-size: 11px; } .spotdiff-settings-label { min-width: 90px; color: rgba(255,255,255,0.7); } body.light-mode .spotdiff-settings-label { color: rgba(0,0,0,0.7); } .spotdiff-settings-row input { width: 80px; background: transparent; border: 1px solid rgba(255,255,255,0.15); border-radius: 4px; padding: 3px 6px; color: inherit; font-size: 11px; } .spotdiff-settings-row input:focus { outline: none; border-color: #ff7aa2; } body.light-mode .spotdiff-settings-row input { border-color: rgba(0,0,0,0.15); } .spotdiff-settings-hint { font-size: 10px; color: rgba(255,255,255,0.4); font-style: italic; } body.light-mode .spotdiff-settings-hint { color: rgba(0,0,0,0.4); } .spotdiff-heading-input { width: 100%; background: transparent; border: 1px solid rgba(255,255,255,0.15); border-radius: 4px; padding: 5px 8px; color: inherit; font-size: 12px; } .spotdiff-heading-input:focus { outline: none; border-color: #ff7aa2; } body.light-mode .spotdiff-heading-input { border-color: rgba(0,0,0,0.15); } /* ================================================================ AnomalyHunt (異変探し) ノード ================================================================ */ .node-anomalyhunt { border-color: var(--cat-anomaly) !important; width: 300px; } .node-anomalyhunt .node-header { color: var(--cat-anomaly); border-bottom-color: rgba(179,153,219,0.25); } .btn-anomaly { background: rgba(179,153,219,0.12); border-color: rgba(179,153,219,0.45); color: var(--cat-anomaly); } .btn-anomaly:hover { background: rgba(179,153,219,0.22); border-color: var(--cat-anomaly); color: var(--cat-anomaly); } /* ノード内: 画面サムネイル横スクロールストリップ */ .anomaly-screen-strip { display: flex; gap: 5px; margin: 8px 0 4px; padding: 4px; background: rgba(0,0,0,0.3); border: 1px solid rgba(192,132,252,0.18); border-radius: 6px; overflow-x: auto; overflow-y: hidden; min-height: 56px; } .anomaly-screen-strip::-webkit-scrollbar { height: 5px; } .anomaly-screen-strip::-webkit-scrollbar-thumb { background: rgba(192,132,252,0.3); border-radius: 3px; } .anomaly-screen-empty { width: 100%; text-align: center; font-size: 10px; color: rgba(255,255,255,0.3); font-style: italic; padding: 14px 0; } body.light-mode .anomaly-screen-empty { color: rgba(0,0,0,0.4); } .anomaly-screen-thumb { position: relative; flex: 0 0 60px; width: 60px; aspect-ratio: 4 / 3; background: rgba(0,0,0,0.45); border: 1px solid rgba(192,132,252,0.3); border-radius: 4px; overflow: hidden; display: flex; align-items: center; justify-content: center; } .anomaly-screen-idx { position: absolute; top: 2px; left: 3px; font-size: 8px; font-weight: 700; color: #c084fc; background: rgba(0,0,0,0.6); padding: 0 4px; border-radius: 3px; z-index: 2; pointer-events: none; } .anomaly-screen-img { width: 100%; height: 100%; object-fit: cover; } .anomaly-screen-noimg { font-size: 8px; color: rgba(255,255,255,0.3); font-style: italic; text-align: center; } .anomaly-screen-vbadge { position: absolute; bottom: 2px; right: 2px; font-size: 8px; font-weight: 700; color: #fff; background: #c084fc; padding: 1px 5px; border-radius: 3px; pointer-events: none; } .anomaly-meta { font-size: 10px; color: rgba(255,255,255,0.65); text-align: center; padding: 3px 0 5px; letter-spacing: 0.5px; } body.light-mode .anomaly-meta { color: rgba(0,0,0,0.6); } /* ── Editor side panel ─────────────────────────── */ .anomaly-heading-input { width: 100%; background: transparent; border: 1px solid rgba(255,255,255,0.15); border-radius: 4px; padding: 5px 8px; color: inherit; font-size: 12px; } .anomaly-heading-input:focus { outline: none; border-color: #c084fc; } body.light-mode .anomaly-heading-input { border-color: rgba(0,0,0,0.15); } .anomaly-screen-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; } .anomaly-screen-list-empty { font-size: 11px; font-style: italic; color: rgba(255,255,255,0.35); padding: 8px; text-align: center; background: rgba(0,0,0,0.18); border-radius: 5px; } body.light-mode .anomaly-screen-list-empty { color: rgba(0,0,0,0.4); background: rgba(0,0,0,0.04); } .anomaly-screen-row { background: rgba(0,0,0,0.22); border: 1px solid rgba(192,132,252,0.2); border-radius: 6px; padding: 8px; display: flex; flex-direction: column; gap: 6px; } body.light-mode .anomaly-screen-row { background: rgba(0,0,0,0.04); } .anomaly-screen-row-head { display: flex; align-items: center; gap: 5px; } .anomaly-screen-num { width: 22px; height: 22px; background: #c084fc; color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; border-radius: 4px; flex-shrink: 0; } .anomaly-screen-name { flex: 1; min-width: 0; background: transparent; border: 1px solid rgba(255,255,255,0.1); border-radius: 4px; padding: 3px 6px; font-size: 11px; color: inherit; } .anomaly-screen-name:focus { outline: none; border-color: #c084fc; } body.light-mode .anomaly-screen-name { border-color: rgba(0,0,0,0.15); } .anomaly-screen-up, .anomaly-screen-down, .anomaly-screen-del { width: 24px; height: 24px; border: 1px solid rgba(255,255,255,0.1); background: rgba(0,0,0,0.2); color: rgba(255,255,255,0.8); font-size: 12px; border-radius: 4px; cursor: pointer; padding: 0; flex-shrink: 0; } body.light-mode .anomaly-screen-up, body.light-mode .anomaly-screen-down, body.light-mode .anomaly-screen-del { border-color: rgba(0,0,0,0.15); background: rgba(255,255,255,0.5); color: rgba(0,0,0,0.7); } .anomaly-screen-up:hover, .anomaly-screen-down:hover { border-color: #c084fc; color: #c084fc; } .anomaly-screen-del { background: rgba(255,85,119,0.15); color: #ff5577; border-color: rgba(255,85,119,0.3); } .anomaly-screen-del:hover { background: #ff5577; color: #fff; border-color: #ff5577; } .anomaly-screen-imgs { display: flex; align-items: stretch; gap: 8px; } .anomaly-screen-normal, .anomaly-variant-cell { position: relative; flex: 0 0 110px; width: 110px; min-height: 80px; background: transparent; border: 1px solid rgba(192,132,252,0.3); border-radius: 5px; overflow: hidden; display: flex; align-items: center; justify-content: center; cursor: pointer; } .anomaly-variant-cell { cursor: pointer; } .anomaly-variant-cell:hover { border-color: rgba(255,85,119,0.7); box-shadow: 0 0 0 2px rgba(255,85,119,0.18); } /* ドラッグ&ドロップ ハイライト */ .anomaly-variants-wrap.anomaly-variants-dragover { background: rgba(255,85,119,0.08); outline: 2px dashed rgba(255,85,119,0.55); outline-offset: -2px; border-radius: 6px; } .anomaly-variant-cell-dragover { outline: 2px dashed rgba(255,85,119,0.75) !important; outline-offset: -2px; background: rgba(255,85,119,0.12) !important; } /* サムネ上に矩形位置を縮小表示 */ .anomaly-variant-thumb-rect { position: absolute; border: 1.5px solid #ff5577; background: rgba(255,85,119,0.18); pointer-events: none; box-shadow: 0 0 0 1px rgba(0,0,0,0.5) inset; } .anomaly-variants-wrap { flex: 1; display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; } /* バリアント画像 + 矩形ドラッグ用ステージ：画像サイズに合わせる（黒帯なし） */ .anomaly-variant-stage { position: relative; display: inline-block; max-width: 100%; border-radius: 4px; background: transparent; line-height: 0; } .anomaly-variant-overlay { position: absolute; inset: 0; cursor: crosshair; user-select: none; } /* 編集 OFF（画像差替えモード）：通常カーソル + 矩形を半透明 */ .anomaly-variant-stage.anomaly-variant-replace-mode .anomaly-variant-overlay { cursor: pointer; } .anomaly-variant-stage.anomaly-variant-replace-mode .anomaly-variant-rect { opacity: 0.35; } /* ════════════════════════════════════════════════════════ 異変画像 編集モーダル（中央ポップアップ） ════════════════════════════════════════════════════════ */ #anomaly-variant-modal-overlay { position: fixed; inset: 0; z-index: 9000; background: rgba(0,0,0,0.65); display: none; align-items: center; justify-content: center; backdrop-filter: blur(2px); } #anomaly-variant-modal { width: min(1100px, 94vw); max-height: min(90vh, calc(100% - 40px)); background: var(--panel-bg, #1a1a2e); border: 1px solid rgba(255,85,119,0.4); border-radius: 10px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 12px 40px rgba(0,0,0,0.55); } .anomaly-variant-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px 10px; border-bottom: 1px solid rgba(255,255,255,0.08); flex-shrink: 0; } .anomaly-variant-modal-title { font-size: 13px; font-weight: 700; color: #ff5577; letter-spacing: 0.5px; } .anomaly-variant-modal-close { display: flex; align-items: center; gap: 4px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14); border-radius: 5px; color: var(--text-muted); cursor: pointer; font-size: 11px; font-family: var(--font-ui); padding: 4px 10px; white-space: nowrap; transition: background 0.15s, color 0.15s, border-color 0.15s; } .anomaly-variant-modal-close:hover { background: rgba(255,80,80,0.15); border-color: rgba(255,80,80,0.4); color: #ff6b6b; } .anomaly-variant-modal-body { flex: 1; display: flex; gap: 14px; padding: 14px 16px 16px; overflow: auto; min-height: 0; } .anomaly-variant-modal-pane { flex: 1 1 50%; display: flex; flex-direction: column; gap: 6px; min-width: 0; } .anomaly-variant-modal-pane-label { display: flex; align-items: center; justify-content: space-between; font-size: 11px; font-weight: 700; color: var(--text-muted); font-family: var(--font-ui); letter-spacing: 0.5px; } .anomaly-variant-modal-edit-pane .anomaly-variant-modal-pane-label { color: #ff5577; } .anomaly-variant-modal-edit-toggle-label { display: flex; align-items: center; gap: 4px; font-size: 10px; background: rgba(255,85,119,0.14); border: 1px solid rgba(255,85,119,0.4); color: #ff5577; padding: 2px 8px 2px 6px; border-radius: 3px; cursor: pointer; user-select: none; } .anomaly-variant-modal-edit-toggle-label input[type="checkbox"] { margin: 0; width: 11px; height: 11px; cursor: pointer; accent-color: #ff5577; } .anomaly-variant-modal-imgwrap { flex: 1; display: flex; align-items: flex-start; justify-content: center; background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.07); border-radius: 6px; padding: 10px; min-height: 200px; position: relative; flex-direction: column; } .anomaly-variant-modal-pane-img { display: block; max-width: 100%; max-height: 65vh; width: auto; height: auto; align-self: center; } .anomaly-variant-modal-noimg { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 11px; font-style: italic; color: rgba(255,255,255,0.4); } #anomaly-variant-modal-stage { max-width: 100%; align-self: center; } #anomaly-variant-modal-img { display: block; max-width: 100%; max-height: 65vh; width: auto; height: auto; } #anomaly-variant-modal-hint { margin-top: 6px; font-size: 10px; color: rgba(255,255,255,0.55); background: rgba(0,0,0,0.45); padding: 3px 8px; border-radius: 3px; align-self: center; } /* 発見フラグ ID 設定行 */ .anomaly-variant-flag-row { margin-top: 10px; display: flex; align-items: center; gap: 8px; width: 100%; align-self: stretch; padding: 6px 8px; background: rgba(255,85,119,0.06); border: 1px solid rgba(255,85,119,0.25); border-radius: 5px; } .anomaly-variant-flag-label { font-size: 10px; font-weight: 700; color: #ff5577; flex-shrink: 0; font-family: var(--font-ui); } .anomaly-variant-flag-input { flex: 1; font-size: 11px; font-family: var(--font-mono); padding: 3px 8px; background: rgba(0,0,0,0.35); border: 1px solid rgba(255,85,119,0.4); border-radius: 4px; color: #ffe; outline: none; } .anomaly-variant-flag-input:focus { border-color: #ff5577; } /* Event アクションのギャラリー ID 行 */ .action-gallery-row { display: flex; align-items: center; gap: 4px; margin-top: 4px; } .action-gallery-label { font-size: 9px; color: #ff79c6; flex-shrink: 0; white-space: nowrap; } .action-gallery-input { flex: 1; font-size: 10px; font-family: var(--font-mono); padding: 2px 6px; background: rgba(0,0,0,0.4); border: 1px solid rgba(255,121,198,0.35); border-radius: 4px; color: #ffe; outline: none; } .action-gallery-input:focus { border-color: #ff79c6; } /* シミュレーター CG ギャラリー画面 */ #sim-gallery-overlay, #sim-trophy-overlay { position: absolute; inset: 0; background: rgba(10,10,20,0.96); z-index: 100; display: none; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; } .sim-gallery-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; border-bottom: 1px solid rgba(255,255,255,0.1); flex-shrink: 0; } .sim-gallery-title { font-family: var(--font-ui); font-size: 14px; font-weight: 700; color: #ff79c6; letter-spacing: 0.5px; } .sim-gallery-close { padding: 5px 12px; font-size: 11px; font-family: var(--font-ui); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.18); color: var(--text-muted); border-radius: 5px; cursor: pointer; } .sim-gallery-close:hover { background: rgba(255,121,198,0.2); color: #fff; border-color: #ff79c6; } .sim-gallery-grid { flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; padding: 16px; overflow-y: auto; align-content: start; } .sim-gallery-cell { position: relative; aspect-ratio: 16/9; background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; cursor: pointer; overflow: hidden; transition: transform 0.15s, border-color 0.15s; } .sim-gallery-cell:hover { transform: scale(1.03); border-color: #ff79c6; } .sim-gallery-cell img { width: 100%; height: 100%; object-fit: cover; } .sim-gallery-cell-id { position: absolute; bottom: 0; left: 0; right: 0; padding: 4px 8px; background: linear-gradient(to top, rgba(0,0,0,0.85), transparent); color: rgba(255,255,255,0.85); font-family: var(--font-mono); font-size: 10px; } .sim-gallery-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 12px; color: var(--text-muted); font-style: italic; text-align: center; padding: 20px; } .sim-gallery-footer { padding: 10px 12px; border-top: 1px solid rgba(255,255,255,0.1); display: flex; justify-content: center; background: rgba(0,0,0,0.4); } .sim-gallery-close-btn { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.25); color: #ddd; padding: 6px 24px; border-radius: 5px; cursor: pointer; font-size: 13px; transition: background 0.15s; } .sim-gallery-close-btn:hover { background: rgba(255,255,255,0.16); color: #fff; } #sim-gallery-zoom { position: absolute; inset: 0; background: rgba(0,0,0,0.92); z-index: 200; display: none; align-items: center; justify-content: center; flex-direction: column; gap: 14px; } #sim-gallery-zoom img { max-width: 92%; max-height: 80%; object-fit: contain; border-radius: 6px; box-shadow: 0 8px 36px rgba(0,0,0,0.6); } #sim-gallery-zoom button { padding: 8px 18px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2); color: #fff; border-radius: 6px; cursor: pointer; font-family: var(--font-ui); font-size: 12px; } #sim-gallery-zoom button:hover { background: rgba(255,121,198,0.25); border-color: #ff79c6; } /* レスポンシブ：狭い画面では縦並びに */ @media (max-width: 760px) { .anomaly-variant-modal-body { flex-direction: column; } .anomaly-variant-modal-pane { flex: 0 0 auto; } } .anomaly-variant-hint { position: absolute; bottom: 4px; left: 6px; font-size: 9px; color: rgba(255,255,255,0.55); background: rgba(0,0,0,0.45); padding: 1px 6px; border-radius: 3px; pointer-events: none; } .anomaly-variant-stage .anomaly-variant-hint:empty { display: none; } .anomaly-variant-rect { position: absolute; background: rgba(255,85,119,0.18); border: 2px solid #ff5577; box-shadow: 0 0 0 1px rgba(0,0,0,0.45) inset; pointer-events: none; } .anomaly-variant-rect-drag { border-style: dashed; background: rgba(255,85,119,0.08); } .anomaly-variant-rect-del { position: absolute; top: -10px; right: -10px; width: 18px; height: 18px; border-radius: 50%; background: #ff5577; color: #fff; border: none; font-size: 10px; font-weight: 700; cursor: pointer; pointer-events: auto; display: flex; align-items: center; justify-content: center; padding: 0; } .anomaly-img-tag { position: absolute; top: 2px; left: 3px; font-size: 8px; font-weight: 700; color: #c084fc; background: rgba(0,0,0,0.65); padding: 1px 5px; border-radius: 3px; z-index: 2; pointer-events: none; letter-spacing: 0.5px; } .anomaly-img-tag-variant { color: #ff5577; } .anomaly-screen-thumbimg { display: block; max-width: 100%; max-height: 220px; width: auto; height: auto; object-fit: contain; } .anomaly-screen-thumbnoimg { font-size: 9px; color: rgba(255,255,255,0.4); font-style: italic; text-align: center; padding: 6px; } body.light-mode .anomaly-screen-thumbnoimg { color: rgba(0,0,0,0.4); } .anomaly-screen-imgclear, .anomaly-variant-del { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border: none; background: rgba(255,85,119,0.85); color: #fff; font-size: 12px; border-radius: 4px; cursor: pointer; padding: 0; z-index: 3; } .anomaly-screen-imgclear:hover, .anomaly-variant-del:hover { background: #ff2a55; } .anomaly-variant-add { flex: 0 0 70px; width: 70px; aspect-ratio: 4 / 3; border: 1px dashed rgba(192,132,252,0.5); background: transparent; color: #c084fc; font-size: 10px; border-radius: 5px; cursor: pointer; padding: 0; } .anomaly-variant-add:hover { background: rgba(192,132,252,0.12); border-color: #c084fc; } /* トリガーモードボタン */ .anomaly-mode-btns { display: flex; gap: 4px; margin-bottom: 8px; } .anomaly-mode-btn { flex: 1; background: transparent; border: 1px solid rgba(255,255,255,0.15); border-radius: 5px; color: rgba(255,255,255,0.7); font-size: 10px; padding: 5px 4px; cursor: pointer; transition: all 0.15s; } body.light-mode .anomaly-mode-btn { border-color: rgba(0,0,0,0.15); color: rgba(0,0,0,0.7); } .anomaly-mode-btn:hover { border-color: #c084fc; color: #c084fc; } .anomaly-mode-btn.active { background: rgba(192,132,252,0.2); border-color: #c084fc; color: #c084fc; font-weight: 700; } .anomaly-trigger-fields { background: rgba(0,0,0,0.18); border-radius: 5px; padding: 8px; } body.light-mode .anomaly-trigger-fields { background: rgba(0,0,0,0.04); } .anomaly-rule-row { display: flex; align-items: center; gap: 6px; margin: 4px 0; font-size: 11px; } .anomaly-rule-label { min-width: 110px; color: rgba(255,255,255,0.7); } body.light-mode .anomaly-rule-label { color: rgba(0,0,0,0.7); } .anomaly-rule-row input, .anomaly-rule-row select { width: 72px; background: transparent; border: 1px solid rgba(255,255,255,0.15); border-radius: 4px; padding: 3px 6px; color: inherit; font-size: 11px; } .anomaly-rule-row select { width: auto; min-width: 160px; } .anomaly-rule-row input:focus, .anomaly-rule-row select:focus { outline: none; border-color: #c084fc; } body.light-mode .anomaly-rule-row input, body.light-mode .anomaly-rule-row select { border-color: rgba(0,0,0,0.15); } .anomaly-rule-hint { font-size: 10px; color: rgba(255,255,255,0.4); font-style: italic; } body.light-mode .anomaly-rule-hint { color: rgba(0,0,0,0.4); } /* ── 結果分岐: ノード本体内の分岐行 + OUT コネクタ ─────────── */ .anomaly-branches { display: flex; flex-direction: column; gap: 3px; margin: 6px 0 4px; } .anomaly-branch-row { position: relative; padding: 5px 18px 5px 8px; background: rgba(192,132,252,0.10); border: 1px solid rgba(192,132,252,0.28); border-radius: 5px; font-size: 10px; min-height: 24px; display: flex; align-items: center; } body.light-mode .anomaly-branch-row { background: rgba(192,132,252,0.08); border-color: rgba(192,132,252,0.4); } .anomaly-branch-row-label { flex: 1; min-width: 0; color: rgba(255,255,255,0.85); line-height: 1.3; word-break: break-word; } body.light-mode .anomaly-branch-row-label { color: rgba(0,0,0,0.85); } .anomaly-branch-metric { display: inline-block; background: rgba(192,132,252,0.25); color: #c084fc; font-weight: 700; padding: 1px 6px; border-radius: 3px; margin-right: 4px; font-size: 10px; } .anomaly-branch-else { display: inline-block; background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.7); font-weight: 700; padding: 1px 6px; border-radius: 3px; margin-right: 4px; font-size: 10px; } body.light-mode .anomaly-branch-else { background: rgba(0,0,0,0.1); color: rgba(0,0,0,0.7); } .anomaly-branch-name { color: rgba(255,255,255,0.8); } body.light-mode .anomaly-branch-name { color: rgba(0,0,0,0.8); } /* right の負値は、ノードの 12px padding + 1.5px border + コネクタ 6px(半径) を相殺して ノードの外縁の中心線に dot の中心が来るように調整している */ .connector.anomaly-branch-out { position: absolute; right: -21px; top: 50%; transform: translateY(-50%); background: #c084fc; border-color: rgba(0,0,0,0.5); } .connector.anomaly-branch-out:hover { transform: translateY(-50%) scale(1.4); } .anomaly-default-out-row { position: relative; padding: 5px 18px 5px 8px; margin-top: 4px; background: rgba(255,255,255,0.05); border: 1px dashed rgba(255,255,255,0.18); border-radius: 5px; font-size: 10px; min-height: 22px; display: flex; align-items: center; } body.light-mode .anomaly-default-out-row { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.18); } .anomaly-default-out-label { flex: 1; color: rgba(255,255,255,0.55); font-style: italic; } body.light-mode .anomaly-default-out-label { color: rgba(0,0,0,0.55); } .connector.anomaly-default-out { position: absolute; right: -21px; top: 50%; transform: translateY(-50%); } .connector.anomaly-default-out:hover { transform: translateY(-50%) scale(1.4); } /* ── 結果分岐: サイドエディタの編集行 ─────────────────────── */ .anomaly-branch-edit-list { display: flex; flex-direction: column; gap: 5px; margin-bottom: 6px; } .anomaly-branch-edit-empty { font-size: 11px; font-style: italic; color: rgba(255,255,255,0.35); padding: 8px; text-align: center; background: rgba(0,0,0,0.18); border-radius: 5px; } body.light-mode .anomaly-branch-edit-empty { color: rgba(0,0,0,0.4); background: rgba(0,0,0,0.04); } .anomaly-branch-edit-row { display: flex; align-items: center; gap: 4px; background: rgba(0,0,0,0.2); border: 1px solid rgba(192,132,252,0.2); border-radius: 5px; padding: 5px 6px; } body.light-mode .anomaly-branch-edit-row { background: rgba(0,0,0,0.04); } .anomaly-branch-edit-num { width: 22px; height: 22px; background: #c084fc; color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; border-radius: 4px; flex-shrink: 0; } .anomaly-branch-metric, .anomaly-branch-op, .anomaly-branch-value, .anomaly-branch-label { background: transparent; border: 1px solid rgba(255,255,255,0.15); border-radius: 4px; padding: 3px 4px; color: inherit; font-size: 10px; } .anomaly-branch-edit-row select.anomaly-branch-metric { width: 78px; flex-shrink: 0; } .anomaly-branch-edit-row select.anomaly-branch-op { width: 44px; flex-shrink: 0; } .anomaly-branch-edit-row input.anomaly-branch-value { width: 50px; flex-shrink: 0; } .anomaly-branch-edit-row input.anomaly-branch-label { flex: 1; min-width: 0; } .anomaly-branch-edit-row select:focus, .anomaly-branch-edit-row input:focus { outline: none; border-color: #c084fc; } body.light-mode .anomaly-branch-edit-row select, body.light-mode .anomaly-branch-edit-row input { border-color: rgba(0,0,0,0.15); } .anomaly-branch-up, .anomaly-branch-down, .anomaly-branch-del { width: 22px; height: 22px; border: 1px solid rgba(255,255,255,0.1); background: rgba(0,0,0,0.2); color: rgba(255,255,255,0.8); font-size: 11px; border-radius: 4px; cursor: pointer; padding: 0; flex-shrink: 0; } body.light-mode .anomaly-branch-up, body.light-mode .anomaly-branch-down, body.light-mode .anomaly-branch-del { border-color: rgba(0,0,0,0.15); background: rgba(255,255,255,0.5); color: rgba(0,0,0,0.7); } .anomaly-branch-up:hover, .anomaly-branch-down:hover { border-color: #c084fc; color: #c084fc; } .anomaly-branch-del { background: rgba(255,85,119,0.15); color: #ff5577; border-color: rgba(255,85,119,0.3); } .anomaly-branch-del:hover { background: #ff5577; color: #fff; border-color: #ff5577; } /* ── セリフ表示モードトグル（SpotDiff / AnomalyHunt 共通） ────────────── */ .dlg-mode-hint { font-size: 10px; color: rgba(255,255,255,0.5); font-style: italic; line-height: 1.5; } body.light-mode .dlg-mode-hint { color: rgba(0,0,0,0.5); } .dlg-mode-btns { display: flex; flex-direction: column; gap: 5px; } .dlg-mode-btn { background: transparent; border: 1px solid rgba(255,255,255,0.15); border-radius: 5px; color: rgba(255,255,255,0.7); font-size: 10px; padding: 7px 8px; text-align: left; cursor: pointer; transition: all 0.15s; } body.light-mode .dlg-mode-btn { border-color: rgba(0,0,0,0.15); color: rgba(0,0,0,0.7); } .dlg-mode-btn:hover { border-color: #74ebd5; color: #74ebd5; } .dlg-mode-btn.active { background: rgba(116,235,213,0.15); border-color: #74ebd5; color: #74ebd5; font-weight: 700; } /* ── Dialogue ノード: ADV モード時は L/R チャット位置ボタンを非表示 ───── */ .node[data-display-mode="adv"] .chat-side-btn, .node[data-display-mode="evt"] .chat-side-btn { display: none !important; } /* ── AnomalyHunt: ADV OUT 行（ゲーム中セリフ挿入用） ─────────────── */ .anomaly-adv-out-row { position: relative; padding: 5px 18px 5px 8px; margin: 4px 0; background: rgba(116,235,213,0.10); border: 1px solid rgba(116,235,213,0.35); border-radius: 5px; font-size: 10px; min-height: 24px; display: flex; align-items: center; } body.light-mode .anomaly-adv-out-row { background: rgba(116,235,213,0.12); } .anomaly-adv-out-label { flex: 1; color: #74ebd5; font-weight: 700; letter-spacing: 0.5px; } .connector.anomaly-adv-out { position: absolute; right: -21px; top: 50%; transform: translateY(-50%); background: #74ebd5; border-color: rgba(0,0,0,0.5); } .connector.anomaly-adv-out:hover { transform: translateY(-50%) scale(1.4); } /* ── AnomalyHunt: 各画面の「セリフ開始点」行 ─────────────────── */ .anomaly-screen-dialog-row { display: flex; align-items: center; gap: 6px; margin-top: 6px; padding-top: 6px; border-top: 1px dashed rgba(255,255,255,0.08); font-size: 11px; } body.light-mode .anomaly-screen-dialog-row { border-top-color: rgba(0,0,0,0.1); } .anomaly-screen-dialog-label { color: #74ebd5; font-weight: 700; letter-spacing: 0.3px; flex-shrink: 0; } .anomaly-screen-dialog-select { flex: 1; min-width: 0; background: transparent; border: 1px solid rgba(255,255,255,0.15); border-radius: 4px; padding: 3px 6px; color: inherit; font-size: 11px; } .anomaly-screen-dialog-select:focus { outline: none; border-color: #74ebd5; } body.light-mode .anomaly-screen-dialog-select { border-color: rgba(0,0,0,0.15); } .anomaly-screen-dialog-refresh { width: 22px; height: 22px; border: 1px solid rgba(116,235,213,0.35); background: rgba(116,235,213,0.1); color: #74ebd5; font-size: 12px; border-radius: 4px; cursor: pointer; padding: 0; flex-shrink: 0; } .anomaly-screen-dialog-refresh:hover { background: #74ebd5; color: #1a1f30; } /* ================================================================ バグ報告モーダル ================================================================ */ .btn-bug { background: rgba(255,159,127,0.12); border-color: rgba(255,159,127,0.45); color: #ff9f7f; } .btn-bug:hover { background: rgba(255,159,127,0.22); border-color: #ff9f7f; color: #ff9f7f; } #bug-report-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: none; align-items: center; justify-content: center; z-index: 10000; backdrop-filter: blur(2px); } #bug-report-modal { background: var(--node-bg); border: 1px solid rgba(255,159,127,0.4); border-radius: 10px; padding: 0; width: min(540px, 90vw); max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.6); color: var(--text); } .bug-report-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid rgba(255,159,127,0.25); background: rgba(255,159,127,0.08); } .bug-report-title { font-size: 14px; font-weight: 700; color: #ff9f7f; letter-spacing: 0.5px; } .bug-report-close { width: 26px; height: 26px; background: transparent; border: 1px solid rgba(255,255,255,0.15); border-radius: 5px; color: rgba(255,255,255,0.7); font-size: 13px; cursor: pointer; padding: 0; } .bug-report-close:hover { background: rgba(255,255,255,0.08); color: #fff; } body.light-mode .bug-report-close { border-color: rgba(0,0,0,0.15); color: rgba(0,0,0,0.7); } .bug-report-body { padding: 16px 18px 18px; } .bug-report-label { display: block; font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.7); letter-spacing: 0.5px; margin: 10px 0 5px; } body.light-mode .bug-report-label { color: rgba(0,0,0,0.7); } .bug-report-required { color: #ff5577; } #bug-report-modal textarea { width: 100%; background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.15); border-radius: 5px; padding: 8px 10px; color: inherit; font-family: var(--font-ui); font-size: 12px; resize: vertical; box-sizing: border-box; } body.light-mode #bug-report-modal textarea { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.15); } #bug-report-modal textarea:focus { outline: none; border-color: #ff9f7f; } .bug-report-opt { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-size: 12px; color: rgba(255,255,255,0.8); cursor: pointer; } body.light-mode .bug-report-opt { color: rgba(0,0,0,0.8); } .bug-report-opt input[type=checkbox] { accent-color: #ff9f7f; } /* Honeypot: 人間からは絶対に見えない位置に配置 */ .bug-report-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; } #bug-report-status { margin: 12px 0 0; font-size: 12px; min-height: 18px; } .bug-report-status-ok { color: #7ee8a2; } .bug-report-status-err { color: #ff5577; } .bug-report-status-pending { color: rgba(255,255,255,0.6); font-style: italic; } body.light-mode .bug-report-status-pending { color: rgba(0,0,0,0.6); } .bug-report-footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; } .bug-report-footer .btn { padding: 6px 14px; } #bug-report-submit:disabled { opacity: 0.5; cursor: not-allowed; } /* ================================================================ Timer ノード ================================================================ */ .node-timer { border-color: var(--cat-timer) !important; width: 240px; } .node-timer .node-header { color: var(--cat-timer); border-bottom-color: rgba(116,235,213,0.25); } .btn-timer { background: rgba(141,219,198,0.10); border-color: rgba(141,219,198,0.42); color: var(--cat-timer); } .btn-timer:hover { background: rgba(141,219,198,0.20); border-color: var(--cat-timer); color: var(--cat-timer); } .timer-display { margin: 8px 0 8px; padding: 10px 8px; background: rgba(0,0,0,0.3); border: 1px solid rgba(116,235,213,0.25); border-radius: 6px; text-align: center; } .timer-value { font-size: 22px; font-weight: 700; font-family: var(--font-mono); color: #74ebd5; letter-spacing: 2px; line-height: 1.1; } .timer-meta { font-size: 9px; color: rgba(255,255,255,0.5); margin-top: 4px; letter-spacing: 0.5px; } body.light-mode .timer-meta { color: rgba(0,0,0,0.5); } .timer-out-row { position: relative; display: flex; align-items: center; padding: 5px 18px 5px 8px; margin: 3px 0; background: rgba(116,235,213,0.08); border: 1px solid rgba(116,235,213,0.22); border-radius: 5px; font-size: 10px; min-height: 24px; } body.light-mode .timer-out-row { background: rgba(116,235,213,0.10); border-color: rgba(116,235,213,0.32); } .timer-out-row-timeout { background: rgba(255,107,107,0.10); border-color: rgba(255,107,107,0.32); } .timer-out-label { flex: 1; color: rgba(255,255,255,0.85); letter-spacing: 0.3px; } body.light-mode .timer-out-label { color: rgba(0,0,0,0.85); } .timer-out-row-timeout .timer-out-label { color: #ff6b6b; font-weight: 700; } .connector.timer-next-out, .connector.timer-timeout-out { position: absolute; right: -21px; top: 50%; transform: translateY(-50%); background: #74ebd5; border-color: rgba(0,0,0,0.5); } .connector.timer-timeout-out { background: #ff6b6b; border-color: rgba(0,0,0,0.5); } .connector.timer-next-out:hover, .connector.timer-timeout-out:hover { transform: translateY(-50%) scale(1.4); } .node-timer .param-ui-row { background: rgba(74,158,255,0.08); border: 1px solid rgba(74,158,255,0.22); } /* Timer Link OUT 行（Flag 系統一色 赤紫 #cc44aa） */ .timer-out-row-link { background: rgba(204,68,170,0.12); border-color: rgba(204,68,170,0.45); } .timer-out-row-link .timer-out-label { color: #cc44aa; font-weight: 700; } .connector.timer-link-out { position: absolute; right: -21px; top: 50%; transform: translateY(-50%); background: #cc44aa; border-color: #cc44aa; } .connector.timer-link-out:hover { transform: translateY(-50%) scale(1.4); } /* Link が繋がっているとき、完了 / タイムアウト OUT 行は無効化見た目 */ .timer-out-row-disabled { opacity: 0.4; filter: saturate(0.3); } .timer-out-row-disabled .timer-out-label { text-decoration: line-through; color: rgba(255,255,255,0.45) !important; } .connector.conn-grayed { background: rgba(150,150,150,0.5) !important; border-color: rgba(0,0,0,0.4) !important; filter: saturate(0); } /* AnomalyHunt の Flag IN コネクタ行（Flag 系統一色 赤紫 #cc44aa） */ .anomaly-flag-in-row { position: relative; display: flex; align-items: center; padding: 5px 8px 5px 18px; margin-top: 6px; background: rgba(204,68,170,0.10); border: 1px solid rgba(204,68,170,0.35); border-radius: 5px; font-size: 10px; min-height: 24px; } .anomaly-flag-in-label { color: #cc44aa; font-weight: 700; letter-spacing: 0.3px; flex: 1; } .connector.anomaly-flag-in-pt { position: absolute; left: -21px; top: 50%; transform: translateY(-50%); background: #cc44aa; border-color: #cc44aa; } .connector.anomaly-flag-in-pt:hover { transform: translateY(-50%) scale(1.4); } /* Timer エディタ: モード / フォーマット切替 */ .timer-mode-btns, .timer-format-btns { display: flex; flex-wrap: wrap; gap: 5px; } .timer-mode-btn, .timer-format-btn { flex: 1; min-width: 0; background: transparent; border: 1px solid rgba(255,255,255,0.15); border-radius: 5px; color: rgba(255,255,255,0.7); font-size: 10px; padding: 6px 4px; cursor: pointer; white-space: nowrap; } body.light-mode .timer-mode-btn, body.light-mode .timer-format-btn { border-color: rgba(0,0,0,0.15); color: rgba(0,0,0,0.7); } .timer-mode-btn:hover, .timer-format-btn:hover { border-color: #74ebd5; color: #74ebd5; } .timer-mode-btn.active, .timer-format-btn.active { background: rgba(116,235,213,0.20); border-color: #74ebd5; color: #74ebd5; font-weight: 700; } .timer-duration-input, .timer-label-input { width: 100%; background: transparent; border: 1px solid rgba(255,255,255,0.15); border-radius: 4px; padding: 5px 8px; color: inherit; font-size: 12px; } .timer-duration-input:focus, .timer-label-input:focus { outline: none; border-color: #74ebd5; } body.light-mode .timer-duration-input, body.light-mode .timer-label-input { border-color: rgba(0,0,0,0.15); } /* ── UI カウンターウィジェット: 表示フォーマット切替 ───────────── */ .ui-counter-fmt-btns { display: flex; flex-direction: column; gap: 4px; } .ui-counter-fmt-btn { background: transparent; border: 1px solid rgba(255,255,255,0.15); border-radius: 5px; color: rgba(255,255,255,0.7); font-size: 10px; padding: 6px 8px; text-align: left; cursor: pointer; transition: all 0.15s; } body.light-mode .ui-counter-fmt-btn { border-color: rgba(0,0,0,0.15); color: rgba(0,0,0,0.7); } .ui-counter-fmt-btn:hover { border-color: #74ebd5; color: #74ebd5; } .ui-counter-fmt-btn.active { background: rgba(116,235,213,0.18); border-color: #74ebd5; color: #74ebd5; font-weight: 700; } /* UI ノード内カウンター値表示 */ .ui-node-counter .ui-counter-label { font-size: 9px; color: rgba(255,255,255,0.55); letter-spacing: 0.5px; margin-bottom: 2px; } body.light-mode .ui-node-counter .ui-counter-label { color: rgba(0,0,0,0.55); } .ui-node-counter .ui-counter-value { font-family: var(--font-mono); font-size: 22px; font-weight: 700; color: #74ebd5; letter-spacing: 2px; text-align: center; line-height: 1.1; } /* ================================================================ Connect Assist — 独立 CSS（既存セレクタは触らない） ================================================================ */ .btn-ca { background: rgba(189,147,249,0.10); border-color: rgba(189,147,249,0.45); color: #bd93f9; } .btn-ca:hover { background: rgba(189,147,249,0.22); border-color: #bd93f9; } /* ★ GSComp ボタン (旧 Assist の場所、紫グラデーション) */ .btn-gscomp { background: linear-gradient(135deg, rgba(180,130,255,0.18), rgba(120,80,255,0.12)); border: 1px solid rgba(192,132,252,0.5); color: #c084fc; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; } .btn-gscomp:hover { background: linear-gradient(135deg, rgba(180,130,255,0.30), rgba(120,80,255,0.22)); border-color: #c084fc; color: #fff; } /* GSComp ロゴ — GSGit と同サイズで揃える。色は紫テーマに合わせる */ .btn-gscomp-logo { height: 16px; width: auto; vertical-align: middle; display: inline-block; object-fit: contain; flex-shrink: 0; /* SVG の黒 fill を紫テーマに合わせて変色 (currentColor を使えないため filter で) */ filter: brightness(0) invert(70%) sepia(50%) saturate(700%) hue-rotate(230deg) brightness(110%); opacity: 0.95; } .btn-gscomp:hover .btn-gscomp-logo { filter: brightness(0) invert(100%); /* hover で白く */ opacity: 1; } .btn-gscomp-label { display: inline-block; vertical-align: middle; } /* ★ GSDoze ボタン (放置ウィジェットゲーム — うたた寝/idle、薄緑テーマ) */ .btn-gsdoze { background: linear-gradient(135deg, rgba(120,200,160,0.15), rgba(80,160,120,0.10)); border: 1px solid rgba(140,220,180,0.45); color: #8fdbb0; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; } .btn-gsdoze:hover { background: linear-gradient(135deg, rgba(120,200,160,0.28), rgba(80,160,120,0.20)); border-color: #8fdbb0; color: #fff; } .btn-gsdoze-logo { height: 16px; width: auto; vertical-align: middle; display: inline-block; object-fit: contain; flex-shrink: 0; filter: brightness(0) invert(80%) sepia(30%) saturate(400%) hue-rotate(95deg) brightness(110%); opacity: 0.95; } .btn-gsdoze:hover .btn-gsdoze-logo { filter: brightness(0) invert(100%); opacity: 1; } .btn-gsdoze-label { display: inline-block; vertical-align: middle; } /* ★ TAB ボタン (TOOLS 内、統合 right-dock 開閉) — グレー系ニュートラル */ .btn-rightdock-toggle { background: rgba(160, 160, 200, 0.10); border: 1px solid rgba(160, 160, 200, 0.40); color: #c0c0d8; font-weight: 700; letter-spacing: 0.5px; } .btn-rightdock-toggle:hover { background: rgba(160, 160, 200, 0.25); border-color: #c0c0d8; color: #fff; } /* dock が開いている時はアクティブ表示 */ body.has-right-dock-open .btn-rightdock-toggle { background: rgba(192, 132, 252, 0.28); border-color: #c084fc; color: #fff; } .btn-rightdock-label { display: inline-block; vertical-align: middle; } /* GSAnim 左パネル: GSDoze ペット (assetKind === 'doze-pet') 用バッジ 通常の State Machine Asset と並んだ時に一目で識別できるようにする */ .animator-list-item-doze-badge { display: inline-block; padding: 1px 6px; margin-right: 6px; background: rgba(120,200,160,0.18); border: 1px solid rgba(140,220,180,0.45); border-radius: 3px; color: #8fdbb0; font-size: 10px; font-weight: 700; letter-spacing: 0.3px; vertical-align: middle; } .animator-list-item-doze .animator-list-item-row { border-left: 2px solid rgba(140,220,180,0.55); } /* ============================================================ GSDoze エディタ拡張パネル — assetKind === 'doze-pet' の編集中のみ表示 renderAnimatorEditPane() の末尾で _renderDozeExtraSections() が editor 直下に append する。 ============================================================ */ .gsdoze-extra-panel { display: flex; flex-direction: column; gap: 12px; padding: 12px; background: linear-gradient(180deg, rgba(20,40,30,0.45), rgba(20,30,40,0.35)); border-top: 2px solid rgba(140,220,180,0.55); margin-top: auto; /* split-row の下に押し下げ */ flex-shrink: 0; } .gsdoze-section { background: rgba(30,40,35,0.65); border: 1px solid rgba(140,220,180,0.30); border-radius: 6px; overflow: hidden; } .gsdoze-section-head { padding: 8px 12px; background: rgba(140,220,180,0.12); color: #b8efce; font-weight: 700; font-size: 12px; letter-spacing: 0.3px; border-bottom: 1px solid rgba(140,220,180,0.25); } .gsdoze-section-body { padding: 10px 12px; } .gsdoze-sensor-table { width: 100%; border-collapse: collapse; font-size: 11px; } .gsdoze-sensor-table th { text-align: left; padding: 4px 8px; color: #8fdbb0; font-weight: 700; border-bottom: 1px solid rgba(140,220,180,0.20); } .gsdoze-sensor-table td { padding: 4px 8px; color: var(--ani-text, #e0e0e0); border-bottom: 1px solid rgba(255,255,255,0.05); } .gsdoze-sensor-table code { background: rgba(0,0,0,0.3); padding: 1px 6px; border-radius: 3px; color: #b8efce; font-size: 10px; } .gsdoze-empty { padding: 12px; text-align: center; color: rgba(255,255,255,0.4); font-style: italic; font-size: 11px; } .gsdoze-hint { margin-top: 8px; font-size: 10px; color: rgba(255,255,255,0.5); line-height: 1.5; } .gsdoze-hint code { background: rgba(0,0,0,0.3); padding: 1px 4px; border-radius: 2px; font-size: 10px; color: #b8efce; } .gsdoze-current-state { padding: 8px 12px; background: rgba(140,220,180,0.10); border-left: 3px solid #8fdbb0; border-radius: 3px; margin-bottom: 10px; font-size: 12px; color: var(--ani-text, #e0e0e0); } .gsdoze-current-state b { color: #b8efce; font-size: 14px; } .gsdoze-param-list { display: flex; flex-direction: column; gap: 6px; } .gsdoze-param-row { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: rgba(0,0,0,0.25); border-radius: 3px; font-size: 11px; } .gsdoze-param-name { flex: 0 0 110px; font-weight: 700; color: #b8efce; } .gsdoze-param-type { flex: 0 0 50px; color: rgba(255,255,255,0.4); font-size: 10px; } .gsdoze-param-value { flex: 0 0 60px; font-family: monospace; font-weight: 700; color: #fff; text-align: right; padding-right: 8px; } .gsdoze-btn-feed, .gsdoze-btn-reset { padding: 4px 10px; background: rgba(140,220,180,0.15); border: 1px solid rgba(140,220,180,0.4); border-radius: 3px; color: #8fdbb0; cursor: pointer; font-size: 10px; font-weight: 600; } .gsdoze-btn-feed:hover, .gsdoze-btn-reset:hover { background: rgba(140,220,180,0.30); border-color: #8fdbb0; color: #fff; } .gsdoze-btn-reset { background: rgba(255,180,140,0.10); border-color: rgba(255,180,140,0.35); color: #f9a; } .gsdoze-btn-reset:hover { background: rgba(255,180,140,0.25); color: #fff; } #ca-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.72); z-index: 10500; display: none; align-items: center; justify-content: center; } #ca-modal { width: min(720px, 92vw); max-height: 86vh; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,0.7); display: flex; flex-direction: column; overflow: hidden; } .ca-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border); background: rgba(189,147,249,0.06); } .ca-modal-title { font-size: 15px; font-weight: 700; color: #bd93f9; } .ca-beta-tag { font-size: 9px; padding: 2px 6px; border-radius: 3px; margin-left: 6px; background: rgba(189,147,249,0.2); color: #bd93f9; letter-spacing: 1px; } .ca-modal-close { background: none; border: none; color: #aaa; font-size: 18px; cursor: pointer; padding: 4px 8px; border-radius: 4px; } .ca-modal-close:hover { background: rgba(255,255,255,0.08); color: #fff; } .ca-modal-body { padding: 16px; overflow-y: auto; flex: 1; } .ca-modal-step { display: none; } .ca-step-label { font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 8px; } #ca-input-text { width: 100%; min-height: 320px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-family: var(--font-mono); font-size: 12px; line-height: 1.5; padding: 10px 12px; resize: vertical; } #ca-input-text:focus { outline: none; border-color: #bd93f9; box-shadow: 0 0 0 2px rgba(189,147,249,0.2); } .ca-input-actions, .ca-preview-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; } .ca-btn-primary, .ca-btn-secondary { padding: 7px 14px; font-size: 13px; border-radius: 5px; cursor: pointer; border: 1px solid; } .ca-btn-primary { background: rgba(189,147,249,0.18); color: #bd93f9; border-color: #bd93f9; } .ca-btn-primary:hover { background: rgba(189,147,249,0.28); } .ca-btn-secondary { background: rgba(255,255,255,0.04); color: #aaa; border-color: rgba(255,255,255,0.18); } .ca-btn-secondary:hover { background: rgba(255,255,255,0.08); color: #fff; } .ca-progress-label { text-align: center; color: #bd93f9; font-size: 14px; margin: 30px 0 12px; } .ca-progress-bar { height: 6px; background: rgba(255,255,255,0.08); border-radius: 3px; overflow: hidden; margin: 0 30px; } .ca-progress-fill { height: 100%; width: 0; background: linear-gradient(90deg, #bd93f9, #ffb86c); animation: caProgress 1.2s ease-out forwards; } @keyframes caProgress { to { width: 100%; } } .ca-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 6px; margin-bottom: 12px; } .ca-summary-cell { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 5px; padding: 8px 4px; text-align: center; font-size: 11px; color: var(--text-muted); } .ca-summary-cell b { font-size: 18px; color: var(--text); display: block; margin-top: 2px; } .ca-summary-edges { border-color: rgba(189,147,249,0.4); color: #bd93f9; } .ca-detect-details { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); border-radius: 5px; padding: 8px 12px; font-size: 12px; margin-bottom: 10px; } .ca-detect-details summary { cursor: pointer; color: var(--text-muted); font-size: 11px; } .ca-detect-ul { list-style: none; padding: 6px 0 0 0; max-height: 180px; overflow-y: auto; } .ca-detect-ul li { padding: 3px 0; font-size: 11px; color: var(--text); border-bottom: 1px dashed rgba(255,255,255,0.05); } .ca-warnings { background: rgba(255,184,0,0.06); border: 1px solid rgba(255,184,0,0.3); border-radius: 5px; padding: 8px 12px; font-size: 11px; color: var(--state-warning); margin-bottom: 10px; } .ca-warnings:empty { display: none; } .ca-warnings-title { font-weight: 700; margin-bottom: 4px; } .ca-warnings ul { margin: 4px 0 0 16px; padding: 0; } .ca-disclaimer { font-size: 10px; color: var(--text-muted); opacity: 0.75; text-align: center; margin-top: 8px; } /* カラー注釈ポップアップ */ .color-label-popup { position: fixed; z-index: 9500; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,0.6); padding: 10px; width: 240px; } .color-label-popup-head { margin-bottom: 8px; } .color-label-popup-title { font-size: 11px; color: var(--text-muted); } .color-label-popup-input { width: 100%; background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px; color: var(--text); font-size: 12px; padding: 6px 8px; font-family: var(--font-ui); } .color-label-popup-input:focus { outline: none; border-color: var(--accent); } .color-label-popup-actions { display: flex; gap: 6px; justify-content: flex-end; margin-top: 8px; } .color-label-popup-clear, .color-label-popup-save { font-size: 11px; padding: 4px 10px; border-radius: 4px; cursor: pointer; border: 1px solid; } .color-label-popup-clear { background: rgba(255,255,255,0.04); color: var(--text-muted); border-color: rgba(255,255,255,0.15); } .color-label-popup-clear:hover { background: rgba(255,107,107,0.12); color: var(--state-error); border-color: var(--state-error); } .color-label-popup-save { background: rgba(126,232,162,0.12); color: var(--accent); border-color: var(--accent); } .color-label-popup-save:hover { background: rgba(126,232,162,0.22); } /* ================================================================ Connect Assist Wizard ================================================================ */ .ca-beta-banner { padding: 8px 16px; background: rgba(255,184,0,0.10); border-bottom: 1px solid rgba(255,184,0,0.3); color: var(--state-warning); font-size: 11px; line-height: 1.5; } .ca-beta-banner b { color: #ffd479; } .ca-modal-tabs { display: flex; gap: 4px; padding: 8px 16px 0; border-bottom: 1px solid var(--border); } .ca-tab-btn { background: transparent; border: 1px solid transparent; border-bottom: none; color: var(--text-muted); padding: 8px 16px; font-size: 12px; cursor: pointer; border-radius: 6px 6px 0 0; } .ca-tab-btn:hover { color: var(--text); background: rgba(255,255,255,0.04); } .ca-tab-btn.active { background: var(--surface); border-color: var(--border); color: #bd93f9; font-weight: 700; } .ca-tab-pane { display: none; } .ca-tab-pane.active { display: block; } /* ウィザード本体 */ .ca-wiz-progress { margin-bottom: 16px; } .ca-wiz-progress-bar { height: 4px; background: rgba(255,255,255,0.08); border-radius: 2px; overflow: hidden; } .ca-wiz-progress-fill { height: 100%; background: linear-gradient(90deg, #bd93f9, #ffb86c); transition: width 0.3s ease; } .ca-wiz-step-label { font-size: 11px; color: var(--text-muted); margin-top: 4px; text-align: right; } .ca-wiz-question { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 12px; } .ca-wiz-hint { font-size: 11px; color: var(--text-muted); opacity: 0.85; margin-top: 12px; line-height: 1.5; padding: 8px 10px; background: rgba(189,147,249,0.04); border-left: 2px solid rgba(189,147,249,0.3); border-radius: 0 4px 4px 0; } .ca-wiz-sublabel { font-size: 11px; color: var(--text-muted); margin-right: 8px; } /* ジャンル選択カード */ .ca-wiz-genre-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; } .ca-wiz-genre-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px; background: rgba(255,255,255,0.03); border: 1.5px solid rgba(255,255,255,0.1); border-radius: 6px; cursor: pointer; transition: all 0.15s; } .ca-wiz-genre-card:hover { background: rgba(189,147,249,0.08); border-color: rgba(189,147,249,0.4); } .ca-wiz-genre-card.selected { background: rgba(189,147,249,0.15); border-color: #bd93f9; box-shadow: 0 0 0 2px rgba(189,147,249,0.25); } .ca-wiz-genre-card input[type="radio"] { display: none; } .ca-wiz-genre-icon { font-size: 28px; } .ca-wiz-genre-label { font-size: 11px; color: var(--text); text-align: center; line-height: 1.3; } /* 数値入力行 */ .ca-wiz-row { display: flex; align-items: center; gap: 12px; margin: 8px 0; flex-wrap: wrap; } .ca-wiz-row label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text); } .ca-wiz-row input[type="number"] { width: 64px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px; color: var(--text); font-family: var(--font-mono); font-size: 12px; padding: 4px 8px; text-align: right; } .ca-wiz-row input[type="number"]:focus { outline: none; border-color: #bd93f9; } .ca-wiz-row-breakdown { padding: 8px; background: rgba(255,255,255,0.03); border-radius: 4px; } /* 機能チェックボックス */ .ca-wiz-check { display: grid; grid-template-columns: auto auto 1fr; gap: 8px; align-items: center; padding: 8px 12px; margin-bottom: 6px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 5px; cursor: pointer; } .ca-wiz-check:hover { background: rgba(255,255,255,0.06); } .ca-wiz-check.on { background: rgba(189,147,249,0.10); border-color: rgba(189,147,249,0.4); } .ca-wiz-check input[type="checkbox"] { cursor: pointer; } .ca-wiz-check-label { font-size: 12px; font-weight: 600; color: var(--text); } .ca-wiz-check-hint { font-size: 10px; color: var(--text-muted); text-align: right; } /* 分岐パターンラジオ */ .ca-wiz-radio-group { margin-top: 12px; } .ca-wiz-radio { display: block; padding: 10px 12px; margin-bottom: 6px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 5px; cursor: pointer; } .ca-wiz-radio:hover { background: rgba(255,255,255,0.06); } .ca-wiz-radio.on { background: rgba(189,147,249,0.10); border-color: rgba(189,147,249,0.4); } .ca-wiz-radio input { display: none; } .ca-wiz-radio-name { display: block; font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 2px; } .ca-wiz-radio-hint { display: block; font-size: 10px; color: var(--text-muted); line-height: 1.4; } .ca-wiz-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.08); } /* ============================================================ AnomalyHunt — Variant 難易度 / レアリティ / 重み 表示 ============================================================ */ /* ノード内のバリアントセル上に表示するバッジ */ .anomaly-variant-badges { position: absolute; top: 2px; right: 2px; display: flex; flex-direction: column; gap: 2px; z-index: 3; pointer-events: none; } .anomaly-variant-badge { display: inline-block; font-size: 8px; font-weight: 800; letter-spacing: 0.4px; padding: 1px 4px; border-radius: 3px; text-shadow: 0 1px 2px rgba(0,0,0,0.6); border: 1px solid rgba(0,0,0,0.35); line-height: 1.2; color: #fff; } /* 難易度ごとの色 */ .anomaly-variant-badge-diff-easy { background: linear-gradient(135deg, #59c97d, #2f9c52); } .anomaly-variant-badge-diff-normal { background: linear-gradient(135deg, #6c8cd1, #3f5fa3); } .anomaly-variant-badge-diff-hard { background: linear-gradient(135deg, #e36b6b, #b13a3a); } /* レアリティごとの色 */ .anomaly-variant-badge-rar-common { background: linear-gradient(135deg, #888, #555); } .anomaly-variant-badge-rar-rare { background: linear-gradient(135deg, #5fa5e8, #2a6db3); } .anomaly-variant-badge-rar-legend { background: linear-gradient(135deg, #e7c45a, #b78b1c); color: #2a1c00; text-shadow: 0 1px 1px rgba(255,255,255,0.4); } /* バリアントセル下部のセレクタ行（インライン編集 — セル下端に固定） */ .anomaly-variant-cell { /* 既存の min-height: 80px に下行分を追加（合計 ~110px） */ min-height: 110px !important; align-items: flex-start !important; } .anomaly-variant-meta-row { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 3px; padding: 3px 4px 4px; align-items: center; background: rgba(0,0,0,0.45); z-index: 2; } body.light-mode .anomaly-variant-meta-row { background: rgba(0,0,0,0.06); } .anomaly-variant-meta-row select, .anomaly-variant-meta-row input[type="number"] { flex: 1; font-size: 9px; padding: 1px 2px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.15); color: var(--text-main, #ddd); border-radius: 2px; min-width: 0; } body.light-mode .anomaly-variant-meta-row select, body.light-mode .anomaly-variant-meta-row input[type="number"] { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.12); color: #222; } .anomaly-variant-meta-row input.anomaly-variant-weight-input { max-width: 42px; text-align: right; } /* 編集モーダル内の難易度/レアリティ/重み入力行 */ .anomaly-variant-attr-row { display: flex; gap: 8px; margin-top: 8px; padding: 8px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 5px; } body.light-mode .anomaly-variant-attr-row { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.08); } .anomaly-variant-attr-cell { flex: 1; display: flex; flex-direction: column; gap: 3px; cursor: pointer; } .anomaly-variant-attr-label { font-size: 10px; font-weight: 700; color: var(--text-muted, #aaa); letter-spacing: 0.3px; } .anomaly-variant-attr-sel, .anomaly-variant-attr-num { font-size: 12px; padding: 4px 6px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.15); color: var(--text-main, #ddd); border-radius: 3px; } body.light-mode .anomaly-variant-attr-sel, body.light-mode .anomaly-variant-attr-num { background: #fff; border-color: rgba(0,0,0,0.18); color: #222; } /* ============================================================ AnomalyHunt — 覚醒 OUT 行（お手付き超過時の遷移先） ============================================================ */ .anomaly-awaken-out-row { position: relative; padding: 5px 18px 5px 8px; margin: 4px 0; background: rgba(255, 154, 96, 0.12); border: 1px solid rgba(255, 154, 96, 0.40); border-radius: 5px; font-size: 10px; min-height: 24px; display: flex; align-items: center; } body.light-mode .anomaly-awaken-out-row { background: rgba(255, 154, 96, 0.18); } .anomaly-awaken-out-label { flex: 1; color: #ff9a60; font-weight: 700; letter-spacing: 0.5px; } .connector.anomaly-awaken-out { position: absolute; right: -21px; top: 50%; transform: translateY(-50%); background: #ff9a60; border-color: rgba(0,0,0,0.5); } .connector.anomaly-awaken-out:hover { transform: translateY(-50%) scale(1.4); } /* ============================================================ Sim HUD — ミス（お手付き）表示 ============================================================ */ .sim-anom-stat-miss { color: #ffb088; } .sim-anom-stat-miss-danger { color: #ff6855; font-weight: 800; animation: sim-anom-miss-pulse 0.8s ease-in-out infinite alternate; } @keyframes sim-anom-miss-pulse { from { opacity: 0.7; } to { opacity: 1.0; text-shadow: 0 0 6px rgba(255,104,85,0.7); } } /* ============================================================ 解放条件 (Unlock Condition) UI ============================================================ */ /* エディタの各エントリー行 内に表示する "解放条件" セクション */ .gc-entry-unlock-section { margin-top: 8px; padding: 8px 10px; background: rgba(255, 214, 102, 0.06); border: 1px dashed rgba(255, 214, 102, 0.35); border-radius: 5px; } body.light-mode .gc-entry-unlock-section { background: rgba(255, 196, 60, 0.08); border-color: rgba(255, 196, 60, 0.45); } .gc-entry-unlock-label { font-size: 11px; font-weight: 700; letter-spacing: 0.3px; color: #ffd666; margin-bottom: 4px; } body.light-mode .gc-entry-unlock-label { color: #c08a00; } .gc-entry-unlock-hint { font-size: 10px; color: var(--text-muted, #aaa); margin-top: 4px; line-height: 1.4; } /* 「条件設定済み」バッジ + 行強調 */ .gc-entry-lock-badge { display: inline-block; font-size: 10px; font-weight: 700; color: #ffd666; background: rgba(255, 214, 102, 0.12); border: 1px solid rgba(255, 214, 102, 0.4); border-radius: 3px; padding: 1px 6px; margin-left: 6px; } body.light-mode .gc-entry-lock-badge { color: #b07a00; background: rgba(255, 196, 60, 0.18); border-color: rgba(255, 196, 60, 0.5); } .gc-entry-row-locked { border-left: 3px solid rgba(255, 214, 102, 0.55); padding-left: 8px; } /* シミュ画面: 「N 件が条件未達」ヒント */ .sim-locked-hint { margin-top: 12px; padding: 6px 10px; text-align: center; font-size: 11px; color: #ffb24f; background: rgba(255, 178, 79, 0.08); border: 1px dashed rgba(255, 178, 79, 0.4); border-radius: 4px; } /* ============================================================ SpriteAnimator ノード（メインキャンバス表示） ============================================================ */ .node-sprite-animator { background: linear-gradient(135deg, #4a3a6e, #2e2244); border: 1px solid rgba(192, 132, 252, 0.6); min-width: 200px; } .sprite-animator-header { background: linear-gradient(90deg, rgba(192, 132, 252, 0.4), rgba(116, 235, 213, 0.3)); color: #fff; font-weight: 700; letter-spacing: 0.5px; } .sprite-animator-body { padding: 8px 10px; } .sprite-animator-summary { font-size: 11px; color: #d8caff; font-family: var(--font-mono, monospace); } .anim-open-window-btn { display: block; width: 100%; padding: 7px 10px; background: linear-gradient(90deg, #c084fc, #74ebd5); color: #1a1525; border: none; border-radius: 5px; font-weight: 800; cursor: pointer; font-size: 13px; } .anim-open-window-btn:hover { filter: brightness(1.15); } .anim-quick-stats { background: rgba(192, 132, 252, 0.08); border: 1px solid rgba(192, 132, 252, 0.2); border-radius: 5px; padding: 8px 10px; } .anim-quick-stat-row { display: flex; justify-content: space-between; font-size: 12px; padding: 2px 0; } .anim-quick-stat-row b { color: #c084fc; } /* ============================================================ Animator ウィンドウ（別ウィンドウで開く編集 UI） ============================================================ */ /* GSAnim mode 起動時: GraphScript 本体の UI 要素を隠す。 ※ canvas は #canvas (GraphScript のノードグラフ) だけ。GSAnim 内の `.animator-tl-canvas` などをタグセレクタで巻き添えにすると Timeline が消える。 */ body.animator-mode-active #app-root, body.animator-mode-active #canvas, body.animator-mode-active #side-editor, body.animator-mode-active #toolbar { display: none !important; } /* GSAnim エディター全体: Photoshop ダークモード調のグレー基調 */ #animator-overlay { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; background: #2d2d2d; color: #d4d4d4; --ani-bg: #2d2d2d; --ani-panel-bg: #3a3a3a; --ani-panel-bg-2: #424242; --ani-header-bg: #4a4a4a; --ani-border: #555555; --ani-border-soft: #4a4a4a; --ani-text: #e0e0e0; --ani-text-mute: #a8a8a8; --ani-accent-anim: #74ebd5; /* Animation 側のアクセント色 */ --ani-accent-ctrl: #c084fc; /* Animator Controller 側のアクセント色 */ } #animator-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #3a3a3a; border-bottom: 1px solid var(--ani-border); font-size: 14px; font-weight: 700; color: var(--ani-text); /* ★ ウィンドウが狭くなってもボタンを縦長に潰さない。 入りきらなければ横スクロールで全要素にアクセス可能。 */ overflow-x: auto; overflow-y: hidden; white-space: nowrap; flex-wrap: nowrap; } /* タイトルが flex:1 で広がる → 残りのボタン群は右寄せになる */ #animator-bar-title { flex: 1 1 auto; color: var(--ani-text); white-space: nowrap; } #animator-bar button, #animator-bar label { padding: 6px 14px; background: #525252; color: #fff; border: 1px solid #6a6a6a; border-radius: 4px; cursor: pointer; font-size: 13px; font-weight: 700; /* ボタンは縮ませず、テキストは縦書きにならないように nowrap で */ flex-shrink: 0; white-space: nowrap; } #animator-bar button:hover { background: #5d5d5d; } #animator-create-btn { background: linear-gradient(90deg, #7e5cb8, #4ea895); color: #fff !important; border-color: transparent; } #animator-create-btn:hover { filter: brightness(1.15); } #animator-exit-btn { background: #6e3a3a; border-color: #8a4848; color: #ffb0b0; } #animator-exit-btn:hover { background: #7d4444; } /* Animator (State Machine 編集ビュー) のトグルボタン ※ ID プレフィックスを外してクラスベースに統一 → Animation カラムヘッダ右端に移設後も同じスタイルが効く */ .animator-bar-animator-toggle { padding: 4px 14px; background: rgba(192, 132, 252, 0.12); color: #b894e8; border: 1px solid rgba(192, 132, 252, 0.45); border-radius: 4px; cursor: pointer; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; margin-left: 8px; transition: background 0.12s, border-color 0.12s, color 0.12s; } .animator-bar-animator-toggle:hover { background: rgba(192, 132, 252, 0.22); border-color: rgba(192, 132, 252, 0.65); color: #d8b4fe; } .animator-bar-animator-toggle.animator-bar-animator-active { background: linear-gradient(135deg, #4a3760, #2a1f3a) !important; border-color: #c084fc !important; color: #d8b4fe !important; box-shadow: inset 0 0 6px rgba(192, 132, 252, 0.35), 0 0 8px rgba(192, 132, 252, 0.25); } .animator-bar-animator-toggle.animator-bar-animator-active:hover { background: linear-gradient(135deg, #5a4475, #3a2a4a) !important; } /* Animation カラムヘッダ右端に置く時は、左の要素群と離して右側に寄せる */ .animator-col-head .animator-bar-animator-toggle { margin-left: auto; } /* 🐞 デバッグコンソール トグルボタン (トップバー) */ #animator-debug-toggle.animator-debug-toggle { background: rgba(255, 200, 80, 0.10); color: #ffd666; border: 1px solid rgba(255, 200, 80, 0.4); letter-spacing: 0.04em; } #animator-debug-toggle.animator-debug-toggle:hover { background: rgba(255, 200, 80, 0.22); border-color: rgba(255, 200, 80, 0.65); } #animator-debug-toggle.animator-debug-toggle-active { background: linear-gradient(135deg, #5a4a20, #3a2f15) !important; border-color: #ffd666 !important; color: #fff0aa !important; box-shadow: inset 0 0 6px rgba(255, 214, 102, 0.35), 0 0 8px rgba(255, 214, 102, 0.25); } /* ─── デバッグコンソール本体 (右側固定パネル — Chrome DevTools 風) ─── */ .animator-debug-console { position: fixed; top: 0; right: 0; bottom: 0; width: 420px; min-width: 320px; max-width: 70vw; background: linear-gradient(180deg, #1a1a1c, #0f0f11); border-left: 1px solid #ffd666; box-shadow: -8px 0 30px rgba(0,0,0,0.6), -2px 0 12px rgba(255, 214, 102, 0.15); z-index: 10000; display: flex; flex-direction: column; font-family: var(--font-mono, monospace); font-size: 11px; color: #ddd; } /* 左端のリサイズハンドル (ドラッグで幅変更) */ .animator-debug-resize { position: absolute; top: 0; bottom: 0; left: -2px; width: 5px; cursor: ew-resize; background: transparent; z-index: 1; transition: background 0.12s; } .animator-debug-resize:hover { background: rgba(255, 214, 102, 0.3); } .animator-debug-head { display: flex; align-items: center; gap: 12px; padding: 6px 12px; background: #2a2a2d; border-bottom: 1px solid #444; flex: 0 0 auto; } .animator-debug-title { font-weight: 700; color: #ffd666; letter-spacing: 0.06em; font-size: 12px; } .animator-debug-tabs { display: flex; gap: 0; margin-left: 16px; } .animator-debug-tab { padding: 4px 14px; background: transparent; border: none; border-bottom: 2px solid transparent; color: #888; cursor: pointer; font-family: inherit; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; transition: color 0.12s, border-color 0.12s, background 0.12s; } .animator-debug-tab:hover { color: #ddd; background: rgba(255, 214, 102, 0.06); } .animator-debug-tab-active { color: #ffd666; border-bottom-color: #ffd666; } .animator-debug-close { margin-left: auto; padding: 2px 9px; background: transparent; border: 1px solid transparent; color: #888; cursor: pointer; font-size: 14px; border-radius: 3px; } .animator-debug-close:hover { background: rgba(255, 100, 100, 0.2); color: #ff8c8c; border-color: rgba(255, 100, 100, 0.4); } .animator-debug-body { flex: 1 1 auto; min-height: 0; display: flex; overflow: hidden; } .animator-debug-pane { flex: 1 1 auto; min-height: 0; flex-direction: column; overflow: hidden; } .animator-debug-pane[data-pane="log"] { display: flex; } .animator-debug-log-toolbar { display: flex; align-items: center; gap: 6px; padding: 6px 12px; background: #1f1f22; border-bottom: 1px solid #333; flex: 0 0 auto; } .animator-debug-mini { padding: 3px 10px; background: #2a2a2d; border: 1px solid #444; color: #ccc; font-family: inherit; font-size: 10px; cursor: pointer; border-radius: 3px; } .animator-debug-mini:hover { background: #353539; border-color: #ffd666; color: #ffd666; } .animator-debug-hint { margin-left: auto; font-size: 10px; color: #888; font-family: var(--font-mono, monospace); } .animator-debug-hint code { background: #0a0a0c; padding: 1px 6px; border-radius: 2px; color: #74ebd5; } .animator-debug-log-list { flex: 1 1 0; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: 4px 0; background: #121214; } .animator-debug-log-row { display: grid; grid-template-columns: 70px 52px 1fr; gap: 6px; padding: 3px 10px; font-family: var(--font-mono, monospace); font-size: 10px; line-height: 1.5; border-bottom: 1px solid #1a1a1c; } .animator-debug-log-time { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .animator-debug-log-row:hover { background: #1c1c1f; } .animator-debug-log-time { color: #666; } .animator-debug-log-level { font-weight: 700; letter-spacing: 0.04em; text-align: center; border-radius: 2px; padding: 0 4px; } .animator-debug-log-row-info .animator-debug-log-level { color: #74ebd5; background: rgba(116,235,213,0.10); } .animator-debug-log-row-event .animator-debug-log-level { color: #c084fc; background: rgba(192,132,252,0.12); } .animator-debug-log-row-warn .animator-debug-log-level { color: #ffd666; background: rgba(255,214,102,0.12); } .animator-debug-log-row-error .animator-debug-log-level { color: #ff8c8c; background: rgba(255,140,140,0.12); } .animator-debug-log-msg { color: #ddd; word-break: break-all; white-space: pre-wrap; } /* State タブ */ .animator-debug-pane[data-pane="state"] { padding: 0; } .animator-debug-state-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 10px 14px; } .animator-debug-state-summary { background: rgba(192, 132, 252, 0.08); border-left: 3px solid #c084fc; padding: 8px 12px; border-radius: 3px; margin-bottom: 10px; line-height: 1.7; font-size: 11px; color: #ddd; } .animator-debug-state-summary b { color: #c084fc; } .animator-debug-state-json { background: #0a0a0c; border: 1px solid #2a2a2d; padding: 10px; border-radius: 3px; font-size: 10px; color: #b8b8c0; line-height: 1.5; white-space: pre; overflow: auto; /* 右パネルでは viewport 高さの大部分が使えるので、コンテナの flex に任せて自然に伸ばす */ flex: 1 1 auto; min-height: 0; } /* Tools タブ — 右側パネルでは縦組みでスタック */ .animator-debug-tools-grid { display: flex; flex-direction: column; gap: 5px; padding: 10px 14px; } .animator-debug-tool { padding: 8px 12px; background: #2a2a2d; border: 1px solid #444; color: #ddd; cursor: pointer; text-align: left; font-family: inherit; font-size: 11px; border-radius: 3px; transition: background 0.12s, border-color 0.12s, transform 0.08s; } .animator-debug-tool:hover { background: #353539; border-color: #ffd666; color: #ffd666; transform: translateX(2px); } /* バグ報告ボタンは強調 (縦組みの先頭) */ .animator-debug-tool-primary { background: linear-gradient(135deg, #4a3a20, #3a2f15) !important; border-color: #ffd666 !important; color: #ffd666 !important; text-align: center !important; font-weight: 700; padding: 10px 12px !important; margin-bottom: 4px; } .animator-debug-tool-primary:hover { background: linear-gradient(135deg, #5a4a30, #4a3f25) !important; color: #fff0aa !important; } /* ─── 🐞 バグ報告モーダル ─── */ .animator-bugreport-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7); z-index: 10002; display: flex; align-items: center; justify-content: center; } .animator-bugreport-modal { width: min(640px, 92vw); max-height: 88vh; display: flex; flex-direction: column; background: linear-gradient(135deg, #2d2d2d, #232323); border: 1px solid #ffd666; border-radius: 10px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), 0 0 30px rgba(255, 214, 102, 0.18); overflow: hidden; } .animator-bugreport-head { display: flex; align-items: center; gap: 10px; padding: 12px 18px; background: linear-gradient(90deg, #2a2a2a, #232323); border-bottom: 1px solid #444; } .animator-bugreport-title { flex: 1; font-weight: 700; font-size: 14px; letter-spacing: 0.06em; color: #ffd666; } .animator-bugreport-close { background: transparent; border: 1px solid transparent; color: #999; cursor: pointer; padding: 2px 9px; border-radius: 4px; font-size: 14px; line-height: 1; } .animator-bugreport-close:hover { background: rgba(255, 100, 100, 0.2); color: #ff8c8c; border-color: rgba(255, 100, 100, 0.4); } .animator-bugreport-sub { padding: 10px 18px; background: rgba(255, 214, 102, 0.06); border-bottom: 1px solid #3a3a3a; font-size: 11px; color: var(--ani-text-mute, #a8a8a8); line-height: 1.6; } .animator-bugreport-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 14px 18px; overflow-y: auto; } .animator-bugreport-field { display: flex; flex-direction: column; gap: 4px; } .animator-bugreport-label { font-size: 11px; font-weight: 700; color: #ddd; letter-spacing: 0.03em; } .animator-bugreport-label small { font-weight: 400; color: var(--ani-text-mute, #999); margin-left: 6px; } .animator-bugreport-body textarea { width: 100%; padding: 8px 10px; background: #1a1a1c; border: 1px solid #444; border-radius: 4px; color: #eee; font-family: inherit; font-size: 12px; line-height: 1.5; resize: vertical; min-height: 56px; } .animator-bugreport-body textarea:focus { outline: none; border-color: #ffd666; box-shadow: 0 0 0 2px rgba(255, 214, 102, 0.15); } .animator-bugreport-includes { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; padding: 8px 0; font-size: 11px; color: #ccc; } .animator-bugreport-includes label { display: flex; align-items: center; gap: 6px; cursor: pointer; padding: 2px 0; } .animator-bugreport-includes input[type="checkbox"] { accent-color: #ffd666; } .animator-bugreport-status { font-size: 11px; padding: 6px 10px; border-radius: 4px; min-height: 16px; } .animator-bugreport-status:empty { display: none; } .animator-bugreport-status-pending { background: rgba(180, 180, 180, 0.1); color: #ccc; } .animator-bugreport-status-ok { background: rgba(116, 235, 213, 0.15); color: #74ebd5; } .animator-bugreport-status-err { background: rgba(255, 140, 140, 0.15); color: #ff8c8c; } .animator-bugreport-actions { display: flex; gap: 8px; justify-content: flex-end; padding: 10px 18px; border-top: 1px solid #3a3a3a; background: #1f1f22; } .animator-bugreport-actions button { padding: 7px 18px; border-radius: 4px; font-size: 12px; font-weight: 700; cursor: pointer; border: 1px solid #555; background: #2a2a2d; color: #ddd; letter-spacing: 0.03em; } .animator-bugreport-actions button:hover { background: #353539; border-color: #777; } .animator-bugreport-submit { background: linear-gradient(135deg, #4a3a20, #3a2f15) !important; border-color: #ffd666 !important; color: #ffd666 !important; } .animator-bugreport-submit:hover { background: linear-gradient(135deg, #5a4a30, #4a3f25) !important; color: #fff0aa !important; } .animator-bugreport-submit:disabled { opacity: 0.5; cursor: not-allowed; } #animator-body { flex: 1; display: flex; min-height: 0; overflow: hidden; /* body 自体は overflow しない（中の sidebar/editor が個別スクロール） */ position: relative; /* サイドバー展開ボタンの絶対配置基準 */ } #animator-sidebar { flex: 0 0 220px; min-height: 0; background: #323232; border-right: 1px solid var(--ani-border); overflow-y: auto; overflow-x: hidden; padding: 8px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #6a6a6a transparent; /* リサイズ中は transition を切る → drag 中はスムーズに追従 (リサイズ完了後は再開) */ transition: padding 0.18s ease; position: relative; } /* ★ サイドバー横幅リサイズハンドル (Asset 一覧 と editor の境界) */ .animator-sidebar-resizer { flex: 0 0 4px; background: var(--ani-border); cursor: col-resize; position: relative; transition: background 0.12s; user-select: none; } .animator-sidebar-resizer:hover, .animator-sidebar-resizer.animator-sidebar-resizer-active { background: #c084fc; } .animator-sidebar-resizer::after { content: ''; position: absolute; top: 0; left: -3px; /* ドラッグ判定範囲を左右に拡張 (10px ターゲット) */ right: -3px; bottom: 0; } /* サイドバー閉じてる時はリサイズハンドルも隠す */ #animator-sidebar.animator-sidebar-collapsed + .animator-sidebar-resizer { display: none; } /* ── 格納状態: ハンバーガー分の幅だけ残す ── */ #animator-sidebar.animator-sidebar-collapsed { flex: 0 0 36px !important; padding: 6px 4px; overflow: hidden; } /* 格納時は中身を非表示、ヘッダーとハンバーガーだけ残す */ #animator-sidebar.animator-sidebar-collapsed #animator-list { display: none !important; } #animator-sidebar.animator-sidebar-collapsed .animator-sidebar-head { padding: 0; justify-content: center; } #animator-sidebar.animator-sidebar-collapsed .animator-sidebar-head-title { display: none !important; } /* ★ サイドバー閉時は Animation / State Machine セクション全体を非表示にする (トグルボタンだけ残してアセット内容は完全に隠す) */ #animator-sidebar.animator-sidebar-collapsed .animator-sidebar-section { display: none !important; } .animator-sidebar-head { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 600; color: #ddd; padding: 6px 8px; gap: 6px; /* 旧 letter-spacing + uppercase は廃止 (横伸びして読みづらい) */ } /* ★ サイドバー 2 段構造 (上: Animation / 下: State Machine) ラベルはベタ塗り背景 + 白文字でアイテム一覧と明確に区別 */ .animator-sidebar-section { display: flex; flex-direction: column; min-height: 0; padding: 4px 4px; } .animator-sidebar-section-anim { flex: 0 1 auto; max-height: 40%; } .animator-sidebar-section-state { flex: 1 1 0; min-height: 0; } /* ベタ塗りラベル: 普通の sans-serif (ゴシック)、letter-spacing 無し、uppercase 無し */ .animator-sidebar-section-head { display: flex; align-items: center; gap: 6px; padding: 6px 10px; font-size: 12px; font-weight: 600; color: #fff; margin-bottom: 4px; border-radius: 3px; } .animator-sidebar-section-anim .animator-sidebar-section-head { background: #2d5a52; /* シアン系ベタ塗り */ } .animator-sidebar-section-state .animator-sidebar-section-head { background: #4a3760; /* 紫系ベタ塗り */ } .animator-sidebar-section-icon { font-size: 14px; line-height: 1; } .animator-sidebar-section-title { flex: 1; /* 通常のゴシック (uppercase / letter-spacing なし) */ } .animator-sidebar-section-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 18px; padding: 0 5px; background: rgba(0, 0, 0, 0.3); border-radius: 9px; font-size: 10px; color: #fff; } .animator-sidebar-section-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 2px; } /* ★ Animation アセット行 (上段) */ .animator-anim-item { display: flex; flex-direction: column; /* ★ 2 段組み (row1 / row2) */ gap: 2px; padding: 6px 8px; background: rgba(255,255,255,0.02); border: 1px solid transparent; border-radius: 4px; cursor: pointer; font-size: 11px; margin-bottom: 3px; color: #ccc; overflow: hidden; transition: background 0.1s, border-color 0.1s; } .animator-anim-item:hover { background: rgba(116, 235, 213, 0.08); border-color: rgba(116, 235, 213, 0.25); color: #fff; } .animator-anim-item-active { background: linear-gradient(90deg, rgba(116, 235, 213, 0.22), rgba(116, 235, 213, 0.08)) !important; border-color: rgba(116, 235, 213, 0.5) !important; color: #fff !important; box-shadow: inset 0 0 4px rgba(0,0,0,0.3); } .animator-anim-default { color: #ffd666; font-size: 10px; width: 12px; flex-shrink: 0; } .animator-anim-default-spacer { width: 12px; flex-shrink: 0; } .animator-anim-mode-badge { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 14px; font-size: 9px; font-weight: 700; border-radius: 2px; font-family: var(--font-mono, monospace); flex-shrink: 0; } .animator-anim-mode-frame { background: rgba(116, 235, 213, 0.18); color: #74ebd5; border: 1px solid rgba(116, 235, 213, 0.4); } .animator-anim-mode-track { background: rgba(192, 132, 252, 0.18); color: #c084fc; border: 1px solid rgba(192, 132, 252, 0.4); } .animator-anim-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 700; } .animator-anim-parent { font-size: 9px; color: rgba(192, 132, 252, 0.7); font-family: var(--font-mono, monospace); flex-shrink: 0; max-width: 60px; overflow: hidden; text-overflow: ellipsis; } .animator-anim-stat { font-size: 9px; color: var(--ani-text-mute, #888); font-family: var(--font-mono, monospace); flex-shrink: 0; } /* ★ Timeline 編集不可オーバーレイ (Entry/AnyState/空 State 選択時) */ .animator-section[data-section="timeline"] { position: relative; /* オーバーレイ用 */ } .animator-tl-overlay { position: absolute; inset: 0; background: rgba(15, 10, 25, 0.62); z-index: 100; display: flex; align-items: center; justify-content: center; pointer-events: auto; backdrop-filter: blur(1px); } .animator-tl-overlay-card { position: relative; background: #1a1a1f; border: 1px solid #555; border-radius: 8px; padding: 20px 28px; max-width: 480px; text-align: center; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7); color: #ddd; } /* ★ オーバーレイ右上 ✕ 閉じるボタン (空 State オーバーレイのみ) — 素材なしで編集続行する用 */ .animator-tl-overlay-close { position: absolute; top: 6px; right: 8px; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; border-radius: 4px; color: #888; font-size: 14px; cursor: pointer; font-family: sans-serif; transition: background 0.1s, color 0.1s; } .animator-tl-overlay-close:hover { background: rgba(255, 100, 100, 0.18); color: #ff8080; } .animator-tl-overlay-title { font-size: 14px; font-weight: 700; color: #ffb050; margin-bottom: 10px; } .animator-tl-overlay-desc { font-size: 12px; color: #bbb; line-height: 1.7; margin-bottom: 14px; } .animator-tl-overlay-desc b { color: #fff; } .animator-tl-overlay-actions { display: flex; gap: 8px; justify-content: center; margin-bottom: 10px; } .animator-tl-overlay-btn { padding: 8px 18px; background: #3a3a3a; color: #ddd; border: 1px solid #6a6a6a; border-radius: 5px; cursor: pointer; font-size: 12px; font-weight: 700; } .animator-tl-overlay-btn:hover { background: #4a4a4a; border-color: #777; } .animator-tl-overlay-btn-primary { background: linear-gradient(135deg, #2d5a52, #1f4540); color: #74ebd5; border-color: rgba(116, 235, 213, 0.5); } .animator-tl-overlay-btn-primary:hover { background: linear-gradient(135deg, #3d6a62, #2f5550); color: #aef0e1; } .animator-tl-overlay-hint { font-size: 10px; color: #888; margin-top: 4px; } /* ★ オーバーレイ内のモード選択ボタン (フレーム / トラック) */ .animator-tl-overlay-mode-picker { display: flex; gap: 8px; margin-bottom: 14px; } .animator-tl-overlay-mode-btn { flex: 1 1 0; display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: #15151a; border: 1px solid #555; border-radius: 5px; cursor: pointer; text-align: left; color: #ccc; transition: background 0.12s, border-color 0.12s; } .animator-tl-overlay-mode-btn:hover { background: #1d1d24; border-color: #777; } .animator-tl-overlay-mode-btn-active { background: rgba(192, 132, 252, 0.10); border-color: #c084fc; box-shadow: 0 0 0 2px rgba(192, 132, 252, 0.18); } .animator-tl-overlay-mode-badge { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; font-size: 13px; font-weight: 700; border-radius: 3px; font-family: var(--font-mono, monospace); flex-shrink: 0; } .animator-tl-overlay-mode-badge-frame { background: rgba(116, 235, 213, 0.20); color: #74ebd5; border: 1px solid rgba(116, 235, 213, 0.5); } .animator-tl-overlay-mode-badge-track { background: rgba(192, 132, 252, 0.20); color: #c084fc; border: 1px solid rgba(192, 132, 252, 0.5); } .animator-tl-overlay-mode-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .animator-tl-overlay-mode-text b { font-size: 11px; font-weight: 700; color: #fff; } .animator-tl-overlay-mode-text small { font-size: 9px; color: #999; line-height: 1.3; } /* ★ Animation 単独 Asset 用のグラフエリアヒント (State Machine 構造なし) */ .animator-graph-anim-only-hint { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #1a1525; border: 1px solid #555; border-radius: 8px; padding: 20px 28px; color: #aaa; text-align: center; box-shadow: 0 4px 16px rgba(0,0,0,0.5); pointer-events: none; max-width: 320px; } .animator-graph-anim-only-title { font-size: 13px; font-weight: 700; color: #ffb050; margin-bottom: 8px; letter-spacing: 0.04em; } .animator-graph-anim-only-desc { font-size: 11px; color: #bbb; line-height: 1.7; margin-bottom: 14px; } .animator-graph-anim-only-btn { padding: 8px 18px; font-size: 12px; font-weight: 700; background: linear-gradient(135deg, #4a3760, #2a1f3a); color: #d8b4fe; border: 1px solid #c084fc; border-radius: 5px; cursor: pointer; pointer-events: auto; /* 親に pointer-events:none があっても自分は受ける */ margin-top: 4px; } .animator-graph-anim-only-btn:hover { background: linear-gradient(135deg, #5a4070, #3a2950); color: #fff; } .animator-graph-anim-only-hint { pointer-events: none; /* hint 全体は通過、ボタンだけ受ける */ } /* ★ Attach to StateMachine ダイアログ */ .animator-attach-sm-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7); z-index: 10002; display: flex; align-items: center; justify-content: center; } .animator-attach-sm-modal { background: #1e1e22; border: 1px solid #555; border-radius: 8px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7); min-width: 440px; max-width: 540px; max-height: 80vh; display: flex; flex-direction: column; overflow: hidden; } .animator-attach-sm-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: #2a2a2e; border-bottom: 1px solid #444; } .animator-attach-sm-title { font-size: 13px; font-weight: 700; color: #fff; } .animator-attach-sm-close { background: transparent; border: none; color: #999; font-size: 16px; cursor: pointer; padding: 2px 8px; border-radius: 3px; } .animator-attach-sm-close:hover { background: rgba(255, 80, 80, 0.2); color: #ff8888; } .animator-attach-sm-body { padding: 14px 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; } .animator-attach-sm-section-title { font-size: 10px; font-weight: 700; color: #aaa; letter-spacing: 0.04em; padding-top: 4px; } .animator-attach-sm-list { display: flex; flex-direction: column; gap: 4px; } .animator-attach-sm-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; background: #15151a; border: 1px solid #444; border-radius: 5px; color: #ddd; cursor: pointer; text-align: left; } .animator-attach-sm-item:hover { background: rgba(116, 235, 213, 0.10); border-color: #74ebd5; color: #fff; } .animator-attach-sm-name { font-size: 12px; font-weight: 600; } .animator-attach-sm-count { font-size: 10px; color: #888; font-family: var(--font-mono, monospace); } .animator-attach-sm-empty { padding: 14px; background: #15151a; border: 1px dashed #444; border-radius: 5px; color: #888; font-size: 11px; text-align: center; } .animator-attach-sm-create-new { padding: 10px 14px; background: linear-gradient(135deg, #4a3760, #2a1f3a); color: #d8b4fe; border: 1px solid #c084fc; border-radius: 5px; cursor: pointer; font-size: 12px; font-weight: 700; text-align: center; } .animator-attach-sm-create-new:hover { background: linear-gradient(135deg, #5a4070, #3a2950); color: #fff; } .animator-attach-sm-foot { display: flex; justify-content: flex-end; padding: 10px 16px; background: #2a2a2e; border-top: 1px solid #444; } .animator-attach-sm-cancel { padding: 6px 16px; background: #525252; color: #fff; border: 1px solid #6a6a6a; border-radius: 4px; font-size: 12px; font-weight: 700; cursor: pointer; } .animator-attach-sm-cancel:hover { background: #5d5d5d; } /* ★ 2 段組み Animation アイテムの行 */ .animator-anim-item-row1 { display: flex; align-items: center; gap: 6px; white-space: nowrap; min-width: 0; } .animator-anim-item-row2 { display: flex; align-items: center; gap: 6px; padding-left: 22px; /* ★ ★ 印 + バッジ分のインデント */ font-size: 10px; color: #777; } /* ★ NoneState バッジ — State Machine の遷移に未配置な Animation Clip 用 */ .animator-anim-none-state { padding: 1px 6px; font-size: 9px; font-weight: 700; background: rgba(255, 180, 80, 0.15); color: #ffb050; border: 1px solid rgba(255, 180, 80, 0.5); border-radius: 3px; flex-shrink: 0; letter-spacing: 0.04em; } /* ★ State 名 (State Machine に組み込まれている場合) */ .animator-anim-state-name { padding: 1px 6px; font-size: 9px; font-weight: 600; background: rgba(116, 235, 213, 0.10); color: #74c5b0; border: 1px solid rgba(116, 235, 213, 0.25); border-radius: 3px; flex-shrink: 0; } /* ★ セクション内 保存ボタン (Animation / State 別) */ .animator-section-save-btn { padding: 3px 10px; font-size: 11px; font-weight: 700; background: linear-gradient(135deg, #2d5a52, #1f4540); color: #74ebd5; border: 1px solid rgba(116, 235, 213, 0.5); border-radius: 4px; cursor: pointer; white-space: nowrap; flex-shrink: 0; margin-left: 4px; } .animator-section-save-btn:hover { background: linear-gradient(135deg, #3d6a62, #2f5550); filter: brightness(1.15); } .animator-section-save-state { background: linear-gradient(135deg, #4a3760, #2a1f3a); color: #c084fc; border-color: rgba(192, 132, 252, 0.5); } .animator-section-save-state:hover { background: linear-gradient(135deg, #5a4070, #3a2950); } /* ★ 新規 Animation 追加ボタン (Animation 保存の左隣) */ .animator-section-add-btn { padding: 3px 10px; font-size: 11px; font-weight: 700; background: #3a3a3a; color: #74ebd5; border: 1px solid #555; border-radius: 4px; cursor: pointer; white-space: nowrap; flex-shrink: 0; margin-left: 4px; } .animator-section-add-btn:hover { background: #4a4a4a; border-color: #74ebd5; color: #aef0e1; } .animator-section-add-anim { color: #74ebd5; } .animator-sidebar-head-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .animator-sidebar-toggle { flex: 0 0 auto; width: 22px; height: 22px; padding: 0; background: #3a3a3a; border: 1px solid #4a4a4a; border-radius: 4px; color: #c084fc; font-size: 14px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.12s, border-color 0.12s; } .animator-sidebar-toggle:hover { background: #4a4a4a; border-color: #c084fc; } .animator-sidebar-toggle:active { background: #2a2a2a; } /* （旧: 独立した展開ボタンは廃止 — 折りたたみ後もヘッダー内ハンバーガーが残るため不要） */ .animator-list-empty { padding: 14px 10px; font-size: 12px; color: var(--ani-text-mute); font-style: italic; line-height: 1.5; } .animator-list-item { padding: 8px 10px; margin-bottom: 4px; background: #3a3a3a; border: 1px solid #4a4a4a; border-left: 3px solid transparent; border-radius: 4px; cursor: pointer; } .animator-list-item:hover { background: #444444; } .animator-list-item-active { background: #4f4256 !important; border-left-color: var(--ani-accent-ctrl); } .animator-list-item-title { font-size: 13px; font-weight: 700; color: var(--ani-text); } .animator-list-item-meta { font-size: 10px; color: var(--ani-text-mute); margin-top: 2px; } #animator-editor { flex: 1; display: flex; flex-direction: column; overflow: hidden; /* スクロールはセクション内で */ padding: 10px 14px; min-height: 0; /* flex 子要素が overflow できるように */ } #animator-editor-content { flex: 1; display: flex; flex-direction: column; gap: 8px; min-height: 0; /* 同上 */ overflow: hidden; } #animator-editor-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--ani-text-mute); } .animator-empty-emoji { font-size: 48px; opacity: 0.4; margin-bottom: 10px; } /* 旧 emoji 版から GSAnim ロゴ画像版へ差し替え */ .animator-empty-logo { width: 96px; height: 96px; opacity: 0.35; margin-bottom: 14px; display: block; filter: drop-shadow(0 2px 8px rgba(69, 255, 232, 0.15)); } .animator-empty-text { font-size: 14px; text-align: center; line-height: 1.6; } .animator-edit-header { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--ani-border-soft); } .animator-edit-target { flex: 1; padding: 8px 12px; background: #3a3a3a; border: 1px solid var(--ani-border); color: var(--ani-text); font-size: 14px; font-weight: 600; border-radius: 5px; } .animator-edit-target:focus { outline: none; border-color: var(--ani-accent-ctrl); } .animator-edit-header-meta { font-size: 11px; color: var(--ani-text-dim); white-space: nowrap; padding: 4px 10px; background: rgba(255,255,255,0.04); border: 1px solid var(--ani-border-soft); border-radius: 4px; } .animator-panel { background: var(--ani-panel-bg); border: 1px solid var(--ani-border); border-radius: 6px; overflow: hidden; } .animator-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: var(--ani-header-bg); border-bottom: 1px solid var(--ani-border); font-size: 13px; font-weight: 700; color: var(--ani-text); } .animator-panel-add { padding: 4px 10px; font-size: 11px; background: rgba(192, 132, 252, 0.2); color: #fff; border: 1px solid rgba(192, 132, 252, 0.45); border-radius: 3px; cursor: pointer; font-weight: 700; } .animator-panel-add:hover { background: rgba(192, 132, 252, 0.35); } .animator-panel-body { padding: 8px 12px; display: flex; flex-direction: column; gap: 4px; } .animator-panel-hint { padding: 6px 12px; font-size: 10px; color: var(--text-muted, #888); border-top: 1px dashed rgba(255,255,255,0.06); } .animator-empty-row { padding: 12px; text-align: center; font-size: 11px; color: var(--text-muted, #888); font-style: italic; } .animator-row { display: flex; align-items: center; gap: 6px; padding: 4px 6px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 4px; } .animator-row input, .animator-row select { padding: 4px 6px; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.15); color: #fff; border-radius: 3px; font-size: 12px; } .animator-row-name { flex: 1; min-width: 0; } .animator-row-type { width: 90px; } .animator-row-clip { flex: 2; min-width: 0; } .animator-row-default { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-muted, #aaa); white-space: nowrap; } .animator-row-default input[type="number"] { width: 60px; } .animator-row-default-radio { display: flex; align-items: center; cursor: pointer; padding: 2px 4px; color: #ffd666; } .animator-row-default-radio input { margin-right: 2px; } .animator-row-state-default { border-left: 3px solid #ffd666; } /* ── Parameter ブロック: メイン行 + FlagHub Binding サブ行のセット ── */ .animator-param-block { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; } .animator-param-main-row { margin-bottom: 0; } /* 🔗 バインドトグルボタン（メイン行内） */ .animator-param-bind-toggle { width: 26px; height: 26px; padding: 0; font-size: 13px; line-height: 1; background: rgba(255, 255, 255, 0.05); color: rgba(192, 132, 252, 0.55); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 4px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.12s; } .animator-param-bind-toggle:hover { background: rgba(192, 132, 252, 0.15); border-color: rgba(192, 132, 252, 0.5); color: #c084fc; } .animator-param-bind-toggle-active { background: linear-gradient(135deg, #5a3f8a, #3d2960) !important; border-color: #c084fc !important; color: #fff !important; box-shadow: 0 0 6px rgba(192, 132, 252, 0.5); } /* バインドサブ行 (メイン行の下に展開) */ .animator-param-bind-sub { display: flex; align-items: center; gap: 6px; margin-left: 16px; padding: 4px 8px; background: rgba(192, 132, 252, 0.06); border: 1px dashed rgba(192, 132, 252, 0.3); border-radius: 4px; font-size: 11px; } .animator-param-bind-icon { color: #c084fc; font-size: 12px; } .animator-param-bind-label { color: #c084fc; font-weight: 700; letter-spacing: 0.02em; } .animator-param-bind-arrow { color: rgba(255, 255, 255, 0.5); font-size: 10px; } .animator-param-bind-flag { flex: 1; min-width: 0; padding: 3px 6px !important; font-size: 11px !important; } .animator-param-bind-mode { flex: 0 0 auto; padding: 3px 6px !important; font-size: 11px !important; } .animator-param-bind-del { flex: 0 0 auto; padding: 3px 10px; font-size: 10px; font-weight: 600; background: rgba(255, 100, 100, 0.12); color: #ff8c8c; border: 1px solid rgba(255, 100, 100, 0.3); border-radius: 3px; cursor: pointer; } .animator-param-bind-del:hover { background: rgba(255, 100, 100, 0.25); border-color: rgba(255, 100, 100, 0.5); } .animator-row-del { width: 24px; height: 24px; background: rgba(255, 100, 100, 0.15); color: #ff8c8c; border: 1px solid rgba(255, 100, 100, 0.4); border-radius: 3px; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; } .animator-row-del:hover { background: rgba(255, 100, 100, 0.3); } .animator-row-trans { flex-direction: column; align-items: stretch; } .animator-trans-head { display: flex; align-items: center; gap: 6px; padding-bottom: 4px; flex-wrap: wrap; } /* ============================================================ 重み付きランダム Transition の UI ============================================================ */ .animator-row-trans.animator-row-trans-random { background: rgba(192, 132, 252, 0.06); border-color: rgba(192, 132, 252, 0.25); } /* 通常モード → 🎲 トグルボタン */ .animator-rand-toggle-on { padding: 3px 7px; font-size: 13px; background: rgba(192, 132, 252, 0.15); border: 1px solid rgba(192, 132, 252, 0.4); border-radius: 3px; color: #c084fc; cursor: pointer; margin-left: 2px; } .animator-rand-toggle-on:hover { background: rgba(192, 132, 252, 0.3); } /* ランダム分岐ブロック */ .animator-rand-block { flex: 1 1 100%; display: flex; flex-direction: column; gap: 3px; padding: 6px 8px; background: rgba(192, 132, 252, 0.08); border: 1px dashed rgba(192, 132, 252, 0.4); border-radius: 4px; margin-top: 2px; } .animator-rand-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 4px; border-bottom: 1px solid rgba(192, 132, 252, 0.2); } .animator-rand-label { font-size: 10px; font-weight: 700; color: #c084fc; letter-spacing: 0.02em; } .animator-rand-toggle-off { padding: 2px 7px; font-size: 10px; background: transparent; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 3px; color: #a8a8a8; cursor: pointer; } .animator-rand-toggle-off:hover { color: #fff; border-color: rgba(255, 255, 255, 0.4); } /* 各候補の行 */ .animator-rand-row { display: flex; align-items: center; gap: 5px; } .animator-rand-weight { width: 50px; padding: 2px 4px; background: #1c1c1c; border: 1px solid #3a3a3a; border-radius: 3px; color: #fff; font-size: 11px; text-align: right; } .animator-rand-weight-pct { min-width: 36px; font-size: 10px; color: #c084fc; font-weight: 700; text-align: right; } .animator-rand-to { flex: 1; min-width: 0; } .animator-rand-add { align-self: flex-start; padding: 3px 9px; font-size: 10px; background: rgba(192, 132, 252, 0.12); border: 1px dashed rgba(192, 132, 252, 0.4); border-radius: 3px; color: #c084fc; cursor: pointer; margin-top: 2px; } .animator-rand-add:hover { background: rgba(192, 132, 252, 0.25); } /* SVG: ランダム分岐の重みラベル (矢印の中点付近に出る) */ .animator-graph-edge-weight { fill: #c084fc; font-size: 10px; font-weight: 700; pointer-events: none; user-select: none; paint-order: stroke; stroke: #1f1f1f; stroke-width: 3; stroke-linejoin: round; } /* 選択中 State に関連する Transition 行のハイライト → グラフで State を選択した時、その State に関わる遷移行が枠光りして「これが設定」と分かる */ .animator-row-trans.animator-row-trans-related { border-color: #4a9eff !important; background: rgba(74, 158, 255, 0.10) !important; box-shadow: 0 0 0 1px rgba(74, 158, 255, 0.4), 0 0 12px rgba(74, 158, 255, 0.25); animation: animator-row-related-pulse 1.6s ease-in-out infinite; } @keyframes animator-row-related-pulse { 0%, 100% { box-shadow: 0 0 0 1px rgba(74, 158, 255, 0.4), 0 0 8px rgba(74, 158, 255, 0.18); } 50% { box-shadow: 0 0 0 1px rgba(74, 158, 255, 0.6), 0 0 16px rgba(74, 158, 255, 0.4); } } .animator-trans-arrow { color: #c084fc; font-weight: 700; } .animator-row-from, .animator-row-to { flex: 1; min-width: 0; } .animator-cond-list { padding: 6px 0 0 16px; border-left: 2px solid rgba(192, 132, 252, 0.25); margin-left: 4px; display: flex; flex-direction: column; gap: 4px; } .animator-cond-row { display: flex; gap: 4px; align-items: center; } .animator-cond-param { flex: 2; min-width: 0; } .animator-cond-op { width: 80px; } .animator-cond-val { flex: 1; min-width: 0; } .animator-cond-empty { font-size: 10px; color: var(--text-muted, #888); font-style: italic; padding: 2px 0; } .animator-cond-add { align-self: flex-start; padding: 3px 10px; font-size: 10px; background: rgba(192, 132, 252, 0.12); color: #d8caff; border: 1px dashed rgba(192, 132, 252, 0.45); border-radius: 3px; cursor: pointer; } .animator-cond-add:hover { background: rgba(192, 132, 252, 0.22); } /* ライトモード対応 */ body.light-mode #animator-overlay { background: linear-gradient(160deg, #f5f0ff, #ffffff); color: #222; } body.light-mode #animator-bar-title { color: #6f3fc8; } body.light-mode .animator-list-item-title { color: #222; } body.light-mode .animator-edit-heading, body.light-mode .animator-edit-target, body.light-mode .animator-row input, body.light-mode .animator-row select { background: #fff; color: #222; border-color: rgba(0,0,0,0.18); } /* ツールバー Animator ボタン */ .btn-animator { background: linear-gradient(135deg, #c084fc, #74ebd5) !important; color: #1a1525 !important; font-weight: 700; border: none !important; } .btn-animator:hover { filter: brightness(1.12); } /* ============================================================ Animator エディタ — Unity 風レイアウト ============================================================ */ /* メインの3ペイン横並び (States | Stage | Props) */ .animator-main-row { display: flex; gap: 10px; min-height: 340px; } .animator-pane-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; background: rgba(192, 132, 252, 0.1); border-bottom: 1px solid rgba(192, 132, 252, 0.2); font-size: 12px; font-weight: 700; color: #d8caff; } .animator-pane-add { width: 22px; height: 22px; font-size: 14px; font-weight: 800; background: rgba(192, 132, 252, 0.25); color: #fff; border: 1px solid rgba(192, 132, 252, 0.5); border-radius: 3px; cursor: pointer; } .animator-pane-add:hover { background: rgba(192, 132, 252, 0.4); } /* ── 左: State 一覧 ── */ .animator-states-pane { flex: 0 0 180px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; } .animator-states-list { flex: 1; overflow-y: auto; padding: 6px; } .animator-state-item { padding: 6px 8px; margin-bottom: 4px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 4px; cursor: pointer; } .animator-state-item:hover { background: rgba(192, 132, 252, 0.12); } .animator-state-item-active { background: rgba(192, 132, 252, 0.25) !important; border-color: #c084fc; } .animator-state-item-default { border-left: 3px solid #ffd666; } .animator-state-item-row { display: flex; align-items: center; gap: 4px; } .animator-state-default-mark { color: #ffd666; font-weight: 800; font-size: 14px; } .animator-state-name { flex: 1; font-size: 12px; color: #fff; } /* ★ State モードバッジ (F=フレーム / T=トラック) */ .animator-state-mode-badge { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 16px; font-size: 10px; font-weight: 700; border-radius: 3px; font-family: var(--font-mono, monospace); margin-right: 4px; letter-spacing: 0; flex-shrink: 0; } .animator-state-mode-frame { background: rgba(116, 235, 213, 0.18); color: #74ebd5; border: 1px solid rgba(116, 235, 213, 0.4); } .animator-state-mode-track { background: rgba(192, 132, 252, 0.18); color: #c084fc; border: 1px solid rgba(192, 132, 252, 0.4); } .animator-state-frames { font-size: 10px; color: var(--text-muted, #888); font-family: var(--font-mono, monospace); background: rgba(0,0,0,0.3); padding: 1px 5px; border-radius: 8px; } .animator-state-del { width: 18px; height: 18px; background: rgba(255, 100, 100, 0.15); color: #ff8c8c; border: 1px solid rgba(255, 100, 100, 0.35); border-radius: 3px; cursor: pointer; font-size: 11px; line-height: 1; } .animator-state-del:hover { background: rgba(255, 100, 100, 0.3); } /* ── 中央: Preview + Timeline ── */ .animator-stage-pane { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; } .animator-preview-wrap { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; } .animator-preview-canvas { position: relative; flex: 1; background: repeating-conic-gradient(rgba(255,255,255,0.04) 0% 25%, transparent 0% 50%) 0 0 / 24px 24px, #1a1525; min-height: 200px; display: flex; align-items: center; justify-content: center; overflow: hidden; /* ★ 3D アセット時に translateZ(position.z) が視覚的に効くように perspective を設定 */ perspective: 800px; perspective-origin: center center; } /* sprite クリックで選択可能なことを示すカーソル */ #animator-preview-img { cursor: pointer; } /* ★ 非 active Layer の sprite (Multi-Layer 機能) — scene 中央起点で absolute 配置 */ .animator-preview-layer-img { max-width: 100%; max-height: 100%; pointer-events: none; /* transform は JS が translate(-50%, -50%) + property 値で動的設定 */ } /* ─── 変形ギズモ (Move / Scale / Rotate) ─── */ .animator-gizmo { position: absolute; pointer-events: none; /* 子の handle / move エリアだけ反応する */ z-index: 5; } /* 破線の選択ボックス */ .animator-gizmo-box { position: absolute; inset: 0; border: 1px dashed #74ebd5; pointer-events: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4); } /* 中央エリア (Move ハンドル) — 角ハンドルと重ならないようインセット */ .animator-gizmo-move { position: absolute; inset: 10px; cursor: move; pointer-events: all; background: transparent; } /* 角の Scale ハンドル */ .animator-gizmo-handle { position: absolute; width: 10px; height: 10px; background: #74ebd5; border: 1px solid #fff; pointer-events: all; box-shadow: 0 0 4px rgba(0, 0, 0, 0.6); z-index: 2; } .animator-gizmo-handle:hover { background: #9ff5e0; transform: scale(1.2); } .animator-gizmo-handle-tl { top: -5px; left: -5px; cursor: nwse-resize; } .animator-gizmo-handle-tr { top: -5px; right: -5px; cursor: nesw-resize; } .animator-gizmo-handle-bl { bottom: -5px; left: -5px; cursor: nesw-resize; } .animator-gizmo-handle-br { bottom: -5px; right: -5px; cursor: nwse-resize; } /* Rotation ハンドル: ボックス上端から少し離した位置の丸 */ .animator-gizmo-handle-stem { position: absolute; top: -24px; left: 50%; width: 1px; height: 16px; background: #74ebd5; pointer-events: none; opacity: 0.7; } .animator-gizmo-handle-rot { position: absolute; top: -32px; left: 50%; width: 14px; height: 14px; transform: translateX(-50%); border-radius: 50%; background: #c084fc; border: 2px solid #fff; cursor: crosshair; box-shadow: 0 0 6px rgba(192, 132, 252, 0.6); } .animator-gizmo-handle-rot:hover { background: #d8b4fe; transform: translateX(-50%) scale(1.2); } body.light-mode .animator-preview-canvas { background: repeating-conic-gradient(rgba(0,0,0,0.04) 0% 25%, transparent 0% 50%) 0 0 / 24px 24px, #f3f0fa; } #animator-preview-img { max-width: 100%; max-height: 220px; object-fit: contain; image-rendering: pixelated; } .animator-preview-empty { font-size: 13px; color: var(--text-muted, #888); font-style: italic; text-align: center; padding: 0 20px; } .animator-preview-info { position: absolute; top: 6px; left: 8px; font-size: 10px; color: rgba(255,255,255,0.6); background: rgba(0,0,0,0.5); padding: 2px 6px; border-radius: 3px; /* ゴシック (sans-serif) で統一 — 旧 monospace は数字以外も等幅で読みづらかった */ } body.light-mode .animator-preview-info { color: #fff; background: rgba(0,0,0,0.4); } /* ★ Preview Scene コンテナ — pan/zoom 対象。Sprite + 原点 + ギズモ をまとめる。 中ボタン or Space+ドラッグで pan、ホイールで zoom。 */ .animator-preview-scene { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transform-origin: center center; /* 高速化のため will-change を指定。pan/zoom 中だけアニメ */ will-change: transform; /* 子要素は通常通り操作可 (default: pointer-events auto) */ } /* View 倍率表示 (右上角、クリックでリセット) */ .animator-preview-view-info { position: absolute; top: 6px; right: 8px; font-size: 10px; font-weight: 700; color: rgba(255,255,255,0.7); background: rgba(0,0,0,0.45); padding: 2px 7px; border-radius: 3px; cursor: pointer; user-select: none; z-index: 4; font-variant-numeric: tabular-nums; } .animator-preview-view-info:hover { background: rgba(0,0,0,0.65); color: #fff; } /* ★ Preview 原点 (0,0) マーカー プレビューキャンバスの中央 = Position(0,0) の場所を示す十字グリッド + 小ラベル sprite はこの位置を中心に Position X/Y で移動する。 ★ scene の外に置き、JS から pan のみ transform 適用 (scale なし) → 拡縮しても十字ラインの長さは伸縮せず、常に画面両端まで届いた表示を維持。 ライン本体は ::before / ::after で 10000px (preview-canvas は overflow:hidden で安全にクリップ)。 */ .animator-preview-origin-marker { position: absolute; top: 50%; left: 50%; width: 0; height: 0; /* 中心点だけ (ライン描画は擬似要素) */ pointer-events: none; z-index: 3; will-change: transform; /* pan 反映の高速化 */ transform-origin: center center; } /* 横線 (X 軸方向): 中心から左右に 5000px ずつ伸ばす → 画面端まで余裕 */ .animator-preview-origin-marker::before { content: ''; position: absolute; top: -0.5px; left: -5000px; width: 10000px; height: 1px; background: rgba(255,255,255,0.30); box-shadow: 0 0 1px rgba(0,0,0,0.5); /* 暗背景・明背景 両方で見えるように */ } /* 縦線 (Y 軸方向): 中心から上下に 5000px ずつ */ .animator-preview-origin-marker::after { content: ''; position: absolute; left: -0.5px; top: -5000px; width: 1px; height: 10000px; background: rgba(255,255,255,0.30); box-shadow: 0 0 1px rgba(0,0,0,0.5); } .animator-preview-origin-label { position: absolute; top: 4px; /* 原点の右下に小さく */ left: 4px; font-size: 9px; color: rgba(255,255,255,0.5); background: rgba(0,0,0,0.4); padding: 1px 4px; border-radius: 2px; white-space: nowrap; font-variant-numeric: tabular-nums; } /* ★ Preview 座標軸ギズモ (Unity 互換: +X=右 / +Y=上 / +Z=奥) 半透明オーバーレイで sprite 操作を邪魔しない。3D モードでは Z 軸も表示。 */ .animator-preview-axis-gizmo { position: absolute; left: 8px; bottom: 8px; width: 70px; height: 70px; pointer-events: none; /* ギズモ上のクリックは sprite に通す */ opacity: 0.85; filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.7)); z-index: 5; } .animator-preview-axis-gizmo line, .animator-preview-axis-gizmo polygon { stroke-linejoin: round; stroke-linecap: round; } .animator-preview-controls { display: flex; align-items: center; gap: 6px; padding: 6px 10px; background: rgba(0,0,0,0.3); border-top: 1px solid rgba(255,255,255,0.06); } body.light-mode .animator-preview-controls { background: rgba(0,0,0,0.06); } .animator-pc-btn { width: 32px; height: 28px; font-size: 14px; background: rgba(192, 132, 252, 0.2); color: #fff; border: 1px solid rgba(192, 132, 252, 0.4); border-radius: 4px; cursor: pointer; flex-shrink: 0; white-space: nowrap; } .animator-pc-btn:disabled { opacity: 0.35; cursor: not-allowed; } .animator-pc-btn:not(:disabled):hover { background: rgba(192, 132, 252, 0.35); } .animator-pc-play { background: rgba(116, 235, 213, 0.25); border-color: rgba(116, 235, 213, 0.5); color: #74ebd5; } /* ★ 開始位置に戻る (⏮) - シアン系。再生中でも停止中でも使える「リセット」 */ .animator-pc-reset { background: rgba(116, 235, 213, 0.15); border-color: rgba(116, 235, 213, 0.4); color: #74ebd5; font-size: 14px; font-variant-emoji: text; } .animator-pc-reset:not(:disabled):hover { background: rgba(116, 235, 213, 0.3); } /* ★ プレビュー再生速度セレクタ (×1.0 / ×0.5 / ×0.25 / ×0.1) - スロー再生用 */ .animator-pc-speed-toggle { display: inline-flex; padding: 2px; background: #2a2a2a; border: 1px solid #4a4a4a; border-radius: 4px; gap: 0; margin: 0 4px; flex-shrink: 0; } .animator-pc-speed-btn { padding: 2px 7px; font-size: 10px; font-weight: 700; background: transparent; color: var(--ani-text-mute, #999); border: none; border-radius: 2px; cursor: pointer; transition: background 0.12s, color 0.12s; white-space: nowrap; flex-shrink: 0; } .animator-pc-speed-btn:hover { background: rgba(116, 235, 213, 0.12); color: #ddd; } .animator-pc-speed-btn.animator-pc-speed-active { background: linear-gradient(135deg, #2d5a52, #1f4540); color: #74ebd5; box-shadow: inset 0 0 3px rgba(0,0,0,0.4); } .animator-pc-pad { width: auto; padding: 0 10px; font-size: 11px; font-weight: 700; background: rgba(192, 132, 252, 0.18); color: #c084fc; border-color: rgba(192, 132, 252, 0.5); /* ★ 中央軸揃え (✚) ボタンの直右に配置 — margin-left:auto は外す */ } .animator-pc-pad:hover { background: rgba(192, 132, 252, 0.3); } .animator-pc-pad-active { background: linear-gradient(135deg, #5a3f8a, #3d2960) !important; color: #fff !important; border-color: #c084fc !important; box-shadow: inset 0 0 6px rgba(0,0,0,0.4); } /* PAD パネル: Preview 内右側にスライドイン */ .animator-preview-main { flex: 1; display: flex; flex-direction: row; min-height: 0; position: relative; } .animator-preview-pad-panel { flex: 0 0 0; width: 0; overflow: hidden; background: linear-gradient(135deg, #2a2a2a, #1f1f1f); border-left: 0 solid #4a4a4a; transition: flex-basis 0.25s cubic-bezier(0.4, 0, 0.2, 1), width 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-left-width 0.25s; display: flex; flex-direction: column; gap: 12px; } .animator-preview-pad-open .animator-preview-pad-panel { flex: 0 0 240px; width: 240px; padding: 10px 12px; overflow-y: auto; border-left-width: 1px; } .animator-pad-section { display: flex; flex-direction: column; gap: 6px; } .animator-pad-section-title { font-size: 11px; font-weight: 700; color: #c084fc; letter-spacing: 0.04em; padding-bottom: 4px; border-bottom: 1px solid rgba(192, 132, 252, 0.2); } .animator-pad-hint { font-size: 9px; color: #888; font-weight: 400; letter-spacing: 0; } .animator-pad-empty { font-size: 11px; color: #888; font-style: italic; padding: 6px; text-align: center; } .animator-pad-params { display: flex; flex-direction: column; gap: 4px; } .animator-pad-params .animator-livetest-param { background: rgba(255, 255, 255, 0.03); padding: 4px 6px; font-size: 10px; } .animator-pad-params .animator-livetest-name { min-width: 50px; font-size: 10px; } .animator-pad-params .animator-livetest-slider { min-width: 50px; } .animator-pad-params .animator-livetest-value { font-size: 10px; min-width: 32px; } .animator-pad-gamepad { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px; } .animator-pad-mapping { font-size: 10px; color: #888; padding: 4px 6px; background: rgba(255, 255, 255, 0.03); border-radius: 3px; line-height: 1.4; text-align: center; } /* ── パラメータブロック (パラメータ + キーバインド設定の組) ── */ .animator-pad-param-block { padding: 8px 8px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 4px; margin-bottom: 4px; } .animator-pad-param-block .animator-livetest-param { background: transparent; border: none; padding: 0 0 6px 0; margin-bottom: 6px; border-bottom: 1px dashed rgba(255, 255, 255, 0.08); } /* バインド行 */ .animator-pad-bind-row { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .animator-pad-bind-icon { font-size: 10px; color: #c084fc; } .animator-pad-bind-keys { display: inline-flex; flex-wrap: wrap; gap: 3px; flex: 1; min-width: 60px; } .animator-pad-bind-key { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px; background: rgba(192, 132, 252, 0.18); color: #c084fc; border: 1px solid rgba(192, 132, 252, 0.4); border-radius: 3px; font-family: var(--font-mono, monospace); font-size: 10px; font-weight: 700; cursor: pointer; transition: background 0.12s; } .animator-pad-bind-key:hover { background: rgba(255, 100, 100, 0.25); color: #ff8c8c; border-color: rgba(255, 100, 100, 0.5); } .animator-pad-bind-key-x { opacity: 0.5; font-size: 9px; } .animator-pad-bind-key:hover .animator-pad-bind-key-x { opacity: 1; } .animator-pad-bind-none { font-size: 10px; color: #666; font-style: italic; padding: 1px 4px; } .animator-pad-bind-add { padding: 2px 6px; font-size: 10px; font-weight: 700; background: rgba(116, 235, 213, 0.12); color: #74ebd5; border: 1px solid rgba(116, 235, 213, 0.4); border-radius: 3px; cursor: pointer; white-space: nowrap; } .animator-pad-bind-add:hover { background: rgba(116, 235, 213, 0.25); } .animator-pad-bind-listening { background: linear-gradient(135deg, #c084fc, #9d6dd9) !important; color: #fff !important; border-color: #c084fc !important; animation: animator-pad-listening 0.8s ease-in-out infinite; } @keyframes animator-pad-listening { 0%, 100% { box-shadow: 0 0 4px rgba(192, 132, 252, 0.4); } 50% { box-shadow: 0 0 12px rgba(192, 132, 252, 0.8); } } .animator-pad-bind-mode { padding: 2px 4px !important; font-size: 9px !important; width: auto; flex: 0 0 auto; max-width: 110px; } .animator-pad-bind-value { width: 40px !important; padding: 2px 4px !important; font-size: 9px !important; text-align: right; } /* Export 行 */ .animator-pad-export-row { display: flex; flex-direction: column; gap: 4px; } .animator-pad-export-btn { padding: 5px 10px; font-size: 10px; font-weight: 600; background: linear-gradient(135deg, #4a4a4a, #3a3a3a); color: #e0e0e0; border: 1px solid #5a5a5a; border-radius: 3px; cursor: pointer; text-align: center; } .animator-pad-export-btn:hover { background: linear-gradient(135deg, #5a5a5a, #4a4a4a); border-color: #c084fc; } /* PAD ボタンのキーマップ設定行 */ .animator-pad-mapping-rows { display: flex; flex-direction: column; gap: 3px; } .animator-pad-mapping-row { display: flex; align-items: center; gap: 6px; padding: 4px 6px; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 3px; } .animator-pad-mapping-btn { flex: 0 0 auto; min-width: 50px; padding: 2px 6px; background: rgba(192, 132, 252, 0.12); color: #c084fc; border: 1px solid rgba(192, 132, 252, 0.3); border-radius: 3px; font-size: 10px; font-weight: 700; font-family: var(--font-mono, monospace); text-align: center; } .animator-pad-key-add { padding: 1px 6px; font-size: 10px; font-weight: 700; background: rgba(116, 235, 213, 0.12); color: #74ebd5; border: 1px solid rgba(116, 235, 213, 0.3); border-radius: 3px; cursor: pointer; white-space: nowrap; } .animator-pad-key-add:hover { background: rgba(116, 235, 213, 0.25); } .animator-pad-reset-btn { margin-left: auto; padding: 2px 8px; font-size: 9px; background: rgba(255, 255, 255, 0.04); color: #aaa; border: 1px solid #4a4a4a; border-radius: 3px; cursor: pointer; } .animator-pad-reset-btn:hover { background: rgba(255, 255, 255, 0.1); color: #ddd; } /* ============================================================ 🎮 State Machine 内の PAD 設定ビュー (3 セグメントモード) ============================================================ */ /* 3 セグメントコントロール: Graph / Storyboard / PAD Settings */ .animator-sm-mode-group { display: inline-flex; padding: 2px; background: #2a2a2a; border: 1px solid #4a4a4a; border-radius: 4px; gap: 0; } .animator-sm-mode-btn { padding: 3px 9px; font-size: 10px; font-weight: 700; background: transparent; color: var(--ani-text-mute, #a8a8a8); border: none; border-radius: 3px; cursor: pointer; transition: background 0.12s, color 0.12s; } .animator-sm-mode-btn:hover { background: rgba(192, 132, 252, 0.12); color: #ddd; } .animator-sm-mode-active { background: linear-gradient(135deg, #5a3f8a, #3d2960) !important; color: #fff !important; box-shadow: inset 0 0 4px rgba(0,0,0,0.4); } /* PAD 設定ビューのコンテナ */ .animator-canvas-padsettings { overflow: auto !important; padding: 12px !important; background: #1f1f1f !important; } .animator-canvas-padsettings #animator-state-graph-svg { display: none; } .animator-padcfg-wrap { display: flex; flex-direction: column; gap: 12px; padding: 4px; } /* ブロック (PAD ボタン / Parameter / Export) */ .animator-padcfg-block { background: #2a2a2a; border: 1px solid #4a4a4a; border-radius: 6px; overflow: hidden; } .animator-padcfg-block-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: linear-gradient(180deg, #3a3a3a, #2d2d2d); border-bottom: 1px solid #4a4a4a; font-size: 12px; font-weight: 700; color: #c084fc; letter-spacing: 0.02em; } .animator-padcfg-block-actions { display: flex; gap: 6px; } .animator-padcfg-add-btn, .animator-padcfg-reset { padding: 3px 10px; font-size: 10px; font-weight: 700; background: rgba(192, 132, 252, 0.18); color: #c084fc; border: 1px solid rgba(192, 132, 252, 0.4); border-radius: 3px; cursor: pointer; } .animator-padcfg-add-btn:hover, .animator-padcfg-reset:hover { background: rgba(192, 132, 252, 0.3); } .animator-padcfg-reset { background: rgba(255, 255, 255, 0.06); color: #aaa; border-color: #4a4a4a; } .animator-padcfg-rows { padding: 8px 12px; display: flex; flex-direction: column; gap: 6px; } /* PAD ボタン行 */ .animator-padcfg-row, .animator-padcfg-param-row { display: flex; align-items: center; gap: 8px; padding: 8px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 4px; flex-wrap: wrap; } .animator-padcfg-icon { font-size: 16px; flex-shrink: 0; min-width: 20px; text-align: center; } .animator-padcfg-label, .animator-padcfg-cluster, .animator-padcfg-param-mode, .animator-padcfg-value { padding: 4px 8px; background: #1f1f1f; color: #e0e0e0; border: 1px solid #4a4a4a; border-radius: 3px; font-size: 11px; } .animator-padcfg-label { width: 100px; } .animator-padcfg-cluster { width: 80px; } .animator-padcfg-param-mode { flex: 0 0 auto; max-width: 200px; } .animator-padcfg-value { width: 60px; } .animator-padcfg-label:focus, .animator-padcfg-cluster:focus, .animator-padcfg-param-mode:focus, .animator-padcfg-value:focus { outline: none; border-color: #c084fc; } .animator-padcfg-param-name { font-weight: 700; font-size: 13px; color: #e0e0e0; min-width: 100px; } .animator-padcfg-param-type { font-size: 10px; padding: 1px 6px; background: rgba(116, 235, 213, 0.15); color: #74ebd5; border-radius: 3px; font-family: var(--font-mono, monospace); } .animator-padcfg-keys { display: inline-flex; flex-wrap: wrap; gap: 4px; flex: 1; min-width: 100px; } .animator-padcfg-key { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; background: rgba(116, 235, 213, 0.15); color: #74ebd5; border: 1px solid rgba(116, 235, 213, 0.4); border-radius: 3px; font-family: var(--font-mono, monospace); font-size: 11px; font-weight: 700; cursor: pointer; transition: background 0.12s; } .animator-padcfg-key:hover { background: rgba(255, 100, 100, 0.25); color: #ff8c8c; border-color: rgba(255, 100, 100, 0.5); } .animator-padcfg-key-x { opacity: 0.5; font-size: 10px; } .animator-padcfg-key:hover .animator-padcfg-key-x { opacity: 1; } .animator-padcfg-none { font-size: 11px; color: #666; font-style: italic; } .animator-padcfg-add, .animator-padcfg-param-add { padding: 3px 10px; font-size: 11px; font-weight: 700; background: rgba(116, 235, 213, 0.12); color: #74ebd5; border: 1px solid rgba(116, 235, 213, 0.3); border-radius: 3px; cursor: pointer; white-space: nowrap; } .animator-padcfg-add:hover, .animator-padcfg-param-add:hover { background: rgba(116, 235, 213, 0.25); } .animator-padcfg-listening { background: linear-gradient(135deg, #c084fc, #9d6dd9) !important; color: #fff !important; border-color: #c084fc !important; animation: animator-pad-listening 0.8s ease-in-out infinite; } .animator-padcfg-del-btn { width: 26px; height: 26px; padding: 0; background: rgba(255, 100, 100, 0.12); color: #ff8c8c; border: 1px solid rgba(255, 100, 100, 0.3); border-radius: 3px; cursor: pointer; font-size: 13px; } .animator-padcfg-del-btn:hover { background: rgba(255, 100, 100, 0.25); } .animator-padcfg-empty { padding: 14px; font-size: 12px; color: #888; font-style: italic; text-align: center; } /* Export 行 */ .animator-padcfg-export-row { display: flex; gap: 8px; padding: 10px 12px; } .animator-padcfg-export-btn { padding: 6px 14px; font-size: 11px; font-weight: 600; background: linear-gradient(135deg, #4a4a4a, #3a3a3a); color: #e0e0e0; border: 1px solid #5a5a5a; border-radius: 4px; cursor: pointer; } .animator-padcfg-export-btn:hover { background: linear-gradient(135deg, #5a5a5a, #4a4a4a); border-color: #c084fc; } /* Preview PAD パネル スリム化版 のヒント */ .animator-pad-cfg-hint { font-size: 11px; color: #a8a8a8; padding: 8px 10px; background: rgba(116, 235, 213, 0.08); border-left: 3px solid #74ebd5; border-radius: 3px; line-height: 1.5; } .animator-pad-cfg-hint b { color: #74ebd5; } /* ── プレビュー Mode 切替 (Clip / Machine) ── */ .animator-preview-mode-toggle { display: inline-flex; align-items: center; padding: 2px; background: #2a2a2a; border: 1px solid #4a4a4a; border-radius: 5px; gap: 0; } .animator-preview-mode-btn { padding: 3px 10px; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; background: transparent; color: var(--ani-text-mute); border: none; border-radius: 3px; cursor: pointer; transition: background 0.12s, color 0.12s; } .animator-preview-mode-btn:hover { background: rgba(192, 132, 252, 0.12); color: #ddd; } .animator-preview-mode-active { background: linear-gradient(135deg, #6a4fa0, #4a3673) !important; color: #fff !important; box-shadow: inset 0 0 4px rgba(0,0,0,0.4); } .animator-pc-frame-info { margin-left: auto; font-size: 11px; color: var(--text-muted, #aaa); font-family: var(--font-mono, monospace); } /* タイムライン */ .animator-timeline-wrap { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; overflow: hidden; } .animator-timeline-head { display: flex; align-items: center; gap: 10px; padding: 6px 10px; background: rgba(192, 132, 252, 0.08); border-bottom: 1px solid rgba(192, 132, 252, 0.18); font-size: 12px; font-weight: 700; color: #d8caff; } .animator-timeline-hint { flex: 1; font-size: 10px; font-weight: 400; color: var(--text-muted, #888); } .animator-timeline-addbtn button { padding: 3px 10px; font-size: 11px; background: rgba(116, 235, 213, 0.2); color: #74ebd5; border: 1px solid rgba(116, 235, 213, 0.45); border-radius: 3px; cursor: pointer; font-weight: 700; } .animator-timeline-addbtn button:hover { background: rgba(116, 235, 213, 0.32); } .animator-timeline { min-height: 90px; padding: 8px; display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; } .animator-timeline-dragover { background: rgba(116, 235, 213, 0.08); outline: 2px dashed rgba(116, 235, 213, 0.5); outline-offset: -4px; } .animator-timeline-empty { flex: 1; font-size: 11px; color: var(--text-muted, #888); text-align: center; padding: 14px; font-style: italic; } .animator-frame-cell { position: relative; width: 72px; height: 72px; background: rgba(0,0,0,0.4); border: 2px solid rgba(255,255,255,0.1); border-radius: 4px; cursor: pointer; overflow: hidden; flex-shrink: 0; } .animator-frame-cell img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; } .animator-frame-cell:hover { border-color: rgba(192, 132, 252, 0.6); } .animator-frame-cell-selected { border-color: #c084fc !important; box-shadow: 0 0 0 2px rgba(192, 132, 252, 0.4); } .animator-frame-cell-dragover { border-color: #74ebd5 !important; box-shadow: 0 0 0 3px rgba(116, 235, 213, 0.5); } .animator-frame-num { position: absolute; top: 2px; left: 2px; font-size: 10px; font-weight: 800; background: rgba(0,0,0,0.7); color: #fff; padding: 1px 5px; border-radius: 2px; font-family: var(--font-mono, monospace); } .animator-frame-del { position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; background: rgba(255, 100, 100, 0.85); color: #fff; border: none; border-radius: 2px; cursor: pointer; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; line-height: 1; opacity: 0; transition: opacity 0.15s; } .animator-frame-cell:hover .animator-frame-del { opacity: 1; } .animator-frame-del:hover { background: #ff5555; } /* ── 右: State プロパティ ── */ .animator-props-pane { flex: 0 0 220px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; } .animator-props-body { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; } .animator-prop-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-muted, #ccc); } .animator-prop-row span { flex: 0 0 80px; font-weight: 600; } .animator-prop-row input[type="text"], .animator-prop-row input[type="number"] { flex: 1; padding: 4px 6px; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.15); color: #fff; font-size: 12px; border-radius: 3px; } body.light-mode .animator-prop-row input[type="text"], body.light-mode .animator-prop-row input[type="number"] { background: #fff; color: #222; border-color: rgba(0,0,0,0.18); } .animator-prop-row-check input { transform: scale(1.2); } .animator-prop-hint { margin-top: 6px; padding: 6px 8px; background: rgba(255, 214, 102, 0.06); border: 1px dashed rgba(255, 214, 102, 0.3); border-radius: 4px; font-size: 10px; color: #ffd666; line-height: 1.5; } body.light-mode .animator-prop-hint { color: #aa7800; background: rgba(255, 196, 60, 0.08); } /* ── 下部タブ (Parameters / Transitions / Bindings) ── */ .animator-tabs { margin-top: 12px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; overflow: hidden; } .animator-tab-bar { display: flex; align-items: stretch; background: rgba(0,0,0,0.3); border-bottom: 1px solid rgba(255,255,255,0.08); } .animator-tab-btn { padding: 10px 16px; background: transparent; color: var(--text-muted, #aaa); border: none; border-right: 1px solid rgba(255,255,255,0.06); cursor: pointer; font-size: 12px; font-weight: 700; } .animator-tab-btn:hover { background: rgba(255,255,255,0.04); color: #fff; } .animator-tab-active { background: rgba(192, 132, 252, 0.12) !important; color: #d8caff !important; box-shadow: inset 0 -2px 0 #c084fc; } .animator-tab-add { margin-left: auto; padding: 6px 14px; background: rgba(192, 132, 252, 0.2); color: #fff; border: none; border-left: 1px solid rgba(255,255,255,0.06); cursor: pointer; font-size: 11px; font-weight: 700; } .animator-tab-add:hover { background: rgba(192, 132, 252, 0.35); } .animator-tab-body { padding: 12px; max-height: 280px; overflow-y: auto; } /* レスポンシブ: 縦が狭い時 */ @media (max-height: 720px) { .animator-main-row { min-height: 280px; } .animator-preview-canvas { min-height: 160px; } #animator-preview-img { max-height: 170px; } .animator-frame-cell { width: 60px; height: 60px; } } /* ============================================================ Animator タイムライン — Property Tracks (キーフレーム + イージング) ============================================================ */ .animator-time-ruler { position: relative; height: 18px; margin: 0 8px 4px 96px; /* 左に Track label 分の余白 */ border-bottom: 1px solid rgba(255,255,255,0.1); } .animator-time-ruler span { position: absolute; top: 2px; transform: translateX(-50%); font-size: 9px; color: var(--text-muted, #888); font-family: var(--font-mono, monospace); } .animator-time-ruler span::after { content: ''; position: absolute; left: 50%; bottom: -6px; width: 1px; height: 4px; background: rgba(255,255,255,0.2); } .animator-track-row { display: flex; align-items: center; gap: 4px; margin: 2px 0; padding: 2px 8px; } .animator-track-row-sprite { /* 既存のスプライト行: もとのスタイルを保ちつつ label 列を持つ */ padding: 4px 8px; } .animator-track-row-sprite #animator-timeline { flex: 1; margin-left: 0; min-height: 90px; padding: 4px; background: rgba(0,0,0,0.18); border: 1px solid rgba(255,255,255,0.06); border-radius: 4px; } .animator-track-label { flex: 0 0 88px; font-size: 11px; font-weight: 600; color: #d8caff; text-align: right; padding-right: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ── Phase 4 で削除 ── * .animator-track-bar / .animator-kf* / .animator-tracks-empty は * Canvas (`_animatorDrawTLPropertyTracks` + `_animatorDrawDiamond`) に統合されたため CSS 不要。 * キーフレーム色分け (linear/easeIn/easeOut/easeInOut/constant) は `TL_KF_COLORS` 定数を参照。 */ .animator-track-add-row { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding: 8px 12px; border-top: 1px dashed rgba(255,255,255,0.08); margin-top: 4px; } .animator-track-add-label { font-size: 10px; color: var(--text-muted, #888); margin-right: 4px; } .animator-track-add-btn { padding: 3px 9px; font-size: 10px; background: rgba(192, 132, 252, 0.15); color: #d8caff; border: 1px solid rgba(192, 132, 252, 0.4); border-radius: 3px; cursor: pointer; font-weight: 600; } .animator-track-add-btn:hover { background: rgba(192, 132, 252, 0.3); color: #fff; } /* ============================================================ Keyframe Inspector (右ペイン swap) ============================================================ */ .animator-kf-inspector-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid rgba(255, 214, 102, 0.3); font-size: 13px; font-weight: 700; color: #ffd666; } .animator-kf-back { padding: 3px 8px; font-size: 10px; background: rgba(255, 214, 102, 0.15); color: #ffd666; border: 1px solid rgba(255, 214, 102, 0.4); border-radius: 3px; cursor: pointer; font-weight: 600; } .animator-kf-back:hover { background: rgba(255, 214, 102, 0.3); } .animator-kf-prop-name { padding: 4px 8px; background: rgba(192, 132, 252, 0.12); color: #d8caff; border-radius: 3px; font-size: 12px; font-weight: 700; text-align: center; margin-bottom: 4px; } .animator-kf-curve-hint { margin-top: 8px; padding: 6px 8px; background: rgba(255,255,255,0.04); border-left: 2px solid rgba(192, 132, 252, 0.4); border-radius: 3px; font-size: 10px; color: var(--text-muted, #aaa); line-height: 1.6; } .animator-kf-curve-row b { color: #d8caff; } .animator-kf-del-btn { margin-top: 8px; padding: 6px 10px; background: rgba(255, 100, 100, 0.15); color: #ff8c8c; border: 1px solid rgba(255, 100, 100, 0.4); border-radius: 3px; cursor: pointer; font-size: 11px; font-weight: 700; width: 100%; } .animator-kf-del-btn:hover { background: rgba(255, 100, 100, 0.3); } .animator-prop-row select { flex: 1; padding: 4px 6px; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.15); color: #fff; font-size: 12px; border-radius: 3px; } body.light-mode .animator-prop-row select { background: #fff; color: #222; border-color: rgba(0,0,0,0.18); } /* ============================================================ Animator: Unity 用語ガイド + セクション区切り ============================================================ */ /* ヘッダー: Animator Controller ラベル + ガイドボタン */ .animator-edit-header-label { flex: 0 0 auto; padding: 6px 10px; background: linear-gradient(90deg, rgba(192, 132, 252, 0.4), rgba(116, 235, 213, 0.25)); color: #fff; font-size: 12px; font-weight: 800; border-radius: 4px; letter-spacing: 0.5px; } .animator-help-toggle { padding: 6px 12px; background: rgba(255, 214, 102, 0.15); color: #ffd666; border: 1px solid rgba(255, 214, 102, 0.4); border-radius: 4px; cursor: pointer; font-size: 11px; font-weight: 700; } .animator-help-toggle:hover { background: rgba(255, 214, 102, 0.3); } .animator-help-toggle-active { background: rgba(255, 214, 102, 0.35) !important; } .animator-help-panel { padding: 12px 16px; margin-bottom: 12px; background: rgba(255, 214, 102, 0.06); border: 1px solid rgba(255, 214, 102, 0.25); border-radius: 6px; } .animator-help-headline { padding: 10px 12px; margin-bottom: 10px; background: linear-gradient(90deg, rgba(192, 132, 252, 0.18), rgba(116, 235, 213, 0.12)); border-left: 3px solid #c084fc; border-radius: 4px; font-size: 12px; color: var(--text-main, #ddd); line-height: 1.6; } .animator-help-headline b { color: #d8caff; } body.light-mode .animator-help-headline { color: #333; } body.light-mode .animator-help-headline b { color: #6f3fc8; } .animator-help-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; } .animator-help-cell { padding: 8px 10px; background: rgba(255,255,255,0.04); border-radius: 4px; border-left: 3px solid #ffd666; } .animator-help-title { font-size: 12px; font-weight: 800; color: #ffd666; margin-bottom: 3px; } .animator-help-desc { font-size: 11px; color: var(--text-muted, #ccc); line-height: 1.5; } .animator-help-note { margin-top: 10px; padding: 8px 10px; background: rgba(116, 235, 213, 0.08); border-left: 3px solid #74ebd5; border-radius: 4px; font-size: 11px; color: var(--text-main, #ddd); line-height: 1.6; } .animator-help-note b { color: #74ebd5; } body.light-mode .animator-help-panel { background: rgba(255, 196, 60, 0.06); border-color: rgba(255, 196, 60, 0.3); } body.light-mode .animator-help-cell { background: rgba(0,0,0,0.03); border-left-color: #c08a00; } body.light-mode .animator-help-title { color: #c08a00; } body.light-mode .animator-help-note { background: rgba(116, 235, 213, 0.08); } body.light-mode .animator-help-note b { color: #2a6db3; } /* ペインヘッダーのタイトル/サブタイトル2段組 */ .animator-pane-head-titles { display: flex; flex-direction: column; line-height: 1.2; } .animator-pane-title { font-size: 12px; font-weight: 800; color: #d8caff; } .animator-pane-subtitle { font-size: 9px; color: var(--text-muted, #888); font-weight: 400; margin-top: 1px; } .animator-pane-foot-hint { padding: 6px 10px; font-size: 10px; color: var(--text-muted, #888); font-style: italic; border-top: 1px dashed rgba(255,255,255,0.06); line-height: 1.4; } /* 中央: Animation Clip セクション見出し */ .animator-clip-section-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: linear-gradient(90deg, rgba(116, 235, 213, 0.18), rgba(116, 235, 213, 0.05)); border-left: 4px solid #74ebd5; border-radius: 4px 4px 0 0; margin-bottom: 6px; } .animator-clip-section-icon { font-size: 16px; } .animator-clip-section-title { font-size: 13px; font-weight: 800; color: #74ebd5; } .animator-clip-section-title b { color: #fff; } .animator-clip-section-hint { margin-left: auto; font-size: 10px; color: var(--text-muted, #aaa); font-style: italic; } /* 下部: Animator Controller セクション見出し */ .animator-controller-section-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; margin-top: 16px; background: linear-gradient(90deg, rgba(192, 132, 252, 0.25), rgba(192, 132, 252, 0.05)); border-left: 4px solid #c084fc; border-radius: 4px 4px 0 0; } .animator-controller-section-icon { font-size: 18px; } .animator-controller-section-title { font-size: 14px; font-weight: 800; color: #d8caff; } .animator-controller-section-hint { margin-left: auto; font-size: 10px; color: var(--text-muted, #aaa); font-style: italic; } /* 右ペイン: プロパティのグループ分け (Animation Clip / State) */ .animator-props-group { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05); border-radius: 5px; padding: 8px; display: flex; flex-direction: column; gap: 6px; } .animator-props-group + .animator-props-group { border-top-width: 1px; } .animator-props-group-head { font-size: 11px; font-weight: 800; color: #d8caff; letter-spacing: 0.5px; padding-bottom: 4px; border-bottom: 1px solid rgba(192, 132, 252, 0.2); } .animator-props-group-sub { font-size: 9px; color: var(--text-muted, #888); margin-top: -2px; font-style: italic; line-height: 1.4; } /* Animation Clip グループ (シアン) / State グループ (紫) で軽く色分け */ .animator-props-group:nth-of-type(1) .animator-props-group-head { color: #74ebd5; border-bottom-color: rgba(116, 235, 213, 0.3); } .animator-props-group:nth-of-type(2) .animator-props-group-head { color: #d8caff; border-bottom-color: rgba(192, 132, 252, 0.3); } /* 下部タブの説明バナー */ .animator-tab-desc { margin-bottom: 10px; padding: 6px 10px; background: rgba(192, 132, 252, 0.08); border-left: 3px solid #c084fc; border-radius: 3px; font-size: 11px; color: var(--text-main, #ccc); line-height: 1.5; } .animator-tab-desc b { color: #d8caff; } .animator-tab-desc code { font-family: var(--font-mono, monospace); font-size: 10px; padding: 1px 5px; background: rgba(0,0,0,0.35); border-radius: 2px; color: #74ebd5; } body.light-mode .animator-tab-desc { color: #444; background: rgba(192, 132, 252, 0.08); } body.light-mode .animator-tab-desc b { color: #6f3fc8; } body.light-mode .animator-tab-desc code { color: #2a6db3; background: rgba(0,0,0,0.06); } /* ============================================================ GSAnim エディタ 2カラムレイアウト + 折りたたみセクション ============================================================ */ .animator-split-row { flex: 1; display: flex; gap: 0; align-items: stretch; min-height: 0; overflow: hidden; } .animator-col { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 0; overflow: hidden; } .animator-col-animation { flex: 1.4 1 0; padding-right: 6px; } .animator-col-controller { flex: 1 1 0; padding-left: 6px; } /* カラム見出し */ /* ウィンドウヘッダー（カラム上部に固定。スリム + ゴシック） */ .animator-col-head { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; padding: 4px 10px; /* 縦薄めに */ background: linear-gradient(90deg, #3f4d46, #353d39); border-left: 3px solid var(--ani-accent-anim); border-bottom: 1px solid var(--ani-accent-anim); border-radius: 3px 3px 0 0; color: var(--ani-text); font-family: 'Hiragino Sans', 'Yu Gothic UI', 'Meiryo', sans-serif; /* ゴシック明示 */ font-size: 12px; font-weight: 700; letter-spacing: 0.02em; margin-bottom: 3px; user-select: none; cursor: default; flex-shrink: 0; position: relative; z-index: 2; } .animator-col-head-ctrl { background: linear-gradient(90deg, #423e4e, #353043); border-left-color: var(--ani-accent-ctrl); border-bottom-color: var(--ani-accent-ctrl); } .animator-col-head-icon { font-size: 14px !important; } .animator-col-head-title { font-size: 12px !important; } .animator-col-head-sub { font-size: 9px !important; } .animator-col-head-icon { font-size: 16px; } .animator-col-head-title { letter-spacing: 0.5px; } .animator-col-head-title b { color: #fff; } .animator-col-head-sub { margin-left: 6px; font-size: 10px; font-weight: 400; color: #c8c8c8; font-style: italic; } .animator-col-head-sub b { color: var(--ani-accent-anim); font-style: normal; } .animator-col-head-ctrl .animator-col-head-sub b { color: var(--ani-accent-ctrl); } /* Animator カラムヘッダー右端のメタ情報（State / Param / Trans 数） */ .animator-col-head-meta { margin-left: auto; /* 右端まで押し出し */ font-size: 10px; font-weight: 600; color: #d8d8d8; padding: 3px 8px; background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 4px; white-space: nowrap; letter-spacing: 0.02em; } /* 横並び対応: section-row (内部は横 flex) */ .animator-section-row { flex: 1 1 0; min-height: 32px; display: flex; flex-direction: row; gap: 0; min-width: 0; position: relative; /* 横ドックインジケータの絶対配置基準 */ } /* 折りたたみ + flex-fill セクション */ .animator-section { flex: 1 1 0; min-width: 60px; min-height: 32px; display: flex; flex-direction: column; background: var(--ani-panel-bg); border: 1px solid var(--ani-border); border-radius: 5px; overflow: hidden; margin-bottom: 4px; position: relative; /* resize-edge 配置基準 */ } /* セクション下端の resize エッジ（section 内部の最下部、透明ストリップ） */ .animator-section-resize-edge { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; cursor: ns-resize; z-index: 50; background: transparent; transition: background 0.12s; pointer-events: auto; } .animator-section-resize-edge::after { /* ホバー時のヒント用の細いライン（中央 50% に出す） */ content: ''; position: absolute; left: 25%; right: 25%; top: 50%; height: 2px; transform: translateY(-50%); background: rgba(192, 132, 252, 0); border-radius: 1px; transition: background 0.12s; } .animator-section-resize-edge:hover { background: rgba(192, 132, 252, 0.15); } .animator-section-resize-edge:hover::after { background: rgba(192, 132, 252, 0.8); } .animator-section-resize-edge:active { background: rgba(192, 132, 252, 0.3); } .animator-section-collapsed .animator-section-resize-edge { display: none; } /* セクション右端の横リサイズエッジ（横並びセクション同士の境界、透明ストリップ） */ /* 縦エッジ (下端) と重ならないように底から 5px 余白 */ .animator-section-h-resize-edge { position: absolute; top: 0; bottom: 5px; right: 0; width: 5px; cursor: ew-resize; z-index: 50; background: transparent; transition: background 0.12s; pointer-events: auto; } .animator-section-h-resize-edge::after { content: ''; position: absolute; top: 25%; bottom: 25%; left: 50%; width: 2px; transform: translateX(-50%); background: rgba(192, 132, 252, 0); border-radius: 1px; transition: background 0.12s; } .animator-section-h-resize-edge:hover { background: rgba(192, 132, 252, 0.15); } .animator-section-h-resize-edge:hover::after { background: rgba(192, 132, 252, 0.8); } .animator-section-h-resize-edge:active { background: rgba(192, 132, 252, 0.3); } /* リサイズ中は body 全体にカーソル適用（境界外ドラッグ時も維持） */ body.animator-resizing-h { cursor: ew-resize !important; user-select: none; } body.animator-resizing-h * { cursor: ew-resize !important; } /* グリップを視覚的にハッキリさせる（薄紫の点線シンボル） */ .animator-section-grip { display: inline-flex !important; align-items: center; justify-content: center; width: 18px !important; height: 18px; margin-right: 4px; font-size: 14px !important; color: rgba(192, 132, 252, 0.7) !important; cursor: grab; user-select: none; border-radius: 3px; flex-shrink: 0; letter-spacing: -2px; font-weight: 900; background: rgba(192, 132, 252, 0.06); border: 1px solid rgba(192, 132, 252, 0.18); } .animator-section-grip:hover { background: rgba(192, 132, 252, 0.25) !important; color: #d8caff !important; border-color: rgba(192, 132, 252, 0.5); } .animator-section-grip:active { cursor: grabbing; } .animator-section + .animator-section { margin-top: 0; } .animator-section-collapsed { flex: 0 0 auto !important; min-height: 0; } .animator-section-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--ani-header-bg); border-bottom: 1px solid var(--ani-border); cursor: pointer; user-select: none; font-size: 12px; font-weight: 700; color: var(--ani-text); /* ヘッダ内のボタン/ラベルが狭いウィンドウで縦書きに崩れないように */ white-space: nowrap; overflow-x: auto; overflow-y: hidden; } .animator-section-head:hover { background: #565656; } /* 非折りたたみヘッダ（Animation セクション専用）: pointer/hover を抑制し、常時オープン感を出す */ .animator-section-head-noncollapsible { cursor: default; } .animator-section-head-noncollapsible:hover { background: var(--ani-header-bg); } .animator-section-toggle { display: inline-block; width: 12px; font-size: 10px; color: var(--ani-text-mute); transition: transform 0.15s; } .animator-section-toggle::before { content: '▼'; } .animator-section-collapsed .animator-section-toggle::before { content: '▶'; } .animator-section-title { flex: 1; letter-spacing: 0.3px; } .animator-section-head-sub { font-size: 10px; color: var(--ani-text-mute); font-weight: 400; font-style: italic; } .animator-section-head-actions { display: flex; align-items: center; gap: 4px; /* セクション右側のアクション群 (グラフ/ボード/PAD設定/整列/Add 等) を縮ませない */ flex-shrink: 0; white-space: nowrap; } .animator-section-head-actions button, .animator-section-head-actions .animator-tl-mode-btn, .animator-section-head-actions .animator-tl-mode-toggle { flex-shrink: 0; white-space: nowrap; } .animator-section-head-actions .animator-pane-add, .animator-section-head-actions .animator-timeline-addbtn button { background: #525252; border-color: #6a6a6a; color: #fff; } .animator-section-body { flex: 1 1 auto; min-height: 0; padding: 8px 12px; background: var(--ani-panel-bg); overflow-y: auto; /* セクション内で個別にスクロール */ overflow-x: hidden; overscroll-behavior: contain; /* スクロールバーを常時細く表示（Firefox） */ scrollbar-width: thin; scrollbar-color: #6a6a6a transparent; } /* WebKit (Chrome/Safari/Edge) 用スクロールバー */ .animator-section-body::-webkit-scrollbar, #animator-sidebar::-webkit-scrollbar, #animator-editor::-webkit-scrollbar, .animator-tab-body::-webkit-scrollbar, .animator-state-graph-canvas::-webkit-scrollbar, .animator-tl-track-col::-webkit-scrollbar, .animator-props-body::-webkit-scrollbar, .animator-states-list::-webkit-scrollbar, .animator-layout-list::-webkit-scrollbar { width: 10px; height: 10px; } .animator-section-body::-webkit-scrollbar-track, #animator-sidebar::-webkit-scrollbar-track, #animator-editor::-webkit-scrollbar-track, .animator-tab-body::-webkit-scrollbar-track, .animator-state-graph-canvas::-webkit-scrollbar-track, .animator-tl-track-col::-webkit-scrollbar-track, .animator-props-body::-webkit-scrollbar-track, .animator-states-list::-webkit-scrollbar-track, .animator-layout-list::-webkit-scrollbar-track { background: #2a2a2a; } .animator-section-body::-webkit-scrollbar-thumb, #animator-sidebar::-webkit-scrollbar-thumb, #animator-editor::-webkit-scrollbar-thumb, .animator-tab-body::-webkit-scrollbar-thumb, .animator-state-graph-canvas::-webkit-scrollbar-thumb, .animator-tl-track-col::-webkit-scrollbar-thumb, .animator-props-body::-webkit-scrollbar-thumb, .animator-states-list::-webkit-scrollbar-thumb, .animator-layout-list::-webkit-scrollbar-thumb { background: #555; border-radius: 5px; border: 2px solid #2a2a2a; } .animator-section-body::-webkit-scrollbar-thumb:hover, #animator-sidebar::-webkit-scrollbar-thumb:hover, #animator-editor::-webkit-scrollbar-thumb:hover, .animator-tab-body::-webkit-scrollbar-thumb:hover, .animator-state-graph-canvas::-webkit-scrollbar-thumb:hover, .animator-tl-track-col::-webkit-scrollbar-thumb:hover, .animator-props-body::-webkit-scrollbar-thumb:hover, .animator-states-list::-webkit-scrollbar-thumb:hover, .animator-layout-list::-webkit-scrollbar-thumb:hover { background: #777; } .animator-section-body::-webkit-scrollbar-corner, #animator-sidebar::-webkit-scrollbar-corner, .animator-tl-track-col::-webkit-scrollbar-corner { background: #2a2a2a; } .animator-section-collapsed .animator-section-body { display: none; } .animator-section-collapsed .animator-section-head { border-bottom: none; } /* セクション内の各要素を grey 基調に上書き + 縦フィル */ .animator-section .animator-preview-wrap { background: transparent; border: none; flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; height: 100%; } .animator-section .animator-preview-canvas { flex: 1 1 auto; min-height: 80px; } .animator-section .animator-timeline { /* Sprite ストリップ — 新 UI では Tracks 列内に置かれる */ background: transparent; border: none; height: 100%; padding: 4px; } .animator-section .animator-preview-canvas { background: repeating-conic-gradient(rgba(255,255,255,0.05) 0% 25%, transparent 0% 50%) 0 0 / 24px 24px, #232323; border: 1px solid #444; } .animator-section .animator-preview-controls { background: #3a3a3a; border-top: 1px solid var(--ani-border-soft); } .animator-section .animator-pc-btn { background: #525252; color: #fff; border-color: #6a6a6a; } .animator-section .animator-pc-btn:not(:disabled):hover { background: #5d5d5d; } .animator-section .animator-pc-play { background: #3d6b62; border-color: #4a8278; color: #aef0e1; } .animator-section .animator-pc-reset { background: #2d5a52; border-color: #4a8278; color: #aef0e1; } /* Phase 4: `.animator-track-bar` は canvas に移行 — 関連 .animator-section スコープ規則も廃止 */ .animator-section .animator-track-add-row { background: #383838; border-top: 1px dashed var(--ani-border-soft); margin-top: 4px; } .animator-section .animator-track-add-btn { background: #525252; color: var(--ani-text); border-color: #6a6a6a; } .animator-section .animator-track-add-btn:hover { background: #5d5d5d; } .animator-section .animator-row { background: #333; border-color: var(--ani-border-soft); } .animator-section .animator-row input, .animator-section .animator-row select, .animator-section .animator-prop-row input, .animator-section .animator-prop-row select { background: #232323; border-color: var(--ani-border); color: var(--ani-text); } .animator-section .animator-row input:focus, .animator-section .animator-row select:focus, .animator-section .animator-prop-row input:focus, .animator-section .animator-prop-row select:focus { outline: none; border-color: var(--ani-accent-ctrl); } .animator-section .animator-state-item { background: #333; border-color: var(--ani-border-soft); } .animator-section .animator-state-item:hover { background: #3e3e3e; } .animator-section .animator-state-item-active { background: #4f4256 !important; border-color: var(--ani-accent-ctrl); } .animator-section .animator-state-name { color: var(--ani-text); } .animator-section .animator-pane-add { background: #525252; border-color: #6a6a6a; color: #fff; } .animator-section .animator-pane-foot-hint { color: var(--ani-text-mute); font-size: 10px; padding: 6px 4px 0; border-top: 1px dashed var(--ani-border-soft); margin-top: 6px; } .animator-section .animator-empty-row { color: var(--ani-text-mute); padding: 16px; text-align: center; font-style: italic; font-size: 11px; } /* ヘッダーラベル（GSAnim バッジ）のグレー版 */ .animator-edit-header-label { flex: 0 0 auto; padding: 7px 12px; background: linear-gradient(90deg, #5a4870, #3a4e58); color: #fff; font-size: 13px; font-weight: 800; border-radius: 4px; letter-spacing: 0.5px; } /* ガイドボタンも grey 系に */ .animator-help-toggle { background: #525252 !important; color: #ffd666 !important; border-color: #6a6a6a !important; } .animator-help-toggle-active { background: #6a5a3a !important; } .animator-help-toggle:hover { background: #5d5d5d !important; } /* ヘルプパネル grey 化 */ .animator-help-panel { background: #353535; border-color: var(--ani-border); } .animator-help-headline { background: #3f3a4f; border-left-color: var(--ani-accent-ctrl); } .animator-help-cell { background: #424242; } .animator-help-note { background: #2f4541; border-left-color: var(--ani-accent-anim); } /* レスポンシブ: 縦に並べる(横が狭い時) */ @media (max-width: 1100px) { .animator-split-row { flex-direction: column; } .animator-col { flex: 1 1 auto; width: 100%; } } /* ============================================================ GSAnim ライブラリ — ⋮ メニュー + リスト項目スタイル ============================================================ */ .animator-list-item-row { display: flex; align-items: center; gap: 4px; cursor: pointer; } .animator-list-item-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ★ Asset 展開トグル (▶/▼) */ .animator-list-item-expander { width: 18px; height: 18px; background: transparent; border: none; color: var(--ani-text-mute, #999); cursor: pointer; font-size: 9px; font-weight: 800; padding: 0; border-radius: 2px; flex-shrink: 0; } .animator-list-item-expander:hover { background: rgba(255,255,255,0.1); color: #fff; } .animator-list-item-kebab { width: 22px; height: 22px; background: transparent; border: none; color: var(--ani-text-mute); cursor: pointer; border-radius: 3px; font-size: 14px; font-weight: 800; line-height: 1; padding: 0; } /* ★ Asset 配下の State 子リスト */ .animator-list-state-children { margin-top: 4px; margin-left: 4px; padding-left: 8px; border-left: 1px dashed rgba(116, 235, 213, 0.3); display: flex; flex-direction: column; gap: 1px; } .animator-list-state-item { display: flex; align-items: center; gap: 5px; padding: 4px 6px; font-size: 11px; color: #ccc; cursor: pointer; border-radius: 3px; background: rgba(255,255,255,0.02); border: 1px solid transparent; transition: background 0.1s, border-color 0.1s; white-space: nowrap; overflow: hidden; } .animator-list-state-item:hover { background: rgba(116, 235, 213, 0.08); border-color: rgba(116, 235, 213, 0.25); color: #fff; } .animator-list-state-item-active { background: linear-gradient(90deg, rgba(116, 235, 213, 0.22), rgba(116, 235, 213, 0.08)) !important; border-color: rgba(116, 235, 213, 0.5) !important; color: #fff !important; box-shadow: inset 0 0 4px rgba(0,0,0,0.3); } /* 親 Asset 行は hover 時に薄く発光 (別 State Machine の Animation を hover した時のヒント) */ .animator-list-item-glow { box-shadow: 0 0 8px rgba(116, 235, 213, 0.35) !important; border: 1px solid rgba(116, 235, 213, 0.4); } .animator-list-state-tag { font-size: 9px; font-weight: 700; color: rgba(116, 235, 213, 0.65); font-family: var(--font-mono, monospace); flex-shrink: 0; } .animator-list-state-default { color: #ffd666; font-size: 10px; flex-shrink: 0; } .animator-list-state-mode-badge { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 14px; font-size: 9px; font-weight: 700; border-radius: 2px; font-family: var(--font-mono, monospace); flex-shrink: 0; } .animator-list-state-mode-frame { background: rgba(116, 235, 213, 0.18); color: #74ebd5; border: 1px solid rgba(116, 235, 213, 0.4); } .animator-list-state-mode-track { background: rgba(192, 132, 252, 0.18); color: #c084fc; border: 1px solid rgba(192, 132, 252, 0.4); } .animator-list-state-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .animator-list-item-kebab:hover { background: rgba(255,255,255,0.1); color: #fff; } .animator-list-item-noderef { display: inline-block; padding: 1px 5px; background: rgba(116, 235, 213, 0.18); color: #74ebd5; border-radius: 8px; font-size: 9px; font-weight: 700; } .animator-list-item-stocked { display: inline-block; padding: 1px 5px; background: rgba(255, 214, 102, 0.15); color: #ffd666; border-radius: 8px; font-size: 9px; font-weight: 600; } /* ⋮ ポップアップメニュー */ .animator-kebab-menu { background: #3a3a3a; border: 1px solid var(--ani-border); border-radius: 5px; box-shadow: 0 4px 16px rgba(0,0,0,0.4); padding: 4px; min-width: 220px; } .animator-kebab-item { display: block; width: 100%; padding: 8px 12px; background: transparent; border: none; color: var(--ani-text); text-align: left; font-size: 12px; cursor: pointer; border-radius: 3px; } .animator-kebab-item:hover { background: #4a4a4a; } .animator-kebab-danger { color: #ff8c8c; } .animator-kebab-danger:hover { background: #5a3232; } .animator-kebab-divider { height: 1px; background: var(--ani-border); margin: 4px 0; } /* SpriteAnimator ノード — ライブラリ参照表示 + 新規コネクタ */ .sprite-animator-ref { font-size: 9px; color: #b8b8b8; margin-top: 4px; padding: 3px 6px; background: rgba(0,0,0,0.25); border-radius: 3px; font-family: var(--font-mono, monospace); } .sprite-animator-ref-broken { color: #ff8c8c !important; background: rgba(255, 100, 100, 0.15) !important; } .sprite-animator-ref-icon { font-size: 10px; margin-right: 2px; } /* ⚙ Param Sync IN / 🎯 UI Attach OUT / OUT 行 */ .anim-extra-conn-row { position: relative; display: flex; align-items: center; padding: 4px 10px; margin: 3px 0; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 4px; font-size: 10px; min-height: 22px; } .anim-extra-conn-label { flex: 1; font-weight: 700; letter-spacing: 0.3px; } .anim-param-sync-row { background: rgba(255, 214, 102, 0.08); border-color: rgba(255, 214, 102, 0.35); } .anim-param-sync-row .anim-extra-conn-label { color: #ffd666; } .connector.anim-param-sync-in { position: absolute; left: -21px; top: 50%; transform: translateY(-50%); background: #ffd666; border-color: rgba(0,0,0,0.5); } .connector.anim-param-sync-in:hover { transform: translateY(-50%) scale(1.4); } .anim-ui-attach-row { background: rgba(116, 235, 213, 0.08); border-color: rgba(116, 235, 213, 0.35); justify-content: flex-end; } .anim-ui-attach-row .anim-extra-conn-label { color: #74ebd5; } .connector.anim-ui-attach-out { position: absolute; right: -21px; top: 50%; transform: translateY(-50%); background: #74ebd5; border-color: rgba(0,0,0,0.5); } .connector.anim-ui-attach-out:hover { transform: translateY(-50%) scale(1.4); } .anim-flow-out-row { background: rgba(192, 132, 252, 0.06); border-color: rgba(192, 132, 252, 0.25); justify-content: flex-end; } .anim-flow-out-row .anim-extra-conn-label { color: #c084fc; } .node-sprite-animator-broken { background: linear-gradient(135deg, #6e3a3a, #4a2828) !important; border-color: rgba(255, 140, 140, 0.6) !important; } /* ============================================================ GSAnim 自動保存トグル / 保存ボタン / 分割ハンドル ============================================================ */ .animator-autosave-toggle { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; background: #424242; border: 1px solid #5a5a5a; border-radius: 4px; cursor: pointer; font-size: 11px; font-weight: 600; color: var(--ani-text); } .animator-autosave-toggle:hover { background: #4a4a4a; } .animator-autosave-toggle input { cursor: pointer; transform: scale(1.1); } #animator-save-btn { background: #3d6b62 !important; color: #aef0e1 !important; border-color: #4a8278 !important; } #animator-save-btn:hover { background: #4a8278 !important; } #animator-clearall-btn { background: #5a3a3a !important; color: #ffb0b0 !important; border-color: #7a4a4a !important; } #animator-clearall-btn:hover { background: #6a4444 !important; } #animator-help-bar-toggle { background: #4a5a3d !important; color: #d8e0a8 !important; border: 1px solid #6a7a5d !important; } #animator-help-bar-toggle:hover { background: #5a6a4d !important; } #animator-layout-btn { background: #3d4a6b !important; color: #b8c8f0 !important; border-color: #4f6189 !important; } #animator-layout-btn:hover { background: #4a5878 !important; } #animator-layout-menu { /* ★ position: fixed — #animator-bar の overflow:hidden に隠れない viewport 基準配置。 位置は JS (animatorToggleLayoutMenu) でボタンの直下に毎回計算してセットする。 */ position: fixed; min-width: 260px; max-width: 320px; background: #3a3a3a; border: 1px solid #5a5a5a; border-radius: 5px; box-shadow: 0 6px 24px rgba(0,0,0,0.5); padding: 6px; /* ★ Animator パネル等の z-index 9000 系より前面に出すため十分大きな値に */ z-index: 9500; } .animator-layout-section { display: flex; flex-direction: column; gap: 2px; } .animator-layout-mainbtn { display: block; width: 100%; padding: 8px 12px; background: #525252; color: var(--ani-text); border: 1px solid #6a6a6a; border-radius: 3px; cursor: pointer; font-size: 12px; font-weight: 700; text-align: left; } .animator-layout-mainbtn:hover { background: #5d5d5d; } .animator-layout-divider { height: 1px; background: #555; margin: 6px 0; } .animator-layout-section-head { padding: 4px 10px; font-size: 10px; font-weight: 700; color: var(--ani-text-mute); letter-spacing: 0.5px; text-transform: uppercase; } .animator-layout-empty { padding: 12px; text-align: center; font-size: 11px; color: var(--ani-text-mute); font-style: italic; } .animator-layout-list { display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow-y: auto; } .animator-layout-item { display: flex; align-items: center; gap: 2px; background: #444444; border: 1px solid #5a5a5a; border-radius: 3px; } .animator-layout-item:hover { background: #4a4a4a; border-color: #6a6a6a; } .animator-layout-apply { flex: 1; padding: 7px 10px; background: transparent; border: none; color: var(--ani-text); text-align: left; cursor: pointer; font-size: 12px; border-radius: 3px; } .animator-layout-apply:hover { background: rgba(192, 132, 252, 0.2); color: #fff; } .animator-layout-name { font-weight: 600; } .animator-layout-rename, .animator-layout-del { width: 28px; height: 28px; background: transparent; border: none; color: var(--ani-text-mute); cursor: pointer; font-size: 13px; border-radius: 3px; } .animator-layout-rename:hover { background: rgba(116, 235, 213, 0.2); color: #74ebd5; } .animator-layout-del:hover { background: rgba(255, 100, 100, 0.25); color: #ff8c8c; } #animator-save-btn.animator-save-btn-dirty { background: #b87a2d !important; color: #ffe8c4 !important; border-color: #d49654 !important; animation: animator-save-pulse 1.4s ease-in-out infinite; } @keyframes animator-save-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(212, 150, 84, 0.6); } 50% { box-shadow: 0 0 0 6px rgba(212, 150, 84, 0); } } /* ドラッグハンドル: Animation / Animator カラム間の境界 */ /* スプリットハンドル: 2 つのウィンドウ（Animation / Animator）の境界 */ .animator-split-handle { flex: 0 0 10px; /* 少し太く（境界として視認性 UP） */ align-self: stretch; height: auto; background: linear-gradient(180deg, #4a4a4a 0%, #3a3a3a 100%); border-left: 1px solid #2a2a2a; border-right: 1px solid #2a2a2a; cursor: col-resize !important; /* 必ず col-resize に */ position: relative; z-index: 10; /* 確実に col-head より前面に */ transition: background 0.12s; margin: 0 2px; pointer-events: auto; /* 確実にクリック受付 */ user-select: none; } .animator-split-handle:hover { background: linear-gradient(180deg, #6a6a6a 0%, #4a4a4a 100%); } /* 既存の ::before で握りドット表示 (このセクションの後ろにある定義) */ .animator-split-handle::before { content: '⋮⋮'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(0deg); color: #888; font-size: 12px; line-height: 0.6; letter-spacing: -2px; writing-mode: vertical-rl; } body.animator-resizing, body.animator-resizing * { user-select: none !important; cursor: col-resize !important; } /* レスポンシブ: 縦並びの時はハンドル非表示 */ @media (max-width: 1100px) { .animator-split-handle { display: none; } } /* ============================================================ セクション間 縦リサイズハンドル（同カラム内の上下分割） ============================================================ */ /* divider 要素は廃止。残存するインスタンスがあっても見えないように */ .animator-section-divider, .animator-section-h-divider { display: none !important; } .animator-section-divider:hover::before { content: '⋯'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: rgba(255,255,255,0.8); font-size: 10px; letter-spacing: -2px; line-height: 1; } body.animator-resizing-v, body.animator-resizing-v * { user-select: none !important; cursor: row-resize !important; } /* ============================================================ Animation Timeline — Unity 風 (Properties 列 + Tracks 列 + 上部ツールバー) ============================================================ */ .animator-tl-body { padding: 0 !important; display: flex; flex-direction: column; /* ★ ウィンドウ幅に追随する可変レイアウトを止める。 必要なら横スクロールで全要素にアクセス可能にする。 */ overflow-x: auto; overflow-y: hidden; min-width: 0; } /* ============================================================ Timeline モード切替 (トラック式 / フレーム式 / 両方) ============================================================ */ .animator-tl-mode-toggle { display: inline-flex; padding: 2px; background: #2a2a2a; border: 1px solid #4a4a4a; border-radius: 5px; gap: 0; margin-right: 6px; vertical-align: middle; flex-shrink: 0; white-space: nowrap; } .animator-tl-mode-btn { padding: 3px 9px; font-size: 11px; font-weight: 600; background: transparent; color: var(--ani-text-mute, #a8a8a8); border: none; border-radius: 3px; cursor: pointer; transition: background 0.12s, color 0.12s; /* ウィンドウ狭い時に「ト/ラ/ッ/ク」と縦書き化させない */ flex-shrink: 0; white-space: nowrap; } .animator-tl-mode-btn:hover { background: rgba(116, 235, 213, 0.12); color: #ddd; } /* ルーラー表示単位の切替（Frame / Time / %） — toolbar 側に置く */ /* ● Record モードトグル (左端、赤丸) */ .animator-tl-record-btn { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-right: 8px; background: #2a2a2a; border: 1px solid #555; flex-shrink: 0; white-space: nowrap; color: #888; font-size: 12px; line-height: 1; cursor: pointer; border-radius: 50%; vertical-align: middle; transition: background 0.12s, color 0.12s, border-color 0.12s, box-shadow 0.12s; } .animator-tl-record-btn:hover { border-color: #ff6666; color: #ff8888; } .animator-tl-record-btn.animator-tl-record-active { background: radial-gradient(circle at center, #ff4444 30%, #c02020 100%); border-color: #ff6666; color: #fff; box-shadow: 0 0 8px rgba(255, 80, 80, 0.6), inset 0 0 4px rgba(0, 0, 0, 0.4); animation: animator-tl-record-pulse 1.4s ease-in-out infinite; } @keyframes animator-tl-record-pulse { 0%, 100% { box-shadow: 0 0 8px rgba(255, 80, 80, 0.6), inset 0 0 4px rgba(0, 0, 0, 0.4); } 50% { box-shadow: 0 0 14px rgba(255, 80, 80, 0.9), inset 0 0 4px rgba(0, 0, 0, 0.4); } } /* ★ Preview Mode (AnimationPV / AnimatorPV) に応じたグレーアウト + ガイドオーバーレイ - AnimationPV (clip): Animation のみ編集対象 → State Machine セクションをオーバーレイで覆い、 中央に説明カードを表示 - AnimatorPV (machine): 通常状態 (両方編集可) 見出し (section-head) はクリック可能のまま (折りたたみ操作だけは許可)。 */ body.animator-pv-mode-clip .animator-section[data-section="stateGraph"] { position: relative; } body.animator-pv-mode-clip .animator-section[data-section="stateGraph"] .animator-section-body { pointer-events: none; filter: grayscale(0.5) brightness(0.78); } /* オーバーレイ: section-body 全体を半透明黒で覆って「無効」を視覚化 */ body.animator-pv-mode-clip .animator-section[data-section="stateGraph"] .animator-section-body::before { content: ''; position: absolute; inset: 0; background: rgba(15, 10, 25, 0.55); pointer-events: none; z-index: 28; } /* 説明カード: 中央にモード名 + ガイド文 (枠グレー / 背景黒 / 控えめ) */ body.animator-pv-mode-clip .animator-section[data-section="stateGraph"] .animator-section-body::after { content: 'AnimationPV モード\A State Machine を編集する場合は AnimatorPV に切替'; white-space: pre; text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #000000; color: #dddddd; font-size: 12px; font-weight: 500; line-height: 1.9; padding: 12px 24px; border: 1px solid #666666; border-radius: 6px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55); z-index: 30; pointer-events: none; letter-spacing: 0.2px; } /* section-body を relative にして ::before/::after の inset/transform 基準にする */ body.animator-pv-mode-clip .animator-section[data-section="stateGraph"] .animator-section-body { position: relative; } /* ★ Curves モード時の補間形状セレクタ (湾曲 / 直線 / 直角) */ .animator-tl-curve-shape { display: inline-flex; margin-right: 8px; background: #2a2a2a; border: 1px solid #444; border-radius: 4px; overflow: hidden; vertical-align: middle; } .animator-tl-curve-btn { padding: 3px 8px; background: transparent; border: none; border-right: 1px solid #3a3a3a; color: rgba(255,255,255,0.65); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.12s, color 0.12s; min-height: 22px; } .animator-tl-curve-btn:last-child { border-right: none; } .animator-tl-curve-btn:hover { background: rgba(192, 132, 252, 0.18); color: #d8b4fe; } .animator-tl-curve-btn-active { background: linear-gradient(135deg, #5a3f8a, #3d2960); color: #fff; } .animator-tl-curve-btn svg { display: block; } /* ★ Timeline 側 Playback (▶ ⏸ ⏮) — Preview と mirror */ .animator-tl-playback { display: inline-flex; margin-right: 8px; background: #2a2a2a; border: 1px solid #444; border-radius: 4px; overflow: hidden; vertical-align: middle; } .animator-tl-pb-btn { padding: 2px 10px; background: transparent; border: none; border-right: 1px solid #3a3a3a; color: #aaa; font-size: 12px; font-weight: 700; cursor: pointer; font-variant-emoji: text; transition: background 0.12s, color 0.12s; min-width: 30px; } .animator-tl-pb-btn:last-child { border-right: none; } .animator-tl-pb-btn:disabled { opacity: 0.35; cursor: not-allowed; } .animator-tl-pb-btn:not(:disabled):hover { background: rgba(116, 235, 213, 0.15); color: #74ebd5; } .animator-tl-pb-btn.animator-tl-pc-play:not(:disabled) { color: #74ebd5; } .animator-tl-pb-btn.animator-tl-pc-pause:not(:disabled) { color: #d8b4fe; } .animator-tl-pb-btn.animator-tl-pc-reset:not(:disabled) { color: #aef0e1; } /* Transport ボタン群 (⏮ ⏪ ⏩ ⏭) */ .animator-tl-transport { display: inline-flex; margin-right: 10px; background: #2a2a2a; border: 1px solid #444; border-radius: 4px; overflow: hidden; vertical-align: middle; } .animator-tl-tp-btn { padding: 2px 7px; background: transparent; border: none; border-right: 1px solid #3a3a3a; color: #aaa; font-size: 11px; font-weight: 700; letter-spacing: -0.5px; /* ◀◀ ▶▶ を詰めて 1 文字感を出す */ cursor: pointer; transition: background 0.12s, color 0.12s; font-variant-emoji: text; /* 強制的にテキスト系グリフでレンダリング */ } .animator-tl-tp-btn:last-child { border-right: none; } .animator-tl-tp-btn:hover { background: rgba(116, 235, 213, 0.12); color: #74ebd5; } .animator-tl-tp-btn:active { background: rgba(116, 235, 213, 0.25); } /* Frame: 入力欄 (数値直入力でジャンプ) */ .animator-tl-frame-input { width: 42px; padding: 1px 4px; background: #1a1a1a; border: 1px solid #444; color: #74ebd5; font-size: 11px; font-weight: 700; text-align: center; border-radius: 3px; vertical-align: middle; -moz-appearance: textfield; font-variant-numeric: tabular-nums; /* 等幅数字で桁揃え (gothic 内で) */ } .animator-tl-frame-input::-webkit-inner-spin-button, .animator-tl-frame-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .animator-tl-frame-input:focus { outline: none; border-color: #74ebd5; box-shadow: 0 0 0 2px rgba(116, 235, 213, 0.18); } /* Property 親グループ行 (▶/▼ 折りたたみ) */ .animator-tl-prop-group { background: #2c2c30 !important; cursor: pointer; color: #b8b8c0; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; user-select: none; height: 22px; min-height: 22px; border-bottom: 1px solid #383838; } .animator-tl-prop-group:hover { background: #34343a !important; color: #ddd; } .animator-tl-prop-group-toggle { display: inline-block; width: 12px; font-size: 9px; color: #888; margin-right: 4px; } .animator-tl-prop-group-label { flex: 1; } .animator-tl-prop-group-count { color: var(--ani-text-mute); font-weight: 400; font-size: 9px; } /* 子プロパティ行はインデント */ .animator-tl-prop-row-child { padding-left: 18px !important; } /* Phase 4: `.animator-tl-track-row-group` は canvas (Group 行) に移行 */ /* タイムライン Preview トグルボタン (Frame ボタンの左に配置) */ .animator-tl-preview-toggle { display: inline-block; padding: 3px 10px; margin: 0 6px 0 0; background: #2a2a2a; border: 1px solid #444; color: #999; font-size: 10px; font-weight: 700; font-family: var(--font-mono, monospace); letter-spacing: 0.04em; cursor: pointer; border-radius: 3px; vertical-align: middle; transition: background 0.12s, border-color 0.12s, color 0.12s; } .animator-tl-preview-toggle:hover { background: rgba(116, 235, 213, 0.1); border-color: rgba(116, 235, 213, 0.4); color: #ddd; } .animator-tl-preview-toggle.animator-tl-preview-active { background: linear-gradient(135deg, #2d5a52, #1f4540); border-color: #74ebd5; color: #74ebd5; box-shadow: inset 0 0 4px rgba(116, 235, 213, 0.3); } .animator-tl-scale-toggle { display: inline-flex; padding: 2px; background: #2a2a2a; border: 1px solid #444; border-radius: 3px; margin: 0 6px; vertical-align: middle; } .animator-tl-scale-btn { padding: 2px 7px; font-size: 10px; font-weight: 600; background: transparent; border: none; color: #999; cursor: pointer; border-radius: 2px; transition: background 0.12s, color 0.12s; } .animator-tl-scale-btn:hover { background: rgba(116, 235, 213, 0.1); color: #ccc; } .animator-tl-scale-active { background: linear-gradient(135deg, #2d5a52, #1f4540) !important; color: #74ebd5 !important; box-shadow: inset 0 0 3px rgba(0,0,0,0.4); } /* ズーム倍率インジケータ (クリックで 1.0× にリセット) */ .animator-tl-zoom-ind { display: inline-block; min-width: 42px; padding: 2px 7px; margin: 0 4px; background: #2a2a2a; border: 1px solid #444; color: #74ebd5; font-size: 10px; font-weight: 700; text-align: center; cursor: pointer; border-radius: 3px; transition: background 0.12s, border-color 0.12s, color 0.12s; vertical-align: middle; font-variant-numeric: tabular-nums; } .animator-tl-zoom-ind:hover { background: #353535; border-color: #74ebd5; color: #9ff5e0; } /* ★ Phase 5: Dopesheet / Curves 表示モード — segmented control `.animator-tl-scale-toggle` と同じパターン。各ボタンは「クリックでそのモードになる」アクションラベル。 active 表示 (紫グラデ) で現在モードを示すので、ラベル自体は常に行先のモード名でわかりやすい。 */ .animator-view-mode-toggle { display: inline-flex; padding: 2px; background: #2a2a2a; border: 1px solid #444; border-radius: 3px; margin: 0 4px; vertical-align: middle; } .animator-view-mode-btn { padding: 2px 8px; font-size: 10.5px; font-weight: 600; background: transparent; border: none; color: #999; cursor: pointer; border-radius: 2px; transition: background 0.12s, color 0.12s; } .animator-view-mode-btn:hover { background: rgba(192, 132, 252, 0.12); color: #d8caff; } .animator-view-mode-btn.animator-view-mode-active { background: linear-gradient(135deg, #4a3760, #2a1f3a); color: #d8b4fe; box-shadow: inset 0 0 3px rgba(0,0,0,0.4); cursor: default; /* 既に active なので "押せる" 感を消す */ } .animator-view-mode-btn.animator-view-mode-active:hover { background: linear-gradient(135deg, #4a3760, #2a1f3a); /* hover で色変化しない */ color: #d8b4fe; } /* Duration / FPS の単位サフィックス ("s" 等) */ .animator-tl-tool-unit { font-size: 9px; color: var(--ani-text-mute); font-family: var(--font-mono, monospace); margin-left: -2px; } .animator-tl-mode-active { background: linear-gradient(135deg, #2d5a52, #1f4540) !important; color: #74ebd5 !important; box-shadow: inset 0 0 4px rgba(0,0,0,0.4); } /* Animation セクションヘッダの「Animator」トグルボタン → State Machine グラフ (data-section="stateGraph") の開閉。Unity の Animator window 起動に相当。 */ .animator-tl-animator-toggle { padding: 4px 12px; margin-left: 4px; background: rgba(192, 132, 252, 0.10); color: #b894e8; border: 1px solid rgba(192, 132, 252, 0.35); border-radius: 4px; cursor: pointer; font-size: 11px; font-weight: 700; letter-spacing: 0.03em; font-family: var(--font-mono, monospace); transition: background 0.12s, color 0.12s, border-color 0.12s, box-shadow 0.12s; } .animator-tl-animator-toggle:hover { background: rgba(192, 132, 252, 0.20); color: #d8b4fe; border-color: rgba(192, 132, 252, 0.55); } .animator-tl-animator-active { background: linear-gradient(135deg, #3d2d4f, #2a1f3a) !important; color: #d8b4fe !important; border-color: #c084fc !important; box-shadow: inset 0 0 5px rgba(192, 132, 252, 0.3), 0 0 6px rgba(192, 132, 252, 0.2); } .animator-tl-animator-active:hover { background: linear-gradient(135deg, #4a3760, #3a2a4a) !important; } /* ── Phase 4 で廃止 ── * `.animator-tl-mode-frame` / `.animator-tl-mode-track` / `.animator-tl-mode-hybrid` モードトグル * は廃止されました。Canvas タイムラインは「単一表現」(ruler + sprite track + property tracks) に * 統一されているため、モードクラスを toggle する JS も無し。 * 関連 selector はもう何にも当たらないので削除。 */ /* 上部ツールバー */ .animator-tl-toolbar { display: flex; align-items: center; gap: 12px; padding: 6px 12px; background: #353535; border-bottom: 1px solid var(--ani-border); font-size: 11px; /* ★ ウィンドウが狭くなっても toolbar は縮ませない (固定ピクセル min-width)。 全部入りきらなければ親 (.animator-tl-body) の overflow-x で横スクロール。 ピクセル指定にすることで canvas のフィードバックループを回避。 */ flex-shrink: 0; min-width: 1100px; white-space: nowrap; color: var(--ani-text); flex: 0 0 auto; } /* toolbar 内のすべての子要素を縮ませない (テキストが縦書き化するのを防止) */ .animator-tl-toolbar > * { flex-shrink: 0; white-space: nowrap; } .animator-tl-info { color: var(--ani-text-mute); flex-shrink: 0; white-space: nowrap; font-variant-numeric: tabular-nums; } .animator-tl-info b { color: #74ebd5; font-weight: 700; } /* spacer は通常 flex: 1 で広がるが、min-width: max-content 付きの toolbar 内では実質 0 になる */ .animator-tl-spacer { flex: 1 1 auto; min-width: 12px; } /* ツールバー用の縦線区切り */ .animator-tl-tool-divider { width: 1px; height: 16px; background: rgba(255, 255, 255, 0.12); margin: 0 2px; } /* ツールバー内の小型フィールド（FPS / Loop など） */ .animator-tl-tool-field { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ani-text-mute); cursor: pointer; user-select: none; } .animator-tl-tool-field > span { font-weight: 600; } .animator-tl-tool-field input[type="number"] { width: 50px; padding: 2px 6px; font-size: 11px; background: #3a3a3a; color: var(--ani-text); border: 1px solid var(--ani-border); border-radius: 3px; text-align: right; } .animator-tl-tool-field input[type="number"]:focus { outline: none; border-color: var(--ani-accent-anim); } .animator-tl-tool-field input[type="number"]:disabled { opacity: 0.4; cursor: not-allowed; } .animator-tl-tool-field-check input[type="checkbox"] { margin: 0; cursor: pointer; } .animator-tl-tool-field-check input[type="checkbox"]:disabled { opacity: 0.4; cursor: not-allowed; } /* ★ FPS 入力 + プリセット ▾ ボタンのラップ 入力欄の右側にプリセット切替ボタンを並べる。ボタンクリックでメニュー表示 (toggle)。 */ .animator-fps-input-wrap { position: relative; display: inline-flex; align-items: stretch; gap: 2px; } .animator-fps-input-wrap input[type="number"] { /* 既存の .animator-tl-tool-field input[type="number"] を継承 */ margin: 0; } .animator-fps-preset-toggle { width: 18px; padding: 0; line-height: 1; background: #3a3a3a; color: rgba(255,255,255,0.75); border: 1px solid var(--ani-border); border-radius: 3px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } /* ▾ を CSS border トリックで描画 — フォント依存なし */ .animator-fps-preset-toggle::after { content: ''; display: inline-block; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: 0.75; transition: transform 0.12s ease; } .animator-fps-preset-toggle[aria-expanded="true"]::after { transform: rotate(180deg); opacity: 1; } .animator-fps-preset-toggle:hover { background: #4a4a4a; color: #fff; border-color: var(--ani-accent-anim, #74ebd5); } .animator-fps-preset-toggle:disabled { opacity: 0.4; cursor: not-allowed; } .animator-fps-preset-toggle[aria-expanded="true"] { background: linear-gradient(135deg, #2d5a52, #1f4540); color: #74ebd5; border-color: #74ebd5; } /* プリセット一覧メニュー (toggle 表示) */ .animator-fps-preset-menu { position: absolute; top: calc(100% + 4px); right: 0; min-width: 240px; max-height: 280px; overflow-y: auto; overscroll-behavior: contain; background: #1a1525; border: 1px solid rgba(255,255,255,0.18); border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,0.65); z-index: 200; padding: 4px; display: flex; flex-direction: column; gap: 1px; } .animator-fps-preset-menu[hidden] { display: none; } .animator-fps-preset-menu button { display: flex; align-items: baseline; gap: 10px; padding: 7px 12px; background: transparent; border: none; color: rgba(255,255,255,0.85); cursor: pointer; font-size: 12px; text-align: left; border-radius: 4px; font-variant-numeric: tabular-nums; } .animator-fps-preset-menu button:hover { background: rgba(192, 132, 252, 0.20); color: #fff; } .animator-fps-preset-menu button b { min-width: 28px; color: #c084fc; font-weight: 700; font-size: 13px; } .animator-fps-preset-menu button span { font-size: 11px; color: rgba(255,255,255,0.6); flex: 1 1 auto; } .animator-fps-preset-menu button.animator-fps-preset-active { background: rgba(192, 132, 252, 0.28); color: #fff; } .animator-fps-preset-menu button.animator-fps-preset-active b { color: #d8b4fe; } .animator-fps-preset-menu button.animator-fps-preset-active span { color: rgba(255,255,255,0.85); } /* ★ Pivot 吸着メニュー (Preview コントロール内) - ボタン: アクティブ状態で緑アクセント - メニュー: 3×3 グリッド (中心/四辺/四隅) を上方向にポップアップ */ .animator-pivot-snap-wrap { position: relative; display: inline-flex; } .animator-pc-pivot-snap { font-size: 11px; font-weight: 600; /* ★ 「吸着 ▾」が PAD ボタンと干渉しないよう、横幅をしっかり確保 */ padding: 0 12px 0 14px; min-width: 64px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; } /* ★ 中央軸揃えボタン (吸着ボタンの右隣、十字 + 円アイコン) */ .animator-pc-center-axis { padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; background: rgba(116, 235, 213, 0.10); border-color: rgba(116, 235, 213, 0.3); color: #74ebd5; } .animator-pc-center-axis:not(:disabled):hover { background: rgba(116, 235, 213, 0.25); border-color: #74ebd5; } .animator-pc-center-axis svg { display: block; } /* ▾ を CSS border トリックで描画 — フォント依存なし (絵文字グリフ化されない) */ .animator-pc-pivot-snap::after { content: ''; display: inline-block; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: 0.7; transition: transform 0.12s ease; } .animator-pc-pivot-snap[aria-expanded="true"], .animator-pc-pivot-snap.animator-pc-active { background: linear-gradient(135deg, #2d5a52, #1f4540); color: #74ebd5; border-color: #74ebd5; } /* メニュー開時は ▴ (上向き) に回転 */ .animator-pc-pivot-snap[aria-expanded="true"]::after, .animator-pc-pivot-snap.animator-pc-active::after { transform: rotate(180deg); opacity: 1; } .animator-pivot-snap-menu { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: #1a1525; border: 1px solid rgba(255,255,255,0.18); border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,0.65); padding: 8px; z-index: 200; display: flex; flex-direction: column; gap: 6px; } .animator-pivot-snap-menu[hidden] { display: none; } .animator-pivot-snap-title { font-size: 10px; font-weight: 700; color: rgba(255,255,255,0.55); letter-spacing: 0; white-space: nowrap; text-align: center; } .animator-pivot-snap-grid { display: grid; grid-template-columns: repeat(3, 30px); grid-template-rows: repeat(3, 30px); gap: 3px; } .animator-pivot-snap-grid button { width: 30px; height: 30px; font-size: 14px; line-height: 1; background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.78); border: 1px solid rgba(255,255,255,0.15); border-radius: 3px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-variant-emoji: text; transition: background 0.08s, border-color 0.08s, color 0.08s; } .animator-pivot-snap-grid button:hover { background: rgba(192, 132, 252, 0.25); color: #fff; border-color: #c084fc; } /* 中心ボタンは別カラー (推奨アンカー / デフォルト挙動) */ .animator-pivot-snap-grid button[data-anchor="mc"] { background: rgba(116, 235, 213, 0.18); border-color: rgba(116, 235, 213, 0.45); color: #74ebd5; font-weight: 700; } .animator-pivot-snap-grid button[data-anchor="mc"]:hover { background: rgba(116, 235, 213, 0.35); color: #fff; border-color: #74ebd5; } .animator-tl-add-wrap { position: relative; } .animator-tl-add-btn { padding: 4px 12px; font-size: 11px; font-weight: 700; background: #525252; color: #fff; border: 1px solid #6a6a6a; border-radius: 3px; cursor: pointer; } .animator-tl-add-btn:hover { background: #5d5d5d; } .animator-tl-add-menu { position: absolute; top: 100%; right: 0; min-width: 180px; margin-top: 2px; background: #3a3a3a; border: 1px solid var(--ani-border); border-radius: 4px; box-shadow: 0 4px 16px rgba(0,0,0,0.5); padding: 4px; z-index: 100; } .animator-tl-add-item { display: block; width: 100%; padding: 6px 12px; background: transparent; border: none; color: var(--ani-text); text-align: left; font-size: 12px; cursor: pointer; border-radius: 3px; } .animator-tl-add-item:hover { background: #4a4a4a; } /* ヒント行 */ .animator-tl-hint { padding: 4px 12px; font-size: 10px; color: var(--ani-text-mute); background: #2f2f2f; border-bottom: 1px solid var(--ani-border-soft); flex: 0 0 auto; /* 横スクロール対象として toolbar/main と高さを揃え、widthも min-width: 1100px に */ min-width: 1100px; white-space: nowrap; } /* メイン: 左右 2 列レイアウト */ .animator-tl-main { flex: 1 1 auto; display: flex; min-height: 0; overflow: hidden; /* toolbar と同じ min-width を設定して、横スクロール時もメインエリアが揃って動くように */ min-width: 1100px; } /* ドックプレビューを「右」に置くモード: flex 順序を逆転して content-wrap を左に */ .animator-tl-main-dock-right .animator-tl-docked-preview { order: 2; } .animator-tl-main-dock-right .animator-tl-content-wrap { order: 1; } .animator-tl-main-dock-right .animator-tl-docked-resize { left: 0; right: auto; } /* 中央 + 右をまとめるラッパ（ドックと分離してリサイズの基準になる） */ .animator-tl-content-wrap { flex: 1 1 auto; display: flex; min-width: 0; min-height: 0; overflow: hidden; } /* ★ Layers ドックパネル — トグル時は display:none、ドッキング時は左側に常時表示 ・縦は align-self:flex-start で内容の高さに収める (timeline section の高さフル占有しない) */ .animator-tl-layers-dock { flex: 0 0 220px; width: 220px; align-self: stretch; display: flex; flex-direction: column; background: rgba(80, 120, 200, 0.06); border-right: 1px solid rgba(80, 120, 200, 0.3); overflow: hidden; font-family: sans-serif; } .animator-tl-layers-dock-header { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px; background: rgba(80, 120, 200, 0.15); border-bottom: 1px solid rgba(80, 120, 200, 0.3); } .animator-tl-layers-dock-title { font-size: 11px; font-weight: 700; color: #80b8ff; } .animator-tl-layer-undock-btn, .animator-tl-layer-dock-btn { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; background: transparent; border: 1px solid transparent; border-radius: 3px; color: #80b8ff; font-size: 12px; cursor: pointer; padding: 0; font-family: sans-serif; transition: background 0.1s, color 0.1s; } .animator-tl-layer-undock-btn:hover, .animator-tl-layer-dock-btn:hover { background: rgba(128, 184, 255, 0.2); border-color: rgba(128, 184, 255, 0.4); color: #fff; } .animator-tl-layers-dock-list { flex: 1 1 auto; overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 4px; } .animator-tl-layers-dock .animator-tl-layer-add { margin: 6px; } /* Dropdown ヘッダーの右側に dock ボタンを置くため flex 化 */ .animator-tl-layer-dropdown-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; } /* ─── ドックプレビュー（拡大表示中の Sprite Preview ペイン） ─── */ .animator-tl-docked-preview { position: relative; display: flex; flex-direction: column; background: linear-gradient(180deg, #2a2a2e, #232326); border-right: 1px solid var(--ani-border); flex: 0 0 280px; min-width: 160px; max-width: 600px; overflow: hidden; } .animator-tl-main-dock-right .animator-tl-docked-preview { border-right: none; border-left: 1px solid var(--ani-border); } .animator-tl-docked-head { display: flex; align-items: center; gap: 6px; padding: 5px 8px; background: #3a3a3a; border-bottom: 1px solid var(--ani-border); font-size: 10px; font-weight: 700; color: var(--ani-text-mute); letter-spacing: 0.04em; } .animator-tl-docked-grab { background: transparent; border: 1px solid transparent; color: #888; cursor: grab; padding: 2px 6px; border-radius: 3px; font-size: 12px; line-height: 1; } .animator-tl-docked-grab:hover { border-color: #74ebd5; color: #74ebd5; background: rgba(116, 235, 213, 0.08); } .animator-tl-docked-title { flex: 1; color: #74ebd5; letter-spacing: 0.08em; } .animator-tl-docked-close { background: transparent; border: 1px solid transparent; color: #888; cursor: pointer; padding: 0 6px; border-radius: 3px; font-size: 14px; line-height: 1; } .animator-tl-docked-close:hover { background: rgba(255, 100, 100, 0.18); color: #ff8c8c; border-color: rgba(255, 100, 100, 0.4); } .animator-tl-docked-canvas { flex: 1 1 auto; min-height: 0; position: relative; display: flex; align-items: center; justify-content: center; background: linear-gradient(45deg, #1f1f22 25%, transparent 25%), linear-gradient(-45deg, #1f1f22 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #1f1f22 75%), linear-gradient(-45deg, transparent 75%, #1f1f22 75%); background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0px; background-color: #2a2a2d; overflow: hidden; padding: 8px; } #animator-tl-docked-img { max-width: 100%; max-height: 100%; object-fit: contain; image-rendering: pixelated; } .animator-tl-docked-empty { font-size: 11px; color: #666; font-style: italic; } .animator-tl-docked-controls { display: flex; align-items: center; gap: 4px; padding: 5px 8px; background: #2c2c2e; border-top: 1px solid var(--ani-border); } .animator-tl-docked-pc-btn { width: 28px; height: 24px; padding: 0; background: #424246; border: 1px solid #555; color: #ddd; font-size: 12px; cursor: pointer; border-radius: 3px; display: inline-flex; align-items: center; justify-content: center; } .animator-tl-docked-pc-btn:hover:not([disabled]) { background: #525258; border-color: #74ebd5; color: #74ebd5; } .animator-tl-docked-pc-btn[disabled] { opacity: 0.4; cursor: not-allowed; } .animator-tl-docked-info { margin-left: auto; font-size: 10px; font-family: var(--font-mono, monospace); color: var(--ani-text-mute); letter-spacing: 0.04em; } .animator-tl-docked-info b, #animator-tl-docked-frame { color: #74ebd5; font-weight: 700; } /* 境目のリサイズハンドル */ .animator-tl-docked-resize { position: absolute; top: 0; bottom: 0; right: 0; width: 5px; cursor: ew-resize; background: transparent; z-index: 10; transition: background 0.12s; } .animator-tl-docked-resize:hover { background: rgba(116, 235, 213, 0.25); } /* 小サムネ右上の「Dock」ボタン — 押すとプレビューが独立カラムに分離 */ .animator-tl-sprite-expand-btn { position: absolute; top: 3px; right: 3px; z-index: 4; padding: 2px 7px; background: rgba(0, 0, 0, 0.65); border: 1px solid rgba(116, 235, 213, 0.5); color: #74ebd5; font-size: 9px; font-weight: 700; line-height: 1.2; letter-spacing: 0.08em; cursor: pointer; border-radius: 3px; font-family: var(--font-mono, monospace); opacity: 0.85; transition: opacity 0.12s, background 0.12s, border-color 0.12s, color 0.12s; } .animator-tl-sprite-thumb-wrap:hover .animator-tl-sprite-expand-btn { opacity: 1; } .animator-tl-sprite-expand-btn:hover { background: rgba(116, 235, 213, 0.25); border-color: #74ebd5; } /* Phase 4: `.animator-tl-main-with-dock` 系の docked プレビュー専用上書きは廃止。 ドックプレビューは「Preview セクション (AnimationPV/AnimatorPV トグル)」に統合された。 */ /* 左: Properties 列 — プロパティ表示専用カラム。固定幅 / スクロールバー無し */ .animator-tl-prop-col { flex: 0 0 190px; background: #2f2f2f; border-right: 1px solid var(--ani-border); /* ★ pan で Y スクロールするため overflow-y は scroll、X はみ出しは hidden。 scrollbar は CSS で hide してすっきり (track-col 側で表示)。 */ overflow-x: hidden; overflow-y: scroll; scrollbar-width: none; /* Firefox */ /* padding-top: 24px は廃止 — 代わりに .animator-tl-prop-header (sticky) が ruler 隣の 24px 領域を占有して Add Property ボタンを内包する */ position: relative; } .animator-tl-prop-col::-webkit-scrollbar { width: 0; height: 0; display: none; } /* ★ Properties 列ヘッダー (Add Property を内包する sticky バー、ruler 高さ 24px に合わせる) */ .animator-tl-prop-header { position: sticky; top: 0; height: 24px; display: flex; align-items: center; padding: 0 4px; background: #262626; border-bottom: 1px solid var(--ani-border); z-index: 3; } .animator-tl-prop-header .animator-tl-add-wrap { flex: 1 1 auto; position: relative; } .animator-tl-prop-header .animator-tl-add-btn { width: 100%; padding: 2px 6px; font-size: 10px; font-weight: 700; background: #3d6b62; color: #aef0e1; border: 1px solid #4a8278; border-radius: 3px; cursor: pointer; line-height: 1.4; } .animator-tl-prop-header .animator-tl-add-btn:hover { background: #4d7d72; border-color: #74ebd5; } .animator-tl-prop-header .animator-tl-add-menu { top: 100%; left: 0; right: 0; margin-top: 2px; } .animator-tl-prop-row { display: flex; align-items: center; justify-content: space-between; /* ★ 高さは JS が inline style で canvas の各 row 高さに同期させる (省略時は 24px) */ height: 24px; padding: 0 8px; border-bottom: 1px solid #383838; font-size: 11px; color: var(--ani-text); white-space: nowrap; overflow: hidden; flex-shrink: 0; /* 子要素 (Sprite 行など) が縮まないようにする */ } .animator-tl-prop-row:hover { background: #383838; } /* ★ Sprite (サムネ) 欄: Property 欄と明確に分離するため、背景色を強調 + 太い境界線。 高さは canvas の sprite track と完全同期 (JS が inline style で指定)。 */ .animator-tl-prop-row-sprite { background: linear-gradient(180deg, #2e3a3a 0%, #243030 100%); /* シアン寄りの濃グラデで他と差別化 */ font-weight: 700; color: #74ebd5; border-bottom: none; /* 下の境界は handle-gap で表現するため重複しない */ align-items: flex-start; padding-top: 6px; } /* ★ Sprite ↕ Property tracks の境界 (canvas のリサイズハンドルと同期する空き行) 背景がうっすら見えるだけ。視覚的セパレータ役。 */ .animator-tl-prop-row-handle-gap { background: #1f1f22; border-top: 1px solid rgba(116, 235, 213, 0.25); border-bottom: 1px solid rgba(116, 235, 213, 0.25); flex-shrink: 0; } .animator-tl-prop-row-sprite .animator-tl-prop-name { color: #74ebd5; } .animator-tl-prop-row-sprite .animator-tl-prop-val[data-prop="__sprite__"] { color: #74ebd5; font-weight: 700; } /* 特殊 State (Entry / AnyState) 選択時の Timeline 編集不可通知 */ .animator-tl-special-state-notice { padding: 20px 18px; text-align: center; background: linear-gradient(180deg, rgba(255, 200, 100, 0.05), transparent); border-left: 2px solid rgba(255, 200, 100, 0.4); margin: 10px; border-radius: 4px; } .animator-tl-special-state-notice-icon { font-size: 24px; margin-bottom: 6px; opacity: 0.8; } .animator-tl-special-state-notice-title { font-weight: 700; font-size: 12px; color: #ffd666; letter-spacing: 0.04em; margin-bottom: 8px; } .animator-tl-special-state-notice-desc { font-size: 10.5px; color: var(--ani-text-mute, #a0a0a0); line-height: 1.7; } .animator-tl-special-state-notice-desc b { color: #c084fc; } .animator-tl-prop-name { flex: 1; text-overflow: ellipsis; overflow: hidden; font-size: 10px; } .animator-tl-prop-del { width: 18px; height: 18px; background: transparent; border: none; color: var(--ani-text-mute); cursor: pointer; font-size: 14px; line-height: 1; border-radius: 2px; opacity: 0; } .animator-tl-prop-row:hover .animator-tl-prop-del { opacity: 1; } .animator-tl-prop-del:hover { background: rgba(255, 100, 100, 0.3); color: #ff8c8c; } /* 現在のシーク位置における Property の値表示（Unity Animation window 右側の数値表示に相当） */ .animator-tl-prop-val { font-size: 10px; color: #c084fc; padding: 0 4px; min-width: 44px; text-align: right; white-space: nowrap; flex: 0 0 auto; font-variant-numeric: tabular-nums; } .animator-tl-prop-row-sprite .animator-tl-prop-val { color: #74ebd5; align-self: flex-start; } /* Unity の ◆ Add Keyframe ボタン（現在位置にキーを打つ） */ .animator-tl-prop-diamond { width: 18px; height: 18px; margin: 0 2px; background: transparent; border: none; color: #888; cursor: pointer; font-size: 13px; line-height: 18px; padding: 0; border-radius: 2px; display: inline-block; text-align: center; flex: 0 0 auto; opacity: 0.7; transition: background 0.12s, color 0.12s, opacity 0.12s, transform 0.12s; } .animator-tl-prop-row:hover .animator-tl-prop-diamond { opacity: 1; } .animator-tl-prop-diamond:hover { background: rgba(192, 132, 252, 0.18); color: #c084fc; transform: scale(1.15); } /* Properties 列の最下部: 常設 Add Property ボタン + 空状態のヒント（Unity Animation window 下部のスタイルに相当） */ .animator-tl-prop-add-zone { padding: 10px 8px 12px; border-top: 1px dashed #444; margin-top: 4px; background: linear-gradient(180deg, rgba(192,132,252,0.04), transparent); } .animator-tl-prop-add-btn { display: block; width: 100%; padding: 5px 8px; background: #353535; border: 1px solid #555; color: #c084fc; font-size: 10.5px; font-weight: 700; font-family: var(--font-mono, monospace); cursor: pointer; border-radius: 3px; letter-spacing: 0.04em; transition: background 0.12s, border-color 0.12s; } .animator-tl-prop-add-btn:hover { background: linear-gradient(135deg, #3d2d4f, #2a1f3a); border-color: #c084fc; color: #d8b4fe; } .animator-tl-prop-empty-hint { margin-top: 10px; padding: 8px 10px; background: rgba(116, 235, 213, 0.04); border-left: 2px solid rgba(116, 235, 213, 0.5); border-radius: 2px; font-size: 10px; line-height: 1.7; color: var(--ani-text-mute); white-space: normal; } .animator-tl-prop-empty-hint b { color: #74ebd5; font-weight: 700; } /* 右: Tracks 列 */ .animator-tl-track-col { flex: 1 1 auto; position: relative; background: #232323; overflow-x: auto; overflow-y: auto; min-width: 0; } /* Canvas ベース Timeline (新実装) — ruler/grid/keys を 1 枚 canvas で描画。 ★ Playhead は DOM 要素 (.animator-tl-playhead-dom) に分離して GPU 合成で smooth に動かす */ .animator-tl-canvas { display: block; /* ★ width/height は JS が style.width / style.height で動的設定。 min-height: 100% を付けると track-col が縦に大きいときに canvas が引き伸ばされて bitmap (例: 136px) が CSS で 500px+ に拡大表示され、内容がぼやけて見えなくなる。 ここでは強制的に inline style だけが効くようにする。 */ background: transparent; cursor: default; user-select: none; touch-action: none; } /* ★ DOM Playhead — Canvas の上にオーバーレイ。CSS transform で GPU 合成 → 絶対 smooth。 位置 (left) は JS が `transform: translate3d(Xpx, 0, 0)` で更新する。 */ .animator-tl-playhead-dom { position: absolute; top: 0; left: 0; width: 0; /* 中身 (line + handle) の幅は内部要素で決定 */ height: 100%; pointer-events: none; /* クリックは canvas に通す */ z-index: 5; /* transform: translate3d で位置を決める (left は固定 0) */ will-change: transform; } .animator-tl-playhead-line { position: absolute; left: -0.75px; /* line width 1.5px の中央が x = 0 になるように */ top: 24px; /* ruler 下から開始 (ruler の高さ = TL_LAYOUT.rulerH = 24px) */ width: 1.5px; height: calc(100% - 24px); background: #ff5555; box-shadow: 0 0 4px rgba(255, 85, 85, 0.6); } .animator-tl-playhead-handle { position: sticky; /* ★ スクロールに追従 — ruler 帯に常に表示 */ top: 0; left: 0; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 9px solid #ff5555; transform: translateX(-6px); /* 三角形を中央寄せ (border-left 6px 分) */ } /* スクラブ中はハンドルを明るく */ .animator-tl-track-col[data-scrubbing="1"] .animator-tl-playhead-handle { border-top-color: #ffb0b0; } /* フレーム式モード用の画像 thumb overlay (キャンバス上に絶対配置) */ .animator-tl-frame-overlay { position: absolute; top: 24px; /* ルーラー下 */ left: 0; height: 24px; /* sprite track 行と同じ高さ */ pointer-events: none; } .animator-tl-frame-overlay img { position: absolute; height: 22px; width: auto; object-fit: contain; border: 1px solid rgba(116, 235, 213, 0.25); } /* Phase 4: 時間ルーラー / グリッド / プレイヘッド は Canvas (`_animatorDrawTLRuler`/Grid/Playhead) に完全統合されたため、DOM 用 CSS は不要。色 / ストロークは canvas 側にハードコード。 */ /* ─── AnimationPV / AnimatorPV 切替トグル (Preview セクションヘッダ右側) ─── */ .animator-pv-toggle { display: inline-flex; padding: 2px; background: #2a2a2a; border: 1px solid #444; border-radius: 4px; margin-right: 4px; vertical-align: middle; } .animator-pv-btn { padding: 3px 10px; background: transparent; border: none; color: #999; cursor: pointer; font-size: 11px; font-weight: 600; border-radius: 3px; transition: background 0.12s, color 0.12s; } .animator-pv-btn:hover { background: rgba(116, 235, 213, 0.12); color: #ccc; } .animator-pv-btn.animator-pv-active { background: linear-gradient(135deg, #2d5a52, #1f4540); color: #74ebd5; box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.4); } .animator-pv-btn[data-pv="machine"].animator-pv-active { background: linear-gradient(135deg, #4a3760, #2a1f3a); color: #d8b4fe; } /* Phase 4: Sprite ストリップ / プロパティ Track 行 / プレイヘッド / tracks-empty は全て Canvas (`_animatorDrawTLSpriteTrack`, `_animatorDrawTLPropertyTracks`, `_animatorDrawTLPlayhead`) に統合されたため、DOM 用 CSS は不要。背景色 / ストローク / ラベルは canvas 側で描画。 */ /* ============================================================ 削除確認ダイアログ（次回から表示しない チェックボックス付き） ============================================================ */ .animator-confirm-overlay { position: fixed; inset: 0; z-index: 400; background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(2px); } /* ★ モード変更時のダイアログ */ .animator-mode-change-box { min-width: 460px; max-width: 540px; background: #2d2d30; border: 1px solid #555; border-radius: 8px; color: #ddd; box-shadow: 0 10px 40px rgba(0,0,0,0.6); display: flex; flex-direction: column; } .animator-mode-change-head { padding: 14px 18px; background: linear-gradient(90deg, rgba(255, 180, 80, 0.18), rgba(255, 80, 80, 0.12)); border-bottom: 1px solid #555; font-size: 15px; font-weight: 700; color: #ffb850; } .animator-mode-change-body { padding: 18px; font-size: 12px; line-height: 1.7; } .animator-mode-change-summary { text-align: center; font-size: 14px; margin-bottom: 14px; padding: 10px; background: #1f1f22; border-radius: 6px; } .animator-mode-change-cur { display: inline-block; padding: 3px 10px; background: rgba(116, 235, 213, 0.15); color: #74ebd5; border-radius: 4px; font-weight: 700; } .animator-mode-change-new { display: inline-block; padding: 3px 10px; background: rgba(192, 132, 252, 0.18); color: #c084fc; border-radius: 4px; font-weight: 700; } .animator-mode-change-arrow { font-size: 18px; color: #888; margin: 0 8px; } .animator-mode-change-stats { background: #232323; padding: 10px 12px; border-radius: 4px; border-left: 3px solid #c084fc; margin-bottom: 12px; font-family: var(--font-mono, monospace); font-size: 11px; } .animator-mode-change-warn { background: rgba(255, 100, 100, 0.08); color: #ffb0b0; padding: 10px 12px; border-radius: 4px; border-left: 3px solid #ff6666; font-size: 11px; } .animator-mode-change-foot { display: flex; gap: 8px; padding: 12px 16px; background: #3a3a3e; border-top: 1px solid #555; } .animator-mode-change-btn { flex: 1; padding: 10px 12px; background: #525252; color: #fff; border: 1px solid #6a6a6a; border-radius: 4px; cursor: pointer; font-size: 12px; font-weight: 700; text-align: center; line-height: 1.4; } .animator-mode-change-btn small { display: block; font-size: 9.5px; font-weight: 400; color: rgba(255,255,255,0.6); margin-top: 2px; } .animator-mode-change-btn:hover { background: #5d5d5d; } .animator-mode-change-btn-newasset { background: linear-gradient(135deg, #2d5a52, #1f4540); border-color: rgba(116, 235, 213, 0.5); color: #74ebd5; } .animator-mode-change-btn-newasset:hover { background: linear-gradient(135deg, #3d6a62, #2f5550); filter: brightness(1.15); } .animator-mode-change-btn-discard { background: linear-gradient(135deg, #6e3a3a, #4a2828); border-color: rgba(255, 100, 100, 0.5); color: #ffb0b0; } .animator-mode-change-btn-discard:hover { background: linear-gradient(135deg, #7d4444, #5a3333); } .animator-mode-change-btn-cancel { background: #424246; color: #ccc; } /* ★ 図形追加ボタン (timeline ヘッダ右) */ .animator-timeline-shapebtn { padding: 4px 12px; background: linear-gradient(135deg, #4a3760, #2a1f3a); color: #d8b4fe; border: 1px solid rgba(192, 132, 252, 0.45); border-radius: 4px; cursor: pointer; font-size: 12px; font-weight: 700; margin-left: 4px; white-space: nowrap; flex-shrink: 0; } .animator-timeline-shapebtn:hover { background: linear-gradient(135deg, #5a4070, #3a2950); border-color: #c084fc; color: #fff; } /* ★ Layers バー — トグル式ドロップダウン */ .animator-tl-layers-bar { position: relative; display: flex; align-items: center; padding: 4px 8px; background: rgba(80, 120, 200, 0.06); border-bottom: 1px solid rgba(80, 120, 200, 0.18); min-height: 28px; font-family: sans-serif; } /* Trigger ボタン */ .animator-tl-layer-trigger { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: rgba(60, 70, 90, 0.6); border: 1px solid rgba(120, 140, 180, 0.4); border-radius: 4px; color: #ddd; font-size: 11px; cursor: pointer; white-space: nowrap; user-select: none; } .animator-tl-layer-trigger:hover { background: rgba(80, 100, 140, 0.7); border-color: rgba(140, 180, 230, 0.6); } .animator-tl-layer-trigger-open { background: linear-gradient(135deg, #3a6fb8, #2a4a8a); border-color: #80b8ff; color: #fff; box-shadow: 0 0 6px rgba(128, 184, 255, 0.4); } .animator-tl-layer-trigger-open:hover { background: linear-gradient(135deg, #4a80c8, #3a5a9a); } .animator-tl-layer-trigger-label { color: #80b8ff; font-weight: 700; } .animator-tl-layer-trigger-name { font-weight: 700; } .animator-tl-layer-trigger-count { display: inline-block; padding: 0 5px; background: rgba(128, 184, 255, 0.25); border: 1px solid rgba(128, 184, 255, 0.4); border-radius: 8px; color: #80b8ff; font-size: 9px; font-weight: 700; } .animator-tl-layer-trigger-caret { font-size: 8px; opacity: 0.8; } /* Dropdown パネル */ .animator-tl-layer-dropdown { position: absolute; top: calc(100% + 2px); left: 8px; z-index: 80; min-width: 260px; max-width: 360px; background: #1f1f24; border: 1px solid #80b8ff; border-radius: 6px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5); padding: 6px; display: flex; flex-direction: column; gap: 4px; } .animator-tl-layer-dropdown-header { font-size: 10px; color: #888; padding: 4px 8px 6px; border-bottom: 1px solid #333; margin-bottom: 2px; display: flex; align-items: center; justify-content: space-between; gap: 8px; } .animator-tl-layer-dropdown-list { display: flex; flex-direction: column; gap: 2px; max-height: 280px; overflow-y: auto; } /* Layer 行 */ .animator-tl-layer-row { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: rgba(60, 70, 90, 0.4); border: 1px solid rgba(120, 140, 180, 0.2); border-radius: 4px; color: #aab8d0; font-size: 11px; cursor: pointer; user-select: none; transition: background 0.1s; } .animator-tl-layer-row:hover { background: rgba(80, 100, 140, 0.6); color: #fff; border-color: rgba(140, 180, 230, 0.4); } .animator-tl-layer-row-active { background: linear-gradient(135deg, rgba(58, 111, 184, 0.7), rgba(42, 74, 138, 0.7)); border-color: #80b8ff; color: #fff; } .animator-tl-layer-row-active:hover { background: linear-gradient(135deg, rgba(74, 128, 200, 0.85), rgba(58, 90, 154, 0.85)); } .animator-tl-layer-row-drag { font-size: 10px; opacity: 0.5; cursor: grab; letter-spacing: -2px; } .animator-tl-layer-row-drag:active { cursor: grabbing; } .animator-tl-layer-row-vis { font-size: 11px; opacity: 0.7; padding: 0 2px; } .animator-tl-layer-row-vis:hover { opacity: 1; color: #80b8ff; } /* サムネイル (frames[0] を表示) */ .animator-tl-layer-row-thumb { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: repeating-conic-gradient(#26262a 0% 25%, #1a1a1d 0% 50%) 50% / 8px 8px; border: 1px solid rgba(120, 140, 180, 0.3); border-radius: 3px; flex: 0 0 auto; overflow: hidden; } .animator-tl-layer-row-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; image-rendering: pixelated; /* ドット絵対応 */ } .animator-tl-layer-row-thumb-empty { color: #555; font-size: 12px; background: rgba(40, 40, 48, 0.6); } /* フレーム数バッジ (Frame モード 2 枚以上) */ .animator-tl-layer-row-fc { font-size: 9px; color: #aaa; background: rgba(255,255,255,0.08); padding: 1px 4px; border-radius: 3px; } /* トラック数バッジ — どの Layer にプロパティ Track が設定されているか分かる */ .animator-tl-layer-row-tc { font-size: 9px; color: #ffd084; background: rgba(255, 192, 100, 0.15); border: 1px solid rgba(255, 192, 100, 0.3); padding: 0 4px; border-radius: 3px; font-weight: 700; } .animator-tl-layer-row-name { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; } .animator-tl-layer-row-mode { display: inline-block; width: 16px; height: 16px; line-height: 16px; text-align: center; font-size: 9px; font-weight: 700; border-radius: 3px; background: rgba(128, 184, 255, 0.18); color: #80b8ff; } /* Layer 行の ⋯ メニュー / × 削除ボタン共通スタイル */ .animator-tl-layer-row-menu, .animator-tl-layer-row-del { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; background: transparent; border: 1px solid transparent; border-radius: 3px; color: #888; font-size: 12px; cursor: pointer; padding: 0; font-family: sans-serif; transition: background 0.1s, color 0.1s; } .animator-tl-layer-row-menu:hover { background: rgba(128, 184, 255, 0.2); border-color: rgba(128, 184, 255, 0.4); color: #80b8ff; } .animator-tl-layer-row-del:hover:not(:disabled) { background: rgba(255, 100, 100, 0.2); border-color: rgba(255, 100, 100, 0.4); color: #ff8080; } .animator-tl-layer-row-del:disabled { opacity: 0.25; cursor: not-allowed; } .animator-tl-layer-row-dragging { opacity: 0.4; } .animator-tl-layer-row-dropbefore { box-shadow: 0 -2px 0 #80b8ff; /* 上端に青ライン → ここに挿入されることを示す */ } .animator-tl-layer-add { display: block; width: 100%; margin-top: 4px; padding: 6px 10px; background: rgba(120, 200, 120, 0.15); border: 1px dashed rgba(120, 200, 120, 0.4); border-radius: 4px; color: #90d090; font-size: 11px; font-weight: 700; cursor: pointer; text-align: center; } .animator-tl-layer-add:hover { background: rgba(120, 200, 120, 0.25); border-color: rgba(120, 200, 120, 0.7); color: #b0e0b0; } /* Layer 右クリックメニュー */ .animator-tl-layer-menu { z-index: 1000; background: #2a2a2e; border: 1px solid #555; border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.6); min-width: 160px; max-height: 360px; overflow-y: auto; padding: 4px 0; font-family: sans-serif; } .animator-tl-layer-menu button { display: block; width: 100%; padding: 6px 12px; background: transparent; border: none; color: #ddd; font-size: 11px; text-align: left; cursor: pointer; } .animator-tl-layer-menu button:hover:not(:disabled) { background: rgba(128, 184, 255, 0.15); color: #80b8ff; } .animator-tl-layer-menu button:disabled { color: #666; cursor: not-allowed; } .animator-tl-layer-menu-sep { height: 1px; background: #444; margin: 4px 0; } .animator-tl-layer-menu-label { padding: 4px 12px 2px; font-size: 10px; color: #888; text-transform: uppercase; letter-spacing: 0.5px; } /* ★ シート分割ボタン — 図形追加と同じ並び、色は青系 (Unity Sprite Editor 風) */ .animator-timeline-sheetbtn { padding: 4px 12px; background: linear-gradient(135deg, #2a3f60, #1a2a3f); color: #80b8ff; border: 1px solid rgba(128, 184, 255, 0.45); border-radius: 4px; cursor: pointer; font-size: 12px; font-weight: 700; margin-left: 4px; white-space: nowrap; flex-shrink: 0; } .animator-timeline-sheetbtn:hover { background: linear-gradient(135deg, #3a4f70, #2a3a50); border-color: #80b8ff; color: #fff; } /* ★ State Graph 空白ドロップ時の「新規 State 作成」ポップアップ */ .animator-create-state-popup { position: fixed; z-index: 500; background: #1a1525; border: 1px solid #c084fc; border-radius: 6px; padding: 6px; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.7); display: flex; flex-direction: column; gap: 3px; min-width: 200px; } .animator-create-state-popup-title { font-size: 10px; font-weight: 700; color: rgba(255,255,255,0.55); padding: 4px 8px; border-bottom: 1px solid rgba(255,255,255,0.1); margin-bottom: 2px; } .animator-create-state-popup-btn { padding: 8px 12px; background: transparent; border: none; color: #ddd; cursor: pointer; font-size: 12px; font-weight: 500; text-align: left; border-radius: 4px; transition: background 0.1s; } .animator-create-state-popup-btn:hover { background: rgba(192, 132, 252, 0.18); color: #fff; } .animator-create-state-popup-btn-primary { background: rgba(192, 132, 252, 0.15); color: #d8b4fe; font-weight: 600; } .animator-create-state-popup-btn-primary:hover { background: rgba(192, 132, 252, 0.32); color: #fff; } .animator-create-state-popup-btn-cancel { color: rgba(255,255,255,0.6); font-size: 11px; } /* ★ GSComp — 全画面モーダル (GSGit / GSAnim と同じパターン) */ #gscomp-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: #2d2d30; z-index: 1300; display: flex; flex-direction: column; color: #ddd; } /* タイトルバー */ .gscomp-bar { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: linear-gradient(180deg, #8a5fc8 0%, #5a3f8a 100%); border-bottom: 1px solid #4a2f7a; flex: 0 0 auto; color: #fff; } .gscomp-bar-logo { height: 22px; width: auto; filter: brightness(0) invert(100%); opacity: 0.95; } .gscomp-bar-title { font-size: 16px; font-weight: 700; letter-spacing: 0.04em; } .gscomp-bar-subtitle { font-size: 11px; color: rgba(255,255,255,0.7); font-family: sans-serif; } .gscomp-bar-spacer { flex: 1 1 auto; } .gscomp-close { background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3); color: #fff; padding: 6px 14px; border-radius: 4px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: sans-serif; } .gscomp-close:hover { background: rgba(255,255,255,0.25); border-color: rgba(255,255,255,0.5); } /* ボディ — 全画面の残り領域を占める */ .gscomp-box { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; overflow: hidden; } .gscomp-body { flex: 1 1 auto; display: grid; grid-template-columns: 360px 1fr; min-height: 0; overflow: hidden; } .gscomp-left { padding: 16px; border-right: 1px solid #555; /* ★ マウスホイールでスクロール可能 */ overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 14px; /* ★ Grid item の min-height デフォルトは auto (= content size に膨らむ) なので明示 0 にして親の overflow に従わせる */ min-height: 0; height: 100%; } .gscomp-section { display: flex; flex-direction: column; gap: 6px; } .gscomp-section > label { font-size: 11px; color: #aaa; font-weight: 700; font-family: sans-serif; } .gscomp-section select, .gscomp-section input[type="text"] { background: #1e1e22; border: 1px solid #555; color: #ddd; padding: 5px 8px; border-radius: 3px; font-size: 12px; font-family: sans-serif; } .gscomp-check { font-size: 11px; color: #ccc; font-weight: 400; font-family: sans-serif; display: flex; align-items: center; gap: 6px; } .gscomp-check code { font-family: monospace; font-size: 10px; background: rgba(255,255,255,0.06); padding: 1px 4px; border-radius: 2px; } .gscomp-info { font-size: 11px; color: #aaa; background: rgba(255,255,255,0.04); padding: 8px 10px; border-radius: 3px; font-family: sans-serif; } .gscomp-info b { color: #c084fc; } .gscomp-btn-primary, .gscomp-btn { padding: 7px 12px; border-radius: 4px; font-size: 12px; font-weight: 600; cursor: pointer; border: 1px solid #555; font-family: sans-serif; margin-top: 4px; } .gscomp-btn-primary { background: linear-gradient(135deg, #8a5fc8, #5a3f8a); color: #fff; border-color: #a370e0; } .gscomp-btn-primary:hover { background: linear-gradient(135deg, #9a6fd8, #6a4f9a); } .gscomp-btn { background: #3a3a40; color: #ddd; } .gscomp-btn:hover { background: #4a4a50; border-color: #c084fc; } .gscomp-right { padding: 16px; display: flex; flex-direction: column; /* ★ Grid item の min-height デフォルトは auto なので明示 0 にして textarea の overflow が効くように */ min-height: 0; height: 100%; /* 右ペイン自体は overflow:hidden、内部の textarea がスクロール */ overflow: hidden; } /* エディタ ツールバー */ .gscomp-editor-toolbar { display: flex; align-items: center; gap: 4px; padding: 0 0 10px 0; flex-wrap: wrap; font-family: sans-serif; } .gscomp-tool-btn { background: #3a3a40; border: 1px solid #555; color: #ddd; padding: 4px 10px; border-radius: 4px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: sans-serif; } .gscomp-tool-btn:hover { background: #4a4a50; border-color: #c084fc; } .gscomp-tool-btn#gscomp-ai-draft { background: linear-gradient(135deg, #8a5fc8, #5a3f8a); border-color: #a370e0; color: #fff; margin-right: 6px; } .gscomp-tool-btn#gscomp-ai-draft:hover { background: linear-gradient(135deg, #9a6fd8, #6a4f9a); } .gscomp-ai-caret { font-size: 9px; opacity: 0.8; margin-left: 2px; } .gscomp-ai-menu-wrap { position: relative; display: inline-block; } .gscomp-ai-menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 1500; min-width: 280px; background: #2d2d33; border: 1px solid #6a4f9a; border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,0.5); padding: 6px; display: flex; flex-direction: column; gap: 2px; } .gscomp-ai-menu button { background: transparent; border: 1px solid transparent; color: #ddd; padding: 7px 10px; border-radius: 4px; font-size: 12px; text-align: left; cursor: pointer; font-family: sans-serif; } .gscomp-ai-menu button:hover:not(:disabled) { background: rgba(192, 132, 252, 0.15); border-color: rgba(192, 132, 252, 0.4); color: #fff; } .gscomp-ai-menu button:disabled { opacity: 0.4; cursor: not-allowed; } .gscomp-ai-menu-sep { height: 1px; background: #444; margin: 4px 0; } .gscomp-ai-menu-label { font-size: 10px; color: #888; padding: 4px 10px 2px; font-family: sans-serif; } .gscomp-tool-divider { width: 1px; height: 18px; background: #555; margin: 0 6px; } .gscomp-view-toggle { display: inline-flex; border: 1px solid #555; border-radius: 4px; overflow: hidden; margin-left: auto; } .gscomp-view-btn { background: #2a2a30; border: none; color: #aaa; padding: 4px 10px; font-size: 11px; cursor: pointer; font-family: sans-serif; border-right: 1px solid #555; } .gscomp-view-btn:last-child { border-right: none; } .gscomp-view-btn:hover { background: #3a3a40; color: #fff; } .gscomp-view-btn.gscomp-view-active { background: linear-gradient(135deg, #5a3f8a, #3a2f7a); color: #fff; } /* エディタ + プレビュー ラッパ */ .gscomp-editor-wrap { flex: 1 1 auto; min-height: 0; min-width: 0; display: grid; gap: 10px; overflow: hidden; } /* split: 左右 50:50 */ .gscomp-editor-wrap[data-view="split"] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } /* edit: 1 カラムのみ — プレビュー側は display:none で完全除去 */ .gscomp-editor-wrap[data-view="edit"] { grid-template-columns: minmax(0, 1fr); } .gscomp-editor-wrap[data-view="edit"] #gscomp-preview { display: none; } /* preview: 1 カラムのみ — エディタ側は display:none で完全除去 */ .gscomp-editor-wrap[data-view="preview"] { grid-template-columns: minmax(0, 1fr); } .gscomp-editor-wrap[data-view="preview"] #gscomp-output { display: none; } #gscomp-output { width: 100%; height: 100%; min-height: 0; background: #1a1a1d; color: #ddd; border: 1px solid #444; border-radius: 4px; padding: 12px; font-family: 'SF Mono', Consolas, monospace; font-size: 12px; line-height: 1.6; resize: none; overflow-y: auto; } /* レンダリングされたプレビュー */ .gscomp-preview-rendered { background: #f8f6f0; /* 紙風 (Obsidian Light テーマ似) */ color: #2a2a2a; border: 1px solid #444; border-radius: 4px; padding: 28px 36px; overflow-y: auto; font-family: 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Meiryo', sans-serif; font-size: 14px; line-height: 1.75; } .gscomp-preview-rendered h1 { font-size: 24px; border-bottom: 2px solid #c084fc; padding-bottom: 6px; margin: 0.5em 0 0.6em; color: #1a1a1a; } .gscomp-preview-rendered h2 { font-size: 20px; border-bottom: 1px solid #ddd; padding-bottom: 4px; margin: 1.2em 0 0.5em; color: #2a2a2a; } .gscomp-preview-rendered h3 { font-size: 16px; margin: 1em 0 0.4em; color: #3a3a3a; } .gscomp-preview-rendered h4 { font-size: 14px; margin: 0.8em 0 0.3em; color: #4a4a4a; } .gscomp-preview-rendered p { margin: 0.5em 0; } .gscomp-preview-rendered a { color: #5a3f8a; text-decoration: none; border-bottom: 1px dotted #5a3f8a; } .gscomp-preview-rendered a:hover { border-bottom-style: solid; } .gscomp-preview-rendered ul, .gscomp-preview-rendered ol { margin: 0.5em 0; padding-left: 1.5em; } .gscomp-preview-rendered li { margin: 0.2em 0; } .gscomp-preview-rendered code { background: rgba(192,132,252,0.12); color: #5a3f8a; padding: 1px 5px; border-radius: 3px; font-family: 'SF Mono', Consolas, monospace; font-size: 0.9em; } .gscomp-preview-rendered pre.gscomp-md-code { background: #2a2a30; color: #ddd; padding: 12px 16px; border-radius: 4px; overflow-x: auto; font-size: 12px; line-height: 1.5; } .gscomp-preview-rendered blockquote { border-left: 4px solid #c084fc; padding: 4px 12px; margin: 0.5em 0; background: rgba(192,132,252,0.06); color: #555; font-style: italic; } .gscomp-preview-rendered hr { border: none; border-top: 1px solid #ddd; margin: 1.5em 0; } /* Wikilink */ .gscomp-md-wikilink { color: #5a3f8a !important; background: rgba(192,132,252,0.10); padding: 1px 4px; border-radius: 3px; border-bottom: none !important; } /* Frontmatter */ .gscomp-md-fm { background: #eeece5; border: 1px dashed #ccc; border-radius: 4px; padding: 8px 12px; margin-bottom: 1em; font-size: 11px; } .gscomp-md-fm-label { font-weight: 700; color: #888; margin-bottom: 4px; } .gscomp-md-fm pre { margin: 0; font-family: 'SF Mono', Consolas, monospace; color: #666; white-space: pre-wrap; } /* Mermaid */ .gscomp-md-mermaid { background: #f0eee5; border: 1px solid #ccc; border-radius: 4px; padding: 12px; margin: 0.8em 0; } .gscomp-md-mermaid-label { font-weight: 700; color: #888; margin-bottom: 6px; font-size: 11px; } .gscomp-md-mermaid pre { margin: 0; font-family: 'SF Mono', Consolas, monospace; font-size: 11px; color: #555; } /* Callouts */ .gscomp-md-callout { border-left: 4px solid #888; padding: 8px 14px; margin: 0.8em 0; border-radius: 0 4px 4px 0; background: #f0eee5; } .gscomp-md-callout-title { font-weight: 700; margin-bottom: 4px; color: #555; } .gscomp-md-callout-body { color: #555; } .gscomp-md-callout-note { border-left-color: #5a8fd8; background: #e8efff; } .gscomp-md-callout-warning { border-left-color: #d89a3f; background: #fff4e0; } .gscomp-md-callout-todo { border-left-color: #5fa3a3; background: #e0f0f0; } .gscomp-md-callout-tip { border-left-color: #5fa370; background: #e8f5e8; } .gscomp-md-callout-info { border-left-color: #5a8fd8; background: #e8efff; } .gscomp-md-callout-danger { border-left-color: #d85f5f; background: #ffe0e0; } /* テーブル */ .gscomp-md-table { border-collapse: collapse; margin: 0.8em 0; font-size: 12px; width: 100%; } .gscomp-md-table th, .gscomp-md-table td { border: 1px solid #ccc; padding: 6px 10px; text-align: left; } .gscomp-md-table th { background: #eee; font-weight: 700; } .gscomp-md-table tr:nth-child(even) td { background: #faf8f3; } /* 画像 */ .gscomp-md-img { max-width: 100%; border-radius: 4px; margin: 0.5em 0; } .gscomp-preview-empty { color: #aaa; font-style: italic; text-align: center; padding: 40px 0; } /* キャプチャ設定セクション (ダイアログ内) */ .gscomp-capture-section { border-top: 1px solid #444; padding-top: 12px; margin-top: 6px; } .gscomp-widget-toggle-label { padding: 6px 8px; background: rgba(192, 132, 252, 0.08); border: 1px solid rgba(192, 132, 252, 0.3); border-radius: 4px; color: #c084fc !important; font-weight: 700 !important; } .gscomp-capture-folder { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; } .gscomp-capture-folder-label { font-size: 10px; color: #888; font-family: sans-serif; padding: 4px 6px; background: rgba(255,255,255,0.04); border-radius: 3px; word-break: break-all; } .gscomp-gallery-empty { font-size: 11px; color: #666; font-family: sans-serif; padding: 12px 8px; text-align: center; background: rgba(255,255,255,0.03); border-radius: 4px; border: 1px dashed #444; } /* ★ フローティングウィジェット (画面右下に常駐 / GSComp ダイアログ閉じても残る) */ .gscomp-fw { position: fixed; z-index: 1400; background: rgba(40, 40, 48, 0.95); border: 1px solid #6a4f9a; border-radius: 8px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5); backdrop-filter: blur(8px); user-select: none; font-family: sans-serif; min-width: 180px; } .gscomp-fw-drag { display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: linear-gradient(135deg, #5a3f8a, #3a2f7a); border-radius: 7px 7px 0 0; cursor: grab; color: #fff; } .gscomp-fw-drag:active { cursor: grabbing; } .gscomp-fw-logo { height: 14px; width: auto; filter: brightness(0) invert(100%); opacity: 0.9; } .gscomp-fw-title { font-size: 11px; font-weight: 700; flex: 1 1 auto; } .gscomp-fw-count { font-size: 10px; color: rgba(255,255,255,0.7); padding: 1px 6px; background: rgba(255,255,255,0.12); border-radius: 8px; } .gscomp-fw-x { background: transparent; border: none; color: rgba(255,255,255,0.7); font-size: 14px; cursor: pointer; padding: 0 4px; } .gscomp-fw-x:hover { color: #fff; } .gscomp-fw-body { display: flex; align-items: center; gap: 6px; padding: 8px 8px 4px; } .gscomp-fw-btn { background: #4a4a52; border: 1px solid #6a6a72; color: #ddd; padding: 6px 10px; border-radius: 4px; font-size: 14px; cursor: pointer; font-family: sans-serif; } .gscomp-fw-btn:hover { background: #5a5a62; border-color: #c084fc; } .gscomp-fw-btn-rec { background: #6a3030; border-color: #9a4040; } .gscomp-fw-btn-rec:hover { background: #7a3535; } .gscomp-fw-btn-rec.gscomp-fw-recording { background: #c00000; border-color: #ff5050; color: #fff; animation: gscomp-rec-blink 1.4s infinite; } @keyframes gscomp-rec-blink { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 60, 60, 0.6); } 50% { box-shadow: 0 0 0 6px rgba(255, 60, 60, 0); } } .gscomp-fw-tl { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; color: #aaa; } .gscomp-fw-tl input[type="number"] { background: #1e1e22; border: 1px solid #555; color: #ddd; padding: 1px 3px; border-radius: 3px; font-size: 10px; } .gscomp-fw-status { padding: 0 8px 6px; font-size: 10px; color: #aaa; min-height: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gscomp-fw-status[data-kind="ok"] { color: #80e0a0; } .gscomp-fw-status[data-kind="err"] { color: #ff8080; } .gscomp-fw-status[data-kind="rec"] { color: #ff8080; font-weight: 700; } /* ギャラリー */ .gscomp-capture-gallery { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; } .gscomp-gallery-item { background: #1e1e22; border: 1px solid #444; border-radius: 4px; padding: 6px; display: flex; flex-direction: column; gap: 4px; } .gscomp-gallery-item img, .gscomp-gallery-item video { width: 100%; max-height: 100px; object-fit: contain; background: #000; border-radius: 3px; } .gscomp-gallery-info { display: flex; align-items: center; justify-content: space-between; gap: 6px; } .gscomp-gallery-name { flex: 1; font-size: 10px; color: #aaa; font-family: sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gscomp-gallery-insert { background: #5a3f8a; border: 1px solid #7a5fb0; color: #fff; padding: 2px 8px; border-radius: 3px; font-size: 10px; font-weight: 700; cursor: pointer; font-family: sans-serif; white-space: nowrap; } .gscomp-gallery-insert:hover { background: #6a4f9a; } /* GSComp 全体のスクロールバー (左パネル + textarea) — 紫テーマで揃える */ .gscomp-left::-webkit-scrollbar, #gscomp-output::-webkit-scrollbar { width: 10px; height: 10px; } .gscomp-left::-webkit-scrollbar-track, #gscomp-output::-webkit-scrollbar-track { background: #1e1e22; } .gscomp-left::-webkit-scrollbar-thumb, #gscomp-output::-webkit-scrollbar-thumb { background: #5a3f8a; border-radius: 5px; } .gscomp-left::-webkit-scrollbar-thumb:hover, #gscomp-output::-webkit-scrollbar-thumb:hover { background: #7a5fb0; } /* ★ スプライトシート分割ダイアログ — Unity Sprite Editor Grid Slice 相当 */ .animator-sheet-slicer-box { width: 720px; max-width: 95vw; min-height: 540px; background: #2d2d30; border: 1px solid #555; border-radius: 8px; color: #ddd; box-shadow: 0 10px 40px rgba(0,0,0,0.6); display: flex; flex-direction: column; } .animator-sheet-slicer-head { padding: 12px 16px; background: linear-gradient(90deg, rgba(80, 180, 255, 0.18), rgba(80, 120, 255, 0.12)); border-bottom: 1px solid #555; font-size: 14px; font-weight: 700; color: #80b8ff; display: flex; align-items: center; justify-content: space-between; } .animator-sheet-slicer-close { background: transparent; border: none; color: #888; font-size: 16px; cursor: pointer; padding: 2px 6px; } .animator-sheet-slicer-close:hover { color: #fff; } .animator-sheet-slicer-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; flex: 1 1 auto; overflow-y: auto; } .animator-sheet-slicer-pick { display: flex; gap: 12px; align-items: stretch; } .animator-sheet-slicer-filelabel { display: flex; flex-direction: column; gap: 4px; cursor: pointer; flex: 0 0 auto; } .animator-sheet-slicer-btn { display: inline-block; padding: 8px 14px; background: #3a3a40; border: 1px solid #555; border-radius: 4px; color: #ddd; font-size: 12px; text-align: center; white-space: nowrap; } .animator-sheet-slicer-filelabel:hover .animator-sheet-slicer-btn { background: #4a4a50; border-color: #80b8ff; } .animator-sheet-slicer-fname { font-size: 11px; color: #aaa; font-family: sans-serif; } .animator-sheet-slicer-drop { flex: 1 1 auto; border: 2px dashed #555; border-radius: 4px; display: flex; align-items: center; justify-content: center; color: #888; font-size: 11px; min-height: 50px; } .animator-sheet-slicer-drop-over { border-color: #80b8ff; background: rgba(128, 184, 255, 0.08); color: #80b8ff; } .animator-sheet-slicer-grid { display: grid; grid-template-columns: 250px 1fr; gap: 14px; align-items: start; } .animator-sheet-slicer-controls { display: flex; flex-direction: column; gap: 10px; } .animator-sheet-slicer-row { display: flex; flex-direction: column; gap: 4px; } .animator-sheet-slicer-row label { font-size: 11px; color: #aaa; font-family: sans-serif; } .animator-sheet-slicer-row input[type="number"], .animator-sheet-slicer-row select { background: #1e1e22; border: 1px solid #555; border-radius: 3px; color: #ddd; padding: 5px 8px; font-size: 12px; font-family: sans-serif; } .animator-sheet-slicer-row input[type="number"]:focus, .animator-sheet-slicer-row select:focus { border-color: #80b8ff; outline: none; } .animator-sheet-slicer-info { margin-top: 6px; font-size: 11px; color: #aaa; font-family: sans-serif; padding: 6px 8px; background: rgba(255,255,255,0.04); border-radius: 3px; line-height: 1.5; } .animator-sheet-slicer-info b { color: #80b8ff; } .animator-sheet-slicer-preview { background: #1a1a1d; border: 1px solid #444; border-radius: 4px; min-height: 360px; display: flex; align-items: center; justify-content: center; padding: 8px; overflow: auto; } .animator-sheet-slicer-preview-empty { color: #666; font-size: 11px; } .animator-sheet-slicer-canvas { display: block; max-width: 100%; } .animator-sheet-slicer-foot { padding: 12px 16px; border-top: 1px solid #555; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .animator-sheet-slicer-note { font-size: 11px; color: #aaa; font-family: sans-serif; } .animator-sheet-slicer-cancel, .animator-sheet-slicer-ok { padding: 7px 16px; border-radius: 4px; font-size: 12px; font-weight: 600; cursor: pointer; border: 1px solid #555; font-family: sans-serif; } .animator-sheet-slicer-cancel { background: #3a3a40; color: #ddd; } .animator-sheet-slicer-cancel:hover { background: #4a4a50; } .animator-sheet-slicer-ok { background: linear-gradient(135deg, #4a90e2, #357abd); color: #fff; border-color: #5a9fec; } .animator-sheet-slicer-ok:hover:not(:disabled) { background: linear-gradient(135deg, #5aa0f2, #4585c8); } .animator-sheet-slicer-ok:disabled { background: #2a2a2e; color: #666; border-color: #444; cursor: not-allowed; } /* ★ 図形ピッカーダイアログ */ .animator-shape-picker-box { min-width: 480px; max-width: 560px; min-height: 500px; /* ★ つぶれ防止: head + body + foot が全部見える最小高さ */ background: #2d2d30; border: 1px solid #555; border-radius: 8px; color: #ddd; box-shadow: 0 10px 40px rgba(0,0,0,0.6); display: flex; flex-direction: column; max-height: 90vh; overflow: hidden; } .animator-shape-picker-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: #3a3a3e; border-bottom: 1px solid #555; font-weight: 700; font-size: 14px; color: #d8b4fe; } .animator-shape-picker-close { background: transparent; border: none; color: #999; font-size: 16px; cursor: pointer; padding: 2px 8px; border-radius: 3px; } .animator-shape-picker-close:hover { background: rgba(255,80,80,0.2); color: #ff8888; } .animator-shape-picker-body { padding: 14px 18px; overflow-y: auto; overscroll-behavior: contain; flex: 1 1 auto; /* ★ コンテンツに応じた高さで伸縮 (0-basis だとつぶれる) */ min-height: 0; /* flex 子の overflow を効かせる */ } .animator-shape-picker-section { margin-bottom: 14px; } .animator-shape-picker-section > label { display: block; font-size: 11px; font-weight: 700; color: #aaa; margin-bottom: 6px; letter-spacing: 0.04em; } .animator-shape-picker-section-flex { display: flex; align-items: center; gap: 10px; } .animator-shape-picker-section-flex > label { margin-bottom: 0; min-width: 56px; } .animator-shape-picker-section-flex input[type="color"] { width: 40px; height: 28px; border: 1px solid #555; background: #1a1a1a; cursor: pointer; border-radius: 3px; padding: 1px; } .animator-shape-picker-checkbox { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: #ccc; cursor: pointer; } .animator-shape-picker-types { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .animator-shape-picker-type-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px 6px; background: #1f1f22; border: 1px solid #444; color: #ccc; border-radius: 5px; cursor: pointer; transition: background 0.12s, border-color 0.12s; min-height: 60px; } .animator-shape-picker-type-btn:hover { background: #2a2a30; border-color: #c084fc; color: #d8b4fe; } .animator-shape-picker-type-btn.animator-shape-picker-type-active { background: linear-gradient(135deg, #4a3760, #2a1f3a); border-color: #c084fc; color: #d8b4fe; box-shadow: inset 0 0 6px rgba(192, 132, 252, 0.3); } .animator-shape-picker-type-sym { font-size: 22px; line-height: 1; margin-bottom: 4px; } .animator-shape-picker-type-label { font-size: 10px; font-weight: 700; } .animator-shape-picker-preview-wrap { background: repeating-conic-gradient(rgba(255,255,255,0.04) 0% 25%, transparent 0% 50%) 0 0 / 16px 16px, #1a1525; border: 1px solid #444; border-radius: 4px; padding: 12px; display: flex; align-items: center; justify-content: center; min-height: 160px; } #animator-shape-preview { max-width: 140px; max-height: 140px; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5)); } .animator-shape-picker-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 16px; background: #3a3a3e; border-top: 1px solid #555; } .animator-shape-picker-foot button { padding: 6px 14px; background: #525252; color: #fff; border: 1px solid #6a6a6a; border-radius: 4px; cursor: pointer; font-size: 12px; font-weight: 700; } .animator-shape-picker-foot button:hover { background: #5d5d5d; } .animator-shape-picker-add { background: linear-gradient(135deg, #4a3760, #2a1f3a) !important; border-color: #c084fc !important; color: #d8b4fe !important; } .animator-shape-picker-add:hover { background: linear-gradient(135deg, #5a4070, #3a2950) !important; color: #fff !important; } .animator-confirm-modal { min-width: 360px; max-width: 480px; background: #3a3a3a; border: 1px solid #5a5a5a; border-radius: 8px; box-shadow: 0 8px 32px rgba(0,0,0,0.5); padding: 20px 22px; color: var(--ani-text, #e0e0e0); } .animator-confirm-title { font-size: 14px; font-weight: 800; color: #ff8c8c; margin-bottom: 10px; letter-spacing: 0.5px; } .animator-confirm-message { font-size: 13px; line-height: 1.6; margin-bottom: 12px; word-break: break-word; } .animator-confirm-message b { color: #fff; } .animator-confirm-ref-warn { background: rgba(255, 140, 96, 0.1); border-left: 3px solid #ff9a60; padding: 8px 10px; margin-bottom: 12px; font-size: 11px; color: #ffb088; line-height: 1.5; border-radius: 3px; } .animator-confirm-skip { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ani-text-mute, #a8a8a8); cursor: pointer; padding: 6px 0; border-top: 1px dashed #555; margin-top: 8px; } .animator-confirm-skip input { transform: scale(1.1); cursor: pointer; } .animator-confirm-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; } .animator-confirm-actions button { padding: 7px 16px; font-size: 12px; font-weight: 700; border-radius: 4px; cursor: pointer; border: 1px solid #6a6a6a; } .animator-confirm-cancel { background: #525252; color: #fff; } .animator-confirm-cancel:hover { background: #5d5d5d; } .animator-confirm-ok { background: #6e3a3a !important; color: #ffd0d0 !important; border-color: #8a4848 !important; } .animator-confirm-ok:hover { background: #7d4444 !important; } .animator-confirm-ok:focus { outline: 2px solid #ff8c8c; outline-offset: 2px; } /* ヘルプ内の kbd タグと再表示リセットボタン */ .animator-help-note kbd { display: inline-block; padding: 1px 6px; font-family: var(--font-mono, monospace); font-size: 10px; font-weight: 700; background: #525252; color: #fff; border: 1px solid #6a6a6a; border-bottom-width: 2px; border-radius: 3px; line-height: 1.2; margin: 0 1px; } .animator-help-reset-confirms { margin-left: 12px; padding: 3px 10px; font-size: 10px; background: #525252; color: var(--ani-text); border: 1px solid #6a6a6a; border-radius: 3px; cursor: pointer; } .animator-help-reset-confirms:hover { background: #5d5d5d; } /* ============================================================ セクション並び替え（ディープリファクト版・同カラム内のみ） ============================================================ */ /* ▲▼ ボタンは廃止（旧バージョンの遺物） */ .animator-section-arrows { display: none !important; } /* ドラッグハンドル ⋮⋮（同カラム内上下入れ替え専用） */ .animator-section-grip { display: inline-block; width: 14px; margin-right: 6px; text-align: center; font-size: 12px; color: var(--ani-text-mute, #888); cursor: grab; letter-spacing: -3px; font-weight: 800; user-select: none; border-radius: 3px; padding: 2px 0; transition: background 0.12s, color 0.12s; flex-shrink: 0; } .animator-section-grip:hover { background: rgba(192, 132, 252, 0.2); color: #c084fc; } .animator-section-grip:active { cursor: grabbing; } /* ドロップ位置インジケータ（行間に挿入される紫の横線） */ .animator-row-drop-indicator { height: 3px; background: linear-gradient(90deg, transparent, #c084fc 20%, #c084fc 80%, transparent); border-radius: 2px; margin: 4px 0; box-shadow: 0 0 8px rgba(192, 132, 252, 0.6); animation: ani-drop-indicator-pulse 1s ease-in-out infinite; pointer-events: none; } /* 横ドック位置インジケータ（セクション縁に表示される紫の縦線） */ .animator-h-drop-indicator { background: linear-gradient(180deg, transparent, #c084fc 20%, #c084fc 80%, transparent); border-radius: 2px; box-shadow: 0 0 8px rgba(192, 132, 252, 0.6); animation: ani-drop-indicator-pulse 1s ease-in-out infinite; pointer-events: none; z-index: 10; } @keyframes ani-drop-indicator-pulse { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } } /* 旧 grip OLD-DISABLED スタイル（参照用残置） */ .animator-section-grip-OLD-DISABLED { display: inline-block; width: 14px; margin-right: 4px; text-align: center; font-size: 11px; color: var(--ani-text-mute, #888); cursor: grab; letter-spacing: -3px; font-weight: 800; user-select: none; border-radius: 3px; padding: 2px 0; } .animator-section-grip-OLD-DISABLED:hover { background: rgba(192, 132, 252, 0.2); color: #c084fc; } .animator-section-grip:active { cursor: grabbing; } .animator-section-dragging { opacity: 0.5; outline: 2px dashed #c084fc; } /* ドロップ位置インジケータ */ .animator-section-drop-above { position: relative; } .animator-section-drop-above::before { content: ''; position: absolute; top: -3px; left: 0; right: 0; height: 3px; background: #74ebd5; box-shadow: 0 0 8px rgba(116, 235, 213, 0.7); border-radius: 2px; z-index: 100; pointer-events: none; } .animator-section-drop-below { position: relative; } .animator-section-drop-below::after { content: ''; position: absolute; bottom: -3px; left: 0; right: 0; height: 3px; background: #74ebd5; box-shadow: 0 0 8px rgba(116, 235, 213, 0.7); border-radius: 2px; z-index: 100; pointer-events: none; } /* ドロップ拒否（カテゴリ不一致） */ .animator-section-drop-rejected { outline: 2px dashed #ff5555; outline-offset: -2px; position: relative; cursor: not-allowed; } .animator-section-drop-rejected::before { content: '🚫 配置不可'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(255, 85, 85, 0.9); color: #fff; font-size: 12px; font-weight: 800; padding: 6px 14px; border-radius: 4px; z-index: 200; pointer-events: none; white-space: nowrap; } /* 横並びドロップ (左右) インジケータ */ .animator-section-drop-left, .animator-section-drop-right { position: relative; } .animator-section-drop-left::before { content: ''; position: absolute; top: 0; bottom: 0; left: -3px; width: 3px; background: #ffd666; box-shadow: 0 0 8px rgba(255, 214, 102, 0.8); border-radius: 2px; z-index: 100; pointer-events: none; } .animator-section-drop-right::after { content: ''; position: absolute; top: 0; bottom: 0; right: -3px; width: 3px; background: #ffd666; box-shadow: 0 0 8px rgba(255, 214, 102, 0.8); border-radius: 2px; z-index: 100; pointer-events: none; } /* row 内のセクション間 横ディバイダー */ .animator-section-h-divider { flex: 0 0 5px; width: 5px; background: transparent; cursor: col-resize; position: relative; margin: 0 1px; z-index: 5; } .animator-section-h-divider:hover { background: rgba(192, 132, 252, 0.4); } .animator-section-h-divider:hover::before { content: '⋮'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: rgba(255,255,255,0.8); font-size: 10px; line-height: 1; } /* 縁ドロップ: 既存カラムをずらして空白プレースホルダーを挿入 */ .animator-split-row { position: relative; } .animator-col-placeholder { flex: 0 0 200px; min-height: 100%; background: rgba(192, 132, 252, 0.12); border: 2px dashed #c084fc; border-radius: 6px; margin: 2px 4px; display: flex; align-items: center; justify-content: center; position: relative; pointer-events: none; box-shadow: inset 0 0 30px rgba(192, 132, 252, 0.25); /* 既存カラムが横にずれて空間ができるアニメーション */ animation: animator-col-placeholder-in 0.12s ease-out; } @keyframes animator-col-placeholder-in { from { flex-basis: 0; opacity: 0; } to { flex-basis: 200px; opacity: 1; } } .animator-col-placeholder::before { content: attr(data-label); color: #c084fc; font-size: 12px; font-weight: 800; letter-spacing: 2px; writing-mode: vertical-rl; text-orientation: mixed; } .animator-col-placeholder::after { content: '⬇ ドロップで新カラム作成 ⬇'; position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); font-size: 9px; color: rgba(192, 132, 252, 0.7); background: rgba(0,0,0,0.5); padding: 2px 6px; border-radius: 3px; white-space: nowrap; } /* 内縁プレースホルダー (Animation/Animator 領域内での新カラム) */ .animator-col-placeholder-inner { flex: 0 0 160px; border-color: #74ebd5; background: rgba(116, 235, 213, 0.1); box-shadow: inset 0 0 30px rgba(116, 235, 213, 0.18); pointer-events: auto; /* ★ 自身で dragover/drop を受け取る（バウンス防止） */ } .animator-col-placeholder-inner::before, .animator-col-placeholder-inner::after { pointer-events: none; /* ::before/::after は引き続きスルー */ } .animator-col-placeholder-inner::before { color: #74ebd5; } .animator-col-placeholder-inner::after { color: rgba(116, 235, 213, 0.8); } /* ============================================================ Graph State Machine (Unity Animator Window 互換) ============================================================ */ .animator-state-graph-body { display: flex; flex-direction: column; padding: 0 !important; } .animator-state-graph-toolbar { display: flex; align-items: center; gap: 10px; padding: 6px 12px; background: #353535; border-bottom: 1px solid var(--ani-border); font-size: 11px; flex: 0 0 auto; } .animator-state-graph-hint { flex: 1; color: var(--ani-text-mute); font-style: italic; } .animator-state-graph-fit { padding: 3px 10px; font-size: 11px; background: #525252; color: var(--ani-text); border: 1px solid #6a6a6a; border-radius: 3px; cursor: pointer; } .animator-state-graph-fit:hover { background: #5d5d5d; } .animator-state-graph-canvas { flex: 1 1 auto; position: relative; background: linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px) 0 0 / 20px 20px, linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px) 0 0 / 20px 20px, #232323; min-height: 220px; overflow: auto; } .animator-state-graph-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; /* ★ メインキャンバス方式: SVG をノード層より上に持ち上げる。 SVG 自体は pointer-events: none で透明だが、線の上 (pointer-events: stroke) だけ クリックを捕まえる。空きクリックは SVG を素通りしてノードに届く設計。 */ z-index: 5; } .animator-state-graph-nodes { position: relative; min-width: 100%; min-height: 100%; /* ノード層は SVG (z-index:5) より下。State ボックスは pointer-events: auto で クリック可能だが、線の上をクリックした時は SVG 側の hit line が優先的に反応 */ z-index: 1; } .animator-graph-empty { padding: 20px; text-align: center; color: var(--ani-text-mute); font-style: italic; font-size: 11px; } /* State ボックス — Unity Animator Window 互換のカラーリング 通常 State: グレー / Default: オレンジ / Entry: 緑 / AnyState: ティールブルー */ .animator-graph-state { position: absolute; background: linear-gradient(180deg, #5e5e5e, #3e3e3e); border: 2px solid #6e6e6e; border-radius: 6px; padding: 4px 8px; cursor: grab; user-select: none; display: flex; flex-direction: column; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,0.4); pointer-events: auto; color: #fff; } .animator-graph-state:hover { border-color: #9e9e9e; box-shadow: 0 2px 10px rgba(255, 255, 255, 0.15); } .animator-graph-state:active { cursor: grabbing; } .animator-graph-state-selected { border-color: #4a9eff !important; /* Unity の選択枠は青系 */ box-shadow: 0 0 14px rgba(74, 158, 255, 0.6) !important; } /* ★ サイドバー Animation ホバー時の対応 State ノード発光 (一時的、強め) */ .animator-graph-state-hover-glow { box-shadow: 0 0 16px 2px rgba(116, 235, 213, 0.7), 0 0 0 2px rgba(116, 235, 213, 0.85) !important; z-index: 5; } /* ★ Animation 側で編集中の State (= activeStateId) は持続的にシアン発光 */ .animator-graph-state-editing { box-shadow: 0 0 12px rgba(116, 235, 213, 0.55), 0 0 0 1.5px rgba(116, 235, 213, 0.7) !important; } /* hover-glow と editing が同時に当たる場合は hover-glow を優先 (より強い) */ .animator-graph-state-default { background: linear-gradient(180deg, #d4823a, #9c5520); border-color: #e89a5e; } /* ============================================================ Unity 互換 特殊 State Entry: 緑 / Any State: ティールブルー / Exit: 赤 (Unity Animator Window 準拠) フォントは通常 State と同一 (font-size 12px / font-weight 700 / letter-spacing 無し) ============================================================ */ /* Entry: Unity の緑 Entry ノードに準拠 */ .animator-graph-state.animator-graph-state-entry { background: linear-gradient(180deg, #5da64e, #3b703a); border-color: #7ec678; cursor: default; /* 削除不可・リネーム不可 */ } .animator-graph-state.animator-graph-state-entry .animator-graph-state-meta { color: #d5e8d0; font-size: 9px; opacity: 0.9; } /* Any State: Unity の青緑 Any State ノードに準拠 */ .animator-graph-state.animator-graph-state-anystate { background: linear-gradient(180deg, #5d83a2, #3a546e); border-color: #7ea3c4; cursor: default; /* 削除不可・リネーム不可 */ } .animator-graph-state.animator-graph-state-anystate .animator-graph-state-meta { color: #d0e0f0; font-size: 9px; opacity: 0.9; } /* Entry / AnyState 選択時の枠 (通常 State と同じ青の選択枠) */ .animator-graph-state.animator-graph-state-entry.animator-graph-state-selected, .animator-graph-state.animator-graph-state-anystate.animator-graph-state-selected { border-color: #4a9eff !important; box-shadow: 0 0 14px rgba(74, 158, 255, 0.6) !important; } /* Entry / AnyState の接続ハンドル: 通常 State より目立たせない (薄めグレー) */ .animator-graph-state-special .animator-graph-connect-handle { opacity: 0.7; } .animator-graph-state-special .animator-graph-connect-handle:hover { opacity: 1; } /* (▲ ヒットエリア廃止 — 過去の残骸が SVG に残ってた場合に備え、念のため非表示 + 非インタラクトに) */ .animator-graph-edge-tiphit { display: none; pointer-events: none; } /* ============================================================ 🎨 サンプルアセット読込ダイアログ ============================================================ */ .animator-sample-dialog-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.65); z-index: 100000; display: flex; align-items: center; justify-content: center; animation: animator-sample-fade-in 0.18s ease-out; } @keyframes animator-sample-fade-in { from { opacity: 0; } to { opacity: 1; } } .animator-sample-dialog { background: #1f1f1f; border: 1px solid #4a4a4a; border-radius: 8px; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.7); min-width: 480px; max-width: 720px; max-height: 80vh; display: flex; flex-direction: column; overflow: hidden; } .animator-sample-dialog-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: rgba(255,255,255,0.05); border-bottom: 1px solid #3a3a3a; } .animator-sample-dialog-title { font-size: 14px; font-weight: 700; color: #fff; } .animator-sample-dialog-close { background: transparent; border: none; color: #a0a0a0; font-size: 16px; cursor: pointer; padding: 4px 8px; } .animator-sample-dialog-close:hover { color: #fff; } .animator-sample-dialog-desc { padding: 10px 16px; font-size: 11px; line-height: 1.6; color: #c0c0c0; background: rgba(255,255,255,0.02); border-bottom: 1px solid #2a2a2a; } .animator-sample-dialog-desc code { padding: 1px 5px; background: #2a2a2a; border-radius: 2px; font-family: ui-monospace, 'Consolas', monospace; font-size: 10.5px; color: #c084fc; } .animator-sample-list { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; } .animator-sample-card { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; background: #2a2a2a; border: 1px solid #3a3a3a; border-radius: 6px; text-align: left; cursor: pointer; color: #e0e0e0; transition: background 0.12s, border-color 0.12s, transform 0.08s; } .animator-sample-card:hover { background: #353535; border-color: #c084fc; } .animator-sample-card:active { transform: scale(0.99); } .animator-sample-card-name { font-size: 13px; font-weight: 700; color: #fff; } .animator-sample-card-desc { font-size: 11px; line-height: 1.5; color: #b0b0b0; } .animator-sample-card-tags { display: flex; gap: 4px; margin-top: 2px; flex-wrap: wrap; } .animator-sample-tag { font-size: 9.5px; padding: 2px 7px; background: rgba(192, 132, 252, 0.15); border: 1px solid rgba(192, 132, 252, 0.3); border-radius: 9px; color: #c084fc; font-weight: 600; } /* GSAnim ヘッダーのサンプル読込ボタン (＋新規 Asset と並べる) */ #animator-sample-btn { background: linear-gradient(90deg, #b85cb8, #5cb8a8); color: #fff !important; border-color: transparent; } #animator-sample-btn:hover { filter: brightness(1.15); } /* ============================================================ 🖼 サンプル画像ピッカー (汎用) ============================================================ */ .gs-sample-image-picker-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7); z-index: 100200; display: flex; align-items: center; justify-content: center; animation: animator-helpdoc-fade-in 0.14s ease-out; } .gs-sample-image-picker-modal { background: #1f1f1f; border: 1px solid #4a4a4a; border-radius: 8px; box-shadow: 0 14px 44px rgba(0, 0, 0, 0.7); width: 90vw; max-width: 760px; height: 75vh; display: flex; flex-direction: column; overflow: hidden; } .gs-sample-image-picker-head { display: flex; align-items: center; justify-content: space-between; padding: 11px 16px; background: rgba(255,255,255,0.04); border-bottom: 1px solid #3a3a3a; } .gs-sample-image-picker-title { font-size: 14px; font-weight: 700; color: #fff; } .gs-sample-image-picker-close { background: transparent; border: none; color: #a0a0a0; font-size: 16px; cursor: pointer; padding: 4px 10px; border-radius: 4px; } .gs-sample-image-picker-close:hover { color: #fff; background: rgba(255,255,255,0.08); } .gs-sample-image-picker-tabs { display: flex; gap: 0; background: rgba(255,255,255,0.02); border-bottom: 1px solid #2a2a2a; padding: 0 8px; } .gs-sample-image-tab { padding: 9px 14px; font-size: 11.5px; background: transparent; border: none; border-bottom: 2px solid transparent; color: #a0a0a0; cursor: pointer; font-weight: 600; transition: color 0.12s, border-color 0.12s, background 0.12s; } .gs-sample-image-tab:hover { color: #fff; background: rgba(255,255,255,0.04); } .gs-sample-image-tab-active { color: #74ebd5; border-bottom-color: #74ebd5; } .gs-sample-image-tab-local { margin-left: auto; color: #c084fc; font-style: italic; } .gs-sample-image-picker-body { flex: 1 1 0; min-height: 0; /* flex 子の overflow を効かせる */ overflow-y: auto; overscroll-behavior: contain; padding: 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; align-content: start; } .gs-sample-image-thumb { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px; background: #2a2a2a; border: 1px solid #3a3a3a; border-radius: 6px; cursor: pointer; transition: background 0.12s, border-color 0.12s, transform 0.08s; } .gs-sample-image-thumb:hover { background: #353535; border-color: #74ebd5; } .gs-sample-image-thumb:active { transform: scale(0.98); } .gs-sample-image-thumb img { max-width: 100%; max-height: 80px; object-fit: contain; image-rendering: -webkit-optimize-contrast; background: rgba(255,255,255,0.04); border-radius: 3px; } .gs-sample-image-thumb-name { font-size: 10.5px; color: #d0d0d0; text-align: center; word-break: break-word; } /* ============================================================ ❓ ヘルプモーダル (MD レンダリング) ============================================================ */ .animator-helpdoc-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.72); z-index: 100100; display: flex; align-items: center; justify-content: center; animation: animator-helpdoc-fade-in 0.16s ease-out; } @keyframes animator-helpdoc-fade-in { from { opacity: 0; } to { opacity: 1; } } .animator-helpdoc-modal { background: #1a1a1a; border: 1px solid #4a4a4a; border-radius: 8px; box-shadow: 0 18px 56px rgba(0, 0, 0, 0.8); width: 90vw; max-width: 880px; height: 88vh; display: flex; flex-direction: column; overflow: hidden; } .animator-helpdoc-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; background: linear-gradient(135deg, #2a1f3e, #1a1525); border-bottom: 1px solid #4a3a5a; } .animator-helpdoc-title { font-size: 16px; font-weight: 700; color: #fff; } .animator-helpdoc-close { background: transparent; border: none; color: #a0a0a0; font-size: 18px; cursor: pointer; padding: 4px 10px; border-radius: 4px; } .animator-helpdoc-close:hover { color: #fff; background: rgba(255,255,255,0.08); } /* MD レンダリング本文 */ .animator-helpdoc-body { flex: 1 1 0; min-height: 0; /* ★ flex 子要素の overflow を効かせるための定石 */ overflow-y: auto; overscroll-behavior: contain; /* ヘルプ内でホイール → 親 (body) に逃さない */ padding: 20px 28px 32px; color: #d8d8d8; font-size: 13px; line-height: 1.75; } .animator-helpdoc-body h1 { font-size: 22px; color: #c084fc; margin: 6px 0 10px; border-bottom: 1px solid #3a3a3a; padding-bottom: 6px; } .animator-helpdoc-body h2 { font-size: 17px; color: #74ebd5; margin: 24px 0 8px; border-bottom: 1px dashed #3a3a3a; padding-bottom: 4px; } .animator-helpdoc-body h3 { font-size: 14px; color: #f0c060; margin: 16px 0 6px; } .animator-helpdoc-body h4 { font-size: 13px; color: #ddd; margin: 12px 0 4px; } .animator-helpdoc-body p { margin: 6px 0; } .animator-helpdoc-body ul { margin: 6px 0 6px 20px; padding-left: 0; } .animator-helpdoc-body li { margin: 3px 0; } .animator-helpdoc-body strong { color: #fff; font-weight: 700; } .animator-helpdoc-body em { color: #d8d8d8; font-style: italic; } .animator-helpdoc-body code { background: #2a2a2a; padding: 1px 6px; border-radius: 3px; font-family: ui-monospace, 'Consolas', monospace; font-size: 11.5px; color: #f0b3ff; } .animator-helpdoc-body pre { background: #0e0e0e; border: 1px solid #2a2a2a; border-radius: 5px; padding: 10px 14px; margin: 10px 0; overflow-x: auto; } .animator-helpdoc-body pre code { background: transparent; padding: 0; color: #e0e0e0; font-size: 11px; } .animator-helpdoc-body hr { border: none; border-top: 1px solid #3a3a3a; margin: 20px 0; } .animator-helpdoc-body a { color: #74ebd5; text-decoration: none; } .animator-helpdoc-body a:hover { text-decoration: underline; } .animator-helpdoc-body table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 12px; } .animator-helpdoc-body th, .animator-helpdoc-body td { padding: 6px 10px; border: 1px solid #3a3a3a; text-align: left; } .animator-helpdoc-body th { background: #2a2a2a; color: #c084fc; font-weight: 700; } .animator-helpdoc-body tr:nth-child(even) td { background: rgba(255,255,255,0.02); } /* ============================================================ 💡 ガイド (探索型) — オーバーレイ + 名札 + クリックで説明表示 ============================================================ */ .animator-tour-overlay { position: fixed; inset: 0; background: transparent; /* 暗化はスポットライトの box-shadow が担当 (積層しないように) */ z-index: 100050; pointer-events: auto; animation: animator-tour-fade-in 0.2s ease-out; } /* 上部ヒント帯 */ .animator-tour-hint { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); padding: 9px 18px; background: rgba(255, 255, 255, 0.96); color: #1a1a1a; border-radius: 22px; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.55); z-index: 100070; pointer-events: none; } /* 終了ボタン (右上) — 視認性最優先で赤系の塗りつぶし */ .animator-tour-exit { position: fixed; top: 16px; right: 16px; padding: 8px 18px; background: linear-gradient(135deg, #dc4848, #a02828); border: 1px solid #ff7878; color: #fff; border-radius: 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; cursor: pointer; z-index: 100070; box-shadow: 0 4px 14px rgba(220, 72, 72, 0.5), 0 0 0 2px rgba(255, 255, 255, 0.08); transition: background 0.12s, transform 0.08s, box-shadow 0.12s; } .animator-tour-exit:hover { background: linear-gradient(135deg, #e85858, #c03838); box-shadow: 0 4px 18px rgba(220, 72, 72, 0.7), 0 0 0 2px rgba(255, 255, 255, 0.15); } .animator-tour-exit:active { transform: scale(0.97); } /* (旧バッジ方式は廃止 — マウスホバーで明るくなるスポットライト方式へ移行) .animator-tour-badge クラスは未使用だが、念のため非表示で残しておく */ .animator-tour-badge { display: none; } /* オーバーレイ全体がカーソル位置を拾うため、デフォルトカーソルは「これクリックできるよ」を示す */ .animator-tour-overlay-interactive { cursor: pointer; } /* コールアウトの閉じるボタン (callout 内) */ .animator-tour-callout-close { background: transparent; border: none; color: #a0a0a0; font-size: 13px; cursor: pointer; padding: 2px 6px; border-radius: 3px; } .animator-tour-callout-close:hover { color: #fff; background: rgba(255,255,255,0.08); } /* コールアウト下部のヘルプ誘導 */ .animator-tour-footer { padding: 8px 12px; margin-top: 4px; background: rgba(255, 255, 255, 0.04); border-top: 1px solid #2a2a2a; font-size: 10.5px; color: #a0a0a0; } /* セクション説明モードの「ツアー開始」ボタン */ .animator-tour-callout-foot { padding: 8px 12px; border-top: 1px solid #2a2a2a; background: rgba(116, 235, 213, 0.05); } .animator-tour-start-subtour { width: 100%; padding: 7px 12px; font-size: 11.5px; font-weight: 700; background: linear-gradient(135deg, #2d5a52, #1f4540); color: #74ebd5; border: 1px solid #4a8a82; border-radius: 4px; cursor: pointer; letter-spacing: 0.03em; transition: filter 0.12s, transform 0.08s; } .animator-tour-start-subtour:hover { filter: brightness(1.2); } .animator-tour-start-subtour:active { transform: scale(0.98); } /* サブツアー (各ボタン説明) のナビバー */ .animator-tour-subtour-nav { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-top: 1px solid #3a3a3a; background: rgba(116, 235, 213, 0.06); flex-wrap: wrap; } .animator-tour-subtour-btn { padding: 5px 10px; font-size: 11px; background: #2a2a2a; border: 1px solid #4a4a4a; color: #e0e0e0; border-radius: 4px; cursor: pointer; transition: background 0.12s, border-color 0.12s; } .animator-tour-subtour-btn:hover { background: #3a3a3a; border-color: #5a5a5a; } .animator-tour-subtour-btn:disabled { opacity: 0.45; cursor: not-allowed; } .animator-tour-subtour-back { font-size: 10.5px; background: transparent; border-color: transparent; color: #a0a0a0; padding-left: 4px; padding-right: 8px; } .animator-tour-subtour-back:hover { color: #fff; background: rgba(255,255,255,0.06); } .animator-tour-subtour-counter { flex: 1; text-align: center; font-size: 10.5px; color: #74ebd5; font-weight: 700; letter-spacing: 0.03em; } .animator-tour-subtour-next { background: linear-gradient(135deg, #2d5a52, #1f4540); border-color: #4a8a82; color: #74ebd5; font-weight: 700; } .animator-tour-subtour-next:hover { filter: brightness(1.2); } /* スポットライト = ターゲットセクションの形にくり抜いた窓 ※ box-shadow が外側全部を暗化、内側 (= 元のセクション) は完全に明るい ※ 常時表示し、ホバー時はセクション位置、ホバー外時は zero-rect で全面暗化 */ .animator-tour-spotlight { position: fixed; border-radius: 6px; background: transparent; box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.72); pointer-events: none; } /* コールアウト本体 — 枠ナシ、シンプル矩形背景 */ .animator-tour-callout { position: fixed; width: 360px; background: #1f1f1f; border-radius: 6px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7); color: #e0e0e0; font-size: 12px; z-index: 100060; pointer-events: auto; /* transition 無し: 別ラベル開いた時に滑らかに動かさない */ } .animator-tour-callout-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid #2a2a2a; } .animator-tour-step-num { font-size: 10px; font-weight: 700; color: #74ebd5; background: rgba(116, 235, 213, 0.15); padding: 2px 8px; border-radius: 8px; letter-spacing: 0.05em; } .animator-tour-title { flex: 1; font-size: 13px; font-weight: 700; color: #fff; } .animator-tour-close { background: transparent; border: none; color: #a0a0a0; font-size: 14px; cursor: pointer; padding: 2px 6px; border-radius: 3px; } .animator-tour-close:hover { color: #fff; background: rgba(255,255,255,0.08); } .animator-tour-desc { padding: 12px 14px; font-size: 12px; line-height: 1.7; color: #d8d8d8; white-space: pre-line; /* \n を改行として表示。テキストの折り返しは通常通り */ } .animator-tour-controls { display: flex; gap: 6px; padding: 10px 12px; border-top: 1px solid #2a2a2a; background: rgba(255,255,255,0.02); } .animator-tour-btn { padding: 5px 12px; font-size: 11px; background: #2a2a2a; border: 1px solid #4a4a4a; color: #e0e0e0; border-radius: 4px; cursor: pointer; transition: background 0.12s, border-color 0.12s; } .animator-tour-btn:hover { background: #3a3a3a; border-color: #5a5a5a; } .animator-tour-next { background: linear-gradient(135deg, #2d5a52, #1f4540); border-color: #4a8a82; color: #74ebd5; font-weight: 700; margin-left: auto; } .animator-tour-next:hover { filter: brightness(1.2); } .animator-tour-skip { color: #888; } .animator-tour-skip:hover { color: #b0b0b0; } /* ヘッダーの ❓ ヘルプ ボタン (ガイドと並べる) */ #animator-helpdoc-btn { background: linear-gradient(90deg, #4ea895, #5a8ac8); color: #fff !important; border-color: transparent; } #animator-helpdoc-btn:hover { filter: brightness(1.15); } /* ============================================================ 遷移種別ポップアップ (State ドラッグ → 別 State でドロップした時) 自動 / 条件 / 両方 / 標準 から選ぶ。 ============================================================ */ .animator-trans-type-popup { position: fixed; z-index: 10001; min-width: 260px; background: #1f1f1f; border: 1px solid #4a4a4a; border-radius: 6px; box-shadow: 0 10px 32px rgba(0, 0, 0, 0.7); font-size: 11px; color: #e0e0e0; user-select: none; animation: animator-trans-type-pop 0.14s ease-out; } @keyframes animator-trans-type-pop { from { opacity: 0; transform: scale(0.94) translateY(4px); } to { opacity: 1; transform: scale(1) translateY(0); } } .animator-trans-type-head { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: rgba(255, 255, 255, 0.05); border-bottom: 1px solid #3a3a3a; font-weight: 700; font-size: 11.5px; } /* 双方向トグル (チェックボックス + ラベル) */ .animator-trans-type-bidir { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: rgba(255, 255, 255, 0.02); border-bottom: 1px solid #2a2a2a; cursor: pointer; font-size: 11px; } .animator-trans-type-bidir:hover { background: rgba(255, 255, 255, 0.05); } .animator-trans-type-bidir input[type="checkbox"] { width: 14px; height: 14px; cursor: pointer; accent-color: #4a9eff; } .animator-trans-type-bidir-icon { font-size: 14px; color: #74ebd5; font-weight: 700; } .animator-trans-type-bidir-label { color: #d0d0d0; user-select: none; } .animator-trans-type-arrow { color: #a0a0a0; font-weight: 400; } .animator-trans-type-from, .animator-trans-type-to { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 110px; } .animator-trans-type-body { display: flex; flex-direction: column; gap: 3px; padding: 8px; } .animator-trans-type-btn { display: flex; align-items: center; gap: 10px; padding: 8px 10px; font-size: 11px; font-weight: 500; border: 1px solid #3a3a3a; border-radius: 4px; background: #2a2a2a; color: #e0e0e0; cursor: pointer; text-align: left; transition: background 0.12s, border-color 0.12s, transform 0.08s; } .animator-trans-type-btn:hover { background: #353535; border-color: #5a5a5a; } .animator-trans-type-btn:active { transform: scale(0.98); } .animator-trans-type-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 6px currentColor; } .animator-trans-type-label { display: flex; flex-direction: column; gap: 1px; line-height: 1.4; } .animator-trans-type-label b { font-weight: 700; font-size: 11.5px; color: #fff; } .animator-trans-type-label small { font-weight: 400; font-size: 10px; color: #a8a8a8; } .animator-trans-type-btn-muted .animator-trans-type-label b { color: #b8b8b8; } .animator-trans-type-btn-cancel { justify-content: center; margin-top: 4px; background: transparent; border-color: transparent; color: #888; font-weight: 400; } .animator-trans-type-btn-cancel:hover { background: #2a2a2a; color: #b0b0b0; } /* ============================================================ メインキャンバス流の 2 レイヤー方式: 表示線 .animator-graph-edge は pointer-events: none で表示専用 ヒット線 .animator-graph-edge-hit は太い透明線でクリック判定を引き受ける ============================================================ */ /* hit line は完全に透明。視覚フィードバックは表示線側の hover-pulse で出す (JS が hit line の mouseenter/leave で visible 側に .animator-graph-edge-hovered を付け外し) */ .animator-graph-edge-hit { stroke: transparent; fill: none; } .animator-graph-edge-hit:hover { /* 白い矩形が出るので背景変化は無し */ stroke: transparent; } /* State Properties で特殊 State 選択時に出るパネル */ .animator-special-state-panel { padding: 12px 14px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 6px; } .animator-special-state-title { font-size: 14px; font-weight: 800; margin-bottom: 8px; color: #fff; letter-spacing: 0.03em; } .animator-special-state-desc { font-size: 12px; line-height: 1.6; color: #d0d0d0; margin-bottom: 8px; } /* ── Machine プレビュー中、現在再生中の State ── 緑系のグロー + パルスで「今ここを再生中」を強調 */ .animator-graph-state-playing { border-color: #74ebd5 !important; box-shadow: 0 0 18px rgba(116, 235, 213, 0.8), inset 0 0 8px rgba(116, 235, 213, 0.3) !important; background: linear-gradient(135deg, #1e4a47, #143331) !important; animation: animator-state-playing-pulse 0.8s ease-in-out infinite; } @keyframes animator-state-playing-pulse { 0%, 100% { box-shadow: 0 0 18px rgba(116, 235, 213, 0.8), inset 0 0 8px rgba(116, 235, 213, 0.3); } 50% { box-shadow: 0 0 26px rgba(116, 235, 213, 1.0), inset 0 0 14px rgba(116, 235, 213, 0.5); } } .animator-graph-default-mark { position: absolute; top: -8px; left: -6px; width: 18px; height: 18px; background: #ffd666; color: #2a1c00; border-radius: 50%; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 4px rgba(0,0,0,0.4); } .animator-graph-state-name { font-size: 12px; font-weight: 700; color: #fff; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .animator-graph-state-meta { font-size: 9px; color: rgba(255,255,255,0.6); text-align: center; font-family: var(--font-mono, monospace); } .animator-graph-connect-handle { position: absolute; top: -8px; right: -8px; width: 20px; height: 20px; background: #74ebd5; color: #0e2a26; border-radius: 50%; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; cursor: crosshair; box-shadow: 0 2px 4px rgba(0,0,0,0.4); opacity: 0; transition: opacity 0.1s; } .animator-graph-state:hover .animator-graph-connect-handle { opacity: 1; } .animator-graph-connect-handle:hover { transform: scale(1.2); } /* 矢印 */ .animator-graph-edge { stroke: #c084fc; stroke-width: 2.5; fill: none; pointer-events: stroke; cursor: pointer; } .animator-graph-edge:hover { stroke-width: 3.5; } /* 遷移種別ごとの色分け auto (緑): 動きが終わったら自動切替 cond (青): 条件で切替 both (橙): 両方 warn (赤): 設定不備 — 切り替わらない */ .animator-graph-edge-auto { stroke: #74ebd5; } .animator-graph-edge-auto:hover { stroke: #9ff5e3; } .animator-graph-edge-cond { stroke: #58a6ff; } .animator-graph-edge-cond:hover { stroke: #8fc1ff; } .animator-graph-edge-both { stroke: #f97316; } .animator-graph-edge-both:hover { stroke: #fb923c; } /* warn 種別: 赤い点線 (常時はベタ、ホバー時だけ点滅で「ここに反応できる」と示唆) */ .animator-graph-edge-warn { stroke: #ff6b6b; stroke-dasharray: 6 4; } .animator-graph-edge-warn:hover { stroke: #ff8c8c; } /* 全種別共通: ホバー時のみゆっくり明滅。 JS 側で hit line の mouseenter/leave に応じて .animator-graph-edge-hovered を付け外し */ .animator-graph-edge-hovered { animation: animator-edge-hover-pulse 1.0s ease-in-out infinite; } @keyframes animator-edge-hover-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } } .animator-graph-edge-default { stroke: #c084fc; } .animator-graph-edge-default:hover { stroke: #d8aaff; } .animator-graph-edge-selected { stroke: #ffd666 !important; stroke-width: 3.5 !important; stroke-dasharray: none !important; /* warn の点線も消して実線に */ animation: none !important; /* warn の点滅も消す */ filter: drop-shadow(0 0 6px rgba(255, 214, 102, 0.7)); } /* ============================================================ 🎮 Live Test セクション: Parameter リアルタイム + Mock ゲームパッド ============================================================ */ .animator-livetest-body { padding: 8px 10px; } .animator-livetest-hint { font-size: 11px; color: #a8a8a8; padding: 6px 10px; background: rgba(116, 235, 213, 0.08); border-left: 3px solid #74ebd5; border-radius: 3px; margin-bottom: 10px; line-height: 1.5; } .animator-livetest-empty { padding: 14px 10px; font-size: 12px; color: #888; font-style: italic; text-align: center; } .animator-livetest-params-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; } .animator-livetest-param { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 4px; font-size: 11px; } .animator-livetest-icon { font-size: 14px; flex-shrink: 0; } .animator-livetest-name { flex: 0 0 auto; min-width: 80px; font-weight: 600; color: #e0e0e0; white-space: nowrap; } .animator-livetest-type { font-size: 9px; color: #888; padding: 1px 5px; background: rgba(255, 255, 255, 0.05); border-radius: 3px; font-family: var(--font-mono, monospace); } .animator-livetest-slider { flex: 1; min-width: 80px; accent-color: #c084fc; } .animator-livetest-value { font-family: var(--font-mono, monospace); font-size: 11px; color: #74ebd5; min-width: 40px; text-align: right; } /* bool トグル */ .animator-livetest-toggle { position: relative; display: inline-block; width: 36px; height: 18px; cursor: pointer; } .animator-livetest-toggle input { display: none; } .animator-livetest-toggle-slider { position: absolute; inset: 0; background: #4a4a4a; border-radius: 9px; transition: background 0.15s; } .animator-livetest-toggle-slider::before { content: ''; position: absolute; height: 14px; width: 14px; left: 2px; top: 2px; background: #e0e0e0; border-radius: 50%; transition: transform 0.15s, background 0.15s; } .animator-livetest-toggle input:checked + .animator-livetest-toggle-slider { background: #c084fc; } .animator-livetest-toggle input:checked + .animator-livetest-toggle-slider::before { transform: translateX(18px); background: #fff; } /* trigger ボタン */ .animator-livetest-trigger { padding: 4px 12px; font-size: 11px; font-weight: 700; background: linear-gradient(135deg, #f97316, #ea580c); color: #fff; border: 1px solid #c2410c; border-radius: 4px; cursor: pointer; transition: transform 0.1s; } .animator-livetest-trigger:hover { filter: brightness(1.15); } .animator-livetest-trigger.pressed, .animator-livetest-trigger:active { transform: scale(0.95); box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.4); } /* Mock ゲームパッド */ .animator-livetest-gamepad { padding: 10px; background: linear-gradient(135deg, #2a2a2a, #1f1f1f); border: 1px solid #4a4a4a; border-radius: 6px; } .animator-livetest-gamepad-label { font-size: 11px; font-weight: 700; color: #e0e0e0; margin-bottom: 8px; letter-spacing: 0.04em; } .animator-livetest-gamepad-hint { font-size: 9px; color: #888; font-weight: 400; letter-spacing: 0; } .animator-livetest-gamepad-body { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; } /* D-Pad: 十字配置 */ .animator-livetest-dpad { display: grid; grid-template-columns: repeat(3, 32px); grid-template-rows: repeat(3, 32px); gap: 2px; } .animator-livetest-pad-up { grid-column: 2; grid-row: 1; } .animator-livetest-pad-left { grid-column: 1; grid-row: 2; } .animator-livetest-pad-right { grid-column: 3; grid-row: 2; } .animator-livetest-pad-down { grid-column: 2; grid-row: 3; } .animator-livetest-action-btns { display: flex; gap: 6px; } .animator-livetest-pad-btn { width: 32px; height: 32px; padding: 0; background: linear-gradient(180deg, #4a4a4a, #3a3a3a); color: #e0e0e0; border: 1px solid #5a5a5a; border-radius: 4px; font-size: 13px; font-weight: 700; cursor: pointer; user-select: none; transition: all 0.08s; display: flex; align-items: center; justify-content: center; } .animator-livetest-pad-btn:hover { background: linear-gradient(180deg, #5a5a5a, #4a4a4a); border-color: #6a6a6a; } .animator-livetest-pad-btn.pressed, .animator-livetest-pad-btn:active { background: linear-gradient(180deg, #c084fc, #9d6dd9); color: #fff; border-color: #c084fc; box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.4); transform: scale(0.94); } .animator-livetest-pad-a, .animator-livetest-pad-b { width: 36px; height: 36px; border-radius: 50%; font-size: 14px; } .animator-livetest-pad-a.pressed, .animator-livetest-pad-a:active { background: linear-gradient(180deg, #74ebd5, #4ec9b0); border-color: #74ebd5; } .animator-livetest-pad-b.pressed, .animator-livetest-pad-b:active { background: linear-gradient(180deg, #f97316, #ea580c); border-color: #f97316; } .animator-livetest-gamepad-mapping { font-size: 10px; color: #aaa; padding: 6px 8px; background: rgba(255, 255, 255, 0.03); border-radius: 3px; line-height: 1.5; } .animator-livetest-gamepad-mapping b { color: #c084fc; } /* ============================================================ 📦 テンプレート Asset ピッカーダイアログ ============================================================ */ .animator-template-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.75); z-index: 10000; display: flex; align-items: center; justify-content: center; animation: animator-template-fadein 0.18s ease-out; } @keyframes animator-template-fadein { from { opacity: 0; } to { opacity: 1; } } /* ★ 名称入力ダイアログ (テンプレ選択後) */ .animator-name-picker-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7); z-index: 10001; display: flex; align-items: center; justify-content: center; animation: animator-template-fadein 0.15s ease-out; } .animator-name-picker-modal { background: #1e1e22; border: 1px solid #555; border-radius: 8px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7); min-width: 420px; max-width: 480px; display: flex; flex-direction: column; overflow: hidden; } .animator-name-picker-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: #2a2a2e; border-bottom: 1px solid #444; } .animator-name-picker-title { font-size: 14px; font-weight: 700; color: #fff; } .animator-name-picker-close { background: transparent; border: none; color: #999; font-size: 16px; cursor: pointer; padding: 2px 8px; border-radius: 3px; } .animator-name-picker-close:hover { background: rgba(255, 80, 80, 0.2); color: #ff8888; } .animator-name-picker-body { padding: 16px; display: flex; flex-direction: column; gap: 12px; } .animator-name-picker-tpl { font-size: 11px; color: #aaa; background: rgba(192, 132, 252, 0.10); padding: 6px 10px; border-radius: 4px; border-left: 3px solid #c084fc; } .animator-name-picker-tpl b { color: #d8b4fe; } .animator-name-picker-label { display: flex; flex-direction: column; gap: 6px; font-size: 11px; font-weight: 700; color: #bbb; } .animator-name-picker-input { padding: 8px 10px; background: #15151a; border: 1px solid #555; border-radius: 4px; color: #fff; font-size: 13px; outline: none; } .animator-name-picker-input:focus { border-color: #c084fc; } .animator-name-picker-hint { font-size: 11px; color: #888; line-height: 1.5; } .animator-name-picker-hint b { color: #c084fc; } /* ★ Animation 方式選択 (Frame / Track) ボタン群 */ .animator-mode-picker { display: flex; gap: 8px; margin-top: 2px; } .animator-mode-picker-btn { flex: 1 1 0; display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #15151a; border: 1px solid #555; border-radius: 6px; cursor: pointer; text-align: left; transition: background 0.12s, border-color 0.12s; } .animator-mode-picker-btn:hover { background: #1d1d24; border-color: #777; } .animator-mode-picker-btn-active { background: rgba(192, 132, 252, 0.10); border-color: #c084fc; box-shadow: 0 0 0 2px rgba(192, 132, 252, 0.18); } /* F / T バッジ (サイドバーと同じ色) */ .animator-mode-picker-badge { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; font-size: 14px; font-weight: 700; border-radius: 4px; font-family: var(--font-mono, monospace); flex-shrink: 0; } .animator-mode-picker-badge-frame { background: rgba(116, 235, 213, 0.20); color: #74ebd5; border: 1px solid rgba(116, 235, 213, 0.5); } .animator-mode-picker-badge-track { background: rgba(192, 132, 252, 0.20); color: #c084fc; border: 1px solid rgba(192, 132, 252, 0.5); } .animator-mode-picker-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .animator-mode-picker-text b { font-size: 12px; font-weight: 700; color: #fff; } .animator-mode-picker-text small { font-size: 10px; color: #999; line-height: 1.3; } .animator-name-picker-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 16px; background: #2a2a2e; border-top: 1px solid #444; } .animator-name-picker-cancel, .animator-name-picker-ok { padding: 6px 16px; border: 1px solid #6a6a6a; border-radius: 4px; cursor: pointer; font-size: 12px; font-weight: 700; } .animator-name-picker-cancel { background: #525252; color: #fff; } .animator-name-picker-cancel:hover { background: #5d5d5d; } .animator-name-picker-ok { background: linear-gradient(135deg, #4a3760, #2a1f3a); color: #d8b4fe; border-color: #c084fc; } .animator-name-picker-ok:hover { background: linear-gradient(135deg, #5a4070, #3a2950); color: #fff; } .animator-template-modal { max-width: 920px; width: 92%; max-height: 88vh; display: flex; flex-direction: column; background: linear-gradient(135deg, #2d2d2d, #252525); border: 1px solid #4a4a4a; border-radius: 10px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7), 0 0 30px rgba(192, 132, 252, 0.1); } .animator-template-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; border-bottom: 1px solid #4a4a4a; background: linear-gradient(180deg, #3a3a3a, #2d2d2d); border-radius: 10px 10px 0 0; } .animator-template-title { font-size: 17px; font-weight: 800; color: #fff; letter-spacing: 0.02em; } .animator-template-close { width: 30px; height: 30px; background: rgba(255, 255, 255, 0.05); color: #aaa; border: 1px solid #4a4a4a; border-radius: 4px; cursor: pointer; font-size: 14px; } .animator-template-close:hover { background: rgba(255, 100, 100, 0.18); color: #ff8c8c; border-color: rgba(255, 100, 100, 0.4); } .animator-template-sub { font-size: 12px; color: #c0c0c0; line-height: 1.7; padding: 14px 22px; background: rgba(192, 132, 252, 0.06); border-bottom: 1px solid #4a4a4a; } .animator-template-sub b { color: #c084fc; } .animator-template-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; padding: 18px 22px; overflow-y: auto; } .animator-template-card { display: flex; flex-direction: column; gap: 8px; padding: 18px 16px; background: #353535; border: 1px solid #4a4a4a; border-radius: 8px; cursor: pointer; text-align: left; transition: all 0.15s; color: #e0e0e0; } .animator-template-card:hover { background: linear-gradient(135deg, #423a52, #353042); border-color: #c084fc; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(192, 132, 252, 0.25); } /* icon は削除済み — シンプルなテキストのみのカードに */ .animator-template-card-name { font-size: 15px; font-weight: 700; color: #fff; letter-spacing: 0.02em; margin-top: 2px; } .animator-template-card-desc { font-size: 11px; color: #b0b0b0; line-height: 1.55; flex: 1; } .animator-template-card-stats { display: flex; gap: 8px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 10px; color: #888; font-family: var(--font-mono, monospace); } .animator-template-card-stats span { padding: 2px 6px; background: rgba(192, 132, 252, 0.1); border-radius: 3px; color: #c084fc; } /* ============================================================ 🍳 条件レシピダイアログ (Transition の条件プリセット) ============================================================ */ .animator-cond-recipe { padding: 3px 9px; margin-left: 6px; font-size: 10px; background: linear-gradient(135deg, #5a3f8a, #3d2960); color: #c084fc; border: 1px solid #c084fc; border-radius: 3px; cursor: pointer; } .animator-cond-recipe:hover { background: linear-gradient(135deg, #6a4fa0, #4d3673); color: #fff; } .animator-recipe-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7); z-index: 10001; display: flex; align-items: center; justify-content: center; animation: animator-template-fadein 0.18s ease-out; } .animator-recipe-modal { max-width: 760px; width: 92%; max-height: 85vh; display: flex; flex-direction: column; background: linear-gradient(135deg, #2d2d2d, #252525); border: 1px solid #4a4a4a; border-radius: 10px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7); } .animator-recipe-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid #4a4a4a; background: linear-gradient(180deg, #3a3a3a, #2d2d2d); border-radius: 10px 10px 0 0; } .animator-recipe-title { font-size: 15px; font-weight: 800; color: #fff; } .animator-recipe-close { width: 28px; height: 28px; background: rgba(255, 255, 255, 0.05); color: #aaa; border: 1px solid #4a4a4a; border-radius: 4px; cursor: pointer; } .animator-recipe-close:hover { background: rgba(255, 100, 100, 0.18); color: #ff8c8c; } .animator-recipe-sub { font-size: 12px; color: #c0c0c0; padding: 12px 20px; background: rgba(116, 235, 213, 0.05); border-bottom: 1px solid #4a4a4a; line-height: 1.6; } .animator-recipe-sub b { color: #74ebd5; } .animator-recipe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; padding: 16px 20px; overflow-y: auto; } .animator-recipe-card { display: flex; flex-direction: column; gap: 6px; padding: 14px 12px; background: #353535; border: 1px solid #4a4a4a; border-radius: 6px; cursor: pointer; text-align: left; transition: all 0.12s; color: #e0e0e0; } .animator-recipe-card:hover { background: linear-gradient(135deg, #3a4a3e, #2d3530); border-color: #74ebd5; transform: translateY(-1px); } .animator-recipe-card-icon { font-size: 28px; line-height: 1; } .animator-recipe-card-name { font-size: 13px; font-weight: 700; color: #fff; } .animator-recipe-card-desc { font-size: 10px; color: #a8a8a8; line-height: 1.5; } /* ============================================================ ❓ Why? ヘルプボタン + ダイアログ ============================================================ */ .animator-why-btn { width: 18px; height: 18px; padding: 0; background: rgba(116, 235, 213, 0.12); color: #74ebd5; border: 1px solid rgba(116, 235, 213, 0.4); border-radius: 50%; font-size: 11px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; margin-left: 4px; transition: all 0.12s; } .animator-why-btn:hover { background: rgba(116, 235, 213, 0.3); color: #fff; transform: scale(1.1); } .animator-why-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7); z-index: 10002; display: flex; align-items: center; justify-content: center; animation: animator-template-fadein 0.18s ease-out; } .animator-why-modal { max-width: 560px; width: 90%; max-height: 80vh; display: flex; flex-direction: column; background: linear-gradient(135deg, #2d3a3a, #243030); border: 1px solid #74ebd5; border-radius: 10px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7), 0 0 30px rgba(116, 235, 213, 0.2); } .animator-why-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid rgba(116, 235, 213, 0.3); background: rgba(116, 235, 213, 0.08); border-radius: 10px 10px 0 0; } .animator-why-icon { font-size: 20px; } .animator-why-title { flex: 1; font-size: 15px; font-weight: 700; color: #fff; } .animator-why-close { width: 26px; height: 26px; background: rgba(255, 255, 255, 0.05); color: #aaa; border: 1px solid #4a4a4a; border-radius: 4px; cursor: pointer; } .animator-why-close:hover { background: rgba(255, 100, 100, 0.18); color: #ff8c8c; } .animator-why-body { flex: 1; min-height: 0; padding: 16px 20px; overflow-y: auto; font-size: 13px; line-height: 1.75; color: #e0e0e0; } .animator-why-body p { margin: 8px 0; } .animator-why-body b { color: #74ebd5; } .animator-why-body ul { padding-left: 24px; margin: 8px 0; } .animator-why-body li { margin: 4px 0; } .animator-why-body code { font-family: var(--font-mono, monospace); background: rgba(0, 0, 0, 0.4); padding: 1px 6px; border-radius: 3px; color: #c084fc; font-size: 0.9em; } /* ============================================================ 🎚 3 段階 UI モード (Simple / Standard / Expert) - Simple: State Machine / Parameter / Transition / LiveTest を隠す → Preview + Animation Timeline + States (list) のみ - Standard: 現状 (フル機能) - Expert: 現状 + Advanced 用領域 (将来用) ============================================================ */ /* ============================================================ Animation View / Animator View 切替 (旧 3 段階モード置換) - Animation View (default): 右カラム (Animator) は非表示、左カラム全幅 - Animator View: 右カラムが右からスライドイン ============================================================ */ /* スライドアニメ用に基本トランジションを定義 */ .animator-col-controller { transition: flex-basis 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.22s ease, transform 0.28s cubic-bezier(0.4, 0, 0.2, 1); } .animator-split-handle { transition: opacity 0.2s ease; } /* リサイズドラッグ中はトランジションを切る (びょん防止) */ .animator-no-transition, .animator-no-transition * { transition: none !important; } /* Animation View (default): 右カラムを完全に隠す */ .animator-view-animation .animator-col-controller { flex: 0 0 0 !important; width: 0 !important; min-width: 0 !important; overflow: hidden !important; opacity: 0; transform: translateX(20px); pointer-events: none; border-left-width: 0 !important; } .animator-view-animation .animator-split-handle { display: none !important; } .animator-view-animation .animator-col-animation { flex: 1 1 100%; max-width: none !important; } /* Animator View: 右カラムをスライドイン ※ flex 値は JS (_applyAnimatorView) が Save ボタン左端に合わせて動的設定する ここでは fallback 値だけ持っておく (JS が走る前の一瞬の見栄えのため) */ .animator-view-animator .animator-col-controller { flex: 0 0 42%; opacity: 1; transform: translateX(0); pointer-events: auto; } .animator-view-animator .animator-split-handle { display: block !important; opacity: 1; } /* Animation/Animator トグルボタン (Preview head 内) */ .animator-view-toggle { display: inline-flex; align-items: center; padding: 2px; background: #2a2a2a; border: 1px solid #4a4a4a; border-radius: 5px; gap: 0; } .animator-view-btn { padding: 4px 12px; font-size: 11px; font-weight: 700; letter-spacing: 0.03em; background: transparent; color: var(--ani-text-mute, #a8a8a8); border: none; border-radius: 3px; cursor: pointer; transition: background 0.12s, color 0.12s; } .animator-view-btn:hover { background: rgba(116, 235, 213, 0.12); color: #ddd; } .animator-view-active { background: linear-gradient(135deg, #2d5a52, #1f4540) !important; color: #74ebd5 !important; box-shadow: inset 0 0 4px rgba(0,0,0,0.4); } /* ============================================================ 🎮 Asset Type トグル (2D Sprite / 3D Model) Animation カラムのヘッド付近に常設。アセット全体のターゲットを切り替える。 ============================================================ */ .animator-asset-type-toggle { display: inline-flex; align-items: center; padding: 2px; margin-left: 8px; background: #232323; border: 1px solid #4a4a4a; border-radius: 5px; gap: 0; vertical-align: middle; } .animator-asset-type-btn { padding: 4px 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; background: transparent; color: #9c9c9c; border: none; border-radius: 3px; cursor: pointer; transition: background 0.12s, color 0.12s, transform 0.1s; } .animator-asset-type-btn:hover { background: rgba(192, 132, 252, 0.12); color: #ddd; } .animator-asset-type-btn[data-type="2d"].animator-asset-type-active { background: linear-gradient(135deg, #2d5a52, #1f4540); color: #74ebd5; box-shadow: inset 0 0 4px rgba(0,0,0,0.4); } .animator-asset-type-btn[data-type="3d"].animator-asset-type-active { background: linear-gradient(135deg, #5a3f8a, #3d2960); color: #c084fc; box-shadow: inset 0 0 4px rgba(0,0,0,0.4); } /* 3D モードのとき、Animation Timeline 内に出る注意バナー */ .animator-tl-3d-warn { margin: 6px 8px 10px; padding: 9px 12px; background: linear-gradient(135deg, rgba(192, 132, 252, 0.10), rgba(124, 58, 237, 0.08)); border: 1px solid rgba(192, 132, 252, 0.45); border-left: 3px solid #c084fc; border-radius: 4px; color: #ddd; font-size: 11px; line-height: 1.55; letter-spacing: 0.02em; } .animator-tl-3d-warn b { color: #c084fc; font-weight: 700; } .animator-tl-3d-warn code { display: inline-block; padding: 1px 6px; margin: 0 2px; background: #1c1c1c; border: 1px solid #3a3a3a; border-radius: 3px; font-family: ui-monospace, 'Consolas', monospace; font-size: 10.5px; color: #f0b3ff; } /* 3D モードでは Sprite Bin / Frames など 2D 専用 UI を抑制したい場合に使う ※ JS 側で .animator-asset-3d を overlay に付与済み */ .animator-asset-3d .animator-spritebin-only, .animator-asset-3d .animator-frames-only, .animator-asset-3d .animator-2d-only { opacity: 0.4; pointer-events: none; filter: grayscale(0.6); } .animator-asset-3d .animator-spritebin-only::after, .animator-asset-3d .animator-frames-only::after { content: " (3D モードでは無効)"; font-size: 10px; color: #c084fc; margin-left: 4px; } /* Clip Name 入力欄 (State Props 内): 2D=スプライト束名 / 3D=AnimationClip 名 */ .animator-clipname-row { display: flex; align-items: center; gap: 6px; margin: 4px 0; } .animator-clipname-row label { min-width: 86px; font-size: 11px; color: #b8b8b8; } .animator-clipname-row input { flex: 1 1 auto; padding: 3px 7px; background: #1c1c1c; border: 1px solid #3a3a3a; border-radius: 3px; color: #e0e0e0; font-size: 11px; font-family: ui-monospace, 'Consolas', monospace; } .animator-clipname-row input:focus { border-color: #c084fc; outline: none; background: #221a2c; } /* ============================================================ 📖 ストーリーボードビュー (マンガコマ風 State 配置) ============================================================ */ .animator-graph-view-toggle { padding: 3px 9px; margin-right: 4px; font-size: 10px; background: linear-gradient(135deg, #5a3f8a, #3d2960); color: #c084fc; border: 1px solid #c084fc; border-radius: 3px; cursor: pointer; } .animator-graph-view-toggle:hover { background: linear-gradient(135deg, #6a4fa0, #4d3673); color: #fff; } .animator-canvas-storyboard { overflow: auto !important; padding: 12px !important; background: #1f1f1f !important; } .animator-canvas-storyboard #animator-state-graph-svg { display: none; } .animator-storyboard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; padding: 4px; } .animator-storyboard-cell { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 10px; background: linear-gradient(180deg, #3a3a3a, #2d2d2d); border: 2px solid #4a4a4a; border-radius: 8px; cursor: pointer; transition: all 0.15s; min-height: 200px; } .animator-storyboard-cell:hover { border-color: #c084fc; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(192, 132, 252, 0.3); } .animator-storyboard-cell-default { border-color: #d49654; background: linear-gradient(180deg, #4a3e26, #382e1d); } .animator-storyboard-cell-playing { border-color: #74ebd5 !important; box-shadow: 0 0 20px rgba(116, 235, 213, 0.8), inset 0 0 10px rgba(116, 235, 213, 0.2) !important; animation: animator-sb-playing-pulse 1s ease-in-out infinite; } @keyframes animator-sb-playing-pulse { 0%, 100% { box-shadow: 0 0 16px rgba(116, 235, 213, 0.6), inset 0 0 8px rgba(116, 235, 213, 0.15); } 50% { box-shadow: 0 0 24px rgba(116, 235, 213, 1.0), inset 0 0 14px rgba(116, 235, 213, 0.3); } } .animator-storyboard-num { position: absolute; top: -10px; left: -10px; width: 28px; height: 28px; background: #c084fc; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); } .animator-storyboard-cell-default .animator-storyboard-num { background: #d49654; } .animator-storyboard-star { position: absolute; top: -10px; right: -8px; font-size: 22px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5)); } .animator-storyboard-thumb { width: 100%; aspect-ratio: 1; background: repeating-conic-gradient(#252525 0% 25%, #1f1f1f 0% 50%) 50% / 16px 16px; border-radius: 4px; display: flex; align-items: center; justify-content: center; border: 1px solid #4a4a4a; } .animator-storyboard-thumb-empty { font-size: 10px; color: #666; font-style: italic; } .animator-storyboard-name { font-size: 13px; font-weight: 700; color: #fff; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .animator-storyboard-meta { font-size: 10px; color: #a8a8a8; text-align: center; font-family: var(--font-mono, monospace); } .animator-storyboard-arrows-out { display: flex; flex-direction: column; gap: 3px; padding-top: 6px; border-top: 1px dashed #4a4a4a; } .animator-sb-out { font-size: 10px; padding: 3px 6px; border-radius: 3px; background: rgba(192, 132, 252, 0.1); color: #c084fc; text-align: center; } .animator-sb-out-auto { background: rgba(116, 235, 213, 0.1); color: #74ebd5; } .animator-sb-out-cond { background: rgba(88, 166, 255, 0.1); color: #58a6ff; } .animator-sb-out-both { background: rgba(249, 115, 22, 0.1); color: #f97316; } .animator-sb-out-warn { background: rgba(255, 107, 107, 0.1); color: #ff6b6b; } .animator-sb-out-none { font-size: 10px; color: #555; font-style: italic; text-align: center; padding: 4px; } /* ============================================================ 📝 ナラティブモードダイアログ ============================================================ */ .animator-narrative-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.8); z-index: 10003; display: flex; align-items: center; justify-content: center; animation: animator-template-fadein 0.18s ease-out; } .animator-narrative-modal { max-width: 900px; width: 92%; max-height: 90vh; display: flex; flex-direction: column; background: linear-gradient(135deg, #2d2d2d, #232323); border: 1px solid #c084fc; border-radius: 10px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), 0 0 40px rgba(192, 132, 252, 0.2); } /* カードピッカー対応の wide モーダル (左: 文章 / 右: State カード) */ .animator-narrative-modal-wide { max-width: 1200px; width: 95%; } /* ─── 統合アシスト: シェル (overlay + modal + head + tabs + body) ─── */ .animator-assist-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7); z-index: 9999; display: flex; align-items: center; justify-content: center; } /* モーダルは「拾い方 (text モード相当)」のサイズで固定 → タブ切替でリサイズしない。 小さい画面では vw/vh で切り詰める (= モバイル fallback) */ .animator-assist-modal { width: min(1200px, 96vw); height: min(820px, 92vh); display: flex; flex-direction: column; background: linear-gradient(135deg, #2d2d2d, #232323); border: 1px solid #c084fc; border-radius: 10px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), 0 0 40px rgba(192, 132, 252, 0.2); overflow: hidden; } .animator-assist-head { display: flex; align-items: center; gap: 10px; padding: 12px 18px; background: linear-gradient(90deg, #2a2a2a, #232323); border-bottom: 1px solid #444; flex: 0 0 auto; } .animator-assist-title { flex: 1; color: #c084fc; font-weight: 700; font-size: 15px; letter-spacing: 0.06em; } .animator-assist-close { background: transparent; border: 1px solid transparent; color: #999; cursor: pointer; padding: 2px 9px; border-radius: 4px; font-size: 14px; line-height: 1; } .animator-assist-close:hover { background: rgba(255, 100, 100, 0.18); color: #ff8c8c; border-color: rgba(255, 100, 100, 0.4); } .animator-assist-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; /* シェル自身は overflow:hidden に固定 — flex 子要素の高さを正しく確定させるため。 スクロールは内部の各 scroll container (cards / left / actbuild-body) に委譲する。 ※ overflow:auto にすると flex 子の available height が "自身の natural size でも OK" と 解釈されて cards が overflow しない状態になり、ホイールスクロールが利かなくなる */ overflow: hidden; overscroll-behavior: contain; } /* シェル内で動く各モードの内部レイアウトはそのまま */ .animator-assist-body > .animator-narrative-sub, .animator-assist-body > .animator-actbuild-sub { padding: 12px 18px 8px; font-size: 11px; line-height: 1.6; color: var(--ani-text-mute); flex: 0 0 auto; } .animator-assist-body > .animator-narrative-body, .animator-assist-body > .animator-actbuild-body { flex: 1 1 auto; min-height: 0; /* 既存の inner overflow:auto を残してそのままスクロール可。 body 自体の overflow:auto と二重スクロールにはなるが、ホイールはどちらでも効く */ } .animator-assist-body > .animator-narrative-actions, .animator-assist-body > .animator-actbuild-actions { flex: 0 0 auto; padding: 10px 18px; border-top: 1px solid #444; background: #1f1f22; } /* ホイールスクロールを確実に効かせるための flex 高さ確定パターン - 各階層に flex: 1 1 0 (basis 0) と min-height: 0 を強制 - 親 (assist-body) が overflow: hidden になったので、ここから順に flex で高さが伝播 - 末端の scroll container だけが overflow-y: auto を持つ */ .animator-assist-body .animator-narrative-body { flex: 1 1 0 !important; min-height: 0 !important; overflow: hidden !important; padding: 0 !important; gap: 0 !important; } .animator-assist-body .animator-narrative-left { flex: 1 1 0 !important; min-width: 0; min-height: 0 !important; overflow-y: auto !important; /* 左カラム = テキスト/プレビュー側の scroll */ overscroll-behavior: contain; } .animator-assist-body .animator-narrative-right { flex: 0 0 320px !important; min-width: 0; min-height: 0 !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; } .animator-assist-body .animator-narrative-right-head { flex: 0 0 auto !important; } .animator-assist-body .animator-narrative-cards { flex: 1 1 0 !important; /* basis 0 → 親の余り全部もらう */ min-height: 0 !important; overflow-y: auto !important; /* ★ ここがカード上ホイールの scroll 対象 */ overflow-x: hidden; overscroll-behavior: contain; } /* actbuild モードも同じ高さ伝播 + scroll 委譲 */ .animator-assist-body .animator-actbuild-body { flex: 1 1 0 !important; min-height: 0 !important; overflow-y: auto !important; overscroll-behavior: contain; } /* ─── 統合アシスト: 文章 ↔ 動作 のモード切替タブ ─── narrative / actbuild 両ダイアログの head 直下に共通配置。 */ .animator-assist-tabs { display: flex; gap: 0; padding: 0 14px; background: #1f1f22; border-bottom: 1px solid #444; } .animator-assist-tab { flex: 1 1 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 14px; background: transparent; border: none; border-top: 2px solid transparent; border-bottom: 2px solid transparent; color: var(--ani-text-mute); cursor: pointer; text-align: left; font-family: inherit; transition: background 0.12s, color 0.12s, border-color 0.12s; } .animator-assist-tab:hover { background: rgba(192, 132, 252, 0.06); color: var(--ani-text); } .animator-assist-tab-active { background: #2d2d33; color: #c084fc; border-bottom-color: #c084fc; cursor: default; } .animator-assist-tab-label { font-size: 12px; font-weight: 700; letter-spacing: 0.03em; } .animator-assist-tab-desc { font-size: 9.5px; color: var(--ani-text-mute); line-height: 1.3; } .animator-assist-tab-active .animator-assist-tab-desc { color: rgba(192, 132, 252, 0.7); } .animator-narrative-body-split { flex-direction: row !important; gap: 0 !important; padding: 0 !important; } .animator-narrative-left { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 14px 20px; overflow-y: auto; } .animator-narrative-right { flex: 0 0 320px; min-width: 0; display: flex; flex-direction: column; background: #1f1f22; border-left: 1px solid #444; overflow: hidden; } .animator-narrative-right-head { padding: 8px 12px; background: #2a2a2d; border-bottom: 1px solid #444; font-size: 11px; font-weight: 700; color: #c084fc; letter-spacing: 0.04em; } .animator-narrative-right-head small { color: var(--ani-text-mute); font-weight: 400; margin-left: 6px; } .animator-narrative-cards { flex: 1 1 auto; overflow-y: auto; padding: 10px 10px 14px; } .animator-narrative-cardgroup { margin-bottom: 12px; } .animator-narrative-cardgroup-head { font-size: 10px; font-weight: 700; color: var(--cat-accent, #c084fc); letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 6px; border-left: 2px solid var(--cat-accent, #c084fc); margin-bottom: 6px; background: rgba(255,255,255,0.02); } .animator-narrative-cardgroup-body { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; } .animator-narrative-card { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 6px 8px; background: #2a2a2d; border: 1px solid #3a3a3d; border-left: 3px solid var(--cat-accent, #c084fc); border-radius: 4px; cursor: pointer; text-align: left; font-family: inherit; color: var(--ani-text); transition: background 0.12s, border-color 0.12s, transform 0.08s; } .animator-narrative-card:hover { background: #353539; border-color: var(--cat-accent, #c084fc); transform: translateX(1px); } .animator-narrative-card:active { transform: translateX(2px) scale(0.98); } .animator-narrative-card-name { font-family: var(--font-mono, monospace); font-size: 11px; font-weight: 700; color: var(--cat-accent, #c084fc); letter-spacing: 0.04em; } .animator-narrative-card-label { font-size: 9.5px; color: var(--ani-text); font-weight: 700; } .animator-narrative-card-desc { font-size: 9px; color: var(--ani-text-mute); line-height: 1.35; margin-top: 2px; } .animator-narrative-custom-hint { padding: 8px 10px; font-size: 10px; line-height: 1.6; color: var(--ani-text-mute); background: rgba(255,255,255,0.02); border-radius: 4px; } .animator-narrative-custom-hint code { background: #1a1a1a; padding: 1px 5px; border-radius: 2px; color: #ffd666; font-family: var(--font-mono, monospace); font-size: 10px; } .animator-narrative-card-custom { display: block !important; width: 100%; margin-top: 8px; padding: 6px 8px !important; background: #2a2a2d !important; border: 1px dashed #666 !important; border-left: 3px dashed #888 !important; color: #ddd !important; font-size: 10px; font-family: var(--font-mono, monospace); text-align: center !important; border-radius: 4px; cursor: pointer; } .animator-narrative-card-custom:hover { border-color: #ffd666 !important; border-left-color: #ffd666 !important; color: #ffd666 !important; } /* レスポンシブ: 狭い画面では右カードを下に */ @media (max-width: 900px) { .animator-narrative-body-split { flex-direction: column !important; } .animator-narrative-right { flex: 0 0 auto; max-height: 40vh; border-left: none; border-top: 1px solid #444; } } .animator-narrative-head { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-bottom: 1px solid rgba(192, 132, 252, 0.3); background: linear-gradient(180deg, #3a2d4a, #2a2030); border-radius: 10px 10px 0 0; } .animator-narrative-icon { font-size: 22px; } .animator-narrative-title { flex: 1; font-size: 16px; font-weight: 800; color: #fff; } .animator-narrative-close { width: 28px; height: 28px; background: rgba(255, 255, 255, 0.05); color: #aaa; border: 1px solid #4a4a4a; border-radius: 4px; cursor: pointer; } .animator-narrative-close:hover { background: rgba(255, 100, 100, 0.18); color: #ff8c8c; } .animator-narrative-sub { font-size: 12px; color: #c0c0c0; line-height: 1.7; padding: 12px 20px; background: rgba(192, 132, 252, 0.06); border-bottom: 1px solid #4a4a4a; } .animator-narrative-sub b { color: #c084fc; } .animator-narrative-sub code { background: rgba(0, 0, 0, 0.3); padding: 1px 6px; border-radius: 3px; font-family: var(--font-mono, monospace); color: #74ebd5; } .animator-narrative-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 14px 20px; overflow-y: auto; } .animator-narrative-example { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .animator-narrative-example-head { font-size: 11px; color: #a8a8a8; font-weight: 600; margin-right: 6px; } .animator-narrative-example-btn { padding: 4px 12px; font-size: 11px; background: #3a3a3a; color: #e0e0e0; border: 1px solid #4a4a4a; border-radius: 4px; cursor: pointer; } .animator-narrative-example-btn:hover { background: #4a4a4a; border-color: #c084fc; } .animator-narrative-input { width: 100%; min-height: 200px; padding: 12px 14px; background: #1f1f1f; color: #e0e0e0; border: 1px solid #4a4a4a; border-radius: 6px; font-family: var(--font-mono, monospace); font-size: 13px; line-height: 1.7; resize: vertical; } .animator-narrative-input:focus { outline: none; border-color: #c084fc; box-shadow: 0 0 0 2px rgba(192, 132, 252, 0.2); } .animator-narrative-preview { min-height: 60px; padding: 12px 14px; background: rgba(116, 235, 213, 0.05); border: 1px solid rgba(116, 235, 213, 0.2); border-radius: 6px; font-size: 12px; } .animator-narrative-preview-head { font-size: 13px; font-weight: 700; color: #74ebd5; margin-bottom: 10px; } .animator-narrative-empty { color: #888; font-style: italic; text-align: center; padding: 20px; } .animator-narrative-error { color: #ff8c8c; padding: 12px; background: rgba(255, 100, 100, 0.1); border-left: 3px solid #ff6b6b; border-radius: 4px; } .animator-narrative-section { margin: 8px 0; padding: 6px 0; } .animator-narrative-section b { color: #c084fc; } .animator-narrative-tag { display: inline-block; padding: 3px 10px; margin: 2px 4px 2px 0; background: rgba(192, 132, 252, 0.15); color: #c084fc; border: 1px solid rgba(192, 132, 252, 0.4); border-radius: 4px; font-size: 11px; font-weight: 600; } .animator-narrative-tag-state { background: rgba(212, 150, 84, 0.15); color: #d49654; border-color: rgba(212, 150, 84, 0.4); } .animator-narrative-tag-param { background: rgba(116, 235, 213, 0.15); color: #74ebd5; border-color: rgba(116, 235, 213, 0.4); } .animator-narrative-tag small { opacity: 0.7; font-weight: 400; } .animator-narrative-trans-list { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; } .animator-narrative-trans { padding: 4px 10px; font-size: 11px; font-family: var(--font-mono, monospace); background: rgba(255, 255, 255, 0.03); border-left: 3px solid #c084fc; border-radius: 0 3px 3px 0; } .animator-narrative-trans-auto { border-left-color: #74ebd5; } .animator-narrative-trans-cond { border-left-color: #58a6ff; } .animator-narrative-trans-both { border-left-color: #f97316; } .animator-narrative-trans-warn { border-left-color: #ff6b6b; } .animator-narrative-none { color: #888; font-style: italic; } .animator-narrative-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; background: #252525; border-top: 1px solid #4a4a4a; border-radius: 0 0 10px 10px; } .animator-narrative-actions button { padding: 8px 16px; font-size: 12px; font-weight: 600; background: #4a4a4a; color: #f0f0f0; border: 1px solid #5a5a5a; border-radius: 4px; cursor: pointer; } .animator-narrative-actions button:hover:not(:disabled) { background: #5a5a5a; } .animator-narrative-actions button:disabled { opacity: 0.4; cursor: not-allowed; } .animator-narrative-analyze { background: linear-gradient(135deg, #4a3e6e, #3a2e5e) !important; border-color: #c084fc !important; color: #c084fc !important; } .animator-narrative-analyze:hover { background: linear-gradient(135deg, #5a4e7e, #4a3e6e) !important; color: #fff !important; } .animator-narrative-apply { background: linear-gradient(135deg, #2ea043, #238636) !important; border-color: #3eb053 !important; color: #fff !important; } .animator-narrative-apply:hover:not(:disabled) { background: linear-gradient(135deg, #3eb053, #2ea043) !important; } /* ============================================================ 🎭 動作アシスタント (Action Builder) ============================================================ */ .animator-actbuild-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.8); z-index: 10004; display: flex; align-items: center; justify-content: center; animation: animator-template-fadein 0.18s ease-out; } .animator-actbuild-modal { max-width: 760px; width: 92%; max-height: 90vh; display: flex; flex-direction: column; background: linear-gradient(135deg, #2d2d2d, #232323); border: 1px solid #74ebd5; border-radius: 10px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), 0 0 40px rgba(116, 235, 213, 0.2); } .animator-actbuild-head { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-bottom: 1px solid rgba(116, 235, 213, 0.3); background: linear-gradient(180deg, #2d4a4a, #1f3535); border-radius: 10px 10px 0 0; } .animator-actbuild-icon { font-size: 22px; } .animator-actbuild-title { flex: 1; font-size: 16px; font-weight: 800; color: #fff; } .animator-actbuild-close { width: 28px; height: 28px; background: rgba(255, 255, 255, 0.05); color: #aaa; border: 1px solid #4a4a4a; border-radius: 4px; cursor: pointer; } .animator-actbuild-close:hover { background: rgba(255, 100, 100, 0.18); color: #ff8c8c; } .animator-actbuild-sub { font-size: 12px; color: #c0c0c0; line-height: 1.7; padding: 12px 20px; background: rgba(116, 235, 213, 0.06); border-bottom: 1px solid #4a4a4a; } .animator-actbuild-sub b { color: #74ebd5; } .animator-actbuild-sub code { background: rgba(0, 0, 0, 0.3); padding: 1px 6px; border-radius: 3px; font-family: var(--font-mono, monospace); color: #c084fc; } .animator-actbuild-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 14px; } /* セクション (動作 / 遷移 / プレビュー) */ .animator-actbuild-section { padding: 12px 14px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 6px; } .animator-actbuild-section-title { font-size: 13px; font-weight: 700; color: #74ebd5; margin-bottom: 10px; letter-spacing: 0.02em; } .animator-actbuild-section-title span { font-size: 10px; color: #888; font-weight: 400; margin-left: 4px; } /* 動作セクション */ .animator-actbuild-action-row { display: flex; gap: 8px; margin-bottom: 8px; } .animator-actbuild-action-search, .animator-actbuild-action-select { padding: 6px 10px; background: #1f1f1f; color: #e0e0e0; border: 1px solid #4a4a4a; border-radius: 4px; font-size: 12px; } .animator-actbuild-action-search { flex: 1; min-width: 0; } .animator-actbuild-action-search:focus, .animator-actbuild-action-select:focus { outline: none; border-color: #74ebd5; box-shadow: 0 0 0 2px rgba(116, 235, 213, 0.2); } .animator-actbuild-action-select { flex: 1.5; min-width: 0; } .animator-actbuild-action-info { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: linear-gradient(135deg, #2a3a3a, #1f2d2d); border-radius: 4px; font-size: 12px; flex-wrap: wrap; } .animator-actbuild-action-info > span:first-child { font-size: 20px; } .animator-actbuild-action-info b { color: #74ebd5; font-size: 14px; } .animator-actbuild-action-info code { background: rgba(192, 132, 252, 0.15); color: #c084fc; padding: 1px 8px; border-radius: 3px; font-family: var(--font-mono, monospace); font-size: 11px; } .animator-actbuild-action-desc { color: #b0b0b0; flex: 1; min-width: 200px; } .animator-actbuild-action-meta { font-size: 10px; color: #888; font-family: var(--font-mono, monospace); } /* 遷移セクション */ .animator-actbuild-trans { padding: 10px 12px; margin-bottom: 8px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 6px; } .animator-actbuild-trans-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .animator-actbuild-trans-num { font-size: 11px; font-weight: 700; color: #c084fc; letter-spacing: 0.04em; } .animator-actbuild-trans-del { width: 22px; height: 22px; padding: 0; background: rgba(255, 100, 100, 0.12); color: #ff8c8c; border: 1px solid rgba(255, 100, 100, 0.3); border-radius: 3px; cursor: pointer; font-size: 12px; } .animator-actbuild-trans-del:hover { background: rgba(255, 100, 100, 0.25); } .animator-actbuild-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; } .animator-actbuild-field label { font-size: 11px; color: #b0b0b0; font-weight: 600; } .animator-actbuild-field select, .animator-actbuild-field input { padding: 6px 10px; background: #1f1f1f; color: #e0e0e0; border: 1px solid #4a4a4a; border-radius: 4px; font-size: 12px; } .animator-actbuild-field select:focus, .animator-actbuild-field input:focus { outline: none; border-color: #c084fc; box-shadow: 0 0 0 2px rgba(192, 132, 252, 0.2); } .animator-actbuild-loop-note { padding: 8px; background: rgba(116, 235, 213, 0.08); border-left: 3px solid #74ebd5; border-radius: 3px; font-size: 11px; color: #74ebd5; text-align: center; } .animator-actbuild-add-trans { padding: 8px 14px; width: 100%; background: rgba(192, 132, 252, 0.1); color: #c084fc; border: 1px dashed rgba(192, 132, 252, 0.4); border-radius: 4px; cursor: pointer; font-size: 12px; font-weight: 600; } .animator-actbuild-add-trans:hover { background: rgba(192, 132, 252, 0.2); border-color: #c084fc; } /* プレビュー */ .animator-actbuild-preview { padding: 14px; background: linear-gradient(135deg, #3a2e4a, #2a2034); border: 1px solid rgba(192, 132, 252, 0.4); border-radius: 6px; } .animator-actbuild-preview-head { font-size: 12px; font-weight: 700; color: #c084fc; margin-bottom: 8px; } .animator-actbuild-preview-body { font-size: 13px; line-height: 1.85; color: #e0e0e0; font-family: var(--font-mono, monospace); } .animator-actbuild-preview-body b { color: #74ebd5; } .animator-actbuild-preview-body code { background: rgba(0, 0, 0, 0.35); color: #c084fc; padding: 1px 6px; border-radius: 3px; font-size: 0.9em; } /* アクション */ .animator-actbuild-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; background: #252525; border-top: 1px solid #4a4a4a; border-radius: 0 0 10px 10px; } .animator-actbuild-actions button { padding: 8px 18px; font-size: 12px; font-weight: 600; background: #4a4a4a; color: #f0f0f0; border: 1px solid #5a5a5a; border-radius: 4px; cursor: pointer; } .animator-actbuild-actions button:hover { background: #5a5a5a; } .animator-actbuild-apply { background: linear-gradient(135deg, #2ea043, #238636) !important; border-color: #3eb053 !important; color: #fff !important; } .animator-actbuild-apply:hover { background: linear-gradient(135deg, #3eb053, #2ea043) !important; } .animator-graph-temp-edge { stroke: #74ebd5; stroke-width: 2.5; fill: none; pointer-events: none; } /* Floating extra column */ .animator-col-extra { flex: 1 1 0; padding: 0 6px; } .animator-col-head-extra { background: linear-gradient(90deg, #5a4a70, #3a3550) !important; border-left-color: #c084fc !important; } .animator-col-merge-btn { margin-left: auto; padding: 3px 10px; font-size: 10px; background: rgba(192, 132, 252, 0.25); color: #fff; border: 1px solid rgba(192, 132, 252, 0.5); border-radius: 3px; cursor: pointer; font-weight: 700; } .animator-col-merge-btn:hover { background: rgba(192, 132, 252, 0.4); } /* ========================================================================= * 👥 Members モード / ⎇ GSGit 連携 — 骨組み用スタイル * ========================================================================= */ /* ── ツール内ツールのロゴ画像（GSAnim / GSGit ボタン用） ────────────── */ .btn-tool-logo { width: 18px; height: 18px; vertical-align: middle; margin-right: 4px; display: inline-block; object-fit: contain; flex-shrink: 0; } .btn-tool-label { vertical-align: middle; display: inline-block; } /* ヘッダーバー（オーバーレイ上部のタイトル）内のロゴ */ .git-bar-logo { width: 22px; height: 22px; vertical-align: middle; margin-right: 6px; display: inline-block; object-fit: contain; flex-shrink: 0; } /* フル版シンボリックロゴ（草案そのまま、横長） */ .git-bar-logo-full { height: 36px; /* バー高さに合わせる */ width: auto; /* アスペクト比維持 */ max-width: 220px; vertical-align: middle; margin-right: 10px; display: inline-block; object-fit: contain; flex-shrink: 0; } /* GSGit タイトルバーはオレンジ背景になったので、オレンジロゴを白くする */ #git-bar .git-bar-logo-full, #git-bar .git-bar-logo { filter: brightness(0) invert(1); opacity: 0.95; } #git-bar-title, #animator-bar-title { display: flex; align-items: center; gap: 4px; } /* β タグ / バージョン表示スロット (ロゴ脇に小さく) ※ 現状は "β" を表示中。今後バージョンアップしたらここに "v0.1.0" 等を入れる予定 文字色は白に統一 (オレンジ背景に高コントラストで読みやすい) */ /* ★ GS シリーズ共通バージョン/ステータスバッジ GraphScript / GSAnim / GSBone / GSComp / GSDoze / GSGit すべてのヘッダーで使用。 現時点は全ツール β。後で各ツールごとに rc / 1.0 等に上書き可能。 .git-bar-beta は後方互換のため残し、同スタイルを当てる。 */ .gs-beta, .git-bar-beta { display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 7px; background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 10px; color: #fff; letter-spacing: 0.05em; font-family: monospace; vertical-align: middle; margin-left: 6px; } /* GraphScript title-bar 用 (背景が暗いので少し色を載せる) */ #title-bar .gs-beta { background: rgba(116, 235, 213, 0.15); border-color: rgba(116, 235, 213, 0.5); color: #74ebd5; } /* バージョン表記（β バッジの後ろ・控えめなグレー） */ .gs-version { display: inline-block; font-size: 10px; font-family: monospace; font-weight: 600; letter-spacing: 0.03em; color: rgba(255, 255, 255, 0.5); vertical-align: middle; margin-left: 3px; } /* GSComp 用 (紫テーマ) */ .gscomp-bar .gs-beta { background: rgba(192, 132, 252, 0.18); border-color: rgba(192, 132, 252, 0.5); color: #d8b4fe; } /* ===== GSDoze 右ドック式パネル (Members パターン踏襲、緑テーマ) ============ */ :root { --gsdoze-panel-w: 640px; } /* JS のリサイズで上書きされる、2 カラム前提でデフォ拡張 */ #gsdoze-panel { position: fixed; top: calc(22px + var(--toolbar-h) + 2px); bottom: 0; right: 0; width: var(--gsdoze-panel-w); min-width: 540px; /* 2 カラム動作の下限 */ max-width: 1000px; background: var(--editor-bg, #1a1a2e); border-left: 1px solid rgba(140, 220, 180, 0.45); padding: 20px; display: flex; flex-direction: column; gap: 14px; z-index: 102; overflow-y: auto; transform: translateX(100%); pointer-events: none; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: -6px 0 20px rgba(0, 0, 0, 0.5); } #gsdoze-panel.gsdoze-panel-open { transform: translateX(0); pointer-events: auto; } /* ===== Event ノード: GSDoze ペット埋め込み (outgame モード) ============== */ .ev-gsdoze-preview-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 8px 10px; background: rgba(140, 220, 180, 0.10); border: 1px solid rgba(140, 220, 180, 0.35); border-radius: 4px; } .ev-gsdoze-edit-btn { margin-left: auto; padding: 5px 12px; background: rgba(140, 220, 180, 0.20); border: 1px solid rgba(140, 220, 180, 0.50); border-radius: 4px; color: #b8efce; cursor: pointer; font-size: 11px; font-weight: 700; } .ev-gsdoze-edit-btn:hover { background: rgba(140, 220, 180, 0.35); color: #fff; } .ev-gsdoze-badge { position: absolute; top: 4px; right: 4px; font-size: 14px; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6)); pointer-events: none; z-index: 5; } /* ===== 統合 right-dock (Members + Editor を内部タブで切替) ==================== 従来の独立 2 パネル (Members, Editor) を 1 つのドックに統合。 #members-panel と #side-editor は init JS で .right-dock-body 内に移動され、 position: static 化されてドック内の通常フローで表示される。 表示するパネルは data-active-tab で制御。 */ #right-dock { position: fixed; top: calc(22px + var(--toolbar-h) + 2px); bottom: 0; right: 0; width: var(--members-panel-w, 420px); z-index: 102; background: var(--editor-bg, #1a1a2e); border-left: 1px solid var(--border); display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; box-shadow: -6px 0 22px rgba(0,0,0,0.55); } #right-dock.right-dock-open { transform: translateX(0); pointer-events: auto; } #right-dock-tabs { display: flex; align-items: stretch; background: rgba(0,0,0,0.35); border-bottom: 1px solid var(--border); flex-shrink: 0; } .right-dock-tab { padding: 10px 18px; background: transparent; border: 0; color: rgba(255,255,255,0.5); cursor: pointer; font-size: 12px; font-weight: 700; letter-spacing: 0.5px; border-right: 1px solid var(--border); transition: background 0.15s, color 0.15s; } .right-dock-tab:hover { background: rgba(255,255,255,0.05); color: #ccc; } .right-dock-tab.active { background: var(--editor-bg, #1a1a2e); color: #fff; position: relative; } .right-dock-tab.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: #c084fc; } .right-dock-spacer { flex: 1; } .right-dock-close { padding: 8px 14px; background: transparent; border: 0; color: rgba(255,255,255,0.45); cursor: pointer; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; } .right-dock-close:hover { background: rgba(255,107,107,0.15); color: #ff8888; } #right-dock-body { flex: 1; overflow: auto; position: relative; } /* 内部の Members / Editor パネルは static 化してドック内の通常フローで表示 */ #right-dock #members-panel, #right-dock #side-editor { position: static !important; width: 100% !important; height: auto !important; min-width: 0 !important; transform: none !important; pointer-events: auto !important; box-shadow: none !important; border: 0 !important; display: block !important; /* 元の top/bottom/right を打ち消す */ top: auto !important; bottom: auto !important; right: auto !important; } /* アクティブタブの内容だけ表示 */ #right-dock[data-active-tab="editor"] #members-panel { display: none !important; } #right-dock[data-active-tab="members"] #side-editor { display: none !important; } /* 旧サイドタブ (#members-panel-tab, #editor-tab) は非表示にする (統合ドック化のため) */ #members-panel-tab, #editor-tab { display: none !important; } /* ===== GSDoze 連動 GSAnim ドック ============================================ GSDoze パネルの左隣に iframe で GSAnim を docking する形で表示。 right offset は GSDoze 自身の right (タブクリアランス + 他パネル幅) に GSDoze 自身の幅を足したもの (= GSDoze の左端と一致)。 */ /* GSAnim ドックは GSDoze の左隣に並ぶ (右端が GSDoze 左端にくっつく)。 GSDoze 幅変動時は dock の右端が追従して dock 幅が可変。 */ #gsdoze-anim-dock { position: fixed; top: calc(22px + var(--toolbar-h) + 2px); bottom: 0; left: 0; right: calc(var(--gs-tab-clearance) + var(--gsdoze-panel-w)); z-index: 100; background: var(--editor-bg, #0d0f14); border-right: 2px solid rgba(140, 220, 180, 0.55); box-shadow: 4px 0 18px rgba(0,0,0,0.55); display: flex; flex-direction: column; } /* 統合 right-dock 開いてる時は GSDoze がその分左へずれるので、GSAnim ドック右端もずれる */ body.has-right-dock-open #gsdoze-anim-dock { right: calc(var(--gs-tab-clearance) + var(--gsdoze-panel-w) + var(--members-panel-w, 420px)); } .gsdoze-anim-dock-bar { display: flex; align-items: center; gap: 12px; padding: 8px 14px; background: linear-gradient(90deg, rgba(140,220,180,0.18), rgba(140,220,180,0.08)); border-bottom: 1px solid rgba(140, 220, 180, 0.35); flex-shrink: 0; } .gsdoze-anim-dock-title { font-size: 13px; font-weight: 700; color: #b8efce; letter-spacing: 0.3px; } .gsdoze-anim-dock-sub { flex: 1; font-size: 11px; color: rgba(255,255,255,0.55); font-family: monospace; } .gsdoze-anim-dock-close { padding: 5px 14px; background: rgba(255,107,107,0.12); border: 1px solid rgba(255,107,107,0.40); border-radius: 4px; color: #ff9a9a; cursor: pointer; font-size: 11px; font-weight: 700; letter-spacing: 0.3px; } .gsdoze-anim-dock-close:hover { background: rgba(255,107,107,0.30); border-color: #ff6b6b; color: #fff; } #gsdoze-anim-dock-iframe { flex: 1; width: 100%; height: 100%; border: 0; background: #0d0f14; } /* Anim dock 右端の resize ハンドル (iframe の外に位置するため mouse event を確実に捕捉) */ .gsdoze-anim-dock-resize-handle { position: absolute; right: -3px; /* GSDoze 左端と少し重ねて掴みやすく */ top: 0; bottom: 0; width: 8px; cursor: ew-resize; background: transparent; z-index: 12; transition: background 0.15s; } .gsdoze-anim-dock-resize-handle:hover, .gsdoze-anim-dock-resize-handle.dragging { background: rgba(140, 220, 180, 0.55); } /* ドラッグ中 iframe が mouse event を食わないよう全画面 overlay (cursor 維持) */ .gsdoze-drag-overlay { position: fixed; inset: 0; z-index: 99999; cursor: ew-resize; background: transparent; user-select: none; } /* GSAnim を GSDoze ドックモードで読み込んだ時、iframe 側で右タブ等を隠す */ body.gsdoze-anim-dock-mode #members-panel-tab, body.gsdoze-anim-dock-mode #editor-tab, body.gsdoze-anim-dock-mode #gsdoze-panel, body.gsdoze-anim-dock-mode #members-panel, body.gsdoze-anim-dock-mode #side-editor, body.gsdoze-anim-dock-mode #title-bar, body.gsdoze-anim-dock-mode #animator-bar { /* dock では新規/保存/レイアウト等の上部メニューは不要 (GSDoze 側で管理) */ display: none !important; } /* animator-overlay の上部を bar 分浮かせていた padding を解除 */ body.gsdoze-anim-dock-mode #animator-overlay { padding-top: 0 !important; } /* dock 内では Asset 一覧サイドバーをデフォで折りたたみ (Asset 切替は GSDoze 側で管理されてるため不要) */ body.gsdoze-anim-dock-mode #animator-sidebar { flex: 0 0 36px !important; padding: 6px 4px !important; overflow: hidden !important; } body.gsdoze-anim-dock-mode #animator-sidebar #animator-list, body.gsdoze-anim-dock-mode #animator-sidebar #animator-anim-list, body.gsdoze-anim-dock-mode #animator-sidebar .animator-sidebar-section { display: none !important; } body.gsdoze-anim-dock-mode #animator-sidebar .animator-sidebar-head-title { display: none !important; } /* レスポンシブの 1100px ブレイクポイントを dock では下げて、より狭くても 2 カラム維持 */ @media (max-width: 1100px) { body.gsdoze-anim-dock-mode .animator-split-row { flex-direction: row !important; } body.gsdoze-anim-dock-mode .animator-col { width: auto !important; } } /* dock 内 column の最小幅を緩める (本家は触らない、dock 内のみ) */ body.gsdoze-anim-dock-mode .animator-col-animation, body.gsdoze-anim-dock-mode .animator-col-controller { flex-basis: 0 !important; min-width: 280px; } /* ── GSDoze 開いてる時のレイアウト ── タブ (Members / Editor) は常に viewport 右端 (right:0) に固定。 GSDoze 側がタブ幅 (~40px) の余白を右に確保することで、タブがウィジェット内容を 覆わないようにする。Editor が開いた時の挙動 (右端は Editor、GSDoze は左へ退避) を Members にもミラー。タブ自体は動かさない。 */ :root { --gs-tab-clearance: 0px; } /* 旧サイドタブ廃止 (TAB ボタン化) で余白不要に */ /* GSDoze 単体 open: タブクリアランス分右端余白 (今はタブ自体ないが将来用に保持) */ body.gs-doze-open #gsdoze-panel.gsdoze-panel-open { right: var(--gs-tab-clearance); } /* 統合 right-dock open 時: GSDoze は dock の幅分左へずれる */ body.gs-doze-open.has-right-dock-open #gsdoze-panel.gsdoze-panel-open { right: calc(var(--gs-tab-clearance) + var(--members-panel-w, 420px)); } /* GSDoze と Members は排他ではないが、両方開いた時の z-index 順は GSDoze 上 */ #gsdoze-panel .editor-title { color: #8fdbb0; font-weight: 700; } #gsdoze-panel .editor-header { display: flex; align-items: center; gap: 8px; } /* リサイズハンドル: パネル左端、ドラッグで幅変更 */ .gsdoze-panel-resize-handle { position: absolute; left: 0; top: 0; bottom: 0; width: 6px; cursor: ew-resize; background: transparent; z-index: 10; transition: background 0.15s; } .gsdoze-panel-resize-handle:hover, .gsdoze-panel-resize-handle.dragging { background: rgba(140, 220, 180, 0.55); } /* GSDoze パネル本体: セクション構造 */ .gsdoze-panel-section { background: rgba(30, 40, 35, 0.65); border: 1px solid rgba(140, 220, 180, 0.30); border-radius: 6px; overflow: hidden; } /* iOS 風トグルスイッチ (進捗保存 ON/OFF など、checkbox を視覚的に隠す) */ .gsdoze-toggle { position: relative; display: inline-block; width: 36px; height: 18px; flex: 0 0 36px; cursor: pointer; } .gsdoze-toggle input { opacity: 0; width: 0; height: 0; } .gsdoze-toggle-slider { position: absolute; inset: 0; background: rgba(80, 80, 80, 0.7); border-radius: 18px; transition: background 0.2s; } .gsdoze-toggle-slider::before { content: ''; position: absolute; width: 14px; height: 14px; left: 2px; top: 2px; background: #f0f0f0; border-radius: 50%; transition: transform 0.2s; } .gsdoze-toggle input:checked + .gsdoze-toggle-slider { background: #4caf72; } .gsdoze-toggle input:checked + .gsdoze-toggle-slider::before { transform: translateX(18px); } /* ── GraphScript ライセンスモーダル (TOOLS ロック / 14 日試用 / Personal キー入力) ── */ .gs-license-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.65); z-index: 99999; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); } .gs-license-modal { background: #1a1f24; border: 1px solid rgba(140, 220, 180, 0.35); border-radius: 10px; width: 480px; max-width: 92vw; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6); } .gs-license-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: rgba(140, 220, 180, 0.10); border-bottom: 1px solid rgba(140, 220, 180, 0.25); } .gs-license-modal-title { font-weight: 700; font-size: 13px; color: #e5e5e5; letter-spacing: 0.3px; } .gs-license-modal-close { background: transparent; border: none; color: rgba(255,255,255,0.5); font-size: 18px; cursor: pointer; padding: 0 6px; } .gs-license-modal-close:hover { color: #fff; } .gs-license-modal-body { padding: 16px; color: #ddd; font-size: 12px; overflow-y: auto; } .gs-license-options { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; } .gs-license-option { display: flex; gap: 12px; padding: 12px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10); border-radius: 6px; cursor: pointer; transition: background 0.15s, border-color 0.15s; } .gs-license-option:hover { background: rgba(140, 220, 180, 0.08); border-color: rgba(140, 220, 180, 0.40); } .gs-license-option-icon { font-size: 24px; flex: 0 0 32px; display: flex; align-items: center; justify-content: center; } .gs-license-option-body { flex: 1; } .gs-license-option-title { font-weight: 700; color: #b8efce; margin-bottom: 4px; } .gs-license-option-desc { font-size: 11px; color: rgba(255,255,255,0.55); line-height: 1.5; } /* ── ヘッダー右端の license バッジ (全 TOOLS 横断共通 UI) ── */ #gs-license-badge { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; background: rgba(120, 120, 120, 0.20); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 12px; font-size: 11px; color: #ccc; font-weight: 600; cursor: pointer; transition: background 0.15s, border-color 0.15s; } #gs-license-badge:hover { background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.35); } .gs-license-badge-icon { font-size: 12px; } .gs-license-badge-label { letter-spacing: 0.3px; } /* license タイプ別色分け */ #gs-license-badge.lic-free { background: rgba(120,120,120,0.20); color: #ccc; } #gs-license-badge.lic-trial { background: rgba(251, 191, 36, 0.18); color: #fbbf24; border-color: rgba(251, 191, 36, 0.40); } #gs-license-badge.lic-trial-warning { background: rgba(239, 68, 68, 0.18); color: #fca5a5; border-color: rgba(239, 68, 68, 0.45); animation: gsLicWarn 1.6s ease-in-out infinite; } #gs-license-badge.lic-personal { background: rgba(76, 175, 114, 0.18); color: #b8efce; border-color: rgba(76, 175, 114, 0.45); } #gs-license-badge.lic-studio { background: rgba(139, 92, 246, 0.18); color: #c4b5fd; border-color: rgba(139, 92, 246, 0.45); } #gs-license-badge.lic-dev { background: rgba(59, 130, 246, 0.20); color: #93c5fd; border-color: rgba(59, 130, 246, 0.50); } /* ── GSDoze Phase B: Entity 描画ホスト ── */ .gsdoze-entities-host { position: absolute; inset: 4px; pointer-events: none; z-index: 5; } .gsdoze-entities-host.gsdoze-entities-grid { display: grid; gap: 2px; padding: 4px; } .gsdoze-entity { position: relative; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700; user-select: none; transform-origin: center; transition: transform 0.15s ease-out; } .gsdoze-entities-grid .gsdoze-entity { background: rgba(255,255,255,0.06); border-radius: 4px; border: 1px solid rgba(255,255,255,0.10); aspect-ratio: 1 / 1; } .gsdoze-entity img { width: 80%; height: 80%; object-fit: contain; } /* entity が描画されている preset では pet 絵文字を非表示 (グリッド/自由配置どちらも対象) */ .gsdoze-widget-preview:has(.gsdoze-entities-host .gsdoze-entity) .gsdoze-pet-content { display: none; } /* :has() 非対応ブラウザ fallback: 空 emoji は消す */ .gsdoze-pet-emoji:empty { display: none; } /* 2048 のタイル: data-value で色変化 */ .gsdoze-entity[data-etype="tile_2048"] { font-size: 16px; color: #fff; background: linear-gradient(135deg, #4caf72, #2d7a4f); } .gsdoze-entity[data-etype="tile_2048"][data-value="0"] { background: rgba(255,255,255,0.04); color: transparent; } .gsdoze-entity[data-etype="tile_2048"][data-value="2"] { background: #eee4da; color: #776e65; } .gsdoze-entity[data-etype="tile_2048"][data-value="4"] { background: #ede0c8; color: #776e65; } .gsdoze-entity[data-etype="tile_2048"][data-value="8"] { background: #f2b179; color: #fff; } .gsdoze-entity[data-etype="tile_2048"][data-value="16"] { background: #f59563; color: #fff; } .gsdoze-entity[data-etype="tile_2048"][data-value="32"] { background: #f67c5f; color: #fff; } .gsdoze-entity[data-etype="tile_2048"][data-value="64"] { background: #f65e3b; color: #fff; } .gsdoze-entity[data-etype="tile_2048"][data-value="128"] { background: #edcf72; color: #fff; font-size: 14px; } .gsdoze-entity[data-etype="tile_2048"][data-value="256"] { background: #edcc61; color: #fff; font-size: 14px; } .gsdoze-entity[data-etype="tile_2048"][data-value="512"] { background: #edc850; color: #fff; font-size: 14px; } .gsdoze-entity[data-etype="tile_2048"][data-value="1024"] { background: #edc53f; color: #fff; font-size: 12px; } .gsdoze-entity[data-etype="tile_2048"][data-value="2048"] { background: #edc22e; color: #fff; font-size: 12px; box-shadow: 0 0 12px rgba(237, 194, 46, 0.7); } /* スネーク: segment 表示 (絵文字 🟢/🟩 を使ってるので背景は透明、枠だけ薄く) */ .gsdoze-entity[data-etype="snake_seg"], .gsdoze-entity[data-etype="food"] { background: transparent; border: none; font-size: 12px; } /* マッチ3: gem は背景なし、絵文字 (🔴🟡🟢🔵🟣⚪) で表現 */ .gsdoze-entity[data-etype="gem"] { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10); border-radius: 6px; font-size: 18px; } /* マッチ3 カーソル: 黄色枠でフォーカス表示 */ .gsdoze-entity[data-etype="cursor"] { background: transparent; border: 2px solid #fbbf24; box-shadow: 0 0 8px rgba(251, 191, 36, 0.6); pointer-events: none; z-index: 10; } /* テトリス: active (落下中) と locked (確定) を data.color で塗り分け */ .gsdoze-entity[data-etype="tetris_active"], .gsdoze-entity[data-etype="tetris_locked"] { background: var(--tetris-color, #888); border: 1px solid rgba(255,255,255,0.30); border-radius: 2px; } .gsdoze-entity[data-etype="tetris_active"] { box-shadow: 0 0 6px rgba(255,255,255,0.45); } /* data.color は JS 側 (_gsdozeRenderEntities) で el.style.background に直接反映 */ /* インベーダー: player / 敵 / 弾 (絵文字のみ、背景なし) */ .gsdoze-entity[data-etype="inv_player"], .gsdoze-entity[data-etype="inv_enemy"], .gsdoze-entity[data-etype="inv_bullet"] { background: transparent; border: none; font-size: 18px; } .gsdoze-entity[data-etype="inv_bullet"] { color: #fbbf24; font-weight: 900; text-shadow: 0 0 4px #fbbf24; } /* サバイバー型: player (中央)、敵 (端から接近)、弾 (放射状) */ .gsdoze-entity[data-etype="surv_player"], .gsdoze-entity[data-etype="surv_enemy"], .gsdoze-entity[data-etype="surv_bullet"] { background: transparent; border: none; } .gsdoze-entity[data-etype="surv_player"] { font-size: 20px; } .gsdoze-entity[data-etype="surv_enemy"] { font-size: 16px; } .gsdoze-entity[data-etype="surv_bullet"] { font-size: 12px; text-shadow: 0 0 6px #fbbf24; } /* ── モック PAD (プレビュー下、マウス/タッチで preset.onInput を駆動) ── */ .gsdoze-mockpad { margin-top: 10px; padding: 8px 10px; background: rgba(20, 28, 22, 0.55); border: 1px solid rgba(140, 220, 180, 0.20); border-radius: 6px; } .gsdoze-mockpad-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 11px; } .gsdoze-mockpad-title { font-weight: 700; color: #b8efce; } .gsdoze-mockpad-hint { flex: 1; color: rgba(255,255,255,0.45); font-size: 10px; } .gsdoze-pad-config-btn { background: rgba(140,220,180,0.10); border: 1px solid rgba(140,220,180,0.30); color: #b8efce; padding: 2px 8px; border-radius: 4px; cursor: pointer; font-size: 10px; } .gsdoze-pad-config-btn:hover { background: rgba(140,220,180,0.20); } .gsdoze-mockpad-body { display: flex; align-items: center; justify-content: space-between; gap: 10px; } /* D-pad: 3x3 cross 配置 (上/左/中央空/右/下) */ .gsdoze-pad-dpad { display: grid; grid-template-columns: repeat(3, 32px); grid-template-rows: repeat(3, 32px); gap: 2px; } .gsdoze-pad-dpad .gsdoze-pad-btn-up { grid-column: 2; grid-row: 1; } .gsdoze-pad-dpad .gsdoze-pad-btn-left { grid-column: 1; grid-row: 2; } .gsdoze-pad-dpad .gsdoze-pad-btn-right { grid-column: 3; grid-row: 2; } .gsdoze-pad-dpad .gsdoze-pad-btn-down { grid-column: 2; grid-row: 3; } /* アクションボタン: 横並び */ .gsdoze-pad-action { display: flex; gap: 6px; } .gsdoze-pad-action .gsdoze-pad-btn { width: 44px; height: 44px; border-radius: 50%; } .gsdoze-pad-btn { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.20); border-radius: 4px; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; user-select: none; -webkit-user-select: none; font-size: 14px; font-weight: 700; padding: 0; transition: background 0.05s, transform 0.05s; } .gsdoze-pad-btn:hover { background: rgba(140,220,180,0.18); border-color: rgba(140,220,180,0.50); } .gsdoze-pad-btn.pressed { background: #4caf72; border-color: #6dd49a; transform: scale(0.92); box-shadow: 0 0 8px rgba(76,175,114,0.6) inset; } .gsdoze-pad-btn-icon { font-size: 14px; line-height: 1; } .gsdoze-pad-btn-key { font-size: 7px; color: rgba(255,255,255,0.45); line-height: 1; margin-top: 2px; font-weight: 400; font-family: monospace; } .gsdoze-pad-action .gsdoze-pad-btn-icon { font-size: 18px; } /* PAD 設定モーダル */ .gsdoze-pad-config-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.65); z-index: 99998; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); } .gsdoze-pad-config-modal { background: #1a1f24; border: 1px solid rgba(140,220,180,0.35); border-radius: 10px; width: 420px; max-width: 92vw; max-height: 80vh; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 12px 40px rgba(0,0,0,0.6); } .gsdoze-pad-config-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: rgba(140,220,180,0.10); border-bottom: 1px solid rgba(140,220,180,0.25); font-size: 12px; font-weight: 700; color: #b8efce; } .gsdoze-pad-config-close { background: transparent; border: none; color: rgba(255,255,255,0.6); font-size: 16px; cursor: pointer; } .gsdoze-pad-config-body { padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; } .gsdoze-pad-config-row { display: flex; align-items: center; gap: 12px; } .gsdoze-pad-config-label { flex: 0 0 90px; font-size: 12px; color: #ddd; } .gsdoze-pad-config-input { flex: 1; padding: 4px 8px; background: rgba(0,0,0,0.40); border: 1px solid rgba(255,255,255,0.20); border-radius: 3px; color: #fff; font-size: 11px; font-family: monospace; } .gsdoze-pad-config-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 14px; border-top: 1px solid rgba(255,255,255,0.10); } .gsdoze-pad-config-save { background: #4caf72; color: #fff; } /* ── デバッグコンソール (操作タブ末尾) ── */ .gsdoze-console-section .gsdoze-panel-section-head { padding: 6px 10px; font-size: 11px; } .gsdoze-console-badge { font-size: 10px; padding: 2px 6px; border-radius: 8px; font-weight: 700; background: rgba(140,220,180,0.15); color: #b8efce; border: 1px solid rgba(140,220,180,0.30); } .gsdoze-console-badge-ok { background: rgba(140,220,180,0.10); color: #8fdbb0; } .gsdoze-console-badge-warn { background: rgba(251,191,36,0.18); color: #fbbf24; border-color: rgba(251,191,36,0.40); } .gsdoze-console-badge-err { background: rgba(239,68,68,0.20); color: #fca5a5; border-color: rgba(239,68,68,0.50); } .gsdoze-console-btn { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.18); color: rgba(255,255,255,0.75); padding: 2px 6px; border-radius: 3px; cursor: pointer; font-size: 10px; } .gsdoze-console-btn:hover { background: rgba(140,220,180,0.15); border-color: rgba(140,220,180,0.40); color: #b8efce; } .gsdoze-console-body { max-height: 180px; overflow-y: auto; padding: 6px 10px; background: rgba(0,0,0,0.30); font-family: 'Consolas','Menlo',monospace; font-size: 10px; color: #cfcfcf; line-height: 1.4; } .gsdoze-console-empty { color: rgba(255,255,255,0.35); font-style: italic; padding: 6px 0; } .gsdoze-console-row { display: flex; align-items: baseline; gap: 6px; padding: 2px 0; border-bottom: 1px dotted rgba(255,255,255,0.04); flex-wrap: wrap; } .gsdoze-console-time { color: rgba(255,255,255,0.40); font-size: 9px; flex: 0 0 80px; } .gsdoze-console-level { color: rgba(255,255,255,0.60); flex: 0 0 40px; font-weight: 700; } .gsdoze-console-msg { color: #ddd; flex: 1 1 auto; word-break: break-all; } .gsdoze-console-data { flex: 1 1 100%; margin: 3px 0 4px 86px; padding: 4px 6px; background: rgba(255,255,255,0.04); border-left: 2px solid rgba(140,220,180,0.40); border-radius: 0 3px 3px 0; font-size: 9px; color: #b8efce; white-space: pre-wrap; max-height: 140px; overflow: auto; } .gsdoze-console-row-warn .gsdoze-console-level { color: #fbbf24; } .gsdoze-console-row-warn .gsdoze-console-msg { color: #fbbf24; } .gsdoze-console-row-error .gsdoze-console-level { color: #fca5a5; } .gsdoze-console-row-error .gsdoze-console-msg { color: #fca5a5; } .gsdoze-console-row-error { background: rgba(239,68,68,0.06); } .gsdoze-console-row-warn { background: rgba(251,191,36,0.05); } /* ── DEV ツール (localhost 限定の preset 切替ドロップダウン) ── */ .gsdoze-dev-tools { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; padding: 6px 10px; background: rgba(59, 130, 246, 0.10); border: 1px solid rgba(59, 130, 246, 0.35); border-radius: 6px; font-size: 11px; } .gsdoze-dev-tools-tag { background: rgba(59, 130, 246, 0.30); color: #93c5fd; font-weight: 700; font-size: 9px; padding: 1px 6px; border-radius: 3px; letter-spacing: 0.4px; } .gsdoze-dev-tools-label { color: #93c5fd; font-weight: 600; } .gsdoze-dev-tools-select { flex: 1; min-width: 0; padding: 3px 6px; background: rgba(0,0,0,0.40); border: 1px solid rgba(59,130,246,0.40); border-radius: 3px; color: #cfdcfa; font-size: 11px; cursor: pointer; } .gsdoze-dev-tools-select:hover { border-color: rgba(59,130,246,0.70); } .gsdoze-dev-tools-hint { flex: 0 0 100%; margin-top: 4px; font-size: 9px; color: rgba(147, 197, 253, 0.55); line-height: 1.4; } /* ── シーンオーバーレイ (Title / GameOver) — プレビュー内に absolute ── */ .gsdoze-scene-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(2px); z-index: 20; padding: 12px; animation: gsdozeSceneFadeIn 0.18s ease-out; } @keyframes gsdozeSceneFadeIn { from { opacity: 0; } to { opacity: 1; } } .gsdoze-scene-title-text { font-size: 24px; font-weight: 900; color: #b8efce; letter-spacing: 1.5px; text-shadow: 0 0 12px rgba(140, 220, 180, 0.5); text-align: center; word-break: break-word; } .gsdoze-scene-gameover-text { color: #fca5a5; text-shadow: 0 0 12px rgba(239, 68, 68, 0.55); } .gsdoze-scene-subtext { font-size: 11px; color: rgba(255,255,255,0.65); text-align: center; max-width: 80%; } .gsdoze-scene-score { font-size: 13px; color: #fff; padding: 4px 12px; background: rgba(255,255,255,0.10); border-radius: 16px; } .gsdoze-scene-score b { color: #fbbf24; font-size: 16px; } .gsdoze-scene-btn { padding: 8px 24px; font-size: 14px; font-weight: 700; border: 2px solid #4caf72; background: linear-gradient(135deg, #4caf72, #2d7a4f); color: #fff; border-radius: 6px; cursor: pointer; letter-spacing: 0.5px; transition: transform 0.1s, box-shadow 0.1s; box-shadow: 0 4px 12px rgba(76, 175, 114, 0.3); } .gsdoze-scene-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(76, 175, 114, 0.5); } .gsdoze-scene-btn:active { transform: translateY(1px); box-shadow: 0 2px 6px rgba(76, 175, 114, 0.3); } .gsdoze-scene-btn-retry { border-color: #fb923c; background: linear-gradient(135deg, #fb923c, #c2410c); box-shadow: 0 4px 12px rgba(251, 146, 60, 0.3); } .gsdoze-scene-btn-retry:hover { box-shadow: 0 6px 16px rgba(251, 146, 60, 0.5); } .gsdoze-scene-btn-title { border-color: rgba(255,255,255,0.30); background: rgba(255,255,255,0.10); font-size: 12px; padding: 6px 18px; } .gsdoze-scene-btn-title:hover { background: rgba(255,255,255,0.18); } /* ── 編集プレビュー (停止中): シーンボタンは操作不可 (ゲームモード = 再生中のみ有効) ── */ .gsdoze-scene-btn:disabled, .gsdoze-scene-btn[aria-disabled="true"] { cursor: default; opacity: 0.45; filter: grayscale(0.5); box-shadow: none !important; transform: none !important; } .gsdoze-scene-btn:disabled:hover, .gsdoze-scene-btn[aria-disabled="true"]:hover { transform: none !important; box-shadow: none !important; } /* 編集モードのオーバーレイ: 「静的プレビュー」と分かるよう枠を点線アクセントに */ .gsdoze-scene-overlay-edit { background: rgba(0, 0, 0, 0.62); box-shadow: inset 0 0 0 2px rgba(184, 239, 206, 0.22); } /* ── プレビュー モードバッジ (右上) ── */ .gsdoze-preview-mode-badge { position: absolute; top: 6px; right: 6px; z-index: 25; font-size: 10px; font-weight: 700; letter-spacing: 0.3px; padding: 3px 9px; border-radius: 12px; pointer-events: none; user-select: none; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,0.35); } .gsdoze-preview-mode-edit { background: rgba(20, 30, 26, 0.9); color: #b8efce; border: 1px solid rgba(184, 239, 206, 0.45); } /* ── モック PAD: 編集モードでは dim + 操作不可 (画面操作はゲームモード限定) ── */ .gsdoze-mockpad.gsdoze-mockpad-inactive { opacity: 0.4; filter: grayscale(0.7); pointer-events: none; position: relative; } .gsdoze-mockpad.gsdoze-mockpad-inactive::after { content: '再生中のみ操作可'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 10px; font-weight: 700; color: rgba(255,255,255,0.85); background: rgba(0,0,0,0.6); padding: 3px 10px; border-radius: 10px; pointer-events: none; white-space: nowrap; } /* シーン設定 UI 内のチェックボックス行 */ .gsdoze-scene-cfg-row { display: flex; align-items: center; gap: 6px; padding: 4px 0; font-size: 11px; } .gsdoze-scene-cfg-row label { color: #ddd; cursor: pointer; } .gsdoze-scene-cfg-row input[type="checkbox"] { accent-color: #4caf72; } /* ── ヘッダー 📐 Nodes ボタン (GSAnim LINK の隣、青系で差別化) ── */ .gsdoze-header-btn-nodes { background: rgba(59, 130, 246, 0.20) !important; border-color: rgba(59, 130, 246, 0.45) !important; color: #93c5fd !important; } .gsdoze-header-btn-nodes:hover { background: rgba(59, 130, 246, 0.32) !important; border-color: rgba(59, 130, 246, 0.70) !important; } /* ── NodesDock (Doze panel の左隣に画面左端まで全幅で開く) ── */ /* TRANSLOT ドック: GSAnim dock と完全に同じ配置 (Doze panel にぴったりくっつく + 上端揃え) */ #gsdoze-nodes-dock { position: fixed; top: calc(22px + var(--toolbar-h) + 2px); /* Doze panel / GSAnim dock と同じ上端 */ bottom: 0; left: 0; right: calc(var(--gs-tab-clearance) + var(--gsdoze-panel-w)); /* Doze panel 直前 (隙間なし) */ z-index: 100; background: var(--editor-bg, #0d0f14); border-right: 2px solid rgba(140, 220, 180, 0.55); box-shadow: 4px 0 18px rgba(0,0,0,0.55); display: none; flex-direction: column; } /* 統合 right-dock 開いてる時は Doze がずれるので TRANSLOT 右端もずれる (GSAnim dock と同様) */ body.has-right-dock-open #gsdoze-nodes-dock { right: calc(var(--gs-tab-clearance) + var(--gsdoze-panel-w) + var(--members-panel-w, 420px)); } .gsdoze-nodes-dock-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: rgba(140,220,180,0.10); border-bottom: 1px solid rgba(140,220,180,0.25); flex-wrap: wrap; } .gsdoze-nodes-dock-title { font-weight: 700; color: #b8efce; font-size: 13px; } .gsdoze-nodes-dock-sub { font-size: 10px; color: rgba(255,255,255,0.45); } .gsdoze-nodes-dock-actions { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; } .gsdoze-nodes-add-btn { font-size: 10px !important; padding: 2px 8px !important; } .gsdoze-nodes-add-btn[data-node-type="title"] { border-color: rgba(76,175,114,0.50) !important; color: #b8efce !important; } .gsdoze-nodes-add-btn[data-node-type="play"] { border-color: rgba(34,211,238,0.50) !important; color: #93dffa !important; } .gsdoze-nodes-add-btn[data-node-type="gameover"] { border-color: rgba(251,146,60,0.50) !important; color: #fed7aa !important; } .gsdoze-nodes-dock-body { flex: 1; display: grid; grid-template-columns: 1fr; /* デフォルト: canvas 全幅 (未選択時) */ min-height: 0; } /* ノード選択時のみ inspector ペインを表示 */ .gsdoze-nodes-dock-body.has-selection { grid-template-columns: 1fr 5px var(--gsdoze-nodes-inspector-w, 240px); } .gsdoze-nodes-dock-body:not(.has-selection) .gsdoze-nodes-inner-divider, .gsdoze-nodes-dock-body:not(.has-selection) .gsdoze-nodes-inspector-pane { display: none; } .gsdoze-nodes-canvas-pane { overflow: hidden; /* ズーム/パンで操作するので scrollbar 不要 */ background: #0a0d12; position: relative; } /* ビューポート (固定領域、内側のキャンバスを transform で動かす) */ .gsdoze-nodes-canvas-viewport { position: absolute; inset: 0; overflow: hidden; background-image: linear-gradient(rgba(140,220,180,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(140,220,180,0.06) 1px, transparent 1px); background-size: 24px 24px; cursor: default; } .gsdoze-nodes-canvas-viewport.gsdoze-nodes-pan-cursor { cursor: grab; } .gsdoze-nodes-canvas-viewport.gsdoze-nodes-panning { cursor: grabbing !important; } .gsdoze-nodes-canvas-viewport .gsdoze-nodes-canvas { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; } .gsdoze-nodes-zoom-indicator { position: absolute; right: 10px; bottom: 10px; padding: 4px 10px; background: rgba(0, 0, 0, 0.65); border: 1px solid rgba(140, 220, 180, 0.30); border-radius: 12px; color: #b8efce; font-size: 11px; font-family: monospace; font-weight: 700; pointer-events: none; z-index: 100; } .gsdoze-nodes-inner-divider { cursor: col-resize; background: rgba(140, 220, 180, 0.12); border-left: 1px solid rgba(140, 220, 180, 0.20); border-right: 1px solid rgba(140, 220, 180, 0.20); position: relative; } .gsdoze-nodes-inner-divider:hover, .gsdoze-nodes-inner-divider.dragging { background: rgba(140, 220, 180, 0.45); } .gsdoze-nodes-inner-divider::after { content: '⋮'; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: rgba(255,255,255,0.30); font-size: 10px; pointer-events: none; letter-spacing: -2px; } /* インスペクタペイン (右側) */ .gsdoze-nodes-inspector-pane { overflow: auto; background: #161b20; border-left: 1px solid rgba(140,220,180,0.15); display: flex; flex-direction: column; } .gsdoze-inspector-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 20px; color: rgba(255,255,255,0.50); font-size: 12px; line-height: 1.6; } .gsdoze-inspector-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: rgba(140,220,180,0.08); border-bottom: 2px solid; font-size: 12px; font-weight: 700; } .gsdoze-inspector-type { letter-spacing: 0.5px; } .gsdoze-inspector-body { padding: 12px; display: flex; flex-direction: column; gap: 6px; font-size: 11px; } .gsdoze-inspector-body .gsdoze-field-row label { flex: 0 0 80px; color: rgba(255,255,255,0.75); font-size: 11px; font-weight: 600; } .gsdoze-inspector-body .gsdoze-field-row input { flex: 1; min-width: 0; padding: 4px 8px; background: rgba(0,0,0,0.30); border: 1px solid rgba(255,255,255,0.20); border-radius: 3px; color: #fff; font-size: 11px; } .gsdoze-inspector-divider { height: 1px; background: rgba(255,255,255,0.10); margin: 6px 0; } .gsdoze-inspector-edges-title { font-size: 10px; color: rgba(255,255,255,0.55); font-weight: 700; letter-spacing: 0.4px; margin-bottom: 6px; } .gsdoze-inspector-edge { display: flex; align-items: center; gap: 6px; padding: 4px 6px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 4px; margin-bottom: 4px; font-size: 10px; } .gsdoze-inspector-edge-arrow { color: rgba(255,255,255,0.50); } .gsdoze-inspector-edge-other { font-weight: 700; } .gsdoze-inspector-edge-label { flex: 1; min-width: 0; color: rgba(255,255,255,0.65); font-family: monospace; font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gsdoze-inspector-edge .gsdoze-node-del { width: 16px; height: 16px; font-size: 9px; } .gsdoze-inspector-edge-empty { font-size: 10px; color: rgba(255,255,255,0.40); font-style: italic; text-align: center; padding: 10px 0; } .gsdoze-nodes-dock-resize-handle { position: absolute; right: -3px; top: 0; bottom: 0; width: 6px; cursor: col-resize; background: transparent; z-index: 10; } .gsdoze-nodes-dock-resize-handle:hover { background: rgba(140,220,180,0.4); } /* ── 旧 popup (互換性として残置、未使用) ── */ .gsdoze-nodes-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.70); z-index: 99997; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(3px); } .gsdoze-nodes-modal { background: #14181c; border: 1px solid rgba(140, 220, 180, 0.30); border-radius: 10px; width: 90vw; max-width: 1100px; height: 80vh; max-height: 720px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 16px 50px rgba(0, 0, 0, 0.7); } .gsdoze-nodes-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: rgba(140, 220, 180, 0.08); border-bottom: 1px solid rgba(140, 220, 180, 0.25); } .gsdoze-nodes-title { font-weight: 700; color: #b8efce; font-size: 13px; } .gsdoze-nodes-sub { color: rgba(255,255,255,0.45); font-weight: 400; font-size: 10px; margin-left: 8px; } .gsdoze-nodes-head-actions { display: flex; gap: 6px; } .gsdoze-nodes-body { flex: 1; overflow: auto; background: #0a0d12; background-image: linear-gradient(rgba(140,220,180,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(140,220,180,0.06) 1px, transparent 1px); background-size: 24px 24px; position: relative; } .gsdoze-nodes-canvas { position: relative; padding: 20px; } .gsdoze-nodes-svg { position: absolute; left: 0; top: 0; pointer-events: none; } .gsdoze-nodes-svg text { pointer-events: none; text-shadow: 0 0 4px #000, 0 0 4px #000; } .gsdoze-nodes-foot { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-top: 1px solid rgba(255,255,255,0.10); background: rgba(0,0,0,0.30); } /* ノード box (本体ノード風: シャドウ + 角丸 + ヘッダーカラー) */ .gsdoze-node { position: absolute; background: linear-gradient(180deg, rgba(30, 40, 48, 0.98), rgba(18, 24, 30, 0.98)); border: 2px solid var(--gsdoze-node-color, #4caf72); border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,0.55), 0 0 0 1px rgba(0,0,0,0.4) inset; transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s; display: flex; flex-direction: column; overflow: visible; } .gsdoze-node-disabled { opacity: 0.45; filter: grayscale(0.6); } .gsdoze-node-current { box-shadow: 0 0 22px var(--gsdoze-node-color, #b8efce), 0 6px 18px rgba(0,0,0,0.6); transform: scale(1.03); } .gsdoze-node-head { padding: 8px 12px; display: flex; align-items: center; justify-content: space-between; color: #fff; font-weight: 700; font-size: 12px; letter-spacing: 0.4px; background: var(--gsdoze-node-color, #4caf72); text-shadow: 0 1px 2px rgba(0,0,0,0.5); border-radius: 6px 6px 0 0; cursor: grab; } .gsdoze-node-head:active { cursor: grabbing; } .gsdoze-node-label { flex: 1; } .gsdoze-node-badge { font-size: 9px; background: rgba(255,255,255,0.30); padding: 2px 8px; border-radius: 10px; letter-spacing: 0.6px; border: 1px solid rgba(255,255,255,0.40); } .gsdoze-node-body { padding: 10px 12px; flex: 1; display: flex; flex-direction: column; justify-content: center; cursor: pointer; } .gsdoze-node-detail { font-size: 11px; color: rgba(255, 255, 255, 0.78); font-family: 'Consolas','Menlo',monospace; word-break: break-all; line-height: 1.4; } .gsdoze-node-off { margin-top: 6px; font-size: 10px; color: rgba(255, 100, 100, 0.75); text-align: center; font-style: italic; } /* 入出力ピン (左中央 = input, 右中央 = output) */ .gsdoze-node-pin { position: absolute; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #14181c; top: 50%; transform: translateY(-50%); z-index: 2; box-shadow: 0 2px 4px rgba(0,0,0,0.5); } .gsdoze-node-pin-in { left: -8px; background: #93c5fd; /* シアン系 input */ } .gsdoze-node-pin-out { right: -8px; background: var(--gsdoze-node-color, #4caf72); } /* SVG エッジ */ .gsdoze-edge-path { filter: drop-shadow(0 0 3px rgba(0,0,0,0.4)); } .gsdoze-edge-label { text-shadow: 0 0 4px #000, 0 0 4px #000, 0 0 4px #000; paint-order: stroke; stroke: #14181c; stroke-width: 3px; stroke-linejoin: round; } /* 動的ノード操作 (削除 / active 選択 / ピン操作) */ .gsdoze-node-head-actions { display: flex; gap: 4px; align-items: center; } .gsdoze-node-del { background: rgba(0,0,0,0.30); border: 1px solid rgba(255,255,255,0.40); color: #fff; width: 20px; height: 20px; border-radius: 50%; font-size: 10px; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; } .gsdoze-node-del:hover { background: rgba(239, 68, 68, 0.60); border-color: #fca5a5; } .gsdoze-node-active { outline: 3px solid #fbbf24; outline-offset: 2px; box-shadow: 0 0 22px rgba(251, 191, 36, 0.55), 0 6px 18px rgba(0,0,0,0.6) !important; } .gsdoze-node-pin { cursor: pointer; } .gsdoze-node-pin-out { cursor: crosshair; } .gsdoze-node-pin-out:hover { transform: translateY(-50%) scale(1.4); box-shadow: 0 0 8px var(--gsdoze-node-color, #4caf72); } .gsdoze-node-pin-in:hover { transform: translateY(-50%) scale(1.4); box-shadow: 0 0 8px #93c5fd; } /* ドラッグ開始ピン (active) */ .gsdoze-node-pin.gsdoze-pin-active { transform: translateY(-50%) scale(1.6); box-shadow: 0 0 14px #fbbf24, 0 0 4px #fff inset; border-color: #fbbf24; } /* ドラッグ中にホバーされた対側ピン (snap target) */ .gsdoze-node-pin.gsdoze-pin-hover-target { transform: translateY(-50%) scale(1.7); box-shadow: 0 0 16px #fff, 0 0 8px #fbbf24; border-color: #fff; background: #fbbf24 !important; } /* ピンドラッグ中はカーソル全体を crosshair に */ body.gsdoze-pin-dragging, body.gsdoze-pin-dragging .gsdoze-node-pin, body.gsdoze-pin-dragging .gsdoze-nodes-canvas-viewport { cursor: crosshair !important; } /* エッジ削除ボタン (SVG 内の ✕ 円) */ .gsdoze-edge-delete:hover { fill: #ef4444 !important; } /* ═══ ストーリーボード型遷移 (絵コンテのコマ列) ═══ */ .gsdoze-sb-scroll { position: absolute; inset: 0; overflow: auto; padding: 30px 24px; display: flex; flex-direction: column; gap: 24px; } .gsdoze-sb-empty { display: flex; align-items: center; justify-content: center; height: 100%; text-align: center; color: rgba(255,255,255,0.45); font-size: 13px; line-height: 1.8; } /* メインフロー: コマ横並び */ .gsdoze-sb-flow { display: flex; align-items: center; gap: 0; min-height: 200px; flex-wrap: wrap; row-gap: 30px; } /* チェーン両端の ■ マーカー (始点/終点)。ドラッグ中はドロップで先頭/末尾へ移動 */ .gsdoze-sb-cap { flex: 0 0 auto; align-self: stretch; display: flex; align-items: center; justify-content: center; min-width: 22px; margin: 0 2px; color: rgba(255,255,255,0.28); font-size: 13px; user-select: none; border-radius: 6px; transition: color 0.12s, transform 0.12s, background 0.12s; } /* 並び替え中は「移動先」と分かるよう少し主張 */ .gsdoze-sb-scroll.sb-reordering .gsdoze-sb-cap { color: rgba(251,191,36,0.55); background: rgba(251,191,36,0.06); } /* ドロップ対象としてカーソルが乗ったら発光 */ .gsdoze-sb-cap.sb-cap-active { color: #fbbf24; background: rgba(251,191,36,0.16); transform: scale(1.5); text-shadow: 0 0 10px #fbbf24, 0 0 18px #fbbf24; } /* コマ (絵コンテの 1 枚) */ .gsdoze-sb-frame { flex: 0 0 auto; width: 200px; background: linear-gradient(180deg, rgba(30,40,48,0.98), rgba(18,24,30,0.98)); border: 2px solid var(--sb-color, #4caf72); border-radius: 10px; overflow: hidden; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,0.5); transition: transform 0.12s, box-shadow 0.12s; } .gsdoze-sb-frame:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,0.6); } /* 並び替え D&D */ /* ドラッグ元: 抜けた場所が分かるよう薄い破線プレースホルダーに */ .gsdoze-sb-frame.sb-dragging { opacity: 0.22; filter: grayscale(0.6); outline: 2px dashed rgba(140,220,180,0.4); outline-offset: -2px; } /* つまんだスロットの半透明フローティング クローン (カーソル追従) */ .gsdoze-sb-ghost { position: fixed !important; left: 0; top: 0; margin: 0 !important; z-index: 100000; opacity: 0.78; pointer-events: none; cursor: grabbing; transform: none; /* 傾けない (まっすぐ) */ box-shadow: 0 14px 36px rgba(0,0,0,0.6), 0 0 0 2px rgba(251,191,36,0.55); transition: none !important; } .gsdoze-sb-frame-head { position: relative; } .gsdoze-sb-frame-head::before { content: '⠿'; margin-right: 4px; opacity: 0.5; font-size: 11px; } /* 挿入ポイント = コマ間の矢印 (▶ を発光させて差し込み位置を示す) */ .gsdoze-sb-arrow { transition: all 0.12s; position: relative; } .gsdoze-sb-arrow-insert { font-size: 8px; color: #fbbf24; font-weight: 700; opacity: 0; transition: opacity 0.12s; white-space: nowrap; } /* 並び替え中は全挿入ポイントをうっすら表示 (どこに差せるか分かる) */ .gsdoze-sb-scroll.sb-reordering .gsdoze-sb-arrow-line { opacity: 0.5; } .gsdoze-sb-scroll.sb-reordering .gsdoze-sb-edge-drop { min-width: 50px; border: 1px dashed rgba(251,191,36,0.35); border-radius: 6px; } /* dragover 中の矢印 = 発光 + 拡大 (ここに差し込まれる、と明示) */ .gsdoze-sb-arrow.sb-arrow-drop .gsdoze-sb-arrow-line { color: #fbbf24; transform: scale(1.8); text-shadow: 0 0 12px #fbbf24, 0 0 20px #fbbf24; opacity: 1 !important; } .gsdoze-sb-arrow.sb-arrow-drop .gsdoze-sb-arrow-insert { opacity: 1; } .gsdoze-sb-arrow.sb-arrow-drop { background: rgba(251,191,36,0.12); border-radius: 8px; } /* 先頭/末尾カードの端に出る挿入位置線 (▶ が無い両端用) */ .gsdoze-sb-frame.sb-drop-before::before, .gsdoze-sb-frame.sb-drop-after::after { content: ''; position: absolute; top: -6px; bottom: -6px; width: 5px; background: #fbbf24; border-radius: 3px; box-shadow: 0 0 12px #fbbf24, 0 0 20px #fbbf24; z-index: 10; animation: sbDropPulse 0.8s ease-in-out infinite; } .gsdoze-sb-frame.sb-drop-before::before { left: -10px; } .gsdoze-sb-frame.sb-drop-after::after { right: -10px; } @keyframes sbDropPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } } /* ── GSDoze カスタム確認モーダル (ブラウザ confirm() 代替) ── */ .gsdoze-confirm-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.62); z-index: 100000; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(3px); animation: gsdozeSceneFadeIn 0.12s ease-out; } .gsdoze-confirm-modal { background: #1a1f24; border: 1px solid rgba(140,220,180,0.30); border-radius: 10px; width: 360px; max-width: 90vw; padding: 20px; display: flex; flex-direction: column; align-items: center; gap: 12px; box-shadow: 0 14px 44px rgba(0,0,0,0.65); text-align: center; } .gsdoze-confirm-icon { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; background: rgba(140,220,180,0.15); color: #b8efce; } .gsdoze-confirm-icon.danger { background: rgba(239,68,68,0.18); color: #fca5a5; } .gsdoze-confirm-msg { font-size: 13px; color: #e5e5e5; line-height: 1.6; } .gsdoze-confirm-skip { display: flex; align-items: center; gap: 6px; font-size: 11px; color: rgba(255,255,255,0.60); cursor: pointer; user-select: none; } .gsdoze-confirm-skip input { accent-color: #4caf72; cursor: pointer; } .gsdoze-confirm-btns { display: flex; gap: 10px; margin-top: 4px; } .gsdoze-confirm-btns button { padding: 7px 20px; border-radius: 6px; font-size: 12px; font-weight: 700; cursor: pointer; border: 1px solid; } .gsdoze-confirm-cancel { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.25); color: #ddd; } .gsdoze-confirm-cancel:hover { background: rgba(255,255,255,0.12); } .gsdoze-confirm-ok { background: #4caf72; border-color: #6dd49a; color: #fff; } .gsdoze-confirm-ok:hover { background: #5bbf83; } .gsdoze-confirm-ok.danger { background: #ef4444; border-color: #f87171; } .gsdoze-confirm-ok.danger:hover { background: #dc2626; } /* ── Doze 起動中は本体グラフ操作系ボタンを無効化 (Doze は本体と独立) ── */ /* 対象: NODES / CONNECTOR(線+色) / SIMULATOR(目+▶) / 付箋 / GSAnim(本体) / TAB / ファイル / Reset */ /* 除外: GSComp / GSDoze / GSGit (ツール切替は有効) / PROGRESS / EN / Help */ body.gs-doze-open #toolbar .toolbar-section-nodes, body.gs-doze-open #toolbar .toolbar-section-connector, body.gs-doze-open #toolbar .toolbar-section-simulator, body.gs-doze-open #toolbar #group-mode-btn, body.gs-doze-open #toolbar #dock-toolbar-btn, body.gs-doze-open #toolbar #sticky-list-btn, body.gs-doze-open #toolbar #animator-open-btn, body.gs-doze-open #toolbar #rightdock-toggle-btn, body.gs-doze-open #toolbar .btn-io-wrap, body.gs-doze-open #toolbar .btn-danger { opacity: 0.30; pointer-events: none; filter: grayscale(0.9); /* transition は付けない: Doze 起動中はツールバーが頻繁に再描画されるため 0.2s のトランジションだと毎フレーム t=0 に戻り opacity/filter が始点に張り付く。 即時適用にして再描画されても確実にグレーアウトを維持する。 */ } /* セクションタイトルも一緒に沈める (視覚的に「無効ゾーン」と分かる) */ body.gs-doze-open #toolbar .toolbar-section-nodes .toolbar-section-title, body.gs-doze-open #toolbar .toolbar-section-connector .toolbar-section-title, body.gs-doze-open #toolbar .toolbar-section-simulator .toolbar-section-title { opacity: 0.6; } .gsdoze-sb-frame.sb-active { outline: 3px solid #fbbf24; outline-offset: 2px; box-shadow: 0 0 22px rgba(251,191,36,0.5); } .gsdoze-sb-frame.sb-current { box-shadow: 0 0 22px var(--sb-color), 0 6px 18px rgba(0,0,0,0.5); } .gsdoze-sb-frame-head { display: flex; align-items: center; gap: 6px; padding: 6px 10px; background: var(--sb-color, #4caf72); color: #fff; font-weight: 700; font-size: 11px; text-shadow: 0 1px 2px rgba(0,0,0,0.5); } .gsdoze-sb-frame-type { letter-spacing: 0.5px; } .gsdoze-sb-frame-name { flex: 1; opacity: 0.85; font-weight: 400; font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gsdoze-sb-now { background: rgba(255,255,255,0.3); border: 1px solid rgba(255,255,255,0.5); border-radius: 8px; padding: 1px 6px; font-size: 9px; } .gsdoze-sb-frame .gsdoze-node-del { width: 18px; height: 18px; font-size: 9px; } /* ミニプレビュー */ .gsdoze-sb-mini { height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; position: relative; } .gsdoze-sb-mini-title { background: radial-gradient(circle, #1a2e1a, #0a140a); } .gsdoze-sb-mini-titletext { font-size: 20px; font-weight: 900; color: #b8efce; text-shadow: 0 0 10px rgba(140,220,180,0.5); } .gsdoze-sb-mini-startbtn { font-size: 10px; font-weight: 700; color: #fff; background: linear-gradient(135deg,#4caf72,#2d7a4f); padding: 4px 14px; border-radius: 4px; } .gsdoze-sb-mini-gameover { background: radial-gradient(circle, #2e1010, #140505); } .gsdoze-sb-mini-gotext { font-size: 16px; font-weight: 900; color: #fca5a5; text-shadow: 0 0 10px rgba(239,68,68,0.5); } .gsdoze-sb-mini-score { font-size: 9px; color: rgba(255,255,255,0.5); font-family: monospace; } .gsdoze-sb-mini-play { } .gsdoze-sb-mini-playlabel { font-size: 13px; font-weight: 700; color: #fff; background: rgba(0,0,0,0.4); padding: 4px 12px; border-radius: 4px; text-shadow: 0 1px 3px #000; } /* コマ間の矢印 */ .gsdoze-sb-arrow { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; padding: 0 6px; min-width: 60px; } .gsdoze-sb-arrow-label { font-size: 10px; color: #b8efce; font-weight: 700; margin-bottom: 2px; text-align: center; max-width: 80px; line-height: 1.3; } .gsdoze-sb-arrow-line { color: #4caf72; font-size: 20px; } /* 戻り / 分岐チップ */ .gsdoze-sb-returns { border-top: 1px dashed rgba(140,220,180,0.25); padding-top: 14px; } .gsdoze-sb-returns-title { font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.55); margin-bottom: 8px; letter-spacing: 0.5px; } .gsdoze-sb-return-chip { display: inline-flex; align-items: center; gap: 8px; background: rgba(251,146,60,0.10); border: 1px solid rgba(251,146,60,0.35); border-radius: 16px; padding: 4px 6px 4px 12px; margin: 0 8px 8px 0; font-size: 11px; } .gsdoze-sb-chip-from, .gsdoze-sb-chip-to { font-weight: 700; color: #fed7aa; } .gsdoze-sb-chip-trigger { color: rgba(255,255,255,0.65); font-family: monospace; font-size: 10px; } .gsdoze-sb-chip-arrow { color: rgba(255,255,255,0.4); } .gsdoze-sb-return-chip .gsdoze-node-del { width: 16px; height: 16px; font-size: 8px; } .gsdoze-sb-hint { font-size: 10px; color: rgba(255,255,255,0.40); margin-top: auto; } /* グループタグ (コマ上部にグループ名) */ .gsdoze-sb-frame.sb-grouped { border-top-width: 5px; border-top-color: var(--sb-group-color, #a855f7); } .gsdoze-sb-group-tag { position: absolute; top: -10px; left: 8px; font-size: 9px; font-weight: 700; color: #fff; padding: 1px 8px; border-radius: 8px; z-index: 3; box-shadow: 0 2px 4px rgba(0,0,0,0.4); } .gsdoze-sb-frame { position: relative; } /* グループ共通遷移チップ */ .gsdoze-sb-group-edge { display: inline-flex; align-items: center; gap: 8px; background: rgba(168, 85, 247, 0.08); border: 1px solid; border-radius: 16px; padding: 4px 6px 4px 12px; margin: 0 8px 8px 0; font-size: 11px; } .gsdoze-sb-ge-group { font-weight: 700; } .gsdoze-sb-ge-trigger { color: rgba(255,255,255,0.65); font-family: monospace; font-size: 10px; } .gsdoze-sb-ge-to { font-weight: 700; color: #ddd; } .gsdoze-sb-group-edge .gsdoze-node-del { width: 16px; height: 16px; font-size: 8px; } /* ── グループ化モード (複数選択) ── */ .gsdoze-nodes-group-btn.active { background: rgba(168,85,247,0.30) !important; border-color: rgba(168,85,247,0.70) !important; color: #d8b4fe !important; } /* 暗転オーバーレイ (コマより後ろ) */ .gsdoze-sb-scroll.sb-group-mode::after { content: ''; position: fixed; inset: 0; background: rgba(0,0,0,0.62); z-index: 40; pointer-events: none; } /* コマはオーバーレイより前面 + 選択可 */ .gsdoze-sb-scroll.sb-group-mode .gsdoze-sb-frame { position: relative; z-index: 50; cursor: pointer; } /* グループモード中はヘッダードラッグ無効化 (選択優先) */ .gsdoze-sb-scroll.sb-group-mode .gsdoze-sb-frame-head { cursor: pointer; } .gsdoze-sb-scroll.sb-group-mode .gsdoze-sb-frame-head::before { content: ''; margin: 0; } /* ホバーで発光 */ .gsdoze-sb-scroll.sb-group-mode .gsdoze-sb-frame:hover { outline: 2px solid #c084fc; box-shadow: 0 0 22px rgba(192,132,252,0.7); transform: translateY(-3px) scale(1.02); } /* 選択済 = 発光継続 + チェック */ .gsdoze-sb-frame.sb-group-selected { outline: 3px solid #a855f7 !important; outline-offset: 2px; box-shadow: 0 0 26px rgba(168,85,247,0.85) !important; z-index: 55 !important; } .gsdoze-sb-frame.sb-group-selected::after { content: '✓'; position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; background: #a855f7; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; z-index: 56; box-shadow: 0 2px 6px rgba(0,0,0,0.5); } /* グループモード アクションバー (最前面、上部固定) */ .gsdoze-sb-groupmode-bar { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; gap: 8px; padding: 10px 14px; margin: -30px -24px 10px; /* sb-scroll の padding を相殺して全幅 */ background: linear-gradient(180deg, rgba(60,30,90,0.96), rgba(40,20,60,0.96)); border-bottom: 2px solid #a855f7; box-shadow: 0 4px 16px rgba(0,0,0,0.5); font-size: 12px; color: #e9d5ff; } .gsdoze-sb-gm-label b { color: #d8b4fe; } .gsdoze-sb-gm-commit { background: #a855f7 !important; border-color: #c084fc !important; color: #fff !important; font-weight: 700; } .gsdoze-sb-gm-commit:hover { background: #9333ea !important; } @keyframes gsLicWarn { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } } .gsdoze-panel-section-head { padding: 8px 12px; background: rgba(140, 220, 180, 0.12); color: #b8efce; font-weight: 700; font-size: 11px; letter-spacing: 0.3px; border-bottom: 1px solid rgba(140, 220, 180, 0.25); } .gsdoze-panel-section-body { padding: 10px 12px; } .gsdoze-field-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 11px; } .gsdoze-field-row label { flex: 0 0 80px; color: rgba(255,255,255,0.65); font-weight: 600; } .gsdoze-field-row input[type="text"], .gsdoze-field-row input[type="number"], .gsdoze-field-row select { flex: 1; padding: 4px 8px; background: rgba(0,0,0,0.3); border: 1px solid rgba(140,220,180,0.30); border-radius: 3px; color: var(--ani-text, #e0e0e0); font-size: 11px; } .gsdoze-edit-anim-btn { width: 100%; padding: 8px 12px; background: rgba(140, 220, 180, 0.18); border: 1px solid rgba(140, 220, 180, 0.50); border-radius: 4px; color: #b8efce; cursor: pointer; font-size: 12px; font-weight: 700; } .gsdoze-edit-anim-btn:hover { background: rgba(140, 220, 180, 0.32); border-color: #8fdbb0; color: #fff; } .gsdoze-actions-row { display: flex; gap: 6px; margin-top: 4px; } .gsdoze-actions-row button { flex: 1; padding: 8px; background: rgba(140, 220, 180, 0.15); border: 1px solid rgba(140, 220, 180, 0.40); border-radius: 4px; color: #8fdbb0; cursor: pointer; font-size: 11px; font-weight: 700; } .gsdoze-actions-row button:hover { background: rgba(140, 220, 180, 0.30); color: #fff; } .gsdoze-actions-row button[disabled] { opacity: 0.45; cursor: not-allowed; } .gsdoze-empty-state { padding: 20px; text-align: center; color: rgba(255,255,255,0.5); font-style: italic; font-size: 11px; } .gsdoze-create-btn { padding: 10px 16px; margin: 8px auto 0; display: block; background: rgba(140,220,180,0.20); border: 1px solid rgba(140,220,180,0.55); border-radius: 4px; color: #b8efce; cursor: pointer; font-size: 12px; font-weight: 700; } .gsdoze-create-btn:hover { background: rgba(140,220,180,0.35); color: #fff; } /* ========= GSDoze ヘッダー直下の注釈 (Event ノード差込) ========= */ .gsdoze-tagline { padding: 6px 12px; font-size: 10px; color: rgba(255,255,255,0.60); background: linear-gradient(90deg, rgba(140,220,180,0.08), rgba(140,220,180,0.02)); border-bottom: 1px dashed rgba(140,220,180,0.25); line-height: 1.5; cursor: help; } .gsdoze-tagline b { color: #b8efce; font-weight: 700; } /* ========= GSDoze ヘッダーのファイル操作ボタン群 ========= */ .gsdoze-header { display: flex; align-items: center; gap: 8px; } .gsdoze-header-actions { flex: 1; display: flex; gap: 4px; margin-left: 6px; } .gsdoze-header-btn { padding: 4px 10px; background: rgba(140, 220, 180, 0.12); border: 1px solid rgba(140, 220, 180, 0.35); border-radius: 4px; color: #b8efce; cursor: pointer; font-size: 10px; font-weight: 700; letter-spacing: 0.3px; white-space: nowrap; display: inline-flex; align-items: center; gap: 2px; } .gsdoze-header-btn:hover { background: rgba(140, 220, 180, 0.28); border-color: #8fdbb0; color: #fff; } /* GSAnim 連携ボタンだけ少し目立たせる (緑→青グラデ) */ .gsdoze-header-btn-anim { background: linear-gradient(135deg, rgba(140,220,180,0.20), rgba(120,180,220,0.18)); border-color: rgba(140,220,180,0.55); } .gsdoze-header-btn-anim:hover { background: linear-gradient(135deg, rgba(140,220,180,0.35), rgba(120,180,220,0.30)); border-color: #8fdbb0; } /* リンクアニメ情報セクション (プレビュー直下、右カラム) */ .gsdoze-linked-anim .gsdoze-anim-link-badge { display: inline-block; margin-left: 6px; padding: 1px 6px; background: rgba(140, 220, 180, 0.30); border: 1px solid rgba(140, 220, 180, 0.60); border-radius: 8px; font-size: 9px; color: #c8f0d8; font-weight: 700; animation: gsdoze-link-pulse 1.6s ease-in-out infinite; } @keyframes gsdoze-link-pulse { 0%, 100% { background: rgba(140,220,180,0.25); } 50% { background: rgba(140,220,180,0.55); } } .gsdoze-linked-anim-row { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; } .gsdoze-linked-anim-stats { display: flex; flex-wrap: wrap; gap: 4px; } .gsdoze-stat-pill { font-size: 10px; padding: 2px 8px; background: rgba(0,0,0,0.30); border: 1px solid rgba(140,220,180,0.25); border-radius: 10px; color: rgba(255,255,255,0.65); } .gsdoze-stat-pill b { color: #b8efce; font-weight: 700; margin-right: 2px; } /* ========= GSDoze キーボード入力バインディング ========= */ .gsdoze-input-binding-row { display: flex; align-items: center; gap: 4px; padding: 4px 6px; background: rgba(0,0,0,0.25); border: 1px solid rgba(140,220,180,0.20); border-radius: 3px; margin-bottom: 4px; font-size: 11px; } .gsdoze-kb-key-input { flex: 0 0 80px; padding: 3px 6px; background: rgba(0,0,0,0.4); border: 1px solid rgba(140,220,180,0.30); border-radius: 3px; color: #fff; font-family: monospace; font-size: 10px; } .gsdoze-kb-param-select, .gsdoze-kb-mode-select { flex: 1; min-width: 0; padding: 3px 4px; background: rgba(0,0,0,0.4); border: 1px solid rgba(140,220,180,0.30); border-radius: 3px; color: #fff; font-size: 10px; } .gsdoze-kb-val-input { flex: 0 0 44px; padding: 3px 4px; background: rgba(0,0,0,0.4); border: 1px solid rgba(140,220,180,0.30); border-radius: 3px; color: #fff; font-family: monospace; font-size: 10px; text-align: center; } /* ========= GSDoze プリセット picker モーダル (新規作成時) ========= */ .gsdoze-preset-picker-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.72); z-index: 10500; display: flex; align-items: center; justify-content: center; padding: 40px; } .gsdoze-preset-picker { background: var(--editor-bg, #1a1a2e); border: 1px solid rgba(140, 220, 180, 0.45); border-radius: 10px; width: 100%; max-width: 800px; max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,0.7); } .gsdoze-preset-picker-header { display: flex; align-items: center; padding: 14px 18px; border-bottom: 1px solid rgba(140, 220, 180, 0.30); } .gsdoze-preset-picker-title { flex: 1; font-size: 16px; font-weight: 700; color: #b8efce; } .gsdoze-preset-picker-close { padding: 4px 10px; background: transparent; border: 1px solid rgba(255,255,255,0.20); border-radius: 4px; color: rgba(255,255,255,0.55); cursor: pointer; font-size: 12px; } .gsdoze-preset-picker-close:hover { background: rgba(255,107,107,0.15); border-color: rgba(255,107,107,0.45); color: #ff8888; } .gsdoze-preset-picker-sub { padding: 8px 18px; color: rgba(255,255,255,0.55); font-size: 11px; } .gsdoze-preset-picker-body { flex: 1; overflow-y: auto; padding: 12px 18px 18px; } .gsdoze-preset-category { margin-bottom: 18px; } .gsdoze-preset-category-head { font-size: 12px; font-weight: 700; color: #8fdbb0; letter-spacing: 0.5px; padding: 6px 0; border-bottom: 1px solid rgba(140, 220, 180, 0.20); margin-bottom: 8px; } .gsdoze-preset-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; } .gsdoze-preset-card { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: rgba(140, 220, 180, 0.08); border: 1px solid rgba(140, 220, 180, 0.25); border-radius: 6px; cursor: pointer; transition: background 0.15s, border-color 0.15s, transform 0.1s; } .gsdoze-preset-card:not(.soon):hover { background: rgba(140, 220, 180, 0.20); border-color: #8fdbb0; transform: translateY(-1px); } .gsdoze-preset-card.soon { opacity: 0.55; cursor: not-allowed; background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.15); } .gsdoze-preset-card-icon { flex: 0 0 36px; height: 36px; font-size: 26px; display: flex; align-items: center; justify-content: center; } .gsdoze-preset-card-body { flex: 1; min-width: 0; } .gsdoze-preset-card-name { font-size: 12px; font-weight: 700; color: #b8efce; } .gsdoze-preset-card.soon .gsdoze-preset-card-name { color: rgba(255,255,255,0.55); } .gsdoze-preset-card-desc { font-size: 10px; color: rgba(255,255,255,0.50); line-height: 1.4; margin-top: 2px; } .gsdoze-preset-card-soon-tag { position: absolute; top: 6px; right: 6px; padding: 1px 6px; background: rgba(255,170,80,0.15); border: 1px solid rgba(255,170,80,0.40); border-radius: 8px; font-size: 8px; color: #ffc880; font-weight: 700; letter-spacing: 0.5px; } /* ========= GSDoze 2 カラム レイアウト (左: タブ+設定、右: 大型プレビュー) ========= */ .gsdoze-2col { /* CSS variable で可変、デフォルトは右 280px (旧挙動) */ display: grid; grid-template-columns: 1fr 5px var(--gsdoze-right-col, 280px); gap: 0; align-items: stretch; } .gsdoze-2col-left { display: flex; flex-direction: column; gap: 8px; min-width: 0; /* 子要素の overflow 防止 */ padding-right: 6px; /* ハンドルとの余白 */ } .gsdoze-2col-right { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding-left: 6px; } /* ── 独立スクロール: タブ側 / プレビュー側 それぞれのカラムで個別にスクロール ── */ /* 本体を flex 縦 + 高さ制約にし、各カラムを overflow-y:auto に。 */ /* ブラウザ既定でカーソル下のスクロール可能要素のみホイールが効く。 */ #gsdoze-panel-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; } #gsdoze-panel-body > *:not(.gsdoze-2col) { flex: 0 0 auto; } #gsdoze-panel-body > .gsdoze-2col { flex: 1 1 auto; min-height: 0; } .gsdoze-2col-left, .gsdoze-2col-right { overflow-y: auto; overflow-x: hidden; min-height: 0; padding-bottom: 12px; scrollbar-width: thin; scrollbar-color: rgba(140,220,180,0.4) transparent; overscroll-behavior: contain; /* スクロール連鎖をカラム内に閉じる */ } .gsdoze-2col-left::-webkit-scrollbar, .gsdoze-2col-right::-webkit-scrollbar { width: 8px; } .gsdoze-2col-left::-webkit-scrollbar-track, .gsdoze-2col-right::-webkit-scrollbar-track { background: transparent; } .gsdoze-2col-left::-webkit-scrollbar-thumb, .gsdoze-2col-right::-webkit-scrollbar-thumb { background: rgba(140,220,180,0.35); border-radius: 4px; } .gsdoze-2col-left::-webkit-scrollbar-thumb:hover, .gsdoze-2col-right::-webkit-scrollbar-thumb:hover { background: rgba(140,220,180,0.55); } /* タブ⇔プレビュー間のリサイズハンドル */ .gsdoze-2col-divider { cursor: col-resize; background: rgba(140, 220, 180, 0.12); border-left: 1px solid rgba(140, 220, 180, 0.20); border-right: 1px solid rgba(140, 220, 180, 0.20); position: relative; transition: background 0.12s; } .gsdoze-2col-divider:hover, .gsdoze-2col-divider.dragging { background: rgba(140, 220, 180, 0.45); } /* ハンドル中央に「⋮」グリップマーク (掴める感) */ .gsdoze-2col-divider::after { content: '⋮'; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: rgba(255,255,255,0.30); font-size: 10px; pointer-events: none; letter-spacing: -2px; } /* ========= GSDoze ピン留めプレビュー (右カラム、大型) ========= */ .gsdoze-pinned-preview { background: rgba(20, 30, 35, 0.55); border: 1px solid rgba(140, 220, 180, 0.30); border-radius: 6px; padding: 10px; display: flex; flex-direction: column; gap: 10px; position: sticky; top: 0; } /* プレビュー枠: widget 実寸比率を保ったプレビュー本体を中央寄せ + 背景マーカー */ .gsdoze-preview-frame { width: 100%; min-height: 280px; display: flex; align-items: center; justify-content: center; background: linear-gradient(45deg, rgba(255,255,255,0.03) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.03) 75%), linear-gradient(45deg, rgba(255,255,255,0.03) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.03) 75%); background-size: 12px 12px; background-position: 0 0, 6px 6px; border-radius: 4px; border: 1px dashed rgba(140,220,180,0.20); } /* ══ 画面 (デバイス) ＞ ゲーム枠 (プレイ画面) ＞ 余白(UI) の2層プレビュー ══ */ .gsdoze-screen { position: relative; background: #0b0f12; border-radius: 16px; border: 2px solid rgba(255,255,255,0.16); box-shadow: 0 8px 24px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.04); overflow: hidden; } .gsdoze-screen-nomargin { background: transparent; border: 1px dashed rgba(140,220,180,0.20); box-shadow: none; } .gsdoze-ui-layer { position: absolute; inset: 0; z-index: 1; pointer-events: none; } /* widget-preview を screen 内に絶対配置 (既存 position:relative を上書き) */ .gsdoze-screen > .gsdoze-widget-preview { position: absolute; z-index: 2; } /* ── UI 部品 (余白に配置) ── */ .gsdoze-ui-el { position: absolute; display: flex; align-items: center; pointer-events: auto; cursor: grab; box-sizing: border-box; border: 1px dashed transparent; border-radius: 4px; min-width: 8px; min-height: 6px; } /* hover / selected は background-color のみ変更 (shorthand だと差し替え画像 background-image を消すため) */ .gsdoze-ui-el:hover { border-color: rgba(140,220,180,0.45); background-color: rgba(140,220,180,0.06); } .gsdoze-ui-el-selected { border: 1px solid #4caf72 !important; box-shadow: 0 0 0 2px rgba(76,175,114,0.35); z-index: 5; } .gsdoze-widget-preview.simulating ~ .gsdoze-ui-layer .gsdoze-ui-el, .gsdoze-pv-gamemode ~ .gsdoze-ui-layer .gsdoze-ui-el { cursor: default; } .gsdoze-ui-text { display: flex; align-items: center; width: 100%; height: 100%; font-weight: 700; line-height: 1; white-space: nowrap; overflow: hidden; text-shadow: 0 1px 2px rgba(0,0,0,0.65); } .gsdoze-ui-btn { width: 100%; height: 100%; border: 1.5px solid var(--ui-c, #4caf72); background: var(--ui-c, #4caf72); color: #fff; font-weight: 700; font-size: 12px; border-radius: 5px; cursor: pointer; padding: 0 4px; white-space: nowrap; overflow: hidden; box-shadow: 0 2px 6px rgba(0,0,0,0.35); } .gsdoze-ui-btn:disabled { cursor: default; opacity: 0.5; box-shadow: none; } .gsdoze-ui-gauge { width: 100%; height: 100%; background: rgba(0,0,0,0.45); border: 1px solid rgba(255,255,255,0.25); border-radius: 999px; overflow: hidden; } .gsdoze-ui-gauge-fill { height: 100%; transition: width 0.15s; border-radius: 999px; min-width: 0; } /* ── 設定タブ: 画面/枠/UI 部品 セクション ── */ .gsdoze-subhead { font-size: 11px; font-weight: 700; color: #8fd3ad; margin: 9px 0 4px; letter-spacing: 0.5px; } .gsdoze-mini-btn { font-size: 11px; padding: 3px 8px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); color: #cfe9dc; border-radius: 4px; cursor: pointer; white-space: nowrap; } .gsdoze-mini-btn:hover:not(:disabled) { background: rgba(140,220,180,0.18); } .gsdoze-mini-btn:disabled { opacity: 0.4; cursor: default; } .gsdoze-align-grid { display: grid; grid-template-columns: repeat(3, 24px); grid-template-rows: repeat(3, 24px); gap: 3px; } .gsdoze-align-cell { width: 24px; height: 24px; font-size: 12px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15); color: rgba(255,255,255,0.6); border-radius: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; } .gsdoze-align-cell:hover { background: rgba(140,220,180,0.15); } .gsdoze-align-cell.active { background: #4caf72; color: #fff; border-color: #4caf72; } .gsdoze-axis-tag { font-size: 10px; font-weight: 700; color: #8fd3ad; flex: 0 0 auto; } .gsdoze-ui-add-row { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; } .gsdoze-ui-add-btn { font-size: 11px; padding: 4px 8px; background: rgba(76,175,114,0.18); border: 1px solid rgba(76,175,114,0.4); color: #b8efce; border-radius: 4px; cursor: pointer; } .gsdoze-ui-add-btn:hover { background: rgba(76,175,114,0.3); } .gsdoze-ui-list { display: flex; flex-direction: column; gap: 2px; margin-bottom: 4px; } .gsdoze-ui-list-row { display: flex; align-items: center; gap: 6px; padding: 4px 6px; background: rgba(255,255,255,0.04); border: 1px solid transparent; border-radius: 4px; cursor: pointer; font-size: 11px; } .gsdoze-ui-list-row:hover { background: rgba(255,255,255,0.08); } .gsdoze-ui-list-row.active { border-color: #4caf72; background: rgba(76,175,114,0.12); } .gsdoze-ui-list-ic { width: 16px; text-align: center; color: #8fd3ad; font-weight: 700; } .gsdoze-ui-list-name { font-weight: 700; color: #cfe9dc; } .gsdoze-ui-list-desc { flex: 1; color: rgba(255,255,255,0.5); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gsdoze-ui-inspector { margin-top: 6px; padding: 8px; background: rgba(0,0,0,0.25); border: 1px solid rgba(140,220,180,0.2); border-radius: 6px; } .gsdoze-ui-inspector-head { font-size: 11px; font-weight: 700; color: #8fd3ad; margin-bottom: 6px; } .gsdoze-mini-btn.active { background: #4caf72; color: #fff; border-color: #4caf72; } .gsdoze-inline-check { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: #cfe9dc; white-space: nowrap; cursor: pointer; } .gsdoze-ui-img-thumb { display: inline-block; width: 26px; height: 26px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.25); background-size: cover; background-position: center; flex: 0 0 auto; } .gsdoze-ui-imgph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 9px; color: rgba(255,255,255,0.4); border: 1px dashed rgba(255,255,255,0.25); border-radius: 4px; } .gsdoze-ui-el-image { background-color: rgba(255,255,255,0.02); } .gsdoze-pinned-state { display: flex; flex-direction: column; gap: 2px; align-items: center; padding: 4px 0; } .gsdoze-pinned-info-row { display: flex; flex-wrap: wrap; gap: 4px 10px; justify-content: center; padding: 4px 0; border-top: 1px solid rgba(255,255,255,0.08); border-bottom: 1px solid rgba(255,255,255,0.08); } .gsdoze-pinned-info { font-size: 10px; color: rgba(255,255,255,0.55); white-space: nowrap; } .gsdoze-pinned-controls { margin-top: 0 !important; } /* ========= GSDoze パネル タブ式 UI ========= */ .gsdoze-tabs { display: flex; border-bottom: 1px solid rgba(140,220,180,0.30); margin-bottom: 10px; flex-shrink: 0; } .gsdoze-tab { flex: 1; padding: 10px 8px; background: transparent; border: 0; color: rgba(255,255,255,0.55); cursor: pointer; font-size: 12px; font-weight: 700; letter-spacing: 0.3px; position: relative; transition: background 0.15s, color 0.15s; } .gsdoze-tab:hover { background: rgba(140,220,180,0.08); color: #d8efe0; } .gsdoze-tab.active { color: #b8efce; background: rgba(140,220,180,0.12); } .gsdoze-tab.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: #8fdbb0; } .gsdoze-tab-content { display: flex; flex-direction: column; gap: 10px; } /* ========= アセット タブ: レイヤー一覧 ========= */ .gsdoze-layer-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; } .gsdoze-layer-row { display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: rgba(0,0,0,0.30); border: 1px solid rgba(140,220,180,0.20); border-radius: 4px; } .gsdoze-layer-thumb { flex: 0 0 32px; height: 32px; object-fit: cover; border-radius: 3px; background: #000; border: 1px solid rgba(255,255,255,0.1); } .gsdoze-layer-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .gsdoze-layer-name { font-size: 11px; font-weight: 700; color: #b8efce; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gsdoze-layer-meta { font-size: 9px; color: rgba(255,255,255,0.45); font-family: monospace; } .gsdoze-layer-opacity { flex: 0 0 60px; height: 16px; cursor: pointer; } .gsdoze-layer-btn { flex: 0 0 22px; height: 22px; padding: 0; background: rgba(140,220,180,0.10); border: 1px solid rgba(140,220,180,0.30); border-radius: 3px; color: #8fdbb0; cursor: pointer; font-size: 11px; line-height: 1; } .gsdoze-layer-btn:hover { background: rgba(140,220,180,0.25); color: #fff; } .gsdoze-layer-btn-del { background: rgba(255,107,107,0.10); border-color: rgba(255,107,107,0.30); color: #ff9a9a; } .gsdoze-layer-btn-del:hover { background: rgba(255,107,107,0.30); color: #fff; } .gsdoze-layer-add-row { display: flex; gap: 6px; } /* ========= アセット タブ: State 毎オーバーライド ========= */ .gsdoze-state-override-list { display: flex; flex-direction: column; gap: 4px; } .gsdoze-state-override-row { display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: rgba(0,0,0,0.25); border-radius: 3px; } .gsdoze-state-override-name { flex: 1; font-size: 11px; font-weight: 700; color: #b8efce; } .gsdoze-state-override-emoji { flex: 0 0 50px; text-align: center; font-size: 16px; padding: 4px; background: rgba(0,0,0,0.4); border: 1px solid rgba(140,220,180,0.30); border-radius: 3px; color: #fff; } .gsdoze-state-override-imgbtn { flex: 0 0 36px; height: 28px; display: inline-flex; align-items: center; justify-content: center; background: rgba(140,220,180,0.12); border: 1px solid rgba(140,220,180,0.40); border-radius: 3px; color: #8fdbb0; cursor: pointer; font-size: 14px; } .gsdoze-state-override-imgbtn:hover { background: rgba(140,220,180,0.30); color: #fff; } .gsdoze-state-override-img-thumb { flex: 0 0 28px; height: 28px; object-fit: cover; border-radius: 3px; border: 1px solid rgba(140,220,180,0.40); } /* ========= プレビュー: 背景レイヤー描画 ========= */ .gsdoze-widget-preview { position: relative; overflow: hidden; } .gsdoze-pv-layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; } .gsdoze-pet-content { position: relative; z-index: 10; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-shadow: 0 1px 3px rgba(0,0,0,0.7); } .gsdoze-pet-sprite { max-width: 70%; max-height: 70%; object-fit: contain; pointer-events: none; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); } /* Transition イベントログ */ .gsdoze-event-log-body { max-height: 140px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; font-family: monospace; font-size: 10px; } .gsdoze-event-row { display: flex; gap: 8px; padding: 4px 8px; background: rgba(0,0,0,0.28); border-radius: 3px; color: #d8efe0; border-left: 2px solid rgba(140,220,180,0.30); } .gsdoze-event-row-latest { background: rgba(140,220,180,0.22); color: #fff; border-left-color: #8fdbb0; font-weight: 700; } .gsdoze-event-time { flex: 0 0 44px; color: #8fdbb0; font-weight: 700; } .gsdoze-event-trans { flex: 0 0 110px; color: #b8efce; white-space: nowrap; } .gsdoze-event-cond { flex: 1; color: rgba(255,255,255,0.55); font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gsdoze-event-log-empty { padding: 14px; text-align: center; font-style: italic; color: rgba(255,255,255,0.4); font-size: 10px; line-height: 1.5; } /* preview セクションの body は flex でプレビュー本体を中央に */ .gsdoze-preview-body { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; } /* ========= ウィジェット プレビュー本体 (デスクトップ枠なし、widget 単体) ========= */ .gsdoze-widget-preview { background: rgba(20, 35, 30, 0.78); border: 1.5px solid rgba(140, 220, 180, 0.60); border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0,0,0,0.4), 0 0 18px rgba(140,220,180,0.15); backdrop-filter: blur(2px); transition: all 0.2s; } .gsdoze-pet-emoji { font-size: clamp(32px, 25%, 64px); line-height: 1; } .gsdoze-pet-state { font-size: 11px; font-weight: 700; color: #b8efce; letter-spacing: 0.4px; margin-top: 4px; white-space: nowrap; } .gsdoze-widget-preview-meta { font-size: 10px; color: rgba(255,255,255,0.55); font-family: monospace; text-align: center; } /* 再生中: プレビューが軽くパルス */ .gsdoze-widget-preview.simulating { animation: gsdoze-preview-pulse 1.6s ease-in-out infinite; border-color: rgba(140, 220, 180, 0.9); } @keyframes gsdoze-preview-pulse { 0%, 100% { box-shadow: 0 4px 14px rgba(0,0,0,0.4), 0 0 18px rgba(140,220,180,0.15); } 50% { box-shadow: 0 4px 14px rgba(0,0,0,0.4), 0 0 30px rgba(140,220,180,0.50); } } /* シミュレーション制御 (▶ 停止 / 速度 / 🔄 リセット) */ .gsdoze-sim-controls { display: flex; gap: 4px; align-items: stretch; width: 100%; margin-top: 4px; } .gsdoze-sim-controls button, .gsdoze-sim-controls select { padding: 6px 8px; background: rgba(140, 220, 180, 0.15); border: 1px solid rgba(140, 220, 180, 0.40); border-radius: 4px; color: #8fdbb0; cursor: pointer; font-size: 11px; font-weight: 700; } .gsdoze-sim-controls button { flex: 1; white-space: nowrap; } .gsdoze-sim-controls select { flex: 0 0 50px; background: rgba(0,0,0,0.3); text-align: center; } .gsdoze-sim-controls button:hover, .gsdoze-sim-controls select:hover { background: rgba(140, 220, 180, 0.30); border-color: #8fdbb0; color: #fff; } #gsdoze-sim-play-btn.playing { background: rgba(255, 180, 80, 0.20); border-color: rgba(255, 180, 80, 0.55); color: #ffd089; } #gsdoze-sim-play-btn.playing:hover { background: rgba(255, 180, 80, 0.35); color: #fff; } .gsdoze-sim-elapsed-row { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 4px; } /* GSAnim の補足テキスト（ロゴ脇に薄く） */ .git-bar-subtle { font-size: 10px; font-weight: 400; color: var(--ani-text-mute, #a8a8a8); letter-spacing: 0.04em; } /* ── GSGit ボタン (ツールバー) ─────────────────────────────────────── */ .btn.btn-git { background: linear-gradient(180deg, #f97316 0%, #ea580c 100%); color: #fff; border: 1px solid #c2410c; font-weight: 700; letter-spacing: .02em; display: inline-flex; align-items: center; position: relative; } .btn.btn-git:hover { filter: brightness(1.1); } .btn.btn-git:active { filter: brightness(0.95); } /* GSGit ボタン内のロゴ */ .btn-git-logo { height: 16px; width: auto; margin-right: 6px; vertical-align: middle; display: inline-block; object-fit: contain; flex-shrink: 0; /* ボタンの白背景に合わせて白くする（SVG の fill="#d8d8d8" を上書き） */ filter: brightness(0) invert(1); opacity: 0.95; } .btn-git-label { display: inline-block; vertical-align: middle; } /* GSGit タイトル: ロゴの隣の "GSGit" テキスト */ .git-bar-title-text { display: inline-block; font-size: 16px; font-weight: 700; color: #fff; letter-spacing: 0.04em; margin-left: 4px; margin-right: 2px; vertical-align: middle; } /* GSGit ボタン: 未読バッジ */ .gsgit-btn-badge { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; background: #f85149; color: #fff; font-size: 10px; font-weight: 800; border-radius: 9px; border: 2px solid #252525; display: inline-flex; align-items: center; justify-content: center; line-height: 1; } /* GSGit ボタン: 明滅アニメーション（未読通知が残ってる時） */ @keyframes gsgit-blink { 0%, 100% { box-shadow: 0 0 0 0 rgba(248, 81, 73, 0.7), 0 0 0 0 rgba(248, 81, 73, 0); } 50% { box-shadow: 0 0 0 6px rgba(248, 81, 73, 0), 0 0 14px 2px rgba(248, 81, 73, 0.6); } } .btn.btn-git.gsgit-blinking { animation: gsgit-blink 1.4s ease-in-out infinite; } .btn.btn-git.gsgit-blinking .gsgit-btn-badge { animation: gsgit-badge-pulse 1.4s ease-in-out infinite; } @keyframes gsgit-badge-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } } /* GSGit 通知ポップアップ吹き出し */ .gsgit-toast-popup { position: absolute; top: calc(100% + 14px); right: 0; width: 320px; background: #2d2d2d; border: 1px solid #f97316; border-radius: 8px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55), 0 0 16px rgba(247, 115, 22, 0.35); z-index: 9000; animation: gsgit-toast-in 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28); } @keyframes gsgit-toast-in { from { opacity: 0; transform: translateY(-8px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } .gsgit-toast-arrow { position: absolute; top: -8px; right: 16px; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid #f97316; } .gsgit-toast-arrow::after { content: ''; position: absolute; top: 1px; left: -7px; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid #2d2d2d; } .gsgit-toast-header { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid #4a4a4a; background: #353535; border-radius: 8px 8px 0 0; } .gsgit-toast-icon { font-size: 18px; flex-shrink: 0; } .gsgit-toast-title { flex: 1; font-size: 12px; font-weight: 800; color: #fdba74; letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gsgit-toast-close { font-size: 13px; background: transparent; border: none; color: #a8a8a8; cursor: pointer; padding: 2px 6px; border-radius: 4px; } .gsgit-toast-close:hover { background: #4a4a4a; color: #fff; } .gsgit-toast-body { padding: 12px 14px; font-size: 12px; color: #e0e0e0; line-height: 1.6; max-height: 100px; overflow-y: auto; } .gsgit-toast-body strong { color: #fdba74; } .gsgit-toast-body code { background: #404040; padding: 1px 5px; border-radius: 3px; font-family: monospace; font-size: 11px; color: #58a6ff; } .gsgit-toast-actions { padding: 8px 12px; border-top: 1px solid #4a4a4a; display: flex; justify-content: flex-end; } .gsgit-toast-action-btn { padding: 5px 12px; background: #f97316; border: 1px solid #ea580c; border-radius: 6px; color: #fff; font-size: 11px; font-weight: 700; cursor: pointer; } .gsgit-toast-action-btn:hover { background: #ea580c; } /* 🔔 通知ボタン（プロジェクトバー） */ .git-card-btn-notifications { background: #404040; border: 1px solid #f0883e; color: #fed7aa; font-weight: 700; padding: 6px 14px; font-size: 12px; border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; } .git-card-btn-notifications:hover { background: rgba(247, 147, 22, 0.18); border-color: #fdba74; } .git-card-btn-notifications .git-card-btn-count { background: #f85149; color: #fff; border-color: #f85149; } .git-card-btn-notifications.has-unread { animation: gsgit-blink 1.4s ease-in-out infinite; } /* 通知パネル：ヘッダー */ .git-notifications-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; background: #3a3a3a; border-bottom: 1px solid #4a4a4a; } .git-notifications-header-left { display: flex; align-items: center; gap: 12px; } .git-notifications-header-right { display: flex; align-items: center; gap: 8px; } .git-notifications-header-title { font-size: 14px; font-weight: 800; color: #f0f0f0; } .git-notifications-header-stats { font-size: 11px; color: #a8a8a8; } .git-notifications-filter-label { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: #a8a8a8; cursor: pointer; } .git-notifications-filter-label input { accent-color: #58a6ff; } .git-tiny-btn-danger { color: #ff7b72 !important; border-color: #ff7b72 !important; } .git-tiny-btn-danger:hover { background: rgba(255, 123, 114, 0.15) !important; } .git-notifications-settings-row { display: flex; align-items: center; gap: 16px; padding: 8px 16px; background: #353535; border-bottom: 1px solid #4a4a4a; font-size: 11px; color: #a8a8a8; } .git-notifications-volume-wrap { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; } .git-notifications-volume-wrap input[type="range"] { width: 100px; accent-color: #58a6ff; } /* 通知リスト */ .git-notifications-list { max-height: 540px; overflow-y: auto; } .git-notification-row { display: grid; grid-template-columns: 32px 1fr 130px 32px; gap: 12px; align-items: flex-start; padding: 12px 16px; border-bottom: 1px solid #4a4a4a; cursor: pointer; transition: background 0.1s; } .git-notification-row:last-child { border-bottom: none; } .git-notification-row:hover { background: rgba(88, 166, 255, 0.06); } .git-notification-row.unread { background: rgba(247, 147, 22, 0.04); border-left: 3px solid #f97316; padding-left: 13px; } .git-notification-row.unread:hover { background: rgba(247, 147, 22, 0.1); } .git-notification-icon { font-size: 20px; line-height: 1; padding-top: 2px; } .git-notification-info { min-width: 0; } .git-notification-title { font-size: 13px; color: #e0e0e0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .git-notification-row.unread .git-notification-title { color: #f0f0f0; font-weight: 800; } .git-notification-body { font-size: 11px; color: #a8a8a8; margin-top: 3px; line-height: 1.5; } .git-notification-repo { display: inline-block; font-family: monospace; font-size: 10px; background: #2d2d2d; padding: 1px 6px; border-radius: 3px; color: #58a6ff; border: 1px solid #4a4a4a; margin-right: 6px; } .git-notification-time { font-size: 11px; color: #a8a8a8; text-align: right; white-space: nowrap; padding-top: 2px; } .git-notification-delete { background: transparent; border: 1px solid transparent; color: #5a5a5a; padding: 4px 6px; border-radius: 3px; cursor: pointer; font-size: 11px; align-self: start; } .git-notification-delete:hover { background: rgba(255, 123, 114, 0.15); color: #ff7b72; border-color: #ff7b72; } .git-notifications-empty { padding: 60px 20px; text-align: center; color: #a8a8a8; font-size: 12px; line-height: 1.8; } .git-notifications-empty-icon { font-size: 48px; opacity: 0.4; margin-bottom: 10px; } .btn.btn-animator { display: inline-flex; align-items: center; position: relative; /* GSGit ボタンと同じ構造 (img + label) */ } /* GSAnim ボタン内のロゴ (GSGit のロゴと同サイズ仕様) グラデ背景に映える白シルエットへ変換 */ .btn-animator-logo { height: 16px; width: auto; margin-right: 6px; vertical-align: middle; display: inline-block; object-fit: contain; flex-shrink: 0; filter: brightness(0) invert(1); opacity: 0.95; } .btn-animator-label { display: inline-block; vertical-align: middle; } /* ── Members パネル（右側ドック式、Editor と完全同型） ────────────────── */ :root { --members-panel-w: 420px; } /* ← 名前が省略されない十分な幅に拡大 */ #members-panel { position: fixed; top: calc(22px + var(--toolbar-h) + 2px); /* タイトルバー + ツールバー + 各ボーダー */ bottom: 0; right: 0; width: var(--members-panel-w); min-width: 360px; background: var(--editor-bg, #1a1a2e); border-left: 1px solid var(--border); padding: 20px; /* Editor と同じ */ display: flex; flex-direction: column; gap: 14px; /* Editor と同じ */ z-index: 102; /* Editor (101) より少し前。Editor が開けば共存可 */ overflow-y: auto; transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), right 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: -6px 0 24px rgba(0, 0, 0, 0.45); pointer-events: none; color: var(--text, #ddd); font-size: 12px; } #members-panel.members-panel-open { transform: translateX(0); pointer-events: auto; } /* Editor も同時に開いていれば Members パネルを左へずらす */ body:has(#side-editor.editor-open) #members-panel.members-panel-open { right: var(--editor-w); } .members-panel-section { display: flex; flex-direction: column; gap: 6px; } .members-panel-section-head { display: flex; align-items: center; justify-content: space-between; font-size: 10px; font-weight: 700; color: #888; text-transform: uppercase; letter-spacing: 0.08em; padding-bottom: 2px; } .members-panel-add-btn { font-size: 10px; padding: 3px 8px; background: rgba(192, 132, 252, 0.18); border: 1px solid rgba(192, 132, 252, 0.5); border-radius: 4px; color: #e9d8fd; cursor: pointer; letter-spacing: 0.03em; text-transform: none; } .members-panel-add-btn:hover { background: rgba(192, 132, 252, 0.35); } /* メンバー行 */ .members-panel-row { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 6px; background: #232327; border: 1px solid #2e2e33; cursor: pointer; transition: background 0.12s, border-color 0.12s; } .members-panel-row:hover { background: #2a2a30; border-color: #3a3a40; } .members-panel-row.members-row-active { border-color: #c084fc; background: rgba(192, 132, 252, 0.12); } .members-panel-row-color { flex: 0 0 16px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #1a1a1e; box-shadow: 0 0 4px rgba(0,0,0,0.4); } .members-panel-row-info { flex: 1; min-width: 0; } .members-panel-row-name { font-size: 12px; color: #fff; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .members-panel-row-role { font-size: 10px; color: #888; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .members-panel-row-count { font-size: 9px; color: #aaa; background: #1a1a1e; padding: 2px 6px; border-radius: 8px; min-width: 16px; text-align: center; } .members-panel-row-actions { display: flex; gap: 2px; flex-shrink: 0; } .members-panel-assign-btn { font-size: 10px; padding: 3px 8px; background: rgba(247, 147, 22, 0.2); border: 1px solid rgba(247, 147, 22, 0.6); border-radius: 4px; color: #fed7aa; cursor: pointer; font-weight: 700; letter-spacing: 0.05em; min-width: 36px; text-align: center; } .members-panel-assign-btn:hover { background: rgba(247, 147, 22, 0.4); } .members-panel-assign-btn.members-assign-btn-active { background: #f97316; color: #fff; border-color: #f97316; box-shadow: 0 0 6px rgba(247, 147, 22, 0.6); } .members-panel-icon-btn { font-size: 10px; padding: 3px 6px; background: transparent; border: 1px solid transparent; color: #888; cursor: pointer; border-radius: 3px; letter-spacing: 0.02em; } .members-panel-icon-btn:hover { background: #2a2a30; color: #fff; border-color: #3a3a40; } /* ブラウズボタン（目玉アイコン。view モード + パネル閉じる動作） */ .members-panel-browse-btn { font-size: 13px; padding: 3px 8px; background: rgba(192, 132, 252, 0.18); border: 1px solid rgba(192, 132, 252, 0.5); border-radius: 4px; color: #e9d8fd; cursor: pointer; min-width: 30px; text-align: center; line-height: 1; transition: background 0.15s, border-color 0.15s, box-shadow 0.2s; } .members-panel-browse-btn:hover { background: rgba(192, 132, 252, 0.35); border-color: #c084fc; } .members-panel-browse-btn.members-browse-btn-active { background: #c084fc; border-color: #c084fc; box-shadow: 0 0 8px rgba(192, 132, 252, 0.6); filter: brightness(1.1); } .members-panel-empty { padding: 16px 8px; font-size: 11px; color: #777; text-align: center; line-height: 1.6; background: #1f1f23; border-radius: 4px; border: 1px dashed #3a3a40; } .members-panel-help { display: flex; flex-direction: column; gap: 6px; padding: 4px 0; } .members-panel-help-row { display: flex; gap: 8px; font-size: 11px; color: #aaa; line-height: 1.5; } .members-panel-help-kbd { flex: 0 0 56px; text-align: center; background: #1a1a1e; border: 1px solid #3a3a40; border-radius: 3px; padding: 2px 4px; font-size: 10px; color: #c084fc; height: fit-content; font-weight: 600; letter-spacing: 0.02em; } /* ── Members パネル開閉タブ（画面右上、ヘルプボタンの下） ────────────── */ #members-panel-tab { position: fixed; top: 100px; /* ツールバーと適度に間隔を空ける */ right: 0; width: 36px; min-height: 100px; padding: 14px 6px; background: var(--editor-bg, #1a1a2e); border: 1px solid rgba(247, 147, 22, 0.45); border-right: none; border-radius: 8px 0 0 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #fdba74; z-index: 103; box-shadow: -4px 0 14px rgba(0, 0, 0, 0.4); transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.15s, color 0.15s, border-color 0.15s; } #members-panel-tab:hover { background: rgba(247, 147, 22, 0.22); color: #fed7aa; border-color: #f97316; } .members-panel-tab-label { writing-mode: vertical-rl; text-orientation: mixed; font-size: 11px; font-weight: 700; letter-spacing: 3px; font-family: var(--font-ui); user-select: none; } /* パネルが開いている時：タブもパネル左端へスライド + 配色強調 */ #members-panel.members-panel-open ~ #members-panel-tab { right: var(--members-panel-w, 320px); background: rgba(247, 147, 22, 0.32); border-color: #f97316; color: #ffffff; } body:has(#side-editor.editor-open) #members-panel.members-panel-open ~ #members-panel-tab { right: calc(var(--editor-w) + var(--members-panel-w, 320px)); } /* ── 常時発光：割り当て済みノードは通常時も自分の担当色で光る ───────── */ .node.members-has-assignment { box-shadow: var(--member-glow-shadow, 0 0 8px 1px #c084fc); transition: box-shadow 0.25s; } /* Editor 開閉等で box-shadow が上書きされても残るように、!important で堅牢化 */ .node.members-has-assignment.selected { box-shadow: var(--member-glow-shadow, 0 0 8px 1px #c084fc), 0 0 0 2px #fff inset; } /* ── 割り当てモード：キャンバスを暗く + ノードホバー発光 ─────────────── */ body.members-assign-mode-active #canvas, body.members-assign-mode-active #canvas-wrap { position: relative; } body.members-assign-mode-active #canvas::before, body.members-assign-mode-active #canvas-wrap::before { content: ''; position: fixed; top: 56px; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.55); pointer-events: none; z-index: 8; } body.members-assign-mode-active .node { filter: brightness(0.5) saturate(0.7); transition: filter 0.15s, box-shadow 0.15s, transform 0.15s; cursor: pointer !important; } body.members-assign-mode-active .node:hover { filter: brightness(1.2) saturate(1.2); box-shadow: 0 0 24px 6px rgba(247, 147, 22, 0.7), 0 0 0 2px #f97316; transform: scale(1.02); } /* 既にこのメンバーが割り当てられているノードはオレンジ枠で明示 */ body.members-assign-mode-active .node.members-assign-already-assigned { filter: brightness(0.9) saturate(1); box-shadow: 0 0 12px 3px rgba(247, 147, 22, 0.5), 0 0 0 2px #f97316; } /* ── 表示モード：割り当て済みノードを発光、未割り当ては暗く ─────────── */ body.members-view-mode-active .node { filter: brightness(0.35) saturate(0.4); transition: filter 0.2s, box-shadow 0.2s; } body.members-view-mode-active .node.members-view-assigned { filter: brightness(1.2) saturate(1.3); box-shadow: 0 0 20px 5px var(--member-color, #c084fc), 0 0 0 2px var(--member-color, #c084fc); } /* ── アシスト用ヘルパーバー（割り当て / 表示モード時に上部に表示） ──── */ #members-assign-helper, #members-view-helper { position: fixed; top: 60px; left: 50%; transform: translateX(-50%); background: #1a1a2e; border: 1px solid #f97316; border-radius: 8px; padding: 8px 14px; display: flex; align-items: center; gap: 12px; z-index: 9000; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6), 0 0 12px rgba(247, 147, 22, 0.4); font-size: 12px; color: #fff; } #members-view-helper { /* ビューモード時のフローティングヘルパーは表示せず、ツールバーの目玉アイコンで代替 */ display: none !important; } .members-assign-helper-icon, .members-view-helper-icon { font-size: 16px; } .members-assign-helper-text strong { color: #fdba74; } .members-view-helper-text strong { color: #e9d8fd; } /* 割り当てモード時のメンバーチップ（複数表示用） */ .members-assign-target-chip { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 700; color: #1a1a1e; margin: 0 2px; border: 1px solid rgba(0,0,0,0.2); } .members-assign-helper-hint { font-size: 10px; color: #aaa; border-left: 1px solid #3a3a40; padding-left: 10px; } .members-assign-helper-exit, .members-view-helper-exit { font-size: 11px; padding: 3px 10px; background: #553333; border: 1px solid #884444; border-radius: 4px; color: #fff; cursor: pointer; } .members-assign-helper-exit:hover { background: #663333; } .members-view-helper-exit { background: #443355; border-color: #664488; } .members-view-helper-exit:hover { background: #553366; } /* ── ノード上に表示する Members バッジ (Members モード ON 時のみ) ─────── */ .members-node-badge { position: absolute; top: -6px; right: -6px; display: flex; gap: 2px; align-items: center; z-index: 10; pointer-events: none; } .members-node-badge-chip { width: 18px; height: 18px; border-radius: 50%; font-size: 10px; font-weight: 700; color: #1a1a1e; display: inline-flex; align-items: center; justify-content: center; border: 2px solid #1a1a1e; box-shadow: 0 1px 3px rgba(0,0,0,0.5); } .members-node-badge-memo { font-size: 12px; background: #1a1a1e; border-radius: 50%; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid #c084fc; } /* Members モード時のノード強調 */ body.members-mode-active .node { transition: outline 0.2s; } body.members-mode-active .node:hover { outline: 1px dashed rgba(247, 147, 22, 0.5); outline-offset: 2px; } .members-flash-highlight { animation: members-flash 1.2s ease-out; } @keyframes members-flash { 0% { box-shadow: 0 0 0 0 rgba(247, 147, 22, 0.8); } 50% { box-shadow: 0 0 0 12px rgba(247, 147, 22, 0); } 100% { box-shadow: 0 0 0 0 rgba(247, 147, 22, 0); } } /* ========================================================================= * ⎇ Git オーバーレイ — GitHub 連携 UI（デザイナー向けに整理） * ========================================================================= */ #git-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: #2d2d2d; /* GitHub Dark 風 */ z-index: 1300; display: flex; flex-direction: column; color: #e0e0e0; font-size: 12px; } #git-bar { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: linear-gradient(180deg, #f97316 0%, #ea580c 100%); border-bottom: 1px solid #c2410c; flex: 0 0 auto; color: #fff; } #git-bar-title { font-weight: 700; font-size: 14px; color: #fff; margin-right: 8px; } .git-status-badge { font-size: 11px; padding: 4px 10px; border-radius: 12px; font-weight: 600; } .git-status-disconnected { background: #2d1818; color: #ff7b72; border: 1px solid #481c1c; } .git-status-connected { background: #133829; color: #7ce38b; border: 1px solid #1b5132; } .git-status-devmode { background: #2d2410; color: #d29922; border: 1px solid #d29922; } #git-bar-actions { display: flex; gap: 6px; margin-left: auto; margin-right: 4px; } #git-bar button, #git-bar-actions button { padding: 6px 12px; font-size: 12px; background: #404040; border: 1px solid #4a4a4a; border-radius: 6px; color: #e0e0e0; cursor: pointer; font-weight: 500; } #git-bar button:hover:not(:disabled), #git-bar-actions button:hover:not(:disabled) { background: #4a4a4a; border-color: #5a5a5a; } #git-bar button:disabled, #git-bar-actions button:disabled { opacity: 0.4; cursor: not-allowed; } .git-bar-btn-primary { background: #238636 !important; border-color: #2ea043 !important; color: #fff !important; } .git-bar-btn-primary:hover { background: #2ea043 !important; } .git-bar-btn-danger { background: #404040 !important; border-color: #5a5a5a !important; color: #ffa198 !important; } .git-bar-btn-danger:hover { background: #da3633 !important; color: #fff !important; } #git-exit-btn { background: #404040 !important; border-color: #4a4a4a !important; color: #e0e0e0 !important; } #git-body { flex: 1 1 auto; overflow: hidden; position: relative; } .git-state-pane { position: absolute; inset: 0; overflow: auto; } /* ── ログイン画面 ──────────────────────────────────────────────────── */ #git-state-login { display: flex; align-items: flex-start; justify-content: center; padding: 60px 20px; } .git-login-card { width: 100%; max-width: 480px; background: #353535; border: 1px solid #4a4a4a; border-radius: 12px; padding: 36px 32px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); } .git-login-logo { font-size: 48px; text-align: center; color: #58a6ff; margin-bottom: 4px; line-height: 1; } .git-login-title { font-size: 22px; font-weight: 700; text-align: center; color: #f0f0f0; margin-bottom: 8px; } .git-login-sub { font-size: 12px; text-align: center; color: #a8a8a8; margin-bottom: 28px; line-height: 1.6; } .git-login-steps { display: flex; flex-direction: column; gap: 18px; } .git-login-step { display: flex; gap: 12px; align-items: flex-start; } .git-login-step-num { flex: 0 0 28px; height: 28px; background: #3a3a3a; border: 1px solid #4a4a4a; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #58a6ff; } .git-login-step-body { flex: 1; min-width: 0; } .git-login-step-link { display: inline-block; background: #404040; color: #58a6ff; text-decoration: none; padding: 6px 12px; border: 1px solid #4a4a4a; border-radius: 6px; font-size: 12px; font-weight: 600; transition: background 0.15s, border-color 0.15s; } .git-login-step-link:hover { background: #4a4a4a; border-color: #58a6ff; } .git-login-step-hint { font-size: 11px; color: #a8a8a8; margin-top: 6px; line-height: 1.5; } .git-login-step-hint code { background: #3a3a3a; padding: 1px 6px; border-radius: 3px; font-family: monospace; color: #ff7b72; } .git-login-step-warning { color: #d29922; background: #2d2410; padding: 6px 10px; border-radius: 4px; border-left: 3px solid #d29922; margin-top: 8px; } .git-token-input { width: 100%; padding: 8px 12px; background: #2d2d2d; border: 1px solid #4a4a4a; border-radius: 6px; color: #e0e0e0; font-family: monospace; font-size: 12px; margin-top: 8px; } .git-token-input:focus { outline: none; border-color: #58a6ff; box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.2); } .git-login-btn { width: 100%; padding: 10px; background: #238636; border: 1px solid #2ea043; border-radius: 6px; color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; transition: background 0.15s; } .git-login-btn:hover { background: #2ea043; } .git-login-btn:disabled { opacity: 0.5; cursor: not-allowed; } .git-login-error { margin-top: 18px; padding: 10px 14px; background: #2d1818; border: 1px solid #481c1c; border-radius: 6px; color: #ff7b72; font-size: 12px; line-height: 1.6; } /* 開発モード（ログインせず UI 確認） */ .git-login-dev { margin-top: 24px; padding-top: 4px; } .git-login-dev-divider { text-align: center; position: relative; margin: 8px 0 18px; color: #5a5a5a; font-size: 11px; } .git-login-dev-divider::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: #4a4a4a; z-index: 0; } .git-login-dev-divider span { position: relative; z-index: 1; background: #353535; padding: 0 10px; } .git-login-dev-btn { width: 100%; padding: 10px; background: #404040; border: 1px dashed #5a5a5a; border-radius: 6px; color: #e0e0e0; font-size: 12px; font-weight: 600; cursor: pointer; transition: background 0.15s, border-color 0.15s; } .git-login-dev-btn:hover { background: #4a4a4a; border-color: #d29922; color: #f0f0f0; } .git-login-dev-hint { margin-top: 8px; font-size: 10px; color: #5a5a5a; text-align: center; line-height: 1.5; } /* 開発モード時のバナー */ #git-dev-banner { max-width: 1000px; margin: 0 auto 12px; padding: 10px 14px; background: #2d2410; border: 1px solid #d29922; border-left: 4px solid #d29922; border-radius: 6px; display: flex; align-items: center; gap: 12px; font-size: 12px; color: #f0d97f; } .git-dev-banner-icon { font-size: 16px; flex-shrink: 0; } .git-dev-banner-text { flex: 1; line-height: 1.5; } .git-dev-banner-text strong { color: #d29922; } .git-dev-banner-exit { padding: 4px 12px; background: #404040; border: 1px solid #d29922; border-radius: 4px; color: #f0d97f; font-size: 11px; cursor: pointer; font-weight: 600; flex-shrink: 0; } .git-dev-banner-exit:hover { background: #d29922; color: #1a1a1e; } /* ── メイン画面（視覚化ダッシュボード） ─────────────────────────────── */ #git-state-main { padding: 16px; } #git-main-scroll { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; } /* ── ① プロジェクトバー ────────────────────────────────────────────── */ #git-project-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 14px; background: #353535; border: 1px solid #4a4a4a; border-radius: 8px; } .git-project-bar-left { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; } .git-project-bar-right { flex-shrink: 0; } .git-project-switcher { position: relative; } #git-project-switcher-btn { display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: #404040; border: 1px solid #4a4a4a; border-radius: 6px; color: #e0e0e0; cursor: pointer; font-size: 13px; font-weight: 600; } #git-project-switcher-btn:hover { background: #4a4a4a; border-color: #58a6ff; } .git-project-switcher-icon { font-size: 16px; } .git-project-switcher-name { color: #58a6ff; font-weight: 700; } .git-project-switcher-caret { color: #a8a8a8; font-size: 10px; } #git-project-switcher-menu { position: absolute; top: calc(100% + 4px); left: 0; min-width: 320px; max-height: 480px; background: #353535; border: 1px solid #4a4a4a; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.5); z-index: 1500; overflow: auto; } .git-project-bar-meta { display: flex; gap: 14px; font-size: 11px; color: #a8a8a8; } .git-project-bar-meta .git-meta-item { display: inline-flex; align-items: center; gap: 4px; } /* 縦組みメタ項目（ラベル + 値の 2 行構成） */ .git-meta-item-stacked { flex-direction: column !important; align-items: flex-start !important; gap: 3px !important; /* 上下に余白を確保 */ line-height: 1; padding: 2px 0; } .git-meta-item-label { font-size: 9px; color: #e0e0e0; /* 白文字 */ letter-spacing: 0.06em; text-transform: none; font-weight: 700; line-height: 1; } .git-meta-item-value { font-size: 11px; color: #f0f0f0; /* やや明るい白 */ font-weight: 600; line-height: 1; } /* ── 新規リポジトリ作成ボタン + モーダル ───────────────────────────── */ .git-card-btn-create { background: #238636; border: 1px solid #2ea043; color: #fff; font-weight: 700; padding: 6px 14px; font-size: 12px; border-radius: 6px; cursor: pointer; margin-right: 6px; } .git-card-btn-create:hover { background: #2ea043; } /* 👁 Watch ボタン（GitHub のリポヘッダー風） */ .git-card-btn-watch { background: #404040; border: 1px solid #4a4a4a; color: #e0e0e0; font-weight: 600; padding: 5px 10px 5px 10px; font-size: 12px; border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; } .git-card-btn-watch:hover { background: #4a4a4a; border-color: #5a5a5a; } .git-card-btn-watch.is-active { background: rgba(88, 166, 255, 0.18); border-color: #58a6ff; color: #79b8ff; } .git-card-btn-count { background: #2d2d2d; border: 1px solid #4a4a4a; padding: 1px 7px; border-radius: 10px; font-size: 10px; font-weight: 700; margin-left: 4px; color: #a8a8a8; } /* 📁 リポジトリ（Code）ボタン */ .git-card-btn-files { background: #404040; border: 1px solid #58a6ff; color: #58a6ff; font-weight: 700; padding: 6px 14px; font-size: 12px; border-radius: 6px; cursor: pointer; } .git-card-btn-files:hover { background: rgba(88, 166, 255, 0.18); border-color: #79b8ff; color: #79b8ff; } /* 📜 履歴ボタン */ .git-card-btn-history { background: #404040; border: 1px solid #a371f7; color: #c9a8ff; font-weight: 700; padding: 6px 14px; font-size: 12px; border-radius: 6px; cursor: pointer; } .git-card-btn-history:hover { background: rgba(163, 113, 247, 0.18); border-color: #c9a8ff; color: #d8c1ff; } /* ⚙ 設定ボタン */ .git-card-btn-settings { background: #404040; border: 1px solid #4a4a4a; color: #e0e0e0; font-weight: 700; padding: 6px 14px; font-size: 12px; border-radius: 6px; cursor: pointer; } .git-card-btn-settings:hover { background: #4a4a4a; border-color: #5a5a5a; color: #f0f0f0; } /* ── アクションメニューの区切り線 ───────────────────────────────── */ .git-actions-menu-divider { height: 1px; background: #4a4a4a; margin: 4px 8px; } /* ── 設定モーダル（左サイドバーナビ + 右コンテンツ） ────────────── */ #git-settings-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.65); z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 20px; } #git-settings-modal { width: 100%; max-width: 880px; height: 88vh; max-height: 720px; background: #353535; border: 1px solid #4a4a4a; border-radius: 10px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6); display: flex; flex-direction: column; overflow: hidden; } .git-settings-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; background: #3a3a3a; border-bottom: 1px solid #4a4a4a; } .git-settings-title { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: #f0f0f0; } .git-settings-repo-name { font-family: monospace; color: #58a6ff; } .git-settings-body { flex: 1 1 auto; display: flex; overflow: hidden; } .git-settings-nav { flex: 0 0 200px; background: #2d2d2d; border-right: 1px solid #4a4a4a; padding: 12px 8px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; } .git-settings-nav-btn { padding: 8px 12px; background: transparent; border: none; border-radius: 6px; color: #e0e0e0; font-size: 12px; font-weight: 600; text-align: left; cursor: pointer; transition: background 0.12s, color 0.12s; } .git-settings-nav-btn:hover { background: #404040; } .git-settings-nav-btn.git-settings-nav-active { background: rgba(88, 166, 255, 0.15); color: #58a6ff; border-left: 3px solid #58a6ff; padding-left: 9px; } .git-settings-nav-danger { color: #ff7b72; } .git-settings-nav-danger.git-settings-nav-active { background: rgba(255, 123, 114, 0.12); color: #ff7b72; border-left-color: #ff7b72; } .git-settings-content { flex: 1 1 auto; overflow-y: auto; padding: 22px 28px; } .git-settings-section-title { font-size: 16px; font-weight: 700; color: #f0f0f0; margin: 0 0 18px; padding-bottom: 10px; border-bottom: 1px solid #4a4a4a; } .git-settings-row { margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid #404040; } .git-settings-row:last-child { border-bottom: none; } .git-settings-row label { display: block; font-size: 12px; font-weight: 700; color: #e0e0e0; margin-bottom: 6px; } .git-settings-input-group { display: flex; gap: 6px; align-items: center; } .git-settings-input-group-stack { flex-direction: column; align-items: stretch; } .git-settings-row input[type="text"], .git-settings-row input[type="url"], .git-settings-row select { flex: 1; padding: 7px 10px; background: #2d2d2d; border: 1px solid #4a4a4a; border-radius: 6px; color: #e0e0e0; font-size: 12px; font-family: inherit; min-width: 0; } .git-settings-row input:focus, .git-settings-row select:focus { outline: none; border-color: #58a6ff; box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.2); } .git-settings-row select { flex: 0 0 auto; min-width: 130px; } .git-settings-hint { font-size: 10px; color: #a8a8a8; margin-top: 6px; line-height: 1.5; } .git-settings-save-btn { padding: 7px 14px; background: #238636; border: 1px solid #2ea043; border-radius: 6px; color: #fff; font-size: 12px; font-weight: 700; cursor: pointer; flex-shrink: 0; } .git-settings-save-btn:hover:not(:disabled) { background: #2ea043; } .git-settings-danger-btn { padding: 7px 14px; background: rgba(255, 123, 114, 0.15); border: 1px solid #ff7b72; border-radius: 6px; color: #ff7b72; font-size: 12px; font-weight: 700; cursor: pointer; flex-shrink: 0; } .git-settings-danger-btn:hover { background: #ff7b72; color: #1a1a1a; } /* トグル行 */ .git-settings-row-toggle { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .git-settings-toggle-label { font-size: 13px; font-weight: 700; color: #f0f0f0; } .git-settings-row-danger-line { border-left: 3px solid #ff7b72; padding-left: 12px; background: rgba(255, 123, 114, 0.04); border-radius: 4px; padding-top: 12px; } /* 公開設定のラジオ */ .git-settings-radio-group { display: flex; gap: 8px; flex-shrink: 0; } .git-settings-radio { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; background: #2d2d2d; border: 1px solid #4a4a4a; border-radius: 6px; font-size: 12px; color: #e0e0e0; cursor: pointer; } .git-settings-radio:has(input:checked) { background: rgba(88, 166, 255, 0.15); border-color: #58a6ff; color: #58a6ff; } .git-settings-radio input[type="radio"] { accent-color: #58a6ff; } /* スイッチ（チェックボックスを iOS 風に） */ .git-settings-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; } .git-settings-switch input { display: none; } .git-settings-switch-slider { position: absolute; inset: 0; background: #4a4a4a; border-radius: 12px; cursor: pointer; transition: background 0.2s; } .git-settings-switch-slider::before { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: #e0e0e0; border-radius: 50%; transition: transform 0.2s; } .git-settings-switch input:checked + .git-settings-switch-slider { background: #238636; } .git-settings-switch input:checked + .git-settings-switch-slider::before { transform: translateX(20px); } /* コラボレーター・Webhook・タグルール リスト */ .git-collaborators-list, .git-webhooks-list, .git-tag-rules-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; max-height: 280px; overflow-y: auto; } .git-collab-row, .git-webhook-row, .git-tag-rule-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #2d2d2d; border: 1px solid #4a4a4a; border-radius: 6px; } .git-collab-avatar { width: 28px; height: 28px; border-radius: 50%; border: 1px solid #4a4a4a; flex-shrink: 0; } .git-collab-info, .git-webhook-info, .git-tag-rule-info { flex: 1; min-width: 0; } .git-collab-name { font-size: 13px; font-weight: 700; color: #f0f0f0; } .git-collab-permission { font-size: 10px; padding: 1px 6px; border-radius: 8px; background: rgba(88, 166, 255, 0.15); color: #58a6ff; border: 1px solid #58a6ff; margin-left: 6px; font-weight: 600; } .git-webhook-url, .git-tag-rule-pattern { font-family: monospace; font-size: 11px; color: #58a6ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .git-webhook-events, .git-collab-sub { font-size: 10px; color: #a8a8a8; margin-top: 2px; } .git-row-remove-btn { padding: 4px 10px; background: transparent; border: 1px solid #4a4a4a; border-radius: 4px; color: #a8a8a8; font-size: 11px; cursor: pointer; flex-shrink: 0; } .git-row-remove-btn:hover { background: rgba(255, 123, 114, 0.15); border-color: #ff7b72; color: #ff7b72; } /* プロジェクトアクションメニュー（⋮） */ .git-project-actions-btn { font-size: 16px; line-height: 1; padding: 4px 10px !important; font-weight: 700; } #git-project-actions-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 260px; background: #353535; border: 1px solid #4a4a4a; border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); z-index: 1500; padding: 4px; overflow: hidden; } .git-actions-menu-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 4px; cursor: pointer; transition: background 0.12s; } .git-actions-menu-row:hover { background: #3a3a3a; } .git-actions-menu-row-danger:hover { background: rgba(255, 123, 114, 0.12); } .git-actions-menu-icon { font-size: 18px; flex-shrink: 0; } .git-actions-menu-text { flex: 1; min-width: 0; } .git-actions-menu-title { font-size: 12px; font-weight: 700; color: #f0f0f0; } .git-actions-menu-row-danger .git-actions-menu-title { color: #ff7b72; } .git-actions-menu-sub { font-size: 10px; color: #a8a8a8; margin-top: 2px; } /* 削除確認モーダル */ #git-delete-repo-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7); z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 20px; } #git-delete-repo-modal { width: 100%; max-width: 520px; background: #353535; border: 2px solid #ff7b72; border-radius: 10px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7), 0 0 24px rgba(255, 123, 114, 0.25); display: flex; flex-direction: column; max-height: 90vh; } .git-delete-repo-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; background: rgba(255, 123, 114, 0.1); border-bottom: 1px solid #ff7b72; } .git-delete-repo-title { font-size: 15px; font-weight: 700; color: #ff7b72; } .git-delete-repo-body { padding: 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; } .git-delete-repo-warning { padding: 12px 14px; background: rgba(255, 123, 114, 0.08); border-left: 3px solid #ff7b72; border-radius: 4px; color: #e0e0e0; font-size: 12px; line-height: 1.7; } .git-delete-repo-warning ul { margin: 6px 0 0; padding-left: 22px; color: #a8a8a8; font-size: 11px; } .git-delete-repo-warning ul li { margin: 2px 0; } .git-delete-repo-target { padding: 10px 14px; background: #2d2d2d; border: 1px solid #4a4a4a; border-radius: 6px; font-size: 12px; color: #a8a8a8; } .git-delete-repo-target-name { font-family: monospace; font-weight: 700; font-size: 13px; color: #f0f0f0; margin-left: 6px; } .git-delete-repo-submit-btn { padding: 6px 18px; background: #ff7b72; border: 1px solid #ff7b72; color: #1a1a1a; font-size: 12px; font-weight: 700; border-radius: 6px; cursor: pointer; transition: background 0.15s, opacity 0.15s; } .git-delete-repo-submit-btn:hover:not(:disabled) { background: #ff5e54; border-color: #ff5e54; } .git-delete-repo-submit-btn:disabled { background: #404040; border-color: #4a4a4a; color: #5a5a5a; cursor: not-allowed; } #git-create-repo-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 20px; } #git-create-repo-modal { width: 100%; max-width: 520px; background: #353535; border: 1px solid #4a4a4a; border-radius: 10px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6); display: flex; flex-direction: column; max-height: 90vh; } .git-create-repo-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid #4a4a4a; } .git-create-repo-title { font-size: 15px; font-weight: 700; color: #f0f0f0; } .git-create-repo-close { font-size: 16px; background: transparent; border: none; color: #a8a8a8; cursor: pointer; padding: 2px 8px; border-radius: 4px; } .git-create-repo-close:hover { background: #4a4a4a; color: #fff; } .git-create-repo-body { padding: 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 18px; } .git-create-repo-field { display: flex; flex-direction: column; gap: 6px; } .git-create-repo-field label { font-size: 12px; font-weight: 600; color: #e0e0e0; } .git-create-repo-required { color: #f85149; } .git-create-repo-field input[type="text"], .git-create-repo-field textarea { width: 100%; padding: 8px 12px; background: #2d2d2d; border: 1px solid #4a4a4a; border-radius: 6px; color: #e0e0e0; font-size: 13px; font-family: inherit; resize: vertical; } .git-create-repo-field input[type="text"]:focus, .git-create-repo-field textarea:focus { outline: none; border-color: #58a6ff; box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.2); } .git-create-repo-hint { font-size: 10px; color: #a8a8a8; line-height: 1.5; } .git-create-repo-radio-group { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .git-create-repo-radio { display: flex; align-items: flex-start; gap: 8px; padding: 10px; background: #2d2d2d; border: 1px solid #4a4a4a; border-radius: 6px; cursor: pointer; transition: border-color 0.15s, background 0.15s; } .git-create-repo-radio:hover { border-color: #5a5a5a; } .git-create-repo-radio input[type="radio"] { margin-top: 3px; accent-color: #58a6ff; } .git-create-repo-radio:has(input:checked) { border-color: #58a6ff; background: rgba(88, 166, 255, 0.08); } .git-create-repo-radio-content { flex: 1; min-width: 0; } .git-create-repo-radio-title { font-size: 12px; font-weight: 700; color: #f0f0f0; margin-bottom: 2px; } .git-create-repo-radio-sub { font-size: 10px; color: #a8a8a8; line-height: 1.5; } .git-create-repo-check { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; font-weight: 400 !important; font-size: 12px !important; color: #e0e0e0 !important; } .git-create-repo-check input[type="checkbox"] { margin-top: 2px; accent-color: #58a6ff; } .git-create-repo-check strong { color: #f0f0f0; } .git-create-repo-error { padding: 10px 14px; background: #2d1818; border: 1px solid #481c1c; border-left: 3px solid #f85149; border-radius: 6px; color: #ff7b72; font-size: 12px; line-height: 1.6; } .git-create-repo-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 18px; border-top: 1px solid #4a4a4a; } .git-card-btn-primary { padding: 6px 18px; background: #238636; border: 1px solid #2ea043; color: #fff; font-size: 12px; font-weight: 700; border-radius: 6px; cursor: pointer; } .git-card-btn-primary:hover:not(:disabled) { background: #2ea043; } .git-card-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; } /* ── タブナビゲーション（GitHub Desktop 風） ────────────────────────── */ #git-tabs { display: grid; grid-template-columns: 1fr 1fr 1fr; /* 3 タブ: コミット / 履歴 / ファイル */ gap: 8px; } .git-tab { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: #353535; border: 1px solid #4a4a4a; border-radius: 8px; color: #e0e0e0; cursor: pointer; text-align: left; transition: background 0.15s, border-color 0.15s; position: relative; } .git-tab:hover { background: #3a3a3a; border-color: #5a5a5a; } .git-tab.git-tab-active { background: rgba(88, 166, 255, 0.1); border-color: #58a6ff; } .git-tab-icon { font-size: 22px; flex-shrink: 0; } .git-tab-label { flex: 1; display: flex; flex-direction: column; gap: 1px; } .git-tab-label strong { font-size: 13px; color: #f0f0f0; font-weight: 700; } .git-tab-label small { font-size: 10px; color: #a8a8a8; } .git-tab-badge { background: #f0883e; color: #fff; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 10px; min-width: 24px; text-align: center; } .git-tab.git-tab-active .git-tab-label strong { color: #58a6ff; } /* コミットタブ：アクティブ時は緑（保存系の色）で「コミット = 保存」を強調 */ .git-tab.git-tab-commit.git-tab-active { background: rgba(35, 134, 54, 0.12); border-color: #2ea043; } .git-tab.git-tab-commit.git-tab-active .git-tab-label strong { color: #7ce38b; } .git-tab.git-tab-commit.git-tab-active .git-tab-icon { filter: drop-shadow(0 0 6px rgba(46, 160, 67, 0.5)); } .git-tab-pane-content { display: flex; flex-direction: column; gap: 14px; } /* （旧）コミット作成バナー・緑強調フォームカード・派手見出し系は削除済み コミットボタンの主役は同期ヒーローの 💾 コミットボタンに集約 */ .git-commit-submit-btn { letter-spacing: 0.02em; } .git-commit-submit-btn:hover:not(:disabled) { transform: translateY(-1px); } /* ── 変更タブ：3カラム + コミットフォーム ───────────────────────────── */ .git-changes-grid { display: grid; grid-template-columns: 360px 1fr; gap: 12px; min-height: 300px; max-height: 460px; } .git-changes-files-card, .git-changes-diff-card { display: flex; flex-direction: column; overflow: hidden; } .git-changes-card-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #3a3a3a; border-bottom: 1px solid #4a4a4a; } .git-changes-card-head-title { flex: 1; display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: #f0f0f0; } /* ステップバッジ（│ステップN│ 説明 のような箱型） */ .git-step-badge { display: inline-block; padding: 3px 10px; background: #2d2d2d; border: 1px solid #5a5a5a; border-radius: 4px; font-size: 11px; font-weight: 800; color: #f0f0f0; letter-spacing: 0.02em; white-space: nowrap; } .git-step-desc { font-size: 12px; font-weight: 700; color: #e0e0e0; } .git-changes-card-head-actions { display: flex; gap: 4px; } .git-changes-count-badge { background: #58a6ff; color: #fff; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 10px; } .git-tiny-btn { padding: 3px 8px; font-size: 10px; background: #404040; border: 1px solid #4a4a4a; border-radius: 4px; color: #e0e0e0; cursor: pointer; } .git-tiny-btn:hover { background: #4a4a4a; } /* 変更ファイル一覧 */ .git-changes-files-list { flex: 1; overflow-y: auto; } .git-changes-file-row { display: flex; align-items: flex-start; gap: 8px; padding: 10px 14px; border-bottom: 1px solid #404040; cursor: pointer; transition: background 0.1s; } .git-changes-file-row:hover { background: #3a3a3a; } .git-changes-file-row.git-changes-file-selected { background: rgba(88, 166, 255, 0.12); border-left: 3px solid #58a6ff; padding-left: 11px; } .git-changes-file-check { margin-top: 3px; accent-color: #58a6ff; cursor: pointer; flex-shrink: 0; } .git-changes-file-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; } .git-changes-file-info { flex: 1; min-width: 0; } .git-changes-file-path { font-family: monospace; font-size: 12px; color: #f0f0f0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .git-changes-file-summary { font-size: 10px; color: #a8a8a8; margin-top: 2px; line-height: 1.5; } .git-changes-file-stats { display: flex; gap: 6px; margin-top: 4px; font-size: 10px; font-family: monospace; } .git-changes-file-stat-add { color: #7ce38b; } .git-changes-file-stat-mod { color: #d29922; } .git-changes-file-stat-del { color: #ff7b72; } .git-changes-file-role { display: inline-block; font-size: 9px; padding: 1px 6px; border-radius: 8px; background: rgba(88, 166, 255, 0.15); border: 1px solid #58a6ff; color: #58a6ff; margin-top: 4px; } .git-changes-file-role.role-scenario { background: rgba(126, 232, 162, 0.12); border-color: #7ce38b; color: #7ce38b; } .git-changes-file-role.role-art { background: rgba(245, 163, 184, 0.12); border-color: #f5a3b8; color: #f5a3b8; } .git-changes-file-role.role-design { background: rgba(116, 235, 213, 0.12); border-color: #74ebd5; color: #74ebd5; } .git-changes-file-role.role-meta { background: rgba(218, 153, 34, 0.12); border-color: #d29922; color: #d29922; } /* 変更詳細（右側） */ .git-changes-diff-body { flex: 1; overflow-y: auto; padding: 14px; } .git-changes-diff-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 12px; color: #a8a8a8; font-size: 12px; text-align: center; } .git-changes-diff-empty-icon { font-size: 36px; opacity: 0.5; } .git-changes-diff-section { margin-bottom: 16px; } .git-changes-diff-section-title { font-size: 11px; font-weight: 700; color: #a8a8a8; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid #404040; } .git-changes-diff-line { display: flex; align-items: flex-start; gap: 8px; padding: 6px 10px; border-radius: 4px; font-size: 12px; margin-bottom: 2px; } .git-changes-diff-line-add { background: rgba(126, 232, 162, 0.08); border-left: 3px solid #7ce38b; } .git-changes-diff-line-modify { background: rgba(218, 153, 34, 0.08); border-left: 3px solid #d29922; } .git-changes-diff-line-delete { background: rgba(255, 123, 114, 0.08); border-left: 3px solid #ff7b72; } .git-changes-diff-line-icon { flex: 0 0 16px; font-weight: 700; } .git-changes-diff-line-icon-add { color: #7ce38b; } .git-changes-diff-line-icon-modify { color: #d29922; } .git-changes-diff-line-icon-delete { color: #ff7b72; } .git-changes-diff-line-text { flex: 1; color: #e0e0e0; line-height: 1.5; } /* コミットフォーム */ .git-commit-form-card { padding-bottom: 4px; } .git-commit-form-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 14px; } .git-commit-form-field { display: flex; flex-direction: column; gap: 4px; } .git-commit-form-field label { font-size: 11px; font-weight: 600; color: #e0e0e0; } .git-commit-required { color: #ff7b72; } .git-commit-form-field input[type="text"], .git-commit-form-field textarea { width: 100%; padding: 8px 12px; background: #2d2d2d; border: 1px solid #4a4a4a; border-radius: 6px; color: #e0e0e0; font-size: 13px; font-family: inherit; resize: vertical; } .git-commit-form-field input[type="text"]:focus, .git-commit-form-field textarea:focus { outline: none; border-color: #58a6ff; box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.2); } .git-commit-hint { font-size: 10px; color: #a8a8a8; line-height: 1.5; } .git-commit-form-actions { display: flex; align-items: center; gap: 12px; padding-top: 4px; border-top: 1px solid #404040; margin-top: 4px; padding-top: 14px; } .git-commit-submit-btn { padding: 10px 20px; background: #238636; border: 1px solid #2ea043; color: #fff; font-size: 13px; font-weight: 700; border-radius: 6px; cursor: pointer; transition: background 0.15s; } .git-commit-submit-btn:hover:not(:disabled) { background: #2ea043; } .git-commit-submit-btn:disabled { background: #404040; border-color: #4a4a4a; color: #5a5a5a; cursor: not-allowed; } .git-commit-after-hint { flex: 1; font-size: 10px; color: #a8a8a8; line-height: 1.5; } /* ── ② 同期状態ヒーロー ─────────────────────────────────────────────── */ #git-sync-hero { padding: 18px; } .git-sync-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; } .git-sync-hero-branch-wrap { display: flex; align-items: center; gap: 12px; position: relative; } .git-sync-hero-branch-icon { font-size: 28px; color: #58a6ff; filter: drop-shadow(0 0 8px rgba(88, 166, 255, 0.4)); } .git-sync-hero-branch-label { font-size: 10px; color: #a8a8a8; text-transform: uppercase; letter-spacing: 0.06em; } .git-sync-hero-branch-name { font-family: monospace; font-size: 20px; font-weight: 700; color: #f0f0f0; line-height: 1.2; } #git-branch-switcher-menu { position: absolute; top: calc(100% + 4px); left: 0; min-width: 240px; max-height: 360px; background: #353535; border: 1px solid #4a4a4a; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.5); z-index: 1500; overflow: auto; } .git-sync-hero-counters { display: flex; gap: 8px; } .git-sync-counter { padding: 10px 16px; background: #2d2d2d; border: 1px solid #4a4a4a; border-radius: 8px; text-align: center; min-width: 84px; cursor: help; transition: transform 0.15s, border-color 0.15s; } .git-sync-counter:hover { transform: translateY(-2px); } .git-sync-counter-icon { font-size: 16px; margin-bottom: 2px; } .git-sync-counter-num { font-size: 22px; font-weight: 800; line-height: 1; color: #e0e0e0; margin-bottom: 4px; } .git-sync-counter-label { font-size: 10px; color: #a8a8a8; letter-spacing: 0.04em; } .git-sync-counter-behind .git-sync-counter-icon { color: #58a6ff; } .git-sync-counter-ahead .git-sync-counter-icon { color: #f0883e; } .git-sync-counter-local .git-sync-counter-icon { color: #d29922; } .git-sync-counter-behind:hover { border-color: #58a6ff; } .git-sync-counter-ahead:hover { border-color: #f0883e; } .git-sync-counter-local:hover { border-color: #d29922; } /* "0 件" の時はトーンダウン */ .git-sync-counter[data-zero="true"] .git-sync-counter-num { color: #484f58; } .git-sync-hero-actions { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; } .git-sync-action-btn { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #2d2d2d; border: 1px solid #4a4a4a; border-radius: 8px; color: #e0e0e0; cursor: pointer; text-align: left; transition: background 0.15s, border-color 0.15s; } .git-sync-action-btn:hover:not(:disabled) { background: #3a3a3a; border-color: #58a6ff; } .git-sync-action-btn:disabled { opacity: 0.5; cursor: not-allowed; } .git-sync-action-icon { font-size: 22px; flex-shrink: 0; } .git-sync-action-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .git-sync-action-text strong { font-size: 12px; font-weight: 700; color: #f0f0f0; } .git-sync-action-text span { font-size: 10px; color: #a8a8a8; } .git-sync-action-pull .git-sync-action-icon { color: #58a6ff; } .git-sync-action-push .git-sync-action-icon { color: #f0883e; } /* 💾 コミットボタン: 同期ヒーロー内で「実体的な保存ボタン」として強調 */ .git-sync-action-save { background: linear-gradient(180deg, #2ea043 0%, #238636 100%) !important; border: 1px solid #3fb950 !important; box-shadow: 0 2px 6px rgba(46, 160, 67, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08); } .git-sync-action-save:hover:not(:disabled) { background: linear-gradient(180deg, #3fb950 0%, #2ea043 100%) !important; border-color: #56d364 !important; box-shadow: 0 4px 10px rgba(46, 160, 67, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; transform: translateY(-1px); } .git-sync-action-save:active:not(:disabled) { transform: translateY(0); } .git-sync-action-save .git-sync-action-icon { color: #fff; font-size: 24px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)); } .git-sync-action-save .git-sync-action-text strong { color: #fff; font-size: 13px; } .git-sync-action-save .git-sync-action-text span { color: rgba(255, 255, 255, 0.85); } /* ── ③ 履歴グラフ（SVG） ──────────────────────────────────────────── */ .git-graph-legend { display: flex; gap: 10px; font-size: 10px; color: #a8a8a8; } .git-graph-legend-item { display: inline-flex; align-items: center; gap: 4px; } .git-graph-legend-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } .git-graph-body { padding: 12px 16px; display: flex; gap: 0; min-height: 200px; max-height: 540px; overflow-y: auto; } .git-graph-svg { flex-shrink: 0; width: 60px; } .git-graph-commits { flex: 1; min-width: 0; display: flex; flex-direction: column; } /* ── 未プッシュのローカルコミット表示（リモート履歴の上に併記） ── */ .git-pending-commits { margin-bottom: 16px; padding: 10px 12px; background: linear-gradient(135deg, rgba(255, 193, 7, 0.08), rgba(255, 193, 7, 0.03)); border: 1px dashed rgba(255, 193, 7, 0.4); border-radius: 6px; } .git-pending-commits-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid rgba(255, 193, 7, 0.2); } .git-pending-commits-title { font-size: 12px; font-weight: 700; color: #ffc107; letter-spacing: 0.02em; } .git-pending-commits-actions { display: flex; gap: 6px; } .git-pending-commits-actions button { padding: 4px 10px; font-size: 11px; font-weight: 600; background: #4a4a4a; color: #f0f0f0; border: 1px solid #5a5a5a; border-radius: 4px; cursor: pointer; } .git-pending-commits-actions button:hover { background: #5a5a5a; } .git-pending-commits-actions button.git-bar-btn-danger { background: rgba(255, 100, 100, 0.18); border-color: rgba(255, 100, 100, 0.4); color: #ff8c8c; } .git-pending-commits-actions button.git-bar-btn-danger:hover { background: rgba(255, 100, 100, 0.3); } .git-pending-commits-list { display: flex; flex-direction: column; gap: 4px; } .git-pending-commit-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: rgba(0, 0, 0, 0.2); border: 1px solid rgba(255, 193, 7, 0.2); border-radius: 4px; } .git-pending-commit-dot { width: 10px; height: 10px; border-radius: 50%; background: #ffc107; box-shadow: 0 0 6px rgba(255, 193, 7, 0.6); flex-shrink: 0; animation: git-pending-pulse 1.4s ease-in-out infinite; } @keyframes git-pending-pulse { 0%, 100% { box-shadow: 0 0 6px rgba(255, 193, 7, 0.6); } 50% { box-shadow: 0 0 12px rgba(255, 193, 7, 1.0); } } .git-pending-commit-info { flex: 1; min-width: 0; } .git-pending-commit-msg { font-size: 12px; font-weight: 600; color: #f0f0f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .git-pending-commit-meta { display: flex; gap: 12px; font-size: 10px; color: #aaa; margin-top: 2px; } .git-pending-commit-id { font-family: var(--font-mono, monospace); color: #ffc107; } .git-pending-commit-del { width: 24px; height: 24px; padding: 0; background: rgba(255, 100, 100, 0.12); color: #ff8c8c; border: 1px solid rgba(255, 100, 100, 0.3); border-radius: 3px; cursor: pointer; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; } .git-pending-commit-del:hover { background: rgba(255, 100, 100, 0.25); } /* ── 📤 Open Pull Requests 一覧 ── */ .git-pr-list { margin-bottom: 16px; padding: 10px 12px; background: linear-gradient(135deg, rgba(116, 235, 213, 0.08), rgba(116, 235, 213, 0.03)); border: 1px solid rgba(116, 235, 213, 0.3); border-radius: 6px; } .git-pr-list-head { font-size: 12px; font-weight: 700; color: #74ebd5; letter-spacing: 0.02em; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid rgba(116, 235, 213, 0.2); } .git-pr-list-rows { display: flex; flex-direction: column; gap: 4px; } .git-pr-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: rgba(0, 0, 0, 0.2); border: 1px solid rgba(116, 235, 213, 0.15); border-radius: 4px; cursor: pointer; transition: background 0.12s, border-color 0.12s; } .git-pr-row:hover { background: rgba(116, 235, 213, 0.08); border-color: rgba(116, 235, 213, 0.4); } .git-pr-icon { font-size: 16px; flex-shrink: 0; } .git-pr-info { flex: 1; min-width: 0; } .git-pr-title { font-size: 12px; font-weight: 600; color: #f0f0f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .git-pr-meta { display: flex; gap: 8px; font-size: 10px; color: #aaa; margin-top: 2px; align-items: center; } .git-pr-branch { padding: 1px 6px; background: rgba(116, 235, 213, 0.15); color: #74ebd5; border-radius: 3px; font-family: var(--font-mono, monospace); } .git-pr-arrow { color: #74ebd5; } .git-pr-author { color: #c084fc; } .git-pr-state { padding: 2px 8px; background: #2ea043; color: #fff; font-size: 10px; font-weight: 700; border-radius: 10px; letter-spacing: 0.04em; } /* ── ⚔ 衝突解決ダイアログ ── */ .gsgit-conflict-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.7); display: flex; align-items: center; justify-content: center; z-index: 1000; } .gsgit-conflict-modal { max-width: 720px; width: 90%; max-height: 85vh; display: flex; flex-direction: column; background: #2d2d2d; border: 1px solid #4a4a4a; border-radius: 8px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8); } .gsgit-conflict-head { display: flex; align-items: center; gap: 14px; padding: 16px 20px; background: linear-gradient(135deg, #6b3030, #4d2020); border-bottom: 1px solid #5a4040; border-radius: 8px 8px 0 0; } .gsgit-conflict-icon { font-size: 28px; filter: drop-shadow(0 0 8px rgba(255, 100, 100, 0.5)); } .gsgit-conflict-title { font-size: 16px; font-weight: 700; color: #fff; } .gsgit-conflict-sub { font-size: 12px; color: #ffc1c1; margin-top: 2px; } .gsgit-conflict-body { flex: 1; min-height: 0; padding: 16px 20px; overflow-y: auto; } .gsgit-conflict-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-bottom: 14px; } .gsgit-conflict-table th { text-align: left; padding: 8px 10px; background: #3a3a3a; color: #aaa; font-weight: 600; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; } .gsgit-conflict-table td { padding: 8px 10px; border-top: 1px solid #4a4a4a; } .gsgit-conflict-path code { font-family: var(--font-mono, monospace); font-size: 11px; color: #74ebd5; background: rgba(0,0,0,0.3); padding: 2px 6px; border-radius: 3px; } .gsgit-conflict-state { white-space: nowrap; } .gsgit-conflict-local { color: #ffc107; font-weight: 600; } .gsgit-conflict-remote { color: #74ebd5; font-weight: 600; } .gsgit-conflict-none { color: #555; } .gsgit-conflict-explain { padding: 10px 14px; background: rgba(255, 255, 255, 0.04); border-left: 3px solid #c084fc; border-radius: 4px; } .gsgit-conflict-explain p { margin: 4px 0; font-size: 12px; color: #d0d0d0; line-height: 1.5; } .gsgit-conflict-explain b { color: #fff; } .gsgit-conflict-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; background: #252525; border-top: 1px solid #4a4a4a; border-radius: 0 0 8px 8px; } .gsgit-conflict-actions button { padding: 8px 16px; font-size: 12px; font-weight: 600; background: #4a4a4a; color: #f0f0f0; border: 1px solid #5a5a5a; border-radius: 4px; cursor: pointer; } .gsgit-conflict-actions button:hover { background: #5a5a5a; } .gsgit-conflict-btn-local { background: linear-gradient(135deg, #806000, #4d3600) !important; border-color: #ffc107 !important; color: #ffc107 !important; } .gsgit-conflict-btn-local:hover { background: linear-gradient(135deg, #a07a00, #6d4d00) !important; } .gsgit-conflict-btn-remote { background: linear-gradient(135deg, #00665a, #003d36) !important; border-color: #74ebd5 !important; color: #74ebd5 !important; } .gsgit-conflict-btn-remote:hover { background: linear-gradient(135deg, #008575, #004f45) !important; } .git-graph-commit-row { height: 56px; display: flex; align-items: center; padding: 0 10px 0 4px; border-radius: 6px; cursor: pointer; transition: background 0.12s; } .git-graph-commit-row:hover { background: #3a3a3a; } .git-graph-commit-info { flex: 1; min-width: 0; } .git-graph-commit-msg { font-size: 12px; font-weight: 600; color: #f0f0f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .git-graph-commit-meta { display: flex; align-items: center; gap: 8px; margin-top: 3px; font-size: 10px; color: #a8a8a8; } .git-graph-commit-sha { font-family: monospace; background: #2d2d2d; padding: 1px 5px; border-radius: 3px; border: 1px solid #404040; color: #58a6ff; } .git-graph-commit-author { color: #e0e0e0; } .git-graph-commit-branch-tag { font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 3px; background: rgba(88, 166, 255, 0.15); border: 1px solid #58a6ff; color: #58a6ff; font-family: monospace; text-transform: uppercase; letter-spacing: 0.04em; } .git-graph-commit-head-tag { background: rgba(240, 136, 62, 0.18); border-color: #f0883e; color: #f0883e; } /* ── 📁 ファイルタブ（GitHub Code タブと完全同型） ────────────────── */ /* アクションバー（branch + branches/tags + go to file + add file + code） */ .git-files-actionbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; flex-wrap: wrap; } .git-files-actionbar-left, .git-files-actionbar-right { display: flex; align-items: center; gap: 6px; } /* GitHub のピル状ボタン */ .git-files-pill { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; background: #404040; border: 1px solid #4a4a4a; border-radius: 6px; color: #e0e0e0; font-size: 12px; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; } .git-files-pill:hover { background: #4a4a4a; border-color: #5a5a5a; } .git-files-pill strong { color: #f0f0f0; font-weight: 800; } .git-files-pill-icon { font-size: 11px; color: #a8a8a8; } .git-files-pill-caret { font-size: 9px; color: #a8a8a8; } .git-files-pill-action { background: #404040; } .git-files-pill-code { background: linear-gradient(180deg, #2ea043 0%, #238636 100%); border-color: #3fb950; color: #fff; } .git-files-pill-code:hover { background: linear-gradient(180deg, #3fb950 0%, #2ea043 100%); color: #fff; } .git-files-pill-code .git-files-pill-icon, .git-files-pill-code .git-files-pill-caret { color: #fff; } /* ブランチセレクタ */ .git-files-branch-select { padding: 5px 10px; background: #404040; border: 1px solid #4a4a4a; border-radius: 6px; color: #e0e0e0; font-size: 12px; font-family: monospace; font-weight: 600; cursor: pointer; } .git-files-branch-select:hover { background: #4a4a4a; } .git-files-branch-select:focus { outline: none; border-color: #58a6ff; } /* "Go to file" 検索（GitHub と同じスタイル） */ .git-files-search-wrap { display: inline-flex; align-items: center; background: #2d2d2d; border: 1px solid #4a4a4a; border-radius: 6px; padding: 0 8px; gap: 6px; min-width: 280px; } .git-files-search-wrap:focus-within { border-color: #58a6ff; box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.15); } .git-files-search-icon { color: #a8a8a8; font-size: 11px; } .git-files-go-to { flex: 1; padding: 5px 0; background: transparent; border: none; color: #e0e0e0; font-size: 12px; outline: none; } .git-files-go-to::placeholder { color: #5a5a5a; } .git-files-search-kbd { background: #404040; border: 1px solid #5a5a5a; border-radius: 4px; padding: 1px 6px; font-size: 10px; color: #a8a8a8; font-family: monospace; } /* 最新コミット + ファイルツリーカード */ .git-files-latest-card { overflow: hidden; } /* 最新コミット帯（GitHub と同じ：avatar + author + msg + ... + sha + count） */ .git-files-latest-commit { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: #3a3a3a; font-size: 12px; color: #a8a8a8; border-bottom: 1px solid #4a4a4a; } .git-files-latest-commit-avatar { width: 22px; height: 22px; border-radius: 50%; border: 1px solid #5a5a5a; } .git-files-latest-commit-author { color: #f0f0f0; font-weight: 700; } .git-files-latest-commit-msg { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #c9d1d9; } .git-files-latest-commit-sha { font-family: monospace; background: #2d2d2d; padding: 2px 7px; border-radius: 3px; color: #58a6ff; font-size: 11px; border: 1px solid #4a4a4a; } .git-files-latest-commit-count { font-size: 11px; color: #a8a8a8; display: inline-flex; align-items: center; gap: 4px; padding-left: 10px; border-left: 1px solid #4a4a4a; } /* パンくず（GitHub では非表示の場合あり、こちらは小さく） */ .git-files-breadcrumb { padding: 8px 16px; font-size: 12px; color: #a8a8a8; display: flex; align-items: center; flex-wrap: wrap; gap: 2px; background: #353535; border-bottom: 1px solid #4a4a4a; } .git-files-breadcrumb:empty { display: none; } .git-files-breadcrumb-item { cursor: pointer; color: #58a6ff; padding: 2px 4px; border-radius: 3px; } .git-files-breadcrumb-item:hover { background: rgba(88, 166, 255, 0.1); text-decoration: underline; } .git-files-breadcrumb-current { color: #e0e0e0; font-weight: 700; cursor: default; padding: 2px 4px; } .git-files-breadcrumb-sep { color: #5a5a5a; padding: 0 2px; } /* ファイルツリー（GitHub と同じ 3 カラム：icon|name|message|time） */ .git-files-tree { max-height: 520px; overflow-y: auto; background: #353535; } .git-files-row { display: grid; grid-template-columns: 32px 280px 1fr 130px; gap: 16px; align-items: center; padding: 10px 16px; border-top: 1px solid #4a4a4a; cursor: pointer; transition: background 0.1s; font-size: 13px; } .git-files-row:first-child { border-top: none; } .git-files-row:hover { background: rgba(88, 166, 255, 0.06); } .git-files-row-parent { background: rgba(88, 166, 255, 0.03); color: #58a6ff; } .git-files-row-icon { font-size: 16px; text-align: center; line-height: 1; } .git-files-row-name { color: #58a6ff; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .git-files-row-name-dir { color: #79b8ff; font-weight: 600; } .git-files-row:hover .git-files-row-name { text-decoration: underline; } .git-files-row-commit { color: #a8a8a8; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .git-files-row-time { color: #a8a8a8; font-size: 12px; text-align: right; white-space: nowrap; } .git-files-empty { padding: 30px; text-align: center; color: #a8a8a8; font-size: 12px; } /* README ドキュメントタブ */ .git-files-readme-tabs { display: flex; align-items: center; gap: 0; padding: 0 8px; background: #3a3a3a; border-bottom: 1px solid #4a4a4a; } .git-files-readme-tab { padding: 10px 14px; font-size: 12px; font-weight: 600; color: #a8a8a8; cursor: pointer; border-bottom: 2px solid transparent; display: inline-flex; align-items: center; gap: 6px; background: transparent; border-left: none; border-right: none; border-top: none; } .git-files-readme-tab:hover { color: #e0e0e0; } .git-files-readme-tab.is-active { color: #f0f0f0; border-bottom-color: #f97316; } /* README プレビュー */ .git-files-readme-card { margin-top: 14px; } .git-files-readme-body { padding: 24px 32px; background: #2d2d2d; color: #e0e0e0; line-height: 1.7; font-size: 13px; max-height: 600px; overflow-y: auto; } .git-files-readme-body h1, .git-files-readme-body h2, .git-files-readme-body h3 { color: #f0f0f0; margin: 18px 0 10px; padding-bottom: 6px; border-bottom: 1px solid #4a4a4a; } .git-files-readme-body h1 { font-size: 24px; } .git-files-readme-body h2 { font-size: 20px; } .git-files-readme-body h3 { font-size: 16px; border-bottom: none; } .git-files-readme-body p { margin: 8px 0; } .git-files-readme-body code { background: #404040; padding: 2px 6px; border-radius: 3px; font-family: monospace; font-size: 12px; color: #ff7b72; } .git-files-readme-body pre { background: #1c1c1c; border: 1px solid #4a4a4a; padding: 12px; border-radius: 6px; overflow-x: auto; margin: 10px 0; } .git-files-readme-body pre code { background: transparent; padding: 0; color: #e0e0e0; } .git-files-readme-body ul, .git-files-readme-body ol { padding-left: 24px; margin: 8px 0; } .git-files-readme-body a { color: #58a6ff; text-decoration: none; } .git-files-readme-body a:hover { text-decoration: underline; } .git-files-readme-body img { max-width: 100%; } .git-files-readme-body blockquote { border-left: 3px solid #58a6ff; padding-left: 12px; margin: 10px 0; color: #a8a8a8; } /* ファイル単体プレビュー */ .git-files-preview-card { margin-top: 14px; } .git-files-preview-body { padding: 16px 18px; background: #1c1c1c; color: #e0e0e0; font-family: monospace; font-size: 12px; line-height: 1.6; max-height: 560px; overflow: auto; white-space: pre-wrap; word-break: break-all; margin: 0; } /* ── ④ アクティビティタイムライン ────────────────────────────────── */ .git-timeline-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; } .git-timeline-group { display: flex; flex-direction: column; gap: 4px; } .git-timeline-group-head { font-size: 10px; font-weight: 700; color: #a8a8a8; text-transform: uppercase; letter-spacing: 0.06em; padding: 4px 0; border-bottom: 1px solid #404040; } .git-timeline-group-bar { display: flex; align-items: center; gap: 4px; padding: 6px 0; } .git-timeline-dot { width: 12px; height: 12px; border-radius: 50%; background: #58a6ff; border: 2px solid #353535; box-shadow: 0 0 0 1px #58a6ff; flex-shrink: 0; cursor: pointer; transition: transform 0.12s; } .git-timeline-dot:hover { transform: scale(1.3); z-index: 2; } .git-timeline-line { flex: 0 0 12px; height: 2px; background: linear-gradient(to right, #58a6ff66, #58a6ff66); } .git-timeline-group-count { margin-left: 8px; font-size: 10px; color: #a8a8a8; } /* プロジェクトメニュー内のリポジトリ行 */ .git-project-menu-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #404040; cursor: pointer; } .git-project-menu-row:hover { background: #3a3a3a; } .git-project-menu-row:last-child { border-bottom: none; } .git-project-menu-row-info { flex: 1; min-width: 0; } .git-project-menu-row-name { font-size: 13px; font-weight: 700; color: #58a6ff; display: flex; align-items: center; gap: 6px; } .git-project-menu-row-desc { font-size: 11px; color: #a8a8a8; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .git-project-menu-row-meta { display: flex; gap: 8px; margin-top: 4px; font-size: 10px; color: #a8a8a8; } .git-project-menu-row.active { background: rgba(88, 166, 255, 0.1); border-left: 3px solid #58a6ff; padding-left: 11px; } /* ブランチメニュー */ .git-branch-menu-row { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid #404040; cursor: pointer; font-family: monospace; font-size: 12px; color: #e0e0e0; } .git-branch-menu-row:hover { background: #3a3a3a; } .git-branch-menu-row:last-child { border-bottom: none; } .git-branch-menu-row.active { background: rgba(88, 166, 255, 0.1); color: #58a6ff; font-weight: 700; } .git-branch-menu-row-icon { color: #58a6ff; } .git-branch-menu-row-default { font-size: 9px; padding: 1px 6px; background: rgba(218, 153, 34, 0.15); color: #d29922; border: 1px solid #d29922; border-radius: 8px; text-transform: uppercase; letter-spacing: 0.05em; } .git-card { background: #353535; border: 1px solid #4a4a4a; border-radius: 8px; overflow: hidden; } .git-card-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #3a3a3a; border-bottom: 1px solid #4a4a4a; } .git-card-head-title { font-size: 13px; font-weight: 700; color: #f0f0f0; flex: 1; } .git-card-head-actions { display: flex; gap: 6px; align-items: center; } .git-card-btn { padding: 4px 10px; font-size: 11px; background: #404040; border: 1px solid #4a4a4a; border-radius: 6px; color: #e0e0e0; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; } .git-card-btn:hover { background: #4a4a4a; border-color: #5a5a5a; color: #f0f0f0; } .git-card-btn-link { color: #58a6ff; } .git-card-btn-link:hover { color: #79b8ff; } .git-card-half { flex: 1; min-width: 0; } /* ユーザーカード */ .git-user-card { padding: 18px; } .git-user-card-row { display: flex; align-items: center; gap: 16px; } .git-user-avatar { width: 64px; height: 64px; border-radius: 50%; border: 2px solid #4a4a4a; flex-shrink: 0; } .git-user-info { flex: 1; min-width: 0; } .git-user-name { font-size: 18px; font-weight: 700; color: #f0f0f0; line-height: 1.3; } .git-user-login { font-size: 13px; color: #a8a8a8; margin-top: 2px; } .git-user-meta { display: flex; gap: 14px; margin-top: 8px; flex-wrap: wrap; } .git-user-meta-item { font-size: 11px; color: #a8a8a8; display: inline-flex; align-items: center; gap: 4px; } .git-user-meta-item strong { color: #e0e0e0; font-weight: 700; } .git-user-actions { display: flex; gap: 6px; flex-direction: column; align-items: flex-end; } /* リポジトリ検索 */ .git-repo-filter { width: 240px; padding: 4px 10px; background: #2d2d2d; border: 1px solid #4a4a4a; border-radius: 6px; color: #e0e0e0; font-size: 11px; } .git-repo-filter:focus { outline: none; border-color: #58a6ff; } /* リポジトリ一覧 */ .git-repos-list { max-height: 360px; overflow-y: auto; } .git-repo-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid #404040; cursor: pointer; transition: background 0.12s; } .git-repo-row:hover { background: #3a3a3a; } .git-repo-row:last-child { border-bottom: none; } .git-repo-row.git-repo-row-selected { background: rgba(56, 139, 253, 0.15); border-left: 3px solid #58a6ff; padding-left: 11px; } .git-repo-icon { font-size: 18px; color: #a8a8a8; flex-shrink: 0; } .git-repo-info { flex: 1; min-width: 0; } .git-repo-name { font-size: 13px; font-weight: 700; color: #58a6ff; display: flex; align-items: center; gap: 6px; } .git-repo-visibility { font-size: 10px; padding: 1px 8px; border-radius: 12px; font-weight: 500; border: 1px solid #4a4a4a; color: #a8a8a8; } .git-repo-visibility.private { border-color: #d29922; color: #d29922; } .git-repo-desc { font-size: 11px; color: #a8a8a8; margin-top: 4px; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .git-repo-meta { display: flex; gap: 12px; margin-top: 4px; font-size: 10px; color: #a8a8a8; } .git-repo-meta-lang { display: inline-flex; align-items: center; gap: 4px; } .git-repo-meta-lang-dot { width: 10px; height: 10px; border-radius: 50%; background: #f1e05a; } .git-repo-actions { display: flex; gap: 4px; flex-shrink: 0; } /* リポジトリ詳細 */ #git-repo-detail-body { padding: 14px; } .git-repo-detail-desc { font-size: 12px; color: #e0e0e0; line-height: 1.6; margin-bottom: 12px; } .git-repo-detail-stats { display: flex; gap: 16px; flex-wrap: wrap; font-size: 11px; color: #a8a8a8; padding: 8px 0; border-top: 1px solid #404040; border-bottom: 1px solid #404040; margin-bottom: 12px; } .git-repo-detail-stat strong { color: #e0e0e0; } /* ブランチ + コミット 2カラム */ #git-branch-commit-row { display: flex; gap: 12px; } .git-branches-list, .git-commits-list { max-height: 280px; overflow-y: auto; } .git-branch-row { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid #404040; cursor: pointer; transition: background 0.1s; } .git-branch-row:hover { background: #3a3a3a; } .git-branch-row:last-child { border-bottom: none; } .git-branch-row.git-branch-active { background: rgba(56, 139, 253, 0.1); border-left: 3px solid #58a6ff; padding-left: 11px; } .git-branch-icon-small { color: #58a6ff; font-size: 12px; } .git-branch-name { flex: 1; font-family: monospace; font-size: 12px; color: #e0e0e0; } .git-branch-default { font-size: 9px; padding: 1px 6px; background: rgba(218, 153, 34, 0.15); color: #d29922; border: 1px solid #d29922; border-radius: 8px; text-transform: uppercase; letter-spacing: 0.05em; } .git-commit-row { padding: 10px 14px; border-bottom: 1px solid #404040; cursor: pointer; transition: background 0.1s; } .git-commit-row:hover { background: #3a3a3a; } .git-commit-row:last-child { border-bottom: none; } .git-commit-msg { font-size: 12px; color: #f0f0f0; font-weight: 600; line-height: 1.4; margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .git-commit-meta { display: flex; gap: 8px; align-items: center; font-size: 10px; color: #a8a8a8; } .git-commit-sha { font-family: monospace; background: #2d2d2d; padding: 1px 6px; border-radius: 3px; border: 1px solid #404040; color: #58a6ff; } .git-commit-author { color: #e0e0e0; font-weight: 500; } /* 空状態 */ .git-empty-state { padding: 30px; text-align: center; color: #a8a8a8; font-size: 12px; line-height: 1.8; } /* ローディング */ .git-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; height: 100%; } .git-loading-spinner { width: 32px; height: 32px; border: 3px solid #4a4a4a; border-top-color: #58a6ff; border-radius: 50%; animation: git-spin 0.8s linear infinite; } @keyframes git-spin { to { transform: rotate(360deg); } } #git-loading-text { font-size: 12px; color: #a8a8a8; } /* スクロールバー (Members / Git) */ #members-panel::-webkit-scrollbar, #git-sidebar::-webkit-scrollbar, #git-editor::-webkit-scrollbar { width: 10px; } #members-panel::-webkit-scrollbar-track, #git-sidebar::-webkit-scrollbar-track, #git-editor::-webkit-scrollbar-track { background: #1a1a1e; } #members-panel::-webkit-scrollbar-thumb, #git-sidebar::-webkit-scrollbar-thumb, #git-editor::-webkit-scrollbar-thumb { background: #44444a; border-radius: 5px; border: 2px solid #1a1a1e; } #members-panel::-webkit-scrollbar-thumb:hover, #git-sidebar::-webkit-scrollbar-thumb:hover, #git-editor::-webkit-scrollbar-thumb:hover { background: #54545a; } /* members-panel CSS変数は上部の :root で定義済み（420px） */