:root { /* | 色はすべてここに集約する。明暗の切り替えは、この値だけを差し替えて行う。 | 個々の宣言に直値を書かないこと。片方のテーマでしか読めない色が生まれる。 */ /* 下地と文字。値はすべて意匠から測ったもの */ --bl-bg: #fbfbfa; --bl-surface: #ffffff; --bl-subtle: #f6f5f3; --bl-border: #ecEAe6; --bl-border-strong: #d5d2ca; /* 一覧の罫線。見出しの下だけ少し濃くして、段の始まりを示す */ --bl-rule: #f1f0ec; --bl-rule-soft: #f5f4f1; /* 入力欄の縁。面を区切る罫線より少しだけ濃い */ --bl-input-border: #e7e5e0; /* 動きの一覧の日付帯。地よりわずかに濃くして段の頭を示す */ --bl-feed-date-bg: #f8f8f6; --bl-text: #1a1a18; /* | 添え字の灰。意匠は #8d8b84 だが、白の上で 3.4:1 しか出ず読めない。 | 色味（色相と彩度）はそのままに、4.5:1 を満たす明るさまで落とした | 値を使う。ここだけは意匠より濃い。 */ --bl-text-muted: #717069; --bl-text-quiet: #5f5d57; --bl-text-disabled: #737066; --bl-link: #0f766e; /* ブランド */ --bl-green: #0f766e; --bl-green-dark: #0b574f; --bl-focus-ring: rgba(15, 118, 110, .18); /* 濃い面（ヘッダー）の上に載るもの。明暗どちらでも濃い面なので変えない */ --bl-header: #26241f; --bl-header-raised: #3a3831; --bl-header-hover: #45423a; --bl-header-text: #c9c4b8; --bl-header-icon: #b6b1a6; --bl-header-strong: #e5e1d7; --bl-header-placeholder: #8f8b81; --bl-header-rule: #45423a; --bl-header-space: #d8d4c9; --bl-header-input-bg: #3a3831; --bl-header-btn-border: #5f5d57; --bl-on-accent: #fff; /* 選んでいる項目。柱でも札でも同じ淡い緑を使う */ --bl-selected-bg: #e9f3f1; --bl-selected-text: #0b574f; /* 優先度の丸。6px なので、面との差が 3:1 を切ると見えなくなる */ --bl-pri-high: #a8501f; --bl-pri-mid: #5f5d57; --bl-pri-low: #949187; /* 自分に関わる行の縁と面 */ --bl-mention-edge: #d98ba6; --bl-mention-row: #fdfbfc; /* 動きの種類の札 */ --bl-act-add-bg: #eeeef8; --bl-act-add-fg: #4f4d8a; --bl-act-edit-bg: #e9f3f1; --bl-act-edit-fg: #0b574f; --bl-act-done-bg: #fbeeea; --bl-act-done-fg: #a8501f; /* 面の使い分け */ --bl-muted-bg: #f1f0ec; --bl-row-hover: #f4f4f1; --bl-btn-hover: #f1f0ec; --bl-th-bg: #f4f4f1; --bl-code-bg: #fbfbfa; --bl-inline-code-bg: #f1f0ec; --bl-quote-text: #6b6963; --bl-avatar-empty-bg: #e7e5e0; --bl-avatar-empty-text: #5f5d57; --bl-board-head: #f1f0ec; --bl-board-over: #e9f3f1; --bl-weekend: rgba(0, 0, 0, .035); /* 状態 */ --bl-danger: #b3453c; /* 断りの面（赤）に載る字。暗いテーマではその赤が明るくなるので反転する */ --bl-on-danger: #ffffff; --bl-success-bg: #e9f3f1; --bl-success-border: #a9cfc9; --bl-error-bg: #fbeeea; --bl-error-border: #efc9be; --bl-error-text: #8f362d; --bl-notice-bg: #fbf3d8; --bl-notice-border: #ecd9b8; /* | 星の色。#b07514 だと白い面で 3.89:1 しか出ず、「★ 1」の字が読めない。 | 金色に見える範囲で、4.5:1 を超えるところまで落としている。 */ --bl-star: #976510; /* 断りの帯の中で使う。淡い橙の面に載るので、印より濃くする */ --bl-warn-ink: #8a5e19; /* 「良い」水準の数字。面の明るさで見え方が変わるので別に持つ */ /* | 文字に使う緑。--bl-green は面や罫線のための色で、暗いテーマでは | そのまま沈む。「選んでいる」を緑の字で示すときは必ずこちらを使う。 */ --bl-good-text: #0f766e; --bl-mention-bg: #e9f3f1; --bl-mention-text: #0b574f; /* | 部品の高さ。padding だけで背を作らないこと。 | input は line-height が normal、a は body の 1.7 を継承するので、 | 同じ padding を書いても 2〜4px ずれて横並びが崩れる。 */ /* 意匠の骨。ヘッダー 52 / 柱 244 / パンくずの帯 62 */ /* 部品の角丸。意匠は入力欄 9 / ボタン 8 / カード 16 */ --bl-radius-control: 9px; --bl-top-h: 52px; --bl-side-w: 244px; --bl-bar-h: 62px; --bl-gutter: 32px; --bl-control-h: 36px; --bl-control-h-sm: 28px; --bl-control-h-lg: 42px; --bl-control-h-header: 30px; --bl-control-px: 10px; /* | 汎用の角丸。意匠の部品はどれも丸く、いちばん小さいところで 8px。 | 大きい面はカード 16 / 柱の項目 10 / 入力欄 9 と個別に持つ。 */ --bl-radius: 8px; --bl-shadow: 0 1px 2px rgba(0, 0, 0, .06); --bl-shadow-up: 0 -2px 8px rgba(0, 0, 0, .08); } /* | 暗いテーマ。 | | 見る人の状態は 3 つある。明示的に選ぶと が付き、 | 既定の「OS に合わせる」では何も付かない。何も付いていない状態を | prefers-color-scheme で拾い、明示的な指定はそれより強くする。 */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bl-bg: #1b1a17; --bl-surface: #242320; --bl-subtle: #2a2925; --bl-border: #35332e; --bl-border-strong: #46443d; --bl-rule: #302e29; --bl-rule-soft: #2a2925; --bl-input-border: #46443d; --bl-feed-date-bg: #2a2925; --bl-text: #edebe6; --bl-text-muted: #a8a59d; --bl-text-quiet: #c3c0b8; --bl-text-disabled: #929089; --bl-link: #5ec8bc; --bl-header: #1a1915; --bl-header-raised: #2a2925; --bl-header-hover: #35332e; --bl-header-rule: #35332e; --bl-header-input-bg: #121110; --bl-selected-bg: #1d3b37; --bl-selected-text: #7fd3c6; --bl-pri-high: #d99a6c; --bl-pri-mid: #a8a59d; --bl-pri-low: #79766f; --bl-mention-edge: #c97e99; --bl-mention-row: #221f21; --bl-act-add-bg: #2a2a3a; --bl-act-add-fg: #b6b4e0; --bl-act-edit-bg: #1d3b37; --bl-act-edit-fg: #7fd3c6; --bl-act-done-bg: #33251f; --bl-act-done-fg: #e0a17a; --bl-muted-bg: #302e29; --bl-row-hover: #2c2a26; --bl-btn-hover: #302e29; --bl-th-bg: #2a2925; --bl-code-bg: #1f1e1a; --bl-inline-code-bg: #302e29; --bl-quote-text: #b4b1a9; --bl-avatar-empty-bg: #3a3831; --bl-avatar-empty-text: #a8a59d; --bl-board-head: #2a2925; --bl-board-over: #33403d; --bl-weekend: rgba(255, 255, 255, .04); --bl-danger: #e89a92; --bl-on-danger: #2e1d19; --bl-success-bg: #16302c; --bl-success-border: #2f5c55; --bl-error-bg: #2e1d19; --bl-error-border: #6b3a31; --bl-error-text: #f0afa3; --bl-notice-bg: #2c2617; --bl-notice-border: #6b5a2c; --bl-star: #d9a550; --bl-warn-ink: #e2b566; --bl-good-text: #2fa39a; --bl-mention-bg: #16302c; --bl-mention-text: #7fd3c6; --bl-shadow: 0 1px 2px rgba(0, 0, 0, .5); --bl-shadow-up: 0 -2px 8px rgba(0, 0, 0, .55); } } :root[data-theme="dark"] { --bl-bg: #1b1a17; --bl-surface: #242320; --bl-subtle: #2a2925; --bl-border: #35332e; --bl-border-strong: #46443d; --bl-rule: #302e29; --bl-rule-soft: #2a2925; --bl-input-border: #46443d; --bl-feed-date-bg: #2a2925; --bl-text: #edebe6; --bl-text-muted: #a8a59d; --bl-text-quiet: #c3c0b8; --bl-text-disabled: #929089; --bl-link: #5ec8bc; --bl-header: #1a1915; --bl-header-raised: #2a2925; --bl-header-hover: #35332e; --bl-header-rule: #35332e; --bl-header-input-bg: #121110; --bl-selected-bg: #1d3b37; --bl-selected-text: #7fd3c6; --bl-pri-high: #d99a6c; --bl-pri-mid: #a8a59d; --bl-pri-low: #79766f; --bl-mention-edge: #c97e99; --bl-mention-row: #221f21; --bl-act-add-bg: #2a2a3a; --bl-act-add-fg: #b6b4e0; --bl-act-edit-bg: #1d3b37; --bl-act-edit-fg: #7fd3c6; --bl-act-done-bg: #33251f; --bl-act-done-fg: #e0a17a; --bl-muted-bg: #302e29; --bl-row-hover: #2c2a26; --bl-btn-hover: #302e29; --bl-th-bg: #2a2925; --bl-code-bg: #1f1e1a; --bl-inline-code-bg: #302e29; --bl-quote-text: #b4b1a9; --bl-avatar-empty-bg: #3a3831; --bl-avatar-empty-text: #a8a59d; --bl-board-head: #2a2925; --bl-board-over: #33403d; --bl-weekend: rgba(255, 255, 255, .04); --bl-danger: #e89a92; --bl-on-danger: #2e1d19; --bl-success-bg: #16302c; --bl-success-border: #2f5c55; --bl-error-bg: #2e1d19; --bl-error-border: #6b3a31; --bl-error-text: #f0afa3; --bl-notice-bg: #2c2617; --bl-notice-border: #6b5a2c; --bl-star: #d9a550; --bl-warn-ink: #e2b566; --bl-good-text: #2fa39a; --bl-mention-bg: #16302c; --bl-mention-text: #7fd3c6; --bl-shadow: 0 1px 2px rgba(0, 0, 0, .5); --bl-shadow-up: 0 -2px 8px rgba(0, 0, 0, .55); } * { box-sizing: border-box; } body { margin: 0; /* | 意匠と同じ Noto Sans JP。実体は public/fonts/noto-sans-jp に置いて | 自前で配る（public/css/fonts.css）。読めなかったときのために、 | これまでの並びをそのまま後ろに残す。 */ font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 13px; line-height: 1.7; color: var(--bl-text); background: var(--bl-bg); } a { color: var(--bl-link); text-decoration: none; } a:hover { text-decoration: underline; } /* ---------------------------------------------------------------- ヘッダー */ .bl-header { background: var(--bl-header); color: var(--bl-on-accent); position: sticky; top: 0; z-index: 20; } .bl-header__inner { max-width: 1440px; margin: 0 auto; padding: 0 16px; /* 子に min-width:auto が残ると、詰まったとき右端が数 px はみ出す */ min-width: 0; display: flex; align-items: center; gap: 4px; height: 48px; } .bl-header__brand { display: flex; align-items: center; gap: 8px; color: var(--bl-on-accent); font-weight: 700; font-size: 15px; margin-right: 16px; white-space: nowrap; } .bl-header__brand:hover { text-decoration: none; } .bl-header__logo { width: 24px; height: 24px; border-radius: 5px; background: var(--bl-green); display: grid; place-items: center; font-size: 13px; color: var(--bl-on-accent); } .bl-header__space { font-size: 11px; color: var(--bl-header-space); font-weight: 400; } .bl-nav { display: flex; gap: 2px; } .bl-nav a { color: var(--bl-header-text); padding: 6px 12px; border-radius: var(--bl-radius); white-space: nowrap; } .bl-nav a:hover { background: var(--bl-header-hover); color: var(--bl-on-accent); text-decoration: none; } .bl-nav a.is-active { background: var(--bl-header-hover); color: var(--bl-on-accent); font-weight: 700; } .bl-header__search { margin-left: auto; display: flex; } .bl-header__search input { width: 220px; height: var(--bl-control-h-header); padding: 0 10px; border: 1px solid transparent; border-radius: var(--bl-radius) 0 0 var(--bl-radius); background: var(--bl-header-input-bg); color: var(--bl-on-accent); font-size: 12px; } .bl-header__search input::placeholder { color: var(--bl-text-muted); } .bl-header__search input:focus { outline: none; border-color: var(--bl-green); } .bl-header__search button { border: none; height: var(--bl-control-h-header); background: var(--bl-green); color: var(--bl-on-accent); padding: 0 12px; border-radius: 0 var(--bl-radius) var(--bl-radius) 0; cursor: pointer; font-size: 12px; } .bl-header__search button:hover { background: var(--bl-green-dark); } /* ------------------------------------------------------------ レイアウト */ .bl-container { max-width: 1440px; margin: 0 auto; padding: 16px; } .bl-page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 14px; } /* 意匠の画面見出し。17px の中太で、上に少し間を置く */ .bl-page-title { font-size: 17px; font-weight: 600; margin: 0; } .bl-page-head__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .bl-page-subtitle { color: var(--bl-text-muted); font-size: 12px; margin: 2px 0 0; } .bl-breadcrumb { font-size: 12px; color: var(--bl-text-muted); margin-bottom: 6px; display: flex; gap: 6px; flex-wrap: wrap; } .bl-breadcrumb span::after { content: "/"; margin-left: 6px; color: var(--bl-border-strong); } .bl-breadcrumb span:last-child::after { content: ""; } /* プロジェクト内のサブナビ */ .bl-subnav { display: flex; gap: 2px; border-bottom: 1px solid var(--bl-border); margin-bottom: 16px; overflow-x: auto; } .bl-subnav a { padding: 8px 14px; color: var(--bl-text-muted); border-bottom: 2px solid transparent; white-space: nowrap; } .bl-subnav a:hover { color: var(--bl-text); text-decoration: none; } .bl-subnav a.is-active { color: var(--bl-text); border-bottom-color: var(--bl-green); font-weight: 700; } /* | 意匠のカードは角丸 16px、罫線だけで影を持たない。下地が暖色なので、 | 影を落とすと濁って見える。 */ .bl-card { background: var(--bl-surface); border: 1px solid var(--bl-border); border-radius: 16px; margin-bottom: 16px; } .bl-card__head { padding: 14px 18px; border-bottom: 1px solid var(--bl-border); font-weight: 700; display: flex; align-items: center; justify-content: space-between; gap: 8px; } .bl-card__body { padding: 18px; } .bl-card__body--flush { padding: 0; } .bl-grid { display: grid; gap: 16px; } .bl-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bl-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .bl-grid--sidebar { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; } @media (max-width: 1000px) { .bl-grid--2, .bl-grid--3, .bl-grid--sidebar { grid-template-columns: minmax(0, 1fr); } } /* ---------------------------------------------------------------- 部品 */ /* | 状態・種別のピル。塗りつぶしではなく、淡い面に濃い文字を載せる | （色は Backlog 由来で明るさがまちまちなので、塗ると読めない）。 | 実際の色は BadgeColor が元の色から作り、style で当てる。 */ .bl-badge { display: inline-block; padding: 1px 9px; border: 1px solid transparent; border-radius: 999px; font-size: 11px; font-weight: 500; line-height: 1.6; color: var(--bl-text); background: var(--bl-muted-bg); white-space: nowrap; } .bl-badge--type { border-radius: 5px; } /* | 課題詳細の状態。結論なので、ほかの札より一回り大きくする。 | 同じ 11px で並べると、種別と状態のどちらが今の話なのか読み取れない。 */ .bl-badge--pill { padding: 4px 14px; font-size: 12px; } /* 面が一段濃いので、字はもう一段濃い方（本文寄り）を使う */ .bl-badge--muted { background: var(--bl-muted-bg); color: var(--bl-text-quiet); } .bl-avatar { --avatar-size: 24px; width: var(--avatar-size); height: var(--avatar-size); border-radius: 50%; display: inline-grid; place-items: center; color: var(--bl-on-accent); font-size: calc(var(--avatar-size) * .45); font-weight: 700; flex: none; vertical-align: middle; } .bl-avatar--empty { background: var(--bl-avatar-empty-bg); color: var(--bl-avatar-empty-text); } /* 上げたアイコン。縦横比が違う画像でも円からはみ出さないように切り取る */ .bl-avatar--image { object-fit: cover; background: var(--bl-avatar-empty-bg); } .bl-user { display: inline-flex; align-items: center; gap: 6px; min-width: 0; } .bl-user__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bl-muted { color: var(--bl-text-muted); } .bl-small { font-size: 11px; } .bl-nowrap { white-space: nowrap; } .bl-overdue { color: var(--bl-danger); font-weight: 700; } /* 必ず入れてもらう欄の印 */ .bl-required { color: var(--bl-danger); } /* | 必ず要る見出しの札。ほかの札より 1 段強くする。 | 面と文字は「いちばん強い操作」と同じ組み合わせにする。 */ .bl-badge--required { background: var(--bl-green); color: var(--bl-on-accent); border-color: transparent; } /* 単価の履歴。札と「削除」を 1 組にして横へ並べる */ .bl-cost { display: inline-flex; align-items: center; gap: 4px; margin-right: 10px; } .bl-empty { padding: 40px 16px; text-align: center; color: var(--bl-text-muted); } /* --------------------------------------------------------------- テーブル */ .bl-table-scroll { overflow-x: auto; } table.bl-list { width: 100%; border-collapse: collapse; font-size: 12px; } /* | 意匠の一覧：見出しは 13px 22px、行は 15px 22px。罫線は行の方が薄い。 | 面で区切らず、余白と罫線の濃淡だけで段を作っている。 */ table.bl-list th, table.bl-list td { padding: 15px 22px; border-bottom: 1px solid var(--bl-rule-soft); text-align: left; vertical-align: middle; } table.bl-list th { padding: 13px 22px; } /* * ヘッダーを position: sticky にしてはいけない。 * 親の .bl-table-scroll は overflow-x: auto で「スクロールコンテナ」になり * （overflow-x を指定すると overflow-y も auto 扱いになる）、sticky の基準が * ビューポートではなくこのコンテナになる。コンテナ内での自然位置は 0 なので * top: 48px の分だけ下へ押し出され、1 行目に覆いかぶさって見えなくなる。 */ table.bl-list thead th { background: none; border-bottom-color: var(--bl-rule); color: var(--bl-text-muted); font-size: 11px; font-weight: 400; white-space: nowrap; } table.bl-list thead th a { color: var(--bl-text-muted); } table.bl-list thead th a.is-sorted { color: var(--bl-text); } table.bl-list tbody tr:hover { background: var(--bl-row-hover); } .bl-list__key { white-space: nowrap; } .bl-list__key a { color: var(--bl-link); font-size: 12px; } .bl-list__summary { min-width: 260px; } .bl-list__summary a { color: var(--bl-text); font-weight: 500; } .bl-list__summary a:hover { color: var(--bl-link); } .bl-child-mark { color: var(--bl-text-muted); margin-right: 4px; } /* 定義リスト（課題の属性） */ .bl-props { margin: 0; font-size: 12px; } .bl-props dt { color: var(--bl-text-muted); font-size: 11px; padding: 8px 0 0; } .bl-props dd { margin: 0 0 8px; padding-bottom: 8px; border-bottom: 1px solid var(--bl-border); word-break: break-word; } .bl-props dd:last-child { border-bottom: none; } /* --------------------------------------------------------- 絞り込みフォーム */ .bl-filter { margin-bottom: 16px; } .bl-filter__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; } .bl-field label { display: flex; align-items: baseline; gap: 10px; font-size: 11px; color: var(--bl-text-muted); margin-bottom: 3px; font-weight: 700; } /* | 見出しの右の近道。「処理済みに設定」「私が担当」など。 | 押す回数がいちばん多い組み合わせを一発で入れるためのもの。 */ .bl-field__set, .bl-field__hint { margin-left: auto; font-size: 11px; font-weight: 400; color: var(--bl-link); white-space: nowrap; } .bl-field__hint { color: var(--bl-text-muted); } .bl-field__set:hover { text-decoration: underline; } /* | 入力と選択は .bl-field の外に置かれることもある（表の中の役割選択など）。 | 要素そのものに当てておかないと、そこだけ素のままの高さになり、 | 隣のボタンと 15px 近くずれる。 | | .bl-bare を付けたものは外す。**囲みの側が枠を描く**入力（担当者の札、 | 知らせたい相手の窓）で、ここで枠を描くと二重に見える。打ち消しの | 決まりを後ろに足す手もあるが、この決まりは :not() を 3 つ持つぶん | 強く、同じだけ強い打ち消しを書くことになる。外す側に書くほうが short。 */ :is(.bl-container, .bl-content) input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(.bl-bare), :is(.bl-container, .bl-content) select:not([multiple]):not(.bl-bare), .bl-login-page input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .bl-login-page select:not([multiple]) { height: var(--bl-control-h); padding: 0 var(--bl-control-px); border: 1px solid var(--bl-input-border); border-radius: var(--bl-radius-control); font-size: 13px; font-family: inherit; line-height: 1.4; background: var(--bl-surface); color: var(--bl-text); vertical-align: middle; } /* 幅は入れ物側で決める。高さと違い、ここは場所ごとに変わってよい */ .bl-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(.bl-bare), .bl-field select:not(.bl-bare) { width: 100%; } :is(.bl-container, .bl-content) select[multiple] { height: 92px; padding: 4px; } :is(.bl-container, .bl-content) input:focus, :is(.bl-container, .bl-content) select:focus, :is(.bl-container, .bl-content) textarea:focus, .bl-login-page input:focus { outline: none; border-color: var(--bl-green); box-shadow: 0 0 0 2px var(--bl-focus-ring); } /* | チェックとラジオは、既定では文字のベースラインに乗るため、 | 四角や丸が 2〜3px 上にずれて見える。行の中心でそろえる。 */ :is(.bl-container, .bl-content) input[type="checkbox"], :is(.bl-container, .bl-content) input[type="radio"] { margin: 0 6px 0 0; vertical-align: middle; } /* 入れ物ごと中央ぞろえにできるブラウザでは、そちらのほうが確実 */ :is(.bl-container, .bl-content) label:has(> input[type="checkbox"]), :is(.bl-container, .bl-content) label:has(> input[type="radio"]) { display: inline-flex; align-items: center; gap: 6px; } :is(.bl-container, .bl-content) label:has(> input[type="checkbox"]) > input, :is(.bl-container, .bl-content) label:has(> input[type="radio"]) > input { margin: 0; } /* | 選択肢の行。ラベルが「項目名」ではなく「選択肢そのもの」なので、 | .bl-field の小さい太字ラベルとは別扱いにする。 */ .bl-choice { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .bl-choice label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 400; color: var(--bl-text); cursor: pointer; } .bl-field__range { display: flex; align-items: center; gap: 4px; } .bl-field__range input { min-width: 0; } .bl-filter__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--bl-border); } /* | inline-flex で中身を中央に置く。inline-block のままだと が | body の line-height 1.7 を拾い、同じ見た目の