/* ============================================================================ * luxury_buttons.css — 共通ラグジュアリーボタン「構造」レイヤー（デザインシステム単一ソース） * * 作成日: 2026-06-27 * コメント整備日: 2026-07-02 * * 【リファクタリング基準】（CSS・コメント行はカウント除外） * 1. 500行未満: 完璧 * 2. 800行未満: 問題なし * 3. 1200行未満: 注意喚起（リファクタリング要検討） * 4. 1200行以上: リファクタリング必須 * 現在のコード行数: 32 行（コメント・空行除外・2026-07-02 計測 / 総行 83 行） * 判定: 完璧（500 行未満）。構造のみの薄いファイル。色バリアントを足して肥大化させない * ＝下記「非対象」を厳守すればこのサイズを維持できる。 * * 目的: * .luxury-btn の「テーマ非依存の構造部分」（base / ::before シマー / :hover::before / * -icon）を 1 ファイルに集約し、各ページ固有 CSS への文字単位での再定義（複数ファイルに * またがる重複）を解消する。presentations.css の改善コメント（「共通CSSファイル * （例: luxury_buttons.css）に一元化」）および luxury_components.css ヘッダが指名していた * 集約先がこのファイル。 * * スコープ（重要・段階的移行の第1段）: * 本ファイルが扱うのは「色を持たない構造定義」のみ。値はトークンを含まず、全テーマで不変。 * 各ページの同名定義（presentations / mind_maps_index / projects_index / * task_projects_index など）と文字単位で一致しているため、ページ側の構造定義を撤去しても * 描画は不変（全 3 テーマ）。 * 色バリアント（-primary / -secondary / -success / -warning / -danger / -blue / -sm）は * テーマ依存・ページ別オーバーライドを伴うため本ファイルには含めず、ページ固有 CSS に残す。 * バリアントの共通化は、テーマ別の視覚検証を伴う後続段で個別に行う。 * * 読み込み: * application.html.erb の で luxury_components.css の直後にグローバル読み込みする。 * ページ固有 CSS は content_for :head（後段）で読まれるため、構造定義を撤去していない * ページでは従来どおりページ側が優先される（= 追加しても無影響）。 * board レイアウトでは読み込まない（独自ボタン体系のため。board.html.erb のコメント参照）。 * * 非対象: * - disabled 状態は luxury_components.css 側（グローバル）に既存のため本ファイルでは * 再定義しない（重複・!important 競合を避ける）。 * - ページ固有の派生（.luxury-btn-ai / -mini / -premium / -whiteboard / -full 等）は * 各ページ CSS に残す。 * ============================================================================ */ /* base: テーマ非依存の構造（padding / 角丸 / フォント / レイアウト）。 */ .luxury-btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 24px; border-radius: 12px; font-weight: 600; font-size: 14px; transition: all 0.3s ease; text-decoration: none; border: 1px solid; cursor: pointer; position: relative; overflow: hidden; } /* シマーエフェクト: 透明→白→透明のグラデーション帯を左端外に置き、 ホバー時に左から右へ走らせて「光が流れる」効果を出す。 */ .luxury-btn::before { content: ''; position: absolute; inset: 0; background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%); transform: translateX(-100%); transition: transform 0.6s ease; } .luxury-btn:hover::before { transform: translateX(100%); } /* アイコン（ボタン内 SVG）のサイズ。テーマ非依存。 */ .luxury-btn-icon { width: 18px; height: 18px; /* RTL(ar-SA・dir=rtl)でアイコン⇔ラベル間の余白が外縁へ反転しないよう論理プロパティを使用。 LTR では margin-right と完全に同一解決のため既存表示は不変（2026-06-30 i18n/RTL 対応）。 */ margin-inline-end: 8px; flex-shrink: 0; }