/* ================================================================================ * ファイル名: app/assets/stylesheets/shared_scrollbar.css * 目的: 共通スクロールバースタイル（Gold バリアント）— 任意のスクロール可能エレメントに * 付与できるユーティリティクラスと、ページ全体（document）へのオプトイン。 * ================================================================================ * 【リファクタリング基準】CSS（コメント行は行数カウントから除外）: * 500未満=完璧 / 800未満=問題なし / 1200未満=注意喚起 / 1200以上=リファクタリング必須 * 現状 46 行 = 完璧。ユーティリティ2種のみの小さな共有部品で分割不要。付与日: 2026-07-07 * ================================================================================ * * 【使い方】 * 1. 任意のスクロール領域に金色スクロールバーを付けたい場合: *

…

* * 2. ページ全体（document）の縦スクロールバーを金色にしたい場合: * a) `<%= stylesheet_link_tag "shared_scrollbar" %>` をそのページの head に追加 * b) Stimulus 等で `` に `luxury-scrollbar-gold-page` クラスを付与 * （Turbo Drive 配下では turbo:load / turbo:before-cache で着脱） * * 【トークン依存】 * - --gold-primary (例: #FFD700) — thumb のメインカラー * - --gold-secondary (例: #FFA500) — thumb のホバーカラー * - --gold-primary-rgb (例: 255, 215, 0) — track の半透明背景に使用 * * トークン不在時は #FFD700 / #FFA500 にフォールバックする。 * * 【ブラウザ対応】 * - WebKit (Chromium / Safari): ::-webkit-scrollbar 系で詳細スタイル * - Firefox: scrollbar-width / scrollbar-color で簡易スタイル * - 旧 Edge / IE: 未対応（標準スクロールバー） * * 【関連】 * - app/assets/stylesheets/application.css — グローバルなデフォルトスクロールバー * - app/assets/stylesheets/theme_variables.css — --scrollbar-* / --gold-* トークン定義 * - 利用先: app/views/app/presentations 配下 (ナレッジシェア画面)。※コメント内にグロブの「/」+「*」を書くと単純な走査ツールがコメント開始と誤検知するため文言表記にしている * - 利用先: app/views/shared/_contact_widget.html.erb (問い合わせウィジェット・application レイアウトで読込) * ================================================================================ */ /* -- ユーティリティ: 任意のスクロール領域に付与 ------------------------------ */ .luxury-scrollbar-gold { scrollbar-width: thin; scrollbar-color: var(--gold-primary, #ffd700) transparent; } .luxury-scrollbar-gold::-webkit-scrollbar { width: 8px; height: 8px; } .luxury-scrollbar-gold::-webkit-scrollbar-track { background: rgba(var(--gold-primary-rgb, 255, 215, 0), 0.08); border-radius: 4px; } .luxury-scrollbar-gold::-webkit-scrollbar-thumb { background: var(--gold-primary, #ffd700); border-radius: 4px; transition: background 0.2s ease; } .luxury-scrollbar-gold::-webkit-scrollbar-thumb:hover { background: var(--gold-secondary, #ffa500); } .luxury-scrollbar-gold::-webkit-scrollbar-corner { background: transparent; } /* -- ページ全体オプトイン: に付与すると document の縦スクロールバーが金色 -- */ body.luxury-scrollbar-gold-page { scrollbar-width: thin; scrollbar-color: var(--gold-primary, #ffd700) transparent; } body.luxury-scrollbar-gold-page::-webkit-scrollbar { width: 10px; height: 10px; } body.luxury-scrollbar-gold-page::-webkit-scrollbar-track { background: rgba(var(--gold-primary-rgb, 255, 215, 0), 0.05); } body.luxury-scrollbar-gold-page::-webkit-scrollbar-thumb { background: var(--gold-primary, #ffd700); border-radius: 5px; border: 2px solid var(--bg-primary, #0a0a0a); transition: background 0.2s ease; } body.luxury-scrollbar-gold-page::-webkit-scrollbar-thumb:hover { background: var(--gold-secondary, #ffa500); } body.luxury-scrollbar-gold-page::-webkit-scrollbar-corner { background: transparent; }