/* ============================================================= smartco-ui.css — smartco 共通UIライブラリ v1（ドラフト） ------------------------------------------------------------- 管理: 粋（ui-designer）デザイン / 匠（dev-catalog）配置正本: catalog/system-default を基に切り出した「全システム共通の実体」 ■ 使い方（住人エージェント向け） 1. 末尾に1行貼るだけ: 2. に data-mode を付ける: ← または "dark" 3. 自分のシステムのアクセント1色だけ上書きする（下の「アクセント上書き」参照） 4. あとは class を付けるだけで全システム細部まで完全一致: A ■ 鉄則 - このファイルの中身を各システムにコピペしない（で参照する） - 色・余白・角丸を手で書き換えない（ブレの原因。トークンを使う） - 新パターンが要る時は粋に相談（部屋に入れる=承認制 / dev-rules §4-3） ============================================================= */ /* ===== 共通トークン（mode非依存・色固定） ===== */ :root { --ok: #1e7e5f; --warn: #b8860b; --err: #b91c1c; --info: #2563eb; --r: 3px; /* 入力フィールドの角丸 */ --rb: 2px; /* ボタン・バッジ・ナビの角丸（カクッ。invoice基準。ここ1個で全システムのカクッ度を調整） */ --rl: 4px; /* カード・モーダルの外枠 */ --tr: .15s ease; } /* ===== Light Mode ===== */ html[data-mode="light"] { --bg: #ffffff; --bg-elev: #fafbfc; --surface: #ffffff; --surface-dim: #f3f4f6; --surface-hi: #e9ebef; --border: #d1d5db; --border-light: #e5e7eb; --text: #111827; --text-sec: #4b5563; --text-dim: #9ca3af; /* アクセント初期 = 深ネイビー（各システムが上書きする） */ --primary: #2d4a5c; --primary-soft: #eef2f5; --primary-dim: #eef2f5; --primary-hover: #1e3240; --primary-text: #ffffff; --accent: #2d4a5c; --accent-dim: #eef2f5; --ok-bg: #e8f5ee; --warn-bg: #fcf6e3; --err-bg: #fdecec; --info-bg: #eff4ff; --sh: none; --sh2: 0 2px 8px rgba(0,0,0,.06); --modal-bg: rgba(0,0,0,.4); --table-row-hover: #fafbfc; } /* ===== Dark Mode ===== */ html[data-mode="dark"] { --bg: #0e0e10; --bg-elev: #131316; --surface: #17171b; --surface-dim: #1f1f24; --surface-hi: #25252b; --border: #2c2c34; --border-light: #232329; --text: #ececf0; --text-sec: #a8a8b3; --text-dim: #6b6b75; /* アクセント初期 = Honey Glow（各システムが上書きする） */ --primary: #d4943a; --primary-soft: #ecc88e; --primary-dim: rgba(212,148,58,.14); --primary-hover: #c08529; --primary-text: #1a1004; --accent: #d4943a; --accent-dim: rgba(212,148,58,.14); --ok-bg: rgba(52,211,153,.12); --warn-bg: rgba(251,191,36,.12); --err-bg: rgba(248,113,113,.12); --info-bg: rgba(96,165,250,.12); /* ダークではステータス色も明るく */ --ok: #34d399; --warn: #fbbf24; --err: #f87171; --info: #60a5fa; --sh: 0 4px 16px rgba(0,0,0,.4); --sh2: 0 8px 28px rgba(0,0,0,.55); --modal-bg: rgba(0,0,0,.7); --table-row-hover: #1f1f24; } /* ============================================================= ■ アクセント上書きの書き方（各システムが自分のCSSでやる）システム別アクセント1色だけ変える。構造・余白・角丸は触らない。 ------------------------------------------------------------- ============================================================= */ /* ===== リセット・ベース ===== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Hiragino Sans', 'Noto Sans JP', sans-serif; background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.6; -webkit-font-smoothing: antialiased; transition: background .25s ease, color .25s ease; } button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; } input, select, textarea { font: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } ::placeholder { color: var(--text-dim); } a { color: var(--accent); } /* ===== レイアウト ===== */ .app { display: flex; flex-direction: column; min-height: 100vh; } .main-area { display: flex; flex: 1; overflow: hidden; } /* ===== ヘッダー ===== */ .header { height: 52px; background: var(--primary); display: flex; align-items: center; padding: 0 20px; gap: 16px; flex-shrink: 0; transition: background var(--tr); border-bottom: 1px solid rgba(0,0,0,.12); } .header .logo-area { display: flex; align-items: center; gap: 8px; color: var(--primary-text); } .header .logo-area .ic { color: var(--primary-text); } .header .logo-area h1 { font-size: .95rem; font-weight: 800; color: var(--primary-text); white-space: nowrap; } .header-right { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .sync-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--primary-text); opacity: .7; display: inline-block; animation: pulse 2s infinite; } @keyframes pulse { 0%,100%{opacity:.7} 50%{opacity:.2} } .user-badge { font-size: .8rem; color: var(--primary-text); opacity: .8; font-weight: 600; } .btn-logout { font-size: .78rem; color: var(--primary-text); padding: 5px 10px; border-radius: 4px; border: 1px solid; border-color: rgba(255,255,255,.25); font-weight: 700; } html[data-mode="dark"] .btn-logout { border-color: rgba(17,17,13,.3); } .btn-logout:hover { background: rgba(255,255,255,.1); } html[data-mode="dark"] .btn-logout:hover { background: rgba(17,17,13,.1); } /* ===== ライト/ダーク切替トグル ===== */ .mode-toggle { display: inline-flex; align-items: center; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.3); border-radius: 999px; padding: 3px; gap: 2px; } html[data-mode="dark"] .mode-toggle { background: rgba(17,17,13,.25); border-color: rgba(17,17,13,.35); } .mode-toggle button { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: 999px; font-size: .72rem; font-weight: 700; color: var(--primary-text); opacity: .7; transition: all var(--tr); white-space: nowrap; } .mode-toggle button:hover { opacity: 1; } .mode-toggle button.active { background: rgba(255,255,255,.95); color: var(--primary); opacity: 1; } html[data-mode="dark"] .mode-toggle button.active { background: rgba(17,17,13,.85); color: var(--primary); } .mode-toggle .ic { width: 12px; height: 12px; } /* ===== サイドナビ ===== */ .side-nav { width: 200px; background: var(--bg-elev); border-right: 1px solid var(--border); padding: 12px 8px; flex-shrink: 0; overflow-y: auto; } .nav-label { font-size: .68rem; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: .08em; padding: 10px 12px 4px; } .nav-item { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: var(--rb); font-size: .85rem; color: var(--text-sec); cursor: pointer; transition: all var(--tr); border-left: 3px solid transparent; } .nav-item:hover { background: var(--surface-dim); color: var(--text); } .nav-item.active { background: var(--primary-dim); color: var(--primary); font-weight: 700; border-left-color: var(--primary); } .nav-item .ic { width: 17px; height: 17px; } .nav-item .cnt { margin-left: auto; font-size: .7rem; background: var(--surface-dim); padding: 1px 7px; border-radius: var(--rb); color: var(--text-sec); font-weight: 600; } .nav-item.active .cnt { background: var(--primary); color: var(--primary-text); } /* ===== コンテンツ・見出し ===== */ .content { flex: 1; overflow-y: auto; padding: 24px 28px; max-width: 1200px; } .page-title { font-size: 1.2rem; font-weight: 700; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; color: var(--text); } .page-title .badge { font-size: .75rem; background: var(--accent-dim); color: var(--accent); padding: 3px 10px; border-radius: 12px; font-weight: 700; } .page-title .ic { width: 22px; height: 22px; color: var(--primary); } .section-h { font-size: 1rem; font-weight: 700; margin: 28px 0 12px; padding-bottom: 6px; border-bottom: 2px solid var(--primary); color: var(--text); } /* ===== カード ===== */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--rl); padding: 20px; margin-bottom: 16px; } .card-title { font-size: .9rem; font-weight: 700; margin: -20px -20px 14px; padding: 10px 16px; display: flex; align-items: center; gap: 8px; background: var(--bg-elev); border-bottom: 1px solid var(--border-light); border-radius: var(--rl) var(--rl) 0 0; color: var(--text); } .card-title .ic { width: 16px; height: 16px; color: var(--primary); } /* ===== ボタン（正本：写経のズレを撲滅する基準） ===== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 18px; border-radius: var(--rb); font-size: .85rem; font-weight: 700; transition: all var(--tr); border: 1px solid transparent; } .btn .ic { width: 16px; height: 16px; stroke: currentColor !important; } .btn:disabled { opacity: .45; cursor: not-allowed; } .btn-primary { background: var(--primary); color: var(--primary-text); border-color: var(--primary); } .btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); filter: brightness(1.05); } .btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border); } .btn-secondary:hover { background: var(--surface-dim); border-color: var(--text-sec); } .btn-success { background: var(--ok); color: #fff; border-color: var(--ok); } html[data-mode="dark"] .btn-success { color: #08120c; } .btn-success:hover { filter: brightness(1.08); } .btn-danger { background: var(--err); color: #fff; border-color: var(--err); } html[data-mode="dark"] .btn-danger { color: #1a0808; } .btn-danger:hover { filter: brightness(1.08); } .btn-ghost-danger { background: var(--err-bg); color: var(--err); border-color: var(--err); } .btn-ghost-danger:hover { background: var(--err); color: #fff; } html[data-mode="dark"] .btn-ghost-danger:hover { color: #1a0808; } .btn-sm { padding: 5px 12px; font-size: .78rem; } .btn-lg { padding: 14px 28px; font-size: 1rem; } .btn-icon { width: 32px; height: 32px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--rb); color: var(--text-sec); border: 1px solid var(--border); background: var(--surface); } .btn-icon:hover { background: var(--surface-dim); color: var(--text); border-color: var(--text-sec); } .btn-group { display: flex; gap: 8px; flex-wrap: wrap; } /* ===== フォーム ===== */ .form-row { display: flex; gap: 12px; margin-bottom: 12px; align-items: flex-end; flex-wrap: wrap; } .form-group { display: flex; flex-direction: column; gap: 4px; } .form-group.flex1 { flex: 1; min-width: 0; } .form-group label { font-size: .78rem; font-weight: 600; color: var(--text-sec); } .form-group input, .form-group select, .form-group textarea { border: 1.5px solid var(--border); border-radius: var(--r); padding: 8px 10px; font-size: .88rem; background: var(--bg-elev); color: var(--text); transition: all var(--tr); } html[data-mode="light"] .form-group input, html[data-mode="light"] .form-group select, html[data-mode="light"] .form-group textarea { background: var(--surface); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-dim); } .form-group textarea { resize: vertical; min-height: 60px; } /* ===== トグルスイッチ ===== */ .toggle { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; } .toggle input { opacity: 0; width: 0; height: 0; } .toggle .slider { position: absolute; inset: 0; background: var(--surface-hi); border: 1px solid var(--border); border-radius: 999px; transition: var(--tr); } .toggle .slider::before { content: ""; position: absolute; height: 16px; width: 16px; left: 2px; top: 2px; background: var(--text-dim); border-radius: 50%; transition: var(--tr); } .toggle input:checked + .slider { background: var(--primary-dim); border-color: var(--primary); } .toggle input:checked + .slider::before { transform: translateX(18px); background: var(--primary); } /* ===== テーブル ===== */ .tbl-wrap { overflow-x: auto; padding-right: 2px; } .tbl-wrap table { min-width: 600px; } table { width: 100%; border-collapse: collapse; font-size: .84rem; } th { background: var(--bg-elev); font-weight: 700; text-align: left; padding: 10px 12px; border: 1px solid var(--border); color: var(--text); white-space: nowrap; font-size: .78rem; letter-spacing: .02em; } td { padding: 9px 12px; border: 1px solid var(--border-light); background: var(--surface); } tr:hover td { background: var(--table-row-hover); } .cat-header { background: var(--primary-dim); font-weight: 700; color: var(--primary); } .cat-header td { padding: 6px 10px; font-size: .82rem; background: transparent; border-color: var(--border); } .amount { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .pos { color: var(--ok); } .neg { color: var(--err); } /* ===== 合計エリア ===== */ .totals-area { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--rl); padding: 16px 20px; margin-top: 16px; } .totals-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; font-size: .9rem; } .totals-row .label { color: var(--text-sec); } .totals-row.grand { font-size: 1.1rem; font-weight: 700; border-top: 2px solid var(--border); padding-top: 8px; margin-top: 4px; color: var(--primary); } /* ===== ステータスバッジ ===== */ .status-badge { display: inline-block; padding: 3px 10px; border-radius: var(--rb); font-size: .72rem; font-weight: 700; } .status-draft { background: var(--surface-hi); color: var(--text-sec); } .status-sent { background: var(--info-bg); color: var(--info); } .status-accepted { background: var(--ok-bg); color: var(--ok); } .status-overdue { background: var(--err-bg); color: var(--err); } .status-paid { background: var(--warn-bg); color: var(--warn); } /* ===== ON/OFFステータスピル ===== */ .st { font-size: .74rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; } .st-on { background: var(--ok-bg); color: var(--ok); } .st-off { background: var(--surface-hi); color: var(--text-dim); } /* ============================================================= ABCD連番カラーバッジ（旧 .method-tag を汎用標準化）使い方: A → 益(toushi)の手法バッジが「見本に無くて各自バラバラ」だった問題の標準化。6色アクセント体系（粋 SKILL §5.5）と整合。後方互換: .method-tag も同義エイリアスとして残す。 ============================================================= */ .badge-letter, .method-tag { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: var(--rb); font-weight: 800; font-size: .78rem; color: #fff; flex-shrink: 0; } .m-A { background: #6da4b5; color: #061318; } /* ウォーターブルー */ .m-B { background: #8b8bdb; } /* インディゴ */ .m-C { background: #5fb09a; color: #04140f; } /* ティールグリーン */ .m-D { background: #d99a5c; color: #1a0f02; } /* アンバー */ .m-E { background: #c47fb5; color: #200818; } /* ピンクパープル */ .m-F { background: #7f9ac4; color: #050d18; } /* スティールブルー */ /* ===== 環境切替（LIVE/PRACTICE等の2値トグル群） ===== */ .env-switch { display: inline-flex; gap: 4px; background: var(--surface-dim); padding: 4px; border-radius: var(--rl); margin-bottom: 16px; } .env-switch button { padding: 8px 24px; border-radius: var(--rb); font-size: .85rem; font-weight: 800; color: var(--text-sec); transition: all var(--tr); } .env-switch button.active[data-env="live"] { background: var(--err); color: #fff; } html[data-mode="dark"] .env-switch button.active[data-env="live"] { color: #1a0808; } .env-switch button.active[data-env="practice"] { background: var(--primary); color: var(--primary-text); } .env-badge { font-size: .8rem; font-weight: 800; padding: 3px 11px; border-radius: var(--rb); letter-spacing: .03em; } .env-badge-live { background: var(--err); color: #fff; } html[data-mode="dark"] .env-badge-live { color: #1a0808; } .env-badge-practice { background: var(--primary); color: var(--primary-text); } /* ===== モーダル ===== */ .modal-overlay { display: none; position: fixed; inset: 0; background: var(--modal-bg); backdrop-filter: blur(4px); z-index: 1000; align-items: center; justify-content: center; } .modal-overlay.show { display: flex; } .modal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--rl); width: 480px; max-width: 90vw; max-height: 90vh; overflow-y: auto; box-shadow: var(--sh2); } .modal-head { padding: 14px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; background: var(--bg-elev); } .modal-head h3 { font-size: 1rem; font-weight: 700; } .modal-body { padding: 20px; } .modal-foot { padding: 12px 20px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; background: var(--bg-elev); } /* ===== トースト ===== */ .toast { position: fixed; bottom: 24px; right: 24px; background: var(--surface-hi); color: var(--text); border: 1px solid var(--border); padding: 12px 20px; border-radius: var(--r); font-size: .85rem; box-shadow: var(--sh2); z-index: 9999; transform: translateY(100px); opacity: 0; transition: all .3s ease; display: flex; align-items: center; gap: 12px; } html[data-mode="light"] .toast { background: #1e293b; color: #fff; border-color: #1e293b; } .toast.show { transform: translateY(0); opacity: 1; } .toast.success { border-color: var(--ok); } .toast.success .ic { color: var(--ok); } /* ===== Lucide アイコン ===== */ .ic { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; display: inline-block; vertical-align: -3px; } .ic-lg { width: 20px; height: 20px; vertical-align: -4px; } /* ===== レスポンシブ ===== */ @media (max-width: 767px) { .side-nav { display: none; } .content { padding: 16px; } .header { padding: 0 14px; } }