/* Command Lab 練習ページ（practice-*.html）本格リデザイン仕様: ../../docs/DESIGN_REGULATION.md スコープ: body.clab-practice 配下のみ。index-redesign.css と同様に、他ページと共有するクラス（.header, .footer 等）を子孫セレクタとして上書きし、他ページに影響が及ばないようにしている。各ページのには data-app="vim" のようにアプリ名を指定する。それにより design-tokens.css の [data-app] ルールが --clab-app-accent / --clab-app-accent-ink を切り替え、練習中のアプリごとに色が変わる。構造・コンポーネントの形は全ページ共通。ヘッダー/フッターは index-redesign.css と同じ理由（ロゴ資産の都合）で常時ダーク固定。 */ body.clab-practice { background-color: var(--clab-bg-canvas); color: var(--clab-text-primary); font-family: var(--clab-font-sans); } body.clab-practice .wrapper { background-color: var(--clab-bg-canvas); } body.clab-practice .header { background-color: var(--clab-gray-950); } body.clab-practice .header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--clab-app-accent) 50%, transparent 100%); box-shadow: 0 0 10px 0 var(--clab-app-accent); opacity: .55; pointer-events: none; } body.clab-practice .footer { background-color: var(--clab-gray-950); } /* パンくず */ body.clab-practice .bread__li { background-color: var(--clab-bg-surface-alt); color: var(--clab-app-accent); } body.clab-practice .bread__li::after { border-color: var(--clab-app-accent); } body.clab-practice .bread__li h1 { color: var(--clab-text-primary); font-weight: var(--clab-weight-bold); } /* style.css の a:link,a:visited,a:hover,a:active{color:#518736} は擬似クラス込みで詳細度が高く、.bread__li の継承色より優先されてしまうため、同じ擬似クラス構成で明示的に上書きする（HOMEリンクの視認性対策） */ body.clab-practice .bread__li a:link, body.clab-practice .bread__li a:visited, body.clab-practice .bread__li a:hover, body.clab-practice .bread__li a:active { color: var(--clab-app-accent); } /* サイドパネル・カード */ body.clab-practice .leftnav__inner, body.clab-practice .rightnav__inner, body.clab-practice .sidebar, body.clab-practice .typeListArea { background-color: var(--clab-bg-surface); border: 1px solid var(--clab-border); } body.clab-practice .main__inner { background-color: var(--clab-bg-surface); border: 1px solid var(--clab-border); } body.clab-practice .previewArea__wrap { border: 1px solid var(--clab-border); } body.clab-practice .dataNumber { color: var(--clab-text-muted); } body.clab-practice .typeName { background-color: var(--clab-bg-surface-alt); color: var(--clab-text-secondary); } /* スコア表示（パンくず横） */ body.clab-practice .dispPoint { background-color: var(--clab-bg-surface-alt); color: var(--clab-app-accent); } body.clab-practice .dispPoint .col-5 { border-right-color: var(--clab-app-accent); } /* キー表記の「+」記号: 主張を抑えたグレー、太字なし */ body.clab-practice .sp_plus { color: var(--clab-text-secondary); font-weight: var(--clab-weight-regular); } /* 主要アクション（使い方 / START・STOP / URL取得）はアプリアクセントで統一 */ body.clab-practice .btn, body.clab-practice .modeChange, body.clab-practice .urlshare-btn { background-color: var(--clab-app-accent); color: var(--clab-app-accent-ink); } body.clab-practice .btn:link, body.clab-practice .btn:visited, body.clab-practice .btn:hover, body.clab-practice .btn:active { color: var(--clab-app-accent-ink); } /* 副次アクション（除外・復活）はゴースト表示に */ body.clab-practice .btn-color2 { background-color: transparent; border: 1px solid var(--clab-border-strong); color: var(--clab-text-secondary); } /* PRE / NEXT */ body.clab-practice .movebtn { background-color: var(--clab-bg-surface-alt); border: 1px solid var(--clab-border); color: var(--clab-text-primary); } /* トグルスイッチ（ガイドモード / リピートモード） */ body.clab-practice .switch::before, body.clab-practice .typeListArea .switch::before { background-color: var(--clab-border-strong); } body.clab-practice .switch::after, body.clab-practice .typeListArea .switch::after { background-color: var(--clab-text-secondary); } body.clab-practice .is_on.switch::after, body.clab-practice .typeListArea .is_on.switch::after { background-color: var(--clab-app-accent); } /* タイピング入力欄: 常時ダークのターミナル風。文字色はアプリアクセント */ body.clab-practice .inputarea { background-color: var(--clab-gray-950); color: var(--clab-app-accent); } body.clab-practice .is_inputMode .cursol { background-color: var(--clab-app-accent); color: var(--clab-gray-950); } /* スコア表示 */ body.clab-practice .result { color: var(--clab-app-accent); } /* 右カラムの練習一覧 */ body.clab-practice .rightNav { background-color: var(--clab-bg-surface); border: 1px solid var(--clab-border); } body.clab-practice .rightNav__h { background-color: var(--clab-app-accent); color: var(--clab-app-accent-ink); } body.clab-practice .rightNav__li a { color: var(--clab-text-primary); } body.clab-practice .rightNav__li a::before { border-color: var(--clab-app-accent); } /* 最上部へ戻るボタン */ body.clab-practice .return_btn { background-color: var(--clab-app-accent); color: var(--clab-app-accent-ink); } body.clab-practice .return_btn::before { background-color: var(--clab-app-accent-ink); } body.clab-practice .return_btn::after { border-color: var(--clab-app-accent-ink); } /* URL共有欄のコピー・入力枠 */ body.clab-practice .urlshare-btn__urlbar { background-color: var(--clab-bg-surface); } body.clab-practice .urlshare-btn__urlbar__inner { color: var(--clab-text-secondary); } body.clab-practice .urlshare-btn__urlbar__inner:hover, body.clab-practice .urlshare-btn__urlbar__inner:visited, body.clab-practice .urlshare-btn__urlbar__inner:active { color: var(--clab-text-secondary); } body.clab-practice .urlshare-btn__urlbar__inner__copybtn { background-color: var(--clab-app-accent); color: var(--clab-app-accent-ink); }