/* * This is a manifest file that'll be compiled into application.css. * * With Propshaft, assets are served efficiently without preprocessing steps. You can still include * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard * cascading order, meaning styles declared later in the document or manifest will override earlier ones, * depending on specificity. * * Consider organizing styles into separate files for maintainability. */ /* Driver.js オンボーディングツアーのカスタムスタイル */ .onboarding-wide .driver-popover { max-width: 420px; } /* === 次世代UIアニメーション === */ /* ページ遷移フェードイン（Turbo Drive） */ @keyframes pageFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } main { animation: pageFadeIn 0.18s ease-out; } /* Turbo プログレスバー */ .turbo-progress-bar { height: 2px; background: linear-gradient(90deg, #6366f1, #a855f7); } /* トースト スライドイン */ @keyframes toastSlideIn { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } } @keyframes toastSlideOut { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(100%); } } .toast-item { animation: toastSlideIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); } .toast-exit { animation: toastSlideOut 0.2s ease-in forwards; } /* モバイルドロワー */ @keyframes drawerSlideIn { from { transform: translateX(-100%); } to { transform: translateX(0); } } @keyframes drawerSlideOut { from { transform: translateX(0); } to { transform: translateX(-100%); } } .drawer-open { animation: drawerSlideIn 0.22s ease-out forwards; } .drawer-close { animation: drawerSlideOut 0.18s ease-in forwards; } /* Glass morphism */ .glass-panel { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* stat card hover */ .card-hover:hover { border-color: rgba(99, 102, 241, 0.4); box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.1), 0 8px 32px rgba(0, 0, 0, 0.3); } /* === ダークモード一括オーバーライド === 各ビューテンプレート（80+ファイル）に個別 dark: クラスを追加する代わりに、 CSSレベルでTailwindユーティリティをダークモード時にオーバーライドする。 .dark クラスが に付与されている場合のみ適用される。 */ /* --- 背景色 --- */ .dark .bg-white { background-color: #18181b; } /* zinc-900 */ .dark .bg-gray-50 { background-color: #1f1f23; } /* zinc-900より少し明るく — thead等の微妙な差を出す */ .dark .bg-gray-100 { background-color: #27272a; } /* zinc-800 */ .dark .bg-gray-200 { background-color: #3f3f46; } /* zinc-700 — フィルタータブ等 */ .dark .bg-gray-300 { background-color: #52525b; } /* zinc-600 — 入力背景等 */ /* --- アルファ修飾子付き背景色（Tailwind v4: bg-{color}-{n}/{alpha}） --- Tailwindの /30 等のalpha修飾子は別セレクタを生成するため、 .dark .bg-red-50 のオーバーライドでは効かない。個別に定義が必要。 */ /* gray系 alpha */ .dark [class*="bg-gray-50\/"] { background-color: rgba(39, 39, 42, 0.3); } .dark [class*="bg-gray-100\/"] { background-color: rgba(39, 39, 42, 0.3); } /* red系 alpha */ .dark [class*="bg-red-50\/"] { background-color: rgba(239, 68, 68, 0.08); } .dark [class*="bg-red-900\/"] { background-color: rgba(239, 68, 68, 0.15); } /* amber系 alpha */ .dark [class*="bg-amber-50\/"] { background-color: rgba(245, 158, 11, 0.08); } /* green系 alpha */ .dark [class*="bg-green-900\/"] { background-color: rgba(34, 197, 94, 0.15); } /* yellow系 alpha */ .dark [class*="bg-yellow-900\/"] { background-color: rgba(234, 179, 8, 0.15); } /* indigo系 alpha */ .dark [class*="bg-indigo-50\/"] { background-color: rgba(99, 102, 241, 0.08); } /* --- thead 視認性強化 --- */ .dark thead { border-bottom: 1px solid rgba(63, 63, 70, 0.6); } .dark thead th { color: #a1a1aa !important; /* zinc-400 — ラベルとして明確に読める */ } /* --- テーブルセル・本文のデフォルトテキスト色 --- 色クラス未指定の や

はブラウザデフォルト(黒)が適用され、 ダーク背景に埋もれる。明示的にベースカラーを設定する。 */ .dark td, .dark th, .dark label { color: #d4d4d8; /* zinc-300 — 本文として十分な可読性 */ } /* --- テキスト色 --- ダークモードの文字色階層設計: - gray-900/800: 見出し・本文 → 明確に白寄り（zinc-100/200） - gray-700: リンク・強調副テキスト → 読みやすい明るさ（zinc-300） - gray-600: テーブル本文・メール等 → 十分な可読性（zinc-400） - gray-500: ラベル・thead・説明文 → 読める副テキスト（zinc-400）★修正: zinc-500では暗すぎた - gray-400: 単位・補足・プレースホルダー → 控えめだが視認可能（zinc-500）★修正: zinc-600では消えていた */ .dark .text-gray-900 { color: #f4f4f5; } /* zinc-100 */ .dark .text-gray-800 { color: #e4e4e7; } /* zinc-200 */ .dark .text-gray-700 { color: #d4d4d8; } /* zinc-300 */ .dark .text-gray-600 { color: #a1a1aa; } /* zinc-400 */ .dark .text-gray-500 { color: #a1a1aa; } /* zinc-400 ★ラベル・theadが読めるように引き上げ */ .dark .text-gray-400 { color: #71717a; } /* zinc-500 ★補助テキストが視認できるように引き上げ */ /* --- ボーダー色 --- */ .dark .border-gray-200 { border-color: rgba(63, 63, 70, 0.6); } /* zinc-700/60 */ .dark .border-gray-100 { border-color: rgba(39, 39, 42, 0.8); } /* zinc-800/80 */ .dark .border-gray-300 { border-color: #52525b; } /* zinc-600 */ .dark .border-gray-400 { border-color: #71717a; } /* zinc-500 — フォーム枠 */ .dark .border-gray-500 { border-color: #71717a; } /* zinc-500 */ /* ボーダー: amber系 */ .dark .border-amber-100 { border-color: rgba(245, 158, 11, 0.15); } .dark .border-amber-300 { border-color: rgba(245, 158, 11, 0.4); } .dark .border-amber-400 { border-color: rgba(245, 158, 11, 0.5); } .dark .border-amber-500 { border-color: rgba(245, 158, 11, 0.6); } /* ボーダー: red系 */ .dark .border-red-100 { border-color: rgba(239, 68, 68, 0.15); } .dark .border-red-300 { border-color: rgba(239, 68, 68, 0.4); } .dark .border-red-700 { border-color: rgba(239, 68, 68, 0.6); } /* ボーダー: green系 */ .dark .border-green-300 { border-color: rgba(34, 197, 94, 0.4); } .dark .border-green-700 { border-color: rgba(34, 197, 94, 0.6); } /* ボーダー: blue系 */ .dark .border-blue-100 { border-color: rgba(59, 130, 246, 0.15); } .dark .border-blue-200 { border-color: rgba(59, 130, 246, 0.25); } .dark .border-blue-300 { border-color: rgba(59, 130, 246, 0.4); } /* ボーダー: indigo系追加 */ .dark .border-indigo-300 { border-color: rgba(99, 102, 241, 0.35); } .dark .border-indigo-400 { border-color: rgba(99, 102, 241, 0.45); } .dark .border-indigo-500 { border-color: rgba(99, 102, 241, 0.55); } .dark .border-indigo-600 { border-color: rgba(99, 102, 241, 0.65); } /* ボーダー: yellow系 */ .dark .border-yellow-300 { border-color: rgba(234, 179, 8, 0.4); } .dark .border-yellow-700 { border-color: rgba(234, 179, 8, 0.6); } /* --- divide 色 --- */ /* Tailwind v4 の divide-y は :where(.divide-{color} > :not(:last-child)) で border-bottom-width を設定する。旧v3の ~ セレクタとは異なるため両方対応する。 */ .dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(63, 63, 70, 0.6); } .dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(39, 39, 42, 0.8); } .dark .divide-gray-50 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(39, 39, 42, 0.5); } /* Tailwind v4 用: :not(:last-child) パターン */ .dark .divide-gray-200 > :not(:last-child) { border-color: rgba(63, 63, 70, 0.6); } .dark .divide-gray-100 > :not(:last-child) { border-color: rgba(39, 39, 42, 0.8); } .dark .divide-gray-50 > :not(:last-child) { border-color: rgba(39, 39, 42, 0.5); } /* --- ホバー色 --- */ .dark .hover\:bg-gray-50:hover { background-color: #27272a; } /* zinc-800 */ .dark .hover\:bg-gray-100:hover { background-color: #3f3f46; } /* zinc-700 */ /* --- フォーム入力 --- パネル背景(zinc-900 #18181b)と一体化しないよう、 入力フィールドはわずかに明るい背景 + 明確なボーダーで浮かせる */ .dark input, .dark select, .dark textarea { background-color: #27272a; /* zinc-800 — パネル背景より1段明るく */ color: #f4f4f5; border-color: #3f3f46; /* zinc-700 — 明確に見えるボーダー */ } .dark input::placeholder, .dark textarea::placeholder { color: #71717a; } .dark input:focus, .dark select:focus, .dark textarea:focus { border-color: #6366f1; box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.3); /* フォーカスリング */ } /* --- indigo系（リンク・アクセント・バナー） --- */ .dark .text-indigo-100 { color: #e0e7ff; } .dark .text-indigo-200 { color: #c7d2fe; } .dark .text-indigo-300 { color: #a5b4fc; } .dark .text-indigo-400 { color: #818cf8; } .dark .text-indigo-500 { color: #a5b4fc; } /* indigo-300 — バナーアイコン等 */ .dark .text-indigo-600 { color: #818cf8; } /* indigo-400 */ .dark .text-indigo-700 { color: #818cf8; } /* indigo-400 */ .dark .text-indigo-800 { color: #c7d2fe; } /* indigo-200 — バナー内テキスト */ .dark .text-indigo-900 { color: #e0e7ff; } /* indigo-100 */ .dark .bg-indigo-50 { background-color: rgba(99, 102, 241, 0.08); } .dark .bg-indigo-100 { background-color: rgba(99, 102, 241, 0.12); } .dark .bg-indigo-600 { background-color: #6366f1; } .dark .border-indigo-100 { border-color: rgba(99, 102, 241, 0.2); } .dark .border-indigo-200 { border-color: rgba(99, 102, 241, 0.25); } /* グラデーションバナー（機能紹介: from-indigo-50 to-purple-50） */ .dark .from-indigo-50 { --tw-gradient-from: rgba(99, 102, 241, 0.08); } .dark .to-purple-50 { --tw-gradient-to: rgba(168, 85, 247, 0.08); } /* --- ステータスバッジ（各色 — 全段階網羅） --- */ /* green */ .dark .bg-green-50 { background-color: rgba(34, 197, 94, 0.1); } .dark .bg-green-100 { background-color: rgba(34, 197, 94, 0.15); } .dark .text-green-100 { color: #dcfce7; } .dark .text-green-300 { color: #86efac; } .dark .text-green-500 { color: #4ade80; } .dark .text-green-600 { color: #4ade80; } .dark .text-green-700 { color: #4ade80; } .dark .text-green-800 { color: #86efac; } .dark .border-green-200 { border-color: rgba(34, 197, 94, 0.3); } /* red */ .dark .bg-red-50 { background-color: rgba(239, 68, 68, 0.1); } .dark .bg-red-100 { background-color: rgba(239, 68, 68, 0.15); } .dark .text-red-300 { color: #fca5a5; } .dark .text-red-400 { color: #f87171; } .dark .text-red-500 { color: #f87171; } .dark .text-red-600 { color: #f87171; } .dark .text-red-700 { color: #fca5a5; } .dark .text-red-800 { color: #fecaca; } .dark .border-red-200 { border-color: rgba(239, 68, 68, 0.3); } /* amber */ .dark .bg-amber-50 { background-color: rgba(245, 158, 11, 0.1); } .dark .bg-amber-100 { background-color: rgba(245, 158, 11, 0.15); } .dark .text-amber-100 { color: #fef3c7; } .dark .text-amber-500 { color: #fbbf24; } .dark .text-amber-600 { color: #fbbf24; } .dark .text-amber-700 { color: #fbbf24; } .dark .text-amber-800 { color: #fcd34d; } .dark .border-amber-200 { border-color: rgba(245, 158, 11, 0.3); } /* purple */ .dark .bg-purple-50 { background-color: rgba(168, 85, 247, 0.08); } .dark .bg-purple-100 { background-color: rgba(168, 85, 247, 0.15); } .dark .text-purple-100 { color: #f3e8ff; } .dark .text-purple-400 { color: #c084fc; } .dark .text-purple-600 { color: #c084fc; } .dark .text-purple-700 { color: #c084fc; } /* blue */ .dark .bg-blue-50 { background-color: rgba(59, 130, 246, 0.1); } .dark .bg-blue-100 { background-color: rgba(59, 130, 246, 0.15); } .dark .text-blue-500 { color: #60a5fa; } .dark .text-blue-600 { color: #93c5fd; } .dark .text-blue-700 { color: #93c5fd; } .dark .text-blue-800 { color: #bfdbfe; } /* yellow */ .dark .bg-yellow-50 { background-color: rgba(234, 179, 8, 0.1); } .dark .bg-yellow-100 { background-color: rgba(234, 179, 8, 0.15); } .dark .text-yellow-300 { color: #fde047; } .dark .text-yellow-500 { color: #eab308; } .dark .text-yellow-600 { color: #fbbf24; } .dark .text-yellow-700 { color: #fde047; } .dark .text-yellow-800 { color: #fef08a; } .dark .border-yellow-200 { border-color: rgba(234, 179, 8, 0.3); } /* --- emerald系（財務表示・コスト・ステータス） --- */ .dark .text-emerald-100 { color: #d1fae5; } .dark .text-emerald-400 { color: #34d399; } .dark .text-emerald-500 { color: #34d399; } .dark .text-emerald-600 { color: #34d399; } .dark .text-emerald-700 { color: #6ee7b7; } .dark .text-emerald-800 { color: #a7f3d0; } .dark .bg-emerald-50 { background-color: rgba(16, 185, 129, 0.1); } .dark .bg-emerald-100 { background-color: rgba(16, 185, 129, 0.15); } .dark .bg-emerald-500 { background-color: #10b981; } .dark .bg-emerald-600 { background-color: #059669; } .dark .bg-emerald-700 { background-color: #047857; } .dark .border-emerald-200 { border-color: rgba(16, 185, 129, 0.3); } .dark .border-emerald-400 { border-color: rgba(16, 185, 129, 0.5); } .dark .hover\:bg-emerald-50:hover { background-color: rgba(16, 185, 129, 0.1); } .dark .hover\:bg-emerald-100:hover { background-color: rgba(16, 185, 129, 0.15); } .dark .hover\:bg-emerald-200:hover { background-color: rgba(16, 185, 129, 0.2); } /* --- teal系（「外注」ステータスバッジ） --- */ .dark .text-teal-700 { color: #2dd4bf; } .dark .bg-teal-50 { background-color: rgba(20, 184, 166, 0.1); } .dark .bg-teal-100 { background-color: rgba(20, 184, 166, 0.15); } .dark .border-teal-200 { border-color: rgba(20, 184, 166, 0.3); } .dark .to-teal-50 { --tw-gradient-to: rgba(20, 184, 166, 0.1); } /* --- violet系（分析・ダッシュボード指標） --- */ .dark .text-violet-500 { color: #a78bfa; } .dark .text-violet-600 { color: #a78bfa; } .dark .text-violet-700 { color: #c4b5fd; } .dark .bg-violet-50 { background-color: rgba(139, 92, 246, 0.08); } .dark .bg-violet-100 { background-color: rgba(139, 92, 246, 0.12); } .dark .bg-violet-500 { background-color: #8b5cf6; } .dark .border-violet-200 { border-color: rgba(139, 92, 246, 0.25); } .dark .hover\:bg-violet-50:hover { background-color: rgba(139, 92, 246, 0.08); } .dark .hover\:text-violet-700:hover { color: #c4b5fd; } /* --- slate系（補助表示） --- */ .dark .text-slate-200 { color: #e2e8f0; } .dark .text-slate-300 { color: #cbd5e1; } .dark .text-slate-400 { color: #94a3b8; } /* --- cyan系（グラデーション） --- */ .dark .to-cyan-500 { --tw-gradient-to: #06b6d4; } /* --- orange系（Chart.js等で使用される可能性） --- */ .dark .text-orange-600 { color: #fb923c; } .dark .bg-orange-50 { background-color: rgba(249, 115, 22, 0.1); } .dark .bg-orange-100 { background-color: rgba(249, 115, 22, 0.15); } /* --- ボタン --- */ .dark .bg-indigo-600:hover { background-color: #4f46e5; } .dark .hover\:bg-indigo-700:hover { background-color: #4338ca; } .dark .hover\:bg-red-50:hover { background-color: rgba(239, 68, 68, 0.1); } .dark .hover\:bg-gray-50:hover { background-color: #27272a; } .dark .hover\:bg-amber-50:hover { background-color: rgba(245, 158, 11, 0.1); } .dark .hover\:bg-amber-200:hover { background-color: rgba(245, 158, 11, 0.2); } .dark .hover\:text-amber-900:hover { color: #fef3c7; } .dark .hover\:text-amber-800:hover { color: #fcd34d; } .dark .hover\:bg-red-200:hover { background-color: rgba(239, 68, 68, 0.2); } .dark .hover\:text-red-900:hover { color: #fecaca; } /* --- アクションボタン（border付きボタン） --- */ .dark .border.rounded-md, .dark .border.rounded { border-color: #52525b; } /* --- サブタブ切替フェード --- */ .tab-fade-in { animation: tabFadeIn 300ms ease-out; } @keyframes tabFadeIn { from { opacity: 0; } to { opacity: 1; } } /* --- シャドウ調整 --- */ .dark .shadow-sm { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } .dark .shadow { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3); } .dark .shadow-md { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4); } .dark .shadow-lg { box-shadow: 0 10px 15px rgba(0, 0, 0, 0.4); } .dark .shadow-xl { box-shadow: 0 20px 25px rgba(0, 0, 0, 0.5); }