/* ============================================================ PresenceAI utilities.css 仕様: docs/18_frontend_design.md 1 プロパティ・1 値のショートカットクラス（Tailwind 風）。 inline style を撲滅するための置換先。実使用に応じて必要なものだけを 定義する方針（未使用クラスは積み増ししない）。命名規則: - 余白: .mt-N / .mb-N / .ml-N / .mr-N / .my-N / .m-0 / .p-N / .px-N / .py-N .ml-auto (右寄せ用) N は --sp-N と対応（0/1/2/3/4 を中心に必要分のみ） - display: .flex / .inline-flex / .inline-block / .block / .hidden / .grid / .inline - flex: .flex-row / .flex-col / .flex-wrap / .flex-col-1/2 / .flex-1 / .flex-none .items-* / .justify-* / .gap-N - 文字: .text-xs/sm/base/lg/xl/2xl / .text-muted/danger/success/warning/accent/light/on-dark .text-success-dark / --warning-dark / --danger-dark / --info-dark / --slate .text-left/center/right / .nowrap / .preline / .prewrap .fw-regular/normal/medium/semibold/bold / .font-mono / .font-inherit - 幅: .w-60/80/100/170/200/full / .max-w-160/none - 微小: .mt-px-4 (4px) / .mt-em-1 (0.25em) - その他: .opacity-55 / .sticky-top / .grid-col-2 / .border-0 / .list-reset .no-decoration / .cursor-pointer / .vertical-middle / .overflow-* ============================================================ */ /* ===== 余白: margin ===== */ .m-0 { margin: 0; } .mt-0 { margin-top: 0; } .mt-1 { margin-top: var(--sp-1); } .mt-2 { margin-top: var(--sp-2); } .mt-3 { margin-top: var(--sp-3); } .mt-4 { margin-top: var(--sp-4); } .mb-1 { margin-bottom: var(--sp-1); } .mb-2 { margin-bottom: var(--sp-2); } .mb-3 { margin-bottom: var(--sp-3); } .mb-4 { margin-bottom: var(--sp-4); } .ml-1 { margin-left: var(--sp-1); } .ml-2 { margin-left: var(--sp-2); } .ml-3 { margin-left: var(--sp-3); } .mr-2 { margin-right: var(--sp-2); } .my-1 { margin-top: var(--sp-1); margin-bottom: var(--sp-1); } .my-2 { margin-top: var(--sp-2); margin-bottom: var(--sp-2); } .my-3 { margin-top: var(--sp-3); margin-bottom: var(--sp-3); } .ml-auto { margin-left: auto; } /* ===== 余白: padding ===== */ .p-0 { padding: 0; } .p-1 { padding: var(--sp-1); } .p-2 { padding: var(--sp-2); } .p-3 { padding: var(--sp-3); } .pl-3 { padding-left: var(--sp-3); } .px-2 { padding-left: var(--sp-2); padding-right: var(--sp-2); } .px-3 { padding-left: var(--sp-3); padding-right: var(--sp-3); } .py-1 { padding-top: var(--sp-1); padding-bottom: var(--sp-1); } .py-2 { padding-top: var(--sp-2); padding-bottom: var(--sp-2); } /* ===== gap ===== */ .gap-1 { gap: var(--sp-1); } .gap-2 { gap: var(--sp-2); } .gap-3 { gap: var(--sp-3); } .gap-4 { gap: var(--sp-4); } /* ===== display / flex ===== */ .flex { display: flex; } .inline-flex { display: inline-flex; } .inline-block { display: inline-block; } .block { display: block; } .inline { display: inline; } .hidden { display: none; } .grid { display: grid; } .flex-row { flex-direction: row; } .flex-col { flex-direction: column; } .flex-wrap { flex-wrap: wrap; } /* 「flex かつ縦並び」のショートカット */ .flex-col-1 { display: flex; flex-direction: column; gap: var(--sp-1); } .flex-col-2 { display: flex; flex-direction: column; gap: var(--sp-2); } .flex-nowrap { flex-wrap: nowrap; } .flex-1 { flex: 1 1 auto; min-width: 0; } .flex-none { flex: 0 0 auto; } .flex-shrink-0 { flex-shrink: 0; } .items-start { align-items: flex-start; } .items-center { align-items: center; } .items-end { align-items: flex-end; } .items-stretch { align-items: stretch; } .items-baseline { align-items: baseline; } .justify-start { justify-content: flex-start; } .justify-center { justify-content: center; } .justify-end { justify-content: flex-end; } .justify-between { justify-content: space-between; } .justify-around { justify-content: space-around; } /* ===== typography ===== */ .text-xs { font-size: var(--fs-xs); } .text-sm { font-size: var(--fs-sm); } .text-base { font-size: var(--fs-base); } .text-lg { font-size: var(--fs-lg); } .text-xl { font-size: var(--fs-xl); } .text-2xl { font-size: var(--fs-2xl); } .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } .text-muted { color: var(--color-text-muted); } .text-light { color: var(--color-text-light); } .text-danger { color: var(--color-danger); } .text-success { color: var(--color-success); } .text-warning { color: var(--color-warning); } .text-on-dark { color: var(--color-text-on-dark); } .text-accent { color: var(--color-accent); } /* ステータス系の濃いめ色（バッジ文字色や成功/警告/エラーの強調表示用）。 CSS 変数の text-success/--color-success は明るめ緑なので、画面上で 読みやすい濃色版を別途用意する（既存 inline で多用されていた色を集約）。 */ .text-success-dark { color: #166534; } .text-warning-dark { color: #b45309; } .text-danger-dark { color: #b91c1c; } .text-info-dark { color: #1d4ed8; } .text-slate { color: #64748b; } .fw-regular { font-weight: var(--fw-regular); } .fw-normal { font-weight: 400; } .fw-medium { font-weight: var(--fw-medium); } .fw-semibold { font-weight: 600; } .fw-bold { font-weight: var(--fw-bold); } .font-mono { font-family: var(--font-mono); } .font-inherit { font-family: inherit; } /* micro margin (px / em 単位) 主にアイコンと文字のベースライン微調整・チェックボックスの並び調整に使用。 */ .mt-px-4 { margin-top: 4px; } .mt-em-1 { margin-top: 0.25em; } /* リストリセット（ul の bullet + 余白を消す） */ .list-reset { list-style: none; padding: 0; margin: 0; } /* grid-column の固定指定 (form-field の 2 列目に揃える等) */ .grid-col-2 { grid-column: 2; } /* border リセット（button 内アクションのリンク化等） */ .border-0 { border: 0; } /* opacity 系（削除済み行のグレーアウト等） */ .opacity-55 { opacity: 0.55; } /* スクリーンリーダー専用テキスト（視覚的には消すが SR では読まれる） .visually-hidden / .sr-only 等で広く知られた標準パターン。 */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* sticky 上端（コードビューア・元ファイル表示の固定） */ .sticky-top { position: sticky; top: 0; z-index: 10; max-height: 40vh; overflow: auto; } /* テキストデコレーション無効 + 色継承（リンクのみ装飾を消したいケース） .card-link との違い: display:block と margin-bottom を含まない */ .no-decoration { text-decoration: none; color: inherit; } .no-decoration:hover { text-decoration: none; } .nowrap { white-space: nowrap; } .preline { white-space: pre-line; } .prewrap { white-space: pre-wrap; } /* ===== サイズ ===== */ .w-full { width: 100%; } .max-w-none { max-width: none; } /* テーブル列・小フォーム用の固定 px 幅。スケールが --sp-N でない理由は、 テーブル列幅・入力欄の物理幅は CSS 変数より絶対 px のほうがブラウザの レイアウト計算と相性が良いため。 */ .w-60 { width: 60px; } .w-80 { width: 80px; } .w-100 { width: 100px; } .w-170 { width: 170px; } .w-200 { width: 200px; } .max-w-160 { max-width: 160px; } /* ===== overflow ===== */ .overflow-auto { overflow: auto; } .overflow-hidden { overflow: hidden; } .overflow-y-auto { overflow-y: auto; } .overflow-x-auto { overflow-x: auto; } /* ===== その他 ===== */ .cursor-pointer { cursor: pointer; } .vertical-middle { vertical-align: middle; }