/* きゃびNet 寄託者WEB（お客様サービス）— ライトテーマ 正本: docs/analysis/depositor-web-frames/screen-inventory.md §3（14 pgid の項目定義） 体裁: mock-sample.pen 寄託者Webゾーン（ライトモード）。ピクセルではなく DOM/項目忠実。 倉庫WEBモック（assets/app.css=ダーク）とは別アプリ・別配色。 */ :root { --font: "Hiragino Sans", "Yu Gothic", "Noto Sans JP", "Meiryo", system-ui, sans-serif; /* 背景 */ --bg-app: #eef2f7; --bg-topbar: #ffffff; --bg-panel: #ffffff; --bg-elevated: #ffffff; --bg-input: #ffffff; --bg-subtle: #f6f8fb; --row-hover: #f0f6fc; --row-selected: #e3effb; --row-stripe: #f9fbfd; /* 罫線 */ --border: #dce3ec; --border-strong: #c3ccd8; /* テキスト */ --text: #1f2a37; --text-muted: #55637a; --text-dim: #8a97a6; /* アクセント（きゃびNet ブルー系） */ --accent: #1f6fb2; --accent-strong: #175a92; --accent-soft: #e8f1fa; --pink: #c2417f; --danger: #d64550; --ok: #2e9e5b; /* ステータス */ --st-confirmed: #2e9e5b; /* 依頼済/確定 */ --st-accepted: #1f8fbf; /* 受付/仮承認 */ --st-requested: #6b7a8f; /* 未承認/依頼中 */ --st-hold: #c9871f; /* 保留/要確認 */ --st-disposed: #b0575e; --radius: 10px; --radius-sm: 6px; --shadow-pop: 0 12px 30px rgba(31, 45, 70, .18); --shadow-card: 0 1px 2px rgba(31, 45, 70, .05); } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: var(--font); background: var(--bg-app); color: var(--text); font-size: 13px; line-height: 1.5; -webkit-font-smoothing: antialiased; } /* ---------- アプリシェル ---------- */ .app { display: grid; grid-template-columns: 210px 1fr; grid-template-rows: 52px 1fr; height: 100vh; } .topbar { grid-column: 1 / 3; display: flex; align-items: center; gap: 12px; background: var(--bg-topbar); border-bottom: 1px solid var(--border); padding: 0 18px; font-weight: 600; } .topbar .brand { display: flex; align-items: center; gap: 9px; color: var(--text); } .topbar .brand .logo { width: 22px; height: 22px; border-radius: 5px; background: var(--accent); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; font-weight: 800; } .topbar .brand small { color: var(--text-dim); font-weight: 500; font-size: 11px; margin-left: 2px; } .topbar .spacer { flex: 1; } .topbar .pill { background: var(--bg-subtle); border: 1px solid var(--border); border-radius: 999px; padding: 5px 13px; color: var(--text-muted); font-weight: 500; font-size: 12px; } .topbar .user { display: flex; align-items: center; gap: 7px; color: var(--text-muted); font-weight: 500; } .topbar .user .avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; } .sidebar { background: var(--bg-panel); border-right: 1px solid var(--border); padding: 10px 0; overflow: auto; } .sidebar .grp { color: var(--text-dim); font-size: 11px; padding: 12px 18px 5px; letter-spacing: .04em; font-weight: 600; } .sidebar a { display: flex; align-items: center; gap: 9px; color: var(--text-muted); text-decoration: none; padding: 8px 18px; font-size: 13px; cursor: pointer; } .sidebar a:hover { background: var(--row-hover); color: var(--text); } .sidebar a.active { background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); } .sidebar a .ico { width: 18px; text-align: center; opacity: .85; } .sidebar a .code { margin-left: auto; font-size: 10px; color: var(--text-dim); font-variant-numeric: tabular-nums; } .main { overflow: auto; padding: 20px 24px 70px; } /* ---------- ヘッダ ---------- */ .page-head { display: flex; align-items: flex-end; gap: 14px; margin-bottom: 16px; } .page-head h1 { font-size: 19px; margin: 0; } .page-head .crumb { color: var(--text-dim); font-size: 12px; margin-top: 3px; } .page-head .crumb .pg { font-variant-numeric: tabular-nums; } .page-head .actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; } /* ---------- ボタン ---------- */ .btn { font-family: inherit; font-size: 13px; border-radius: var(--radius-sm); padding: 7px 14px; border: 1px solid var(--border-strong); background: #fff; color: var(--text); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; } .btn:hover { border-color: var(--accent); color: var(--accent-strong); } .btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; } .btn.primary:hover { background: var(--accent-strong); color: #fff; } .btn.ghost { background: transparent; } .btn.danger { color: var(--danger); border-color: #e5b6ba; } .btn.danger:hover { border-color: var(--danger); color: var(--danger); background: #fdf1f2; } .btn.sm { padding: 4px 10px; font-size: 12px; } .btn .caret { opacity: .7; font-size: 10px; } .btn:disabled { opacity: .45; cursor: not-allowed; } /* ---------- カード / パネル ---------- */ .card { background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-card); margin-bottom: 16px; } .card > .ch { padding: 11px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; } .card > .ch .title { font-weight: 600; } .card > .ch .meta { color: var(--text-dim); font-size: 12px; margin-left: auto; } .card > .cb { padding: 16px; } /* ---------- フィルタバー ---------- */ .filters { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; } .filters .fld { display: flex; flex-direction: column; gap: 4px; } .filters .fld > label { font-size: 11px; color: var(--text-muted); font-weight: 500; } .filters .fld input, .filters .fld select { font-family: inherit; font-size: 13px; background: var(--bg-input); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); color: var(--text); padding: 6px 9px; height: 32px; min-width: 130px; } .filters .fld input:focus, .filters .fld select:focus { outline: none; border-color: var(--accent); } .filters .fld.or input { min-width: 96px; } .filters .chk { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text); height: 32px; } .filters .fspacer { flex: 1; } .filters .fnote { flex-basis: 100%; color: var(--text-dim); font-size: 11px; } /* ---------- テーブル ---------- */ .tbl-wrap { overflow: auto; } table.grid { width: 100%; border-collapse: collapse; } table.grid thead th { text-align: left; font-weight: 600; color: var(--text-muted); font-size: 12px; padding: 9px 11px; border-bottom: 2px solid var(--border); white-space: nowrap; background: var(--bg-subtle); position: sticky; top: 0; z-index: 1; } table.grid tbody td { padding: 9px 11px; border-bottom: 1px solid var(--border); vertical-align: top; } table.grid tbody tr.row { cursor: pointer; } table.grid tbody tr.row:hover { background: var(--row-hover); } table.grid tbody tr.selected { background: var(--row-selected); } table.grid tbody tr.detail-row > td { background: var(--bg-subtle); padding: 0; } td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; } td.center, th.center { text-align: center; } .sub { color: var(--text-dim); font-size: 11px; } .mono { font-variant-numeric: tabular-nums; } .kanri { font-variant-numeric: tabular-nums; font-weight: 600; } .web-mark { color: var(--accent); font-weight: 700; } .muted { color: var(--text-dim); } .empty { padding: 40px; text-align: center; color: var(--text-dim); } /* ステータスバッジ */ .badge { display: inline-block; border-radius: 999px; padding: 2px 10px; font-size: 11px; font-weight: 600; white-space: nowrap; } .badge.b-req { color: #fff; background: var(--st-requested); } /* 依頼中/未承認 */ .badge.b-acc { color: #fff; background: var(--st-accepted); } /* 受付/仮承認 */ .badge.b-done { color: #fff; background: var(--st-confirmed); } /* 依頼済/確定 */ .badge.b-hold { color: #5a3c07; background: #fbe3b6; } /* 保留 */ .badge.b-disp { color: #fff; background: var(--st-disposed); } /* 廃棄 */ .badge.b-out { color: #fff; background: #7d8a9c; } /* 出庫済 */ .badge.tag { color: var(--accent-strong); background: var(--accent-soft); } /* 履歴照会（T_Q4121）の名変 元→先 ペア表示 AS-IS は 元寄託者cd〜先在庫部署名 の 14 列。モックでは 1 行に畳んで表示する。 */ .namechange { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 12px; color: var(--text-muted); padding: 2px 0 2px 12px; } .namechange .tag { display: inline-block; border-radius: 999px; padding: 2px 10px; font-size: 11px; font-weight: 600; color: var(--accent-strong); background: var(--accent-soft); } .namechange b { color: var(--text); font-weight: 600; } .namechange .arrow { color: var(--accent); font-weight: 700; } /* 行末ケバブ */ .kebab { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 17px; line-height: 1; padding: 2px 7px; border-radius: 5px; } .kebab:hover { background: var(--row-selected); color: var(--accent-strong); } /* 明細展開 */ .dtl-toggle { background: none; border: 1px solid var(--border-strong); border-radius: 5px; cursor: pointer; color: var(--text-muted); font-size: 11px; padding: 1px 7px; } .dtl-toggle:hover { border-color: var(--accent); color: var(--accent-strong); } .dtl-panel { padding: 12px 16px 14px 40px; } .dtl-panel .dtl-cap { font-size: 11px; color: var(--text-dim); margin-bottom: 6px; } table.subgrid { width: auto; min-width: 60%; border-collapse: collapse; background: #fff; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; } table.subgrid th, table.subgrid td { border-bottom: 1px solid var(--border); padding: 5px 12px; font-size: 12px; white-space: nowrap; } table.subgrid thead th { background: var(--bg-subtle); color: var(--text-muted); font-weight: 600; } /* ---------- コンテキストメニュー ---------- */ .ctxmenu { position: fixed; z-index: 60; min-width: 220px; background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow-pop); padding: 6px; display: none; } .ctxmenu.show { display: block; } .ctxmenu .mi { display: flex; align-items: center; gap: 8px; padding: 8px 11px; border-radius: var(--radius-sm); cursor: pointer; color: var(--text); white-space: nowrap; } .ctxmenu .mi:hover { background: var(--accent-soft); } .ctxmenu .mi.pink { color: var(--pink); } .ctxmenu .mi.danger { color: var(--danger); } .ctxmenu .mi.disabled { color: #b3bcc8; cursor: not-allowed; } .ctxmenu .mi.disabled:hover { background: transparent; } .ctxmenu .mi .lbl { flex: 1; } .ctxmenu .mi .hint { font-size: 11px; color: var(--text-dim); } .ctxmenu .sep { height: 1px; background: var(--border); margin: 5px 4px; } /* ---------- ダイアログ / モーダル ---------- */ .overlay { position: fixed; inset: 0; background: rgba(23, 37, 58, .38); display: none; align-items: center; justify-content: center; z-index: 80; } .overlay.show { display: flex; } .dialog { background: var(--bg-elevated); border-radius: 14px; box-shadow: var(--shadow-pop); width: min(560px, 92vw); max-height: 90vh; overflow: auto; } .dialog.wide { width: min(820px, 95vw); } .dialog .dh { padding: 15px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; } .dialog .dh h3 { margin: 0; font-size: 16px; } .dialog .dh .pg { font-size: 11px; color: var(--text-dim); font-variant-numeric: tabular-nums; } .dialog .dh .x { margin-left: auto; cursor: pointer; color: var(--text-muted); background: none; border: none; font-size: 20px; line-height: 1; } .dialog .db { padding: 18px 20px; } .dialog .df { padding: 13px 20px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; align-items: center; } .dialog .df .fnote { margin-right: auto; color: var(--text-dim); font-size: 12px; } .note { color: var(--text-dim); font-size: 12px; } .note.warn { color: var(--st-hold); } .note.danger { color: var(--danger); } .callout { border: 1px solid var(--border); border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 8px; padding: 10px 13px; font-size: 12px; color: var(--text-muted); margin: 0 0 14px; } .callout.warn { border-left-color: var(--st-hold); background: #fdf5e6; color: #8a6712; } /* フォーム */ .form-sec { margin-bottom: 4px; } .form-sec + .form-sec { margin-top: 18px; } .form-sec > h4 { margin: 0 0 10px; font-size: 13px; color: var(--accent-strong); display: flex; align-items: center; gap: 8px; } .form-sec > h4::before { content: ""; width: 4px; height: 14px; background: var(--accent); border-radius: 2px; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; } .field { display: flex; flex-direction: column; gap: 5px; } .field.col2 { grid-column: 1 / 3; } .field > label { font-size: 12px; color: var(--text-muted); } .field > label .req { color: var(--danger); margin-left: 3px; font-weight: 700; } .field input, .field select, .field textarea { font-family: inherit; font-size: 13px; background: var(--bg-input); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); color: var(--text); padding: 7px 10px; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); } .field .hint { font-size: 11px; color: var(--text-dim); } .radio-row { display: flex; gap: 18px; padding: 4px 0; } .radio-row label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; } .form-sec.dim { opacity: .45; } .form-sec.dim .sec-note { opacity: 1; } .sec-note { font-size: 12px; color: var(--st-hold); margin: 2px 0 6px; } /* フォーム内明細テーブル */ .det-tbl { width: 100%; border-collapse: collapse; margin-top: 4px; } .det-tbl th, .det-tbl td { border: 1px solid var(--border); padding: 6px 8px; font-size: 12px; } .det-tbl thead th { background: var(--bg-subtle); color: var(--text-muted); font-weight: 600; text-align: left; white-space: nowrap; } .det-tbl input { width: 100%; border: 1px solid transparent; background: transparent; font-family: inherit; font-size: 12px; padding: 3px 5px; border-radius: 4px; color: var(--text); } .det-tbl input:focus { outline: none; border-color: var(--accent); background: #fff; } .det-tbl input.up { text-transform: uppercase; } input[type=checkbox], input[type=radio] { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; } /* ---------- 帳票/マニュアル DL 一覧 ---------- */ .dl-list { display: flex; flex-direction: column; } .dl-item { display: flex; align-items: center; gap: 14px; padding: 13px 16px; border-bottom: 1px solid var(--border); } .dl-item:last-child { border-bottom: none; } .dl-item .ico { width: 34px; height: 34px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 16px; flex: 0 0 auto; } .dl-item .meta { flex: 1; min-width: 0; } .dl-item .meta .t { font-weight: 600; } .dl-item .meta .s { color: var(--text-dim); font-size: 11px; } .dl-item.gated { opacity: .6; } /* ---------- 帳票プレビュー（紙面） ---------- */ .slip { background: #fff; color: #1f2933; border: 1px solid #d5dbe3; border-radius: 8px; padding: 22px; font-size: 12px; } .slip h4 { margin: 0 0 14px; text-align: center; letter-spacing: .35em; font-size: 15px; } .slip .row { display: flex; justify-content: space-between; border-bottom: 1px dashed #c8ced8; padding: 5px 0; } .slip .row .k { color: #6b7785; } .slip table { width: 100%; border-collapse: collapse; margin-top: 12px; } .slip th, .slip td { border: 1px solid #c8ced8; padding: 5px 7px; } .slip thead th { background: #eef1f5; } .slip .barcode { height: 34px; margin: 8px 0; background: repeating-linear-gradient(90deg, #222 0 2px, #fff 2px 4px, #222 4px 5px, #fff 5px 9px); border-radius: 2px; } /* ---------- トースト ---------- */ .toasts { position: fixed; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 90; } .toast { background: #fff; border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius); padding: 11px 15px; box-shadow: var(--shadow-pop); max-width: 380px; animation: tin .2s ease; } .toast.ok { border-left-color: var(--ok); } .toast.warn { border-left-color: var(--st-hold); } .toast .tt { font-weight: 600; } .toast .ts { color: var(--text-muted); font-size: 12px; margin-top: 2px; } @keyframes tin { from { opacity: 0; transform: translateY(6px); } } /* フッタ注記 */ .footnote { margin-top: 16px; background: var(--bg-panel); border: 1px solid var(--border); border-left: 3px solid var(--pink); border-radius: var(--radius); padding: 11px 15px; color: var(--text-muted); font-size: 12px; line-height: 1.7; } .footnote b { color: var(--text); } .footnote code { background: var(--bg-subtle); border: 1px solid var(--border); padding: 0 5px; border-radius: 4px; font-size: 11px; } /* ---------- お知らせ（IndexMsg.html 準拠） ---------- AS-IS はタイトル一覧が右 200px の