/* backoffice-template base CSS * * すべての色を CSS 変数化して * `` でダークモード切替できる。 * * 切替は layout.js の applyTheme() が localStorage / OS 設定を見て自動。 */ :root { /* light theme(default)*/ --bg-page: #f9fafb; --bg-card: #ffffff; --bg-soft: #f3f4f6; --bg-input: #ffffff; --bg-input-hover: #f8fafc; --bg-table-head: #f9fafb; --bg-table-row-hover: #eff6ff; --bg-chip-muted: #f1f5f9; --text: #1a1a2e; --text-heading: #111827; --text-muted: #4b5563; /* 老眼配慮: 白背景でのコントラスト強化 */ --text-muted-strong: #475569; --text-placeholder: #9ca3af; --text-on-primary: #ffffff; --border: #e5e7eb; --border-soft: #f3f4f6; --border-input: #d1d5db; --border-input-focus: #818cf8; --border-input-shadow: rgba(99, 102, 241, 0.2); --primary: #4f46e5; --primary-hover: #4338ca; --primary-active: #3730a3; --primary-soft: #eef2ff; --primary-soft-text: #4338ca; --danger: #ef4444; --danger-hover: #dc2626; --danger-soft: #fef2f2; --danger-soft-text: #b91c1c; --success-soft: #f0fdf4; --success-soft-text: #15803d; --success-soft-border: #bbf7d0; --info-soft: #eff6ff; --info-soft-text: #1d4ed8; --info-soft-border: #bfdbfe; --warn-soft: #fffbeb; --warn-soft-text: #b45309; --modal-backdrop: rgba(0, 0, 0, 0.4); --header-from: #4338ca; --header-to: #4f46e5; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1); --shadow-modal: 0 25px 50px -12px rgba(17, 24, 39, 0.3); color-scheme: light; } :root[data-theme="dark"] { --bg-page: #0f172a; --bg-card: #1e293b; --bg-soft: #334155; --bg-input: #0f172a; --bg-input-hover: #1e293b; --bg-table-head: #1e293b; --bg-table-row-hover: #334155; --bg-chip-muted: #334155; --text: #e2e8f0; --text-heading: #f1f5f9; --text-muted: #aeb9c9; /* 老眼配慮: ダーク背景でのコントラスト強化 */ --text-muted-strong: #cbd5e1; --text-placeholder: #64748b; --text-on-primary: #ffffff; --border: #334155; --border-soft: #1e293b; --border-input: #475569; --border-input-focus: #818cf8; --border-input-shadow: rgba(129, 140, 248, 0.3); --primary: #818cf8; --primary-hover: #6366f1; --primary-active: #4f46e5; --primary-soft: rgba(99, 102, 241, 0.15); --primary-soft-text: #a5b4fc; --danger: #f87171; --danger-hover: #ef4444; --danger-soft: rgba(239, 68, 68, 0.15); --danger-soft-text: #fca5a5; --success-soft: rgba(34, 197, 94, 0.15); --success-soft-text: #86efac; --success-soft-border: rgba(34, 197, 94, 0.3); --info-soft: rgba(59, 130, 246, 0.15); --info-soft-text: #93c5fd; --info-soft-border: rgba(59, 130, 246, 0.3); --warn-soft: rgba(245, 158, 11, 0.15); --warn-soft-text: #fcd34d; --modal-backdrop: rgba(0, 0, 0, 0.65); --header-from: #312e81; --header-to: #4338ca; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5); --shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.7); color-scheme: dark; } * { box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif; -webkit-font-smoothing: antialiased; letter-spacing: 0.02em; font-weight: 500; color: var(--text); background: var(--bg-page); margin: 0; transition: background-color 200ms, color 200ms; } /* ============================================================ Buttons ============================================================ */ .btn { padding: 0.625rem 1.25rem; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 600; transition: all 150ms; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; border: none; line-height: 1.25rem; } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn-primary { background: var(--primary); color: var(--text-on-primary); box-shadow: var(--shadow-md); } .btn-primary:hover { background: var(--primary-hover); } .btn-primary:active { background: var(--primary-active); } .btn-secondary { background: var(--bg-card); color: var(--text-muted-strong); border: 1px solid var(--border); box-shadow: var(--shadow-sm); } .btn-secondary:hover { background: var(--bg-soft); } .btn-ghost { background: transparent; color: var(--text-muted-strong); } .btn-ghost:hover { color: var(--text-heading); background: var(--bg-soft); } .btn-danger { background: var(--danger); color: var(--text-on-primary); } .btn-danger:hover { background: var(--danger-hover); } /* ============================================================ Form ============================================================ */ /* type 無しの素 input も拾う(セレクタ漏れによるダーク崩れ=白背景を構造的に防止) */ .input, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]), select, textarea { border: 1px solid var(--border-input); border-radius: 0.5rem; padding: 0.625rem 0.75rem; font-size: 0.875rem; font-weight: 500; background: var(--bg-input); box-shadow: var(--shadow-sm); transition: all 150ms; font-family: inherit; color: var(--text); } .input:focus, input:focus, select:focus, textarea:focus { outline: none; border-color: var(--border-input-focus); box-shadow: 0 0 0 3px var(--border-input-shadow); } .input::placeholder, input::placeholder, textarea::placeholder { color: var(--text-placeholder); } form label { display: block; font-size: 0.8125rem; color: var(--text-muted-strong); font-weight: 500; } form label > input, form label > select, form label > textarea { width: 100%; display: block; margin-top: 0.375rem; } form label > textarea { min-height: 64px; resize: vertical; } /* form-input / form-label / required / form-hint(モーダル内のフォーム用)*/ .form-label { display: block; margin-bottom: 0.25rem; font-size: 0.875rem; font-weight: 500; color: var(--text-muted-strong); } .form-label code { background: var(--bg-soft); color: var(--primary); padding: 0.05rem 0.35rem; border-radius: 0.25rem; font-size: 0.85em; } .required { color: var(--danger); } .form-hint { font-size: 0.75rem; color: var(--text-muted); font-weight: 400; margin-left: 0.4rem; } .form-input { width: 100%; border: 1px solid var(--border-input); border-radius: 0.5rem; padding: 0.5rem 0.75rem; font-size: 0.875rem; background: var(--bg-input); color: var(--text); } .form-input:focus { outline: none; border-color: var(--border-input-focus); box-shadow: 0 0 0 3px var(--border-input-shadow); } /* ============================================================ Pill button group(単一選択肢を select の代わりに表現) ============================================================ */ .pill-group { display: flex; flex-wrap: wrap; gap: 0.375rem; } .pill { padding: 0.375rem 0.875rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500; background: var(--bg-soft); color: var(--text-muted-strong); border: 1px solid var(--border); cursor: pointer; transition: all 120ms; opacity: 0.6; } .pill:hover { opacity: 0.9; } .pill.pill-active { opacity: 1; background: var(--primary-soft); color: var(--primary-soft-text); border-color: var(--primary); } /* ============================================================ Cards ============================================================ */ .card { background: var(--bg-card); border-radius: 0.75rem; box-shadow: var(--shadow-md); border: 1px solid var(--border-soft); transition: box-shadow 150ms, background-color 200ms; } .card:hover { box-shadow: var(--shadow-lg); } .card.p-4 { padding: 1rem; } .card.p-5 { padding: 1.25rem; } /* ============================================================ Tables ============================================================ */ table { width: 100%; border-collapse: collapse; font-size: 0.95rem; } table thead th { text-align: left; font-size: 0.8125rem; font-weight: 600; color: var(--text-muted); padding: 0.6rem 0.85rem; background: var(--bg-table-head); border-bottom: 1px solid var(--border); white-space: nowrap; } table tbody td { padding: 0.65rem 0.85rem; border-bottom: 1px solid var(--border-soft); vertical-align: middle; white-space: nowrap; color: var(--text); } table tbody tr:hover td { background: var(--bg-table-row-hover); } table tbody tr.clickable { cursor: pointer; } table tbody tr:last-child td { border-bottom: 0; } td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; } td.center, th.center { text-align: center; } /* 積立進捗 */ .sv-item { padding: 10px 0; border-bottom: 1px solid var(--bg-soft); } .sv-item:last-child { border-bottom: 0; } .sv-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; } .sv-bar { height: 8px; background: var(--bg-soft); border-radius: 4px; overflow: hidden; margin: 5px 0; } .sv-fill { height: 100%; background: var(--success-soft-text); border-radius: 4px; transition: width .4s ease; } .sv-meta { font-size: 12px; color: var(--text-muted-strong); } .sv-note { margin-top: 3px; } /* barChart(SVG 自前) */ .barchart { display: block; } .barchart .bc-pos { fill: var(--success-soft-text); transition: opacity .15s; } .barchart .bc-neg { fill: var(--danger-soft-text); transition: opacity .15s; } .barchart rect:hover { opacity: .7; cursor: default; } .barchart .bc-zero { stroke: var(--text-muted); stroke-width: 1; stroke-dasharray: 3 3; opacity: .5; } .barchart .bc-x { fill: var(--text-muted); font-size: 10px; } .bc-tooltip { position: fixed; z-index: 9999; pointer-events: none; background: var(--text-heading); color: var(--bg-page); padding: 7px 10px; border-radius: 6px; font-size: 12px; line-height: 1.4; box-shadow: 0 4px 14px rgba(0,0,0,.25); white-space: nowrap; } /* 列ソート(全テーブル共通) */ th.sortable { cursor: pointer; user-select: none; white-space: nowrap; } th.sortable:hover { background: var(--bg-table-row-hover); } th.sortable::after { content: " ↕"; opacity: .25; font-size: .8em; } th.sortable[aria-sort="ascending"]::after { content: " ▲"; opacity: .9; font-size: .7em; } th.sortable[aria-sort="descending"]::after { content: " ▼"; opacity: .9; font-size: .7em; } /* 状態別の行色分け(orders / transactions 共通) 左 border + 微妙な背景で「ぱっと見」を強化 */ table tbody tr.row-paid td:first-child { border-left: 3px solid var(--success-soft-text); } table tbody tr.row-outstanding td:first-child { border-left: 3px solid var(--danger-soft-text); } table tbody tr.row-outstanding td { background: var(--danger-soft); } table tbody tr.row-active td:first-child { border-left: 3px solid var(--info-soft-text); } table tbody tr.row-pending td:first-child { border-left: 3px solid var(--warn-soft-text); } table tbody tr.row-pending td { background: var(--warn-soft); } table tbody tr.row-muted { color: var(--text-muted); } table tbody tr.row-refund td:first-child { border-left: 3px solid var(--danger-soft-text); } table tbody tr.row-unverified td:first-child { border-left: 3px dashed var(--warn-soft-text); } /* ============================================================ Modal ============================================================ */ .modal-backdrop { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1rem; background: var(--modal-backdrop); animation: modal-backdrop-fade 160ms ease-out; overflow-y: auto; } @keyframes modal-backdrop-fade { from { opacity: 0; } to { opacity: 1; } } .modal-inner { width: 100%; max-height: 90vh; background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: 1rem; box-shadow: var(--shadow-modal); display: flex; flex-direction: column; overflow: hidden; animation: modal-inner-slide 180ms ease-out; } @keyframes modal-inner-slide { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .modal-inner.size-lg { max-width: 48rem; } .modal-inner.size-md { max-width: 42rem; } .modal-inner.size-sm { max-width: 32rem; } .modal-header { padding: 1.25rem; border-bottom: 1px solid var(--border-soft); display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-shrink: 0; } .modal-header h3 { margin: 0; font-size: 1.125rem; font-weight: 700; color: var(--text-heading); } .modal-close { background: var(--bg-soft); border: 0; color: var(--text-muted-strong); cursor: pointer; width: 32px; height: 32px; border-radius: 0.5rem; display: inline-flex; align-items: center; justify-content: center; transition: all 120ms; padding: 0; } .modal-close:hover { background: var(--bg-card); color: var(--text-heading); } .modal-close .icon { vertical-align: 0; } .modal-body { padding: 1.5rem; flex: 1 1 auto; overflow-y: auto; } .modal-body > * + * { margin-top: 1rem; } .modal-footer { padding: 1rem; border-top: 1px solid var(--border-soft); display: flex; justify-content: flex-end; gap: 0.5rem; flex-shrink: 0; background: var(--bg-card); } .modal-section { border-top: 1px solid var(--border-soft); padding-top: 1rem; margin-top: 1rem; } .modal-section h4 { font-size: 0.9rem; color: var(--primary); margin: 0 0 0.6rem; } body.modal-open { overflow: hidden; } /* 全モーダル共通レイアウト(D-軽: 体裁を一元化、構造は各ページ維持) */ .modal-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .modal-form .col-span-2 { grid-column: 1 / -1; } .modal-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem 1rem; margin-bottom: 1rem; } .modal-kv .muted.text-xs { margin-bottom: 2px; } @media (max-width: 640px) { .modal-form, .modal-kv { grid-template-columns: 1fr; } } /* ============================================================ Chips ============================================================ */ .chip { display: inline-flex; align-items: center; gap: 3px; padding: 0.2rem 0.55rem; border-radius: 9999px; font-size: 0.8rem; font-weight: 600; border: 1px solid transparent; white-space: nowrap; line-height: 1.2; } .chip .icon { vertical-align: 0; } .icon-inline { vertical-align: -1px; margin-right: 2px; opacity: 0.6; } /* .chip 併用時も statusChip() の単独 .chip-muted 時も 0.8rem で一貫(老眼配慮) */ .chip-muted { color: var(--text-muted); font-size: 0.8rem; } .chip-primary { background: var(--primary-soft); color: var(--primary-soft-text); } .chip-success { background: var(--success-soft); color: var(--success-soft-text); } .chip-danger { background: var(--danger-soft); color: var(--danger-soft-text); } .chip-warn, .chip-warning { background: var(--warn-soft); color: var(--warn-soft-text); } .chip-info { background: var(--info-soft); color: var(--info-soft-text); } /* ============================================================ SVG Icons ============================================================ */ .icon { display: inline-block; vertical-align: -3px; flex-shrink: 0; } /* ============================================================ Header / Navigation ============================================================ */ .app-header { background: var(--bg-card); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-sm); } .app-header .row { max-width: 1536px; margin: 0 auto; padding: 1rem; display: flex; align-items: center; justify-content: space-between; } .app-header .brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; } .app-header .brand:hover { opacity: 0.85; } .app-header .brand .logo { width: 2rem; height: 2rem; border-radius: 0.5rem; background: linear-gradient(135deg, var(--header-from), var(--header-to)); display: inline-flex; align-items: center; justify-content: center; color: white; box-shadow: var(--shadow-sm); } .app-header .brand .logo .icon { vertical-align: 0; } .app-header .brand h1 { font-size: 1.125rem; font-weight: bold; color: var(--text-heading); margin: 0; } .app-header .right { display: flex; align-items: center; gap: 0.75rem; font-size: 0.875rem; color: var(--text-muted); } /* dark mode toggle button */ .theme-toggle { border: 1px solid var(--border); background: var(--bg-card); color: var(--text-muted-strong); width: 36px; height: 36px; border-radius: 0.5rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all 150ms; padding: 0; } .theme-toggle:hover { background: var(--bg-soft); color: var(--text-heading); } .theme-toggle .icon { vertical-align: 0; } /* Main nav */ .main-tabs { max-width: 1536px; margin: 0 auto; padding: 0 1rem; display: flex; gap: 0.25rem; } .main-tabs a { padding: 0.625rem 0.9rem; font-size: 0.875rem; font-weight: 600; color: var(--text-muted); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; transition: all 150ms; display: inline-flex; align-items: center; gap: 0.4rem; } .main-tabs a .icon { vertical-align: 0; opacity: 0.85; } .main-tabs a:hover { color: var(--text-heading); } .main-tabs a:hover .icon { opacity: 1; } .main-tabs a.active { color: var(--primary); border-bottom-color: var(--primary); } .main-tabs a.active .icon { opacity: 1; } /* タブアイコンの色分け(KPI と同系統、視認性向上) */ .main-tabs a .icon { opacity: 1; } .main-tabs a[data-nav="dashboard"] .icon { color: var(--primary); } .main-tabs a[data-nav="customers"] .icon { color: var(--success-soft-text); } .main-tabs a[data-nav="items"] .icon { color: var(--info-soft-text); } .main-tabs a[data-nav="orders"] .icon { color: var(--warn-soft-text); } .main-tabs a[data-nav="transactions"] .icon { color: var(--success-soft-text); } .main-tabs a[data-nav="contract"] .icon { color: var(--primary); } .main-tabs a[data-nav="admin"] .icon { color: var(--text-muted); } /* Main content */ main.app-main { max-width: 1536px; margin: 0 auto; padding: 1.5rem 1rem; } .page-title { font-size: 1.25rem; font-weight: bold; color: var(--text-heading); } /* KPI cards */ .kpi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 1rem; } @media (min-width: 768px) { .kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .kpi { padding: 1rem; display: flex; align-items: center; gap: 0.875rem; } .kpi-icon { width: 40px; height: 40px; border-radius: 0.625rem; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .kpi-icon-primary { background: var(--primary-soft); color: var(--primary-soft-text); } .kpi-icon-success { background: var(--success-soft); color: var(--success-soft-text); } .kpi-icon-info { background: var(--info-soft); color: var(--info-soft-text); } .kpi-icon-warn { background: var(--warn-soft); color: var(--warn-soft-text); } .kpi-text { min-width: 0; flex: 1; } .kpi-label { color: var(--text-muted); font-size: 0.8125rem; font-weight: 600; margin-bottom: 0.125rem; } .kpi-value { font-size: 1.375rem; font-weight: bold; letter-spacing: -0.025em; color: var(--text-heading); } .kpi-sub { font-size: 0.78rem; margin-top: 0.2rem; } .card-title { font-size: 1.05rem; font-weight: bold; color: var(--text-heading); margin: 0 0 0.75rem; } /* Spinner */ .spinner { display: inline-block; width: 1.25rem; height: 1.25rem; border: 2px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .loading-row { text-align: center; padding: 3rem 1rem; color: var(--text-muted); } /* Toast */ .toast-wrap { position: fixed; right: 1rem; bottom: 1rem; display: flex; flex-direction: column; gap: 0.5rem; z-index: 1100; } .toast { padding: 0.625rem 1rem; border-radius: 0.5rem; box-shadow: var(--shadow-lg); font-size: 0.875rem; } .toast-success { background: var(--success-soft); color: var(--success-soft-text); border: 1px solid var(--success-soft-border); } .toast-error { background: var(--danger-soft); color: var(--danger-soft-text); border: 1px solid var(--danger); } .toast-info { background: var(--info-soft); color: var(--info-soft-text); border: 1px solid var(--info-soft-border); } /* Misc utilities */ .muted { color: var(--text-muted); } .text-xs { font-size: 0.8rem; } .text-sm { font-size: 0.875rem; } .text-red { color: var(--danger); } .flex { display: flex; } .flex-wrap { flex-wrap: wrap; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .gap-1 { gap: 0.25rem; } .gap-2 { gap: 0.5rem; } .gap-3 { gap: 0.75rem; } .gap-4 { gap: 1rem; } .mb-1 { margin-bottom: 0.25rem; } .mb-2 { margin-bottom: 0.5rem; } .mb-3 { margin-bottom: 0.75rem; } .mt-3 { margin-top: 0.75rem; } .mb-4 { margin-bottom: 1rem; } .mt-2 { margin-top: 0.5rem; } .grid { display: grid; } .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .col-span-2 { grid-column: span 2 / span 2; } .spacer { flex: 1; } .err { color: var(--danger); padding: 1rem; font-size: 0.875rem; } code { font-family: 'SF Mono', Monaco, Consolas, monospace; font-size: 0.8125rem; padding: 0.125rem 0.375rem; background: var(--bg-soft); color: var(--text); border-radius: 0.25rem; } /* ============================================================ レスポンシブ(徹底対応) - ナビ9項目はタブレット以下で横スクロール(折返さず指でスワイプ) - 2カラム系は狭幅で1カラムへ、KPI は極小で1カラム - ヘッダ操作列は折返し、余白/タップ領域をモバイル最適化 - テーブルは table() が overflow-x ラップ済(横スクロール) ============================================================ */ @media (max-width: 900px) { .main-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .main-tabs::-webkit-scrollbar { display: none; } .main-tabs a { flex: 0 0 auto; white-space: nowrap; } } @media (max-width: 768px) { .app-header .row { padding: 0.75rem; } .app-header .brand h1 { font-size: 1rem; } main.app-main { padding: 1rem 0.75rem; } .page-title { font-size: 1.1rem; } .grid-2, .grid-3, .grid-cols-2 { grid-template-columns: 1fr; } /* ページ見出し + 操作ボタンの行を折返す */ .flex.items-center.justify-between { flex-wrap: wrap; gap: 0.5rem; } /* タップ領域確保 */ .btn { min-height: 40px; } .main-tabs a { padding-top: 0.6rem; padding-bottom: 0.6rem; } } @media (max-width: 480px) { .kpi-grid { grid-template-columns: 1fr; } .modal-inner.size-lg, .modal-inner.size-md, .modal-inner.size-sm { max-width: 100%; } .card { padding: 0.875rem; } } /* Scrollbar */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-input); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }