/* ============================================================ SnapSight セマンティックトークン（共有） Light＝ライトサーフェス（コーチDB・セッション詳細） Dark ＝ダークサーフェス（生徒側全般・コーチ映像編集・プレイヤー） 使い方: でダーク面に切替 ※ 値の調整はこのファイル1か所で全ページに反映される ============================================================ */ :root { /* サーフェス */ --sf-base:#EBEBEE; /* ページ背景 */ --sf-card:#ffffff; /* カード背景 */ --sf-raised:#f3f4f6; /* 入れ子・台座 */ --sf-inverse:#1a1a1a; /* 反転面（サイドバー・ダークパネル等） */ /* インク階調：ライト面で使うダーク操作色（ボタン/本日/トグル等）。テーマ非依存で全面共通 */ --ink:#111111; /* 主要ダーク */ --ink-hover:#333333; --ink-soft:#4b4b4b; /* セカンダリダーク・トグルON */ --ink-soft-hover:#666666; /* テキスト（3段階に集約） */ --tx-1:#111827; /* 主要 */ --tx-2:#4b555b; /* 補助 */ --tx-3:#9ca3a7; /* ミュート・無効 */ /* 罫線：用途別に3種（色は当面同値、用途で分けて後から個別調整できるようにする） */ --bd-hair:#eef0f2; /* リスト内アイテムの区切り（ヘアライン・薄め） */ --bd-area:#e5e7eb; /* エリア/セクションの区切り（カード内の領域分割・パネル境界・濃いめ） */ --bd-strong:#cbd0d8; /* 操作要素の枠（視認性高め） */ /* アクセント・ステータス（Light/Dark 共通） */ --accent:#dff903; --accent-hover:#b2c702; /* ライムのホバー（一段暗い・ホバー感強め） */ --accent-on:#111111; --accent-dim:rgba(223,249,3,.12); --accent-bd:rgba(223,249,3,.40); --ok:#22c55e; --warn:#f59e0b; --danger:#ef4444; /* 映像編集（ダークエディタ）専用の罫線：常時ダーク面のため白アルファで微階調を制御。 罫線3種（--bd-*）はライト/ダーク切替前提なので、エディタ内のダーク固定罫線は別系統に分離。 ※ エディタ内（video-create.html）のみ参照 */ --editor-bd:rgba(255,255,255,.06); /* エリア区切り（控えめ・溶け込ませる） */ --editor-bd-strong:rgba(255,255,255,.13); /* 操作要素の枠（はっきり） */ } [data-theme="dark"] { --sf-base:#0f0f0f; --sf-card:#181818; --sf-raised:#242424; --sf-inverse:#ffffff; --tx-1:rgba(255,255,255,.92); --tx-2:rgba(255,255,255,.55); --tx-3:rgba(255,255,255,.35); --bd-hair:rgba(255,255,255,.08); --bd-area:rgba(255,255,255,.08); --bd-strong:rgba(255,255,255,.16); } /* ダークページ内で部分的にライト面へ戻す入れ子用（例：映像編集のコメント選択モーダル .cm-*）。 :root のライト値を再宣言し、 配下でもライトに解決させる。 ※ ink/accent/status はテーマ非依存（dark で上書きしていない）ため再宣言不要 */ [data-theme="light"] { --sf-base:#EBEBEE; --sf-card:#ffffff; --sf-raised:#f3f4f6; --sf-inverse:#1a1a1a; --tx-1:#111827; --tx-2:#4b555b; --tx-3:#9ca3a7; --bd-hair:#eef0f2; --bd-area:#e5e7eb; --bd-strong:#cbd0d8; } /* ============================================================ スクロールバー（全ページ共通・細い4px） thumb はテーマ追従（--bd-strong ＝ ライト:#cbd0d8 ／ ダーク:白16%）。 コーチ/管理系（design-system.css の 4px スクロールバー #cbd5e1）と同方式＝webkit疑似要素で統一。 ⚠ Chromium系は scrollbar-width/color を指定すると ::-webkit-scrollbar が無効化され逆に太く（thin≒10px）なる。 標準プロパティ（Firefox用）は @supports で webkit 非対応ブラウザに限定する。 ============================================================ */ ::-webkit-scrollbar { width: 4px; height: 4px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--bd-strong); border-radius: 2px; } @supports not selector(::-webkit-scrollbar) { html { scrollbar-width: thin; scrollbar-color: var(--bd-strong) transparent; } } /* ── スクール名/ロゴのクローク ── data.js(applySchoolBranding) が実値を入れて html.ss-school-ready を付けるまで隠す。 ＝ページ読込/リロード時に「変更前のテキスト/デフォルト画像」が一瞬出るのを防ぐ（visibility なので場所は確保＝レイアウトずれ無し）。 */ [data-school-name], img[data-school-logo] { visibility: hidden; } html.ss-school-ready [data-school-name], html.ss-school-ready img[data-school-logo] { visibility: visible; }