/* ================================================================================ * ファイル名: app/assets/stylesheets/luxury_components.css * 作成日: 2026-02-18 * 最終更新日: 2026-05-14 * 2026-05-13: パンくず mobile レスポンシブ追加（@media 768px / 480px、46行） * 2026-05-14: ヘッダコメント整備・改善案コメント追記（実装無変更） * ================================================================================ * * 【リファクタリング基準】（コメント行は行数カウントから除外） * -------------------------------------------------------------------------------- * 現在の物理行数: 1536行（2026-05-14 計測） * 実コード行数: 約1500行（コメント除外） * 判定: 🚨 リファクタリング必須（基準1200行を超過） * * 【改善案・対応方針（2026-05-14 追記）】 * 本ファイルは ラグジュアリーボタン / カード / 統計 / パンくず / 進捗バーなど * 多責務クラスを 1 ファイルに集約しているため、責務別の分割を推奨。 * 推奨分割例: * - luxury_buttons.css …… .luxury-btn-* バリエーション群 * - luxury_breadcrumb.css …… .luxury-breadcrumb-* + テーマ + mobile * - luxury_cards.css …… カード系 (.luxury-card, .luxury-stat-card 等) * - luxury_progress.css …… .luxury-progress-* 進捗バー * - luxury_theme_overrides.css …… [data-theme="light"] / [data-theme="wood"] * 分割後の各ファイルは 300〜500 行程度に収まる見込み。 * 分割時の注意: !important が多用されているため、各ファイル末尾のテーマ * オーバーライドは「分割元基底ルールが load された後」に load する順序を守ること * （CSS カスケード崩れ防止）。 * -------------------------------------------------------------------------------- * 基準（CSS）: * 1. 500行未満 → 完璧 * 2. 800行未満 → 問題なし * 3. 1200行未満 → 注意喚起。リファクタリング要検討 * 4. 1200行以上 → リファクタリング必須 * ================================================================================ * * 【概要】 * ラグジュアリーテーマの共通UIコンポーネントスタイル。 * 統計カード・パンくずリスト・プライマリボタン・進捗サマリ等を定義。 * application.css からリファクタリング分割されたファイル。 * * 【改善提案】（2026-04-19 更新） * 2026-04-19 時点で 1476 行に到達（前回計測 1073 行から +403 行増加）。 * 1200 行基準を超過したため、以下の分割を早急に推奨: * 1. luxury_stats.css: 統計カード関連（約200行） * 2. luxury_buttons.css: ボタン・プログレスバー関連（約150行） * 3. luxury_list_header.css: 一覧ヘッダー（.app-list-header 等、約30行） * 上記3つで約380行削減、本ファイルは約1100行で「注意喚起」基準に戻る。 * * 【ジュニア向け解説】 * CSSファイルが1200行を超えると、特定スタイルの探索に時間がかかり、 * 不要な上書きや意図しないスタイル衝突のリスクが上がる。 * 1ファイル1責務（コンポーネント単位）の原則で分割するのが理想。 * * 【セクション構成】 * 1. 統計カード（.stats-card / .stats-cards-container） * 2. パンくずリスト（.luxury-breadcrumb） * 3. プロジェクトアイコン・タイトル * 4. プライマリボタン・カンバンボタン * 5. カウンター（モバイル対応含む） * 6. グローエフェクトアニメーション * 7. 消化率セクション（タスク件数/SP） * 8. 進捗サマリ・プログレスバー・期限切れバッジ * 9. ライトテーマオーバーライド * 10. ウッドテーマオーバーライド * * 【変更履歴】 * 2026-03-29: ヘッダーコメント統一フォーマットに更新、改善提案追記 * 2026-04-18: モバイル viewport 対応 * - .luxury-project-container の min-height: 100vh !important → 100dvh !important * → VisionBoard ラグジュアリープロジェクト詳細画面の表示領域を * iOS Safari のアドレスバー動的表示にも追従させる * - 本対応は 1 箇所のみ軽微だが、1073 行（注意レベル）は継続。 * Phase 分割（luxury_stats.css / luxury_buttons.css）を推奨。 * ================================================================================*/ /* ------------------------------------------------------------------------------ 一覧ページ共通ヘッダー（タイトル + アクションボタン横並び） 2026-04-19 追加: task_projects/projects 一覧で重複していたインラインスタイルを 共通クラスに集約。ヘッダー直下のカード/テーブルとの余白（24px）もここで一元管理。 対象: app/views/app/task_projects/index.html.erb app/views/app/projects/index.html.erb ------------------------------------------------------------------------------ */ .app-list-header { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 24px; } /* ダークテーマラグジュアリー統計カード */ .stats-cards-container { display: flex !important; flex-direction: row !important; gap: 1.5rem !important; margin-bottom: 2.5rem !important; } .stats-card { flex: 1 !important; background: linear-gradient(145deg, rgba(31, 41, 55, 0.8), rgba(17, 24, 39, 0.9)) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; border-radius: 1.5rem !important; padding: 2rem !important; border: 1px solid rgba(55, 65, 81, 0.3) !important; box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important; min-height: 140px !important; position: relative !important; overflow: hidden !important; } .stats-card::before { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; background: linear-gradient( 45deg, transparent 30%, rgba(255, 255, 255, 0.03) 50%, transparent 70% ) !important; transform: translateX(-100%) !important; transition: transform 0.6s ease !important; } .stats-card:hover::before { transform: translateX(100%) !important; } .stats-card:hover { transform: translateY(-8px) scale(1.02) !important; box-shadow: 0 32px 64px -12px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; border-color: rgba(55, 65, 81, 0.5) !important; } .stats-card-content { display: flex !important; align-items: center !important; justify-content: space-between !important; height: 5rem !important; position: relative !important; z-index: 2 !important; } .stats-card-text { flex: 1 !important; } .stats-card-label { color: rgba(156, 163, 175, 0.9) !important; font-size: 0.875rem !important; font-weight: 500 !important; margin-bottom: 0.5rem !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; } .stats-card-value { font-size: 2.25rem !important; font-weight: 800 !important; line-height: 2.5rem !important; background: linear-gradient(135deg, currentColor, rgba(255, 255, 255, 0.8)) !important; -webkit-background-clip: text !important; background-clip: text !important; filter: drop-shadow(0 0 8px currentColor) !important; } .stats-card-value.blue { color: #60a5fa !important; } .stats-card-value.green { color: #34d399 !important; } .stats-card-value.amber { color: #fbbf24 !important; } .stats-card-value.purple { color: #a78bfa !important; } .stats-card-icon { padding: 0.625rem !important; border-radius: 0.75rem !important; margin-left: 0.75rem !important; position: relative !important; overflow: hidden !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; } .stats-card-icon::before { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; background: linear-gradient(45deg, currentColor, transparent) !important; opacity: 0.1 !important; border-radius: 0.75rem !important; } .stats-card-icon.blue { background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(29, 78, 216, 0.1)) !important; border: 1px solid rgba(59, 130, 246, 0.2) !important; color: #60a5fa !important; } .stats-card-icon.green { background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(5, 150, 105, 0.1)) !important; border: 1px solid rgba(16, 185, 129, 0.2) !important; color: #34d399 !important; } .stats-card-icon.amber { background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(217, 119, 6, 0.1)) !important; border: 1px solid rgba(245, 158, 11, 0.2) !important; color: #fbbf24 !important; } .stats-card-icon.purple { background: linear-gradient(135deg, rgba(147, 51, 234, 0.15), rgba(126, 34, 206, 0.1)) !important; border: 1px solid rgba(147, 51, 234, 0.2) !important; color: #a78bfa !important; } .stats-card-icon svg { width: 20px !important; height: 20px !important; max-width: 20px !important; max-height: 20px !important; filter: drop-shadow(0 0 3px currentColor) !important; position: relative !important; z-index: 2 !important; } /* レスポンシブ対応 */ @media (max-width: 1024px) { .stats-cards-container { gap: 1rem !important; } .stats-card { padding: 1.5rem !important; } } @media (max-width: 768px) { .stats-cards-container { flex-direction: column !important; gap: 1rem !important; } } /* ===== VisionBoard ラグジュアリープロジェクト詳細画面 ===== */ .luxury-project-container { background: transparent !important; /* 透明化（2025-11-02 ログイン画面の背景を表示） */ min-height: 100dvh !important; padding: 0 2rem 2rem 2rem !important; } /* ラグジュアリーヘッダー */ .luxury-project-header { position: relative !important; background: transparent !important; padding: 0 !important; margin: 0 0 1rem 0 !important; } /* ================================================================================ パンくずリスト（Breadcrumb Navigation）共通スタイル ================================================================================ 更新日: 2026-01-31 対象: 全13画面で使用されるパンくずナビゲーションのスタイル 【ジュニアエンジニア向け解説】 パンくずリストは、ユーザーが現在の画面位置を把握するためのナビゲーションです。 例: ホーム > プロジェクト > プロジェクト名 【CSSクラス構成】 - .luxury-breadcrumb: パンくずナビゲーション全体のコンテナ（