/* kit.css — base-kit 画面部品キット 使い方: を に入れる。 色を変えたい時は :root の変数だけ変えれば全体に効く。見本は /parts.html */ :root { --accent: #4f46e5; /* メインの色（ボタン・強調） */ --accent-dark: #3730a3; /* 濃い側（ヘッダーのグラデーション） */ --bg: #eef1f7; /* 画面の下地 */ --card: #ffffff; /* カードの地 */ --text: #1f2436; /* 本文の文字色 */ --sub: #66788c; /* 補足の文字色 */ --line: #dbe2ec; /* 枠線 */ --danger: #dc2626; /* 削除・警告 */ --ok: #16a34a; /* 成功 */ --radius: 12px; } * { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } body { font-family: system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif; background: var(--bg); color: var(--text); font-size: 15px; line-height: 1.6; } /* ── 画面の骨格 ── */ .kit-header { position: sticky; top: 0; z-index: 20; background: linear-gradient(120deg, var(--accent-dark), var(--accent)); color: #fff; padding: 13px 16px; display: flex; align-items: center; gap: 10px; } .kit-header h1 { font-size: 16px; font-weight: 800; flex: 1; } .kit-header .sub { font-size: 12px; opacity: .85; font-weight: 500; } .kit-main { max-width: 640px; margin: 0 auto; padding: 14px 14px 90px; } /* ── カード ── */ .card { background: var(--card); border-radius: var(--radius); padding: 14px; margin-bottom: 12px; box-shadow: 0 1px 3px rgba(20, 30, 60, .08); } .card h4 { font-size: 12px; color: var(--sub); margin-bottom: 8px; font-weight: 700; } /* ── ボタン ── */ .btn { display: inline-block; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; color: var(--text); font-size: 14px; font-weight: 700; padding: 9px 16px; cursor: pointer; } .btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; } .btn.danger { background: #fff; border-color: var(--danger); color: var(--danger); } .btn.block { display: block; width: 100%; text-align: center; } .btn:active { opacity: .8; } .btn:disabled { opacity: .45; cursor: default; } .linkbtn { border: none; background: none; color: var(--accent); font-size: 13px; font-weight: 700; cursor: pointer; padding: 0; } /* ── フォーム ── */ label.kit { display: block; font-size: 12px; color: var(--sub); font-weight: 700; margin: 10px 0 4px; } input.kit, textarea.kit, select.kit { width: 100%; border: 1.5px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 15px; font-family: inherit; background: #fff; color: var(--text); } input.kit:focus, textarea.kit:focus, select.kit:focus { outline: 2px solid var(--accent); border-color: transparent; } .field-row { display: flex; gap: 8px; align-items: center; } .field-row > * { flex: 1; } .field-row > .btn { flex: 0 0 auto; } .hint { font-size: 11px; color: var(--sub); margin-top: 6px; line-height: 1.5; } /* ── 一覧の行 ── */ .kitem { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px solid #f0f2f7; font-size: 14px; } .kitem:last-child { border-bottom: none; } .kitem .kd { color: var(--sub); font-size: 12px; flex: 0 0 auto; } /* ── 小さなラベル（状態表示） ── */ .pill { display: inline-block; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 9px; vertical-align: middle; } .pill.ok { background: #dcfce7; color: #15803d; } .pill.warn { background: #fef9c3; color: #a16207; } .pill.danger { background: #fee2e2; color: #b91c1c; } .pill.info { background: #e0e7ff; color: #4338ca; } /* ── 注釈（この画面は何をする所か） ── */ .viewnote { font-size: 12px; color: var(--sub); background: #e7ebf3; border-radius: 10px; padding: 9px 12px; margin-bottom: 12px; line-height: 1.65; } /* ── 空っぽ表示 ── */ .empty { text-align: center; color: var(--sub); font-size: 14px; padding: 36px 0; } /* ── 下タブ（画面切り替え） ── */ .kit-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; background: #fff; border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); } .kit-tabbar button { flex: 1; border: none; background: none; cursor: pointer; font-size: 11px; font-weight: 700; color: var(--sub); padding: 8px 0 9px; } .kit-tabbar button.active { color: var(--accent); } .kit-tabbar .ic { display: block; font-size: 18px; margin-bottom: 2px; } /* ── トースト（画面下に一瞬出る通知） ── */ #kit-toast { position: fixed; left: 50%; bottom: 76px; transform: translateX(-50%); background: #1f2436; color: #fff; font-size: 13px; font-weight: 700; border-radius: 999px; padding: 9px 18px; opacity: 0; transition: opacity .25s; pointer-events: none; z-index: 50; max-width: 90%; } /* ── モーダル（確認ダイアログ） ── */ #kit-modal-bg { position: fixed; inset: 0; background: rgba(20, 25, 45, .45); display: none; z-index: 40; } #kit-modal { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #fff; border-radius: 14px; padding: 18px; width: min(92vw, 420px); display: none; z-index: 41; } #kit-modal h2 { font-size: 15px; margin-bottom: 10px; } #kit-modal .actions { display: flex; gap: 8px; margin-top: 14px; } #kit-modal .actions .btn { flex: 1; } /* ── 表（管理画面などで使用） ── */ table.kit { width: 100%; border-collapse: collapse; font-size: 13px; } table.kit th, table.kit td { text-align: left; padding: 7px 6px; border-bottom: 1px solid #f0f2f7; word-break: break-all; } table.kit th { color: var(--sub); font-size: 11px; font-weight: 700; } /* ── 小物 ── */ .mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; } .right { text-align: right; } .mt { margin-top: 12px; }